@charset "UTF-8";
/* CSS Document */
@font-face {
   font-family: "FS Me W01 Light";
   src: url("../fonts/5963814/4ff257e8-b47e-482e-9fe1-69c0f5e814a2.woff2") format("woff2"), url("../fonts/5963814/566917f7-b819-43e4-a102-831d1b77c970.woff") format("woff");
}
@font-face {
   font-family: "FS Me W01 Regular";
   src: url("../fonts/5963851/dd00d9f2-4364-410c-a230-c80aa01f79eb.woff2") format("woff2"), url("../fonts/5963851/7b1c030f-d5e1-4313-afd9-2a8747e861e2.woff") format("woff");
}
@font-face {
   font-family: "FS Me W01 Bold";
   src: url("../fonts/5963870/7b88d3d2-f039-4460-98fc-47c718ce0379.woff2") format("woff2"), url("../fonts/5963870/de2ab461-3fb8-4c23-8138-46aeeb0c2f57.woff") format("woff");
}
html {
   background-color: #4C7D9F;
}
body {
   font-family: "FS Me W01 Regular", "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;
   max-width: 1024px;
   align-content: center;
   background-color: #fff;
   margin: 0 auto;
   padding: 0;
}
div#header, p#footer {
   text-align: left;
   width: calc(100% - 20px);
   padding: 10px;
   margin: 0px auto;
}
#header {
   text-align: left;
   padding: 0;
   margin: 0 auto;
   background-color: #fedb67;
}
#header, #inhalt, #footer {
   width: 100%;
   max-width: 1024px;
   margin: 0px auto;
   padding: 0px;
}
#inhalt {
   padding: 0px;
   margin: 0 auto;
}
#inhalt a {
   color: #448D3D;
}
img.normal {
   max-width: 100%;
}
#inhalt li {
   padding-bottom: 10px;
}
#headerleichtesprache {
   background-color: #448D3D;
   color: white;
   padding: 15px;
   margin: 0px;
   display: none;
    text-align: center;
}
#iconleichtesprache:hover {
    cursor: pointer;
} 
#iconleichtesprache:hover > #headerleichtesprache {
   display: block;
} 





