/* ============================================================
   v13 -- VORSCHAU: Store-Video im Hero. Drei Varianten ueber die
   Body-Klasse hero-a / hero-b / hero-c (?hero=a|b|c).
   Laedt nach dem kompletten v12-Stapel; v12 selbst bleibt unberuehrt.
   ============================================================ */

.v13 .hero__media { display: none; }

/* Standbild und Video liegen deckungsgleich uebereinander. Das Video bleibt
   durchsichtig, bis es spielt -- so gibt es keinen schwarzen Moment. */
.v13 .hero__poster,
.v13 .hero__poster img,
.v13 .hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v13 .hero__video { opacity: 0; transition: opacity .6s var(--ease); }
.v13 .hero__video.is-playing { opacity: 1; }

/* Die helle Marke existiert nur fuer Variante a. */
.v13 .brand-float .logo--light { display: none; }


/* ============================================================
   A -- VOLLBILD
   Video fuellt den Hero, ein Plum-Verlauf haelt die Schrift lesbar.
   Marke und Knoepfe starten hell und werden beim Andocken an die
   Blush-Leiste dunkel -- dieselbe Fortschrittsvariable (--nav-progress),
   die schon den Hintergrund der Leiste steuert.
   ============================================================ */
.hero-a .hero { overflow: hidden; color: var(--cream); }
.hero-a .hero__media {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-a .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(42, 18, 30, .55) 0%,
      rgba(42, 18, 30, .22) 38%,
      rgba(42, 18, 30, .30) 62%,
      rgba(42, 18, 30, .78) 100%);
}
/* Nur die Headline braucht einen eigenen Stapelrang ueber dem Video.
   .hero__bottom NICHT anfassen: v9.css hebt es auf z-index 56, damit die
   angedockten Knoepfe ueber der Kopfleiste (50) liegen. Mit z-index 1 hier
   verschwanden sie beim Andocken hinter der Leiste -- gemessen per
   elementFromPoint. */
.hero-a .hero__title { position: relative; z-index: 1; }
.hero-a .hero__title { color: var(--cream); }
.hero-a .hero__title .line--accent { color: var(--blush); }
.hero-a .hero__sub { color: var(--cream); }

.hero-a .brand-float .logo--light {
  display: block;
  position: absolute;
  inset: 0;
  opacity: calc(1 - var(--nav-progress, 0));
}
.hero-a .brand-float .logo--dark { opacity: var(--nav-progress, 0); }

/* Knoepfe: zwei Ebenen. Die helle (Blush) liegt unten und ist die bedienbare;
   die Plum-Ebene darueber zeigt nur, was schon innerhalb der Kopfleiste
   liegt -- v13.js setzt --ink-split auf den Abstand von der Oberkante der
   Knopfleiste bis zur Unterkante der Kopfleiste. */
.hero-a .hero__actions > .btn {
  background: var(--blush);
  border-color: var(--blush);
  color: var(--plum);
}
.hero-a .hero__actions > .openstate .openstate__pill,
.hero-a .hero__actions > .openstate .openstate__times { color: var(--cream); }

.v13 .hero__actions-ink { display: none; }
.hero-a .hero__actions-ink {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: inherit;
  pointer-events: none;
  clip-path: inset(0 0 calc(100% - var(--ink-split, 0px)) 0);
}
/* Angedockt: ganz Plum, ohne Rechnung (v13.js setzt .is-full). */
.hero-a .hero__actions-ink.is-full { clip-path: none; }
/* Die Plum-Ebene zeigt die Standardfarben der Knoepfe: Plum mit Blush-Schrift. */
.hero-a .hero__actions-ink .openstate__pill,
.hero-a .hero__actions-ink .openstate__times { color: var(--plum); }
/* KEIN position:relative auf .hero__actions: v1.js setzt dort actions-float
   (fixed) bzw. actions-anchored/-fixed, und die sind bereits Bezugsrahmen fuer
   die absolute Ebene. Ein relative hier ueberschrieb fixed -- die Leiste lief
   am Desktop mit doppeltem Abstand (gemessen 1410 statt 705 px). */

/* Burger: hell, solange die Kopfleiste noch nicht da ist; mit ihrem
   Hintergrund (--nav-progress) wird er Plum. */
