/* ============================================================
   SMASHED KÖFTE — Sektionen (Akt 1–5 + Footer)
   ============================================================ */

/* Anker-Sprünge landen nie unter der fixed Nav */
[id] { scroll-margin-top: calc(var(--nav-h-scroll) + 16px); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Film-Korn — korrekt encodiertes Data-URI (das alte war ungültig
   und lud nie); animiert nur auf Desktop, statisch auf Touch. */
.grain {
  position: absolute;
  inset: -40%;
  z-index: 3;
  pointer-events: none;
  opacity: .1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, -2%); }
  50% { transform: translate(2%, 3%); }
  75% { transform: translate(3%, -3%); }
  100% { transform: translate(0, 0); }
}
@media (hover: hover) and (min-width: 900px) {
  .grain { animation: grain-shift 1.2s steps(3) infinite; }
}

/* ============================================================
   AKT 1 — HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-block: calc(var(--nav-h) + 8px) 120px;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Die neutralen Grautöne sind gegenüber dem vorherigen Stand um rund 40 %
     zurückgenommen. So bleibt die Fläche tiefschwarz und der warme Grill-
     Schein trägt die Atmosphäre, nicht ein milchiger Hintergrund. */
  background: radial-gradient(125% 95% at 50% 115%, #181817 0%, #111110 45%, var(--ink) 82%);
}

/* Auch das helle Korn im Hero wird proportional ruhiger; in den übrigen
   Sections behält die Textur ihre bisherige Stärke. */
.hero > .grain { opacity: .06; }

.hero__glow {
  position: absolute;
  left: 50%; top: 42%;
  z-index: 2;
  width: min(108vw, 1080px);
  height: min(68vw, 700px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Warme Glut hinter dem Logo statt kühlem Bone-Schein: liest sich als
     Grill-Hitze/Appetit — Atmosphäre, kein Farb-Akzent auf der Wortmarke. */
  background: radial-gradient(ellipse 58% 52% at 50% 50%,
    rgba(255, 77, 20, .25) 0%,
    rgba(255, 116, 46, .1) 36%,
    rgba(242, 239, 233, .021) 58%,
    transparent 76%);
  filter: blur(19px);
  pointer-events: none;
}

/* Industrial Framing: vertikale Text-Rails + Hairlines links/rechts —
   Blueprint-/Magazin-Charakter für den sonst leeren Rand. Nur Desktop:
   auf schmalen Viewports kollidieren die Rails mit dem zentrierten Content. */
.hero__rail {
  display: none;
}
@media (min-width: 900px) {
  .hero__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: absolute;
    top: calc(var(--nav-h) + 40px);
    bottom: 110px;
    z-index: 4;
    width: 20px;
    pointer-events: none;
  }
  .hero__rail--left { left: clamp(18px, 3vw, 44px); }
  .hero__rail--right { right: clamp(18px, 3vw, 44px); }

  /* Vertikale Fade-Linie (Hintergrundlayer 2) + Quermarker am Außenende
     (Layer 1, 9px breiter Steg) — der Blueprint-„Tick", ohne Extra-Markup */
  .hero__rail::before,
  .hero__rail::after {
    content: '';
    width: 9px;
    flex: 1 1 auto;
    background-repeat: no-repeat;
    background-size: 9px 1px, 1px 100%;
  }
  .hero__rail::before {
    background-image:
      linear-gradient(var(--bone-45), var(--bone-45)),
      linear-gradient(to bottom, transparent, var(--line-strong) 30%, var(--line-strong) 100%);
    background-position: top center, center;
  }
  .hero__rail::after {
    background-image:
      linear-gradient(var(--bone-45), var(--bone-45)),
      linear-gradient(to top, transparent, var(--line-strong) 30%, var(--line-strong) 100%);
    background-position: bottom center, center;
  }
  .hero__rail span {
    flex: 0 0 auto;
    writing-mode: vertical-rl;
    font-size: 10px;
    font-weight: 600;
    /* engeres Tracking + mehr Höhe, damit die Adresse voll lesbar ist statt
       mitten im Wort abzuschneiden (die Rails sind sonst nur Deko) */
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--bone-45);
    white-space: nowrap;
    overflow: hidden;
    max-height: 82%;
  }
  .hero__rail--left span { transform: rotate(180deg); }
}

.hero__inner {
  position: relative;
  z-index: var(--z-hero-content);
  text-align: center;
  padding-inline: var(--gutter);
  width: 100%;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: '';
  width: 30px; height: 1px;
  background: var(--ember);
}

.hero__title {
  position: relative;
  z-index: 2;
  margin-top: clamp(18px, 2.8vh, 30px);
}
/* Offizielle Wortmarke als Hero-Held (bone + Kupfer-Köfte, transparent).
   Ersetzt den früheren reinen Text-Titel — trägt die Marke statt einer
   toten Textzeile. */
.hero__logo {
  display: block;
  width: min(90vw, 680px);
  height: auto;
  margin-inline: auto;
  /* Tiefe unter der Wortmarke — löst sie von der Bühne, wie zuvor der
     text-shadow der Textzeilen. */
  filter: drop-shadow(0 clamp(12px, 1.8vw, 30px) clamp(26px, 3.6vw, 56px) rgba(0, 0, 0, .6));
}

.hero__lead {
  max-width: 640px;
  margin-inline: auto;
  margin-top: clamp(22px, 3.4vh, 40px);
}
.hero__claim {
  display: inline-block;
  margin-top: 10px;
  color: var(--bone);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82em;
}

.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(28px, 4.5vh, 48px);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bone-60);
  pointer-events: none;
}
.hero__mouse {
  width: 22px; height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.hero__mouse i {
  width: 3px; height: 7px;
  border-radius: 2px;
  background: var(--bone);
  animation: scroll-dot 1.9s ease-in-out infinite;
}
@keyframes scroll-dot {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  80% { transform: translateY(21px); opacity: 0; }
  100% { opacity: 0; }
}

/* Mobil: Scroll-Hint weg (Touch scrollt ohnehin) */
@media (max-width: 639px) {
  .hero__scroll { display: none; }
}

/* Mobil-Kompaktierung < 768px: weniger totes Polster oben/unten, Logo ~18 %
   kleiner (wie schon bei der Flachbildschirm-Stufe unten), damit der
   Bestellen-CTA bei 360×640 sicher over-the-fold bleibt — ohne die Bühnen-
   wirkung zu verlieren (Logo bleibt der Hero-Held). */
@media (max-width: 767px) {
  .hero { padding-block: calc(var(--nav-h) + 4px) 40px; }
  .hero__logo { width: min(74vw, 440px); }
  .hero__lead { margin-top: clamp(14px, 2.2vh, 24px); }
  .hero__cta { margin-top: clamp(16px, 2.6vh, 28px); }
}

/* Der Hero-Inhalt skaliert nur mit der Viewport-BREITE. Auf flachen Desktops
   wächst er dadurch über die Höhe hinaus und schiebt den Bestell-Button unter
   die Falz — der wichtigste CTA der Seite. Zwei Stufen, damit der Eingriff so
   klein wie möglich bleibt. Beide müssen NACH den .hero__*-Regeln stehen:
   gleiche Spezifität, die spätere Regel gewinnt.

   Stufe 1 (bis 900px hoch, z. B. 1440×900): nur Luft rausnehmen, Headline
   bleibt in voller Größe — dort fehlen nur wenige Pixel. */
@media (min-width: 900px) and (max-height: 900px) {
  .hero { padding-block: calc(var(--nav-h) + 6px) 96px; }
  .hero__lead { margin-top: clamp(14px, 2.2vh, 26px); }
  .hero__cta { margin-top: clamp(18px, 3vh, 32px); }
}

/* Stufe 2 (bis 820px hoch, z. B. 1366×700): jetzt muss auch die Headline an
   die Höhe gekoppelt werden, sonst reicht kein Abstand mehr aus. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero { padding-block: calc(var(--nav-h) + 4px) 72px; }
  .hero__logo { width: min(72vw, 460px); }
  .hero__lead { margin-top: clamp(10px, 1.6vh, 20px); }
  .hero__cta { margin-top: clamp(12px, 2.2vh, 26px); }
  .hero__scroll { display: none; }
}

/* ============================================================
   AKT 4 — DER SMASH
   ============================================================ */
/* border-top entfällt: der vorangehende Ticker bringt eigene Hairlines */

/* Mobil: Flow-Column — Burger-Zone und Copy-Zone sind eigene Boxen und
   können sich nie überlappen. Ab 900px: symmetrisches 2-Spalten-Grid,
   Copy links, Burger rechts, beide vertikal auf Mitte. */
.smash__stage {
  position: relative;
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Eine gemeinsame, wahrnehmungslinear aufgebaute Feder für Foto,
     Hintergrundwäsche und Glut. Der frühere Smoothstep blieb an den Rändern
     lange fast unsichtbar und wurde erst bei ~12 % deutlich — das las sich
     trotz mathematisch weicher Kurve als horizontale Farbkante. Diese Rampe
     beginnt früher und verteilt die Deckkraft über fast die ganze Bühne. */
  --smash-fade-v: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 0, 0, .12) 6%,
    rgba(0, 0, 0, .28) 14%,
    rgba(0, 0, 0, .46) 22%,
    rgba(0, 0, 0, .64) 30%,
    rgba(0, 0, 0, .8) 38%,
    rgba(0, 0, 0, .92) 46%,
    #000 52%,
    #000 58%,
    rgba(0, 0, 0, .92) 64%,
    rgba(0, 0, 0, .8) 70%,
    rgba(0, 0, 0, .64) 76%,
    rgba(0, 0, 0, .46) 81%,
    rgba(0, 0, 0, .3) 85%,
    rgba(0, 0, 0, .18) 89%,
    rgba(0, 0, 0, .09) 92%,
    rgba(0, 0, 0, .03) 95%,
    transparent 97%,
    transparent 100%);
}
/* Mobil: Bühne insgesamt kürzer — Titel-Override für .smash__figure steht
   bewusst weiter unten, NACH der Basisregel (Kaskade: gleiche Spezifität,
   spätere Regel gewinnt). */
