/* ============================================================
   HOUSNKUH KRONACH, Variante A "Abend"
   Designsystem: dunkel, editorial, Anlass- und Abendfokus
   ============================================================ */

@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/barlow-condensed.woff2') format('woff2');font-weight:900;font-display:swap;font-style:normal}
@font-face{font-family:'Bricolage';src:url('/assets/fonts/bricolage.woff2') format('woff2-variations');font-weight:200 800;font-display:swap;font-style:normal}
@font-face{font-family:'InterV';src:url('/assets/fonts/inter.woff2') format('woff2-variations');font-weight:100 900;font-display:swap;font-style:normal}

:root{
  /* Farben */
  --ink:#101311;          /* Seitengrund */
  --ink-2:#171B18;        /* Karten */
  --ink-3:#202722;        /* Rahmen, Hover */
  --cream:#F8F4EB;        /* Markenweiß */
  --cream-70:rgba(248,244,235,.70);
  --cream-52:rgba(248,244,235,.52);
  --cream-14:rgba(248,244,235,.14);
  --cream-08:rgba(248,244,235,.08);
  --brass:#C9A45F;        /* Akzent: Messing, Kerzenlicht */
  --brass-dim:#9A7C42;
  --moss:#5C7059;
  --ok:#7FBF7F;
  /* Typo */
  --display:'Bricolage','Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --brand:'Barlow Condensed','Bricolage',ui-sans-serif,system-ui,sans-serif; /* Schrift der Wortmarke */
  --body:'InterV',Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Maße */
  --wrap:1240px;
  --gut:clamp(20px,5vw,56px);
  --r:2px;
  --r-lg:4px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--body);font-size:clamp(16px,.4vw + 15px,17.5px);line-height:1.65;
  font-variation-settings:'wght' 400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.025em;margin:0;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brass);color:#101311;padding:12px 20px;font-weight:600}
.skip:focus{left:12px;top:12px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--body);font-size:.94rem;font-variation-settings:'wght' 600;
  letter-spacing:.01em;text-decoration:none;cursor:pointer;
  padding:.95em 1.6em;border-radius:999px;border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
  min-height:48px;white-space:nowrap;
}
.btn--primary{background:var(--brass);color:#12140F}
.btn--primary:hover{background:#DCBB79}
.btn--ghost{border-color:var(--cream-14);color:var(--cream);background:transparent}
.btn--ghost:hover{border-color:var(--cream-70);background:var(--cream-08)}
.btn--block{width:100%}
.btn:active{transform:translateY(1px)}

/* ---------- Marken-Elemente ---------- */
.wordmark{display:block;width:100%;height:100%;background:currentColor;
  -webkit-mask:url('/assets/img/mask-wordmark.png') no-repeat center/contain;
  mask:url('/assets/img/mask-wordmark.png') no-repeat center/contain}
.hare{display:block;background:currentColor;
  -webkit-mask:url('/assets/img/mask-hare-outline.png') no-repeat center/contain;
  mask:url('/assets/img/mask-hare-outline.png') no-repeat center/contain}
.hare--solid{-webkit-mask-image:url('/assets/img/mask-hare-solid.png');mask-image:url('/assets/img/mask-hare-solid.png')}

.eyebrow{
  font-family:var(--body);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-variation-settings:'wght' 600;color:var(--brass);margin:0 0 1.1em;display:flex;align-items:center;gap:.9em
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);flex:none}
.sec-no{font-family:var(--display);font-size:.8rem;letter-spacing:.14em;color:var(--cream-52);font-variation-settings:'wght' 600}

/* ---------- Hinweisleiste ---------- */
.notice{position:fixed;inset:0 0 auto;z-index:120;background:var(--brass);color:#12140F;
  font-size:.85rem;line-height:1.4;text-align:center;padding:9px var(--gut);font-variation-settings:'wght' 600}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:var(--notice-h,0px) 0 auto;z-index:100;transition:background .3s ease,border-color .3s ease,backdrop-filter .3s}
.hdr::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:transparent;transition:background .3s}
.hdr.is-stuck{background:rgba(16,19,17,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hdr.is-stuck::after{background:var(--cream-14)}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:74px}
.hdr__logo{color:var(--cream);height:32px;aspect-ratio:867/322;flex:none;text-decoration:none}
.hdr__logo span{position:absolute;left:-9999px}
.nav{display:none;margin-left:auto;gap:clamp(14px,2vw,30px)}
.nav a{text-decoration:none;font-size:.88rem;font-variation-settings:'wght' 500;color:var(--cream-70);padding:6px 0;position:relative}
.nav a:hover{color:var(--cream)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brass);transition:right .25s ease}
.nav a:hover::after{right:0}
.hdr__cta{margin-left:auto;display:flex;align-items:center;gap:8px}
.hdr__cta .btn{padding:.7em 1.25em;font-size:.85rem}
/* Anruf-Knopf: mit Text auf grossen Schirmen, als reines Icon auf kleinen.
   Der Reservieren-Knopf kuerzt unter 480px seine Beschriftung, damit die
   Kopfzeile auf schmalen Telefonen nicht umbricht. */
