/* Design Tokens (§5) – einzige Quelle für visuelle Werte */
:root {
  --color-bg: #fafaf9;
  --color-surface: #ffffff;
  --color-surface-subtle: #f5f5f4;
  --color-text: #1c1917;
  --color-text-muted: #57534e;
  --color-border: #e7e5e4;
  --color-border-strong: #d6d3d1;
  --color-primary: #ea580c;
  --color-primary-strong: #c2410c;
  --color-primary-tint: #fff7ed;
  --color-mark: #fed7aa;
  --color-primary-ink: #ffffff;
  --color-secondary: #1c1917;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;
  --color-danger-tint: #fef2f2;
  --color-ember: #f59e0b;
  --color-glow: rgb(194 65 12 / .6);
  --color-cook-veil: rgb(28 25 23 / .6);
  --color-overlay-line: #ffffff26;
  --color-overlay-muted: #a8a29e;
  --color-info: #1d4ed8;
  --color-info-tint: #eff6ff;
  --color-info-tint-hover: #dbeafe;
  --color-focus: #1d4ed8;

  --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-xs: .78rem;
  --font-size-sm: .9rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: clamp(1.375rem, 3vw, 2rem);
  --font-size-2xl: clamp(1.75rem, 4vw, 2.75rem);
  --font-size-body: clamp(.9375rem, 1.5vw, 1rem);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.7;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgb(28 25 23 / .07);
  --shadow-md: 0 6px 24px rgb(28 25 23 / .10);

  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;

  --duration-fast: 140ms;
  --duration-normal: 220ms;

  --container-md: 46rem;
  --header-h: 56px;
  --header-offset: 68px;
  --touch-target-min: 44px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-bg);
  min-width: 0;
}

/* Scroll Ownership (§8): Viewport = primärer Scroll-Container, keine Nest-Scrolls */
.main { display: block; }
.container { max-width: var(--container-md); margin-inline: auto; padding: 0 var(--space-4); min-width: 0; }
[id] { scroll-margin-top: var(--header-offset); }
/* `hidden` schlägt immer durch (sonst gewinnen display-Regeln wie Desktop-Grid/Buttons) */
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-4); top: -60px; background: var(--color-text); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: var(--z-toast); transition: top var(--duration-fast); }
.skip-link:focus { top: var(--space-2); color: #fff; }

/* AppShell Header (Sticky Ebene 1, §9) */
.app-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-text); color: #fafaf9; transition: box-shadow var(--duration-normal), background var(--duration-normal); }
.app-header.is-scrolled { box-shadow: var(--shadow-md); }
.app-header__inner { max-width: var(--container-md); margin-inline: auto; min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); }
.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-bold); color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.brand:hover .brand__text { text-decoration: underline; text-underline-offset: 3px; }
.brand__text { letter-spacing: .01em; }
.brand__dot { color: var(--color-primary); }
.offline-badge { margin: 0; font-size: var(--font-size-xs); background: var(--color-warning); color: #fff; border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); }
.offline-badge:not([hidden]) { animation: offline-pulse 2.4s ease-in-out infinite; }
@keyframes offline-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

/* LocalNavigation als Kapitelindex: Bäcker-Timeline mit Glut (Overdrive) */
.local-nav { margin-top: var(--space-6); }
.local-nav__inner { display: grid; counter-reset: chapter; border-top: 1px solid var(--color-border); position: relative; --nav-progress: 0; }
/* Schiene + Fortschritts-Faden */
.local-nav__inner::before { content: ""; position: absolute; left: 19px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--color-border); pointer-events: none; }
.local-nav__inner::after { content: ""; position: absolute; left: 19px; top: 14px; width: 2px; border-radius: 2px; background: linear-gradient(var(--color-primary-strong), var(--color-ember)); height: calc(100% - 28px); transform: scaleY(var(--nav-progress)); transform-origin: top center; transition: transform var(--duration-normal); pointer-events: none; }
.local-nav a { counter-increment: chapter; position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target-min); padding: var(--space-2) var(--space-1); text-decoration: none; color: var(--color-text); font-weight: var(--font-weight-medium); border-bottom: 1px solid var(--color-border); transition: background var(--duration-normal), transform var(--duration-normal); }
.local-nav a::before { content: counter(chapter, decimal-leading-zero); flex: none; width: 38px; height: 38px; display: grid; place-items: center; position: relative; z-index: 1; font-family: var(--font-family-mono); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-primary-strong); font-variant-numeric: tabular-nums; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 50%; transition: background var(--duration-normal), color var(--duration-normal), border-color var(--duration-normal), transform var(--duration-normal), box-shadow var(--duration-normal); }
.local-nav a:hover { background: var(--color-surface-subtle); }
.local-nav a:hover::before { border-color: var(--color-primary); transform: translateY(-1px); }
.local-nav a[aria-current="true"] { font-weight: var(--font-weight-semibold); background: var(--color-primary-tint); box-shadow: 0 10px 22px -16px var(--color-glow); }
.local-nav a[aria-current="true"]::before { background: var(--color-primary-strong); border-color: var(--color-primary-strong); color: #fff; transform: scale(1.1); box-shadow: 0 6px 16px -6px var(--color-glow), 0 0 0 5px var(--color-primary-tint), 0 0 18px var(--color-glow); }
/* View-Transitions-Morph für den Aktiv-Wechsel (progressive Enhancement) */
::view-transition-group(nav-active) { animation-duration: var(--duration-normal); }
@media (prefers-reduced-motion: reduce) {
  .local-nav__inner::after, .local-nav a, .local-nav a::before { transition: none; }
}

/* PageHeader: Titel führt, Fakten darunter, eine klare Primary Action */
.page-header { padding: var(--space-8) 0 var(--space-2); display: grid; gap: var(--space-4); }
/* Kopf: Titel links, Badges rechts (Desktop) – mobil gestapelt */
.head-top { display: grid; gap: var(--space-4); }
.head-side { display: grid; gap: var(--space-2); align-content: start; }
.tag-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
.tag-badge { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); background: var(--color-surface-subtle); border: 1px solid var(--color-border); color: var(--color-text-muted); white-space: nowrap; }
h1 { font-size: var(--font-size-2xl); line-height: var(--line-height-tight); margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.lede { color: var(--color-text-muted); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); margin: 0 0 var(--space-4); max-width: 60ch; }
.meta { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: 0; margin: 0 0 var(--space-4); }
.meta li { display: grid; align-content: start; }
.meta li + li { border-left: 1px solid var(--color-border); padding-left: var(--space-4); }
.meta strong { font-size: var(--font-size-md); }
.meta span { font-size: var(--font-size-xs); color: var(--color-text-muted); }
/* Diät-Badges: Text + Symbol, nie nur Farbe (§37) */
.diet-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.diet-badge { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border-radius: var(--radius-full); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); white-space: nowrap; }
.diet-badge--yes { background: #f0fdf4; border-color: #bbf7d0; color: var(--color-success); }
/* Standard-Badges im Editor: grau = aus, farbig = an (grün bei ✓, gelb bei !) */
.diet-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.diet-pick { font: inherit; font-weight: var(--font-weight-semibold); min-height: var(--touch-target-min); cursor: pointer; }
.diet-badge.is-off { background: var(--color-surface-subtle); border-color: var(--color-border); color: var(--color-text-muted); }
.diet-badge--no { background: #fffbeb; border-color: #fde68a; color: var(--color-warning); }

/* PageActions: Hero-CTA ohne Box – Gruppierung über Nähe, eine dominante Action */
.page-actions { display: grid; gap: var(--space-2); }
.btn--hero { width: 100%; font-size: 1.05rem; padding: var(--space-4) var(--space-5); }
.btn--hero svg { flex-shrink: 0; }
.btn--edit { width: 100%; }
.btn--danger { color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger-tint); border-color: var(--color-danger); color: var(--color-danger); }
.servings { display: grid; gap: var(--space-2); min-width: 0; }
.servings__label { font-weight: var(--font-weight-semibold); }
.muted { color: var(--color-text-muted); font-weight: var(--font-weight-normal); }
.stepper { display: flex; align-items: stretch; gap: var(--space-2); }
.stepper button { width: var(--touch-target-min); height: var(--touch-target-min); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-subtle); font-size: 1.4rem; cursor: pointer; }
.stepper input[type="text"], .stepper input:not([type]) , #servingsInput { width: 5rem; text-align: center; font: inherit; font-weight: var(--font-weight-bold); border: 1px solid var(--color-border); border-radius: var(--radius-md); min-height: var(--touch-target-min); }
#servingsRange { width: 100%; min-height: var(--touch-target-min); accent-color: var(--color-primary); }

