/* ==========================================================================
   Pizzeria L'Ancora – Bienenbüttel
   Warmes, dunkles Editorial-Theme. Kein Framework, kein Build-Schritt.

   Aufbau:
   1  Tokens          6  Laufbänder     11  Kategorien / Vorteile
   2  Basis + Korn    7  Hero           12  Lieferung / Zeiten
   3  Typografie      8  Flächen        13  CTA / Footer
   4  Buttons         9  Lust-Berater   14  Speisekarte
   5  Navigation     10  Szene          15  Responsive / Ruhemodus
   ========================================================================== */

/* ====================================================== 0  Schriften ======
   Lokal eingebunden, nicht von Google geladen. Das erspart die Übermittlung
   der Besucher-IP an einen Google-Server – in Deutschland ein bekanntes
   Abmahnrisiko. Nur die Zeichensätze latin und latin-ext sind dabei;
   Vietnamesisch und Kyrillisch braucht diese Seite nicht.

   `font-display: swap` sorgt dafür, dass der Text sofort in der Ersatzschrift
   steht und nicht unsichtbar auf die Schriftdatei wartet.
   ========================================================================== */

/* Fraunces – latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces – latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist – latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist – latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================ 1  Tokens === */

:root {
  /* --- Flächen: ein einziges warmes Grau-Braun-Spektrum, nichts Kaltes --- */
  --bg:          #14100d;   /* Espresso-Schwarz, bewusst kein #000 */
  --bg-2:        #1b1512;   /* zweite Ebene, z. B. Eingabefelder */
  --core:        #1f1814;   /* Kern einer Karte */
  --core-2:      #272019;   /* Hover-Kern */
  --shell:       rgba(246, 238, 227, .045);   /* Karten-Fassung */
  --shell-line:  rgba(246, 238, 227, .085);   /* Haarlinie außen */
  --line:        rgba(246, 238, 227, .10);

  /* --- Ein Akzent, ein Sekundärton. Beide unter 80 % Sättigung, damit sie
         sich in die Neutralen einfügen statt zu schreien. --- */
  --accent:      #e4682b;   /* Ofen-Orange   – S 77 %  */
  --accent-2:    #e0a63a;   /* Gold          – S 73 %  */

  --text:        #f6eee3;   /* warmes Creme */
  --muted:       #a89b8c;

  /* Schrift auf orangen/goldenen Flächen. Weiß erreicht auf dem Orange nur
     2,7:1 und fällt durch WCAG AA. Dieses Braun kommt auf 5,43:1 (Orange)
     bzw. 8,33:1 (Gold) und besteht. Details siehe README. */
  --on-accent:   #23140a;

  /* --- Typografie: Variabler Serif für Display, Grotesk für alles andere --- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui:      "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Bewegung: nie ease/linear. Diese Kurve hat Masse. --- */
  --ease:      cubic-bezier(.32, .72, 0, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .28s;
  --t-med:  .5s;
  --t-slow: .9s;

  /* --- Radien: außen weich, innen konzentrisch enger --- */
  --bezel: 6px;                       /* Breite der Fassung */
  --r-shell: 26px;
  --r-core:  calc(var(--r-shell) - var(--bezel));
  --r-sm: 14px;

  /* --- Schatten tragen den Braunton des Hintergrunds, kein reines Schwarz --- */
  --shadow-amb:  0 30px 70px -30px rgba(18, 10, 4, .85);
  --shadow-lift: 0 42px 90px -32px rgba(18, 10, 4, .95);
  --shadow-warm: 0 22px 55px -25px rgba(228, 104, 43, .38);
  --inner-hi:    inset 0 1px 0 rgba(246, 238, 227, .07);

  /* --- Ebenen. Keine willkürlichen z-index irgendwo im Stylesheet. --- */
  --z-sticky:   80;
  --z-callbar:  90;
  --z-nav:     100;
  --z-sheet:   110;
  --z-progress:120;
  --z-grain:   200;

  --wrap: 1220px;
  --sp-section: clamp(6rem, 12vw, 11rem);

  /* Höhe der Navigations-Insel, aus ihren Bestandteilen gerechnet statt
     geschätzt – der Hero zieht sich exakt um diesen Betrag unter die Leiste. */
  --island-h: 66px;
  --nav-pad: 1.1rem;
  --nav-h: calc(var(--island-h) + var(--nav-pad) * 2);
}

/* ==================================================== 2  Basis + Filmkorn == */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}
/* Auf der Speisekarte steht unter der Navigation noch die Suchleiste –
   Sprungziele müssen auch unter dieser frei liegen. Ihre Höhe hängt von der
   Schriftgröße und der Zahl der Kategorien ab; main.js misst sie und schreibt
   sie nach --toolbar-h. Der Wert hier ist nur der Rückfall, falls das Skript
   nicht läuft. Die 8 px sind der Abstand zwischen Leiste und Überschrift und
   liegen bewusst unter dem Zuschlag, mit dem der Kategorie-Spion in main.js
   rechnet – sonst gälte nach dem Sprung noch die vorige Kategorie als die
   aktuelle. */
html:has(.menu-toolbar) {
  scroll-padding-top: calc(var(--nav-h) + var(--toolbar-h, 130px) + 8px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Filmkorn. Fest positioniert und ohne Zeigerereignisse – ein Korn-Overlay
   auf einem scrollenden Container würde die GPU dauerhaft neu zeichnen. */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; display: block; }
a { color: var(--accent-2); }

::selection { background: var(--accent); color: var(--on-accent); }

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* Abschnitte atmen. Unten optisch etwas mehr als oben. */
.section { padding: var(--sp-section) 0 calc(var(--sp-section) * 1.1); }

/* ------------------------------------------------- Warme Lichtinseln -------
   Unter dem Hero fiele die Seite sonst hart ins Flache ab. Diese Glows legen
   sehr schwaches Ofenlicht hinter die Abschnitte, sodass der dunkle Grund
   Tiefe bekommt, ohne dass ein Farbschleier entsteht.

   Zwei Lichtkeulen statt einer: eine im Orange, eine versetzt im Gold. Ein
   einzelner, exakt runder Verlauf sieht nach Schablone aus – die Überlagerung
   wirkt wie gestreutes Licht.

   Gesteuert über --gx / --gy (Ort) und --gs (Stärke). Reine Hintergrund-
   verläufe: einmal gezeichnet, keine Filter, kostet beim Scrollen nichts. */
.glow { --gx: 50%; --gy: 42%; --gs: .07; position: relative; isolation: isolate; }
.glow::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 78% at var(--gx) var(--gy),
      rgba(228, 104, 43, var(--gs)) 0%,
      rgba(228, 104, 43, calc(var(--gs) * .62)) 30%,
      rgba(228, 104, 43, calc(var(--gs) * .22)) 56%,
      rgba(228, 104, 43, 0) 82%),
    radial-gradient(62% 58% at calc(var(--gx) + 22%) calc(var(--gy) + 26%),
      rgba(224, 166, 58, calc(var(--gs) * .6)) 0%,
      rgba(224, 166, 58, calc(var(--gs) * .2)) 45%,
      rgba(224, 166, 58, 0) 78%);
}

.glow--tl { --gx: 14%; --gy: 22%; }
.glow--tr { --gx: 84%; --gy: 24%; }
.glow--bl { --gx: 16%; --gy: 72%; }
.glow--br { --gx: 82%; --gy: 70%; }
/* Fängt den Übergang direkt unter dem Hero ab */
.glow--top { --gx: 46%; --gy: -4%; }

.glow--strong { --gs: .10; }
.glow--soft   { --gs: .05; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Sprungmarke für Tastaturnutzer */
.skip {
  position: absolute; left: 1rem; top: -100px; z-index: var(--z-progress);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-ui); font-weight: 600;
  padding: .8rem 1.4rem; border-radius: 999px; text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip:focus { top: 1rem; }

/* ====================================================== 3  Typografie ===== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(3rem, 9vw, 6.4rem); font-weight: 800; letter-spacing: -.045em; }
h2 { font-size: clamp(2.3rem, 6vw, 4rem); }
h3 { font-family: var(--font-ui); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.4rem); letter-spacing: -.02em; line-height: 1.25; }
h4 { font-family: var(--font-ui); }

p { margin: 0 0 1rem; text-wrap: pretty; }

.lead {
  font-size: clamp(1.05rem, 2.1vw, 1.22rem);
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
}

.section__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); max-width: 58ch; }
.section__head .lead { margin-bottom: 0; }

/* Winziger Pill-Marker über den großen Überschriften */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-ui);
  font-size: .66rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-2);
  background: rgba(224, 166, 58, .07);
  border: 1px solid rgba(224, 166, 58, .2);
  border-radius: 999px;
  padding: .42rem 1rem .42rem .8rem;
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* Verlauf im Fließtext-Akzent.

   -webkit-text-fill-color muss mitgesetzt werden: In WebKit gewinnt diese
   Eigenschaft über `color`, und ohne sie bleibt der Text in Safari schlicht
   in der Erbfarbe stehen statt den Verlauf durchscheinen zu lassen. */
.accent {
  background-image: linear-gradient(102deg, var(--accent) 8%, var(--accent-2) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Die wortweise eingeblendete Schlagzeile verschiebt jedes Wort per transform.
   Ein transformierter Nachfahre bekommt in Safari eine eigene Zeichenebene –
   der auf den Vorfahren .accent geclippte Verlauf greift dort nicht mehr, und
   weil die Schrift selbst durchsichtig ist, verschwindet das Wort komplett.
   Genau das passierte auf dem iPhone mit „Bienenbüttel“. Deshalb bekommt jedes
   bewegte Wort den Verlauf selbst; sein Hintergrund wandert dann mit ihm. */
.js .accent .word > span {
  background-image: linear-gradient(102deg, var(--accent) 8%, var(--accent-2) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Fällt background-clip aus, bliebe der Text unsichtbar. Dann lieber ohne
   Verlauf in der Akzentfarbe – lesbar schlägt hübsch. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .accent, .js .accent .word > span {
    -webkit-text-fill-color: currentColor; color: var(--accent-2);
  }
}

/* ========================================================= 4  Buttons ===== */

.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .85rem;
  font-family: var(--font-ui); font-weight: 600; font-size: .98rem;
  letter-spacing: -.01em;
  padding: .6rem .6rem .6rem 1.6rem;   /* rechts knapp – dort sitzt der Icon-Kreis */
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:active { transform: scale(.975); }
/* Sicherheitsnetz: Ein Button ohne Icon-Kreis bekommt wieder symmetrische
   Innenabstände, sonst sähe er rechts angeschnitten aus. */
.btn:not(:has(.btn__ico)) { padding-inline: 1.6rem; }
.btn--lg:not(:has(.btn__ico)) { padding-inline: 2rem; }
.btn--sm:not(:has(.btn__ico)) { padding-inline: 1.2rem; }

/* Der "Knopf im Knopf": das Icon steht nie nackt neben dem Text, sondern in
   einem eigenen Kreis, der bündig in der rechten Innenkante sitzt. */
.btn__ico {
  width: 2.25rem; height: 2.25rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(35, 20, 10, .13);
  transition: transform var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.btn__ico .icon { width: 1.05rem; height: 1.05rem; }
.btn:hover .btn__ico { transform: translate(3px, -1px) scale(1.06); }

.btn--primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow-warm);
}
.btn--primary:hover { background: #ef7434; box-shadow: 0 26px 60px -22px rgba(228, 104, 43, .55); }

.btn--outline {
  background: var(--shell); color: var(--text);
  border-color: var(--shell-line);
  backdrop-filter: blur(6px);
}
.btn--outline:hover { border-color: rgba(224, 166, 58, .5); color: var(--accent-2); background: rgba(224, 166, 58, .06); }
.btn--outline .btn__ico { background: rgba(246, 238, 227, .07); }

/* Tertiär – nicht jede Zeile braucht zwei gefüllte Flächen */
.btn--quiet {
  background: none; border-color: transparent; color: var(--muted);
  padding-inline: 1.1rem .5rem;
}
.btn--quiet:hover { color: var(--text); }
.btn--quiet .btn__ico { background: rgba(246, 238, 227, .06); }

.btn--lg { font-size: 1.05rem; padding: .75rem .75rem .75rem 2rem; }
.btn--lg .btn__ico { width: 2.7rem; height: 2.7rem; }
.btn--lg .btn__ico .icon { width: 1.2rem; height: 1.2rem; }

.btn--sm { font-size: .9rem; padding: .45rem .45rem .45rem 1.2rem; gap: .65rem; }
.btn--sm .btn__ico { width: 1.9rem; height: 1.9rem; }
.btn--sm .btn__ico .icon { width: .9rem; height: .9rem; }

.btn--block { width: 100%; justify-content: center; }

/* Buttons in einer Reihe unten bündig – sonst tanzen die CTAs */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }

.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ====================================================== 5  Navigation ===== */

/* Freischwebende Glas-Insel, bewusst nicht an die Oberkante geklebt. */
/* Feste Höhe statt Polsterung, die sich beim Einrasten ändert. Der Hero zieht
   sich um genau diesen Betrag nach oben – änderte die Leiste ihre Flusshöhe,
   würde die ganze Seite beim ersten Scrollen um ein paar Pixel springen. Das
   Einrasten zeigt sich deshalb nur an der Insel, nicht an der Leiste. */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: var(--nav-h);
  display: grid; align-items: center;
}

.nav__island {
  width: min(100% - 2rem, calc(var(--wrap) + 40px));
  margin-inline: auto;
  min-height: var(--island-h);
  display: flex; align-items: center; gap: 1.5rem;
  padding: .5rem .5rem .5rem 1.1rem;
  border-radius: 999px;
  /* Die Insel schwebt über dem laufenden Hero-Video. Ein backdrop-filter muss
     seinen Hintergrund bei jedem Bild neu weichzeichnen, und die Kosten
     wachsen mit dem Radius – deshalb hier bewusst maßvoll und dafür eine
     etwas deckendere Fläche. */
  background: rgba(26, 20, 16, .72);
  border: 1px solid rgba(246, 238, 227, .07);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  box-shadow: var(--inner-hi), 0 20px 50px -30px rgba(0, 0, 0, .9);
  transition: background-color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}
/* Das Einrasten zeigt sich als Verdichten der Insel – transform statt Höhe,
   damit kein Layout neu berechnet wird und nichts springt. */
.nav.is-stuck .nav__island {
  background: rgba(26, 20, 16, .88);
  border-color: rgba(246, 238, 227, .12);
  box-shadow: var(--inner-hi), 0 26px 60px -28px rgba(0, 0, 0, 1);
  transform: scale(.975);
}

/* Auf schmalen Schirmen bleibt die Insel unverdichtet. Dort liegt das
   Menü-Overlay in ihr, und ein transform macht sie zum Bezugsrahmen für dessen
   `position: fixed`.

   Es genügt nicht, das transform beim Öffnen abzuschalten: Es ist animiert, und
   während der Fahrt von scale(.975) nach none IST noch ein transform gesetzt.
   Das Overlay bliebe für die Dauer der Animation auf Leistengröße eingesperrt
   und spränge erst am Ende auf – man sah zuerst nur „Start“ in einem kleinen
   Kasten, dann klappte der Rest heraus. Beim Schließen dasselbe rückwärts.

   Verloren geht dabei fast nichts: 2,5 % Größenänderung an einer 66 px hohen
   Leiste sind auf einem Telefon kaum wahrnehmbar, und das Einrasten zeigt sich
   ohnehin deutlicher an Hintergrund, Rahmen und Schatten. */
@media (max-width: 900px) {
  .nav.is-stuck .nav__island { transform: none; }
}

/* Der zweite Bezugsrahmen-Auslöser: der Weichzeichner der Insel.

   `backdrop-filter` macht ein Element – genau wie `transform` – zum Bezugsrahmen
   für alles, was darin `position: fixed` steht. Das Menü-Overlay liegt in der
   Insel, `inset: 0` spannte es deshalb über die Insel statt über den Schirm.
   Gemessen waren das 348 × 125 px: „Start“ lag 64 px oberhalb des sichtbaren
   Bereichs und war unerreichbar, und der abdunkelnde Hintergrund bedeckte nur
   die Leiste – die Seite darunter schien voll durch, die Menüschrift verschmolz
   mit ihr.

   Anders als das transform hängt der Weichzeichner an keinem Scrollzustand; er
   muss deshalb hier abgeschaltet werden. Anders als das transform ist er auch
   nicht animiert, das Abschalten wirkt also sofort und nicht erst nach einer
   Übergangszeit.

   Zu sehen ist davon nichts: Bei offenem Menü liegt das Overlay über der Insel,
   nur Schriftzug und Schließen-Knopf ragen heraus. Dort gibt es gar keinen
   Hintergrund mehr, den ein Weichzeichner weichzeichnen könnte. */
body.nav-open .nav__island {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Seit das Overlay den ganzen Schirm bedeckt, läge der Schriftzug darunter und
   wäre bei offenem Menü verschwunden. Er steigt deshalb mit auf – genauso, wie
   es der Schließen-Knopf schon tut.

   Am .nav zu drehen hilft hier nicht: Das Element bildet mit position:sticky
   und z-index einen eigenen Stapelkontext, das Overlay steckt darin und stiege
   einfach mit. Aufsteigen muss der Schriftzug selbst. */
body.nav-open .brand {
  position: relative;
  z-index: calc(var(--z-sheet) + 1);
}

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--text); margin-right: auto; }
.brand__mark {
  width: 42px; height: 42px; flex: none; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--on-accent);
  box-shadow: var(--inner-hi);
  transition: transform var(--t-med) var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.05); }
