/* ══════════════════════════════════════════════════════════════
   TASTY SPOON — "TWO SURFACES" EDITION

   Plain flat backgrounds. No gradient mesh, no colour wash.
   The page alternates between exactly two surface treatments and
   every text colour is defined per surface.

     SAND  (default)  bg #EAE0CC beige  →  text #12514C peacock
     DEEP  (.s-deep)  bg #12514C peacock →  text #EAE0CC beige

   Three brand colours only:
     1. BEIGE    #EAE0CC
     2. PEACOCK  #12514C
     3. CLAY     #C4643F   (lightened/darkened per surface, same hue)

   Type
     Display   : Young Serif       — wedge-serif headlines
     Highlight : Instrument Serif  — high-contrast italic accents & prices
     Text / UI : Hanken Grotesk    — body, nav, labels

   HOW IT WORKS
     :root carries the SAND tokens, so everything is sand by default.
     .s-deep re-declares the same token names, so every component
     below reads var(--txt) / var(--accent) / var(--card-bg) and
     flips automatically. Never hard-code a colour in a component.

   MEASURED CONTRAST (both surfaces verified)
     SAND   --txt   #12514C on #EAE0CC ......... 6.85:1
            --txt-2 peacock @ 86% ............... 4.99:1
            --txt-3 peacock @ 70% ............... 3.50:1  large/decor only
            --accent #8F3F22 .................... 5.49:1
     DEEP   --txt   #EAE0CC on #12514C ......... 6.85:1
            --txt-2 beige @ 80% ................. 4.98:1
            --txt-3 beige @ 64% ................. 3.79:1  large/decor only
            --accent #EAE0CC (beige) ............ 6.85:1

   BREAKPOINTS — one set, used everywhere
     560   header CTA appears · footer columns go 2-up
     720   (unused — kept free on purpose)
     940   desktop nav in · burger out · hero 2-col · order bar out
           these four MUST move together: a burger with no sheet target, or a
           hero that splits while the nav is still collapsed, both read as bugs
     1200  --max, the content ceiling

   Height matters too: the nav sheet centres only above 620px tall and
   shrinks its type below 560px, because phone landscape is ~360px tall and
   the sheet used to run off both ends of it.

   FLOORS — no text below .75rem (12px), no tap target below 44px.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── the three brand colours ── */
  --beige:   #EAE0CC;
  --beige-lt:#F6F0E2;   /* the glass itself: a lighter beige than the ground */
  --peacock: #12514C;
  --clay:    #C4643F;
  /* the darkened clay the header and .s-clay run on. Named here so a component
     that wants the header's colour on any surface reads a token instead of
     repeating the literal. */
  --clay-deep: #8F3F22;

  /* ── SAND surface (the default) ── */
  --bg:      var(--beige);
  --txt:     #12514C;
  --txt-2:   rgba(18,81,76,.86);
  --txt-3:   rgba(18,81,76,.70);

  --accent:       #8F3F22;   /* clay darkened for beige   — 5.49:1 */
  --accent-solid: #8F3F22;
  --accent-on:    #EAE0CC;
  --star:         #B0532C;
  --txt-hi: #0B3B37;   /* raised emphasis (hover/active) */
  /* the ring around every circular food image = the header's clay */
  --ring:   #8F3F22;

  --line:   rgba(18,81,76,.16);
  --line-2: rgba(18,81,76,.09);

  --card-bg:   rgba(246,240,226,.78);
  --card-bg-2: rgba(252,249,242,.90);
  --well:      rgba(255,255,255,.72);   /* recessed control tint */
  --card-br:   rgba(255,255,255,.85);
  --glass-hi:  rgba(255,255,255,.9);                                    /* inner top rim */
  --glass-sheen:linear-gradient(157deg,rgba(255,255,255,.55),rgba(255,255,255,.05) 46%);
  --card-sh:   0 20px 44px rgba(18,81,76,.10), 0 2px 6px rgba(18,81,76,.05);
  --card-hv:   0 30px 60px rgba(18,81,76,.16);

  --mark: rgba(196,100,63,.26);
  /* the veg mark stays a GREEN, but peacock is itself a deep green-teal, so
     it reads as the familiar vegetarian dot without adding a fourth hue.
     Meaning never rests on colour alone: every mark carries title="vegetarisch"
     and the menu subhead spells out the legend. */
  --veg:  var(--peacock);
  --chip: rgba(18,81,76,.08);

  /* ── type ── */
  --display:"Young Serif","Georgia",serif;
  --accent-f:"Instrument Serif","Georgia",serif;
  --sans:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;

  /* ── 4/8 rhythm ── */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px;
  --pad:clamp(20px,5vw,72px);
  --sec:clamp(72px,10vw,140px);
  --max:1200px;                              /* the content column */
  --max-outer:calc(1200px + 2 * var(--pad)); /* same column, for a box that
     carries its own side padding: the padding must sit OUTSIDE the cap or
     the content ends up --pad narrower than every other section */
  --r-lg:30px; --r-md:20px; --r-sm:14px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --t:220ms;

  --z-body:1; --z-modal:80; --z-obar:40; --z-top:50; --z-sheet:60; --z-skip:100;

  /* measured header height — main.js keeps this in sync with the real bar so
     scroll-padding, hero offset and the nav sheet never drift apart */
  --top-h:74px;

  /* one breakpoint set for the whole page (see the RESPONSIVE banner below):
     560 / 720 / 940 / 1200. The desktop nav, the two-column hero and the
     order bar all flip together at 940. */
}

/* ══════════════════════════════════════════════════════════════
   DEEP surface — same token names, flipped values
   ══════════════════════════════════════════════════════════════ */
.s-deep{
  --bg:    var(--peacock);
  --txt:   #EAE0CC;
  --txt-2: rgba(234,224,204,.80);
  --txt-3: rgba(234,224,204,.64);

  /* Clay cannot be the accent on this band: #8F3F22 is 1.26:1 on peacock and
     #C4643F only 2.23:1 — both invisible. A lightened clay would work but reads
     as a fourth colour (pink), so the accent here is simply BEIGE at 6.85:1.
     .hl keeps its distinction through the italic Instrument Serif, not colour. */
  --accent:       #EAE0CC;
  --accent-solid: #EAE0CC;
  --accent-on:    #12514C;
  --star:         #EAE0CC;
  --txt-hi: #FFFFFF;
  /* header clay is 1.26:1 on peacock, so the ring on this band is beige */
  --ring:   #EAE0CC;

  --line:   rgba(234,224,204,.22);
  --line-2: rgba(234,224,204,.12);

  /* Cards on this surface are LIGHT BEIGE glass, so they carry dark text.
     The flip is done by the ".s-deep .glass" token block further down - a
     lightened card with the surface's own light text fails badly (4.36:1). */
  --card-bg:   rgba(246,240,226,.90);
  --card-bg-2: rgba(252,249,242,.94);
  --well:      rgba(0,0,0,.20);         /* light text here -> darken */
  --card-br:   rgba(255,255,255,.60);
  --glass-hi:  rgba(255,255,255,.85);
  --glass-sheen:linear-gradient(157deg,rgba(255,255,255,.50),rgba(255,255,255,.05) 46%);
  --card-sh:   0 20px 44px rgba(0,0,0,.24);
  --card-hv:   0 30px 60px rgba(0,0,0,.34);

  /* the swipe must move AWAY from the text colour, like the card tints:
     a beige swipe under beige text drops it to 3.90:1. Darkening instead. */
  --mark: rgba(0,0,0,.30);
  --veg:  var(--beige);   /* no veg mark currently lands on this band */
  --chip: rgba(18,81,76,.09);

  background:var(--bg);
  color:var(--txt);
}
.s-sand{ background:var(--bg); color:var(--txt); }

