/* ============================================================
   v14 -- VORSCHAU: das Health-Konzept wird sichtbar.
   Laedt nach dem kompletten v13-Stapel; v13 selbst bleibt unberuehrt.
   Alles hier haengt an .v14.

   Kompakt (22.09.2026, Patrick: "zu wuchtig"): jede neue Section soll im
   Vollbild in einen Bildschirm passen, im Halbbild hoechstens knapp mehr.
   Deshalb haengen Abstaende und Bildgroessen an der Fensterhoehe (vh), die
   Titel sind einzeilig, und zwischen 700 und 1099 px -- ein halbes
   Laptopfenster -- gibt es eigene Zwischenlayouts statt der Telefonansicht.
   Gemessen mit scratchpad/heights.js (Section-Hoehe / Viewport-Hoehe).
   ============================================================ */

/* Einblenden: siehe Block 12 am Ende (ein Effekt fuer die ganze Seite,
   gesteuert von js/v14-reveal.js). Frueher stand hier je Section eine
   eigene Regel, dazu erzwungen sichtbare Wischreihen -- Patrick, 03.10.2026:
   "Images sind schon da, waehrend Texte rein animieren". */
/* Wischreihen: nur waagerecht beweglich. Die Eintraege blenden mit der
   Reihe ein (v14-reveal.js beobachtet die Reihe, nicht den einzelnen
   Eintrag, der rechts ausserhalb liegen kann). */
@media (max-width: 1099px) {
  .v14 .smoothies__grid,
  .v14 .ss-arches { overflow-y: hidden; }
  .v14 .coffee-row { overflow-y: hidden; }
}

/* --- Gemeinsames Geruest der vier Sections --------------------------------- */
.v14 .smoothies,
.v14 .softserve,
.v14 .coffee,
.v14 .food,
.v14 .fridge {
  --sec-y: clamp(2.6rem, 6.2vh, 4.6rem);
  --sec-gap: clamp(1.3rem, 3.4vh, 2.6rem);
  padding: var(--sec-y) var(--pad-x);
}
/* Kopf: links Eyebrow, Titel, Satz; rechts, was dazugehoert (Logo, Etikett,
   Satz). Unten buendig. */
.v14 .sec-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem clamp(1.5rem, 4vw, 4rem);
}
.v14 .sec-head .eyebrow { margin-bottom: .6rem; }
/* Titel einzeilig am Desktop, der Akzent laeuft in derselben Zeile. */
.v14 .sec-title {
  font-size: clamp(2rem, 2.5vw + 1.5vh, 4.4rem);
  line-height: .92;
  letter-spacing: -.01em;
}
.v14 .sec-title__accent { color: var(--coral); }
.v14 .sec-lead {
  max-width: 46ch;
  margin: clamp(.6rem, 1.4vh, 1rem) 0 0;
  font-size: clamp(.95rem, .9vw, 1.05rem);
  line-height: 1.5;
  text-wrap: pretty;
}
/* Fuss: links, was man dazunehmen kann; rechts der Knopf. */
.v14 .sec-foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
  margin-top: var(--sec-gap);
  padding-top: clamp(.9rem, 2.2vh, 1.4rem);
  border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}
.v14 .sec-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem 1.4rem;
  margin: 0;
}
.v14 .sec-btn { padding: .7rem 1.5rem; font-size: clamp(.95rem, 1.1vw, 1.15rem); }
.v14 .smoothies .sec-btn,
.v14 .food .sec-btn { background: var(--blush); border-color: var(--blush); color: var(--plum); }
.v14 .smoothies .sec-btn:hover,
.v14 .food .sec-btn:hover { background: var(--coral); border-color: var(--coral); color: var(--white); }
.v14 .sec-more {
  padding-bottom: .15em;
  border-bottom: 2px solid currentColor;
  font-family: var(--display);
  font-size: clamp(.85rem, 1vw, 1rem);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.v14 .sec-more:hover { color: var(--white); }

@media (max-width: 699px) {
  /* minmax(0, ...): sonst setzt der breiteste nicht umbrechende Inhalt
     (Fakten, Titel) die Spalte -- und schiebt die Seite ueber den Rand. */
  .v14 .sec-head { grid-template-columns: minmax(0, 1fr); }
  .v14 .sec-foot { grid-template-columns: 1fr; }
  .v14 .sec-cta { justify-content: flex-start; }
}

/* Pills in Blush-Kontur auf Plum: Add-ons unter den Smoothies und die
   Toppings im Build-your-own-Feld. Formsprache der Ladenscreens. */
.v14 .pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.v14 .pills li {
  display: inline-flex;
  align-items: center;
  padding: .42em .95em .38em;
  border: 1.5px solid color-mix(in srgb, var(--blush) 60%, transparent);
  border-radius: 999px;
  color: var(--blush);
  font-size: clamp(.78rem, .9vw, .88rem);
  line-height: 1.15;
  white-space: nowrap;
}


/* ============================================================
   0  Kopfleiste: Catering-Knopf und Sektionsleiste
   Beides steht in includes/nav-v1.php nur, wenn v14 es uebergibt, und
   beides erscheint mit der Leiste: dieselbe Fortschrittsvariable
   (--nav-progress), die ihren Hintergrund einblendet. Bedienbar erst, wenn
   sie ganz steht (.is-interactive) -- vorher faengt .nav keine Klicks.
   Keine Uebergaenge auf der Deckkraft: die haengt am Scrollen und wuerde
   sonst hinterherlaufen (siehe v12.css zur Leiste).
   ============================================================ */

/* Die Fortschrittsvariable endet an <main>. v1.js setzt --nav-progress bei
   JEDEM Scrollframe auf <body>; sie wird vererbt, also baut der Browser dafuer
   den Style aller Nachfahren neu auf. Gelesen wird sie nur von Kopfleiste,
   Logo und Sektionsleiste -- alle ausserhalb von <main>. Im Inhalt kostete das
   vorher jeden Frame, sobald das Kuehlschrank-SVG (rund 5000 Elemente) im
   DOM stand: in WebKit 66 ms statt 18 ms pro Frame, das Logo ruckelte beim
   Scrollen (Patrick, 03.10.2026: "total abgehackt"). Mit der Kappung bleibt es
   bei 18 ms, auch mit SVG. Wer im Inhalt je var(--nav-progress) braucht, setzt
   die Variable dort selbst. */
.v14 main { --nav-progress: 0; }

/* Catering: Desktop, links neben Menu/Order. Kontur statt Flaeche, damit
   die zwei Bestellknoepfe die ersten bleiben. Steht ausserhalb der
   Messkopie, die angedockten Knoepfe landen weiter an derselben Stelle. */
.v14 .nav__cta {
  opacity: var(--nav-progress);
  background: transparent;
  border-color: var(--plum);
  color: var(--plum);
  white-space: nowrap;
}
.v14 .nav__cta:hover { background: var(--plum); border-color: var(--plum); color: var(--blush); }
.v14 .nav:not(.is-interactive) .nav__cta { pointer-events: none; visibility: hidden; }
.no-scroll .v14 .nav__cta { opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
  .v14 .nav__cta { display: none; }   /* kein Platz; mobil steht Catering in der Leiste darunter */
}

/* Sektionsleiste: zweite Zeile der Kopfleiste, zeigt, wo man ist. Nur
   Telefon und Halbbild -- am Desktop hat die Leiste Platz fuer Catering,
   und die Sections sind einen Bildschirm hoch. */
.v14 .secnav { display: none; }
@media (max-width: 1099px) {
  .v14 .nav { flex-wrap: wrap; row-gap: 0; }
  .v14 .secnav {
    display: block;
    flex-basis: calc(100% + 2 * var(--pad-x));   /* bis an beide Raender */
    min-width: 0;
    margin: .5rem calc(var(--pad-x) * -1) -.35rem;
    border-top: 1px solid color-mix(in srgb, var(--plum) calc(var(--nav-progress) * 14%), transparent);
    opacity: var(--nav-progress);
  }
  .v14 .nav:not(.is-interactive) .secnav { visibility: hidden; }
  .no-scroll .v14 .secnav { opacity: 0; pointer-events: none; }
  .v14 .secnav__list {
    list-style: none;
    margin: 0;
    padding: .4rem var(--pad-x) .1rem;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, transparent, #000 var(--pad-x), #000 calc(100% - var(--pad-x)), transparent);
    mask: linear-gradient(90deg, transparent, #000 var(--pad-x), #000 calc(100% - var(--pad-x)), transparent);
  }
  .v14 .secnav__list::-webkit-scrollbar { display: none; }
  .v14 .secnav__link {
    display: block;
    padding: .42rem .85rem .36rem;
    border-radius: 999px;
    font-family: var(--display);
    font-size: .84rem;
    letter-spacing: .03em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--plum);
    transition: background-color .25s var(--ease), color .25s var(--ease);
  }
  .v14 .secnav__link.is-active { background: var(--plum); color: var(--blush); }
}

/* Fassung b (?sm=b): Kapitelzeile. Eine Zeile statt der Pillenreihe --
   links Nummer und Name der aktuellen Section, rechts "All 11" zum
   Aufklappen; darunter eine Haarlinie, die sich mit dem Fortschritt durch
   die Seite fuellt. Die Liste klappt unter der Kopfleiste auf, nummeriert
   wie die Legende am Kuehlschrank. Nur Telefon und Halbbild. */
.v14 .chapnav { display: none; }
@media (max-width: 1099px) {
  .v14 .chapnav {
    display: block;
    flex-basis: calc(100% + 2 * var(--pad-x));
    min-width: 0;
    margin: .5rem calc(var(--pad-x) * -1) -.35rem;
    opacity: var(--nav-progress);
  }
  .v14 .nav:not(.is-interactive) .chapnav { visibility: hidden; }
  .no-scroll .v14 .chapnav { opacity: 0; pointer-events: none; }
  .v14 .chapnav__bar {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    width: 100%;
    padding: .62rem var(--pad-x) .55rem;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--plum) 14%, transparent);
    background: none;
    color: var(--plum);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .v14 .chapnav__no {
    font-family: var(--display);
    font-size: .95rem;
    line-height: 1;
    color: var(--coral);
    font-variant-numeric: tabular-nums;
  }
  .v14 .chapnav__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-family: var(--display);
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: .02em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .v14 .chapnav__all {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .22em;
    line-height: 1;
    text-transform: uppercase;
  }
  /* Winkel, dreht sich beim Aufklappen */
  .v14 .chapnav__chev {
    width: .42rem;
    height: .42rem;
    margin-top: -.2rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .3s var(--ease), margin .3s var(--ease);
  }
  .v14 .chapnav.is-open .chapnav__chev { margin-top: .2rem; transform: rotate(-135deg); }
  /* Fortschritt durch die Seite -- v14.js setzt die Breite. */
  .v14 .chapnav__track {
    display: block;
    height: 2px;
    background: color-mix(in srgb, var(--plum) 12%, transparent);
  }
  .v14 .chapnav__fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--coral);
    transform: scaleX(var(--chap-progress, 0));
    transform-origin: left;
  }
  /* Die aufgeklappte Liste: unter der Kopfleiste, ueber der Seite. */
  .v14 .chapnav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 7rem);
    margin: 0;
    padding: .4rem var(--pad-x) .9rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    background: var(--blush);
    box-shadow: 0 1.4rem 2rem -1rem rgba(42, 18, 30, .45);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.4rem);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  }
  .v14 .chapnav.is-open .chapnav__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
  }
  .v14 .chapnav__panel li + li { border-top: 1px solid color-mix(in srgb, var(--plum) 16%, transparent); }
  .v14 .chapnav__link {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    padding: .72rem 0 .62rem;
    font-family: var(--display);
    font-size: 1.15rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--plum);
  }
  .v14 .chapnav__link-no { width: 1.4rem; font-size: .9rem; color: var(--coral); font-variant-numeric: tabular-nums; }
  .v14 .chapnav__link.is-active { color: var(--coral); }
  .v14 .chapnav__link.is-active::after {
    content: "";
    align-self: center;
    width: .45rem;
    height: .45rem;
    margin-left: auto;
    border-radius: 50%;
    background: var(--coral);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v14 .chapnav__panel,
  .v14 .chapnav__chev { transition: none; }
}