@media (max-width: 767px) {
  .smash__stage { min-height: 72vh; min-height: 72svh; }
}
@media (min-width: 900px) {
  .smash__stage {
    display: grid;
    /* Mehr Raum für die Burger-Spalte: der Burger soll das Bild zentriert
       tragen und links UND rechts von ihm noch Luft für Callouts lassen —
       bei 1fr 1fr füllte das Foto die Spalte randvoll, kein Platz für eine
       zweite Callout-Seite. Copy bleibt trotzdem breit genug (nur Headline
       + ein Satz). */
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    padding-inline: var(--gutter);
    /* Burger und Zutatenpunkte bleiben gekoppelt. Gegenüber der letzten
       Fassung wandert die gesamte Produktachse kontrolliert etwa 14–26 px
       weiter nach links; die Label-Achse bekommt weiter unten eigenen Raum. */
    --smash-figure-shift-x: clamp(-112px, -5.7vw, -68px);
    /* Die Copy ist nur noch Headline + ein Satz — 88vh ließen darunter ein
       totes Band stehen, bevor die Merkmale kamen. */
    min-height: 76vh;
    min-height: 76svh;
  }
}
/* Kein zusätzlicher Ink-Scrim mehr über Kopf/Fuß der Stage — der war nötig,
   solange Foto-Maske und Glut-Ellipse noch harte eigene Kanten hatten. Jetzt
   laufen beide (var(--smash-fade-v)) sauber bis auf Null direkt an der
   Stage-Kante aus. Ein zusätzlicher, UNABHÄNGIG fadender Schwarz-Layer OBEN
   drauf hat genau das kaputtgemacht, was er verhindern sollte: Scrim UND
   Glut faden gegenläufig im selben Bereich, ihre Wirkung auf die sichtbare
   Helligkeit hebt sich über weite Strecken gegenseitig auf — das erzeugte
   die breite, komplett flache "tote Zone" (kein Verlauf sichtbar), die
   trotz mehrfach geglätteter Einzelkurven blieb. Live per Toggle bestätigt:
   ohne diesen Block läuft die Wärme durchgehend bis zum Rand aus. */

/* Trägt die Hintergrund-Wäsche (.smash__wash) und deren Vertikal-Fade.
   Kein eigener Farb-Moment mehr hier — der lief früher synchron mit dem
   Foto, aber eine designte Wäsche muss den Grau→Farbe-Übergang des Produkts
   nicht mitmachen (siehe .smash__media-img für den Farb-Moment). */
.smash__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: grayscale(0) contrast(1.02) brightness(.85);
  /* Blur-Hintergrund löst sich oben wie unten im Schwarz auf — Smoothstep-
     Kurve von .smash__stage, siehe Definition dort. */
  -webkit-mask-image: var(--smash-fade-v);
  mask-image: var(--smash-fade-v);
}
@media (min-width: 900px) {
  /* .smash__stage bekommt hier padding-inline (Gutter) — das Containing-
     Block für ein absolut positioniertes inset:0-Kind ist aber die PADDING-
     BOX des Vorfahren, also bleibt .smash__media exakt an der Gutter-Kante
     stehen: Foto/Glut hört hart auf, direkt neben reinem Seiten-Schwarz im
     Gutter-Streifen. Bewusster Bleed über die Section-Gutter hinaus bis zur
     echten Stage-Breite, damit dort keine Kante mehr existiert. */
  .smash__media { left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); }
}
/* Designte Wäsche statt verwaschener Foto-Kopie: die alte Blur-Kopie des
   Burgerbilds zeigte bei genauem Hinsehen erkennbare grüne Salat-/rote
   Zwiebel-Flecken — lieferte Textur, aber keine Atmosphäre. Zwei ruhige
   Radial-Gradients auf --ink-Boden lesen sich als warmes Licht im Raum statt
   als matschiges Foto. Bleibt Kind von .smash__media, erbt dessen
   --smash-fade-v-Maske unverändert — keine neue Fade-Ebene. */
.smash__wash {
  position: absolute;
  inset: 0;
  /* Erste Fassung war gegen die Referenz zu dunkel/blass — kaum als
     Verbesserung wahrnehmbar. Kern deutlich angehoben (Alpha .55→.85,
     Farbton näher an --ember statt gedecktem Braun) für einen klar
     sichtbaren Glutschein statt eines bloßen Farbstichs. */
  /* Gegen die Referenz nachgemessen: deren wärmster Punkt liegt bei #653a1e
     (x≈30 %, y≈62 %) — die vorherige Fassung schoss mit rgba(255,120,40,.85)
     deutlich darüber hinaus und las sich grell/gesättigt statt als Licht im
     Raum. Alphas so gewählt, dass der Peak NACH dem brightness(.85) von
     .smash__media genau auf dem Referenzwert landet. Zwei weiche, stark
     überlappende Ellipsen: keine erkennbare Gradient-Grenze. */
  background:
    radial-gradient(ellipse 52% 58% at 30% 62%,
      rgba(150, 84, 42, .78) 0%, rgba(112, 58, 28, .52) 38%, rgba(60, 30, 14, .24) 64%, transparent 82%),
    radial-gradient(ellipse 80% 70% at 46% 80%,
      rgba(58, 30, 15, .55) 0%, rgba(26, 13, 7, .3) 55%, transparent 80%),
    var(--ink);
}

/* Eigene Burger-Zone: nimmt den oberen Flow-Raum ein, Bild immer komplett */
.smash__figure {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 46svh;
  /* mittig im Menü statt am Viewport-Kopf: kein Nav-Offset mehr nötig */
  margin-top: clamp(12px, 3vh, 28px);
}
@media (min-width: 900px) {
  .smash__figure {
    grid-column: 2;
    grid-row: 1;
    flex: none;
    min-height: 68svh;
    /* Nur eine MINDEST-Höhe, bewusst kein height/max-height: .blueprint
       (dieselbe Grid-Zeile, gleiches 1536:1024-Seitenverhältnis) zwingt die
       Zeile per Grid-Auto-Sizing auf mindestens seine eigene Höhe hoch, wenn
       68svh mal nicht reicht — geprüft über min-height 76vh bis 12vh, Drift
       durchgehend 0. Genau DAS ist der Robustheits-Schutz gegen das alte
       Pin-Drift-Problem: object-fit:contain auf dem Foto kann nur dann nach
       Höhe statt Breite einpassen, wenn die Figur-Box KLEINER als 82%/1.5
       ihrer eigenen Breite wird — und das kann bei align-self:stretch nicht
       passieren, weil .blueprint in derselben Zeile exakt diese Mindesthöhe
       selbst einfordert. Ein festes height hier WÜRDE das kaputt machen
       (Figur entkoppelt sich von der Zeile) — nicht ergänzen. */
    margin-top: 0;
    padding: 0;
    /* Die einzige Grid-Zeile streckt sich bereits auf die volle Stage-Höhe;
       align-items:center zentriert figure nur INNERHALB dieser Zeile und
       lässt oben wie unten eine echte Lücke zur Stage-Kante. Die an figure
       gebundenen Fade-Layer (Foto-Maske, Glut-Ellipse) enden dadurch schon
       an figures eigener Kante, während die an .smash__stage gebundenen
       Layer (Ink-Scrim, Blur-Hintergrund) bis zur echten Kante weiterlaufen
       — der Wegfall der inneren Layer mitten im Verlauf liest sich als
       harte Kante. Stretch schließt die Lücke: figures Kanten fallen mit
       denen der Stage zusammen, alle Fade-Layer enden gemeinsam. */
    align-self: stretch;
    /* Rückt den Burger (Foto + Glut-Pseudo-Element, beides Teil dieser Box)
       als Einheit nach links — mehr Balance zur Copy-Spalte, jetzt wo alle
       Callouts rechts hängen. .blueprint bekommt denselben Wert separat,
       da es ein Geschwister-Element ist, kein Kind von .smash__figure. */
    transform: translate(var(--smash-figure-shift-x), 3px);
  }
}
/* Burger bleibt der Blickfang, aber verschlingt nicht mehr fast den ganzen
   ersten Screen — der Titel "Weltweit die Ersten." (.smash__copy, direkt
   darunter im Flow) rückt spürbar näher an den Seitenanfang. */
