﻿
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}


/* ------------------------------- */


body {
    margin: 0 auto;
	max-width: 960px;
	background-color: #FFFFFF     ;
  background-image: url('../../images/hintergrund-bild-index.jpg');
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-size: 100% 100vh ;
	
}














/* ------------------------------- */




.menue {
 float:right;
  right: 20px;
  margin-top: 20px;
	max-width: 800px;
	background-color:       ;
	text-align:  right;
	padding-right: 20px;
	z-index:10;
	}

<!--      -->



.div-menue-klein {
    position: relative;
  display: none  ;
   float:right;
   top: 20px;

   margin-right: 20px;
  padding-left: 5px;
	width: 30px;
	height: 30px;
	 background-color: #66CCFF ;
	 background-image: url('../../images/h-menue.png');
	 	box-shadow: 3px 3px 3px black;
	 border-radius: 100%;
	 cursor: pointer;
	 z-index:1;

}



  .div-menue-klein:hover {
   	 background-color:  #FFFFFF;

   }




<!--      -->



.menue-klein-2 {
position: relative;
 float:right;
 margin-top: 0px;
 padding-top: 40px;
  margin-right: -50px;
 width: 100%;
 height: 190px;
  ------------------background-color:white;
 background-color:  rgba(255, 255, 255, 0.5)    ;
 display: none;
 z-index:12;
}


/* For mobile phones: */
@media only screen and (min-width: 785px) {
  .menue-klein-2     {
	 height: 0px;
	 top: -300px;
	 background-color: aqua;
}
}




<!--      -->












.schliessen {
	position:absolute;
	 right:20px;
	top: 50px;
	width: 30px;
	height:30px;
	padding-top:2px;
	 border-radius: 50%;
	background-color:white;
	box-shadow: 3px 3px 3px black;

	font-family:Arial, Helvetica, sans-serif;
	color: red;
	font-size: 22px;
	font-style:normal;
	text-align:center;
	cursor: pointer;
	z-index:13;
}


.schliessen:hover {
	background-color:  gray;
}











/* For mobile phones: */
@media only screen and (max-width: 785px) {
  .menue {
	display: none;
}



   .div-menue-klein {
   position: relative;
   float:right;
   display:block;
   top: 50px;
   padding-top: 4px;
   margin-right: 20px;
   padding-left: 5px;
	 width: 30px;
	 height: 30px;
	 background-color:  #66CCFF;
	 	box-shadow: 3px 3px 3px black;
	 border-radius: 100%;
}
}




/* ------------------------------- */




.link-klein {
   display:block;
   margin-bottom:5px;
	margin-left: 100px;
	margin-right:100px;
	height: 25px;
	background-color: #66CCFF;
	text-align:center;
	border-radius: 10px;
	
	font-family:Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style:normal;
	text-decoration:none;
	padding-top:3px;
}



/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */








.absolut-div {
 position: absolute;
 top: 0px;
 max-width: 960px;
 background-color:  rgba( 255, 255, 255, 0.9)    ;
 background-image: url('../../images/bretter-wand-7.png');
 background-repeat:  no-repeat;
 background-position:  60px 0px;
}








.div-rand-oben {
    margin: 0px;
	height: 25px;
	background-color:        ;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	 font-weight:bold;
	 color:gray;
	 text-align:right;
	 padding-top:5px;
	 padding-right: 20px;
	 
}




