/* Easy Keto Website 2026 – Prototyp (Startseite und /download), Runde 4.
   Richtung „The product performs“ (taste-skill, seed 2127363261): Die App arbeitet auf der Seite in echten Fragmenten,
   die Figur aus dem 3D-Rig steht geerdet auf der Bühne. Palette aus der App (lib/classes/colors.dart): Anthrazit als Grund,
   primary #00CA39 nur auf der Hauptaktion, primaryLight #7BEF9E als Bühne, gray100 als heller Mittelteil. Schrift: Barlow.
   System: ein Rahmen (höchstens 1520 px Inhalt), 12 Spalten, eine Abstandsskala (--sp-*), fünf Schriftstufen (--fs-*). */

@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  /* Rollen (colors.dart; Kontraste in NOTIZEN.md) */
  --bg: #141414;          /* background / gray900 */
  --surface: #202020;     /* surface: Tafelzeilen, Kacheln */
  --surface-2: #2a2a2a;   /* surfaceElevated: Zustand darüber */
  --ink: #f7f7f7;         /* gray100: Text auf dunkel, 17,2:1 */
  --muted: #b0b0b0;       /* gray300 textSecondary: 8,5:1 */
  --accent: #00ca39;      /* primary: nur die Hauptaktion */
  --accent-hover: #7bef9e;/* hover = primaryLight */
  --accent-ink: #141414;  /* 8,3:1 auf primary; nie Weiß auf primary */
  --stage: #7bef9e;       /* primaryLight: Bühne, auf der die Figur steht und die App arbeitet */
  --stage-ink: #141414;   /* 12,9:1 */
  --stage-muted: #4d4d4d; /* 5,9:1 */
  --light: #f7f7f7;       /* heller Mittelteil */
  --light-2: #e2e2e2;     /* gray200: eine Stufe tiefer */
  --light-ink: #141414;
  --light-muted: #4d4d4d; /* gray500: 7,9:1 */
  --soft: #d4ffe3;        /* primaryUltraLight: freundliche Fläche */
  --focus: #b2ebf2;       /* focus (Cyan-Türkis) auf dunkel */
  --focus-hell: #00661d;  /* primaryDarker auf hell und Bühne */
  --warn: #ffb74d;        /* warning */

  /* App-Fragmente ([data-ui]) */
  --ui-bg: #141414;
  --ui-card: #1f1f1f;
  --ui-row: #2a2a2a;
  --ui-line: #333333;
  --ui-text: #f7f7f7;
  --ui-sub: #b0b0b0;
  --ui-ok: #00ca39;
  --ui-gruen: #00661d;    /* primaryDarker: Einkaufsliste (die App zeigt sie grün) */
  --c-kcal: #00c1ff;
  --c-fett: #ff3b30;
  --c-kh: #ffa500;
  --c-eiweiss: #36ba71;

  --font: "Barlow", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Schriftstufen: klein, Text, Satz, Kopf, Titel (fließend bis 1920 px, dann fest) */
  --fs-s: clamp(0.875rem, 0.83rem + 0.12vw, 0.9375rem);  /* 14–15 */
  --fs-b: clamp(1.0625rem, 0.98rem + 0.25vw, 1.25rem);   /* 17–20 */
  --fs-l: clamp(1.25rem, 1rem + 0.7vw, 1.75rem);         /* 20–28: Leitsatz, Aussagen, Werte */
  --fs-h: clamp(2.25rem, 1.1rem + 3.4vw, 4.5rem);        /* 36–72: Abschnittsköpfe */
  --fs-d: clamp(2.3rem, 0.7rem + 5.6vw, 6.5rem);         /* 37–104: Titel */

  /* Abstände: eine Skala, sonst nichts */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem;
  --section: clamp(5.5rem, 3rem + 6.5vw, 10rem);

  /* Rahmen */
  --frame: 1520px;
  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 1.6vw, 1.75rem);
  --bleed: max(var(--margin), (100vw - var(--frame)) / 2); /* vom Rahmen bis zum Fensterrand */
  --radius: 4px;
  --kopf-h: 5.5rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #4d4d4d var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-b); line-height: 1.5; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class], nav ul, .fk ul { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
/* Nur für Screenreader: Bezeichnung der Tafelwerte (Eiweiß, Netto-Kohlenhydrate) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:target { scroll-margin-top: var(--sp-6); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hell :focus-visible, .buehne :focus-visible, .zeile.ist-offen :focus-visible, .kachel[open] :focus-visible, .fk-marke :focus-visible, .holen-buehne :focus-visible { outline-color: var(--focus-hell); }
h1, h2, h3 { font-weight: 600; text-wrap: balance; hyphens: none; }
p { text-wrap: pretty; }
.nums { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.klein { font-size: var(--fs-s); line-height: 1.45; }
.nowrap { white-space: nowrap; }
.sprung { position: absolute; left: var(--margin); top: -4rem; z-index: 20; background: var(--accent); color: var(--accent-ink); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); font-weight: 600; text-decoration: none; }
.sprung:focus { top: var(--sp-3); }

/* ---------- Rahmen und Raster ---------- */
.rahmen { width: min(100% - 2 * var(--margin), var(--frame)); margin-inline: auto; }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ---------- Knöpfe und Verweise ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 3rem; padding: 0 var(--sp-5); background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius); font-weight: 600; font-size: var(--fs-b); line-height: 1.1; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.knopf:active { transform: scale(0.97); }
.knopf-dunkel { background: var(--light-ink); color: var(--stage); }
.verweis { font-weight: 500; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--accent-hover); }
  .knopf-dunkel:hover { background: #2a2a2a; }
  .verweis:hover { text-decoration-color: currentColor; }
}
.stores { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.stores a { display: block; border-radius: 9px; transition: transform var(--t-press) var(--ease-out); }
.stores a:active { transform: scale(0.97); }
.stores img { height: 3.375rem; width: auto; }

/* ---------- Kopf ---------- */
.kopf { position: relative; z-index: 5; display: flex; align-items: center; gap: var(--sp-6); height: var(--kopf-h); }
.kopf .marke { display: block; width: 3.75rem; height: 3.75rem; margin-right: auto; border-radius: var(--radius); }
.kopf .marke img { width: 100%; height: 100%; }
.kopf nav ul { display: flex; gap: var(--sp-6); }
.kopf nav a { display: inline-block; font-size: var(--fs-b); font-weight: 500; text-decoration: none; padding-block: var(--sp-3); transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .kopf nav a:hover { color: var(--accent-hover); } }
.kopf .knopf { min-height: 2.75rem; padding-inline: var(--sp-5); }

/* ---------- Hero: Titel oben, links die Handgriffe („Du“), rechts die Bühne („Wir“) ---------- */
.hero { position: relative; overflow: clip; }
.hero-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gutter);
  min-height: clamp(44rem, calc(100svh - var(--kopf-h)), 62rem); padding-top: clamp(var(--sp-6), 1rem + 2.5vw, var(--sp-8)); }
.hero h1 { grid-column: 1 / -1; grid-row: 1; font-size: var(--fs-d); line-height: 0.96; letter-spacing: -0.035em; margin-left: -0.04em; }
.zeilen .zeile { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.zeilen [data-line] { display: block; }
.hero-unter { grid-column: 1 / span 4; grid-row: 2; padding-block: var(--sp-7) var(--sp-8); }
.hero-unter .lead { font-size: var(--fs-l); line-height: 1.3; max-width: 24ch; }
.handlung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-5); }
.handlung .verweis { font-size: var(--fs-b); padding-block: var(--sp-3); }
.hero-unter .preis { margin-top: var(--sp-4); color: var(--muted); max-width: 34ch; }
.probier { margin-top: var(--sp-7); }
.probier-frage { font-weight: 600; font-size: var(--fs-b); }
.beleg { margin-top: var(--sp-3); color: var(--muted); max-width: 40ch; }