.hero-a .burger {
  background: color-mix(in srgb, var(--plum) calc(var(--nav-progress, 0) * 100%), var(--blush));
}
.hero-a .burger span {
  background: color-mix(in srgb, var(--blush) calc(var(--nav-progress, 0) * 100%), var(--plum));
}
.hero-a .openstate-mobile .openstate__pill,
.hero-a .openstate-mobile .openstate__times { color: var(--cream); }


/* ============================================================
   B -- SPLIT
   Text links auf Blush wie bisher, rechts das Video hochkant ueber die
   volle Hero-Hoehe bis an den Rand. Eckig.
   ============================================================ */
.hero-b .hero {
  padding-right: calc(46% + clamp(2rem, 4vw, 4rem));
  justify-content: center;
}
.hero-b .hero__media {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  z-index: 0;
}
.hero-b .hero__logo { margin-left: 0; margin-right: 0; }
.hero-b .hero__title { font-size: clamp(2.8rem, min(6.4vw, 15vh), 8rem); }
.hero-b .hero__bottom { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.hero-b .hero__actions-slot { margin-left: 0; justify-content: flex-start; }


/* ============================================================
   C -- FENSTER
   Typografischer Hero bleibt, die Headline wird einzeilig, darunter das
   Video als breites Band von Rand zu Rand. Knoepfe und Satz unter dem Band.
   ============================================================ */
.hero-c .hero { justify-content: center; }
.hero-c .hero__logo { order: 0; }
.hero-c .hero__title {
  order: 1;
  text-align: center;
  font-size: clamp(2.6rem, 6vw, 6.4rem);
  line-height: .9;
}
.hero-c .hero__title .line { display: inline-block; margin: 0 .12em; }
.hero-c .hero__media {
  display: block;
  position: relative;   /* Anker fuer Standbild und Video */
  order: 2;
  height: clamp(14rem, 40vh, 32rem);
  margin: clamp(1.2rem, 3vh, 2rem) calc(var(--pad-x) * -1) 0;
}
.hero-c .hero__bottom { order: 3; }


/* ============================================================
   Telefonbreite
   ============================================================ */
@media (max-width: 860px) {
  /* A: Inhalt etwas hoeher, sonst ragt die Ampel unter den Knoepfen ins
     Laufband. Der Hero zentriert -- mehr Polster unten hebt den Block um
     die Haelfte davon. */
  .hero-a .hero { padding-bottom: 6.5rem; }

  /* B und C muessen mobil in den ersten Bildschirm passen (iPhone 13: 606 px
     Hero). Marke und Headline kleiner, Satz kompakter, weniger Abstand
     ueber den Knoepfen. */
  .hero-b .hero__logo,
  .hero-c .hero__logo { width: min(170px, 46vw); margin-bottom: 1rem; }
  .hero-b .hero__title,
  .hero-c .hero__title { font-size: clamp(2.6rem, 12.5vw, 4.5rem); }
  .hero-b .hero__title .line,
  .hero-c .hero__title .line { display: block; margin: 0; }
  /* Mobil ersetzt das Video den Satz -- mit ihm blieben dem Video auf dem
     iPhone 13 nur 130 px. In Variante a bleibt der Satz stehen. */
  .hero-b .hero__sub,
  .hero-c .hero__sub { display: none; }
  .hero-b .hero__bottom,
  .hero-c .hero__bottom { order: 3; gap: .8rem; margin-top: 1rem; }
  .hero-b .hero__actions-slot,
  .hero-c .hero__actions-slot { margin-top: .4rem; margin-bottom: 0; margin-inline: auto; }

  /* B: gerahmtes Hochkant-Fenster mit Rand -- bleibt vom Band in C
     unterscheidbar. */
  .hero-b .hero { padding-right: var(--pad-x); }
  .hero-b .hero__logo { order: 0; margin-inline: auto; }
  .hero-b .hero__title { order: 1; }
  .hero-b .hero__media {
    position: relative;
    order: 2;
    width: 62%;
    height: 30svh;
    margin: 1rem auto 0;
    border: 3px solid var(--plum);
  }
  .hero-b .hero__bottom { align-items: center; }

  /* C: Band von Rand zu Rand */
  .hero-c .hero__media { margin-top: 1rem; }

  /* Feste Hero-Hoehe statt Mindesthoehe: das Video nimmt sich per flex genau
     den Rest zwischen Headline und Knoepfen. So passt alles in den ersten
     Bildschirm, egal wie hoch das Telefon ist -- feste svh-Werte waren auf
     dem iPhone 13 23 px zu hoch und auf dem SE noch mehr. Unten Platz fuer
     die Ampel, die absolut unter den Knoepfen haengt. */
  .hero-b .hero,
  .hero-c .hero {
    height: calc(100svh - var(--v9-marquee-h, 4rem) + .35rem);
    min-height: 0;
    justify-content: flex-start;
    padding-bottom: 3.4rem;
  }
  .hero-b .hero__media,
  .hero-c .hero__media {
    flex: 1 1 0;
    height: auto;
    min-height: 7rem;
  }

  /* A auf niedrigen Telefonen (SE): Marke kleiner, sonst liegt die Ampel
     knapp unter dem Bildrand. */
}
@media (max-width: 860px) and (max-height: 620px) {
  .hero-a .hero__logo { width: min(180px, 50vw); }
  .hero-a .hero { padding-bottom: 5rem; }
}

/* ============================================================
   Menue auf Plum -- seit das Statement vor der Line-Up steht, lagen
   Smoothies und Menue beide auf Creme direkt hintereinander.
   ============================================================ */
.v13 .menuboards { background: var(--plum); color: var(--blush); }
.v13 .menuboards .eyebrow { color: var(--blush); }
.v13 .menuboards__title { color: var(--cream); }
.v13 .menuboards__foot .btn {
  background: var(--blush);
  border-color: var(--blush);
  color: var(--plum);
}
.v13 .menuboards__foot .btn:hover {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--white);
}