.hdr__tel svg{width:16px;height:16px;flex:none}
.u-kurz{display:none}
@media (max-width:759px){
  .hdr__tel-txt{display:none}
  .hdr__tel{padding:.7em .85em}
}
@media (max-width:479px){
  .hdr__cta .u-lang{display:none}
  .hdr__cta .u-kurz{display:inline}
  .hdr__cta{gap:6px}
}
.newdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#E58B7B;margin-left:6px;vertical-align:middle;flex:none}
@media (min-width:1000px){
  .nav{display:flex}
  .hdr__cta{margin-left:0}
}
/* Unter 480px traegt die mobile Aktionsleiste den Wochenkarten-Zugang,
   der Header-Button wuerde die Zeile sprengen. */
@media (max-width:479px){#wkBtnHdr{display:none!important}}
@media (max-width:759px){#skBtnHdr{display:none!important}}
/* Ab 1000px zeigt das Menueband Speisekarte und Wochenkarte, dann bleibt
   im Header nur der Reservieren-Knopf als klarer Handlungsaufruf. */
@media (min-width:1000px){#skBtnHdr,#wkBtnHdr{display:none!important}}
.nav a{position:relative}
.nav .newdot{position:static;margin-left:.4em;vertical-align:middle}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;padding-block:120px clamp(28px,5vw,64px)}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,19,17,.82) 0%,rgba(16,19,17,.36) 34%,rgba(16,19,17,.72) 66%,rgba(16,19,17,.97) 100%)}
.hero__in{position:relative;z-index:1}
.hero h1{font-family:var(--brand);font-weight:900;font-variation-settings:normal;
  font-size:clamp(3.1rem,10.4vw,7.1rem);line-height:.98;letter-spacing:-.005em;
  padding-top:.06em}
/* Telefone bekommen eine eigene Groessenformel: 8.8vw entspricht 34px bei
   390px Breite, dort stehen beide Zeilen der Ueberschrift einzeilig.
   Ab 600px gilt wieder die grosse Formel, der Desktop ist unveraendert. */
@media (max-width:599px){.hero h1{font-size:clamp(1.9rem,8.8vw,3.1rem)}}
.hero h1 em{font-style:normal;color:var(--brass);display:block}
@supports (font-variation-settings:normal){.hero h1{font-synthesis:none}}
.hero__sub{max-width:46ch;color:var(--cream-70);font-size:clamp(1rem,.5vw + .95rem,1.2rem);margin-top:1.3em}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2em}

.status{display:inline-flex;align-items:center;gap:.6em;background:rgba(16,19,17,.55);border:1px solid var(--cream-14);
  border-radius:999px;padding:.45em 1em;font-size:.82rem;color:var(--cream);backdrop-filter:blur(8px);margin-bottom:1.6em}
.status__dot{width:8px;height:8px;border-radius:50%;background:var(--cream-52);flex:none}
.status[data-open="1"] .status__dot{background:var(--ok);box-shadow:0 0 0 4px rgba(127,191,127,.18)}
.status b{font-variation-settings:'wght' 600}

/* Vertrauensleiste */
.trust{border-top:1px solid var(--cream-14);border-bottom:1px solid var(--cream-14);background:var(--ink-2)}
/* Runde Pills im Formvokabular der Seite (Buttons und Status-Anzeige sind
   ebenfalls Pills). Der CI-Hase sitzt als Marke in jeder Pill. */
.trust ul{list-style:none;margin:0;padding:clamp(20px,3vw,30px) 0;display:flex;flex-wrap:wrap;
  gap:12px clamp(10px,1.1vw,14px);justify-content:center}
.trust li{display:inline-flex;align-items:center;gap:.7em;border:1px solid var(--cream-14);
  border-radius:999px;padding:.72em 1.28em;font-size:.98rem;color:var(--cream-70);
  background:rgba(16,19,17,.5);line-height:1.35;transition:border-color .3s,color .3s}
.trust li:hover{border-color:var(--cream-30,rgba(248,244,235,.3))}
.trust li::before{content:"";flex:none;width:17px;height:23px;
  background:currentColor;color:var(--brass);opacity:.75;
  -webkit-mask:url('/assets/img/mask-hare-solid.png') no-repeat center/contain;
  mask:url('/assets/img/mask-hare-solid.png') no-repeat center/contain}
