
:root{--return-h:34px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--return-h) + 5.5rem)}
body{margin:0;background:#FAF7F1;color:#2B2622;line-height:1.55;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
img,svg,picture{display:block;max-width:100%} img{height:auto} h1,h2,h3,p,ul,ol,dl,figure{margin:0} ul,ol{padding:0;list-style:none} address{font-style:normal}
a{color:inherit} button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid #8F4D14;outline-offset:3px;border-radius:6px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1120px,100% - 2*clamp(16px,4vw,48px));margin-inline:auto}
/* Rückleiste zur Unternehmenswebsite: schmal, sticky, über dem Demo-Header */
.return{position:sticky;top:0;z-index:45;display:flex;align-items:center;justify-content:space-between;gap:6px 16px;min-height:var(--return-h);padding:0 clamp(12px,3vw,24px);background:#14171B;color:#F3F1EB;font:500 12.5px/1.2 system-ui,sans-serif;letter-spacing:.01em}
.return a{color:#F3F1EB;text-decoration:none;display:inline-flex;align-items:center;gap:.45em;white-space:nowrap;padding:7px 0;min-height:var(--return-h)} .return a svg{width:1em;height:1em;flex:none;transition:transform .15s} .return a:hover{text-decoration:underline;color:#fff} .return a:hover svg{transform:translateX(-3px)}
.return .ask{color:#E5C07A} @media(max-width:379px){.return .ask{display:none}}
.nav-toggle{display:none;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:999px;border:1.5px solid currentColor;background:transparent;cursor:pointer;font:600 14px system-ui,sans-serif;white-space:nowrap;flex:none}
.nav-toggle .bars{width:18px;height:12px;position:relative;display:block} .nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,top .2s} .nav-toggle .bars::before{top:0} .nav-toggle .bars::after{top:10px}
.nav-toggle[aria-expanded="true"] .bars::before{top:5px;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] .bars::after{top:5px;transform:rotate(-45deg)}
.hours__status{font-weight:600;margin-bottom:.6em;min-height:1.4em} .hours__status:empty{display:none} .hours__status[data-open="true"]::before,.hours__status[data-open="false"]::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;margin-right:.45em;background:#3E8E5B;vertical-align:baseline} .hours__status[data-open="false"]::before{background:#B3462E}
.hours__table{border-collapse:collapse;width:100%} .hours__table th,.hours__table td{text-align:left;padding:.45em 0;border-bottom:1px solid #E4DBCD;font-weight:400;vertical-align:top} .hours__table th{white-space:nowrap;padding-right:.8em} .hours__table td{text-align:right;white-space:nowrap;font-weight:600} @media(max-width:359px){.hours__table th{white-space:normal}} .hours__table tr.is-today th,.hours__table tr.is-today td{font-weight:700} .hours__table tr.is-today th::after{content:" · heute";font-weight:400;opacity:.7;font-size:.85em}
.hours__note{margin-top:.8em;font-size:.92em;color:#6B6259}
.filter{margin:1.5em 0 2em} .filter__row{display:flex;flex-wrap:wrap;gap:.5rem} .filter__btn{padding:.5em 1em;border-radius:999px;border:1.5px solid #E4DBCD;background:transparent;cursor:pointer;font:600 .92em system-ui,sans-serif;transition:background .15s,color .15s,border-color .15s} .filter__btn:hover{border-color:currentColor} .filter__btn[aria-pressed="true"]{background:#2B2622;color:#FAF7F1;border-color:#2B2622}
.filter__veg{display:inline-flex;align-items:center;gap:.5em;margin-top:.9em;font:500 .95em system-ui,sans-serif;cursor:pointer} .filter__veg input{width:1.1em;height:1.1em;accent-color:#8F4D14}
.filter__empty{margin-top:.8em;font-size:.95em;opacity:.8}
.js-only{display:none} .js .js-only{display:block}
[data-group][hidden],[data-item][hidden]{display:none!important}
.demo-form form{display:grid;gap:1em;min-width:0} .demo-form .f{display:grid;gap:.3em;font:600 .9em system-ui,sans-serif} .demo-form input,.demo-form textarea{width:100%;min-width:0;padding:.7em .8em;border:1.5px solid #E4DBCD;border-radius:8px;background:#fff;font-weight:400} .demo-form input:focus,.demo-form textarea:focus{outline:none;border-color:#8F4D14;box-shadow:0 0 0 3px #8F4D1433} .demo-form textarea{resize:vertical}
.demo-form button{padding:.75em 1.4em;border-radius:999px;border:0;background:#2B2622;color:#FAF7F1;font:600 .95em system-ui,sans-serif;width:max-content;cursor:pointer;transition:background .15s} .demo-form button:hover{background:#8F4D14;color:#fff}
.demo-form__sent{padding:.8em 1em;border-radius:10px;background:#2B262212;font:500 .92em/1.5 system-ui,sans-serif} .demo-form__sent[hidden]{display:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{transition:none!important;animation:none!important}}

body{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;font-size:clamp(16px,1.05vw,18px)}
.skip{position:absolute;left:1rem;top:-100px;padding:.5rem .9rem;background:#2B2622;color:#FAF7F1;border-radius:6px;z-index:100} .skip:focus{top:.5rem}
.header{position:sticky;top:var(--return-h);z-index:40;background:#FAF7F1F0;backdrop-filter:blur(8px);border-bottom:1px solid #E4DBCD}
.header .wrap{display:flex;align-items:center;gap:1rem;min-height:4.25rem}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1.1;margin-right:auto} .brand b{font-weight:600;font-size:1.25em;letter-spacing:-.01em} .brand small{font:500 11px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6B6259;margin-top:.2em}
.nav ul{display:flex;gap:.25rem} .nav__link{display:inline-block;padding:.55rem .9rem;border-radius:999px;text-decoration:none;font:500 .92em system-ui,sans-serif;transition:background .15s,color .15s} .nav__link:hover{background:#F2ECE1} .nav__link[aria-current="page"]{background:#2B2622;color:#FAF7F1}
.hphone{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border-radius:999px;border:1.5px solid #E4DBCD;font:600 .9em system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s} .hphone svg{width:1em;height:1em} .hphone:hover{border-color:#2B2622;background:#F2ECE1} @media(max-width:560px){.hphone .txt{display:none} .hphone{padding:.55rem .65rem}}
@media(max-width:820px){.nav-toggle{display:inline-flex} .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#FAF7F1;border-bottom:1px solid #E4DBCD;box-shadow:0 20px 40px -30px rgba(0,0,0,.4)} .nav[data-open="true"]{display:block} .no-js .nav{display:block;position:static;box-shadow:none;border:0} .nav ul{flex-direction:column;padding:.75rem clamp(16px,4vw,48px) 1.25rem;gap:.15rem} .nav__link{display:block;padding:.8rem .8rem;border-radius:8px;font-size:1em} .no-js .header .wrap{flex-wrap:wrap;padding-block:.75rem} .no-js .nav{width:100%;order:5} .no-js .nav ul{flex-direction:row;flex-wrap:wrap;padding:0 0 .5rem}}
.hero{text-align:center;padding:clamp(40px,7vw,88px) 0 clamp(24px,4vw,40px);display:grid;justify-items:center;gap:1.1em}
.eyebrow{font:600 .78em system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8F4D14}
h1{font-size:clamp(36px,5.6vw,72px);line-height:1.02;letter-spacing:-.02em;max-width:16ch;font-weight:500;text-wrap:balance}
.sub{max-width:46ch;color:#6B6259;font-size:1.08em;text-wrap:pretty}
.actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:.4em}
.btn{display:inline-flex;align-items:center;padding:.8em 1.5em;border-radius:999px;font:600 .95em system-ui,sans-serif;text-decoration:none;background:#2B2622;color:#FAF7F1;transition:background .15s,transform .15s} .btn:hover{background:#3A2E26;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:#2B2622;border:1.5px solid #2B2622} .btn.ghost:hover{background:#F2ECE1}
.band{margin-top:clamp(20px,3vw,36px)} .band picture{border-radius:24px;overflow:hidden;aspect-ratio:16/8;background:#F2ECE1} .band img{width:100%;height:100%;object-fit:cover} @media(max-width:640px){.band picture{aspect-ratio:4/5}}
.strip{margin-top:clamp(28px,5vw,56px);border-top:1px solid #E4DBCD;border-bottom:1px solid #E4DBCD;padding:clamp(20px,3vw,32px) 0;display:grid;gap:1.5rem} @media(min-width:760px){.strip{grid-template-columns:1.2fr 1fr;gap:3rem;align-items:start}}
.strip h2{font-size:1.05em;font:600 .8em system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8F4D14;margin-bottom:.8em}
.strip .hours__table td{font-family:system-ui,sans-serif}
section{padding:clamp(40px,7vw,88px) 0} section+section{padding-top:0}
h2.t{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.015em;font-weight:500;margin-bottom:.3em;text-wrap:balance}
.lead{color:#6B6259;font:400 1em system-ui,sans-serif;max-width:52ch;margin-bottom:1.6em}
.picks{display:grid;gap:1rem} @media(min-width:640px){.picks{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.pick{background:#fff;border:1px solid #E4DBCD;border-radius:18px;padding:1.4rem;display:grid;gap:.4rem;align-content:start;transition:transform .2s,box-shadow .2s} .pick:hover{transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(0,0,0,.35)}
.pick b{font-weight:500;font-size:1.2em} .pick span{font:400 .92em system-ui,sans-serif;color:#6B6259} .pick em{font-style:normal;font:600 1em system-ui,sans-serif;color:#8F4D14;margin-top:.4em}
.more{display:inline-block;margin-top:1.6em;font:600 .95em system-ui,sans-serif;text-decoration-thickness:2px;text-underline-offset:.25em} .more:hover{color:#8F4D14}
.menu-groups{display:grid;gap:clamp(24px,4vw,40px)} @media(min-width:760px){.menu-groups{grid-template-columns:1fr 1fr;column-gap:clamp(32px,6vw,80px)}}
.group .gh{font:600 .8em system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8F4D14;margin-bottom:.7em;padding-bottom:.5em;border-bottom:2px solid #2B2622}
.items li{display:grid;grid-template-columns:1fr auto;gap:.2em 1em;padding:.7em 0;border-bottom:1px dotted #E4DBCD;align-items:baseline} .items b{font-weight:500;font-size:1.05em} .items small{grid-column:1;font:400 .9em system-ui,sans-serif;color:#6B6259} .items em{font-style:normal;font:600 .95em system-ui,sans-serif;white-space:nowrap;grid-column:2;grid-row:1}
.allergens{margin-top:2em;font:400 .92em system-ui,sans-serif;color:#6B6259;border-left:3px solid #8F4D14;padding-left:1em}
.place{display:grid;gap:clamp(24px,4vw,56px);align-items:start} @media(min-width:860px){.place{grid-template-columns:1.1fr .9fr}}
.place .text p{font-size:1.1em;line-height:1.6;margin:.5em 0 1.2em;max-width:50ch} .place .text p.big{font-size:1.5em;line-height:1.25;font-weight:500;margin:0 0 .5em;letter-spacing:-.01em}
.features{display:grid;gap:0;border-top:1px solid #E4DBCD} .features div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.75em 0;border-bottom:1px solid #E4DBCD;font:400 .95em system-ui,sans-serif} .features dt{color:#6B6259} .features dd{margin:0}
.place picture{border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:#F2ECE1} .place img{width:100%;height:100%;object-fit:cover}
.card{background:#3A2E26;color:#FAF7F1;border-radius:24px;padding:clamp(28px,4vw,56px);display:grid;gap:1.5rem} @media(min-width:800px){.card{grid-template-columns:1fr 1fr;gap:3rem}}
.card h2{font-size:clamp(24px,2.8vw,36px);font-weight:500;margin-bottom:.4em} .card address{font-size:1.15em;line-height:1.5} .card p{opacity:.85;margin-top:1em;font:400 .95em system-ui,sans-serif;max-width:40ch}
.card a.tel{display:inline-block;margin-top:1.2em;font:600 1.15em system-ui,sans-serif;text-decoration:none;border-bottom:2px solid #8F4D14} .card a.tel:hover{color:#8F4D14}
.card .hours__table th,.card .hours__table td{border-color:#FAF7F133;font-family:system-ui,sans-serif} .card .hours__status{font-family:system-ui,sans-serif} .card .hours__note{color:inherit;opacity:.85}
.map{border-radius:16px;background:#FAF7F118;min-height:170px;position:relative;overflow:hidden;margin-top:1.2em} .map i{position:absolute;background:#FAF7F130;height:8px;left:-10%;right:-10%} .map i:nth-child(1){top:30%;transform:rotate(-8deg)} .map i:nth-child(2){top:62%;transform:rotate(5deg)} .map i:nth-child(3){width:8px;height:120%;left:38%;top:-10%;right:auto;transform:rotate(12deg)} .map b{position:absolute;left:52%;top:40%;width:22px;height:22px;border-radius:50% 50% 50% 0;background:#8F4D14;transform:rotate(-45deg)} .map span{position:absolute;left:12px;bottom:10px;font:500 11px system-ui,sans-serif;opacity:.7}
.contact{display:grid;gap:2.5rem} @media(min-width:860px){.contact{grid-template-columns:1fr 1fr;gap:4rem}}
.contact .demo-form{background:#fff;border:1px solid #E4DBCD;border-radius:20px;padding:clamp(20px,3vw,32px)} .contact .demo-form h2{font-size:1.3em;font-weight:500;margin-bottom:.8em}
.footer{border-top:1px solid #E4DBCD;padding:clamp(28px,4vw,48px) 0;font:400 .92em system-ui,sans-serif;color:#6B6259} .footer .wrap{display:grid;gap:1.5rem} @media(min-width:760px){.footer .wrap{grid-template-columns:1fr 1fr 1fr}}
.footer b{display:block;color:#2B2622;font-weight:600;margin-bottom:.4em} .footer a{text-decoration:none} .footer a:hover{text-decoration:underline;color:#2B2622} .footer ul{display:grid;gap:.3em}
/* Mobil (unter 600 px): kurze Überschriften, Einführungen, Auswahlkacheln und Verweise zentriert; Karte, Öffnungszeiten, Adresse, Formular und Fußzeile bleiben links. */
@media(max-width:599px){.eyebrow,h1,h2.t,.lead,.place .text p.big,.pick,.filter__row{text-align:center} .lead,.place .text p.big,h1.t{margin-inline:auto} .filter__row{justify-content:center} .more{display:table;margin-inline:auto} .place .text .more{margin-top:1.2em}}