@media (max-width: 767px) {
  .smash__figure { min-height: 36svh; }
}

/* Boden-Glut: erdet das Foto in der Marken-eigenen Grill-Atmosphäre statt im
   leeren Schwarz zu schweben. ::before ist ein automatischer Kind-Layer von
   .smash__figure (z-index 2 → eigener Stacking-Context) und setzt selbst
   keinen z-index — reine Dokumentreihenfolge malt es vor dem <img>, es liegt
   also immer dahinter, ganz ohne mit .grain (z3) / .smash__copy (z4) /
   .blueprint (z5) koordinieren zu müssen.
   Zwei Layer in einem Hintergrund: ein flacher, breiter Hitze-Pool direkt
   unter dem Burger (wirkt wie eine glühende Platte, kein rundes Spotlight —
   Breite deutlich größer als Höhe, tief angesetzt) plus ein breiterer,
   schwacher Schein Richtung Copy-Spalte — teilt die Atmosphäre zwischen den
   Grid-Spalten statt zweier getrennter Hälften. mix-blend-mode: screen liest
   sich als Licht auf dem dunklen Blur-Hintergrund, nicht als aufgeklebte
   Farbfläche. */
.smash__figure::before {
  content: '';
  position: absolute;
  z-index: 0;
  /* Horizontal weit geöffnet, damit der Schein bis in die Copy-Spalte reicht.
     Vertikal endet die Box exakt an der Stage: Bei negativem Top/Bottom-Inset
     wurde die eigene Fade-Maske noch vor Alpha 0 vom Stage-Overflow gekappt —
     die letzte sichtbare Restglut erschien als horizontale Kante. */
  inset: 0 -20% 0 -85%;
  background:
    /* Sehr weicher Körper-Halo: hebt die Burger-Silhouette an, ohne Brot,
       Salat oder Callout-Texte orange einzufärben. */
    radial-gradient(ellipse 44% 38% at 66.34% 61%,
      rgba(255, 116, 46, .13) 0%,
      rgba(255, 77, 20, .07) 48%,
      transparent 78%),
    /* Größe (64%→46.83%) und Position (54%→66.34%) rechnerisch kompensiert,
       damit der Hitze-Pool trotz der jetzt viel breiteren Box exakt an
       derselben absoluten Stelle unter dem Burger sitzt wie vorher. */
    radial-gradient(ellipse 48% 15% at 66.34% 90%,
      rgba(255, 77, 20, .48) 0%,
      rgba(255, 77, 20, .28) 46%,
      transparent 80%),
    /* Deutlich größer, stärker und weiter links positioniert als vorher —
       das ist jetzt der Layer, der die vertikale Fade-Kurve auch auf der
       Copy-Seite sichtbar macht (dieselbe Maske gilt für den ganzen
       Hintergrund-Stack, nicht nur für die Ellipse rechts). */
    /* Deutlich zurückgenommen (.3 → .1): dieser screen-geblendete Layer lag
       über der Copy-Spalte und trieb die Wärme dort weit über den
       Referenzwert. Er soll die Atmosphäre nur noch andeuten. */
    radial-gradient(ellipse 60% 45% at 12% 58%,
      rgba(255, 116, 46, .1) 0%,
      rgba(255, 96, 32, .04) 45%,
      transparent 78%);
    filter: blur(32px);
  mix-blend-mode: screen;
  pointer-events: none;
  /* Explizite Maske statt nur auf die Gradient-Stops zu vertrauen: fadet den
     GESAMTEN gerenderten Layer (inkl. blur+screen-Blend) über volle Höhe zu
     null Alpha, statt sich auf die Ellipsen-eigene Transparenz zu verlassen —
     robuster gegen jede Box-Kante. Smoothstep-Kurve von .smash__stage. */
  -webkit-mask-image: var(--smash-fade-v);
  mask-image: var(--smash-fade-v);
}
@media (max-width: 767px) {
  /* Figur ist hier nur 36svh hoch — derselbe Radius/dieselbe Ellipse wirkt
     sonst wie ein diffuser Fleck statt eines flachen Boden-Pools. Kleiner,
     enger, ein Layer (kein Bridge-Layer nötig, es gibt keine zweite Spalte). */
  .smash__figure::before {
    inset: -6% -10% -4% -10%;
    background:
      radial-gradient(ellipse 58% 40% at 54% 62%,
        rgba(255, 116, 46, .13) 0%,
        rgba(255, 77, 20, .06) 48%,
        transparent 78%),
      radial-gradient(ellipse 60% 15% at 54% 90%,
        var(--ember-glow) 0%,
        rgba(255, 77, 20, .44) 46%,
        transparent 80%);
    filter: blur(15px);
  }
}
.smash__picture { display: contents; }
.smash__media-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* Die neue Aufnahme bleibt farblich unangetastet. Zusätzliche Kontrast- und
     Helligkeitsfilter hatten Details in Brot und Salat unnatürlich verhärtet. */
  filter: grayscale(0) contrast(1) brightness(1);
  /* Fade-to-Black: keine harte contain-Kante — das Bild löst sich an allen
     vier Rändern organisch im Schwarz auf. Zwei Masken (vertikal + horizontal)
     werden per intersect verrechnet; eine einzelne Maske kann nur eine Achse. */
  -webkit-mask-image:
    var(--smash-fade-v),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:
    var(--smash-fade-v),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (min-width: 900px) {
  /* Echter Rand statt nur wegmaskierter Kante: der Burger bekommt links UND
     rechts 9% Luft (deckt sich mit .blueprint weiter unten, 82% Breite,
     zentriert) — dort leben jetzt die Callouts, statt dass das Foto die
     Spalte randvoll füllt. Maske übernimmt nur noch den weichen Rand-Dissolve. */
  .smash__media-img {
    /* <img> ist ein ersetztes Element: bei position:absolute + width:auto
       nimmt es NICHT den durch left/right vorgegebenen Raum ein, sondern
       seine intrinsische Größe (anders als bei einem <div>) — width muss
       hier explizit gesetzt sein, sonst hängt das Bild einseitig über. */
    /* 82 % → 86.24 % (und Left rechnerisch mittig nachgezogen): gegen die
       Referenz war der Burger rund 5 % zu klein. .blueprint trägt exakt
       denselben Wert — beide Boxen bleiben dadurch deckungsgleich und die
       Zutatenpunkte sitzen weiter auf ihrer Schicht. */
    left: 6.88%;
    top: 0;
    width: 86.24%;
    height: 100%;
    /* Der Links-Shift sitzt jetzt auf .smash__figure selbst (eine Ebene
       höher) — bewegt Foto UND Glut-Pseudo-Element gemeinsam als eine Box,
       kein separates translateX hier nötig. */
    object-position: center;
    /* Das war die eigentliche Ursache der "harten Kante" über mehrere
       bisherige Runden: nicht Glow/Blur (die schon eased waren), sondern
       DIESE Maske auf dem SCHARFEN Foto — per Layer-Toggle isoliert (jede
       andere Ebene einzeln ausgeblendet, Kante blieb; erst ohne dieses Bild
       war sie weg). Ein scharfes Foto zeigt Details (Sesam, Kruste) schon
       bei mittlerer Opacity — das liest sich als Kante. Jetzt dieselbe
       Smoothstep-Kurve wie alle anderen Fade-Layer (var(--smash-fade-v),
       Definition bei .smash__stage) statt einer eigenen Kopie. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
      var(--smash-fade-v);
    mask-image:
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
      var(--smash-fade-v);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}
/* Grau-Startzustand nur noch auf dem Foto — die Wäsche ist keine Aufnahme,
   die "zu Farbe kommen" könnte, und wurde deshalb aus data-smash-tone
   genommen (js/main.js tweent nur noch [data-smash-tone] = das Foto). */
html.motion .smash__media-img {
  filter: grayscale(1) contrast(1.08) brightness(.66);
}

/* Copy-Zone unten, eigener Scrim nur hinter dem Text (nie über dem Burger) */
.smash__copy {
  position: relative;
  z-index: 4;
  width: 100%;
  padding-block: clamp(24px, 4vh, 40px) clamp(48px, 8vh, 96px);
}
.smash__copy::before {
  content: '';
  position: absolute;
  inset: -40px 0 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 10, 10, .96) 0%, rgba(10, 10, 10, .82) 55%, transparent 100%);
  pointer-events: none;
}
@media (min-width: 900px) {
  /* Volle Breite der linken Grid-Spalte. Die .container-Regeln (max-width,
     margin-inline auto, gutter) würden den Text hier ein zweites Mal
     einschnüren — die Grid-Spalte übernimmt die Breitenkontrolle. */
  .smash__copy {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    margin-inline: 0;
    padding: 0;
  }
  /* Weicher Verlauf nach rechts. Bewusst knapp gehalten: der Scrim liegt im
     Stacking-Context der Copy (z-index 4) und würde sonst über die darunter
     liegenden Zutaten malen und deren erste Spalte abdunkeln.
     Warmer Zwischenstopp statt reinem Schwarz→Transparent: die Nahtstelle zur
     Foto-Spalte trägt jetzt dieselbe Glut wie .smash__figure::before — beide
     Spalten teilen sich eine Atmosphäre. z-index bleibt unverändert, die Glut
     liegt weiterhin darunter (z2 < 4) — der Text wird nie verdunkelt. */
  .smash__copy::before {
    inset: -30% -34% -30% -12vw;
    /* Der alte horizontale Verlauf füllte seine rechteckige Box bis zur
       oberen/unteren Kante und erzeugte dort die sichtbaren Farbbänder.
       Diese Ellipse erreicht an allen vier Boxkanten transparent: der dunkle
       Lesbarkeits-Scrim und die warme Brücke lösen sich ohne Naht auf. */
    background: radial-gradient(ellipse 100% 50% at 0% 50%,
      rgba(10, 10, 10, .82) 0%,
      rgba(20, 12, 8, .62) 34%,
      rgba(45, 20, 10, .38) 58%,
      rgba(64, 24, 8, .16) 78%,
      transparent 100%);
  }
}
.smash__title {
  font-size: var(--display-md);
  margin-block: clamp(16px, 3vh, 32px) clamp(20px, 3.5vh, 40px);
}
/* Ein Satz statt Absatz — 36ch hält ihn deutlich schmaler als die Spalte,
   damit er nicht bis nah an die Callouts/den Burger heranreicht (48ch lief
   auf breiten Viewports fast über die volle Spaltenbreite). */