.brand__name {
  font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 700; font-size: 1.32rem; letter-spacing: -.035em; line-height: 1;
}
.brand__sub {
  display: block; font-family: var(--font-ui);
  font-size: .6rem; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted); margin-top: .3rem;
}

.nav__links { display: flex; align-items: center; gap: 2.2rem; }
.nav__links a {
  position: relative;
  color: var(--muted); text-decoration: none;
  font-size: .93rem; font-weight: 500; letter-spacing: -.01em;
  transition: color var(--t-fast) var(--ease);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -7px;
  height: 1.5px; width: 100%; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-med) var(--ease);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--text); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }

.nav__toggle {
  display: none; width: 44px; height: 44px; padding: 0; flex: none;
  background: rgba(246, 238, 227, .06);
  border: 1px solid var(--shell-line); border-radius: 50%;
  cursor: pointer; place-items: center;
  transition: background-color var(--t-fast) var(--ease);
}
.nav__toggle:hover { background: rgba(246, 238, 227, .11); }
.nav__toggle span { display: block; width: 17px; height: 1.5px; background: var(--text); border-radius: 2px; position: relative; transition: background-color var(--t-fast) var(--ease); }
.nav__toggle span::before, .nav__toggle span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: var(--text); border-radius: 2px;
  transition: transform var(--t-med) var(--ease), top var(--t-med) var(--ease);
}
.nav__toggle span::before { top: -5.5px; }
.nav__toggle span::after { top: 5.5px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Scroll-Fortschritt */
.progress {
  position: fixed; top: 0; left: 0; z-index: var(--z-progress);
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  pointer-events: none;
}

/* ===================================================== 6  Laufbänder ====== */

.marquee { position: relative; overflow: hidden; padding: .85rem 0; user-select: none; }
.marquee--solid { background: var(--accent); transform: rotate(-2deg); }
.marquee--ghost { transform: rotate(1.4deg); border-block: 1px solid var(--line); }
/* Die Bänder sind gedreht und ragen dadurch seitlich über das Fenster
   hinaus – das erzeugte einen 1px breiten waagerechten Scrollbalken auf der
   ganzen Seite. clip statt hidden, weil clip keinen Scrollbereich aufmacht
   und damit sticky/fixed in Ruhe lässt. */
.marquee-stack { margin: clamp(3rem, 7vw, 6rem) 0; overflow-x: clip; }
.marquee-stack .marquee + .marquee { margin-top: -.6rem; }

/* Kein gap am Track! Der Abstand steckt als padding-right im Element selbst,
   sonst passt die Verschiebung um -50 % nicht exakt und es ruckelt am Übergang. */
.marquee__track { display: flex; align-items: center; width: max-content; animation: marquee 30s linear infinite; }
.marquee--ghost .marquee__track { animation-duration: 38s; animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marquee__item {
  display: inline-flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem;
  font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 800; font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  letter-spacing: -.03em; white-space: nowrap;
}
.marquee--solid .marquee__item { color: var(--on-accent); }
.marquee--ghost .marquee__item { color: transparent; -webkit-text-stroke: 1.2px rgba(168, 155, 140, .8); }
.marquee--ghost .marquee__item .hot { -webkit-text-stroke: 1.2px var(--accent-2); }
.marquee__dot { width: .42em; height: .42em; border-radius: 50%; background: currentColor; flex: none; opacity: .5; }
.marquee--ghost .marquee__dot { background: var(--muted); opacity: .45; }

/* Der rotierende Stempel („Frisch aus dem Ofen“) ist entfallen: Er saß fest in
   einer Ecke der Bühne, skalierte nicht sauber mit und war beim angehobenen
   Stück ohnehin nur noch schwer lesbar. Die Rufnummer steht in der Navigation,
   im Hero-Button und in der Anrufleiste. */

/* ============================================================ 7  Hero ===== */

/* Achtung: kein overflow:hidden am .hero – das würde position:sticky des
   inneren .hero__pin aushebeln. Geclippt wird eine Ebene tiefer. */

/* Der Hero rutscht um die Höhe der Navigation nach oben, sodass die Insel
   über dem Motiv schwebt statt darüber Platz wegzunehmen. Erst dadurch steht
   dem Video die volle Bildschirmhöhe zur Verfügung. Die Höhe kommt als
   Innenabstand wieder drauf, damit kein Text unter der Leiste landet. */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--nav-h));
}

.hero__pin {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(4rem, 9vw, 7rem);
}

/* Gepinnter Hero mit scroll-gesteuertem Video – nur auf großen Bildschirmen.
   --hero-p ist der Fortschritt des Anhebens, 0…1, gesetzt von motion.js.
   Alles, was daran hängt, ist reine opacity/transform-Arbeit. */
.hero { --hero-p: 0; }

@media (min-width: 981px) {
  .hero--scrub { min-height: 225vh; }
  .hero--scrub .hero__pin {
    position: sticky; top: 0;
    min-height: 100svh;
    display: flex; align-items: center;
    padding-block: var(--nav-h) clamp(1rem, 3vw, 2rem);
  }
}

/* Der riesige Schriftzug hinter dem Motiv ist entfallen: Seit die Bühne die
   rechte Bildhälfte einnimmt, war von ihm nur noch ein angeschnittenes
   Fragment zu sehen, das wie ein Darstellungsfehler wirkte. Die Marke steht
   ohnehin in der Navigation und im Fußbereich. */

/* Warmes Streulicht hinter dem Motiv. Es zieht mit dem Anheben an, als käme
   die Wärme aus dem Ofen mit hoch. */
.hero__blob {
  position: absolute; z-index: 0;
  left: 50%; top: 54%; transform: translate(-50%, -50%) scale(calc(1 + var(--hero-p) * .12));
  width: 108%; aspect-ratio: 1.35; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(228, 104, 43, .58) 0%, rgba(228, 104, 43, .17) 45%, rgba(228, 104, 43, 0) 72%);
  filter: blur(8px);
  opacity: calc(.75 + var(--hero-p) * .25);
}
.hero__pin::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  right: -18vw; top: -14vw;
  background: radial-gradient(circle, rgba(228, 104, 43, .26) 0%, rgba(228, 104, 43, 0) 68%);
}
.hero__pin::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(246, 238, 227, .04) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
}

/* Zwei Ebenen statt zweier Spalten: die Bühne liegt hinten, der Text darüber.
   Auf schmalen Schirmen stehen beide schlicht untereinander. */
.hero__grid {
  position: relative; z-index: 2;
  width: min(100% - 2.5rem, 1400px); margin-inline: auto;
}
.hero h1 { font-size: clamp(2.8rem, 5vw, 4.8rem); margin-bottom: .34em; }
.hero .lead { max-width: 42ch; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin: 2.2rem 0; }

/* Pill-Hinweise unter den Buttons */
.hero__facts { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.hero__facts li {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--muted); font-size: .87rem;
  background: var(--shell);
  border: 1px solid var(--shell-line); border-radius: 999px;
  padding: .45rem 1.1rem;
  transition: border-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.hero__facts li:hover { border-color: rgba(224, 166, 58, .4); color: var(--text); }
.hero__facts .icon { color: var(--accent-2); }

/* Die Status-Pille springt erst auf dem Telefon ein, wo die Plakette auf der
   Bühne entfällt. Ihr <b> soll sich nicht hervortun – es trägt die Auszeichnung
   nur, weil main.js daran das Textfeld erkennt.

   Die Elternangabe ist Pflicht: `.hero__facts li` weiter oben ist spezifischer
   als eine Klasse allein, ein blosses `.fact--status { display: none }` würde
   dagegen verlieren und die Pille bliebe sichtbar. */
.hero__facts .fact--status { display: none; }
.fact--status b { font-weight: inherit; }

/* Wortweises Einblenden der Headline */
.js .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.js .word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform var(--t-slow) var(--ease);
}
.js .headline.is-in .word > span { transform: none; }

/* --- Die Bühne für das Anheben ------------------------------------------
   Das Motiv ist der Hauptdarsteller des Heros: Es wird über die Bildschirm-
   höhe bemessen, nicht über eine feste Pixelbreite, und wächst beim Anheben
   noch ein Stück mit. Das Seitenverhältnis 880:832 ist exakt das des Videos –
   so entsteht weder ein Beschnitt noch ein Rand. */
/* Grundzustand (schmale Schirme): gerahmte Bühne über dem Text.
   Der randlose Vollbild-Auftritt wird weiter unten ab 981 px gesetzt. */