/* Sprungziele unter der Leiste landen lassen, nicht dahinter -- knapp
   darunter, damit kein Streifen der vorigen Section stehen bleibt.
   Gemessen: Leiste 61 px (Desktop), mit Sektionsleiste 99 px. */
.v14 main section[id] { scroll-margin-top: 3.7rem; }
@media (max-width: 1099px) {
  .v14 main section[id] { scroll-margin-top: 6.05rem; }
  .v14:has(.chapnav) main section[id] { scroll-margin-top: 6.3rem; }   /* Kapitelzeile: 102 px */
}


/* ============================================================
   1  Favoriten-Karten: Kategorie ueber dem Namen, Infozeile unterm Bild
   ============================================================ */
.v14 .products__cap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}
.v14 .products__kind {
  display: inline-block;
  padding: .32em .8em .28em;
  border: 1.5px solid var(--plum);
  border-radius: 999px;
  color: var(--plum);
  font-size: clamp(.62rem, .7vw, .7rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
}
.v14 .products__name { display: block; }
.v14 .products__line {
  margin: 0;
  color: var(--plum);
  font-size: clamp(.84rem, .95vw, .95rem);
  line-height: 1.4;
}
/* Unterschiedlich lange Zeilen duerfen die Knoepfe nicht verschieben: der
   Knopf sitzt immer unten. */
.v14 .products__btn { margin-top: auto; }

/* Kopf, Bild, Zeile und Knopf auf gemeinsamen Zeilen ueber alle Karten
   einer Reihe: mobil bricht "Caesar's Chicken Roll" zweizeilig um, und das
   Bild daneben stand dadurch 17 px hoeher. Zeilenabstand des Rasters 0 aus
   demselben Grund wie bei den Smoothies; die Reihen trennt margin-bottom,
   das negative margin am Raster nimmt den Rest nach der letzten Reihe zurueck. */
@supports (grid-template-rows: subgrid) {
  .v14 .products__grid {
    --row-space: clamp(.8rem, 1.6vw, 1.4rem);
    row-gap: 0;
    margin-bottom: calc(var(--row-space) * -1);
  }
  .v14 .products__item {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: clamp(.6rem, 1vw, .85rem);
    margin-bottom: var(--row-space);
  }
  .v14 .products__cap { align-self: start; }
  .v14 .products__line { align-self: start; }
  .v14 .products__btn { align-self: end; justify-self: center; }
}

/* Telefon: flacher. Keine Kategorie-Pill, der Name selbst ist die Pill;
   statt vier Order-Knoepfen einer mittig unter den Karten (Patrick,
   23.09.2026: "das ist zu hoch in mobil"). Die Karte hat damit drei
   Zeilen statt vier -- das Subgrid zaehlt mit. */
.v14 .products__cta { display: none; }
@media (max-width: 699px) {
  .v14 .products .products__kind,
  .v14 .products .products__btn { display: none; }
  .v14 .products .products__item { grid-row: span 3; }
  /* Einzeilig: "Caesar's Chicken Roll" braucht bei 12,8 px 160 px, da
     sind bei 360-390 px Breite nur 135-150. Deshalb mit der Breite
     kleiner und ohne Sperrung; Auslassungspunkte nur als Notnagel. */
  .v14 .products .products__name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    padding: .4em .72em .34em;
    border: 1.5px solid var(--plum);
    border-radius: 999px;
    font-size: min(.8rem, 3.05vw);
    line-height: 1.1;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .v14 .products .products__cta {
    display: flex;
    justify-content: center;
    margin: 1.1rem 0 0;
  }
}


/* Mobil Raster statt Karussell (v13.css macht dort eine Wischreihe mit einer
   Karte pro Bildschirm -- wer nicht wischte, sah genau ein Produkt). Zwei
   Spalten am Telefon, ab rund 700 px vier. */
@media (max-width: 860px) {
  .v14 .products { overflow: visible; }
  .v14 .products__grid {
    --row-space: .7rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    column-gap: .7rem;   /* nur Spalten -- die Reihen trennt --row-space */
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .v14 .products__item {
    flex: none;
    gap: .55rem;
    padding: .6rem;
  }
  .v14 .products__name { font-size: .98rem; }
  .v14 .products__line { font-size: .8rem; line-height: 1.35; }
  .v14 .products__btn { padding: .5rem 1.1rem; font-size: .82rem; }
}




/* ============================================================
   2  Smoothies with benefits
   ============================================================ */
/* Die Glow-Farbe der Buehne blendet weich von Drink zu Drink -- dafuer muss
   der Browser wissen, dass --glow eine Farbe ist. */
@property --glow {
  syntax: "<color>";
  inherits: true;
  initial-value: #f87b7e;
}
.v14 .smoothies {
  position: relative;
  overflow: hidden;
  background: var(--plum);
  color: var(--blush);
  transition: --glow .9s var(--ease);
}
.v14 .smoothies .eyebrow { color: var(--blush); }
.v14 .smoothies .sec-title { color: var(--white); }

/* Zwei Fakten rechts im Kopf: 510 ml und Supplements by Moleqlar. Keine
   Box -- eine Haarlinie trennt sie, der Wert steht gross, darueber klein,
   was er meint. Das Logo ist eine CSS-Maske auf der SVG von moleqlar.com. */
.v14 .sm-facts {
  --fact: clamp(2rem, 1.9vw + 1.1vh, 3.1rem);
  display: flex;
  flex-wrap: wrap;
  row-gap: .9rem;
  margin: 0;
}
.v14 .sm-fact {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .75rem;
  padding: .15rem clamp(1.2rem, 2.4vw, 2.4rem);
}
.v14 .sm-fact:first-child { padding-left: 0; }
.v14 .sm-fact:last-child { padding-right: 0; }
.v14 .sm-fact + .sm-fact { border-left: 1px solid color-mix(in srgb, var(--blush) 30%, transparent); }
.v14 .sm-fact dt { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
.v14 .sm-fact dd { margin: 0; }
.v14 .sm-fact__value {
  font-family: var(--display);
  font-size: var(--fact);
  line-height: .74;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.v14 .sm-fact__logo {
  display: block;
  height: calc(var(--fact) * .72);
  aspect-ratio: 550 / 77;
  background: var(--white);
  -webkit-mask: url("../img/brands/moleqlar.svg") center / contain no-repeat;
  mask: url("../img/brands/moleqlar.svg") center / contain no-repeat;
}
/* Moleqlar ist die Botschaft: das Logo steht gut anderthalbmal so hoch wie
   die Zahl daneben (Patrick, 23.09.: "mach das Supplements by Moleqlar
   groesser"). Unterkanten bleiben buendig. */
.v14 .sm-fact--brand dt { font-size: .8rem; letter-spacing: .26em; color: var(--white); }
.v14 .sm-fact--brand .sm-fact__logo { height: calc(var(--fact) * 1.15); }
/* Partnerlogos verlinkt; beim Zeigen leicht angehoben. */
.v14 .sm-fact__link { display: block; transition: transform .25s var(--ease), opacity .25s ease; }
.v14 .sm-fact__link:hover { transform: translateY(-2px); opacity: .85; }
/* Coffee: Matchasome als runder Sticker in seinen Farben, Bunca als
   Wortmarke in Plum (Maske auf bunca.svg, 1706 x 171). */
/* Der Sticker traegt seinen Namen im Rund -- mindestens 5,5 rem, sonst ist
   "MATCHASOME" nicht lesbar (Patrick). */
.v14 .coffee-facts { --logo-h: max(5.5rem, calc(var(--fact) * 2.4)); }
.v14 .coffee-facts__matcha { display: block; width: var(--logo-h); height: auto; }
.v14 .coffee-facts__bunca {
  display: block;
  height: calc(var(--fact) * .5);
  aspect-ratio: 1706 / 171;
  background: var(--plum);
  -webkit-mask: url("../img/brands/bunca.svg") center / contain no-repeat;
  mask: url("../img/brands/bunca.svg") center / contain no-repeat;
}
/* Etiketten auf einer Hoehe, die Logos darunter mittig in gleich hohen Feldern */
.v14 .coffee-facts .sm-fact { justify-content: flex-start; }
.v14 .coffee-facts dd { display: flex; align-items: center; justify-content: center; height: var(--logo-h); }

@media (min-width: 700px) and (max-width: 1099px) {
  /* Halbbild: der Titel bekommt die ganze Breite (sonst bricht er um), die
     Fakten stehen rechts neben dem Satz. Dafuer loest sich die linke
     Kopfspalte auf, Eyebrow, Titel und Satz ordnen sich im Raster. */
  .v14 .smoothies__head,
  .v14 .coffee__head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "eyebrow eyebrow" "title title" "lead facts";
    row-gap: 0;
  }
  .v14 .smoothies__head .sec-head__main,
  .v14 .coffee__head .sec-head__main { display: contents; }
  .v14 .smoothies__head .eyebrow,
  .v14 .coffee__head .eyebrow { grid-area: eyebrow; justify-self: start; }
  .v14 .smoothies__head .sec-title,
  .v14 .coffee__head .sec-title { grid-area: title; }
  .v14 .smoothies__head .sec-lead,
  .v14 .coffee__head .sec-lead { grid-area: lead; }
  .v14 .smoothies__head .sm-facts,
  .v14 .coffee__head .sm-facts { grid-area: facts; }
}
@media (max-width: 699px) {
  .v14 .sm-facts { --fact: 2.1rem; margin-top: .3rem; }
  .v14 .coffee-facts { --fact: 1.6rem; }   /* zwei Woerter je Wert statt Zahl und Logo */
  /* Das grosse Logo passt nicht neben die 510 ml: untereinander, die
     Haarlinie dazwischen liegt dann oben statt links. */
  .v14 .smoothies .sm-facts { flex-direction: column; row-gap: 1rem; }
  .v14 .smoothies .sm-fact { padding: 0; }
  .v14 .smoothies .sm-fact + .sm-fact {
    padding-top: 1rem;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--blush) 30%, transparent);
  }
}

.v14 .smoothie__tag {
  display: inline-block;
  max-width: 100%;
  padding: .34em .75em .3em;
  border-radius: .9em;
  background: var(--pill);
  color: var(--pill-ink);
  font-size: clamp(.58rem, .66vw, .7rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* --- Fassung a: Reihe ----------------------------------------------------
   Neun Spalten ab 1100 px, die Becherhoehe an Breite UND Fensterhoehe
   gebunden. Name, Pill und Supplement per Subgrid auf gemeinsamen Zeilen. */
.v14 .smoothies__grid {
  --cup-h: clamp(8.5rem, min(16vw, 27vh), 15.5rem);
  list-style: none;
  margin: var(--sec-gap) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: clamp(.5rem, 1vw, 1.1rem);
}
.v14 .smoothie {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  justify-items: center;
  min-width: 0;
  text-align: center;
}
.v14 .smoothie__cup {
  position: relative;
  display: block;
  width: 100%;
  height: var(--cup-h);
  margin-bottom: clamp(.7rem, 1.6vh, 1.1rem);
}
.v14 .smoothie__cup img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transition: transform .5s var(--ease);
}
.v14 .smoothie:hover .smoothie__cup img { transform: translateY(-.35rem); }
/* Kontaktschatten unter dem runden Boden. */
.v14 .smoothie__cup::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.4rem;
  width: calc(var(--cup-h) * .42);
  height: calc(var(--cup-h) * .075);
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18, 5, 12, .6), transparent);
}
.v14 .smoothie__name {
  align-self: end;
  margin: 0 0 .45rem;
  font-family: var(--display);
  font-size: clamp(.95rem, 1.35vw, 1.3rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}
.v14 .smoothie__tag { align-self: start; }
.v14 .smoothie__boost {
  align-self: start;
  margin: .4rem 0 0;
  font-size: clamp(.76rem, .85vw, .88rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}

/* Unter 1100 px eine Wischreihe statt 3x3 -- 3x3 war im Halbbild dreimal so
   hoch wie das Fenster. Die Reihe laeuft bis an die Kanten, damit man sieht,
   dass es weitergeht; das Subgrid haelt Name, Pill und Supplement auch hier
   auf einer Linie. */
@media (max-width: 1099px) {
  .v14 .smoothies__grid {
    --cup-h: clamp(8.5rem, min(34vw, 30vh), 13rem);
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(7.2rem, 21vw, 10rem);
    column-gap: .9rem;
    margin-inline: calc(var(--pad-x) * -1);
    padding: 0 var(--pad-x) .6rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .v14 .smoothies__grid::-webkit-scrollbar { display: none; }
  .v14 .smoothie { scroll-snap-align: start; }
}

/* --- Fassung b: Buehne ----------------------------------------------------
   Der Faecher von der FMLY-Seite (v8.css): aussen kleiner, hoeher und leicht
   nach aussen gekippt. v14.js setzt --o (Abstand zum gewaehlten, -4..4, im
   Kreis) und --d (Betrag). Ab 1100 px stehen die Angaben rechts daneben. */
.v14 .sm-show {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: var(--sec-gap);
}
.v14 .sm-stage {
  --H: clamp(12rem, min(22vw, 40vh), 22rem);   /* Hoehe des vorderen Bechers */
  --spread: calc(var(--H) * .235);
  --lift: calc(var(--H) * .045);
  position: relative;
  height: calc(var(--H) * 1.14);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.v14 .sm-glow {
  position: absolute;
  left: 50%;
  top: 52%;
  width: calc(var(--H) * 1.5);
  height: calc(var(--H) * 1.2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 55%, transparent), transparent);
  opacity: .7;
  pointer-events: none;
}
.v14 .sm-lineup { position: absolute; inset: 0; }
.v14 .sm-cup {
  --s: calc(1 - var(--d) * .085);
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--H) * .47);
  height: var(--H);
  margin: calc(var(--H) / -2) 0 0 calc(var(--H) * -.235);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform:
    translate(calc(var(--o) * var(--spread)), calc(var(--d) * var(--lift) * -1))
    rotate(calc(var(--o) * 2.4deg))
    scale(var(--s));
  z-index: calc(20 - var(--d));
  filter: brightness(calc(1 - var(--d) * .035));
  transition: transform .85s var(--ease), filter .85s var(--ease), opacity .45s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Wechsel am Rand: unsichtbar springen, an der neuen Stelle einblenden. */
.v14 .sm-cup.is-jump { transition: none; opacity: 0; }
.v14 .sm-cup img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  pointer-events: none;
  transition: transform .5s var(--ease);
}
.v14 .sm-cup::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.5rem;
  width: 88%;
  height: calc(var(--H) * .075);
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18, 5, 12, .6), transparent);
}
.v14 .sm-cup:not(.is-active):hover img { transform: translateY(-.45rem); }
.v14 .sm-cup.is-active img { animation: sm-float 5s ease-in-out infinite; }
@keyframes sm-float { 50% { transform: translateY(-.45rem); } }
.v14 .sm-cup:focus-visible { outline: 2px solid var(--blush); outline-offset: .4rem; border-radius: 1rem; }
.v14 .sm-nav {
  position: absolute;
  top: 82%;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  padding: 0;
  border: 2px solid var(--blush);
  border-radius: 50%;
  background: transparent;
  color: var(--blush);
  font-size: 1.15rem;
  line-height: 1;
  transition: background .25s ease, color .25s ease;
}
/* Nur mit Maus: auf Touch bliebe der Hover nach dem Tippen haengen und der
   Pfeil sah aus wie festgeklemmt. */