/* Rezeptwahl: sechs echte Rezeptfotos */
.wahl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); max-width: 26rem; }
.wahl button { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--surface);
  outline: 3px solid transparent; outline-offset: 2px; transition: transform var(--t-press) var(--ease-out), outline-color var(--t-hover) ease; }
.wahl button img { width: 100%; height: 100%; object-fit: cover; }
.wahl button[aria-checked="true"] { outline-color: var(--accent); }
.wahl button:active { transform: scale(0.94); }
.wahl button:focus-visible { outline-color: var(--focus); }
@media (hover: hover) and (pointer: fine) { .wahl button:hover { transform: translateY(-2px); } }

/* Bühne: flache Fläche in primaryLight, oben links ein Bogen (die Ringe der App), läuft rechts bis an den Fensterrand
   und unten an den nächsten Abschnitt. Figur steht auf dem Boden, die Karte steht vollständig daneben. */
.buehne { --kerbe: clamp(4rem, 1.5rem + 7vw, 9rem); --pad: clamp(var(--sp-5), 1rem + 2vw, var(--sp-8));
  position: relative; z-index: 1; isolation: isolate; color: var(--stage-ink);
  grid-column: 5 / -1; grid-row: 2; margin-top: var(--sp-7);
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(20rem, 24vw, 30rem); grid-template-rows: minmax(0, 1fr); column-gap: var(--sp-6);
  padding: var(--pad) 0 0 var(--pad); }
.buehne::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--bleed)) 0 0; z-index: -1; background: var(--stage);
  clip-path: polygon(0 var(--kerbe), var(--kerbe) 0, 100% 0, 100% 100%, 0 100%); }
@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
  .buehne::before { clip-path: shape(from 0 var(--kerbe), arc to var(--kerbe) 0 of var(--kerbe) cw, line to 100% 0, line to 100% 100%, line to 0 100%, close); }
}
.figur { position: relative; margin: 0; pointer-events: none; }
.figur img, .figur video { width: 100%; height: auto; }
/* Hero-Figur: steht auf dem Boden der Bühne (Fußpunkt im Bild unten, Schatten nach links). */
.figur-hero { grid-column: 1; grid-row: 1; align-self: end; display: flex; align-items: flex-end; min-height: 0; height: 100%; padding-bottom: clamp(var(--sp-4), 3vh, var(--sp-6)); }
.figur-hero img, .figur-hero video { width: auto; height: auto; max-width: 100%; max-height: min(100%, 36rem); object-fit: contain; object-position: left bottom; }
.hero-karte { grid-column: 2; grid-row: 1; align-self: start; padding-bottom: var(--pad); }
/* Engine-Schleife: Video in exakt der Bühnenfarbe gebacken (kein Alpha nötig), Poster = Bild 0. Der Fußpunkt liegt bei
   --fuss (Anteil der Videohöhe); das Video rückt um den Rest nach unten, damit die Füße auf dem Boden der Bühne stehen. */
.figur-film video { display: block; transform: translateY(calc((1 - var(--fuss, 0.95)) * 100%)); background: var(--stage); }
/* Ab 1100 px darf die Leinwand links in den Innenabstand der Bühne ragen (dort liegen nur Fläche und Schatten); die Figur
   steht bündig rechts an der Karte, der sie die Schüssel reicht. */
@media (min-width: 1100px) {
  .figur-film { justify-content: flex-end; }
  .figur-film video { max-width: calc(100% + 0.8 * var(--pad)); max-height: min(100%, 38rem); }
}
/* Große Bildschirme: Die Bühne beginnt eine Spalte früher, damit die Figur mitwächst. */
@media (min-width: 1600px) {
  .hero-unter { grid-column: 1 / span 3; }
  .buehne { grid-column: 4 / -1; }
}
.film-knopf { position: absolute; right: 0; bottom: calc(var(--sp-2) + clamp(var(--sp-4), 3vh, var(--sp-6))); z-index: 2; pointer-events: auto; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; background: rgba(20, 20, 20, 0.72); color: #fff; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.film-knopf:active { transform: scale(0.92); }
.film-knopf svg { width: 1.1rem; height: 1.1rem; }
.film-knopf .spiel { display: none; }
.film-knopf.pausiert .spiel { display: block; }
.film-knopf.pausiert .halt { display: none; }
@media (hover: hover) and (pointer: fine) { .film-knopf:hover { background: #141414; } }
.buehne-beleg { display: none; }
.karte-bu { margin-top: var(--sp-3); font-size: var(--fs-s); color: var(--stage-muted); background: var(--stage); text-align: right; }

/* ---------- App-Fragmente (data-ui): Aussehen der App, echte Größen ---------- */
[data-ui] { font-family: var(--font); color: var(--ui-text); }
[data-ui].karte { background: var(--ui-bg); border-radius: 18px; overflow: hidden; }
[data-ui] .foto { position: relative; aspect-ratio: 2 / 1; background: var(--ui-card); overflow: hidden; }
[data-ui] .foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity 420ms var(--ease-out), transform 900ms var(--ease-soft); }
[data-ui] .foto.ist-neu img { opacity: 0; transform: scale(1.05); transition: none; }
[data-ui] .foto .titel { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.9rem 0.55rem; background: rgba(20, 20, 20, 0.7); font-size: 1.15rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; }
[data-ui] .makros { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ui-row); padding: 0.65rem 0.25rem 0.6rem; text-align: center; }
[data-ui] .makros b { display: block; font-size: 1.45rem; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-ui] .makros span { display: block; font-size: 0.8125rem; font-weight: 600; margin-top: 0.15rem; color: var(--ui-text); }
[data-ui] .k-kcal b, [data-ui] .k-kcal .ring-wert { color: var(--c-kcal); stroke: var(--c-kcal); }
[data-ui] .k-fett b, [data-ui] .k-fett .ring-wert { color: var(--c-fett); stroke: var(--c-fett); }
[data-ui] .k-kh b, [data-ui] .k-kh .ring-wert { color: var(--c-kh); stroke: var(--c-kh); }
[data-ui] .k-eiweiss b, [data-ui] .k-eiweiss .ring-wert { color: var(--c-eiweiss); stroke: var(--c-eiweiss); }
[data-ui] .rest { display: flex; gap: 0.75rem; align-items: center; padding: 1rem; background: var(--ui-card); border-block: 2px solid var(--ui-ok); }
[data-ui] .rest .rest-icon { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; color: var(--ui-ok); }
[data-ui] .rest p { font-size: 1.05rem; line-height: 1.32; font-weight: 600; min-height: 3.96em; display: flex; align-items: center; } /* drei Zeilen Platz: der längste Satz springt nicht */
[data-ui] .rest[data-art="kh-drueber"], [data-ui] .rest[data-art="kcal-drueber"] { border-color: var(--warn); }
[data-ui] .rest[data-art="kh-drueber"] .rest-icon, [data-ui] .rest[data-art="kcal-drueber"] .rest-icon { color: var(--warn); }
[data-ui] .portion { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--ui-bg); }
[data-ui] .portion button { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ui-row); color: var(--ui-text); display: grid; place-items: center;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
[data-ui] .portion button:active { transform: scale(0.9); }
[data-ui] .portion button:disabled { opacity: 0.35; cursor: default; }
[data-ui] .portion button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[data-ui] .portion button svg { width: 1.25rem; height: 1.25rem; }
[data-ui] .portion p { font-size: 1.15rem; font-weight: 600; text-align: center; }
[data-ui] .portion em { font-style: normal; color: var(--ui-ok); }
@media (hover: hover) and (pointer: fine) { [data-ui] .portion button:not(:disabled):hover { background: var(--ui-ok); color: var(--accent-ink); } }
[data-ui] .ist-getippt { animation: tippen 520ms var(--ease-out); }
@keyframes tippen { from { opacity: 0.25; transform: translateY(0.35rem); } to { opacity: 1; transform: none; } }

