/* ============================================================
   v9 only — stacking and header clearance.
   Loaded after v1.css + v8.css, so v8 is provably untouched.
   ============================================================ */

/* The docked Menu/Order row sat behind the header backdrop. Not a z-index
   problem on the row itself -- it is already z 56 -- but on its ancestor:
   .hero__bottom is position:relative with z-index:1, which opens a stacking
   context, so the row's 56 only ranks INSIDE that box, and the box ranks 1
   against the nav's 50. Lifting the ancestor above the nav is what actually
   moves the row in front; nothing about its position or animation changes.
   Stays below the fullscreen overlay (60) so that still covers everything. */
.v9 .hero__bottom { z-index: 56; }

/* The pinned stage sticks at top: 0 and the headline drifts up another 2.5vh
   as the hero cup grows, which slid the eyebrow under the header bar -- where
   the bar's 85% blush backdrop washed it out. Reserve enough headroom that the
   headline clears the bar at full drift, without touching the drift itself. */
.v9 .lineup__stage { padding-top: max(clamp(4.5rem, 9vh, 7rem), 6.75rem); }

/* v8 blendet die Headline beim Auffaechern auf 62 % ab (opacity: 1 - fan*.38).
   Patrick will sie durchgehend voll deckend -- der Text soll nicht zuruecktreten,
   waehrend die Becher hervorkommen. Nur die Deckkraft wird festgenagelt, der
   2.5vh-Drift aus v8 bleibt, damit die Choreografie sonst identisch laeuft. */
.v9 .lineup__head { opacity: 1; }

/* Das Store-Standbild ist in v9 ein Video. v1.css adressiert dort .about__store
   img, was ein <video> nicht trifft -- die Regeln muessen also gespiegelt
   werden, statt sie umzuschreiben (v1, v8 und deli-page.php zeigen weiter das
   PNG). display:block nimmt die Inline-Grundlinie weg, sonst steht unter dem
   Video ein paar Pixel Plum aus dem Figure-Hintergrund.
   Der Beschnitt ist bereits einkodiert (2:1), object-fit:cover deckt nur noch
   Rundungsreste ab. */
.v9 .about__store video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.v9 .about__store:hover video { transform: scale(1.025); }

/* Catering zeigt in v9 drei Kacheln statt zwei. v1.css nagelt das Grid auf
   repeat(2, 1fr) fest, also hier ueberschreiben -- die eigene Klasse
   --trio haengt nur an v9s Markup, v1 und v8 behalten ihre zwei Spalten. */
.catering-promo__media--trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The printed card is now the real list, not two placeholder lines.
   Keep v1's accordion and photo; only the drop interior changes. */
