@charset "UTF-8";
/* === vf-tokens:start · generiert aus design/tokens.css (Umbrella VitaFresh-ch/vitafresh), nicht von Hand ändern === */
:root {
  --vf-cream: #f4efe4;
  --vf-cream-2: #ece5d4;
  --vf-bone: #ece7da;
  --vf-bone-soft: #a9a294;
  --vf-ink: #1a2126;
  --vf-ink-soft: #4c545a;
  --vf-ink-mute: #656b70;
  --vf-white: #fff;
  --vf-slate-950: #0f1519;
  --vf-slate-900: #151d23;
  --vf-slate-850: #1a242b;
  --vf-green: #8dc63f;
  --vf-green-bright: #a6dc55;
  --vf-green-ink: #44661a;
  --vf-green-deep: #2f4d13;
  --vf-text: var(--vf-ink);
  --vf-text-soft: var(--vf-ink-soft);
  --vf-text-mute: var(--vf-ink-mute);
  --vf-text-on-dark: var(--vf-cream);
  --vf-text-on-dark-soft: var(--vf-bone-soft);
  --vf-on-green: #15230a;
  --vf-line: rgba(28,34,39,.14);
  --vf-line-strong: rgba(28,34,39,.24);
  --vf-line-field: rgba(28,34,39,.52);
  --vf-line-on-dark: rgba(233,228,216,.12);
  --vf-line-on-dark-strong: rgba(233,228,216,.22);
  --vf-danger: #a03325;
  --vf-danger-bg: #fbe9e4;
  --vf-danger-on-dark: #f0a493;
  --vf-warn: #805000;
  --vf-warn-bg: #fff4d6;
  --vf-success: var(--vf-green-deep);
  --vf-success-bg: var(--vf-tint-green);
  --vf-tint-green: rgba(141,198,63,.18);
  --vf-tint-green-soft: rgba(47,77,19,.07);
  --vf-star: #f0ad1e;
  --vf-scrim: rgba(26,33,38,.5);
  --vf-focus-color: var(--vf-green-ink);
  --vf-focus-color-on-dark: var(--vf-green-bright);
  --vf-focus-color-on-photo: var(--vf-white);
  --vf-focus-edge-on-photo: var(--vf-green-deep);
  --vf-focus-width: 2px;
  --vf-focus-offset: 2px;
  --vf-focus-width-on-photo: 3px;
  --vf-font-display: "Fraunces",Georgia,serif;
  --vf-font-body: "Hanken Grotesk","Helvetica Neue",sans-serif;
  --vf-font-mono: "Spline Sans Mono",ui-monospace,monospace;
  --vf-weight-text: 400;
  --vf-weight-medium: 500;
  --vf-weight-strong: 600;
  --vf-weight-bold: 700;
  --vf-weight-display: 500;
  --vf-weight-accent: 420;
  --vf-text-11: 11px;
  --vf-text-12: 12px;
  --vf-text-13: 13px;
  --vf-text-14: 14px;
  --vf-text-15: 15px;
  --vf-text-16: 16px;
  --vf-text-18: 18px;
  --vf-title-18: 18px;
  --vf-title-22: 22px;
  --vf-title-28: 28px;
  --vf-title-36: 36px;
  --vf-hero: clamp(42px,6.4vw,88px);
  --vf-h1: clamp(34px,4.6vw,56px);
  --vf-h2: clamp(26px,3vw,36px);
  --vf-h3: clamp(20px,1.8vw,24px);
  --vf-lede: clamp(16px,1.5vw,20px);
  --vf-leading-none: 1;
  --vf-leading-tight: 1.12;
  --vf-leading-snug: 1.3;
  --vf-leading-body: 1.5;
  --vf-leading-read: 1.65;
  --vf-tracking-display: -.01em;
  --vf-tracking-label: .16em;
  --vf-label: 600 12px/1.2 var(--vf-font-body);
  --vf-space-half: 2px;
  --vf-space-1: 4px;
  --vf-space-2: 8px;
  --vf-space-3: 12px;
  --vf-space-4: 16px;
  --vf-space-5: 20px;
  --vf-space-6: 24px;
  --vf-space-8: 32px;
  --vf-space-10: 40px;
  --vf-space-12: 48px;
  --vf-space-16: 64px;
  --vf-space-24: 96px;
  --vf-gutter: 16px;
  --vf-gutter-wide: clamp(20px,5vw,56px);
  --vf-section: 48px;
  --vf-section-wide: clamp(84px,12vw,160px);
  --vf-max: 1200px;
  --vf-max-app: 1360px;
  --vf-sheet-max-sm: 600px;
  --vf-sheet-max: 760px;
  --vf-radius-xs: 8px;
  --vf-radius-sm: 12px;
  --vf-radius: 18px;
  --vf-radius-md: 22px;
  --vf-radius-lg: 26px;
  --vf-radius-pill: 999px;
  --vf-radius-round: 50%;
  --vf-shadow-photo: 0 1px 6px rgba(0,0,0,.18);
  --vf-shadow-soft: 0 6px 22px rgba(47,77,19,.10);
  --vf-shadow-float: 0 10px 30px rgba(26,33,38,.22);
  --vf-shadow-tray: 0 18px 40px -22px rgba(47,77,19,.28);
  --vf-shadow-sheet: 0 24px 70px rgba(26,33,38,.35);
  --vf-ring: 0 0 0 3px rgba(68,102,26,.35);
  --vf-glow-green: 0 8px 30px rgba(141,198,63,.22);
  --vf-border-width: 1px;
  --vf-border-width-strong: 2px;
  --vf-tap: 44px;
  --vf-control-lg: 54px;
  --vf-control: 48px;
  --vf-control-sm: 36px;
  --vf-press: .97;
  --vf-disabled: .45;
  --vf-disabled-bg: var(--vf-cream-2);
  --vf-disabled-text: var(--vf-ink-soft);
  --vf-busy: .55;
  --vf-ease: cubic-bezier(.19,1,.22,1);
  --vf-dur-fast: .18s;
  --vf-dur: .24s;
  --vf-dur-slow: .4s;
  --vf-dur-reveal: 1s;
  --vf-motion-landing-float: var(--vf-dur-slow);
  --vf-motion-landing-exit: var(--vf-dur);
  --vf-motion-landing-reveal: var(--vf-dur-reveal);
  --vf-motion-shop-float: var(--vf-dur);
  --vf-motion-shop-exit: var(--vf-dur-fast);
  --vf-motion-shop-reveal: var(--vf-dur-slow);
  --vf-motion-shop-zoom: 1.03;
  --vf-motion-shop-travel-layer: 24px;
  --vf-motion-shop-travel-popover: 6px;
  --vf-motion-shop-travel-float: 8px;
  --vf-motion-portal-float: var(--vf-dur);
  --vf-motion-portal-exit: var(--vf-dur-fast);
  --vf-motion-portal-reveal: 0s;
  --vf-motion-portal-hint: .8s;
  --vf-motion-portal-mark: 1.4s;
  --vf-motion-portal-travel-layer: 22px;
  --vf-motion-portal-travel-float: 8px;
  --vf-z-landing-raised: 1;
  --vf-z-landing-grain: 4;
  --vf-z-landing-bar: 5;
  --vf-z-landing-float: 55;
  --vf-z-landing-header: 60;
  --vf-z-landing-toast: 61;
  --vf-z-landing-announce: 70;
  --vf-z-portal-raised: 2;
  --vf-z-portal-sticky: 5;
  --vf-z-portal-bar: 10;
  --vf-z-portal-undo: 15;
  --vf-z-portal-header: 20;
  --vf-z-portal-cta: 25;
  --vf-z-portal-nav: 30;
  --vf-z-portal-sheet: 40;
  --vf-z-portal-toast: 50;
  --vf-z-portal-system: 60;
  --vf-z-shop-raised: 2;
  --vf-z-shop-sticky: 40;
  --vf-z-shop-header: 900;
  --vf-z-shop-bar: 980;
  --vf-z-shop-nav: 990;
  --vf-z-shop-sheet: 995;
  --vf-z-shop-toast: 1000;
  --vf-z-shop-popover: 10000;
}
@media (min-width: 750px) {
  :root { --vf-gutter: 24px; --vf-section: 64px; }
}
@media (min-width: 1200px) {
  :root { --vf-gutter: 32px; --vf-section: 96px; }
}
/* === vf-tokens:end === */
/* ============================================================
   VitaFresh Landing — Ultra clean (Vorschau 20.10.2026, Branch design/ultra-clean-2026-10-20)
   Mehr Luft, Fläche statt Linie, Grün nur für Aktion und Auswahl, Fraunces nur für Titel und Beträge.
   Schriften: Fraunces (Titel, Beträge) · Hanken Grotesk (alles andere)
   ============================================================ */