.trust b{color:var(--cream);font-variation-settings:'wght' 600;font-weight:600}
/* Die Bewertung fuehrt die Reihe an und traegt die Sterne statt des Hasen. */
.trust li--stars{border-color:rgba(201,164,95,.42)}
.trust li--stars::before{display:none}
.trust__stars{color:var(--brass);letter-spacing:.04em;white-space:nowrap;font-size:.94em}
.trust__stars .half{display:inline-block;width:.55em;overflow:hidden;vertical-align:bottom}
@media (max-width:600px){
  .trust ul{gap:10px;padding:20px 0}
  .trust li{font-size:.92rem;padding:.66em 1.2em}
  .trust li::before{width:15px;height:20px}
}

/* ---------- Sektionen ---------- */
/* Sprungziele muessen UNTER der 74px hohen fixen Kopfzeile landen, sonst
   verschwindet die Sektionszeile (etwa "04 Anlässe") exakt dahinter. */
section{scroll-margin-top:calc(96px + var(--notice-h,0px))}
.sec{padding-block:clamp(64px,10vw,132px)}
.sec--tight{padding-block:clamp(48px,7vw,96px)}
.sec__head{display:grid;gap:clamp(14px,2vw,26px);margin-bottom:clamp(34px,5vw,64px)}
.sec__head h2{font-size:clamp(2rem,4.6vw,3.5rem);font-variation-settings:'wght' 700}
.sec__head p{color:var(--cream-70);max-width:56ch;margin:0}
@media (min-width:900px){
  .sec__head{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:end;gap:48px}
  .sec__head .sec__lead{padding-bottom:.4em}
}
.rule{height:1px;background:var(--cream-14);margin-bottom:clamp(22px,3vw,34px)}
.rule-row{display:flex;align-items:baseline;gap:16px;margin-bottom:14px}
.rule-row .line{flex:1;height:1px;background:var(--cream-14)}

/* ---------- Welten-Karten ---------- */
.worlds{display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:1fr}
@media (min-width:820px){.worlds{grid-template-columns:repeat(3,1fr)}}
/* Der helle Rand liegt bewusst NUR am Textteil, nicht rund um die Karte.
   Laege er aussen, zoege er eine helle Haarlinie ueber die Oberkante des
   Fotos, die auf hellen Motiven als weisser Rand auffaellt. */
.world{position:relative;overflow:hidden;background:var(--ink-2);border-radius:var(--r-lg);
  display:flex;flex-direction:column}
.world figure{margin:0;overflow:hidden}
.world img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
@media (min-width:820px){.world img{aspect-ratio:3/4}}
.world:hover img{transform:scale(1.045)}
.world__b{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:.5em;flex:1;
  border:1px solid var(--cream-14);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg)}
.world h3{font-size:1.45rem}
.world p{color:var(--cream-70);font-size:.94rem;margin:0}
/* Immer buendig an der Unterkante der Karte, ueber alle drei Karten gleich:
   die Karte selbst streckt sich im Grid (align-items:stretch ist Default),
   height:100% gibt die Hoehe an die Flex-Spalte weiter. Schrift bewusst
   leiser als vorher: kleiner, gesperrt, Creme statt Messing. */
.world{height:100%}
.world__b .world__meta{margin-top:auto}
.world__meta{margin-top:auto;padding-top:1.4em;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-52);display:flex;align-items:center;gap:.7em}
.world__meta::before{content:"";width:18px;height:1px;background:var(--brass);opacity:.6;flex:none}

/* ---------- Story ---------- */
/* Die Belagerungs-Anekdote traegt die Sektion, deshalb abgesetzt mit
   Messing-Linie statt nur als weiterer Absatz. */
.story__legende{position:relative;padding-left:clamp(16px,2vw,24px);margin-block:1.3em;
  border-left:2px solid var(--brass);color:var(--cream)!important;font-size:1.02rem}
/* Die Sage als kleines Schauspiel: sobald der Block ins Bild kommt, hoppelt
   die Haesin einmal ueber die Zinnen der Stadtmauer und bleibt am rechten
   Ende sitzen. Ein Durchlauf, kein Loop. */
.sage__kicker{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin:1.4em 0 .2em}
.sage .story__legende{margin-block:.6em 0}
.sage__mauer{position:relative;height:58px;margin:.2em 0 .6em}
.sage__wand{position:absolute;inset:auto 0 0 0;height:12px;
  background:
    repeating-linear-gradient(90deg,var(--cream-14) 0 18px,transparent 18px 32px) top left/100% 7px no-repeat,
    linear-gradient(var(--cream-14) 0 0) bottom/100% 3px no-repeat}
