@font-face{font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/anton-400.woff') format('woff')}
  @font-face{font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/archivo-black-400.woff') format('woff')}
  @font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-400.woff') format('woff')}
  @font-face{font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-500.woff') format('woff')}
  @font-face{font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-600.woff') format('woff')}
  :root{
    --bg:#0a0a0a;
    --bg2:#0e0e0e;
    --ink:#f4f1ea;
    --muted:#8a8a82;
    --faint:#4a4a44;
    --line:#1e1e1c;
    --yellow:#ffc802;
    --wolt:#009de0;
    --uber:#06c167;
    --lieferando:#ff8000;
    --pad:clamp(28px, 7vw, 190px);  /* großzügiger Seitenrand — wächst mit dem Screen */
    --r:16px;        /* Rundung große Flächen */
    --r-lg:22px;     /* Rundung großer Karten-Flächen (Foto-Band, Franchise) */
    --r-sm:10px;     /* Rundung Buttons & Felder */
    --anton:'Anton', Impact, sans-serif;
    --inter:'Inter', -apple-system, sans-serif;
    --wm:'Archivo Black', sans-serif;
    /* Einheitliches UI- und Motion-System: Burger-Animation = Referenz.
       Alle Komponenten nutzen dieselben Kurven, Geschwindigkeiten und Glows. */
    --ease-out:cubic-bezier(.22,1,.36,1);
    --ease-smooth:cubic-bezier(.65,0,.25,1);
    --ease-draw:cubic-bezier(.6,0,.2,1);
    --dur-fast:180ms;
    --dur-ui:300ms;
    --dur-reveal:800ms;
    --dur-image:900ms;
    --content-max:1440px;
    --section-y:clamp(88px,10vw,150px);
    --header-pad:18px;
    --border-soft:rgba(244,241,234,.14);
    /* Der große Menü-Lichtschein hat eine feste Geometrie. Seine Position und
       Stärke dürfen nicht von der Höhe der aktiven Produktkategorie abhängen. */
    --menu-glow-color:rgba(255,200,2,.06);
    --menu-glow-center-y:380px;
    --menu-glow-radius-y:460px;
    /* Ein Glow, eine Intensität: Farbe, Versatz, Blur, Spread und Opacity
       werden nirgendwo komponentenweise neu erfunden. */
    --glow:0 14px 44px 0 rgba(255,200,2,.30);
    /* iPhone-Notch-Höhe (v48): das Element, das GANZ OBEN steht, füllt diese
       Zone mit seinem Hintergrund und schiebt seinen Inhalt darunter. Wer NICHT
       oben steht (z.B. der Header, wenn ein Banner darüber liegt), setzt die
       Variable lokal auf 0 → kein doppelter Abstand. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* scrollbar-gutter both-edges: reserviert die Scrollbar-Breite auf BEIDEN Seiten —
     sonst schiebt die Scrollbar die komplette Seite ein paar Pixel aus der Fenstermitte. */
  html{
    scroll-behavior:smooth; scrollbar-gutter:stable both-edges;
    /* Root und Seitenfläche verwenden exakt dasselbe Schwarz. Safari kann so
       beim Auf-/Zuklappen seiner Toolbar keine zweite, leicht abweichende
       Browserfläche zwischen URL-Pille und Website zeichnen. */
    background:var(--bg); color-scheme:dark;
  }
  body{
    background:var(--bg); color:var(--ink);
    font-family:var(--inter); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  /* Breitenvertrag der kompletten Seite: Kein Effekt, SVG oder transformiertes
     Kind darf den Layout-Viewport verbreitern. `hidden` ist der Fallback für
     ältere iPhones, `clip` verhindert in aktuellen Browsern zusätzlich einen
     horizontalen Scroll-Container. */
  html,body{width:100%; max-width:100%; overflow-x:hidden; overscroll-behavior-x:none}
  @supports (overflow:clip){html,body{overflow-x:clip}}
  .shell,main,header,footer,section{max-width:100%; min-width:0}
  .shell{overflow-x:clip}
  img{max-width:100%; height:auto}
  /* ── Feines Filmkorn über allem — nimmt der Seite das sterile Digitale ── */
  body::after{
    content:""; position:fixed; inset:-100px; z-index:150; pointer-events:none; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain 1.2s steps(4) infinite;
  }
  @keyframes grain{
    0%{transform:translate(0,0)} 25%{transform:translate(-34px,22px)}
    50%{transform:translate(22px,-30px)} 75%{transform:translate(-16px,-18px)} 100%{transform:translate(0,0)}
  }
  /* iOS Safari 26 legt seine schwebende Bedienleiste über den Visual Viewport.
     Eine vollflächige, fixe Transparenz-Layer wird dabei als eigener rechteckiger
     Compositor-Tile sichtbar. Mobil ist das Korn bei .05 ohnehin nicht erkennbar:
     komplett ausblenden beseitigt die Kante und spart gleichzeitig GPU/Akku. */
  @media (max-width:860px){ body::after{display:none} }

  /* iOS/WebKit: Der Burger wird mobil wieder nativ sticky gehalten, weil nur
     der Browser selbst seine Position mit dem asynchronen Scrollen absolut
     ruhig synchronisieren kann. Safari legt dabei seine Toolbar auf eine
     eigene Fläche. Diese Fläche ist deshalb auf der gesamten mobilen Seite
     bewusst gleich schwarz statt erst ab der Burger-Sequenz. */
  /* v79: Der frühere fixe schwarze Streifen am unteren Rand ist ERSATZLOS
     entfernt. Er war selbst der sichtbare Balken über Safaris schwebender
     Bedienleiste. Safari blendet seine Toolbar dort mit eigener Unschärfe
     über den Inhalt — das funktioniert nur, wenn darunter echter Seiten-
     inhalt liegt und keine deckende Fläche. Der Grundton wird jetzt
     ausschließlich über html/body + theme-color gehalten. */
  @supports (-webkit-touch-callout:none){
    @media (max-width:1024px){
      body::before{content:none}
    }
  }
  /* ═══════════════════════════════════════════════════════════════════
     v79 — SAFARI-BALKEN: gemeinsame Grundregeln für die gesamte Seite
     ═══════════════════════════════════════════════════════════════════
     Safari 26 zeichnet seine schwebende Bedienleiste MIT Unschärfe über
     den Visual Viewport. Damit unten nichts als Balken auffällt, muss
     dreierlei gelten:
       1) Kein Element darf am unteren Rand deckend fixiert sein.
       2) Der Seitenhintergrund muss durchgehend derselbe Ton sein
          (html = body = theme-color = #0a0a0a).
       3) Kein sticky/fixed Element darf einen eigenen Compositor-Layer
          gegen die Leistenfläche aufziehen.
     ═══════════════════════════════════════════════════════════════════ */
  @media (max-width:1024px){
    /* Der Body füllt mindestens den kleinen Viewport, damit bei
       eingeklappter Leiste keine helle/andersfarbige Restfläche entsteht. */
    body{min-height:100svh; background-color:var(--bg)}
    footer{padding-bottom:calc(var(--safe-bottom) + 18px)}
    body::before{content:none !important}

    /* ═════════════════════════════════════════════════════════════════
       v80 — DIE EIGENTLICHE URSACHE DES WANDERNDEN BALKENS
       ═════════════════════════════════════════════════════════════════
       Der Balken war nie an einen Abschnitt gebunden. Er erscheint überall
       dort, wo ein Element einen eigenen GPU-Layer bekommt (will-change,
       3D-Transform, filter, backdrop-filter, sticky+z-index, overflow-
       Container mit Transform). Safari komponiert so einen Layer separat
       und die Kachelgrenze wird am unteren Rand als Kante sichtbar —
       deshalb ab dem Burger, dann bei .statements, dann bei .franchise.

       Einzelne Abschnitte zu reparieren ist Flickschusterei. Auf Touch
       werden GPU-Layer daher GRUNDSÄTZLICH abgeschaltet. Die Scroll-
       Animationen laufen unverändert weiter (GSAP animiert weiterhin
       transform) — nur die dauerhafte Layer-RESERVIERUNG entfällt. */
    *,*::before,*::after{
      will-change:auto !important;
      backface-visibility:visible !important;
    }
    /* Parallax-/Drift-Ebenen: die permanente Layer-Reservierung war nur
       eine Performance-Wette. Ohne sie bleibt die Bewegung identisch. */
    .hero-bg .hdrift,
    .band .bwrap,
    .franchise .frbg,
    .h-main .ch{will-change:auto !important}

    /* overflow:hidden + position:relative erzeugt in WebKit zusammen mit
       einem animierten Kind einen Paint-Container, dessen untere Kante
       gegen die Leiste gerastert wird. `clip` schneidet identisch, ohne
       einen Scroll-/Compositing-Container aufzuziehen. */
    .statements{overflow:clip}
    @supports not (overflow:clip){ .statements{overflow:hidden} }
  }

  /* ── v80: Durchgehende Grundfläche im ROOT-Layer ────────────────────
     Damit Safari unter seiner Bedienleiste IMMER denselben Ton sieht —
     unabhängig davon, welcher Abschnitt gerade animiert — bekommt das
     Root-Element einen fixierten Hintergrund. Das ist KEIN Element und
     KEIN Layer: `background-attachment:fixed` auf <html> wird vom
     Root-Layer selbst gemalt und kann darum keine eigene Kachelkante
     erzeugen. Der Inhalt scrollt normal darüber. */
  @media (max-width:1024px){
    html{
      background-color:var(--bg);
      background-image:linear-gradient(var(--bg), var(--bg));
      background-attachment:fixed;
      background-repeat:no-repeat;
      background-size:100% 100%;
    }
    /* Der Body darf diese Fläche NICHT mit einem eigenen deckenden
       Hintergrund überdecken — sonst ist der Root-Layer wieder wirkungslos.
       Transparenter Body = Safari sieht durchgehend den Root-Ton. */
    body{background-color:transparent}
  }
  @media (max-width:1024px){
    html{scrollbar-gutter:auto}
    /* Nur vertikales Seiten-Scrolling zulassen; Pinch-Zoom bleibt vollständig
       erhalten. So kann iOS auch beim diagonalen Daumen-Wisch nicht seitlich
       in einen leeren Gummiband-Bereich geraten. */
    body{touch-action:pan-y pinch-zoom}
    .head-in,.menu-tabs,.menu-grid,.build-core,.franchise,.fr-flow-card{min-width:0}
    .mnav,.overlay{width:100%; max-width:100%}
  }
  /* Tab im Hintergrund (v39): ALLE Dauer-Animationen (Ken-Burns, Schweben,
     Atmen, Korn, Licht-Streifen) frieren ein und laufen beim Zurückkommen
     nahtlos weiter — kein Springen, kein Akku-Verbrauch im Hintergrund. */
  html.tab-pause *, html.tab-pause *::before, html.tab-pause *::after{animation-play-state:paused !important}
  ::selection{background:var(--yellow); color:#000}
  a{color:inherit; text-decoration:none}
  /* Eigenes Touch-Feedback statt des grauen iOS-Blocks: Buttons & Pillen
     reagieren mit kurzem Andrücken — die Seite fühlt sich am Daumen an,
     wie sie an der Maus aussieht (v30) */
  a, button{-webkit-tap-highlight-color:transparent}
  @media (hover:none){
    .btn-solid:active{transform:scale(.965); box-shadow:0 4px 14px rgba(255,200,2,.28); transition:transform .08s ease}
    .btn-order:active, .s-act a:active, .p-links a:active{background:var(--yellow); border-color:var(--yellow); color:#000; transform:scale(.97); transition:transform .08s ease}
    .mtab:active{color:var(--ink); transform:scale(.96); transition:transform .08s ease}
    .mnav a:active{color:var(--yellow)}
    .foot-grid a:active, .link-arrow:active{color:var(--ink)}
  }
  /* Offenes Overlay / Mobile-Menü: Seite dahinter scrollt nicht mit.
     Dank scrollbar-gutter both-edges springt dabei nichts. */
  html.no-scroll{overflow:hidden}
  /* Einheitlicher Fokus-Ring für Tastatur-Nutzer — gleiche gelbe Sprache wie Hover.
     (Die Stores haben ihre eigene Fokus-Optik: Marker + gelbe Füllung.) */
  a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--yellow); outline-offset:3px; border-radius:2px}
  img,svg{display:block}
  section{scroll-margin-top:70px}
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-track{background:#0a0a0a}
  ::-webkit-scrollbar-thumb{background:#242422; border-radius:5px}
  ::-webkit-scrollbar-thumb:hover{background:#33332f}
  /* ── Feiner Lesefortschritt ganz oben (2px, gelb, leuchtet dezent) ── */
  .progress{
    position:fixed; top:0; left:0; right:0; height:2px; z-index:96; pointer-events:none;
    background:var(--yellow); box-shadow:0 0 14px rgba(255,200,2,.5);
    transform:scaleX(0); transform-origin:0 50%;
  }

  /* ── Vollflächig statt Rahmen: die Seite nutzt die volle Breite,
       einzelne Inhalte begrenzen sich selbst (unsichtbar) ── */
  .shell{position:relative}
  @media (min-width:1900px){
    .store-meta{font-size:14px}
    .mcard .mdesc{font-size:15px}
    .build-svg{width:min(60vw,440px)}
  }

  /* ── Wortmarke (Nachbau — echte Logodatei kann 1:1 ersetzen) ── */
  .wordmark{display:inline-flex; align-items:flex-end; font-family:var(--wm); letter-spacing:-.01em; line-height:1; user-select:none; padding:10px 10px 10px 0} /* unsichtbar größere Tipp-Fläche */
  .wordmark span{display:block}
  .wordmark .wm-o{height:.82em; width:auto; margin:0 .06em .02em}
  .wordmark .wm-i{height:1.18em; width:auto; margin:0 .07em 0}
  .wm-o path{fill:none; stroke:currentColor; stroke-width:7.5; stroke-linecap:round; stroke-linejoin:round}
  .wm-i path{fill:currentColor}

  /* ── Aktions-Banner: gelbe Info-Leiste ganz oben (Admin → Startseite) ──
     Leer = wird gar nicht gerendert. Bewusst NICHT sticky: die Info gehört
     zum Ankommen — danach gehört der Platz dem Inhalt (clean). */
  .abanner{
    display:block; background:var(--yellow); color:#000; text-align:center;
    font-size:13.5px; font-weight:600; letter-spacing:.04em; line-height:1.5;
    padding:11px var(--pad);
    /* iPhone-Notch (v48): das Banner steht GANZ oben → sein gelber Hintergrund
       füllt die Safe-Area mit, der Text sitzt sauber unter der Statusleiste
       (Uhr/Akku). Ohne das ragte es in die Statusleiste (Henks Screenshot). */
    padding-top:calc(11px + var(--safe-top));
  }
  a.abanner{transition:background var(--dur-ui) var(--ease-out)}
  a.abanner:hover{background:#ffd435}
  .abanner .arr{margin-left:8px; display:inline-block}

  /* ── Navigation ── */
  /* Sticky statt fixed: so fluchtet der Header exakt mit dem Seiteninhalt
     (auch mit reservierter Scrollbar-Rinne) — Höhe 0, Inhalt schwebt darüber.
     Der Header bleibt IMMER sichtbar: oben transparent, beim Scrollen wird er
     zur kompakten Glas-Leiste (Blur + Hauch von Schwarz + Haarlinie). */
  header{position:sticky; top:0; height:0; z-index:80}
  .head-in{
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--header-pad) var(--pad);
    /* iPhone-Notch (v46/48): der Header zieht die Safe-Area über --safe-top
       in sein padding-top — Hintergrund/Blur füllt die Notch-Zone, Logo/Nav
       sitzen darunter. Liegt ein Banner darüber, wird --safe-top für den
       nicht-gescrollten Header auf 0 gesetzt (s.u.) → kein doppelter Abstand. */
    padding-top:calc(var(--header-pad) + var(--safe-top));
    background:rgba(10,10,10,0); border-bottom:1px solid rgba(244,241,234,0);
    transition:background .45s var(--ease-out), border-color .45s var(--ease-out), box-shadow .45s var(--ease-out);
  }
  /* Banner oben → der ungescrollte Header ist NICHT das oberste Element,
     braucht die Safe-Area also nicht. Beim Scrollen (Banner weg, Header
     klebt oben) greift --safe-top wieder voll. */
  body.has-banner header:not(.scrolled){ --safe-top:0px }
  header.scrolled .head-in{
    background:rgba(10,10,10,.55);
    -webkit-backdrop-filter:blur(16px) saturate(1.15);
    backdrop-filter:blur(16px) saturate(1.15);
    border-bottom-color:rgba(244,241,234,.07);
  }
  header .wordmark{transition:transform .45s var(--ease-out); transform-origin:left center}
  header.scrolled .wordmark{transform:scale(.86)}
  /* Echtes Logo (Upload: admin.php → „0 · Logo") */
  /* Header-Wortmarke bewusst wieder in der großzügigeren v65-Größe. */
  .wordmark .logo-img{display:block; height:32px; width:auto}
  header .wordmark{font-size:22px; color:#fff}
  nav{display:flex; align-items:center; gap:26px; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
  /* Hover-Unterstreichung: überall dieselbe Geste — 1px, GELB, wächst von links.
     (War hier weiß — einziger Ausreißer der Interaktions-Sprache.) */
  nav a.nl{position:relative; padding:4px 0; color:#fff}
  nav a.nl::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--yellow); transform:scaleX(0); transform-origin:right; transition:transform var(--dur-ui) var(--ease-draw)}
  nav a.nl:hover::after{transform:scaleX(1); transform-origin:left}
  /* Outline-Button füllt sich beim Hover GELB — wie jede Füll-Interaktion der
     Seite (Städte, Bestell-Links). Weiß war der einzige Ausreißer. */
  .btn-order{
    font:inherit; cursor:pointer; color:#fff; background:none;
    border:1px solid #fff; border-radius:var(--r-sm); padding:11px 22px; letter-spacing:.14em; text-transform:uppercase;
    transition:background var(--dur-ui) var(--ease-out), color var(--dur-ui) ease, border-color var(--dur-ui) ease, box-shadow .4s var(--ease-out);
  }
  .btn-order:hover{background:var(--yellow); border-color:var(--yellow); color:#000; box-shadow:var(--glow)}
  .mnav-toggle{display:none; background:none; border:none; cursor:pointer; padding:10px 0 10px 10px}
  .mnav-toggle i{display:block; width:26px; height:2px; background:#fff; margin:6px 0; transition:transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) ease}
  .mnav-toggle.open i:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .mnav-toggle.open i:nth-child(2){opacity:0}
  .mnav-toggle.open i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  @media (max-width:860px){
    :root{--header-pad:14px}
    nav a.nl{display:none}
    .mnav-toggle{display:block; padding:12px 4px 12px 14px}
    nav{gap:14px}
    .btn-order{padding:10px 16px; font-size:12px; letter-spacing:.1em}
  }

  /* ── Mobile-Menü ── */
  .mnav{position:fixed; inset:0; z-index:70; background:var(--bg); display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad); visibility:hidden; opacity:0; transition:opacity .4s var(--ease-out), visibility .4s; overflow-y:auto}
  /* Handy quer: Menüpunkte kompakter, oben beginnend & scrollbar — sonst
     schneidet die geringe Höhe die ersten Einträge ab */
  @media (max-height:520px){
    .mnav{justify-content:flex-start; padding:60px var(--pad) 24px}
    .mnav a{font-size:clamp(22px,6.5vh,38px); padding:7px 0}
    .mnav .mnav-foot{margin-top:16px}
  }
  .mnav.open{visibility:visible; opacity:1}
  .mnav a{
    font-family:var(--anton); font-weight:400; text-transform:uppercase; color:var(--ink);
    font-size:clamp(40px,11vw,64px); line-height:1.25; border-bottom:1px solid var(--line); padding:10px 0;
  }
  .mnav a{transition:color .25s}
  .mnav a:active, .mnav a:hover{color:var(--yellow)}
  .mnav .mnav-foot{margin-top:30px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}

  /* ── Hero ── */
  .hero{
    min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:100px var(--pad) 60px; position:relative; overflow:hidden;
  }
  /* Kino-Ebene: Foto füllt den ganzen Hero, zieht ganz langsam auf (wie Video-Footage).
     Ohne Foto bleibt tiefes Schwarz — mit Foto wird der Einstieg filmisch. */
  .hero-bg{position:absolute; inset:0; pointer-events:none}
  /* Drift-Ebene (v36): GSAP schiebt den Wrapper minimal beim Rausscrollen —
     Ken-Burns läuft auf dem KIND weiter. Getrennte Elemente, weil CSS-
     Animation und GSAP sich sonst dieselbe transform-Property streitig
     machen (Idle-Kollisions-Regel). Übergröße, damit keine Ränder aufreißen. */
  .hero-bg .hdrift{position:absolute; inset:-9% 0; will-change:transform}
  .hero-bg .ph{
    position:absolute; inset:0; border:none; border-radius:0; background:transparent;
    animation:kenburns 26s ease-in-out infinite alternate;
  }
  .hero-bg .ph::after{content:""}
  .hero-bg::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(rgba(10,10,10,.42) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.92) 82%, var(--bg) 100%);
  }
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
  /* Warmer Boden-Verlauf im Hero (wie Licht von der Grillplatte) */
  .hero .glow{
    position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(115% 72% at 50% 118%, #241a06 0%, rgba(36,26,6,.55) 30%, rgba(36,26,6,0) 60%);
    /* Der warme Schein löst sich VOR der Sektionskante auf — sonst schneidet
       die Hero-Grenze eine sichtbare Naht ins Schwarz darunter (v29-Fix) */
    -webkit-mask-image:linear-gradient(#000 82%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(#000 82%, rgba(0,0,0,0) 100%);
    /* Idle (v34): die Glut „steht" nie ganz — sie steigt kaum merklich und
       sinkt zurück, wie Hitze über der Platte. BEWUSST transform statt
       opacity: die Opacity gehört hier dem Scroll-Fade (GSAP) — beides auf
       derselben Eigenschaft würde sich gegenseitig überschreiben. */
    transform-origin:50% 100%;
    animation:glut 9s ease-in-out infinite alternate;
  }
  @keyframes glut{from{transform:scaleY(1)} to{transform:scaleY(1.07)}}
  /* Sanfter „Atem“-Schein hinter der Headline — sehr dezent, nur Licht, kein Effektfeuer */
  .hero .spot{
    position:absolute; left:50%; top:45%; width:min(72vw,1150px); aspect-ratio:1.7/1;
    transform:translate(-50%,-50%); pointer-events:none;
    background:radial-gradient(50% 50% at 50% 50%, rgba(255,200,2,.09) 0%, rgba(255,200,2,0) 70%);
    animation:breathe 7.5s ease-in-out infinite alternate;
  }
  @keyframes breathe{from{transform:translate(-50%,-50%) scale(.94)} to{transform:translate(-50%,-50%) scale(1.06)}}
  .hero h1, .hero .hero-foot{position:relative; z-index:2}
  .hero-top{z-index:2}
  .hero-top{
    position:absolute; top:96px; left:var(--pad); right:var(--pad); text-align:center;
    font-size:12.5px; letter-spacing:.04em; color:var(--muted);
  }
  @media (max-height:520px){
    .hero{padding-top:76px}
    .hero-top{top:60px}
    .hero-foot{margin-top:26px; gap:16px}
  }
  .hero h1{
    font-family:var(--anton); font-weight:400; text-transform:uppercase;
    line-height:.92; letter-spacing:.005em;
    display:flex; flex-direction:column; align-items:center;
  }
  .hline{display:block; overflow:hidden}
  .hline > span{display:block}
  html.anim .hline > span{transform:translateY(112%)}
  /* Editorial komponiert statt drei gleicher Zeilen:
     klein & gesperrt — riesig — Outline. Bleibt zentriert, wirkt gesetzt. */
  .h-top > span{display:inline-flex; align-items:center; gap:clamp(16px,2.2vw,30px); padding:.3em 0 clamp(18px,2.6vw,36px)}
  .h-top em{font-family:var(--inter); font-style:normal; font-weight:600; font-size:clamp(12px,1.3vw,19px); letter-spacing:.55em; margin-right:-.55em; color:var(--ink)}
  .h-top .rule{width:clamp(26px,3.8vw,64px); height:2px; background:var(--yellow); box-shadow:0 0 8px rgba(255,200,2,.3)}
  /* Intro-Sequenz: Linien wachsen von innen nach außen, Buchstaben kaskadieren */
  .h-top .rule:first-child{transform-origin:100% 50%}
  .h-top .rule:last-child{transform-origin:0% 50%}
  html.anim .h-top .rule{transform:scaleX(0)}
  .h-main .ch{display:inline-block; will-change:transform}
  .h-main > span{font-size:clamp(48px, min(13.2vw, 24vh), 238px)}
  /* Desktop ruhiger gesetzt (v35, Henks Feedback „eng oben"): Headline eine
     Stufe kleiner + mehr Kopffreiheit — das Editorial-Gefüge BEST → riesig →
     Outline bekommt wieder Luft zur Städtezeile darüber */
  @media (min-width:1024px){
    .hero{padding-top:140px}
    .h-main > span{font-size:clamp(48px, min(11.5vw, 20vh), 196px)}
    .h-out > span{font-size:clamp(34px, min(5.8vw, 10vh), 100px)}
    .hero-top{top:clamp(130px, 14vh, 180px)} /* Städtezeile löst sich vom Header (v36) */
  }
  /* Outline-Typo IMMER mit @supports-Guard (wie bei den Städten, v27-Regel):
     ohne Stroke-Support bliebe der Text sonst unsichtbar (transparent).
     Einheitlicher Stroke überall: 2px rgba(244,241,234,.88), ≤600px 1.4px. */
  .h-out > span{
    font-size:clamp(34px, min(6.6vw, 12vh), 118px); letter-spacing:.02em; padding:.12em .4em .3em;
    /* padding-bottom .3em: der atmende Punkt-Glow braucht Platz in der Maske */
  }
  @supports (-webkit-text-stroke: 2px #fff){
    .h-out > span{color:transparent; -webkit-text-stroke:2px rgba(244,241,234,.88)}
    @media (max-width:600px){ .h-out > span{-webkit-text-stroke-width:1.4px} }
  }
  /* Glow nur hier — die Zeile hat genug Innenabstand, damit nichts eckig abschneidet */
  .hero h1 .dot{color:var(--yellow); -webkit-text-stroke:0; text-shadow:0 0 26px rgba(255,200,2,.5); display:inline-block}
  /* ── Idle-Signatur (v34): die gelben Glow-Punkte der Marke ATMEN ganz
     langsam, wenn die Seite steht — Hero, Foto-Band und Footer-Punkt im
     leicht versetzten Rhythmus (nie synchron, nie hektisch). Nur die
     Punkte MIT Glow außerhalb enger Masken — die maskierten Titel-Punkte
     bleiben bewusst still. ── */
  @keyframes dotbreathe{
    from{text-shadow:0 0 16px rgba(255,200,2,.35); transform:scale(1)}
    to{text-shadow:0 0 27px rgba(255,200,2,.6); transform:scale(1.045)}
  }
  .hero h1 .dot{animation:dotbreathe 5.5s ease-in-out infinite alternate}
  .band .bword .dot{display:inline-block; animation:dotbreathe 5.5s ease-in-out -2.2s infinite alternate}
  .foot-quote .fdot{display:inline-block; animation:dotbreathe 5.5s ease-in-out -3.8s infinite alternate}
  .hero-foot{
    margin-top:52px;
    display:flex; flex-direction:column; align-items:center; gap:28px;
  }
  .hero-foot p{max-width:520px; color:var(--muted); font-size:15px}
  .hero-foot p strong{color:var(--ink); font-weight:600}
  .hero-cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center}
  /* ── Scroll-Hinweis (v34): eine feine gelbe Spur läuft in einem schmalen
     Schacht nach unten und ruht kurz — leiser Wegweiser im Stillstand,
     blendet beim ersten Scrollen aus (GSAP). ── */
  .scue{
    position:absolute; left:50%; bottom:20px; margin-left:-1px;
    width:2px; height:36px; overflow:hidden; border-radius:1px; z-index:2;
  }
  .scue::before{
    content:""; display:block; width:2px; height:13px; border-radius:1px;
    background:var(--yellow); box-shadow:0 0 10px rgba(255,200,2,.5);
    transform:translateY(-14px);
    animation:scue 2.7s cubic-bezier(.55,0,.3,1) infinite;
  }
  @keyframes scue{0%{transform:translateY(-14px)} 62%{transform:translateY(37px)} 100%{transform:translateY(37px)}}
  @media (max-height:520px){ .scue{display:none} }
  .btn-solid{
    font-family:var(--inter); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    background:var(--yellow); color:#000; border:1px solid var(--yellow); border-radius:var(--r-sm);
    padding:16px 30px; cursor:pointer; transition:box-shadow .4s var(--ease-out);
    box-shadow:0 4px 22px rgba(255,200,2,.14);
    position:relative; overflow:hidden; /* für den Glanz-Sweep (v46) */
    /* kein transform in der Transition — sie würde den Magnet-Effekt (JS) ausbremsen */
  }
  /* v46: ein feiner Licht-Streifen wischt beim Hover einmal über den Button —
     der „teure" Glanz von Premium-CTAs. Rein dekorativ, kein Klick-Fänger. */
  .btn-solid::after{
    content:""; position:absolute; top:0; left:0; width:55%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform:translate3d(-210%,0,0) skewX(-18deg); pointer-events:none;
  }
  .btn-solid:hover::after{animation:sheen .85s var(--ease-out)}
  @keyframes sheen{from{transform:translate3d(-210%,0,0) skewX(-18deg)} to{transform:translate3d(500%,0,0) skewX(-18deg)}}
  .btn-solid:hover{box-shadow:var(--glow)} /* Bewegung macht der Magnet-Effekt (JS) */
  .link-arrow{
    position:relative; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); transition:color var(--dur-ui) ease; padding:12px 2px;
    /* Innenabstand statt nur 5px: unsichtbar größere Tipp-Fläche (~44px hoch) */
  }
  .link-arrow::after{
    content:""; position:absolute; left:0; bottom:6px; height:1px; width:100%;
    background:var(--yellow); transform:scaleX(0); transform-origin:right;
    transition:transform var(--dur-ui) var(--ease-draw);
  }
  .link-arrow:hover{color:var(--ink)}
  .link-arrow:hover::after{transform:scaleX(1); transform-origin:left}

  /* ── Foto-Platzhalter ──
     FOTO EINSETZEN: dem Element style="background-image:url('assets/fotos/DATEI.jpg')"
     geben — Label & Schraffur verschwinden dann automatisch. */
  .ph{
    position:relative; background:#0e0e0d;
    border:1px solid #161614; border-radius:var(--r); overflow:hidden;
    background-position:center;
  }
  .ph[style*="background-image"]{background-repeat:no-repeat; background-size:cover}
  .ph::after{
    content:attr(data-label);
    position:absolute; inset:auto 0 16px 0; text-align:center;
    font-size:11px; letter-spacing:.02em; color:#33332f;
  }
  .ph[style*="background-image"]::after{content:""}
  .ph.hasimg::after{content:""}

  /* ── Foto-Band: cleane Kino-Karte (v29) ──
     Statt Full-Bleed + Scroll-Parallax (Kundenfeedback: wirkte unruhig, Effekt
     kam nicht an): Das Foto sitzt als eingerückte, gerundete Karte in den
     Figma-Rändern — gleiche Flächen-Logik wie der Franchise-Block, gleiche
     ruhige Ken-Burns-Bewegung wie das Hero-Foto. Ein One-Shot-Reveal beim
     Reinscrollen, sonst nichts Scroll-Gebundenes. */
  .band{padding:120px 0 0}
  .band .band-card{
    position:relative; width:calc(100% - 2*var(--pad)); max-width:var(--content-max); margin:0 auto;
    height:min(72vh,760px); border-radius:var(--r-lg); border-color:var(--line); overflow:hidden;
  }
  .band .bwrap{position:absolute; inset:-9% 0; will-change:transform} /* Drift-Ebene (v36), s. Hero */
  .band .bimg{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    background-image:radial-gradient(ellipse at 50% 60%, #17150f 0%, transparent 60%);
    animation:kenburns 26s ease-in-out infinite alternate; /* gleiche ruhige Bewegung wie im Hero */
  }
  .band .bshade{
    position:absolute; inset:0;
    /* Eine gerade Abdunklungs-Ebene fürs Outline-Wort — die Karte hat eigene
       Ränder, Auslauf-Fades ins Seiten-Schwarz braucht sie nicht mehr */
    background:linear-gradient(rgba(10,10,10,.5) 0%, rgba(10,10,10,.32) 45%, rgba(10,10,10,.7) 100%);
  }
  .band .bword{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--anton); font-weight:400; text-transform:uppercase; line-height:1;
    font-size:clamp(44px, min(8vw, 16vh), 170px); letter-spacing:.03em;
  }
  .band .band-logo-img{
    /* Die Outline bleibt eine ruhige Bildsignatur – ungefähr so präsent wie
       das frühere typografische ICONIC, nicht so groß wie ein Hero-Logo. */
    width:min(40%,620px); height:auto; max-height:42%; object-fit:contain;
    /* Das PNG selbst bleibt 1:1; nur ein sehr leiser Lichtsaum verbindet es
       mit der vorhandenen cineastischen Bild-/Glow-Sprache. */
    filter:drop-shadow(0 0 20px rgba(244,241,234,.08));
  }
  @media (max-width:720px){ .band .band-logo-img{width:54%; max-height:32%} }
  @supports (-webkit-text-stroke: 2px #fff){
    .band .bword{color:transparent; -webkit-text-stroke:2px rgba(244,241,234,.88)}
    @media (max-width:600px){ .band .bword{-webkit-text-stroke-width:1.4px} }
  }
  @media (max-width:720px){ .band .band-card{height:min(56vh,520px)} }
  .band .bword .dot{color:var(--yellow); -webkit-text-stroke:0; text-shadow:0 0 26px rgba(255,200,2,.5)}
  /* Licht-Streifen (v37): alle ~9s streicht ein warmer Schein einmal quer
     durchs Band-Foto — wie Sonnenlicht über die Scheibe. Ein Ort, ein
     Moment, sehr leise (Pseudo-Element = keine Kollision mit den Tweens). */
  .band-card::after{
    content:""; position:absolute; inset:-15%; pointer-events:none;
    background:linear-gradient(115deg, rgba(255,220,120,0) 43%, rgba(255,220,120,.13) 50%, rgba(255,220,120,0) 57%);
    transform:translateX(-78%);
    animation:lichtsweep 9.5s ease-in-out infinite;
  }
  @keyframes lichtsweep{
    0%, 52%{transform:translateX(-78%)}
    88%, 100%{transform:translateX(78%)}
  }

  /* ── Sektionsköpfe ── */
  .kicker{font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted)}
  .sec-title{font-family:var(--anton); text-transform:uppercase; font-weight:400; font-size:clamp(40px,6.4vw,118px); line-height:1; padding:0 var(--pad); margin-bottom:64px; overflow:hidden; text-align:center}
  .ttl{display:inline-block}
  html.anim .sec-title .ttl{transform:translateY(118%)}
  /* KEIN text-shadow hier: die Titel sitzen in overflow:hidden-Masken —
     ein Glow würde rechteckig abgeschnitten (v11-Bug). Dafür: Punkt poppt rein. */
  .sec-title .dot{color:var(--yellow); display:inline-block}
  /* Stand-Animation (v37): NACH dem Reveal-Pop pulsen die Titel-Punkte ganz
     leicht weiter (JS setzt .idle erst nach dem GSAP-Pop — Kollisions-Regel) */
  .sec-title .dot.idle{animation:dotpulse 5.5s ease-in-out infinite alternate}
  @keyframes dotpulse{from{transform:scale(1)} to{transform:scale(1.09)}}
  /* Stand-Animation (v37): die nicht-interaktiven Outline-Konturen atmen —
     Hero „in Town" und Band-Wort. Die Städte bleiben bewusst statisch
     (deren Kontur gehört der Hover-Interaktion). */
  @supports (-webkit-text-stroke: 2px #fff){
    @keyframes strokebreathe{
      from{-webkit-text-stroke-color:rgba(244,241,234,.88)}
      to{-webkit-text-stroke-color:rgba(244,241,234,.55)}
    }
    .h-out > span{animation:strokebreathe 9s ease-in-out infinite alternate}
    .band .band-word-fallback{animation:strokebreathe 12s ease-in-out -5s infinite alternate}
  }
  /* Statisches Bühnenlicht: Der Schein verändert seine Intensität nicht mehr
     durch Scrollen, Tabs oder zeitversetzte Daueranimationen. */

  /* ── Stores / Order here: gemeinsame Komponenten-Basis ── */
  /* Adresse, Zeiten und Buttons steigen beim Hover fein gestaffelt ein. */
  .s-meta .s-addr, .s-meta .s-hours, .s-meta .s-act{
    opacity:0; transform:translateY(9px);
    transition:opacity .5s ease, transform .6s var(--ease-out);
  }
  .store-bgs{position:absolute; inset:0; pointer-events:none}
  .sbgph{
    position:absolute; inset:0; background-size:cover; background-position:center;
    opacity:0; transform:scale(1.045);
    /* Zoom deutlich gemächlicher (8s, weicher Auslauf) — reines Atmen,
       kein spürbarer „Effekt-Start" mehr (v35, Henks Feedback) */
    transition:opacity var(--dur-image) ease, transform 8s var(--ease-out);
  }
  .sbgph.on{opacity:.16; transform:scale(1)}
  .store-shade{
    position:absolute; inset:0;
    background:linear-gradient(var(--bg) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 78%, var(--bg) 100%);
  }
  .store-list{list-style:none; position:relative}
  .s-line{display:block; overflow:hidden; padding:0 .08em}
  .s-line > span{display:block}
  html.anim .s-line > span{transform:translateY(112%)}
  /* Marker-Unterstreichung zeichnet sich beim Hover — liegt AUSSERHALB der
     Text-Maske, darf also glühen (siehe Glow-Regel) */
  .s-mark{position:absolute; left:2%; bottom:-.12em; width:96%; height:.18em; overflow:visible; pointer-events:none}
  .s-mark path{
    fill:none; stroke:var(--yellow); stroke-width:7; stroke-linecap:round;
    stroke-dasharray:1; stroke-dashoffset:1; opacity:0; /* opacity:0 versteckt den Rundkappen-Punkt im Ruhezustand */
    transition:stroke-dashoffset var(--dur-reveal) var(--ease-draw), opacity var(--dur-fast) linear;
    filter:drop-shadow(0 0 12px rgba(255,200,2,.4)); /* gleicher Glow wie Statement-Marker */
  }
  /* Store-Infos: Adresse & Zeiten sind DIE Kern-Info einer Restaurant-Seite —
     deutlich größer & strukturiert statt einer grauen 13px-Zeile (v30) */
  .s-meta{
    /* Der Platz für die Infos ist IMMER reserviert (v35): beim Hover ändert
       sich keine einzige Höhe mehr — kein Springen der Städte, kein Ruck im
       Hintergrundbild (das entstand, weil die wachsende Sektion das
       cover-Foto neu zuschnitt). Der Inhalt steigt nur sanft ein. */
    opacity:0; visibility:hidden; transform:translateY(12px);
    margin:16px auto 0; max-width:640px;
    font-size:15px; color:var(--muted); line-height:1.65; letter-spacing:.01em;
    transition:opacity .45s ease, transform .65s var(--ease-out), visibility 0s linear .45s;
  }
  .s-meta b{color:var(--ink); font-weight:600}
  .s-meta .s-addr{display:block; font-size:16.5px; color:var(--ink); font-weight:600}
  .s-meta .s-addr small{font-weight:400; font-size:15px; color:var(--muted)}
  .s-meta .s-hours{display:block; margin-top:2px}
  .s-act{display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px}
  .live{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; margin-top:8px}
  .live i{
    width:7px; height:7px; border-radius:50%; background:var(--yellow); display:inline-block;
    box-shadow:0 0 0 0 rgba(255,200,2,.55); animation:pulse 2.6s ease-out infinite;
  }
  @keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,200,2,0)}100%{box-shadow:0 0 0 0 rgba(255,200,2,0)}}
  .live.closed i{background:#4a4a44; box-shadow:none; animation:none}
  .live:empty{display:none}
  /* ── Vertikale Store-Liste: ein Layout, eine Zustandslogik ──
     Foto, Infos und Bestellwege reagieren weich auf Hover, Fokus und Touch. */
  html.anim .stores, .stores{padding:var(--section-y) 0 clamp(78px,9vw,132px)}
  html.anim .stores .stores-wrap, .stores-wrap{height:auto; position:relative}
  html.anim .stores .store-stage, .store-stage{
    position:relative; top:auto; height:auto; isolation:isolate;
    overflow:hidden; padding:0 0 clamp(24px,4vw,58px);
  }
  html.anim .stores .stores-title, .stores-title{
    position:relative; inset:auto; z-index:2; margin-bottom:clamp(42px,6vw,82px);
    display:block; transform:none; opacity:1;
  }
  html.anim .stores .stores-title .ttl{transform:translateY(118%)}
  html.anim .stores .store-list, .store-list{
    position:relative; inset:auto; z-index:1; list-style:none;
    width:min(1160px, calc(100% - (var(--pad) * 2))); margin:0 auto;
    border-top:1px solid var(--border-soft);
  }
  html.anim .stores .store, .store{
    position:relative; inset:auto; opacity:1; pointer-events:auto;
    text-align:center; outline:none; cursor:default; will-change:auto;
    padding:clamp(34px,4.6vw,66px) 12px clamp(30px,4.2vw,58px);
    border-bottom:1px solid var(--border-soft);
  }
  .store:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,200,2,.45)}
  .store-bgs{z-index:0}
  .sbgph{inset:-2%; transition:opacity var(--dur-image) ease, transform 7s var(--ease-out)}
  .sbgph.on{opacity:.34}
  .store-shade{
    background:
      linear-gradient(180deg, var(--bg) 0%, rgba(10,10,10,.18) 20%, rgba(10,10,10,.18) 80%, var(--bg) 100%),
      linear-gradient(90deg, rgba(10,10,10,.62), rgba(10,10,10,.12) 50%, rgba(10,10,10,.62));
  }
  html.anim .stores .s-city, .s-city{
    position:relative; display:inline-block;
    font-family:var(--anton); font-weight:400; text-transform:uppercase;
    font-size:clamp(52px,7.5vw,132px); line-height:.94;
    color:var(--ink); -webkit-text-stroke:0 transparent;
    transition:color .45s ease, opacity .45s ease, -webkit-text-stroke-color .45s ease;
  }
  @supports (-webkit-text-stroke:2px #fff){
    html.anim .stores .store:not(.aktiv) .s-city,
    html.anim .stores .s-city, .s-city{
      /* 1.4px statt 2px: bei 2px lasen die Ü-Punkte als zwei hohle Kästchen
         über der Versalhöhe. Dünner werden sie zu feinen Strichen und die
         Zeile wirkt ruhiger — gleiche Stärke wie .h-out/.bword auf Mobil. */
      color:transparent; -webkit-text-stroke:1.4px rgba(244,241,234,.78);
    }
    html.anim .stores .store:hover .s-city,
    html.anim .stores .store:focus-within .s-city,
    .store:hover .s-city, .store:focus-within .s-city, .store:focus-visible .s-city{
      color:var(--yellow); -webkit-text-stroke-color:var(--yellow);
    }
    html.anim .stores .store-list:hover .store:not(:hover) .s-city,
    .store-list:hover .store:not(:hover) .s-city{
      opacity:1; -webkit-text-stroke-color:rgba(244,241,234,.28);
    }
  }
  /* Anton setzt die Umlaut-Punkte über die Zeilenbox (line-height:.94) hinaus.
     Die Maske bekommt oben .21em Luft, damit Ü/Ö/Ä nicht gekappt werden; das
     negative Margin nimmt die Luft aus dem Layout, die Zeile steht unverändert. */
  .s-line{padding:.21em .08em .04em; margin-top:-.17em}
  /* Startversatz größer als 112%, sonst lugen die Punkte vor dem Reveal
     unten aus der nun höheren Maske heraus. */
  html.anim .stores .s-line > span{transform:translateY(132%)}
  .store:hover .s-mark path, .store:focus-within .s-mark path, .store:focus-visible .s-mark path{
    stroke-dashoffset:0; opacity:1;
  }
  .s-meta{margin:clamp(18px,2vw,26px) auto 0; max-width:780px}
  .store:hover .s-meta, .store:focus-within .s-meta, .store:focus-visible .s-meta{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .5s ease .04s, transform .7s var(--ease-out) .04s, visibility 0s;
  }
  .store:hover .s-addr, .store:focus-within .s-addr,
  .store:hover .s-hours, .store:focus-within .s-hours,
  .store:hover .s-act, .store:focus-within .s-act{opacity:1; transform:none}
  .store:hover .s-addr, .store:focus-within .s-addr{transition-delay:.14s}
  .store:hover .s-hours, .store:focus-within .s-hours{transition-delay:.21s}
  .store:hover .s-act, .store:focus-within .s-act{transition-delay:.28s}
  .s-act{gap:10px; margin-top:18px}
  .s-act a, .s-act .s-disabled{
    display:inline-flex; align-items:center; justify-content:center; min-height:44px;
    padding:10px 18px; border:1px solid rgba(244,241,234,.22); border-radius:var(--r-sm);
    font-size:12px; font-weight:600; letter-spacing:.11em; line-height:1; text-transform:uppercase;
  }
  .s-act a{
    color:var(--ink); background:rgba(10,10,10,.18); backdrop-filter:blur(8px);
    -webkit-tap-highlight-color:transparent;
    transition:background var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out),
      color var(--dur-ui) ease, box-shadow .4s var(--ease-out), transform var(--dur-ui) var(--ease-out);
  }
  /* Alle Wege starten bewusst neutral. Farbe ist die Interaktion: Abholung
     ICONIC-gelb, Wolt und Uber Eats in ihren echten Markenfarben. */
  .s-act a:hover, .s-act a:focus-visible{transform:translateY(-2px)}
  .s-act .s-pickup{font-weight:700}
  .s-act .s-pickup:hover, .s-act .s-pickup:focus-visible{
    background:var(--yellow); border-color:var(--yellow); color:#000;
    box-shadow:var(--glow);
  }
  .s-act .s-wolt:hover, .s-act .s-wolt:focus-visible{
    background:var(--wolt); border-color:var(--wolt); color:#041014;
    box-shadow:var(--glow);
  }
  .s-act .s-uber:hover, .s-act .s-uber:focus-visible{
    background:var(--uber); border-color:var(--uber); color:#03130a;
    box-shadow:var(--glow);
  }
  .s-act .s-lieferando:hover, .s-act .s-lieferando:focus-visible{
    background:var(--lieferando); border-color:var(--lieferando); color:#1a0c00;
    box-shadow:0 0 26px rgba(255,128,0,.34);
  }
  /* Telefon bleibt schwarzweiß — beim Drüberfahren dreht es um: weiße Fläche,
     schwarze Schrift, dazu ein kurzer Glanz, der einmal durchläuft. */
  .s-act .s-call{position:relative; overflow:hidden}
  .s-act .s-call::after{
    content:""; position:absolute; top:0; bottom:0; width:45%;
    left:-60%; transform:skewX(-18deg); pointer-events:none;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
    transition:left .55s var(--ease-out);
  }
  .s-act .s-call:hover, .s-act .s-call:focus-visible{
    background:var(--ink); border-color:var(--ink); color:#0a0a0a;
    box-shadow:0 0 24px rgba(244,241,234,.26);
  }
  .s-act .s-call:hover::after, .s-act .s-call:focus-visible::after{left:120%}
  .s-act .s-disabled{
    color:rgba(244,241,234,.38); border-color:rgba(244,241,234,.09);
    background:rgba(244,241,234,.035);
  }
  /* Ein einzelner Rest-Button (z.B. Telefon als dritter, oder „Bald verfügbar"
     allein) landete im zweispaltigen Raster links statt mittig. */
  .s-act > :last-child:nth-child(odd){
    grid-column:1 / -1; justify-self:center; width:min(100%, 210px);
  }
  /* Noch nicht eröffnet: deutlich zurückgenommen, damit die Zeile nicht
     aussieht, als könnte man dort schon bestellen. */
  .store-bald .s-city{opacity:.34}
  .store-bald .s-meta{opacity:.55}
  .store-bald .s-mark{display:none}
  .store-bald:hover .s-city, .store-bald:focus-within .s-city{
    color:transparent; -webkit-text-stroke-color:rgba(244,241,234,.5); opacity:.5;
  }
  @media (hover:none){
    .store-bald .s-city{color:rgba(244,241,234,.42)}
  }
  @media (hover:none){
    html.anim .stores .store:not(.aktiv) .s-city,
    html.anim .stores .s-city, .s-city{color:var(--ink); -webkit-text-stroke-color:transparent}
    .s-meta, .s-meta .s-addr, .s-meta .s-hours, .s-meta .s-act{
      opacity:1; visibility:visible; transform:none;
    }
    .sbgph.on{opacity:.2}
    /* Touch-Geräte: derselbe Farbcode erscheint beim tatsächlichen Tippen,
       ohne dass Buttons dauerhaft bunt oder wie Werbebanner wirken. */
    .s-act a:active{transform:scale(.975)}
    .s-act .s-pickup:active{background:var(--yellow); border-color:var(--yellow); color:#000}
    .s-act .s-wolt:active{background:var(--wolt); border-color:var(--wolt); color:#041014}
    .s-act .s-uber:active{background:var(--uber); border-color:var(--uber); color:#03130a}
    .s-act .s-lieferando:active{background:var(--lieferando); border-color:var(--lieferando); color:#1a0c00}
    .s-act .s-call:active{background:var(--ink); border-color:var(--ink); color:#0a0a0a}
  }
  @media (max-width:720px){
    html.anim .stores, .stores{padding:72px 0 64px}
    html.anim .stores .stores-title, .stores-title{margin-bottom:38px}
    html.anim .stores .store-list, .store-list{width:calc(100% - 32px)}
    html.anim .stores .store, .store{padding:34px 4px 36px}
    html.anim .stores .s-city, .s-city{font-size:clamp(44px,14.5vw,78px)}
    .s-meta{font-size:14.5px; max-width:430px}
    .s-meta .s-addr{font-size:16px}
    .s-act{
      display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px; width:min(100%,420px); margin:18px auto 0;
    }
    .s-act a, .s-act .s-disabled{
      width:100%; min-height:48px; padding:11px 10px;
      font-size:10.5px; letter-spacing:.085em;
    }
  }
  @media (max-width:380px){
    html.anim .stores .store-list, .store-list{width:calc(100% - 24px)}
    html.anim .stores .s-city, .s-city{font-size:clamp(40px,14vw,58px)}
    .s-meta .s-addr{font-size:15px}
    .s-meta{font-size:14px}
    .s-act a, .s-act .s-disabled{font-size:10px; letter-spacing:.065em}
  }

  /* ── Speisekarte: Tabs + Foto-Karten ── */
  /* padding-top seit v36 kleiner: Band + Swipe davor bringen schon Raum */
  .menu{padding:100px 0 90px; position:relative}
  /* Menü-Board-Textur: feines Punktraster (das Punkt-Motiv der Marke) + warmer
     Lichtschein — beide laufen GARANTIERT weich in Schwarz aus, lange bevor die
     Sektion endet (kein harter Cut an den Sektionsgrenzen). */
  .menu::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:radial-gradient(circle, rgba(244,241,234,.04) 1px, transparent 1.4px);
    background-size:30px 30px;
    -webkit-mask-image:radial-gradient(60% 42% at 50% 38%, #000 0%, transparent 68%);
    mask-image:radial-gradient(60% 42% at 50% 38%, #000 0%, transparent 68%);
  }
  .menu::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 40% var(--menu-glow-radius-y) at 50% var(--menu-glow-center-y), var(--menu-glow-color) 0%, rgba(255,200,2,0) 68%);
  }
  @media (max-width:720px){
    .menu{--menu-glow-center-y:230px; --menu-glow-radius-y:300px}
  }
  .menu > *{position:relative; z-index:1}
  /* ── Optionale Sektions-Hintergründe (Slots: menu-board / warum-bg / footer-vibe) —
     stark abgedunkelt, weich maskiert. Leerer Slot = unsichtbar, alles bleibt wie gehabt. ── */
  .secbg{position:absolute; inset:0; background-size:cover; background-position:center; pointer-events:none}
  .menu > .secbg{position:absolute; z-index:0}
  /* Rampen seit v36 EXTRA lang (0→45% statt 0→24%) und Deckkraft leicht
     gesenkt: die kürzere Einblende-Kante zeichnete sich auf dunklen
     Displays als sichtbarer „Strich" über der leeren Fläche ab */
  .secbg-menu{
    opacity:.065;
    -webkit-mask-image:linear-gradient(rgba(0,0,0,0) 0%, #000 45%, #000 55%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(rgba(0,0,0,0) 0%, #000 45%, #000 55%, rgba(0,0,0,0) 100%);
  }
  .secbg-warum{
    opacity:.065;
    -webkit-mask-image:linear-gradient(rgba(0,0,0,0) 0%, #000 45%, #000 55%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(rgba(0,0,0,0) 0%, #000 45%, #000 55%, rgba(0,0,0,0) 100%);
  }
  .secbg-footer{
    opacity:.065;
    -webkit-mask-image:linear-gradient(rgba(0,0,0,0) 0%, #000 55%, #000 100%);
    mask-image:linear-gradient(rgba(0,0,0,0) 0%, #000 55%, #000 100%);
  }
  .menu-note{padding:0 var(--pad); margin:-30px auto 64px; font-size:13.5px; color:var(--muted); max-width:640px; text-align:center}
  .menu-tabs{
    display:flex; justify-content:center; align-items:flex-start; gap:clamp(22px,4.5vw,58px);
    padding:0 28px; margin:10px 0 64px; flex-wrap:wrap;
  }
  .mtab{
    background:none; border:none; cursor:pointer; color:var(--muted);
    display:grid; grid-template-rows:40px auto; justify-items:center; align-items:end; row-gap:12px;
    font-family:var(--inter); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
    transition:color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); padding:4px 2px;
  }
  /* Fester Icon-Slot statt Ausrichtung an der jeweiligen SVG-Geometrie.
     Alle vier Piktogramme teilen damit exakt dieselbe optische Grundlinie. */
  .mtab-icon{width:40px; height:40px; display:grid; place-items:end center; line-height:0}
  .mtab-icon > svg{width:40px; height:40px; overflow:visible; transform-origin:50% 100%}
  .mtab-icon > svg *{fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--dur-ui) ease}
  .mtab[data-cat="beef"] .mtab-icon > svg{transform:translateY(1.5px)}
  .mtab[data-cat="chicken"] .mtab-icon > svg{transform:translateY(2.5px)}
  .mtab[data-cat="sides"] .mtab-icon > svg{transform:translateY(.5px)}
  .mtab .tlabel{position:relative; padding-bottom:8px}
  .mtab .tlabel svg{position:absolute; left:-4%; bottom:0; width:108%; height:7px}
  .mtab .tlabel svg path{stroke:var(--yellow); stroke-width:4; filter:drop-shadow(0 0 12px rgba(255,200,2,.4))} /* gleicher Glow wie alle Marker */
  .mtab .tlabel svg{opacity:0; transition:opacity var(--dur-ui) ease}
  /* Schmale Screens: kompaktere Tabs — 4 Kategorien bleiben eine Reihe,
     erst ganz klein wird sauber zentriert umbrochen */
  @media (max-width:600px){
    .menu-tabs{gap:12px 18px; row-gap:20px; padding:0 16px}
    .mtab{grid-template-rows:32px auto; font-size:11px; letter-spacing:.13em; row-gap:9px; min-width:52px} /* Tipp-Fläche auch bei kurzem Label („Beef") */
    .mtab-icon,.mtab-icon > svg{width:32px; height:32px}
  }
  .mtab:hover{color:var(--ink)}
  .mtab.active{color:var(--ink)}
  .mtab.active .mtab-icon svg *{stroke:currentColor}
  /* Idle (v34): das AKTIVE Kategorie-Icon schwebt minimal — gleiche ruhige
     bob-Sprache wie die Produkte, zeigt den Zustand ohne Farbe allein */
  .mtab.active .mtab-icon{animation:bobmini 3.4s ease-in-out infinite alternate}
  @keyframes bobmini{from{transform:translateY(-1.5px)} to{transform:translateY(1.5px)}}
  .mtab.active .tlabel svg{opacity:1}
  .mtab.active .tlabel svg path{stroke:var(--yellow)}
  .mpanel{display:none; padding:0 var(--pad)}
  .mpanel.active{display:block}
  /* Beef-Hinweis: kein Werbebalken, sondern ein ruhiger Bestandteil der Karte.
     Linien, 2x-Marker und Copy bilden eine einzige visuelle Information. */
  .double-note{
    display:flex; align-items:center; justify-content:center; gap:14px;
    width:min(100%, 760px); margin:-20px auto 50px;
    color:var(--muted);
  }
  .double-note-line{height:1px; flex:1; max-width:82px; background:var(--line)}
  .double-note-badge{
    display:grid; place-items:center; flex:0 0 38px; width:38px; aspect-ratio:1;
    border-radius:50%; background:var(--yellow); color:#090909;
    font-size:12px; font-weight:700; letter-spacing:-.04em;
    box-shadow:var(--glow);
  }
  .double-note p{display:flex; align-items:baseline; gap:9px; font-size:12px; line-height:1.4; letter-spacing:.01em}
  .double-note strong{color:var(--ink); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap}
  /* Flex statt Grid: so sitzen auch Kategorien mit 1–3 Produkten
     (Veggie, Sides) exakt in der Mitte statt links zu hängen. */
  /* Immer genau zwei Karten pro Reihe, egal wie breit der Bildschirm ist.
     Vorher brach ein Flex-Layout um — auf großen Monitoren standen vier
     nebeneinander und die Karte wirkte wie ein Katalograster. */
  .menu-grid{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    align-items:start; gap:70px 44px;
    max-width:860px; margin:0 auto;
  }
  .mcard{text-align:center; min-width:0}
  /* Ungerade Anzahl: die letzte Karte steht sonst allein links. Sie zieht sich
     über beide Spalten und setzt sich mittig — behält aber exakt die Breite
     einer Spalte, damit sie nicht größer wirkt als die anderen. */
  .menu-grid > .mcard:last-child:nth-child(odd){
    grid-column:1 / -1; justify-self:center;
    width:calc((100% - 44px) / 2);
  }
  /* Freigestelltes Produktfoto über gelbem Punkt — schwebt ganz leicht
     (gleiche ruhige Bewegung wie der fertige Scroll-Burger) */
  .pshot{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; animation:bob 4.2s ease-in-out infinite alternate}
  @keyframes bob{from{transform:translateY(-4px)}to{transform:translateY(5px)}}
  .mcard:nth-child(2n) .pshot{animation-duration:4.9s; animation-delay:-1.3s}
  .mcard:nth-child(3n) .pshot{animation-duration:4.5s; animation-delay:-2.2s}
  /* Der dunkle Kreis hinter den Produkten ist raus — die freigestellten Fotos
     stehen jetzt ohne Hintergrund. Statt der Fläche gibt es ein leichtes
     Leuchten direkt am Produkt (siehe .pshot img.cut weiter unten). */
  .pshot .dot{display:none}
  .pshot .dot--aus{
    position:absolute; width:74%; aspect-ratio:1/1; border-radius:50%;
    background:#151512;
    /* v46: der Punkt „leuchtet" beim Hover kurz auf — Glow gehört mit in
       die Transition, damit es weich an- und ausklingt statt zu schalten */
    box-shadow:0 0 0 rgba(255,200,2,0);
    transition:background .45s ease, transform .55s var(--ease-out), box-shadow .5s var(--ease-out);
  }
  /* v80: Das Foto steckt jetzt in einem <picture>, damit WebP ausgespielt
     werden kann. <picture> ist ein reiner Container — es darf am Layout
     nichts ändern, deshalb erbt es Position und Breite des Bildes. */
  .pshot picture{display:contents}
  @supports not (display:contents){
    .pshot picture{display:block; position:relative; width:100%}
  }
  .pshot img.cut{
    position:relative; width:100%; max-width:none; height:auto;
    /* Ohne den dunklen Kreis trägt jetzt ein weiches Leuchten das Produkt.
       Es sitzt am Bild selbst, nicht als Fläche dahinter — deshalb bleibt der
       freigestellte Rand sauber und es entsteht kein Kasten. */
    filter:drop-shadow(0 6px 26px rgba(255,200,2,.10));
    transition:transform .55s var(--ease-out), filter .5s var(--ease-out);
  }
  .pshot .fb{
    display:none; position:relative; flex-direction:column; align-items:center; gap:12px;
    color:#3f3f39; transition:color .45s;
  }
  .pshot .fb svg{width:62px; height:62px}
  .pshot .fb svg path{fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round; stroke-linejoin:round}
  .pshot .fb i{display:block; width:72%; max-width:150px; overflow-wrap:anywhere; font-style:normal; font-size:11px; line-height:1.28; letter-spacing:.02em; text-align:center}
  .pshot.noimg img.cut{display:none}
  .pshot.noimg .fb{display:flex}
  /* Produkt-Badge (v35): kleiner gelber Sticker — Text pro Produkt im Admin
     („Bestseller", „Neu", „Scharf" …), leer = aus. Leicht gedreht wie der
     ICONIC-Stempel, klebt am schwebenden Foto. */
  .pbadge{
    position:absolute; top:7%; right:1%; z-index:2;
    background:var(--yellow); color:#000; border-radius:var(--r-sm);
    font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    padding:6px 11px; transform:rotate(-4deg);
    box-shadow:0 6px 18px rgba(0,0,0,.35);
    transition:transform .5s var(--ease-out);
  }
  @media (max-width:560px){ .pbadge{font-size:9px; padding:5px 8px; letter-spacing:.1em} }
  @media (hover:hover) and (pointer:fine){
    .mcard:hover img.cut{
      filter:drop-shadow(0 4px 22px rgba(255,200,2,.34)) drop-shadow(0 0 64px rgba(255,200,2,.16));
    }
    .mcard:hover img.cut{transform:scale(1.05) rotate(-2.5deg)}
    /* der Sticker „setzt sich auf" beim Hover — winziger, spielerischer Pop */
    .mcard:hover .pbadge{transform:rotate(-4deg) scale(1.09)}
    .mcard:hover .fb{color:#181610}
    .mcard:hover .mname{color:var(--yellow)}
  }
  .mcard .mname{
    font-family:var(--anton); font-weight:400; text-transform:uppercase;
    font-size:clamp(22px,2.2vw,30px); line-height:1.05; margin-top:22px;
    transition:color var(--dur-ui) ease;
  }
  .mcard .mdesc{color:var(--muted); font-size:14px; margin:8px auto 0; max-width:320px}

  /* ── Scroll-Burger („Was uns iconic macht“) ── */
  .build-wrap{
    height:360vh; position:relative;
  }
  .build-stage{
    position:sticky; top:0; height:100vh;
    padding-top:var(--safe-top);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  /* Sanfter warmer Schein hinter dem Scroll-Burger — die Bühne ist sonst sehr leer */
  .build-stage::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(42% 36% at 50% 52%, rgba(255,200,2,.05) 0%, rgba(255,200,2,0) 70%);
  }
  .build-stage > *{position:relative}
  .build-stage .secbg{position:absolute; inset:0}
  /* v79: Das Sektionsbild der Burger-Bühne wird auf die Bühne geclippt.
     Mobil ist .build-stage `position:relative; overflow:visible` — dadurch
     lief die absolut positionierte Fläche zuvor bis unter Safaris Leiste
     und wurde dort als harte Kante sichtbar. */
  .build-stage{overflow:clip}
  @supports not (overflow:clip){ .build-stage{overflow:hidden} }
  /* Gemeinsamer Inhalts-Wrapper: auf Desktop verhält er sich wie der frühere
     direkte Bühneninhalt. Mobil wird ausschließlich dieser kompakte Block
     sticky — nie wieder die komplette Viewport-Fläche. */
  .build-core{position:static; display:flex; flex-direction:column; align-items:center}
  /* Der fertige Burger schwebt am Ende leicht (Wrapper, damit sich nichts beißt) */
  .build-float{position:relative; display:flex; flex-direction:column; align-items:center}
  .build-glow{
    position:absolute; left:50%; top:50%; width:540px; max-width:82vw; aspect-ratio:1/1;
    transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; opacity:0; filter:blur(6px);
    background:radial-gradient(50% 50% at 50% 50%, rgba(255,200,2,.15) 0%, rgba(255,200,2,0) 70%);
  }
  .build-svg{position:relative}
  .build-caption b i{font-style:normal; color:var(--yellow); margin-right:8px}
  .build-cta{margin-top:18px}
  html.anim .build-cta{opacity:0; transform:translateY(14px); pointer-events:none}
  html.anim .build-cta.on{pointer-events:auto}
  .build-kicker{font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
  .build-svg{width:min(64vw,370px); height:auto; overflow:visible}
  .build-svg .draw{fill:none; stroke:var(--ink); stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round}
  /* Aus dem Logo nachgezeichnete Teile: gefüllte Form mit echten Aussparungen. */
  .build-svg .logo{fill:var(--ink); stroke:none}
  /* Zusätzliche Zutaten in derselben Strichstärke wie das Logo (rund 9 Einheiten). */
  .build-svg .dick{fill:none; stroke:var(--ink); stroke-width:9; stroke-linecap:round; stroke-linejoin:round}
  .build-svg .sauce{stroke:var(--yellow)}
  /* Der Käsekeil ist als einzige Schicht gefüllt — genau wie im ICONIC-Logo.
     Als reine Kontur lasen sich die schmalen Keile nur als zwei Striche. */
  .build-svg .cheese{fill:var(--ink); stroke:none}
  .build-svg .drop{fill:none; stroke:var(--ink); stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round}
  #burst{opacity:0}
  #burst path{fill:none; stroke:var(--yellow); stroke-width:4.5; stroke-linecap:round}
  #steam{opacity:0}
  #steam path{fill:none; stroke:var(--ink); stroke-width:3.4; stroke-linecap:round}
  #stamp{opacity:0}
  #stamp text{font-family:var(--wm); font-size:21px; fill:var(--yellow)}
  .build-caption{
    /* min-height statt fixer Höhe: lange Schritte (01/03/07) wurden vorher
       abgeschnitten bzw. liefen in den CTA. Die exakte Höhe des längsten
       Schritts setzt ein kleines Script — so springt der CTA nie. */
    margin-top:26px; min-height:58px; text-align:center; max-width:560px; padding:0 20px;
    font-size:14.5px; color:var(--muted); transition:opacity .18s linear;
  }
  .build-caption b{
    display:block; margin-bottom:4px; color:var(--ink); font-weight:600;
    font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  }
  .build-hint{position:absolute; bottom:calc(24px + var(--safe-bottom)); font-size:11.5px; letter-spacing:.02em; color:#3a3a35}
  /* Handy quer (geringe Höhe): Burger & Caption kompakt, sonst schiebt sich
     die Bühne aus dem Sichtfeld */
  @media (max-height:520px){
    .build-svg{width:min(36vh,300px)}
    .build-caption{margin-top:12px; font-size:13px}
    .build-cta{margin-top:10px}
    .build-kicker{margin-bottom:6px}
    .build-hint{bottom:10px}
  }

  /* ── Statements mit Marker-Unterstreichung — auf abgedunkeltem Foto ── */
  .statements{padding:200px var(--pad) 200px; text-align:center; position:relative; overflow:hidden; margin-top:60px}
  .statements .sbg{
    position:absolute; inset:0; background-size:cover; background-position:center;
    opacity:.14;
  }
  .statements .sbg::after{
    content:""; position:absolute; inset:0;
    /* Gerader Kino-Verlauf statt ovaler Maske (die zeichnete sich mit echtem
       Foto als Ei-Form ab): volle Breite, läuft oben & unten weich in Schwarz aus */
    background:linear-gradient(var(--bg) 0%, rgba(10,10,10,.4) 20%, rgba(10,10,10,.3) 50%, rgba(10,10,10,.4) 80%, var(--bg) 100%);
  }
  .statements .sglow{
    position:absolute; inset:-10% 0; pointer-events:none; opacity:0;
    /* größer & schwächer — Licht ohne erkennbare Form */
    background:radial-gradient(85% 70% at 50% 45%, rgba(255,200,2,.05) 0%, rgba(255,200,2,0) 75%);
  }
  .statements > .statement{position:relative}
  .statement{margin-bottom:120px}
  .statement:last-child{margin-bottom:0}
  /* Gelber Marken-Block (v37): jedes ZWEITE Statement flippt auf Gelb —
     gleiche Karten-Sprache wie Band & Franchise, Typo invertiert. DER eine
     Farb-Moment im dunklen Flow (Henks Wunsch „ein Abschnitt gelb"). */
  .statement-gelb{
    background:var(--yellow); color:#0a0a0a; border-radius:var(--r-lg);
    max-width:1240px; margin-left:auto; margin-right:auto;
    padding:clamp(48px,6vw,92px) clamp(24px,4.5vw,72px);
    box-shadow:0 30px 90px rgba(255,200,2,.14);
  }
  /* doppelte Klasse = höhere Spezifität als die späteren .statement-Basis-
     Regeln (sonst bleibt der Text hell auf Gelb — unlesbar) */
  .statement.statement-gelb p{color:rgba(10,10,10,.72)}
  .statement.statement-gelb p b{color:#000}
  /* Marker auf Gelb: SCHWARZ und ohne Glow — Gelb-Glow auf Gelb wäre Matsch */
  .statement.statement-gelb .markwrap path{stroke:#0a0a0a; filter:none}
  .statement .big{
    font-family:var(--anton); font-weight:400; text-transform:uppercase;
    font-size:clamp(34px,6.2vw,96px); line-height:1.08;
  }
  /* Zeilen-Masken für Statement-Reveal (JS teilt an <br>) — gleiche
     Steig-Geste wie Hero & Sektionstitel. padding-bottom + negative margin:
     die Maske reicht tiefer, damit Marker & Unterlängen NICHT clippen
     (Regel: nichts Leuchtendes an Maskenkanten abschneiden). */
  .rline{display:block; overflow:hidden; padding:0 .08em .5em; margin-bottom:-.5em}
  .rline-in{display:block}
  /* Nach dem Reveal wird die Maske GEÖFFNET (JS setzt .open) — der Marker-
     Glow kann dann unmöglich an einer Clip-Kante enden (v35-Fix, Henks
     Live-Screenshot: Glow war unter „Schnelles"/„Benefits" abgeschnitten) */
  .rline.open{overflow:visible}
  .markwrap{position:relative; display:inline-block; padding:0 .06em}
  .markwrap svg{position:absolute; left:0; right:0; bottom:-.13em; width:100%; height:.26em; overflow:visible}
  .markwrap path{fill:none; stroke:var(--yellow); stroke-width:7; stroke-linecap:round; filter:drop-shadow(0 0 12px rgba(255,200,2,.4))}
  .statement p{max-width:520px; margin:22px auto 0; color:var(--muted); font-size:15.5px}
  .statement p b{color:var(--ink); font-weight:600}

  /* ── Marker-Swipe (Sektions-Übergang, bewegt sich beim Scrollen) ──
     Das SVG ragt für die Schmier-Bewegung ±7% über den Rand — der .sclip-
     Kasten schneidet das seitlich in JEDEM Browser ab (auch alte iOS ohne
     overflow:clip), lässt dem Glow aber oben/unten 45px Luft (v30). */
  /* ══ v80.1 — Marker-Swipe: echter Glow, kein schwarzer Kasten ══
     Ausführliche Begründung steht bei der swipe()-Funktion in index.php.
     Kurz: KEIN CSS-`filter` auf dem <svg> (das erzeugt in WebKit die
     schwarze Compositor-Fläche), stattdessen ein SVG-eigener
     feGaussianBlur auf zwei Kopien des Pfades. Ergebnis ist ein weicher
     Lichtschein statt harter Konturlinien.

     Wichtig für spätere Änderungen: hier NIE wieder `filter:` auf
     `.swipe svg` oder `.swipe-move` setzen — genau das war der Bug. */
  .swipe{height:clamp(64px,8.5vw,124px); margin:150px 0; position:relative}
  /* v80.2: Dieser Kasten hat den Schein früher bei 60 px hart abgeschnitten
     — sichtbar als gerade Kante ober- und unterhalb des Streifens. Er
     klemmt jetzt nichts mehr ab. Das seitliche Überstehen des SVG (114 %
     Breite für die Schmier-Bewegung) fängt bereits `overflow-x:clip` auf
     html/body ab, dafür braucht es hier keinen zweiten Beschnitt. */
  .swipe .sclip{position:absolute; inset:0; overflow:visible}
  .swipe svg{
    position:absolute; left:-7%; top:0; width:114%; height:100%;
    display:block; overflow:visible; filter:none;
  }
  .swipe .swipe-fill{fill:var(--yellow)}
  /* Zwei Schein-Ebenen: eng und hell für den heißen Kern, weit und
     leise für das Abstrahlen in den dunklen Hintergrund. */
  .swipe .swipe-glow-nah{fill:var(--yellow); opacity:.45}
  .swipe .swipe-glow-weit{fill:var(--yellow); opacity:.20}

  @media (max-width:720px){
    /* Mobil ist der Streifen flacher — der weite Schein würde sonst
       zu viel vom Bildschirm einfärben. */
    .swipe .swipe-glow-nah{opacity:.38}
    .swipe .swipe-glow-weit{opacity:.14}
  }
  @media (prefers-reduced-motion: reduce){
    .swipe .swipe-move{transform:none !important}
  }

  /* ── Franchise ── */
  .franchise{
    width:calc(100% - 2*var(--pad)); max-width:var(--content-max); margin:60px auto 0;
    border:1px solid var(--line); border-radius:var(--r-lg);
    padding:clamp(48px,6vw,88px) clamp(16px,4.5vw,64px); position:relative; overflow:hidden;
  }
  .franchise .frbg{position:absolute; inset:-7% 0; background-size:cover; background-position:center; opacity:.11; will-change:transform}
  .franchise .frbg::after{content:""; position:absolute; inset:0; background:linear-gradient(rgba(10,10,10,.38), rgba(10,10,10,.96))}
  .franchise > *:not(.frbg){position:relative}
  .franchise > h2{overflow:hidden; text-align:center}
  html.anim .franchise > h2 .ttl{transform:translateY(118%)}
  .franchise .kicker{display:block; margin-bottom:18px; text-align:center}
  .franchise > h2{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:clamp(40px,7vw,104px); line-height:.95}
  .franchise > h2 em{font-style:normal; color:var(--yellow)}
  .franchise > p{max-width:640px; margin:24px auto clamp(38px,5vw,64px); color:var(--muted); text-align:center}

  /* Eigenständiger One-question-at-a-time-Flow: Typeform-Prinzip, aber als
     ruhige ICONIC-Karte mit derselben Motion- und Radius-Sprache wie die Seite. */
  .fr-flow-card{
    width:min(1080px,100%); min-height:620px; margin:0 auto;
    position:relative; display:flex; flex-direction:column;
    background:rgba(13,13,12,.88); border:1px solid var(--border-soft); border-radius:var(--r-lg);
    box-shadow:0 32px 100px rgba(0,0,0,.32); overflow:hidden;
  }
  .fr-flow-card [hidden]{display:none!important}
  .fr-flow-card::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(58% 70% at 82% 15%, rgba(255,200,2,.055), rgba(255,200,2,0) 72%);
  }
  .fr-flow-head{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:24px 30px 14px; color:var(--muted); font-size:11px; letter-spacing:.18em; text-transform:uppercase}
  .fr-flow-head b{font-weight:500; color:var(--ink); letter-spacing:.08em}.fr-flow-head b i{font-style:normal}
  .fr-progress{position:relative; z-index:2; height:2px; margin:0 30px; background:var(--line); overflow:hidden}
  .fr-progress i{display:block; width:12.5%; height:100%; background:var(--yellow); box-shadow:0 0 14px rgba(255,200,2,.5); transform-origin:left center; transition:width var(--dur-ui) var(--ease-smooth)}
  .fr-form{position:relative; z-index:1; flex:1; display:flex; flex-direction:column; min-height:0}
  .fr-start,.fr-result,.fr-step{width:min(760px,calc(100% - 60px)); margin:auto; padding:62px 0; border:0; min-width:0}
  .fr-start,.fr-result{text-align:center}
  .fr-eyebrow{font-size:11px!important; line-height:1.4; letter-spacing:.24em; text-transform:uppercase; color:var(--yellow)!important; margin:0 0 18px!important}
  .fr-start h3,.fr-result h3{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:clamp(42px,6vw,78px); line-height:.98; max-width:720px; margin:0 auto}
  .fr-start > p:not(.fr-eyebrow),.fr-result > p:not(.fr-eyebrow){max-width:540px; color:var(--muted); margin:20px auto 28px; font-size:15px}
  .fr-start .btn-solid,.fr-result .btn-solid{display:inline-flex; align-items:center; gap:18px}
  .fr-start .btn-solid span,.fr-next span,.fr-submit span{transition:transform var(--dur-ui) var(--ease-out)}
  .fr-start .btn-solid:hover span,.fr-next:hover span,.fr-submit:hover span{transform:translateX(4px)}
  .fr-orbit{position:relative; display:grid; place-items:center; width:108px; aspect-ratio:1; margin:0 auto 26px}
  .fr-orbit::before{content:""; position:absolute; inset:0; border:1px solid rgba(255,200,2,.45); border-radius:50%; box-shadow:inset 0 0 30px rgba(255,200,2,.04),0 0 30px rgba(255,200,2,.06)}
  .fr-orbit i{position:absolute; width:10px; aspect-ratio:1; border-radius:50%; background:var(--yellow); box-shadow:0 0 18px rgba(255,200,2,.65); animation:frorbit 7s linear infinite}
  /* Ortungssignal statt der Zahl: ein Punkt, aus dem Ringe herauspoppen —
     wie eine GPS-Ortung. Passt zum Franchise-Einstieg, da geht es um den Ort,
     an dem eröffnet wird. */
  .fr-ping{position:relative; display:grid; place-items:center; width:58px; height:58px}
  .fr-ping b{
    width:13px; height:13px; border-radius:50%; background:var(--ink);
    box-shadow:0 0 14px rgba(244,241,234,.45);
  }
  .fr-ping u{
    position:absolute; width:15px; height:15px; border-radius:50%;
    border:2px solid var(--ink); opacity:0;
    animation:frping 2.8s cubic-bezier(.16,.7,.3,1) infinite;
  }
  .fr-ping u:nth-of-type(2){animation-delay:.93s}
  .fr-ping u:nth-of-type(3){animation-delay:1.86s}
  @keyframes frping{
    0%{transform:scale(.55); opacity:0}
    12%{opacity:.8}
    70%{opacity:.14}
    100%{transform:scale(3.8); opacity:0}
  }
  @media (prefers-reduced-motion: reduce){
    .fr-ping u{animation:none; opacity:.35; transform:scale(2.2)}
    .fr-ping u:nth-of-type(3){display:none}
  }
  @keyframes frorbit{from{transform:rotate(0deg) translateX(54px) rotate(0deg)}to{transform:rotate(360deg) translateX(54px) rotate(-360deg)}}
  .fr-result-icon{display:grid; place-items:center; width:76px; aspect-ratio:1; margin:0 auto 26px; border-radius:50%; background:var(--yellow); color:#000; font-size:28px; box-shadow:var(--glow)}

  .fr-step legend{display:flex; align-items:flex-start; gap:16px; width:100%; font-family:var(--anton); font-size:clamp(30px,4.4vw,54px); line-height:1.08; text-transform:uppercase; color:var(--ink)}
  .fr-step legend > span{flex:none; margin-top:.42em; width:26px; height:26px; display:grid; place-items:center; border-radius:7px; background:var(--yellow); color:#000; font-family:var(--inter); font-size:10px; font-weight:700; letter-spacing:.05em}
  .fr-choices{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:34px 0 0 42px}.fr-choices-short{max-width:600px}
  .fr-choice{position:relative; min-height:58px; display:flex; align-items:center; gap:13px; padding:13px 48px 13px 14px; margin:0; border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(244,241,234,.025); color:var(--ink); cursor:pointer; text-transform:none; letter-spacing:0; font-size:15px; transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) ease,background var(--dur-ui) ease,box-shadow var(--dur-ui) var(--ease-out)}
  .fr-choice:hover{transform:translateY(-2px); border-color:rgba(255,200,2,.45); background:rgba(255,200,2,.045)}
  .fr-choice input{position:absolute; opacity:0; pointer-events:none}
  .fr-choice > i{display:grid; place-items:center; flex:none; width:28px; height:28px; border:1px solid rgba(255,200,2,.35); border-radius:7px; color:var(--yellow); font-style:normal; font-size:11px; font-weight:700}
  .fr-choice > b{position:absolute; right:17px; opacity:0; transform:scale(.5); color:#000; font-size:13px; transition:opacity .2s ease,transform .35s var(--ease-out)}
  .fr-choice:has(input:checked){border-color:var(--yellow); background:var(--yellow); color:#000; box-shadow:var(--glow); transform:translateY(-2px)}
  .fr-choice:has(input:checked) > i{border-color:rgba(0,0,0,.22); color:#000}.fr-choice:has(input:checked) > b{opacity:1; transform:scale(1)}
  .fr-choice:has(input:focus-visible){outline:2px solid var(--yellow); outline-offset:3px}
  .fr-line-field{margin:34px 0 0 42px}.fr-line-field label{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
  .fr-line-field input,.fr-line-field textarea{
    width:100%; background:transparent; border:0; border-bottom:1px solid #34342f; border-radius:0; color:var(--ink); outline:none;
    font-family:var(--inter); font-size:clamp(20px,3vw,30px); line-height:1.35; padding:10px 2px 13px;
    transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease;
  }
  .fr-line-field input:focus,.fr-line-field textarea:focus{border-color:var(--yellow); box-shadow:0 1px 0 var(--yellow)}
  .fr-line-field input::placeholder,.fr-line-field textarea::placeholder{color:#484842}
  .fr-line-field textarea{min-height:150px; resize:vertical; font-size:20px}
  .fr-contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:4px 26px; margin-top:18px}.fr-contact-grid .fr-line-field{margin:10px 0 0 42px}.fr-contact-grid .fr-line-field:nth-child(even){margin-left:0}.fr-contact-grid .fr-wide{grid-column:1/-1; margin-right:0}
  .fr-contact-grid .fr-line-field input{font-size:18px}
  .fr-contact-step .consent{margin:24px 0 0 42px; max-width:680px}
  .consent{display:flex; gap:12px; align-items:flex-start; font-size:13px; color:var(--muted); line-height:1.6; text-transform:none; letter-spacing:0}
  .consent input{margin-top:3px; accent-color:var(--yellow); width:18px; height:18px; flex:none}
  .consent a{text-decoration:underline; text-underline-offset:2px; padding:2px 0}
  .fr-error{min-height:22px; margin:12px 0 0 42px; color:#e9a69d; font-size:13px}
  .fr-nav{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:18px 30px 28px; margin-top:auto}
  .fr-back{border:0; background:transparent; color:var(--muted); min-height:48px; padding:10px 6px; display:inline-flex; align-items:center; gap:10px; font:600 11px/1 var(--inter); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out)}
  .fr-back:hover{color:var(--ink); transform:translateX(-3px)}
  .fr-next,.fr-submit{display:inline-flex; align-items:center; gap:18px; min-height:48px; padding:14px 22px}
  .fr-next[hidden],.fr-submit[hidden]{display:none}
  .fr-noscript{padding:20px 30px; color:#e9a69d; text-align:center}
  /* Unsichtbares Honeypot-Feld ohne den früheren -9999px-Versatz. Dieser
     Versatz lag zwar links, konnte WebKit aber trotzdem in die berechnete
     Scrollfläche aufnehmen. */
  .hp{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; opacity:0}
  .form-msg{display:none; margin:20px 30px 0; padding:13px 16px; font-size:14px; border:1px solid var(--line); border-radius:var(--r-sm)}
  .form-msg.ok{display:block; border-color:rgba(255,200,2,.5); color:var(--ink)}
  .form-msg.err:not(:empty){display:block; border-color:#7a3b32; color:#e9a69d}

  .fr-faq{width:min(1080px,100%); margin:clamp(50px,6vw,78px) auto 0}.fr-faq > h3{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:18px}
  .fr-faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 44px}
  .fr-faq details{border-top:1px solid var(--line); padding:9px 0}.fr-faq details:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .fr-faq summary{
    font-size:14.5px; font-weight:600; cursor:pointer; list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    min-height:48px;
    transition:color var(--dur-ui) ease;
  }
  .fr-faq summary::-webkit-details-marker{display:none}.fr-faq summary::after{content:"+"; font-family:var(--anton); color:var(--yellow); font-size:20px; line-height:1; transition:transform var(--dur-ui) var(--ease-out)}
  .fr-faq details[open] summary::after{content:"–"}.fr-faq summary:hover{color:var(--yellow)}.fr-faq details p{margin:8px 0 12px; color:var(--muted); font-size:14px; max-width:560px}

  @media (max-width:780px){
    .franchise{width:calc(100% - 24px); padding:42px 12px 52px}
    .fr-flow-card{min-height:590px}.fr-start,.fr-result,.fr-step{width:calc(100% - 36px); padding:44px 0}
    .fr-flow-head{padding:20px 18px 12px}.fr-progress{margin:0 18px}
    .fr-choices{grid-template-columns:1fr; margin:28px 0 0 0}.fr-choice{min-height:56px}
    .fr-line-field,.fr-contact-grid .fr-line-field,.fr-contact-grid .fr-line-field:nth-child(even){margin:28px 0 0}
    .fr-contact-grid{grid-template-columns:1fr; gap:0}.fr-contact-grid .fr-wide{grid-column:auto}
    .fr-contact-step .consent,.fr-error{margin-left:0}
    .fr-nav{padding:16px 18px 20px}.fr-faq-grid{grid-template-columns:1fr; gap:0}.fr-faq details:nth-last-child(-n+2){border-bottom:0}.fr-faq details:last-child{border-bottom:1px solid var(--line)}
  }
  @media (max-width:420px){
    .franchise{border-radius:20px}.fr-flow-card{min-height:560px;border-radius:16px}.fr-start h3,.fr-result h3{font-size:38px}.fr-start,.fr-result,.fr-step{width:calc(100% - 28px);padding:34px 0}
    .fr-step legend{font-size:28px;gap:10px}.fr-step legend > span{width:23px;height:23px;font-size:9px}
    .fr-choice{padding:12px 42px 12px 11px;font-size:14px}.fr-choice > i{width:26px;height:26px}.fr-nav{gap:8px}.fr-next,.fr-submit{padding:13px 16px}.fr-back{font-size:10px}
    .fr-contact-grid .fr-line-field input{font-size:16px}.fr-line-field input,.fr-line-field textarea{font-size:18px}.form-msg{margin:14px 14px 0}
  }

  /* ── Footer ── */
  footer{margin-top:150px; border-top:1px solid var(--line); padding:90px var(--pad) calc(100px + var(--safe-bottom)); position:relative; overflow:hidden}
  /* Warmer Boden-Glow wie im Hero — die Seite endet, wie sie beginnt (Bookend) */
  footer::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(95% 75% at 50% 120%, #241a06 0%, rgba(36,26,6,.5) 32%, rgba(36,26,6,0) 62%);
    /* Idle (v34): gleiche atmende Glut wie im Hero — hier über Opacity
       (kein Scroll-Fade im Spiel), etwas langsamer versetzt */
    animation:glutop 11s ease-in-out -4s infinite alternate;
  }
  @keyframes glutop{from{opacity:1} to{opacity:.78}}
  footer > *{position:relative}
  .foot-quote{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:clamp(26px,4.2vw,72px); line-height:1.05; max-width:1240px; margin:0 auto; text-align:center}
  .foot-quote .fdot{color:var(--yellow); text-shadow:0 0 26px rgba(255,200,2,.5)} /* NUR der Punkt — Zeilen-Wrapper (JS) sind auch spans */
  .foot-grid{display:flex; justify-content:center; align-items:center; gap:26px 44px; flex-wrap:wrap; margin-top:60px; font-size:13px; color:var(--muted)}
  /* Copyright bekommt dasselbe Innen-Padding wie die Links — sonst sitzt
     der Text sichtbar höher als die Zeile (v35-Fix, Henks Screenshot) */
  .foot-grid .col span{padding:10px 2px}
  /* Gleiche Hover-Geste wie nav / link-arrow / maplink: gelbe Linie wächst von links */
  .foot-grid a{position:relative; padding:10px 2px; transition:color var(--dur-ui) ease} /* Tipp-Fläche statt 24px-Zeile */
  .foot-grid a::after{
    content:""; position:absolute; left:0; bottom:5px; height:1px; width:100%;
    background:var(--yellow); transform:scaleX(0); transform-origin:right; transition:transform var(--dur-ui) var(--ease-draw);
  }
  .foot-grid a:hover{color:var(--ink)}
  .foot-grid a:hover::after{transform:scaleX(1); transform-origin:left}
  .foot-grid .col{display:flex; gap:22px; flex-wrap:wrap; align-items:center; justify-content:center}

  /* ── Bestell-Overlay ── */
  .overlay{position:fixed; inset:0; z-index:90; visibility:hidden}
  .overlay.open{visibility:visible}
  .overlay-bg{position:absolute; inset:0; background:rgba(5,5,5,.55); backdrop-filter:blur(4px); opacity:0; transition:opacity .35s}
  .overlay.open .overlay-bg{opacity:1}
  .panel{
    position:absolute; top:0; right:0; height:100%; width:min(460px,100%);
    background:var(--bg2); border-left:1px solid var(--line); border-radius:20px 0 0 20px;
    transform:translate3d(102%,0,0); transition:transform .5s var(--ease-smooth);
    padding:30px 30px calc(40px + env(safe-area-inset-bottom, 0px)); overflow-y:auto;
  }
  /* Volle Breite = keine Rundung: die linke Rundungs-Kante hing sonst sichtbar
     mitten am Screen-Rand */
  @media (max-width:480px){ .panel{border-radius:0; border-left:none; padding:24px 22px calc(36px + env(safe-area-inset-bottom, 0px))} }
  .overlay.open .panel{transform:translate3d(0,0,0)}
  .panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
  .panel-head h2{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:34px}
  .panel-close{background:none; border:none; color:var(--muted); font-size:28px; cursor:pointer; line-height:1; width:46px; height:46px; margin-right:-10px; display:grid; place-items:center; transition:color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out)}
  .panel-close:hover{color:var(--ink); transform:rotate(5deg) scale(1.04)}
  .panel-sub{font-size:13.5px; color:var(--muted); margin-bottom:26px}
  .p-city{border-top:1px solid var(--line); padding:20px 0}
  .p-city:last-child{border-bottom:1px solid var(--line)}
  .p-city h3{font-family:var(--anton); font-weight:400; font-size:22px; text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px}
  .p-city .addr{font-size:13.5px; color:var(--muted); margin-bottom:6px}
  .p-city .live{margin:0 0 14px; display:inline-flex}
  .p-city .live:empty{display:none; margin:0}
  .p-links{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
  .p-links a, .p-links span{
    font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 18px; /* --r-sm = Radius ALLER Buttons */
  }
  /* Klickbar = gelb umrandet, „folgt" = flache Fläche ohne Rand — der Daumen
     sieht sofort, wo es wirklich zum Bestellen geht */
  .p-links a{transition:background var(--dur-ui) var(--ease-out), border-color var(--dur-ui) ease, color var(--dur-ui) ease; color:var(--ink); border-color:rgba(255,200,2,.5)}
  .p-links a:hover{background:var(--yellow); border-color:var(--yellow); color:#000}
  .p-links span{color:var(--faint); border-color:transparent; background:rgba(244,241,234,.04)}
  .panel-note{margin-top:24px; font-size:12px; color:var(--faint); line-height:1.7}

  /* v80 — Bestell-Fenster: der angeklickte Store wird hervorgehoben, damit
     man im Panel nicht nochmal suchen muss, was man gerade gewählt hat. */
  .p-city{position:relative; transition:opacity var(--dur-ui) ease}
  .p-city::before{
    content:""; position:absolute; left:-18px; top:20px; bottom:20px; width:2px;
    background:var(--yellow); border-radius:1px;
    transform:scaleY(0); transform-origin:top;
    transition:transform .45s var(--ease-out);
  }
  .p-city.focus::before{transform:scaleY(1)}
  /* Standorte ohne Bestellweg treten optisch zurück, statt mit grauen
     „folgt"-Kacheln zuzupflastern */
  .p-city.p-soon h3, .p-city.p-soon .addr{opacity:.55}
  .p-note{margin-top:10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}

  .p-links .p-pickup{font-weight:700; background:rgba(255,200,2,.08)}
  /* Dieselben Markenfarben wie in der Store-Liste — der Nutzer soll im
     Bestell-Fenster dieselbe Sprache wiederfinden. */
  .p-links .p-wolt:hover, .p-links .p-wolt:focus-visible{
    background:var(--wolt); border-color:var(--wolt); color:#041014;
    box-shadow:0 0 24px rgba(0,157,224,.32);
  }
  .p-links .p-uber:hover, .p-links .p-uber:focus-visible{
    background:var(--uber); border-color:var(--uber); color:#03130a;
    box-shadow:0 0 24px rgba(6,193,103,.30);
  }
  .p-links .p-lieferando:hover, .p-links .p-lieferando:focus-visible{
    background:var(--lieferando); border-color:var(--lieferando); color:#1a0c00;
    box-shadow:0 0 24px rgba(255,128,0,.34);
  }
  /* Telefon: dreht auf Weiß/Schwarz um, mit durchlaufendem Glanz */
  .p-links .p-call{position:relative; overflow:hidden; border-color:rgba(244,241,234,.85)}
  .p-links .p-call::after{
    content:""; position:absolute; top:0; bottom:0; width:45%;
    left:-60%; transform:skewX(-18deg); pointer-events:none;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
    transition:left .55s var(--ease-out);
  }
  .p-links .p-call:hover, .p-links .p-call:focus-visible{
    background:var(--ink); border-color:var(--ink); color:#0a0a0a;
    box-shadow:0 0 24px rgba(244,241,234,.26);
  }
  .p-links .p-call:hover::after, .p-links .p-call:focus-visible::after{left:120%}
  /* Touch: gleiche Farbe beim Antippen */
  @media (hover:none){
    .p-links .p-wolt:active{background:var(--wolt); border-color:var(--wolt); color:#041014}
    .p-links .p-uber:active{background:var(--uber); border-color:var(--uber); color:#03130a}
    .p-links .p-lieferando:active{background:var(--lieferando); border-color:var(--lieferando); color:#1a0c00}
    .p-links .p-call:active{background:var(--ink); border-color:var(--ink); color:#0a0a0a}
  }
  .panel-foot{
    margin-top:28px; padding-top:20px; border-top:1px solid var(--line);
    font-size:12.5px; color:var(--muted); line-height:1.7;
  }
  /* Weißer Rahmen: mit dem alten 22-Prozent-Grau sah Telefon aus wie
     deaktiviert, obwohl es der direkteste Bestellweg ist. */
  .s-act .s-call{border-color:rgba(244,241,234,.85); color:var(--ink)}

  /* ── Kompaktere Abstände auf kleinen Screens ──
     Der großzügige Desktop-Rhythmus wird mobil zu langen Leerstrecken:
     alles rückt spürbar zusammen, ohne die Luftigkeit zu verlieren (v30) */
  @media (max-width:720px){
    .band{padding:84px 0 0}
    .band .band-card{height:clamp(300px, 52vh, 460px)}
    .menu{padding:96px 0 60px}
    .statements{padding:104px var(--pad) 104px; margin-top:36px}
    .statement{margin-bottom:72px}
    .swipe{margin:72px 0}
    footer{margin-top:84px; padding:60px var(--pad) calc(68px + var(--safe-bottom))}
    .hero-foot{margin-top:40px}
    .sec-title{margin-bottom:40px}
    .menu-grid{gap:48px 30px}
    .menu-grid > .mcard:last-child:nth-child(odd){width:calc((100% - 30px) / 2)}
    .stores{padding:10px 0 54px}
    .store{padding:20px var(--pad)}
    .franchise{margin:40px auto 0}
    .menu-note{margin:-24px auto 48px}
  }

  /* Mobile/Tablet: Nur der kompakte Burger-Inhalt bleibt nativ sticky. Dadurch
     hält Safari ihn in seinem asynchronen Scrollpfad ohne JS-Nachlauf und ohne
     Zittern exakt fest. Die umgebende Bühne bleibt normaler Dokumentinhalt. */
  @media (max-width:1024px){
    .build-wrap{height:330svh; position:relative}
    .build-stage{
      position:relative; top:auto; height:100%; padding:0;
      display:block;
      /* v79: war `overflow:visible` — dadurch ragte die Bühnenfläche unter
         die Safari-Leiste. `clip` schneidet nur, ohne einen Scroll-Container
         oder einen neuen Compositor-Layer zu erzeugen (im Gegensatz zu
         `hidden`, das sticky-Kinder brechen würde). */
      overflow:clip;
    }
    @supports not (overflow:clip){ .build-stage{overflow:visible} }
    .build-stage::before{display:none}
    .build-core{
      position:sticky;
      top:max(calc(var(--safe-top) + 8px), calc(50svh - 238px));
      width:100%; min-height:476px; padding:16px var(--pad);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      /* v79 KERN-FIX: KEIN z-index und KEIN eigener Compositor-Layer.
         Ein sticky Element mit z-index erzeugt in WebKit einen eigenen
         Stacking- und Compositing-Kontext. Safari rasterte diesen Layer
         gegen die Fläche der Bedienleiste — daher der schwarze Balken
         AB genau diesem Abschnitt. Ohne z-index/isolation malt Safari den
         Burger in denselben Layer wie den Rest der Seite. */
      z-index:auto; isolation:auto;
      background:transparent;
      /* Kein will-change / kein 3D-Transform: beides würde den Layer
         wieder erzwingen. */
      will-change:auto; transform:none; backface-visibility:visible;
      contain:none;
    }
    .build-core::before{
      content:""; position:absolute; inset:-8% 0; pointer-events:none;
      background:radial-gradient(42% 36% at 50% 52%, rgba(255,200,2,.05) 0%, rgba(255,200,2,0) 70%);
    }
    .build-core > *{position:relative}
    .build-hint{position:static; margin-top:18px}
    .build-svg{width:min(76vw,340px)}
  }

  /* Handy: zwei Karten nebeneinander (Speisekarten-Standard) — halbiert die
     Scroll-Strecke der Karte. WICHTIG: Dieser Block steht bewusst NACH dem
     720er-Spacing-Block, sonst überschreibt dessen größere Spalten-gap die
     50%-Rechnung und die Karten stapeln schmal untereinander. */
  @media (max-width:560px){
    .double-note{gap:10px; margin:-12px auto 38px}
    .double-note-line{max-width:22px}
    .double-note-badge{flex-basis:34px; width:34px; font-size:11px}
    .double-note p{display:block; font-size:11.5px; line-height:1.45}
    .double-note strong{display:block; margin-bottom:2px; font-size:10px}
    .menu-grid{gap:36px 16px}
    .mcard{min-width:0}
    .mcard .mname{font-size:18px; margin-top:12px}
    .mcard .mdesc{font-size:13px; margin-top:5px}
    .pshot .fb svg{width:44px; height:44px}
    .pshot .fb i{font-size:10.5px}
  }

  /* Touch-Motion-Diät: Die komponierten Reveal-Sequenzen bleiben erhalten.
     Nur dauerhafte Dekorationen ohne Informationswert werden pausiert, damit
     die Seite auf 375px-Geräten ruhig und flüssig bleibt. */
  @media (hover:none), (pointer:coarse){
    .btn-solid::after, .band-card::after{display:none}
    .mtab.active .mtab-icon, .sec-title .dot.idle{animation:none}
    .h-main .ch{will-change:auto}
    /* Früher wurde auf Touch jede Karte im mittleren Sichtbereich automatisch
       gelb (touch-live). Auf 375px stehen aber ZWEI Spalten nebeneinander —
       es leuchteten also mehrere Kreise gleichzeitig, während am Desktop
       immer nur genau einer aktiv ist. Sah unruhig aus. Jetzt bleibt die
       Karte in Ruhe wie am Desktop; Gelb kommt nur beim echten Antippen. */
    .mcard:active .pshot img.cut{
      filter:drop-shadow(0 4px 22px rgba(255,200,2,.34)) drop-shadow(0 0 64px rgba(255,200,2,.16));
    }
    .mcard:active .mname{color:var(--yellow)}
    .mcard:active .fb{color:#181610}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    html.anim .hline > span{transform:none}
    html.anim .s-line > span{transform:none}
    html.anim .h-top .rule{transform:none}
    .build-wrap{height:auto}
    .build-stage{position:relative; min-height:0}
    .build-core{position:relative; top:auto}
    .progress{display:none}
    *{transition:none !important; animation:none !important}
  }