@media (hover: hover) {
  .v14 .sm-nav:hover { background: var(--blush); color: var(--plum); }
}
.v14 .sm-nav--prev { left: 0; }
.v14 .sm-nav--next { right: 0; }

.v14 .sm-panels { display: grid; }
/* Beim Wechsel erst der alte Text aus (.2 s), dann der neue ein -- nicht
   beide halbtransparent uebereinander (Patrick, 03.10.: "nacheinander"). */
.v14 .sm-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.v14 .sm-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s ease .2s, transform .6s var(--ease) .2s, visibility 0s;
}
.v14 .sm-panel__count { margin: 0 0 .5rem; font-size: .7rem; letter-spacing: .28em; opacity: .75; }
.v14 .sm-panel__count span { opacity: .6; }
.v14 .sm-panel__name {
  margin: 0 0 .7rem;
  font-family: var(--display);
  font-size: clamp(2rem, 2.4vw + 1vh, 3.4rem);
  line-height: .9;
  text-transform: uppercase;
  color: var(--white);
}
.v14 .sm-panel__ingredients { margin: .9rem 0 0; max-width: 34rem; font-size: clamp(.9rem, .95vw, 1rem); line-height: 1.5; }
.v14 .sm-panel__boost { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .9rem 0 0; }
.v14 .sm-chip {
  display: inline-flex;
  align-items: center;
  padding: .42em .95em .38em;
  border-radius: 999px;
  background: var(--white);
  color: var(--plum);
  font-size: clamp(.84rem, .95vw, .95rem);
  font-weight: 700;
  line-height: 1.1;
}
.v14 .sm-dots { display: flex; gap: .5rem; margin-top: clamp(1rem, 2.4vh, 1.6rem); }
.v14 .sm-dot {
  width: .68rem;
  height: .68rem;
  border-radius: 50%;
  background: var(--pill);
  opacity: .5;
  cursor: pointer;
  transition: transform .3s var(--ease), opacity .3s ease, box-shadow .3s ease;
}
.v14 .sm-dot:hover { opacity: .85; }
.v14 .sm-dot.is-active { opacity: 1; transform: scale(1.35); box-shadow: 0 0 0 2px var(--plum), 0 0 0 3.5px var(--pill); }

@media (max-width: 1099px) {
  /* Buehne und Angaben untereinander, beides mittig. */
  .v14 .sm-show { grid-template-columns: 1fr; gap: .2rem; margin-top: calc(var(--sec-gap) * .5); }
  .v14 .sm-stage { --H: clamp(10rem, min(50vw, 22.5vh), 17rem); --spread: calc(var(--H) * .25); }
  .v14 .sm-panel__name { margin-bottom: .5rem; }
  .v14 .sm-panel__ingredients,
  .v14 .sm-panel__boost { margin-top: .6rem; }
  .v14 .sm-dots { margin-top: .9rem; }
  .v14 .sm-info { text-align: center; }
  .v14 .sm-panel__ingredients { margin-inline: auto; }
  .v14 .sm-panel__boost,
  .v14 .sm-dots { justify-content: center; }
  .v14 .sm-nav--prev { left: var(--pad-x); }
  .v14 .sm-nav--next { right: var(--pad-x); }
}
@media (max-width: 860px) {
  /* Fuenf Becher statt neun, sonst stehen sie am Rand halb im Aus. */
  .v14 .sm-cup { opacity: clamp(0, calc(3 - var(--d)), 1); }
}
@media (max-width: 560px) {
  /* Telefon: kleine Pfeile halb im Seitenrand. Gemessen beginnen die
     aeusseren Becher 29-37 px vom Buehnenrand (360-430 px Breite) -- so
     liegen die Pfeile daneben statt darauf. Die Trefferflaeche ist groesser
     als der Kreis. */
  .v14 .sm-nav {
    top: 50%;
    width: 2.15rem;
    height: 2.15rem;
    margin-top: -1.075rem;
    border-width: 1.5px;
    background: color-mix(in srgb, var(--plum) 72%, transparent);
    font-size: .9rem;
  }
  .v14 .sm-nav::before { content: ""; position: absolute; inset: -.45rem; }
  .v14 .sm-nav--prev { left: -.65rem; }
  .v14 .sm-nav--next { right: -.65rem; }
}

/* --- Fuss: Add-ons und Knopf in einer Zeile --- */
.v14 .sm-extra { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; }
.v14 .sm-extra__title {
  font-family: var(--display);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  text-transform: uppercase;
  color: var(--white);
}
.v14 .sm-extra .pills { gap: .35rem; }
.v14 .sm-extra .pills li { font-size: clamp(.72rem, .8vw, .82rem); padding: .36em .8em .32em; }

@media (max-width: 1099px) {
  /* Halbbild: "Add extra" laeuft in der Pillenreihe mit, Knopf und Link
     stehen uebereinander -- so bekommen die Pillen die Breite und der Fuss
     zwei, drei Zeilen statt vier. */
  .v14 .sm-extra { gap: .35rem; }
  .v14 .sm-extra .pills { display: contents; }
  .v14 .sm-extra__title { margin-right: .5rem; }
  .v14 .sm-extra .pills li { font-size: .7rem; }
  .v14 .smoothies__foot .sec-cta { flex-direction: column; align-items: flex-end; gap: .7rem; }
}
@media (max-width: 699px) {
  .v14 .smoothies__foot .sec-cta { flex-direction: row; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .v14 .smoothies { transition: none; }
  .v14 .sm-cup,
  .v14 .sm-panel,
  .v14 .sm-panel.is-active { transition: none; }
  .v14 .sm-cup.is-active img { animation: none; }
}


/* ============================================================
   3  Soft Serve
   Fuenf Nischen in einer Reihe -- drei Signatures, zwei Affogatos, alle
   gleich gross -- und daneben "Build your own" als Menuekarte im Bogen.
   Die Section ist selbst das Raster: Kopf und Nischen links, die Karte
   rechts ueber beide Zeilen.
   ============================================================ */
.v14 .softserve {
  --card-w: clamp(17rem, 22vw, 23rem);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--card-w);
  grid-template-rows: auto 1fr;
  grid-template-areas: "head card" "arches card";
  gap: var(--sec-gap) clamp(2rem, 4vw, 4.4rem);
  background: var(--blush);
  color: var(--plum);
}
.v14 .softserve__head { grid-area: head; grid-template-columns: minmax(0, 1fr); }
.v14 .softserve .sec-title { color: var(--plum); }
.v14 .softserve .sec-title__accent { display: inline-block; padding-bottom: .06em; }   /* Luft fuer die Cedille */

