/* Zurücksetzen der Auto-Schriftskalierung */
html { 
 -webkit-text-size-adjust: none; 
 box-sizing: border-box;
}

*, *::before, *::after {
 box-sizing: inherit;
}

@font-face {
 font-family: 'symbole';
           src: url('../Fonts/fa-solid-900.woff2')  format('woff2'),
                url('../Fonts/fa-solid-900.woff')  format('woff'),
                url('../Fonts/fa-solid-900.eot')  format('eot'); 
}

/* crete-round-regular - latin */
@font-face {
  font-family: 'Crete Round';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/crete-round-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Crete Round'), local('CreteRound-Regular'),
       url('../Fonts/crete-round-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/crete-round-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../Fonts/crete-round-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../Fonts/crete-round-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../Fonts/crete-round-v8-latin-regular.svg#CreteRound') format('svg'); /* Legacy iOS */
}

/* crete-round-italic - latin */
@font-face {
  font-family: 'Crete Round';
  font-style: italic;
  font-weight: 400;
  src: url('../Fonts/crete-round-v8-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Crete Round Italic'), local('CreteRound-Italic'),
       url('../Fonts/crete-round-v8-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/crete-round-v8-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../Fonts/crete-round-v8-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../Fonts/crete-round-v8-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../Fonts/crete-round-v8-latin-italic.svg#CreteRound') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
 @font-face { 
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
   src: local('Roboto'), local('Roboto-Regular'),
        url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
        url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ 
        url('../fonts/roboto-v18-latin-regular.woff') format('woff'),  /* Modern Browsers */
        url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

body {
 font-family: Roboto, Arial, Helvetica, sans-serif;
 text-align: center;  
 line-height: 1.10;
 padding: 0;
 margin: 0;
}

#hauptmenue, #hauptbereich {
 position: relative;
 width: 80%;
 max-width: 1700px;
 margin: 0 auto;
}

#oben {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between; 
 width: 70%;
 max-width: 1080px;
 margin: 20px auto;
 color: #3d3939;
 text-align: left;
 padding: 10px;
 min-height: 170px;
 box-shadow: 4px 4px 8px #777;
}

#navi1 {
 width: 100%;
 padding: 10px;
 text-align: center;
}

#div_ganz {
 width: 100%;
 padding: 10px;
 text-align: center;
}

#div_left {
 width: 100%;
 padding: 10px;
 text-align: left;
 line-height: 1.5;
}

a:link, a:visited, a:active {
 color: #3d3939;
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}

#div_ganz img {
 width: 35%;
 height: auto;
 margin: 10px auto;
}

#ueberschrift {
}

#ueberschrift h1 {
 font-family: 'Crete Round', Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 margin: 0;
 padding: 30px 15px 0 0;
 font-size: 2em;
}

#ueberschrift h2 {
 margin: 0;
 padding: 20px 15px 0 0;
 font-size: 1.5em;
}

#info {
 padding: 30px 0;
 font-size: 1.3em;
}

#logo {
 width: 100%;
}

#logo img {
 width: 100%;
 height: auto;
}

#hauptmenue {
 color: #afa8a8;
 border-top: 2px solid #d3cdcd;
 padding: 20px 10px;
}

#ul_navi {
 list-style-type: none;
 display: block;
 padding: 0;
 margin: 0;
 text-align: center;
}

#ul_navi li {
 display: inline;
 text-transform: uppercase;
}

#ul_navi li a, #ul_navi li.aktiver_punkt {
 border-left: 1px solid #afa8a8;
 padding-left: 16px;
 padding-right: 16px;
 color: #afa8a8;
 font-size: 1.2em;
 text-align: center;
}

#ul_navi li.aktiver_punkt {
 text-decoration: underline;
}

#ul_navi li a.erster {
 border: none;
}

#navi2 {
 display: none;
}

#ul_navi a:link, #fuss a:link, #ul_navi a:visited, #fuss a:visited, #ul_navi a:active, #fuss a:active {
 color: #afa8a8;
 text-decoration: none;
}

#ul_navi a:hover, #fuss a:hover {
 text-decoration: underline;
}

#teaser, #fuss {
 width: 100%
 max-width: 1920px;
 margin: 0 auto;
}

#teaser img {
 width: 100%;
 max-width: 1920px;
 height: auto;
}

#hauptbereich {
 color: #afa8a8;
 text-align: left;
 padding: 10px;
 min-height: 30em;
}

#fuss {
 background-color: #000;
 color: #fff;
 padding: 20px;
}

#kontaktinfo {margin: 20px;}
 
#hmenue, input#hamburg {display: none;}


/* einfacher Breakpoint fuer Smartphone und Tablet hochkant */

@media only screen and (max-width: 1050px) {

 #oben {
  width: 100%;
  box-shadow: 0 0 0;
 }

 #ul_navi {display: none;}

 #hauptmenue {
  border: 0;
 }

 /* Hamburger-Menue, angeregt durch www.mediaevent.de, Trick mit Checkbox-Label */

 #hmenue {display: inline;}

 label.hamburg { 
  display: block;
  background: #555; width: 75px; height: 50px; 
  position: absolute;
  right: 10px;
  bottom: 10px; 
  margin-left: auto; margin-right: auto;
  border-radius: 4px; 
 }

 .line { 
  position: absolute; 
  left:10px;
  height: 4px; width: 55px; 
  background: #fff; border-radius: 2px;
  display: block; 
  transition: 0.5s; 
  transform-origin: center; 
 }

 .line:nth-child(1) { top: 12px; }
 .line:nth-child(2) { top: 24px; }
 .line:nth-child(3) { top: 36px; }

 #hamburg:checked + .hamburg .line:nth-child(1){
  transform: translateY(12px) rotate(-45deg);
  -webkit-transform: translateY(12px) rotate(-45deg); 
 }

 #hamburg:checked + .hamburg .line:nth-child(2){
  opacity:0;
 }

 #hamburg:checked + .hamburg .line:nth-child(3){
  transform: translateY(-12px) rotate(45deg);
  -webkit-transform: translateY(-12px) rotate(45deg);
 }

 #hmenue ul { 
  height: auto; 
  max-height: 0; 
  overflow: hidden; 
  transition: 0.5s;
  text-align: center;
  font-size: 1.1em;
  background-color: #fff;
  border-bottom: 0px solid #000;
  list-style-type: none;
  padding: 0;
  margin: 0;  
 }

 #hmenue ul li {padding-bottom: 12px;}

 #hmenue ul li:nth-child(1) {padding-top: 12px;}

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

 #hmenue a:hover {text-decoration: underline;}

 #hamburg:checked ~ ul {max-height: 600px;}

}