@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url('/styles/fonts/rubik-v9-latin-regular.eot'); 
  src: local('Rubik'), local('Rubik-Regular'),
       url('/styles/fonts/rubik-v9-latin-regular.eot?#iefix') format('embedded-opentype'), 
       url('/styles/fonts/rubik-v9-latin-regular.woff2') format('woff2'), 
       url('/styles/fonts/rubik-v9-latin-regular.woff') format('woff'), 
       url('/styles/fonts/rubik-v9-latin-regular.ttf') format('truetype'), 
       url('/styles/fonts/rubik-v9-latin-regular.svg#Rubik') format('svg'); 
}





body{font-family: "Rubik", sans-serif; font-size: 18px; line-height: 1.3; background-color: rgb(195, 171, 141); color: rgb(116, 99, 92); padding: 0px; margin: 0px;}

#contentContainer{position: relative; margin: 30px auto; width: 920px; box-shadow: rgb(136, 136, 136) 2px 4px 12px; background-color: rgb(246, 243, 236); min-height: 500px; padding: 280px 40px 40px;}

#content_container{padding: 0px 40px;}

#header{padding: 0px 30px; box-sizing: border-box;}

#header{width: 1000px; margin: auto auto 20px; text-align: center;}

#logodiv{position: absolute; left: 26px; top: 7px;}

#intro-text{padding: 30px 30px 0px; font-size: 18px; margin-bottom: 40px;}

.center{text-align: center;}

#intro-text p{font-size: 18px;}

#address{position: absolute; right: 71px; top: 12px;}

#footer{width: 100%; background-color: rgb(229, 219, 207); padding-bottom: 0px;}

#footerContainer a{color: rgb(150, 147, 147); text-decoration: none; font-size: 18px; margin-bottom: 20px; display: block;}

#logodiv img{max-height: 260px;}

#address h3{font-size: 16px;}

#contentContainer .img-cover{margin: 0px -40px -44px;}

#contentContainer h1{font-size: 22px;}

a{color: rgb(150, 147, 147); text-decoration: none;}

#cookie-erlaubnis{position: fixed; width: 100%; bottom: 0px; left: 0px; padding: 10px; background-color: rgb(102, 102, 102); color: rgb(244, 244, 244); text-align: center;}

#content .hp-box{clear: both;}

.hp-box img{border-radius: 50%; width: 320px; max-width: 50%;}

#page{position: relative; max-width: 1000px; margin: auto; box-shadow: rgb(51, 51, 51) 2px 2px 6px; background-color: rgb(246, 243, 236);}

#header .sw-icon{max-width: 150px; margin-top: -20px;}

#headertext{max-width: 560px;}

#header h1{margin: 0px; padding-top: 40px;}

.hp-box img.floatLeft{margin-right: 40px;}

#bannerImgDiv{background-size: cover; background-repeat: no-repeat; height: 40vh; background-position: center center; border-top: 1px solid rgb(116, 99, 92); border-bottom: 1px solid rgb(116, 99, 92); border-right: 0px solid rgb(116, 99, 92);}

#content .hp-box.ileft img{float: left; margin-right: 40px;}

#content .hp-box.iright img{float: right; margin-left: 40px;}

#content .hp-box-text{max-width: 500px; padding-top: 50px;}

#content .hp-box.ileft .hp-box-text{float: left;}

#content .hp-box.iright .hp-box-text{float: right;}

#content .hp-box::after{visibility: hidden; display: block; font-size: 0px; content: " "; clear: both; height: 0px;}

#content{padding: 50px 0px;}

#footerContainer{background-color: rgb(229, 219, 207); max-width: 1000px; margin: auto; padding: 20px 30px;}

#footer::after{visibility: hidden; display: block; font-size: 0px; content: " "; clear: both; height: 0px;}

#footerContainer td{vertical-align: top; font-size: 16px; padding-bottom: 30px;}

#footerContainer table{width: 100%;}

#bgstatus{background-color: rgb(255, 255, 255); padding: 20px 10px; height: 100%; box-sizing: border-box; float: right;}

p span{font-size: larger;}

#primnav .menu-current a{font-weight: bold;}

#primnav a{color: rgb(116, 99, 92); text-decoration: none;}

#extras-links{float: left; margin-right: 30px;}

#extras-img{text-align: center;}

#extras-img img{box-shadow: rgb(0, 0, 0) 2px 3px 12px; max-height: 500px; max-width: 500px;}

#currentImage{font-weight: bold;}

.triptych{margin: 40px auto;}

#mobile-menu{display: none;}

#extras-links p{cursor: pointer;}

#extras-links p:hover{color: rgb(68, 0, 0);}

#speisekarten .lightbox-image{width: 224px;}

#audio-button{position: absolute; right: 113px; top: 342px;}