/* ---------- Schriften (selbst gehostet, latin) ---------- */
/* ---------- Fonts (self-hosted, latin) ---------- */
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 650;
  font-display: swap;
  src: url(../fonts/fraunces-aa080111.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 650;
  font-display: swap;
  src: url(../fonts/fraunces-0940d166.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/hankengrotesk-5cebb0b5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/hankengrotesk-5cebb0b5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/hankengrotesk-5cebb0b5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/hankengrotesk-5cebb0b5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/hankengrotesk-5cebb0b5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Landing-Namen zeigen auf die gemeinsamen Tokens (Block oben, aus design/tokens.css im Umbrella). */
:root {
  --slate-950: var(--vf-slate-950);
  --slate-900: var(--vf-slate-900);
  --slate-850: var(--vf-slate-850);
  --hairline-dark: var(--vf-line-on-dark);
  --hairline-strong: var(--vf-line-on-dark-strong); /* hell auf Dunkel; nicht --vf-line-strong (Portal/Shop: dunkel auf Hell) */

  --cream: var(--vf-cream);
  --cream-2: var(--vf-cream-2);
  --hairline-light: var(--vf-line);

  --green: var(--vf-green);
  --green-bright: var(--vf-green-bright);
  --green-ink: var(--vf-green-ink);
  --green-deep: var(--vf-green-deep);

  --ink: var(--vf-ink);
  /* Kontrast eine Stufe kräftiger (Pasci 22.10.2026: «Kontrast neu etwas tief»). Lokal statt im generierten
     Token-Block; gehört als Nachtrag in design/tokens.css, das Portal zieht in derselben Runde nach.
     Creme: 6.7 → 8.1 : 1, Dunkel (slate-950): 7.3 → 9.2 : 1. Vorher --vf-ink-soft #4c545a, --vf-bone-soft #a9a294. */
  --ink-soft: #40484e;
  --bone: var(--vf-bone);
  --bone-soft: #bdb7a9;

  --font-display: var(--vf-font-display);
  --font-body: var(--vf-font-body);

  --ease: var(--vf-ease);

  --w-max: var(--vf-max);
  --radius: var(--vf-radius);
  --radius-md: var(--vf-radius-md);
  --radius-lg: var(--vf-radius-lg);

  /* Ultra clean (Vorschau 20.10.2026): mehr Luft als --vf-section-wide und --vf-gutter-wide.
     Token fehlt (Nachtrag B1), darum lokal. */
  --pad-x: clamp(24px, 5vw, 56px);
  --sec-y: clamp(104px, 13vw, 184px);
  /* Ankündigung + Kopf kleben als eine Einheit oben: am Handy 36 + 60 = 96 px, am Computer 40 + 72.
     Die Leiste braucht Luft über und unter der Zeile (Marlon, 21.10.2026: 28 px klebte am Rand),
     der Kopf rund 10 px um den Knopf.
     --announce-h ist die echte Höhe der Ankündigung: main.js setzt sie nach, falls der Text
     umbricht (Zoom, sehr schmale Geräte), damit Kopf, Abstände und Sprünge mitgehen. */
  --head-h: 60px;
  --announce-min: 36px;
  --announce-h: var(--announce-min);
}
@media (min-width: 761px) { :root { --head-h: 72px; --announce-min: 40px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--slate-950);
  color: var(--bone);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: var(--vf-leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--green); color: var(--slate-950); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@keyframes vfSettle { from { transform: scale(1.08); } to { transform: scale(1.02); } }

/* ---------- Rahmen ---------- */
.wrap { max-width: calc(var(--w-max) + 2 * var(--pad-x)); margin: 0 auto; padding-inline: var(--pad-x); }

h1, h2, h3 {
  font-family: var(--font-display); font-weight: var(--vf-weight-display);
  line-height: var(--vf-leading-tight); letter-spacing: var(--vf-tracking-display);
  text-wrap: balance;
}
h2 { font-size: var(--vf-h1); }
/* Fliesstext ohne einzelnes Wort in der letzten Zeile (Chromium, Safari 26). Klassen-Regeln mit balance
   oder nowrap gewinnen (spezifischer). Safari bis 18 und Firefox kennen pretty nicht: main.js bindet dort
   das letzte Wort per geschütztem Leerschlag (Waisen-Schutz). */
p, li, dd, blockquote, figcaption { text-wrap: pretty; }
/* Zweite Zeile eines Titels, die ab 360 px auf eigener Zeile steht («Nach Feierabend ist / der Kopf leer.»).
   Darunter fliesst sie mit, sonst bliebe «ist» allein auf einer Zeile. */
.h2-zeile { display: block; }
/* Sehr schmale Handys: Titel 33 statt 34 px, damit «Deine Woche steht.» (275 px bei 34 px) in die 272 px
   bei 320 passt und nicht «Deine» allein steht. */
@media (max-width: 359px) {
  h2 { font-size: 33px; }
  .h2-zeile { display: inline; }
}
h1 em, h2 em { font-style: italic; font-weight: var(--vf-weight-accent); color: var(--green-bright); }
.light h2 em { color: var(--green-ink); }

.lede { font-size: var(--vf-lede); line-height: 1.5; color: var(--bone-soft); max-width: 40ch; text-wrap: pretty; }
.light .lede { color: var(--ink-soft); }

/* ---------- Knöpfe (Galerie C «Grün nach Grund») ----------
   Auf Hell: Grün-Tinte, Schrift Creme. Auf Dunkel: Hellgrün mit grünem Schein. Ein Knopf, eine Grösse. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vf-space-2);
  min-height: var(--vf-control-lg); padding: 0 var(--vf-space-8);
  border: 0; border-radius: var(--vf-radius-pill); cursor: pointer;
  font: var(--vf-weight-strong) var(--vf-text-16)/var(--vf-leading-tight) var(--font-body);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--vf-dur-fast) var(--vf-ease), transform var(--vf-dur) var(--vf-ease);
}
.btn:active { transform: scale(var(--vf-press)); }
.btn-solid { background: var(--green-ink); color: var(--cream); }
.dark .btn-solid, .hero .btn-solid, .final .btn-solid, .site-head .btn-solid, .vsl-endcta .btn-solid {
  background: var(--green); color: var(--vf-on-green); box-shadow: var(--vf-glow-green);
}
.btn-sm { min-height: 40px; padding: 0 var(--vf-space-5); font-size: var(--vf-text-14); }
@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: var(--green-deep); transform: translateY(-1px); }
  .dark .btn-solid:hover, .hero .btn-solid:hover, .final .btn-solid:hover, .site-head .btn-solid:hover, .vsl-endcta .btn-solid:hover { background: var(--green-bright); }
}
.btn:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: var(--vf-focus-offset); }
.dark .btn:focus-visible, .hero .btn:focus-visible, .final .btn:focus-visible, .site-head .btn:focus-visible { outline-color: var(--vf-focus-color-on-dark); }

/* Text-Link «›» ohne Unterstrich (Galerie C) */
.link-weiter { color: var(--green-ink); font-weight: var(--vf-weight-strong); text-decoration: none; }
.link-weiter::after { content: "\00a0›"; }

/* ---------- Ankündigung + Kopf ---------- */
/* Landing = die laute Fläche (Marlon, 21.10.2026): Die Ankündigung bleibt wie vorher immer sichtbar,
   auch in der Quiz-Sektion (CONTEXT.md, Announce-Bar), hellgrün mit Tinte. Der Kopf klebt direkt
   darunter; beide zusammen sind eine Einheit. Am Handy eine Zeile mit kurzem Wortlaut. Wird es zu eng
   (Zoom, sehr schmale Geräte), bricht der Text um statt abgeschnitten zu werden: «15%» und «CHF 100» bleiben. */
.announce {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--vf-z-landing-announce);
  min-height: var(--announce-min); display: flex; align-items: center; justify-content: center;
  padding: 8px var(--vf-space-4); text-align: center; line-height: 1.3; text-wrap: balance;
  background: var(--green); color: var(--ink);
  font-size: var(--vf-text-13); font-weight: var(--vf-weight-medium); letter-spacing: .005em;
}
.announce b { font-weight: var(--vf-weight-bold); }
.announce-lang, .announce-gratis { display: none; }
@media (min-width: 761px) {
  .announce { font-size: var(--vf-text-13); padding-inline: var(--vf-space-4); }
  .announce-lang { display: inline; }
  .announce-kurz { display: none; }
}
/* Kurzform schon unter 375 px: 360er-Androids brachen mit 13 px sonst auf zwei Zeilen um. */
@media (max-width: 374px) {
  .announce { padding-inline: var(--vf-space-3); }
  .announce-geschenkt { display: none; }
  .announce-gratis { display: inline; }
}
@media (max-width: 349px) { .announce { font-size: var(--vf-text-12); } }
.announce-spacer { height: var(--announce-h); }

/* Kopf: klebt unter der Ankündigung, «Menüs ansehen» steht auf jeder Höhe (Marlon, 21.10.2026).
   Ganz oben transparent mit hellem Logo und hellgrünem Knopf. Sobald gescrollt wird, bekommt er Glas,
   damit Titel und Kacheln des Helds nicht durch Logo und Knopf laufen: über dem Held und anderen
   dunklen Inseln dunkles Glas, über hellen Abschnitten helles Glas wie bei apple.com (Creme 86 %,
   Unschärfe, keine Linie, kein Schatten; Tinten-Logo, Links in Zweittext, Knopf in Grün-Tinte,
   Knöpfe C «Grün nach Grund»). Er gleitet weg, solange die Quiz-Sektion im Bild ist
   (CONTEXT.md, Header-Pill); die Ankündigung bleibt. main.js setzt die Zustände. */
.site-head {
  position: fixed; top: var(--announce-h); left: 0; right: 0; z-index: var(--vf-z-landing-header);
  transition: background-color .4s var(--vf-ease);
}
.site-head.is-scrolled {
  /* .86 statt .8: Zweittext-Links halten so auch über dunklen Fotos (Schritte) 4,5 : 1. */
  background: rgba(244,239,228,.86);
  backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
}
/* Über dunklen Inseln (Held, Preise, Lieferanten, Stimmen, Schluss, Fuss) wird das Glas dunkel, damit der
   Kopf auch dort in der Seite verschwindet statt als heller Streifen zu stehen (.is-over-dark, main.js). */
.site-head.is-scrolled.is-over-dark { background: rgba(15,21,25,.78); }
/* Dunkle Inseln in hellen Abschnitten (Abo-Kasten, Panel der Gründer) reichen nicht über die ganze Breite.
   Läuft eine unter dem Kopf durch, deckt das helle Glas ganz, statt grau zu werden (.is-over-insel, main.js). */
.site-head.is-scrolled.is-over-insel:not(.is-over-dark) { background: var(--cream); }
.site-head .brand-tinte { display: none; }
.site-head.is-scrolled:not(.is-over-dark) .brand-hell { display: none; }
.site-head.is-scrolled:not(.is-over-dark) .brand-tinte { display: block; }
.site-head.is-scrolled:not(.is-over-dark) .head-nav a:not(.btn) { color: var(--ink-soft); }
.site-head.is-scrolled:not(.is-over-dark) .head-nav a:not(.btn):hover { color: var(--vf-ink); }
.site-head.is-scrolled:not(.is-over-dark) .btn-solid { background: var(--green-ink); color: var(--cream); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .site-head.is-scrolled:not(.is-over-dark) .btn-solid:hover { background: var(--green-deep); } }
.site-head.is-scrolled:not(.is-over-dark) .btn:focus-visible { outline-color: var(--vf-focus-color); }
.head-inner {
  max-width: calc(var(--w-max) + 2 * var(--pad-x)); margin: 0 auto; padding-inline: var(--pad-x);
  height: var(--head-h); display: flex; align-items: center; justify-content: space-between; gap: var(--vf-space-4);
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-lockup { height: 24px; width: auto; display: block; }
.head-nav { display: flex; align-items: center; gap: var(--vf-space-8); font-size: var(--vf-text-14); }
.head-nav a:not(.btn) { text-decoration: none; color: var(--bone-soft); transition: color .2s; }
.head-nav a:not(.btn):hover { color: var(--cream); }
@media (min-width: 761px) { .brand-lockup { height: 28px; } }
@media (max-width: 760px) { .head-nav a:not(.btn) { display: none; } }

/* ---------- Held ---------- */
.hero {
  /* Erster Bildschirm = Bildschirm minus Ankündigung: Beleg und Kacheln stehen ganz drin. */
  position: relative; min-height: calc(100svh - var(--announce-h));
  display: flex; align-items: flex-end;
  isolation: isolate; overflow: hidden; color: var(--cream);
}
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  animation: vfSettle 2.6s var(--ease) forwards;
  filter: brightness(.74) saturate(1.05);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,21,25,.55) 0%, rgba(15,21,25,0) 26%, rgba(15,21,25,.35) 48%, rgba(15,21,25,.94) 82%);
}
.hero .wrap { width: 100%; padding-block: calc(var(--head-h) + var(--vf-space-12)) var(--vf-space-8); }
/* Dachzeile über dem Titel: «nie gefroren» und die Herkunft im ersten Bildschirm (Ultra clean, Runde 5).
   Zwei Sätze als Einheiten (.nb), bricht die Zeile, dann zwischen ihnen. */
.hero-eyebrow {
  position: relative; width: fit-content; max-width: 100%;
  font: var(--vf-weight-strong) var(--vf-text-13)/1.45 var(--font-body); letter-spacing: .01em;
  color: var(--cream); margin-bottom: var(--vf-space-4); text-wrap: balance;
  text-shadow: 0 1px 2px rgba(15,21,25,.45), 0 0 16px rgba(15,21,25,.55);
}
/* Steht oft auf hellem Gemüse: ein weich verwischter dunkler Fleck genau hinter der Zeile (keine sichtbare
   Fläche, keine Pille). Er wandert mit der Zeile, das Bild bleibt sonst so hell wie es ist. */
.hero-eyebrow::before {
  content: ""; position: absolute; z-index: -1; inset: -6px -14px;
  border-radius: 999px; background: rgba(15,21,25,.56); filter: blur(14px);
}
/* Handy: zwei Zeilen, ein Satz pro Zeile, in allen Browsern gleich (Safari setzte sonst eine Zeile bis in den Rand). */
@media (max-width: 419px) { .hero-eyebrow .nb { display: block; } }
.hero h1 { font-size: var(--vf-hero); max-width: 13ch; margin-bottom: var(--vf-space-4); color: var(--cream); }
.hero .lede { color: rgba(236,231,218,.94); margin-bottom: var(--vf-space-10); }
@media (min-width: 761px) { .hero h1 { max-width: 17ch; } .hero .lede { max-width: 60ch; } .hero-eyebrow { font-size: var(--vf-text-15); } }
/* Schmale Handys: Der Titel wächst mit der Breite, damit «Ohne zu kochen.» ganz auf einer Zeile steht
   und «Die ganze Woche» nicht zerfällt (drei Zeilen statt vier; bei 42 px braucht «Die ganze Woche» 324 px). */
@media (max-width: 374px) { .hero h1 { font-size: 10.9vw; } }
.hero-start { max-width: 460px; }
.hero-start-q { font: var(--vf-weight-strong) var(--vf-text-15)/1.3 var(--font-body); color: var(--cream); margin-bottom: var(--vf-space-3); }
.hero-goals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vf-space-2); }
.hero-goal {
  display: flex; align-items: center; min-height: 56px; padding: var(--vf-space-2) var(--vf-space-4);
  border-radius: var(--vf-radius-sm); background: rgba(236,231,218,.12);
  color: var(--cream); font: var(--vf-weight-strong) var(--vf-text-15)/1.2 var(--font-body); text-decoration: none;
  transition: background-color var(--vf-dur-fast) var(--ease), transform var(--vf-dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .hero-goal:hover { background: rgba(236,231,218,.2); } }
.hero-goal:active { transform: scale(var(--vf-press)); }
.hero-goal svg { flex: none; width: 18px; height: 18px; margin-right: var(--vf-space-2); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hero-goal:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color-on-dark); outline-offset: var(--vf-focus-offset); }
.hero-start-alle {
  display: inline-flex; align-items: center; min-height: var(--vf-tap); margin-top: var(--vf-space-2);
  font: var(--vf-weight-strong) var(--vf-text-15)/1 var(--font-body); color: var(--cream); text-decoration: none;
}
.hero-start-alle::after { content: "\00a0›"; color: var(--green-bright); }
.hero-start-alle:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color-on-dark); outline-offset: var(--vf-focus-offset); border-radius: 4px; }
.hero-proof {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--vf-space-1) var(--vf-space-5);
  margin-top: var(--vf-space-6); font-size: var(--vf-text-13); color: var(--bone-soft);
}
.hero-proof b { color: var(--cream); font-weight: var(--vf-weight-strong); }
.hero-note { margin-top: var(--vf-space-4); font-size: var(--vf-text-14); color: var(--bone-soft); }
.hero-note b { color: var(--cream); font-weight: var(--vf-weight-strong); white-space: nowrap; }
.hero-note + .hero-proof { margin-top: var(--vf-space-3); }
/* Kleine Handys (375 × 667): der Untertitel weicht, damit die vier Kacheln sichtbar bleiben (Plan 063). */
@media (max-width: 760px) and (max-height: 700px) {
  .hero .lede { display: none; }
  .hero h1 { margin-bottom: var(--vf-space-6); }
  .hero-eyebrow { margin-bottom: var(--vf-space-3); }
}

/* ---------- Laufband ----------
   Fünf Vertrauenssätze unter dem Held (Ultra clean, Runde 5): dunkel wie der Fuss des Helds, Fraunces kursiv,
   kleine Punkte als Takt. Am Handy läuft es langsam (rund 17 px/s), ohne Glanz, ohne Scroll-Kopplung, und steht
   bei Berührung (.is-paused, main.js); die Ränder blenden weich aus. Am Computer steht es (siehe unten). */
.marquee {
  position: relative; overflow: hidden; background: var(--slate-950); color: var(--bone-soft);
  padding-block: var(--vf-space-5);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad-x), #000 calc(100% - var(--pad-x)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad-x), #000 calc(100% - var(--pad-x)), transparent 100%);
}
.marquee-track { display: flex; width: max-content; animation: vfLaufband 80s linear infinite; }
/* Steht bei Berührung (.is-paused, main.js) und unter der Maus; Hover nur mit Maus, sonst bliebe es nach einem Tipp hängen. */
.marquee.is-paused .marquee-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .marquee:hover .marquee-track { animation-play-state: paused; } }
.marquee-list { display: flex; flex: none; list-style: none; }
.marquee-list li {
  flex: none; display: flex; align-items: center; white-space: nowrap;
  font-family: var(--font-display); font-style: italic; font-weight: var(--vf-weight-accent);
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3;
}
.marquee-list li::after { content: ""; flex: none; width: 4px; height: 4px; margin-inline: 22px; border-radius: 50%; background: rgba(236,231,218,.34); }
.marquee-list b { margin-right: .25em; font-weight: var(--vf-weight-display); color: var(--cream); }
@keyframes vfLaufband { to { transform: translateX(-50%); } }
/* Reduzierte Bewegung am Handy: Das Band steht und ist wischbar (Rand blendet aus wie bei den Such-Chips). */
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .marquee { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee-track { animation: none; padding-inline: var(--pad-x); }
  .marquee-kopie { display: none; }
}
/* Computer: Alle fünf Sätze passen in zwei ruhige, zentrierte Zeilen, darum läuft hier nichts (Bewegung ohne
   Zweck, per Tastatur nicht anzuhalten). Ohne Punkte, damit keiner am Zeilenende hängt. */