.hilfevorlesen {
   display: block;
   margin: 0px auto;
   padding: 0px;
   width: 100px;
   height: 50px;
}
.vorlesen {
   display: none;
}
.hilfebutton .hilfevorlesen:hover {
   text-align: center;
   width: 100%;
}
.hilfebutton .hilfevorlesen:hover p.vorlesen {
   display: block;
}
.hilfebutton .hilfevorlesen:hover p.vorlesenbutton {
   display: none;
}
.hilfeleichtesprache {
   display: block;
   margin: 0px auto;
   padding: 0px;
   width: 100px;
   height: 50px;
}
.leichtesprache {
   background-color: #448D3D;
   color: white;
   padding: 15px;
   margin: 10px;
   display: none;
   border-radius: 15px;
}
.hilfebutton .hilfeleichtesprache:hover {
   text-align: center;
   width: 100%;
   height: auto;
}
.hilfebutton .hilfeleichtesprache:hover p.leichtesprache {
   display: block;
}
.hilfebutton .hilfeleichtesprache:hover p.leichtesprachebutton {
   display: none;
}
.hilfebutton {
   margin: 0px auto;
   text-align: center;
   padding: 0px;
}
.hilfebutton img {
   height: 40px;
   margin: 0px;
   padding: 0px;
}
.startseite #box1 {
   margin: 0 auto 0;
   padding: 10px;
   background-color: #576749;
   width: calc(100%-20px);
   color: white;
   text-align: center;
}
.startseite #box1 div.logo {
   text-align: right;
}
.startseite #box1 img {
   height: 100px;
   text-align: right;
}
.startseite #box1bild img {
   z-index: auto;
   object-fit: cover;
   margin: -200px 0px 0px 0px;
   width: 100%;
   height: 800px;
}
.startseite #box2 {
   text-align: center;
   margin: 0 auto 0;
   padding: 1% 5%;
   background-color: white;
   width: calc(100%-20px);
   color: black;
}
.startseite #box2 #boxen {
   margin: 10px auto;
}
.startseite #box2 .boxen {
   width: 29%;
   float: left;
   margin: 15px 2%;
}
.startseite #box2 .boxen img {
   width: 100%;
   max-width: 300px;
}
.startseite #box2 .boxen strong {
   display: inline-block;
   margin: 10px 0;
}
.startseite #box3 {
   margin: 0 auto 0;
   padding: 10px;
   background-color: #576749;
   width: calc(100% - 20px);
   color: white;
   text-align: center;
}
.startseite #veranstaltungbox {
   width: 100%;
   max-width: 600px;
   height: 333px;
   margin: 20px auto 30px;
   overflow: scroll;
}
.startseite #veranstaltungen {
   width: 100%;
   max-width: 600px;
   color: white;
   padding: 10px;
   margin-top: -25px;
   border-spacing: 0px 15px;
}
.startseite #veranstaltungen td {
   background-color: #A1B5A5;
   padding: 15px;
   margin: 10px;
}
.startseite #veranstaltungen span {
   display: block;
   text-align: left;
}
.startseite #veranstaltungen a {
   color: white;
}
.startseite #veranstaltungen a:hover {
   cursor: pointer;
   text-decoration: underline;
}
.startseite #veranstaltungen span.datum {
   font-size: 1.2em;
   font-weight: bold;
}
.startseite #veranstaltungen span.uhrzeit {
   font-size: 1em;
}
.startseite #veranstaltungen span.kategorie {
   margin-top: 10px;
   font-size: 1em;
}
.startseite #veranstaltungen span.titel {
   font-size: 1.2em;
}
.startseite #veranstaltungen span.standort {
   font-size: 1em;
   margin-top: 10px;
}
.unterseite #box1 {
   margin: -10px 0px 0px 0px;
   padding: 25px 5%;
   background-color: #576749;
   /*width: calc(100% - 20px);*/
   color: white;
   text-align: center;
}
.unterseite #box1 div.logo {
   text-align: right;
}
.unterseite #box1 img {
   height: 100px;
   text-align: right;
}
.unterseite #box1bild img {
   z-index: auto;
   object-fit: cover;
   margin: -200px 0px 0px 0px;
   width: 100%;
   height: 800px;
}
.unterseite #box2 {
   text-align: center;
   margin: -10px 0px 0px 0px;
   padding: 25px 5%;
   background-color: white;
   /*width: calc(100% - 30% + 20px);*/
   color: black;
}
.unterseite #box2 #boxen {
   margin: 10px auto;
}
.unterseite #box2 .boxen {
   width: 29%;
   float: left;
   margin: 15px 2%;
}
.unterseite #box2 .boxen img {
   width: 100%;
   max-width: 300px;
}
.unterseite #box2 .boxen strong {
   display: inline-block;
   margin: 10px 0;
}
.unterseite #box3 {
   margin: -10px 0px 0px 0px;
   padding: 30px;
   background-color: #576749;
   /*width: calc(100% - 40px);*/
   color: white;
   text-align: center;
}
.unterseite #box3 a {
   color: white;
}
.unterseite #box4 {
   margin: 0;
   padding: 10px;
   background-color: #84406f;
   width: calc(100% - 20px);
   color: white;
   text-align: center;
}
.unterseite #box4 div.logo {
   text-align: right;
}
.unterseite #box4 img {
   height: 100px;
   text-align: right;
}
.unterseite #box4bild img {
   z-index: auto;
   object-fit: cover;
   margin: -200px -10px 0px -10px;
   width: 100%;
   height: 800px;
}
.unterseite #box5 {
   margin: -10px -10px 0px -10px;
   padding: 20px;
   background-color: #f07f3c;
   width: calc(100% - 20px);
   color: white;
   text-align: center;
}
.unterseite #box5 div.logo {
   text-align: right;
}
.unterseite #box5 img {
   height: 100px;
   text-align: right;
}
.unterseite #box5bild img {
   z-index: auto;
   object-fit: cover;
   margin: -200px -10px 0px -10px;
   width: calc(100% + 20px);
   height: 800px;
}
/* Unterkünfte */
.unterseite #box7 {
   margin: 0;
   padding: 10px;
   background-color: #215b7d;
   width: calc(100% - 20px);
   color: white;
   text-align: center;
}
.unterseite #box7 div.logo {
   text-align: right;
}
.unterseite #box7 img {
   height: 100px;
   text-align: right;
}
.unterseite #box7bild img {
   z-index: auto;
   object-fit: cover;
   margin: -200px -10px 0px -10px;
   width: 100%;
   height: 800px;
}
/* Gastronomie */
.unterseite #box8 {
   margin: 0;
   padding: 10px;
   background-color: #f07f3c;
   width: calc(100% - 20px);
   color: white;
   text-align: center;
}
.unterseite #box8 div.logo {
   text-align: right;
}
.unterseite #box8 img {
   height: 100px;
   text-align: right;
}
.unterseite #box8bild img {
   z-index: auto;
   object-fit: cover;
   margin: -200px -10px 0px -10px;
   width: 100%;
   height: 800px;
}
div.wellenbox {
   height: 800px;
   max-width: 100%;
   width: calc(100%-20px);
}
#welleoben {
   padding: 0;
   margin: 0;
   height: 200px;
   position: relative;
}
#welleoben img {
   z-index: 99;
   width: 100%;
   margin: 0px;
   padding: 0;
   object-fit: cover;
   position: absolute;
   top: 0;
}
#welleunten {
   padding: 0;
   margin: 0;
   height: 200px;
   margin-top: -200px;
   position: relative;
}
#welleunten img {
   z-index: 99;
   width: 100%;
   margin: 0px;
   padding: 0;
   position: absolute;
   bottom: 0;
}
#inhalt.startseite a.button {
   font-size: 0.8em;
   color: white;
   text-decoration: none;
   background-color: #A1B5A5;
   padding: 12px 15px;
   border-radius: 20px;
}
#inhalt.startseite a.button:hover {
   cursor: pointer;
   text-decoration: underline;
}
#header_navi a, #footer a {
   color: black;
   display: inline-block;
   text-decoration: none;
}
#header_navi a:hover, #footer a:hover {
   text-decoration: underline;
}
#main_navi {
   margin: 0 0 0 30px;
   padding: 0;
   text-align: center;
   display: inline-block;
}
#navibilder {
   display: inline;
}
#navibilder img {
   height: 3em;
}
#navibilder a {
   padding: 10px 5px;
}
#main_navi #hauptmenu {
   z-index: 1000;
   color: black;
   text-transform: uppercase;
   font-size: 1.2em;
   background-color: white;
   padding: 5px 7px 0px 25px;
   border: 1.5px solid black;
   border-radius: 3px;
   display: block;
   background-image: url("../inc/menu-pic.svg");
   background-repeat: no-repeat;
   background-position: 6px 6px;
   background-size: 15px;
}
#navibutton {
   display: none;
}
#main_navi ul {
   padding: 0;
   margin: 0 auto;
   text-align: center;
}
#main_navi ul ul {
   display: none;
}
#main_navi li {
   z-index: 1000;
   color: white;
   padding: 0px;
   margin: 0px;
   text-decoration: none;
}
#main_navi a {
   color: white;
   padding: 10px 20px;
   text-decoration: none;
}
#main_navi a:hover {
   text-decoration: underline;
   cursor: pointer;
}
#main_navi ul li:hover > ul {
   display: block;
}
#main_navi ul {
   border-radius: 0px;
   list-style: none;
   position: relative;
   display: inline-table;
}
#main_navi ul:after {
   content: "";
   clear: both;
   display: block;
}
#main_navi ul li {
   float: left;
   padding: 8px 9px;
}
#main_navi ul li:hover {
   color: #fff;
   background: #fedb67;
   cursor: pointer;
}
#main_navi ul li a {
   display: block;
   color: #fff;
   text-decoration: none;
}
#main_navi li.stufe1 {
   font-weight: bold;
   text-transform: uppercase;
}
#main_navi ul ul {
   text-align: left;
   margin-left: -9px;
   background: none;
   border-radius: 0px;
   padding: 4px 0 0 0;
   position: absolute;
   top: 100%;
}
#main_navi ul ul li {
   float: none;
   position: relative;
   padding: 0px 0px 0px 0px;
}
#main_navi ul ul li a {
   padding: 9px 30px;
   color: #000;
   background: #fedb67;
}
#main_navi ul ul li a:hover {
   cursor: pointer;
   background: #fedb67;
   color: white;
}
#footer {
   width: 100%;
   margin: 0 auto;
   padding: 15px 0;
   background-color: white;
   text-align: center;
   color: black;
   font-size: 0.8em;
}
#footer #logos {
   margin: 25px 10px 0px;
}
#footer #logos img {
   height: 65px;
   margin: 0px 10px;
}
#footer a {
   color: black;
}
#footer #spalten {
   width: 100%;
   text-align: left;
   margin: 20px auto 0px;
   display: flex;
   justify-content: space-around;
}
#footer div.footer_spalte1, #footer div.footer_spalte2, #footer div.footer_spalte3 {
   flex-direction: column;
   align-items: center;
   padding: 5px 15px;
   text-align: left;
}
#footer ul {
   padding: 0;
   margin: 5px 20px 0 0;
}
#footer li {
   border-bottom: 1px dotted #bcbcbc;
   padding: 6px 0 2px 5px;
   margin-left: 20px;
}
#footer li a {
   text-decoration: none;
}
#footer #footer-navi {
   text-align: center;
   padding: 0px;
   margin: 0px 10px 10px;
}
#footer #footer-navi a {
   display: inline-block;
   margin-right: 5px;
}
h1#ausgabe {
   align-content: center;
   text-align: center;
   color: #6a9998;
   padding: 10px;
   margin: 10px;
}
h1#ueberschrift {
   align-content: center;
   text-align: center;
   padding: 0 10px 5px;
   margin: 5px;
   color: #6a9998;
   font-weight: normal;
}
h3 {
   margin-top: 35px;
}
h3#ueberschrift2 {
   align-content: center;
   text-align: center;
   padding: 0 10px 5px;
   margin: 0px;
   color: #6a9998;
   font-weight: normal;
}
#startseite {
   margin: 10px auto;
}
#startseite p {
   text-align: center;
   background-color: #448D3D;
   color: white;
   padding: 10px;
   margin: 10px 20px;
   max-width: 280px;
   float: left;
   min-height: 400px;
}
#startseite img {
   width: 100%;
   display: inline-block;
   padding: 10px 0px;
   height: 150px;
}
#startseite a {
   color: white;
   text-decoration: none;
}
#startseite a:hover {
   text-decoration: underline;
}
.beitragsbild {
   align-content: center;
   text-align: center;
   padding: 6px 3px 6px;
   margin: 10px;
   max-width: 100%;
}
.beitragsbild img {
   max-width: 100%;
   width: 90%;
   -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 1);
   -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 1);
   box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 1);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}