/* Rundes Siegel, das sich langsam dreht. Klebt am Bogen der Karte. */
.v14 .ss-sticker {
  width: clamp(4.8rem, 6.4vw, 6.6rem);
  height: auto;
  overflow: visible;
  animation: ss-spin 24s linear infinite;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }
.v14 .ss-sticker__bg { fill: var(--coral); }
.v14 .ss-sticker__ring { fill: var(--white); font-family: var(--display); font-size: 10.5px; text-transform: uppercase; }
.v14 .ss-sticker__leaf { fill: var(--white); }
.v14 .ss-sticker__rib { fill: none; stroke: var(--coral); stroke-width: 1.6; stroke-linecap: round; }

/* --- Nischen --- */
.v14 .ss-arches {
  --arch-w: min(100%, 32vh * .8);
  grid-area: arches;
  align-self: end;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.8rem, 1.2vw, 1.2rem);
}
.v14 .ss-arch { display: flex; flex-direction: column; min-width: 0; }
/* Bogenrahmen wie die beleuchteten Nischen im Laden. Die senkrechten Radien
   sind 40 % der Hoehe = die halbe Breite bei 4:5, ein echter Halbkreis. */
.v14 .ss-arch__img {
  --r: clamp(12px, 1.6vw, 18px);
  --line: .885;                 /* Becherboden aller fuenf, Anteil der Nischenhoehe */
  position: relative;
  display: block;
  width: var(--arch-w);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% var(--r) var(--r) / 40% 40% var(--r) var(--r);
  background: linear-gradient(var(--bg-t, #f6ece8) 35%, var(--bg-b, #efe3de));
}
/* Jedes Foto einzeln gesetzt (--iw, --cx, --by, --ar aus dem Markup):
   gleiche Bechergroesse, Boden auf --line, Mitte auf der Nischenmitte. Die
   Nische ist 4:5; in Hoehen der Nische ist das Foto --iw x --ar x 0,8 hoch.
   Wo es die Nische nicht fuellt (die Affogatos, verkleinert), laufen seine
   Kanten weich in den Nischengrund aus, der seine eigene Hintergrundfarbe
   traegt (--bg-t, --bg-b). */
.v14 .ss-arch__img img {
  position: absolute;
  left: calc((.5 - var(--cx, .5) * var(--iw, 1)) * 100%);
  top: calc((var(--line) - var(--by, .85) * var(--iw, 1) * var(--ar, 1.5) * .8) * 100%);
  width: calc(var(--iw, 1) * 100%);
  max-width: none;
  height: auto;
  transform-origin: calc(var(--cx, .5) * 100%) calc(var(--by, .85) * 100%);
  transition: transform 1.1s var(--ease);
  /* Spitze der Affogatos liegt 7 % unter der Bildkante -- oben nur 4 %
     auslaufen lassen, seitlich weicher. */
  -webkit-mask:
    linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(transparent, #000 4%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(transparent, #000 4%, #000 93%, transparent);
  mask-composite: intersect;
}
.v14 .ss-arch:hover .ss-arch__img img { transform: scale(1.05); }
/* Die helle Innenkante der Nische. */
.v14 .ss-arch__img::after {
  content: "";
  position: absolute;
  inset: clamp(.3rem, .6vw, .5rem);
  border: 1.5px solid rgba(255, 255, 255, .85);
  border-radius: inherit;
  pointer-events: none;
}
.v14 .ss-arch__num {
  margin-top: .8rem;
  font-family: var(--display);
  font-size: .9rem;
  line-height: 1;
  color: var(--coral);
}
.v14 .ss-arch__name {
  margin: .35rem 0 0;
  font-family: var(--display);
  font-size: clamp(.95rem, 1.1vw, 1.2rem);
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}
.v14 .ss-arch__desc { margin-top: .35rem; font-size: clamp(.76rem, .8vw, .84rem); line-height: 1.4; text-wrap: balance; }

/* --- Build your own ---
   Menuekarte im selben Bogen wie die Nischen, aber dunkel: oben halbrund,
   innen eine feine Linie wie der Lichtrand der Nischen. Alles mittig
   gesetzt, die Toppings zweispaltig wie auf einer gedruckten Karte. */
.v14 .ss-byo {
  --r-top: calc(var(--card-w) / 2);
  grid-area: card;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 3vh, 2rem);
  padding: calc(var(--card-w) * .27) clamp(1.4rem, 2vw, 2.1rem) clamp(1.6rem, 3.6vh, 2.4rem);
  border-radius: var(--r-top) var(--r-top) 22px 22px;
  background: var(--plum);
  color: var(--blush);
  text-align: center;
  box-shadow: 0 2.2rem 3.4rem -2.2rem rgba(81, 28, 53, .6);
}
.v14 .ss-byo::after {
  content: "";
  position: absolute;
  inset: .6rem;
  border: 1px solid color-mix(in srgb, var(--blush) 30%, transparent);
  border-radius: calc(var(--r-top) - .6rem) calc(var(--r-top) - .6rem) 16px 16px;
  pointer-events: none;
}
.v14 .ss-byo__kicker { margin: 0; font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; }
.v14 .ss-byo__title {
  margin: .8rem 0 0;
  font-size: clamp(1.7rem, 1.3vw + 1.3vh, 2.7rem);
  line-height: .92;
  color: var(--white);
}
.v14 .ss-byo__title span { display: block; color: var(--coral); }
/* "— Toppings —" */
.v14 .ss-byo__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 0 0 .6rem;
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.v14 .ss-byo__label::before,
.v14 .ss-byo__label::after { content: ""; width: 1.8rem; height: 1px; background: currentColor; opacity: .5; }
.v14 .ss-byo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 0 clamp(1rem, 1.6vw, 1.6rem);
  white-space: nowrap;
  font-size: clamp(.88rem, .9vw, 1rem);
  line-height: 1.95;
  color: var(--white);
}
.v14 .ss-byo__btn {
  position: relative;
  z-index: 1;
  padding: .7rem 1.6rem;
  border-color: var(--blush);
  background: var(--blush);
  color: var(--plum);
  font-size: clamp(.95rem, 1.05vw, 1.1rem);
}
.v14 .ss-byo__btn:hover { border-color: var(--white); background: var(--white); color: var(--plum); }
.v14 .ss-byo .ss-sticker {
  position: absolute;
  top: calc(var(--card-w) * .06);
  left: calc(var(--card-w) * -.07);
  z-index: 2;
}

/* Halbbild (700-1099 px): Kopf, dann die Nischen als Wischreihe (fuenf in
   einer Reihe waeren hier zu klein), darunter die Karte quer -- flacher
   Bogen, links Titel und Knopf, rechts die Toppings. */
@media (max-width: 1099px) {
  .v14 .softserve {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "arches" "card";
  }
  .v14 .ss-arches {
    --arch-w: 100%;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(23vh * .8, 36vw);
    margin-inline: calc(var(--pad-x) * -1);
    padding: 0 var(--pad-x) .4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x);
    scrollbar-width: none;
  }
  .v14 .ss-arches::-webkit-scrollbar { display: none; }
  .v14 .ss-arch { scroll-snap-align: start; }
  .v14 .ss-byo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "head body" "btn body";
    align-items: center;
    justify-items: center;
    gap: .9rem clamp(1.4rem, 4vw, 3rem);
    padding: clamp(2.2rem, 4.6vh, 3rem) clamp(1.6rem, 4vw, 3rem) clamp(1.4rem, 3vh, 2rem);
    border-radius: 50% 50% 22px 22px / 4.5rem 4.5rem 22px 22px;
  }
  .v14 .ss-byo::after { border-radius: 50% 50% 16px 16px / 3.9rem 3.9rem 16px 16px; }
  .v14 .ss-byo__head { grid-area: head; align-self: end; }
  .v14 .ss-byo__body { grid-area: body; }
  .v14 .ss-byo__btn { grid-area: btn; align-self: start; }
  .v14 .ss-byo .ss-sticker { top: -1.4rem; left: -.8rem; width: 4.6rem; }
}
/* Telefon: Wischreihe mit grossen Nischen, die Karte wieder hoch und
   halbrund ueber die volle Breite. */
@media (max-width: 699px) {
  .v14 .softserve { --card-w: calc(100vw - 2 * var(--pad-x)); }
  .v14 .ss-arches { grid-auto-columns: 58vw; }
  .v14 .ss-byo {
    display: flex;
    padding: calc(var(--card-w) * .24) 1.4rem 1.8rem;
    border-radius: var(--r-top) var(--r-top) 22px 22px;
  }
  .v14 .ss-byo__head,
  .v14 .ss-byo__btn { align-self: center; }
  .v14 .ss-byo::after { border-radius: calc(var(--r-top) - .6rem) calc(var(--r-top) - .6rem) 16px 16px; }
  .v14 .ss-byo .ss-sticker { top: .4rem; left: -.4rem; width: 4.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .v14 .ss-sticker { animation: none; }
}


/* ============================================================
   3b  Coffee & Matcha
   Hintergrund ist --cream, genau der Ton, auf den scripts/seamless_drinks.js
   den Grund jedes Fotos geebnet hat -- die Bildkanten verschwinden. Weiche
   Masken an den Raendern fangen die letzten Abweichungen (bis 10 Stufen).
   Die Fotos haben links und rechts Luft; sie ueberlappen sich deshalb
   etwas, ohne dass sich Becher beruehren.
   ============================================================ */
.v14 .coffee {
  background: var(--cream);
  color: var(--plum);
}
.v14 .coffee .sec-title { color: var(--plum); }
.v14 .coffee .sm-fact + .sm-fact { border-left-color: color-mix(in srgb, var(--plum) 22%, transparent); }
.v14 .coffee .sm-fact__value { color: var(--plum); }

.v14 .coffee-row {
  list-style: none;
  margin: calc(var(--sec-gap) * .5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));   /* 5 Eisgetraenke + 2 Cold Foams */
}
.v14 .coffee-drink {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}
/* Bild 2:3, der Becher fuellt knapp vier Fuenftel der Breite. */
.v14 .coffee-drink img {
  display: block;
  width: min(122%, 38vh * 2 / 3);
  max-width: none;
  height: auto;
  margin-inline: -11%;
  -webkit-mask:
    linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(transparent, #000 7%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(transparent, #000 7%, #000 88%, transparent);
  mask-composite: intersect;
}
/* Name in die Spiegelung hochgezogen, dicht unter den Becher. */
.v14 .coffee-drink__name {
  position: relative;
  max-width: 14ch;
  margin-top: -1.3rem;
  text-wrap: balance;
  font-family: var(--display);
  font-size: clamp(.95rem, 1.05vw, 1.15rem);
  line-height: 1;
  text-transform: uppercase;
}
.v14 .coffee-drink__add {
  position: relative;
  margin-top: .45rem;
  padding: .32em .75em .28em;
  border-radius: 999px;
  background: var(--plum);
  color: var(--cream);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

/* Fuss: statt der Liste warmer Klassiker ein Satz (Patrick, 29.09.2026). */
.v14 .coffee-more { margin: 0; font-size: clamp(.95rem, 1vw, 1.08rem); line-height: 1.45; }

@media (max-width: 1099px) {
  /* Halbbild und Telefon: sieben Becher passen nicht nebeneinander --
     Wischreihe, der naechste schaut rein. */
  .v14 .coffee-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 40vw;
    margin-inline: calc(var(--pad-x) * -1);
    padding: 0 var(--pad-x);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x);
    scrollbar-width: none;
  }
  .v14 .coffee-row::-webkit-scrollbar { display: none; }
  .v14 .coffee-drink { scroll-snap-align: start; }
  .v14 .coffee-drink img { width: 122%; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .v14 .coffee-row { grid-auto-columns: min(21vw, 30vh * 2 / 3); }
}


/* ============================================================
   4  Food
   Wie eine gedruckte Karte: je Kategorie eine Zeile, links Name, Zusatz
   und Dips, rechts vier Gerichte als Freisteller (scripts/cutout_food.js)
   mit Namen und kurzer Zeile darunter. Die Freisteller stehen auf einer
   gemeinsamen Grundlinie, jeder hoechstens --food-h hoch.
   ============================================================ */
.v14 .food {
  background: var(--plum);
  color: var(--blush);
}
.v14 .food .eyebrow { color: var(--blush); }
.v14 .food .sec-title { color: var(--white); }
.v14 .food__head .sec-lead { margin: 0; max-width: 30rem; text-align: right; justify-self: end; }

.v14 .food-menu {
  --food-h: clamp(6.5rem, min(9.5vw, 16.5vh), 10.5rem);
  display: grid;
  gap: var(--sec-gap);
  margin-top: var(--sec-gap);
}
.v14 .food-row {
  display: grid;
  grid-template-columns: clamp(11rem, 16vw, 15rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "label list" "dips list";
  column-gap: clamp(1.6rem, 3vw, 3rem);
  padding-top: clamp(.9rem, 2vh, 1.3rem);
  border-top: 1px solid color-mix(in srgb, var(--blush) 24%, transparent);
}
.v14 .food-row__label { grid-area: label; }
.v14 .food-row__title { font-size: clamp(1.35rem, 1.2vw + 1vh, 2rem); line-height: .95; color: var(--white); }
.v14 .food-row__tagline { margin: .55rem 0 0; font-size: .68rem; letter-spacing: .22em; line-height: 1.6; text-transform: uppercase; }

.v14 .food-list {
  grid-area: list;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem clamp(1rem, 2vw, 2rem);
}
.v14 .food-item { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
/* Freisteller auf gemeinsamer Grundlinie; der Schatten hebt sie vom Grund. */
.v14 .food-item__img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: var(--food-h);
}
.v14 .food-item__img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 .9rem .8rem rgba(18, 4, 10, .45));
  transition: transform .7s var(--ease);
}
.v14 .food-item:hover .food-item__img img { transform: translateY(-.25rem) scale(1.03); }
.v14 .food-item__text { display: block; min-width: 0; margin-top: .85rem; }
.v14 .food-item__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-family: var(--display);
  font-size: clamp(.95rem, 1.05vw, 1.15rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}