/* ═════════════════════════════════════════════════════════════
   CLAY surface — the header and the mobile nav sheet.
   This is the colour the "Bestellen" button used to be, promoted to a
   surface. Text inverts to beige, and --accent-solid becomes beige so the
   button flips the other way and stays visible on its own former colour.
   ═════════════════════════════════════════════════════════════ */
.s-clay{
  --bg:    #8F3F22;               /* clay, darkened — was --accent-solid on sand */
  --txt:   #EAE0CC;               /* beige on clay ................. 5.52:1 */
  --txt-2: rgba(234,224,204,.88); /* .............................. 4.66:1 */
  --txt-3: rgba(234,224,204,.72); /* ........... 3.66:1 large/decor only */

  --accent:       #EAE0CC;
  --accent-solid: #EAE0CC;        /* the CTA inverts: beige fill ... */
  --accent-on:    #8F3F22;        /* ... with clay label ........... 5.52:1 */
  --star:         #EAE0CC;
  --txt-hi: #FFFFFF;
  --ring:   #EAE0CC;

  --line:   rgba(234,224,204,.26);
  --line-2: rgba(234,224,204,.14);

  /* clay is a MID-tone surface carrying LIGHT text, so its wells must be
     DARKENED, not lightened. Beige-based tints drop the label on .pill--glass
     to 4.08:1; black-based tints take it to 6.9:1. Borders stay beige-based
     because they need to read as the lighter element. */
  --card-bg:   rgba(0,0,0,.10);
  --card-bg-2: rgba(0,0,0,.16);
  --well:      rgba(0,0,0,.16);
  --card-br:   rgba(234,224,204,.24);
  --glass-hi:  rgba(255,255,255,.14);
  --glass-sheen:linear-gradient(157deg,rgba(255,255,255,.10),rgba(255,255,255,.015) 46%);
  --card-sh:   0 20px 44px rgba(0,0,0,.24);
  --card-hv:   0 30px 60px rgba(0,0,0,.34);

  --mark: rgba(234,224,204,.24);
  --veg:  var(--beige);   /* no veg mark currently lands on this band */
  --chip: rgba(0,0,0,.10);

  background:var(--bg);
  color:var(--txt);
}

*,*::before,*::after{ box-sizing:border-box; }

/* a class-level `display` outranks the UA's [hidden] rule, which silently
   broke hiding .revs__seed (display:grid). Make [hidden] always win. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%;
      scroll-padding-top:calc(var(--top-h) + var(--s4)); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .menu__tabs{ scroll-behavior:auto; }
}

body{
  margin:0; background:var(--beige); color:var(--txt);
  font-family:var(--sans); font-size:16px; line-height:1.7; font-weight:400;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

img,svg,iframe{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:400; line-height:1.08;
              letter-spacing:-.012em; overflow-wrap:break-word; }
p{ margin:0 0 1.1em; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; }

::selection{ background:var(--peacock); color:var(--beige); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
     clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{
  position:fixed; top:-100px; left:50%; transform:translateX(-50%); z-index:var(--z-skip);
  background:var(--peacock); color:var(--beige); padding:12px 22px; border-radius:0 0 12px 12px;
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition:top var(--t) var(--ease);
}
.skip:focus{ top:0; }

/* ══════════════════════════════════════════════════════════════
   CARD — light-beige glass, one recipe for every card
   ══════════════════════════════════════════════════════════════ */
.glass,
.dishcard,
.rev,
.way{
  position:relative;
  /* Sheen over tint: the gradient plus the inner rim is what reads as glass.
     No backdrop-filter on purpose — the ground behind these cards is a FLAT
     colour, so a blur has nothing to pick up, while the review marquee alone
     would put ~48 blurred layers under animation. It stays on .top, where
     content really does scroll beneath. */
  background:var(--glass-sheen), var(--card-bg);
  border:1px solid var(--card-br);
  border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--card-sh);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT-BEIGE GLASS ON A DARK BAND
   A card here is a light island, so it re-declares the token set the
   way a surface does — including --bg, which .rev__av and .pill--ink
   invert against. Without this the card would be light beige while its
   text stayed beige too.
   ══════════════════════════════════════════════════════════════ */
.s-deep .glass,
.s-deep .dishcard,
.s-deep .rev,
.s-deep .way,
.s-deep .score{
  --bg:    var(--beige-lt);
  --txt:   #12514C;
  --txt-2: rgba(18,81,76,.90);
  --txt-3: rgba(18,81,76,.74);

  --accent:       #8F3F22;
  --accent-solid: #8F3F22;
  --accent-on:    #F6F0E2;
  --star:         #B0532C;
  --txt-hi: #0B3B37;
  --ring:   #8F3F22;   /* card is light beige again */

  --line:   rgba(18,81,76,.18);
  --line-2: rgba(18,81,76,.11);
  --chip:   rgba(18,81,76,.09);
  --veg:    var(--peacock);

  --well:    rgba(255,255,255,.72);
  --card-sh: 0 16px 38px rgba(6,32,30,.30);
  --card-hv: 0 26px 54px rgba(6,32,30,.38);

  color:var(--txt);
}

/* ══════════════════════════════════════════════════════════════
   TYPE + HIGHLIGHTS
   ══════════════════════════════════════════════════════════════ */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 var(--s3);
  font-size:.75rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }

.h2{ font-size:clamp(2rem,4.6vw,3.6rem); margin:0 0 var(--s3); }
.lead{ font-size:1.08rem; color:var(--txt-2); }

/* Instrument Serif italic accent with a hand-drawn underline that draws on scroll */
.hl{
  font-family:var(--accent-f); font-style:italic; font-weight:400;
  color:var(--accent); position:relative; white-space:nowrap;
  padding:0 .04em; letter-spacing:-.005em;
}
.hl svg{
  position:absolute; left:-3%; right:-3%; bottom:-.2em; width:106%; height:.42em;
  overflow:visible; color:currentColor; pointer-events:none;
}
.hl svg path{
  fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round;
  stroke-dasharray:420; stroke-dashoffset:420;
}
.hl.drawn svg path{ stroke-dashoffset:0; transition:stroke-dashoffset 1s var(--ease) .15s; }

/* highlighter swipe */
.mark{ position:relative; display:inline-block; isolation:isolate; }
.mark::before{
  content:""; position:absolute; left:-.14em; right:-.14em; top:.16em; bottom:.04em;
  background:var(--mark); border-radius:3px; z-index:-1;
  transform:scaleX(0) skewX(-7deg); transform-origin:left center;
  transition:transform .75s var(--ease) .2s;
}
.mark.drawn::before{ transform:scaleX(1) skewX(-7deg); }

.sec{ position:relative; z-index:var(--z-body); padding:var(--sec) var(--pad); }
.sec__head{ max-width:var(--max); margin:0 auto var(--s6); }
/* Section subheads are single-sentence notes, not paragraphs. A 56ch reading
   measure was breaking every one of them onto a needless second line, so they
   take the column width and wrap only when the screen actually forces it. */
.sec__sub{ max-width:none; color:var(--txt-2); margin:0; }
.sec__sub b{ color:var(--accent); font-weight:700; }
.sec__sub .veg{ margin:0 2px; }

.txtlink{
  font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:color var(--t) var(--ease);
}
.txtlink:hover{ color:var(--txt); }

/* ══════════════════════════════════════════════════════════════
   PILLS — invert with the surface (min 44px touch target)
   ══════════════════════════════════════════════════════════════ */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:11px 22px; border-radius:999px;
  font-size:.82rem; font-weight:600; letter-spacing:.04em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap; max-width:100%;
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease),
             border-color var(--t) var(--ease), transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease), opacity var(--t) var(--ease);
}
.pill--lg{ min-height:54px; padding:16px 30px; font-size:.86rem; }
/* "WhatsApp catalogue" on one unbreakable line is wider than a small phone
   column, so below 560px labels wrap instead of pushing the layout sideways. */
