/*   Farben
	
	#b1c800 	Grόn im Logo 	100-50
	#87ab0a		h'grόn
	#027c25  	D'Grόn 			100-20-70-20         #007157  rgba(0, 113, 87, 0.5)
	#c7d8e0		blass-blau		rgba(199, 216, 224, 0.5)       
	#f8f4ce	    blass-gelb
	*/


/* ––––––––––––––––––––––––––––––––––––––––––––––
            Navigation in extra css-Datei
	      inklusive #navarea und a.toggle-nav 
 ––––––––––––––––––––––––––––––––––––––––––––––––*/


nav#navarea {
	clear:both;
	width: 100%; 
	margin: 0 auto;
	padding: 0em 0em 0em 0em;
	background:rgba(255, 0, 0, 0.5);
}



a.toggle-nav {
        display: none;
    }
	
	

ul#navigation {
  width: auto; 
  padding: 0.7em 0 0.5em 0;
  margin: 0em 0 0 0;
  font-family: verdana, arial, sans-serif;
  text-align: center;
  font-size: 0.85em;
  line-height: 1.5em;
  color: #666; /* Farbe des Menόpunktes, der kein Link ist */
  }
  
  



ul#navigation li {
  list-style-type: none;
  
	display:inline-block;
  }


ul#navigation li.last-child	{ 
	clear:right; 
}                     


ul#navigation li a {

	display:block;
	color: #fff;               /* #027c25 */
 	margin: 0em 0.2em 0em .2em;
 	padding: .7em 0.8em .7em 0.8em;
    text-decoration: none;
	border:solid thin;
	border-color:rgba(255, 0, 0, 0.0);
	
}


ul#navigation li a:hover {
	color:#fff;
	/*background:rgba(255, 0, 0, 0.5);  */
	border:solid thin;
	border-color:rgba(255, 0, 0);                /*    border-bottom: 0px #ccc solid;  */
}




/* ––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
                - MITTEL - TABLET -                
––––––––––––––––––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––––––––––––––––––––  */



@media only screen and (max-width: 1040px) {


  
  nav#navarea {
  /*position:absolute;
  top: 10em;*/
  width: 100%;
  background:rgba(255, 0, 0, 0.5);
  float:none;
  margin: 0 0 0 0em;
  padding: 0.5em 0em 1.5em 0em;

}

  a.toggle-nav {
    display: inline-block;
	float:right;
	/*position:relative;
	right: 10%;
    top: 60px;*/
    text-decoration: none;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    border-radius: 0.4em;
    cursor: pointer;
    padding:0.2em 1.1em 0.2em 1.1em;
	margin:0 2em 0 0;
    color: #fff;

}

a.toggle-nav:hover {
    border: 1px solid #D0E4F2;
    background: #D0E4F2;
    color: #1A1F2B;
}


#navigation {
  position:absolute;
  top: -12em;
  transition: 0.9s ease-in-out;
	 
}

#navigation:target {
  position:relativ;
  top: 8em;
	
}
 


ul#navigation {
  max-width: 80%; 
  padding: 0.5em 1.5em 0.5em 1.5em;
  margin: 0em 0 0 0em;
  background:rgba(255, 0, 0, 0.9);
  text-align: center;
  line-height: 1.5em;
  color: #666; /* Hier definieren wir die Farbe des Menόpunktes, der kein Link ist, also den Menόpunkt der Seite auf der wir uns gerade befinden. */
  }
	
		
ul#navigation li a {
	display:block;
	color: #fff; 
	background: none;    /* Farbe vom Menue δndern */
 	margin: 0em 0.2em 0em .2em;
 	padding: .5em 0.8em .5em 0.8em;
    text-decoration: none;
	border:solid thin;
	border-color:rgba(255, 0, 0, 0.0);
 }

ul#navigation li a:hover {
	color:#fff;
	/*background:rgba(255, 0, 0, 0.5);  */
	border:solid thin;
	border-color:rgba(255, 255, 255);                /*    border-bottom: 0px #ccc solid;  */
}



	
}



/* ––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
                       - sehr schmal -           
–––––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 680px) {



ul#navigation {
  
  max-width: 100%;
  padding: 0.5em 1.5em 0.5em 1.5em;
  margin: 0em 0 0 0em;
  background:rgba(255, 0, 0, 0.9);
  text-align: center;
  line-height: 1.5em;
  color: #666; 
  }


	



/* ––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
                    - Schmal - Footer –           
–––––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––––––––––––––––––––– */


}