@media (min-width: 761px) {
  .marquee { overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; display: block; width: auto; max-width: calc(var(--w-max) + 2 * var(--pad-x)); margin-inline: auto; padding-inline: var(--pad-x); }
  /* Sätze als ungebrochene Wörter in einem ausgeglichenen Absatz: balance verteilt sie 3/2 statt 4/1. */
  .marquee-list { display: block; text-align: center; text-wrap: balance; line-height: 1.6; }
  .marquee-list li { display: inline; margin-inline: 20px; }
  .marquee-list b { margin-right: 0; } /* inline zählt der Leerschlag selbst */
  .marquee-list li::after { content: none; }
  .marquee-kopie { display: none; }
}

/* ---------- Abschnitte ---------- */
section { position: relative; }
section[id] { scroll-margin-top: calc(var(--announce-h) + var(--head-h)); }
/* clip statt hidden: Ein Abschnitt mit overflow: hidden ist ein Scroll-Container, und Chrome übergeht dann
   sein scroll-margin — Sprünge aus dem Kopf (FAQ) landeten unter der klebenden Einheit. Ohne clip-Support: hidden. */
.sec { padding-block: var(--sec-y); overflow: hidden; overflow: clip; }
/* Quiz-Sektion: clip statt hidden, sonst klebt die Bestell-Leiste nicht (Plan 063). */
#packages { overflow: clip; }
@supports not (overflow: clip) { #packages { overflow: visible; } }
.sec-head { max-width: 760px; margin-bottom: clamp(48px, 7vw, 88px); }
.sec-head.center { text-align: center; max-width: 860px; margin-inline: auto; }
.sec-head.center .lede { margin-inline: auto; }
.sec-head h2 + .lede { margin-top: var(--vf-space-5); }
.kicker { font: var(--vf-weight-strong) var(--vf-text-14)/1.4 var(--font-body); color: var(--ink-soft); margin-bottom: var(--vf-space-3); }
.sec .wrap { position: relative; }
/* Folgt Hell auf Hell oder Dunkel auf Dunkel, trennt ein Abstand, nicht zwei. */
.sec.light + .sec.light, .sec.dark + .sec.dark { padding-top: 0; }
/* Ohne eigenen Abstand oben (FAQ nach Lieferung) klebte der Titel nach dem Nav-Sprung am Kopf: Luft dazu. */
.sec.light + .sec.light[id], .sec.dark + .sec.dark[id] { scroll-margin-top: calc(var(--announce-h) + var(--head-h) + var(--vf-space-12)); }

.dark, .dark-2 { background: var(--slate-950); color: var(--bone); }
.dark h2 { color: var(--cream); }
.light { background: var(--cream); color: var(--ink); }
.light h2, .light h3 { color: var(--ink); }

/* ---------- So funktioniert's ---------- */
/* Handy und Desktop erzählen dieselbe Geschichte: drei echte Fotos, darunter Titel und eine Zeile. */
.steps { list-style: none; display: grid; gap: var(--vf-space-12); }
.step-photo { aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; margin-bottom: var(--vf-space-5); background: var(--cream-2); }
.step-photo img { width: 100%; height: 100%; object-fit: cover; }
.step-ico { display: block; width: 24px; height: 24px; margin-bottom: var(--vf-space-3); color: var(--green-ink); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { font-size: var(--vf-title-22); margin-bottom: var(--vf-space-2); }
/* «Unser Kühl-Shuttle bringt’s» braucht bei 22 px 280 px, bei 320 sind 272 da: 21 px hält alle drei Titel einzeilig. */
@media (max-width: 359px) { .step h3 { font-size: 21px; } }
.step p { color: var(--ink-soft); max-width: 36ch; text-wrap: pretty; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vf-space-8); }
  .step-photo { aspect-ratio: 4 / 3; margin-bottom: var(--vf-space-6); }
  .step h3 { font-size: var(--vf-h3); }
}

/* ---------- Quiz + «Deine Woche» ----------
   Ultra clean: weisse Karte ohne Rahmen auf Creme, ein Titel, Optionen als ruhige Flächen,
   Wahl in Grün-Tinte mit Haken oder Punkt (Galerie «Chips B»), Feld mit Fuss (Galerie «Formularfeld C»). */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.quiz { max-width: 880px; margin: 0 auto; }
/* Mikro-Testimonial am Bestell-Knopf (CONTEXT.md): ein Zitat, ruhig, ohne Rahmen und ohne Slider. */
.pack-proof { max-width: 620px; margin: clamp(48px, 7vw, 80px) auto 0; text-align: center; }
.pack-proof .stars { display: block; color: var(--green-ink); letter-spacing: 3px; font-size: var(--vf-text-14); margin-bottom: var(--vf-space-3); }
.pack-proof blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: var(--vf-weight-accent);
  font-size: clamp(20px, 2vw, 24px); line-height: 1.4; color: var(--ink); text-wrap: balance;
}
.pack-proof figcaption { margin-top: var(--vf-space-3); font-size: var(--vf-text-14); color: var(--ink-soft); }
.pack-proof figcaption b { color: var(--ink); font-weight: var(--vf-weight-strong); }
.pack-foot { max-width: 620px; margin: var(--vf-space-8) auto 0; text-align: center; font-size: var(--vf-text-13); line-height: 1.6; color: var(--ink-soft); text-wrap: balance; }
.pack-foot b { color: var(--ink); font-weight: var(--vf-weight-strong); }
/* Aufzählungen mit «·» (Vertrauenszeile, Schluss-Zeile, Liefertage; main.js baut sie aus [data-liste]):
   Jeder Teil bleibt beisammen, der Punkt sitzt im Wortabstand und nimmt keinen Platz ein.
   Steht der nächste Teil eine Zeile tiefer, fällt der Punkt am Zeilenende weg (.li-ende). */
.ist-liste { word-spacing: .6em; }
.li-teil { white-space: nowrap; word-spacing: normal; }
/* Ein Teil, der allein breiter als die Zeile ist, steht auf eigenen Zeilen, statt hinter dem Punkt weiterzulaufen. */
.li-teil.li-lang { white-space: normal; display: block; }
.li-teil:not(:last-child)::after { content: "·"; position: absolute; margin-left: .263em; font-weight: inherit; }
.li-teil.li-ende::after { content: none; }
.li-teil.li-umbruch::before { content: "\A"; white-space: pre; }
/* Alle Quiz-Einstiege springen auf #vfQuiz. Dort gleitet der Kopf weg, die Ankündigung bleibt:
   Abstand = Ankündigung + Luft. */
#vfQuiz { scroll-margin-top: calc(var(--announce-h) + var(--vf-space-6)); }
.qz-card {
  max-width: 600px; margin: 0 auto;
  background: var(--vf-white); border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 48px) clamp(20px, 5vw, 48px);
}
.qz-top { display: flex; align-items: center; justify-content: space-between; gap: var(--vf-space-3); margin-bottom: var(--vf-space-6); }
.qz-step { font-size: var(--vf-text-13); font-weight: var(--vf-weight-strong); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.qz-dots { display: flex; gap: var(--vf-space-1); width: 132px; }
.qz-dot { flex: 1; height: 4px; border-radius: 2px; background: var(--cream-2); }
.qz-dot.on { background: var(--green-ink); }
/* Ziel aus dem Held: «✓ Abnehmen» direkt neben den Strichen (Haken wie im Quiz). */
.qz-top.mit-ziel { justify-content: flex-start; gap: var(--vf-space-4); }
.qz-done { display: inline-flex; align-items: center; gap: 4px; font: var(--vf-weight-strong) var(--vf-text-13)/1 var(--font-body); color: var(--ink); white-space: nowrap; }
.qz-done svg { flex: none; width: 14px; height: 14px; color: var(--green-deep); }
.qz-q {
  font-family: var(--font-display); font-weight: var(--vf-weight-display);
  font-size: clamp(26px, 3.2vw, 34px); line-height: var(--vf-leading-tight); letter-spacing: var(--vf-tracking-display);
  color: var(--ink); margin-bottom: var(--vf-space-6); text-wrap: balance;
}
.qz-hint { color: var(--ink-soft); font-size: var(--vf-text-15); margin: calc(-1 * var(--vf-space-3)) 0 var(--vf-space-5); text-wrap: pretty; }
/* Kleingedrucktes ausgeglichen: bricht nach «einverstanden,» und «–», statt «Datenschutzerklärung.» allein zu lassen. */
.qz-hint.qz-fein { font-size: var(--vf-text-12); margin: var(--vf-space-4) 0 0; text-wrap: balance; }
.qz-hint.qz-fein a { color: inherit; }
.qz-opts { display: grid; grid-template-columns: 1fr; gap: var(--vf-space-2); }
@media (min-width: 640px) {
  .qz-opts { grid-template-columns: 1fr 1fr; }
  .qz-opts[data-count="3"] { grid-template-columns: 1fr; }
}
.qz-opt {
  display: flex; align-items: center; gap: var(--vf-space-3);
  min-height: 56px; padding: var(--vf-space-2) var(--vf-space-4);
  text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--cream); border: 0; border-radius: var(--vf-radius-sm);
  transition: background-color var(--vf-dur-fast) var(--ease), color var(--vf-dur-fast) var(--ease), transform var(--vf-dur-fast) var(--ease);
}
.qz-opt:active { transform: scale(var(--vf-press)); }
.qz-opt:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: var(--vf-focus-offset); }
.qz-opt.on { background: var(--green-ink); color: var(--cream); }
@media (hover: hover) and (pointer: fine) { .qz-opt:not(.on):hover { background: var(--cream-2); } }
/* Icons zurück (Pasci 22.10.2026), im neuen Stil: blanke Strich-Glyphe in der Textfarbe, kein Kästchen. */
.qz-ico { flex: none; display: block; width: 20px; height: 20px; }
.qz-ico svg { display: block; width: 100%; height: 100%; }
.qz-txt { flex: 1; min-width: 0; }
.qz-opt b { display: block; font-size: var(--vf-text-15); font-weight: var(--vf-weight-strong); }
/* Unterzeile (Ziel, Appetit, Mahlzeiten): sagt, was «Mittel» oder «8 Menüs» heisst. */
.qz-sub { display: block; margin-top: 2px; font-size: var(--vf-text-13); line-height: 1.35; color: var(--ink-soft); text-wrap: pretty; }
.qz-opt.on .qz-sub { color: rgba(244,239,228,.9); }
.qz-mark { flex: none; display: none; width: 18px; height: 18px; }
.qz-opt.on .qz-mark { display: block; }
.qz-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--vf-space-3); margin-top: var(--vf-space-6); }
.qz-back {
  background: none; border: none; cursor: pointer; font: var(--vf-weight-strong) var(--vf-text-15)/1 var(--font-body);
  color: var(--ink-soft); min-height: var(--vf-tap); padding: 0; text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .qz-back:hover { color: var(--ink); } }
.qz-back:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: var(--vf-focus-offset); border-radius: 4px; }
.qz-back:disabled { visibility: hidden; }
.btn.qz-next { min-height: var(--vf-control); padding: 0 var(--vf-space-8); }
.btn.qz-next:disabled { background: var(--vf-disabled-bg); color: var(--vf-disabled-text); cursor: default; transform: none; }
.qz-skip { display: flex; align-items: center; justify-content: center; margin: var(--vf-space-3) auto 0; color: var(--green-ink); }
.qz-skip::after { content: "\00a0›"; }
.qz-skip:hover { color: var(--green-deep); }