@media (max-width:560px){ .pill{ white-space:normal; text-align:center; } }
.pill .ar{ width:18px; height:18px; transition:transform var(--t) var(--ease); }
.pill:hover .ar{ transform:translateX(4px); }
.pill:active{ transform:scale(.97); }

/* solid: the surface's text colour becomes the fill, its ground the label */
.pill--ink{ background:var(--txt); color:var(--bg); }
.pill--ink:hover{ opacity:.88; }

.pill--clay{ background:var(--accent-solid); color:var(--accent-on); }
.pill--clay:hover{ opacity:.88; }

.pill--glass{ background:var(--well); color:var(--txt); border-color:var(--line); }
.pill--glass:hover{ border-color:var(--txt); }

/* ══════════════════════════════════════════════════════════════
   VEG MARK
   ══════════════════════════════════════════════════════════════ */
.veg{
  display:inline-block; width:12px; height:12px; border-radius:3px; flex:none;
  border:1.5px solid var(--veg); position:relative; vertical-align:middle;
}
.veg::after{ content:""; position:absolute; inset:0; margin:auto;
             width:4px; height:4px; border-radius:50%; background:var(--veg); }

/* ══════════════════════════════════════════════════════════════
   LANGUAGE FLAGS — two small round flags, click to switch.
   A flag is a country, not a language, so the accessible name on each
   button (set in i18n.js) always names the LANGUAGE and says whether
   it is the current one.
   ══════════════════════════════════════════════════════════════ */
.lang{ display:inline-flex; align-items:center; gap:7px; }
/* Moved into the nav sheet on mobile (see langHome in main.js). There it is a
   primary control rather than a header afterthought, so it gets its own row
   and the full 44px touch target the cramped header cannot afford. */
.sheet__foot .lang{ flex-basis:100%; gap:14px; margin-top:var(--s2); }
.sheet__foot .lang__f{ width:44px; height:44px; }

.lang__f{
  position:relative; width:26px; height:26px; padding:0; flex:none;
  border-radius:50%; cursor:pointer; display:block;
  opacity:.4; filter:saturate(.45);
  transition:opacity var(--t) var(--ease), filter var(--t) var(--ease),
             transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* the visual is 26px; this pushes the hit area out to 42x42 */
.lang__f::after{ content:""; position:absolute; inset:-8px; border-radius:50%; }
.lang__f svg{ width:100%; height:100%; border-radius:50%; display:block; }
.lang__f:hover{ opacity:.85; filter:none; transform:translateY(-1px); }
.lang__f:focus-visible{ outline:2px solid var(--txt); outline-offset:3px; }
.lang__f.is-on{
  opacity:1; filter:none; cursor:default;
  box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--txt);
}
.lang__f.is-on:hover{ transform:none; }
@media (prefers-reduced-motion:reduce){ .lang__f{ transition:none; } }

/* ══════════════════════════════════════════════════════════════
   HEADER — runs on the CLAY surface
   ══════════════════════════════════════════════════════════════ */
.top{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-top);
  padding:14px var(--pad);
  background:var(--bg);                                      /* fallback: solid */
  background:color-mix(in srgb, var(--bg) 94%, transparent); /* follows --bg    */
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line-2);
  transition:box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}
.top__in{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
}
.top.is-stuck{ background:var(--bg); box-shadow:0 6px 22px rgba(0,0,0,.20); }
/* The sheet (z 60) used to cover the header (z 50) — including the burger,
   which is the only close control. Lift the bar over the sheet while it is
   open; the burger is already drawn as an X by its [aria-expanded] rule. */
.top.is-over-sheet{ z-index:calc(var(--z-sheet) + 1); background:transparent;
                    backdrop-filter:none; -webkit-backdrop-filter:none;
                    border-bottom-color:transparent; box-shadow:none; }

.brand{ display:flex; align-items:center; gap:11px; min-height:44px; }
/* ── Wordmark ─────────────────────────────────────────────────
   Set in Young Serif, the display face CLAUDE.md assigns to the brand, so it
   stays crisp at any size, recolours with the surface token and remains real
   selectable text for search and screen readers. The full-colour logo lives
   in the footer instead, where it can have the dark ground it needs. ── */
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__txt b{ font-family:var(--display); font-weight:400;
               font-size:clamp(1.18rem,2.1vw,1.5rem); letter-spacing:-.015em; }
.brand__txt i{ font-style:normal; font-size:.75rem; font-weight:600; letter-spacing:.16em;
               text-transform:uppercase; color:var(--txt-2); margin-top:3px; }
/* Between 940 (where the desktop nav appears) and 1120 the bar is at its
   tightest — German runs "Bewertungen"/"Gerichte" and the subtitle is the
   least load-bearing element, so it stands down for that band only. */
@media (min-width:940px) and (max-width:1119px){ .brand__txt i{ display:none; } }

/* bolder and a step larger: with only five items the bar can carry it, and
   the gap flexes so they still fit the column at the 940px breakpoint */
.top__nav{ display:none; gap:clamp(16px,2.2vw,32px); }
@media (min-width:940px){ .top__nav{ display:flex; } }
.top__nav a{
  position:relative; font-size:1rem; font-weight:700; letter-spacing:.004em;
  color:var(--txt); padding:7px 0; white-space:nowrap;
  transition:color var(--t) var(--ease);
}
.top__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.top__nav a:hover, .top__nav a.is-active{ color:var(--txt-hi); }
.top__nav a:hover::after, .top__nav a.is-active::after{ transform:scaleX(1); }

.top__act{ display:flex; align-items:center; gap:10px; }
.top__act .pill{ display:none; }
/* "Bestellen" is 9 characters, "Order" is 5 — without a floor the pill
   shrinks on switch and drags the flags across with it. */
@media (min-width:560px){ .top__act .pill{ min-width:7.2rem; } }
@media (min-width:560px){ .top__act .pill{ display:inline-flex; } }

.burger{ width:44px; height:44px; display:grid; place-content:center; gap:6px; }
@media (min-width:940px){ .burger{ display:none; } }
.burger span{ display:block; width:22px; height:1.8px; background:var(--txt); border-radius:2px;
              transition:transform var(--t) var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.9px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.9px) rotate(-45deg); }

.sheet{
  position:fixed; inset:0; z-index:var(--z-sheet);
  display:flex; flex-direction:column; justify-content:center; gap:var(--s6);
  padding:calc(var(--top-h) + var(--s5)) var(--pad) var(--s6);
  background:var(--bg); overflow-y:auto;
}
@media (max-height:620px){ .sheet{ justify-content:flex-start; } }
.sheet[hidden]{ display:none; }
.sheet__nav{ display:flex; flex-direction:column; }
.sheet__nav a{
  font-family:var(--display); font-size:clamp(1.35rem,4.8vw,1.8rem);
  padding:15px 0; border-bottom:1px solid var(--line-2);   /* 15px keeps the
     row above the 44px tap minimum now the type is smaller */
  opacity:0; transform:translateY(14px); animation:sheetIn .45s var(--ease) forwards;
}
.sheet__nav a:nth-child(1){ animation-delay:.04s } .sheet__nav a:nth-child(2){ animation-delay:.09s }
.sheet__nav a:nth-child(3){ animation-delay:.14s } .sheet__nav a:nth-child(4){ animation-delay:.19s }
.sheet__nav a:nth-child(5){ animation-delay:.24s }
@keyframes sheetIn{ to{ opacity:1; transform:none; } }
/* A wrap-flex here let the PILL TEXT decide the row count: "WhatsApp
   Katalog" + the phone number fitted one line, the English "WhatsApp
   catalogue" did not, and the flags jumped a row on every switch. A fixed
   one-column grid gives the same three rows in either language. */