.sage__hase{position:absolute;bottom:10px;left:0;width:30px;height:40px}
.sage__hase i{display:block;width:100%;height:100%;background:currentColor;color:var(--brass);opacity:.85;
  -webkit-mask:url('/assets/img/mask-hare-solid.png') no-repeat center/contain;
  mask:url('/assets/img/mask-hare-solid.png') no-repeat center/contain;
  transform:scaleX(-1)} /* Maske blickt links, die Reise geht nach rechts */
.sage.in .sage__hase{animation:sage-lauf 7s linear .4s forwards}
.sage.in .sage__hase i{animation:sage-hopser .5s ease-in-out .4s 14}
@keyframes sage-lauf{from{left:0}to{left:calc(100% - 30px)}}
@keyframes sage-hopser{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-9px)}}
@media (prefers-reduced-motion:reduce){
  .sage__hase{left:auto;right:0}
  .sage.in .sage__hase,.sage.in .sage__hase i{animation:none}
}
/* Strichzeichnung von Eva-Maria Amm, als Maske eingefaerbt. Sie zeichnet sich
   beim Hereinscrollen von links nach rechts auf. */
.haus-zeichnung{margin:clamp(30px,4vw,46px) 0 0;padding:0}
.haus-zeichnung__bild{display:block;width:100%;aspect-ratio:900/733;background:currentColor;color:var(--cream);
  opacity:.82;-webkit-mask:url('/assets/img/mask-haus.png') no-repeat center/contain;
  mask:url('/assets/img/mask-haus.png') no-repeat center/contain;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.25,.6,.3,1)}
.haus-zeichnung.in .haus-zeichnung__bild{clip-path:inset(0 0 0 0)}
.haus-zeichnung figcaption{margin-top:.9em;font-size:.8rem;color:var(--cream-52)}
@media (prefers-reduced-motion:reduce){
  .haus-zeichnung__bild{transition:none;clip-path:inset(0 0 0 0)}
}
.story{display:grid;gap:clamp(28px,5vw,64px);align-items:start}
@media (min-width:960px){.story{grid-template-columns:1.05fr .95fr}}
.story__txt p{color:var(--cream-70)}
.story__txt p:first-of-type{font-size:clamp(1.1rem,1.5vw,1.35rem);color:var(--cream);line-height:1.5}
.story__media{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.story__media img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}
.story__media .tall{grid-row:span 2;aspect-ratio:3/5}
.story__media .sq{aspect-ratio:1/1}
/* Steckbrief im Stil einer Speisekarte: Begriff links in der Logoschrift,
   Punktlinie als Fuellung, Wert rechts. Dieselbe Sprache wie die Karte
   im Haus, statt einer Tabellen-Liste. */
.steckbrief{margin:2em 0 0;display:flex;flex-direction:column;gap:2px}
.steckbrief div{display:flex;align-items:baseline;gap:.65em;padding:9px 0}
.steckbrief dt{font-family:var(--display);font-variation-settings:'wght' 700;text-transform:uppercase;
  letter-spacing:.08em;font-size:1.02rem;color:var(--brass);flex:none}
.steckbrief__linie{flex:1;min-width:24px;border-bottom:2px dotted var(--cream-14);transform:translateY(-4px)}
/* dd MUSS schrumpfen duerfen (flex-shrink plus min-width:0), sonst schiebt
   eine lange Zeile die Reihe ueber den Viewport hinaus und die Seite
   scrollt seitlich, sichtbar als abgeschnittene Buchstaben am Rand. */
.steckbrief dd{margin:0;color:var(--cream);font-size:.92rem;text-align:right;flex:0 1 auto;min-width:0;max-width:60%;overflow-wrap:break-word}
/* Auf schmalen Telefonen kippt die Zeile: Begriff oben, Wert darunter.
   Rechtsbuendige Dreizeiler neben der Punktlinie liest niemand gern. */
@media (max-width:479px){
  .steckbrief div{flex-wrap:wrap;row-gap:.1em;padding:8px 0;border-bottom:1px dotted var(--cream-14)}
  .steckbrief div:last-child{border-bottom:0}
  .steckbrief__linie{display:none}
  .steckbrief dd{flex:1 0 100%;text-align:left;max-width:none}
}

