@charset "UTF-8";
/* CSS Document */
@import 'fonts.css';

*, *:before, *:after { box-sizing: border-box; -webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

html {height: 100%; width: 100%; background: aaa;}
body {width: 100%; font-family: 'Oswald', sans-serif; font-size: 1em; line-height: 1.625em; color: #42291c; background: url(../bilder/layout/rauten_bg.png) repeat;}

body.fixed, .has-lightbox body {height: 100%; overflow: hidden;}

/* Main Nav */
#main-nav {position: absolute; width: 100%; z-index:2; height: 2em; left: 0; top: 14.375em;} /* Height of header */
#main-nav.fixed	{position: fixed; top:0; z-index:100; background: #42291C; border-bottom: 3px solid #e3ad21;}
#nav_wrapper {width: 100%; margin: 0 auto;}

#main-nav ul {width: 100%; height: 100%; position: fixed; background: rgba(255,255,255,1); padding: 2rem 1rem; z-index: 2; -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); transition: transform .3s;}
#main-nav.open ul {-ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0);}

#main-nav .current a.menu-item, #main-nav.fixed .current a.menu-item {color: #e3ad21;}
#main-nav a.menu-item	{padding: 0.625em 0; display: block; color: #42291C; text-decoration: none; text-transform: uppercase;}
#main-nav a:hover {color: #e3ad21;}
#main-nav img {visibility: hidden;}
#main-nav.fixed img {visibility: visible; margin-top: 0.125em;}
li#logoraute {display: none;}

/* nav pull */
#pull {width: 2.5rem; height: 1.5rem; padding: 0rem 0 0rem 0.75rem; position: absolute; top: 0; right: 1rem; z-index: 12;}
#main-nav.fixed #pull {top: 0.25rem;}

.burger-wrap {position: relative;}

.burger, .burger:before, .burger:after {width: 1.75rem; height: 0.25rem; display: block; position: absolute; background: #42291C;
-webkit-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;}
#main-nav.fixed .burger, #main-nav.fixed .burger:before, #main-nav.fixed .burger:after {background: #e3ad21;}

.burger {left: 0; top: 0;}
.burger:before {top: 0.5rem; content: '';}
.burger:after {top: 1rem; content: '';}

.open .burger {background: none !important;}
.open .burger:before {top: 0.5rem; width: 1.75rem; background: #42291C !important;
-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.open .burger:after {top: 0.5rem; width: 1.75rem; background: #42291C !important;
-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}

/* layout */
#wrapper {width: 100%;}
#main-wrapper {width: 100%; margin: 0 auto; background: #fff;}

#logo {text-align: center;}

.section_wrapper {padding: 0;} /* Height of nav bar added to total height: 300 */

#main_slider {width: 100%; height: auto; background: url(../bilder/layout/slider_shadow.png) no-repeat center bottom;}

#social_wrap {width: 100%; height: 1.5em; padding-left: 0; position: fixed; bottom: 0;}
#social {height: 2em; background: #42291c;}
#impressum {float: left; padding-left: 0.375em;}
#facebook {float: left; padding: 0 0.375em;}

/* sections */
.section_wrapper {width: 100%;}
#main-header {width: 100%; height: 14.375em; padding-top: 5.25em; background: url(../bilder/layout/header.png) center top no-repeat;}
#kreationen {margin-top: 2.5em;}
#main-footer {padding: 3.125em 0; background: #42291c; border-top: 3px solid #e3ad21;}

/* classes */
.clear {clear: both; line-height: 0;}
.clear_absatz {height: 0.625em; clear: both;}

.section_head {text-align: center; margin-bottom: 1.25em;}

.text_wrapper_breit {width: 100%; padding: 0 1.25em;}
.text_wrapper {width: 100%; padding: 0 1.25em;}
.marg_bottom {margin-bottom: 3.125em;}

.col {width: 100%;}
.text_kreationen {margin-bottom: 3.125em;}

.trennlinie {background: url(../bilder/layout/trennlinie.png) center top no-repeat; height: 3em; width: 95%; margin: 2.5em 2.5% 3.75em 2.5%;}

.navipunkt_preise {width:7.5em; height: 1.625em; margin-bottom: 1.25em; float: left;}

.groessen_wrapper {}
.groessen {width: 3.875em; text-align: right; float: left;}

.preisliste_wrap {width: 80%; padding: 0.375em; margin: 0 auto; background: #42291c; float: none;}
.preisliste {text-align: center; border: 2px solid #e3ad21;}
.preisliste_linie {height: 2.375em; width: 18.125em; border-bottom: 1px solid #e3ad21; float: left; display: none;}

#colorbox .beschreibung_wrap {width: 100%;}
.preis {width: 3.75em; text-align: right; float: left; font-weight: 300; font-size: 1em;}
.margin {margin-right: 3em;}
.cb {width: 100%; max-width: 26rem;}

.news_pic {background: url(../bilder/layout/image_shadow02.png) no-repeat center bottom; padding-bottom: 1.125rem;}
.img-wrap {width: 100%; display: none;}
.img-wrap:first-of-type {display: block;}
.news_pic img {width: 100%; height: auto; border: 2px solid #e3ad21;}

.column {width: 100%; float: left;}
.column_wide {width: 100%; float: left;}

.slider-wrap {display: none;}
.touchslider-viewport {width:100%; height:22.5em; overflow:hidden; border: 2px solid #e3ad21;}

/* ajax */
#klassisch > .preis, #vegetarisch > .preis, #specials > .preis, #specials > .groessen_wrapper {display: none;}

/* format */
p {font-size: 0.875em; font-weight: 400; line-height: 1.625em;}

.absatz {line-height: 0.625em;}

h1, h2 {font-family:'Fette Fraktur W01 692471'; font-size: 2em; line-height: 2em; color: #e3ad21;}

.light {font-weight: 300;}
.bold {font-weight: 700;}

.white {color: #fff;}

.versal {text-transform: uppercase;}

.center {text-align: center;}

.head {font-weight: 300; font-size: 1.875em; line-height: 2.5em; color: #e3ad21; text-transform: uppercase;}
.name {font-weight: 700; font-size: 1em; line-height: 2em; color: #42291c;}
.beschreibung {font-weight: 400; font-size: 0.75em; line-height: 1.5em;}
.zusatz {font-family: 'Oswald', sans-serif; font-size: 0.5625em; line-height: 1.25em; vertical-align: top;}
.big {font-weight: 400; font-size: 1.625em; line-height: 2em;}
.preis_text {font-size: 0.75em;}
.special_head {font-weight: 300; font-size: 1.375em; line-height: 1.5em;}

.gross {font-size: 1em; line-height: 2em; color: #42291c;}

/* links */
a {font-size: 0.875em; line-height: 1.625em; font-weight: 700; color: #42291c; text-decoration: none;}
a:visited {font-weight: 700; color: #42291c; text-decoration: none;}
a:hover {font-weight: 700; color: #e3ad21; text-decoration: none;}

a.textlink {font-size: 1em; font-weight: 700; color: #42291c; text-decoration: none;}
a.textlink:visited {font-weight: 700; color: #42291c; text-decoration: none;}
a.textlink:hover {font-weight: 700; color: #e3ad21; text-decoration: none;}

a.navi_preise_link {font-weight: 300; color: #42291c; text-decoration: none; text-transform: uppercase;}
a.navi_preise_link:visited {font-weight: 300; color: #42291c; text-decoration: none;}
a.navi_preise_link:hover {font-weight: 300; color: #e3ad21; text-decoration: none;}

a.preisliste_link {text-align: center; color: #fff; text-decoration: none;}
a.preisliste_link:visited {color: #fff; text-decoration: none;}
a.preisliste_link:hover {color: #e3ad21; text-decoration: none;}

a.white_link {font-weight: 700; color: #fff; text-decoration: none;}
a.white_link:visited {font-weight: 700; color: #fff; text-decoration: none;}
a.white_link:hover {font-weight: 700; color: #e3ad21; text-decoration: none;}

a.impressum_link {font-size: 0.6875em; font-weight: 400; color: #fff; text-decoration: none;}
a.impressum_link:visited {font-weight: 400; color: #fff; text-decoration: none;}
a.impressum_link:hover {font-weight: 400; color: #e3ad21; text-decoration: none;}

a.fb_link img {width: 1.2em; height: 1.2em; background: url(../bilder/layout/facebook_icon.png) no-repeat; background-size: 1.2em 1.2em;}
a:hover.fb_link img {width: 1.2em; height: 1.2em; background: url(../bilder/layout/facebook_icon_hov.png) no-repeat; background-size: 1.2em 1.2em;}

/* medium */
@media screen and (min-width:48em) {
/* NAVI */
#main-nav {height: 3.125em;}
#main-nav ul {width: 100%; height: auto; position: relative; background: none; padding: 0; -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0);}

#main-nav li {float: left; text-align:center; width: 25%;}
#main-nav a.menu-item	{font-size: 1em; padding: 0.625em 0;}
#main-nav.fixed a.menu-item	{color: #fff;}

#pull {display: none;}

/* CONTENT */
.cols {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; -ms-flex-wrap: wrap; justify-content: flex-start;}
.col {-webkit-box-flex: initial; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: initial; position: relative; float: left;}

.col-s {width: 33.33%;}
.col-s:nth-of-type(3n+1), .col-ms:nth-of-type(3n+1) {padding: 0 0.66rem 0 0;}
.col-s:nth-of-type(3n+2), .col-ms:nth-of-type(3n+2) {padding: 0 0.33rem;}
.col-s:nth-of-type(3n+3), .col-ms:nth-of-type(3n+3) {padding: 0 0 0 0.66rem;}

.col-ms {width: 50%;}

.img-wrap {display: block;}


.groessen_wrapper {margin-left: 21.875em;}
#colorbox .beschreibung_wrap {width: 18.75em; margin-right: 3.125em; float: left;}


.cb {width: 100%; max-width: 40rem;}
}

/* large */
@media screen and (min-width:64em) {

/* Main Nav */
#main-nav {top: 11.875em;} /* Height of header */
#main-nav li {float: left; text-align:center; width: 20%;}
#main-nav.fixed	{position: fixed; top:0; z-index:100; background: #42291C; border-bottom: 3px solid #e3ad21;}
#nav_wrapper {width: 58.75em; margin: 0 auto;}

#main-nav a.menu-item	{font-size: 1em; padding: 0.625em;}
#main-nav.fixed a.menu-item	{padding: 0.625em; display: block; color: #fff; text-decoration: none; text-transform: uppercase;}
#main-nav img {visibility: hidden;}
#main-nav.fixed img {visibility: visible; margin-top: 0.125em;}
li#logoraute {display: block;}

/* layout */
#wrapper {width: 61.25em; margin: 0 auto; position: relative;}
#main-wrapper {width: 58.75em; margin: 0 auto; background: #fff; box-shadow: 0 0 1.5rem rgba(0,0,0,0.5);}

#logo {text-align: center;}

.section_wrapper {padding: 0;} /* Height of nav bar added to total height: 300 */

#main_slider {width: 58.75em; height: 27.25em; background: url(../bilder/layout/slider_shadow.png) no-repeat;}

#social_wrap {width: 4em; height: 5.75em; padding-left: 0.4em; position: fixed; top: 50%; right: 0; background: url(../bilder/layout/social_shadow.png) no-repeat;}
#social {width:3.6em; height: 5.375em; background: #42291c;}
#impressum {padding-left: 0.375em;}
#facebook {padding: 0.375em 0 0 0.375em;}

/* sections */
#main-header {height: 14.375em; padding-top: 5.25em; background: url(../bilder/layout/header.png)  center top no-repeat;}
#kreationen {margin-top: 2.5em;}
#main-footer {padding: 3.125em 0; background: #42291c; border-top: 3px solid #e3ad21;}

/* classes */
.text_wrapper_breit {width: 100%; padding: 0 1.25em;}
.text_wrapper {width: 100%; padding: 0 3.125em;}

.col-ms {width: 33.33%;}

.col-s:nth-of-type(3n+1), .col-ms:nth-of-type(3n+1) {padding: 0 1rem 0 0;}
.col-s:nth-of-type(3n+2), .col-ms:nth-of-type(3n+2) {padding: 0 0.5rem;}
.col-s:nth-of-type(3n+3), .col-ms:nth-of-type(3n+3) {padding: 0 0 0 1rem;}

/*
.news_pic {width: 31%; height: 12.25em; background: url(../bilder/layout/image_shadow02.png) no-repeat center bottom; float: left;}
.news_pic img {border: 2px solid #e3ad21;}
.margin_news {margin-right: 3.5%;}
*/

.column {width: 29.5%; float: left;}
.column_wide {width: 34%; float: left;}

.preisliste_wrap {width: 13.75em; padding: 0.375em; margin: 0 1em; background: #42291c; float: left;}
.preisliste {text-align: center; border: 2px solid #e3ad21;}
.preisliste_linie {height: 2.375em; width: 18.125em; border-bottom: 1px solid #e3ad21; float: left; display: block;}

.slider-wrap {display: block;}
.touchslider-viewport {width:100%; height:22.5em; overflow:hidden; border: 2px solid #e3ad21;}

.cb {max-width: 60rem;}

/* format*/
h1, h2 {font-size: 2.5em; line-height: 2.5em;}

a.fb_link img {width: 47px; height: 47px; background: url(../bilder/layout/facebook_icon.png) no-repeat; background-size: 3em 3em;}
a:hover.fb_link img {width: 47px; height: 47px; background: url(../bilder/layout/facebook_icon_hov.png) no-repeat; background-size: 3em 3em;}

}