.v14 .food-item__tag {
  padding: .28em .5em .24em;
  border-radius: 999px;
  background: #5f8f43;
  color: var(--white);
  font-family: var(--body);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.v14 .food-item__desc {
  display: block;
  margin-top: .35rem;
  font-size: clamp(.78rem, .82vw, .86rem);
  line-height: 1.4;
  color: color-mix(in srgb, var(--blush) 90%, transparent);
  text-wrap: balance;
}

/* Sourdough: der freigestellte Stapel links, rechts die vier Namen je auf
   der Hoehe ihrer Lage (--at aus dem Markup), mit einer feinen Linie zum
   Stapel -- wie eine Beschriftung. */
.v14 .food-stack {
  grid-area: list;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}
.v14 .food-stack__img {
  display: block;
  height: clamp(14.5rem, 31vh, 19rem);
  width: auto;
  filter: drop-shadow(0 .9rem .8rem rgba(18, 4, 10, .45));
}
.v14 .food-stack__list { position: relative; list-style: none; margin: 0; padding: 0; min-height: 100%; }
.v14 .food-stack__item {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--at) * 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: clamp(2rem, 3vw, 3rem);
  translate: 0 -50%;   /* eigene Eigenschaft: das Einblenden setzt transform */
}
.v14 .food-stack__item::before {        /* Linie zur Lage */
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: clamp(1.4rem, 2.2vw, 2.4rem);
  height: 1px;
  background: color-mix(in srgb, var(--blush) 55%, transparent);
}
.v14 .food-stack__item .food-item__name { justify-content: flex-start; }
.v14 .food-stack__item .food-item__desc { margin-top: .25rem; }
@media (max-width: 1099px) {
  .v14 .food-stack__img { height: clamp(13.5rem, 29vh, 16rem); }
}
@media (max-width: 699px) {
  .v14 .food-stack { gap: .6rem; text-align: left; }
  .v14 .food-stack__img { height: auto; width: min(47vw, 11.5rem); }
  .v14 .food-stack__item { padding-left: 1.3rem; }
  .v14 .food-stack__item::before { width: .9rem; }
  .v14 .food-stack__item .food-item__desc { font-size: .74rem; line-height: 1.3; }
}
@media (max-width: 380px) {
  .v14 .food-stack__item .food-item__name { font-size: .86rem; }
  .v14 .food-stack__item .food-item__desc { font-size: .7rem; }
}

/* Dips wie auf Tafel 2, klein unter dem Namen der Rolls. */
.v14 .food-dips {
  grid-area: dips;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-top: 1rem;
}
.v14 .food-dips__label { flex-basis: 100%; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; }
/* Die Liste loest sich in die Zeile auf, das Label laeuft vorneweg mit. */
.v14 .food-dips__list { display: contents; }
.v14 .food-dips__list li { display: flex; align-items: center; gap: .4rem; font-size: .8rem; }
/* Dressings der Bowls: die kleinen Becher als Freisteller statt Farbpunkten. */
.v14 .food-dressing { display: grid; place-items: end center; width: 2.4rem; height: 2rem; }
.v14 .food-dressing img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .2rem .25rem rgba(18, 4, 10, .45)); }
.v14 .food-dip {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .55), transparent 28%),
    radial-gradient(circle, var(--dip) 58%, #fbf8f4 62%, #e6dfd8 100%);
  box-shadow: 0 .15rem .4rem rgba(0, 0, 0, .3);
}

/* Bundles wie auf Tafel 1 -- im Fuss neben dem Knopf. */
.v14 .food-deals { grid-template-columns: repeat(2, minmax(0, auto)) 1fr; }
.v14 .food-deal { display: flex; align-items: center; gap: .7rem; margin: 0; }
.v14 .food-deal__pill {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: var(--coral);
  color: var(--white);
  font-family: var(--display);
  font-size: .95rem;
  transform: rotate(-8deg);
}
.v14 .food-deal__what { font-size: .88rem; line-height: 1.3; max-width: 15rem; }
.v14 .food-deal__what b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}

/* Halbbild: die zwei Kategorien nebeneinander, die Gerichte je als Liste
   -- Freisteller links, Name und Zeile rechts. */
@media (max-width: 1099px) {
  .v14 .food__head .sec-lead { max-width: 20rem; }
  .v14 .food-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.6rem, 4vw, 3rem); }
  .v14 .food-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "label" "list" "dips";
    align-content: start;
    row-gap: .9rem;
  }
  .v14 .food-list { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .v14 .food-item { flex-direction: row; gap: .9rem; text-align: left; }
  .v14 .food-item__img { flex: none; width: 6.4rem; height: 4.4rem; }
  .v14 .food-item__text { margin-top: 0; }
  .v14 .food-item__name { justify-content: flex-start; }
  .v14 .food-dips { margin-top: .1rem; }
  .v14 .food-dips__label { flex-basis: auto; }
  /* Bundles und Knopf bleiben in einer Zeile, die Bundle-Zeilen brechen
     dafuer zweizeilig. */
  .v14 .food-deal__what { max-width: 9.5rem; text-wrap: balance; }
}
/* Telefon: Kategorien untereinander, je 2x2 mit dem Freisteller oben. */
@media (max-width: 699px) {
  .v14 .food__head .sec-lead { text-align: left; justify-self: start; margin-top: .6rem; }
  .v14 .food-menu { grid-template-columns: minmax(0, 1fr); }
  .v14 .food-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 1rem; }
  .v14 .food-item { flex-direction: column; gap: 0; text-align: center; }
  .v14 .food-item__img { width: 100%; height: 6.4rem; }
  .v14 .food-item__text { margin-top: .7rem; }
  .v14 .food-item__name { justify-content: center; }
  .v14 .food-deals { grid-template-columns: 1fr; row-gap: .7rem; }
  .v14 .food-deals .sec-cta { margin-top: .5rem; }
  .v14 .food-deal__what { max-width: none; }
}


/* ============================================================
   5  Our Fridge
   Die Zeichnung skaliert als Ganzes: alle Masse in em, die
   Schriftgroesse haengt an der Breite ihres Containers (cqi) und an der
   Fensterhoehe (vh) -- so passt sie auch in ein flaches Fenster.
   ============================================================ */
.v14 .fridge {
  overflow-x: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 4.4rem);
  background: var(--blush);
  color: var(--plum);
}
.v14 .fridge .sec-title { color: var(--plum); }
.v14 .fridge-legend {
  list-style: none;
  margin: var(--sec-gap) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(.55rem, 1.4vh, .9rem);
}
.v14 .fridge-legend li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .1rem .7rem;
  padding-top: clamp(.55rem, 1.4vh, .9rem);
  border-top: 1px solid color-mix(in srgb, var(--plum) 22%, transparent);
}
.v14 .fridge-legend__no {
  grid-row: span 2;
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--coral);
}
.v14 .fridge-legend__title {
  font-family: var(--display);
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1;
  text-transform: uppercase;
}
.v14 .fridge-legend__items { margin-top: .25rem; font-size: clamp(.8rem, .85vw, .9rem); line-height: 1.4; }
.v14 .fridge__cta { margin: var(--sec-gap) 0 0; }

.v14 .fridge__visual {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.v14 .fr { font-size: min(15px, 2.85cqi, 1.72vh); }
/* "grab & go!" wie im Laden an der Wand ueber dem Kuehlschrank (Patrick,
   29.09.2026, Foto): Hanken Grotesk fett, klein geschrieben, Plum, ohne
   Flaeche dahinter -- nicht die Pille von vorher. Groesse haengt an der
   Breite der Zeichnung. */
.v14 .fr-sign {
  margin: 0 0 .8em;   /* Patrick: "bisschen hoeher" -- Luft wie zwischen Schrift und Kuehlschrank im Laden */
  font-family: var(--body);
  font-size: clamp(1.25rem, 4.4cqi, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--plum);
}
.v14 .fr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (max-width: 699px) {
  /* Telefon: erst der Kuehlschrank, dann die Legende. Die Textspalte loest
     sich auf (display: contents), ihre Teile ordnen sich um die Zeichnung.
     Bis 700 px (Halbbild) bleiben Text und Zeichnung nebeneinander. */
  .v14 .fridge { grid-template-columns: 1fr; row-gap: 0; }
  .v14 .fridge__copy { display: contents; }
  .v14 .fridge .eyebrow { justify-self: start; }
  .v14 .fridge__visual { order: 1; margin: clamp(2rem, 7vw, 2.6rem) 0 .6rem; }
  .v14 .fridge-legend { order: 2; }
  .v14 .fridge__cta { order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .v14 .fridge__visual.is-in .fr__glass::after { animation: none; }
}

/* Der Kuehlschrank (seit 28.09.2026 nur noch Fassung C, v14/fridge-c.php):
   so breit wie im Laden, zwei Abteile, viewBox 1400 x 1000. Die Zeichnung
   bekommt die breitere Spalte; ihre Hoehe haengt an der Fensterhoehe. */
@media (min-width: 700px) { .v14 .fridge--c { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); } }
.v14 .frb-stage {
  position: relative;
  display: block;
  width: min(100%, 74vh * 1400 / 1000);
  margin-top: -.2em;
}
/* Schatten als eigenes Element dahinter statt drop-shadow auf dem Kasten: der
   Filter wuerde beim Hebeeffekt jedes Mal ueber das ganze SVG neu gerechnet.
   Die Form ist das abgerundete Rechteck des Korpus (Radius 34 von 1400 x 1000);
   die Unschaerfe verdoppelt, weil drop-shadow die Standardabweichung nimmt,
   box-shadow den Durchmesser. */
.v14 .frb-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2.43% / 3.4%;
  box-shadow: 0 1.6rem 3.6rem rgba(42, 18, 30, .35);
  pointer-events: none;
}
@media (max-width: 699px) { .v14 .frb-stage::before { border-radius: 4.68% / 1.73%; } }
/* Bild statt SVG (renderFridgeStage in v14/fridge-c.php). Das Seitenverhaeltnis
   steht im CSS, nicht nur an den Attributen: die Telefon-Fassung ist hoch,
   das <img> traegt aber die Masse der breiten -- so springt nichts beim Laden. */