.smash__lead { max-width: 36ch; line-height: 1.6; text-wrap: pretty; }

/* ---- Referenz-Maßstab der Copy-Spalte (großer Desktop) ----
   Gegen das Zielbild ausgemessen: dort ist der gesamte Textblock der linken
   Spalte um Faktor ≈1,5 größer als zuvor hier gesetzt — die Headline trägt
   die Bühne, statt neben dem Burger klein zu wirken. Zeilenumbrüche bleiben
   identisch (Headline zweizeilig, Lead zweizeilig), nur der Maßstab wächst. */
@media (min-width: 1200px) {
  .smash__stage {
    /* Lokaler Gutter: Marke/Eyebrow/Headline fluchten auf ~4,2 % Seitenrand
       wie in der Referenz. .smash__media liest denselben Wert für seinen
       Bleed, beide bleiben dadurch automatisch deckungsgleich. */
    --gutter: var(--gutter-hero);
  }
  /* Der ganze Textblock lag gegen die Referenz durchgängig ~9 px zu hoch
     (Eyebrow, Headline und Lead gleichermaßen) — ein Versatz auf der Box
     statt drei Einzelkorrekturen an den Abständen. */
  .smash__copy { transform: translateY(9px); }
  .smash__title {
    font-size: clamp(4.5rem, 5.75vw, 7.25rem);
    margin-block: clamp(18px, 3vh, 34px) clamp(24px, 4vh, 46px);
  }
  .smash__lead {
    font-size: clamp(1.5rem, 1.75vw, 2.125rem);
    line-height: 1.45;
    /* In px statt ch: hält den Umbruch nach „traditionellem" stabil, auch
       wenn die Schriftbreite je nach geladenem Fallback minimal variiert. */
    max-width: 660px;
  }
  .smash__copy .eyebrow {
    font-size: clamp(.875rem, .95vw, 1.0625rem);
    gap: 16px;
  }
  .smash__copy .eyebrow::before { width: 44px; }
}

/* ---- Blueprint-Callouts: nur wo wirklich Platz ist ----
   Ein Annotations-System: Zutatenname groß, Beschreibung darunter, alle drei
   Blöcke rechtsbündig auf einer gemeinsamen Achse, von dort je eine gleich
   lange Leader-Linie mit Endpunkt auf der Zutat. */
.blueprint { display: none; }

@media (min-width: 1100px) {
  /* Liegt als eigene Grid-Zelle über der Burger-Spalte und deckt sich exakt mit
     dem contain-skalierten Bild: gleiche Breite, Höhe aus dem Seitenverhältnis,
     vertikal zentriert wie die Figur. Dadurch sind die Koordinaten im SVG echte
     Bildkoordinaten. z-index 5, weil der Copy-Scrim (z4) die Labels sonst
     abdunkelt — sie ragen bewusst in die Copy-Spalte hinein. */
  .blueprint {
    display: block;
    position: relative;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    /* 82% + zentriert = deckt sich exakt mit dem 9%/9%-Inset von
       .smash__media-img weiter oben — beide Koordinatensysteme bleiben
       deckungsgleich, nur die Spalte selbst ist breiter als das Bild.
       Derselbe translateX wie beim Foto/der Glut hält die Pins exakt auf
       den Zutaten, auch nachdem der Burger nach links gerückt ist.
       Dasselbe aspect-ratio wie das Foto ist hier kein Zufall, sondern der
       Grund, warum das nie auseinanderdriftet — Erklärung bei
       .smash__figure (min-height: 68svh). */
    width: 86.24%;
    margin-inline: auto;
    aspect-ratio: 1536 / 1024;
    z-index: 5;
    margin-block: 0;
    pointer-events: none;
    color: var(--ember);
    transform: translate(var(--smash-figure-shift-x), 3px);
  }
  /* Der Pin IST die Leader-Linie — waagerecht, gleiche Länge bei allen dreien.
     `right` setzt den Endpunkt auf der Zutat, `top` die Zeile.
     Quotiert jetzt das Eyebrow-Vokabular der Marke (Ember-Hairline + Glut-
     Punkt) statt der Hero-Blueprint-Rail — annotiert wie ein Gericht auf der
     Karte, nicht wie ein Bauteil im Explosionsplan. Verlauf statt Volllinie:
     currentColor am Punkt-Ende, transparent am Label-Ende. Der weiche Schlag-
     schatten (statt hartem 2px-Ring) hält die Linie weiterhin über rotem
     Zwiebel-/gelbem Käse-Untergrund lesbar. */
  /* Leitlinien + Zutatenpunkte liegen jetzt gemeinsam in EINEM SVG über
     derselben Box (viewBox 1536×1024 = Bildkoordinaten). Punkt, Knick und
     Linienende sind dadurch fest aneinander und an der Zutat verankert und
     können beim Skalieren nicht mehr gegeneinander driften — vorher war die
     Linie ein eigenes DIV mit prozentualer Breite, der Punkt ein
     Pseudo-Element daran. */
  .blueprint__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    /* Klarer Kupferton und dunkle Kontur: auch über Salat, Zwiebeln und Käse
       bleibt die Verbindung ohne grelles Leuchten eindeutig lesbar. */
    color: rgba(226, 121, 73, .94);
    filter:
      drop-shadow(0 1px 1px rgba(10, 10, 10, .98))
      drop-shadow(0 0 4px rgba(226, 121, 73, .24));
  }
  .blueprint__leaders polyline {
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .blueprint__marker-ring {
    fill: rgba(10, 10, 10, .62);
    stroke: currentColor;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }
  .blueprint__marker-core {
    fill: var(--bone);
    stroke: rgba(10, 10, 10, .9);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }
  /* Die Pins sind nur noch Anker: sie tragen kein eigenes Linien-/Punkt-Bild
     mehr, sondern markieren exakt den Endpunkt der jeweiligen SVG-Leitlinie.
     Nullgröße, damit das Label mit einem festen Abstand direkt daran hängt. */
  .blueprint__pin {
    position: absolute;
    width: 0;
    height: 0;
  }
  /* x = 1338/1536: Die Zutatenpunkte wandern weiterhin mit dem Burger, die
     gemeinsame Label-Achse liegt aber rund 40 px weiter rechts. Dadurch
     entsteht zwischen Produktkontur und Text eine klare, ruhige Luftzone. */
  /* 154 → 484 → 814: exakt 330 Bildpixel Abstand zwischen den drei
     Label-Mittelpunkten. Der Zutatenpunkt selbst darf davon unabhängig auf
     seiner echten Produktschicht sitzen. */
  .blueprint__pin--bread { left: 87.11%; top: 15.04%; }
  .blueprint__pin--onion { left: 87.11%; top: 47.27%; }
  .blueprint__pin--patty { left: 87.11%; top: 79.49%; }

  /* Rechtsbündig an der Linie: die rechte Textkante ist bei allen dreien die
     gemeinsame Achse — Zutatenname und Beschreibung fluchten darauf. */
  .blueprint__label {
    position: absolute;
    right: calc(100% + 34px);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    text-align: right;
    white-space: nowrap;
  }
  /* Spiegelvariante für die rechte Seite: Label hängt rechts an der Linie,
     linksbündig statt rechtsbündig. Kein flex-direction:row-reverse nötig —
     die Standard-Reihenfolge (Strich-Pseudo-Element vor dem Text im DOM)
     rendert bereits Strich-dann-Text, also genau der gewünschte Fluss
     Linie → Strich → Text (row-reverse hätte den Strich ans äußere/rechte
     Ende geschoben, weg von der Linie — falsch für diese Seite). */
  /* Label hängt mit festem kleinem Abstand direkt am Linienende — die Linie
     führt bis kurz davor, kein freischwebender Zwischenraum mehr. */
  .blueprint__label--right {
    right: auto;
    left: 18px;
    text-align: left;
    min-width: clamp(190px, 13vw, 230px);
    padding: 10px 18px 11px 15px;
    border-left: 1.5px solid rgba(226, 121, 73, .86);
    background: linear-gradient(90deg,
      rgba(10, 10, 10, .68) 0%,
      rgba(10, 10, 10, .34) 70%,
      transparent 100%);
  }
  /* Kein eigener Strich mehr vor dem Namen: die durchgehende Leitlinie aus
     dem SVG endet unmittelbar links daneben und übernimmt diese Aufgabe.
     Der frühere ::before-Strich las sich als zweite, losgelöste Deko. */
  .blueprint__name {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .055em;
    font-size: clamp(19px, 1.4vw, 24px);
    line-height: 1;
    color: var(--bone);
    text-shadow: 0 2px 16px rgba(10, 10, 10, .95);
  }
  .blueprint__desc {
    display: block;
    margin-top: 5px;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.3;
    color: var(--bone-80);
    text-shadow: 0 2px 16px rgba(10, 10, 10, .95);
  }
}

