@font-face { font-family: 'Libertine';
             src: 
                  url('LinLibertine_R.woff')  format('woff'); }
@font-face { font-family: 'Libertine';
             src: url('LinLibertine_RI.woff')  format('woff'); 
                  font-style: italic;}
@font-face { font-family: 'Libertine';
             src: url('LinLibertine_RB.woff')  format('woff'); 
                  font-weight: bold;}
@font-face { font-family: 'Libertine';
             src: url('LinLibertine_RBI.woff')  format('woff'); 
                  font-weight: bold;
                  font-style: italic;}
                  
@font-face { font-family: 'freemono'; 
	src: 		 url('fonts/FreeMono.woff2') format('woff2'); 
		 font-weight: normal;
		 font-style: normal;}
@font-face { font-family: 'freemono'; 
	src: url('fonts/FreeMonoBold.woff2') format('woff2'); 
	font-weight:bold; font-style: normal;}
@font-face { font-family: 'freemono'; src:  url('fonts/FreeMonoBoldOblique.woff2') format('woff2')
; font-weight:bold; font-style: italic;}
@font-face { font-family: 'freemono'; src:  url('fonts/FreeMonoOblique.woff2') format('woff2'); font-style: italic; font-weight:normal;}

@font-face { font-family: 'freesans'; src:  url('fonts/FreeSans.woff2') format('woff2') ;
	font-style: normal; font-weight:normal;} 
@font-face { font-family: 'freesans'; src:  url('fonts/FreeSansBold.woff2') format('woff2'); 
	font-weight:bold; font-style:normal;}
@font-face { font-family: 'freesans'; src:  url('fonts/FreeSansBoldOblique.woff2') format('woff2'); 
	font-weight:bold; font-style: italic;}
@font-face { font-family: 'freesans'; src:  url('fonts/FreeSansOblique.woff2') format('woff2'); 
	font-style: italic; font-weight:normal;}
 
@font-face { font-family: 'Vegur'; src: url('fonts/Vegur-Regular.woff2') format('woff2'); 
font-style:normal; font-weight:normal;}  
@font-face { font-family: 'Vegur'; src:  url('fonts/Vegur-Bold.woff2') format('woff2'); 
	font-weight:bold; font-style:normal; }
                            
 @font-face {font-family:'faww'; src: url('fonts/forkawesome-webfont.woff2') format('woff2'); font-weight:normal;font-style:normal;} 
 
                               
:root
{
/* --red-orange-color-wheel: hsla(17, 88%, 50%, 1);
--corn: hsla(57, 86%, 63%, 1);
--blue-sapphire: hsla(200, 67%, 28%, 1);
--maximum-blue: hsla(196, 50%, 53%, 1);
--columbia-blue: hsla(201, 65%, 88%, 1); */
/* https://www.mediaevent.de/css/farbrechner.html */
/* #990033 = hsla(340,100%,30%, 1); */
--logoorange: hsla(17, 88%, 50%, 1); /* 17 88 50  ef4e0f = #f05011 */
--logogelb: hsla(57, 86%, 63%, 1);	/* 57 86 63 #f1e94f */
--logogelbhg: hsla(57, 86%, 73%, 1);	/* 57 86 73 #f5ef7e  */
--logoblau1: hsla(200, 67%, 28%, 1);	/* 200 67 28 #175777 */
--logoblau2: hsla(196, 50%, 53%, 1);	/* 196 50 53 #4ba3c3 */
--logoblau3: hsla(201, 65%, 88%, 1);	/* 201 65 88 #cce6f4 */
--logodgrau: hsla(0,0%,13%, 1) /* 0 0 13 #222222 */;
--asidegrau: hsl(0,0%,27%, 1 ) /* 0 0 27 #444444 */ ;
--dunkelbraun1: hsla(17,87%,27%,1) /*  17 87 27 #822b09 */;
--dunkelbraun2: hsla(10,75%,27%,1) /* 10 75 27 #782211 */;
--dunkelbraun3: hsla(23,100%,27%,1)	/* 23 100 27 #883300 */ ;
--dunkelgruen1: #53917E; 


}


