﻿<!doctype html5>
<html>
<head>
<meta charset="utf-8">

<style>
 nav {width: auto;}
 nav ul {    
   margin: 0.1em;
   padding: 1.8em;    
   text-align: center; /* zentriert die Navigationsleiste */
 }
 nav ul2 {    
   margin: 0.1em;
   padding: 1.8em;    
   text-align: center; /* zentriert die Navigationsleiste */
 }
 nav li {
   list-style: none;
   display: inline-block; /* horizontale Ausrichtung */
   margin: 0.1em; 
   padding: 0;}

 nav a,   nav span {    
   display: block;
   width: 10em;
   margin: 0.6em 1em 0em 0em;    
   padding: 0.4em 0.4em;
   text-decoration: none; 
   font-weight: bold;
   border: 1px solid blue;
   border-radius: 0px 0px 0 0;
   box-shadow: 0px 5px 10px white inset;
   color: gold;
   background-color: #1B2900;
   opacity: 0.85;  
   -webkit-transition: all .25s ease-in;
   transition: all .25s ease-in;   
 }

 nav a:focus,  nav a:hover,  nav span {
   color: black;     
   background-color: gold;
}
 nav a:focus, nav a:hover {margin-top: 0; padding: 1em 0.4em 0.4em;} 

html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
.kopf1, .kopf2, .kopf3, .kopf4 , .kopf6, .kopf7 {font-weight: bold;}
.kopf1, .kopf2, {color: black; font-style: italic;}
.kopf1 {font-size: 1.8em;}
.kopf2 {font-size: 1.5em;}
.kopf3 {font-size: 1.2em; color: darkblue;}
.kopf4, .kopf5 {font-size: 1.3em; color: black;}
.kopf6 {font-size: 1.3em; color: maroon;}
.kopf7 {font-size: 1.0em;}

p {font: Georgia; margin: 0 0 10px} /* Zeilenabstand */

span {color: black;
  font-weight: bold;
  font-size: 1.5em;
  font: Georgia;
  font-style: italic;}


.bild {max-width: 100%;padding: 0px;}
.slide {max-width: 100%;padding: 0px;}

body {font: normal 100.01% Georgia; background-color: floralwhite;} 
body{margin:0}
button {color: gold;
  vertical-align: bottom;
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  background-color: #1B2900; 
  opacity: 0.85;}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Position the "prev button" to the left */
.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/* #flexContainer {display: -moz-box; margin: 0px; padding: 0px;} */ /* Firefox bis 19*/
/* #flexContainer {display: -ms-flexbox; margin: 0px; padding: 0px;} */ /* Internet Explorer 10 */

#flexContainer {display: -flex; margin: 0px; padding: 0px;} /* Opera, Firefox ab 20, Internet Explorer 11*/

#flexContainer {display: -webkit-flex; margin: 0px; padding: 0px;} /* Chrome */


#flexContainer {min-height: 100%;
		background-color:floralwhite;
	        webkit-justify-content:space-end;
	        webkit-flex-wrap: wrap;
                flex-direction: row;

	        flex-wrap: wrap;
	        width: auto;
}

#flexContainer div {flex: 1}
#flexItem1 {background-color:floralwhite; width:auto; padding: 0px;}
#flexItem2 {background-color:floralwhite; width: auto; padding: 10px;}
#flexItem3 {background-color:floralwhite; width: 50%; padding: 10px;}
#flexItem4 {background-color:floralwhite; width: 90%; margin-left: 5%; margin-right: 5%; padding: 10px;}
#flexItem5 {background-color:floralwhite; width: 80%; margin-left: 10%; padding: 20px;}
#flexItem6 {background-color:floralwhite; width: 50%; margin-left: 25%; margin-right: 25%; padding: 10px;}
#flexItem7 {background-color:floralwhite; width: 90%; margin-left: 0%; margin-right: 5%; padding: 10px;}
#flexItem8 {background-color:floralwhite; width: 80%; margin-left: 10%; margin-right: 10%; padding: 10px;}
.kopfbereich {background: url("../bilder/dreizwergeklein.png") no-repeat;}
.footer1 {bottom: 0; left: 0; position: relative;
}


@media screen and (max-device-width:580px)  

{
  
  li:not(:first-child) {display: none;}
  
  li:first-child{display: none;}  
  button {font-size: 1.5em; margin-top: 1em; margin-right: 0.5em; display: block;}
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li {float: none; display: inline; padding:0; margin: 0;}
  ul.topnav.responsive li a {display: block; 
text-align: center; width: 100%; font-size: 1em;}

.kopf1 {font-size: 1.8em;}
.kopf2 {font-size: 1.3em;
}
span {font-size: 1.3em;
}


}


@media screen and (min-device-width:580px) and (max-width: 680px) 
{ 
  li:not(:first-child) {display: none;}
  li:first-child {display: none;}
 
  button {font-size: 1.5em; margin-top: 1.5em; margin-right:0.5em; display: block;}

  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li {float: none; display: inline; padding:0; margin: 0;
}
  ul.topnav.responsive li a {display: block;
 text-align: center; font-size: 1em; width: 100%;} 



}
</style>
</html>