img.logos {
   display: inline-block;
   text-align: left;
   padding: 5px 5px 10px 0px;
   width: auto;
   height: auto;
   max-height: 120px;
   max-width: 300px;
}
img.klein {
   width: auto;
   height: auto;
   max-height: 150px;
   max-width: 150px;
}
img.mittel {
   width: auto;
   height: auto;
   max-height: 300px;
   max-width: 300px;
}
img.hoch {
   width: auto;
   height: auto;
   max-width: 300px;
}
img.floatleft {
   float: left;
   display: inline-block;
   padding: 0px 25px 15px 0px;
}
img.floatright {
   float: right;
   display: inline-block;
   padding: 0px 0px 15px 25px;
}
@media only screen and (max-width: 750px) {
   .startseite #box2 {
      padding: 2%;
   }
   #footer #spalten {
      width: 95%;
      text-align: left;
      margin: 20px;
      display: block;
      font-size: 1.1em;
   }
   #footer div.footer_spalte1, #footer div.footer_spalte2, #footer div.footer_spalte3 {
      align-items: center;
      padding: 10px 20px 1px 0;
      text-align: center;
   }
   #footer ul {
      text-align: left;
      margin: -5px 0 20px;
   }
}
/* 468 */
@media only screen and (max-width: 468px) {
   #header {
      text-align: center;
      height: auto;
   }
   #navibutton {
      display: none;
      font-size: 1.1em;
      /* border: 1px solid #448D3D; */
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      color: #448D3D;
      padding: 7px 10px;
      margin: 15px 7px;
      text-decoration: none;
      text-align: center;
   }
   /*
  #main_navi ul li:hover > ul {
    display: block;
  }
  */
   #main_navi {
      width: 100%;
      margin: 0px auto;
      padding: 0px;
      background-color: #448D3D;
   }
   #main_navi #hauptmenu {
      padding: 10px 7px 5px 25px;
      background-position: 6px 10px;
      background-size: 18px;
   }
   #main_navi ul {
      position: inherit;
      display: block;
      background-color: #448D3D;
      width: 100%;
      margin: 0px;
   }
   #main_navi ul:after {
      content: "";
      clear: both;
      display: block;
   }
   #main_navi ul li {
      float: none;
      padding: 5px 9px;
       padding: 0px;
    background-color: #448D3D;
    background-color: white;
   }
   #main_navi ul li a {
      display: inline-block;
      font-weight: bold;
   }
   #main_navi ul ul {
      display: inline;
      text-align: left;
      margin-left: 0px;
      position: inherit;
   }
   #main_navi ul ul li {
      float: none;
      position: inherit;
      padding: 0px 0px 0px 0px;
   }
   #main_navi ul ul li:hover {
      background: #448D3D;
   }
   #main_navi ul ul li a {
      padding: 9px 30px;
      color: #fff;
      background-color: #448D3D;
      font-weight: inherit;
   }
   #main_navi ul ul li a:hover {
      background: #448D3D;
   }
   #header #logo {
      width: 100%;
      padding: 0px;
      margin: 0px;
      text-align: center;
      float: none;
      display: block;
   }
   #header #logo img {
      /*width: 100%;*/
      max-width: 95%;
      padding: 0px;
      margin: 0px;
   }
   #header #header_navi {
      float: none;
      display: block;
      height: auto;
      padding: 0px;
      margin: 10px;
   }
   #header_navi a {
      display: block;
      padding: 5px;
      margin: 0px;
      text-decoration: underline;
   }
   #navibilder {
      display: block;
      margin: 10px auto;
      text-align: center;
   }
   .startseite #box2 .boxen {
      width: calc(100% - 20px);
      float: none;
      margin: 35px 10px;
   }
   .startseite #box2 .boxen img {
      width: 95%;
      max-width: 240px;
   }
   #footer #spalten {
      width: 95%;
      text-align: left;
      margin: 20px;
      display: block;
      font-size: 1.1em;
   }
   #footer div.footer_spalte1, #footer div.footer_spalte2, #footer div.footer_spalte3 {
      align-items: center;
      padding: 10px 20px 1px 0;
      text-align: center;
   }
   #footer ul {
      text-align: left;
      margin: -5px 0 20px;
   }
   #footer #footer-navi {
      text-align: center;
      padding: 10px 10px 20px;
   }
   #footer a {
      display: block;
      padding-top: 5px;
      text-decoration: underline;
   }
   #header_navi a:hover, #footer a:hover {
      text-decoration: none;
   }
   #main_navi ul.main_navi_sub {
      display: none;
   }
   #main_navi:hover ul.main_navi_sub {
      display: block;
   }
   #main_navi:hover ul li {
      padding: 5px 9px;
    background-color: #448D3D;
   }
    
}