/* ---- Fuß des Smash-Blocks: nur noch die Buttons ---- */
.smash__foot {
  position: relative;
  /* über der Copy (z-index 4): deren Scrim reicht sonst durch das negative
     margin-top hindurch und dunkelt die Buttons ab */
  z-index: 5;
  padding-block: clamp(2rem, 4vh, 3.5rem) clamp(1.5rem, 3vh, 2.5rem);
  margin-top: clamp(-2rem, -3vh, -0.5rem);
}

.smash__cta {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============================================================
   MENÜ — DIE KARTE (Board-Optik wie im Laden)
   ============================================================ */
/* Die Zutaten-Liste endet auf einer Hairline und gehört inhaltlich noch zum
   Smash — daher hier kein volles Section-Padding oben, sonst reißt ein
   schwarzes Loch zwischen Zutaten und Karte. */
/* Der Produkt-Auftakt (Smash-Stage) eröffnet die Sektion selbst — kein
   zusätzliches Top-Padding, sonst klafft eine Lücke zwischen Ticker und Stage. */
.menu.section {
  padding-top: 0;
  padding-bottom: clamp(48px, 7vh, 76px);
}
/* Kartenkopf steht nach dem Zutaten-Manifest — braucht eigene Luft nach oben */
.menu__head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; margin-top: var(--space-block); margin-bottom: var(--space-block); }
.menu__intro { min-width: 0; }
.menu__spotlight {
  position: relative;
  isolation: isolate;
  min-width: 0;
  aspect-ratio: 1.45;
}
.menu__spotlight::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(220, 104, 45, .60) 0%, rgba(158, 60, 26, .40) 34%, rgba(91, 32, 15, .16) 65%, transparent 100%);
}
.menu__spotlight-label {
  position: absolute;
  top: 8%; right: 8%;
  z-index: 1;
  color: #fff;
  background: #d63d28;
  padding: .14em .3em;
  border-radius: .12em;
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1;
  letter-spacing: .03em;
  transform: rotate(9deg);
}
.menu__spotlight img { position: absolute; height: auto; object-fit: contain; filter: drop-shadow(0 15px 18px rgba(0,0,0,.45)); }
.menu__spotlight-duo { width: 80%; left: 10%; top: 10%; }
.menu__spotlight-shadows {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 26% 5% at 35% 54%, rgba(0,0,0,.72), transparent 100%),
              radial-gradient(ellipse 25% 5% at 67% 80%, rgba(0,0,0,.7), transparent 100%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .menu__spotlight { transition: transform .3s ease; }
  .menu__spotlight:hover { transform: scale(1.03); }
}
@media (min-width: 900px) {
  .menu__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 70px); }
}
/* Sprungziel des „Zur Karte"-CTA. Der globale Fokusring zieht ein Rechteck um
   den ganzen Block — das liest sich wie eine Layout-Kante, nicht wie ein
   Fokus. Stattdessen eine Ember-Kante links am Text. Als absolutes ::before,
   damit beim Fokussieren nichts umbricht oder springt. */
.menu__head:focus,
.menu__head:focus-visible { outline: none; }
.menu__head:focus::before,
.menu__head:focus-visible::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(14px, 1.6vw, 24px));
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ember);
}
.menu__title { font-size: var(--display-md); margin-block: 14px 16px; }
/* überschreibt .muted (bone-60) — siehe .menu__desc */
.menu__sub { max-width: 580px; color: var(--bone-80); }

.menu__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.6vw, 28px);
}
@media (min-width: 900px) {
  .menu__grid { grid-template-columns: 1fr 1fr; }
}

.menu__col {
  border: 1px solid var(--line-strong);
  background: var(--ink-raise);
  padding: clamp(22px, 3vw, 36px);
}
.menu__cat {
  margin: 0 0 18px;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ember);
}
.menu__cat--gap { margin-top: clamp(24px, 4vh, 40px); }

.menu__item + .menu__item { margin-top: clamp(18px, 3vh, 28px); }
.menu__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.menu__row--small { font-size: 14px; color: var(--bone-80); padding-block: 5px; }
.menu__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(19px, 2vw, 24px);
}
.menu__name--sm { font-size: clamp(16px, 1.6vw, 19px); }
.menu__price--new { position: relative; }
.menu__new {
  position: absolute;
  right: -6px;
  bottom: calc(100% + 2px);
  color: #f04432;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  transform: rotate(-12deg);
  transform-origin: center;
}
.menu__dots { flex: 1; border-bottom: 2px dotted var(--line-strong); transform: translateY(-5px); }
.menu__price {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.8vw, 21px);
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  white-space: nowrap;
}
/* bone-80 statt bone-60: die Beschreibungen standen bei ~#959090 gegen das
   Schwarz und waren mühsam zu lesen. bone-80 landet bei ~#c4c1bc — hell genug,
   ohne den Gerichtnamen darüber Konkurrenz zu machen. Gilt für alle
   beschreibenden Zeilen der Karte. */
.menu__desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--bone-80); max-width: 52ch; }
.menu__desc--sauces { margin-top: 14px; }
.menu__extras { margin-top: clamp(18px, 3vh, 26px); border-top: 1px solid var(--line); padding-top: 12px; }
.menu__noproblemo {
  font-family: var(--font-marker);
  color: var(--ember);
  font-size: 15px;
  display: inline-block;
  transform: rotate(-2deg);
}
.menu__vol { font-style: normal; color: var(--bone-80); font-size: 12px; }

.menu__cta {
  margin-top: var(--space-block);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.menu__hint { font-size: 14px; }

/* ============================================================
   STIMMEN — GOOGLE-BEWERTUNGEN (Endlos-Marquee rechts → links)
   ============================================================ */
.voices {
  overflow: hidden;
  /* Der vorgelagerte Ticker ist bereits ein eigener Kapitel-Atemzug. */
  padding-top: clamp(48px, 7vh, 76px);
}
.voices__head { margin-bottom: var(--space-block); }
.voices__title { font-size: var(--display-md); margin-block: 14px 16px; }
.voices__sub { max-width: 520px; }

.marquee {
  display: flex;
  gap: 14px;
  overflow: hidden;
  padding-block: 4px;
  /* weiche Kanten, damit Karten nicht hart abschneiden */
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-shrink: 0;
  min-width: max-content;
  animation: marquee-slide 46s linear infinite;
}
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 14px)); }
}
.marquee.is-paused .marquee__track { animation-play-state: paused; }

/* Sobald die Karten per Tastatur erreicht werden, wird nur der echte Track
   statisch und horizontal scrollbar. So bleibt jeder fokussierte Button im
   sichtbaren Ausschnitt, ohne wieder einen sichtbaren Pause-Button einzubauen. */
.marquee.is-keyboard-nav {
  overflow-x: auto;
  mask-image: none;
  -webkit-mask-image: none;
  scrollbar-width: none;
}
.marquee.is-keyboard-nav::-webkit-scrollbar { display: none; }
.marquee.is-keyboard-nav .marquee__track { animation: none; }
.marquee.is-keyboard-nav .marquee__track[aria-hidden] { display: none; }