.v14 .frb-img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 1000; }
@media (max-width: 699px) { .v14 .frb-img { aspect-ratio: 726 / 1966; } }
.v14 .frb-svg { display: block; width: 100%; height: auto; }
/* Das nachgeladene SVG liegt ueber dem Bild (gleiche Masse); steht es, geht das
   Bild darunter aus. Am Telefon bleibt immer das Bild. */
.v14 .frb-stage:not(.is-svg) > .frb-svg { position: absolute; inset: 0; height: 100%; }
.v14 .frb-stage.is-live .frb-img { visibility: hidden; }
@media (max-width: 699px) {
  .v14 .frb-stage > .frb-svg { display: none; }
  .v14 .frb-stage.is-live .frb-img { visibility: visible; }
}
/* Telefon: der Kuehlschrank passt in die Breite -- die zwei Abteile stehen
   untereinander statt nebeneinander (v14.js tauscht die viewBox und setzt
   .is-tall). So bleiben die Dosen doppelt so gross wie beim blossen
   Verkleinern. Ohne Skript: die breite Fassung, verkleinert. */
.v14 .frb-svg .frc-tall { display: none; }
.v14 .frb-svg.is-tall .frc-tall { display: inline; }
.v14 .frb-svg.is-tall .frc-wide { display: none; }
.v14 .frb-svg.is-tall .frc-bay--r { transform: translate(-674px, 966px); }
@media (max-width: 699px) {
  .v14 .fridge--c .frb-stage { width: 100%; }
}
/* Halbbild: nebeneinander bliebe fuer die Zeichnung nur ein Drittel der
   Breite (380 px). Deshalb untereinander -- oben Titel, daneben Satz und
   Knopf; dann der Kuehlschrank in voller Breite; darunter die fuenf Ebenen
   als Zeile aus Nummer und Titel. Die Warenlisten fallen hier weg: die
   Schilder und Namen im Kuehlschrank zeigen die Waren selbst. */
@media (min-width: 700px) and (max-width: 1099px) {
  .v14 .fridge--c {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "eyebrow eyebrow" "title lead" "title cta" "visual visual" "legend legend";
    align-items: end;
    gap: .6rem 2rem;
  }
  .v14 .fridge--c .fridge__copy { display: contents; }
  .v14 .fridge--c .eyebrow { grid-area: eyebrow; justify-self: start; }
  .v14 .fridge--c .sec-title { grid-area: title; margin: 0; }
  .v14 .fridge--c .sec-lead { grid-area: lead; margin: 0; }
  .v14 .fridge--c .fridge__cta { grid-area: cta; margin: 0; }
  .v14 .fridge--c .fridge__visual { grid-area: visual; margin-top: clamp(.8rem, 2.4vh, 1.6rem); }
  .v14 .fridge--c .frb-stage { width: min(100%, 46vh * 1400 / 1000); }
  .v14 .fridge--c .fridge-legend { grid-area: legend; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: .4rem 0 0; }
  .v14 .fridge--c .fridge-legend li { grid-template-columns: 1fr; }
  .v14 .fridge--c .fridge-legend__no { grid-row: auto; font-size: 1rem; }
  .v14 .fridge--c .fridge-legend__title { font-size: .86rem; }
  .v14 .fridge--c .fridge-legend__items { display: none; }
}


/* ============================================================
   6  Loyalty (vor Catering)
   Links Titel, Satz, zwei Wege; rechts die Stempelkarte als dunkle
   Mitgliedskarte: zwoelf Stempel, drei davon aus der Anmeldung gefuellt
   (echte Freisteller in cremefarbenen Scheiben), das On-us-Siegel als
   Sticker auf der Ecke. Hintergrund Blush -- die Section danach
   (Catering) ist Plum, die Karte selbst traegt das Dunkle.
   ============================================================ */