/* ---------- Abschnitte: gemeinsamer Takt ---------- */
.abschnitt { padding-block: var(--section); }
.hell { background: var(--light); color: var(--light-ink); }
.hell ::selection { background: var(--light-ink); color: var(--light); }
h2.kopfzeile, .fragen h2 { font-size: var(--fs-h); line-height: 1.02; letter-spacing: -0.03em; }
/* Abschnittskopf: Überschrift links (Spalten 1–7), Satz rechts unten (8–12) */
.abschnitt-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: clamp(var(--sp-7), 1rem + 3vw, var(--sp-9)); }
.abschnitt-kopf h2 { grid-column: 1 / span 7; }
.abschnitt-kopf > p { grid-column: 8 / span 5; font-size: var(--fs-b); max-width: 44ch; }

/* ---------- Das erledigt die App: festgehaltene Bühne, wechselnder Zustand ---------- */
.arbeit-split { align-items: start; }
.arbeit-text { grid-column: 1 / span 6; padding-right: clamp(0px, 2vw, var(--sp-6)); }
.schritt { min-height: calc(var(--buehne-h) * 0.7); display: flex; flex-direction: column; justify-content: center; padding-block: var(--sp-6); }
.arbeit { --buehne-h: min(42rem, calc(100svh - 6rem)); }
.arbeit .abschnitt-kopf h2 { grid-column: 1 / span 6; }
.arbeit .abschnitt-kopf > p { grid-column: 7 / -1; }
/* Der „Du“-Satz trägt die Spalte (Kopfgröße); der aktive steht in voller Tinte, die anderen leise. */
.schritt h3 { font-size: var(--fs-h); line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; max-width: 13ch; color: var(--light-muted); transition: color var(--t-ui) ease; }
.schritt p { margin-top: var(--sp-5); max-width: 34em; font-size: var(--fs-l); line-height: 1.35; }
.schritt .hinweis { margin-top: var(--sp-3); font-size: var(--fs-s); color: var(--light-muted); }
.schritt.ist-aktiv h3 { color: var(--light-ink); }
.arbeit-buehne { grid-column: 7 / -1; position: sticky; top: calc((100svh - var(--buehne-h)) / 2); height: var(--buehne-h); background: var(--stage); border-radius: var(--radius); overflow: hidden; }
.zustand { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-6) var(--sp-4); opacity: 0; visibility: hidden; transition: opacity 700ms var(--ease-soft), visibility 0s linear 700ms; }
.zustand.ist-aktiv { opacity: 1; visibility: visible; transition: opacity 700ms var(--ease-soft), visibility 0s; }
.zustand .bu { font-size: var(--fs-s); color: var(--stage-muted); text-align: center; }

/* Zustand Foto-Erfassung (Store-Bild 2): Foto zugeschnitten aufs Essen, Marker auf den Zutaten, Etiketten im Weiß */
[data-ui].scan { width: min(34rem, 100%); background: var(--ui-card); border-radius: 22px; padding: 1rem; }
[data-ui].scan .scan-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.1rem 0.25rem 0.8rem; font-size: 1.05rem; }
[data-ui].scan .scan-kopf span { font-size: 0.8125rem; font-weight: 600; color: var(--accent-ink); background: var(--ui-ok); border-radius: 999px; padding: 0.25rem 0.65rem; }
[data-ui].scan .bild { position: relative; border-radius: 14px; overflow: hidden; background: #fff; container-type: inline-size; }
[data-ui].scan .bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
[data-ui].scan .ecke { position: absolute; width: 11%; aspect-ratio: 1; border: 4px solid var(--ui-ok); }
[data-ui].scan .ecke.ol { left: 4%; top: 5%; border-right: 0; border-bottom: 0; }
[data-ui].scan .ecke.or { right: 4%; top: 5%; border-left: 0; border-bottom: 0; }
[data-ui].scan .ecke.ul { left: 4%; bottom: 5%; border-right: 0; border-top: 0; }
[data-ui].scan .ecke.ur { right: 4%; bottom: 5%; border-left: 0; border-top: 0; }
[data-ui].scan .zeiger { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
[data-ui].scan .zeiger line { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45)); }
[data-ui].scan .punkt { position: absolute; left: var(--x); top: var(--y); width: max(10px, 2.6cqi); aspect-ratio: 1; margin: calc(-0.5 * max(10px, 2.6cqi)) 0 0 calc(-0.5 * max(10px, 2.6cqi));
  border-radius: 50%; background: var(--ui-ok); box-shadow: 0 0 0 3px #fff; }
[data-ui].scan .marke { position: absolute; left: var(--lx); top: var(--ly); transform: translateY(-50%); background: #fff; color: #141414; border-radius: 8px;
  padding: 0.3em 0.55em; font-size: clamp(0.625rem, 2.6cqi, 0.8125rem); line-height: 1.2; white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22); }
[data-ui].scan .marke.links { transform: translate(-100%, -50%); }
[data-ui].scan .marke b { display: block; font-size: 1.12em; font-weight: 700; }
[data-ui].scan .ergebnis { margin-top: 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--ui-bg); border-radius: 14px; padding: 0.8rem 0.9rem; }
[data-ui].scan .ergebnis p { font-size: 0.9375rem; line-height: 1.3; color: var(--ui-sub); }
[data-ui].scan .ergebnis strong { display: block; font-size: 1.05rem; color: var(--ui-text); }
[data-ui].scan .ergebnis span { flex: 0 0 auto; background: var(--ui-ok); color: var(--accent-ink); font-weight: 700; font-size: 0.875rem; border-radius: 999px; padding: 0.45rem 0.9rem; }

