@charset "utf-8";

@media all  {
	
	input#responsive-nav,
	label.responsive-nav-label {
  		display: none;
	}
	
	#responsive-menuebutton  {
		display: none;
	}
	
	#nav_desktop  {
		max-width: 100%;
		height: 3em;
		background-color: #677D8B;			/*Hintergrundfarbe Navigationsbalken*/
	}
	
	#nav_desktop ul  {
		text-align: center;
	}

	#nav_desktop li  {
		display:  inline-block;
		padding: 12px 0 0 0;				/*schiebt a nach unten in den farbigen Balken*/
	}
	
	#nav_desktop li a:link, #nav_desktop li a:visited, #nav_desktop li a:active  {
		/*display: inline-block;*/
		padding: 11px 15px;					/*Innere Abstände der Hauptnavigationspunkte*/
		font-size: 1.5em;                   /*Schriftgrösse der Hauptnavigation*/
		color: #000000;                    	/*Schriftfarbe der Hauptnavigation*/ 
		text-decoration: none;				/*entfernt die Unterstriche bei Links*/
		/*background-color: #D5191C;*/
	}
	
	#nav_desktop li a:hover  {
		color: #ffffff;                     /*Schriftfarbe bei Mouse-Hover*/
	}
	
	#nav_desktop li.active > a  {
		color: #ffffff;						/*markiert in Navigation ausgewählte Seite*/
	}
	
	#nav_desktop ul ul  {
		position: absolute;
		display: none;						/*blendet 2. Navigationsebene aus, wenn nicht Mouse-Hover*/
		padding: 9px 0 0 13px;				/*Abstand der Unternavigation zur Hauptnavigation*/
	}
	
	#nav_desktop li li  {
		padding: 0;							/*2. Navigationsebene fast ohne vertikalen Abstand*/
	}
	
	#nav_desktop ul li:hover ul  {
		display: block;						/*blendet bei Mouse-Hover die 2. Ebenen der Navigation ein*/
	}
	
	#nav_desktop li li  {
		display: block;						/*bringt 2. Navigationsebene untereinander anstatt nebeneinander*/
		text-align: left;					/*positioniert den Text der Unternavigation links*/
	}
	
	#nav_desktop li li a:link, #nav_desktop li li a:visited, #nav_desktop li li a:active  {
		display: block;
		width: auto;						/*Breite der Links der Unternavigation*/
		padding: 8px 10px;					/*Abstand des Linktextes in der Unternavigationsfläche*/
		font-size: 1.25em;					/*Schriftgrösse der Unternavigation*/
		color: #000000;						/*Schriftfarbe der Unternavigation*/
		background-color: #49748F;			/*Hintergrundfarbe der Unternavigation*/
	}
	
	#nav_desktop li li a:hover  {
		color: #ffffff;						/*Schriftfarbe bei Mouse-Hover der Unternavigation*/
	}
	
	#nav_desktop li li.active > a  {
		color: #ffffff;						/*markiert in Unternavigation ausgewählte Seite*/
	}	
	
	
}

@media screen and (max-width: 800px)  {
/*Responsiver Menü-Button erscheint*/
	
	#nav_desktop  {						    /*blendet Desktop-Navigation aus*/
		display: none;
	}	
		
	label.responsive-nav-label {
  		display: block;
		
	}
	
	#responsive-menuebutton  {
		display: block;					    /*blendet Menübutton ein*/
	}	
	
	.menuebutton  {
		float: right;
		width: 90px;					    /*Weite des Menübutton-Feldes*/
		height: 60px;					    /*Höhe des Menübutton-Feldes (gleich wie Höhe der Color-Row)*/
  		padding: 10px 0 0 0;  			    /*Abstand des Menübuttons von der rechten oberen Ecke*/
		text-align: center;
		cursor: pointer;
		background-color: #49748F;		    /*Hintergrundfarbe des Menübutton-Feldes*/
	}
	
	nav {
  		position: absolute;
		width: 300px;					    /*Weite des Navigationsfelde bei breiter Mobile-Ansicht*/
		top: -450px;					    /*Vertikale Warteposition der ausgeblendeten Navigation*/
		right: 90px;					    /*Abstand des Navigationsfeldes vom rechten Rand*/
		transition: top 0.5s;
		text-align: left;				    /*Positioniert den Text der Navigationspunkte*/
		z-index: 10;                        /*wichtig, dass Navigation über einem (iframe z.B. mit Video) liegt*/
	}
 
	input#responsive-nav[type=checkbox]:checked ~ nav {
 		position: absolute;
		top: 60px;						    /*Definiert den vertikalen Abstand der eingeblendeten Navigation vom oberen Rand*/
	}
	
	nav li  {
		list-style-type: none;
		text-decoration: none;		
		background-color: #49748F;		    /*Hintergrundfarbe der Navigationsfläche*/	
	}
	
	nav li a  {
		display: block;
		font-size: 1.5em;				    /*Schriftgrösse der Hauptnavigatin*/
		padding: 5px 10px;				    /*Abstände der Hauptnavigationspunkte*/
		text-decoration: none;
	}
	
	nav a:link, nav a:visited, nav a:active  {
		color: #ffffff;					    /*Schriftfarbe der Navigationspunkte*/
	}
	
	nav a:hover  {
		color: #cccccc;					    /*Schriftfarbe der Navigationspunkte bei Mouse-Hover*/
	}
	
	nav li.active > a  {
		color: #cccccc;						/*markiert in Navigation ausgewählte Seite*/
	}
	
	nav li li a  {
		padding: 4px 35px;				    /*Abstände der Unternavigationspunkte*/
		font-size: 1.2em;    
	}
	
}

@media screen and (max-width: 500px)  {
/*responsive Navigation benötigt ganze Breite*/
	
	nav {
  		width: 100%;				      /*Weite des Navigationsfelde bei breiter Mobile-Ansicht*/
		right: 0;					      /*Abstand des Navigationsfeldes vom rechten Rand aufheben*/
	}
	
}