/* Buttons (§21): genau eine dominante Primary Action pro Kontext */
.btn { min-height: var(--touch-target-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-md); border: 1px solid transparent; padding: var(--space-3) var(--space-5); font: inherit; font-weight: var(--font-weight-semibold); cursor: pointer; text-decoration: none; }
.btn--primary { background: var(--color-primary-strong); color: var(--color-primary-ink); align-self: center; }
.btn--primary:hover { filter: brightness(.96); }
.btn--secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--light { border-color: #ffffff55; }
.btn--big { flex: 1; font-size: 1.1rem; padding: var(--space-4); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--color-text-muted); padding: var(--space-2) var(--space-1); gap: var(--space-1); }
.btn--quiet:hover { color: var(--color-primary-strong); background: var(--color-primary-tint); border-color: var(--color-mark); }
.btn--quiet svg { flex-shrink: 0; }

/* Content-Sections: Editorial mit Haarlinien statt Boxen (§24) */
.section { margin: var(--space-10) 0; }
.section__head { margin-bottom: var(--space-2); }
.section__head h2, h2 { font-size: var(--font-size-xl); line-height: var(--line-height-tight); margin: 0 0 var(--space-2); overflow-wrap: anywhere; }

.ingredients { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.ingredients li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); min-height: 3.5rem; }
.ingredients li:last-child { border-bottom: 0; }
/* Listen-Summen: 2-spaltige Zeilen (keine Checkbox-Spalte, Menge ohne Geisterspalte) */
#planSum li { grid-template-columns: minmax(0, 1fr) auto; }
#planSum .ing__right { grid-template-columns: auto; }
.ing__name { min-width: 0; overflow-wrap: anywhere; }
/* Mengenspalte: Mengen rechtsbündig, Info-/Stern-Buttons rechts daneben */
.ing__right { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.ing__right .qty { min-width: 7ch; text-align: right; }
/* Mengen fließen natürlich im Text, kein Highlight (§1: visuelle Unruhe minimieren) */
.qty { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); white-space: nowrap; }
/* Info-Button: eine Komponente, ein Look – 26px Optik, 44px Trefferfläche via ::after */
.info-btn { width: 26px; height: 26px; min-height: 26px; flex: 0 0 auto; grid-column: 2; border-radius: 50%; border: 1px solid var(--color-info); background: var(--color-info-tint); color: var(--color-info); line-height: 0; cursor: pointer; display: inline-grid; place-items: center; position: relative; padding: 0; transition: background var(--duration-fast), transform var(--duration-fast), border-color var(--duration-fast); }
.info-btn svg { width: 14px; height: 14px; display: block; }
.info-btn::after { content: ""; position: absolute; inset: -9px; }
.info-btn:hover { background: var(--color-info-tint-hover); border-color: var(--color-info); }
.info-btn:active { transform: scale(.94); }
/* Play-Button: gleiche Geometrie wie info-btn, aber Orange – ein Icon, ein Stil überall */
.play-btn { width: 26px; height: 26px; min-height: 26px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--color-primary-strong); background: var(--color-primary-tint); color: var(--color-primary-strong); line-height: 0; cursor: pointer; display: inline-grid; place-items: center; position: relative; padding: 0; transition: background var(--duration-fast), transform var(--duration-fast), border-color var(--duration-fast); }
.play-btn svg { width: 14px; height: 14px; display: block; }
.play-btn::after { content: ""; position: absolute; inset: -9px; }
.play-btn:hover { background: var(--color-mark); border-color: var(--color-primary-strong); }
.play-btn:active { transform: scale(.94); }
/* Stern-Button: gleiche Geometrie wie info-btn, aber golden – allgemeine Tipps aus data/tipps.json */
.star-btn { width: 26px; height: 26px; min-height: 26px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--color-warning); background: #fef3c7; color: #b45309; line-height: 0; cursor: pointer; display: inline-grid; place-items: center; position: relative; padding: 0; transition: background var(--duration-fast), transform var(--duration-fast), border-color var(--duration-fast); }
.star-btn svg { width: 14px; height: 14px; display: block; }
.star-btn::after { content: ""; position: absolute; inset: -9px; }
.star-btn:hover { background: #fde68a; border-color: #b45309; }
.star-btn:active { transform: scale(.94); }
/* Anzahl-Badge bei mehreren Tipps (ein Stern-Button öffnet den Sammel-Dialog) */
.star-btn__count { position: absolute; right: -7px; bottom: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-full); background: #b45309; color: #fff; font-size: .68rem; font-weight: var(--font-weight-bold); line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; }
/* Untertitel im Sammel-Dialog (mehrere Tipps) */
.sheet__sub { font-size: var(--font-size-md); margin: var(--space-3) 0 0; color: #b45309; }
.sheet__sub:first-child { margin-top: 0; }
/* Editor: Stern-Button ohne Zuweisung = neutral, mit Zuweisung = golden leuchtend */
.ed-star-btn:not(.is-set), .ed-step-star-btn:not(.is-set) { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted); }
.ed-star-btn:not(.is-set):hover, .ed-step-star-btn:not(.is-set):hover { border-color: var(--color-warning); color: #b45309; background: #fef3c7; }
.ed-star-btn.is-set, .ed-step-star-btn.is-set { background: #fef3c7; border-color: #b45309; color: #b45309; box-shadow: 0 0 0 3px #fef3c7, 0 0 14px rgb(180 83 9 / .45); }
/* Editor: zentrale Tipp-Zeilen (Titel + Text + Entfernen) */
.ed-row--star { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface-subtle); }
.ed-row--star [data-f="title"] { grid-column: 1; }
.ed-row--star [data-f="text"] { grid-column: 1; min-height: 3.5rem; resize: vertical; }
.ed-row--star [data-a="rm"] { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
#edStarPick { width: 100%; font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); min-height: var(--touch-target-min); }
/* Stern-Auswahl (mehrere Tipps per Checkbox) im Editor-Dialog */
.ed-checks { display: grid; gap: var(--space-1); max-height: 16rem; overflow-y: auto; }
.ed-check { display: flex; width: auto; gap: var(--space-2); align-items: flex-start; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); cursor: pointer; }
.ed-check:hover { border-color: var(--color-warning); background: #fef3c7; }
.ed-check input { width: 1.1rem; height: 1.1rem; max-width: 1.1rem; flex: none; min-height: 0; padding: 0; border-radius: 4px; margin-top: .1rem; accent-color: #b45309; }
.ed-check span { flex: 1 1 auto; min-width: 0; }
/* LM-Manager: einzeilige Wort-Zeilen mit Mehrzahl + dezenter Häufigkeit */
.ed-row--food { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: center; }
.food-count { font-size: var(--font-size-xs); color: var(--color-text-muted); min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Inline-Chips direkt hinter dem Schritt-Titel, Text folgt danach */
.step__meta { display: inline-flex; gap: var(--space-1); vertical-align: middle; margin-left: var(--space-2); margin-right: var(--space-1); }
.step__meta .info-btn { grid-column: auto; }
.step__meta .star-btn { grid-column: auto; }
.steps li .step__text { overflow-wrap: anywhere; }
.btn--small { min-height: var(--touch-target-min); padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); }
.group-cook { flex-shrink: 0; }

/* Hefe-Toggle: natives Checkbox-Control als Switch (§22, §51) – eine Komponente, ein State */
.switch { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; min-height: var(--touch-target-min); }
.switch input { appearance: none; -webkit-appearance: none; margin: 0; width: 44px; height: 26px; flex: 0 0 auto; border-radius: var(--radius-full); background: var(--color-border-strong); border: 1px solid var(--color-border); position: relative; cursor: pointer; transition: background var(--duration-fast); }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--duration-fast); }
.switch input:checked { background: var(--color-primary); border-color: var(--color-primary); }
.switch input:checked::after { transform: translateX(20px); }

/* Mise-en-Place Board: Zutaten als abhakbares Brett – ein authored Moment (Check-Spring + Mengen-Morph) */
.mise-status { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0 var(--space-3); }
.mise-ring { display: inline-grid; place-items: center; flex: 0 0 auto; }
.mise-ring svg { grid-area: 1 / 1; display: block; }
.mise-ring__pct { grid-area: 1 / 1; font-family: var(--font-family-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1; }
.mise-status__text { display: grid; gap: 0; margin: 0; font-size: var(--font-size-sm); min-width: 0; flex: 1 1 auto; }
.mise-status__sub { color: var(--color-text-muted); font-size: var(--font-size-xs); }
/* Reset: grau, unscheinbar, nur Icon – deaktiviert statt versteckt (kein Layout-Sprung) */
.mise-status__reset { margin-left: auto; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--color-text-muted); cursor: pointer; display: inline-grid; place-items: center; position: relative; padding: 0; transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast); }
.mise-status__reset svg { width: 18px; height: 18px; display: block; }
.mise-status__reset::after { content: ""; position: absolute; inset: -6px; }
.mise-status__reset:hover:not(:disabled) { background: var(--color-surface-subtle); border-color: var(--color-border); color: var(--color-text); }
.mise-status__reset:disabled { opacity: .35; cursor: default; }
#miseRingFg { transition: stroke-dashoffset var(--duration-normal); }
.mise-board li { gap: var(--space-2); }
.mise-check { width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--radius-full); border: 2px solid var(--color-border); background: var(--color-surface); color: transparent; cursor: pointer; display: inline-grid; place-items: center; padding: 0; position: relative; transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast); }
.mise-check::after { content: ""; position: absolute; inset: -6px; }
.mise-check svg { width: 18px; height: 18px; display: block; }
.mise-check:hover { border-color: var(--color-primary); }
.mise-check.is-done { background: var(--color-primary-strong); border-color: var(--color-primary-strong); color: #fff; }
.mise-check.is-pop { animation: mise-pop var(--duration-normal) cubic-bezier(.22, 1, .36, 1); }
.mise-board li.is-done .ing__name { color: var(--color-text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.mise-board li.is-done .qty { color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
@keyframes mise-pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }

/* Steps: Gruppenkopf ohne Box (Titel + Aktion, Zeiten darunter), Schritte als Timeline */
.step-group { margin: var(--space-10) 0 0; }
.step-group__kicker { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.step-group__top { display: flex; align-items: center; gap: var(--space-3); }
.step-group__top h2 { margin: 0; min-width: 0; }
.time-badges { display: flex; flex-wrap: wrap; column-gap: var(--space-3); }
.time-chip { display: inline-flex; align-items: baseline; gap: var(--space-2); font-size: var(--font-size-sm); }
.time-chip + .time-chip::before { content: "·"; color: var(--color-text-muted); }
.time-chip__label { color: var(--color-text-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--font-weight-semibold); }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; }
.steps li { counter-increment: step; position: relative; padding: 0 0 var(--space-6) var(--space-8); line-height: var(--line-height-relaxed); overflow-wrap: anywhere; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary-strong); color: #fff; display: grid; place-items: center; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); }
.steps li::after { content: ""; position: absolute; left: 13px; top: 33px; bottom: var(--space-1); width: 2px; border-radius: 2px; background: var(--color-border); }
/* Absolviert bei aktiver Session: Pfad dicker, Grau eine Stufe intensiver */
.steps li.is-passed::after { left: 12px; width: 4px; background: var(--color-border-strong); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }

.footer { border-top: 1px solid var(--color-border); margin-top: var(--space-12); padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); }
.footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; padding-top: var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Sammlung: Rezeptliste als ruhige Zeilen, kein Kartenraster */
.home { padding: var(--space-8) 0 var(--space-4); }
.home__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-6); }
.home__title { min-width: min(100%, 28rem); flex: 1 1 18rem; }
.home__title h1 { margin-bottom: var(--space-2); }
.home__actions { flex-shrink: 0; align-self: start; padding-top: var(--space-1); }
.home__count { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.recipe-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.recipe-card { contain: layout style; content-visibility: auto; contain-intrinsic-size: auto 22rem; }
.recipe-card__inner { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; height: 100%; box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-normal), border-color var(--duration-fast), transform var(--duration-normal); animation: card-rise 520ms cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.recipe-card__inner:hover { box-shadow: var(--shadow-md); border-color: var(--color-mark); transform: translateY(-2px); }
.recipe-card__inner:active { transform: translateY(0) scale(.995); }
@keyframes card-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.recipe-card__top { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-1); }
.tag-badge--own { background: var(--color-primary-tint); border-color: var(--color-mark); color: var(--color-primary-strong); }
.recipe-card__title { font-size: var(--font-size-lg); line-height: var(--line-height-tight); margin: 0; overflow-wrap: anywhere; }
.recipe-card__lede { color: var(--color-text-muted); margin: 0; line-height: var(--line-height-relaxed); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.recipe-card__meta { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.recipe-card__meta strong { color: var(--color-text); }
.recipe-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
/* Startseite: Suche + Filter + kuratierte Entdeckung (nur Home, Tokens aus §5) */
.home__search { display: flex; align-items: center; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); margin-top: var(--space-6); box-shadow: var(--shadow-sm); }
.home__search:focus-within { border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--color-info-tint), var(--shadow-sm); }
.home__searchicon { flex: none; color: var(--color-text-muted); }
#homeSearch { flex: 1 1 auto; min-width: 0; min-height: var(--touch-target-min); border: 0; background: transparent; font: inherit; color: var(--color-text); padding: var(--space-2) 0; }
#homeSearch:focus { outline: none; }
#homeSearch::placeholder { color: var(--color-text-muted); opacity: 1; }
#homeSearch::-webkit-search-cancel-button { display: none; }
.home__clear { flex: none; width: var(--touch-target-min); height: var(--touch-target-min); border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--color-text-muted); cursor: pointer; display: grid; place-items: center; }
.home__clear:hover { background: var(--color-surface-subtle); border-color: var(--color-border); color: var(--color-text); }
.home__filters { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.home__filterrow { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.home__filterrow:empty { display: none; }
.fchip { min-height: var(--touch-target-min); display: inline-flex; align-items: center; gap: var(--space-1); border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); padding: var(--space-1) var(--space-4); cursor: pointer; }
.fchip:hover { border-color: var(--color-primary); color: var(--color-text); }
.fchip.is-on { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.fchip--diet.is-on-yes { background: #f0fdf4; border-color: var(--color-success); color: var(--color-success); }
.fchip--diet.is-on-no { background: #fffbeb; border-color: var(--color-warning); color: var(--color-warning); }
#homeFeatured { margin: var(--space-6) 0 var(--space-2); }
.feat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; display: grid; }
.feat__art { background: var(--color-primary-tint); border-bottom: 1px solid var(--color-border); display: grid; place-items: center; padding: var(--space-6); min-height: 11rem; }
.feat__body { display: grid; gap: var(--space-3); padding: var(--space-6); align-content: start; }
.feat__row { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.feat__title { font-size: var(--font-size-xl); line-height: var(--line-height-tight); margin: 0; overflow-wrap: anywhere; }
.feat__lede { color: var(--color-text-muted); line-height: var(--line-height-relaxed); margin: 0; max-width: 60ch; }
.feat__meta { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.feat__meta strong { color: var(--color-text); }
.ritual { list-style: none; margin: 0; padding: var(--space-3) 0 0; display: grid; gap: var(--space-2); border-top: 1px solid var(--color-border); }
.ritual li { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--font-size-sm); }
.ritual__n { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-primary-strong); color: #fff; display: inline-grid; place-items: center; font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); transform: translateY(.25rem); }
.ritual__t { min-width: 0; }
.ritual__t strong { display: block; font-size: var(--font-size-sm); }
.ritual__t span { color: var(--color-text-muted); }
.feat__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.home__listtitle { margin: var(--space-10) 0 var(--space-4); }
.recipe-card__art { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-1); background: var(--color-primary-tint); border-bottom: 1px solid var(--color-border); display: grid; place-items: center; min-height: 6.5rem; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.recipe-card__facts { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.home__empty { border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-6); display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.home__emptytext { margin: 0; line-height: var(--line-height-relaxed); }
@media (min-width: 800px) {
  .feat { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .feat__art { border-bottom: 0; border-right: 1px solid var(--color-border); min-height: 100%; }
}
@media (max-width: 640px) {
  .home__actions { flex-basis: 100%; padding-top: 0; }
  .home__actions .btn { width: 100%; }
}
.recipe-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; border-top: 1px solid var(--color-border); }
.recipe-list a { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-1); border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); }
.recipe-list__text { display: grid; gap: var(--space-1); min-width: 0; }
.recipe-list__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.recipe-list a:hover .recipe-list__title { color: var(--color-primary); }
.recipe-list__lede { color: var(--color-text-muted); }
.recipe-list__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.recipe-list__arrow { margin-left: auto; color: var(--color-text-muted); flex-shrink: 0; }
.backlink { margin: 0 0 var(--space-4); }
.backlink a { color: var(--color-text-muted); font-size: var(--font-size-sm); text-decoration: none; }
.backlink a:hover { color: var(--color-text); text-decoration: underline; }

/* Overlays: eine Dialog-Instanz je Zweck (§28), Layer via Tokens (§40) */
.cook { position: fixed; inset: 0; z-index: var(--z-modal); background: #1c1917; color: #fafaf9; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: contain; }
.cook[hidden] { display: none; }
.cook__top { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3); padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-4) var(--space-2); }
.cook__count { font-family: var(--font-family-mono); background: #ffffff22; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
#btnCookClose { margin-left: auto; flex-shrink: 0; }
.cook__group { color: #fdba74; font-weight: var(--font-weight-semibold); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cook__progress { flex: 0 0 auto; height: 6px; background: #ffffff22; }
.cook__progress span { display: block; height: 100%; background: var(--color-primary); width: 0; transition: width var(--duration-normal); }
/* Hochkant: Stage scrollt intern, Nav + Keys bleiben sichtbar (safe center: Anfang nie weggescrollt) */
.cook__stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; gap: var(--space-4); padding: var(--space-6); max-width: 44rem; margin-inline: auto; width: 100%; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.cook__stage h2 { font-size: clamp(1.25rem, 7vmin, 2.4rem); color: #fff; overflow-wrap: anywhere; }
.cook__stage #cookText { font-size: clamp(1.15rem, 5.5vmin, 2rem); line-height: 1.6; margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.cook__stage .qty { font-size: 1em; }
/* Zutaten-Schritt im Cooking-Mode: gleiche Mise-Komponente auf dunklem Grund */
.cook-mise { list-style: none; margin: var(--space-4) 0 0; padding: 0; font-size: clamp(1rem, 5vmin, 1.5rem); line-height: 1.55; text-align: left; }
.cook-mise li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-overlay-line); }
.cook-mise li:first-child { border-top: 1px solid var(--color-overlay-line); }
.cook-mise .ing__namecol { flex: 1 1 auto; min-width: 0; }
.cook-mise .qty { white-space: nowrap; }
.cook-mise .info-btn { vertical-align: middle; margin-left: var(--space-2); }
.cook-mise li.is-done .ing__name, .cook-mise li.is-done .qty { color: var(--color-overlay-muted); }
.cook-mise li.is-done .ing__name { text-decoration: line-through; text-decoration-thickness: 1px; }
.cook-mise li.is-done .info-btn { color: var(--color-overlay-muted); border-color: var(--color-overlay-muted); background: transparent; }
/* Info-Button im Cooking-Mode: dieselbe Komponente wie im Content (26px Optik, 44px Hit via ::after) */
.cook__stage .step__meta { margin-left: var(--space-2); }
.cook__nav { flex: 0 0 auto; display: flex; gap: var(--space-3); padding: var(--space-4); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); max-width: 44rem; margin-inline: auto; width: 100%; background: linear-gradient(transparent, var(--color-cook-veil)); justify-content: space-between; }
.cook__nav .btn--big { flex: 0 0 auto; width: var(--touch-target-min); height: var(--touch-target-min); padding: 0; border-radius: var(--radius-full); font-size: 1.2rem; }
.cook__nav .btn__label { display: none; }
.cook__nav .btn--secondary { background: transparent; color: #fff; border-color: #ffffff44; }

/* Back-to-Top: ruhiger Kreis rechts unten, erscheint erst beim Scrollen */
.to-top { position: fixed; right: max(var(--space-4), env(safe-area-inset-right)); bottom: max(var(--space-4), env(safe-area-inset-bottom)); z-index: var(--z-dropdown); width: var(--touch-target-min); height: var(--touch-target-min); border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); cursor: pointer; display: grid; place-items: center; transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast); }
.to-top[hidden] { display: none; }
.to-top:hover { background: var(--color-primary-tint); color: var(--color-primary-strong); border-color: var(--color-mark); }
.to-top:active { transform: scale(.94); }

/* Mobile Hochkant: kompakter Cooking-Header, Pfeil-Buttons in den Ecken */
@media (max-width: 600px) and (orientation: portrait) {
  .cook__top { gap: var(--space-2); padding: max(var(--space-2), env(safe-area-inset-top)) var(--space-3) var(--space-1); }
  .cook__count { font-size: var(--font-size-xs); padding: var(--space-1) var(--space-2); white-space: nowrap; }
  .cook__group { font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #btnCookClose { min-height: var(--touch-target-min); min-width: var(--touch-target-min); padding: var(--space-2); border-radius: var(--radius-full); }
  #btnCookClose .btn__label { display: none; }
  #btnCookFull { min-height: var(--touch-target-min); min-width: var(--touch-target-min); padding: var(--space-2); border-radius: var(--radius-full); }
  #btnCookFull .btn__label { display: none; }
  .cook__stage { gap: var(--space-2); padding: var(--space-4); }
  .cook__stage h2 { margin: 0; }
  .cook__nav { gap: var(--space-2); padding: var(--space-3); background: transparent; }
}
/* Sehr schmal: Gruppenlabel weglassen, nur die Schrittnummer zeigen */
@media (max-width: 480px) and (orientation: portrait) {
  .cook__group { display: none; }
}

/* Querformat mobil: alles auf eine Seite, Buttons klein in Ecken links/rechts */
@media (max-height: 520px) and (orientation: landscape) {
  .cook__top { padding: max(var(--space-2), env(safe-area-inset-top)) var(--space-4) var(--space-1); }
  .cook__stage { gap: var(--space-2); padding: var(--space-3) 5rem; max-width: 52rem; }
  .cook__stage h2 { margin: 0; }
  .cook-mise { margin-top: var(--space-2); }
  .cook-mise li { padding: var(--space-1) 0; }
  .cook__nav { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); max-width: none; width: 100%; margin: 0; padding: 0 max(var(--space-2), env(safe-area-inset-left)) 0 max(var(--space-2), env(safe-area-inset-right)); background: transparent; justify-content: space-between; align-items: center; pointer-events: none; }
  .cook__nav .btn { pointer-events: auto; flex: 0 0 auto; min-height: var(--touch-target-min); min-width: var(--touch-target-min); font-size: var(--font-size-sm); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); box-shadow: var(--shadow-md); }
  .cook__nav .btn--big { flex: 0 0 auto; font-size: var(--font-size-sm); padding: var(--space-2) var(--space-4); }
}