.v9 .menu__body { min-width: 0; }
.v9 .menu__note {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  opacity: 0.62;
}
.v9 .menu__groups--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem;
}
.v9 .menu__group + .menu__group { margin-top: 1.15rem; }
.v9 .menu__groups--split .menu__group + .menu__group { margin-top: 0; }
.v9 .menu__group-label {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.42;
}
.v9 .menu__item { padding: 0.55rem 0; }
.v9 .menu__item-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
}
.v9 .menu__item-tag {
  font-family: var(--body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  opacity: 0.9;
}
.v9 .menu__item-desc { max-width: 62ch; }
.v9 .menu__addons {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(81, 28, 53, 0.14);
}
.v9 .menu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v9 .menu__chips li {
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(81, 28, 53, 0.22);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* Instagram-Profil-Grid: jede Kachel 3:4, Bild fuellt die Box.
   Ohne absolute img gewinnt die Eigenhoehe — 1:1-Posts bleiben
   quadratisch, 9:16-Reels werden hoeher. */
.v9 .social__strip {
  gap: 0;
  padding: 0;
  align-items: start;
  grid-auto-columns: clamp(220px, 24vw, 340px);
}
.v9 .social__cell {
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
}
.v9 .social__cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Die Line-Up-Section war zu lang zum Durchscrollen. Der Track ist 380svh
   hoch, die Buehne klebt mit 100svh darin — es blieben 280svh gepinntes
   Scrollen, auf 1280x860 gemessen 2408 px oder rund 24 Mausrad-Rastungen.

   v8.js rechnet den Fortschritt als Anteil der Scrollstrecke
   (p = -rect.top / (rect.height - innerHeight)), die drei Phasen skalieren
   also mit. Den Track zu kuerzen beschleunigt die gesamte Choreografie
   gleichmaessig, ohne dass am JS oder an der Geometrie etwas zu aendern waere.

   240svh lassen 140svh gepinnt, also rund die Haelfte. */
.v9 .lineup__track { height: 240svh; }

@media (max-width: 860px) {
  .v9 .menu__groups--split { grid-template-columns: 1fr; }
  .v9 .menu__groups--split .menu__group + .menu__group { margin-top: 1.15rem; }

  /* Mobil steht der Track auf 320svh, also 220svh gepinnt. Auf dem Handy
     wird gewischt statt gerastet, deshalb noch etwas kuerzer als am Desktop. */
  .v9 .lineup__track { height: 200svh; }

  /* Mobil faellt die dritte Kachel (Wraps) weg -- drei 4:5-Kacheln
     nebeneinander werden auf Telefonbreite zu schmalen Streifen. Uebrig
     bleiben Sandwich + Drinks im urspruenglichen Zweier-Raster. */
  .catering-promo__media--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catering-promo__img--desktop { display: none; }

  /* v1.css dreht die Concept-Slide unter 860px auf 5/4 quer. Patrick will
     auch mobil das Hochformat vom Desktop. Die Aufnahmen sind auf 4:5
     vorbeschnitten, das Format greift hier also punktgenau -- object-fit
     schneidet mobil jetzt gar nichts mehr weg. max-width und die zentrierende
     Margin aus v1.css bleiben, sonst wuerde die Slide auf Tabletbreite
     ueberproportional hoch. */
  .v9 .concept__slides { aspect-ratio: 4 / 5; }

  /* Mobile parks the row in-page (.actions-anchored) instead of floating it,
     but it lives in the same .hero__bottom box, so it needs the same lift. */
  .v9 .hero__bottom { z-index: 56; }
  .v9 .lineup__stage { padding-top: max(clamp(4.5rem, 9vh, 7rem), 6.5rem); }

  /* v1.css setzt unter 860px min-height:auto auf den Hero, der damit auf
     Inhaltshoehe schrumpft: auf 375x812 endet das Blush bei 580px und die
     Line-Up-Section schiebt 232px Creme ins erste Bild. Patrick will beim
     ersten Blick nur Pink sehen. Also wieder auf Viewporthoehe bringen und
     wie am Desktop zentrieren, statt den Inhalt oben kleben zu lassen.

     svh statt dvh/lvh, weil svh der Zustand beim Laden ist -- iOS Safari zeigt
     da noch die volle Toolbar. Auf lvh zu rechnen hiesse, dass genau im
     Ladezustand unten Creme steht.

     Der Hero rechnet gegen --v9-marquee-h, damit der Ticker exakt an der Kante
     endet. Die 0.35rem Ueberhang sind Absicht: svh rundet auf manchen Geraeten
     krumm, und ein fehlendes Pixel waere eine Creme-Linie. So ist der Ticker
     unten ein paar Pixel angeschnitten -- er ist selbst Blush, das erste Bild
     bleibt einfarbig. */
  .v9 { --v9-marquee-h: 4rem; --v9-actions-drop: 2.5rem; }

  .v9 .hero {
    min-height: calc(100svh - var(--v9-marquee-h) + 0.35rem);
    justify-content: center;
  }

  /* Der Ticker war mit 1.4rem Schrift und 49px Hoehe die kleinste Stimme im
     ersten Bild. Feste Hoehe statt Polsterung, weil der Hero oben exakt
     dagegen rechnet -- aus Schriftmetrik abgeleitete Hoehen sind dafuer zu
     unzuverlaessig. Vertikal zentriert per Flex, da das Padding entfaellt. */
  .v9 .marquee {
    height: var(--v9-marquee-h);
    padding-block: 0;
    display: flex;
    align-items: center;
  }
  /* Als Flex-Item schrumpft der Track per Default auf Containerbreite, sein
     width:max-content laeuft dann ins Leere und die Begriffe brechen um.
     flex:0 0 auto haelt ihn auf voller Laufweite -- Voraussetzung dafuer, dass
     die Endlosschleife ueberhaupt laufen kann. */
  .v9 .marquee__track { flex: 0 0 auto; }
  .v9 .marquee__item { font-size: 1.85rem; }

  /* Menu/Order sassen dicht unter dem Subtext. Der Slot ist die in-flow-Huelle
     der Buttons -- die Buttons selbst liegen absolut darin, also verschiebt
     seine Margin beide. v1.js liest den Slot pro Frame neu, die Andock-
     Animation zieht also mit.

     Die negative Margin unten ist der Kern: der Hero zentriert seinen Inhalt,
     also wuerde eine reine margin-top die Inhaltshoehe vergroessern und den
     Block als Ganzes nach oben ziehen -- die Buttons kaemen nur um die Haelfte
     tiefer, dafuer wanderte das Logo hoch. Da der Slot das letzte Element im
     Hero ist, hebt -1 * drop den Hoehenzuwachs wieder auf: die Zentrierung
     bleibt unveraendert, und die Buttons fallen exakt um drop nach unten. */
  .v9 .hero__actions-slot {
    margin-top: var(--v9-actions-drop);
    margin-bottom: calc(-1 * var(--v9-actions-drop));
  }

  /* Der Store-Loop stand auf dem Handy in 20px Rand je Seite (--pad-x greift
     bei 375px auf sein Minimum von 1.25rem). Patrick war der Rahmen zu breit.
     Nur die Seiten schmaler ziehen, nicht auf null: die Figur hat 18px
     Eckenradius, der braucht Luft, um als Rundung gelesen zu werden. */
  .v9 .about { padding-inline: 0.75rem; }

  /* Find us war mit 16px Schrift und 91x43 fast so breit wie die Hero-Buttons,
     obwohl er nur ein Overlay auf dem Video ist. Kleiner und naeher an die
     Unterkante -- bottom zaehlt vom Figurenrand nach oben, kleinerer Wert
     heisst also tiefer. */
  .v9 .about__findus-btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.85rem;
    bottom: 0.8rem;
  }
}