.oben-gruen {
 margin-top:0px;
 margin-bottom:30px;
	 width: 100%;
	 height: 35px;
background: linear-gradient(to left, #00CC00, #008000);
box-shadow: 0px 5px 10px #808080;

}





.div-logo {
position:  relative;
  width: 220px;
 text-align:center;
top: -80px;
background-color:         ;
z-index: 10;
}






.logo {
 width:200px;
 height:auto;
 border:0px;
	
}


@media (max-width: 785px) {
.logo {
 width:170px;
 height:auto;
 border:0px;
	
}
}










.p-aktuel {
margin: 0px;
 text-align:center;
			background-color:      ;
			z-index:3;
}



















/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */




.div-0 {
margin-top: -100px;

	 width:  ;
	 height: 20px;
	 background-color:     ;
}





/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */






.div-1 {
 width: 100%;
 margin-top: 0px;
      padding-left: 80px;
  padding: 80px;
  text-align:center;
  background-color:       ;

}


@media (max-width: 785px) {



.div-1 {

  padding-left: 10px;
  padding: 10px;
}
}


/* ------------------------------- */


.bild-1 {
width: 100%;
height:auto;
  	border-radius:15px;
	box-shadow: 0px 5px 10px #808080;
	
}




/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */



.div-2 {
 width: 100%;
 margin-top: -60px;
      padding-left: 80px;
      padding-right: 80px;
  text-align:center;
  background-color:       ;

}


@media (max-width: 720px) {
.div-2 {
   margin-top: 15px;
  padding-left: 10px ;
 padding-right: 10px}
}


/* ------------------------------- */


.bild-2 {
width: 100%;
height:auto;
  	border-radius:15px;
	box-shadow: 0px 5px 10px #808080;
	
}







/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */



.div-3 {
 width: 100%;
 margin-top: 15px;
      padding-left: 80px;
      padding-right: 80px;
  text-align:center;
  background-color:       ;

}


@media (max-width: 720px) {
.div-3 {
   margin-top: 15px;
  padding-left: 10px ;
 padding-right: 10px}
}


/* ------------------------------- */


.bild-3 {
width: 100%;
height:auto;
  	border-radius:15px;
	box-shadow: 0px 5px 10px #808080;
	
}




/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */



.div-4 {
 width: 100%;
 margin-top: 15px;
      padding-left: 80px;
      padding-right: 80px;
  text-align:center;
  background-color:       ;

}


@media (max-width: 720px) {
.div-4 {
   margin-top: 15px;
  padding-left: 10px ;
 padding-right: 10px}
}


/* ------------------------------- */


.bild-4 {
width: 100%;
height:auto;
  	border-radius:15px;
	box-shadow: 0px 5px 10px #808080;
	
}



/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */


















/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */


.infos-foto-1-div {
 width: 100%px;
 padding-left: 480px;
 margin-top: -260px;
 height:auto;
}



@media (max-width: 785px) {
.infos-foto-1-div {
 width: 100%px;
 padding-left: 300px;
 margin-top: -260px;
 height:auto;
}
}




@media (max-width: 600px) {
.infos-foto-1-div {
 width: 100%px;
 padding-left: 0px;
 text-align: center;
 margin-top: 30px;
 height:auto;
}
}


/* ------------------------------- */



.infos-foto-div {
 width: 100%px;
 text-align: center;
 margin-top: 0px;
 height:auto;
}




.bild-b {
	border-radius: 15px;}


/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */








.text-infos {
	padding-left: 20px;
	padding-right: 20px;
}



































































/* ------------------------------- */











/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */
/* ------------------------------- */










/* ------------------------------- */
















/* ------------------------------- */













.strich-gruen {
 margin-top: 10px;
	  margin-bottom: 20px;
background: linear-gradient(to left, #00CC00, #008000);
		width: 100%;
		height: 20px;
				box-shadow: 5px 5px 13px grey ;
}



/* For mobile phones: */
@media only screen and (max-width: 760px) {


.strich-gruen {
	  margin-bottom: 0px;
}
}







/* ------------------------------- */



.bilder-unten {
margin-top: 20px;
	width: 100%;
	margin-top: 0px;
	padding-left: 5px;
	padding-right: 5px;
	
	background-color:   aqua     ;
}



.fotos-1 {
float: left;
	width: 25%;
	padding-top: 0px;
	padding-left: 23px;
	padding-right: 23px;
}


.bild {

 width: 100%;
 height:auto;
	border-radius: 10px;
	border: 0px;
	box-shadow: 5px 5px 13px grey;
}





/* For mobile phones: */
@media only screen and (max-width: 600px) {




.fotos-1 {

	width: 100%;
	padding: 20px;
}
}



/* ------------------------------- */





.unten-gruen {
 margin-top:20px;
 margin-bottom:30px;
	 width: 100%;
	 height: 35px;
background: linear-gradient(to left, #00CC00, #008000);
box-shadow: 0px 5px 10px #808080;

}


















/* ------------------------------- */

/* ------------------------------- */

/* ------------------------------- */




	









.rand-unten {
 float: left;
  width: 100%;
  height: auto;
 margin-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
margin-bottom: 0;
background: linear-gradient(to left, #00CC00, #008000);
			box-shadow: 5px 5px 13px grey;

}

/* ------------------------------- */

.links-unten {
	float: left;
  width:200px;
  padding-left:10px;
  background-color:       ;
}


.mitte-unten {
	float: left;
  min-width: 250px;
    padding-left:10px;
  background-color:     ;
  padding-top: 54px;
}


/* ------------------------------- */




.div-rechts-unten {
	float: right;
	width: 285px;
  padding-top: 30px;
	background-color:  ;
}

.rechts-unten-1 {

  width: 100%;
  height: 30px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom:0px;
  background-color:      ;
}


----------------.rechts-unten-2 {
  width: 100% ;
  height: 30px;
  padding: 0px;
  margin-top: 5px;
  background-color:     ;
}





/* ------------------------------- */

/* For mobile phones: */
@media only screen and (max-width: 780px) {




.rand-unten {
 margin-top: 20px;
 
}









.links-unten {
	float: none;
  width:180px;
  text-align:center;
  padding-left:10px;
  background-color:       ;
  margin: auto;
}


.mitte-unten {
	float: none;
  width: 250px;
  text-align:center;
    padding-left:10px;
  background-color:    ;
  padding-top: 0px;
  margin: auto;
}


/* ------------------------------- */


.div-rechts-unten {
margin-top: 0px;
  padding: 0px;
	width: 100%;
}


.rechts-unten-1 {

  width:285px ;
  height: 30px;
  padding: 0px;
  margin: auto;
  background-color:     ;
}


.rechts-unten-2 {

  width:285px ;
  height: 30px;
  padding: 0px;

  background-color:   aqua    ;
}
}


/* ------------------------------- */