.sheet__foot{ display:grid; grid-template-columns:1fr; gap:10px; justify-items:start; }
body.is-locked{ overflow:hidden; }

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.hero{
  position:relative; z-index:var(--z-body); max-width:var(--max-outer); margin:0 auto;
  padding:calc(var(--top-h) + var(--s6)) var(--pad) var(--s7);
  display:grid; gap:var(--s6); align-items:center; grid-template-columns:1fr;
}
@media (min-width:940px){
  .hero{ grid-template-columns:1.02fr .98fr; gap:var(--s5); min-height:100svh; }
}
/* Short laptop panels (a 1080p screen at 100% zoom leaves ~870px of viewport):
   tighten the rhythm so the whole hero — rating, headline, lead, both CTAs and
   the category chips — lands above the fold without the user zooming out. */
@media (min-width:940px) and (max-height:900px){
  .hero{ padding-top:calc(var(--top-h) + var(--s4)); padding-bottom:var(--s5); }
  .rating{ margin-bottom:var(--s3); }
  .hero__h1{ margin-bottom:var(--s3); }
  .hero__lead{ font-size:1rem; margin-bottom:var(--s4); }
  .hero__cta{
  /* Two columns, always. auto-fit collapsed to one below ~346px, which is
     exactly the width phones have — the pair must stay side by side. */
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:var(--s6); max-width:440px;
}
  .hero__art{ padding:var(--s2) 0; }
  .plate--hero{ width:min(70vw,376px); }
}
.hero__copy{ min-width:0; }

