/*Isarbiker Layout*/

@font-face {
	font-family:'DIN-Medium';
	src: url('DIN-Medium.eot');
	src: url('DIN-Medium.eot?#iefix') format('eot'),
		url('DIN-Medium.woff') format('woff'),
		url('DIN-Medium.ttf') format('truetype'),
		url('DIN-Medium.svg#DIN-Medium') format('svg');
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-2219;
}

@-ms-viewport { width: device-width; }


body      { display:flex; 
            flex-flow: row wrap; 
			 	font-size: 100.1%; background-color: #009;
			 /* color: #0ff; */ 
				margin:0;padding:0;
				font-family:'DIN-Medium',Verdana, Arial, Helvetica, sans-serif;
	}
	

main 	{
		
		flex: 1 0 100%;
		/*border: 1px solid #66FF00;*/ order:1; background-color:silver; color:#009; 
	   display: flex;
	   flex-flow: row wrap;		
	   	order: 4;
	   	font-size:1.2em;
	   	
		}
main > div#m1, main > article {background-color:#C0C0C0; order: 5;}
main > div#m1.wolke, main.wolke > div#m1.wolke 
       main > article .wolke 
			{background:none;}
main > * {margin:1em; }



.smalldis {display: none;}


nav { display:flex; 
		flex: 1 1 100%;  
			flex-flow: row wrap;
		 margin: 0em;
		 padding:0em;		 
		 padding-bottom: 1em; 
	
		 background-color:#555;   
		 order: 1;
		 max-width: 99%;
		 align-content: flex-start;
		 }
 
nav > ul {list-style-type: none; 
			display:flex; 
			flex: 1 0 100%; 
			flex-flow: row wrap;
			 margin: 0em;
			 margin-left:0.2em;
			 padding:0em;		 
 
			}					
				
nav > ul > li > ul,
 nav > ul > li > ul > li > ul {
				display: flex;
				list-style-type:disc; 
				flex: 1 0 100%; 
				flex-flow: column wrap; 
				padding:0.1em;
				padding-left: 0.3em;
			 	font-size: 0.9em;				
				}
/* nav > ul > li > ul * li::before {content: "> ";} */				
nav > ul > li, 
nav > ul > li > ul > li,
nav > ul > li > ul > li > ul > li
			 {  background-color: #DDDDDD; 
			 	/*padding:0.1em 1em 0.2em 0em; */ 			 	
			 	display: block;
			 	width: 9.5em;
			 	margin:1px;
			     }
nav > ul > li>  ul > li {			     
			 	width: 9.5em;
			   }  
			     
			     
nav > ul > li > ul > li {  }			    
			 
nav > ul > li > a, 
nav > ul > li > ul > li > a {}			 

nav > ul * a {
	 display:inline; /* padding: 0.1em 0.5em 0.1em 1.8em; */
	 display: block;
	 width:9.2em; padding:0.1em;
	 padding-left: 0.2em;
	 }		
