<!doctype html>
<HTML>
<HEAD>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    /*	CSS für alle Screen- und Print-Medien. 
				ei 2019-05-05 Initial version
				ei 2019-09-20 Class .rahmen hinzu.
				ei 2019-12-16 Class .video-container hinzu.
				ei 2020-03-06 Class Summary (Text auf- und zuklappen) hinzu.
				Copyright (c) 2020 | Joerg Eisentraeger | www.joergei.de
				Menue gestaltet nach: https://a-vista-studios.de/blog/webdesign-demos/mobile-menu-ohne-javascript.html
		*/ 
</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 -----------------*/		
		.bild1 {
			max-width: 100%;
			height: auto;
		}
		.bild2 {
			max-width: 100%;
			height: auto;
		}
		.bild3 {
			max-width: 100%;
			height: auto;
		}
		.bild4 {
			max-width: 100%;
			height: auto;
		}
		.bild5 {
			max-width: 100%;
			height: auto;
		}
		.bild6 {
			max-width: 100%;
			height: auto;
		}
		.bild7 {
			max-width: 100%;
			height: auto;
		}
		.bild8 {
			max-width: 100%;
			height: auto;
		}
		.bild9 {
			max-width: 100%;
			height: auto;
		}
		.bild10 {
			max-width: 100%;
			height: auto;
		}
		.bild11 {
			max-width: 100%;
			height: auto;
		}
		.bild12 {
			max-width: 100%;
			height: auto;
		}
	/*------------------------------*/		

	/*----- YouTube Videos - nach https://martinahonecker.com/youtube-videos-responsive-einbinden/ -----*/	
		.video-container {
				position: relative;
				padding-bottom: 56.25%; /* Für Format 16:9 */
				padding-top: 30px;
				height: 0;
				overflow: hidden;
		}
		.video-container iframe,
		.video-container object,
		.video-container embed {
				position: absolute;
				top: 0;
				left: 0;
				max-width: 100%;
				max-height: 100%;
		}

		.video-container-wrapper {
				max-width: 100%;
				width: 400px;
				left: 0;
				right:0;
				margin:auto;
		}
	/*------------------------------*/		

	/*----- Logo -----*/	
		.brand {
			float: right;
			padding: 0.5em 1em 0 0.5em;
		}
	/*----------------*/

	/*----- Rahmen um Flaggenbilder ----*/
		.rahmen {border-style: solid;
      border-color: #000000;
      border-width: 1px;
      padding: 2px
		}
	/*----------------*/

	/*----- Text auf- und zuklappen (auf /cm/index -----*/
		/* Summary-Ueberschrift unterstreichen bei Mouse-Over */
		summary:hover {
			text-decoration: underline;
		}
		/* Kein Rahmen um Summary-Ueberschrift */
		summary:focus {
			outline: none;
		}

	/*----------------*/



	/*----- 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 -----*/

		/*Einblenden Menue-Zeile - fuer breite Bildschirme (Desktop, Tablets)*/				
		@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;
			}			
			main {
				margin: 0em 1em;  /* Oben Links*/
				line-height: 150%;
			}
		}

		/*Formatierung Mobiles Menue - fuer schmale Bildschirme (iPhone & Co.)*/				
		@media screen and (max-width: 960px) 
		{	
			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;
			}
		}

		/*Menue-Zeile und Mobiles Menue ausblenden - fuer Drucker*/				
		@media print 
		{
			nav ul.menu {
				display: none;
			}			
			a#nav-m, a.close {
				display: none;
			}
			nav ul li {
				display: none;
			}			
			main {
				margin: 0em 1em;  /* Oben Links*/
				line-height: 120%;
			}
		}
		

	/*--------------------------------------*/		

</PRE>
</BODY>
</HTML>