html { 
  box-sizing: border-box; 
} 
*, ::before, ::after { 
  box-sizing: inherit; 
}

	body {
    	color:black;            
    	background-color:#FFFDF9; /* #FBF9F3  */
    	margin-left: 0;
    	margin-right:0;
    	margin-top: 0;
    	margin-bottom: 0;
    	font-size: 1.0em;
    	letter-spacing: 0;
	}

	h1, h2, h3	{font-family: serif; }

	p, a {font-family: sans-serif; }
	
	/* COLORS */ 
	/*  footer-color  #e6e600  DUNKLER: 40%  #cccc00 35%  #b3b300  */  
	/* TÜRKIS  #9bedfd */
	/*  ROT  #ca0227  */
	:root {  /* use with: 	background-color: var(--main-color); */
  		--footer-color: #bfbfbf;			/* var(--footer-color); */
  		--footer-color-darker: #999999;			/* var(--footer-color-darker); */  /*  #cccc00 */
  		--footer-color-hell: #ffffb3;
  		--menu-color: #b3ccff;	/* var(--menu-color); */ /*#df9f9f*/
  		--menu-color-darker: #99bbff; /* var(--menu-color-darker); */ /*#cc6666*/
  		--rot: #ca0227; /* var(--rot); */
  		--rot-hell: #fe8198; /* var(--rot); */
  		--rot-hell-hell: #fecdd6;
  		
  		--left-menu-width: 10.0em;	/* var(--left-menu-width); */
	}
	


		/* Skip link */ 
		a.skiplink { /* hidden skip link for accessibility. 
							Note: This does not appear on mobile devices, 
							because most links are displayed on bottom then */
    		display: block;
    		height: 1px;
    		width: 1px;
    		overflow: hidden;
		}
		a.skiplink:focus { /* visible when focus on link (first TAB) */
			content: "Skip to main content ";		
			overflow:visible;						
			background-color:var(--footer-color);
  			border-width:1px;
  			border-style:solid;
  			border-color:black;
  			font-weight:bold; 
  			height: auto;
    		width: auto;
		}	


		/* Seitliche Navigation */
		nav.aside-menu {
   		background-color: var(--menu-color);
   		float: left; 
  			width: var(--left-menu-width);  			
  			height: 100%;
  			height: 100vw;
  			margin: 0px 20px 20px 0px;
		} 
		/* Untere Navigation */
		nav.bottom-menu {
   		background-color: var(--menu-color);
  			width: 100%;
  			margin: 0px 5px 5px 0px;
		} 
		ul.sidemenu {
			list-style-type: none;
			font-weight:normal; 
			font-size:1.0em; 
			padding: 1px 1px 1px 1px;		
		}
		a.aside-menu {			
			color: black;
			background-color:var(--menu-color);  
			font-size: 1.3em;
			text-decoration:none;
  			white-space:pre-wrap; 
  			display:block; 
  			height:2.9em;/*35px;*/			
			padding: 0.5em 1.5em 0.5em 1.5em;			
		}
		a.aside-menu:visited {  
			background-color:var(--menu-color-darker); 
		}
		a.aside-menu:hover { 	
			background-color:var(--footer-color);  
			font-weight: bolder;
		}
		a.aside-menu:focus { 	
			background-color:var(--footer-color);	
			border-width:1px;
			border-style:solid;
  			border-color:black;
		}




		/* Enthaelt nur Navigation: home, links, contact... 
		header {
  			display: flex;
  			flex-flow: row wrap;  
		}
		header * {
  				flex: 1 1 0;
		}
		header img {
  				flex: 0 0 5px;
  				margin-right: 5px;
  				margin-left: 0;
  				padding-left:0;
		}  
		header nav {
  				flex: 1 1 100%;
		} */



		main {
			float: right;
			padding-left: 0px;
			margin-left: 0px;
		}
		
		aside.kurzinfo {
  			width: 36%;
  			padding-left: 15px;
  			margin-left: 15px;
  			float: right;
 			font-style: italic;
  			background-color: var(--rot-hell);
		}		

		ul.kurzinfo {
			list-style-type: circle; /*none;*/
		}
		
		div.wichtig {
			background-color:var(--rot-hell-hell);
		}
	

		footer {
			background-color:var(--footer-color);

			height: 2.0em; 
  			width: 100%;
  			width: 100vw;
			margin: 0 0 0 0;
			position: fixed;
			bottom: 0;
		}
		ul.footer {
			list-style: none;
			display: flex;
  			justify-content: center;  			
		}
		a.footer{
			display: block;
			text-align: center;	
			font-size: 0.8em;					
  			line-height: 1.0em;			
  			text-decoration: none;
  			color: black;
  			/*height:10.0em;/*150%;/*25px;*/ 
			padding-left:20px;
			padding-right:20px;
			padding-bottom:1px;
			padding-top: 1px;
  			font-weight:normal; 
		}
		a.footer:link {  
			background-color:var(--footer-color);
		}
		a.footer:visited {  
			background-color:var(--footer-color-darker); 
		}		
		a.footer:hover { 
			background-color:var(--menu-color);
			font-weight: bolder;
		}
		a.footer:focus { 
			background-color:var(--menu-color);
			font-weight: bolder;
			/*border-width:2px;*/
		}	
	
	
	/* ==================================================================== */
	/*	============================== Spezielles ========================== */
	/* ==================================================================== */

	/* Default case: */
		article {
			margin-left: margin-left: calc(var(--left-menu-width) + 20px); 
		}
		nav.aside-menu {
			/* display the menu on bottom instead of aside */
   		display: inline;
		}    	    	
    	nav.bottom-menu {
				/* display the menu on bottom instead of aside */
   			display: none;
		}    	



	@media screen and (max-width: 45em) { /*  and (orientation: portrait)  */
		
		a.skiplink { /* skip links do not work well in mobile devives
								and the leading menu is short (in footer) */
			display:none;
		}
  		article {
    		margin-left: 5px;
    	}			
		nav.aside-menu {
			/* display the menu on bottom instead of aside */
   		display: none;
		}
		nav.bottom-menu {
			/* display the menu on bottom instead of aside */
   		display: inline;
		}
	}

	@media screen and (min-width: 1100px) { /* very large screen width: */
  		article {
  			/* at most 100 characters */
    		width: 780px;
    		margin-left: calc( var(--left-menu-width) + 20px); 
    	}  	
  	}
  	
	@media print {
  		/* print style  */
		nav.aside-menu {
			display:none;
		}
    	nav.bottom-menu {
				/* display the menu on bottom instead of aside */
   			display: none;
		}			
	}

		
/*
Umwandlung der Zeichen < >...
<code>< xmp > hier nun alles mögliche, inkl. html Code z.B. < /xmp ></code> 
*/