/* Zustand Einkaufsliste (Store-Bild 6: die App zeigt sie grün; hier primaryDarker) */
[data-ui].liste { width: min(30rem, 100%); background: var(--ui-gruen); border-radius: 22px; padding: 0.9rem; color: #fff; }
[data-ui].liste .listenkopf { display: flex; align-items: baseline; justify-content: space-between; background: rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 0.75rem 0.9rem; font-size: 1.1rem; }
[data-ui].liste .listenkopf span { font-size: 0.8125rem; font-weight: 500; }
[data-ui].liste .listenknoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin-top: 0.45rem; }
[data-ui].liste .listenknoepfe span { display: flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); padding: 0.5rem; font-weight: 600; font-size: 0.875rem; }
[data-ui].liste .listenknoepfe svg { width: 1rem; height: 1rem; fill: currentColor; }
[data-ui].liste .abteilung { font-size: 0.95rem; font-weight: 600; margin: 0.7rem 0.2rem 0.35rem; }
[data-ui].liste ul { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
[data-ui].liste li { display: grid; grid-template-columns: 4.25rem 1fr auto; align-items: center; gap: 0.5rem; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; padding: 0.34rem 0.6rem; font-size: 0.9375rem; }
[data-ui].liste li .menge { font-weight: 700; font-size: 0.8125rem; text-align: center; background: rgba(255, 255, 255, 0.12); border-radius: 7px; padding: 0.2rem 0.3rem; }
[data-ui].liste li .name { transition: opacity 300ms ease; }
[data-ui].liste li .haken { width: 1.35rem; height: 1.35rem; border-radius: 6px; border: 2px solid rgba(255, 255, 255, 0.8); display: grid; place-items: center; transition: background-color 240ms ease, border-color 240ms ease; }
[data-ui].liste li .haken svg { width: 0.95rem; height: 0.95rem; transition: opacity 200ms ease, transform 320ms var(--ease-expo); }
[data-ui].liste li:not(.erledigt) .haken svg { opacity: 0; transform: scale(0.4); }
[data-ui].liste li.erledigt .name { text-decoration: line-through; opacity: 0.75; }
[data-ui].liste li.erledigt .haken { background: #fff; color: var(--ui-gruen); border-color: #fff; }
[data-ui].liste li[role="checkbox"] { cursor: pointer; transition: background-color var(--t-hover) ease; }
[data-ui].liste li[role="checkbox"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { [data-ui].liste li[role="checkbox"]:hover { background: rgba(0, 0, 0, 0.32); } }

/* Zustand Live-Rezept */
[data-ui].kochen { width: min(32rem, 100%); background: var(--ui-bg); border-radius: 22px; overflow: hidden; }
[data-ui].kochen .kochkopf { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; background: var(--ui-card); }
[data-ui].kochen .kochkopf img { width: 3rem; height: 3rem; border-radius: 10px; object-fit: cover; }
[data-ui].kochen .kochkopf p { font-size: 0.875rem; color: var(--ui-sub); line-height: 1.3; }
[data-ui].kochen .kochkopf strong { display: block; color: var(--ui-text); font-size: 1rem; }
[data-ui].kochen .seiten { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 0.9rem 1rem 0; }
[data-ui].kochen .seiten i { width: 8px; height: 8px; border-radius: 999px; background: #4d4d4d; }
[data-ui].kochen .seiten i.jetzt { width: 24px; background: var(--ui-ok); }
[data-ui].kochen .schrittext { padding: 0.9rem 1.1rem 0.2rem; font-size: 1.3rem; line-height: 1.35; font-weight: 500; text-align: center; }
[data-ui].kochen .schrittext mark { background: none; color: var(--ui-ok); font-weight: 700; }
/* Runder Countdown wie im Kochmodus der App (CircularCountDownTimer), Farben aus der App-Palette */
[data-ui].kochen .timer-rund { margin: 0.9rem 1rem 1rem; display: grid; justify-items: center; gap: 0.55rem; border-radius: 16px; background: var(--ui-card); padding: 1rem 0.9rem 1.1rem; }
[data-ui].kochen .uhr { position: relative; width: min(10.5rem, 62%); aspect-ratio: 1; }
[data-ui].kochen .uhr svg { width: 100%; height: 100%; transform: rotate(-90deg); }
[data-ui].kochen .uhr circle { fill: none; stroke-width: 7; }
[data-ui].kochen .uhr .uhr-grund { stroke: rgba(255, 255, 255, 0.18); }
[data-ui].kochen .uhr .uhr-wert { stroke: var(--ui-ok); stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
[data-ui].kochen .uhr b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.25rem; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-ui].kochen .timer-rund small { font-size: 0.8125rem; color: var(--ui-sub); }
[data-ui].kochen .timer-knopf { min-width: 6.5rem; min-height: 2.75rem; background: var(--ui-ok); color: var(--accent-ink); font-weight: 700; border-radius: 999px; padding: 0.5rem 1.1rem; font-size: 0.9375rem; transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease; }
[data-ui].kochen .timer-knopf:active { transform: scale(0.95); }
[data-ui].kochen .timer-knopf:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[data-ui].kochen .timer.laeuft .timer-knopf { background: var(--ui-row); color: var(--ui-text); }
@media (hover: hover) and (pointer: fine) { [data-ui].kochen .timer-knopf:hover { filter: brightness(1.08); } }
[data-ui].kochen .navi { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0 1rem 1rem; }
[data-ui].kochen .navi span { text-align: center; border-radius: 12px; padding: 0.7rem; font-weight: 600; font-size: 0.9375rem; background: var(--ui-card); }
[data-ui].kochen .navi span + span { background: var(--ui-ok); color: var(--accent-ink); }

/* ---------- Rezepte und Ratgeber: Tafel ---------- */
.tafel { display: grid; gap: 4px; }
.tafel-spalten, .zeile-knopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding-inline: var(--sp-5); }
.tafel-spalten { color: var(--muted); font-size: var(--fs-s); padding-bottom: var(--sp-2); }
.tafel-spalten .s-name { grid-column: 1 / span 5; }
.tafel-spalten .s-art { grid-column: 6 / span 2; }
.tafel-spalten .s-kcal { grid-column: 8 / span 2; }
.tafel-spalten .s-eiweiss { grid-column: 10 / span 2; }
.tafel-spalten .s-kh { grid-column: 12; justify-self: end; }
.zeile-knopf { width: 100%; min-height: 4.5rem; background: var(--surface); color: var(--ink); text-align: left; transition: background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .zeile:not(.ist-offen) .zeile-knopf:hover { background: var(--surface-2); } }
.zeile .name { grid-column: 1 / span 5; font-size: var(--fs-l); font-weight: 500; line-height: 1.15; padding-block: var(--sp-3); letter-spacing: -0.01em; }
.zeile .art { grid-column: 6 / span 2; font-size: var(--fs-b); color: var(--muted); }
.zeile .wert { font-size: var(--fs-b); font-variant-numeric: tabular-nums; }
.zeile .w-kcal { grid-column: 8 / span 2; }
.zeile .w-eiweiss { grid-column: 10 / span 2; }
.zeile .kh-block { grid-column: 12; justify-self: end; min-width: 6.25rem; text-align: center; background: var(--c-kh); color: #141414; font-weight: 700; font-size: var(--fs-b); font-variant-numeric: tabular-nums; border-radius: 3px; padding: 0.35rem 0.6rem; }
.zeile.ist-offen .zeile-knopf { background: var(--stage); color: var(--stage-ink); }
.zeile.ist-offen .art { color: var(--stage-ink); }
.zeile.ist-offen .name { font-weight: 600; }
.detail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); background: var(--stage); color: var(--stage-ink); padding: var(--sp-1) var(--sp-5) var(--sp-5); }
.detail[hidden] { display: none; }
.detail figure { grid-column: 1 / span 6; overflow: hidden; border-radius: 3px; }
.detail img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
.detail .text { grid-column: 7 / span 6; align-self: end; }
.detail .d-art { font-weight: 600; }
.d-werte { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: var(--sp-2) clamp(var(--sp-5), 3vw, var(--sp-7)); margin: var(--sp-4) 0 0; }
.d-werte b { display: block; font-size: var(--fs-l); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.d-werte span { display: block; font-size: var(--fs-s); margin-top: var(--sp-1); }
.d-hinweis { margin-top: var(--sp-3); font-size: var(--fs-s); }
.detail .knopf { margin-top: var(--sp-5); }
.tafel-fuss { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: var(--sp-7); align-items: start; }
.tafel-fuss ul { grid-column: 1 / span 7; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-6); }
.tafel-fuss ul a { font-size: var(--fs-b); padding-block: var(--sp-2); display: inline-block; }
.tafel-fuss .quelle { grid-column: 8 / span 5; color: var(--muted); }

/* ---------- Meine Mahlzeiten: Tage, Bänder, Ringe ---------- */
.tag-kopf .knopf { justify-self: start; }
.tag-kopf > div { grid-column: 1 / span 7; }
.tag-kopf > div p { margin-top: var(--sp-4); max-width: 46ch; }
.tag-kopf > .knopf { grid-column: 8 / span 5; justify-self: end; align-self: end; }
.tag-plan { display: grid; gap: var(--sp-5); }
.tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.tage button { display: grid; text-align: left; width: 100%; min-height: 4rem; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--light-2); color: var(--light-ink); transition: background-color var(--t-hover) ease; }
.tage button b { font-size: var(--fs-b); font-weight: 600; }
.tage button span { font-size: var(--fs-s); color: var(--light-muted); }
@media (hover: hover) and (pointer: fine) { .tage button:not([aria-selected="true"]):hover { background: #d6d6d6; } }
.tage button[aria-selected="true"] { background: var(--light-ink); color: var(--light); }
.tage button[aria-selected="true"] span { color: #d6d6d6; }
.tag-panel { display: grid; grid-template-columns: minmax(0, 1fr) clamp(24rem, 30vw, 28rem); gap: var(--sp-5); align-items: start; }
.baender { display: grid; gap: 4px; }
.band { display: grid; grid-template-columns: 4.5rem 3.25rem minmax(0, 1fr) auto; grid-template-areas: "zeit bild was werte"; align-items: center; column-gap: var(--sp-4); min-height: 5rem; padding: var(--sp-3) var(--sp-5); border-radius: var(--radius); background: var(--light-2); }
.band time { grid-area: zeit; font-size: var(--fs-b); font-variant-numeric: tabular-nums; font-weight: 500; }
.band img { grid-area: bild; width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; }
.band .was { grid-area: was; }
.band .werte { grid-area: werte; display: grid; justify-items: end; font-variant-numeric: tabular-nums; line-height: 1.3; }
.band .werte span + span { color: var(--light-muted); font-size: var(--fs-s); }
.band .was b { display: block; font-size: var(--fs-b); font-weight: 600; line-height: 1.25; }
.band .was span { display: block; font-size: var(--fs-s); color: var(--light-muted); line-height: 1.35; }
.band.geplant { background: var(--stage); }
.band.geplant .was span, .band.geplant .werte span + span { color: var(--stage-ink); }
.tag-beleg { margin-top: var(--sp-5); color: var(--light-muted); max-width: 70ch; }

/* Tagesringe der App */
[data-ui].ringe { background: var(--ui-bg); border-radius: 22px; padding: 1.1rem 0.9rem 1.2rem; container-type: inline-size; }
[data-ui].ringe .ringe-kopf { text-align: center; font-size: 1.6rem; font-weight: 500; line-height: 1.2; }
[data-ui].ringe .ringe-datum { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.55rem; }
[data-ui].ringe .ringe-datum .datum { border: 1px solid var(--ui-line); background: var(--ui-card); border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.9375rem; font-weight: 500; }
[data-ui].ringe .pfeil svg { width: 1.4rem; height: 1.4rem; }
[data-ui].ringe .ringe-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; margin-top: 0.9rem; }
[data-ui] .ring { position: relative; text-align: center; }
[data-ui] .ring svg { width: 100%; aspect-ratio: 1; transform: rotate(135deg); }
[data-ui] .ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
[data-ui] .ring .ring-grund { stroke: #2d2d2d; }
[data-ui] .ring .ring-wert { transition: stroke-dasharray 1100ms var(--ease-expo); }
[data-ui] .ring-kreis { position: relative; }
[data-ui] .ring-innen { position: absolute; inset: 0; display: grid; place-content: center; line-height: 1.1; padding-bottom: 6%; }
[data-ui] .ring-innen b { display: block; font-size: clamp(0.75rem, 3.7cqi, 1rem); font-weight: 600; font-variant-numeric: tabular-nums; }
[data-ui] .ring-innen span { font-size: clamp(0.625rem, 2.9cqi, 0.75rem); color: var(--ui-sub); font-weight: 600; }
[data-ui] .ring-unten { margin-top: -16%; line-height: 1.1; }
[data-ui] .ring-unten b { display: block; font-size: clamp(1rem, 5.2cqi, 1.35rem); font-weight: 700; font-variant-numeric: tabular-nums; }
[data-ui] .ring-unten span { font-size: clamp(0.75rem, 3.4cqi, 0.875rem); font-weight: 600; }
[data-ui] .k-kcal .ring-innen b { color: var(--c-kcal); } [data-ui] .k-fett .ring-innen b { color: var(--c-fett); }
[data-ui] .k-kh .ring-innen b { color: var(--c-kh); } [data-ui] .k-eiweiss .ring-innen b { color: var(--c-eiweiss); }

/* ---------- Fragen: Kacheln, eine offen ---------- */
.fragen .raster { align-items: start; }
.fragen-kopf { grid-column: 1 / span 4; position: sticky; top: var(--sp-6); }
.kacheln { grid-column: 5 / span 8; display: grid; gap: var(--sp-2); }
.kachel { background: var(--surface); border-radius: var(--radius); transition: background-color var(--t-ui) ease; }
.kachel summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; align-items: center; gap: var(--sp-5); min-height: 4.5rem; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-b); font-weight: 500; line-height: 1.3; border-radius: var(--radius); }
.kachel summary::-webkit-details-marker { display: none; }
.kachel summary i { position: relative; width: 1rem; height: 1rem; justify-self: end; }
.kachel summary i::before, .kachel summary i::after { content: ""; position: absolute; left: 0; top: calc(50% - 1.5px); width: 1rem; height: 3px; background: currentColor; transition: transform var(--t-ui) var(--ease-out); }
.kachel summary i::after { transform: rotate(90deg); }
.kachel[open] { background: var(--light); color: var(--light-ink); }
.kachel[open] summary i::after { transform: rotate(0deg); }
.kachel summary:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .kachel:not([open]) summary:hover { background: var(--surface-2); } }
.kachel:not([open]) > .antwort { display: none; }
.antwort { padding: 0 var(--sp-5) var(--sp-6); }
.antwort p, .antwort li { max-width: 64ch; }
.antwort > * + * { margin-top: var(--sp-3); }
.antwort h3 { font-size: var(--fs-b); font-weight: 600; margin-top: var(--sp-5); }
.antwort .unterzeile { font-weight: 600; }
.antwort ul { padding-left: 1.2rem; display: grid; gap: var(--sp-2); }
.antwort .stores { margin-top: var(--sp-5); }
.antwort .stores img { height: 3.375rem; }
.antwort .unterschrift { font-weight: 600; }
.antwort .schluss { margin-top: var(--sp-5); font-size: var(--fs-l); line-height: 1.2; font-weight: 500; }
.hinweis-gesundheit { margin-top: var(--sp-7); max-width: 34ch; }
.hinweis-gesundheit h3 { font-size: var(--fs-b); font-weight: 600; }
.hinweis-gesundheit p { margin-top: var(--sp-2); }

/* ---------- Holen: Handlung links, Bühne mit Figur und Code rechts ---------- */
.holen { padding-block: var(--section); }
.holen .raster { align-items: center; row-gap: var(--sp-7); }
.holen-text { grid-column: 1 / span 6; }
.holen h2 { font-size: var(--fs-h); line-height: 1.02; letter-spacing: -0.03em; max-width: 13ch; }
.holen .stores { margin-top: var(--sp-6); }
.holen .stores img { height: 4rem; }
.holen .preis { margin-top: var(--sp-5); color: var(--muted); }
.holen .weiter { margin-top: var(--sp-2); }
.holen-buehne { --kerbe: clamp(3.5rem, 1rem + 5vw, 7rem); grid-column: 7 / -1; position: relative; isolation: isolate; color: var(--stage-ink);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); align-items: end; gap: var(--sp-5); padding: var(--sp-7) var(--sp-7) var(--sp-6); min-height: 26rem; }
.holen-buehne::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--bleed)) 0 0; z-index: -1; background: var(--stage);
  clip-path: polygon(0 var(--kerbe), var(--kerbe) 0, 100% 0, 100% 100%, 0 100%); }