nav > ul * a ,
nav > ul * a:link,
nav > ul * a:visited {background-color: #AAA; color: #fff; text-decoration: none;} 	 	 
nav > ul > li > a {border-radius:0.4em; border:1px solid #333;}
nav > ul > li.aktiv > a {background-color:#CCE;}


nav > ul > li > a:hover,
nav > ul > li > ul > li > a:hover,
nav > ul > li > ul > li > ul > li > a:hover,
nav > ul * li.aktiv a:active {background-color: #ADF !important; color: #000;}

nav > ul > li.aktiv > a,
nav > ul > li.aktiv > a:link,
nav > ul > li.aktiv > a:visited,
nav > ul > li > ul > li.aktiv > a,
nav > ul > li > ul > li.aktiv > a:link,
nav > ul > li > ul > li.aktiv > a:visited
	 {color:#F63 !important; }
  
		
header 	{flex: 1 0  99%; 
			color:#000066; 
			order:0;
			background-image: none;
			overflow:hidden;
		}
header h1 { color: #CCC;
	text-align: center; margin-top:0em; margin-bottom:0em;}		
		
footer {flex: 1 0 99%; order:99; text-align:center;	
	order:99;
	position:relative;
	bottom:0em;
	margin-top:0.5em;
	 }


figure.fl {display:flex; 
		
        flex-flow: row wrap;
        }
figure.fl > figure { flex: 0 1 12em; border: 1px solid blue; border-radius:0.5em; text-align:center; margin:0.2em;}
figure.fl > figure > img {width:6em; height:auto; padding:0.5em;}
figure.fl > figure > figcaption {text-align:center;padding:0.2em;}
figure.fl > figcaption {flex: 1 0 100%;}

main {border:none;}
main #roterrahmen {border: 5px double red !important; padding: 0em 0.2em !important; }

@media screen and (min-width:60em ) 

/* screen and (orientation: portrait)  */
 /* , screen and (min-width:80em )  and (-webkit-max-device-pixel-ratio: 1) */
 {
	
	nav 	{ flex-flow: row wrap; 
		max-width:10em; 
		flex: 1 1 10em;  	
		font-size:1.0em;
		}
		
	nav > ul {list-style-type: none; 
			display:flex; 
			flex: 1 0 10em; 
			flex-flow: row wrap; 
			}
	nav > ul > li > ul,
	nav > ul > li > ul > li > ul {
				display: flex;
				list-style-type:disc; 
				flex: 1 1 10em; 
				flex-flow: column wrap;
				max-width: 10em;			
		}

	main {	flex: 5 1 80%; 
			font-size:1.0em;
				}
	header { flex: 1 0 99%;
			background-image: url("../img/top_bkgrnd.jpg") ;
			overflow: hidden;  height:108px;}
	header h1 {margin: auto;
	}		
		
			
			

}


/*test 
main { flex: 5 1 100px; }
nav { flex: 1 1 100px; }
*/

/* Rahmen-Element um Textbereich #inhalt  */
/* #inhalts                   { color: #009; background-color: silver; margin-left: 110px; position: absolute; z-index: 5; top: 7em; width: 86%; height:80%;  overflow:auto; }*/
#inhalts                   {  /* nicht mehr verwendet */
	color: #009;
	background-color: silver;
	margin:0em;

}
/*  eigentlicher Textbereich  */

#inhalt      { /* nicht mehr verwendet */
	border: 1px solid #FFCC00;
	color: #009;
	background-color:#CCCCCC;
	font-size: 0.9em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-top: 1.5em;
	margin-left: 65px;
	margin-right:22px;
	margin-bottom:1.7em;
	padding:3em 1em 1em 1em;

}


#kopf   {
	margin: 0 0 5px;
	padding: 0;

	overflow:hidden; /* height ist neu */
}
/* #nav ist der Navi-Bereich, im Print-CSS auf display:none setzen! */
#kopfhg {flex: 1 100%; padding-left:2em; }

main  table tr td ul {margin-left:0.2em;}

#inhalts #inhalt a ,main a  { color: #063; font-weight: bold; text-decoration: none }
.a   { color: #063; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none }
#inhalts #inhalt a:link  , main a:link { color: #063; font-weight: bold; text-decoration: none }
#inhalts #inhalt a:hover , main a:hover  { color: #063; font-weight: bold; text-decoration: underline }
#inhalts #inhalt * th , main * th { color: #c0c0c0; font-weight: bold; background-color: #009; text-align: center; vertical-align: middle }
#inhalts #inhalt * td   , main * td { color: #009; font-size: 0.9em }
#inhalts #inhalt h1, #inhalts #inhalt h2, #inhalts #inhalt h3, #inhalts #inhalt h4,  main h1, main h2, main h3, main h4 
{font-family:'DIN-Medium',Verdana,Arial,Helvetica,sans-serif; color:#FFFFFF; 
background-color:#0000A0; min-width:270px; width:60%; padding:10px; 
border:3px white solid;border-radius:0.4em;}
header #kopfhg h1 {color:#DDD;}
/* secLevel sind die Untermenüs von fstLevel und werden dynamisch angezeigt */
/* wenn im Untermenü ein Eintrag aktiv ist:  */
.rechts { text-align: right; margin: 8px }
/* um float:xy aufzulösen in #nav */
.clr { clear: both }
.clr1       { line-height: 1.2em; margin-top: 4px; width: 95%; clear: both; border-top: 1px solid #00f }
.footer   {  border: 1px solid #999900; color: #39f; font-size: 0.8em; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.fett { font-weight: bold }
.kleiner { font-size: 0.8em }
.linker  { text-align: left; width: 45%; float: left; vertical-align: top }
.rechter    { margin-left: 48%; vertical-align: top }
.einr {text-indent: 1em;}
.hghell {background-image:linear-gradient(to right, orange, transparent);}
.blauelinie {
	width:100%;
	height:2px;
	vertical-align: middle;
	border-top: 1px solid #00f
}
.h1a { text-align: left }
.rechtsb   { line-height: 1.5em; text-align: right }
.imag  { text-align: center; margin: 2px; padding: 2px; border: solid 2px white }
.err  { color: #f00; font-weight: bold }
.hell { color: #fff }
.print {display:none; visibility:hidden;}
.smalldis {display:inline; visibility:visible; background-color:#CCCCCC; }


/** html #nav { position: absolute } */
#inhalt table ,main table {
	border: solid #000000 2px;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
#inhalt td, #inhalt th , main td, main th {
	border: solid #000000 1px;
	margin: 0;
	padding: 0.1em;
}

table.td1 tr th, table.td1 tr td {padding: 0.2em 0.5em; }
table caption {color:#666;font-style:italic;font-size:0.9em;}
html body main div#m1 table tbody tr td ul {padding-left:0.8em;} 
h1 { font-size:1.4em; line-height:1.6em;}
#inhalt ul li, main ul li {
	margin-top: 0.8em;
}
#inhalt ul li ul li , main ul li ul li {margin:0.1em;}

.justl, .just { 
          display: -webkit-box;
                   display: -moz-box;
                   display: -ms-flexbox;
                   display: -webkit-flex;
                  display: flex;
        flex-flow: row wrap;
}

.just { 

    -webkit-align-content: space-around;
    -ms-flex-line-pack: distribute;
    align-content: space-around;

    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    

}
.just img {max-height:250px; margin:5px;}




main ul li h3, main h3.nix, main h4.nix {background:none; border:none; color:#000066; width:auto; line-height:1.1em; margin:0em; }
main ul li p  {margin-top:0; margin-bottom:0; }
.din {font-family:'DIN-Medium',Verdana,Arial,sans-serif; }
.dinb {font-family:'DIN-Medium',Verdana,Arial,sans-serif; color:#FFFFFF; background-color:#0000A0;padding:10px; border:3px white solid; border-radius:0.3em;}




.fancy-input {
	margin: 1em 0 1em 0;
	position: relative;
}

form * .fancy-input label {
	position: absolute;
	color: #009;
	background: #cfc;
	padding: 0 .5em;
	font-size: .8em;
	top: -.6em;
	left: .9em;
}

form  .fancy-input input {
	padding: .5em;
}
form input.muss {background-color:#FFFFAA }
.rr {margin-right: 1em;}


form#datenschutz {border:1px solid red; padding:0.5em;}

form#datenschutz button {line-height: 1.3em; padding: 0.5em 2em; background-image: linear-gradient(to top right, #fff, #69A);}



 /* Smart Phones und Tablets mit mittlerer Auflösung */
         /* @media  all and (min-width: 560px)  and (max-device-pixel-ratio: 3.0) ,
                all and (min-width: 560px)  and ( -webkit-max-device-pixel-ratio: 3.0)
device-pixel-ratio: 0
-webkit-device-pixel-ratio: 0
-o-device-pixel-ratio: 0
-moz-(min-)device-pixel-ratio: 0
(min-)-moz-device-pixel-ratio: 1
                */ 
/*   @media  screen and (min-width:560px)  and (-webkit-max-device-pixel-ratio: 1),
          screen and (min-width:560px) and (-moz-max-device-pixel-ratio: 1),
		  screen and (min-width:560px) and (max--moz-device-pixel-ratio: 1),
          screen and (min-width:560px) and (max-device-pixel-ratio: 1) ,
		  screen and (min-width:560px) and (max-resolution:96dpi),
		  screen and (min-width:769px) 
		  
		  {
.smalldis {display: none;
}		 
header { flex: 1 0 99%;
			background-image: url("../img/top_bkgrnd.jpg") ;
			overflow: hidden; }
		 }
	*/