/* Reduced Motion: kein Endlos-Lauf — statische, horizontal scrollbare Liste */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .marquee__track { animation: none; }
  .marquee__track[aria-hidden] { display: none; }
  .marquee.is-interactive .review { cursor: auto; }
  .review__interaction { display: none; }
}

/* Mobil (< 768px): kein automatischer Endlos-Lauf mehr — der Marquee wird
   zum manuellen Swipe-Karussell, eine Karte pro „Seite", per Scroll-Snap.
   Unabhängig von prefers-reduced-motion (Autoplay-Text ist auf Touch ohnehin
   schwer lesbar, nicht nur bei Bewegungsempfindlichkeit). */
@media (max-width: 767px) {
  .marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    mask-image: none;
    -webkit-mask-image: none;
    scrollbar-width: none;
  }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee__track {
    animation: none;
    gap: 16px;
    padding-inline: calc((100vw - min(88vw, 420px)) / 2); /* erste/letzte Karte lässt sich zentriert snappen */
  }
  .marquee.is-recentering { scroll-snap-type: none; }
  .marquee__track[aria-hidden] { display: none; } /* Duplikat nur fürs CSS-Loop nötig, hier ohne Funktion */
  .review {
    width: min(88vw, 420px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    cursor: auto;
  }
  .review__interaction { display: none; }
}

.marquee__counter {
  display: none;
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--bone-60);
}
@media (max-width: 767px) {
  .marquee__counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-transform: uppercase;
  }
  .marquee__counter::before,
  .marquee__counter::after {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--line-strong);
  }
}

.voices__more { margin-top: clamp(20px, 3.5vh, 32px); font-size: 14px; }
.voices__more a {
  color: var(--bone-60);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.voices__more a:hover { color: var(--ember); }

/* ============================================================
   VON DER STRASSE — SOCIAL-RAIL (Poster-Cards, Video im Dialog)
   ============================================================ */
.tiktok.section {
  /* Beide angrenzenden Ticker liefern bereits visuelle Trennung; ein volles
     globales Section-Padding würde die Social-Wall unnötig auseinanderziehen. */
  padding-block: clamp(52px, 7vh, 72px);
}
/* Mobil: Kopf über der Rail. Ab 900px: Kopf links, Social-Wall rechts.
   Der frühere Sprung erst bei 1100px ließ die Karten innerhalb von 20px
   Viewportbreite um fast die Hälfte schrumpfen; der frühere Wechsel verteilt
   den Raum kontinuierlicher und hält Text und Medien als eine Komposition. */
.tiktok__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (min-width: 900px) {
  .tiktok__grid {
    grid-template-columns: minmax(250px, .54fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
  }
}
.tiktok__head { max-width: 520px; }
.tiktok__title { font-size: var(--display-md); margin-block: 14px 16px; }
.tiktok__title .accent { color: var(--ember); }
.tiktok__sub { max-width: 440px; margin-bottom: clamp(20px, 3vh, 30px); }
.tiktok__socials {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.tiktok__follow {
  padding: 10px 14px;
  letter-spacing: .1em;
}

/* Kuratierter Kontaktbogen statt generischer Social-Grid: Die Kennung stammt
   aus dem echten Entstehungsort der Motive und trägt damit Information, nicht
   bloß Dekoration. */
.tiktok__wall {
  min-width: 0;
  width: 100%;
}
.tiktok__stamp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--bone-45);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.tiktok__stamp::before {
  content: '';
  width: 20px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--cta-copper);
}
.tiktok__stamp span { color: var(--bone-60); }

/* ---- Die Rail ----
   Mobil eine kompakte Swipe-Spur mit Snap; die nächste Karte schaut bewusst
   rein, damit sichtbar ist, dass es weitergeht. Ab 700px normales Grid. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(224px, 68vw, 288px);
  gap: 12px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Karten dürfen bis an den Bildschirmrand laufen, ohne den .container
     zu sprengen — die negativen Ränder werden innen wieder ausgeglichen. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  /* ohne scroll-padding schnappt die erste Karte an den Container-Rand und
     schluckt das Gutter — die Rail stünde dann links bündiger als der Text */
  scroll-padding-inline: var(--gutter);
}
.rail::-webkit-scrollbar { display: none; }
.rail__item { scroll-snap-align: start; min-width: 0; }
.rail .card { aspect-ratio: 5 / 6; }
@media (min-width: 700px) {
  .tiktok__wall {
    width: 90%;
    justify-self: center;
  }
  .rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 20px);
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .rail .card { aspect-ratio: 6 / 7; }
}
@media (min-width: 900px) {
  .tiktok__wall {
    width: min(92%, 620px);
    justify-self: end;
  }
  /* Ein echtes Video führt, zwei Ladeneinblicke ordnen sich unter: Die
     Asymmetrie bildet die tatsächliche Medien-Hierarchie ab statt drei
     gleichwertige, aber funktional unterschiedliche Karten vorzutäuschen. */
  .rail {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows: repeat(2, auto);
    gap: clamp(12px, 1.35vw, 18px);
    align-self: center;
  }
  .rail__item--feature {
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  /* Ein einziger bewusst gesetzter Kunstgriff: eine um sieben Pixel
     verschobene Kupferkontur wie bei einem analogen Kontaktabzug. */
  .rail__item--feature::before {
    content: '';
    position: absolute;
    inset: 7px -7px -7px 7px;
    z-index: 0;
    border: 1px solid rgba(196, 100, 54, .42);
    pointer-events: none;
  }
  .rail__item--feature .card { position: relative; z-index: 1; }
  .rail__item--support { grid-column: 2; }
  .rail__item--support:nth-child(2) { translate: -2px 0; }
  .rail__item--support:nth-child(3) { translate: 2px 0; }
  .rail__item--feature .card {
    height: 100%;
    aspect-ratio: auto;
  }
  .rail__item--support .card { aspect-ratio: 3 / 2; }
  .rail__item--support:last-child .card__img { object-position: center 28%; }
}
.rail__noscript { margin-top: 16px; font-size: 14px; }

/* ---- Poster-Card ----
   Kompakte responsive Formate statt 9:16: mobil bleibt die nächste Karte
   sichtbar, am Desktop führt ein Hochformat zwei flachere Motive an. */
.card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: var(--ink-raise);
  color: var(--bone);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.card:hover,
.card:focus-visible { transform: translateY(-2px); border-color: var(--ember); }
.card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Der Hochformat-Frame zeigt Person und Menü. Auf den flacheren Mobilkarten
   hält der obere Fokus Gesicht, Burger und Fries gemeinsam im Ausschnitt. */
.card__img--person { object-position: center 60%; }
/* Textschutz: ohne Verlauf steht das Label je nach Foto auf Weiß. */
.card::after {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(10, 10, 10, .88) 78%);
  pointer-events: none;
}
.card__meta {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.card__platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-60);
}
.card__platform svg { width: 13px; height: 13px; flex: 0 0 auto; }
.card__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.15;
}
/* Play-Button nur auf Karten, die wirklich ein Video öffnen */
.card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--bone-45);
  background: rgba(10, 10, 10, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.card__play svg { width: 22px; height: 22px; margin-left: 2px; color: var(--bone); }
.card:hover .card__play,
.card:focus-visible .card__play {
  background: var(--cta-copper);
  border-color: #b85e30;
}

/* ---- Video-Dialog ---- */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 32px);
  background: rgba(10, 10, 10, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dialog[hidden] { display: none; }
/* Hintergrund darf nicht mitscrollen, während der Dialog offen ist */
html.has-dialog { overflow: hidden; }
/* Die Breite folgt der Viewport-Höhe: 9:16 ergibt sonst eine Bühne, die höher
   als der Bildschirm ist und unten abgeschnitten wird. 0.5625 = 9/16, die
   ~132px decken Titelleiste und Dialog-Padding ab. */
.dialog__box {
  width: min(420px, 100%, calc((100dvh - 132px) * 0.5625));
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  background: var(--ink-raise);
}
.dialog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--line);
}
.dialog__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 15px;
}
.dialog__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dialog__close:hover,
.dialog__close:focus-visible { border-color: var(--ember); color: var(--ember); }
.dialog__close svg { width: 18px; height: 18px; }
/* Solange keine Einwilligung vorliegt, ist die Bühne leer und nimmt keinen
   Platz ein. :empty statt :has(iframe) — breiter unterstützt, und leer ist
   hier exakt das Kriterium (das iframe ist das einzige Kind). */
.dialog__stage { aspect-ratio: 9 / 16; }
.dialog__stage:empty { display: none; }
.dialog__stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.dialog__consent {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding: clamp(24px, 5vw, 40px) 24px;
}
/* display: grid oben schlägt sonst das hidden-Attribut — der Hinweis bliebe
   unter dem geladenen Video stehen. */
.dialog__consent[hidden] { display: none; }
.dialog__consent p { font-size: 13px; color: var(--bone-60); max-width: 34ch; }
.dialog__direct { font-size: 13px; color: var(--bone-60); }
.dialog__direct:hover { color: var(--ember); }

