<!doctype html>
<HTML>
<HEAD>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    /* CSS für alle Screen-Medien. ei 2019-05-03 */
</HEAD>

<BODY>
<PRE>

	/*----- General Formating -----*/	
		h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i { font-family:Verdana; }

		body, html {
			font-family: Verdana, Arial, sans-serif;
			font-size: 1em; /* 0.95em; */ 		
			margin: 0;
			line-height: 180%;
			padding: 0;
			height: 100%;
			width: 100%;
		}
		a:active, a:focus {outline: none;}

		main {
			margin: 0em 1em;  /* Oben Links*/
			line-height: 180%;
		}
	/*------------------------------*/		

	
	/*----- Zeilehoehe 110% ---------*/		
		zhight110 {
			line-height: 110%;
		}
	/*------------------------------*/		

	
	/*----- Bilder -----------------*/		
		.bild {
			max-width: 100%;
			height: auto;
		}
	/*------------------------------*/		

	/*----- Logo -----*/	
		.brand {
			float: right;
			padding: 0.5em 1em 0 0.5em;
		}
	/*----------------*/


	/*----- Menuezeile oben -----*/	
		nav {
			margin: 0 auto;
			width: 100%;
			height: 5em;
			text-align: left;
			position: relative;
			background: rgba(255, 255, 255, 1.0);
			border-bottom: 1px solid white;
			-webkit-transition: all 0.8s ease;
			-moz-transition: all 0.8s ease;
			-o-transition: all 0.8s ease;
			transition: all 0.8s ease;
		}	
		nav ul {
			margin: 0;
			padding: 3.1em 0 0 0;	
			height: 100vh;
		}
		nav ul li {			
			list-style: none;
			margin: 0;
			display: inline;
		}
		nav ul li a {
			color: #009999;
			position: relative;
			padding: 0 0 0.5em 0;
			display: inline-block;
			text-decoration: none;
			<!-- text-transform: uppercase; -->
		}
		nav ul.menu li a:hover {
			color: #03405f;
			border-bottom: 2px solid #03405f;
		}		
	/*----------------*/
	
	
	/*----- Media Queries -----*/
		@media screen and (min-width: 961px) {
			nav ul.menu {
				max-height: 20px;
			}			
			a#nav-m, a.close {
				display: none;
			}
			nav ul li {
				margin: 0 30px 0 0;
			}			
		}


		@media screen and (max-width: 960px) {	
			/*Formatierung Mobiles Menue*/				
			nav ul {
				top: 3em;
				position: absolute;
				background: #ccc;	
				/*background: rgba(200,200,200,0.95);*/
				width: 50%;
				left: -100%;

				list-style-type:none;
				margin: 0;
				padding: 0;				
				transition:all .6s ease;
				-webkit-transition:all .6s ease;
			}
			nav ul li{
				display: block;
				text-align: left;
				padding: 0em 0.5em;
				border-bottom: 1px solid #fff;
			}	
			nav ul li a {
				color: #555;
				padding: 1em 0;				
			}
			nav ul.menu li a:hover {
				border-bottom: 0;
			}			

			/*Hamburger-Icon*/
			a#nav-m img, a.close img {
				width: 40px;
				height: auto;
			}			
			nav > .close,
			a#nav-m:target {
				display: none;
			}

			a:target ~ ul,
			a:target ~ .close {
				display: inline-block;
			}
			
			a:target ~ .close {
				position: absolute;
				margin-left: 0px;
				/* margin-left: -40px; */
			}		

			a:target ~ ul {
				left: 0;
			}
		}
	/*--------------------------------------*/		

</PRE>
</BODY>
</HTML>