body{
    font-family: Helvetica, "Courier New", Verdana, "Lucida Grande", "Times New Roman", Georgia, Arial, "Lucida Console";
    background: #e6d2b5;
    font-size: 1em;
}

a{text-decoration: none;}

ul{list-style-type: none;}

#wrap{
  margin-left: auto; 
  margin-right: auto;
  max-width: 1200px; 
}

#logo img{
  width: 238px;
  height: 100px;
  margin-bottom: 5px;
}

#logo img:hover{
  filter: invert(100%);
}

.eng img{ 
  height: 15px;
}

@media only screen and (max-width : 30em) {
  nav li {
    width: 100%;
}
}

/* hamburger anfang */
nav{background:#637d96;}    

nav ul{
  list-style:none;
  background:#637d96;
  padding:0;
  margin:0;
  margin-left:auto;
  display:table;
}  

#nav li {
  float:left;
  margin-left:6px;
  color:orange;
}

#nav a{
  text-decoration:none;
  display:block;
  padding:5px 1em;
  color:inherit;
}

#nav li li{
  float:none;
  margin-left:0;
  padding-top:3px;
  padding-bottom:3px;
}

#nav li>ul{
  position:absolute;
  left:-9999em;
}

#nav li:hover>ul{
  left:auto;
}

#nav li:hover, nav a:focus{
  color:white;
}  

#nav ul:after{
  content:"";
  display:table;
  clear:both;
}

 #resp-menu{display:none;}
 @media screen and (max-width:500px){
   #resp-menu{display:block;}
   body{padding-top:3em;}
   
nav{
  position:fixed;
  top:0;left:0;right:0;
  margin:0;
}

#nav{
  max-height:0;
  overflow:hidden;
  transition:all .6s ease-in-out;
}
  
#resp-menu:target ~ #nav{
  max-height:40em;
}

nav ul{
  margin-left:0;
  display:block;
}

#nav li{float:none;
  text-align:center;
}

#nav li>ul{
  position:static;

}

#resp-menu:not(:target) .close{display:none;}
#resp-menu:target .open{display:none;}
  
.open, .close{
  width:2em;
  height:2em;
  overflow:hidden;
  display:block;
} 
      
.open:before{
  content:"";
  border-top:4px solid orange;
  border-bottom:double 12px orange;
  display:inline-block;
  width:80%;
  padding:4px 0 0;
}
      
.close:before{
  content:"x";
  display:inline-block;
  width:80%;
  text-transform:capitalize;
  font-size:30px;
  line-height:22px;
  color:orange;
}

}

/* hamburger ende */


#navi ul{
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#navi li{
  float: left;    
  border-right: 1px solid #637d96;
}

#navi li.active,#navi li.active a{
  background: #ccc;
  border-top: 0;
}

#navi a{
  display: block;
  text-align: center;
  background: #fff;
  color: #000;
  padding: 14px 16px;
}

#navi a:hover{
  color: #fff;
  background: #ccc;
}

#navie ul{
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#navie li{
  float: left;    
  border-right: 1px solid #637d96;
  border-top: 1px solid #637d96;
}

#navie li.activee,#navie li.activee a{
  background: #ccc;
}

#navie a{
  display: block;
  text-align: center;
  background: #fff;
  color: #000;
  padding: 14px 16px;
  
}
#navie a:hover{
  color: #fff;
  background: #ccc;
}

.exit img{
  height: 15px;
}

p a{color: blue;}
p a:hover{color:white;background:blue;}

#head{
  background: #637d96;
  width: 100%;
  float: left;
  padding: 2%;
  margin-top: 10px;
  margin-bottom: 15px;
} 

#mm{clear: both; width: 100%;}
#ind{clear: both; width: 100%;}
#mich{clear: both; width: 100%;}
#ebt{clear: both; width: 100%;}
#kontakt{clear:both; width: 100%;}
#sf{clear:both; width: 100%;}
#impressum{clear: both; width: 100%;}
#sucht{clear:both; width:100%;}
#sucht ul{list-style-type: lower-alpha;}
#ds{clear: both; width: 100%;}
#bilder{clear: both; width: 100%;}

.bild img{
  max-width: 100%;
  height: auto;
  padding: 5px;
}

.social img{
  float: left;
  height: 100px;
  width: 100px;
  text-decoration: none;
  padding: 5px;
  margin-bottom: 20px;
}

#klo{
  font-size: 0.6em;
}

#footer{
  background: #637d96;
  text-align: right;
  width: 100%;
  clear: both;
  padding:2%;
}

#footer a{
  color:#000;
  
}

#footer a:hover{
  color: #fff;
  text-decoration: underline solid #fff;
}

#hinweis{font-size: 0.7em}

*,*:before,*:after{box-sizing:content-box;}
     
label,input{width:12em;display:block;}

 
input:hover,select:hover,textarea:hover{border:2px solid #ccc;}
input:focus,select:focus,textarea:focus{border:2px solid #637d96}

.required{position:relative;}
.required label:before{content: "*" " ";}
.required p{display:none;}
 
  
.required :hover:required~.require{display:block;}
  
.required :focus:required:invalid~.invalid{display:block;}
  
.required :focus:required~.require{display:none;}
 
  
.required :focus:required:valid~.valid{
    display:block;
}

.required :focus:required:valid~.require, .required :valid:hover ~.require{
    display:none;
}

.invalid,.valid,.require{
    position:absolute;
    margin-top:-3em;
    margin-left:12em;
    background: #637d96;
    color:#fff;
    width:11em;
    padding:1em;
    box-shadow:2px 2px 4px #000;
    border-radius:0.3em;
}
.invalid:before,.valid:before,.require:before{
    content:"";
    border-left:40px solid transparent;
    border-bottom:20px solid #637d96;
    position:absolute;
    left:-30px;
}
  
datalist{display:none;}

#mai li{float:left;}