/* ============================================================
   AKT 5 — DER LADEN
   ============================================================ */
.store__eyebrow { margin-bottom: clamp(24px, 3.5vh, 36px); }

.store__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
  margin-bottom: clamp(20px, 3vw, 40px);
}
@media (min-width: 900px) {
  .store__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.store__facts {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vh, 28px);
}

.store__card {
  border: 1px solid var(--line-strong);
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.store__addr { font-size: var(--display-sm); line-height: 1; }
.store__city { margin-top: -8px; }
.store__tel { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.store__tel:hover { color: var(--ember); }
.store__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.store__photo img { height: 100%; min-height: 320px; }
.store__photo { display: flex; flex-direction: column; }
.store__photo picture { flex: 1; display: flex; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer .container { padding-block: clamp(48px, 8vh, 90px) clamp(28px, 5vh, 48px); }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 64px);
  margin-bottom: clamp(38px, 6vh, 64px);
}
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1.2fr 1fr 1.2fr; }
}

.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer__brand .marker-note { font-size: clamp(19px, 2.4vw, 26px); }
.coin--footer { width: clamp(72px, 8vw, 96px); }
.footer__claim {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.7;
}

.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer__col-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bone-60);
  margin-bottom: 4px;
}
.footer__addr { font-style: normal; line-height: 1.6; color: var(--bone-80); }
.footer__link {
  color: var(--bone-60);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__link:hover { color: var(--ember); }
.footer__social { display: flex; gap: 10px; flex-wrap: wrap; }

.footer__outro {
  border-top: 1px solid var(--line);
  padding-top: clamp(26px, 4.5vh, 46px);
}
.footer__tagline {
  /* kein zusätzlicher margin-top: seit die Wortmarke darüber entfernt wurde,
     ist .footer__tagline das erste Kind — .footer__outro's padding-top
     trägt den Abstand zur Hairline schon allein */
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(11px, 1.4vw, 14px);
  color: var(--bone-60);
}
.footer__legal {
  margin-top: clamp(20px, 3vh, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-60);
}
.footer__legal-links { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.footer__legal-links a { color: var(--bone-60); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.footer__legal-links a:hover { color: var(--bone); }
/* sieht aus wie die Nachbar-Links, ist aber ein Button (öffnet das Banner) */
.footer__legal-btn {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 0;
  color: var(--bone-60);
  cursor: pointer;
}
.footer__legal-btn:hover { color: var(--bone); }

/* ============================================================
   RECHTSSEITEN (impressum.html / datenschutz.html)
   ============================================================ */
.legal {
  max-width: 760px;
  padding-block: calc(var(--nav-h) + clamp(40px, 8vh, 80px)) var(--space-section);
}
.legal h1 { font-size: var(--display-md); margin-block: 14px clamp(24px, 4vh, 40px); }
.legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-block: clamp(28px, 5vh, 44px) 12px;
}
.legal p, .legal address, .legal li { color: var(--bone-80); line-height: 1.7; font-size: 15px; }
.legal p + p { margin-top: 10px; }
.legal address { font-style: normal; }
.legal a { color: var(--bone); }
.legal a:hover { color: var(--ember); }
.legal ul { margin: 10px 0 0; padding-left: 20px; }
/* Platzhalter, die der Betreiber ersetzen muss, leuchten sichtbar auf */
.legal mark { background: rgba(255, 77, 20, .16); color: var(--bone); padding: 1px 6px; }
.legal__meta { margin-top: clamp(28px, 5vh, 44px); color: var(--bone-60); font-size: 13px; }

.legal-footer {
  border-top: 1px solid var(--line);
  padding: 22px var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-60);
}
.legal-footer a { color: var(--bone-60); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.legal-footer a:hover { color: var(--bone); }

/* ============================================================
   MOBILE ART DIRECTION — Desktop als Ursprung, nicht als Schrumpfvorlage
   ============================================================ */
@media (max-width: 767px) {
  /* Hero: dieselbe Hierarchie wie am Desktop, aber in einem kontrollierten
     ersten Screen. Beide Aktionen bilden eine gemeinsame, ruhige Zeile. */
  .hero {
    min-height: max(660px, 100svh);
    padding-block: calc(var(--nav-h) + 24px) 42px;
  }
  .hero__inner { padding-inline: var(--gutter); }
  .hero__glow {
    top: 43%;
    width: 132vw;
    height: 96vw;
    filter: blur(16px);
  }
  .hero__title { margin-top: clamp(16px, 2.4vh, 24px); }
  .hero__logo { width: min(86vw, 360px); }
  .hero__lead {
    max-width: 34ch;
    margin-top: clamp(16px, 2.4vh, 24px);
    font-size: clamp(1rem, 4.35vw, 1.125rem);
    line-height: 1.48;
    text-wrap: balance;
  }
  .hero__claim { margin-top: 9px; font-size: .76em; letter-spacing: .035em; }
  .hero__cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 390px);
    margin: clamp(20px, 3vh, 28px) auto 0;
  }
  .hero__cta .btn {
    min-width: 0;
    min-height: 50px;
    padding: 12px 10px;
    font-size: clamp(12px, 3.45vw, 14px);
  }
  .hero__cta .btn--lieferando { gap: 8px; }
  .hero__cta .btn--lieferando img { height: 16px; }

  /* Ticker bleiben echte Kapitelwechsel, werden aber nicht zu einer zweiten
     Bildschirmhöhe. Das Schriftbild bleibt Anton-groß und markentypisch. */
  .ticker { --ticker-gap: 24px; padding-block: 11px; }
  .ticker__track { font-size: clamp(1.55rem, 7.5vw, 2rem); }
  .ticker--header { padding-block: 10px; }
  .ticker--header .ticker__track { font-size: clamp(1.9rem, 9vw, 2.45rem); }

  /* Smash: Copy, Produkt und Erklärung werden zu EINER Produktbühne. Das
     Koordinatensystem der Desktop-Annotations bleibt 1536×1024, sodass jeder
     Marker auch mobil exakt auf derselben Zutat liegt. */
  .smash__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 0;
    padding-block: clamp(36px, 7vh, 58px) 20px;
    overflow: hidden;
  }
  .smash__copy {
    grid-column: 1;
    grid-row: 1;
    padding-block: 0 clamp(18px, 4vh, 30px);
  }
  .smash__copy::before {
    inset: -34px -12vw -16px;
    background: radial-gradient(ellipse 90% 70% at 4% 55%, rgba(45, 20, 10, .5), transparent 76%);
  }
  .smash__title {
    margin-block: 15px 17px;
    font-size: clamp(2.7rem, 13vw, 3.55rem);
    line-height: 1.02;
  }
  .smash__lead {
    max-width: 31ch;
    font-size: clamp(1rem, 4.4vw, 1.15rem);
    line-height: 1.48;
  }
  .smash__figure,
  .blueprint {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    aspect-ratio: 1536 / 1024;
    min-height: 0;
    margin: 0;
    align-self: center;
  }
  .smash__figure { transform: translateX(-4%); }
  .smash__media-img {
    /* 11 % der Bühne werden zur ruhigen Beschriftungsspur. Bild und SVG
       nutzen exakt dieselbe Box und bleiben dadurch pixelgleich gekoppelt. */
    left: 0;
    right: auto;
    width: 89%;
    height: 100%;
    object-position: left center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  }
  .smash__figure::before {
    inset: -18% -15% -20% -10%;
    background:
      radial-gradient(ellipse 64% 45% at 49% 58%, rgba(255, 116, 46, .18), rgba(255, 77, 20, .075) 48%, transparent 78%),
      radial-gradient(ellipse 72% 18% at 49% 88%, rgba(255, 77, 20, .56), rgba(255, 77, 20, .3) 48%, transparent 82%);
    filter: blur(18px);
  }
  .blueprint {
    display: block;
    position: relative;
    z-index: 5;
    color: var(--ember);
    pointer-events: none;
    transform: translateX(-4%);
  }
  .blueprint__lines {
    position: absolute;
    left: 0;
    right: auto;
    top: 50%;
    bottom: auto;
    width: 89%;
    height: auto;
    aspect-ratio: 1536 / 1024;
    transform: translateY(-50%);
    overflow: visible;
    color: rgba(226, 121, 73, .96);
    filter: drop-shadow(0 1px 1px rgba(10, 10, 10, 1)) drop-shadow(0 0 5px rgba(226, 121, 73, .34));
  }
  .blueprint__leaders polyline {
    stroke-width: 2.25;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .blueprint__marker-ring {
    fill: rgba(10, 10, 10, .74);
    stroke: currentColor;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
  }
  .blueprint__marker-core {
    fill: var(--bone);
    stroke: rgba(10, 10, 10, .95);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }
  .blueprint__pin { position: absolute; width: 0; height: 0; }
  /* Die SVG-Endpunkte landen durch die 89%-Box bei rund 77,5% der Bühne.
     Die Textanker beginnen knapp davor in der reservierten rechten Spur.
     Die Y-Werte berücksichtigen die vertikale Zentrierung der 89%-SVG-Box. */
  .blueprint__pin--bread { left: 74%; top: 18.8%; }
  .blueprint__pin--onion { left: 74%; top: 47.6%; }
  .blueprint__pin--patty { left: 74%; top: 76.3%; }
  .blueprint__label {
    position: absolute;
    left: 10px;
    right: auto;
    top: 50%;
    width: clamp(78px, 23vw, 100px);
    margin: 0;
    padding: 6px 7px 7px 9px;
    transform: translateY(-50%);
    border-left: 1.5px solid rgba(226, 121, 73, .9);
    background: linear-gradient(90deg, rgba(10, 10, 10, .9), rgba(10, 10, 10, .64) 76%, transparent);
    text-align: left;
    white-space: normal;
  }
  .blueprint__name {
    display: block;
    color: var(--bone);
    font-family: var(--font-display);
    font-size: clamp(11px, 3.1vw, 14px);
    line-height: 1.05;
    letter-spacing: .025em;
    text-transform: uppercase;
    text-shadow: 0 2px 12px #000;
  }
  .blueprint__desc {
    display: block;
    margin-top: 3px;
    color: var(--bone-80);
    font-size: clamp(8.5px, 2.35vw, 10px);
    line-height: 1.18;
    text-shadow: 0 2px 10px #000;
  }
  .smash__foot {
    margin-top: 0;
    padding-block: 12px 34px;
  }
  .smash__cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .smash__cta .btn {
    min-width: 0;
    min-height: 50px;
    padding: 12px 9px;
    font-size: clamp(12px, 3.5vw, 14px);
  }
  .smash__cta .btn--lieferando { gap: 8px; }
  .smash__cta .btn--lieferando img { height: 16px; }

  /* Karte: dichter Rhythmus, klare Preisachse und weniger Karton pro Gericht. */
  .menu__head { margin-top: clamp(44px, 8vh, 64px); }
  .menu__col { padding: 19px 17px 21px; }
  .menu__grid { gap: 14px; }
  .menu__item + .menu__item { margin-top: 18px; }
  .menu__row { gap: 7px; }
  .menu__name { font-size: clamp(18px, 5.3vw, 21px); }
  .menu__price { font-size: clamp(16px, 4.8vw, 19px); }
  .menu__desc { margin-top: 6px; font-size: 13.5px; line-height: 1.48; }
  .menu__cta { align-items: stretch; gap: 12px; }
  .menu__cta .btn { width: 100%; }

  /* Social: ein Hauptmotiv und zwei kompakte Nebenszenen, wie ein analoger
     Kontaktbogen. Kein horizontaler Rail-Überhang und keine Riesenkarte. */
  .tiktok.section { padding-block: 48px 54px; }
  .tiktok__grid { gap: 28px; }
  .tiktok__title { margin-block: 12px 14px; }
  .tiktok__sub { margin-bottom: 18px; line-height: 1.48; }
  .tiktok__socials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .tiktok__follow {
    min-width: 0;
    justify-content: center;
    padding: 10px 8px;
    font-size: 11px;
    letter-spacing: .055em;
  }
  .tiktok__wall { width: calc(100% - 7px); }
  .tiktok__stamp { margin-bottom: 12px; letter-spacing: .135em; }
  .rail {
    grid-auto-flow: row;
    grid-auto-columns: initial;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .rail__item { scroll-snap-align: none; }
  .rail__item--feature {
    position: relative;
    grid-column: 1 / -1;
  }
  .rail__item--feature::before {
    content: '';
    position: absolute;
    inset: 7px -7px -7px 7px;
    border: 1px solid rgba(196, 100, 54, .48);
    pointer-events: none;
  }
  .rail__item--feature .card { position: relative; z-index: 1; aspect-ratio: 4 / 3; }
  .rail__item--support .card { aspect-ratio: 4 / 3; }
  .rail__item--support:nth-child(2) { transform: translateY(2px); }
  .rail__item--support:nth-child(3) { transform: translateY(-2px); }
  .card__meta { left: 10px; right: 10px; bottom: 9px; }
  .card__label { font-size: 14px; }

  /* Stimmen, Laden und Footer: an derselben linken Achse, ohne unnötige
     Vollbreiten-Blöcke oder überlange Bildhöhen. */
  .voices { padding-top: 48px; }
  .marquee__track { padding-inline: var(--gutter); }
  .review { width: calc(100vw - (2 * var(--gutter))); }
  .store__eyebrow { margin-bottom: 22px; }
  .store__grid { gap: 18px; margin-bottom: 18px; }
  .store__card { padding: 19px 17px; gap: 14px; }
  .store__addr { font-size: clamp(2rem, 10vw, 2.55rem); }
  .store__city { margin-top: -5px; line-height: 1.45; }
  .store__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
  }
  .store__actions .btn {
    min-width: 0;
    min-height: 50px;
    padding: 11px 8px;
    font-size: clamp(11px, 3.25vw, 13px);
  }
  .store__actions .btn--lieferando { gap: 7px; }
  .store__actions .btn--lieferando img { height: 15px; }
  .store__photo img { min-height: 0; aspect-ratio: 4 / 3; object-position: center 58%; }
  .map { min-height: 290px; }
  .map__consent {
    gap: 11px;
    padding: 20px 18px 58px;
  }
  .map__consent p:not(.ph__tag) { font-size: 12px; line-height: 1.45; }
  .map__consent .btn { min-height: 44px; padding: 10px 12px; font-size: 12px; }
  .footer__grid { gap: 34px; }
  .footer__legal { align-items: flex-start; flex-direction: column; }
}