body{
 	font-size: 100.1%;
 	font-family:freesans, arial, sans-serif;
 	max-width:98%; 
}



	   .left    { text-align: left; }
      .right   { text-align: right; }
      .center  { text-align: center; }
      .justify { text-align: justify; }
      .start   { text-align: start; }
      .end     { text-align: end; }
      .kleiner {font-size: 0.9em;}
      .mini	{font-size: 0.7em;}
      .groesser {font-size: 1.4em;}
      .mittig {vertical-align: middle;}
      
.hellgelb {background-color: #FFFFDD; }     
.hellgelb {background-color: var(--logogelbhg, hsla(57, 86%, 73%, 1) ); }
.logofarbe {color: var(--logoorange, #f05011) ; }
.logofarbe2 {color: #ff5511;   }
.dunkelbraun1 {color:#822b09; }
.dunkelbraun2 {color:#772211; }
.dunkelbraun3 {color:#883300; } 
.faw{font-family:'faww'; }
      
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */  

header, footer {
  width: 98%;
  /* border: 2px solid red; */ 
}

header {text-align: center;
	}
	
header > img { width: 8em;  
		height: auto; 
		margin: 0 auto; 
		text-align: center;
		}
header > h1 {font-size:1.5em; line-height: 1.6em; margin:0em;}		

footer {
border-top: 4px double #FF9933;
border-top-color: var(--logoblau2, hsla(196, 50%, 53%, 1) );
padding-top:1.5em;
text-align: center;
align-items:center;
display: grid;
grid-template-columns:2fr 11em 2fr;
 align-items: center;
color: var(--logograu);
}

main {display: grid;
	grid-template-columns:  1fr;
	font-size: 1.1em;
	color: var(--logodgrau, #222222);
	}
	     
aside {
display:grid;
grid-template-columns: 1fr;
		  margin-left: 0.5em;
		  margin-bottom:1em;
/*		  border:2px solid blue; */ 
		color: var(--asidegrau, #444444);

		} 

/* nav {flex: 1 0 98%; } */
nav#nav2 {position:fixed; top:1em;left:1em; z-index:99; height:1em; width:1em; }

 nav#nav2 > ul { display: flex;
		flex-flow:row wrap;
		flex: 1 1 100%;	
		align-content:flex-start;	
		list-style-type: none; 
		margin:0em;
		padding:0em;
		font-size: 1.1em; 
		
		}

 nav#nav2 > ul > li > ul  { 
		list-style-type: none; 
		margin:0em;
		padding:0em;
		font-size: 0.85em; 
		
		}

		
nav#nav2 > ul > li {margin: 0.5em;
		border:2px solid #CCC; border-radius: 0.3em;  
		border-color: var(--logoblau1);
		background-color:#FF9933;
		background-color: var(--logoblau3);
		width:7.5em;
		}
		
nav#nav2 > ul > li > ul > li {margin: 0.3em;  border:none;}
		
nav#nav2 > ul > li.aktiv {border-width: 3px; border-style: double; }		
/* nav#nav2 > ul > li::before {content: ' > ';} */
nav#nav2 > ul > li a,
nav#nav2 > ul > li a:visited,
nav#nav2 > ul > li a:active  {font-style: italic; display: inline-block; padding: 0.2em;width: 6.5em; 
		}	
nav#nav2 > ul > li a:hover {color: #f05011; }
nav#nav2 > ul > li:hover {border-color: #369;}
nav#nav2 > ul > li a.aktiv {font-weight: bold;text-decoration: none; color: #000;}

nav#nav2 > ul > li > ul > li a
 {font-style: italic; display: inline-block; padding: 0.2em;width: 9em;
		}	
		
		
		
nav#nav2 > ul#nav1.zeigenav { 
	font-size:1.2em; line-height:1.1em; border:2px solid #A52A2A; border-radius:0.3em; 
	display:flex; flex-direction:column; overflow:visible; background-color:#FFF; width:9em;
	margin-top:2.2em;
	}

nav#nav2 > ul#nav1.wegnav { 
	font-size:0.01em; line-height:0.01em; width:0em;height:0em; border:none;
	overflow:visible; 
}

.weg {font-size:0.0em; line-height:0.0em; }
.nichtweg {font-size:0.9em; line-height:1.1em;}

button, button.nichtweg {background:none; font-size:2em; line-height:1.1em; width:1.1em; padding:0em; height:1.1em;
	font-weight:bold;border:1px solid #A52A2A; border-radius:0.3em; /*flex:1 0 1.1em; */ 
	background-color:#fff; font-family:'faww'; position:absolute;
	}

button.weg {padding:0em; border:0em; font-size:0em; line-height:0em; height:0em; width:0em; font-family:'faww';
top:0em; left:0em;}
nav#nav2 > ul#nav1.wegnav li {font-size:0em; line-height:0em; padding:0em; margin:0em;height:0em; width:0em; border:none;}

nav#nav2 button#x2 {background-color:#e5e5e5;color:red;}
nav#nav2 button#x1 {color: #ff5511;}

 
article {
  
  margin: 0em 0.8em;
}
article > h2 {text-indent: 0.5em; color: #ff5511; color: var(--logoorange); color: var(--logoblau1); text-align:center; }
article > p {text-indent: 0.5em;}


footer > p {line-height: 1.1em;margin:0.5em; padding:0em;}
footer > p.xy {}

footer > figure {font-family: freesans, arial, sans-serif; align-content: center; }
footer > figure.biofont, footer > figure.biofont > figcaption  {font-family: Vegur, freesans, sans-serif; align-content: center; font-size:0.9em;}
/* freesans, arial, sans- */

footer > figure > img {height:120%; width:auto;}



div.prod {display: grid;
  grid-template-columns: 1fr;
   border:2px groove #F96; /* #69A;*/ 
   
   border-radius: 0.6em;
  
     /* max-width: 20em; */ 
   padding: 0.3em;
   margin:0.2em;
  }
  
div.prod {display:grid; grid-template-columns: 1fr 2fr; }
div.prod > img {width: 6em; height: 6em;}
 div.prod > table  {flex: 0 1 20em; padding: 0.5em;margin-left:1em; 
			/* border:1px solid #69A; */
			font-size:1.1em;
			}
div.prod > table th, div.prod > table td {vertical-align: top;}

aside {display: grid; grid-template-columns: repeat(auto-fill, minmax(20em,1fr) ) ;}

aside figure  { border:2px groove var(--dunkelgruen1); /* #69A;*/  border-radius: 0.6em; 
display:grid; grid-template-columns: repeat(3,1fr);  margin:0.2em;}
aside figure picture { grid-column: span 1; object-fit:contain; }
aside figure picture img { width:100%; height:auto;}
aside figure table { grid-column: span 2; }
aside figure table tr th, aside figure table tr td {vertical-align:top; text-align:left;}


@media screen and (min-width:55em){

		header {order:-1; }
	main {display: grid; grid-template-columns: 1fr; }
	
/*	aside {grid-template-columns: repeat(2, 1fr) ; } */
	
	
	}	
	
@media screen and (min-width:80em){
/* 	aside {grid-template-columns: repeat(3, 1fr) ; } */

}
	

@keyframes logo {
0%   {transform: scale(1);  }
50% { transform: scale(4)  translatey(1em)}
100% { transform: scale(1) /*top:0em */;}	
		}
header > img { width: 8em;  
		animation: logo 6s 2s ease forwards ;
		
		height: auto; margin: 0 auto; text-align: center;
		}
header > h1 {font-size:1.6em; line-height: 1.7em; margin:0.2em;}		

/* nav { flex: 1 1 6em;
		order:0; 
		
	} */
	
	nav#nav2 {position:fixed; top:1em;left:1em; z-index:99; height:1em; width:1em; display:block}
nav#nav2 > ul#nav1.zeigenav { 
	font-size:1.2em; 
	line-height:1.1em; width:9em;
	}
	
nav#nav2 > ul#nav1{ 
			flex-flow:column wrap;}		
nav#nav2 > ul > li {margin:0.15em;}
nav#nav2 > ul {font-size:1.1em;}

 div.prod  {max-width:30em;}