@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
  .holen-buehne::before { clip-path: shape(from 0 var(--kerbe), arc to var(--kerbe) 0 of var(--kerbe) cw, line to 100% 0, line to 100% 100%, line to 0 100%, close); }
}
.figur-holen { align-self: end; }
.figur-holen img { width: min(100%, 17rem); }
.holen-qr { align-self: center; display: grid; gap: var(--sp-4); }
.qr { width: 9.5rem; height: 9.5rem; background: #fff; border-radius: var(--radius); padding: 0.35rem; }
.qr svg { width: 100%; height: 100%; }
.holen-qr p { font-size: var(--fs-s); color: var(--stage-ink); }
.holen-qr p b { display: block; font-weight: 600; margin-bottom: var(--sp-1); font-size: var(--fs-b); }

/* ---------- Fuß: Kacheln ---------- */
.fuss { padding-bottom: var(--margin); }
.fuss-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-2); }
.fk { position: relative; border-radius: var(--radius); background: var(--surface); padding: var(--sp-5); min-height: 13.75rem; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-5); }
.fk-satz { grid-column: 1 / span 4; }
.fk-satz p:first-child { font-size: var(--fs-l); line-height: 1.25; font-weight: 500; max-width: 18ch; }
.fk-satz .klein { color: var(--muted); }
.fk-nav { grid-column: 5 / span 3; justify-content: flex-start; }
.fk-recht { grid-column: 8 / span 2; }
.fk-post { grid-column: 10 / span 3; }
.fk ul { display: grid; gap: var(--sp-1); }
.fk ul a, .fk-post a, .sprache a { text-decoration: none; padding-block: var(--sp-1); display: inline-block; transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .fk ul a:hover, .fk-post a:hover, .sprache a:hover { color: var(--accent-hover); } }
.sprache { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); color: var(--muted); }
.sprache [aria-current] { color: var(--ink); font-weight: 600; }
.fk .titel { color: var(--muted); }
.fk-post .mail { font-size: var(--fs-l); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.06em; overflow-wrap: anywhere; }
.fk-marke { grid-column: 1 / span 8; min-height: 21rem; background: var(--stage); color: var(--stage-ink); overflow: hidden; justify-content: flex-end; }
.fk-marke .wortmarke { font-size: clamp(3rem, 0.8rem + 7.6vw, 10rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.85; position: relative; z-index: 1; }
/* Startseite: Die Figur winkt schon im Schluss direkt darüber; der Fuß schließt mit der Wortmarke allein. */
.seite-start .fk-marke .figur-fuss { display: none; }
.fk-marke .figur-fuss { position: absolute; width: clamp(10rem, 15vw, 15rem); right: clamp(var(--sp-4), 3vw, var(--sp-7)); bottom: var(--sp-3); }
.fk-los { grid-column: 9 / span 4; min-height: 21rem; background: var(--accent); color: var(--accent-ink); text-decoration: none; transition: background-color var(--t-hover) ease; }
.fk-los b { font-size: var(--fs-l); font-weight: 600; line-height: 1.15; }
.fk-los svg { width: 4rem; height: 4rem; align-self: flex-end; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .fk-los:hover { background: var(--accent-hover); } .fk-los:hover svg { transform: translate(6px, -6px); } }
.fk-los:focus-visible { outline-color: var(--focus); }
.fuss-zeile { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); justify-content: space-between; padding: var(--sp-5) var(--sp-1) var(--sp-2); color: var(--muted); font-size: var(--fs-s); }
.fuss-zeile a { color: var(--ink); }