.hero__visual {
  position: relative; z-index: 0;
  width: min(100% - 2.5rem, 1400px); margin-inline: auto;
  display: grid; place-items: center;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.hero__media {
  --stage-h: min(80svh, 800px);
  position: relative; z-index: 1;
  /* Über die Breite bemessen, nicht über die Höhe: So kann die Bühne nie
     breiter werden als ihre Spalte, und das Seitenverhältnis bleibt in jedem
     Fall erhalten. Die Höhenschranke steckt im zweiten min()-Glied. */
  width: min(100%, calc(var(--stage-h) * 880 / 832));
  aspect-ratio: 880 / 832;
  padding: var(--bezel);
  border-radius: 34px;
  background: var(--shell);
  border: 1px solid var(--shell-line);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.hero__media video, .hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: calc(34px - var(--bezel));
  background: #0f0c0a;
}
/* Bildfolge für schmale Schirme. Sie liegt als Hintergrund eines Rasters aus
   6 × 4 Zellen vor; 600 % / 400 % Größe stellt genau eine Zelle formatfüllend
   ein, die Position wählt daraus das Einzelbild aus (motion.js).
   Auf breiten Schirmen bleibt sie ausgeblendet – dort läuft das Video. */
.hero__folge { display: none; }

@media (max-width: 980px) {
  .hero__media video { display: none; }
  .hero__folge {
    display: block;
    position: absolute; inset: var(--bezel);
    border-radius: calc(34px - var(--bezel));
    background-color: #0f0c0a;
    background-image: url("../img/hero-folge.webp");
    background-repeat: no-repeat;
    background-size: 600% 400%;
    background-position: 0% 0%;
  }
}


/* warme Kante, damit die Karte nicht wie ein Fremdkörper wirkt */
.hero__media::after {
  content: ''; position: absolute; inset: var(--bezel); pointer-events: none;
  border-radius: calc(34px - var(--bezel));
  box-shadow: inset 0 0 0 1px rgba(224, 166, 58, .16),
              inset 0 -90px 120px -70px rgba(228, 104, 43, .45);
}

/* ---------------------------------------------------------------------------
   Ab hier der große Auftritt: Auf breiten Schirmen verliert die Bühne ihren
   Rahmen, läuft über die volle Höhe des Heros bis an die rechte Bildkante und
   der Text legt sich als eigene Ebene darüber.
   --------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .hero__visual {
    --stage-w: min(68vw, 1180px);
    position: absolute; top: 0; right: 0; bottom: 0; left: auto;
    width: var(--stage-w);
    margin: 0;
    place-items: center end;
  }

  .hero__media {
    /* Über die Höhe bemessen; die max-height übersetzt die Breitengrenze der
       Bühne zurück in eine Höhe, damit das Seitenverhältnis nie bricht und
       nichts vom angehobenen Stück beschnitten wird. */
    height: 100%;
    max-height: calc(var(--stage-w) * 832 / 880);
    width: auto; max-width: 100%;
    aspect-ratio: 880 / 832;
    padding: 0; border: 0; background: none;
    border-radius: 0; box-shadow: none;
  }

  /* Skaliert wird das Video IM feststehenden Rahmen, nicht der Rahmen selbst.

     Grund: `transform` macht ein Element zur eigenen Compositing-Ebene. Lag
     diese Ebene auf der Bühne, fiel ihre Kante auf einen Bruchteil eines
     Gerätepixels und zeichnete eine Haarlinie – die beim Scrollen mitwanderte,
     weil sich der Zoom ändert. Jetzt steht der Rahmen bombenfest, das Video
     darin ragt immer etwas über und wird von `overflow: hidden` beschnitten.
     Deshalb beginnt der Zoom bei 1.02 und nicht bei 1.0: So liegt die Kante
     des Videos garantiert außerhalb des sichtbaren Rahmens. */
  .hero__media video {
    transform: scale(calc(1.02 + var(--hero-p) * .05));
    /* Ankerpunkt oben rechts, nicht mittig: Das Stück steigt nach oben, also
       darf dort nichts weggezoomt werden. So bleibt die Oberkante stehen und
       der Beschnitt fällt nach unten, wo nur Brett und Tisch liegen. */
    transform-origin: 100% 0%;
    will-change: transform;
  }
  .hero__media video, .hero__media img { border-radius: 0; }
  .hero__media::after { display: none; }   /* warme Kante gehört zum Rahmen-Layout */

  /* Weicher Übergang ins Seitenschwarz. Er hält die Schrift lesbar und lässt
     die Pizza aus dem Dunkeln kommen, statt sie hart abzuschneiden.

     Zwei Dinge sind hier wichtig, damit die Kante der Bühne unsichtbar bleibt:

     Erstens exakt 90deg. Ein gekippter Verlauf trifft jede Bildzeile an einer
     anderen Stelle – bei 96deg lag die linke Kante oben bei 0 %, unten aber
     schon bei 9 %, sodass unten das warme Holzbrett durchschien und einen
     orangen Saum ergab.

     Zweitens die volldeckende Strecke am Anfang: Sie stellt sicher, dass die
     Kante selbst exakt die Seitenfarbe trägt, und zwar bei jedem Zoomstand. */
  .hero__media::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg,
      var(--bg)               0%,
      var(--bg)               6%,
      rgba(20, 16, 13, .88)  18%,
      rgba(20, 16, 13, .62)  31%,
      rgba(20, 16, 13, .22)  45%,
      rgba(20, 16, 13, 0)    59%);
  }

  /* Links der Bühne darf nichts liegen, was es rechts davon nicht auch gibt –
     sonst zeichnet sich die Kante ab, obwohl der Verlauf sauber ausblendet.
     Warmlicht und Punktraster stammen aus dem früheren Layout mit gerahmtem
     Motiv; hinter einem randlosen Video sind sie ohnehin unsichtbar und ragen
     nur noch seitlich heraus. Die Filmkörnung liegt als feste Ebene über der
     ganzen Seite und wirkt deshalb auf beiden Seiten der Kante gleich. */
  .hero__blob { display: none; }
  .hero__pin::before, .hero__pin::after { display: none; }

  .hero__grid { width: min(100% - 3rem, 1560px); }
  .hero__content { max-width: 46rem; }

  /* Die Schlagzeile liegt auf dem Foto, also muss sie als ein geschlossener
     Block wirken und nicht als lose Zeilen: enger Zeilenfall, engere Laufweite,
     größerer Grad. So läuft sie satt ins Motiv hinein. */
  .hero h1 {
    font-size: clamp(3.4rem, 7.6vw, 7.5rem);
    line-height: .9;
    margin-bottom: .32em;
    text-wrap: balance;
    /* Enge Laufweite schrumpft auch das Leerzeichen – ohne Ausgleich kleben
       die Wörter aneinander. Die Buchstaben rücken also zusammen, die Wörter
       bekommen den Abstand zurück. */
    letter-spacing: -.04em;
    word-spacing: .06em;
  }
  .hero__content .lead { font-size: clamp(1.05rem, 1.35vw, 1.2rem); max-width: 40ch; }

  /* Rückversicherung für die Lesbarkeit dort, wo Text auf Pizza trifft */
  .hero__content h1,
  .hero__content .lead,
  .hero__content .eyebrow { text-shadow: 0 2px 28px rgba(10, 6, 3, .6); }
}

/* Hier stand eine schmale Fortschrittsanzeige am Bühnenrand. Auf dem Foto las
   sie sich als versehentlicher Strich statt als Bedienelement – der
   Scrollfortschritt steht ohnehin als Balken am oberen Seitenrand. */


.hero__badge {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: .75rem;
  background: rgba(26, 20, 16, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--shell-line);
  border-radius: 999px;
  padding: .65rem 1.25rem .65rem .75rem;
  box-shadow: var(--shadow-amb), var(--inner-hi);
  font-size: .88rem;
}
.hero__badge b { font-family: var(--font-ui); font-weight: 600; display: block; line-height: 1.25; letter-spacing: -.01em; }
.hero__badge span { color: var(--muted); font-size: .77rem; line-height: 1.35; }
/* Die Plakette bleibt durchgehend voll sichtbar. Sie vorher mit dem
   Scrollfortschritt auszublenden war ein Fehler: Halb durchscheinende Schrift
   auf der Pizza liest sich nicht als Zurücktreten, sondern als Darstellungs-
   fehler. Entweder etwas ist da und lesbar – oder es ist nicht da. */