/* PLZ und Warteliste: ein Feld mit eigenem Knopf, darunter der Fuss (Fehler in der Fehler-Tönung). */
.qz-plz {
  position: relative; z-index: 1; display: flex; align-items: center; gap: var(--vf-space-2);
  height: 56px; padding: 0 4px 0 var(--vf-space-5);
  background: var(--vf-white); border: var(--vf-border-width) solid var(--vf-line-field); border-radius: var(--vf-radius-pill);
  transition: border-color var(--vf-dur-fast) var(--ease), box-shadow var(--vf-dur-fast) var(--ease);
}
.qz-plz:focus-within { border-color: var(--green-ink); box-shadow: var(--vf-ring); }
/* Fehler: Rand und Ring in der Fehlerfarbe, passend zur roten Lasche darunter (quiz.js setzt .ist-fehler). */
.qz-plz.ist-fehler, .qz-plz.ist-fehler:focus-within { border-color: var(--vf-danger); }
.qz-plz.ist-fehler:focus-within { box-shadow: 0 0 0 3px rgba(160,51,37,.16); }
.qz-plz .qz-input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none;
  font: var(--vf-weight-text) var(--vf-text-16)/1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums;
}
.qz-plz .qz-input::placeholder { color: var(--vf-text-mute); opacity: 1; }
.qz-plz .btn { flex: none; min-height: 46px; padding: 0 var(--vf-space-5); font-size: var(--vf-text-15); }
.qz-plz .btn:disabled { opacity: var(--vf-busy); cursor: default; }
.qz-err, .qz-fuss {
  position: relative; z-index: 0; display: flex; align-items: flex-start; gap: 6px;
  margin: -14px var(--vf-space-4) 0; padding: calc(14px + var(--vf-space-2)) var(--vf-space-3) var(--vf-space-2);
  border-radius: 0 0 var(--vf-radius-sm) var(--vf-radius-sm);
  background: var(--vf-danger-bg); color: var(--vf-danger);
  font-size: var(--vf-text-14); line-height: 20px; font-weight: var(--vf-weight-medium);
}
.qz-err svg { flex: none; margin-top: 2px; }
.qz-err[hidden] { display: none; }
/* Nur der Text-Span: text-wrap als Kurzform würde sonst das nowrap von .nb («4-stellige») aufheben. */
.qz-err > span { text-wrap: balance; }
/* Als Block-Einheit statt nowrap-Text: So gleicht balance die Zeilen auch neben «4-stellige» aus. */
.qz-err .nb, .vf-save-err .nb { display: inline-block; }
/* Warteliste am Handy: Eine E-Mail braucht die ganze Breite, der Knopf steht darunter. */
@media (max-width: 480px) {
  .qz-plz.qz-mail {
    flex-direction: column; align-items: stretch; gap: var(--vf-space-2);
    height: auto; padding: 0; background: none; border: 0; border-radius: 0;
  }
  .qz-plz.qz-mail:focus-within, .qz-plz.qz-mail.ist-fehler:focus-within { box-shadow: none; }
  .qz-plz.qz-mail .qz-input {
    flex: none; height: var(--vf-control-lg); padding: 0 var(--vf-space-5);
    background: var(--vf-white); border: var(--vf-border-width) solid var(--vf-line-field); border-radius: var(--vf-radius-pill);
    transition: border-color var(--vf-dur-fast) var(--ease), box-shadow var(--vf-dur-fast) var(--ease);
  }
  .qz-plz.qz-mail .qz-input:focus { border-color: var(--green-ink); box-shadow: var(--vf-ring); }
  .qz-plz.qz-mail.ist-fehler .qz-input { border-color: var(--vf-danger); }
  .qz-plz.qz-mail.ist-fehler .qz-input:focus { box-shadow: 0 0 0 3px rgba(160,51,37,.16); }
  /* Feld und Knopf gleich hoch (54 px, wie jeder grosse Knopf). */
  .qz-plz.qz-mail .btn { width: 100%; min-height: var(--vf-control-lg); }
  .qz-plz.qz-mail + .qz-err { margin: var(--vf-space-2) 0 0; padding: var(--vf-space-2) var(--vf-space-3); border-radius: var(--vf-radius-sm); }
}
.qz-err a { color: inherit; font-weight: var(--vf-weight-strong); }
/* Warteliste: heutige Lieferorte als ruhige Fläche, darunter «Andere PLZ prüfen». */
.qz-orte { margin-top: var(--vf-space-6); padding: var(--vf-space-4) var(--vf-space-5); background: var(--cream); border-radius: var(--vf-radius-sm); font-size: var(--vf-text-14); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.qz-orte b { display: block; margin-top: var(--vf-space-2); color: var(--ink); font-weight: var(--vf-weight-strong); }
.qz-orte + .qz-foot { margin-top: var(--vf-space-3); }
/* Kein Verkaufs-Fuss unter einer Absage: Zitat und Rabattzeile ruhen, solange die Warteliste steht (quiz.js). */
#packages.ist-warteliste .pack-proof, #packages.ist-warteliste .pack-foot { display: none; }
/* Erfolg leise am Ort: eine Zeile in Zweittext, nur der Haken in Grün-Dunkel (kein getönter Kasten). */
/* Haken auf der ersten Zeile (wie .wk-liefer), auch wenn die Zeile am Handy umbricht. */
.qz-ok {
  display: flex; align-items: flex-start; gap: 6px; margin: calc(-1 * var(--vf-space-2)) 0 var(--vf-space-5);
  font-size: var(--vf-text-14); line-height: 1.45; color: var(--ink-soft);
}
.qz-ok svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--green-deep); }
#vfQuiz > .qz-ok { margin: 0 0 var(--vf-space-3); }

/* Deine Woche */
.wk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vf-space-3); margin-bottom: var(--vf-space-3); }
.wk-sum { font-size: var(--vf-text-14); color: var(--ink-soft); min-width: 0; }
/* Wochenkopf (Ultra clean, Runde 5): Kopfzeile wie eine Listenüberschrift («Passend zu Dir» links,
   «Neu starten» rechts, 32 px sichtbar, 44 px tippbar), darunter die eigenen Antworten als ruhige Chips:
   ein Tipp öffnet genau diese Frage, danach baut sich die Woche neu. Chips sichtbar 32 px, tippbar 44 px
   (::after nur nach oben und unten; Zeilenabstand 12 px, damit sich zwei Reihen nicht überlappen). */
.wk-head.wk-head-kurz { align-items: center; margin-bottom: var(--vf-space-2); }
.wk-head-t { font: var(--vf-weight-strong) var(--vf-text-13)/1.3 var(--font-body); color: var(--ink-soft); }
.wk-head-kurz .qz-back { position: relative; min-height: 32px; }
/* «Neu starten» wächst nur nach oben (32 + 12 = 44 px): Darunter liegt die Chip-Reihe mit eigener Tippfläche,
   die beiden Flächen dürfen sich nicht überlappen (der Neustart setzt die Woche ohne Rückfrage zurück). */
.wk-head-kurz .qz-back::after { content: ""; position: absolute; inset: -12px 0 0; }
/* Reihenabstand über den Chip-Rand statt gap, damit der Umbruch (chipsBalancieren) keine Leerreihe erzeugt. */
.wk-chips { display: flex; flex-wrap: wrap; gap: 0 6px; margin-bottom: calc(var(--vf-space-4) - var(--vf-space-3)); }
.wk-chips > * { margin-bottom: var(--vf-space-3); }
.wk-chips-umbruch { flex-basis: 100%; height: 0; margin: 0; }
.wk-chip {
  position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--vf-space-3);
  background: var(--vf-white); border: 0; border-radius: var(--vf-radius-pill); cursor: pointer;
  font: var(--vf-weight-medium) var(--vf-text-13)/1 var(--font-body); color: var(--ink); white-space: nowrap;
  transition: background-color var(--vf-dur-fast), transform var(--vf-dur-fast) var(--ease);
}
.wk-chip::after { content: ""; position: absolute; inset: -6px 0; }
.wk-chip-pfeil { flex: none; width: 10px; height: 10px; margin: 1px -2px 0 4px; color: var(--ink-soft); }
/* 320er-Handys: etwas schmalere Chips, damit fünf Antworten in zwei Reihen passen statt 2/2/1. */
@media (max-width: 359px) { .wk-chip { padding-inline: 10px; } }
.wk-chip:active { transform: scale(var(--vf-press)); }
.wk-chip:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: var(--vf-focus-offset); }
@media (hover: hover) and (pointer: fine) { .wk-chip:hover { background: var(--cream-2); } }
/* Anzahl im Weg «Alle Menüs»: keine Frage dahinter, darum Text statt Chip. */
.wk-chip-text { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; font-size: var(--vf-text-13); font-weight: var(--vf-weight-medium); color: var(--ink-soft); white-space: nowrap; }
.wk-head .qz-back { flex: none; color: var(--green-ink); }
/* Liefertage der geprüften PLZ im Moment der Entscheidung (plzDays, nur Anzeige). */
.wk-liefer { display: flex; align-items: flex-start; gap: var(--vf-space-2); margin: 0 0 var(--vf-space-4); font-size: var(--vf-text-14); line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.wk-liefer svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--green-deep); }
.wk-liefer b { color: var(--ink); font-weight: var(--vf-weight-strong); }
/* Eine Frage aus dem Wochenkopf: oben «Antwort ändern», unten «Abbrechen» zurück zur Woche. */
.qz-step-edit { font: var(--vf-weight-strong) var(--vf-text-13)/1 var(--font-body); color: var(--ink-soft); }
.wk-leer { background: var(--vf-white); border-radius: var(--radius); padding: var(--vf-space-8) var(--vf-space-5); text-align: center; margin-bottom: var(--vf-space-2); }
.wk-leer-titel { font-family: var(--font-display); font-weight: var(--vf-weight-display); font-size: var(--vf-h3); line-height: var(--vf-leading-tight); color: var(--ink); margin-bottom: var(--vf-space-2); }
.wk-leer-satz { color: var(--ink-soft); max-width: 34ch; margin: 0 auto; text-wrap: pretty; }
p.wk-leer-satz { text-align: center; margin-bottom: var(--vf-space-2); }

/* Gericht-Karte (Galerie «Gericht-Karte B»): Name in Fraunces. Handy: Foto links, Name, Meta, Preis
   und die zwei Textknöpfe daneben. Ab 750 px: Rasterkarte mit Foto oben. Preis optisch wie heute
   (Marlon: «so lassen»). Tauschen/Wählen sind Wörter ohne Fläche, nicht zwei Pillen pro Karte. */
.wk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vf-space-2); }
.wk-card {
  position: relative; min-width: 0;
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "ph info" "ph act";
  grid-template-rows: 1fr auto;
  gap: var(--vf-space-1) var(--vf-space-4); padding: var(--vf-space-3);
  background: var(--vf-white); border-radius: var(--radius);
}
.wk-card .ph { grid-area: ph; align-self: start; position: relative; width: 96px; aspect-ratio: 1; border-radius: var(--vf-radius-sm); overflow: hidden; background: var(--cream-2); }
.wk-card .ph img { width: 100%; height: 100%; object-fit: cover; }
/* Entfernen als × auf dem Foto (Warenkorb-Muster, Marlon 30.07.2026): 28 sichtbar, 44 tippbar. */
.wk-del {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  background: color-mix(in srgb, var(--vf-white) 92%, transparent); color: var(--ink-soft);
  border: none; border-radius: 50%; box-shadow: var(--vf-shadow-photo);
  transition: color var(--vf-dur-fast), transform var(--vf-dur-fast) var(--ease);
}
.wk-del::after { content: ""; position: absolute; inset: -8px; }
@media (hover: hover) and (pointer: fine) { .wk-del:hover { color: var(--vf-danger); } }
.wk-del:active { transform: scale(var(--vf-press)); }
.wk-del:focus-visible { outline: var(--vf-focus-width-on-photo) solid var(--vf-focus-color-on-photo); outline-offset: 1px; box-shadow: 0 0 0 5px var(--vf-focus-edge-on-photo); }
.wk-card .info { grid-area: info; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; }
.wk-card h3 {
  font-family: var(--font-display); font-weight: var(--vf-weight-display);
  font-size: var(--vf-text-16); line-height: var(--vf-leading-snug); letter-spacing: var(--vf-tracking-display);
  color: var(--ink); hyphens: none; text-wrap: pretty;
}
/* Safari bis 18 (iPhones bis iOS 18) und Firefox kennen pretty nicht; dort griffe sonst balance von h3.
   Safari 18 setzt balance mit den Bindestrich-Einheiten (.nb-wort) beim ersten Zeichnen falsch und
   korrigiert es nicht («Edamame / an / Mango-Salsa …»). Darum dort normaler Umbruch; einzelne kurze
   Wörter bindet quiz.js (kurzeWoerterBinden) wie überall. */
@supports not (text-wrap: pretty) { .wk-card h3 { text-wrap: wrap; } }
/* Gerichtnamen werden nie gekürzt. Bindestrich-Wörter («Gemüse-Duo») stehen als Einheit und brechen nur,
   wenn sie allein breiter als die Zeile sind (quiz.js, nameHtml). */
.nb-wort { display: inline-block; max-width: 100%; }
/* Allein breiter als die Zeile: bricht am Bindestrich (quiz.js, langeWoerterLoesen und wortTeilen). */
.nb-wort.nb-los { display: inline; }
/* Die beiden Teile eines gelösten Worts («Cäsar-Fusilli-» und «Poulet-Salat», quiz.js wortTeilen). */
.nb-teil { display: inline-block; max-width: 100%; }
.nb { white-space: nowrap; }
.wk-meta { font-size: var(--vf-text-13); font-weight: var(--vf-weight-medium); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wk-stars { white-space: nowrap; }
.wk-price { font-weight: 600; font-size: 14.5px; color: var(--ink); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--vf-space-3); }
.wk-rate { font-size: var(--vf-text-13); font-weight: var(--vf-weight-medium); color: var(--ink-soft); }
.wk-actions { grid-area: act; align-self: end; display: flex; flex-wrap: wrap; gap: 0 var(--vf-space-5); }
/* Textknopf: sichtbar 24 px, tippbar 44 px über ::after; das Wort steht bündig mit dem Preis. */
.wk-act {
  min-height: 24px; padding: 0 var(--vf-space-2); margin-inline: calc(-1 * var(--vf-space-2)); cursor: pointer;
  font: var(--vf-weight-strong) var(--vf-text-14)/1 var(--font-body);
  background: none; color: var(--green-ink); border: 0; border-radius: var(--vf-radius-pill);
  position: relative; transition: background-color var(--vf-dur-fast), transform var(--vf-dur-fast) var(--ease);
}
.wk-act::after { content: ""; position: absolute; inset: -10px 0; }
@media (hover: hover) and (pointer: fine) { .wk-act:hover { background: var(--cream-2); } }
.wk-act:active { transform: scale(var(--vf-press)); }
.wk-act:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: var(--vf-focus-offset); }
.wk-act[aria-expanded="true"] { background: var(--green-ink); color: var(--cream); }
/* Unter 360 px bliebe dem Namen neben dem 96er-Foto nur 136 px: «mit» stünde allein auf einer Zeile,
   Bindestrich-Wörter brächen. Foto 80, Abstand 12, Name 15 px geben ihm 156 px. */