/* Breit und hoch genug (≥1000×700px): beschriftete Aktions-Buttons statt reiner Pfeile */
@media (min-width: 1000px) and (min-height: 700px) {
  .cook__nav .btn__label { display: inline; }
  .cook__nav .btn--big { flex: 1; width: auto; height: auto; padding: var(--space-4); border-radius: var(--radius-md); font-size: 1.1rem; }
}

.scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: rgb(0 0 0 / .55); display: grid; place-items: end center; padding: var(--space-4); }
.scrim[hidden] { display: none; }
.sheet { background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-6); max-width: 30rem; width: 100%; box-shadow: var(--shadow-md); display: grid; gap: var(--space-4); }
.sheet h2 { margin: 0; }
.sheet p { margin: 0; line-height: var(--line-height-relaxed); }
.sheet table { border-collapse: collapse; width: 100%; font-size: var(--font-size-sm); }
.sheet th, .sheet td { border: 1px solid var(--color-border); padding: var(--space-2); text-align: left; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(var(--space-4), env(safe-area-inset-bottom)); z-index: var(--z-toast); background: var(--color-text); color: #fff; padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); margin: 0; box-shadow: var(--shadow-md); }
.toast[hidden] { display: none; }

/* Browser-Flächen tragen das Design: Selektion, Links, Zahlen */
::selection { background: var(--color-mark); color: var(--color-text); }
a { text-underline-offset: 3px; }
.qty, .cook__count, .local-nav a::before { font-variant-numeric: tabular-nums; }
input { caret-color: var(--color-primary); }

/* Editor: Eingabeseite für Rezepte (Operate – scanbar, 44px-Ziele, ein System) */
.editor { padding: var(--space-8) 0 var(--space-4); }
.editor code { font-family: var(--font-family-mono); font-size: .9em; background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: 6px; padding: 0 .3em; }
.ed-group { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); margin: 0 0 var(--space-5); background: var(--color-surface); min-width: 0; }
.ed-group legend { font-weight: var(--font-weight-semibold); padding: 0 var(--space-2); }
.ed-hint { font-size: var(--font-size-sm); margin: 0 0 var(--space-4); }
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); min-width: 0; }
.field > span { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.field__hint { font-weight: var(--font-weight-normal); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.field input, .field textarea, .ed-row input, .ed-row textarea, .ed-step input, .ed-step select, .ed-step .ed-richtext { font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); min-height: var(--touch-target-min); width: 100%; min-width: 0; }
.field textarea { min-height: calc(var(--touch-target-min) * 1.5); line-height: var(--line-height-relaxed); resize: vertical; }
.ed-step .ed-richtext { min-height: calc(var(--touch-target-min) * 1.5); line-height: var(--line-height-relaxed); overflow-wrap: anywhere; }
.ed-richtext:empty::before { content: attr(data-placeholder); color: var(--color-text-muted); }
.ed-chip { display: inline-block; font-size: .85em; font-weight: var(--font-weight-semibold); border: 1px solid var(--color-border); background: var(--color-surface-subtle); border-radius: var(--radius-full); padding: 0 .55em; margin: 0 .1em; white-space: nowrap; }
/* Zutaten-Vorschläge per "#": eine Box am Caret, Tastatur + Touch */
.ed-suggest { position: fixed; z-index: var(--z-dropdown); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-1); display: grid; gap: 2px; max-height: 12rem; overflow-y: auto; min-width: 12rem; max-width: min(90vw, 20rem); }
.ed-suggest[hidden] { display: none; }
.ed-suggest__item { display: block; width: 100%; text-align: left; font: inherit; color: var(--color-text); background: transparent; border: 0; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); min-height: var(--touch-target-min); cursor: pointer; overflow-wrap: anywhere; }
.ed-suggest__item.is-active, .ed-suggest__item:hover { background: var(--color-primary-tint); }
.ed-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .ed-grid { grid-template-columns: 1fr 1fr; } .ed-grid--3 { grid-template-columns: 1.4fr 1fr 1fr; } }
.ed-inline { display: flex; gap: var(--space-2); }
.ed-inline input { flex: 1 1 0; }
.ed-rows { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.ed-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ed-row input { flex: 1 1 9rem; }
/* Badge-Indikator: ✓ oder ! wählen (aktiv = farbig wie Anzeige) */
.ed-seg { display: inline-flex; gap: var(--space-1); flex-shrink: 0; }
.ed-seg button { width: var(--touch-target-min); height: var(--touch-target-min); border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-weight: var(--font-weight-bold); cursor: pointer; }
.ed-seg button[data-ok="1"].is-on { background: #f0fdf4; border-color: #bbf7d0; color: var(--color-success); }
.ed-seg button[data-ok="0"].is-on { background: #fffbeb; border-color: #fde68a; color: var(--color-warning); }
/* Zutaten-Zeile: alles in einer Zeile (Name, Menge, Einheit, Text, Werkzeuge) */
.ed-row--ing { display: grid; grid-template-columns: minmax(0, 1.4fr) 4.2rem 5.5rem minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.ed-row--ing input { flex: none; min-width: 0; }
.ed-row--ing .ed-ing__tools { flex: none; padding: 0; flex-wrap: nowrap; }
.ed-ing__yeast { flex-basis: 100%; }
/* Editor-Vorschau: statisch, gleiche Tokens */
#edPreviewWrap { margin-top: var(--space-8); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.pv-list { list-style: none; margin: var(--space-4) 0; padding: 0; border-top: 1px solid var(--color-border); }
.pv-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.pv-group { margin-top: var(--space-6); }
.pv-group ol { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-2); line-height: var(--line-height-relaxed); }
.ed-row textarea { flex: 1 1 100%; }
.ed-group-card { border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.ed-group-card:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ed-steps { list-style: decimal; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ed-step { display: grid; gap: var(--space-2); border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface-subtle); }
.ed-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ed-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-6) 0 var(--space-4); }
/* Editor-Polish: Kategorien als Chips, Zutaten-Tools (i-Button + Alternativ-Toggle) */
.tag-input input { font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); min-height: var(--touch-target-min); width: 100%; min-width: 0; }
.tag-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-list:empty { margin: 0; }
.tag-chip { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border-radius: var(--radius-full); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); background: var(--color-surface-subtle); border: 1px solid var(--color-border); color: var(--color-text); }
.tag-chip__remove { width: 28px; height: 28px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--color-text-muted); cursor: pointer; display: inline-grid; place-items: center; position: relative; padding: 0; font-size: 1rem; line-height: 1; }
.tag-chip__remove::after { content: ""; position: absolute; inset: -8px; }
.tag-chip__remove:hover { color: var(--color-danger); background: var(--color-danger-tint); border-color: var(--color-danger); }
.ed-row--ing { align-items: stretch; }
.ed-ing__tools, .ed-step__tools { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 100%; padding-top: var(--space-1); }
/* Alternative-Button: leuchtet Orange bei vorhandener Alternative */
.ed-alt-btn.is-on { border-color: var(--color-primary-strong); background: var(--color-primary-tint); color: var(--color-primary-strong); font-weight: var(--font-weight-semibold); box-shadow: 0 0 0 3px var(--color-primary-tint), 0 0 14px var(--color-glow); }
.info-btn.is-empty { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted); }
.info-btn.is-empty:hover { border-color: var(--color-primary); color: var(--color-primary-strong); background: var(--color-primary-tint); }
.info-btn.is-filled { background: var(--color-info-tint); border-color: var(--color-info); color: var(--color-info); }
.ed-scrim__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.ed-scrim__actions .btn--primary { flex: 1 1 auto; }
#edScrimBody .field { margin-bottom: var(--space-2); }
#edScrimBody textarea { min-height: 7rem; }
.ing__namecol { min-width: 0; overflow-wrap: anywhere; }
.ing__namecol .ing__name { min-width: 0; overflow-wrap: anywhere; }
/* Toggle in Zeile 1 fixiert: eigenes Grid im Namensfeld, Text bricht hängend um */
.ing__namecol.has-switch { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); align-items: start; }

