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

/* 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: 100.01% Roboto, Arial, Helvetica, sans-serif;
 text-align: center;  
 line-height: 1.10;
 padding: 0;
 margin: 0;
}

.gruen {
 color: #478950;
}

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

#bannerinhalt {
 max-width: 66em;
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between; 
 justify-content: space-between; 
 -webkit-align-items: flex-end; 
 align-items: flex-end; 
 margin: 0 auto 0 auto;
}

.bannerbild {
 border: 1px solid #fff;
 margin: 10px 15px 10px 15px;
}

.ul_im_text, #ul_navi2 {
 list-style-type: none;
}

.ul_im_text li, #ul_navi2 li {
 padding-bottom: 8px;
}

.ul_im_text li:before, #ul_navi2 li:before { 
 content: "\25BA \0020";
 color: #478950; 
 display: inline-block;
 width: 1.2em;
 margin-left: -1.2em;
} 

#ul_navi2 li:before { 
 margin-left: -1.8em;
}

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

#ul_navi li {
 display: inline;
}

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

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

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

#navi2 {
 display: none;
}

#logo {
 margin-bottom: 10px;
 max-width: 100%;
 height: auto;
}

#logo3 {
 position: absolute;
 top: 0;
 right: 5px;
}

#logo4 {display: none;}

#container {
 position: relative;
 max-width: 64em;
 margin: 0px 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;
}

#ueb_mit_logo {
 display: table-cell;
 width: 64em;
 vertical-align: middle;
 height: 100px;
 border-bottom: 1px solid #000;
}

#hauptbereich, #hauptbereich_left {
 margin: 10px 10px 40px 10px;
}

#hauptbereich_left {
 text-align: left;
}

.text_center {
 text-align: center;
}

#fuss {
 background-color: #2A5230;
 background-size: cover;
 color: #fff;
 min-width: 100%;
 min-height: 50px;
 padding: 20px 0 20px 0;
 text-align: center;
 line-height: 1.5;
}

#fuss2 hr {
 color: #fff;
}

#ul_navi a:link, #fuss a:link {
 color: #fff;
 text-decoration: none;
}

#ul_navi a:visited, #fuss a:visited {
 color: #fff;
}

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

#ul_navi a:active, #fuss a:active {
 color: #fff;
}

h1 {
 margin: 0;
 padding-top: 10px;
 padding-bottom: 5px;
} 

h2 {
 font-size: 1.1em;
 font-weight: normal;
 margin: 0;
 padding-top: 15px;
 padding-bottom: 15px;
}

.p_oben {
 margin-top: 0;
}

.p_unten {
 margin-bottom: 25px;
}

#table_beispiel {
 width: 80%;
 border-collapse: collapse;
 border: 1px solid #000;
}

#table_beispiel td {
 border: 1px solid #000;
 padding: 5px;
} 

.td_rechts {
 text-align: right;
 padding-right: 15px;
 width: 20%;
}

.tr_unten {
 height: 2.3em;
 vertical-align: bottom;
 background-color: #ECECEC;
}

.bildbereich {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between; 
 justify-content: space-between; 
 -webkit-align-items: flex-end; 
 align-items: flex-end; 
 margin: 20px 0 20px 0;
}

.bildcontainer {
 margin: 10px 0 10px 0;
 font-size: 1.2em;
 font-weight: bold;
 text-align: center;
}

.bildunterschrift1 {
 width: 100%;
 margin-top: 5px;
 margin-bottom: 5px;
 text-align: center;
 font-size: 1.2em;
 font-weight: bold;
}

.mit_unterschrift {
 margin-bottom: 5px;
}

#slider_textbereich {
 width: 51%;
 text-align: left;
 line-height: 1.3;
}

#slider_textbereich p {
 padding: 0.8em 0 0.8em 0;
}

/* Wechselbilder, angeregt durch www.mediaevent.de */

#gallery {
 position: relative;
 background: transparent;
 border-color: transparent;
 margin: 10px 10px 0 0; 
 width: 47%;
 text-align: left;
}

#gallery .sbild {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
}

#gallery .sbild:last-of-type {
 position: relative;
}

@-webkit-keyframes bilder {
   0% {opacity: 1;} 
  34% {opacity: 1;}
  35% {opacity: 0;}
 100% {opacity: 0;}
}

@keyframes bilder {
   0% {opacity: 1;} 
  34% {opacity: 1;}
  35% {opacity: 0;}
 100% {opacity: 0;}
}

