/*
Theme Name: Kadence Block-Theme
Author: Jan Pferdmenges, KP&Z Werbeagentur GmbH
Author URI: http://www.kp-z.de/team.php
Description: Template für Kadence
Version: 0.1
License: commercial
*/


@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oregano:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');


:root {
    --color-red: #E20613;
    --color-coffee: #925F36;
    --color-cappucino: #BF9C7F;
    --color-latte: #F7F2EB;
    --color-green: #8FD563  ;
	--color-bg1: #ffffff;
	--color-bg2: ##EEEEEE;
	--color-text: #404040;
	--color-headline: #925F36;
	--color-link: #0d4271;
	--color-hover: #FF8000;
	--color-line: #444;
	--color-shadow: #444;
    
    
    --bs-padding: 16px;
}


@font-face {
    font-family: 'amithenregular';
    src: url('fonts/amithen-webfont.eot');
    src: url('fonts/amithen-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/amithen-webfont.woff2') format('woff2'),
         url('fonts/amithen-webfont.woff') format('woff'),
         url('fonts/amithen-webfont.svg#amithenregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v24-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/lato-v24-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lato-v24-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/lato-v24-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* lato-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/lato-v24-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/lato-v24-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* anton-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/anton-v25-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/anton-v25-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* cormorant-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/cormorant-v21-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/cormorant-v21-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}




html, body {padding: 0; margin:0; font-size: 16px; background: white;  min-height: 100%;}
body {line-height: 1.6em;  color: var(--color-text); font-family: "Aleo", serif; font-weight: 400; font-optical-sizing: auto; font-style: normal; padding-top: 60px;}
h1,h2 { color: var(--color-headline); line-height: 1.1em; font-family: "Bebas Neue", sans-serif; font-weight: 400;  margin-top:0; margin-bottom: 1em; font-size: 2rem;}
h3 {font-weight: 700; color: var(--color-headline); font-size: 1.4rem;line-height: 1.1em;}
:where(h1, h2, h3, h4) + p {margin-top:0;}
:where(h1, h2, h3, h4).colorWhite {color:white;}
a {color: var(--color-coffee); transition: 300ms; font-style: italic;}
a:hover {color: var(--color-hover);}
a::before {content: ''; background-image: url("img/back-coffee.svg"); width: 16px; height: 16px;display: inline-block; margin-right: 5px; }
a:hover::before {content: ''; background-image: url("img/back-hover.svg"); width: 16px; height: 16px;display: inline-block; margin-right: 5px; }
.classicLink a::before, a:where(.classicLink, .button)::before {content: unset;}
.classicLink a:hover::before, a:where(.classicLink, .button):hover::before {content: unset;}
:where(#Topbar) a {font-style: normal; }
:where(#Topbar) a::before, :where(#Topbar) a:hover::before {content: unset; }

p {margin-bottom: 0.5rem;}
div {box-sizing: border-box;}
section {padding: 75px 0;}

a.button {background: var(--color-red); color: white; border-radius: 10px; padding: .4em 1em; cursor: pointer; text-decoration: none; font-size: 1.125rem; transition: all .3s ease-in-out; white-space: nowrap; margin-top: 0.8em; display: inline-block; margin-right: .8em;}
a.button:hover {background: var(--color-hover); c}



/*
**		Hintergründe
*/

.bgLatte {background-color: var(--color-latte);}
.bgCappucino {background-color: var(--color-cappucino);}
.bgCoffee {background-color: var(--color-coffee); color: white;}
.bgCoffee :where(h1, h2, h3, a) {color: white;}
section.grasnarbe, section.grasnarbe2 {padding-top: 100px; position: relative;}
section.grasnarbe::before {content: ''; display: block; width: 100%; background-image: url("img/grastop768.webp"); background-size: contain; background-position: top; background-repeat: no-repeat; position: absolute; top:0; left: 0; height: 10vw; z-index: 1;}
section.grasnarbe2::before {content: ''; display: block; width: 100%; background-image: url("img/grastop_pig.webp"); background-size: contain; background-position: top; background-repeat: no-repeat; position: absolute; top:0; left: 0; height: 10vw; z-index: 1;}


/*
**		TopBar und Primary Navigation
*/


#MenuIcon {display: flex; align-items: center; height: 100%}
#MenuIcon button {display: block; border: none; background-color: transparent;padding: 0;}
#MenuIcon img {width: 50px; height: auto; display: block;}
#MenuIcon img.navWhite {display: none;}
#MenuIcon span {margin-left: 10px; display: none;}
#MenuCheckBox {display: none; pointer-events: absolute;}

#Topbar {position: fixed; top: 0; left:0; width: 100%; z-index: 10000; transition-duration: 500ms;filter: drop-shadow(0 5px 12px rgba(0,0,0,0.5));} 
#Topbar > div {display: flex; justify-content: space-between; height: 60px; background-color: white; transition-duration: 500ms; } 
#Topbar > span {display: absolute; position: absolute; bottom: 0; right: 0; padding: 5px 15px; color: white; background-color: rgba(2,47,89,.7); border-radius: 8px 0 0 8px; transform: translateY(60%); font-weight: 600; z-index: 10;}
#Topbar .topbarPhone {position: absolute; top:2px; right: 8px; font-size: 0.8rem; transition-duration: 500ms; transform: translateY(-30px);}
#Topbar .topbarPhone > img {vertical-align: baseline; transform: translateY(2px); padding-right: 5px;}


/*
#Logo {display: block;  height: 85px; mask-image: url("img/mask_shield.svg"); mask-size: cover; mask-repeat: no-repeat; mask-position: bottom; width: 200px; position: relative; }
*/
#Logo {width: 180px; height: 70px; position: relative; transition-duration: 500ms;}
#Logo > a {display: block;  width: 100%; height: 100%;   }
#Logo > a > div {width: 100%; height: 100%; padding:10px; background-color: var(--color-latte); box-sizing: border-box;mask-image: url("img/mask_shield.svg"); mask-size: cover; mask-repeat: no-repeat; mask-position: bottom; transition-duration: 500ms;}
#Logo > a > div > img {display: block; width: 100%; height: auto; margin-top: 5px;height: auto; transition-duration: 500ms;}
#Logo::before, #Logo::after {content: ' '; display: block; width: 25px; height: 60px; background-color: white; position: absolute; top: 0; left: -25px; z-index: 1; transition-duration: 500ms;}
#Logo::after {left: unset; right:-25px;}

#JhpMenu {position: relative; z-index: -1;}
#MenuCheckBox:checked ~ #JhpMenu > span {opacity: 1; width: 100%; }
/*#MenuCheckBox:focus-within ~ #JhpMenu > span {opacity: 1; width: 100%; }*/
#JhpMenu > div {position: fixed; top:0; left: 0; width: max(250px,40vw); height: 100vh; display: flex; align-items: center; z-index: -1; background-color: white;  transform: translateX(-100vw);  transition-duration: 1000ms;  border-right: 5px solid var(--color-red);}
#MenuCheckBox:checked ~ #JhpMenu > div {transform: translateX(0);}
#MenuIcon:focus-within ~ #JhpMenu > div {transform: translateX(0);}
#JhpMenu:focus-within > div {transform: translateX(0);}

#JhpMenu > div > ul {margin: 0; padding: 0; list-style: none; display: block; width: 100%; transition-duration: 500ms;}
#JhpMenu > div > ul a {color: var(--color-coffee); text-decoration: none; transition: 300ms; display: inline-block; width: 100%;}
#JhpMenu > div > ul a:hover {color: var(--color-hover); }
#JhpMenu > div > ul > li {padding: 0 0 0 7px; border-left: 8px solid var(--color-latte); transition-duration: 500ms;}
#JhpMenu > div > ul > li.current-menu-item {border-left-color:var(--color-red);}
#JhpMenu > div > ul > li > a {font-weight: 600; padding: 8px 0; }
#JhpMenu > div > ul > li > ul {list-style: none; }


/*
**		SLIDER und Header
*/



.headerBild {position: relative; height: 60vw; mask-image: url("img/mask_shield.svg"); mask-position: bottom; mask-size: cover;}

figure.headerBild.wp-block-kadence-image {margin-bottom: 0;}
figure.headerBild.wp-block-kadence-image .kb-image-ratio-land169{padding-bottom: 75%;}

/*
**		Footer
*/


footer {padding-top: 50px; background-color: var(--color-coffee); color: white; font-size: 0.85rem; line-height: 1.3em; overflow: hidden; }
footer .footer-spalte-1, footer .footer-spalte-3 {text-align: center;}
footer .kontaktbezeichnung {display: inline-block; min-width: 60px;}
footer a {color: white; text-decoration: none;}
footer a:hover {color: var(--color-hover);}
footer a::before, footer a:hover::before {content: unset;}
footer table.jhp-oeffnungszeiten {margin: 0 auto;}

footer ul.menu {padding: 0; margin:30px 0 0 0; list-style: none; display: flex; justify-content: center; }
footer ul.menu > li {margin-right: 15px; text-transform: uppercase; font-size: 0.7rem; }
footer .footerSocial {display: flex; justify-content: center;}
footer .footerSocial img {display: block; width: auto; height: 25px; transition-duration: 500ms;}
footer .footerSocial img:hover {transform: scale(1.15);}
footer .footerSocial > a:not(:first-child) {margin-left: 10px;}

footer > .bottomLine {
    background-color: black; color: #555; text-align: center; margin-top: 50px; padding: 3px 5px; font-size: 12px; transition: 300ms;
    &:hover {color:#999;
    &:has(a:hover){color:#555;}
    }
    a {color: inherit; font-style: normal; white-space: nowrap; transition: 300ms;
        &:hover {text-decoration: underline; color: #999;s}
    }
}

/*
**		Cookie-Banner
*/

#JhpCookieBanner {position: fixed; bottom:0; width: 90%; z-index: 10; left: 5%; background-color: black; color: white; border-radius: 15px 15px 0 0; padding: 15px; display:flex; justify-content: space-between; transition: 500ms; transform: translateY(100%);}
#JhpCookieBanner.active {transform: translateY(0); transition-delay: 1500ms;}

#JhpCookieBanner .cookieButton {margin-left: 15px; display: block; background-color: var(--color-red); padding: 5px 20px; border-radius: 5px; cursor: pointer; transition-duration: 300ms}
#JhpCookieBanner .cookieButton:hover {transform: scale(1.05);}
#JhpCookieBanner a {color: var(--color-red);}





/*
**		404 Error-Page
*/

.jhp404 h1>span {display: block; font-size: 3em; line-height: 1em;}
.jhp404Image {width: 100%; height: auto; max-width:80px;}


/*
**		Kontaktformular
*/

.inputFeld {width:100%; padding: 1px; border-radius: 5px; border: 1px solid var(--color-coffee); margin-bottom: 15px; position: relative; background-color: white;}
.inputFeld label {position: absolute; top: 10px; left: 5px; font-size: 16px; line-height: 16px; color: #666; -webkit-transition: 300ms; -o-transition: 300ms; transition: 300ms;}
.inputFeld.pflichtangabe label::after {content:'*';}
.inputFeld.filled label {top: 2px; font-size: 11px; line-height: 11px; }
.inputFeld input {font-size: 16px; line-height: 16px;font-family: 'Raleway', sans-serif; padding: 15px 5px 1px 5px; border: none; outline: none; margin:0; width: 100%; color: #333; background-color: transparent;box-sizing: border-box; }
.inputFeld textarea {width: 100%; font-display: 16px; height: 150px; padding: 15px 5px 1px 5px; border: none; outline: none; margin:0; background-color: transparent; box-sizing: border-box;}
.inputFeld:has(input), .inputFeld:has(textarea) {transition: 300ms;}
.inputFeld:has(input:focus), .inputFeld:has(textarea:focus) {background-color: var(--color-latte);}
.checkbox {margin-bottom: 15px;}
.checkbox input {display: inline-block; position: absolute; width: 26px; aspect-ratio: 1/1;margin:0; margin: -1px 0 0 -3px;z-index:0;}
.checkbox input::before {content: ' '; position: absolute; top:-1px; left: -1px; right: -1px; bottom: -1px; background-color: white; z-index: 1;}
.checkbox label {position: relative; padding-left: 30px;}
.checkbox label::before {content: url("img/checkboxOff.png"); position: absolute;left:0; top: -1px;}
.checkbox input:checked ~ label::before {content: url("img/checkboxOn.png"); position: absolute;left:0; top: -1px;}
input[type=submit] {display: inline-block; max-width: 300px; text-align: center; padding: 10px 20px; border-radius: 5px; color:white; text-decoration: none; font-weight: 400; font-size:1.3rem; -webkit-transition-duration: 300ms; -o-transition-duration: 300ms; transition-duration: 300ms; background-color: var(--color-red); cursor: pointer; border: none;}
input[type=submit]:hover {-webkit-transform: scale(1.02);-ms-transform: scale(1.02);transform: scale(1.02); background-color: var(--color-hover);} 

.inputFeld:where([class$="iled"]) {display: none;}

.error {color:red;}
.errorBox {background-color: red; color: white; padding: 15px; border-radius: 10px; font-weight: 700; margin-bottom: 45px;}
.infoBox {background-color: #FF9820; color: white; padding: 15px; border-radius: 10px; font-weight: 700; margin-bottom: 45px;}

.contactBar img {margin: 0 auto; display: block;}
.contactBar h5 {margin: 10px 0 5px 0; font-size: 1rem; color: var(--color-coffee); text-align: center;}
.contactBar h5~div {margin: 0 0 50px 0;  text-align: center;}
.contactBar h5~div > a {color: #555555;}

.iconContact {width: 48px; height: auto;}

.formDescription {display: none;}


/*
**		Rückruf
*/

#RueckrufForm {display: flex; flex-direction: column;}
#RueckrufForm > div {padding-right: 10px; padding-bottom: 10px;}
#Rueckrufsubmit {padding: .4em 1em; color: white; background-color: var(--color-red); border-radius: 3px; border:none; font-size: 1.125rem; transition-duration: 300ms;}
#Rueckrufsubmit:hover {background-color: var(--color-hover);}
#Rueckrufsubmit svg {width: 1em; height: 1em;transform: translateY(3px);}
#Ruecktelefon {padding: .4em 1em; color: var(--color-blau); border-radius: 3px; border:1px solid var(--color-text); font-size: 1.125rem; transition-duration: 300ms; width: 200px;}
#Ruecktelefon:focus { border:1px solid var(--color-blau); background-color: var(--color-lightblue); }
#RueckrufError {color: var(--color-red); border: 2px solid var(--color-red); padding: 8px 10px 8px 40px; border-radius: 5px; position: relative; display: none; margin-bottom: 15px; max-width: 480px;}
#RueckrufError::before {content: url("img/fehler.png"); position: absolute; top: 10px; left: 10px;}
#RueckrufStatus {color: darkgreen; border: 2px solid darkgreen; padding: 8px 10px 8px 40px; border-radius: 5px; position: relative; display: none; margin-bottom: 15px;}
#RueckrufStatus::before {content: url("img/accept.png"); position: absolute; top: 10px; left: 10px;}



/*
**    Tafel beschriftung, Mittagstisch, Wochenangebote
*/

.tafel {font-family: "Marck Script", cursive;}
#Tafel {height: 100%; color: white; padding: 15px;}
#Tafel h1 {color: white; font-family: "Marck Script", cursive; font-weight: normal;  position: relative; text-align: center; transform: rotate(-7deg);padding-bottom: 30px;}
#Tafel h1::after {width: 120px; height: 30px; position: absolute; background-image: url("img/swoosh.webp"); background-size: contain; background-repeat: no-repeat; left: 50%; transform: translateX(-50%); bottom: 0; content: '';}
#Tafel h3 {color: white; font-family: "Marck Script", cursive; font-size: 2rem; font-weight: normal;  position: relative; text-align: center; transform: rotate(-7deg);padding-bottom: 30px;}
#Tafel h3:not(:first-child) {margin-top: 70px;}
#Tafel h3::after {width: 120px; height: 30px; position: absolute; background-image: url("img/swoosh.webp"); background-size: contain; background-repeat: no-repeat; left: 50%; transform: translateX(-50%); bottom: 0; content: '';}
#Tafel .angebot {margin-top: 30px; margin-bottom: 30px;}
#Tafel .angebot p {font-size: 1.1rem; margin: 0;}
#Tafel .angebot p:first-child {font-size: 1.5rem; }
#Tafel .angebot div.preis {font-size: 2rem; text-align: right;}
#Tafel .angebot div.preis > span {font-size: 1.1rem; display: inline-block; margin-right: 25px;}
#Tafel a {color: var(--color-cappucino); font-style: italic; transition-duration: 300ms;}
#Tafel a::before {content: ''; background-image: url("img/back-cappucino.svg"); width: 16px; height: 16px;display: inline-block; margin-right: 5px; }
#Tafel a:hover {color: var(--color-latte);}
#Tafel a:hover::before { background-image: url("img/back-latte.svg"); }


#Tafelschild {padding: 10px 0; display: flex; justify-content: flex-end; margin-bottom: clamp(-80px,calc(-100vw + 360px), 0px);}
#Tafelschild > div { background-image: url("img/tafelschild.webp"); background-size: contain; aspect-ratio: 4/3; width: min(80%, 280px); margin-right: 5%; transform: rotate(3deg) translateY(clamp(-80px,calc(-100vw + 360px),0px)); padding: min(5%, 22px); display: flex; justify-content: center; align-items: center; color: white; font-size: min(7.5vw,30px); line-height: 1.4em; font-family: "Marck Script", cursive; text-align: center;}

#Tafel.headerBild .tafelHeader {display: flex; flex-direction: column;}

.weeklyMittagstisch {display: flex; flex-direction: column; text-align: center;}
.weeklyMittagstisch .tafel {font-family: "Aleo", serif; }
.weeklyMittagstisch .tagesgerichte {margin: 15px 0; padding: 8px; box-shadow: inset 5px 5px 10px -5px rgba(0,0,0,0.74); border: 1px solid var(--color-latte);}
.weeklyMittagstisch .tagesgerichte > div:first-child {color: var(--color-coffee); font-weight: 700; font-size: 1.15rem;}
.weeklyMittagstisch .tagesgerichte .preis { font-weight: 700;}
h2:has(+.mittagstischNextweek) {margin-top: 50px;}
h2:has(+.weeklyMittagstisch) {text-align: center;}

.angebote {display: flex; justify-content: space-around; flex-wrap: wrap;}
.angebote > div {width: 100%; padding: 20px 15px; margin-top: 40px; box-shadow: inset 5px 5px 10px -5px rgba(0,0,0,0.74); border: 1px solid var(--color-latte); position: relative; line-height: 1.3em;}
.angebote .topangebot {background-color: var(--color-latte);}
.angebote .topangebot img {position: absolute; top: 0; right:0; width: 40px; height: auto;transform: translate(8px,-50%);}
.angebote .produkt > span{font-size: 1.2rem; font-weight: 700; display: block; margin-bottom: 10px;}
.angebote .produktdaten {display: flex; justify-content: space-between; align-items: center;}
.angebote .inhaltsstoffe {font-size: 0.6rem; }
.angebote .preis {font-size: 1.3rem; font-weight: 700; margin-top: 10px; text-align: right;}
.angebote .preis > span {font-size: 0.85rem; font-weight: 400; display: inline-block; margin-right: 10px;}
h2:has(+.angebote) {text-align: center;}



/*
**		weitere Elemente
*/

.alignItemsStretch {align-items: stretch;}
.desktop {display:none!important;}
.noMargin {margin:0;}
.noMargin > img {display: block; margin:0;}
.fullHeight, .fullHeight > div {height: 100%;}
.textColorStandard {color: var(--color-text);}
.kt-btn-inner-text {display: inline-block; padding-top: 2px;}

.serviceRaster .kt-image-overlay-inner > .image-overlay-title {border-radius: 25px 0 0 25px; background-color: var(--color-blau)!important; padding-left: 15px; padding-right: 25px; transform: rotate(-5deg) translate(8px,50px)!important;}

.textSchatten {text-shadow: -1px -1px 0px rgba(2,47,89,0.0), 3px 3px 0px rgba(2,47,89,0.5); margin-bottom:0;}

.height50 {height: 50vh;}
.height100, .height100>* {height: 100%;}
.frontPageHeader {position: relative; margin-top: 20vh;font-family: "Anton", sans-serif; font-weight: 400; font-style: normal;}
.frontPageTypo {padding: 8px; position:sticky; top:15vh; height: 40vh;z-index: -1; }
.frontPageSlogan {font-weight: 800; font-size: 10vw; line-height: 1.05em; color: #202020; margin-left: 3vw;  margin-bottom: 10vh;}
.frontPageSlogan > span {color: var(--color-red); font-size: 1.9em; display: inline-block; margin: 0.15em 0 0 -0.5vw;}
.frontPageBilder {display: flex; justify-content: flex-end;}
.frontPageBilder > div {position: relative;}
.frontPageLeftPicture , .frontPageRightPicture  { position: sticky; top: 50vh;}
.frontPageLeftPicture img, .frontPageRightPicture img {height: 30vh; width: auto;}
.frontPageSign {color: white; background-color: var(--color-blau); font-size: 4vw; font-weight: 800; line-height: 1.1em; width: 60vw; text-align: right;padding: 5vw 15vw 10vh 5vw; position: absolute; top: 40vh; left: -10vw;}
.zitat {font-family: "Cormorant", serif; font-optical-sizing: auto; font-weight: 500; font-style: italic; font-size: 1.3rem;}
.handy {overflow: hidden; width: 100%;}
.handy > img {width: 100%; height: auto; max-width: 400px;transform: rotate(-7deg); animation: shake 1.5s; animation-iteration-count: infinite; }
.overflowHidden {overflow: hidden;}

.shield > * { padding: 20px 8px 4vw 8px; mask-image: url("img/mask_shield.svg"); mask-size: cover; mask-position: bottom;}
.shield h3 {text-transform: uppercase; font-family: "Bebas Neue", sans-serif; font-size: 1.8rem;}
.innerShield {background-color: white; padding: 20px 8px 4vw 8px; mask-image: url("img/mask_shield.svg"); mask-size: cover; mask-position: bottom;box-shadow: inset 5px 5px 5px 0 rgba(0,0,0,0.5);}

.drehung {transform: rotate(-5deg);}

.allergenTabelle > table > tbody > tr > td:first-child {width: 35px;} 



/*
**
**      RESPONSIVE
**
*/


@media (min-width: 768px) {
    
    section {padding: 100px 0;}
    h1, h2 {font-size: 3rem; margin-bottom: 0.7em;}
    h3 {font-size: 2rem;}

    .desktop {display: inherit!important;}
    .mobile {display: none!important;}
    
    section.grasnarbe {padding-top: 150px; margin-top: -50px;}
    section.grasnarbe::before {background-image: url("img/grastop.webp");}


    #Topbar {border-bottom: 1px solid #d0d0d0; background-color: white; }
    #Topbar > div {box-shadow: none;border: none; background-color: transparent; padding-top: 0; padding-bottom: 0; justify-content: flex-start;}
    #Topbar .topbarPhone {right: 16px; transform: translateY(0);}
    .mini #Topbar .topbarPhone {transform: translateY(-30px);}
    .mini #Topbar > div{ height: 31px;}
    
    #Logo {width: 240px; height: 85px; }
    #Logo > a > div {padding: 15px;}
    .mini #Logo {height: 50px;}
    .mini #Logo > a > div {padding: 5px 40px;}
    .mini #Logo > a > div > img {margin-top: 0;}
    .mini #Logo::before, .mini #Logo::after {height: 30px;}
    
    #Topbar nav {align-self: flex-start;}
    #MenuIcon {display: none;}
    #JhpMenu {z-index: 0;margin-left: 30px;}
    #JhpMenu > div {position: static; width: 100%; height: auto; display: block; background-color: transparent; transform: translateX(0); box-shadow: unset; border: none;}

    #JhpMenu > div > ul {display: flex; padding-top: 20px;}
    .mini #JhpMenu > div > ul {padding-top: 0px;}
    
    #JhpMenu > div > ul > li {padding: 6px 0 0; border-left: none; margin-left: 20px; border-bottom: 8px solid transparent; }
    .mini #JhpMenu > div > ul > li {padding-top: 4px; }
    #JhpMenu > div > ul > li:first-child {margin-left: 0;}
    #JhpMenu > div > ul > li.current-menu-item > a {color:var(--color-red); }
    #JhpMenu > div > ul > li > a {font-weight: 600; font-size: 1rem;padding: 0; letter-spacing: 0.05em; }
    #JhpMenu > div > ul > li.current-menu-parent > a {color: var(--color-red); }
    #JhpMenu > div > ul > li > ul { position: absolute; padding: 0; top: 60px;background-color: rgba(255,255,255,.85); display: none; transition: 300ms;}
    .mini #JhpMenu > div > ul > li > ul { top: 31px; }
    #JhpMenu > div > ul > li:hover > ul { display: block; }
    #JhpMenu > div > ul > li:focus-within > ul { display: block; }
    #JhpMenu > div > ul > li > ul > li { padding: 3px 8px; transition: 300ms; background-color: transparent;}
    #JhpMenu > div > ul > li > ul > li.current-menu-item > a { color: var(--color-red);}
    #JhpMenu > div > ul > li > ul > li:hover { background-color: var(--color-latte);}
    #JhpMenu > div > ul > li > ul > li:first-child { padding-top: 6px;}
    #JhpMenu > div > ul > li > ul > li:last-child { padding-bottom: 6px;}

    
    
    #Tafelschild {padding: 0; margin-bottom: -180px;}
    #Tafelschild > div { width: 320px;  padding: 24px; transform: rotate(3deg) translateY(-120px); font-size: 34px;}
    
    #Tafel.headerBild .tafelHeader {flex-direction: row; justify-content: space-around; flex-wrap: wrap;}
    #Tafel.headerBild .tafelHeader .angebot {width: 40%;}
    .weeklyMittagstisch {flex-direction: row; flex-wrap: wrap; justify-content: center;}
    .weeklyMittagstisch .tagesgerichte {margin: 30px 0; width: 47%; min-height: 20cqw; padding: 20px 15px 15px 15px}
    .weeklyMittagstisch .tagesgerichte:nth-child(2n) {margin-left: 5%;}
    h2:has(+.mittagstischNextweek) {margin-top: 75px;}
    .angebote > div {width: 45%; min-height: 150px;}
    .angebote .topangebot img {width: 50px; transform: translate(50%,-50%);}


    
    footer .footer-spalte-1, footer .footer-spalte-3 {text-align: left;}
    footer table.jhp-oeffnungszeiten {margin: 0; float: right;}
    footer .footer-spalte-3 {display: flex; justify-content: space-between; margin-top: 50px;}
    footer .footerSocial {justify-content: flex-start;}
    footer ul.menu { margin:0; flex-direction: column; justify-content: flex-start; align-self: flex-end; text-align: right;}
    footer ul.menu > li {margin-right: 0;  }
    footer > .bottomLine { display: flex; justify-content: space-between; text-align: right; padding-inline: 15px;
        > div:first-child {text-align: left;}
    }
    
    .jhp404 {margin-top: 50px;margin-bottom: 50px;}
    .jhp404Image {max-width:150px;}

    .innerShield {padding: 20px 12px 3vw 12px; }
    .shield h3 {font-size: 2.5rem;}

}

@media (min-width: 1024px) {

    section {padding: 125px 0;}
    section.grasnarbe {padding-top: 175px; }
    
    #Topbar .topbarPhone {right: max(calc(50vw - 660px),24px); }
    .headerBild {height: 50vw;}


    #Logo {height: 100px;}
    #Logo > a > div {padding: 20px;}

    footer {padding-top: 100px;}
    
    #Tafelschild > div { margin-right: 20%;}
    #Tafel.headerBild .tafelHeader {justify-content: center; }
    #Tafel.headerBild .tafelHeader .angebot {width: 30%; padding: 0 20px;}
    .weeklyMittagstisch .tagesgerichte {margin: 30px 0; width: 30%; min-height: 20cqw;}
    .weeklyMittagstisch .tagesgerichte:nth-child(2n) {margin-left: unset;}
    .weeklyMittagstisch .tagesgerichte:nth-child(3n), .weeklyMittagstisch .tagesgerichte:nth-child(3n+2) {margin-left: 5%;}
    .angebote > div {width: 30%; }

    
    footer table.jhp-oeffnungszeiten {margin: 0 auto; float: none;}
    footer table .jhp-oeffnungszeiten-headline {text-align: left;}
    footer .footer-spalte-3 {flex-direction: column; justify-content: space-between; margin-top: 0;}
    footer .footerSocial {justify-content: flex-end;}
    footer .footerSocialHeadline {text-align: right;}
    footer ul.menu { margin:0; flex-direction: column; justify-content: flex-start; align-self: flex-end; text-align: right;}
    footer ul.menu > li {margin-right: 0;  }


}


@media (min-width: 1400px) {
    html, body {font-size: 18px;}
    body {padding-top: 65px;}
    h1 {font-size: 4rem; margin-botton: 0.5em;}
    section {padding: 150px 0;}
    footer {padding-top: 100px;}
    footer > .bottomLine { margin-top: 100px; padding-inline: 15px; }
    
    section.grasnarbe {padding-top: 225px; position: relative;margin-top: -75px;}

    
    

    #Topbar > div {height: 65px; } 
    #JhpMenu > div > ul > li {border-bottom-width: 9px; }

    #Topbar > span {padding-right: 10px; }
    #Topbar nav {align-self: flex-start;}
    #MenuIcon {display: none;}
    #Logo::before, #Logo::after {height: 65px;}
    .mini #JhpMenu > div > ul > li {padding-top: 2px; }
    .mini #JhpMenu > div > ul > li > a {font-size: 16px; }
    #JhpMenu > div > ul > li { border-bottom-width: 10px;}
    #JhpMenu > div > ul > li > ul { top: 65px;}

    #Tafelschild {margin-bottom: -10vw;}
    #Tafelschild > div { width: 25vw;  padding: 2vw; transform: rotate(3deg) translateY(-10vw); font-size: 2.6vw; margin-right: clamp(-10vw, calc(-50vw + 900px),25%);}
    #Tafel.headerBild .tafelHeader .angebot {max-width: 460px; padding: 0 50px;}
    .weeklyMittagstisch .tagesgerichte {min-height: 360px;}
    
    .jhp404Image {max-width:200px;}
    
    .innerShield {padding: 30px 15px; width: 80%;}
    .shield h3 {font-size: 2.8rem;}
    .angebote > div {min-height: 250px;}

}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(-7deg); }
  3% { transform: translate(-1px, -2px) rotate(-8deg); }
  6% { transform: translate(-3px, 0px) rotate(-6deg); }
  9% { transform: translate(3px, 2px) rotate(-7deg); }
  12% { transform: translate(1px, -1px) rotate(-6deg); }
  15% { transform: translate(-1px, 2px) rotate(-8deg); }
  18% { transform: translate(-3px, 1px) rotate(-7deg); }
  21% { transform: translate(3px, 1px) rotate(-8deg); }
  24% { transform: translate(-1px, -1px) rotate(-6deg); }
  27% { transform: translate(1px, 2px) rotate(-7deg); }
  30% { transform: translate(1px, -2px) rotate(-8deg); }
  100% { transform: translate(1px, -2px) rotate(-8deg); }
}