.v14 .fmly-band {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 28rem);
  justify-content: center;       /* Text und Karte als ein Paar in der Mitte */
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  padding: clamp(3rem, 8vh, 5.5rem) var(--pad-x);
  overflow: hidden;              /* gedrehte Karte, Siegel */
  background: var(--blush);
  color: var(--plum);
}
.v14 .fmly-band [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.v14 .fmly-band [data-reveal].is-in { opacity: 1; transform: none; }
.v14 .fmly-band__kicker { margin: 0 0 .8rem; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; }
.v14 .fmly-band__title {
  font-size: clamp(2.6rem, 3vw + 1.6vh, 4.6rem);
  line-height: .9;
  color: var(--plum);
}
.v14 .fmly-band__title span { color: var(--coral); }
.v14 .fmly-band__lead {
  max-width: 34ch;
  margin: clamp(.9rem, 2vh, 1.3rem) 0 0;
  font-size: clamp(.98rem, 1vw, 1.1rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.v14 .fmly-band__lead strong { font-weight: 700; }
.v14 .fmly-band__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.6rem;
  margin: clamp(1.4rem, 3vh, 2rem) 0 0;
}
.v14 .fmly-band__more {
  padding-bottom: .15em;
  border-bottom: 2px solid currentColor;
  font-family: var(--display);
  font-size: clamp(.9rem, 1vw, 1.02rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.v14 .fmly-band__more:hover { color: var(--coral); }

/* --- Die Karte --- */
.v14 .fmly-card {
  --stamp: clamp(3.6rem, 4.4vw, 4.6rem);   /* 4 x 3 wie auf der FMLY-Seite -- gross genug, dass man die Smoothies erkennt */
  position: relative;
  justify-self: center;
  width: min(100%, 27rem);
  padding: clamp(1.1rem, 1.6vw, 1.5rem) clamp(1.1rem, 1.7vw, 1.6rem) clamp(1rem, 1.4vw, 1.25rem);
  border-radius: 22px;
  background: var(--plum);       /* flach: keine Verlaeufe, kein Schatten (Patrick: "Slop") */
  color: var(--blush);
  transform: rotate(-4deg);
  transition: transform .9s var(--ease);
}
/* Feine Innenlinie wie bei den Nischen und den Kartenrueckseiten */
.v14 .fmly-card::before {
  content: "";
  position: absolute;
  inset: .5rem;
  border: 1px solid color-mix(in srgb, var(--blush) 26%, transparent);
  border-radius: 15px;
  pointer-events: none;
}
.v14 .fmly-card:hover { transform: rotate(-2deg) translateY(-4px); }
.v14 .fmly-card__top { display: flex; align-items: center; gap: .55rem; }
.v14 .fmly-card__c {
  width: 1.05rem;
  aspect-ratio: 510 / 646;
  background: var(--blush);
  -webkit-mask: url("../img/logo/chinaski-c.svg") center / contain no-repeat;
  mask: url("../img/logo/chinaski-c.svg") center / contain no-repeat;
}
.v14 .fmly-card__brand { font-size: clamp(1.3rem, 1.6vw, 1.6rem); line-height: 1; letter-spacing: .06em; }
.v14 .fmly-card__type {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .8;
}
.v14 .fmly-card__type::before { content: ""; width: .25rem; height: .25rem; border-radius: 50%; background: currentColor; }
.v14 .fmly-card__grid {
  display: grid;
  grid-template-columns: repeat(4, var(--stamp));
  justify-content: space-between;
  gap: .75rem 0;
  margin: clamp(.9rem, 1.4vw, 1.2rem) 0 clamp(.8rem, 1.2vw, 1.05rem);
}
.v14 .fmly-card__stamp {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--stamp);
  aspect-ratio: 1;
  border: 1.5px dashed color-mix(in srgb, var(--blush) 50%, transparent);
  border-radius: 50%;
  font-family: var(--display);
  font-size: calc(var(--stamp) * .26);
  line-height: 1;
  color: color-mix(in srgb, var(--blush) 55%, transparent);
}
.v14 .fmly-card__stamp.is-filled { border: 2px solid var(--blush); }
.v14 .fmly-card__disc {
  position: absolute;
  inset: 2px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--cream);
}
/* Der ganze Becher mit Strohhalm, leicht gekippt, unten von der Scheibe
   angeschnitten -- genau wie auf der Stempelkarte der FMLY-Seite. (Vorher
   ein Ausschnitt nur der Fuellung: Patrick konnte die Smoothies kaum
   erkennen.) */
.v14 .fmly-card__disc img {
  position: absolute;
  left: 50%;
  top: 9%;
  width: 60%;
  height: auto;
  transform: translateX(-50%) rotate(-7deg);
}
.v14 .fmly-card__stamp:nth-child(2) .fmly-card__disc img { transform: translateX(-50%) rotate(6deg); }
.v14 .fmly-card__check {
  position: absolute;
  top: -.2rem;
  right: -.2rem;
  z-index: 1;
  width: calc(var(--stamp) * .32);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 2px var(--plum);
}
.v14 .fmly-card__check::after {        /* Haken */
  content: "";
  position: absolute;
  left: 34%;
  top: 22%;
  width: 26%;
  height: 44%;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
}
.v14 .fmly-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .75rem;
  border-top: 1px solid color-mix(in srgb, var(--blush) 22%, transparent);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.v14 .fmly-card__count { font-size: 1.35rem; letter-spacing: 0; line-height: 1; }
.v14 .fmly-card__count small { font-size: .62em; opacity: .7; }
/* On-us-Siegel als Sticker auf der Ecke */
.v14 .fmly-card__seal {
  position: absolute;
  top: -1.6rem;
  right: -1.3rem;
  display: grid;
  place-content: center;
  width: clamp(4.4rem, 5.6vw, 5.4rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--coral);
  color: var(--white);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: .88;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(14deg);
}
.v14 .fmly-card__seal small {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--body);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .16em;
}

/* Erstes Erscheinen: v14.js setzt .is-waiting, dann .is-dealt -- die drei
   Stempel landen nacheinander, danach springt das Siegel dazu. */
.v14 .fmly-card.is-waiting .fmly-card__stamp.is-filled,
.v14 .fmly-card.is-waiting .fmly-card__seal { opacity: 0; }
.v14 .fmly-card.is-dealt .fmly-card__stamp.is-filled {
  animation: fmly-stamp .55s cubic-bezier(.2, .9, .25, 1.15) both;
  animation-delay: calc(var(--i, 0) * 220ms + 350ms);
}
.v14 .fmly-card.is-dealt .fmly-card__seal { animation: fmly-seal .6s cubic-bezier(.2, .9, .25, 1.2) 1.15s both; }
@keyframes fmly-stamp {
  0%   { opacity: 0; transform: scale(1.9) rotate(-14deg); }
  55%  { opacity: 1; transform: scale(.9) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes fmly-seal {
  0%   { opacity: 0; transform: scale(.2) rotate(-40deg); }
  100% { opacity: 1; transform: rotate(14deg); }
}

@media (max-width: 1099px) {
  .v14 .fmly-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); justify-content: stretch; gap: 2rem; }
  .v14 .fmly-card { --stamp: clamp(3.4rem, 7vw, 4.2rem); }
}
@media (max-width: 699px) {
  /* Telefon: Karte oben, darunter der Text, alles mittig */
  .v14 .fmly-band { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 2.6rem; text-align: center; }
  .v14 .fmly-card { order: -1; width: min(100%, 21.5rem); --stamp: min(4rem, 16.5vw); transform: rotate(-3deg); }
  .v14 .fmly-card__seal { top: -1.3rem; right: -.6rem; width: 4.2rem; }
  .v14 .fmly-band__lead { margin-inline: auto; }
  .v14 .fmly-band__cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .v14 .fmly-band [data-reveal] { opacity: 1; transform: none; transition: none; }
  .v14 .fmly-card,
  .v14 .fmly-card:hover { transition: none; }
}


/* ============================================================
   8  Telefon: alles auf der Mittelachse
   Patrick, 23.09.2026: "In mobil muss alles ordentlich zentriert sein."
   Unter 700 px steht jede Section mittig -- Koepfe, Saetze, Fakten,
   Listen, Knoepfe, auch die aus v13 uebernommenen Teile (Statement,
   Catering, Concept Store, Instagram, Family, Find us, Fuss). Bilder und
   Wischreihen bleiben, wie sie sind; laengere Saetze stehen schmaler,
   damit sie mittig ruhig wirken. Selektoren mit drei Klassen, weil
   findus.css und v1.css teils nach bzw. gleichrangig greifen.
   ============================================================ */
@media (max-width: 699px) {
  /* --- Statement --- */
  .v14 .statement .statement__lines--right,
  .v14 .statement .statement__copy { text-align: center; }

  /* --- Favoriten --- */
  .v14 .products .products__head { text-align: center; }
  .v14 .products .products__cap { align-items: center; text-align: center; }
  .v14 .products .products__line { text-align: center; }

  /* --- Koepfe der neuen Sections --- */
  .v14 main .sec-head { justify-items: center; text-align: center; }
  .v14 main .sec-lead { margin-inline: auto; max-width: 34ch; }
  .v14 .food .food__head .sec-lead { justify-self: center; text-align: center; }

  /* Fakten: 510 ml / Moleqlar untereinander, Matcha Some / Ceremonial nebeneinander */
  .v14 main .sm-facts { justify-content: center; }
  .v14 .smoothies .sm-facts { align-items: center; }
  .v14 main .sm-fact { align-items: center; text-align: center; }

  /* Fuesse: Add-ons, Bundles, Knoepfe */
  .v14 main .sec-foot { justify-items: center; text-align: center; }
  .v14 main .sec-cta { justify-content: center; }
  .v14 .smoothies .sm-extra { justify-content: center; }
  .v14 .smoothies .sm-extra__title { flex-basis: 100%; margin: 0 0 .35rem; text-align: center; }

  /* --- Soft Serve: Beschriftung der Nischen --- */
  .v14 .softserve .ss-arch { align-items: center; text-align: center; }

  /* --- Coffee: der Satz unter den Bechern --- */
  .v14 .coffee .coffee-more { text-align: center; }

  /* --- Lunch --- */
  .v14 .food .food-row__label { text-align: center; }
  .v14 .food .food-dips { justify-content: center; }
  .v14 .food .food-dips__label { flex-basis: 100%; margin: 0; text-align: center; }
  /* Bundles als ein mittiger Block, die zwei Kreise buendig untereinander */
  .v14 .food .food-deal { width: min(100%, 17.5rem); justify-content: flex-start; text-align: left; }

  /* --- Kuehlschrank (A und B): Kopf, Legende, Knopf --- */
  .v14 .fridge .eyebrow { justify-self: center; }
  .v14 .fridge .sec-title,
  .v14 .fridge .sec-lead { justify-self: center; text-align: center; }
  .v14 .fridge .fridge-legend li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    text-align: center;
  }
  .v14 .fridge .fridge-legend__items { max-width: 30ch; }
  .v14 .fridge .fridge__cta { justify-self: center; }

  /* --- Catering --- */
  .v14 .catering-promo .catering-promo__head { margin-inline: auto; text-align: center; }

  /* --- Concept Store --- */
  .v14 .concept .concept__copy { text-align: center; }
  .v14 .concept .concept__caption { text-align: center; }

  /* --- Instagram --- */
  .v14 .social .rule-row { flex-direction: column; align-items: center; gap: .45rem; }
  .v14 .social .social__handle { margin-inline: auto; text-align: center; }

  /* --- Family --- */
  .v14 .family .family__head { flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
  .v14 .family .family__head > :last-child { max-width: 34ch; text-align: center; }   /* v11/v12 setzen left/right */
  .v14 .family .family__title { margin-inline: auto; text-align: center; }   /* max-width 7ch aus v1 */
  .v14 .family .fam__text { align-items: center; text-align: center; }
  .v14 .family .fam__line { margin-inline: auto; }

  /* --- Find us: Icon ueber dem Text statt links daneben --- */
  .v14 .findus .findus__head,
  .v14 .findus .findus__addr { text-align: center; }
  .v14 .findus .iwt { padding-left: 0; text-align: center; }
  .v14 .findus .iwt__icon { position: static; margin: 0 auto .55rem; }   /* Icons sind verschieden hoch */

  /* --- Fuss --- */
  .v14 .foot { text-align: center; }
  .v14 .foot .foot__brand { width: fit-content; margin-inline: auto; }
  .v14 .foot .foot__legal-links,
  .v14 .foot .foot__legal { justify-content: center; }
}

/* Sehr schmale Telefone (< 341 px): neben dem Stapel ist kein Platz fuer
   die Beschriftungen -- die Liste steht darunter, ohne Linien. */
@media (max-width: 340px) {
  .v14 .food .food-stack { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .v14 .food .food-stack__img { width: min(60vw, 11rem); }
  .v14 .food .food-stack__list { display: grid; gap: .8rem; text-align: center; }
  .v14 .food .food-stack__item { position: static; translate: none; padding-left: 0; }
  .v14 .food .food-stack__item::before { display: none; }
  .v14 .food .food-stack__item .food-item__name { justify-content: center; }
}


/* Kuehlschrank: jedes Produkt hebt sich beim Zeigen und nennt seinen Namen
   (Etikett aus v14.js) -- wie die gezeichnete Fassung, die weggefallen ist. */
.v14 .frb-item { cursor: default; transition: transform .35s var(--ease); }
.v14 .frb-item:hover { transform: translateY(-6px); }
/* Im SVG faengt nur die Ware das Zeigen -- Wand, Boeden, Glas nicht. */
.v14 .frb-svg * { pointer-events: none; }
.v14 .frb-svg .frb-item,
.v14 .frb-svg .frb-item *,
.v14 .frb-svg .frc-sym,
.v14 .frb-svg .frc-sym * { pointer-events: visiblePainted; }   /* Inhalt der <use>-Kopien */
.v14 .frb-svg .frb-back * { pointer-events: none; }
.v14 .frb { position: relative; }
.v14 .frb-tip {
  position: absolute;
  z-index: 5;
  padding: .4rem .6rem;
  border-radius: .45rem;
  background: var(--plum);
  color: var(--blush);
  font: 600 .74rem/1.2 var(--body);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - .45rem));
}
@media (prefers-reduced-motion: reduce) {
  .v14 .frb-item, .v14 .frb-item:hover { transition: none; transform: none; }
}

/* ============================================================
   9  Family am Desktop in einer Reihe (Patrick, 28.09.2026: "zu gross
   fuer den Viewport") -- links Kopfzeile und Titel, rechts die beiden
   Locations. Die Karten haengen an der Fensterhoehe statt am
   Seitenverhaeltnis 4:5, damit die Section in einen Bildschirm passt.
   ============================================================ */
@media (min-width: 1100px) {
  .v14 .family {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.4rem, 2.4vw, 2.4rem);
    align-items: start;
    padding-block: clamp(3rem, 9vh, 5.5rem);
  }
  .v14 .family__head {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: clamp(1.4rem, 3.5vh, 2.4rem);
  }
  .v14 .family .family__head span:last-child { flex: none; max-width: 30ch; margin: 0; text-align: left; }   /* v11: flex 1 1 18rem */
  .v14 .family__title { grid-column: 1; grid-row: 2; align-self: end; margin: 0; }   /* schliesst mit den Karten ab */
  .v14 .family__grid { grid-column: 2 / 4; grid-row: 1 / 3; }
  .v14 .fam { aspect-ratio: auto; height: min(68vh, 40rem); }
}

/* ============================================================
   10  Concept Store und Catering am Desktop in einen Bildschirm
   (Patrick, 28.09.2026: "zu gross, section zu hoch"). Bilder haengen an
   der Fensterhoehe statt am Seitenverhaeltnis 4:5; Catering wie Family:
   Titel, Satz und Knopf links, die drei Bilder rechts in einer Reihe.
   ============================================================ */
@media (min-width: 1100px) {
  .v14 .concept { padding-block: clamp(2.6rem, 8vh, 4.5rem); }
  .v14 .concept__slides { aspect-ratio: auto; height: min(70vh, 42rem); }

  .v14 .catering-promo { padding-block: clamp(2.6rem, 8vh, 4.5rem); }
  .v14 .catering-promo__inner {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 3fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.6rem, 3vw, 3rem);
    row-gap: 1.4rem;
  }
  /* Die Spalte ist schmal (0,8 von 3,8): der Titel waechst mit ihr statt mit
     dem Fenster -- sonst lief "CATERING" zwischen 1100 und 1180 px ins erste
     Foto (Patrick: "looks broken when its not full width"). */
  .v14 .catering-promo__head { grid-column: 1; grid-row: 1; margin: 0; max-width: none; text-align: left; container-type: inline-size; }
  .v14 .catering-promo__title { font-size: min(3.8rem, 24cqi); }
  .v14 .catering-promo__sub { max-width: 24ch; }
  .v14 .catering-promo__btn { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; }
  .v14 .catering-promo__media { grid-column: 2; grid-row: 1 / 3; }
  .v14 .catering-promo__img { aspect-ratio: auto; height: min(62vh, 36rem); }
}

/* ============================================================
   11  Lunch ab 700 px (Patrick, 29./30.09.2026)
   Rolls und Bowls ueberall 2 x 2 mit grossem Freisteller oben, Namen je
   Reihe buendig. Die Menue-Huelle loest sich auf (contents): Kategorien und
   Bundles werden Felder der Section.
   Desktop (ab 1280 px): drei Spalten Rolls | Bowls | Sourdough.
   Halbbild und Zweidrittel (700-1279 px): oben Rolls | Bowls, darunter der
   Sourdough-Stapel mittig ueber die ganze Breite.
   Kopf: Titel links, rechts der Satz und daneben "Order lunch". Unten die
   zwei Bundles mittig, ohne Knopf (Patrick, 30.09.; Kacheln neben dem
   Stapel waren "HORRIBLE", auch Sticker und rotes Band verworfen).
   ============================================================ */