@media (max-width: 359px) {
  .wk-card { grid-template-columns: 80px minmax(0, 1fr); column-gap: var(--vf-space-3); }
  .wk-card .ph { width: 80px; }
  .wk-card h3 { font-size: var(--vf-text-15); }
}
@media (min-width: 750px) {
  .wk-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--vf-space-4); }
  .wk-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ph" "info" "act"; grid-template-rows: auto 1fr auto; padding: 0 0 var(--vf-space-5); gap: var(--vf-space-3); }
  .wk-card .ph { width: auto; aspect-ratio: 4 / 3; border-radius: var(--radius) var(--radius) 0 0; }
  .wk-card .info { justify-content: flex-start; padding: var(--vf-space-1) var(--vf-space-4) 0; }
  /* Alle Karten einer Reihe sind gleich hoch. Der Titel steht oben, kcal und Preis sitzen unten in der
     Info-Spur: Ein dreizeiliger Name schiebt so nur seine eigene Lücke, Angaben und Preis fluchten. */
  .wk-card h3 { font-size: var(--vf-title-18); min-height: calc(2em * var(--vf-leading-snug)); margin-bottom: auto; }
  .wk-card .wk-price { margin-top: var(--vf-space-1); }
  .wk-actions { padding: 0 var(--vf-space-4); }
  .wk-card .info { gap: var(--vf-space-1); }
  .wk-del { top: 10px; right: 10px; width: 32px; height: 32px; }
}
.wk-add {
  display: flex; align-items: center; justify-content: center; gap: var(--vf-space-2);
  width: 100%; min-height: var(--vf-control); margin-top: var(--vf-space-2); cursor: pointer;
  font: var(--vf-weight-strong) var(--vf-text-15)/1 var(--font-body);
  background: none; border: 0; border-radius: var(--vf-radius-pill); color: var(--green-ink);
}
@media (hover: hover) and (pointer: fine) { .wk-add:hover { background: rgba(28,34,39,.04); } }
.wk-add:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: var(--vf-focus-offset); }

/* Gerichtsuche (Plan 026): Fläche Creme-2, Feld mit Rand, Chips mit Punkt, Treffer als weisse Zeilen. */
.wk-pick {
  grid-column: 1 / -1; background: var(--cream-2); border-radius: var(--radius);
  padding: var(--vf-space-4); display: flex; flex-direction: column; gap: var(--vf-space-3); margin-top: var(--vf-space-2);
}
.wk-grid .wk-pick { margin-top: 0; }
.wk-pick-head { display: flex; align-items: center; justify-content: space-between; gap: var(--vf-space-3); }
.wk-pick-head b { font: var(--vf-weight-strong) var(--vf-text-16)/1.3 var(--font-body); color: var(--ink); }
.wk-pick-x {
  flex: none; width: var(--vf-tap); height: var(--vf-tap); margin: -10px -10px -10px 0; display: grid; place-items: center;
  cursor: pointer; background: none; border: none; border-radius: 50%; color: var(--ink-soft);
}
.wk-pick-x:hover { color: var(--ink); }
.wk-pick-x:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: -4px; }
.wk-pick-input {
  width: 100%; height: 48px; padding: 0 var(--vf-space-5);
  font: var(--vf-weight-text) var(--vf-text-16)/1 var(--font-body); color: var(--ink);
  background: var(--vf-white); border: var(--vf-border-width) solid var(--vf-line-field); border-radius: var(--vf-radius-pill);
  -webkit-appearance: none; appearance: none;
}
.wk-pick-input::placeholder { color: var(--vf-text-mute); opacity: 1; }
/* Eigenes × in Tinte statt des blauen Browser-×; 16 px sichtbar, 44 px tippbar. */
.wk-pick-field { position: relative; }
.wk-pick-field .wk-pick-input { padding-right: calc(var(--vf-tap) + var(--vf-space-1)); }
.wk-pick-input::-webkit-search-cancel-button, .wk-pick-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.wk-pick-clear {
  position: absolute; top: 2px; right: 2px; width: var(--vf-tap); height: var(--vf-tap);
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: 50%; color: var(--ink);
}
.wk-pick-clear[hidden] { display: none; }
.wk-pick-clear:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: -4px; }
.wk-pick-input:focus-visible { outline: none; border-color: var(--green-ink); box-shadow: var(--vf-ring); }
.wk-pick-chips {
  /* Die Reihe läuft bis an die Kante der Fläche und blendet dort weich aus, statt 16 px davor hart
     abzuschneiden. Rechts genug Innenabstand, damit der letzte Chip ganz aus der Blende rollt. */
  display: flex; gap: var(--vf-space-2); overflow-x: auto;
  margin: -4px calc(-1 * var(--vf-space-4)); padding: 4px var(--vf-space-10) 4px var(--vf-space-4);
  scroll-padding-inline: var(--vf-space-4);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--vf-space-4), #000 calc(100% - var(--vf-space-10)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--vf-space-4), #000 calc(100% - var(--vf-space-10)), transparent 100%);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.wk-pick-chips::-webkit-scrollbar { display: none; }
.wk-pick-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--vf-control-sm); padding: 0 var(--vf-space-4);
  cursor: pointer; font: var(--vf-weight-strong) var(--vf-text-14)/1 var(--font-body);
  background: var(--vf-white); border: 0; color: var(--ink); border-radius: var(--vf-radius-pill);
  transition: background-color var(--vf-dur-fast), color var(--vf-dur-fast);
}
.wk-pick-chip svg { width: 14px; height: 14px; }
.wk-pick-chip.on { background: var(--green-ink); color: var(--cream); padding-left: var(--vf-space-3); }
.wk-pick-chip:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: var(--vf-focus-offset); }
.wk-pick-list { display: flex; flex-direction: column; gap: var(--vf-space-1); max-height: 360px; overflow-y: auto; }
.wk-pick-list .qz-hint { margin: var(--vf-space-1) 0 0; font-size: var(--vf-text-14); }
.wk-pick-row {
  display: flex; align-items: center; gap: var(--vf-space-3); cursor: pointer; font: inherit;
  text-align: left; background: var(--vf-white); border: 0; border-radius: var(--vf-radius-sm);
  padding: 6px var(--vf-space-3) 6px 6px; min-height: 60px;
  flex: none; /* sonst quetscht die scrollende Liste die Zeilen */
  transition: background-color var(--vf-dur-fast);
}
@media (hover: hover) and (pointer: fine) { .wk-pick-row:hover { background: rgba(255,255,255,.7); } }
.wk-pick-row:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: -2px; }
.wk-pick-row img { flex: 0 0 auto; width: 48px; height: 48px; object-fit: cover; border-radius: var(--vf-radius-xs); background: var(--cream); }
.wk-pick-name { flex: 1; font-size: var(--vf-text-14); font-weight: var(--vf-weight-strong); color: var(--ink); line-height: 1.3; min-width: 0; text-wrap: pretty; }
.wk-pick-name small { display: block; margin-top: 2px; font-size: var(--vf-text-12); font-weight: var(--vf-weight-medium); color: var(--ink-soft); }
.wk-pick-price { flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Handys bis 429 px: Der Preis steht unter dem Namen. Daneben blieben dem Namen 142 px (375), 157 px (390)
   bzw. 181 px (414): vierzeilige Namen und Bindestrich-Wörter, die am Strich brechen. Ab 430 px (197 px)
   bricht keiner der rund 380 Namen am Bindestrich. */
@media (max-width: 429px) {
  .wk-pick-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "img name" "img price"; align-items: center; row-gap: 2px; }
  .wk-pick-row img { grid-area: img; align-self: start; }
  .wk-pick-name { grid-area: name; }
  .wk-pick-price { grid-area: price; }
}
.wk-pick-unlock {
  align-self: flex-start; min-height: var(--vf-control-sm); padding: 0 var(--vf-space-4); margin-inline: 0; cursor: pointer;
  font: var(--vf-weight-strong) var(--vf-text-14)/1.2 var(--font-body); color: var(--green-ink);
  background: var(--vf-white); border: 0; border-radius: var(--vf-radius-pill);
}

/* Bestell-Leiste «Kassenzettel» (Plan 065/067). Preis, Streichpreis und −15-%-Pille optisch wie heute.
   Ultra clean: ohne Fortschrittsbalken und ohne Trennlinie; Menge steht beim Preis, Gratis-Lieferung beim Folgepreis.
   Zweite Runde: kein Pfeil-Kreis, kein grüner Lieferhinweis. Haken wie in CONTEXT.md (Bestell-Leiste) als dasselbe
   SVG wie im Quiz: grün wie die Linie, 14 px zur 12/13-px-Zeile, Strich 1,46 px wie der 16-px-Quiz-Haken. */
.wk-bar {
  position: sticky; bottom: 12px; z-index: var(--vf-z-landing-bar); margin-top: var(--vf-space-5);
  background: var(--slate-950); color: var(--bone);
  border-radius: var(--radius-md); padding: var(--vf-space-5) var(--vf-space-6);
  display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) minmax(250px, 290px);
  grid-template-areas: "mode mode mode" "price meta cta" "price meta assure";
  gap: var(--vf-space-2) var(--vf-space-8);
  box-shadow: var(--vf-shadow-float);
}
.wk-pricebox { grid-area: price; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.wk-was { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--bone-soft); font-variant-numeric: tabular-nums; }
.wk-pill {
  font-size: 11.5px; font-weight: 700; color: #13210a; background: var(--green-bright);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.wk-sum-price {
  font-family: var(--font-display); font-weight: 480; font-size: 38px; line-height: 1;
  color: #fff; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums;
}
.wk-price-lbl { font-size: var(--vf-text-13); color: var(--bone-soft); }
.wk-qty { grid-area: meta; display: flex; flex-direction: column; gap: 4px; font-size: var(--vf-text-13); color: var(--bone-soft); font-variant-numeric: tabular-nums; }
.wk-qty b { color: var(--bone); font-weight: var(--vf-weight-strong); }
.wk-qty-wk-s { display: none; }
.wk-ship b { color: var(--bone); font-weight: var(--vf-weight-strong); }
.wk-ship.is-free { color: var(--bone); white-space: nowrap; }
.wk-ship svg, .wk-assure svg { flex: none; width: 14px; height: 14px; stroke-width: 2.5; color: var(--green-bright); }
.wk-ship svg { display: inline-block; vertical-align: middle; margin-left: 3px; }
/* Linie bis zur Gratis-Lieferung (Plan 065): 3 px, unter dem Lieferhinweis in derselben Spalte. */
.wk-track { display: block; align-self: stretch; height: 3px; margin-top: 2px; border-radius: 999px; background: rgba(236,231,218,.14); overflow: hidden; }
.wk-track b { display: block; height: 100%; border-radius: inherit; background: var(--green-bright); transition: width .6s var(--ease); }
.wk-cta {
  grid-area: cta; display: flex; align-items: center; justify-content: center;
  min-height: 52px; background: var(--green); color: var(--vf-on-green); text-decoration: none;
  font: var(--vf-weight-strong) var(--vf-text-16)/1.1 var(--font-body);
  border-radius: var(--vf-radius-pill); padding: 0 var(--vf-space-6);
  box-shadow: var(--vf-glow-green);
  transition: background-color var(--vf-dur-fast), transform var(--vf-dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .wk-cta:hover { background: var(--green-bright); } }
/* Nach dem ersten Tipp gesperrt, bis der Shop lädt (quiz.js; pageshow setzt zurück). */
.wk-cta[aria-busy="true"] { cursor: progress; transform: none; }
.wk-cta:active { transform: scale(var(--vf-press)); }
.wk-cta:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color-on-dark); outline-offset: 3px; }
.wk-assure {
  grid-area: assure; display: flex; align-items: center; justify-content: center; gap: 4px;
  text-align: center; font-size: var(--vf-text-12); line-height: 1.3; color: var(--bone-soft);
}
@media (prefers-reduced-motion: reduce) { .wk-cta, .wk-track b { transition: none; } }

/* Abo/Einmalig als Kopfzeile der Leiste (Plan 067). Gewählt = hell auf Tinte, nicht grün (CONTEXT.md,
   Bestell-Leiste). Sichtbar 32 bzw. 36 px, tippbar 44 px über ::after (nur oben und unten). */
.wk-modehead { grid-area: mode; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vf-space-2) var(--vf-space-3); margin-bottom: var(--vf-space-1); }
.wk-mode button, .wk-was { white-space: nowrap; }
.wk-mode { display: inline-flex; gap: 2px; background: var(--slate-850); border-radius: 999px; padding: 4px; }
.wk-mode button {
  position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; cursor: pointer;
  font: var(--vf-weight-strong) var(--vf-text-13)/1 var(--font-body);
  border: none; background: none; color: var(--bone-soft); border-radius: 999px; padding: 0 var(--vf-space-4);
  transition: background-color var(--vf-dur-fast), color var(--vf-dur-fast);
}
.wk-mode button svg { width: 12px; height: 12px; }
.wk-mode button::after { content: ""; position: absolute; inset: -4px 0; }
@media (hover: hover) and (pointer: fine) { .wk-mode button:hover { color: var(--bone); } }
.wk-mode button.on { background: var(--bone); color: var(--ink); }
.wk-mode-note { font-size: var(--vf-text-13); color: var(--bone-soft); margin-right: auto; }
.wk-mode button:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color-on-dark); outline-offset: 2px; }
.wk-was-head { display: none; }

