/****** Navigation, wenn keine Media Queries greifen ******/


nav[role="navigation"]
	{
	background: red;
	color: #333;
	}

nav[role="navigation"] ul 
	{
	padding: 0;
	margin: 0;
	}
	
nav[role="navigation"] li
	{
	display: inline-block;
	padding: 1em;
	margin: 0;
	}
	
nav[role="navigation"] li a
	{
	font-family: Open Sans, tahoma, arial, sans-serif;
	text-decoration: none;
	color: white;
	}

nav[role="navigation"] li.active a 
	{
	text-decoration: underline;
	}

nav li a:first-child
	{
	padding-left:0;
	}
	
	
body {
	min-width: 280px;
	}
	
nav[role="navigation"] div.menubutton
	{
	display: none;
	}

nav[role="navigation"] div.menubutton.fixed	
	{
	display: block;	
	}

nav[role="navigation"] div.menubutton a:hover
		{
		text-decoration: none;
		}

/****** Mobile Navigation ******/	
@media screen and (min-width:200px) and (max-width:1399px)
	{	
	/* Menü-Button sichtbar machen */
	nav[role="navigation"] div.menubutton 
		{
		display: block;
		}
		
	body	{
		position: relative; /* Bezugspunkt für div.menubutton */
		}
	
	/* Schatten zur Trennung des Menüs */
	header[role="banner"]
		{
		box-shadow:0 2px 6px rgba(51,51,51,0.3);
		}
	/* Positionierung Menü-Buttons */
	div.menubutton {
		display:block;
		position: absolute;
		right: 1em;
		top: 1em;
		z-index: 1000;
		}

	/* Gestaltung des Menü-Buttons */
	div.menubutton a {
		display: block;
		color: white;
		background: #333;
		text-decoration: none;
		padding: 0.5em;
		border-radius: 0.25em;
		border: none;
		}

	div.menubutton a.shownavlist:after {
		/*content: " \25bc";  Pfeil nach unten */
		font-size: 11px;
		font-size: 0.6875rem;
		}

	div.menubutton a.hidenavlist:after {
		/*content: " \25b2";  Pfeil nach oben */
		font-size: 11px;
		font-size: 0.6875rem;
		}
		
	div.menubutton a.hidenavlist {
		display: none;
		}
		
	/* Basisgestaltung für den Navigationsbereich */
	nav[role="navigation"] 
		{
		padding: 0 1rem;
		margin: 0;
		background: red;
		}

	nav[role="navigation"] ul#navlist 
		{
		max-height: 0; /* Ausblenden der Navigation */
		overflow: hidden;
		transition: 0.25s;
		list-style-type: none;
		border-radius: 0 0 1rem 1rem;
		margin: 0;
		}
		
	nav[role="navigation"] li 
		{
		display: block;
		border-bottom: 1px solid #ddd;
		background: #333;
		}
		
	nav[role="navigation"] li:last-of-type 
		{
		border-bottom: 0;
		}
		
	nav[role="navigation"] li a 
		{
		font-family: Open Sans, tahoma, arial, sans-serif;
		display:block;
		text-decoration: none;
		color: white;
		}

	nav[role="navigation"] li:hover,
	nav[role="navigation"] li:focus
		{
		color: white;
		text-decoration: underline;
		background: #333;
		}	
	

		
	nav[role="navigation"] li.active  {
		background: #333;
		color: red;
		text-decoration: none;
		}
		
	/* Einblenden der Navigation */
	#menu:target nav[role="navigation"] ul#navlist {
		max-height: 65rem;
		}


	/* Ausblenden des v-Menü-Buttons (mit Pfeil gegen unten)  */	
	#menu:target a.shownavlist {
		display: none;
		}
	/* Einblenden des ^-Menü-Buttons (mit Pfeil gegen oben)  */	
	#menu:target a.hidenavlist {
		display: block;
		}
		

	

	}	
	
	

/****** Desktop-Navigation ******/
@media screen and (min-width: 1400px)
	{
	header[role="banner"]
		{
		/*box-shadow: 0 2px 6px rgba(51,51,51,0.3);*/
		}
	
	nav[role="navigation"]
		{
		background: #333;
		/* padding: 0 1em 0 1em; 17.04*/
		margin: 0;
		border-radius: 0 0 0 0;
		}
		
	nav[role="navigation"] ul
		{
		position: relative;
		margin: 0;
		display:flex;
		flex-flow: row nowrap;
		justify-content:center;
		margin-left:1.041666666667%;
		margin-right:1.041666666667%;
		}
		
	nav[role="navigation"] li
		{
		list-style-type: none;
		display: inline-block;
		font-size: 1.2rem;
		font-weight: normal;
		background-color: #333;
		margin: 0 0.5rem 0 0.5rem;
		padding:0;
		}

	nav[role="navigation"] li:first-of-type
		{
		margin-left:0;
		}

	nav[role="navigation"] li:last-of-type
		{
		margin-right:0;
		}		

	nav[role="navigation"] li:first-of-type a
		{
		padding-left:0;
		}

	nav[role="navigation"] li:last-of-type a
		{
		padding-right:0;
		}		

	nav li:first-child
		{
		/*margin-left:10px;*/
		}
		
		
	nav[role="navigation"] li a
		{
		font-family: Open Sans, tahoma, arial, sans-serif;
		display: block;
		color: white;
		text-decoration: none;
		border-radius: 0 0 0 0;
		padding: 1rem;
		height:100%;
		width:100%; 
		}
		
	nav[role="navigation"] li a:hover,
	nav[role="navigation"] li a:focus
		{
		color: white;
		text-decoration: underline;
		background: #333;
		}
		
/*		
	nav li a:first-child
	{
	padding-left:0;
	}
*/	
	nav[role="navigation"] li.active
		{
		background:#333;
		color: red;
		text-decoration: none;
		}

	nav[role="navigation"] li:hover,
	nav[role="navigation"] li:focus
		{
		color: white;
		text-decoration: underline;
		background: #333;
		}
	div.navwrap
		{
		width:97.91666666666667%;
		}
		
	nav[role="navigation"] div.menubutton.fixed
		{
		}
		
	nav[role="navigation"] div.menubutton.fixed	a
		{
		background: #333;
		color: white;
		display: block;
		border-radius: 0.25em;
		}
	}