/* ============================================================
   Laden-Collage zwischen Smoothies und Menue
   ============================================================ */
.storecollage {
  --store-n: 5;                 /* Bilder je Gruppe -- muss zum Markup passen */
  overflow: hidden;
  background: var(--cream);
  line-height: 0;
}
.storecollage__track {
  display: flex;
  width: max-content;
}
.storecollage__item {
  margin: 0;
  flex: 0 0 auto;
  overflow: hidden;
}
.storecollage__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop: durchgehend, nahtlos, eckig. */
@media (min-width: 861px) {
  .storecollage__item {
    height: clamp(18rem, 46vh, 32rem);
    aspect-ratio: 3 / 2;
  }
  .storecollage__track { animation: storecollage-run 35s linear infinite; }   /* rund 90 px/s bei 1440 px */
  .storecollage:hover .storecollage__track { animation-play-state: paused; }
}
@keyframes storecollage-run { to { transform: translateX(-50%); } }

/* Telefon: genau ein Bild sichtbar, Halt, dann gleiten.
   Je Bild 20 % der Laufzeit: gut 73 % davon steht es, der Rest ist der
   Uebergang. Nach dem fuenften Bild steht die erste Kopie der zweiten Gruppe
   im Bild -- identisch mit dem Start, der Sprung zurueck auf 0 ist unsichtbar. */