/* ---------- Küche / Rail ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:18px;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--cream-14)}
@media (min-width:640px){.rail{grid-auto-columns:44%}}
@media (min-width:1000px){
  .rail{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin-inline:0;padding-inline:0;gap:clamp(14px,1.6vw,20px)}
}
.dish{background:var(--ink-2);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.dish img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.dish__b{padding:18px 18px 22px;display:flex;flex-direction:column;gap:.4em;flex:1;
  border:1px solid var(--cream-14);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg)}
.dish h3{font-size:1.12rem;letter-spacing:-.015em}
.dish p{font-size:.88rem;color:var(--cream-70);margin:0}
.dish__tag{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:.2em}
.note{font-size:.86rem;color:var(--cream-52);border-left:2px solid var(--brass-dim);padding-left:14px;margin-top:clamp(24px,3vw,36px);max-width:62ch}

/* ---------- Social Proof ---------- */
.proof{background:var(--ink-2);border-block:1px solid var(--cream-14)}
.proof__top{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,3vw,34px);margin-bottom:clamp(28px,4vw,46px)}
.score{display:flex;align-items:baseline;gap:.35em}
.score b{font-family:var(--display);font-size:clamp(2.6rem,6vw,3.8rem);font-variation-settings:'wght' 700;line-height:1;color:var(--brass)}
.score span{color:var(--cream-52);font-size:.95rem}
.stars{display:flex;gap:3px;color:var(--brass)}
.stars svg{width:17px;height:17px}
.quotes{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:1fr}
@media (min-width:840px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{border:1px solid var(--cream-14);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);background:var(--ink);display:flex;flex-direction:column;gap:1em}
.quote blockquote{margin:0;font-size:1.02rem;line-height:1.55}
.quote figcaption{font-size:.78rem;color:var(--cream-52);letter-spacing:.06em;margin-top:auto}
.src-note{font-size:.76rem;color:var(--cream-52);margin-top:1.6em}

/* ---------- Anlässe ---------- */
.occ{display:grid;gap:clamp(14px,2vw,20px);grid-template-columns:1fr}
@media (min-width:700px){.occ{grid-template-columns:1fr 1fr}}
.occ__item{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:270px;display:flex;align-items:flex-end;isolation:isolate}
.occ__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.occ__item::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,19,17,.15),rgba(16,19,17,.9))}
.occ__item:hover img{transform:scale(1.05)}
.occ__b{padding:clamp(20px,2.4vw,30px)}
.occ__b h3{font-size:1.35rem;margin-bottom:.35em}
.occ__b p{margin:0;font-size:.92rem;color:var(--cream-70)}

/* ---------- Specials-Leiste (Buffet-Kostproben) ----------
   Gleiche Mechanik wie die Galerie: horizontale Schnapp-Leiste. Die Kacheln
   tragen kurze Unterschriften, das Video spielt nur, solange es im Bild ist. */
.specials{margin-top:clamp(28px,4vw,44px)}
.specials__head{max-width:560px;margin-bottom:clamp(16px,2.4vw,24px)}
.specials__head h3{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.015em;margin:.15em 0 .35em}
.specials__lead{color:var(--cream-70);font-size:.95rem;margin:0}
.sp{display:grid;grid-auto-flow:column;grid-auto-columns:66%;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:6px;scrollbar-width:thin}
@media (min-width:700px){.sp{grid-auto-columns:34%}}
@media (min-width:1100px){.sp{grid-auto-columns:24%}}
.sp__item{margin:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:.55em}
.sp__item img,.sp__item video{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);display:block}
.sp__item figcaption{font-size:.8rem;letter-spacing:.04em;color:var(--cream-52)}
.sp__item--video{position:relative}
.sp__item--video video{cursor:pointer}
/* Solange ein Video nicht spielt, sieht es aus wie ein Foto. Das Abzeichen
   markiert die Kachel als Video und verschwindet beim Abspielen. */
.sp__item--video::before{content:"▶";position:absolute;top:10px;left:10px;z-index:1;
  width:34px;height:34px;border-radius:50%;background:rgba(16,19,17,.72);color:var(--brass);
  font-size:.75rem;display:grid;place-items:center;padding-left:3px;pointer-events:none;
  border:1px solid var(--cream-14);transition:opacity .3s}
.sp__item--video.is-playing::before{opacity:0}

/* Breites 16:9-Video in der Kueche-Sektion. Erstes Quermaterial, deshalb
   als eigenes Banner statt als Kachel im Gerichte-Raster. */
.kino{margin:clamp(22px,3.4vw,36px) 0 0;display:flex;flex-direction:column;gap:.6em}
.kino video{width:100%;height:auto;aspect-ratio:832/464;border-radius:var(--r-lg);display:block;cursor:pointer;background:var(--ink-2)}
.kino figcaption{font-size:.8rem;letter-spacing:.04em;color:var(--cream-52)}
@media (min-width:700px){.occ__item--wide{grid-column:span 2;min-height:320px}}