.hero__badge--status { right: 0; bottom: 4%; }
@media (min-width: 981px) {
  .hero__badge--status {
    right: clamp(1.5rem, 3vw, 3rem); bottom: clamp(1.5rem, 4vh, 3rem);
    /* Hier liegt sie auf dem hellsten Teil des Fotos, deshalb deutlich
       deckender als im gerahmten Layout. */
    background: rgba(18, 14, 11, .93);
    border-color: rgba(246, 238, 227, .14);
  }
  .hero__badge--status span { color: #c3b7a8; }
}
.hero__badge .ring, .hero__badge .status-wrap {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(228, 104, 43, .14); color: var(--accent-2);
}

.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.status-dot--open { background: #5ec98a; box-shadow: 0 0 0 4px rgba(94, 201, 138, .2); }
.status-dot--closed { background: #e0705f; box-shadow: 0 0 0 4px rgba(224, 112, 95, .2); }

/* ---------------------------------------------------------------------------
   Telefon: derselbe Auftritt wie auf dem breiten Schirm, nur um 90 Grad
   gedreht. Dort liegt die Bühne rechts und der Text links darüber; hier liegt
   sie oben und der Text schiebt sich von unten hinein. Die gerahmte Karte mit
   sauber darunter gesetztem Text war zwar ordentlich, wirkte aber wie zwei
   getrennte Bausteine statt wie eine Szene.

   Bewusst nur bis 700 px: Auf einem Tablet steht die gerahmte Karte gut, dort
   ist Breite genug für Rahmen und Umgebung. Das Überlappen lebt davon, dass
   das Motiv den ganzen Schirm einnimmt.

   Der Block steht bewusst hier unten, hinter den Plaketten-Regeln: Weiter oben
   hätte die spätere Grundregel `.hero__badge--status { bottom: 4% }` das hier
   gesetzte `bottom: auto` wieder überschrieben. Mit `top` UND `bottom` wird
   eine Plakette ohne feste Höhe zwischen beiden aufgespannt – aus dem kleinen
   Pillenknopf wurde ein Klotz über das halbe Motiv.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Wie hoch das angehobene Stück im Bild steigt, entscheidet dieser Wert:
     Die Bühne beginnt nicht ganz oben, sondern erst unterhalb der Navigations-
     insel. Zuvor lief sie bis an die Bildschirmkante, und die Insel legte sich
     genau über den Scheitelpunkt des Stücks – ausgerechnet über den Moment,
     um den es in der Animation geht. Der Versatz gilt auch für den Textbeginn
     weiter unten, damit die Überlappung dieselbe bleibt.

     Die Variable hängt an .hero und nicht frei in der Media-Query: Eine
     Deklaration ohne Selektor ist dort ungültig und wird verworfen. Jedes
     var() darauf fällt dann auf den Initialwert zurück – top wurde zu auto,
     der Innenabstand zu 0, und das Layout kippte lautlos. */
  .hero { --buehne-versatz: 3.25rem; }

  .hero__pin { padding-top: 0; }

  .hero__visual {
    position: absolute; top: var(--buehne-versatz); left: 0; right: 0;
    width: 100%; margin: 0;
    overflow: hidden;
    place-items: start center;
  }

  /* Die Plakette lag quer über dem Motiv. Den Öffnungsstatus trägt auf dem
     Telefon stattdessen eine Pille unter den Schaltflächen; verloren geht
     also nichts. */
  .hero__badge--status { display: none; }
  .hero__facts .fact--status { display: inline-flex; }
  .hero__facts .fact--zeiten { display: none; }

  .hero__media {
    --stage-h: 52svh;
    /* Nie schmaler als der Schirm: Ist das Motiv bei dieser Höhe breiter,
       ragt es seitlich heraus und wird von der Bühne beschnitten – links und
       rechts gleich viel, weil das Raster es mittig setzt. */
    width: max(100%, calc(var(--stage-h) * 880 / 832));
    height: auto; aspect-ratio: 880 / 832;
    padding: 0; border: 0; background: none;
    border-radius: 0; box-shadow: none;
  }
  .hero__media::after { display: none; }      /* warme Kante gehört zum Rahmen */
  .hero__folge { inset: 0; border-radius: 0; }

  /* Der Übergang ins Seitenschwarz. Er hält die Schrift lesbar und lässt das
     Motiv nach unten auslaufen, statt es hart abzuschneiden. Oben nur ein
     Hauch, damit die Navigation Halt bekommt; ab zwei Dritteln zieht er an,
     denn genau dort beginnt der Text. */
  .hero__visual::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(180deg,
      rgba(20, 16, 13, .48)   0%,
      rgba(20, 16, 13, .10)  17%,
      rgba(20, 16, 13, .10)  38%,
      rgba(20, 16, 13, .68)  64%,
      rgba(20, 16, 13, .93)  85%,
      var(--bg)             100%);
  }

  /* Der Text beginnt im unteren Drittel des Motivs. Der Wert steht bewusst in
     svh und nicht in Prozent der Bühne: svh bezieht sich auf dieselbe Größe
     wie --stage-h, sodass der Überlappungsanteil auf jedem Telefon gleich
     bleibt. Der Versatz der Bühne kommt hinzu – ohne ihn würde der Text um
     genau diesen Betrag weiter ins Motiv rutschen. */
  .hero__grid { padding-top: calc(34svh + var(--buehne-versatz)); }

  /* Rückversicherung für die Lesbarkeit dort, wo Text auf Pizza trifft */
  .hero__content h1,
  .hero__content .lead,
  .hero__content .eyebrow { text-shadow: 0 2px 24px rgba(10, 6, 3, .75); }

  /* Das Streulicht säße hinter einem randlosen Motiv und wäre unsichtbar –
     es würde nur seitlich herausragen. */
  .hero__blob { display: none; }

  /* Die Plakette wandert nach oben: Unten liegt jetzt der Text. */
  .hero__badge--status {
    top: calc(var(--nav-h) + .5rem); bottom: auto;
    right: clamp(.9rem, 4vw, 1.4rem);
  }
}

/* ========================================================= 8  Flächen ===== */

/* Doppelrand: außen eine Fassung mit Haarlinie, innen ein eigener Kern mit
   eigener Lichtkante und konzentrisch kleinerem Radius. Karten sollen wie
   gefrästes Material wirken, nicht wie ein Rechteck mit Rahmen. */
.card, .dish, .picker, .zone, .builder, .panel {
  position: relative;
  background: var(--shell);
  border: 1px solid var(--shell-line);
  border-radius: var(--r-shell);
  padding: calc(var(--bezel) + 1.7rem);
}
.card::before, .dish::before, .picker::before,
.zone::before, .builder::before, .panel::before {
  content: ''; position: absolute; inset: var(--bezel); z-index: 0;
  border-radius: var(--r-core);
  background: var(--core);
  box-shadow: var(--inner-hi);
  transition: background-color var(--t-med) var(--ease);
}
.card > *, .dish > *, .picker > *, .zone > *, .builder > *, .panel > * { position: relative; z-index: 1; }

/* --- Panel ------------------------------------------------------------------
   Fasst mehrere Blöcke zu einem Modul zusammen, statt sie als lose Karten
   nebeneinander zu stellen. Nur der Radius ist großzügiger als bei einer Karte.

   Achtung: `--r-core` muss hier mitgesetzt werden. Es wird in `:root` als
   `calc(var(--r-shell) - var(--bezel))` deklariert, aber bereits dort zu
   `calc(26px - 6px)` ausgerechnet und dann fertig vererbt. Ein überschriebenes
   `--r-shell` allein zieht den inneren Kern also *nicht* mit – der behielte
   den Radius einer normalen Karte. */
.panel {
  --panel-r: clamp(26px, 3.6vw, 36px);
  --r-shell: var(--panel-r);
  --r-core: calc(var(--panel-r) - var(--bezel));
  padding: clamp(1.7rem, 4vw, 3.2rem);
}
.panel__grid {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}
/* Die Tabelle bekommt eine eigene, leicht abgesenkte Fläche – so bleibt sie
   im Modul erkennbar ein eigener Bereich, ohne eine zweite Karte zu sein. */
.hours-box {
  background: rgba(16, 12, 9, .5);
  border: 1px solid var(--shell-line);
  border-radius: var(--r-sm);
  padding: .25rem 1.3rem;
}

.card { transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.card:hover { border-color: rgba(246, 238, 227, .15); }
.card:hover::before { background: var(--core-2); }

.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* --- Asymmetrisches Bento statt vier gleicher Spalten --------------------
   Vier identische Kacheln nebeneinander sind das generischste Layout, das
   es gibt. Hier wechseln sich breite und schmale Kacheln ab und die zweite
   Reihe ist gegenläufig – die Zeile bekommt eine Richtung. */
.bento { display: grid; gap: 1.1rem; grid-template-columns: repeat(12, 1fr); }
.bento > * { grid-column: span 12; }

@media (min-width: 860px) {
  .bento > *                  { grid-column: span 6; }
  .bento > *:nth-child(4n+1)  { grid-column: span 7; }
  .bento > *:nth-child(4n+2)  { grid-column: span 5; }
  .bento > *:nth-child(4n+3)  { grid-column: span 5; }
  .bento > *:nth-child(4n)    { grid-column: span 7; }
}
@media (min-width: 1100px) {
  /* Drei Gerichte: das meistbestellte quer über die volle Breite, darunter
     zwei ungleich breite Karten. Drei gleich große Spalten nebeneinander wären
     das generischste Layout, das es gibt. */
  .bento--dishes > *              { grid-column: span 6; }
  .bento--dishes > *:first-child  { grid-column: span 12; }
  .bento--dishes > *:nth-child(2) { grid-column: span 7; }
  .bento--dishes > *:nth-child(3) { grid-column: span 5; }

  /* Die Aushängeschild-Karte liegt quer und bricht die Rasterlogik auf. */
  .bento--dishes > *:first-child { display: grid; grid-template-columns: minmax(0, 300px) 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
  .bento--dishes > *:first-child .dish__media { margin: 0; }
  .bento--dishes > *:first-child .dish__body { justify-content: center; flex: 0 1 auto; }
  .bento--dishes > *:first-child h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1; font-weight: 700; letter-spacing: -.035em; }
  .bento--dishes > *:first-child .dish__desc { max-width: 48ch; font-size: 1rem; }
  /* Preis und Anruf-Knopf bleiben auf Textbreite beieinander – sonst treibt
     der Knopf auf der breiten Karte weit nach rechts ab. */
  .bento--dishes > *:first-child .dish__foot { max-width: 48ch; margin-top: 1.6rem; }

  /* Versatz nimmt der Reihe das Schematische. Bewusst margin statt transform –
     transform ist hier schon von Einblendung und Karten-Neigung belegt. */
  .bento > *:nth-child(2) { margin-top: 2.2rem; }
  .bento > *:nth-child(3) { margin-top: -1.2rem; }
}

/* Beliebte Gerichte */
.dish {
  display: flex; flex-direction: column;
  padding: calc(var(--bezel) + 1.5rem);
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.dish:hover { border-color: rgba(224, 166, 58, .3); box-shadow: var(--shadow-lift); }
.dish:hover::before { background: var(--core-2); }

.dish__media {
  position: relative; margin: -.2rem 0 1.4rem;
  aspect-ratio: 1; display: grid; place-items: center;
}
.dish__media::before {
  content: ''; position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 104, 43, .2) 0%, rgba(228, 104, 43, 0) 70%);
}
/* Die Fotos sind freigestellt – sie bringen ihre eigene, unrunde Randkontur
   im Alphakanal mit. Deshalb hier bewusst **kein** border-radius: Ein Kreis
   würde die echte Kontur wieder wegschneiden. `drop-shadow` folgt dem
   Alphakanal und legt sich damit exakt um den Rand, anders als `box-shadow`,
   der immer dem rechteckigen Rahmen folgen würde. */
.dish__media img {
  position: relative; width: 96%;
  /* `height: auto` ist Pflicht: Das height-Attribut am <img> wirkt als
     Darstellungshinweis und setzte sonst eine feste Höhe von 800 px – das Bild
     würde senkrecht verzerrt, statt dem Seitenverhältnis zu folgen. */
  height: auto; aspect-ratio: 1; object-fit: contain;
  transition: transform var(--t-slow) var(--ease);
  filter: drop-shadow(0 20px 30px rgba(18, 10, 4, .7));
}
.dish:hover .dish__media img { transform: scale(1.07) rotate(7deg); }

/* Eigener Textblock, damit die Karte im breiten Bento-Format einfach zur
   zweiten Rasterspalte wird, ohne dass sich die Struktur ändert. */
.dish__body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* Die Nummer steht bewusst über dem Namen: Bestellt wird am Telefon, und
   „einmal die 97“ ist schneller gesagt als der Gerichtname. */
.dish__nr {
  font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
  margin-bottom: .55rem;
}
.dish h3 { margin-bottom: .4rem; }
.dish__desc { color: var(--muted); font-size: .93rem; margin-bottom: 1.4rem; flex: 1; max-width: 40ch; }

/* CTA-Zeile immer am Kartenfuß – so stehen sie über alle Karten auf einer Linie */
.dish__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }
.dish__price {
  font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.dish__price small {
  display: block; font-family: var(--font-ui);
  font-size: .68rem; font-weight: 500; color: var(--muted); letter-spacing: .04em;
}

/* Preise je Größe. Der Fuß wird dafür gestapelt statt nebeneinander –
   sonst quetscht die Liste den Anruf-Knopf an den Rand. */
.dish__foot:has(.dish__sizes) {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
}

.dish__sizes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .18rem;
  font-family: var(--font-ui);
}
.dish__sizes li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .9rem;
  padding: .2rem 0;
  border-bottom: 1px solid var(--line);
}
.dish__sizes li:last-child { border-bottom: none; }

.dish__size {
  font-size: .78rem; font-weight: 600; color: var(--text);
  letter-spacing: .01em; white-space: nowrap;
}
.dish__size i {
  font-style: normal; font-weight: 500; color: var(--muted);
  font-size: .68rem; margin-left: .35rem;
}
.dish__cost {
  font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 1rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* "10,50 €" brach auf dem Telefon zwischen Zahl und Waehrung um, weil der
   Knopf die Zeile teilen darf. Der Preis gehoert zusammen. */
.dish__single { display: block; white-space: nowrap; }
.dish__price { overflow-wrap: normal; }
.dish__cost, .dish__price > .dish__add .dish__single { white-space: nowrap; }

.call-btn {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--shell-line); cursor: pointer;
  background: rgba(246, 238, 227, .06); color: var(--text);
  text-decoration: none;
  transition: transform var(--t-med) var(--ease), background-color var(--t-med) var(--ease), color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.call-btn:hover {
  transform: scale(1.08) rotate(8deg);
  background: var(--accent); color: var(--on-accent);
  border-color: transparent; box-shadow: var(--shadow-warm);
}
.call-btn .icon { width: 20px; height: 20px; }

/* Sticker */
.sticker {
  position: absolute; z-index: 4; top: -.7rem; right: -.7rem;
  display: grid; place-items: center;
  width: 76px; height: 76px; padding: .3rem;
  border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-ui); font-weight: 600;
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; line-height: 1.3; text-wrap: balance;
  transform: rotate(-13deg);
  box-shadow: var(--shadow-amb), var(--inner-hi);
  transition: transform var(--t-med) var(--ease);
}
.sticker--gold { background: var(--accent-2); }
.dish:hover .sticker { transform: rotate(7deg) scale(1.08); }

/* ================================================= 9  "Worauf hast du Lust?" */

/* Schimmernder Verlaufsrahmen.

   Technik: zwei Hintergrundebenen. Die obere füllt nur die padding-box und ist
   deckend, die untere reicht bis in die border-box und trägt den Verlauf –
   sichtbar bleibt davon genau der 1 px breite Rand.

   `border-image` wäre der naheliegende Weg, scheidet hier aber aus: Es
   ignoriert `border-radius` und würde die runde Karte rechteckig einrahmen.

   Die Füllung muss **deckend** sein. Mit dem sonst üblichen halbtransparenten
   --shell schiene der Verlauf durch die ganze Fläche statt nur am Rand;
   dieser Ton liegt bewusst zwischen Seiten- und Kernfarbe. */
.picker {
  overflow: hidden;
  padding: clamp(1.8rem, 5vw, 3.6rem);
  border: 1px solid transparent;
  background:
    linear-gradient(#1a1410, #1a1410) padding-box,
    linear-gradient(135deg,
      rgba(228, 104, 43, .70)  0%,
      rgba(224, 166, 58, .32) 26%,
      rgba(246, 238, 227, .07) 48%,
      rgba(224, 166, 58, .26) 72%,
      rgba(228, 104, 43, .60) 100%) border-box;
  background-size: auto, 220% 220%;
  background-position: 0 0, 0% 50%;
  animation: pickerSchimmer 18s linear infinite;
}
/* Bewusst langsam: Der Rand soll leben, nicht blinken. Bewegt wird nur die
   Verlaufsebene, die Füllebene bleibt stehen. */
@keyframes pickerSchimmer {
  to { background-position: 0 0, 220% 50%; }
}

.picker::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 520px; height: 520px; top: -260px; right: -180px;
  background: radial-gradient(circle, rgba(228, 104, 43, .2) 0%, rgba(228, 104, 43, 0) 70%);
}
.picker__head { max-width: 52ch; margin-bottom: 2rem; }
.picker__head .lead { margin-bottom: 0; }

.picker__form { display: flex; gap: .8rem; flex-wrap: wrap; }
.picker__form input {
  flex: 1 1 260px; min-width: 0;
  font: inherit; color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--shell-line);
  border-radius: 999px;
  padding: 1rem 1.6rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.picker__form input::placeholder { color: var(--muted); }
.picker__form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(228, 104, 43, .15);
}
/* Der Auslöser des Werkzeugs – er darf auffallen. Der pulsierende Ring läuft
   über transform und opacity auf einer eigenen Ebene, nicht über die
   Schattenbreite: So bleibt er auf der GPU und löst kein Neuzeichnen aus. */
.picker__form .btn { flex: 0 0 auto; position: relative; }
.picker__form .btn--primary {
  box-shadow: 0 14px 34px -12px rgba(228, 104, 43, .65);
}
.picker__form .btn--primary::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid rgba(228, 104, 43, .65);
  pointer-events: none;
  animation: pickerPuls 3.4s var(--ease-soft) infinite;
}
/* Beim Überfahren ist der Hinweis überflüssig – dann übernimmt der Hover. */
.picker__form .btn--primary:hover::after { animation-play-state: paused; opacity: 0; }
@keyframes pickerPuls {
  0%        { transform: scale(1);    opacity: .75; }
  70%, 100% { transform: scale(1.22); opacity: 0; }
}

.picker__beispiele { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.2rem; }
.picker__beispiele > span { color: var(--muted); font-size: .84rem; margin-right: .2rem; }
/* Echte Schlagwort-Pillen statt gestrichelter Platzhalter. Die gestrichelte
   Linie ließ sie wie unfertige Felder aussehen; jetzt tragen sie eine feste
   Kontur und einen Punkt als Anfasser. */