/* Bis 980 px gestapelt: Die Desktop-Zeile braucht ~900 px Breite. */
@media (max-width: 980px), (max-height: 500px) {
  .wk-bar {
    padding: var(--vf-space-3) var(--vf-space-3) var(--vf-space-3);
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "mode mode" "price meta" "cta cta" "assure assure";
    gap: var(--vf-space-2) var(--vf-space-3);
  }
  .wk-pricebox { margin-bottom: var(--vf-space-1); }
  .wk-assure { margin-top: -2px; }
  .wk-mode { padding: 3px; }
  .wk-sum-price { font-size: 29px; }
  .wk-price-lbl { font-size: var(--vf-text-12); margin-top: 1px; }
  .wk-was { font-size: 12.5px; }
  .wk-qty { align-self: end; text-align: right; align-items: flex-end; font-size: var(--vf-text-12); line-height: 1.45; gap: 2px; }
  .wk-qty-wk { display: none; }
  .wk-qty-wk-s { display: inline; }
  /* Folgepreis bricht um («danach» / «CHF …/Woche»), sobald er nicht neben den Betrag passt, statt in ihn
     hineinzulaufen (LG-01; seit die Leiste auf der Kartenkante steht, ist sie 16 px schmaler). */
  .wk-qty-next { white-space: normal; }
  .wk-qty b { white-space: nowrap; }
  .wk-cta { font-size: var(--vf-text-15); }
  /* Schalter und Streichpreis teilen sich die Zeile, seit die Leiste auf der Kartenkante steht (nicht mehr
     8 px in den Rand): Knopf-Innenabstand 10 statt 12, Abstand 8 statt 12. Ab 375 px passt es auf eine Zeile. */
  .wk-modehead { margin-bottom: 0; column-gap: var(--vf-space-2); }
  .wk-mode button { font-size: 12.5px; padding: 0 10px; min-height: 32px; }
  .wk-mode button::after { inset: -6px 0; }
  .wk-mode-note { display: none; }
  .wk-pricebox > .wk-was { display: none; }
  .wk-was-head { display: inline-flex; }
}

/* Sehr schmale Handys (320 px): Betrag zwei Stufen kleiner, Innenabstand 10 und Spaltenabstand 8, damit
   «Lieferung geschenkt» und «CHF …/Woche» neben dem Betrag Platz haben, ohne ihn zu berühren (LG-01). */
@media (max-width: 359px) {
  .wk-bar { padding-inline: 10px; column-gap: var(--vf-space-2); }
  .wk-sum-price { font-size: 24px; }
  /* Lieferhinweis mindestens 16 px neben «1. Lieferung · 10 Menüs» (8 px Spaltenabstand + 8 px hier). Passt
     «Lieferung geschenkt ✓» mit Haken nicht daneben (unter ~340 px), steht er zweizeilig («Lieferung» /
     «geschenkt ✓»), so hoch wie «Noch CHF … bis zur Gratis-Lieferung». */
  .wk-ship { padding-left: var(--vf-space-2); }
  .wk-ship.is-free { white-space: normal; }
  /* «danach CHF …/Woche» steht auf Höhe des Betrags: 8 px Spaltenabstand + 4 px hier = mindestens 12 px
     zum Betrag, sonst bricht «danach» auf eine eigene Zeile (wie ab 360 px). */
  .wk-qty-next { padding-left: 4px; }
}
/* 360–374 px: Innenabstand 10 statt 12 (wie unter 360 px), der Spaltenabstand bleibt 12. So hat die rechte
   Spalte Platz für «Lieferung geschenkt ✓» (Haken hier 2 statt 3 px vom Wort, damit es bei 360 px auch neben
   «CHF 130.90» passt), und nichts rückt näher als 12 px an den Betrag. Passt der Hinweis bei einem breiteren
   Betrag trotzdem nicht, steht er zweizeilig statt in den Abstand hinein. */
@media (min-width: 360px) and (max-width: 374px) {
  .wk-bar { padding-inline: 10px; }
  .wk-ship.is-free { white-space: normal; }
  .wk-ship svg { margin-left: 2px; }
}

/* «Woche per E-Mail sichern» (Plan 066/067): leise Zeile unter der Leiste, klappt auf. */
.wk-keep { max-width: 520px; margin: var(--vf-space-3) auto 0; text-align: center; }
.wk-keep-row {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--vf-tap); padding: 0 var(--vf-space-2);
  cursor: pointer; font: var(--vf-weight-strong) var(--vf-text-15)/1 var(--font-body);
  background: none; border: none; color: var(--green-ink);
}
.wk-keep-row:hover { color: var(--green-deep); }
.wk-keep-row:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: 2px; border-radius: 8px; }
.wk-keep-ch { flex: none; width: 16px; height: 16px; display: grid; transition: transform .3s var(--ease); }
.wk-keep-ch svg { width: 16px; height: 16px; }
.wk-keep-row[aria-expanded="true"] .wk-keep-ch { transform: rotate(90deg); }
.wk-keep-panel { display: flex; flex-direction: column; gap: var(--vf-space-2); padding: var(--vf-space-2) 0 0; text-align: left; }
.wk-keep-panel[hidden] { display: none; }
.wk-keep-satz { font-size: var(--vf-text-14); line-height: 1.5; color: var(--ink-soft); text-align: center; text-wrap: balance; }
.wk-keep-fine { font-size: var(--vf-text-12); color: var(--ink-soft); text-align: center; }
.wk-keep-fine a { color: inherit; }
.wk-keep-done { font-size: var(--vf-text-15); font-weight: var(--vf-weight-strong); color: var(--green-ink); text-align: center; padding: var(--vf-space-3) 0; }
@media (prefers-reduced-motion: reduce) { .wk-keep-ch { transition: none; } }
.vf-save-form {
  display: flex; align-items: center; gap: var(--vf-space-2); height: 52px; padding: 0 4px 0 var(--vf-space-5);
  background: var(--vf-white); border: var(--vf-border-width) solid var(--vf-line-field); border-radius: var(--vf-radius-pill);
}
.vf-save-form:focus-within { border-color: var(--green-ink); box-shadow: var(--vf-ring); }
/* Fehler wie beim PLZ-Feld: Rand und Ring in der Fehlerfarbe (quiz.js setzt .ist-fehler, Tippen nimmt ihn zurück). */
.vf-save-form.ist-fehler, .vf-save-form.ist-fehler:focus-within { border-color: var(--vf-danger); }
.vf-save-form.ist-fehler:focus-within { box-shadow: 0 0 0 3px rgba(160,51,37,.16); }
.vf-save-in {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none;
  font: var(--vf-weight-text) var(--vf-text-16)/1 var(--font-body); color: var(--ink);
}
.vf-save-in::placeholder { color: var(--vf-text-mute); opacity: 1; }
/* Grün-Tinte, ruhig unter dem hellen Bestell-Grün (Marlon, 09.10.2026). */
.vf-save-btn {
  flex: none; min-height: 42px; padding: 0 var(--vf-space-5); cursor: pointer;
  font: var(--vf-weight-strong) var(--vf-text-15)/1 var(--font-body);
  background: var(--green-ink); color: var(--cream); border: none; border-radius: 999px;
  transition: background-color var(--vf-dur-fast);
}
.vf-save-btn:hover { background: var(--green-deep); }
.vf-save-btn:disabled { opacity: var(--vf-busy); cursor: default; }
.vf-save-err { font-size: var(--vf-text-13); color: var(--vf-danger); background: var(--vf-danger-bg); border-radius: var(--vf-radius-sm); padding: var(--vf-space-2) var(--vf-space-3); text-wrap: balance; }
.vf-save-err[hidden] { display: none; }
.vf-save-err a { color: inherit; }

/* Hinweis «Woche merken» (Plan 066), ultra clean: schmale Tinten-Kapsel wie der Toast, unten mittig,
   eine Zeile. Tippen klappt das Feld in der Kapsel auf; Senden als umgekehrter Knopf (Creme, Grün-Tinte). */
.vf-nudge {
  position: fixed; left: 50%; bottom: calc(var(--vf-space-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--vf-z-landing-toast);
  width: max-content; max-width: calc(100% - 2 * var(--vf-space-4));
  background: var(--ink); color: var(--cream); border-radius: var(--vf-radius-pill);
  padding: 4px 4px 4px var(--vf-space-2);
  /* Feiner Ring, damit die Tinten-Kapsel auch über dunklen Abschnitten als Ebene lesbar bleibt. */
  box-shadow: var(--vf-shadow-float), 0 0 0 1px var(--vf-line-on-dark-strong);
  transform: translate(-50%, calc(100% + 24px)); opacity: 0;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.vf-nudge.is-in { transform: translate(-50%, 0); opacity: 1; }
.vf-nudge.is-open { width: min(400px, calc(100% - 2 * var(--vf-space-4))); border-radius: var(--radius-md); padding: 4px 4px var(--vf-space-3); }
.vf-nudge-top { display: flex; align-items: center; gap: var(--vf-space-1); }
.vf-nudge-open {
  flex: 1; min-height: var(--vf-tap); padding: 0 var(--vf-space-3); cursor: pointer; text-align: left;
  font: var(--vf-weight-strong) var(--vf-text-15)/1 var(--font-body); color: var(--cream);
  background: none; border: 0; border-radius: var(--vf-radius-pill);
}
.vf-nudge-open:focus-visible, .vf-nudge-x:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color-on-dark); outline-offset: -2px; }
.vf-nudge-x {
  flex: none; display: grid; place-items: center; width: var(--vf-tap); height: var(--vf-tap); padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: 50%; color: var(--bone-soft);
}
.vf-nudge-x:hover { color: var(--cream); }
.vf-nudge-panel { display: flex; flex-direction: column; gap: var(--vf-space-2); padding: var(--vf-space-1) var(--vf-space-2) 0; }
/* Geöffnet: drei eigene Gerichte als kleine runde Fotos und der Nutzen in einem Satz. */
.vf-nudge-info { display: flex; align-items: center; gap: var(--vf-space-3); padding: 0 var(--vf-space-1) var(--vf-space-1); font-size: var(--vf-text-14); line-height: 1.35; color: var(--bone-soft); }
.vf-nudge-imgs { display: flex; flex: none; }
.vf-nudge-imgs img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--slate-850); box-shadow: 0 0 0 2px var(--ink); }
.vf-nudge-imgs img + img { margin-left: -8px; }
.vf-nudge-panel[hidden] { display: none; }
.vf-nudge .vf-save-form { height: 48px; background: rgba(244,239,228,.08); border-color: var(--hairline-strong); }
.vf-nudge .vf-save-form:focus-within { border-color: var(--green-bright); box-shadow: none; }
.vf-nudge .vf-save-form.ist-fehler, .vf-nudge .vf-save-form.ist-fehler:focus-within { border-color: var(--vf-danger-on-dark); }
.vf-nudge .vf-save-in { color: var(--cream); }
.vf-nudge .vf-save-in::placeholder { color: var(--bone-soft); }
.vf-nudge .vf-save-btn { min-height: 40px; background: var(--cream); color: var(--green-ink); }
.vf-nudge .vf-save-btn:hover { background: var(--vf-white); }
.vf-nudge .vf-save-err { color: var(--vf-danger-on-dark); background: none; padding: 0 var(--vf-space-2); }
/* Solange Hinweis oder Toast stehen, weichen Sticky-Knopf und Hinweis (gleicher Platz unten). */
body.vf-nudge-on .sticky-cta, body.vf-toast-on .sticky-cta, body.vf-toast-on .vf-nudge,
body.vf-nudge-on .vsl-pill, body.vf-toast-on .vsl-pill { display: none; }
@media (prefers-reduced-motion: reduce) { .vf-nudge { transition: opacity .2s; transform: translate(-50%, 0); } }

/* Toast «… entfernt · Rückgängig» (Galerie «Bestätigung A»): Tinte, eine Ebene, eine Aktion. */
.vf-toast {
  position: fixed; left: 50%; bottom: var(--toast-unten, 16px); z-index: var(--vf-z-landing-toast);
  display: flex; align-items: center; gap: var(--vf-space-3);
  width: max-content; max-width: calc(100% - 2 * var(--vf-space-4)); min-height: 52px;
  padding: 4px 4px 4px var(--vf-space-4); border-radius: var(--radius-md);
  background: var(--ink); color: var(--cream); box-shadow: var(--vf-shadow-float);
  opacity: 0; visibility: hidden; transform: translate(-50%, 12px);
  transition: opacity var(--vf-motion-landing-exit) var(--ease), transform var(--vf-motion-landing-exit) var(--ease), visibility 0s linear var(--vf-motion-landing-exit);
}
.vf-toast.ist-da { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity var(--vf-motion-landing-float) var(--ease), transform var(--vf-motion-landing-float) var(--ease), visibility 0s; }
.vf-toast-t { flex: 1; min-width: 0; display: flex; gap: 0.3em; font-size: var(--vf-text-14); font-weight: var(--vf-weight-medium); line-height: 1.3; white-space: nowrap; }
.vf-toast-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vf-toast-v { flex: none; }
.vf-toast-undo {
  flex: none; position: relative; min-height: var(--vf-control-sm); padding: 0 var(--vf-space-4); cursor: pointer;
  font: var(--vf-weight-strong) var(--vf-text-14)/1 var(--font-body);
  background: var(--cream); color: var(--green-ink); border: 0; border-radius: var(--vf-radius-pill);
}
.vf-toast-undo::after { content: ""; position: absolute; inset: -4px 0; }
.vf-toast-undo:hover { background: var(--vf-white); }
.vf-toast-undo:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color-on-dark); outline-offset: var(--vf-focus-offset); }
@media (prefers-reduced-motion: reduce) { .vf-toast, .vf-toast.ist-da { transition: none; } }


/* ---------- Preise + Zeit-Rechner ---------- */
.price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(64px, 8vw, 120px); align-items: center;
}
.price-copy h2 { margin-bottom: var(--vf-space-5); }
.price-copy .lede b { color: var(--cream); font-weight: var(--vf-weight-strong); }
.price-copy .lede + .lede { margin-top: var(--vf-space-4); }
.price-copy .btn { margin-top: var(--vf-space-10); }
.time-calc {
  border-radius: var(--radius-lg); background: var(--slate-900);
  padding: var(--vf-space-8); display: flex; flex-direction: column; gap: var(--vf-space-2);
}
.tc-label { font-size: var(--vf-text-15); color: var(--bone-soft); }
.tc-value { font: var(--vf-weight-strong) var(--vf-text-18)/1.3 var(--font-body); color: var(--cream); }
.tc-value b { font-weight: inherit; font-variant-numeric: tabular-nums; }
/* Regler selbst gestaltet, in allen Browsern gleich (Safari ignoriert accent-color hier): grün gefüllte Spur
   bis zum Knopf (--tc-p, 0 bis 1, setzt main.js), cremefarbener Knopf. 44 px tippbar, Platz wie 32 px. */
