/* Mobile first */

/* experimentell */
html {
    scroll-behavior: smooth;
}

@media screen{
	body {background-image:url(img/brback.jpg);}
	/* nicht beim drucken */
}

body {
	 font-family:'Arial';
	 color:black; 
    margin: 1em;
    font-weight:normal;
    font-size:1em;
}

em{
	color: red;
	font-weight: bold;
}

img.lvlogo {
	float:left;
	width: 20%;
	max-width: 133px;
	height: auto;
	border: 0;
	padding-right: 1%;
	margin-bottom: 0.9em; /* damit <hr> zu den Logos Abstand hält */
}
	
img.bvlogo {
	float:right;
	width: 15%;
	max-width: 100px;
	height: auto;
	border: 0;
	padding-left: 1%;
}

h1 { font-family:'Arial'; color:gray; font-size:1.5em; font-weight:bold; margin: 0; white-space: no-wrap; }
h2 { font-family:'Arial'; color:gray; font-size:1.5em; font-weight:normal; margin: 0;}
h3 { font-family:'Arial'; color:gray; font-size:.75em; font-weight:normal; margin: 0;}

header h3 {text-align: right;}

/* Schrift im header zoomt zusammen wie die Logos bei kleiner Bildbreite */
@media (max-width: 35em){
	header h1 {font-size: 4.5vw;}
	header h2 {font-size: 4.5vw;}
	header h3 {font-size: 2.2vw;}
	}
	
hr{ 
	clear: both;
	}

/*p { font-family:'Arial'; color:black; font-weight:normal; } sieh body*/

/* Navigation soll auf breiten Bildschirmen nebeneinander, auf mobilgeräten
untereinander ausklappbar sein*/

nav {
	height: 33.5em;
	transition: height 0.5s ease-in-out;
	overflow: hidden;
	/*margin: 0 1em;*/
	}

nav ul {
	list-style-type: none;
	padding-left: 0;   
}
	
nav div { 
	/*display: inline;*/
	color:gray; 
	font-size:1.5em; 
	font-weight:normal;
	/*vertical-align: middle;*/
	/*height: 1.75em; 
	margin: 0.1em 0;*/
	margin: 0.1em 0 0.35em 0;
	padding: 0.25em 0 0.25em 0;
	border-top: 1.5px solid black;
	border-bottom: 1.5px solid black;
}

/* Hamburger mit 3 Linien */
/* width und height bestimmen die Größe.
   Die linien-Maße verhalten sich relativ dazu */

#hamburger-icon {
	float: right; 
	width: 1.5em;
	height: 0.75em;
	position: relative;
	display:block;
	margin-top: 0.1em
	/*margin: 100px auto 50px auto;*/
}

.line {
	display: block;
	background-color: #FE9901;
	width: 100%;
	height: 16%;
	/*border-radius: 8%;*/
	position: absolute;
	left: 0;
	transition: all 0.3s;
}

/* obere und untere Linie kreuzen sich, mittlere wir unsichtbar*/
.line-1 {top: 50%; transform: rotate(45deg);}
.line-2 {opacity:0;}
.line-3 {top: 50%; transform: rotate(-45deg);}

.hide .line-1 {top: 0; transform: rotate(0deg);}
.hide .line-2 {top: 50%; opacity:1;}
.hide .line-3 {top: 100%; transform: rotate(0deg);}

/* Ende Hamburger */

nav li {
	/*display: inline;*/
	display: block;
	height:1.9em;
	padding-top: 0.5em;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 0.6em; 
	margin-bottom: 0.6em; 
   background-image:url(img/s8_kachel3.gif);
	background-repeat:repeat-x;
	font-weight:bold;

}

