/* ============================================================
VitaFresh · Mein Abo — Desktop-first Design-System
Optik = Landingpage (assets/css/style.css): Creme-Grund, weisse
Karten mit Haarlinie, Radius 18/22, Fraunces als Display,
Hanken Grotesk als Body, VitaFresh-Grün als Akzent.
Aufbau der Datei:
01 Fonts · 02 Tokens · 03 Reset & Basis · 04 Typo-Bausteine
05 App-Shell & Sektionen · 06 Topbar · 07 Tab-Bar
08 Buttons · 09 Chips · 10 Formfelder
11 Karten-Basis · 12 Grid-Karte · 13 Wochen-Karte
14 Held-Block · 15 Einstiegs-Kacheln · 16 Zähler-Pill
17 Stepper / Grössen / Kleinteile · 18 Sheets · 19 Toast
20 Skeleton · 21 Press-Feedback & Transitions
22 v1-Bestand (bleibt lauffähig) · 23 Reduced Motion
24 Desktop-Layouts, danach Tablet- und Handy-Anpassungen
============================================================ */
/* ---------- 01 Fonts (selbstgehostet, wie auf der Landingpage) ---------- */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/fraunces-0940d166.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 650;font-display:swap;src:url(assets/fonts/fraunces-aa080111.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300 800;font-display:swap;src:url(assets/fonts/hankengrotesk-5cebb0b5.woff2) format("woff2")}
/* ---------- 02 Tokens ---------- */
:root{
/* Farben — identisch zur Landingpage */
--cream:#f4efe4;
--cream-2:#ece5d4;
--bone:#ece7da;
--bone-soft:#a9a294;
--ink:#1a2126;
--ink-soft:#4c545a;
--hairline:rgba(28,34,39,.14);
--hairline-strong:rgba(28,34,39,.24);
--green:#8dc63f;
--green-bright:#a6dc55;
--green-ink:#44661a;
--green-deep:#2f4d13;
--red:#b8472a;
/* Dezenter Hinweis auf dunklem Grund (Zähler über der Zielmenge) — nie Alarmrot. */
--amber:#e2b866;
--white:#fff;
/* Schrift */
--font-display:"Fraunces",Georgia,serif;
--font-body:"Hanken Grotesk","Helvetica Neue",sans-serif;
/* Form */
--radius:18px; /* Karten */
--radius-md:22px; /* Sheets, grosse Flächen */
--radius-sm:12px; /* Bilder, kleine Flächen */
--max:1360px; /* Desktop-Arbeitsfläche */
--pad-x:40px; /* Desktop-Rand; schmalere Geräte folgen unten */
/* Rhythmus (LP-artig grosszügig) */
--sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:18px; --sp-5:24px; --sp-6:32px;
/* Höhen der fixierten Ebenen — Basis für alle bottom-Berechnungen */
--tabs-h:0px;
--safe-b:env(safe-area-inset-bottom);
/* Bewegung */
--ease:cubic-bezier(.19,1,.22,1);
--dur-fast:.18s;
--dur:.24s;
--shadow-soft:0 6px 22px rgba(47,77,19,.10);
--shadow-pill:0 10px 30px rgba(26,33,38,.22);
}
/* ---------- 03 Reset & Basis ---------- */
*{box-sizing:border-box}
html,body{
margin:0;
background:var(--cream);
color:var(--ink);
font-family:var(--font-body);
font-size:16px;
line-height:1.5;
-webkit-font-smoothing:antialiased;
/* Überläufe werden am jeweiligen Inhalt behoben, nicht global versteckt. */
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.12;letter-spacing:-.01em;margin:0}
:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px;border-radius:6px}
::selection{background:var(--green);color:#15230a}
/* ---------- 04 Typo-Bausteine ---------- */
/* Kleines Label in Versalien — das LP-«Kicker»-Motiv ohne Mono-Schrift. */
.vf-label{
display:inline-block;
font-size:11px;font-weight:600;line-height:1.2;
letter-spacing:.18em;text-transform:uppercase;
color:var(--green-ink);
}
.vf-label--quiet{color:var(--ink-soft)}
/* Display-Zahl/Datum (Fraunces). Grösse per Modifier oder inline. */
.vf-display{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;line-height:1.06}
.vf-display em{font-style:italic;font-weight:420;color:var(--green-ink)}
.vf-muted{color:var(--ink-soft);font-size:14px}
.vf-mini{color:var(--ink-soft);font-size:12.5px}
.vf-link{color:var(--green-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.vf-row{display:flex;align-items:center;gap:var(--sp-2)}
.vf-row--between{justify-content:space-between}
.vf-nowrap{white-space:nowrap}
/* ---------- 05 App-Shell & Sektionen ---------- */
.vf-app{
max-width:var(--max);
margin:0 auto;
min-height:100dvh;
/* Desktop: Navigation im Kopf, Abschluss in der Wochenübersicht. */
padding-bottom:48px;
}
/* Home hat weder Sticky-CTA noch Zähler-Pille — der Extra-Fussraum darf weg,
damit der Kachel-Hub ohne Scrollen auf einen Handy-Screen passt. */
.vf-app:has(> .vf-view[data-view="home"]){padding-bottom:calc(var(--tabs-h) + var(--sp-4) + var(--safe-b))}
.vf-sec{padding:var(--sp-5) var(--pad-x) 0}
.vf-sec--tight{padding-top:var(--sp-4)}
/* Auch wenn nach der letzten Sektion noch die fixierte CTA bzw. die
Zähler-Pille im Markup steht, braucht die Sektion ihren Fussabstand. */
.vf-sec:last-child,.vf-sec:last-of-type{padding-bottom:var(--sp-5)}
.vf-sec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.vf-sec__head h2,.vf-sec__head h3{margin-bottom:0}
.vf-sec h2{font-size:28px;margin-bottom:var(--sp-3)}
/* Bestand v1: h2 trägt dort das direkt im Titel. */
.vf-sec h2 small{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--ink-soft);letter-spacing:normal}
.vf-sec h2:has(small){display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2)}
.vf-sec h3{font-size:18px}
/* ---------- 06 Topbar ---------- */
/* Creme mit Blur, darunter eine Haarlinie — ruhig, kein Material-Schatten. */
.vf-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px var(--pad-x);background:var(--cream);border-bottom:1px solid var(--hairline);min-height:88px;flex-wrap:wrap}
.vf-topbar h1{font-family:var(--font-display);font-weight:500;font-size:25px;display:flex;align-items:center;min-width:0;flex:none}
.vf-topbar__act{display:inline-flex;align-items:center;gap:8px}
/* Rundes Logo-Badge (v1-Bestand, weiter genutzt als kompakte Marke). */
.vf-logo{
display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:50%;
background:var(--green-ink);color:var(--cream);
font-family:var(--font-display);font-weight:600;font-size:13px;
margin-right:8px;flex:none;
}
/* ---------- 07 Tab-Bar ---------- */
/* Inline-SVG-Icon + Label; aktiv = weiche Creme-Pille. Safe-Area unten. */
.vf-tabs{position:static;z-index:30;display:flex;justify-content:flex-end;gap:8px;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;flex:1;min-width:min(100%,460px);flex-wrap:wrap;border:0}
.vf-tab{flex:0 1 120px;max-width:180px;min-height:46px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;border-radius:14px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);transition:transform var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);padding:10px 18px}
.vf-tab:active{transform:scale(.97)}
.vf-tab__icon{width:23px;height:23px;flex:none}
.vf-tab__label{line-height:1.1}
.vf-tab.is-active{color:var(--green-ink);background:var(--white)}
.vf-tab.is-active .vf-tab__icon{stroke-width:1.7}
/* ---------- 08 Buttons ---------- */
/* LP-Pille: gefüllt = green-ink auf Creme-Text, ghost = Haarlinien-Umriss. */
.vf-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:48px;padding:0 22px;
border:1px solid transparent;border-radius:999px;
background:var(--green-ink);color:var(--cream);
font-family:var(--font-body);font-weight:600;font-size:15.5px;
text-decoration:none;
transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.vf-btn:active{transform:scale(.97)}
.vf-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.vf-btn--ghost{background:transparent;color:var(--green-ink);border-color:var(--hairline-strong)}
.vf-btn--ghost.is-on,.vf-btn--ghost:focus-visible{border-color:var(--green-ink)}
/* Ghost-Variante für die fixierte CTA: Umriss-Optik, aber deckender Grund –
sonst scrollen die Wochen-Karten sichtbar durch den Knopf. */
.vf-btn--auf-creme{background:var(--cream)}
.vf-btn--sm{min-height:36px;padding:0 14px;font-size:13.5px}
.vf-btn--block{width:100%}
.vf-btn__icon{width:18px;height:18px;flex:none}
/* Stiller Textbutton (Sheet abbrechen, «Überspringen»). */
.vf-btn--still{background:none;color:var(--ink-soft);min-height:44px;padding:0 8px;font-weight:600}
.vf-btn--still:hover{color:var(--ink)}
/* Fixierte CTA über der Tab-Bar. Darunter ein weicher Creme-Verlauf, damit
die Wochen-Karten hinter dem Knopf ausblenden statt hart abzureissen. */
.vf-sticky-cta{
position:fixed;left:0;right:0;bottom:calc(var(--tabs-h) + var(--safe-b));z-index:25;
display:flex;justify-content:center;padding:0 var(--pad-x) 10px;pointer-events:none;
}
.vf-sticky-cta::before{
content:"";position:absolute;left:0;right:0;bottom:0;top:-28px;z-index:-1;
background:linear-gradient(180deg,rgba(244,239,228,0) 0%,var(--cream) 62%);
}
.vf-sticky-cta>*{pointer-events:auto;max-width:var(--max);width:100%}
/* Einmal-Modus (Plan 048): zwei Ausgänge plus der Abo-Satz. Ohne
flex-direction stünden sie nebeneinander — die Basisregel zentriert EIN
Kind. Der Satz erklärt den zweiten Knopf und gehört darum direkt darunter. */
.vf-sticky-cta--zwei{flex-direction:column;gap:8px}
.vf-sticky-cta--zwei .vf-sticky-cta__satz{margin:0;text-align:center}
/* «Ab jetzt automatisch — als Wochen-Abo» bricht auf 375 px sonst mitten im
Wort um. Etwas engere Schrift und Innenabstände halten ihn einzeilig. */
.vf-sticky-cta--zwei .vf-btn--ghost{font-size:14.5px;padding:0 12px}
/* ---------- 09 Chips ---------- */
.vf-chips{display:flex;flex-wrap:wrap;gap:8px}
/* Waagrecht scrollende Kategorie-Leiste — ohne sichtbare Scrollbar. */
.vf-chips--scroll{
flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
-webkit-overflow-scrolling:touch;
padding:2px var(--pad-x) 4px;margin:0 calc(var(--pad-x) * -1);
scroll-snap-type:x proximity;scroll-padding-left:var(--pad-x);
}
.vf-chips--scroll::-webkit-scrollbar{display:none}
.vf-chips--scroll>.vf-chip{flex:0 0 auto;scroll-snap-align:start}
.vf-chip{
display:inline-flex;align-items:center;gap:6px;
min-height:38px;padding:0 14px;
border:1px solid var(--hairline);border-radius:999px;
background:var(--white);color:var(--ink-soft);
font-weight:600;font-size:14px;
transition:transform var(--dur) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.vf-chip:active{transform:scale(.97)}
.vf-chip.is-on{background:var(--green-ink);border-color:var(--green-ink);color:var(--cream)}
/* «Nein-Liste»: ausgeschaltet/ausgeschlossen. */
.vf-chip.is-off{background:var(--cream-2);border-color:transparent;color:var(--bone-soft);text-decoration:line-through}
/* Ausgeschlossene Zutat: derselbe Ausschluss-Look plus ein × zum Lösen. */
.vf-chips--weg{margin-top:8px}
/* Vorschläge beim Tippen (Smart Selection): kleiner und leiser als echte
Chips, damit klar ist — das ist ein Angebot, kein Zustand. */
.vf-chips--sugg{margin-top:2px}
.vf-chips--sugg[hidden]{display:none}
.vf-chip--sugg{min-height:32px;padding:0 12px;font-size:13px;font-weight:500;background:var(--cream-2);border-color:var(--hairline);color:var(--ink-soft)}
.vf-chip--weg{padding-right:10px}
.vf-chip__x{width:12px;height:12px;flex:none;stroke-width:2}
/* «Deine Makros» (Spec §4, Batch 4a T8/T20): der weiche Filter als sichtbarer
Schalter auf eigener Zeile UNTER den Kategorien. Gestrichelt = aus, gefüllt
= an — so ist er auf einen Blick ein Zustand und keine weitere Kategorie. */
.vf-chip--pill{border-style:dashed;border-color:var(--hairline-strong);color:var(--green-ink)}
.vf-chip--pill.is-on{border-style:solid}
/* Aktive harte Filter sichtbar machen (Spec §4): eine ruhige TEXT-Zeile über
dem Grid — bewusst OHNE Chip-Optik, damit ein Ernährungsfilter nicht mit
einem Fehltipp verschwindet. Der ganze Streifen öffnet die Präferenzen. */
.vf-filterzeile{
display:block;width:100%;text-align:left;
margin:0 0 var(--sp-3);
color:var(--ink-soft);font-size:12.5px;line-height:1.5;
}
/* Final-Review Kleinigkeit: «Alle» steht auf einem , nicht auf dem
Präferenzen-Knopf — bewusst kein Zeigercursor, keine Klick-Optik. */
.vf-filterzeile--alle{cursor:default}
/* ---------- 10 Formfelder ---------- */
.vf-search{width:100%;min-height:48px;padding:0 16px;border:1px solid var(--hairline);border-radius:999px;background:var(--white);max-width:680px}
.vf-search::placeholder{color:var(--bone-soft)}
.vf-field{display:flex;flex-direction:column;gap:6px}
details summary{cursor:pointer;font-weight:600}
/* Dual-Slider: EIN Track, zwei Knöpfe (Vorlage: Pascis v35 .dual-range, Farben
aus dem LP-Kit). Zwei transparente Range-Inputs liegen übereinander; nur die
Knöpfe fangen Zeiger-Ereignisse, damit beide erreichbar bleiben. */
.vf-rng{margin-top:var(--sp-3)}
.vf-rng__bahn{position:relative;height:30px;margin-top:4px}
.vf-rng__spur,.vf-rng__fuell{
position:absolute;top:50%;transform:translateY(-50%);height:6px;border-radius:999px;pointer-events:none;
}
.vf-rng__spur{left:0;right:0;background:var(--cream-2);border:1px solid var(--hairline)}
.vf-rng__fuell{background:var(--green)}
.vf-rng__bahn input[type=range]{
-webkit-appearance:none;appearance:none;
position:absolute;left:0;top:0;width:100%;height:30px;margin:0;
background:transparent;pointer-events:none;
}
.vf-rng__bahn input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;pointer-events:auto;position:relative;z-index:2;
width:22px;height:22px;border-radius:50%;
background:var(--green-ink);border:3px solid var(--white);
box-shadow:0 1px 4px rgba(26,33,38,.28);cursor:pointer;
}
.vf-rng__bahn input[type=range]::-moz-range-thumb{
pointer-events:auto;
width:22px;height:22px;border-radius:50%;
background:var(--green-ink);border:3px solid var(--white);
box-shadow:0 1px 4px rgba(26,33,38,.28);cursor:pointer;
}
.vf-rng__bahn input[type=range]:last-of-type::-webkit-slider-thumb{z-index:3}
.vf-rng__bahn input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--green-ink);outline-offset:2px}
/* Mittag/Abend: zwei Sätze, optisch als Block getrennt. */
.vf-satz + .vf-satz{margin-top:var(--sp-4);border-top:1px solid var(--hairline);padding-top:var(--sp-3)}
.vf-satz__note{margin:14px 0 0}
/* ---------- 11 Karten-Basis ---------- */
.vf-card{
background:var(--white);
border:1px solid var(--hairline);
border-radius:var(--radius);
padding:16px;
}
.vf-card--gross{border-radius:var(--radius-md);padding:20px}
.vf-card + .vf-card{margin-top:var(--sp-2)}
.vf-card__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:44px}
.vf-card__row + .vf-card__row{border-top:1px solid var(--hairline);margin-top:2px}
.vf-empty{padding:28px var(--pad-x);text-align:center;color:var(--ink-soft)}
/* ---------- 12 Grid-Karte (.vf-gcard) ---------- */
/* Menüs-Tab: 2-spaltiges Foto-Grid. Bild ist der Held (4:3), ♥ liegt
auf dem Foto, darunter Name (2 Zeilen), Preis und Makro-Kurzzeile. */
.vf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.vf-gcard{
position:relative;
display:flex;flex-direction:column;
background:var(--white);
border:1px solid var(--hairline);
border-radius:var(--radius);
overflow:hidden;
transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur) var(--ease);
}
.vf-gcard.is-gewaehlt{border-color:var(--green-ink);box-shadow:inset 0 0 0 1px var(--green-ink)}
.vf-gcard__ph{position:relative;aspect-ratio:4/3;background:var(--cream-2);overflow:hidden;cursor:pointer}
.vf-gcard__open{display:block;width:100%;height:100%}
.vf-gcard__open:focus-visible{outline-offset:-4px}
.vf-gcard__flag{pointer-events:none}
.vf-gcard__img{width:100%;height:100%;object-fit:cover;transition:opacity var(--dur-fast) var(--ease)}
.vf-gcard__ph:active .vf-gcard__img{opacity:.86}
/* ♥ als Overlay oben rechts — weisse Pille auf dem Foto. */
.vf-gcard__fav{
position:absolute;top:8px;right:8px;z-index:2;
width:32px;height:32px;border-radius:999px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.92);color:var(--ink-soft);
box-shadow:0 1px 6px rgba(0,0,0,.18);
transition:transform var(--dur) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.vf-gcard__fav svg{width:17px;height:17px}
.vf-gcard__fav:active{transform:scale(.9)}
.vf-gcard__fav.is-on{background:var(--green-ink);color:var(--cream)}
.vf-gcard__fav.is-on svg{fill:currentColor}
/* Kleines Fakt-Band unten links auf dem Foto (z. B. «2×» oder «Frühstück»). */
.vf-gcard__flag{
position:absolute;left:8px;bottom:8px;z-index:2;
padding:3px 9px;border-radius:999px;
background:rgba(26,33,38,.78);color:var(--cream);
font-size:11px;font-weight:600;letter-spacing:.04em;
}
.vf-gcard__flag--var{left:auto;right:8px}
.vf-gcard__body{display:flex;flex-direction:column;gap:5px;padding:12px 13px 13px;flex:1}
.vf-gcard__name{
text-align:left;
font-family:var(--font-body);font-weight:600;font-size:14.5px;line-height:1.3;
letter-spacing:normal;color:var(--ink);
min-height:2.6em; /* 2 Zeilen → Karten bleiben auf gleicher Höhe */
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vf-gcard__preis{font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap}
.vf-gcard__makro{
font-size:11.5px;font-weight:500;letter-spacing:.03em;color:var(--green-ink);
line-height:1.35;min-height:2.7em; /* 2 Zeilen: «Mittel · 718 kcal · P 51 g» passt in 160 px nicht in eine (Pasci, 03.09.) */
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vf-gcard__foot{margin-top:auto;padding-top:9px}
/* «+ zur Woche» direkt auf der Karte (In-Place-Toggle). */
.vf-gcard__cta{
width:100%;min-height:34px;padding:0 10px;
border:1px solid var(--hairline-strong);border-radius:999px;
background:var(--white);color:var(--ink);
font-size:13px;font-weight:600;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
transition:transform var(--dur) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.vf-gcard__cta:active{transform:scale(.97)}
.vf-gcard__cta.is-on{background:var(--green-ink);border-color:var(--green-ink);color:var(--cream)}
.vf-gcard__cta[disabled]{opacity:.45;cursor:not-allowed}
.vf-gcard__cta svg{width:14px;height:14px}
/* ---------- 13 Wochen-Karte (.vf-wcard) ---------- */
/* Home/«Deine Woche»: Foto links, rechts Body (Name/Preis/Makro) über der
Aktionszeile (Werkzeuge + Stepper). */
/* R44: Grid statt Flex — Foto links über beide Zeilen, Body rechts oben, die
Aktionszeile rechts unten (Desktop/Tablet) bzw. über die ganze Breite (Handy).
Die erste Spalte ist `auto` und folgt der Fotobreite — so brauchen die
Breakpoints (88/112/88/72 px) keine eigene Spaltenregel. */
.vf-wcard{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:20px;row-gap:8px;align-items:start;padding:18px;background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius)}
.vf-wcard + .vf-wcard{margin-top:12px}
.vf-wcard__ph{grid-column:1;grid-row:1 / span 2;position:relative;width:120px;height:120px;border-radius:var(--radius-sm);overflow:hidden;background:var(--cream-2)}
/* Mittag/Abend auf der Wochen-Karte — dasselbe Badge wie im Grid, kleiner. */
.vf-wcard__flag{position:absolute;left:6px;bottom:6px;z-index:2;padding:2px 7px;border-radius:999px;background:rgba(26,33,38,.78);color:var(--cream);font-size:10px;font-weight:600;letter-spacing:.04em}
.vf-wcard__img{width:100%;height:100%;object-fit:cover}
.vf-wcard__body{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.vf-wcard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.vf-wcard__name{
text-align:left;flex:1;min-width:0;
font-weight:600;font-size:14.5px;line-height:1.3;color:var(--ink);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Fixiert: kleine Nadel vor dem Namen — reine Anzeige, gelöst wird im Sheet. */
.vf-wcard.is-fixiert{border-color:rgba(47,77,19,.28)}
.vf-wcard__preis{font-weight:600;font-size:16px;white-space:nowrap}
.vf-wcard__makro{
font-size:11.5px;font-weight:500;letter-spacing:.03em;color:var(--green-ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vf-wcard__actions{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:4px;flex-wrap:nowrap;align-self:end}
/* Entfernen als × auf dem Foto (Warenkorb-Muster der Landingpage). */
.vf-wcard__del{
position:absolute;top:5px;right:5px;
width:26px;height:26px;border-radius:999px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.92);color:var(--ink-soft);
box-shadow:0 1px 6px rgba(0,0,0,.18);
transition:transform var(--dur) var(--ease),color var(--dur-fast) var(--ease);
}
.vf-wcard__del svg{width:12px;height:12px}
.vf-wcard__del:active{transform:scale(.9)}
.vf-wcard__del:hover{color:var(--red)}
/* Auf 360 px müssen Tauschen und Stepper nebeneinander bleiben. */
.vf-wcard .vf-stepper button{width:36px;height:36px}
.vf-wcard .vf-stepper span{min-width:22px}
/* «Tauschen» als kleine Pille neben dem Stepper. */
.vf-wcard__tool{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 11px;border:1px solid var(--hairline);border-radius:999px;background:var(--white);color:var(--ink-soft);font-size:12.5px;font-weight:600;transition:transform var(--dur) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.vf-wcard__tool svg{width:14px;height:14px;flex:none}
.vf-wcard__tool:active{transform:scale(.96)}
.vf-wcard__tool.is-on{background:var(--green-ink);border-color:var(--green-ink);color:var(--cream)}
.vf-wcard__tool.is-on svg{fill:currentColor}
/* Tauschen + Fixieren stehen als Paar links, der Stepper bleibt rechts. */
.vf-wcard__tools{display:inline-flex;align-items:center;gap:6px;min-width:0}
/* Nadel-Knopf: nur Icon, gefüllt sobald fixiert. */
.vf-wcard__tool--ikon{padding:0;width:36px;justify-content:center;flex:none}
/* Vorschlag-Banner über den Wochen-Karten — ruhig, kein Alarm. */
.vf-banner{
display:flex;align-items:center;gap:10px;
padding:11px 14px;margin-bottom:10px;
background:var(--cream-2);border-radius:var(--radius);
}
.vf-banner__icon{width:18px;height:18px;flex:none;color:var(--green-ink)}
.vf-banner__txt{margin:0;font-size:13.5px;color:var(--ink-soft)}
/* Total in der Summary-Karte (Fraunces). */
.vf-summe{font-size:22px}
/* ---------- 14 Held-Block (.vf-hero) ---------- */
/* Erster Screen: «Deine Woche» als Held — Label, Datum in Fraunces,
Status-Badge und eine ruhige Faktenzeile («änderbar bis …»). */
.vf-hero{padding:var(--sp-5) var(--pad-x) 0}
.vf-hero__label{margin-bottom:8px}
.vf-hero__datum{
font-family:var(--font-display);font-weight:500;
font-size:34px;line-height:1.05;letter-spacing:-.015em;
color:var(--ink);text-wrap:balance;margin:0;
}
.vf-hero__datum em{font-style:italic;font-weight:420;color:var(--green-ink)}
/* R27 Fix-Runde 1 (11.09.2026): «Ändern ›» sitzt inline auf der Datum-Zeile
(Geometrie-Befund — eine zusätzliche .vf-hero__meta-Zeile liess den Held
um 36px wachsen). Das Datum ist clamp(36px,3.6vw,52px); der Link erbt das
nicht mit. */
.vf-hero__datum .vf-link{font-size:15px;font-weight:500;vertical-align:middle;margin-left:10px;white-space:nowrap}
.vf-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.vf-hero__fakt{margin:10px 0 0;font-size:14px;color:var(--ink-soft);text-wrap:pretty}
.vf-hero__fakt b{color:var(--ink);font-weight:600}
/* R58: die eine Statuszeile im Held — Link, kein Banner, letzte Zeile vor den Aktionen. */
.vf-hero__bewerten{display:inline-block;margin-top:10px;font-size:14px}
/* Status-Badge: ruhig, nie Countdown/Urgency. */
.vf-status{
display:inline-flex;align-items:center;gap:7px;
min-height:30px;padding:0 12px;border-radius:999px;
border:1px solid var(--hairline);background:var(--white);
font-size:12.5px;font-weight:600;color:var(--ink-soft);
}
.vf-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bone-soft);flex:none}
.vf-status.is-bestaetigt{border-color:rgba(47,77,19,.28);background:rgba(47,77,19,.08);color:var(--green-ink)}
.vf-status.is-bestaetigt::before{background:var(--green)}
.vf-status.is-offen{color:var(--ink-soft)}
.vf-status.is-pausiert::before{background:var(--bone-soft)}
/* Kopfzeile im Wochen-Screen: Status-Badge plus ruhige Fakten-Zeile. */
.vf-wkopf{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
/* ---------- 15 Einstiegs-Kacheln (.vf-tile) ---------- */
/* Der Kompakt-Home besteht unter dem Held nur noch aus diesen vier Kacheln
(CONTEXT «Kompakt-Home»). Foto-Kachel und Text-Kachel teilen dieselbe
Grundform; sie dürfen gross sein, es muss nichts mehr darunter passen. */
.vf-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vf-tile{
position:relative;overflow:hidden;
display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
min-height:120px;padding:16px;
text-align:left;
background:var(--white);
border:1px solid var(--hairline);
border-radius:var(--radius);
color:var(--ink);
transition:transform var(--dur) var(--ease),border-color var(--dur-fast) var(--ease);
}
.vf-tile:active{transform:scale(.97)}
.vf-tile__icon{width:22px;height:22px;color:var(--green-ink);margin-bottom:auto}
/* Kacheltitel dürfen umbrechen — «Menüs entdecken» wird sonst abgeschnitten. */
.vf-tile__titel{
font-family:var(--font-display);font-weight:500;font-size:17.5px;line-height:1.15;letter-spacing:-.015em;
text-wrap:balance;
}
.vf-tile--breit .vf-tile__titel{font-size:19px}
.vf-tile__sub{font-size:12.5px;color:var(--ink-soft);line-height:1.35}
.vf-tile--breit{grid-column:1 / -1;min-height:88px}
/* Foto-Kachel: Bild als Hintergrund, Text auf dunklem Verlauf. */
.vf-tile--foto{border-color:transparent;color:var(--cream);min-height:132px}
.vf-tile--foto .vf-tile__sub{color:rgba(236,231,218,.82)}
.vf-tile--foto .vf-tile__icon{color:var(--green-bright)}
.vf-tile__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vf-tile--foto::after{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(15,21,25,.10) 0%,rgba(15,21,25,.72) 100%);
}
.vf-tile--foto > :not(.vf-tile__bg){position:relative;z-index:2}
/* Die Abo-Kachel ist der Held des Hubs: grosses Foto der Woche. */
.vf-tile--hoch{min-height:212px}
/* Noch keine Menüs = kein Foto: dann trägt die Kachel das Markengrün statt
eines grauen Verlaufs, der wie ein kaputtes Bild aussieht. */
.vf-tile--foto.vf-tile--leer{background:var(--green-deep)}
/* Flache Zeilen-Kachel (Icon links, Text rechts) für «Abo & Lieferung». */
.vf-tile--zeile{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-height:80px;padding:16px}
.vf-tile--zeile .vf-tile__icon{margin-bottom:0}
.vf-tile__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
/* ---------- 15b Desktop-Home: Held-Aktion und Wochen-Vorschau ---------- */
/* Nachtrag zu «Kompakt-Home» (Marlon, 09.09.2026). In der Basis-Kaskade sind
Vorschau und Held-Knopf unsichtbar; der Block @media (min-width:900px)
weiter unten schaltet sie ein. Bewusst additiv (kein Rückbau in den
Tablet-/Handy-Blöcken), damit unter 900 px nichts kippen kann. */
.vf-hero__acts{display:none}
.vf-home-vorschau{display:none}
.vf-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.vf-vkarte{
display:flex;flex-direction:column;gap:6px;
text-align:left;color:var(--ink);
background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius-sm);
padding:0 0 10px;overflow:hidden;
transition:transform var(--dur) var(--ease),border-color var(--dur-fast) var(--ease);
}
.vf-vkarte:active{transform:scale(.97)}
.vf-vkarte__img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--cream-2)}
.vf-vkarte__name{padding:0 10px;font-size:13.5px;font-weight:600;line-height:1.25;text-wrap:balance;overflow-wrap:anywhere}
.vf-vkarte__meta{padding:0 10px;font-size:12px;color:var(--ink-soft)}
.vf-vkarte--mehr{justify-content:center;align-items:center;text-align:center;background:var(--cream-2);border-style:dashed;min-height:120px;padding:10px}
.vf-vkarte--mehr .vf-vkarte__name{font-family:var(--font-display);font-weight:500;font-size:18px;padding:0}
.vf-home-vorschau .vf-empty{padding:28px 20px}
/* ---------- 16 Mengen-Badge am Woche-Tab ---------- */
/* Ersetzt die Zähler-Pille (Pasci, 29.08.2026). Zählt die Menüs der Woche. */
.vf-tab__iconwrap{position:relative;display:inline-flex}
.vf-tab__badge{
position:absolute;top:-5px;right:-9px;
min-width:16px;height:16px;padding:0 4px;border-radius:999px;
background:var(--green-ink);color:var(--cream);
font-size:10px;font-weight:700;line-height:16px;text-align:center;
}
/* ---------- 17 Stepper / Grössen / Kleinteile ---------- */
.vf-stepper{display:inline-flex;align-items:center;border:1px solid var(--hairline);border-radius:999px;overflow:hidden;background:var(--white)}
.vf-stepper button{width:36px;height:34px;font-size:17px;line-height:1;color:var(--ink);transition:background var(--dur-fast) var(--ease)}
.vf-stepper button:active{background:var(--cream-2)}
.vf-stepper button[disabled]{opacity:.35;cursor:not-allowed}
.vf-stepper span{min-width:26px;text-align:center;font-weight:600;font-size:14px}
/* Kopf-Stepper im Woche-Tab: Teil der Überschrift, darum etwas kompakter und
die Zahl in Display-Grösse — sie IST die Überschrift. */
.vf-wanz{display:inline-flex;align-items:center;gap:10px}
.vf-stepper--kopf button{width:30px;height:30px;font-size:16px}
.vf-stepper--kopf span{min-width:24px;font-size:16px}
/* Onboarding-Stepper: grosse Zahl, grosse Knöpfe — die Menge ist die Frage. */
.vf-stepper--ob button{width:44px;height:44px;font-size:22px}
.vf-stepper--ob span{min-width:52px;font-family:var(--font-display);font-size:30px}
/* Rundes Icon-Knöpfchen (Pin, Daumen, ♥ in Listen). */
.vf-icon{
width:34px;height:34px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--hairline);background:var(--white);color:var(--ink-soft);
font-size:15px;
transition:transform var(--dur) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.vf-icon:active{transform:scale(.92)}
.vf-icon.is-on{background:var(--green-ink);border-color:var(--green-ink);color:var(--cream)}
.vf-icon svg{width:17px;height:17px}
/* Aktiv = gefülltes Icon (♥, Pin). */
.vf-icon.is-on svg{fill:currentColor}
/* Nur für Screenreader (z. B. «Klein» hinter dem K im Grössen-Chip). */
.vf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vf-progress{height:8px;border-radius:999px;background:var(--cream-2);overflow:hidden}
.vf-progress>i{display:block;height:100%;background:var(--green);transition:width var(--dur) var(--ease)}
/* Stufen-Balken (Pasci, 29.08.2026): Meilenstein-Ticks bei 100/150/200/300,
CHF-Labels darunter. Erreichte Ticks tragen die Füllfarbe. */
.vf-progress--stufen{position:relative;overflow:visible}
.vf-progress--stufen>i{border-radius:999px}
.vf-tick{position:absolute;top:-3px;width:2px;height:14px;border-radius:1px;background:var(--bone-soft);transform:translateX(-50%)}
.vf-tick.is-done{background:var(--green-ink)}
.vf-ticklabels{position:relative;height:16px;margin-bottom:8px}
.vf-ticklabels span{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--bone-soft);white-space:nowrap}
.vf-ticklabels span:last-child{transform:translateX(-100%)}
.vf-ticklabels span.is-done{color:var(--green-ink);font-weight:600}
/* Rabatt-Lückenfüller: kleine Snack-Zeilen unter dem Stufen-Balken. */
/* Bestseller- und Snack-Streifen in der Wochen-Summary: horizontal
scrollbar, Bilder + Plus (Marlon, Live-Test 30.08.2026). */
.vf-snackstrip{display:flex;gap:8px;margin-top:8px;overflow-x:auto;scroll-snap-type:x proximity;
padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.vf-snackstrip::-webkit-scrollbar{display:none}
/* Am Desktop braucht der Streifen eine sichtbare Spur (Pasci, 31.08.2026:
«am PC kann ich hier nicht scrollen») — schmale Scrollbar, dazu übersetzt
strip-scroll.js das Mausrad in horizontales Scrollen. */
@media (hover:hover) and (pointer:fine){
.vf-snackstrip{scrollbar-width:thin;scrollbar-color:var(--cream-2) transparent}
.vf-snackstrip::-webkit-scrollbar{display:block;height:6px}
.vf-snackstrip::-webkit-scrollbar-thumb{background:var(--cream-2);border-radius:3px}
.vf-snackstrip::-webkit-scrollbar-track{background:transparent}
}
/* Reihen-Übersicht im Menüs-Tab (Spec §1): jede Reihe ist ein Streifen mit
ganzen Grid-Karten. Sie trägt zusätzlich .vf-snackstrip und erbt daher
Scroll-Verhalten und PC-Mausrad — hier NACH den Snackstrip-Regeln, damit
der grössere Abstand gewinnt (Grid-Karten brauchen mehr Luft als Snacks). */
.vf-reihe{gap:20px;padding-bottom:4px}
.vf-reihe .vf-gcard{flex:0 0 160px;flex-basis:240px}
/* «Alle X anzeigen» steht am Ende jeder Reihe: schmaler als eine Karte und
gestrichelt wie die Pill — das ist der Weg weiter ins Grid, kein Gericht. */
.vf-reihe .vf-gcard--ende{flex:0 0 130px;flex-basis:160px}
.vf-gcard--ende{
display:grid;place-items:center;text-align:center;padding:12px;
background:transparent;border-style:dashed;border-color:var(--hairline-strong);
color:var(--green-ink);font-weight:600;font-size:13px;line-height:1.35;
}
/* Der Reihen-Titel ist ein Knopf ins Grid und bleibt trotzdem eine Überschrift. */
.vf-reihe__titel{text-align:left}
/* R62 Desktop-Reihen: Rahmen für die Pfeile; Pfeile gibt es nur ab 900 px. */
.vf-reihe__rahmen{position:relative;min-width:0}
.vf-reihe__pfeil{display:none}
@media (min-width:900px){
.vf-reihe__pfeil{display:grid;place-items:center;position:absolute;top:calc(50% - 22px);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--hairline-strong);background:var(--white);color:var(--green-ink);font-size:28px;line-height:1;box-shadow:var(--shadow-soft);cursor:pointer}
.vf-reihe__pfeil--zurueck{left:-22px}
.vf-reihe__pfeil--weiter{right:-22px}
.vf-reihe__pfeil[hidden]{display:none}
/* Peek: die letzte sichtbare Karte ist halb angeschnitten — Kartenbreite folgt der Reihenbreite (3,5 bzw. 4,5 Karten). */
.vf-reihe .vf-gcard{flex-basis:calc((100% - 3 * 20px) / 3.5)}
.vf-reihe .vf-gcard--ende{flex-basis:160px}
/* Scrollbar mit Kontrast statt creme auf creme. */
.vf-reihe{scrollbar-width:thin;scrollbar-color:var(--bone-soft) var(--cream-2)}
.vf-reihe::-webkit-scrollbar{display:block;height:8px}
.vf-reihe::-webkit-scrollbar-thumb{background:var(--bone-soft);border-radius:4px}
.vf-reihe::-webkit-scrollbar-track{background:var(--cream-2);border-radius:4px}
}
@media (min-width:1100px){
.vf-reihe .vf-gcard{flex-basis:calc((100% - 4 * 20px) / 4.5)}
}
/* Der Weg zurück in die Übersicht steht über der Suche im Grid. */
.vf-zurueck{display:block;margin-bottom:var(--sp-2)}
.vf-snack{position:relative;flex:0 0 104px;scroll-snap-align:start;display:flex;flex-direction:column;
gap:4px;text-align:left;padding:6px;border:1px solid var(--hairline);border-radius:12px;
background:var(--white);transition:background var(--dur-fast) var(--ease)}
.vf-snack:active{background:var(--cream-2)}
.vf-snack img{width:100%;height:72px;border-radius:8px;object-fit:cover;background:var(--cream-2)}
.vf-snack__plus{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
background:var(--green-ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;line-height:1}
.vf-snack__menge{position:absolute;top:10px;left:10px;background:var(--ink);color:#fff;
border-radius:999px;padding:1px 7px;font-size:11px;font-weight:700}
.vf-snack__name{font-weight:600;font-size:12px;color:var(--ink);line-height:1.25;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.vf-snack__preis{font-size:12px;color:var(--ink-soft)}
.vf-lsnacks{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.vf-lsnack{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
padding:6px 10px;border:1px solid var(--hairline);border-radius:12px;background:var(--white);
transition:background var(--dur-fast) var(--ease)}
.vf-lsnack:active{background:var(--cream-2)}
.vf-lsnack img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:var(--cream-2)}
.vf-lsnack__name{flex:1;font-weight:600;font-size:14px;color:var(--ink)}
.vf-lsnack__preis{font-weight:600;font-size:14px;color:var(--green-ink);white-space:nowrap}
.vf-reset{padding:10px 4px;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.vf-dots{display:flex;gap:6px}
.vf-dots i{width:28px;height:4px;border-radius:2px;background:rgba(28,34,39,.15)}
.vf-dots i.is-on{background:var(--green-ink)}
/* ---------- 17b Abo-Tab (.vf-abo__*, .vf-switch) ---------- */
/* Pausieren und Weiter stehen gleich breit nebeneinander — nichts versteckt. */
.vf-abo__acts{display:flex;gap:10px;margin-top:16px}
.vf-abo__acts>.vf-btn{flex:1 1 0;padding:0 12px}
/* Ruhige Faktenzeile in einer Karte (Liefertage, «änderbar bis»). */
.vf-abo__note{margin:10px 0 0;color:var(--ink-soft);font-size:14px;line-height:1.5}
.vf-abo__note b{color:var(--ink);font-weight:600}
/* Liste «Ausgeschlossene Gerichte» (10.09.2026): eine Zeile pro Familie,
Knopf rechts; ist die Varianten-Zahl. */
.vf-ausgeschlossen{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.vf-ausgeschlossen__zeile{padding:6px 0;border-top:1px solid var(--hairline)}
.vf-ausgeschlossen__zeile small{display:block;color:var(--ink-soft);font-size:12px}
.vf-abo__kuend{margin:16px 0 0;font-size:13px}
/* Karte «Dein Abo» ohne eigene Aussage (gekündigt, unklar, Seal nicht
erreichbar, Batch 3c T3): eine Zeile mit dem Weg ins Kundenkonto statt
einer grossen Karte, deren einziger Inhalt dieser Link wäre. */
.vf-abo-block__zeile{margin:0}
/* Der Anker nimmt den Lesefokus, soll aber keinen Klickrahmen zeigen. */
[data-abo-block]:focus{outline:none}
[data-abo-block]:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--radius-md)}
/* Trennlinie zwischen zwei Karten-Zeilen, wenn ein Text dazwischen steht. */
.vf-abo__sep{border-top:1px solid var(--hairline);margin-top:12px;padding-top:6px}
.vf-abo__datum{font-size:19px}
/* Präferenzen: die Felder atmen, sonst wirkt die Karte wie ein Formular. */
.vf-abo__prefs>.vf-field + .vf-field,
.vf-abo__prefs>.vf-field + details,
.vf-abo__prefs>details{margin-top:var(--sp-4)}
.vf-abo__mehr{border-top:1px solid var(--hairline);padding-top:14px}
.vf-abo__mehr summary{color:var(--green-ink)}
.vf-abo__mehr[open] summary{margin-bottom:6px}
.vf-abo__mehr>.vf-switch,
.vf-abo__mehr>.vf-field{margin-top:16px}
/* Kompakter Schalter innerhalb von «Verfeinern». */
.vf-switch--klein .vf-switch__track{width:42px;height:25px}
.vf-switch--klein .vf-switch__track i{width:17px;height:17px}
.vf-switch--klein input:checked + .vf-switch__track i{transform:translateX(17px)}
/* Auto-Mix-Schalter: echter Checkbox-Input, Optik aus Track + Knopf. */
.vf-switch{display:flex;align-items:flex-start;gap:14px;cursor:pointer}
.vf-switch input{position:absolute;width:1px;height:1px;opacity:0}
.vf-switch__track{
position:relative;flex:none;margin-top:2px;
width:48px;height:28px;border-radius:999px;
background:var(--cream-2);border:1px solid var(--hairline);
transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.vf-switch__track i{
position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
background:var(--white);box-shadow:var(--shadow-soft);
transition:transform var(--dur) var(--ease);
}
.vf-switch input:checked + .vf-switch__track{background:var(--green-ink);border-color:var(--green-ink)}
.vf-switch input:checked + .vf-switch__track i{transform:translateX(20px)}
.vf-switch input:focus-visible + .vf-switch__track{outline:2px solid var(--green-ink);outline-offset:2px}
.vf-switch__txt b{display:block;font-weight:600;margin-bottom:2px}
/* ---------- 18 Sheets ---------- */
/* Genau EIN Layer. Backdrop blendet ein, Panel fährt hoch (240 ms). */
.vf-sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(15,21,25,.48);padding:32px}
.vf-sheet.is-entering{animation:vf-fade-in var(--dur-fast) var(--ease) both}
.vf-sheet.is-entering .vf-sheet__panel{animation:vf-sheet-in .24s var(--ease) both}
@keyframes vf-fade-in{from{opacity:0}to{opacity:1}}
@keyframes vf-sheet-in{from{transform:translateY(22px)}to{transform:none}}
.vf-sheet__panel{position:relative;width:100%;max-width:760px;max-height:calc(100dvh - 64px);overflow:auto;background:var(--cream);border-radius:var(--radius-md);padding:28px 32px 32px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* Grabber — sichtbares Zeichen «nach unten wegwischbar». */
.vf-sheet__grab{display:none;width:40px;height:4px;border-radius:999px;background:rgba(28,34,39,.20);margin:0 auto 14px}
.vf-sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:var(--sp-3)}
.vf-sheet__titel{font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1.15;letter-spacing:-.01em}
/* Sichtbares Schliessen zusätzlich zum Backdrop-Tap. */
.vf-sheet__x{
flex:none;width:34px;height:34px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--hairline);background:var(--white);color:var(--ink-soft);
transition:transform var(--dur) var(--ease),color var(--dur-fast) var(--ease);
}
.vf-sheet__x svg{width:13px;height:13px}
.vf-sheet__x:active{transform:scale(.92)}
/* Präferenzen-Sheet: dieselbe Sektion wie im Abo-Tab — den Seitenrand und den
Kopfabstand trägt hier aber das Panel. */
.vf-sheet__panel>.vf-sec{padding:0}
/* Aktionsleiste am Sheet-Ende. */
.vf-sheet__foot{display:flex;gap:10px;align-items:center;margin-top:var(--sp-4)}
.vf-sheet__foot .vf-btn--block{flex:1}
/* Grosses Foto im Detail-Sheet (width=640-Variante). position:relative für
die Namensfläche; .vf-detail>.vf-sheet__ph (Desktop) bleibt sticky. */
.vf-sheet__ph{
position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
background:var(--cream-2);margin-bottom:var(--sp-3);
}
.vf-sheet__ph img{width:100%;height:100%;object-fit:cover}
/* Bild-Fallback (Pasci 15.09.2026, N37): liefert die CDN-URL nichts mehr
(ersetztes Shop-Bild), zeigt die Fläche den Gerichtsnamen statt Leere.
karte.js setzt is-bild-fehlt auf [data-bild]; die Namensfläche steht
direkt vor dem ![]()
(bildMitFallback). .vf-gcard__ph und .vf-wcard__ph
sind schon position:relative. */
.vf-bild__leer{display:none;position:absolute;inset:0;align-items:center;justify-content:center;padding:var(--sp-3);text-align:center;font-weight:600;line-height:1.25;color:var(--ink-soft);background:var(--cream-2)}
.vf-wcard__ph .vf-bild__leer{font-size:12px;padding:var(--sp-2)}
.is-bild-fehlt .vf-bild__leer{display:flex}
.is-bild-fehlt .vf-bild__leer+img{display:none}
/* Varianten-Block (Spec §2): Reis/Beilage/Protein wechseln, steht über der
Grösse. .vf-opt--var nutzt die bestehende .vf-opt-Optik, nur kompakter. */
.vf-detail__varianten{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--sp-3)}
.vf-detail__varianten>.vf-label{margin-bottom:-2px}
/* Höhere Spezifität als das spätere .vf-opt{padding:14px} (§22 Onboarding) — sonst gewinnt Quellreihenfolge bei gleicher Spezifität. */
.vf-detail__varianten .vf-opt--var{padding:10px 12px}
.vf-opt--var span{color:var(--ink-soft);font-size:13px;margin-left:auto}
/* Einmal-Hint über dem Varianten-Block. */
.vf-detail__hint{margin:0 0 var(--sp-2)}
/* Grössen-Schalter: gleich breite Spalten, damit K/M/G auf 360 px nebeneinander bleiben. */
.vf-detail__sizes{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.vf-detail__sizes .vf-chip{justify-content:center;gap:5px;padding:0 8px;font-size:13.5px;white-space:nowrap}
/* Detail-Sheet: Preis der gewählten Grösse gross (Fraunces), darunter Makros. */
.vf-detail__preis{font-size:26px;margin:var(--sp-3) 0 4px}
.vf-detail__preis .vf-muted{font-family:var(--font-body);font-size:14px}
.vf-detail__makro{margin:0 0 var(--sp-2);white-space:normal}
/* Zutaten und Merkmale als ruhige Fliesszeilen, nicht als Slug-Salat. */
.vf-detail__z{margin:0 0 4px;line-height:1.55}
.vf-detail__z b{color:var(--ink);font-weight:600;margin-right:4px}
.vf-detail__tags{margin:0}
/* Fixieren im Detail-Sheet: eine Zeile, kein Werkzeug auf jeder Wochen-Karte. */
.vf-detail__pin{
display:flex;align-items:center;gap:12px;width:100%;
margin-top:var(--sp-3);padding:12px 14px;text-align:left;
background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);
color:var(--ink);
transition:transform var(--dur) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.vf-detail__pin:active{transform:scale(.98)}
.vf-detail__pinikon{
flex:none;display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;
background:var(--cream-2);color:var(--green-ink);
}
.vf-detail__pinikon svg{width:17px;height:17px}
.vf-detail__pintxt{display:flex;flex-direction:column;gap:1px;min-width:0}
.vf-detail__pintxt b{font-weight:600;font-size:15px}
.vf-detail__pin.is-on{border-color:var(--green-ink);background:rgba(47,77,19,.06)}
.vf-detail__pin.is-on .vf-detail__pinikon{background:var(--green-ink);color:var(--cream)}
.vf-detail__pin.is-on .vf-detail__pinikon svg{fill:currentColor}
/* Liefertag-Sheet: der Ausweg, wenn die PLZ (noch) kein Liefergebiet ist. */
.vf-lt__trotzdem{margin:12px 0 0;line-height:1.55}
/* ---------- 18b Bestätigen-Sheet (.vf-csum) ---------- */
/* Zusammenfassung: Zahl, Summen und die ruhige Änderbar-bis-Zeile.
Bewusst schmucklos – hier wird entschieden, nicht gestöbert. */
.vf-confirm__zahl{margin:0 0 12px}
.vf-csum{margin-top:var(--sp-3);padding-top:2px}
.vf-crow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;font-size:14.5px}
.vf-crow--spar{color:var(--green-ink);font-weight:600}
.vf-crow--total{border-top:1px solid var(--hairline);margin-top:4px;padding-top:10px;font-weight:600}
.vf-crow--total .vf-display{font-size:22px}
.vf-crow--liefer{margin-top:var(--sp-3);padding-top:12px;border-top:1px solid var(--hairline);color:var(--ink-soft)}
.vf-crow--liefer b{color:var(--ink);font-weight:600}
.vf-confirm__bis{margin:2px 0 0}
.vf-confirm__bis b{color:var(--ink);font-weight:600}
.vf-confirm__demo{margin:8px 0 0}
/* Bereits bestätigt: stille Zeile statt zweitem Knopf – nichts zu «erneuern». */
.vf-confirm__ok{
display:flex;align-items:center;gap:9px;
margin:var(--sp-4) 0 0;padding:12px 14px;
border-radius:var(--radius);
background:rgba(47,77,19,.08);
color:var(--green-ink);font-size:14px;font-weight:600;
}
.vf-confirm__okicon{width:17px;height:17px;flex:none;stroke-width:1.9}
/* ---------- 19 Toast ---------- */
.vf-toast{position:fixed;left:50%;z-index:50;bottom:calc(var(--tabs-h) + var(--safe-b) + 66px);max-width:560px;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--cream);font-size:14px;text-align:center;box-shadow:var(--shadow-pill);opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.vf-toast:empty{display:none}
/* Der Toast hängt an , der CTA-Block im App-Root — über :has am body
weicht er dem hohen Einmal-Block aus, statt darin zu liegen (Plan 048). */
body:has(.vf-sticky-cta--zwei) .vf-toast{bottom:calc(var(--tabs-h) + var(--safe-b) + 184px)}
.vf-toast.is-on{opacity:1;transform:translate(-50%,0)}
/* ---------- 20 Skeleton ---------- */
.vf-skel{
background:linear-gradient(90deg,var(--cream-2) 25%,color-mix(in srgb,var(--cream-2) 55%,var(--white)) 50%,var(--cream-2) 75%);
background-size:220% 100%;
animation:vf-shimmer 1.4s linear infinite;
border-radius:10px;
}
@keyframes vf-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.vf-skel--titel{height:22px;width:52%;margin-bottom:14px;border-radius:6px}
/* Home-Skeleton: Held-Zeile plus die vier Kachelflächen. */
.vf-skel--held{height:34px;width:64%;margin:6px 0 26px;border-radius:8px}
.vf-skel--kachel{height:120px;border-radius:var(--radius)}
.vf-skel--kachel-gross{grid-column:1 / -1;height:212px}
.vf-skel--kachel-breit{grid-column:1 / -1;height:80px}
.vf-skel--zeile{height:13px;border-radius:6px}
.vf-skel--kurz{width:55%}
.vf-skel-lines{flex:1;display:flex;flex-direction:column;gap:8px}
.vf-skel-hint{padding:4px var(--pad-x) 0;text-align:center}
/* Skeleton in der Form der Grid-Karte. */
.vf-skel-gcard{border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.vf-skel-gcard .vf-skel--ph{aspect-ratio:4/3;border-radius:0}
.vf-skel-gcard__body{padding:12px 13px 13px;display:flex;flex-direction:column;gap:8px}
/* Skeleton in der Form der Wochen-Karte. */
.vf-skel-wcard{display:flex;gap:12px;padding:10px;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--white);margin-bottom:8px}
.vf-skel-wcard .vf-skel--ph{width:88px;height:88px;flex:none;border-radius:var(--radius-sm)}
/* ---------- 21 Press-Feedback & View-Transitions ---------- */
.vf-view{display:block;padding-top:16px}
/* WICHTIG: auf .vf-view NIE transform animieren — eine Transform-Animation
bildet einen Containing Block und reisst die fixierten Kinder
(Sticky-CTA, Zähler-Pill) mit. Darum nur Opacity. */
.vf-view.is-entering{animation:vf-view-in .2s var(--ease)}
@keyframes vf-view-in{from{opacity:0}to{opacity:1}}
/* ---------- 22 Onboarding (.vf-ob, .vf-opt) ---------- */
/* Drei überspringbare Schritte in LP-Optik: Frage als Fraunces-Titel,
Antworten als Options-Karten mit Icon-Badge. Keine Tab-Bar, keine fixierte
CTA — die Knöpfe stehen im Fluss, damit nie etwas verdeckt wird. */
.vf-app--ob{padding-bottom:var(--sp-6);max-width:1160px}
.vf-ob{padding:var(--sp-5) var(--pad-x) var(--sp-6);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px 64px;padding-top:56px}
.vf-ob__kopf{display:flex;align-items:center;gap:12px;margin-bottom:var(--sp-5);grid-column:1/-1;margin:0}
.vf-ob h2{font-size:30px;line-height:1.08;margin-bottom:10px}
.vf-ob__sub{margin:0 0 var(--sp-5);max-width:36ch;color:var(--ink-soft);font-size:15px;line-height:1.5}
.vf-ob__feld{margin-top:var(--sp-5)}
.vf-ob__feld>.vf-label{display:block;margin-bottom:8px}
.vf-ob__feld>.vf-mini{display:block;margin:-4px 0 10px}
/* Das Zutaten-Feld steht als eigener Block unter den Allergie-Chips — es hat
seinen eigenen Hinweis und gehört nicht unter «Antippen zum Ausschliessen». */
.vf-ob>.vf-field{margin-top:var(--sp-5)}
/* Menge: die Zahl ist der Held des Schritts — jetzt im Stepper, nicht mehr in . */
.vf-ob__zahl{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
/* «x Gerichte passen zu Deinen Angaben» — ruhiger Beleg, kein Alarm. */
.vf-ob__zaehler{
margin:var(--sp-5) 0 0;padding:13px 16px;
border-radius:var(--radius);background:var(--cream-2);
color:var(--ink-soft);font-size:13.5px;
}
.vf-ob__zaehler b{
font-family:var(--font-display);font-weight:500;font-size:17px;
color:var(--green-ink);margin-right:4px;
}
/* Stille Makro-Grenzen aus dem Menüs-Tab: am Zähler benennen, ein Tipp hebt sie auf. */
.vf-ob__makros{display:block;margin-top:6px;font-size:12.5px;line-height:1.5}
.vf-ob__makros .vf-link{font-size:inherit}
.vf-ob__acts{display:flex;gap:10px;margin-top:0;grid-column:2}
.vf-ob__weiter{flex:1}
/* Stiller Link in der Topbar — bewusst leiser als der Demo-Knopf. */
.vf-ob__skip{font-size:14px;font-weight:500}
.vf-opts{display:grid;gap:10px}
.vf-opts--eng{grid-template-columns:1fr 1fr}
.vf-opt{
display:flex;align-items:center;gap:12px;
padding:14px;text-align:left;
background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);
transition:transform var(--dur) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.vf-opt:active{transform:scale(.98)}
.vf-opt__ikon{
flex:none;display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:12px;
background:var(--cream-2);color:var(--green-ink);
transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.vf-opt__ikon svg{width:20px;height:20px}
.vf-opt__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.vf-opt__txt b{font-weight:600;font-size:15.5px;line-height:1.25}
.vf-opt__txt span{color:var(--ink-soft);font-size:13.5px;font-weight:400;line-height:1.35}
.vf-opt__haken{
margin-left:auto;flex:none;
display:inline-flex;align-items:center;justify-content:center;
width:20px;height:20px;color:var(--green-ink);
opacity:0;transform:scale(.8);
transition:opacity var(--dur-fast) var(--ease),transform var(--dur) var(--ease);
}
.vf-opt__haken svg{width:20px;height:20px}
.vf-opt.is-on{border-color:var(--green-ink);box-shadow:inset 0 0 0 1px var(--green-ink),var(--shadow-soft)}
.vf-opt.is-on .vf-opt__ikon{background:var(--green-ink);color:var(--cream)}
.vf-opt.is-on .vf-opt__haken{opacity:1;transform:none}
/* Zweispaltig: kurze Labels, kein Platz für den Haken — der Rahmen zeigt es. */
.vf-opts--eng .vf-opt{padding:12px;gap:10px}
.vf-opts--eng .vf-opt__ikon{width:32px;height:32px;border-radius:10px}
.vf-opts--eng .vf-opt__ikon svg{width:18px;height:18px}
.vf-opts--eng .vf-opt__txt b{font-size:14.5px}
.vf-opts--eng .vf-opt__haken{display:none}
/* ---------- 23 Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
.vf-view.is-entering,
.vf-sheet.is-entering,
.vf-sheet.is-entering .vf-sheet__panel,
.vf-skel{animation:none}
.vf-toast{transition:none}
.vf-btn:active,.vf-chip:active,.vf-tab:active,.vf-wcard__tool:active,
.vf-tile:active,.vf-icon:active,.vf-opt:active,
.vf-gcard__fav:active,.vf-gcard__cta:active,.vf-wcard__del:active,
.vf-sheet__x:active{transform:none}
}
/* ---------- Sehr schmale Geräte (360 px und darunter) ---------- */
@media (max-width:360px){
:root{--pad-x:14px}
.vf-grid,.vf-tiles{gap:10px}
.vf-hero__datum{font-size:30px}
.vf-tile{min-height:112px}
.vf-tile--hoch{min-height:168px}
.vf-tile--zeile{min-height:76px}
}
/* Menüs gezielt ändern: kompakte Vorschau, ein eindeutiger Abschluss. */
.vf-edit h3{font:inherit;font-weight:650;margin:16px 0 9px}
.vf-edit__quelle{margin:0 0 16px;color:var(--muted,#65706b)}
.vf-edit__gericht{display:flex;gap:14px;align-items:center;margin:18px 0}
.vf-edit__gericht img{width:80px;height:80px;object-fit:cover;border-radius:14px;flex-shrink:0}
.vf-edit__gericht h3{margin:0 0 6px}
.vf-edit__filter{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.vf-edit__filter .vf-chip{min-height:44px}
.vf-edit__filter.vf-chips--scroll{flex-wrap:nowrap;margin:10px 0 14px;padding:2px 0 4px;scroll-padding-left:0}
.vf-edit__varianten{display:grid;gap:7px}
.vf-edit__var{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:12px 14px;text-align:left;min-height:48px}
.vf-edit__hinweis{display:block;font-size:12px;line-height:1.4;color:#8b4826;font-weight:450}
/* Hinweis-Block unter dem Varianten-Select (R32): eng am Select, nicht die 16 px des Browsers. */
.vf-edit__hinweise{display:grid;gap:4px;margin:6px 0 0}
.vf-edit__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.vf-edit__karte{padding:0;overflow:hidden;text-align:left;border:1px solid #dce0da;border-radius:16px;background:#fff;color:inherit;cursor:pointer;font:inherit}
.vf-edit__karte img{display:block;width:100%;height:130px;object-fit:cover}
.vf-edit__karte>span{display:grid;gap:7px;padding:12px}
.vf-edit__karte b{font-size:14px;line-height:1.35}
/* T2 (11.09.): Makro-Zeile im Tausch-Grid ist immer einzeilig (kein Grössen-Label), die 2-Zeilen-Reserve des Menüs-Grids braucht es hier nicht. */
.vf-edit__karte .vf-gcard__makro{min-height:0}
.vf-edit__karte small{font-size:12px}
.vf-edit__abschluss{position:sticky;bottom:-24px;background:#f4f0e4;padding:14px 0 8px;margin-top:20px;border-top:1px solid #dce0da;z-index:2}
.vf-edit__preise{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;margin-bottom:12px}
.vf-edit__preise b{display:block;font-size:18px;margin-top:3px}
.vf-edit__abbrechen{display:block;margin:10px auto 0;padding:8px 20px;background:none;border:0;font:inherit;cursor:pointer;color:inherit}
.vf-edit__zutaten{margin-top:14px;font-size:14px}
.vf-edit__undo{display:flex;justify-content:space-between;gap:16px;padding:14px 20px;background:#e8efda;border-radius:12px;margin:12px 0;font-size:14px}
.vf-edit__undo button{border:0;background:none;text-decoration:underline;font:inherit;font-weight:650;cursor:pointer}
.vf-edit button:focus-visible{outline:3px solid #57742a;outline-offset:3px}
.vf-edit button:disabled{opacity:.45;cursor:default}
@media(max-width:430px){.vf-wcard__tools{gap:5px}.vf-wcard__tool{padding-left:10px;padding-right:10px}.vf-edit__abschluss{bottom:-16px}.vf-edit__filter .vf-chip{font-size:13px;padding:9px 12px}}
.vf-edit__undo{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 32px));box-sizing:border-box;z-index:15;box-shadow:0 5px 20px #20322820}
.vf-edit input[type=search]{display:block;box-sizing:border-box;width:100%;min-height:46px;padding:12px 14px;border:1px solid #d7dbd4;border-radius:12px;background:#fff;color:inherit;font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
/* Ausschlüsse bleiben auch im ungefilterten Katalog am Foto erkennbar. */
.vf-gcard__warn{position:absolute;right:6px;bottom:6px;width:44px;height:44px;display:grid;place-items:center;border:5px solid transparent;border-radius:50%;background:#fff4d6;background-clip:padding-box;color:#805000;cursor:pointer}
.vf-gcard__warn svg{width:19px;height:19px;stroke-width:2}
.vf-gcard__warn:focus-visible{outline:2px solid #805000;outline-offset:1px}
.vf-detail__warning{margin:0 0 var(--sp-2);padding:12px 14px;border-radius:12px;background:#fff4d6;color:#805000;font-size:14px}
.vf-detail__warning b{display:flex;align-items:center;gap:8px}
.vf-detail__warning svg{width:20px;height:20px;flex-shrink:0}
.vf-detail__warning ul{margin:8px 0 0;padding-left:28px}
/* Varianten sind lesbar, anklickbar und gehören zur erlaubten Auswahl. */
.vf-gcard__varianten{padding:0;text-align:left;font:inherit;font-size:12px;line-height:1.45;color:var(--green-ink);overflow-wrap:anywhere;cursor:pointer}
.vf-gcard__varianten:focus-visible{outline:2px solid var(--green-ink);outline-offset:3px}
.vf-gcard__beispiel{font-size:11.5px;line-height:1.4;color:var(--ink-soft);overflow-wrap:anywhere}
.vf-gcard:has(.vf-gcard__varianten) .vf-gcard__name{display:block;overflow:visible;min-height:0}
.vf-gcard:has(.vf-gcard__varianten) .vf-gcard__cta{padding:7px 5px;line-height:1.25}
.vf-gcard:has(.vf-gcard__varianten) .vf-gcard__cta .vf-nowrap{white-space:normal}
/* Konkrete Vorauswahl, separate Anpassung, direkter Abschluss. */
.vf-gcard__beispiel{font-size:12px;line-height:1.45;color:var(--ink)}
.vf-gcard__varianten{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:44px;font-size:12px;font-weight:600}
.vf-gcard__varianten svg{width:14px;height:14px;flex-shrink:0}
.vf-gcard__cta{min-height:44px}
.vf-gcard__name{overflow-wrap:anywhere}
.vf-varwahl{display:grid;gap:12px;margin:12px 0 20px}
.vf-varwahl__feld{display:grid;gap:6px;min-width:0;font-size:13px;font-weight:600;color:var(--ink)}
.vf-varwahl select{width:100%;min-width:0;min-height:44px;padding:10px 8px;border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);font-size:16px;font-weight:500;text-overflow:ellipsis;background:var(--white);color:var(--ink)}
.vf-detail__z summary{min-height:44px;padding:12px 0;cursor:pointer;font-size:14px;font-weight:600}
.vf-detail__z p{white-space:pre-line;line-height:1.6}
.vf-bestell__bedingungen{display:grid;gap:8px;margin:12px 0;font-size:14px}
.vf-bestell__bedingungen>div{display:flex;justify-content:space-between;gap:12px}
.vf-bestell__bedingungen dd{margin:0;font-weight:600;text-align:right}
.vf-bestell__bedingungen dt{color:var(--ink-soft)}
.vf-sheet__ph{max-height:min(240px,28dvh)}
.vf-detail__sizes{grid-auto-columns:minmax(0,1fr)}
.vf-detail__sizes .vf-chip{flex-direction:column;min-height:52px;gap:2px;padding:6px 3px;font-size:13px}
.vf-sheet__foot:has([data-act^="week:"]){position:sticky;bottom:0;padding:12px 0 calc(12px + var(--safe-b));background:var(--cream);z-index:1}
/* Rezeptur und Portionsdaten müssen auch neben dem Wochenfoto lesbar bleiben. */
.vf-wcard__name{display:block;overflow:visible;overflow-wrap:anywhere;font-size:17px}
.vf-wcard__makro{white-space:normal;line-height:1.4;font-size:12.5px}
/* Plan 051 – nur die explizite lokale Geschmacksvorschau trägt diese Klassen. */
.vf-taste-note{font-size:12px;line-height:1.5;color:var(--green-deep);background:#e7efd9;padding:8px 12px;border-radius:8px;margin:0 0 16px}
.vf-taste-banner{margin:0 0 16px}
.vf-taste-invite{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.vf-taste-invite>div:nth-child(2){flex:1;min-width:0}
.vf-taste-invite p{font-size:15px;font-weight:600;line-height:1.35;margin:0 0 4px}
.vf-taste-invite__photos{display:flex;flex:none}
.vf-taste-invite__photos img{object-fit:cover;border-radius:50%;border:2px solid var(--cream);margin-left:-13px}
.vf-taste-invite__photos img:first-child{margin-left:0}
.vf-taste-help{font-size:13px;color:var(--ink-soft)}
.vf-taste-help summary{cursor:pointer;min-height:44px;padding:12px 0}
.vf-taste-help p{line-height:1.6;margin:0 0 10px;max-width:60ch}
/* «Kurz erklärt» als Liste mit Symbolen (R19): Herz, Nadel, Bewertung. */
.vf-taste-help__liste{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.vf-taste-help__liste li{display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.vf-taste-help__ikon{width:16px;height:16px;flex:none;margin-top:2px;color:var(--green-ink)}
.vf-taste-help__ikon--leer{display:inline-block}
.vf-taste-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;width:100%;text-align:left;min-height:44px;padding:9px 0;font-size:12px;line-height:1.4;color:var(--green-deep)}
.vf-taste-status>span{color:var(--ink-soft)}
.vf-gcard .vf-taste-status{display:block;border-top:1px solid var(--hairline)}
.vf-gcard .vf-taste-status b,.vf-gcard .vf-taste-status>span{display:block}
.vf-taste-history{display:block;padding:18px 0;border-bottom:1px solid var(--hairline)}
.vf-taste-history>div,.vf-taste-dish>div{min-width:0;flex:1}
.vf-taste-history img,.vf-taste-dish img{flex:none;object-fit:cover;border-radius:10px}
.vf-taste-history h3,.vf-taste-dish h3{font-family:var(--font-body);font-size:16px;line-height:1.4;margin:0;overflow-wrap:anywhere}
.vf-taste-history p{margin:5px 0}
.vf-taste-history .vf-link{min-height:44px;display:inline-flex;align-items:center}
.vf-taste-dish{display:flex;align-items:center;gap:14px;margin:18px 0}
.vf-taste-question{font-weight:600;font-size:17px;margin:20px 0 12px}
.vf-taste-options{display:grid;gap:8px}
.vf-taste-option{display:block;min-height:48px;text-align:left;padding:12px 16px;border:1px solid var(--hairline-strong);border-radius:10px;background:var(--white);font-size:15px}
.vf-taste-option.is-on{border-color:var(--green-deep);color:var(--green-deep);background:#e7efd9}
.vf-taste-option:hover{border-color:var(--green-deep)}
.vf-taste-secondary{min-height:44px;display:block;margin:8px 0}
.vf-taste-footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--hairline);margin-top:16px;padding-top:8px}
.vf-taste-footer button{min-height:44px}
@media(max-width:400px){.vf-taste-invite{flex-wrap:wrap;gap:10px}.vf-taste-invite>div:nth-child(2){flex-basis:calc(100% - 85px)}.vf-taste-invite>.vf-btn{margin-left:0;min-height:44px}.vf-taste-history{gap:10px}.vf-taste-history img{width:52px;height:52px}}
@media(max-width:400px){
.vf-taste-invite{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 12px;padding:12px 0}
.vf-taste-invite__photos{grid-column:1;grid-row:1;align-self:start;padding-top:4px}
.vf-taste-invite__photos img{width:30px;height:30px}
.vf-taste-invite>div:nth-child(2){grid-column:2;grid-row:1}
.vf-taste-invite>.vf-btn{grid-column:2;justify-self:start;padding:6px 0;border:0;min-height:36px}
}
/* Kompakte Bestandskarten: Werkzeuge und Menge bleiben zwischen 360 und
430 px in einer Zeile (R44); die Nowrap-Regel ist auf diesen Bereich
beschränkt, darum erlaubt der 359-px-Block darunter weiterhin den
Umbruch — auch mit Banner. Nur im lokalen Entwurf. */
@media(min-width:360px) and (max-width:430px){
.vf-app:has(.vf-taste-banner) .vf-wcard__actions{flex-wrap:nowrap}
}
@media(max-width:430px){
.vf-app:has(.vf-taste-banner) .vf-wcard__tools{flex-shrink:0}
.vf-app:has(.vf-taste-banner) .vf-wcard__tool--ikon{padding:0}
.vf-app:has(.vf-taste-banner) .vf-wcard__actions>.vf-stepper{margin-left:auto}
}
.vf-taste-history__head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.vf-taste-history__head>div{min-width:0}
.vf-taste-history__options{display:flex;flex-wrap:wrap;gap:8px}
.vf-taste-history__options .vf-taste-option{flex:1 1 auto;min-height:44px;padding:10px 12px;font-size:13px;text-align:center}
.vf-taste-history__links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px;font-size:13px}
.vf-taste-components{margin:14px 0 4px;padding:0}
.vf-taste-components__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:6px;font-size:13px;font-weight:600}
.vf-taste-components__title small{font-size:11px;font-weight:400;color:var(--ink-soft)}
.vf-taste-components__chips{display:flex;flex-wrap:wrap;gap:4px 8px}
.vf-taste-component{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 13px;border:1px solid var(--hairline-strong);border-radius:999px;font-size:13px;color:var(--ink-soft);background:transparent}
/* Angebot «Künftig ohne …?» unter den Grund-Chips (R53/R54). */
.vf-taste-ohne{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:10px 0 0;font-size:13px;line-height:1.5}
.vf-taste-ohne>span{flex:1 1 220px;min-width:0}
.vf-taste-ohne.is-on{color:var(--green-deep)}
.vf-taste-ohne .vf-btn--sm{min-height:36px}
.vf-taste-component>span{width:12px;text-align:center;font-size:15px}
.vf-taste-component.is-on{background:#e7efd9;border-color:var(--green-deep);color:var(--green-deep)}
.vf-taste-component:hover{border-color:var(--green-deep)}
.vf-taste-history__links{margin-top:4px}
.vf-taste-explanation{margin:12px 0}
.vf-taste-explanation p{line-height:1.5}
/* Die Zusatzfrage folgt sichtbar dem rechten Bewertungsfeld. */
.vf-taste-history__options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.vf-taste-history__options .vf-taste-option{padding-inline:6px}
.vf-taste-history>.vf-taste-components{position:relative;display:flex;flex-direction:column;align-items:flex-end;margin-top:0;padding-top:14px}
.vf-taste-history>.vf-taste-components::before{content:"";position:absolute;top:0;right:calc((100% - 16px)/6);height:9px;border-left:1px solid var(--green-ink)}
.vf-taste-history .vf-taste-components__title{justify-content:flex-end;text-align:right}
.vf-taste-history .vf-taste-components__chips{justify-content:flex-end}
.vf-taste-history .vf-taste-components__title{flex-direction:column;align-items:flex-end;gap:2px}
@media(max-width:400px){.vf-taste-history__options .vf-taste-option{font-size:12px}}
.vf-taste-component small{font-size:11px;white-space:nowrap}
.vf-taste-component{max-width:100%;flex-wrap:wrap;justify-content:center}
/* Account taste: badge below the heart, within the photo, no extra week row. */
.vf-taste-match{position:absolute;right:8px;top:52px;max-width:calc(100% - 16px);padding:5px 9px;border:0;border-radius:6px;background:#f2f6e7;color:#263b1d;font-family:inherit;font-weight:600;font-size:11px;line-height:1.3;cursor:pointer;box-shadow:0 1px 4px #0002}
.vf-taste-reason{padding:12px 16px;background:#f2f6e7;color:#263b1d;border-radius:8px;font-size:14px;line-height:1.5}
.vf-taste-match:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.vf-taste-help label{display:flex;align-items:flex-start;gap:8px;padding:10px 0;line-height:1.5}
.vf-taste-help input{flex:none;margin-top:4px}
/* Sichtbarer Hinweis auf weitere Kategorien; der Pfeil scrollt die Reihe. */
.vf-edit__kategorien{position:relative}
.vf-edit__kategorien .vf-chips--scroll{padding-right:48px}
.vf-edit__weiter{position:absolute;right:0;top:2px;width:44px;height:44px;border:1px solid #dce0da;border-radius:50%;background:#fff;color:var(--green,#47651f);font-size:28px;line-height:1;cursor:pointer;box-shadow:-12px 0 16px 4px var(--bg,#f3efe4)}
.vf-edit__weiter[hidden]{display:none}
.vf-kaufart{border:0;padding:0;margin:20px 0 0;display:grid;gap:10px}
.vf-kaufart legend{font-weight:650;margin-bottom:10px}
.vf-kaufart__option{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border,#dce0da);border-radius:14px;cursor:pointer}
.vf-kaufart__option:has(input:checked){border-color:var(--green,#47651f);background:#f2f5eb}
.vf-kaufart__option input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--green,#47651f)}
.vf-kaufart__option small{display:block;margin-top:4px;color:var(--muted,#65706b);font-size:13px}
/* Abschluss: Erklärung bleibt an der Kaufentscheidung, nicht über den Menüs. */
.vf-kaufart__option{align-items:flex-start;min-width:0}
.vf-kaufart__option input{margin-top:2px}
.vf-kaufart__option>span{min-width:0}
.vf-kaufart__erklaerung{display:block;margin-top:10px;line-height:1.5}
.vf-kaufart:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:8px}
.vf-wkopf>.vf-row{gap:10px;align-items:flex-start;flex-wrap:wrap}
/* M02: der Frist-Satz ist ein eigener Absatz und bekommt im Flex-Kopf die ganze Zeile. */
.vf-wkopf>p{flex-basis:100%;margin:0}
.vf-wkopf .vf-status,.vf-hero__meta .vf-status{white-space:normal;line-height:1.4}
.vf-sheet__foot{display:grid;gap:10px;padding-bottom:max(18px,var(--safe-b))}
.vf-confirm__ok{align-items:flex-start;line-height:1.5}
.vf-crow--liefer{align-items:flex-start;gap:14px}
.vf-crow--liefer>span{min-width:0}
.vf-crow--liefer>.vf-link{flex-shrink:0}
.vf-kaufabschluss{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--hairline)}
/* R38/R40: Rechnungskarte bei bestehendem Abo eingeklappt, Warnung zuerst. */
.vf-rechnung-zusatz summary{color:var(--green-ink);min-height:44px;padding:12px 0}
.vf-rechnung-zusatz[open] summary{margin-bottom:6px}
.vf-rechnung__warnung{margin:0 0 10px}
/* Separate invoice checkout uses the existing sheet typography and controls. */
.vf-rechnung__feld { display:block; margin:12px 0; }
.vf-rechnung__feld input:not([type="checkbox"]), .vf-rechnung__feld select { display:block; box-sizing:border-box; width:100%; min-height:44px; margin-top:6px; padding:10px; border:1px solid currentColor; border-radius:8px; color:inherit; background:transparent; font:inherit; }
#vf-rechnung-form fieldset { border:0; padding:0; margin:16px 0; min-width:0; }
.vf-session-status{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabs-h) + var(--safe-b) + 12px);z-index:60;width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:12px;padding:12px 18px;border:1px solid var(--hairline);border-radius:14px;background:var(--cream);box-shadow:var(--shadow-soft);font-size:14px}
.vf-session-status[hidden],.vf-session-status button[hidden]{display:none}
.vf-detail__content{min-width:0}
.vf-sheet__foot--detail{display:flex}
.vf-sheet__foot--detail .vf-icon{flex:none}
.vf-tile--foto,.vf-gcard__ph,.vf-wcard__ph,.vf-sheet__ph{isolation:isolate}
/* ---------- Desktop als Basis; Tablet und Handy reduzieren das Layout. ---------- */
.vf-topbar__act:empty{display:none}
.vf-tab:hover{background:var(--bone)}
.vf-view>*,.vf-view .vf-sec,.vf-week-layout>*,.vf-abo-preferences>*{min-width:0}
.vf-sec__head>*{min-width:0;overflow-wrap:anywhere}
.vf-view[data-view="menus"] .vf-chips--scroll{flex-wrap:wrap;overflow:visible}
.vf-view[data-view="home"]{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;padding:64px var(--pad-x)}
.vf-view[data-view="home"]>.vf-hero,.vf-view[data-view="home"]>.vf-sec{padding:0}
.vf-view[data-view="home"] .vf-hero__datum{font-size:clamp(36px,3.6vw,52px);text-wrap:balance}
.vf-view[data-view="home"] .vf-hero__fakt{font-size:16px;max-width:42ch}
.vf-view[data-view="home"] .vf-tile--hoch{min-height:300px}
.vf-view[data-view="home"] .vf-tile__titel{font-size:26px}
.vf-week-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:40px;padding:8px var(--pad-x) 40px;align-items:start}
.vf-week-layout--single{grid-template-columns:1fr}
.vf-week-layout .vf-sec{padding-left:0;padding-right:0}
.vf-week-order{position:sticky;top:108px}
.vf-week-order .vf-sec:last-of-type{padding-bottom:0}
.vf-week-order .vf-sticky-cta{position:static;transform:none;width:auto;padding:18px 0 0;background:none;border:0;align-items:stretch}
.vf-week-order .vf-sticky-cta::before{display:none}
.vf-week-extras{margin-top:16px;border-top:1px solid var(--hairline)}
/* R04: Reihen-Titel sind Überschriften (h3), nicht Mini-Text. */
.vf-week-extras__titel{font-size:18px;margin:14px 0 0}
/* Präferenzen-Tab (Batch 3c): einspaltig. Der frühere Zweispalter
`.vf-abo-layout` ist mit dem Umzug von Status und Lieferung auf Home weg.
Rand und Lesebreite bleiben wie in der damaligen rechten Spalte (1.2fr von
1280 px ≈ 740 px Inhalt): der Block trägt den Seitenrand, die Sektionen
darin nicht — genau die Aufteilung, die `.vf-abo-layout` hatte. */
.vf-abo-preferences{max-width:820px;padding:0 var(--pad-x)}
.vf-abo-preferences .vf-sec{padding-left:0;padding-right:0}
/* 3c T1: ohne eigene h2 (die Kopfzeile heisst schon «Präferenzen») steht der Zähler «n Gerichte passen» rechts wie zuvor. */
.vf-abo-preferences .vf-sec__head:not(:has(h2)){justify-content:flex-end}
.vf-abo-preferences .vf-card{padding:28px}
.vf-sheet__panel .vf-grid,.vf-sheet__panel .vf-edit__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vf-sheet__panel:has(>.vf-detail){max-width:1080px}
.vf-detail{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;align-items:start}
.vf-detail>.vf-sheet__ph{width:100%;max-height:none;margin:0;position:sticky;top:0}
#vf-rechnung-form fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.vf-taste-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.vf-edit__undo{bottom:24px}
.vf-ob__intro{grid-column:1;grid-row:2}
.vf-ob__intro h2{font-size:44px;text-wrap:balance}
.vf-ob__intro .vf-ob__sub{margin-top:20px;font-size:17px}
.vf-ob__choices{grid-column:2;min-width:0}
.vf-ob__choices>.vf-ob__feld:first-child{margin-top:0}
.vf-verbinden{display:block;max-width:760px;margin:auto}
/* Desktop-Home (≥ 900 px): Held links oben, die drei Wege als Zeilen darunter,
die Woche rechts. Der Geschmack-Banner (direktes Kind der View) nimmt bei
Bedarf die erste volle Zeile; Platzierung per dense-Autoflow, damit die
Vorschau ohne explizite Zeilennummern in Spalte 2 oben landet.
Ohne Vorschau (gekündigt, unbekannt, nicht erreichbar — renderVorschau
liefert dann nichts) bliebe die zweite Spalte leer. Darum hängt jede Regel
an :has(>.vf-home-vorschau); ohne Vorschau fällt die Home auf das bisherige
Desktop-Bild zurück: Held links, Kacheln rechts, Foto-Kachel sichtbar.
Das :where() hält die Spezifität dabei exakt so wie ohne die Bedingung,
damit die Blöcke max-width:1100px/899px/639px weiter wie bisher greifen. */
@media (min-width:900px){
/* Zwei explizite Zeilen: Held oben (auto), die Kachelzeile nimmt den Rest
(minmax(0,1fr)). Ohne das verteilt die Vorschau (grid-row:span 2) ihre
Höhe auf beide linken Zeilen und schiebt die Kacheln vom Held weg.
align-items:start hält Held und Kacheln oben in ihrer Zeile. */
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau)){grid-auto-flow:row dense;grid-template-rows:auto minmax(0,1fr);align-items:start;row-gap:40px}
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau))>.vf-taste-banner{grid-column:1 / -1}
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau))>.vf-hero{grid-column:1}
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau))>.vf-sec:not(.vf-home-vorschau){grid-column:1}
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau))>.vf-home-vorschau{display:block;grid-column:2;grid-row:span 2}
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau)) .vf-hero__acts{display:block;margin-top:20px}
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau)) .vf-tiles{grid-template-columns:1fr;gap:10px}
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau)) .vf-tile--foto{display:none}
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau)) .vf-tile:not(.vf-tile--foto){display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;align-content:center;min-height:72px;padding:14px 18px}
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau)) .vf-tile:not(.vf-tile--foto) .vf-tile__icon{grid-column:1;grid-row:1 / span 2;margin-bottom:0}
/* Titel und Untertitel brauchen kein grid-column:2: das Icon ist fest auf
Spalte 1 / Zeile 1-2 gesetzt, die Auto-Platzierung legt beide darum von
selbst in Spalte 2 — auch bei «Menüs entdecken» und «Favoriten», die
keinen .vf-tile__txt-Wrapper haben. desktop-first.mjs misst das bei 1440. */
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau)) .vf-tile:not(.vf-tile--foto) .vf-tile__txt{grid-column:2;grid-row:1 / span 2}
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau)) .vf-tile__titel,.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau)) .vf-tile--breit .vf-tile__titel{font-size:19px}
}
/* Kleine Desktops und Tablet quer: weniger Karten, kompaktere Abstände. */
@media (max-width:1100px){
:root{--pad-x:24px}
.vf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.vf-topbar{gap:18px}
.vf-tab{padding:10px 12px}
.vf-view[data-view="home"]{gap:32px;padding-top:40px}
.vf-week-layout{grid-template-columns:minmax(0,1fr) minmax(300px,340px);gap:24px}
.vf-wcard{padding:14px;column-gap:14px}
.vf-wcard__ph{width:88px;height:88px}
.vf-ob{gap:24px 32px}
}
/* Zeilenabstand der Desktop-Home zwischen 900 und 1100 px. Der Block darüber
setzt .vf-view[data-view="home"]{gap:32px} — gleiche Spezifität wie die
gegatete Regel im ersten min-width:900px-Block und später in der Quelle,
also gewinnt er. Dieser winzige Nachtrag steht darum bewusst HIER, hinter
dem 1100er-Block; die Reihenfolge aller anderen Blöcke bleibt unberührt. */
@media (min-width:900px){
.vf-view[data-view="home"]:where(:has(>.vf-home-vorschau)){row-gap:40px}
}
/* Tablet hochkant: Inhalte bleiben breit, Bestellübersicht folgt der Auswahl. */
@media (max-width:899px){
:root{--pad-x:24px}
.vf-topbar{min-height:76px}
.vf-tabs{min-width:0;gap:4px}
/* Seit Batch 3c trägt der vierte Tab das lange Label «Präferenzen». In
100 px passte es weder bei 100 % (es ragte aus der Kachel) noch bei 200 %
Textvergrösserung (dort schob es zwischen 640 und 899 px die ganze Seite
quer, T4 11.09.2026). Die Kacheln dürfen darum breiter werden, und wenn
der Platz trotzdem nicht reicht, bricht das Wort um, statt zu ragen. */
.vf-tab{flex:1;max-width:150px;min-width:0;padding:10px 8px;gap:8px}
.vf-tab__label{overflow-wrap:anywhere}
.vf-topbar h1{font-size:22px}
.vf-week-layout{grid-template-columns:1fr;gap:0}
.vf-week-order{position:static}
.vf-week-order .vf-sticky-cta{padding-bottom:24px}
.vf-wcard__ph{width:112px;height:112px}
.vf-view[data-view="home"]{gap:24px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.vf-view[data-view="home"] .vf-tile--hoch{min-height:240px}
.vf-view[data-view="home"] .vf-tile__titel{font-size:22px}
/* Batch 3c (11.09.2026): die Karte «Dein Abo» ist so breit wie die vierte
Kachel, die sie ersetzt. Im Tablet-Zweispalter (Held links, Kacheln
rechts) stünde sie sonst schmal unter dem Held und liesse die rechte
Spalte leer. Ab 900 px bleibt sie in Spalte 1 — dort steht die
Wochen-Vorschau rechts daneben. */
.vf-view[data-view="home"]>[data-abo-block]{grid-column:1 / -1}
.vf-abo-preferences .vf-card{padding:22px}
.vf-detail{display:block}
.vf-detail>.vf-sheet__ph{position:relative;max-height:240px;margin-bottom:20px}
.vf-ob{gap:24px;grid-template-columns:1fr;padding-top:32px;max-width:720px;margin:auto}
.vf-ob__intro,.vf-ob__choices,.vf-ob__acts{grid-column:1;grid-row:auto}
.vf-ob__intro h2{font-size:36px}
.vf-ob__intro .vf-ob__sub{margin-bottom:0}
}
/* Handy: Navigation unten, einzelne Spalte und von unten öffnende Dialoge. */
@media (max-width:639px){
:root{--pad-x:18px;--tabs-h:64px}
.vf-app{padding-bottom:calc(var(--tabs-h) + 24px + var(--safe-b))}
.vf-app:has(.vf-week-order .vf-sticky-cta){padding-bottom:calc(var(--tabs-h) + 88px + var(--safe-b))}
.vf-app:has(.vf-sticky-cta--zwei){padding-bottom:calc(var(--tabs-h) + 210px + var(--safe-b))}
.vf-topbar{min-height:64px;gap:12px;flex-wrap:nowrap}
.vf-topbar h1{font-size:21px}
.vf-tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;justify-content:center;gap:4px;padding:6px 12px calc(6px + var(--safe-b));background:color-mix(in srgb,var(--white) 90%,transparent);border-top:1px solid var(--hairline);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.vf-tab{flex:1;max-width:180px;min-height:52px;flex-direction:column;gap:3px;font-size:11.5px;padding:0}
.vf-tab.is-active{background:var(--cream-2)}
.vf-view{padding-top:0}
.vf-sec h2{font-size:22px}
.vf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vf-view[data-view="menus"] .vf-chips--scroll{flex-wrap:nowrap;overflow-x:auto}
.vf-reihe{gap:10px}
.vf-reihe .vf-gcard{flex-basis:160px}
.vf-reihe .vf-gcard--ende{flex-basis:130px}
.vf-view[data-view="home"]{display:block;padding:0}
.vf-view[data-view="home"]>.vf-hero{padding:var(--sp-5) var(--pad-x) 0}
.vf-view[data-view="home"]>.vf-sec{padding:var(--sp-5) var(--pad-x)}
.vf-view[data-view="home"] .vf-hero__datum{font-size:32px}
.vf-view[data-view="home"] .vf-hero__fakt{font-size:13px}
.vf-view[data-view="home"] .vf-tile--hoch{min-height:180px}
.vf-view[data-view="home"] .vf-tile__titel{font-size:21px}
.vf-week-layout{padding-top:0;padding-bottom:16px}
.vf-wcard{padding:10px;column-gap:12px;row-gap:10px}
.vf-wcard__ph{width:88px;height:88px;grid-row:1}
/* R44 (iPhone 14, 390 px): Aktionen über die ganze Kartenbreite, Werkzeuge links, Menge rechts, eine Zeile. */
.vf-wcard__actions{grid-column:1 / -1;grid-row:2}
.vf-wcard__name{font-size:14.5px}
.vf-wcard__preis{font-size:14px}
.vf-wcard__makro{font-size:11.5px}
.vf-wcard .vf-stepper button{width:32px;height:32px}
.vf-wcard__tool{min-height:32px}
.vf-wcard__tool--ikon{width:32px;padding:0}
.vf-wcard__actions>.vf-stepper{margin-left:auto}
.vf-week-order .vf-sticky-cta{position:fixed;left:0;right:0;bottom:calc(var(--tabs-h) + var(--safe-b));padding:14px var(--pad-x);background:var(--cream);border-top:1px solid var(--hairline);z-index:10}
.vf-abo__note{font-size:12.5px}
.vf-abo-preferences .vf-card{padding:18px}
.vf-sheet{align-items:flex-end;padding:0}
.vf-sheet__panel,.vf-sheet__panel:has(>.vf-detail){max-width:100%;max-height:90dvh;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:16px var(--pad-x) calc(20px + var(--safe-b))}
#vf-rechnung-form fieldset{display:block}
.vf-taste-options{grid-template-columns:1fr}
.vf-sheet__grab{display:block}
.vf-sheet__titel{font-size:22px}
.vf-sheet__panel .vf-grid,.vf-sheet__panel .vf-edit__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.vf-edit__undo{bottom:calc(var(--tabs-h) + var(--safe-b) + 100px)}
.vf-app:has(.vf-sticky-cta--zwei) .vf-edit__undo{bottom:calc(var(--tabs-h) + var(--safe-b) + 222px)}
.vf-ob{display:block;padding:var(--sp-5) var(--pad-x) var(--sp-6)}
.vf-ob__kopf{margin-bottom:var(--sp-5)}
.vf-ob__intro h2{font-size:30px}
.vf-ob__intro .vf-ob__sub{font-size:15px;margin:0 0 var(--sp-5)}
.vf-ob__acts{margin-top:var(--sp-6)}
}
@media (max-width:359px){
:root{--pad-x:12px}
.vf-grid,.vf-tiles{gap:10px}
.vf-wcard__ph{width:72px;height:80px}
.vf-wcard__head{flex-wrap:wrap}
.vf-wcard__name{flex-basis:100%}
.vf-wcard__tools{flex-wrap:wrap}
.vf-wcard__actions{flex-wrap:wrap}
}
/* ---------- Batch 4a T3: Präferenzen-Kopfzeile sticky (N01/N29) ---------- */
/* Die Zahl «n Gerichte passen» bleibt beim Scrollen durch die Regler sichtbar.
Im Tab klebt sie unter der Topbar (--topbar-h misst app.js), im Präferenzen-
Sheet am oberen Rand des scrollenden Panels. */
:root{--topbar-h:88px}
.vf-praefs__kopf{position:sticky;top:var(--topbar-h);z-index:5;background:var(--cream);padding:6px 0}
.vf-sheet__panel .vf-praefs__kopf{top:0}
/* ---------- Batch 4a T9: Untertitel im Entdecken-Grid ---------- */
.vf-grid__untertitel{margin:calc(-1 * var(--sp-2)) 0 var(--sp-3)}
/* ---------- Batch 4a T20: Pill-Zeile unter den Chips ---------- */
/* Die Kategorien stehen bei jedem Chip an derselben Stelle (Pasci 15.09.:
die Chips rutschten); die Pill hat ihre eigene Zeile, nur wo es sie gibt.
Die Chip-Zeile zieht sich am Handy über die negative Randbreite bis an die
Kante (abo.css:207), die Pill-Zeile bleibt in der Inhaltsbreite. */
.vf-pillzeile{margin-top:8px}
/* ---------- Batch 4a T16: Karte mit «Grösse» und «Varianten» (N14) ---------- */
/* Zwei Knöpfe, die als Ganzes umbrechen statt mitten im Wort: in der
2-Spalten-Karte (375 px → 137 px Inhalt) passen «Grösse · Mittel ›» und
«3 Varianten ›» nicht nebeneinander; jeder bleibt ein 44-px-Ziel. */
.vf-gcard__anpassen{display:flex;flex-wrap:wrap;gap:6px 8px}
.vf-gcard__anpassen .vf-gcard__varianten{flex:1 1 auto;min-width:0;white-space:nowrap;overflow-wrap:normal}
/* ---------- Batch 4a T13: Logo ist ein Link (N35) ---------- */
a.vf-logo{text-decoration:none;position:relative}
a.vf-logo:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px}
/* Final-Review Kleinigkeit: 44-px-Tippziel ohne Layoutsprung — die sichtbare
32-px-Kreisfläche bleibt, ein unsichtbares ::after zentriert darüber. */
a.vf-logo::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}