*
{
 box-sizing: border-box; /*it gives error:Validation (CSS 2.1): 'box-sizing' is not a known CSS property name. */
 -ms-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/ubuntu-v15-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/ubuntu-v15-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*Presse*/

.lesen {
  cursor: pointer;
  font-family: Ubuntu;
  font-size: 1rem;
  text-align: right;
  color: #93a0a6; 
}

#schliessen {
  cursor: pointer;
  font-family:  Ubuntu;
  font-size: 1rem;
  color: #93a0a6;
  text-align: right;
  display: none;
}


body {margin-top: 0; overflow-y: scroll;}
img.resize {  max-width: 100%; height: auto;  width: auto\9; /* ie8 */ }
img.onepic {width:100%; }
img.rechts {float: right;}
img.mitte {display: block; margin-left: auto; margin-right: auto; width: 100%;}


#container {position: relative; width:78%; max-width: 900px; margin: auto;  background: #fff; padding: 0; z-index:1;  }
#header {
  position: relative;
  width: 130%;
  margin-left: -15%;
  position: sticky;
  top: -24px;
  z-index: 5;
  background-color: #fff;
  padding: 2rem 15% 1rem 15%;
}
#content {margin-top: 12px; padding-top: 36px;}
#footer {margin-top: 42px; border-top: 1px solid #bcc1d3; }

#logo { display: block; margin: auto; padding-bottom:24px;}
.onlymob, .onlysmallmob { display: none; }
.menu-trigger { display: none; }
img.pdf {vertical-align: bottom; margin-right: 2px;}


.startseite   {display: flex; align-items: flex-end; justify-content: space-between;}


.left {
 max-width: 80%;
 margin-left: -12%;
}

.right {
 max-width: 40%;
 margin-right: -12%;
 }

.left-content {
 border: thin red solid;
 width: 64%;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
}

.prog-right {
  max-width: 32%;
  float: right;
  position: sticky;
  top: 170px;
  border: 2px crimson solid;
  border-radius: 6px;
  padding: 9px 15px;
  margin-top: 30px;
}


div.corona {
margin-top:48px;
border: 2px crimson solid;
border-radius: 6px;
padding: 9px 15px;
width: 100%;
}

div.bothnext {
  margin-top:24px;
  background-color: #e8f0f4;
  border-radius: 6px;}

