@charset "utf-8";

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

	#nav_desktop li  {
		display:  inline-block;
	}
	
	#nav_desktop li a:link, #nav_desktop li a:visited, #nav_desktop li a:active  {
		display: inline-block;
		padding: 5px 10px;					/*Innere Abstände der Hauptnavigationspunkte*/
		font-size: 1.2em;                   /*Schriftgrösse der Hauptnavigation*/
		color: #272727;                    	/*Schriftfarbe der Hauptnavigation*/ 
		text-decoration: none;				/*entfernt die Unterstriche bei Links*/
		/*border: 1px solid #dd0000;*/          /*erforderlich fuer IE 7*, gleich wie Hintergrundfarbe*/
	}
	
	#nav_desktop li a:hover  {
		color: #000000;                     /*Schriftfarbe bei Mouse-Hover*/
	}
	
	#nav_desktop li.active > a  {
		color: #9f241d;						/*markiert in Navigation ausgewählte Seite*/
		background-color: #ffffff;			/*ändert die Hintergrundfarbe der Navigationsfläche, ein Rahmen bleibt übrig*/
	}
	
	#nav_desktop ul ul  {
		position: absolute;
		display: none;
		padding: 0 0 0 0;					/*Abstand der Unternavigation zur Hauptnavigation*/
		z-index: 10;
	}
	
	#nav_desktop ul li:hover ul  {
		display: block;
	}
	
	#nav_desktop li li  {
		display: block;
		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 Unternavigatin*/
		padding: 3px 10px;					/*Abstand des Linktextes in der Unternavigationsfläche*/
		font-size: 1em;					/*Schriftgrösse der Unternavigation*/
		color: #272727;						/*Schriftfarbe der Unternavigation*/
		background-color: #efefef;			/*Hintergrundfarbe der Unternavigation*/
		/*border: 1px solid #aa0000;*/			/*erforderlich fuer IE 7*/
	}
	
	#nav_desktop li li a:hover  {
		color: #000000;						/*Schriftfarbe bei Mouse-Hover der Unternavigation*/
	}
	
	#nav_desktop li li.active > a  {
		color: #9f241d;						/*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*/
		/*font-size: 2.5em;
		color: #ffffff;*/
		text-align: center;
		cursor: pointer;
		background-color: #9f241d;		    /*Hintergrundfarbe des Menübutton-Feldes*/
	}
	
	nav {
  		position: absolute;
		width: 300px;					    /*Weite des Navigationsfelde bei breiter Mobile-Ansicht*/
		top: -770px;					    /*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/*
		/*border: solid 1px #0200FF;*/
	}
 
	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: #efefef;		    /*Hintergrundfarbe der Navigationsfläche*/	
	}
	
	nav li a  {
		display: block;
		font-size: 1em;				    /*Schriftgrösse der Hauptnavigatin*/
		padding: 3px 10px;				    /*Abstände der Hauptnavigationspunkte*/
		text-decoration: none;
	}
	
	nav a:link, nav a:visited, nav a:active  {
		color: #272727;					    /*Schriftfarbe der Navigationspunkte*/
	}
	
	nav a:hover  {
		color: #000000;					    /*Schriftfarbe der Navigationspunkte bei Mouse-Hover*/
	}
	
	nav li.active > a  {
		color: #9f241d;						/*markiert in Navigation ausgewählte Seite*/
		background-color: #ffffff;			/*Hintergrundfarbe des aktiven Links*/
		/*border: solid 1px #dd0000;*/			/*Rahmen um die Fläche des aktiven Links*/
	}
	
	nav li li a  {
		padding: 4px 35px;				    /*Abstände der Unternavigationspunkte*/
		font-size: 0.9em;    
	}
	
}

@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*/
	}
	
}