h1 {display: none;}

h2 {
 font-family: 'Crete Round';
 font-style: italic;
 font-size: 2em;
 margin: 0;
 padding-top: 5px;
 padding-bottom: 5px;
 color: #440800;
} 

hr {
 height: 1px;
 background-color: #440800;
 border: none;
}

/* ---------------------------------- Kopf, Banner ----------------------- */

@keyframes wechseln2 {
  0% {opacity: 0;}
 15% {opacity: 1;}
 30% {opacity: 1;}
 45% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes wechseln2 {
  0% {opacity: 0;}
 15% {opacity: 1;}
 30% {opacity: 1;}
 45% {opacity: 0;}
100% {opacity: 0;}
}

.sliderbild, .sliderbild2 {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 width: 100%;
 height: auto;
 animation: wechseln2 80s infinite;
 -webkit-animation: wechseln2 80s infinite;
}

.sliderbild:nth-of-type(2), .sliderbild2:nth-of-type(2) {
 animation-delay: 20s;
 -webkit-animation-delay: 20s;
 opacity: 0;
}

.sliderbild:nth-of-type(3), .sliderbild2:nth-of-type(3) {
 animation-delay: 40s;
 -webkit-animation-delay: 40s;
 opacity: 0;
}

.sliderbild:nth-of-type(4), .sliderbild2:nth-of-type(4) {
 animation-delay: 60s;
 -webkit-animation-delay: 60s;
 opacity: 0;
}

.platzhalter {
 position: relative;
 width: 100%;
 height: auto;
}

.flagge {
 position: absolute;
 right: 0;
 top: 0;
 z-index: 99;
}


#banner {
 position: relative;
 background-size: cover;
 min-width: 100%;
 padding: 0;
 margin-bottom: 0;
 text-align: center;
}

#bannerbilder1, #bannerbilder2 {
 max-width: 1600px;
 max-height: 400px;
 margin: 0 auto 0 auto;
 position: relative;
}

#bannerbilder1 img, #bannerbilder2 img {
 display: block;
}


#hmenue, input#hamburg, #bannerbilder2, .schmal  {display: none;}

/* ---------------------------------- Hauptbereich ----------------------- */

#container {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between; 
 max-width: 1600px;
 margin: 0 auto 5px auto;
 background-color: #fff;
 min-height: 30em;
}

#container a:link, #container a:visited, #container a:active {
 color: #000;
 text-decoration: none;
}

#container a:hover {
 color: #000;
 text-decoration: underline;
}


/* ---------------------------------- 3 Bereiche ----------------------- */

.hauptbereich {
 width: 30%;
 text-align: center;
 line-height: 1.4;
 color: #440800;
 margin: 10px 5px 30px 5px;
 padding: 0 5px;
}

.hauptbereich img {
 box-shadow: 3px 3px 5px #000;
 width: 100%;
 height: auto;
}

.hauptbereich p {text-align: justify;}


@media only screen and (max-width: 1600px) {
 h2 {font-size: 1.6em;}
} 

@media only screen and (max-width: 1300px) {
 h2 {font-size: 1.3em;}
 .hauptbereich {width: 32%;}
}

@media only screen and (max-width: 900px) {
 h2 {font-size: 1.7em;}
 .hauptbereich {
  width: 75%;
  margin: 5px auto; 
 }
 .hauptbereich img {width: 75%;} 
 #container { 
  -webkit-justify-content: center;
  justify-content: center;
 }
 #bannerbilder1  {display: none;}
 #bannerbilder2  {display: block;}
}

@media only screen and (max-width: 500px) {
 h2 {font-size: 1.5em;}
 .hauptbereich {width: 95%;}
 .hauptbereich img {width: 100%;}  
 .breit {display: none;} 
 .schmal {display: inline;}
}

@media only print {
 h2 {font-size: 1.7em;}
 .hauptbereich {
  width: 100%;
  margin: 5px auto; 
 }
 .hauptbereich img {width: 40%;} 
 #container { 
  -webkit-justify-content: center;
  justify-content: center;
 }
 #bannerbilder1, #fuss_links  {display: none;}
 #bannerbilder2  {
  display: block;
  width: 70%;
 }
}