@media (max-width: 860px) {
  /* Querformat wie die Fotos selbst (3:2) -- quadratisch war zu hoch und
     schnitt die Fassaden seitlich ab. */
  .storecollage__item {
    width: 100vw;
    aspect-ratio: 3 / 2;
  }
  .storecollage__track { animation: storecollage-step 15s infinite; }
}
@keyframes storecollage-step {
  0%, 14.67%    { transform: translateX(0);              animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  20%, 34.67%   { transform: translateX(-100vw);         animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  40%, 54.67%   { transform: translateX(calc(-2 * 100vw)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  60%, 74.67%   { transform: translateX(calc(-3 * 100vw)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  80%, 94.67%   { transform: translateX(calc(-4 * 100vw)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100%          { transform: translateX(calc(-5 * 100vw)); }
}

/* Ohne Bewegung: Desktop steht, Telefon wird von Hand gewischt. */
@media (prefers-reduced-motion: reduce) {
  .storecollage__track { animation: none !important; }
  .storecollage { overflow-x: auto; scroll-snap-type: x mandatory; }
  .storecollage__item { scroll-snap-align: start; }
}

/* ============================================================
   Smoothie-Line-Up: Blush statt Creme, am Desktop kleiner
   ============================================================ */
/* Creme mit hellem Schein las sich zwischen Blush und Plum als Weiss.
   Jetzt flaechig Blush, ohne Schein hinter dem Mittelbecher. */
.v13 .lineup { background: var(--blush); }
.v13 .lineup__stage::before { display: none; }

/* Desktop: die Section fuellte den Bildschirm zu wuchtig (Titel 88 px,
   Mittelbecher 486 px bei 1440x900). Rund ein Viertel kleiner. Der
   Faecherschritt haengt in v8.css an der Fensterbreite -- mit kleineren
   Bechern standen sie dadurch zu weit auseinander. Deshalb an die
   Becherhoehe gekoppelt, im selben Verhaeltnis wie bisher (128/486). */
@media (min-width: 861px) {
  .v13 .lineup {
    --cup-h: clamp(16rem, 40vh, 26rem);
  }
  .v13 .lineup__cup {
    --spread: calc(var(--cup-h) * .263);
    --lift: calc(var(--cup-h) * .041);
  }
  .v13 .lineup__title { font-size: clamp(2rem, 4.6vw, 4.2rem); }
  .v13 .lineup__eyebrow { font-size: clamp(.85rem, .95vw, 1rem); }
}

/* Concept-Store-Bilder mit runden Ecken -- derselbe Radius wie die
   Catering-Kacheln (v1.css), damit beide Bildbloecke gleich wirken.
   overflow: hidden steht schon auf .concept__slides, die Beschriftung unten
   wird also mitbeschnitten. */
.v13 .concept__slides { border-radius: clamp(14px, 3vw, 22px); }

/* --- Produktfotos ------------------------------------------------------
   An der Stelle der Line-Up: vier Karten in Creme, im Bild oben links der
   Name, darunter der Order-Knopf. Die Fotos sind vorab so beschnitten, dass
   die Motive mittig und gleich hoch stehen -- die Karte muss dafuer nichts
   ausgleichen. */
.v13 .products {
  padding: var(--section-y) var(--pad-x);
  background: var(--blush);
}
/* Kopf wie in den anderen Sections: Eyebrow, dann die Zeile mit rotem
   Akzent. Ohne ihn standen vier Karten ohne Anlass in der Seite. */
.v13 .products__head { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.v13 .products__title {
  margin: .4rem 0 0;
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
  line-height: .92;
}
.v13 .products__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.4rem);
}
.v13 .products__item {
  display: flex;
  flex-direction: column;
  gap: clamp(.6rem, 1vw, .85rem);
  margin: 0;
  padding: clamp(.7rem, 1.3vw, 1.1rem);
  border-radius: clamp(14px, 3vw, 22px);
  /* Kein Creme und schon gar kein Weiss: eine aufgehellte Fassung der
     Seitenfarbe, damit die Karte vom Lachs abgesetzt ist, ohne zu leuchten. */
  background: color-mix(in srgb, var(--blush) 32%, #fff);
}
.v13 .products__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: clamp(8px, 1.6vw, 12px);
}
/* Der Name steht auf der Karte ueber dem Bild, nicht im Bild. */
.v13 .products__name {
  color: var(--plum);
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(.95rem, 1.15vw, 1.15rem);
  line-height: 1.1;
  letter-spacing: .01em;
}
.v13 .products__btn {
  align-self: center;
  background: var(--plum);
  color: var(--blush);
  border-color: var(--plum);
}
.v13 .products__btn:hover {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--white);
}

@media (max-width: 860px) {
  /* Mobil ein 2x2-Raster statt der Wischreihe (Patrick, 24.09.2026) --
     vorher sah man ohne Wischen genau ein Produkt. */
  .v13 .products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
  }
  .v13 .products__item { gap: .5rem; padding: .6rem; }
  .v13 .products__name { font-size: .95rem; min-height: 2.2em; }
  .v13 .products__btn { padding: .5rem 1.1rem; font-size: .82rem; }
}
}
}