nav ul a:link { color:#FE9901; text-decoration:none;}
nav ul a:visited { color:#FE9901 ;text-decoration:none;}
nav ul a:focus { color:#FE9901; text-decoration:none;}
nav ul a:hover { color:#FFFF00; text-decoration:none;}
nav ul a:active { color:#FE9901; text-decoration:none;}

nav li[aria-current] a {
	color:white;
}

.hide {
	height: 3em;
	/*transition: height 0.5s ease-in-out;*/
	overflow: hidden;
}

main{
	margin-top: 0.5em;
}

article img {
	width: 100%; 
	height: auto;
}

article{
	margin-top: 1em;
	margin-bottom: 3em;
}

table{
	text-align: left;
	width: 100%;
}

td {
	vertical-align: top;
}

aside{	
	margin-top: 3em;
}

.desktop{
 	height: 0;
 	margin: 0;
 	visibility: hidden;
}

#topbutton{
	position: fixed;
	right: 2em;	
	bottom: 2em;
	z-index: 99;
	background-color: gray;
	/*opacity: 90%;*/
	width:1.6em;
	height:.8em;
	padding:.85em .5em .95em .5em;
	border-radius: 1.25em;
	transition:visibility .5s, opacity .8s linear;
}

svg{
	vertical-align: text-top;
}

path{	fill: #FE9901;}
path:hover{	fill: #FFFF00;}
/* path:visited { fill: #FE9901;}
path:focus { fill: #FE9901;}
path:active { fill: #FE9901;} */

.nichtda {
 	visibility: hidden;
 	opacity: 0;
}



/* +++ Bildschirm design +++ */

@media (min-width: 46em) {
 
 body {
   max-width: 64em;
   margin:1em auto;
   }

 /* header als Flexbox-Zeile */ 
 header{
	display: flex; 
   flex-flow: row nowrap;
   justify-content: space-around;
   }
 	
 img.lvlogo {
	flex: 1 1 0%;
  	order: 1;
  	width: 7em;
  	height: 100px;
  	float: none;
  	margin: 0 2.5em 0 1.5em;
  	/*margin-right: 4em;*/
	/*margin: 0px 88px 0px 19px;*/
	}
	
 
 /* die Überschriften als Block */
 header div{
 	flex: 3 1 0%;
  	order: 2;
  	margin:0 1em;
 	}
 	
 header h3 {
 	margin-top: 2em;
 	/*display: inline;
 	vertical-align: bottom;*/
 	}

 header a{
 	flex: 1 1 0%;
  	order: 3;
  	margin-right: 1em;
 	}

 /* warum ist das Bild so klein? wg. geerbt width: 15%*/ 
 img.bvlogo {
 	width: auto;
 	margin: 0 2em 0 2em;
 	/*float: none;*/
	/*flex: 1 1 0%;*/
  	/*order: 3;*/
	/*margin: 0px 60px 0px 90px;*/
	}
	
 hr { margin: 2em 0;}

 
 main {
 	display: flex; 
   flex-flow: row nowrap;
   /*max-width: 60em;*/
   }
    
 nav{
  	/*flex: 1 1 10%;*/
  	/*flex: 1; ohne geht es hier auch mit dem IE */
  	order: 1;
  	height: auto;
  	margin-right: 1em;
  	transition: none;
  	overflow: visible;
 	}
 	
 nav ul { margin: 0;}
 	
 nav li{
 	width: 11em;
 	margin-top: 0;
 	/*margin-bottom: 1.2em;*/
 	}
 	
 .hide {
	height: auto;
	transition: none;
	overflow: visible;
	}
	
 nav div{
 	height: 0;
 	margin: 0;
 	visibility: hidden;
 	}
 	
.mobil{
 	height: 0;
 	margin: 0;
 	visibility: hidden;
 	}

 article{
 	/* hier mit flex */
 	flex: 3;
  	order: 2;
  	margin: 0 1em;
 	}
  
 aside {
 	/*flex: 1; auch hier ohne*/
 	margin-top: 0;
 	margin-left: 1em;
 	width: 11em;
  	order: 3;
 	}
 	
 .desktop{
 	height: auto;
 	margin: 0;
 	visibility: visible;
 	}
 	
 hr.desktop { 
 	 	margin: 2em 0;
 	}		
 		 
 footer {
  	visibility: hidden;
 	}
}