div.next {
 border-radius: 6px;
 padding: 9px 15px;
 width: 100%;
}

 div.next:hover {background-color: #d0e1ef;} 

div.navigation {
display: flex;
justify-content: space-between;
position: relative;
padding: 0;
border: 0;
width: 100%;
}

div.navigation a:link,
div.navigation a:visited {
font-family: Ubuntu;
font-size: 1.25rem;
text-decoration: none;
color: #b9bdc0;
}

div.navigation a:hover {
text-decoration: underline;
}

.here {font-family: Ubuntu;
font-size: 1.25rem;
text-decoration: underline;
color: #a1b9cc;}

.here a:link, .here a:visited, .here a:hover {text-decoration: underline;
color: #a1b9cc;}

.ingred {
padding-top: .3rem;
font-size: 1.05rem;
}

p {
font-family: Georgia, Verdana;
font-size: 1.05rem;
color: #36363f;
line-height: 1.4rem;
padding: 0;
margin: 12px 0 0 0;
text-align: justify;
-webkit-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
}

ul, li {
font-family: Georgia, Verdana;
font-size: 1.05rem;
color: #36363f;
line-height: 1.4rem;
text-align: justify;
-webkit-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
}

.framed {margin: 0; text-align: center; }
.nextgd {margin-top: 15px; text-align: center; }
.prep {margin: 0;  }
.text_footer {  text-align: right; font-size: 1rem;}
.text_right {  text-align: right; }
.lofty {line-height: 1.7rem;}

.bu {
 font-family: Ubuntu;
 font-size:.8rem;
 margin-top: 6px;
 line-height: .8rem;
 text-align: left;
}

.bu_big {
 font-family: Ubuntu;
 font-size:1rem;
 line-height: 1.1rem;
 text-align: left;
}

.bu_r {
 font-family: Ubuntu;
 font-size:.8rem;
 margin-top: 6px;
 line-height: 2rem;
 text-align: right;

}

h1 {
 font-family: Ubuntu;
 font-size: 1.5rem;
 text-align: right;
 margin-top: 24px;
 color: #93a0a6;
 border-bottom: 1px solid #bcc1d3;
}

h2 {
 font-family: Ubuntu;
 letter-spacing: 0.06em;
 font-size: 1.25rem;
 margin-top: 24px;
 color: #b9bdc0;
 }

h3 {
 font-family: Ubuntu;
 text-align: right;
 letter-spacing: 0.06em;
 font-size: 1.25rem;
 color: #b9bdc0;
 border-bottom: 1px solid #bcc1d3;
 margin: 12px 0 0 0;
 width: 100%;
 }

h4 {
 font-family: Ubuntu;
 font-size: 1.8rem;
 margin: 0 0 0 -30px;
 color: #93a0a6;
 }

h4.aktuell
 {color: crimson;}

.foto {margin-top: -20px; font-size: .8rem;} 

a.bob:link {
 font-family:  Ubuntu;
 font-size: 1rem;
 text-decoration: none;
 color: #93a0a6;
}

a.bob:hover {
 text-decoration: underline;
}

a.bob:visited {
 text-decoration: none;
 color: #93a0a6;
}

 a.button:link, a.button:visited, a.button:hover { text-decoration: none;}

 




.grid-prog {
 margin-top: 2rem;
 margin-bottom: 4rem;
 width:64%;
 display: -ms-grid;
 display: grid;
 -ms-grid-columns: 2fr 1fr;
 grid-template-columns: 2fr 1fr;
 grid-column-gap: 24px;

}

.item-dscrp {
 -ms-grid-column: 1;
 grid-column: 1;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
}


.item-pstr {
 -ms-grid-column: 2;
 grid-column: 2;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 grid-row-gap: 12px;
 }

 .grid-gd {
 margin-top: 2rem;
 margin-bottom: 4rem;
 width: 100%;
 display: -ms-grid;
 display: grid;
 -ms-grid-columns: 1fr 1fr 1fr;
 grid-template-columns: 1fr 1fr 1fr;
 grid-column-gap: 24px;
 grid-row-gap: 24px;
 }

.grid-basic {
 width: 100%;
 display: -ms-grid;
 display: grid;
 -ms-grid-columns: 1fr 1fr 1fr;
 grid-template-columns: 1fr 1fr 1fr;
 grid-column-gap: 24px;
 grid-row-gap: 24px;
 }

.grid-basic-item-title {
 -ms-grid-column: 1;
 -ms-grid-column-span: 2;
 grid-column: 1 /span 2;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 margin-bottom: -.6rem;
 }

.grid-basic-item-text {
 -ms-grid-column: 1;
 -ms-grid-column-span: 2;
 grid-column: 1 /span 2;
 }

.grid-basic-item-pic {
 -ms-grid-column: 3;
 grid-column: 3;
 -ms-grid-row: 2;
 grid-row: 2;
 
 }

 .grid-basic-item-pic-notitle {
 -ms-grid-column: 3;
 grid-column: 3;
 -ms-grid-row: 1;
 grid-row: 1;
 margin: 12px 0 0 0;
 }

 .grid-basic-item-title-r {
 -ms-grid-column: 2;
 -ms-grid-column-span: 2;
 grid-column: 2 /span 2;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 margin-bottom: -.6rem;
 }

.grid-basic-item-text-r {
 -ms-grid-column: 2;
 -ms-grid-column-span: 2;
 grid-column: 2 /span 2;
 }

.grid-basic-item-pic-l {
 -ms-grid-column: 1;
 grid-column: 1;
 -ms-grid-row: 2;
 grid-row: 2;
 }

 

.grid-kitchen-pic {
 width: 100%;
 -ms-grid-column: 1;
 -ms-grid-column-span: 2;
 grid-column: 1 /span 2;
 display: -ms-grid;
 display: grid;
 -ms-grid-columns: 1fr 1fr;
 grid-template-columns: 1fr 1fr;
 grid-column-gap: 24px;
}

.grid-kitchen-pic-item-one {
 -ms-grid-column: 1;
 grid-column: 1;
 display: flex;
 justify-content: flex-start;
}

.grid-kitchen-pic-item-two {
 -ms-grid-column: 2;
 grid-column: 2;
 display: flex;
 justify-content: flex-end;
}

.grid-kitchen-pic-item-three {
 -ms-grid-column: 1;
 -ms-grid-column-span: 2;
 grid-column: 1 /span 2;
 display: flex;
 justify-content: flex-end;
 }

.grid-kitchen-item-prep {
 -ms-grid-column: 1;
 -ms-grid-column-span: 2;
 grid-column: 1 /span 2;
 display: flex;
 flex-direction: column;
 }

.grid-kitchen-item-ingred {
 -ms-grid-column: 3;
 grid-column: 3;
 -ms-grid-row: 2;
 -ms-grid-row-span: 2;
 grid-row: 2 /span 2;
 }

 .grid-kitchen-item-third {
 -ms-grid-column: 1;
 -ms-grid-column-span: 3;
 grid-column: 1 /span 3;

 }



 .grid-vorstand {
 width: 100%;
 display: -ms-grid;
 display: grid;
 -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 grid-column-gap: 24px;
 grid-row-gap: 24px;
 margin: 12px 0 0 0;
 }

 .grid-presse {
 display: -ms-grid;
 display: grid;
 -ms-grid-columns: 2fr 1fr;
 grid-template-columns: 2fr 1fr;
 grid-column-gap: 24px;
 }

.grid-presse-blurp {
 margin-top: 4rem;
 -ms-grid-column: 1;
 grid-column: 1;
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 justify-content: flex-end;
}
.grid-presse-pic {
 -ms-grid-column: 2;
 grid-column: 2;
 display: flex;
 align-items: flex-end;
 padding-top: 4rem;
}

.grid-presse-full {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 /span 2;
  margin-top:.5rem;
  display: none;
}

.grid-presse-full-lnk {
  -ms-grid-column: 1 ;
  grid-column: 1 ;

}

 /*Openstreetmap*/



#map {
  height: 500px;
  width: 100%;
  padding: 0; margin: auto;
}

/*Banner Slider */

/*! http://responsiveslides.com v1.55 by @viljamis */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.notmob {display: none;}
.onlymob {display: inline;}
}

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

#header { width:104%; margin-left: -2%;   padding: 2rem 2% 1rem 2%;  }
.notmob {display: none;}
.onlymob {display: inline;}
#container { width:96%; }
#content {margin-top: 12px; padding-top: 0;}
.startseite   {flex-direction: column;}
.left { max-width: 100%; margin-left: 0;}
.right { max-width: 100%;  margin-right: 0; }
h4 {
 margin: 0 0 0 -10px;
 }
.grid-prog {  width: 100%;}
.prog-right { max-width: 100%; background-color: #fff; margin-top: 12px; margin-bottom: 24px; top: 137px; }

div.navigation a:link, div.navigation a:visited, div.navigation a:hover, .here {
 font-size: 1.1rem;
 text-decoration: none;
}
}
@media screen and (max-width: 767px)   {

#content {margin-top: 0; padding-top: 0;}
.notsmallmob {display: none;}
.onlysmallmob {display: inline;}
#logo {  padding-bottom:12px;}

.text_footer {  text-align: right; font-size: .85rem;}
.prog-right { top: 100px; }
.item-pstr {
 justify-content: flex-start;
 }

 .menu-trigger {
 display: block;
 cursor: pointer;
 text-align: right;
 background-color: #e8f0f4;
 padding: 6px;
 border-radius: 6px;
 }
.mob-here {
  font-family: Ubuntu;
  font-size: 1.15rem;
  color: #a1b9cc;
  margin-top: -2px;
  padding: 0;
  float: left;
}

 .right_corner {
  border-bottom-right-radius: 0;
}

 div.navigation {
 flex-direction: column;
 text-align: right;
 display: none;
 background-color: #e8f0f4;
 border-radius: 0 0 6px 6px;
 width: 40%;
 margin-left: 60%;
 }

 div.navigation > div {
 padding: 6px;
 border-bottom: 1px solid #bcc1d3;
 }

 div.navigation > div:last-child {
 border-bottom: none;
 }

 div.navigation a:link, div.navigation a:visited, div.navigation a:hover, .here {
 font-size: 1.15rem;
 text-decoration: none;
}

 div.mobmenu {
 display: block;
 }

img.mitte {width: 60%; max-width: 300px;}

.item-pstr { align-items: flex-start;}
.grid-basic-item-title, .grid-basic-item-pic, .grid-basic-item-pic-notitle, .grid-basic-item-text {-ms-grid-column: 1;-ms-grid-column-span: 3; grid-column: 1 /span 3;}
.grid-kitchen-pic { -ms-grid-column: 1; -ms-grid-column-span: 3; grid-column: 1 /span 3;}
.grid-kitchen-item-prep { -ms-grid-column: 1; -ms-grid-column-span: 3; grid-column: 1 /span 3; }
.grid-kitchen-item-ingred {-ms-grid-column: 1;-ms-grid-column-span: 3;grid-column: 1 /span 3; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3 /span 1;}
.grid-presse    {-ms-grid-columns: 3fr;grid-template-columns: 3fr;}
.grid-presse-pic {display: none;}
.grid-presse-full {-ms-grid-column: 1;grid-column: 1;}

}

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

p, code, ul, li {font-size: .9rem; line-height: 1.2rem;}
.lofty {line-height: 1.4rem;}
h3 {letter-spacing: 0.06em; font-size: 1rem;}
h4 {font-size: 1.1rem;}
.prog-right { position: relative; margin-top:6px; top: 0;}
div.navigation a:link, div.navigation a:visited, div.navigation a:hover, .mob-here, .here, a.bob:link, a.bob:hover, a.bob:visited {
 font-size: .9rem;
 text-decoration: none;
}

.mob-here {margin-top: 0px;}


@media screen and (max-width: 323px) {}

.clearfix:before, .clearfix:after {content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix {*zoom: 1; }}