.picker__chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .85rem; font-weight: 500;
  background: var(--shell); color: var(--text);
  border: 1px solid var(--shell-line); border-radius: 999px;
  padding: .42rem 1rem .42rem .8rem; cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.picker__chip::before {
  content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--accent-2); opacity: .55;
  transition: background-color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
/* Beim Überfahren leuchtet die Pille voll in der Markenfarbe auf – sie soll
   sich anfassbar anfühlen, nicht nur hervorgehoben. */
.picker__chip:hover,
.picker__chip:focus-visible {
  transform: translateY(-2px);
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: transparent;
  box-shadow: 0 12px 26px -10px rgba(228, 104, 43, .7);
}
.picker__chip:hover::before,
.picker__chip:focus-visible::before {
  background: var(--on-accent); opacity: 1; transform: scale(1.2);
}
.picker__chip:active { transform: translateY(0); }

.picker__result { margin-top: 2rem; }
.vorschlag__leer { color: var(--muted); margin: 0; max-width: 58ch; }

.vorschlag__karte {
  position: relative;
  background: var(--bg-2);
  border: 1px solid rgba(228, 104, 43, .28);
  border-radius: var(--r-core);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: var(--inner-hi);
  animation: vorschlagRein .55s var(--ease);
}
@keyframes vorschlagRein {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.vorschlag__satz {
  color: var(--accent-2);
  font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 600; font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  letter-spacing: -.02em; line-height: 1.35;
  margin-bottom: 1.4rem;
}

.vorschlag__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; }
.vorschlag__kat {
  display: inline-block; margin-bottom: .4rem;
  font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.vorschlag__name { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.035em; font-size: clamp(1.4rem, 3.5vw, 2rem); }
.vorschlag__nr { display: block; font-family: var(--font-ui); font-size: .76rem; font-weight: 500; color: var(--muted); letter-spacing: .04em; margin-top: .3rem; }
.vorschlag__preis {
  font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 700; letter-spacing: -.035em;
  font-size: clamp(1.5rem, 3.5vw, 2rem); color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vorschlag__preis small { display: block; font-family: var(--font-ui); font-size: .62rem; font-weight: 500; color: var(--muted); letter-spacing: .04em; }

.vorschlag__desc { color: var(--muted); margin: 1rem 0 0; max-width: 60ch; }
.vorschlag__hint {
  margin: 1.2rem 0 0; padding: .85rem 1.2rem;
  background: rgba(224, 166, 58, .08);
  border-left: 2px solid var(--accent-2);
  border-radius: 0 10px 10px 0;
  color: var(--text); font-size: .92rem;
}

.vorschlag__aktionen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }

/* Die gepinnte Szene „Vom Hörer bis vor die Tür“ ist entfallen – sie war mit
   240vh der längste Abschnitt der Seite und hat sie unnötig gestreckt. Der
   Ablauf steht ohnehin knapp in den Pillen unter der Schlagzeile
   („Nur telefonisch – kein Warenkorb“) und im CTA-Band. */

/* ================================== 11  Kategorie-Kacheln + Vorteile ====== */

/* --- Kategorien als Bento ---------------------------------------------------
   Gleich große Kacheln würden jede Kategorie gleich wichtig aussehen lassen.
   Pizza trägt den Laden, Pasta ist die zweite Säule – beide bekommen deshalb
   deutlich mehr Fläche als etwa Beilagen. Die Spannweiten sind so gewählt,
   dass jede Reihe exakt aufgeht; sonst reißt das Raster Lücken.

   Feine Trennlinie zur Überschrift über `border-image`, damit sie links
   bernsteinfarben anfängt und nach rechts ausläuft. Ein Pseudo-Element wäre
   hier falsch: Am Grid-Container würde es selbst zur Rasterzelle. */
.cats {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(2, 1fr);
  border-style: solid; border-width: 1px 0 0 0; border-color: transparent;
  border-image: linear-gradient(90deg,
    rgba(224, 166, 58, .45) 0%,
    rgba(246, 238, 227, .10) 34%,
    rgba(246, 238, 227, 0) 76%) 1;
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
}

.cat {
  position: relative;
  display: flex; align-items: center; gap: .8rem;
  background: var(--shell);
  border: 1px solid var(--shell-line);
  border-radius: var(--r-sm);
  padding: .95rem 1.15rem;
  text-decoration: none; color: var(--text);
  font-family: var(--font-ui); font-weight: 500; font-size: .94rem; letter-spacing: -.01em;
  transition: transform var(--t-med) var(--ease),
              background-color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}

/* Leuchtendes Orange beim Überfahren und bei Tastaturfokus. Der Ring liegt im
   box-shadow, damit die Kachel dabei nicht um einen Pixel springt. */
.cat:hover,
.cat:focus-visible {
  transform: translateY(-3px);
  background: rgba(228, 104, 43, .13);
  border-color: rgba(228, 104, 43, .55);
  box-shadow: 0 0 0 1px rgba(228, 104, 43, .3),
              0 14px 32px -14px rgba(228, 104, 43, .6);
}
.cat:active { transform: translateY(-1px); }

.cat__icon { font-size: 1.2rem; line-height: 1; }

/* Drei Kacheln tragen die Illustration aus der gedruckten Karte statt eines
   Emoji: Das Emoji-Sandwich war ein Toast, das Baguette stand faelschlich
   beim Pizzabrot, und der Auflauf war ein Stueck Kaese. Die Bilder sind auf
   dieselbe Grundlinie gesetzt wie die Emoji daneben. */
.cat__bild { width: 1.65rem; height: 1.65rem; object-fit: contain; flex: none; }

@media (min-width: 700px) {
  .cats { grid-template-columns: repeat(6, 1fr); }
  .cats > *  { grid-column: span 2; }
  .cat--xl   { grid-column: span 4; }
  .cat--l    { grid-column: span 4; }
}

@media (min-width: 1100px) {
  .cats { grid-template-columns: repeat(12, 1fr); gap: .8rem; }
  .cats > *  { grid-column: span 3; }
  /* Pizza: doppelt breit und über zwei Reihen – rund dreimal die Fläche
     einer Beilagen-Kachel. */
  .cat--xl   { grid-column: span 6; grid-row: span 2; }
  .cat--l    { grid-column: span 6; }
  .cat--m    { grid-column: span 4; }

  /* Die großen Kacheln bekommen eine eigene Anmutung, sonst wirken sie nur
     wie in die Breite gezogene kleine. */
  .cat--xl {
    flex-direction: column; align-items: flex-start; justify-content: space-between;
    gap: 1.4rem; padding: 1.35rem 1.5rem;
    font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em;
  }
  .cat--xl .cat__icon { font-size: 2.3rem; }
  .cat--xl .cat__bild { width: 3rem; height: 3rem; }
  .cat--l { font-size: 1.06rem; padding: 1.15rem 1.35rem; }
  .cat--l .cat__icon { font-size: 1.55rem; }
  .cat--l .cat__bild { width: 2.1rem; height: 2.1rem; }
}

/* --- Vorteilskarten ------------------------------------------------------
   Bewusst nur auf .perk gemünzt: Lieferzonen, Öffnungszeiten und die
   Allergen-Tafel nutzen dieselbe .card-Basis und sollen ruhig bleiben. */

/* Feine warme Haarlinie statt des neutralen Grautons */
.perk { border-color: rgba(224, 166, 58, .18); }

/* Schimmernder Kern: ein sehr schwacher Lichtverlauf von der oberen linken
   Ecke über den Kern, dazu ein Hauch Ofenlicht. Beides liegt über --core,
   damit die Fläche nicht mehr wie ein flacher Block wirkt. */
.perk::before {
  background:
    linear-gradient(146deg, rgba(246, 238, 227, .06) 0%, rgba(246, 238, 227, 0) 46%),
    radial-gradient(120% 95% at 0% 0%, rgba(228, 104, 43, .10) 0%, rgba(228, 104, 43, 0) 62%),
    var(--core);
}

/* Der Schimmer wandert beim Überfahren einmal durch. Eigene Ebene, damit der
   Kernverlauf darunter unangetastet bleibt – Verläufe selbst lassen sich
   nicht sauber überblenden. */
.perk::after {
  content: ''; position: absolute; inset: var(--bezel); z-index: 0;
  border-radius: var(--r-core); pointer-events: none;
  background: linear-gradient(118deg,
    rgba(246, 238, 227, 0)   34%,
    rgba(246, 238, 227, .07) 50%,
    rgba(246, 238, 227, 0)   66%);
  opacity: 0;
  transform: translate3d(-18%, -18%, 0);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.perk:hover {
  transform: translateY(-6px);
  border-color: rgba(224, 166, 58, .45);
  box-shadow: var(--shadow-lift);
}
/* Muss sein: `.card:hover::before` setzt den Kern auf eine flache Farbe und
   ist spezifischer als `.perk::before`. Ohne diese Regel verlöre die Karte
   ihren Verlauf genau in dem Moment, in dem man sie anfasst. Die hellere
   Grundfarbe von dort wird übernommen, die Lichtebenen bleiben darüber. */
.perk:hover::before {
  background:
    linear-gradient(146deg, rgba(246, 238, 227, .075) 0%, rgba(246, 238, 227, 0) 46%),
    radial-gradient(120% 95% at 0% 0%, rgba(228, 104, 43, .14) 0%, rgba(228, 104, 43, 0) 62%),
    var(--core-2);
}
.perk:hover::after { opacity: 1; transform: translate3d(0, 0, 0); }

/* Warmes Abzeichen statt dunkler Fläche – dieselbe Verlaufsrichtung wie das
   Markenzeichen in der Navigation, damit es zusammengehört. */
.perk__icon {
  width: 54px; height: 54px; border-radius: 17px;
  display: grid; place-items: center; margin-bottom: 1.3rem;
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-2) 100%);
  border: 0;
  color: var(--on-accent);
  box-shadow: var(--shadow-warm), var(--inner-hi);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.perk:hover .perk__icon {
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 22px 50px -18px rgba(228, 104, 43, .55), var(--inner-hi);
}
.perk__icon .icon { width: 24px; height: 24px; stroke-width: 1.8; }

.perk h3 { margin-bottom: .5rem; }
.perk p { color: var(--muted); font-size: .94rem; margin: 0; max-width: 42ch; }

/* ============================== 12  Lieferzonen, Gebiete, Öffnungszeiten == */

.zone { overflow: hidden; }
.zone__num {
  font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 5.5rem; font-weight: 800; line-height: 1; letter-spacing: -.06em;
  color: rgba(246, 238, 227, .05);
  position: absolute; top: .8rem; right: 1.4rem; z-index: 0;
}
.zone h3 { margin-bottom: 1.3rem; }
.zone dl { display: grid; grid-template-columns: 1fr auto; gap: .8rem 1rem; margin: 0; }
.zone dt { color: var(--muted); font-size: .92rem; }
.zone dd {
  margin: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 700; font-size: 1.25rem; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.zone dd.accent { -webkit-text-fill-color: transparent; }

.areas { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.areas li {
  background: var(--shell); border: 1px solid var(--shell-line); border-radius: 999px;
  padding: .45rem 1.1rem; font-size: .9rem; color: var(--text);
  transition: border-color var(--t-fast) var(--ease);
}
.areas li:hover { border-color: rgba(224, 166, 58, .35); }
.areas li.is-note { background: rgba(228, 104, 43, .1); border-color: rgba(228, 104, 43, .32); color: var(--accent-2); }

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--line);
}
.hours li:last-child { border-bottom: none; }

/* Der heutige Tag ist die einzige Zeile, die jemand wirklich sucht – deshalb
   ein eigenes Highlight-Feld statt bloß farbiger Schrift. Die Zeile greift
   über die Innenabstände der Tabelle hinaus, damit das Feld die volle Breite
   des Bereichs einnimmt. */
.hours li.is-today {
  position: relative;
  color: var(--text); font-weight: 600;
  background: linear-gradient(90deg,
    rgba(228, 104, 43, .20) 0%,
    rgba(228, 104, 43, .07) 62%,
    rgba(228, 104, 43, .03) 100%);
  box-shadow: inset 0 0 0 1px rgba(228, 104, 43, .3);
  border-bottom-color: transparent;
  border-radius: 12px;
  margin-inline: -.85rem;
  padding-inline: .85rem;
}
/* Schmale Marke an der linken Kante. Absolut positioniert, wird also kein
   Flex-Element der Zeile. */
.hours li.is-today::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.hours li.is-today .time { color: var(--accent-2); }
.hours li.is-today .day::after {
  content: 'heute'; margin-left: .65rem;
  font-family: var(--font-ui); font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
  padding: .2rem .6rem; border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(228, 104, 43, .8);
  vertical-align: middle;
}
.hours .closed { color: #e0705f; }
.hours .time { font-variant-numeric: tabular-nums; }

/* =================================================== 13  CTA + Footer ===== */

.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(122deg, var(--accent) 0%, #ee7a35 52%, var(--accent-2) 128%);
  border-radius: clamp(24px, 4vw, 36px);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  color: var(--on-accent);
  box-shadow: var(--shadow-warm);
}
.cta::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(35, 20, 10, .11) 1px, transparent 0);
  background-size: 28px 28px;
}
.cta > * { position: relative; }
.cta h2 { color: var(--on-accent); margin-bottom: .6rem; }
.cta p { color: rgba(35, 20, 10, .76); max-width: 46ch; margin-inline: auto; margin-bottom: 2.2rem; font-size: 1.06rem; }
.cta__phone {
  display: inline-flex; align-items: center; gap: .85rem;
  font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 800; font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: var(--on-accent); text-decoration: none;
  transition: transform var(--t-med) var(--ease);
}
.cta__phone:hover { transform: scale(1.035); }
.cta__phone:active { transform: scale(.99); }
.cta__note { margin: 1.8rem 0 0; font-size: .92rem; color: rgba(35, 20, 10, .72); }
.cta__note a { color: inherit; }