/* Desktop (≥1025px): Zutaten links sticky, Schritte rechts – Lesebreite bleibt lesbar */
@media (min-width: 1025px) {
  .container { max-width: 68rem; }
  .app-header__inner { max-width: 68rem; }
  #recipeView { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  #recipeView .page-header { grid-column: 1 / -1; }
  .section { position: sticky; top: calc(var(--header-offset) + var(--space-4)); margin: 0; }
  #groups { min-width: 0; }
  .step-group:first-child { margin-top: 0; }
  .head-top { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }
  .head-side { padding-top: var(--space-1); }
  .scrim { place-items: center; }
}

/* Reduced Motion (§36) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
  .recipe-card__inner { animation: none; }
  .offline-badge:not([hidden]) { animation: none; }
  .app-header { transition: none; }
}

/* Wartung: gesperrte Seite mit Passwort */
#wartungView { max-width: 34rem; }
.wartung__label { display: block; font-weight: var(--font-weight-bold); margin: 0 0 var(--space-1); }
.wartung__input { display: block; width: 100%; max-width: 22rem; font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); margin: 0 0 var(--space-3); min-height: var(--touch-target-min); }
.wartung__error { color: var(--color-primary-strong); font-weight: var(--font-weight-bold); margin: 0 0 var(--space-3); }
.wartung__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Header-Tabs: Rezepte / Meine Liste (+ Tipps / LM-Manager nur eingeloggt) – ein System, dunkler Grund, 44px-Ziele; mobil ≤640px Hamburger mit Vollbild-Menü */
.tabs { display: flex; gap: var(--space-1); background: #ffffff1a; border: 1px solid #ffffff26; border-radius: var(--radius-full); padding: 3px; }
.tabs__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target-min); padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); color: #fafaf9; text-decoration: none; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); white-space: nowrap; }
.tabs__link:hover { background: #ffffff22; }
.tabs__link[aria-current="page"] { background: var(--color-primary-strong); color: #fff; }
/* Abmelden-Button im selben Tab-Stil (nur eingeloggt sichtbar) */
button.tabs__link { background: none; border: 0; font: inherit; cursor: pointer; }
.tabs__count { min-width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center; border-radius: var(--radius-full); background: #fff; color: var(--color-primary-strong); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); padding: 0 var(--space-1); font-variant-numeric: tabular-nums; }
/* Hamburger + Schließen: nur mobil sichtbar (Overlay-Menü) */
.nav-toggle, .nav-close { display: none; }
@media (max-width: 640px) {
  .app-header__inner { flex-wrap: nowrap; }
  .tabs { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; flex: none; width: var(--touch-target-min); height: var(--touch-target-min); margin-left: auto; border-radius: var(--radius-md); border: 1px solid #ffffff26; background: #ffffff1a; color: #fafaf9; cursor: pointer; padding: 0; }
  .nav-toggle:hover { background: #ffffff22; }
  .offline-badge { margin-left: var(--space-2); }
  /* Vollbild-Menü: Hintergrund abgedunkelt, Links rahmenlos */
  body.nav-open .tabs { display: grid; align-content: start; gap: var(--space-1); position: fixed; inset: 0; z-index: var(--z-modal); border: 0; border-radius: 0; background: rgb(28 25 23 / .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fafaf9; padding: calc(var(--space-8) + env(safe-area-inset-top)) var(--space-6) var(--space-6); overflow-y: auto; }
  body.nav-open .tabs__link { min-height: 3.5rem; font-size: 1.25rem; justify-content: center; border: 0; background: transparent; }
  body.nav-open .tabs__link:hover { background: #ffffff22; }
  body.nav-open .nav-close { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-target-min); margin-top: var(--space-4); border-radius: var(--radius-md); border: 0; background: #ffffff1a; color: #fafaf9; font: inherit; font-weight: var(--font-weight-semibold); cursor: pointer; padding: var(--space-3) var(--space-5); }
  body.nav-open .nav-close:hover { background: #ffffff33; }
}

/* Meine Liste: Liste + Summen im selben Editorial-System (Haarlinien, keine Boxen) */
.plan { padding: var(--space-8) 0 var(--space-4); }
.plan__add { margin: 0 0 var(--space-6); }
.plan__select { max-width: 34rem; }
.plan__row { display: flex; gap: var(--space-2); }
.plan__row select { flex: 1 1 auto; min-width: 0; font: inherit; min-height: var(--touch-target-min); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); padding: var(--space-2) var(--space-3); }
.plan__subtitle { margin: var(--space-8) 0 var(--space-3); }
.plan__entries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.plan__entries li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); align-items: center; }
.plan__name { font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; margin: 0; }
.plan__sub { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.plan__tools { display: flex; align-items: center; gap: var(--space-2); }
.plan__qty { width: 4.5rem; text-align: center; font: inherit; font-weight: var(--font-weight-bold); border: 1px solid var(--color-border); border-radius: var(--radius-md); min-height: var(--touch-target-min); }
.plan__step { width: var(--touch-target-min); height: var(--touch-target-min); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-subtle); font-size: 1.25rem; cursor: pointer; line-height: 1; }
.plan__step:hover { border-color: var(--color-primary); }
.plan__remove { min-height: var(--touch-target-min); }
.plan__hint { font-size: var(--font-size-sm); margin: 0 0 var(--space-3); }
.plan__texts { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.plan__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

/* Titelbild: Rezeptansicht, Editor-Vorschau, Karten */
.head-image { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }
.head-image img { display: block; width: 100%; max-height: 22rem; object-fit: cover; }
.recipe-card__img, .feat__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.recipe-card__art:has(img) { padding: 0; min-height: 0; }
.recipe-card__img { aspect-ratio: 16 / 9; }
.feat__art:has(img) { padding: 0; }
.feat__img { min-height: 12rem; }
.feat__art > svg { display: block; width: 100%; height: auto; }
.ed-imageprev { display: grid; gap: var(--space-2); justify-items: start; margin-top: var(--space-2); }
.ed-imageprev img { display: block; max-width: 100%; max-height: 14rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.pv-image { display: block; max-width: 100%; max-height: 16rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); }

/* PDF-Download: nur die Druckvorlage aufs Papier (Dialog „Als PDF sichern“) */
#printSheet { display: none; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  body > :not(#printSheet) { display: none !important; }
  #printSheet { display: block !important; color: #000; font-size: 11pt; line-height: 1.45; max-width: 100%; }
  #printSheet h1 { font-size: 20pt; margin: 0 0 4pt; }
  #printSheet h2 { font-size: 13pt; margin: 14pt 0 4pt; border-bottom: 1pt solid #000; padding-bottom: 2pt; }
  #printSheet h2 small { font-size: 10pt; font-weight: normal; }
  #printSheet .print-lede { font-style: italic; margin: 0 0 4pt; }
  #printSheet .print-serv { font-weight: bold; margin: 0 0 8pt; }
  #printSheet ul, #printSheet ol { margin: 0 0 8pt; padding-left: 18pt; }
  #printSheet .print-meta, #printSheet .print-diet { list-style: none; padding-left: 0; display: block; }
  #printSheet .print-meta li, #printSheet .print-diet li { display: inline-block; margin: 0 12pt 2pt 0; }
  #printSheet .print-ings { list-style: none; padding-left: 0; }
  #printSheet .print-ings li { display: flex; justify-content: space-between; gap: 12pt; padding: 2pt 0; border-bottom: 0.5pt dotted #999; }
  #printSheet .print-note { font-size: 10pt; margin: 2pt 0 6pt; padding-left: 8pt; border-left: 2pt solid #666; }
  #printSheet section { break-inside: avoid; }
}