/* ---------- Galerie ---------- */
.gal{display:grid;grid-auto-flow:column;grid-auto-columns:66%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(-1*var(--gut));padding:0 var(--gut) 18px}
.gal>button{scroll-snap-align:center}
@media (min-width:700px){.gal{grid-auto-columns:34%}}
@media (min-width:1100px){.gal{grid-auto-columns:24%}}
.gal button{padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--r-lg);overflow:hidden;display:block}
.gal img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .3s}
.gal button:hover img{transform:scale(1.05);opacity:.9}

.lb{position:fixed;inset:0;z-index:300;background:rgba(10,12,10,.96);display:none;place-items:center;padding:clamp(12px,4vw,40px)}
.lb[open]{display:grid}
.lb img{max-width:min(100%,1200px);max-height:86svh;width:auto;object-fit:contain;border-radius:var(--r-lg)}
.lb__x,.lb__nav{position:absolute;background:rgba(248,244,235,.10);border:1px solid var(--cream-14);color:var(--cream);
  width:48px;height:48px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:1.2rem}
.lb__x{top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px)}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__nav[data-d="-1"]{left:clamp(8px,2vw,24px)}
.lb__nav[data-d="1"]{right:clamp(8px,2vw,24px)}
.lb__x:hover,.lb__nav:hover{background:rgba(248,244,235,.2)}
.lb__cnt{position:absolute;bottom:clamp(12px,3vw,28px);left:50%;transform:translateX(-50%);font-size:.8rem;color:var(--cream-52)}

/* ---------- Reservierung ---------- */
.res{background:var(--ink-2);border-block:1px solid var(--cream-14)}
.res__grid{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:940px){.res__grid{grid-template-columns:1.1fr .9fr}}
.form{display:grid;gap:16px}
.row{display:grid;gap:16px}
@media (min-width:560px){.row--2{grid-template-columns:1fr 1fr}.row--3{grid-template-columns:1fr 1fr 1fr}}
label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-52);margin-bottom:.5em;font-variation-settings:'wght' 600}
input[type="date"]{cursor:pointer}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.65);cursor:pointer;width:20px;height:20px}
.fhint{display:block;margin-top:.45em;font-size:.82rem;color:var(--brass)}
input,select,textarea{
  width:100%;background:var(--ink);border:1px solid var(--cream-14);color:var(--cream);
  font:inherit;font-size:.98rem;padding:.85em 1em;border-radius:var(--r);min-height:50px;
  transition:border-color .2s ease,background .2s ease}
textarea{min-height:110px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:rgba(248,244,235,.28)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass);background:#141814}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A45F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:42px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.84rem;color:var(--cream-70);line-height:1.5}
.check input{width:20px;height:20px;min-height:20px;flex:none;margin-top:2px;accent-color:var(--brass)}
.hp{position:absolute!important;left:-9999px}
.err{color:#E58B7B;font-size:.8rem;margin-top:.4em;display:none}
.field.is-bad input,.field.is-bad select{border-color:#E58B7B}
.field.is-bad .err{display:block}
.formnote{font-size:.8rem;color:var(--cream-52)}
.aside{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.callcard{border:1px solid var(--cream-14);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);background:var(--ink)}
.callcard h3{font-size:1.2rem;margin-bottom:.5em}
.callcard p{color:var(--cream-70);font-size:.9rem}
.bigphone{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.1rem);font-variation-settings:'wght' 700;color:var(--brass);
  text-decoration:none;display:inline-block;margin:.2em 0 .5em;letter-spacing:-.02em}
.bigphone:hover{color:#DCBB79}

/* ---------- Finden ---------- */
.find{display:grid;gap:clamp(26px,4vw,48px)}
@media (min-width:940px){.find{grid-template-columns:.85fr 1.15fr}}
.hours{list-style:none;margin:0;padding:0;border-top:1px solid var(--cream-14)}
.hours li{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--cream-08);font-size:.94rem;color:var(--cream-70)}
.hours li[data-today="1"]{color:var(--cream)}
.hours li[data-today="1"] span:first-child::after{content:" · heute";color:var(--brass);font-size:.8em;letter-spacing:.06em}
.addr{font-style:normal;color:var(--cream-70);margin-bottom:1.4em}
.addr b{color:var(--cream);font-variation-settings:'wght' 600}
.maplink{display:inline-flex;align-items:center;gap:.5em;color:var(--brass);text-decoration:none;font-size:.92rem;font-variation-settings:'wght' 600}
.maplink:hover{text-decoration:underline}
.mapbox{position:relative;border:1px solid var(--cream-14);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/11;background:var(--ink-2)}
.mapbox iframe{width:100%;height:100%;border:0;display:block}
.mapconsent{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:26px;background:var(--ink-2)}
.mapconsent p{font-size:.86rem;color:var(--cream-70);max-width:38ch;margin:0}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--cream-14)}
.faq details:first-of-type{border-top:1px solid var(--cream-14)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--display);font-size:clamp(1.02rem,1.6vw,1.22rem);font-variation-settings:'wght' 600;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;
  border-right:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{color:var(--cream-70);font-size:.95rem;padding-bottom:20px;margin:0;max-width:62ch}