.footer { background: #100c0a; border-top: 1px solid var(--line); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem; }
.footer__grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.footer h4 {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.2rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.footer a { color: var(--text); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.footer a:hover { color: var(--accent-2); }
.footer address { font-style: normal; color: var(--muted); line-height: 1.8; }
.footer .brand { margin-bottom: 1.2rem; }
.footer__note { color: var(--muted); max-width: 34ch; margin: 0; }
.footer__bottom {
  margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between;
  color: var(--muted); font-size: .85rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }

/* Sticky Anruf-Leiste (mobil) */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-callbar);
  display: none;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(20, 16, 13, .9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}

/* ----------------------------------------------------- Scroll-Einblendung */

/* Ohne JavaScript ist alles sichtbar – der versteckte Ausgangszustand wird erst
   gesetzt, wenn die .js-Klasse am <html> hängt. So bleibt die Seite auch dann
   lesbar, wenn das Skript oder der IntersectionObserver ausfällt. */
/* Bewegt wird über `translate`, nicht über `transform`.

   Grund: Der sichtbare Endzustand setzt die Bewegung zurück. Stünde dort
   `transform: none`, würde das jede Hover-Bewegung der Komponenten
   überschreiben – `.js .reveal.is-visible` (drei Klassen) ist spezifischer
   als etwa `.perk:hover` (Klasse + Pseudoklasse). Mit `translate` bleibt
   `transform` für die Komponenten frei, und beide überlagern sich sauber.

   Ebenso wichtig: Diese Regel gewinnt auch die Übergangsliste des Elements,
   weil sie spezifischer ist als die Komponentenregeln. Sie muss deshalb die
   Eigenschaften mitführen, die Karten beim Überfahren ändern – sonst
   schnappen Rahmen und Schatten hart um, statt zu gleiten. */
.js .reveal {
  opacity: 0;
  translate: 0 52px;
  filter: blur(8px);
  transition: opacity var(--t-slow) var(--ease),
              translate var(--t-slow) var(--ease),
              filter var(--t-slow) var(--ease),
              transform var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.js .reveal.is-visible { opacity: 1; translate: none; filter: none; }
.js .reveal[data-delay="1"] { transition-delay: .09s; }
.js .reveal[data-delay="2"] { transition-delay: .18s; }
.js .reveal[data-delay="3"] { transition-delay: .27s; }
.js .reveal[data-delay="4"] { transition-delay: .36s; }

/* ==================================================== 14  Speisekarte ===== */

/* Die Leiste bleibt direkt unter der Navigations-Insel stehen (deren Höhe im
   eingerasteten Zustand), nicht darunter hindurch. */
.menu-toolbar {
  position: sticky; top: var(--nav-h); z-index: var(--z-sticky);
  background: rgba(20, 16, 13, .92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
}
.menu-toolbar__inner { display: grid; gap: .85rem; }

.search { position: relative; }
.search input {
  width: 100%; font: inherit; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--shell-line); border-radius: 999px;
  padding: .85rem 2.9rem .85rem 3rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(228, 104, 43, .14); }
.search__icon { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search__clear {
  position: absolute; right: .65rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(246, 238, 227, .09); color: var(--text); display: none; place-items: center;
  font-size: .85rem; line-height: 1;
}
.search__clear.is-visible { display: grid; }

.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.chips::-webkit-scrollbar { height: 3px; }
.chips::-webkit-scrollbar-thumb { background: rgba(246, 238, 227, .15); border-radius: 4px; }
.chip {
  flex: none; padding: .45rem 1.05rem; border-radius: 999px;
  background: var(--shell); border: 1px solid var(--shell-line); color: var(--muted);
  font-size: .88rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chip:hover { color: var(--text); border-color: rgba(224, 166, 58, .4); }
.chip.is-active { background: var(--accent); border-color: transparent; color: var(--on-accent); }

.menu-section { padding-top: 3.5rem; }
.menu-section__title {
  display: inline-block;
  font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  padding-bottom: .45rem; margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--accent);
}
.menu-note { color: var(--muted); font-size: .92rem; margin: 0 0 1.2rem; max-width: 65ch; }
.menu-group__title {
  display: inline-block; font-size: 1.1rem; margin: 2.4rem 0 .8rem;
  padding-bottom: .3rem; border-bottom: 1px solid rgba(224, 166, 58, .45);
  color: var(--accent-2); font-weight: 500;
}

.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item {
  /* minmax(0, 1fr) statt 1fr: Eine 1fr-Spur schrumpft nicht unter ihre
     Mindestbreite. Lange Gerichtnamen schoben die Zeile dadurch über den
     Bildschirmrand hinaus – auf dem Handy gemessen 16 px Überlauf. */
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: .25rem 1rem;
  padding: .95rem .6rem; margin-inline: -.6rem;
  border-radius: 10px;
  border-bottom: 1px solid var(--line); align-items: baseline;
  transition: background-color var(--t-fast) var(--ease);
}
.menu-item:hover { background: rgba(246, 238, 227, .028); }
.menu-item__nr { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9rem; font-weight: 500; }
.menu-item__name { font-weight: 500; letter-spacing: -.01em; }
.menu-item__desc { color: var(--muted); font-size: .9rem; }
.menu-item__prices {
  display: flex; gap: 1rem;
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Beim Umbau auf Knöpfe verloren diese Regeln ihr Ziel: aus dem <span> wurde
   ein <button>. Ohne sie steht die Preisspalte nicht mehr auf einer Flucht –
   und auf dem Telefon fehlte die Größenbeschriftung über der Zahl, wo die
   Kopfzeile .size-head ja ausgeblendet ist. Beide Selektoren nennen jetzt
   beides. */
.menu-item__prices span,
.menu-item__prices .preis { min-width: 4.3rem; text-align: right; }
.menu-item sub { font-size: .64em; font-style: italic; font-weight: 400; color: var(--muted); }

.size-head { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--shell-line); }
.size-head__cols { display: flex; gap: 1rem; }
.size-head__cols div { min-width: 4.3rem; text-align: right; }
.size-head__cols b { display: block; font-size: .88rem; font-weight: 600; }
.size-head__cols span { color: var(--muted); font-size: .68rem; }

.builder { margin-top: 2.5rem; }
.builder .menu-item { border-bottom: none; padding: .45rem .6rem; }
.builder__toppings { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.builder__toppings li { background: var(--bg-2); border: 1px solid var(--shell-line); border-radius: 8px; padding: .32rem .75rem; font-size: .85rem; color: var(--muted); }

.legend { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.legend dl { display: grid; grid-template-columns: 2.3rem 1fr; gap: .45rem .6rem; margin: 0; font-size: .91rem; }
.legend dt { font-weight: 600; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.legend dd { margin: 0; color: var(--muted); }

.no-results { color: var(--muted); padding: 3rem 0; max-width: 55ch; }
[hidden] { display: none !important; }

/* Rechtstexte */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-top: 2.8rem; }
.prose h3 { margin-top: 1.8rem; }
.prose p, .prose li { color: var(--muted); }
.prose ul { padding-left: 1.2rem; display: grid; gap: .4rem; }
.prose strong { color: var(--text); font-weight: 600; }
.todo {
  display: inline-block;
  background: rgba(228, 104, 43, .14); border: 1px dashed rgba(228, 104, 43, .5);
  color: var(--accent-2); border-radius: 6px;
  padding: .05rem .5rem; font-size: .88em; font-weight: 500;
}

/* ==================================================== 15  Responsive ====== */

@media (max-width: 1099px) {
  .bento--dishes > *:first-child { display: flex; }
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  /* Das Motiv bleibt der größte Block der Seite, muss sich den Schirm aber mit
     Schlagzeile, Fließtext und zwei Schaltflächen teilen. */
  .hero__media { --stage-h: min(52svh, 520px); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }

  /* Die Untergrenze der Schlagzeile stammt vom breiten Schirm und war für ein
     Telefon zu groß: „Bienenbüttel“ füllte die Zeile bis an beide Ränder. Hier
     wächst sie mit der Fensterbreite statt an einem festen Sockel zu kleben. */
  .hero h1 { font-size: clamp(2.15rem, 8.6vw, 3.4rem); }
  .hero .lead { font-size: 1rem; }
  .hero__actions { margin: 1.6rem 0 1.4rem; }
}

/* --- Mobile Navigation: Vollflächiges Overlay statt Klappliste ----------- */
@media (max-width: 900px) {
  .nav__toggle { display: grid; }
  .nav__cta { display: none; }

  .nav__links {
    position: fixed; inset: 0; z-index: var(--z-sheet);
    flex-direction: column; align-items: flex-start;
    /* `safe` verhindert den bekannten Fallstrick beim Zentrieren: Ist der
       Inhalt höher als der Kasten, ragt er sonst nach OBEN heraus – und dorthin
       lässt sich nicht scrollen, die obersten Einträge wären unerreichbar.
       Die erste Zeile bleibt als Rückfall für Browser ohne `safe` stehen. */
    justify-content: center;
    justify-content: safe center;
    gap: .25rem;
    padding: 6rem 2rem max(2rem, env(safe-area-inset-bottom));
    /* Fast deckend statt .82: Der Weichzeichner dahinter ist eine Zugabe, kein
       Fundament. Fällt er aus – auf älteren iPhones passiert das – bliebe die
       Seite darunter sichtbar und die Menüschrift unlesbar. Die Lesbarkeit darf
       nicht an einem Effekt hängen. */
    background: rgba(18, 14, 11, .985);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    /* Passen die Einträge einmal nicht auf den Schirm – große Systemschrift,
       kleines Gerät, Querformat –, bleiben sie so erreichbar. `contain` hält
       das Scrollen im Menü, statt es an die Seite dahinter weiterzureichen. */
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--t-med) var(--ease), visibility var(--t-med) var(--ease);
  }
  .nav__links.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

  /* Gestaffelte Enthüllung: die Links steigen nacheinander aus einer
     unsichtbaren Box nach oben, statt einfach da zu sein. */
  .nav__links a {
    font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
    font-size: clamp(2rem, 9vw, 3rem); font-weight: 700; letter-spacing: -.04em;
    color: var(--text); padding: .35rem 0;
    opacity: 0; transform: translateY(2.5rem);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), color var(--t-fast) var(--ease);
  }
  .nav__links a::after { display: none; }
  .nav__links a:active { color: var(--accent); }
  .nav__links.is-open a { opacity: 1; transform: none; }
  .nav__links.is-open a:nth-child(1) { transition-delay: .10s; }
  .nav__links.is-open a:nth-child(2) { transition-delay: .15s; }
  .nav__links.is-open a:nth-child(3) { transition-delay: .20s; }
  .nav__links.is-open a:nth-child(4) { transition-delay: .25s; }
  .nav__links.is-open a:nth-child(5) { transition-delay: .30s; }
  .nav__links a.is-active { color: var(--accent-2); }

  /* Der Schließen-Knopf muss über dem Overlay liegen */
  .nav__toggle { position: relative; z-index: calc(var(--z-sheet) + 1); }

  /* flex statt block: Die Leiste trägt jetzt Korb-Knopf und Anruf-Knopf
     nebeneinander. */
  .callbar { display: flex; }
  body { padding-bottom: 5rem; }
  body.nav-open { overflow: hidden; }

  /* Sobald die Anrufleiste steht, ist der Anruf dauerhaft eine Fingerbreite
     entfernt. Derselbe Knopf im Hero steht dann direkt darüber – zwei gleiche
     orangene Balken übereinander, von denen einer halb verdeckt ist. Im Hero
     bleibt deshalb nur die Speisekarte; die Rufnummer steht ohnehin zusätzlich
     in der Navigation und im Fußbereich. */
  .hero__actions .btn--primary { display: none; }
}

/* --- Antippbare Ziele auf dem Handy ---------------------------------------
   Mit dem Finger getroffen werden muss alles mindestens 44 px hoch sein
   (Richtwert von Apple und Google; WCAG 2.2 fordert als Minimum 24 px).
   Gemessen lagen die Pillen bei 38 px und die Fußzeilen-Links bei 21–27 px –
   letztere sind ausgerechnet die Telefonnummern. */
@media (max-width: 900px) {
  .picker__chip { min-height: 44px; padding-block: .55rem; }
  /* Kategorie-Leiste der Speisekarte – dieselbe Mindesthöhe */
  .chip { min-height: 44px; display: inline-flex; align-items: center; }

  .footer ul a,
  .footer address a,
  .footer__legal a,
  .cta__note a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  /* Der Abstand der Liste darf dafür kleiner werden, sonst wird die Fußzeile
     unnötig lang – die Trefferflächen berühren sich trotzdem nicht. */
  .footer ul { gap: .15rem; }
  .footer__legal { gap: .1rem 1.4rem; }
}

@media (max-width: 640px) {
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .hero__badge { font-size: .8rem; padding: .5rem 1rem .5rem .55rem; }
  .hero__badge--tl { top: 2%; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .picker__form .btn { width: 100%; justify-content: space-between; }
  .vorschlag__aktionen .btn { width: 100%; justify-content: space-between; }
  .marquee__item { gap: 1.4rem; padding-right: 1.4rem; }
  .cats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .menu-item { grid-template-columns: 2.8rem minmax(0, 1fr); }
  .menu-item__body, .menu-item__name, .menu-item__desc { min-width: 0; overflow-wrap: anywhere; }
  .menu-item__prices { grid-column: 2; justify-content: flex-start; gap: .7rem; margin-top: .4rem; }
  .menu-item__prices span,
  .menu-item__prices .preis { min-width: 0; text-align: left; }
  .menu-item__prices span[data-size]:not([data-size=""])::before,
  .menu-item__prices .preis[data-size]:not([data-size=""])::before {
    content: attr(data-size);
    display: block; font-size: .62rem; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .size-head { display: none; }
}

/* ------------------------------------------------------------- Ruhemodus */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; translate: none; filter: none; }
  .js .word > span { transform: none; }
  .marquee__track { transform: none !important; }
  .nav__links a { opacity: 1; transform: none; }
  /* Ohne Animation bliebe der Puls-Ring als starrer Kreis um den Button stehen. */
  .picker__form .btn--primary::after { opacity: 0; }
}

/* ==================================================== 16  Warenkorb ======= */

/* Der Warenkorb ist ein Merkzettel fürs Telefonat, keine Kasse. Er tritt
   deshalb zurück: ein Knopf in der Leiste, eine Schublade von rechts. */

.nav__wk {
  position: relative; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--shell); border: 1px solid var(--shell-line);
  color: var(--text); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav__wk:hover { border-color: rgba(224, 166, 58, .4); background: rgba(246, 238, 227, .06); }
.nav__wk .icon { width: 19px; height: 19px; }

/* Der Zähler erscheint erst, wenn etwas drin ist – eine dauerhafte Null sähe
   nach Fehler aus. */
.wk-zahl {
  position: absolute; top: -3px; right: -3px;
  min-width: 19px; height: 19px; padding: 0 .3rem;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-family: var(--font-ui); font-size: .7rem; font-weight: 700; line-height: 19px;
  text-align: center;
  opacity: 0; transform: scale(.5);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
[data-wk-auf].hat-inhalt .wk-zahl { opacity: 1; transform: none; }

/* Nur die Innenaufteilung – NICHT display. Die Leiste ist auf dem Desktop
   ausgeblendet und wird erst ab Telefonbreite eingeblendet; ein display hier
   würde sie überall zeigen. */
.callbar { gap: .6rem; align-items: center; }
.callbar .btn--block { flex: 1; }
/* Kein padding:0 – sonst faellt der Knopf auf die Zeilenhoehe des Symbols
   zusammen (gemessen: 56x20 statt quadratisch). Nur links und rechts auf null,
   die senkrechte Polsterung von .btn gibt ihm dieselbe Hoehe wie der
   Anruf-Knopf daneben. flex:none am Symbol, weil es sonst von Zaehler und
   Zentrierung auf wenige Pixel Breite gequetscht wird. */
/* Zwei Stolpersteine. Erstens darf hier nicht padding:0 stehen – dann faellt
   der Knopf auf die Zeilenhoehe des Symbols zusammen (gemessen: 56x20).
   Zweitens braucht die Regel zwei Klassen: .btn:not(:has(.btn__ico)) oben
   zaehlt (0,2,0) und schlaegt ein einzelnes .callbar__wk, sodass die 1,6rem
   Seitenpolster stehen blieben und vom Symbol 3px Breite uebrig liessen.
   align-self: stretch gibt dem Knopf genau die Hoehe des Anruf-Knopfs. */
.callbar .callbar__wk {
  flex: none; width: 56px; padding-inline: 0; align-self: stretch;
  justify-content: center; position: relative;
}
.callbar .callbar__wk .icon { flex: none; width: 20px; height: 20px; }
.callbar .callbar__wk .wk-zahl { top: 4px; right: 4px; }

/* --- Die Schublade ------------------------------------------------------- */

.wk { position: fixed; inset: 0; z-index: var(--z-sheet); pointer-events: none; }
.wk__schatten {
  position: absolute; inset: 0; background: rgba(10, 7, 5, .6);
  opacity: 0; transition: opacity var(--t-med) var(--ease);
}
.wk__blatt {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(100%, 430px);
  display: flex; flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--shell-line);
  box-shadow: -30px 0 80px -40px rgba(0, 0, 0, 1);
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease);
}
.wk.is-offen { pointer-events: auto; }
.wk.is-offen .wk__schatten { opacity: 1; }
.wk.is-offen .wk__blatt { transform: none; }
body.wk-offen { overflow: hidden; }

.wk__kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.4rem .6rem;
}
.wk__kopf h2 { margin: 0; font-size: 1.5rem; }
.wk__schliessen {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--shell); border: 1px solid var(--shell-line);
  color: var(--text); font-size: 1rem; cursor: pointer;
}
.wk__hinweis {
  margin: 0; padding: 0 1.4rem 1rem;
  color: var(--muted); font-size: .86rem; line-height: 1.5;
}
/* Alles zwischen Kopf und Anruf-Knopf rollt gemeinsam. Vorher war nur die
   Posten-Liste scrollbar, während Zonenwahl, Summen und drei Knöpfe fest
   darunter klebten – auf einem 1366x768-Laptop blieben der Liste dadurch
   71 Pixel, also keine einzige vollständige Zeile. Jetzt teilen sich Liste
   und Fuß einen gemeinsamen Rollbereich; fest bleibt nur, was man wirklich
   immer braucht: die Überschrift oben und der Anruf-Knopf unten. */
.wk__rolle { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.wk__liste { padding: 0 1.4rem; }

.wk__ruf {
  flex: none; padding: .9rem 1.4rem max(1rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--bg);
}
/* Leerer Korb: sagt, was fehlt, und bietet gleich den Weg dorthin an. */
.wk__leer { padding: .6rem 0 1.2rem; }
.wk__leer p { margin: 0 0 .35rem; font-family: var(--font-ui); font-size: 1rem; font-weight: 600; }
.wk__leer-sub {
  font-weight: 400 !important; font-size: .88rem !important;
  color: var(--muted); line-height: 1.55; margin-bottom: 1.1rem !important;
}
.wk__leer .btn { justify-content: center; }

.wk-posten {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: .4rem .8rem; align-items: center;
  padding: .85rem 0; border-bottom: 1px solid var(--shell-line);
}

/* Das Kreuz nimmt die ganze Zeile weg. Es steht eigenstaendig neben der
   Mengenwippe, weil niemand bei Menge 4 viermal auf Minus tippt, um einen
   Posten loszuwerden. */
.wk-posten__weg {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  background: none; border: 1px solid transparent;
  color: var(--muted); font-size: .8rem; line-height: 1; cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.wk-posten__weg:hover, .wk-posten__weg:focus-visible {
  color: var(--text); background: rgba(246, 238, 227, .07); border-color: var(--shell-line);
}

/* Was ohnehin auf dem Gericht ist. Steht bewusst in der Liste und nicht erst
   im Editor: Der Gast soll beim Vorlesen sehen, dass da Zwiebeln drauf sind,
   und sie am Telefon abbestellen können. */
/* Die Zutaten stehen ueber die volle Breite unter der Zeile, nicht in der
   schmalen Textspalte: dort lief "Teigboden, Tomatensauce, Gouda - mit
   gekochtem Schinken" ueber drei Zeilen und machte die Liste doppelt so hoch. */
.wk-posten__zutaten { grid-column: 1 / -1; margin: .15rem 0 0; }
/* Zwei getrennte Zeilen statt einer langen: was ohnehin drauf ist, und was
   dazubestellt wurde. In einer Zeile brach der Umbruch mitten hinter dem
   Pluszeichen um, und beim Vorlesen verschwimmt beides ineinander. */
.wk-posten__drauf,
.wk-posten__extra { display: block; font-size: .78rem; line-height: 1.45; }
.wk-posten__drauf { color: var(--muted); }
/* Beilage, Dip, Dressing: eigene Zeile, gleiche Ruhe wie die Zutaten. Was
   Aufpreis kostet, sagt der Klammerzusatz – dafür braucht es keine Farbe. */
.wk-posten__wahl { display: block; font-size: .78rem; line-height: 1.45; color: var(--muted); }
.wk-posten__extra { color: var(--accent-2); }
.wk-posten__drauf s { opacity: .55; text-decoration-thickness: 1px; }

/* Kleiner Textknopf, der den Editor auf- und zuklappt. */
.wk-posten__aendern {
  grid-column: 1 / -1; justify-self: start;
  margin-top: .1rem; padding: .2rem .55rem; border-radius: 8px;
  background: none; border: 1px solid var(--shell-line);
  color: var(--muted); font-family: var(--font-ui); font-size: .76rem;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.wk-posten__aendern:hover, .wk-posten__aendern:focus-visible {
  color: var(--text); border-color: rgba(228, 104, 43, .5);
}
.wk-posten.is-offen .wk-posten__aendern { color: var(--accent-2); border-color: rgba(228, 104, 43, .5); }

.wk-aendern {
  grid-column: 1 / -1;
  margin: .6rem 0 .2rem; padding: .85rem .9rem;
  border-radius: 12px; background: var(--shell); border: 1px solid var(--shell-line);
  display: grid; gap: .9rem;
}
.wk-feld__kopf {
  margin: 0 0 .45rem; font-family: var(--font-ui);
  font-size: .74rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.wk-feld__kopf i { font-style: normal; letter-spacing: 0; text-transform: none; }

.wk-wahl { display: flex; flex-wrap: wrap; gap: .35rem; }
.wk-chip {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .35rem .7rem; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--shell-line);
  color: var(--muted); font-family: var(--font-ui); font-size: .8rem;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.wk-chip b { font-weight: 600; color: var(--text); }
.wk-chip i { font-style: normal; font-size: .74rem; }
.wk-chip:hover { border-color: rgba(224, 166, 58, .45); color: var(--text); }
.wk-chip.is-aktiv {
  border-color: rgba(228, 104, 43, .6); background: rgba(228, 104, 43, .14); color: var(--text);
}
.wk-chip--belag.is-aktiv::before { content: "\2713"; color: var(--accent-2); font-weight: 700; }

/* Weggelassenes wird durchgestrichen statt angehakt - das Gegenteil von
   "kommt drauf" soll auch gegenteilig aussehen. */
.wk-chip--ohne.is-aktiv {
  border-color: rgba(168, 155, 140, .55); background: rgba(246, 238, 227, .07);
  color: var(--muted); text-decoration: line-through;
}
.wk-chip--ohne.is-aktiv::before { content: "\2715"; font-weight: 700; text-decoration: none; }
/* Die Liste ist hoeher als ihr Fenster. Der weiche Abschluss unten zeigt,
   dass da noch mehr kommt - ein hart durchgeschnittener Knopf sieht nach
   Fehler aus. */
.wk-wahl--belag {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.4rem), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 1.4rem), transparent);
}

/* Dreißig Beläge sind eine lange Wand. Sie bekommen eine eigene Höhe mit
   Rollbalken, damit der Editor den Rest der Liste nicht aus dem Bild schiebt. */
.wk-wahl--belag { max-height: 9.5rem; overflow-y: auto; overscroll-behavior: contain; padding-right: .2rem; }

/* Auf schmalen Telefonen reichen vier Spalten nicht: Mengenwippe, Preis und
   Kreuz drücken den Namen auf zwei, drei Zeilen. Dort bekommt der Name eine
   eigene Zeile und die Bedienelemente stehen darunter. */
@media (max-width: 460px) {
  .wk-posten { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: .55rem; }
  .wk-posten__text  { grid-column: 1 / -1; }
  .wk-posten__menge { grid-column: 1; }
  .wk-posten__preis { grid-column: 2; justify-self: end; }
  .wk-posten__weg   { grid-column: 3; justify-self: end; }
}

/* --- Hinweis auf das Tagesangebot --------------------------------------- */

.wk-angebot {
  margin: 0 0 1rem; padding: .85rem 1rem;
  border-radius: 14px;
  background: rgba(224, 166, 58, .1);
  border: 1px solid rgba(224, 166, 58, .32);
}
/* Deutlicher, sobald das Angebot zum Inhalt passt – vorher nur eine Notiz. */
.wk-angebot.is-passend {
  background: rgba(228, 104, 43, .12);
  border-color: rgba(228, 104, 43, .45);
}
.wk-angebot__kopf {
  margin: 0 0 .25rem; font-family: var(--font-ui);
  font-size: .76rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent-2);
}
.wk-angebot__text { margin: 0 0 .6rem; font-size: .88rem; line-height: 1.5; color: var(--text); }
.wk-angebot__text b { font-variant-numeric: tabular-nums; }
.wk-angebot__fuss { margin: .55rem 0 0; font-size: .74rem; color: var(--muted); }
.wk-angebot .btn { width: 100%; justify-content: center; }

/* Die Zeile, auf die das Angebot angewendet wurde. */
.wk-posten__angebot {
  display: block; font-size: .78rem; line-height: 1.45;
  color: var(--accent-2); font-weight: 600;
}

/* --- Die Rückfrage, oben im Korb ---------------------------------------- */

.wk-frage {
  margin: 0 0 .4rem; padding: .9rem 1rem 1rem;
  border-radius: 14px;
  background: rgba(228, 104, 43, .1);
  border: 1px solid rgba(228, 104, 43, .4);
}
.wk-frage__kopf {
  margin: 0 0 .2rem; font-family: var(--font-ui);
  font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-2);
}
.wk-posten--frage { border-bottom: none; padding: .3rem 0 .7rem; }
/* Soße, Dip, Beilage stehen offen in der Rückfrage – das ist die
   Entscheidung, die man beim Bestellen trifft. */