.two-column-container .column{width: 49%; display: inline-block; min-width: 320px; vertical-align: top;}

.two-column-container{text-align: center;}

.lightbox-image{cursor: pointer;}

body.wirte #bannerImgDiv, body.kontakt #bannerImgDiv{min-height: 360px;}

.mobile-only{display: none !important;}







#primnav ul{list-style-type: none;}

#primnav li{display: inline-block; padding: 2px 8px;}

#primnav a{text-decoration: none;}

#content_container{max-width: 1000px; margin: auto;}







.clearfix::after{visibility: hidden; display: block; font-size: 0px; content: " "; clear: both; height: 0px;}

.grid-dl dt{padding: 0.5em 0px; grid-column-start: 1;}

.grid-dl dd{margin: 0px; padding: 0.5em 0px; grid-column-start: 2;}

.grid-dl{display: grid; grid-template-columns: 0.3fr 1fr; grid-template-rows: auto;}

.clearfix::after{visibility: hidden; display: block; font-size: 0px; content: " "; clear: both; height: 0px;}

.floatRight{float: right;}

.floatLeft{float: left; margin-right: 20px; margin-bottom: 20px;}

dt[data-required="1"]::after{content: "*"; color: red; font-weight: bold; font-size: 18px;}

#errors{border: 1px solid rgb(184, 207, 240); background-color: rgb(255, 255, 204); padding: 8px; font-weight: bold;}

.loginbackend{outline: rgb(51, 153, 34) dashed 2px;}

.align_right{text-align: right;}

.align_left{text-align: left;}

.align_center{text-align: center;}

#url-inactive{width: 400px; position: fixed; z-index: 10000; background-color: rgb(204, 102, 68); color: rgb(224, 232, 244); padding: 40px; opacity: 0.8; left: 27px; top: 67px;}

.clearall{clear: both;}

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






#footerContainer .col{max-width: 50%;}

#footerContainer{padding: 20px;}

#menuwidget{display: block; position: fixed; right: 31px; top: 16px; font-size: 20px; text-shadow: rgb(254, 253, 253) 2px 2px 0px; background-color: rgb(242, 242, 226); padding: 6px; z-index: 1000;}

#primnav{position: fixed; left: -100%; top: 0px; width: auto; background-color: rgb(254, 253, 253); border: 1px solid rgb(204, 204, 204); transition-property: left; transition-duration: 0.4s; text-align: left; padding-right: 30px; z-index: 100;}

#primnav li{display: block; font-size: 20px; padding: 10px;}

#content_container{padding: 25px 12px;}

#hp-galerie{padding: 12px;}

#primnav ul ul{visibility: visible; opacity: 1; position: static; margin: 0px; padding: 0px 20px; background-color: transparent; box-shadow: none; list-style-type: square;}

#primnav li:hover{background-color: transparent;}

#primnav ul ul li{list-style-type: square;}

#contentContainer{width: auto; padding: 15px;}

#header{height: auto; position: static; max-width: 100%; box-sizing: border-box;}

#address{position: static;}

#logodiv{position: static; float: left; margin-right: 30px; max-width: 40%;}

#contentContainer .img-cover{margin: auto; max-width: 100%;}

#intro-text{clear: both; padding-top: 40px;}

#logodiv img{max-width: 100%; margin-bottom: 15px;}

#address h3{font-size: 15px;}

h2{font-size: 5vw;}

#headertext{max-width: 80%;}

#sw-icon-right{display: none;}

#sw-icon-left{float: none; display: block; margin: 40px auto 20px;}

#bannerImgDiv{height: 250px;}

#content .hp-box.ileft img{float: none; display: block; margin: auto;}

#content .hp-box-text{padding-top: 0px; margin-bottom: 40px;}

#content .hp-box.iright img{float: none; display: block; margin: auto;}

#footerContainer > table > tbody > tr > td{display: inline-block; padding: 15px 20px;}

#extras-img img{display: none;}

#extras-links img{max-width: 90%;}

#mobile-menu{display: block; position: fixed; right: 20px; top: 20px; width: 10vw;}

#content .triptych img{display: block; margin: auto auto 20px;}

#speisekarten .speisekarte-image{width: 100%;}

#speisekarten .lightbox-image{width: 100%;}

#speisekarten img.lightbox-image{cursor: default;}

#bannerImgDiv #audio-toggle-img{right: 84px; top: 122px;}

#audio-button{right: 60px; top: 342px;}

#lightbox-img.show{max-width: 100%; height: auto !important;}

body.wirte #bannerImgDiv, body.kontakt #bannerImgDiv{min-height: auto;}

.pc-only{display: none !important;}

.mobile-only{display: initial !important;}


}







#bannerImgDiv{position: relative;}

#audio-toggle-img{position: absolute; right: 116px; top: 178px;}