.v14 .food__order { display: none; }
.v14 .food-stack__pic { position: relative; display: block; align-self: start; }
@media (min-width: 700px) {
  .v14 .food {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.6rem, 3vw, 3.2rem);
    align-items: start;
  }
  .v14 .food .food__head {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem) auto;
    grid-template-areas: "main lead order";
    align-items: end;
    column-gap: clamp(1.2rem, 2.4vw, 2.4rem);
  }
  .v14 .food .food__head .sec-head__main { grid-area: main; }
  .v14 .food .food__head .sec-lead { grid-area: lead; max-width: none; text-align: left; justify-self: stretch; }
  .v14 .food .food__order { display: inline-flex; grid-area: order; }
  .v14 .food .food-menu { display: contents; }
  .v14 .food .food-row {
    margin-top: var(--sec-gap);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "label" "list" "dips";
    align-content: start;
    row-gap: clamp(.8rem, 2vh, 1.3rem);
  }
  /* Zusatz immer unter dem Titel: sonst brach er nur in manchen Spalten um,
     und die Gerichte standen je Spalte auf anderer Hoehe */
  .v14 .food .food-row__label { display: block; }
  .v14 .food .food-row__tagline { margin: .4rem 0 0; font-size: .62rem; letter-spacing: .16em; white-space: nowrap; }
  .v14 .food .food-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.8rem, 2vh, 1.3rem) clamp(.8rem, 1.6vw, 1.6rem);
  }
  .v14 .food .food-item { flex-direction: column; gap: 0; text-align: center; container-type: inline-size; }
  /* Feld hoechstens 80 % der Eintragsbreite hoch: Rolls (1,14 : 1) fuellen es */
  .v14 .food .food-item__img { width: 100%; height: min(var(--food-h), 80cqi); }
  .v14 .food .food-item__text { margin-top: .6rem; }
  .v14 .food .food-item__name { justify-content: center; }
  .v14 .food .food-item__desc { font-size: clamp(.74rem, .8vw, .84rem); line-height: 1.32; }
  .v14 .food .food-item__text { margin-top: .5rem; }
  /* Rolls und Bowls teilen sich ihre Zeilen (subgrid): Titel, Reihe 1,
     Reihe 2, Dips -- jede Reihe so hoch wie ihr laengster Eintrag in beiden
     Spalten. Seit die Bowls ihre vollen Zutatenlisten zeigen (bis sechs
     Zeilen, Patrick 01.10.), stuende Reihe 2 der Bowls sonst bis zu 36 px
     tiefer als die der Rolls. */
  .v14 .food .food-row--rolls,
  .v14 .food .food-row--bowls {
    grid-row: span 4;
    grid-template-rows: subgrid;
    grid-template-areas: "label" "list" "list" "dips";
  }
  .v14 .food .food-row--rolls .food-list,
  .v14 .food .food-row--bowls .food-list { grid-template-rows: subgrid; }
  .v14 .food .food-dips { margin-top: 0; gap: .35rem .55rem; }
  .v14 .food .food-dips__label { flex-basis: auto; margin-right: .2rem; letter-spacing: .16em; }
  .v14 .food .food-dips__list li { gap: .28rem; font-size: .72rem; }
  .v14 .food .food-dip { width: .95rem; height: .95rem; }
  .v14 .food .food-dressing { width: 1.7rem; height: 1.45rem; }
  /* Sourdough: Stapel links, die vier Namen gleichmaessig ueber seine Hoehe
     (space-around ~ Lagen bei 15/38/62/88 %), koennen sich nicht ueberlappen */
  .v14 .food .food-row--sourdough { container-type: inline-size; }
  .v14 .food .food-stack { gap: clamp(.6rem, 1.2vw, 1.1rem); }
  .v14 .food .food-stack__list { display: flex; flex-direction: column; justify-content: space-around; gap: .4rem; }
  .v14 .food .food-stack__item { position: relative; top: auto; translate: none; padding-left: clamp(1.2rem, 1.8vw, 1.8rem); }
  .v14 .food .food-stack__item::before { width: clamp(.8rem, 1.2vw, 1.3rem); }
  .v14 .food .food-stack__item .food-item__desc { font-size: .74rem; line-height: 1.3; min-height: 0; }
  .v14 .food .food-stack__item .food-item__name { justify-content: flex-start; }
  /* Bundles: Streifen unter allen Spalten, die zwei mittig, kein Knopf */
  .v14 .food .food-deals {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  .v14 .food .food-deal__what { max-width: none; }
  .v14 .food .food-deals .sec-cta { display: none; }
}
@media (min-width: 700px) and (max-width: 1279px) {
  .v14 .food .food-list { --food-h: clamp(6.5rem, min(17vh, 16vw), 10rem); }
  /* Sourdough ueber die ganze Breite, Stapel und Namen als Block mittig */
  .v14 .food .food-row--sourdough { grid-column: 1 / -1; justify-items: center; }
  .v14 .food .food-row--sourdough .food-row__label { justify-self: stretch; }
  .v14 .food .food-stack { grid-template-columns: auto 18rem; }
  .v14 .food .food-stack__img { height: min(36vh, 19rem); }
}
@media (min-width: 1280px) {
  .v14 .food { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v14 .food .food-row--sourdough { grid-row: span 4; }
  .v14 .food .food-list { --food-h: clamp(7rem, 15.5vh, 11.5rem); }
  /* Stapel so hoch wie moeglich: 11 rem neben ihm bleiben fuer die Namen
     ("The Mediterranean" in einer Zeile) */
  .v14 .food .food-stack__img { height: min(46vh, 26rem, calc((100cqi - 11rem) * 1.54)); }
}

/* Unter 1000 px reicht die Breite nicht fuer Titel, Satz und Knopf in
   einer Zeile: der Titel steht darueber, Satz und Knopf darunter
   nebeneinander. */
@media (min-width: 700px) and (max-width: 999px) {
  .v14 .food .food__head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "lead order"; row-gap: .8rem; }
}


/* ============================================================
   12  Choreografie (js/v14-reveal.js) -- ein Effekt fuer die ganze Seite
   Patrick, 03.10.2026: "Das muss alles in Unison funktionieren. Es muss
   smooth sein. Es darf nicht reinblinken. Und es soll nacheinander kommen."
   Jede Einheit mit data-reveal: unsichtbar und 24 px tiefer, dann gleitet
   sie mit demselben Easing herein. Die Reihenfolge und der Abstand kommen
   aus dem Skript. Ohne JavaScript steht alles da (noscript im Markup).
   ============================================================ */
.v14 [data-reveal]:not(.line) {
  opacity: 0;
  transform: translateY(24px);   /* 2D: translate3d haette fuer jedes der ~100 Teile eine eigene GPU-Ebene erzwungen */
  transition: opacity .75s var(--ease), transform .9s var(--ease);
}
.v14 [data-reveal]:not(.line).is-in { opacity: 1; transform: none; }
/* Flaechen ohne Weg: nur Ueberblenden (Bildband, Plakatband, Reihen, die
   selbst laufen und ihr transform nicht hergeben) */
.v14 [data-reveal="fade"]:not(.line) { transform: none; transition: opacity 1s var(--ease); }
/* Was beim Springen schon vorbei ist, steht ohne Uebergang da */
.v14 .is-instant { transition: none !important; }

/* Bildband (Telefon: Bild, Halt, naechstes; Desktop: Lauf): die Animation
   startet mit dem Einblenden statt beim Seitenstart -- sonst steht beim
   Ankommen irgendeine Phase im Bild, mitten im Wechsel. Beim Zeigen auf
   dem Desktop pausiert es weiter (v13.css). */
.v14 .storecollage__track { animation-play-state: paused; }
.v14 .storecollage.is-in:not(:hover) .storecollage__track { animation-play-state: running; }

/* Hero: Standbild, Logo und Knoepfe bleiben unsichtbar, bis Schrift und
   Standbild bereit sind -- vorher sprang das Logo vom Rand an seinen Platz
   und die Schrift beim Tausch. Das Skript blendet sie nacheinander ein
   (.is-in = die Animation laeuft) und raeumt danach auf (.is-done = Ruhe-
   zustand ohne jede Animation oder Transition).
   Das Logo ist position: fixed und wird beim Scrollen von JavaScript bewegt
   (v1.js). Deshalb darf auf ihm und auf der Huelle der fliegenden Knoepfe nach
   dem Einblenden nichts mehr haengen -- keine Transition, keine Animation mit
   fill-mode forwards. Das war nicht die Ursache des Ruckelns (die lag im
   Kuehlschrank-SVG und der vererbten --nav-progress, siehe "main" oben); es
   haelt nur den schnellsten Pfad frei. */
.v14 .hero__poster,
.v14 .brand-float,
.v14 .hero__actions-slot { opacity: 0; }
.v14 .hero__poster.is-in,
.v14 .brand-float.is-in,
.v14 .hero__actions-slot.is-in { animation: v14-hero-in .9s var(--ease) both; }
.v14 .brand-float.is-in { animation-duration: .7s; }
.v14 .hero__poster.is-done,
.v14 .brand-float.is-done,
.v14 .hero__actions-slot.is-done { opacity: 1; animation: none; }
/* Ohne Skript holt die Animation sie nach 3 s; bis dahin 0, danach 1 -- und
   dann ist sie vorbei (kein dauerhaftes forwards am Logo). */
.v14 .hero__poster:not(.is-in):not(.is-done),
.v14 .brand-float:not(.is-in):not(.is-done),
.v14 .hero__actions-slot:not(.is-in):not(.is-done) { animation: v14-hero-failsafe 0s 3s both; }
@keyframes v14-hero-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v14-hero-failsafe { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .v14 [data-reveal]:not(.line),
  .v14 [data-reveal="fade"]:not(.line),
  .v14 .hero__poster,
  .v14 .brand-float,
  .v14 .hero__actions-slot { opacity: 1 !important; transform: none; transition: none; animation: none !important; }
}

/* ============================================================
   13  Angedockte Knoepfe in iOS-Safari (Patrick, 03.10.2026: "menu and
   order buttons get covered in mobile once i scroll past the hero section
   ... it was fixed, now broken again")
   Ursache, im echten iOS-Safari (26.5) gefunden, nicht im Emulator: der Hero
   hatte overflow: hidden (v13.css, .hero-a .hero). Die Knoepfe sind
   position: fixed, stehen aber im DOM im Hero. iOS schneidet solche Kinder am
   overflow eines Vorfahren ab -- sobald der Hero aus dem Bild ist, werden die
   angedockten Knoepfe nicht mehr gemalt, obwohl alles stimmt (Position,
   Deckkraft, Plum-Schicht, Trefferpruefung: gemessen). Chrome und der
   WebKit-Emulator schneiden nicht, deshalb fiel es dort nie auf.
   Der Zuschnitt gehoert an das Video, das ihn braucht, nicht an den Hero.
   Wer dem Hero wieder overflow gibt (hidden, clip, auto), bricht das auf dem
   iPhone -- nur dort pruefbar (Xcode-Simulator, Mobile Safari).
   ============================================================ */
.hero-a .hero { overflow: visible; }
.hero-a .hero__media { overflow: hidden; }