.wk-frage__wahlen { display: grid; gap: .7rem; margin: .2rem 0 .8rem; }

/* Der Schalter benennt, was dahinter steckt ("Größe & Beläge ändern"), damit
   der Gast weiß, dass er auch das noch einstellen kann, bevor er zusagt. */
.wk-frage__mehr {
  display: block; width: 100%; margin: 0 0 .8rem; padding: .4rem .7rem;
  border-radius: 10px; background: none;
  border: 1px dashed rgba(228, 104, 43, .45);
  color: var(--accent-2); font-family: var(--font-ui); font-size: .8rem;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.wk-frage__mehr:hover, .wk-frage__mehr:focus-visible {
  background: rgba(228, 104, 43, .1); border-color: rgba(228, 104, 43, .7);
}
.wk-frage__block { display: grid; gap: .9rem; margin-bottom: .9rem; }

.wk-frage__knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }
.wk-frage__knoepfe .btn { flex: 1 1 auto; justify-content: center; }
.wk-posten__text { min-width: 0; }
.wk-posten__text b { display: block; font-family: var(--font-ui); font-size: .95rem; font-weight: 600; }
.wk-posten__text span { display: block; color: var(--muted); font-size: .8rem; }
.wk-posten__menge { display: flex; align-items: center; gap: .1rem; }
.wk-posten__menge button {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--shell); border: 1px solid var(--shell-line);
  color: var(--text); font-size: 1rem; line-height: 1; cursor: pointer;
}
.wk-posten__menge b { min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.wk-posten__preis { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.wk__fuss { padding: 1rem 1.4rem 1.4rem; border-top: 1px solid var(--line); }
.wk-zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; color: var(--muted); }
.wk-zeile b { color: var(--text); font-variant-numeric: tabular-nums; }
.wk-zeile--summe { font-size: 1.15rem; padding-top: .6rem; }
.wk-zeile--summe span, .wk-zeile--summe b { color: var(--text); font-weight: 700; }

.wk-zonen { border: 0; margin: .9rem 0; padding: 0; display: grid; gap: .35rem; }
.wk-zonen legend { padding: 0 0 .45rem; color: var(--muted); font-size: .84rem; }
.wk-zone {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: .5rem; padding: .6rem .85rem; border-radius: 12px;
  background: var(--shell); border: 1px solid var(--shell-line);
  cursor: pointer; font-size: .9rem;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.wk-zone input { position: absolute; opacity: 0; pointer-events: none; }
.wk-zone b { color: var(--muted); font-weight: 500; font-size: .84rem; white-space: nowrap; }
.wk-zone.is-aktiv { border-color: rgba(228, 104, 43, .55); background: rgba(228, 104, 43, .1); }
.wk-zone.is-aktiv b { color: var(--accent-2); }

.wk-warnung {
  margin: .6rem 0 0; padding: .6rem .8rem; border-radius: 10px;
  background: rgba(228, 104, 43, .12); border: 1px solid rgba(228, 104, 43, .3);
  color: var(--accent-2); font-size: .85rem; line-height: 1.45;
}
.wk-warnung--still { background: var(--shell); border-color: var(--shell-line); color: var(--muted); }

.wk-aktionen { display: grid; gap: .5rem; margin-top: 1rem; }

/* Rückfrage vor dem Leeren. Zurückhaltend gehalten: Sie soll warnen, nicht
   erschrecken – und der behaltende Weg steht rechts, damit ein zweiter Tipp
   an derselben Stelle nicht versehentlich alles löscht. */
.wk-leeren {
  padding: .8rem .9rem; border-radius: 12px;
  background: var(--shell); border: 1px solid var(--shell-line);
}
.wk-leeren p {
  margin: 0 0 .7rem; color: var(--text);
  font-family: var(--font-ui); font-size: .88rem; line-height: 1.5;
}
.wk-leeren__knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }
.wk-leeren__knoepfe .btn { flex: 1 1 auto; justify-content: center; }

/* Kurze Rückmeldung beim Hinzufügen – auf dem Telefon ist die Schublade zu,
   ohne sie bliebe unklar, ob der Tipper angekommen ist. */
.wk-melder {
  position: fixed; left: 50%; bottom: 6.5rem; z-index: calc(var(--z-sheet) + 2);
  transform: translate(-50%, 1rem);
  padding: .7rem 1.2rem; border-radius: 999px;
  background: rgba(26, 20, 16, .96); border: 1px solid rgba(224, 166, 58, .35);
  color: var(--text); font-size: .88rem; white-space: nowrap;
  box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 1);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.wk-melder.is-da { opacity: 1; transform: translate(-50%, 0); }

/* --- Preise als Knöpfe --------------------------------------------------- */

/* Der Preis war optisch nicht von gewöhnlichem Text zu unterscheiden – man
   musste wissen, dass er anklickbar ist. Jetzt trägt er dauerhaft eine
   leichte Umrandung, also die übliche Einladung zum Tippen. Beim Zeigen
   wandert ein Pluszeichen heraus; dauerhaft sichtbar wäre es bei knapp
   dreihundert Preisen zu unruhig. */
.menu-item__prices .preis {
  position: relative;
  font: inherit; color: inherit; cursor: pointer;
  background: rgba(246, 238, 227, .035);
  border: 1px solid var(--shell-line); border-radius: 9px;
  padding: .25rem .55rem; margin: -.25rem 0;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.menu-item__prices .preis::after {
  content: "+";
  position: absolute; top: 50%; right: -.1rem;
  transform: translate(0, -50%) scale(.6);
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-2); color: var(--on-accent);
  font-size: .82rem; font-weight: 700; line-height: 1;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.menu-item__prices .preis:hover,
.menu-item__prices .preis:focus-visible {
  background: rgba(228, 104, 43, .16);
  border-color: rgba(228, 104, 43, .55);
}
.menu-item__prices .preis:hover::after,
.menu-item__prices .preis:focus-visible::after {
  opacity: 1; transform: translate(45%, -50%) scale(1);
}
.menu-item__prices .preis:active { transform: scale(.94); }

/* Hinweis über der Karte. Ohne ihn bleibt die Umrandung bloß Dekoration –
   erst der Satz sagt, was beim Tippen passiert. */
.wk-tipp {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1.6rem; padding: .6rem 1.1rem .6rem .7rem;
  border-radius: 999px;
  background: rgba(228, 104, 43, .1);
  border: 1px solid rgba(228, 104, 43, .3);
  color: var(--text); font-family: var(--font-ui); font-size: .88rem;
}
.wk-tipp__ring {
  width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-2); color: var(--on-accent);
}
.wk-tipp__ring .icon { width: 1rem; height: 1rem; }

/* --- Tagesangebot auf der Startseite ------------------------------------ */

.angebot {
  display: grid; gap: 2rem; align-items: start;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: 24px;
  background: linear-gradient(120deg, rgba(228, 104, 43, .16), rgba(224, 166, 58, .08));
  border: 1px solid rgba(228, 104, 43, .35);
}
@media (min-width: 900px) { .angebot { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.angebot__kopf h2 {
  margin: .2rem 0 .8rem;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -.03em;
  text-wrap: balance;
}
.angebot__kopf .lead { margin: 0; }

.ang-felder { display: grid; gap: .8rem; }
@media (min-width: 560px) { .ang-felder { grid-template-columns: 1fr 1fr; } }

.ang-wahl { display: grid; gap: .3rem; min-width: 0; }
.ang-wahl > span {
  font-family: var(--font-ui); font-size: .74rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
/* Eigene Pfeilgrafik, weil der Systempfeil im dunklen Feld kaum zu sehen ist. */
.ang-wahl select {
  width: 100%; min-width: 0;
  padding: .7rem 2.2rem .7rem .9rem;
  border-radius: 12px; cursor: pointer;
  background: var(--shell); border: 1px solid var(--shell-line); color: var(--text);
  font-family: var(--font-ui); font-size: .92rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right .75rem center;
  background-size: .34rem .34rem, .34rem .34rem;
  background-repeat: no-repeat;
}
.ang-wahl select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ang-wahl option, .ang-wahl optgroup { background: var(--bg); color: var(--text); }

.ang-hinweis { margin: .9rem 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }

.angebot__fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  justify-content: space-between;
  margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(228, 104, 43, .28);
}
.angebot__preis {
  font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .angebot__fuss { flex-direction: column; align-items: stretch; }
  .angebot__fuss .btn { width: 100%; justify-content: space-between; }
}

/* --- Hinweis auf den Pizza-Baukasten ------------------------------------ */

.eigene {
  display: flex; align-items: center; gap: 1.2rem;
  margin-top: 1.6rem; padding: 1.1rem 1.4rem;
  border-radius: 18px; text-decoration: none; color: var(--text);
  background: linear-gradient(100deg, rgba(228, 104, 43, .14), rgba(224, 166, 58, .07));
  border: 1px solid rgba(228, 104, 43, .32);
  transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.eigene:hover { border-color: rgba(228, 104, 43, .6); transform: translateY(-2px); }
.eigene__bild { font-size: 1.9rem; line-height: 1; flex: none; }
.eigene__text { display: grid; gap: .12rem; min-width: 0; }
.eigene__kopf {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent-2);
}
.eigene__text strong {
  font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 700; letter-spacing: -.02em;
}
.eigene__sub { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.eigene__pfeil { flex: none; margin-left: auto; background: rgba(246, 238, 227, .07); }
.eigene:hover .eigene__pfeil { background: var(--accent); color: var(--on-accent); }

@media (max-width: 560px) {
  .eigene { flex-wrap: wrap; gap: .9rem; padding: 1rem 1.1rem; }
  .eigene__pfeil { margin-left: 0; }
}

/* --- Preise auf den Startseiten-Karten ---------------------------------- */

.dish__add {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .9rem; width: 100%;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 10px;
  padding: .3rem .5rem; margin: 0 -.5rem;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dish__add:hover, .dish__add:focus-visible {
  background: rgba(228, 104, 43, .14); border-color: rgba(228, 104, 43, .45);
}
.dish__add:active { transform: scale(.985); }
.dish__plus {
  flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  display: grid; place-items: center; align-self: center;
  background: rgba(228, 104, 43, .2); color: var(--accent-2);
  font-weight: 700; font-size: .9rem; line-height: 1;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dish__add:hover .dish__plus, .dish__add:focus-visible .dish__plus {
  background: var(--accent-2); color: var(--on-accent);
}
/* Bei nur einem Preis traegt der Knopf die grosse Zahl selbst. */
.dish__price > .dish__add { padding-left: 0; margin-left: 0; }

/* --- Pizza-Baukasten ------------------------------------------------------ */

.bk-groessen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; margin: 1rem 0; }
.bk-groesse {
  position: relative;
  display: grid; gap: .1rem; padding: .7rem .9rem; border-radius: 14px;
  background: var(--shell); border: 1px solid var(--shell-line); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.bk-groesse input { position: absolute; opacity: 0; pointer-events: none; }
.bk-groesse b { font-family: var(--font-ui); font-size: .95rem; }
.bk-groesse span { color: var(--muted); font-size: .76rem; }
.bk-groesse i { font-style: normal; font-weight: 600; color: var(--accent-2); font-size: .9rem; }
.bk-groesse.is-aktiv { border-color: rgba(228, 104, 43, .55); background: rgba(228, 104, 43, .1); }

.bk-belaege { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.bk-belag {
  position: relative; padding: .45rem 1rem; border-radius: 999px;
  background: var(--shell); border: 1px solid var(--shell-line);
  color: var(--muted); font-size: .88rem; cursor: pointer; min-height: 38px;
  display: inline-flex; align-items: center;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.bk-belag input { position: absolute; opacity: 0; pointer-events: none; }
.bk-belag:hover { border-color: rgba(224, 166, 58, .4); color: var(--text); }
.bk-belag.is-aktiv { border-color: rgba(228, 104, 43, .6); background: rgba(228, 104, 43, .14); color: var(--text); }
.bk-belag.is-aktiv::before { content: "\2713"; color: var(--accent-2); font-weight: 700; margin-right: .35rem; }
.bk-belag sub { font-size: .64em; color: var(--muted); }

.bk-fuss {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding-top: 1.1rem; border-top: 1px solid var(--shell-line);
}
.bk-rechnung { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; color: var(--muted); font-size: .88rem; }
.bk-rechnung b {
  font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 1.7rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .bk-fuss { flex-direction: column; align-items: stretch; }
  .bk-fuss .btn { width: 100%; justify-content: space-between; }
}

/* Die frühere Telefon-Sonderregel (ganzes Blatt am Stück scrollen) ist
   entfallen: .wk__rolle löst dasselbe Problem jetzt auf allen Größen. */