/* ---------- Download: Hero mit Stores und QR, „Das erwartet dich“ ---------- */
.hero-download .hero-unter .lead { max-width: 28ch; }
.anweisung { margin-top: var(--sp-5); font-weight: 600; font-size: var(--fs-b); }
.stores-gross { margin-top: var(--sp-3); }
.stores-gross img { height: 4rem; }
.hero-download .preis { margin-top: var(--sp-4); color: var(--muted); max-width: 40ch; }
.weiter { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin-top: var(--sp-3); }
.weiter .verweis { font-size: var(--fs-b); padding-block: var(--sp-2); }
.qr-block { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); align-items: center; margin-top: var(--sp-6); max-width: 26rem; }
.qr-block .qr { width: 8.5rem; height: 8.5rem; }
.qr-block p { font-size: var(--fs-s); color: var(--muted); }
.qr-block p b { display: block; color: var(--ink); font-weight: 600; margin-bottom: var(--sp-1); }
.hero-download .hero-karte [data-ui].liste { width: 100%; }
.teile { display: grid; gap: var(--sp-2); }
.teil { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.teil-text { grid-column: 1 / span 5; padding-block: var(--sp-6); }
.teil-text h3 { font-size: var(--fs-l); line-height: 1.1; letter-spacing: -0.015em; }
.teil-text p { margin-top: var(--sp-3); max-width: 38ch; }
.teil-text .hinweis { margin-top: var(--sp-2); font-size: var(--fs-s); color: var(--light-muted); }
.teil-buehne { grid-column: 7 / -1; background: var(--stage); border-radius: var(--radius); min-height: clamp(18rem, 24vw, 24rem); display: grid; place-items: center; padding: clamp(var(--sp-5), 2.5vw, var(--sp-7)); }
.teil-buehne > * { width: min(100%, 28rem); }
/* Rezepte: drei echte Fotos groß bis an die Rahmenkante, keine Bühne nötig */
.teil-buehne-fotos { background: none; padding: 0; min-height: 0; }
.teil-buehne-fotos > .teil-fotos { width: 100%; }
.teil-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.teil-fotos figure { margin: 0; }
.teil-fotos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.teil-fotos figcaption { margin-top: var(--sp-2); font-size: var(--fs-s); font-weight: 600; line-height: 1.3; color: var(--light-ink); }
[data-ui].liste-klein { padding: 0.75rem; }
[data-ui].liste-klein ul { margin-top: 0.45rem; }
[data-ui].kochen-klein { border-radius: 18px; }

/* ---------- Tablet ---------- */
@media (max-width: 1099px) {
  .kopf nav ul { gap: var(--sp-5); }
  .hero-raster { min-height: 0; grid-template-rows: auto auto auto; }
  .hero-unter { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-block: var(--sp-6) 0; }
  .hero-unter > .lead, .hero-unter > .handlung, .hero-unter > .preis { grid-column: 1 / span 7; }
  .hero-unter .probier { grid-column: 8 / span 5; grid-row: 1 / span 3; margin-top: 0; }
  .wahl { max-width: none; }
  .buehne { grid-column: 1 / -1; grid-row: 3; margin-top: var(--sp-7); margin-left: calc(-1 * var(--margin)); padding-left: var(--margin);
    min-height: 34rem; grid-template-columns: minmax(0, 1fr) 21rem; }
  .buehne::before { left: 0; }
  /* Festgehaltenes Fragment: bis 1099 px (Tablet und Handy) folgt jedem Satz sein Zustand */
  .arbeit .raster { display: flex; flex-direction: column; align-items: stretch; }
  .arbeit-text, .arbeit-buehne { display: contents; }
  .schritt { min-height: 0; padding-block: 0; justify-content: flex-start; }
  .schritt h3 { color: var(--light-ink); font-size: var(--fs-l); line-height: 1.15; letter-spacing: -0.015em; max-width: 24ch; }
  .schritt p { font-size: var(--fs-b); line-height: 1.5; margin-top: var(--sp-4); }
  .zustand { position: static; opacity: 1; visibility: visible; padding: clamp(var(--sp-5), 4vw, var(--sp-7)) var(--sp-4) var(--sp-4); margin: var(--sp-5) 0 var(--sp-8); background: var(--stage); border-radius: var(--radius); }
  .zustand > * { transform: none !important; }
  .schritt[data-zustand="scan"] { order: 1; } .zustand[data-zustand="scan"] { order: 2; }
  .schritt[data-zustand="liste"] { order: 3; } .zustand[data-zustand="liste"] { order: 4; }
  .schritt[data-zustand="kochen"] { order: 5; } .zustand[data-zustand="kochen"] { order: 6; margin-bottom: 0; }
  .zeile .art, .tafel-spalten .s-art { display: none; }
  .zeile .name, .tafel-spalten .s-name { grid-column: 1 / span 6; }
  .zeile .w-kcal, .tafel-spalten .s-kcal { grid-column: 7 / span 2; }
  .zeile .w-eiweiss, .tafel-spalten .s-eiweiss { grid-column: 9 / span 2; }
  .zeile .kh-block, .tafel-spalten .s-kh { grid-column: 11 / span 2; }
  .detail figure { grid-column: 1 / span 6; }
  .detail .text { grid-column: 7 / span 6; }
  .d-werte { grid-template-columns: repeat(2, minmax(0, max-content)); }
  .abschnitt-kopf h2, .abschnitt-kopf > p, .tag-kopf > div { grid-column: 1 / -1; }
  .arbeit .abschnitt-kopf h2, .arbeit .abschnitt-kopf > p { grid-column: 1 / -1; }
  .abschnitt-kopf > p { margin-top: var(--sp-4); }
  .tag-kopf > .knopf { grid-column: 1 / -1; justify-self: start; margin-top: var(--sp-5); }
  .tage button { text-align: center; justify-items: center; padding-inline: var(--sp-1); }
  .tag-panel { grid-template-columns: minmax(0, 1fr) 19.5rem; gap: var(--sp-4); }
  .band { grid-template-columns: 3.9rem 2.75rem minmax(0, 1fr); grid-template-areas: "zeit bild was" "zeit bild werte"; column-gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .band img { width: 2.75rem; height: 2.75rem; }
  .band .werte { display: flex; gap: var(--sp-3); justify-items: start; }
  .band .werte span + span { font-size: inherit; }
  .fragen-kopf { grid-column: 1 / -1; position: static; margin-bottom: var(--sp-6); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .fragen-kopf h2 { grid-column: 1 / span 6; }
  .fragen-kopf .hinweis-gesundheit { grid-column: 7 / span 6; margin-top: 0; max-width: none; }
  .kacheln { grid-column: 1 / -1; }
  .holen-text { grid-column: 1 / -1; }
  .holen-buehne { grid-column: 1 / -1; margin-left: calc(-1 * var(--margin)); padding-left: calc(var(--margin) + var(--sp-6)); }
  .holen-buehne::before { left: 0; }
  .hero-download .hero-unter { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero-download .hero-unter > * { grid-column: 1 / span 7; }
  .hero-download .hero-unter > .qr-block { grid-column: 8 / span 5; grid-row: 1 / span 5; align-self: start; grid-template-columns: 1fr; margin-top: 0; }
  .teil-text { grid-column: 1 / span 6; }
  .teil-buehne { grid-column: 7 / -1; }
  .fk-satz { grid-column: 1 / span 6; }
  .fk-nav { grid-column: 7 / span 6; }
  .fk-recht { grid-column: 1 / span 6; }
  .fk-post { grid-column: 7 / span 6; }
  .fk-marke { grid-column: 1 / -1; }
  .fk-los { grid-column: 1 / -1; min-height: 11rem; }
  .seite-start .fk-marke { min-height: 13rem; }
}

/* ---------- Handy: eigene Komposition ---------- */
@media (max-width: 599px) {
  :root { --kopf-h: 4.5rem; }
  .kopf { gap: var(--sp-4); }
  .kopf .marke { width: 3rem; height: 3rem; }
  .kopf .nur-breit { display: none; }
  .kopf > .knopf { display: none; }
  /* Hero: Titel, Satz, Handlung; dann die Bühne mit Figur und Wahl nebeneinander und der Karte darunter.
     So stehen Antwortzeile, Figur und Wahl zusammen im ersten Bild. */
  .hero-raster { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: none; column-gap: var(--sp-3); padding-top: var(--sp-5);
    grid-template-areas: "titel titel" "lead lead" "handlung handlung" "figur frage" "figur wahl" "karte karte" "beleg beleg" "preis preis" "bewertung bewertung"; }
  .hero h1 { grid-area: titel; font-size: min(9.3vw, 2.4rem); line-height: 1.04; letter-spacing: -0.03em; margin-left: 0; }
  .hero-unter, .hero-unter .probier, .buehne { display: contents; }
  .hero-unter > *, .hero-unter .probier > *, .buehne > * { grid-column: auto; grid-row: auto; }
  .hero-unter > .lead { grid-area: lead; margin-top: var(--sp-4); max-width: none; font-size: var(--fs-b); line-height: 1.4; }
  .hero-unter > .handlung { grid-area: handlung; margin-top: var(--sp-4); }
  .hero-unter > .preis { grid-area: preis; margin-top: var(--sp-4); padding-bottom: var(--sp-6); }
  .hero-unter > .preis + .preis { grid-area: bewertung; margin-top: var(--sp-2); }
  .hero-unter > .preis:has(+ .preis) { padding-bottom: 0; }
  .buehne::before { grid-column: 1 / -1; grid-row: 4 / 8; margin-inline: calc(-1 * var(--margin)); margin-top: var(--sp-5); clip-path: none; border-radius: 0; position: static; inset: auto; z-index: 0; }
  /* Diese Teile liegen auf der Bühne; der eigene Grund in Bühnenfarbe macht das auch für Messgeräte sichtbar. */
  .hero-unter .probier > .probier-frage { grid-area: frage; align-self: end; margin-top: var(--sp-7); font-size: var(--fs-s); position: relative; z-index: 1; color: var(--stage-ink); background: var(--stage); }
  .hero-unter .probier > .wahl { grid-area: wahl; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); padding: 3px; align-self: start; position: relative; z-index: 1; background: var(--stage); }
  .wahl button[aria-checked="true"] { outline-color: var(--light-ink); }
  .buehne > .figur-hero { grid-area: figur; align-self: end; height: auto; padding: var(--sp-7) 0 var(--sp-2); position: relative; z-index: 1; }
  .figur-hero img, .figur-hero video { max-height: 11rem; }
  .film-knopf { top: var(--sp-6); bottom: auto; width: 2.25rem; height: 2.25rem; }
  .film-knopf svg { width: 0.95rem; height: 0.95rem; }
  .buehne > .hero-karte { grid-area: karte; align-self: start; padding: var(--sp-3) 0 0; position: relative; z-index: 1; }
  .hero .karte .foto { aspect-ratio: auto; background: none; }
  .hero .karte .foto img { display: none; }
  .hero .karte .foto .titel { position: static; background: var(--ui-card); font-size: 1.05rem; padding: 0.7rem 1rem; }
  [data-ui] .makros b { font-size: 1.25rem; }
  [data-ui] .rest { padding: 0.8rem 0.9rem; }
  [data-ui] .rest p { font-size: 0.98rem; }
  [data-ui] .portion { padding: 0.6rem 0.9rem; }
  .hero-unter .probier > .beleg { grid-area: beleg; margin: 0; padding: var(--sp-3) 0 var(--sp-5); position: relative; z-index: 1; color: var(--stage-muted); background: var(--stage); max-width: none; }
  .hero .handlung .knopf { flex: 1 1 auto; }
  .abschnitt { padding-block: var(--sp-9); }
  .tafel-spalten, .zeile-knopf { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); padding-inline: var(--sp-4); }
  .zeile-knopf { min-height: 4rem; }
  .tafel-spalten .s-name, .zeile .name { grid-column: 1; }
  .zeile .w-kcal, .zeile .w-eiweiss, .tafel-spalten .s-kcal, .tafel-spalten .s-eiweiss { display: none; }
  .zeile .kh-block, .tafel-spalten .s-kh { grid-column: 2; }
  .zeile .kh-block { min-width: 5.25rem; }
  .detail { grid-template-columns: 1fr; padding: 0 var(--sp-4) var(--sp-5); row-gap: var(--sp-4); }
  .detail figure, .detail .text { grid-column: 1; }
  .tafel-fuss ul, .tafel-fuss .quelle { grid-column: 1 / -1; }
  .tafel-fuss ul { flex-direction: column; }
  .tafel-fuss .quelle { margin-top: var(--sp-5); }
  .tag-kopf > .knopf { display: none; }
  .tage { gap: 4px; }
  .tage button { min-height: 3.5rem; padding: var(--sp-2) 0.1rem; }
  .tage button b { font-size: var(--fs-s); }
  .tag-panel { grid-template-columns: 1fr; gap: var(--sp-4); }
  .tag-panel .ringe { order: -1; }
  .band { grid-template-columns: 3.4rem 2.5rem minmax(0, 1fr); padding: var(--sp-3); column-gap: var(--sp-3); }
  .band img { width: 2.5rem; height: 2.5rem; }
  .band .werte { font-size: var(--fs-s); }
  .kachel summary { min-height: 4rem; padding: var(--sp-4); }
  .antwort { padding: 0 var(--sp-4) var(--sp-5); }
  .fragen-kopf { display: contents; }
  .fragen h2 { grid-column: 1 / -1; margin-bottom: var(--sp-6); }
  .kacheln { order: 1; }
  .fragen-kopf .hinweis-gesundheit { grid-column: 1 / -1; order: 2; margin-top: var(--sp-7); }
  .holen .stores img { height: 3.375rem; }
  .holen-buehne { grid-template-columns: 1fr; min-height: 0; padding: var(--sp-6) var(--margin) var(--sp-4); margin-inline: calc(-1 * var(--margin)); }
  .holen-buehne::before { inset: 0; clip-path: none; }
  .holen-qr { display: none; }
  .figur-holen img { width: 11rem; }
  .hero-download .hero-raster { grid-template-areas: "titel titel" "lead lead" "anweisung anweisung" "stores stores" "preis preis" "weiter weiter" "figur figur" "karte karte"; }
  .hero-download .hero-unter > .anweisung { grid-area: anweisung; }
  .hero-download .hero-unter > .stores-gross { grid-area: stores; }
  .hero-download .hero-unter > .preis { grid-area: preis; padding-bottom: 0; }
  .hero-download .hero-unter > .weiter { grid-area: weiter; padding-bottom: var(--sp-2); }
  .stores-gross img { height: 3.375rem; }
  .qr-block { display: none; }
  .hero-download .buehne::before { grid-row: 7 / 9; }
  .hero-download .buehne > .figur-hero { grid-area: figur; justify-self: start; padding-top: var(--sp-6); }
  .hero-download .figur-hero img, .hero-download .figur-hero video { max-height: 13rem; }
  .hero-download .buehne > .hero-karte { grid-area: karte; padding-top: var(--sp-2); padding-bottom: var(--sp-5); }
  .teil { row-gap: var(--sp-4); }
  .teil-text, .teil-buehne { grid-column: 1 / -1; }
  .teil-text { padding-block: var(--sp-5) 0; }
  .teil-buehne { min-height: 0; padding: var(--sp-5) var(--sp-4); }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .fk { min-height: 0; padding: var(--sp-5) var(--sp-4); }
  .fk-marke { grid-column: 1 / -1; order: -2; min-height: 15rem; }
  .fk-marke .figur-fuss { width: 8.5rem; right: var(--sp-3); }
  .seite-start .fk-marke { min-height: 9rem; }
  .fk-los { grid-column: 1 / -1; order: -1; min-height: 8rem; }
  .fk-satz, .fk-nav, .fk-recht, .fk-post { grid-column: 1 / -1; }
}

/* ---------- Bewegung: nur mit Skript und ohne Wunsch nach weniger Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js .hero [data-line] { transform: translateY(105%); animation: zeile-hoch 900ms var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i) * 110ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: auftauchen 650ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js .hero .buehne { clip-path: inset(100% calc(-1 * var(--bleed)) 0 0); animation: buehne-auf 1000ms var(--ease-in-out) 150ms forwards; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); transition-delay: var(--d, 0ms); }
  .js [data-reveal].ist-da { opacity: 1; transform: none; }
  .js [data-reihe] > * { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 750ms var(--ease-expo); transition-delay: calc(var(--n, 0) * 55ms); }
  .js [data-reihe].ist-da > * { opacity: 1; transform: none; }
  .js .tag-plan:not(.ist-da) .ring-wert, .js .teil:not(.ist-da) .ring-wert { stroke-dasharray: 0 264; }
  .zustand > [data-ui] { transform: scale(0.97) translateY(10px); transition: transform 1000ms var(--ease-expo); }
  .zustand.ist-aktiv > [data-ui] { transform: none; }
  /* Foto-Erfassung: Rahmen fasst, dann erscheinen die Marker nacheinander, dann das Ergebnis */
  .lauf .scan .ecke { transition: transform 700ms var(--ease-expo), opacity 400ms ease; }
  .lauf .scan:not(.ist-erfasst) .ecke { transform: scale(1.35); opacity: 0; }
  .lauf .scan .punkt, .lauf .scan .marke, .lauf .scan .zeiger line { transition: opacity 360ms ease, transform 520ms var(--ease-expo); transition-delay: calc(500ms + var(--m, 0) * 260ms); }
  .lauf .scan:not(.ist-erfasst) .punkt { transform: scale(0.5); opacity: 0; }
  .lauf .scan:not(.ist-erfasst) .marke, .lauf .scan:not(.ist-erfasst) .zeiger line { opacity: 0; }
  .lauf .scan:not(.ist-erfasst) .marke { transform: translateY(-50%) translateX(-6px); }
  .lauf .scan:not(.ist-erfasst) .marke.links { transform: translate(-100%, -50%) translateX(6px); }
  .lauf .scan .ergebnis { transition: opacity 420ms ease 1350ms, transform 620ms var(--ease-expo) 1350ms; }
  .lauf .scan:not(.ist-erfasst) .ergebnis { opacity: 0; transform: translateY(10px); }
  /* Einkaufsliste: Posten kommen nach Abteilungen, dann hakt die App den ersten ab */
  .lauf .liste.auf-buehne li { transition: opacity 360ms ease, transform 520ms var(--ease-expo); transition-delay: calc(200ms + var(--n, 0) * 70ms); }
  .lauf .liste.auf-buehne:not(.ist-sortiert) li { opacity: 0; transform: translateX(-10px); }
  .js .tag-panel.ist-neu .band { animation: auftauchen 520ms var(--ease-out) backwards; }
  .js .tag-panel.ist-neu .band:nth-child(2) { animation-delay: 60ms; }
  .js .tag-panel.ist-neu .band:nth-child(3) { animation-delay: 120ms; }
  .js .tag-panel.ist-neu .band:nth-child(4) { animation-delay: 180ms; }
  .js .tag-panel.ist-neu .ring-wert { animation: ring-auf 1000ms var(--ease-expo) backwards; }
  .js .detail:not([hidden]) > * { animation: auftauchen 560ms var(--ease-out) backwards; }
  .js .detail:not([hidden]) > .text { animation-delay: 80ms; }
  .kachel[open] .antwort { animation: auftauchen 420ms var(--ease-out); }
}
@keyframes zeile-hoch { to { transform: none; } }
/* Sicherheitsnetz: läuft site.js nicht, zeigt die Seite nach 2,5 s alles */
.ohne-auftritt [data-reveal], .ohne-auftritt [data-reihe] > * { opacity: 1 !important; transform: none !important; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ring-auf { from { stroke-dasharray: 0 264; } }
@keyframes buehne-auf { to { clip-path: inset(0 calc(-1 * var(--bleed)) 0 0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}