.time-calc input[type="range"] {
  --tc-p: .4545;
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: -6px 0;
  cursor: pointer; background: transparent; border-radius: 999px;
}
.time-calc input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--green) calc(14px + var(--tc-p) * (100% - 28px)), rgba(236,231,218,.16) calc(14px + var(--tc-p) * (100% - 28px)));
}
.time-calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border: 0; border-radius: 50%;
  background: var(--cream); box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transition: transform var(--vf-dur-fast) var(--ease);
}
.time-calc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }
.time-calc input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(236,231,218,.16); }
.time-calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--green); }
.time-calc input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--cream); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.time-calc input[type="range"]:focus { outline: none; }
.time-calc input[type="range"]:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color-on-dark); outline-offset: 2px; }
.tc-rows { margin-top: var(--vf-space-5); display: grid; }
.tc-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--vf-space-4); padding: var(--vf-space-3) 0; }
.tc-row + .tc-row { border-top: var(--vf-border-width) solid var(--vf-line-on-dark); }
.tc-row[hidden] { display: none; }
.tc-row dt { font-size: var(--vf-text-15); color: var(--bone-soft); }
.tc-row dd { font: var(--vf-weight-strong) var(--vf-text-18)/1.2 var(--font-body); color: var(--cream); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-row-jahr dt { color: var(--cream); font-weight: var(--vf-weight-strong); }
.tc-row-jahr dd { font-family: var(--font-display); font-weight: var(--vf-weight-display); font-size: var(--vf-title-28); line-height: 1; }
.tc-rate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vf-space-2) var(--vf-space-4); margin-top: var(--vf-space-3); }
.tc-rate label { font-size: var(--vf-text-14); color: var(--bone-soft); }
.tc-rate label span { font-size: var(--vf-text-12); }
.tc-rate-input {
  display: inline-flex; align-items: center; gap: var(--vf-space-2); height: 44px; padding: 0 var(--vf-space-4);
  border-radius: var(--vf-radius-pill); background: rgba(244,239,228,.08); border: var(--vf-border-width) solid var(--hairline-strong);
  font-size: var(--vf-text-13); color: var(--bone-soft);
}
.tc-rate-input:focus-within { border-color: var(--green-bright); }
.tc-rate-input input {
  width: 64px; border: 0; background: none; outline: none; text-align: right;
  font: var(--vf-weight-strong) var(--vf-text-16)/1 var(--font-body); color: var(--cream); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.tc-rate-input input::placeholder { color: var(--bone-soft); opacity: .7; font-weight: var(--vf-weight-text); }
.tc-rate-input input::-webkit-outer-spin-button, .tc-rate-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Ergebnissatz «12 Tage pro Jahr, in denen jemand anderes für Dich kocht …» (main.js). */
.tc-note { margin-top: var(--vf-space-4); font-size: var(--vf-text-15); line-height: 1.5; color: var(--cream); text-wrap: pretty; }
.tc-note:empty { display: none; }
.tc-basis { font-size: var(--vf-text-12); color: var(--bone-soft); line-height: 1.5; margin-top: var(--vf-space-3); text-wrap: pretty; }

/* ---------- Problem ---------- */
.problem-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(56px, 8vw, 120px); align-items: center;
}
.problem-copy h2 { margin-bottom: var(--vf-space-6); }
.problem-copy > p:not(.lede) { margin-top: var(--vf-space-4); max-width: 44ch; color: var(--ink-soft); text-wrap: pretty; }
/* Die Wende: ein Satz in Fraunces kursiv, ohne Linie (Fläche statt Linie). */
.problem-copy > p.turn {
  margin-top: var(--vf-space-8); max-width: 30ch;
  font-family: var(--font-display); font-style: italic; font-weight: var(--vf-weight-accent);
  font-size: clamp(21px, 1.9vw, 25px); line-height: 1.35; color: var(--ink);
}
.problem-media { position: relative; }
.problem-media > img { border-radius: var(--radius-lg); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; }
.problem-media .chip {
  position: absolute; left: var(--vf-space-4); bottom: var(--vf-space-4); max-width: calc(100% - 2 * var(--vf-space-4));
  background: rgba(15,21,25,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--vf-radius-sm); padding: 10px var(--vf-space-4);
  display: flex; flex-direction: column; gap: 2px;
  font: var(--vf-weight-strong) var(--vf-text-13)/1.3 var(--font-body); color: var(--cream); font-variant-numeric: tabular-nums;
}
.problem-media .chip b { font-weight: var(--vf-weight-strong); }
.problem-media .chip span { font-weight: var(--vf-weight-text); color: rgba(236,231,218,.9); }

/* ---------- Video ---------- */
.vsl-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16 / 9; max-width: 1040px; margin: 0 auto; background: var(--slate-950);
  cursor: pointer;
}
.vsl-frame img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); }
/* Knopf unten links: das Gesicht bleibt frei, die Zeile steht auf einem dunklen Verlauf statt auf dem weissen Hemd. */
.vsl-overlay {
  position: absolute; inset: 0; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "hook hook" "play sub";
  align-content: end; align-items: center; justify-items: start; gap: var(--vf-space-4);
  padding: var(--vf-space-6); text-align: left; color: var(--cream);
  background: linear-gradient(0deg, rgba(15,21,25,.9) 0%, rgba(15,21,25,.74) 34%, rgba(15,21,25,.36) 54%, rgba(15,21,25,0) 72%);
}
/* Hook im unteren Drittel (Ultra clean, Runde 5): auf dem Verlauf, das Gesicht oben bleibt frei. */
.vsl-hook {
  grid-area: hook; max-width: 26ch; margin-bottom: var(--vf-space-1);
  font-family: var(--font-display); font-weight: var(--vf-weight-display);
  font-size: clamp(20px, 2.5vw, 32px); line-height: 1.2; letter-spacing: var(--vf-tracking-display);
  color: var(--cream); text-wrap: balance; text-shadow: 0 1px 14px rgba(15,21,25,.45);
}
@media (max-width: 760px) { .vsl-hook { max-width: none; font-size: 19px; } }
/* Sehr schmale Handys: 17 px, damit der Hook höchstens fünf Zeilen hat und unter dem Kinn bleibt; der Verlauf
   setzt etwas höher an, weil die erste Zeile dort noch auf dem weissen Hemd steht. */
@media (max-width: 359px) {
  .vsl-hook { font-size: 17px; }
  .vsl-overlay { background: linear-gradient(0deg, rgba(15,21,25,.9) 0%, rgba(15,21,25,.78) 38%, rgba(15,21,25,.5) 58%, rgba(15,21,25,0) 78%); }
}
.vsl-hook em { font-style: italic; font-weight: var(--vf-weight-accent); color: var(--green-bright); }
button.vsl-overlay { width: 100%; border: 0; cursor: pointer; font: inherit; }
button.vsl-overlay:focus-visible { outline: var(--vf-focus-width-on-photo) solid var(--vf-focus-color-on-photo); outline-offset: -6px; border-radius: var(--radius-lg); }
.vsl-play {
  grid-area: play; width: 76px; height: 76px; flex: none; border-radius: 50%;
  background: var(--green); color: var(--vf-on-green); display: grid; place-items: center;
  box-shadow: var(--vf-glow-green); transition: transform var(--vf-dur) var(--ease);
}
.vsl-frame:hover .vsl-play { transform: scale(1.04); }
.vsl-play svg { margin-left: 4px; }
.vsl-sub { grid-area: sub; font: var(--vf-weight-strong) var(--vf-text-14)/1 var(--font-body); color: var(--cream); }
.vsl-alt { margin: var(--vf-space-5) auto 0; max-width: 46ch; text-align: center; font-size: var(--vf-text-15); line-height: 1.5; color: var(--ink-soft); text-wrap: balance; }
@media (max-width: 760px) { .vsl-frame { aspect-ratio: 3 / 4; } .vsl-overlay { padding: var(--vf-space-5); gap: var(--vf-space-3); } .vsl-play { width: 56px; height: 56px; } .vsl-play svg { width: 22px; height: 22px; } }
.vsl-frame.is-playing { cursor: default; }
.vsl-frame.is-playing img { display: none; }
@media (max-width: 760px) { .vsl-frame.is-playing { aspect-ratio: 16 / 9; } }
.vsl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.vsl-endcta {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--vf-space-5); padding: var(--vf-space-6); text-align: center;
  background: color-mix(in srgb, var(--slate-950) 90%, transparent);
}
.vsl-endcta[hidden] { display: none; }
.vsl-endcta-line { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); color: var(--cream); text-wrap: balance; }
.vsl-replay {
  background: none; border: none; cursor: pointer; min-height: var(--vf-tap); padding: 0 var(--vf-space-3);
  font: var(--vf-weight-strong) var(--vf-text-14)/1 var(--font-body); color: var(--bone-soft);
}
@media (hover: hover) and (pointer: fine) { .vsl-replay:hover { color: var(--cream); } }

/* ---------- Herkunft ---------- */
/* «Zutaten mit Namen und Adresse – keine anonyme Importware:» als ruhige Zeile über den Karten. */
.origin-lead { margin: calc(-1 * var(--vf-space-4)) 0 var(--vf-space-5); font: var(--vf-weight-strong) var(--vf-text-15)/1.4 var(--font-body); color: var(--cream); text-wrap: balance; }
.origin-deck {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 320px);
  gap: var(--vf-space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); scroll-padding-inline: var(--pad-x);
  -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
}
.origin-deck::-webkit-scrollbar { display: none; }
.origin-card { scroll-snap-align: start; display: flex; flex-direction: column; }
.origin-card > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--radius); background: var(--slate-900); }
.origin-card .o-label { margin-top: var(--vf-space-3); font: var(--vf-weight-strong) var(--vf-text-15)/1.3 var(--font-body); color: var(--cream); }
.origin-card p { margin-top: var(--vf-space-1); font-size: var(--vf-text-14); line-height: 1.5; color: var(--bone-soft); text-wrap: pretty; }
@media (min-width: 900px) {
  .origin-deck {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: unset;
    gap: var(--vf-space-12) var(--vf-space-8); overflow: visible; margin-inline: 0; padding-inline: 0;
  }
}

/* ---------- Wer hier kocht ---------- */
/* Echtes Gründerfoto randlos, Zitat im Bild (Variante C «Kino», 22.10.2026). Der dunkle Verlauf trägt das Zitat
   und deckt das Buffet; am Computer liegt er rechts, damit die Gesichter frei bleiben. */
.gruender-buehne { position: relative; margin: 0; background: var(--slate-950); }
.gruender-buehne img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.gruender-buehne::after {
  content: ""; position: absolute; inset: 42% 0 0 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(15,20,22,0) 0%, rgba(15,20,22,.62) 45%, rgba(15,20,22,.9) 100%);
}
.gruender-buehne figcaption { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vw, 64px); z-index: 1; }
.gruender-zitat {
  font-family: var(--font-display); font-style: italic; font-weight: var(--vf-weight-accent);
  font-size: clamp(28px, 4vw, 52px); line-height: 1.18; color: var(--cream); max-width: 18ch; text-wrap: balance;
  text-shadow: 0 1px 24px rgba(15,20,22,.4);
}
.gruender-text { padding-block: clamp(40px, 7vw, 88px) var(--sec-y); }
.gruender-text > * { max-width: 640px; }
.gruender-text p { color: var(--ink-soft); text-wrap: pretty; }
.gruender-text p + p { margin-top: var(--vf-space-4); }
.founder-sign { margin-top: var(--vf-space-6); }
.founder-sign b { display: block; font-weight: var(--vf-weight-strong); color: var(--ink); }
.founder-sign span { font-size: var(--vf-text-14); color: var(--ink-soft); }
@media (min-width: 761px) {
  .gruender-buehne img { aspect-ratio: 16 / 7; object-position: 20% 30%; }
  .gruender-buehne::after { inset: 0 0 0 40%; background: linear-gradient(to right, rgba(15,20,22,0), rgba(15,20,22,.55) 45%, rgba(15,20,22,.85)); }
  .gruender-buehne figcaption { top: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-end; }
  .gruender-zitat { max-width: 14ch; }
}

/* Gesichts-Streifen nach dem Laufband: ein Satz, ein Rundbild, Sprung zu «Wer hier kocht». */
.gesicht { background: var(--cream); border-bottom: 1px solid rgba(29,36,38,.08); }
.gesicht a {
  display: flex; align-items: center; justify-content: center; gap: var(--vf-space-3); min-height: 64px;
  padding: 10px var(--pad-x); text-decoration: none; color: var(--ink); font-size: var(--vf-text-14); line-height: 1.35;
}
.gesicht img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.gesicht b { font-weight: var(--vf-weight-strong); }
.gesicht .weiter { color: var(--green-ink); font-weight: var(--vf-weight-strong); white-space: nowrap; }
.gesicht a:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color, var(--green-ink)); outline-offset: -4px; }

/* ---------- Kundenstimmen ---------- */
/* Fünf Stimmen: am Computer drei und zwei, die zweite Reihe mittig; dazwischen zwei pro Reihe; am Handy ein Wisch-Streifen. */
.review-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vf-space-4); }
.review-wall > .review { flex: 0 1 calc((100% - var(--vf-space-4)) / 2); }
@media (min-width: 1100px) { .review-wall > .review { flex-basis: calc((100% - 2 * var(--vf-space-4)) / 3); } }
.review {
  border-radius: var(--radius-lg); background: var(--slate-900);
  padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: var(--vf-space-5);
}
.review .stars { color: var(--green); letter-spacing: 3px; font-size: 15px; }
.review blockquote { font-size: var(--vf-text-16); line-height: 1.6; color: var(--cream); flex: 1; text-wrap: pretty; }
.review blockquote b { color: inherit; font-weight: var(--vf-weight-strong); }
.review .who { font-size: var(--vf-text-14); color: var(--bone-soft); }
@media (max-width: 760px) {
  /* justify-content: start, sonst mittelt das Raster die Spalten und die ersten Karten ragen links aus dem Streifen (nicht erreichbar). */
  .review-wall {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%; gap: var(--vf-space-3); justify-content: start;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); scroll-padding-inline: var(--pad-x);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .review-wall::-webkit-scrollbar { display: none; }
  .review { scroll-snap-align: start; }
}
.review .who b { color: var(--cream); font-weight: var(--vf-weight-strong); display: block; }
.review-note { margin-top: var(--vf-space-10); font-size: var(--vf-text-14); color: var(--bone-soft); max-width: 60ch; text-wrap: pretty; }
.review-note b { color: var(--cream); font-weight: var(--vf-weight-strong); }