#gallery .sbild:nth-of-type(1) {  
  -webkit-animation: bilder 40s 24s infinite;
  animation: bilder 40s 24s infinite;
}

#gallery .sbild:nth-of-type(2) {  
  -webkit-animation: bilder 40s 14s infinite;
  animation: bilder 40s 14s infinite;
}

#gallery .sbild:nth-of-type(3) {  
  -webkit-animation: bilder 40s 4s infinite;
  animation: bilder 40s 4s infinite;
}

#gallery .sbild:nth-of-type(4) {  
  -webkit-animation: bilder 40s 34s infinite;
  animation: bilder 40s 34s infinite;
}

@-webkit-keyframes wechseln {
    0% {opacity: 1; -webkit-transform: scale(1,1); z-index: 20;}
   20% {opacity: 1; -webkit-transform: scale(1,1);}
   34% {opacity: 0; -webkit-transform: scale(0,0);}
  100% {opacity: 1; -webkit-transform: scale(0,0);}
}

@keyframes wechseln {
    0% {opacity: 1; transform: scale(1,1); z-index: 20;}
   20% {opacity: 1; transform: scale(1,1);}
   34% {opacity: 0; transform: scale(0,0);}
  100% {opacity: 1; transform: scale(0,0);}
}

#gallery .sbild:nth-of-type(5) { 
  -webkit-animation: wechseln 40s 30s infinite;
  animation: wechseln 40s 30s infinite;
}

#gallery .sbild:nth-of-type(6) { 
  -webkit-animation: wechseln 40s 20s infinite;
  animation: wechseln 40s 20s infinite;
}

#gallery .sbild:nth-of-type(7) {  
  -webkit-animation: wechseln 40s 10s infinite;
  animation: wechseln 40s 10s infinite;
}

#gallery .sbild:nth-of-type(8) {  
  -webkit-animation: wechseln 40s infinite;
  animation: wechseln 40s infinite;
}

/* Hamburger-Menue, angeregt durch www.mediaevent.de */

#hmenue {display: none;}

input#hamburg {display: none;}


/* einfacher Breakpoint fuer Smartphone und Tablet hochkant */

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

 /* nur ein Bild im Banner-Bereich */

 #bb2, #bb3, #ul_navi, #fuss2, .nurbreit {display: none;}
 
 .bannerbild {margin: 10px auto 10px auto;} 

 #banner {padding: 0;}

 #bb1 {
  max-width: 70%; 
  height: auto; 
 }

 /* 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: 1px solid #000;
 }

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

 nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
 }
 
 nav ul li {
  padding-bottom: 12px;
 }

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

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

 nav a:hover {
  text-decoration: underline;
 }

 /* Diverse Anpassungen */

 h1 {font-size: 1.2em;}

 #bannerinhalt, .bildbereich { 
  display: block;
  text-align: center;
 }

 #logo {
  max-width: 80%;
 }

 #hauptbereich, #hauptbereich_left {
  margin: 10px 0 20px 0;
 }

 #hauptbereich_left {
  padding: 0 10px 0 10px;
}

 #navi2 {
  display: block;
  width: 13em;
  margin: 0 auto 0 auto;
  font-size: 0.9em;
  text-align: left;
 }

 #gallery {
  margin: 0 auto 0 auto;
  width: 70%;
  height: auto;
 }

 #gallery .sbild, #gallery img {
  width: 100%;
  height: auto;
 }

 #slider_textbereich {
  width: 100%;
  text-align: justify;
  font-size: 0.9em;
 }

 #slider_textbereich p, #navi2 p {
  padding: 0.2em 8px 0.2em 8px;
 }

 #fuss {
  min-height: 0;
  font-size: 0.9em;
 }

 #ueb_mit_logo {
  text-align: center;
 }

 #ueb_mit_logo h1 {
  font-size: 1.3em;
  padding-bottom: 10px;
 }  

 #logo3 {display: none;}

 #logo4 {
  display: inline;
  max-width: 60%;
  height: auto;
 }

 #table_beispiel {
  width: 100%;
  font-size: 0.75em;
 }

 #kontakt_h1, #ueber_uns_h1 {
  text-align: center;
 } 

 #vkarte {
  width: 80%;
  height: auto;
 }

 #foto_philipp {
  max-width: 80%;
  height: auto;
 }

 .beispielbild, .mit_unterschrift {
  max-width: 80%;
  height: auto;
 }

 .bildunterschrift1, .bildunterschrift2 {
  font-size: 1.1em;
  font-weight: normal;
 }

}