.rating{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:var(--s4);
  padding:8px 16px 8px 12px; border-radius:999px; min-height:44px;
  background:var(--card-bg-2); border:1px solid var(--line);
  font-size:.82rem; color:var(--txt-2);
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.rating:hover{ border-color:var(--accent); transform:translateY(-2px); }
.rating__stars{ display:flex; gap:1px; }
.rating__stars svg{ width:14px; height:14px; color:var(--star); }
.rating b{ color:var(--txt); font-weight:700; }

.hero__h1{
  /* min(vw,vh): a 1920x1080 laptop is wide but SHORT, and sizing purely off
     width gave an 80px headline that runs to four lines in English
     ("Indian cooking / here means / fresh / cooking.") and pushed the CTAs
     and chips below the fold. Tying it to the shorter axis fixes that
     continuously, with no breakpoint to fall off. */
  font-size:clamp(2.6rem,min(7.2vw,7.6vh),5rem); line-height:1.04; letter-spacing:-.028em;
  margin:0 0 var(--s4);
}
.hero__lead{ max-width:min(46ch,100%); overflow-wrap:break-word; color:var(--txt-2); font-size:1.06rem; margin:0 0 var(--s5); }

.chipsrow{ display:flex; flex-wrap:wrap; gap:10px; }
.chipsrow a{
  display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 18px 10px 14px;
  border-radius:999px; background:var(--card-bg); border:1px solid var(--line-2);
  font-size:.84rem; font-weight:500; color:var(--txt-2);
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease),
             border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.chipsrow svg{ width:19px; height:19px; color:var(--accent); flex:none; }
.chipsrow a:hover{ background:var(--well); color:var(--txt);
                   border-color:var(--accent); transform:translateY(-3px); }

.hero__art{ position:relative; display:grid; place-items:center; padding:var(--s4) 0; }

.plate{ position:relative; border-radius:50%; }
.plate img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; }
.plate--hero{
  width:min(78vw,430px);
  box-shadow:0 30px 60px rgba(18,81,76,.20), 0 0 0 10px var(--ring);
}
.plate__ring{
  position:absolute; inset:-30px; width:auto; height:auto; color:var(--accent);
  opacity:.6; animation:spin 46s linear infinite; z-index:2; pointer-events:none;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.tagcard{
  position:absolute; display:flex; flex-direction:column; gap:1px;
  padding:12px 18px; border-radius:var(--r-sm);
  background:var(--bg); border:1px solid var(--line);
  box-shadow:var(--card-sh); animation:float 7s ease-in-out infinite;
}
.tagcard b{ font-family:var(--display); font-size:.98rem; }
.tagcard span{ font-size:.76rem; font-weight:500; color:var(--txt-2); }
.tagcard--1{ left:0; top:12%; }
.tagcard--2{ right:0; bottom:12%; animation-delay:-3.5s; }
@media (max-width:560px){
  .tagcard--1{ left:-4px; top:2%; } .tagcard--2{ right:-4px; bottom:2%; }
  .tagcard{ padding:10px 14px; }
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

.live{ width:7px; height:7px; border-radius:50%; background:var(--accent); margin-bottom:4px;
       box-shadow:0 0 0 0 rgba(143,63,34,.5); animation:pulse 2.6s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(143,63,34,0) } 100%{ box-shadow:0 0 0 0 rgba(143,63,34,0) } }

/* ══════════════════════════════════════════════════════════════
   HERO ACTION CARDS — the three ways in, side by side.
   Same glass recipe as the order cards, shrunk to hero scale.
   ══════════════════════════════════════════════════════════════ */
.hero__cta-lead{
  margin:0 0 10px; font-size:.74rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:10px;
}
.hero__cta-lead::after{ content:""; flex:0 1 46px; height:1px;
                        background:currentColor; opacity:.55; }
.hero__cta{
  display:grid; gap:10px; margin-bottom:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  max-width:440px;
}
.hcard{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:2px;
  padding:15px 14px 13px; min-height:44px;
  background:var(--glass-sheen), var(--card-bg);
  border:1px solid var(--card-br); border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--card-sh);
  transition:transform .3s var(--ease), border-color var(--t) var(--ease),
             box-shadow .3s var(--ease);
}
.hcard::before{                      /* the same clay wipe the order cards use */
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.hcard:hover::before{ transform:scaleX(1); }
.hcard:hover{ transform:translateY(-4px); border-color:var(--accent);
              box-shadow:inset 0 1px 0 var(--glass-hi), var(--card-hv); }

.hcard__ico{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(196,100,63,.13); border:1px solid rgba(196,100,63,.3);
  color:var(--accent); margin-bottom:8px;
  transition:transform .3s var(--spring);
}
.hcard:hover .hcard__ico{ transform:rotate(-8deg) scale(1.07); }
.hcard__ico svg{ width:17px; height:17px; }

.hcard b{ font-family:var(--display); font-size:1.02rem; font-weight:400; line-height:1.2; }
.hcard em{ font-style:normal; font-size:.79rem; color:var(--txt-2); }
.hcard__ar{
  position:absolute; right:13px; top:16px; width:16px; height:16px;
  color:var(--accent); opacity:.55;
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.hcard:hover .hcard__ar{ transform:translateX(3px); opacity:1; }

/* Narrow phones: the German "Online bestellen" and the English
   "Catalogue & chat" are both 16 characters and overrun a 135px card at the
   default size. Trimming the padding and the sub-label keeps each on one line
   instead of letting one card grow a second line and unbalance the pair. */
@media (max-width:400px){
  .hcard{ padding:13px 11px 11px; }
  .hcard b{ font-size:.96rem; }
  .hcard em{ font-size:.72rem; }
  .hcard__ico{ width:30px; height:30px; margin-bottom:7px; }
  .hcard__ico svg{ width:15px; height:15px; }
  .hcard__ar{ right:10px; top:13px; width:14px; height:14px; }
}

/* ══════════════════════════════════════════════════════════════
   SIGNATURE DISH CARDS
   ══════════════════════════════════════════════════════════════ */
/* shared by the gallery loop and the review rows: each track holds its set
   twice, so travelling -50% lands exactly on the duplicate */
@keyframes marquee{ to{ transform:translateX(-50%); } }

.dishgrid{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.dishcard{
  padding:var(--s5) var(--s4) var(--s4);
  display:flex; flex-direction:column; text-align:center;
  transition:transform .35s var(--ease), border-color var(--t) var(--ease),
             box-shadow .35s var(--ease);
}
.dishcard:hover{ transform:translateY(-8px); border-color:var(--accent);
                 box-shadow:inset 0 1px 0 var(--glass-hi), var(--card-hv); }
.dishcard .plate{
  width:min(62%,170px); margin:0 auto var(--s4);
  box-shadow:0 14px 30px rgba(18,81,76,.18), 0 0 0 6px var(--ring);
  transition:transform .35s var(--spring);
}
.dishcard:hover .plate{ transform:scale(1.07) rotate(-3deg); }
.dishcard h3{ font-size:1.26rem; margin-bottom:var(--s2);
              display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap; }
.dishcard p{ font-size:.92rem; color:var(--txt-2); margin:0 0 var(--s4); }
.dishcard__foot{
  margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
}
.tag{ font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
      color:var(--txt-2); }
.cost{ font-family:var(--accent-f); font-size:1.5rem; color:var(--accent);
       font-variant-numeric:tabular-nums; line-height:1; }

/* ══════════════════════════════════════════════════════════════
   FEATURE BAND — full-bleed surface, capped inner column
   ══════════════════════════════════════════════════════════════ */
.feature{ position:relative; z-index:var(--z-body); padding:var(--sec) var(--pad); }
.feature__in{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:var(--s6); align-items:center; grid-template-columns:1fr;
}
@media (min-width:940px){ .feature__in{ grid-template-columns:1fr 1fr; gap:var(--s7); } }
.feature__art{ position:relative; display:grid; place-items:center; }
.feature__copy{ min-width:0; }
.plate--big{
  width:min(80vw,400px);
  box-shadow:0 30px 60px rgba(0,0,0,.28), 0 0 0 10px var(--ring);
}
.feature__lead{ color:var(--txt-2); font-size:1.06rem; margin-bottom:var(--s5); }
.feature__meta{
  display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  padding:var(--s4) 0; margin-bottom:var(--s5);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.feature__meta div{ display:flex; flex-direction:column; gap:2px; }
.feature__meta b{ font-family:var(--accent-f); font-size:1.7rem; color:var(--accent);
                  font-variant-numeric:tabular-nums; line-height:1.1; font-weight:400; }
.feature__meta span{ font-size:.76rem; font-weight:600; letter-spacing:.09em;
                     text-transform:uppercase; color:var(--txt-2); }

/* ══════════════════════════════════════════════════════════════
   SPEISEKARTE
   ══════════════════════════════════════════════════════════════ */
.menu{ max-width:var(--max); margin:0 auto; padding:var(--s4); }
@media (min-width:720px){ .menu{ padding:var(--s5); } }

.menu__tabs{
  display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth;
  padding-bottom:var(--s3); margin-bottom:var(--s4);
  border-bottom:1px solid var(--line-2);
  scrollbar-width:none;
  /* The strip scrolls but its scrollbar is hidden, so nothing said so and the
     last three categories were invisible. This fades whichever edge still has
     content past it; main.js sets the two widths from scrollLeft. */
  --fade-l:0px; --fade-r:0px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--fade-l),
                     #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 var(--fade-l),
                     #000 calc(100% - var(--fade-r)), transparent 100%);
}
.menu__tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:none; min-height:44px; padding:10px 20px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--txt-2);
  font-size:.82rem; font-weight:600; letter-spacing:.04em; white-space:nowrap;
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.tab:hover{ color:var(--txt); border-color:var(--accent); }
.tab.is-on{ background:var(--txt); border-color:var(--txt); color:var(--bg); }

.pane[hidden]{ display:none; }
.pane{ animation:fadeIn .3s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

.pane__note{ font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
             color:var(--accent); margin:0 0 var(--s4); }

.rows{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; gap:var(--s3);
      padding:14px 0; border-bottom:1px solid var(--line-2); }
.rows--tight .row{ padding:10px 0; }
.row:last-child{ border-bottom:0; }
.row__l{ flex:1 1 auto; min-width:0; }
.row h4{ font-family:var(--sans); font-size:1rem; font-weight:600; line-height:1.4;
         display:flex; align-items:center; gap:7px; flex-wrap:wrap; letter-spacing:0; }
.row h4 sup{ font-size:.62em; font-weight:600; color:var(--txt-2); position:relative; top:-.1em; }
.row h4 em{ font-style:normal; font-weight:400; font-size:.88em; color:var(--txt-2); }
.row p{ margin:4px 0 0; font-size:.9rem; line-height:1.6; color:var(--txt-2); max-width:62ch; }
.row__p{ flex:none; font-family:var(--accent-f); font-size:1.24rem; color:var(--accent);
         font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.3;
         text-align:right; }

/* The dish photograph leads the row. It is the tallest thing in there, so it
   sets the row height and the list reads as one even rhythm instead of
   alternating tall (has a description) and short (does not).
   The slot is rendered even for the dishes with no photograph of their own,
   so every name still starts on the same left edge. */
.row__thumb{
  flex:none; width:64px; height:64px; border-radius:50%; overflow:hidden;
  background:var(--chip); box-shadow:0 0 0 2px var(--ring);
  transition:transform .35s var(--spring);
}
.row__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.row:hover .row__thumb{ transform:scale(1.08); }
.row__thumb:empty{ background:transparent; box-shadow:none; }  /* spacer, not a well */
@media (max-width:560px){ .row__thumb{ width:52px; height:52px; } }

.addon{
  display:inline-flex; align-items:center; gap:9px; margin:var(--s4) 0 0;
  padding:9px 18px; border-radius:999px;
  background:var(--chip); border:1px solid var(--line);
  font-size:.8rem; font-weight:500; color:var(--txt-2);
}
.addon b{ color:var(--accent); font-weight:700; }

.menu__foot{
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  align-items:flex-start; justify-content:space-between;
}
.allerg{ margin:0; display:flex; flex-wrap:wrap; gap:5px 18px; align-items:center;
         font-size:.78rem; color:var(--txt-2); }
.allerg b{ font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
           color:var(--accent); }

/* ══════════════════════════════════════════════════════════════
   GALERIE
   ══════════════════════════════════════════════════════════════ */
.gal{ position:relative; z-index:var(--z-body); overflow:hidden; padding:var(--s5) 0 var(--sec); }
.gal__track{ display:flex; gap:var(--s4); width:max-content; animation:marquee 60s linear infinite; }
.gal figure{
  margin:0; width:clamp(112px,17vw,168px); aspect-ratio:1; border-radius:50%;
  overflow:hidden; flex:none; position:relative;
  box-shadow:0 12px 28px rgba(18,81,76,.16), 0 0 0 5px var(--ring);
  transition:transform .35s var(--spring);
}
.gal figure:hover{ transform:scale(1.08); }
.gal img{ width:100%; height:100%; object-fit:cover; }

/* ══════════════════════════════════════════════════════════════
   BEWERTUNGEN — two-row marquee carousel
   ══════════════════════════════════════════════════════════════ */
.revs{ position:relative; z-index:var(--z-body); padding:var(--sec) 0; }
.revs__head{ max-width:var(--max-outer); margin:0 auto var(--s6); padding:0 var(--pad); text-align:center; }
.revs__head .eyebrow{ justify-content:center; }
.revs__head .eyebrow::after{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }

.score{
  display:inline-flex; align-items:center; gap:var(--s4); margin-top:var(--s4);
  padding:var(--s3) var(--s5); border-radius:999px;
  background:var(--glass-sheen), var(--card-bg);
  border:1px solid var(--card-br);
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.score__n{ font-family:var(--accent-f); font-size:2.6rem; line-height:1; color:var(--accent);
           font-variant-numeric:tabular-nums; }
.score__r{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.score__stars{ display:flex; gap:2px; }
.score__stars svg{ width:16px; height:16px; color:var(--star); }
.score__r span{ font-size:.8rem; font-weight:600; color:var(--txt-2); letter-spacing:.02em; }

.revrows{
  display:flex; flex-direction:column; gap:var(--s4);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.revrow{ overflow:hidden; }
.revrow__track{
  display:flex; gap:var(--s4); width:max-content;
  animation:marquee var(--dur,60s) linear infinite;
  animation-direction:var(--dir,normal);
}
.revrows:hover .revrow__track,
.revrows:focus-within .revrow__track{ animation-play-state:paused; }

/* seed grid — renders before JS enhances, and if JS never runs */
.revs__seed{
  max-width:var(--max-outer); margin:0 auto; padding:0 var(--pad);
  display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

.rev{
  flex:none; width:min(78vw,340px); padding:var(--s4);
  border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:12px;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.revs__seed .rev{ width:auto; }
.rev:hover{ transform:translateY(-4px); border-color:var(--accent);
            box-shadow:inset 0 1px 0 var(--glass-hi), var(--card-hv); }

.rev__top{ display:flex; align-items:center; gap:12px; }
.rev__av{
  width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--txt); color:var(--bg);
  font-family:var(--display); font-size:1rem; line-height:1;
}
.rev__who{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.rev__who b{ font-size:.95rem; font-weight:600;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rev__who span{ font-size:.78rem; font-weight:500; color:var(--txt-2); }
.rev__g{ margin-left:auto; width:18px; height:18px; flex:none; }

.rev__stars{ display:flex; gap:2px; }
.rev__stars svg{ width:15px; height:15px; color:var(--star); }

.rev__txt{ margin:0; font-family:var(--accent-f); font-size:1.16rem; line-height:1.45; color:var(--txt); }
.rev__meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.rev__meta li{
  font-size:.76rem; font-weight:600; padding:5px 11px; border-radius:999px;
  background:var(--chip); color:var(--txt-2);
}
.revs__cta{ text-align:center; margin-top:var(--s6); padding:0 var(--pad); }

/* ══════════════════════════════════════════════════════════════
   STORY
   ══════════════════════════════════════════════════════════════ */
.story__grid{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:var(--s6); align-items:center; grid-template-columns:1fr;
}
@media (min-width:940px){
  .story__grid{ grid-template-columns:1fr 1fr; gap:var(--s7); align-items:stretch; }
  /* The photo fills the row rather than floating in dead space: the copy sets
     the height and the picture matches it, cropping instead of letterboxing.
     Single-column (below 940) keeps the 16/10 crop, where nothing to match. */
  .story__picwrap{ display:flex; }
  .story__pic{ flex:1; }
  .story__pic img{ height:100%; aspect-ratio:auto; }
}
.story__copy{ min-width:0; }

/* The WRAPPER is what the reveal observer watches; it then opens the curtain on
   .story__pic. Never put the clip-path on the observed element itself, and never
   put parallax on the clipped one: will-change promotes a layer and the clip is
   then applied in a stale coordinate space, rendering the photo blank. */
.story__picwrap{ position:relative; }
.story__pic{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 24px 50px rgba(18,81,76,.18);
  clip-path:inset(0 0 100% 0);
}
.story__picwrap.in .story__pic{ clip-path:inset(0 0 0 0); transition:clip-path 1s var(--ease); }
.story__pic img{ width:100%; aspect-ratio:16/10; object-fit:cover;
                 object-position:center 55%; }   /* the stand sits below centre */

.quote{
  margin:var(--s5) 0; padding:var(--s3) 0 var(--s3) var(--s4);
  border-left:2px solid var(--accent);
  font-family:var(--accent-f); font-style:italic; font-size:1.34rem; line-height:1.45;
}
.quote cite{ display:block; margin-top:10px; font-family:var(--sans); font-style:normal;
             font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
             color:var(--txt-2); }
/* ══════════════════════════════════════════════════════════════
   BESTELLWEGE
   ══════════════════════════════════════════════════════════════ */
.ways{ max-width:var(--max); margin:0 auto;
       display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

.way{
  position:relative; overflow:hidden;
  padding:var(--s5) var(--s4) var(--s4);
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), border-color var(--t) var(--ease),
             box-shadow .35s var(--ease);
}
/* a clay rule wipes across the top edge on hover — the card is one big link,
   so the whole surface needs to say so, not just the little URL at the bottom */
.way::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.way:hover::before{ transform:scaleX(1); }
.way:hover{ transform:translateY(-8px); border-color:var(--accent);
            box-shadow:inset 0 1px 0 var(--glass-hi), var(--card-hv); }

.way__top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s3); margin-bottom:var(--s5);
}
.way__ico{
  width:50px; height:50px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:rgba(196,100,63,.13); border:1px solid rgba(196,100,63,.32);
  color:var(--accent);
  transition:transform .35s var(--spring), background-color var(--t) var(--ease);
}
.way:hover .way__ico{ transform:rotate(-8deg) scale(1.06); background:rgba(196,100,63,.22); }
.way__ico svg{ width:23px; height:23px; }

/* the section promises "three ways", so number them */
.way__no{
  font-family:var(--display); font-size:2.7rem; line-height:.85;
  color:var(--accent); opacity:.16; letter-spacing:-.04em;
  transition:opacity var(--t) var(--ease);
}
.way:hover .way__no{ opacity:.34; }

.way h3{ font-size:1.42rem; margin-bottom:10px; }
.way p{ font-size:.92rem; color:var(--txt-2); margin:0 0 var(--s5); }

.way__go{
  margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.way__url{
  font-size:.79rem; font-weight:700; letter-spacing:.01em; color:var(--accent);
  word-break:break-word; min-width:0;
}
.way__arrow{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--accent); color:var(--accent);
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease),
             transform var(--t) var(--ease);
}
.way__arrow svg{ width:16px; height:16px; }
.way:hover .way__arrow{
  background:var(--accent-solid); color:var(--accent-on); transform:translateX(4px);
}

/* ══════════════════════════════════════════════════════════════
   BESUCH + MAP
   ══════════════════════════════════════════════════════════════ */
.visit{ max-width:var(--max); margin:0 auto;
        display:grid; gap:var(--s4); grid-template-columns:1fr; align-items:stretch; }
@media (min-width:880px){ .visit{ grid-template-columns:.85fr 1.15fr; } }
.visit__card{ padding:var(--s5) var(--s4); display:flex; flex-direction:column; }
.addr{ font-style:normal; font-family:var(--display); font-size:1.24rem;
       line-height:1.55; margin:0 0 var(--s4); }
.hours{ width:100%; margin-bottom:10px; }
.hours th,.hours td{ padding:9px 0; font-size:.93rem; font-weight:400;
                     border-bottom:1px solid var(--line-2); text-align:left; }
.hours th{ font-weight:500; }
.hours td{ text-align:right; color:var(--txt-2); font-variant-numeric:tabular-nums; }
.hours tr.off th,.hours tr.off td{ color:var(--txt-3); }
.hours tr.is-today th,.hours tr.is-today td{ color:var(--accent); font-weight:700; }
.hours tr.is-today th::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-right:9px; vertical-align:middle;
}
.hours__note{ font-size:.79rem; color:var(--txt-2); margin:0 0 var(--s4); }
.perks{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s5); }
.perks li{ font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
           padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--txt-2); }
.visit__cta{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; }

.visit__map{ position:relative; border-radius:var(--r-lg); overflow:hidden;
             border:1px solid var(--card-br); box-shadow:var(--card-sh);
             min-height:clamp(280px,42vw,440px); }
.visit__map iframe{
  width:100%; height:100%; border:0;                     /* original Google colours */
  min-height:clamp(280px,42vw,440px);
}

/* Two-click map gate. Everything here is drawn in CSS — no preview image is
   fetched from Google either, because a static map tile would leak the same
   IP address the gate exists to withhold. */
.mapgate{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:var(--s5); text-align:center;
  background:var(--card-bg-2);
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:100% 38px, 38px 100%;                  /* a hint of map grid */
}
.mapgate__in{ max-width:34ch; display:flex; flex-direction:column; align-items:center; gap:10px; }
.mapgate__pin{ width:34px; height:34px; color:var(--accent); }
.mapgate__pin svg{ width:100%; height:100%; }
.mapgate__lead{ margin:0; font-family:var(--display); font-size:1.12rem; color:var(--txt); }
.mapgate__note{ margin:0; font-size:.84rem; line-height:1.5; color:var(--txt-2); }
.mapgate__btn{ margin-top:4px; }
.mapgate__alt{ margin:2px 0 0; font-size:.78rem; color:var(--txt-3); }
.mapgate__alt a{ color:var(--txt-2); text-decoration:underline; text-underline-offset:2px; }
.mapgate__alt a:hover{ color:var(--accent); }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.foot{ position:relative; z-index:var(--z-body); padding:var(--sec) var(--pad) var(--s6); }
.foot__cta{
  max-width:var(--max); margin:0 auto var(--s7);
  padding:var(--s6) var(--s5); border-radius:var(--r-lg);
  background:var(--glass-sheen), var(--card-bg);
  border:1px solid var(--card-br);
  box-shadow:inset 0 1px 0 var(--glass-hi);
  display:flex; flex-wrap:wrap; gap:var(--s5); align-items:center; justify-content:space-between;
}
/* The Hunger? card runs on CLAY — the header's surface — rather than a beige
   well on peacock. .s-clay re-declares every token for the subtree, so the two
   buttons flip themselves: .pill--ink becomes a beige fill with a clay label
   (5.52:1) and .pill--glass a black-tinted well with beige text (6.89:1).
   The fill is restated here only because .foot__cta's own `background`
   declaration sits later in the file than .s-clay's. */
.foot__cta.s-clay{ background:var(--bg); border-color:var(--card-br); }

.foot__cta .h2{ margin-bottom:8px; }
/* Young Serif ships a single weight (400) by design — a synthetic bold at
   this size smears the wedge serifs — so the weight goes on the line below
   and on the buttons, where Hanken Grotesk has real cuts to use. */
.foot__cta p{ margin:0; color:var(--txt); font-weight:600;
              font-size:1.02rem; letter-spacing:.005em; }
.foot__cta .pill{ font-weight:700; letter-spacing:.05em; }
.foot__cta__btns{ display:flex; flex-wrap:wrap; gap:12px; }

.foot__cols{ max-width:var(--max); margin:0 auto; padding-bottom:var(--s6);
             display:grid; gap:var(--s5); grid-template-columns:1fr; }
@media (min-width:560px){ .foot__cols{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:940px){ .foot__cols{ grid-template-columns:1.4fr repeat(3,1fr); } }
/* The logo carries four colours and no site surface suits all of them:
   red "Tasty" needs light (1.69:1 on peacock), white "Spoon" needs dark
   (1.31:1 on beige). Black is the ground it was drawn on and the one that
   serves every element best — red 3.90, white 21.0, green 5.95, orange 10.4
   — so the mark sits on its own plaque rather than being compromised by the
   band behind it. This is a container for supplied artwork, not a new brand
   surface, which is why it may be black in a three-colour palette. */
.foot__mark{
  display:inline-block; margin:0 0 16px; padding:16px 20px;
  border-radius:var(--r-md); background:#000;
}
.foot__mark img{ width:clamp(150px,19vw,200px); height:auto; display:block; }
.foot__tag{ font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
            color:var(--txt-2); margin:0 0 12px; }
.foot__tag em{ font-style:normal; color:var(--accent); font-weight:700; }
.foot__rate{ font-size:.82rem; color:var(--txt-2); margin:0; }
.foot__rate .stars{ color:var(--star); letter-spacing:.14em; margin-right:6px; }
.foot__cols h3{ font-family:var(--sans); font-size:.75rem; font-weight:700; letter-spacing:.18em;
                text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.foot__cols nav a{ display:flex; align-items:center; min-height:44px;   /* tap target */
                   font-size:.89rem; color:var(--txt-2); padding:4px 0;
                   transition:color var(--t) var(--ease), transform var(--t) var(--ease); }
.foot__cols nav a:hover{ color:var(--txt); transform:translateX(3px); }
.foot__bot{ max-width:var(--max); margin:0 auto; padding-top:var(--s4);
            border-top:1px solid var(--line-2);
            display:flex; flex-wrap:wrap; gap:6px var(--s5); justify-content:space-between; }
.foot__bot p{ margin:0; font-size:.75rem; color:var(--txt-3); }

/* the legal pages carry only the bottom strip, so it needs no top rule */
.foot--slim{ padding:var(--s6) var(--pad); }
.foot__bot--legal{ padding-top:0; border-top:0; align-items:center; }
.foot__legal{ display:flex; flex-wrap:wrap; gap:var(--s4); }
.foot__legal a{ font-size:.78rem; font-weight:600; color:var(--txt-2); text-decoration:none; }
.foot__legal a:hover{ color:var(--accent); }
.foot__legal a[aria-current="page"]{ color:var(--txt); text-decoration:underline;
                                     text-underline-offset:3px; }

/* ══════════════════════════════════════════════════════════════
   LEGAL PAGES — Impressum & Datenschutz

   These two run on the same tokens as the rest of the site but load
   NO JavaScript: a page that exists to discharge a legal duty must
   not be able to fail because a script did. That also means no
   language switcher — German is the binding version, and each page
   carries a short English note instead.
   ══════════════════════════════════════════════════════════════ */
/* --top-h is published by main.js, which these pages deliberately don't load,
   so the fallback is the value that actually applies here. */
.legal{ padding:calc(var(--top-h,76px) + var(--s6)) var(--pad) var(--sec); }
.legal__in{ max-width:min(74ch, var(--max)); margin:0 auto; }
.legal__h1{ font-family:var(--display); font-weight:400; line-height:1.05;
            font-size:clamp(2.2rem,5.4vw,3.4rem); margin:0 0 var(--s3); color:var(--txt); }
.legal__lead{ margin:0 0 var(--s6); font-size:1.06rem; line-height:1.6; color:var(--txt-2);
              max-width:60ch; }

.legal__sec{ margin:0 0 var(--s6); }
.legal__sec h2{ font-family:var(--display); font-weight:400; font-size:1.34rem;
                line-height:1.25; margin:0 0 var(--s3); color:var(--txt);
                padding-bottom:10px; border-bottom:1px solid var(--line-2); }
.legal__sec p{ margin:0 0 var(--s3); line-height:1.7; color:var(--txt-2); }
.legal__sec p:last-child{ margin-bottom:0; }
.legal__sec a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.legal__sec a:hover{ text-decoration-thickness:2px; }

/* the summary box at the top of the privacy page */
.legal__sec--box{
  padding:var(--s5); border-radius:var(--r-md);
  background:var(--glass-sheen), var(--card-bg);
  border:1px solid var(--card-br);
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.legal__sec--box h2{ border-bottom:0; padding-bottom:0; margin-bottom:var(--s3); }

/* the global reset strips list markers; a legal page is the one place that
   wants them back, because these really are enumerations */
.legal__list{ margin:0; padding-left:1.15em; list-style:disc;
              display:flex; flex-direction:column; gap:10px; }
.legal__list li{ line-height:1.65; color:var(--txt-2); }
.legal__list li::marker{ color:var(--accent); }

.legal__hint{ font-size:.86rem; line-height:1.6; color:var(--txt-3); }
.legal__sec .legal__hint{ color:var(--txt-3); }

.legal__en{
  margin-top:var(--s7); padding:var(--s4); border-radius:var(--r-md);
  border:1px dashed var(--line); font-size:.88rem; line-height:1.65; color:var(--txt-2);
}

/* label / value pairs — two columns once there is room for them */
.deflist{ margin:0; display:grid; gap:6px var(--s5); }
.deflist dt{ font-size:.74rem; font-weight:700; letter-spacing:.08em;
             text-transform:uppercase; color:var(--txt-3); padding-top:3px; }
.deflist dd{ margin:0 0 var(--s3); line-height:1.6; color:var(--txt); }
.deflist dd:last-of-type{ margin-bottom:0; }
.deflist a{ color:var(--accent); }
@media (min-width:620px){
  .deflist{ grid-template-columns:minmax(9rem,12rem) 1fr; align-items:baseline; }
  .deflist dt{ grid-column:1; }
  .deflist dd{ grid-column:2; margin-bottom:10px; }
}
.addr--inline{ font-size:1rem; font-family:inherit; display:inline-block; margin:0; }

/* ── placeholders ───────────────────────────────────────────────
   Deliberately loud. These pages state who is legally answerable for
   the business, so a field nobody filled in must be impossible to
   scroll past — an amber block is harder to miss than a TODO comment
   that only shows up in the source. Both .draft and .todo disappear
   from the markup once the real values are in. ──────────────────── */
.draft{
  margin:0 0 var(--s6); padding:var(--s4);
  border-radius:var(--r-md); border:2px solid #B0532C;
  background:rgba(176,83,44,.10);
  font-size:.9rem; line-height:1.6; color:var(--txt);
}
.draft b{ display:block; margin-bottom:4px; color:#8F3F22; }
.draft code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }

.todo{
  display:inline-block; padding:2px 9px; border-radius:6px;
  background:rgba(176,83,44,.14); border:1px dashed #B0532C;
  color:#8F3F22; font-size:.86rem; font-style:italic; line-height:1.5;
}
.todo::before{ content:"Noch offen: "; font-style:normal; font-weight:700; }

/* ══════════════════════════════════════════════════════════════
   SPEISEKARTE MODAL — every category on one scrollable page
   ══════════════════════════════════════════════════════════════ */
.mmodal{
  position:fixed; inset:0; z-index:var(--z-modal);
  display:flex; align-items:center; justify-content:center;
  padding:var(--s4) var(--s3);
  background:rgba(9,40,37,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:mmFade .22s var(--ease);
}
.mmodal[hidden]{ display:none; }
@keyframes mmFade{ from{ opacity:0 } to{ opacity:1 } }

.mmodal__panel{
  display:flex; flex-direction:column;
  width:100%; max-width:720px; max-height:88dvh;
  background:var(--bg); color:var(--txt);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.45);
  animation:mmRise .3s var(--ease);
}
@keyframes mmRise{ from{ opacity:0; transform:translateY(14px) scale(.985) } to{ opacity:1; transform:none } }

.mmodal__bar{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding:16px var(--s4);
  border-bottom:1px solid var(--line-2); background:var(--bg);
}
.mmodal__title{ font-family:var(--display); font-size:1.3rem; margin:0; }
.mmodal__x{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; color:var(--txt);
  border:1px solid var(--line); background:transparent;
  transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.mmodal__x:hover{ background:var(--chip); border-color:var(--txt); }
.mmodal__x svg{ width:19px; height:19px; }

.mmodal__body{
  overflow-y:auto; overscroll-behavior:contain;   /* don't scroll the page behind */
  -webkit-overflow-scrolling:touch;
  padding:var(--s4) var(--s4) var(--s6);
}
.mgroup + .mgroup{ margin-top:var(--s5); }
.mgroup > h3{
  position:sticky; top:0; z-index:1;
  margin:0 0 10px; padding:8px 0;
  font-family:var(--display); font-size:1.18rem;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.mgroup .pane__note{ margin:0 0 12px; }
.mgroup .addon{ margin-top:var(--s3); }

@media (max-width:560px){
  .mmodal{ padding:0; align-items:flex-end; }
  .mmodal__panel{ max-height:92dvh; border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .mmodal__body{ padding:var(--s3) var(--s3) var(--s6); }
}
@media (prefers-reduced-motion:reduce){
  .mmodal,.mmodal__panel{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE ORDER BAR
   ══════════════════════════════════════════════════════════════ */
.obar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-obar);
  display:grid; grid-template-columns:1.7fr 1fr; gap:1px;
  background:rgba(18,81,76,.2); border-top:1px solid rgba(18,81,76,.2);
  transform:translateY(110%); transition:transform .4s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.obar.is-up{ transform:none; }
@media (min-width:940px){ .obar{ display:none; } }
.obar a{ min-height:52px; display:grid; place-items:center; padding:14px 10px;
         font-size:.78rem; font-weight:700; letter-spacing:.05em; }
.obar__a{ background:#8F3F22; color:var(--beige); }
.obar__b{ background:var(--beige); color:var(--peacock); }
@media (max-width:939px){ .foot{ padding-bottom:calc(var(--s6) + 56px + env(safe-area-inset-bottom)); } }

/* ══════════════════════════════════════════════════════════════
   SCROLL ANIMATION
   ══════════════════════════════════════════════════════════════ */
[data-reveal]{ opacity:0; transform:translateY(26px); }
[data-reveal].in{ opacity:1; transform:none;
                  transition:opacity .8s var(--ease), transform .8s var(--ease); }

[data-stagger] > *{ opacity:0; transform:translateY(30px); }
[data-stagger].in > *{ opacity:1; transform:none;
                       transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-stagger].in > *:nth-child(1){ transition-delay:0s }
[data-stagger].in > *:nth-child(2){ transition-delay:.09s }
[data-stagger].in > *:nth-child(3){ transition-delay:.18s }
[data-stagger].in > *:nth-child(4){ transition-delay:.27s }
[data-stagger].in > *:nth-child(5){ transition-delay:.36s }
[data-stagger].in > *:nth-child(6){ transition-delay:.45s }

.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word--free{ overflow:visible; }   /* wraps an element (e.g. .hl) whose
   underline SVG sits below the baseline and must not be clipped */
.word > span{ display:inline-block; transform:translateY(105%);
              transition:transform .75s var(--ease); }
.in .word > span{ transform:none; }
.word--free > span{ transform:translateY(22%); opacity:0;
                    transition:transform .75s var(--ease), opacity .5s var(--ease); }
.in .word--free > span{ transform:none; opacity:1; }
.word:nth-child(1) > span{ transition-delay:.02s } .word:nth-child(2) > span{ transition-delay:.08s }
.word:nth-child(3) > span{ transition-delay:.14s } .word:nth-child(4) > span{ transition-delay:.20s }
.word:nth-child(5) > span{ transition-delay:.26s } .word:nth-child(6) > span{ transition-delay:.32s }
.word:nth-child(7) > span{ transition-delay:.38s } .word:nth-child(8) > span{ transition-delay:.44s }
.word:nth-child(9) > span{ transition-delay:.50s } .word:nth-child(10) > span{ transition-delay:.56s }

[data-curtain]{ clip-path:inset(0 0 100% 0); }
[data-curtain].in{ clip-path:inset(0 0 0 0); transition:clip-path 1s var(--ease); }

/* never put data-parallax on the same element as data-curtain: will-change
   promotes a layer and the clip-path is then applied in a stale coordinate
   space, so the element renders blank. Wrap one around the other instead. */
[data-parallax]{ transform:translate3d(0,var(--py,0px),0); will-change:transform; }

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-stagger] > *{ opacity:1; transform:none; }
  [data-curtain]{ clip-path:none; }
  [data-parallax]{ transform:none; }
  .word > span,.word--free > span{ transform:none; opacity:1; }
  .sheet__nav a{ opacity:1; transform:none; animation:none; }
  .plate__ring,.tagcard,.live,
  .gal__track,.revrow__track,.pane{ animation:none; }
  .hl svg path{ stroke-dashoffset:0; }
  .mark::before{ transform:scaleX(1) skewX(-7deg); }
}