/* ---------- Lieferung ---------- */
.delivery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(48px, 7vw, 112px); align-items: start;
}
.delivery-copy h2 { margin-bottom: var(--vf-space-6); }
.delivery-lede { margin-bottom: var(--vf-space-8); max-width: 42ch; color: var(--ink-soft); text-wrap: pretty; }
.delivery-facts { display: grid; gap: var(--vf-space-5); }
.delivery-facts dt { font-weight: var(--vf-weight-strong); color: var(--ink); }
.delivery-facts dd { color: var(--ink-soft); max-width: 40ch; text-wrap: pretty; }
.delivery-more { margin-top: var(--vf-space-8); max-width: 42ch; color: var(--ink-soft); text-wrap: pretty; }
/* Link mitten im Satz: unterstrichen statt «›» (der Satz läuft weiter). */
.delivery-more a { color: var(--green-ink); font-weight: var(--vf-weight-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.delivery-table { display: grid; gap: var(--vf-space-2); }
.delivery-row {
  display: flex; flex-direction: column; gap: var(--vf-space-1);
  padding: var(--vf-space-5) var(--vf-space-6); background: var(--vf-white); border-radius: var(--radius);
}
@media (min-width: 761px) { .delivery-row { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--vf-space-4); } .delivery-row .where { text-align: right; } }
.delivery-row .day { font-size: var(--vf-text-14); color: var(--ink-soft); }
.delivery-row .where { font-weight: var(--vf-weight-strong); color: var(--ink); text-wrap: balance; }
.delivery-note { padding: var(--vf-space-2) var(--vf-space-6) 0; font-size: var(--vf-text-13); color: var(--ink-soft); text-wrap: pretty; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: calc(860px + 2 * var(--pad-x)); }
/* Abo-Kasten: der dunkle Kasten (CONTEXT.md), ruhig: Titel in Creme, Text in Zweittext. */
.abo-honest {
  background: var(--slate-950); color: var(--bone); border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px); margin-bottom: clamp(48px, 6vw, 72px);
}
.abo-honest .sig {
  font-family: var(--font-display); font-style: italic; font-weight: var(--vf-weight-accent);
  font-size: clamp(24px, 2.4vw, 30px); line-height: 1.25; color: var(--cream); margin-bottom: var(--vf-space-3);
}
.abo-honest p:not(.sig) { color: var(--bone-soft); max-width: 60ch; }
.abo-honest b { color: var(--cream); font-weight: var(--vf-weight-strong); }
.faq { border-bottom: var(--vf-border-width) solid var(--hairline-light); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--vf-space-5);
  min-height: 64px; padding-block: var(--vf-space-4);
  font: var(--vf-weight-strong) var(--vf-text-18)/1.35 var(--font-body); color: var(--ink);
  /* Fragen wie Überschriften ausgleichen: kein «sein?» oder «VitaFresh?» allein auf der zweiten Zeile. */
  text-wrap: balance;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: var(--vf-focus-offset); border-radius: 4px; }
.faq summary .ico { position: relative; flex: none; width: 16px; height: 16px; color: var(--ink-soft); transition: transform .3s var(--ease); }
.faq summary .ico::before, .faq summary .ico::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: currentColor; }
.faq summary .ico::after { transform: rotate(90deg); }
.faq[open] summary .ico { transform: rotate(45deg); color: var(--ink); }
.faq .a { padding: 0 0 var(--vf-space-6); color: var(--ink-soft); max-width: 64ch; }
@media (max-width: 760px) { .faq summary { font-size: var(--vf-text-16); } }

/* ---------- Schluss ---------- */
.final { position: relative; isolation: isolate; overflow: hidden; text-align: center; background: var(--slate-950); }
.final-bg { position: absolute; inset: 0; z-index: -2; }
.final-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; filter: brightness(.42) saturate(1.05); }
/* Rechts im Bild steht eine Dose mit dem alten Namen «Davids Fitness Food»: am breiten Bildschirm
   rechts abschneiden (Bild bleibt echt, nur der Ausschnitt ändert). */
@media (min-width: 761px) { .final-bg img { transform: scale(1.4); transform-origin: 0 50%; } }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 90% at 50% 100%, rgba(15,21,25,.2), rgba(15,21,25,.8)); }
.final .wrap { padding-block: clamp(160px, 22vw, 260px); display: flex; flex-direction: column; align-items: center; gap: var(--vf-space-10); }
.final h2 { font-size: var(--vf-hero); max-width: 12ch; color: var(--cream); }
@media (min-width: 761px) { .final h2 { max-width: 18ch; } }
.final-lede { margin-top: calc(-1 * var(--vf-space-4)); max-width: 44ch; color: rgba(236,231,218,.94); text-wrap: pretty; }
.final-cta { display: flex; flex-direction: column; align-items: center; gap: var(--vf-space-4); }
/* Zahlungsarten: eine leise Zeile einfarbiger Zeichen unter dem Schluss-Knopf. */
.pay-row { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--vf-space-3) var(--vf-space-6); margin-top: var(--vf-space-2); color: rgba(236,231,218,.72); }
.pay-row li { display: flex; }
.pay-row svg { display: block; }
.final-note { max-width: 44ch; font-size: var(--vf-text-14); line-height: 1.5; color: var(--bone-soft); text-wrap: balance; }
.final-note b { color: var(--cream); font-weight: var(--vf-weight-strong); }

/* ---------- Fuss ---------- */
.site-foot { background: var(--slate-950); }
.site-foot .wrap { padding-block: var(--vf-space-16) var(--vf-space-10); display: grid; gap: var(--vf-space-12); }
/* Claim, Kontakt und Liefergebiet (Ultra clean, Runde 5): am Handy untereinander, ab 761 px drei Spalten. */
.foot-grid { display: grid; gap: var(--vf-space-8); }
@media (min-width: 761px) { .foot-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--vf-space-12); } }
.foot-brand p { margin-top: var(--vf-space-4); max-width: 36ch; font-size: var(--vf-text-14); line-height: 1.6; color: var(--bone-soft); text-wrap: pretty; }
.foot-h { margin-bottom: var(--vf-space-2); font: var(--vf-weight-strong) var(--vf-text-14)/1.3 var(--font-body); color: var(--cream); }
.foot-col p:not(.foot-h) { font-size: var(--vf-text-14); line-height: 1.9; color: var(--bone-soft); }
/* Liefergebiet: jede Ortsgruppe eine eigene Liste (main.js, [data-liste]). Wird die Spalte am Tablet zu schmal,
   bricht sie nur zwischen ganzen Orten, ohne Punkt am Zeilenrand und ohne einzelnen Ort auf der letzten Zeile. */
.foot-zeile { display: block; }
.site-foot a { text-decoration: none; color: var(--bone-soft); }
.site-foot a:hover { color: var(--cream); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--vf-space-2) var(--vf-space-4); font-size: var(--vf-text-13); color: var(--bone-soft); }

/* ---------- Sticky-Knopf (Handy) ---------- */
.sticky-cta {
  position: fixed; left: var(--vf-space-4); right: var(--vf-space-4); bottom: calc(var(--vf-space-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--vf-z-landing-header); display: none;
  transform: translateY(130%); opacity: 0;
}
.sticky-cta .btn { width: 100%; background: var(--green-ink); color: var(--cream); box-shadow: var(--vf-shadow-float); }
@media (max-width: 760px) { .sticky-cta { display: block; } }
/* Unter 360 px läuft der Text sonst bis 9 px an den Rand der Pille: 15 px Schrift, Wortlaut gleich. */
@media (max-width: 359px) { .sticky-cta .btn { font-size: var(--vf-text-15); padding: 0 var(--vf-space-4); } }

/* ---------- Video-Abkürzung ----------
   «Lieber schauen? 6-Min-Video» (Entscheid 09.08.2026, Ultra clean Runde 5): Glas wie der Kopf, hell über hellen
   und dunkel über dunklen Abschnitten (.is-over-dark, main.js), 44 px hoch, × mit 44 px Tippfläche.
   Erscheint ab rund 25 % Scrolltiefe (.is-da), am Handy links über dem Klebe-Knopf. */
.vsl-pill {
  position: fixed; left: var(--vf-space-6); bottom: calc(var(--vf-space-6) + env(safe-area-inset-bottom, 0px));
  z-index: var(--vf-z-landing-float); display: flex; align-items: center; min-height: var(--vf-tap);
  border-radius: var(--vf-radius-pill); color: var(--ink);
  background: rgba(244,239,228,.86);
  backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 6px 22px rgba(26,33,38,.16), 0 0 0 1px rgba(28,34,39,.06);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity var(--vf-motion-landing-exit) var(--ease), transform var(--vf-motion-landing-exit) var(--ease), visibility 0s linear var(--vf-motion-landing-exit), background-color .4s, color .4s;
}
.vsl-pill.is-da {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--vf-motion-landing-float) var(--ease), transform var(--vf-motion-landing-float) var(--ease), visibility 0s, background-color .4s, color .4s;
}
.vsl-pill.is-over-dark { background: rgba(15,21,25,.78); color: var(--cream); box-shadow: 0 6px 22px rgba(0,0,0,.28), 0 0 0 1px var(--vf-line-on-dark-strong); }
.vsl-pill-link {
  display: flex; align-items: center; gap: 10px; min-height: var(--vf-tap); padding: 0 2px 0 8px;
  font: var(--vf-weight-strong) var(--vf-text-14)/1 var(--font-body); color: inherit; text-decoration: none; white-space: nowrap;
}
.vsl-pill-link b { font-weight: var(--vf-weight-bold); }
.vsl-pill-play { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: var(--vf-on-green); }
.vsl-pill-play svg { margin-left: 2px; }
.vsl-pill-x {
  flex: none; display: grid; place-items: center; width: var(--vf-tap); height: var(--vf-tap); padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: 50%; color: inherit; opacity: .78;
}
.vsl-pill-link:focus-visible, .vsl-pill-x:focus-visible { outline: var(--vf-focus-width) solid var(--vf-focus-color); outline-offset: -2px; border-radius: var(--vf-radius-pill); }
.vsl-pill.is-over-dark .vsl-pill-link:focus-visible, .vsl-pill.is-over-dark .vsl-pill-x:focus-visible { outline-color: var(--vf-focus-color-on-dark); }
@media (hover: hover) and (pointer: fine) { .vsl-pill-x:hover { opacity: 1; } }
/* Handy: über dem Klebe-Knopf (16 + 54 + 10 px Abstand), etwas kleiner. */
@media (max-width: 760px) {
  .vsl-pill { left: var(--vf-space-4); bottom: calc(var(--vf-space-4) + var(--vf-control-lg) + 10px + env(safe-area-inset-bottom, 0px)); }
  .vsl-pill-link { font-size: var(--vf-text-13); gap: var(--vf-space-2); padding-left: 6px; }
}
@media (prefers-reduced-motion: reduce) { .vsl-pill, .vsl-pill.is-da { transform: none; transition: opacity .2s, visibility 0s linear .2s; } .vsl-pill.is-da { transition: opacity .2s, visibility 0s; } }

/* ---------- Abgleich der drei Flächen (Vorschau 21.10.2026) ----------
   Landing, Shop und Portal am selben Massstab:
   - Ankündigung: auf der Landing hellgrün mit Tinte (Marlon, 21.10.2026: die Landing ist die laute Fläche),
     im Shop Creme-2.
   - Text-Links in Tinte mit «›» wie im Portal und im Shop; Grün bleibt beim Knopf und bei der Wahl.
   - Kauf-Knopf der Leiste 54 px und 16/600 wie jeder Kauf-Knopf (Shop-Gerichtseite, Landing-Bühnen).
   - × auf dem Foto 32 px sichtbar (wie Herz und × im Shop und Portal), tippbar 48 px.
   - Chips 14/500 wie in Portal und Shop; FAQ-Fragen 500 wie die Aufklapper im Shop. */
.announce { background: var(--green); color: var(--ink); }
.link-weiter, .qz-skip, .wk-head .qz-back, .wk-act, .wk-add, .wk-keep-row, .delivery-more a, .wk-pick-unlock { color: var(--ink); }
.qz-skip:hover, .wk-keep-row:hover { color: var(--ink-soft); }
.wk-act[aria-expanded="true"] { color: var(--cream); }
.wk-cta { min-height: var(--vf-control-lg); font-size: var(--vf-text-16); }
@media (max-width: 980px), (max-height: 500px) { .wk-cta { font-size: var(--vf-text-16); } }
.wk-del { width: 32px; height: 32px; }
.wk-pick-chip { font-weight: var(--vf-weight-medium); }
.faq summary { font-weight: var(--vf-weight-medium); }
/* FAQ wie die Fragen im Shop: jede Frage eine weisse Fläche, Abstand statt Trennlinie. */
.faq-list { display: grid; gap: var(--vf-space-2); }
.faq { border-bottom: 0; padding: 0 var(--vf-space-5); background: var(--vf-white); border-radius: var(--vf-radius); }
.faq summary { min-height: 56px; }
.faq .a { padding-bottom: var(--vf-space-5); }