/* ---------- Footer ---------- */
.ft{background:#0C0E0C;border-top:1px solid var(--cream-14);padding-block:clamp(46px,6vw,76px) 120px}
@media (min-width:1000px){.ft{padding-bottom:clamp(46px,6vw,76px)}}
.ft__grid{display:grid;gap:clamp(26px,4vw,48px);grid-template-columns:1fr}
@media (min-width:760px){.ft__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ft h3{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-52);margin-bottom:1.2em;font-family:var(--body);font-variation-settings:'wght' 600}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.7em}
.ft a{color:var(--cream-70);text-decoration:none;font-size:.92rem}
.ft a:hover{color:var(--brass)}
.ft__logo{height:40px;aspect-ratio:867/322;color:var(--cream);margin-bottom:1.2em}
/* Hase haelt die Social-Kanaele wie Ballons an Schnueren. Bewegung bewusst
   langsam und klein, damit sie im Augenwinkel lebendig wirkt statt zu stoeren. */
.ft__hase{position:relative;margin:clamp(34px,5vw,54px) auto 0;width:min(320px,84vw);height:208px}
.ft__hase .tier{position:absolute;left:50%;bottom:0;translate:-50% 0;width:88px;aspect-ratio:440/600;
  background:currentColor;color:var(--brass);opacity:.92;
  -webkit-mask:url('/assets/img/mask-hare-solid.png') no-repeat center/contain;
  mask:url('/assets/img/mask-hare-solid.png') no-repeat center/contain;
  transform-origin:50% 100%;animation:hasewippen 5.5s ease-in-out infinite}
.ft__ballon{position:absolute;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--cream-14);background:var(--ink-2);color:var(--cream);text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s,color .35s}
.ft__ballon svg{width:22px;height:22px}
/* Schnur laeuft schraeg zum Hasen, damit er die Ballons wirklich zu halten scheint */
.ft__ballon::after{content:"";position:absolute;top:100%;left:50%;width:1px;height:var(--schnur,64px);
  transform-origin:top center;transform:rotate(var(--neigung,0deg));
  background:linear-gradient(var(--cream-14),rgba(248,244,235,.05))}
.ft__ballon--ig{left:calc(50% - 74px);top:2px;--schnur:78px;--neigung:-26deg;
  animation:schweben 4.5s ease-in-out infinite}
.ft__ballon--fb{left:calc(50% + 30px);top:26px;--schnur:66px;--neigung:34deg;
  animation:schweben 5.2s ease-in-out infinite .8s}
.ft__ballon:hover,.ft__ballon:focus-visible{transform:translateY(-5px) scale(1.06);border-color:var(--brass);color:var(--brass)}
.ft__hase-txt{position:absolute;left:50%;bottom:-16px;translate:-50% 100%;white-space:nowrap;
  font-size:.78rem;color:var(--cream-52)}
@media (max-width:420px){.ft__hase-txt{white-space:normal;text-align:center;width:min(280px,86vw)}}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes hasewippen{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){
  .ft__hase .tier,.ft__ballon{animation:none}
}
.ft__legal{margin-top:clamp(34px,5vw,56px);padding-top:24px;border-top:1px solid var(--cream-08);
  display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.8rem;color:var(--cream-52)}
.ft__legal a{font-size:.8rem}

/* ---------- Mobile Aktionsleiste ---------- */
.bar{position:fixed;inset:auto 0 0;z-index:90;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(16,19,17,.94);backdrop-filter:blur(14px);border-top:1px solid var(--cream-14)}
.bar a,.bar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;
  font-size:.7rem;letter-spacing:.05em;color:var(--cream-70);min-height:48px;border-radius:999px;border:1px solid var(--cream-14)}