/* Sehr schmale Geräte: Markenname bleibt erhalten, lange CTA-Labels dürfen
   jedoch in zwei gleichwertige Zeilen wechseln statt gequetscht zu werden. */
@media (max-width: 359px) {
  .nav__brand-name { font-size: 12px; }
  .nav .nav__cta,
  .nav.is-scrolled .nav__cta { padding-inline: 10px; }
  .hero__cta,
  .smash__cta,
  .store__actions { grid-template-columns: 1fr; }
  /* Auf sehr schmalen Geräten bleibt das Produkt groß. Die Beschriftungen
     werden deshalb zu drei kompakten, topologisch identischen Zeilen unter
     dem Bild; ihre Reihenfolge folgt den Zutaten von oben nach unten. */
  .smash__stage { padding-bottom: 188px; }
  .smash__figure,
  .blueprint { transform: none; }
  .smash__media-img,
  .blueprint__lines { width: 100%; }
  .blueprint__leaders { display: none; }
  .blueprint__pin {
    left: var(--gutter) !important;
    width: calc(100vw - (2 * var(--gutter)));
  }
  .blueprint__pin--bread { top: calc(100% + 12px); }
  .blueprint__pin--onion { top: calc(100% + 66px); }
  .blueprint__pin--patty { top: calc(100% + 120px); }
  .blueprint__label {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 44px;
    padding: 7px 10px 8px 12px;
    transform: none;
    background: linear-gradient(90deg, rgba(10, 10, 10, .92), rgba(10, 10, 10, .28) 82%, transparent);
  }
  .blueprint__name { font-size: 14px; }
  .blueprint__desc { font-size: 10px; }
}

/* Tablet-Porträt übernimmt die zusammenhängende mobile Produktlogik, erhält
   aber bewusst mehr Luft und größere Callout-Typografie. */
@media (min-width: 768px) and (max-width: 899px) {
  .smash__stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
    padding-block: 64px 32px;
  }
  .smash__copy { grid-row: 1; padding-block: 0 30px; }
  .smash__figure,
  .blueprint {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 760px);
    aspect-ratio: 1536 / 1024;
    min-height: 0;
    margin: auto;
  }
  .blueprint { display: none; }
  .smash__foot { margin-top: 0; }
}

/* Kurze Querformate: alle Hero-Bausteine bleiben im ersten Screen sichtbar.
   Breite ist hier reichlich vorhanden; reduziert wird ausschließlich Höhe. */
@media (max-width: 999px) and (max-height: 500px) {
  .hero {
    min-height: 100svh;
    padding-block: calc(var(--nav-h) + 6px) 12px;
  }
  .hero__inner { padding-inline: max(var(--gutter), env(safe-area-inset-left)); }
  .hero__glow { top: 49%; width: 74vw; height: 44vw; filter: blur(14px); }
  .hero .eyebrow { font-size: 9px; }
  .hero__title { margin-top: 5px; }
  .hero__logo { width: min(42vw, 320px); }
  .hero__lead {
    max-width: 70ch;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.32;
  }
  .hero__claim { margin-top: 3px; font-size: .72em; }
  .hero__cta {
    display: flex;
    width: auto;
    margin-top: 9px;
    gap: 9px;
  }
  .hero__cta .btn { width: auto; min-height: 40px; padding: 8px 16px; font-size: 12px; }
  .hero__scroll { display: none; }
}