.bar button{background:none;font-family:var(--body);cursor:pointer;padding:0}
.bar a svg,.bar button svg{width:18px;height:18px}
.bar a.is-cta{background:var(--brass);color:#12140F;border-color:var(--brass);font-variation-settings:'wght' 700}
.bar .newdot{position:absolute;margin:0;transform:translate(26px,-16px)}
.bar a,.bar button{position:relative}
@media (min-width:1000px){.bar{display:none}}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* Hase als Wasserzeichen */
.wm{position:absolute;pointer-events:none;color:var(--cream);opacity:.035;width:min(46vw,420px);aspect-ratio:440/601}

/* ---------- Wochenkarte (Dialog) ---------- */
.wk{position:fixed;inset:0;z-index:300;background:rgba(10,12,10,.8);display:grid;place-items:center;
  padding:clamp(12px,4vw,40px);opacity:0;transition:opacity .25s ease}
.wk.is-open{opacity:1}
.wk[hidden]{display:none}
.wk__card{position:relative;background:var(--ink-2);border:1px solid var(--cream-14);border-radius:var(--r-lg);
  padding:clamp(18px,3vw,28px);max-width:680px;width:100%;max-height:92svh;overflow:auto;
  transform:translateY(14px);transition:transform .25s ease}
.wk.is-open .wk__card{transform:none}
.wk__x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;
  background:rgba(248,244,235,.08);border:1px solid var(--cream-14);color:var(--cream);cursor:pointer;
  font-size:1.1rem;display:grid;place-items:center}
.wk__x:hover{background:rgba(248,244,235,.18)}
.wk__period{color:var(--cream-70);font-size:.9rem;margin:.5em 0 0}
.wk__preview{margin:16px 0;border:1px solid var(--cream-14);border-radius:var(--r-lg);overflow:hidden;background:var(--ink)}
/* aspect-ratio als Default (A4 hoch), damit der Platz reserviert ist,
   bevor src gesetzt wird. width/height aus content.json ueberschreiben das. */
.wk__preview img{width:100%;height:auto;aspect-ratio:210/297}
.wk__more{color:var(--cream-52);font-size:.82rem;margin:.6em 0 1em}

/* ---------- Formular-Fehlerbox ---------- */
.formalert{display:none;border:1px solid #E58B7B;background:rgba(229,139,123,.08);color:var(--cream);
  padding:14px 16px;border-radius:var(--r-lg);font-size:.95rem}
.formalert.is-on{display:block}
.formalert a{color:var(--brass);font-family:var(--display);font-size:1.35rem;text-decoration:none;font-variation-settings:'wght' 700}

/* ---------- Seebuehne-Termine ---------- */
.events li span:last-child{text-align:right;color:var(--cream-52)}

/* ---------- Utility-Klassen (ehemals inline styles, CSP) ---------- */
/* Jede Deklaration mit !important, damit die Wirkung exakt der eines
   inline styles entspricht (inline schlaegt jede Selektor-Spezifitaet). */
.u-rel{position:relative!important}
.u-hare-haus{right:-4%!important;top:8%!important}
.u-h2-haus{font-size:clamp(2rem,4.6vw,3.5rem)!important;margin-bottom:.6em!important}
.u-op45{opacity:.45!important}
.u-h2-stimmen{font-size:clamp(1.5rem,3vw,2.2rem)!important;flex-basis:100%!important;margin-top:.3em!important}
.u-h2-res{font-size:clamp(1.9rem,4vw,2.9rem)!important;margin-bottom:.5em!important}
.u-lead-res{color:var(--cream-70)!important;max-width:52ch!important}
.u-consent{text-transform:none!important;letter-spacing:0!important;font-size:.84rem!important;color:var(--cream-70)!important}
.u-brass{color:var(--brass)!important}
.u-m0{margin:0!important}
.u-cream70{color:var(--cream-70)!important}
.u-facts-flat{margin:0!important;border-top:0!important}
.u-bb0{border-bottom:0!important}
.u-h2-finden{font-size:clamp(1.8rem,3.6vw,2.6rem)!important;margin-bottom:.7em!important}
.u-ic16{width:16px!important;height:16px!important}
.u-h3-block{font-size:1.05rem!important;margin:2.2em 0 .9em!important}
.u-note-hours{font-size:.82rem!important;color:var(--cream-52)!important;margin-top:1.2em!important}
.u-h3-tight{font-size:1.05rem!important;margin:2.2em 0 .7em!important}
.u-txt94{color:var(--cream-70)!important;font-size:.94rem!important}
.u-hare-map{width:54px!important;height:74px!important;color:var(--brass)!important;opacity:.7!important}
.u-h2-faq{font-size:clamp(1.8rem,3.6vw,2.6rem)!important;margin-bottom:1.2em!important}
.u-ft-about{color:var(--cream-70)!important;font-size:.92rem!important;max-width:34ch!important}
.u-mt14{margin-top:1.4em!important}
.u-txt92{color:var(--cream-70)!important;font-size:.92rem!important}
.u-op60{opacity:.6!important}
.u-mb07{margin-bottom:.7em!important}
.u-h2-wk{font-size:clamp(1.5rem,3vw,2rem)!important}
.u-m0b05{margin:0 0 .5em!important}
.u-fs105{font-size:1.05rem!important}