/* =====================================================================
   Sattify · Gestaltungssystem (Richtung D "Warme Klarheit")
   Von Hand geschrieben statt mit einem Werkzeug erzeugt: damit braucht
   die Auslieferung auf all-inkl keinen Bauschritt, und es gibt kein
   Fremdgerüst, das beim Laden im Supermarkt Zeit kostet.

   Regel des Systems: Kacheln nur für Objekte (Score, persönliche Werte),
   niemals für Listen. Listen liegen ohne Rahmen auf dem Papier.
   ===================================================================== */

:root {
  /* Wie weit die Bildschirmtastatur hereinragt; setzt `tastaturMessen()`. */
  --tastatur: 0px;
  /* Flächen — sandiger Grund, cremefarbene Karten darauf.
     Reines Weiss kommt bewusst nirgends vor; es wirkt auf warmem
     Papier kühl und klinisch. */
  --paper:        #F3ECE0;
  --card:         #FCFAF5;
  --sunken:       #E9E0CF;
  --line:         #E7DDCA;
  --line-soft:    #EFE7D8;
  --line-strong:  #DCD0B8;

  /* Schrift */
  --ink:          #23281F;
  --muted:        #8A8074;
  --faint:        #A99E8C;

  /* Kennzahlen tragen Waldgrün, alles Anfassbare Terrakotta. */
  --green:        #2F5D3A;
  --green-ink:    #2F5D3A;
  --green-tint:   #E2EAE1;
  --terra:        #C05F3C;
  --terra-dark:   #A44B2B;
  --terra-tint:   #F3E3D6;
  --terra-line:   #E6CFBC;
  --warn:         #9A6B12;
  --warn-tint:    #F6EBD3;

  --radius-sm:  10px;
  --radius:     14px;
  --radius-lg:  18px;
  --radius-xl:  22px;

  --shadow:     0 1px 2px rgba(35, 40, 31, .07);
  --shadow-lg:  0 8px 28px rgba(35, 40, 31, .14);

  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Auf echten Geräten liegt unten der Home-Streifen und oben die
     Statusleiste. Ohne das rutscht der Weiter-Knopf darunter. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-height:  62px;
  --kochleiste-height: 46px;

  color-scheme: light dark;
}

/* Abends in der Küche. Dieselbe Wärme, nur andersherum. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #191B16;
    --card:        #222520;
    --sunken:      #2B2F26;
    --line:        #33372C;
    --line-soft:   #2B2F26;
    --line-strong: #3E4335;
    --ink:         #EDE9DE;
    --muted:       #9C9585;
    --faint:       #766F62;
    --green:       #7FB68C;
    --green-ink:   #8FC79B;
    --green-tint:  #253326;
    --terra:       #E08258;
    --terra-dark:  #EE9670;
    --terra-tint:  #33241C;
    --terra-line:  #4A3226;
    --warn:        #D5A94A;
    --warn-tint:   #332A16;
    --shadow:      0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg:   0 8px 28px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --paper: #191B16; --card: #222520; --sunken: #2B2F26; --line: #33372C;
  --line-soft: #2B2F26; --line-strong: #3E4335; --ink: #EDE9DE; --muted: #9C9585;
  --faint: #766F62; --green: #7FB68C; --green-ink: #8FC79B; --green-tint: #253326;
  --terra: #E08258; --terra-dark: #EE9670; --terra-tint: #33241C; --terra-line: #4A3226;
  --warn: #D5A94A; --warn-tint: #332A16;
  --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 8px 28px rgba(0,0,0,.5);
}

/* --- Grundlagen --------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  /* Kein Gummiband-Scrollen über die App hinaus — im Supermarkt mit
     einer Hand wirkt das wie ein Fehler. */
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 29px; line-height: 1.1; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p  { margin: 0; }
a  { color: var(--terra); text-decoration: none; }
a:hover { color: var(--terra-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 6px; }

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; }
}

.num { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--serif); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.tiny { font-size: 11px; }
.eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow--accent { color: var(--terra); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Gerüst ------------------------------------------------------- */

.app {
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
}
.screen { display: none; }
.screen.is-active { display: block; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-top) + 6px) 8px 6px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
}
.topbar__title { flex: 1; font-size: 13px; font-weight: 700; color: var(--muted); }

.wrap { padding: 0 20px; }
.stack { display: flex; flex-direction: column; }
.stack--sm { gap: 8px; }
.stack--md { gap: 14px; }
.stack--lg { gap: 22px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.spacer { flex: 1 1 auto; }

/* --- Tastflächen --------------------------------------------------
   Nie unter 44 px. Das ist keine Empfehlung, sondern die Grenze, ab
   der man mit einer Hand am Einkaufswagen daneben trifft. */

.iconbtn {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; color: var(--ink);
}
.iconbtn:active { background: var(--sunken); }

.btn {
  min-height: 52px; padding: 0 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: var(--radius-lg);
  font-size: 16px; font-weight: 700;
  transition: transform .08s ease, background-color .15s ease;
}
.btn:active { transform: scale(.985); }
.btn--primary { background: var(--terra); color: #FFF6EF; }
.btn--primary:hover { background: var(--terra-dark); }
.btn--secondary { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.btn--ghost { color: var(--terra); font-weight: 600; min-height: 44px; }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 44px; font-size: 14.5px; padding: 0 14px; border-radius: var(--radius); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.chip {
  min-height: 34px; padding: 0 13px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
}
.chip--on { background: var(--green); border-color: var(--green); color: var(--paper); }
.chip--terra { background: var(--terra); border-color: var(--terra); color: #FFF6EF; }

/* Segmentierter Umschalter. Steht seit dem Wegfall des Ernährungs-
   Umschalters im Rezept nur noch dort, wo wirklich eine Wahl getroffen
   wird: Ernährungsform im Editor, Sichtbarkeit, Ansicht der Einkaufsliste. */
.segmented { display: flex; gap: 4px; padding: 4px; background: var(--sunken); border-radius: var(--radius); }
.segmented button {
  flex: 1; min-height: 40px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.segmented button[aria-pressed="true"] {
  background: var(--card); box-shadow: var(--shadow);
  font-weight: 700; color: var(--green-ink);
}

/* --- Karten (nur für Objekte) -------------------------------------- */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.card--flush { padding: 0; overflow: hidden; }
.card--terra { background: var(--terra-tint); border-color: var(--terra-line); }
.card--green { background: var(--green); border-color: var(--green); color: var(--paper); }
.card--warn  { background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* --- Listen (ohne Karten) ------------------------------------------
   Zeilen liegen direkt auf dem Papier, getrennt durch Haarlinien.
   Ein Gang-Band bleibt beim Scrollen oben kleben: die Frage "in
   welchem Gang bin ich?" stellt man sich alle drei Sekunden. */

.aisle {
  position: sticky; top: calc(var(--safe-top) + 56px); z-index: 10;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 20px; background: var(--sunken);
}
.aisle__name { font-family: var(--serif); font-size: 15px; color: var(--green-ink); }
.aisle__count { font-size: 11px; font-weight: 700; color: var(--faint); }

.item {
  display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 6px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
}
.item:first-of-type { border-top: 0; }
.item__body { flex: 1; min-width: 0; }
.item__name { font-size: 15.5px; font-weight: 600; }
.item__sub  { font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.item__amount { font-size: 15px; font-weight: 700; }
.item--done .item__name,
.item--done .item__amount { color: var(--faint); }
/* Der Strich liegt nur über dem Text, nicht über der ganzen Zeile, und
   zieht sich beim Abhaken von links nach rechts (Entwurf A1). */
.strich {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0 1.5px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.item--done .strich { background-size: 100% 1.5px; }
.item--jetzt .strich { transition: background-size .25s ease-out .06s; }
.item--weg {
  overflow: hidden; opacity: 0; max-height: 0 !important;
  padding-top: 0; padding-bottom: 0; border-width: 0;
  transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
}

.check {
  width: 26px; height: 26px; flex: 0 0 26px;
  border: 2px solid var(--line-strong); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .12s ease, border-color .12s ease;
}
.check[aria-checked="true"], .check.is-on { background: var(--terra); border-color: var(--terra); }
.check svg { opacity: 0; clip-path: inset(0 100% 0 0); }
.check[aria-checked="true"] svg, .check.is-on svg { opacity: 1; clip-path: inset(0); }
/* Nur direkt nach dem Tipp: der Kasten gibt nach, der Haken zeichnet sich. */
.item--jetzt .check { animation: check-tipp .2s ease-out; }
.item--jetzt .check svg { transition: clip-path .22s ease-out .05s; }
@keyframes check-tipp { 50% { transform: scale(.85); } }
/* Eben eingetragen (Entwurf E1): die Zeile leuchtet kurz auf. Nur Farbe,
   keine Bewegung. */
.item--neu { animation: eben-dazu 2.4s ease-out; }
@keyframes eben-dazu { 0%, 25% { background: var(--green-tint); } 100% { background: transparent; } }

/* Unter der Schnelleingabe: die Einheiten (E2) und „Holt ihr oft“ (E5) als
   eine Zeile zum Wischen. Antippen nimmt dem Feld den Fokus nicht. */
.oft {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.oft::-webkit-scrollbar { display: none; }
.oft .chip { flex: 0 0 auto; -webkit-touch-callout: none; user-select: none; }
/* Die Einheiten kleben an der Tastatur (Entwurf E2), wie die Leiste einer
   Tastatur-App. Ohne Bildschirmtastatur steht sie am unteren Rand. */
#qa-einheiten {
  position: fixed; left: 0; right: 0; bottom: var(--tastatur); z-index: 60;
  padding: 9px 16px; background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(35, 40, 31, .08); align-items: center;
}
#qa-einheiten .input { flex: 1; min-width: 0; min-height: 44px; }
/* Wischen durch die Einheiten ist nur Wischen: keine Auswahl, kein
   Kontextmenü, keine Lupe. */
#qa-einheiten, .oft { touch-action: pan-x; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#qa-einheiten input { -webkit-user-select: text; user-select: text; touch-action: manipulation; }
/* Suchfelder, die keine Suche sind (siehe Schnelleingabe): ohne das X und
   die Lupe des Browsers. */
input[type="search"].schlicht { -webkit-appearance: none; appearance: none; }
input[type="search"].schlicht::-webkit-search-cancel-button,
input[type="search"].schlicht::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.oft__chip .tiny { margin-left: 4px; }
/* Einfachauswahl als Karten: für Fragen, bei denen die Antwort erklärt
   werden muss und ein Segmentumschalter zu wenig Platz für den Satz hat.
   Bewusst ohne Vorauswahl — nichts ist angewählt, bis jemand tippt. */
.ni-dot {
  width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px;
  border: 2px solid var(--line-strong); border-radius: 999px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
#ni-diet [data-diet][aria-pressed="true"] {
  border-color: var(--terra); background: var(--terra-tint);
}
#ni-diet [data-diet][aria-pressed="true"] .ni-dot {
  border-color: var(--terra); box-shadow: inset 0 0 0 4px var(--terra);
}

/* Die Tastfläche ist grösser als das, was man sieht. */
.item__hit { display: flex; align-items: center; padding: 15px 8px 15px 0; margin: -15px -8px -15px 0; }

/* --- Kennzahlen ---------------------------------------------------- */

.ring { position: relative; flex: 0 0 auto; }
.ring__value {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--serif); color: var(--green-ink); line-height: 1;
}
.ring__label { font-family: var(--sans); font-size: 8.5px; font-weight: 700;
               letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }

/* Der eigene Wert als Plakette oben rechts am Ring (Rezeptkarte, Entwurf
   Lb). Der Rand in Kartenfarbe trennt sie vom Ring, über dem sie liegt. */
.ring__eigen {
  position: absolute; right: -9px; top: -7px;
  min-width: 22px; height: 18px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; border: 2px solid var(--card);
  background: var(--green); color: var(--paper);
  font-size: 10.5px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* Score und Kalorien im Rezept, zwei gleich grosse Spalten (Entwurf E1). */
.scorepaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scorepaar__teil { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.scorepaar__teil:first-child { padding-right: 16px; border-right: 1px solid var(--line-soft); }
.scorepaar__teil:last-child { padding-left: 16px; }
.scorepaar__kopf { font-size: 10px; font-weight: 700; letter-spacing: .12em;
                   text-transform: uppercase; color: var(--muted); }
.scorepaar__zahl { display: flex; align-items: baseline; gap: 4px; }
.scorepaar__zahl .serif { font-size: 46px; line-height: 1; }
.scorepaar__einheit { font-size: 13px; color: var(--muted); }
/* Kein overflow:hidden wie bei .bar — der Strich des eigenen Werts steht
   über den Balken hinaus. */
.scorebalken { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--line-soft); }
.scorebalken__fuell { display: block; height: 6px; border-radius: 999px; background: var(--green); }
.scorebalken__eigen { position: absolute; top: -3px; width: 3px; height: 12px;
                      border-radius: 2px; background: var(--ink); }

.kal-hinweis { background: var(--green-tint); color: var(--green-ink);
               border-radius: 12px; padding: 9px 11px; font-size: 13px; }

.bar { height: 7px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 999px; background: var(--green); transition: width .3s ease; }
.bar__fill--terra { background: var(--terra); }
.bar__fill--warn { background: var(--warn); }

.stat { display: flex; align-items: baseline; justify-content: space-between; }
.stat__label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.stat__value { font-size: 15px; font-weight: 700; }
.stat__unit  { font-size: 11px; font-weight: 500; color: var(--faint); }

.hairline { height: 1px; background: var(--line-soft); }

/* --- Kochmodus ----------------------------------------------------- */

/* ÜBER den Überlagerungen (65: Rezept, Entdecken, Verlauf), UNTER den
   Blättern (70) und Meldungen (80). Auf 60 lag er darunter: seit er nicht
   mehr den ganzen `#overlays`-Inhalt überschreibt, deckte jede offene
   Überlagerung ihn zu — der Kochmodus lief, und man sah die Seite davor. */
.cook { position: fixed; inset: 0; z-index: 66; background: var(--paper);
        display: flex; flex-direction: column; }
.cook__step { font-family: var(--serif); font-size: 27px; line-height: 1.27; }
.cook__timer { font-family: var(--serif); font-size: 42px; line-height: 1; color: var(--paper); }

/* Laufende Timer, die zur Sitzung gehören und nicht zum Schritt:
   sie bleiben sichtbar, egal auf welchem Schritt man steht. */
.timers { display: flex; gap: 8px; }
.timer-chip {
  flex: 1; min-width: 0; padding: 9px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left;
}
.timer-chip--done { border-color: var(--terra); background: var(--terra-tint); }
.timer-chip__where { font-size: 10.5px; color: var(--faint); }
.timer-chip__time  { font-size: 18px; font-weight: 700; margin-top: 1px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.timer-chip--done .timer-chip__time { color: var(--terra); animation: pulse 1s ease-in-out infinite; }

/* --- Wochenplan ----------------------------------------------------
   Bewusst Zeilen mit kleinem Vorschaubild, kein Kachelraster: sieben
   Tage mit je bis zu drei Mahlzeiten passen sonst nie auf ein Handy. */

.day { padding: 14px 20px 4px; }
.day__head { display: flex; align-items: baseline; gap: 8px; }
.day__name { font-family: var(--serif); font-size: 17px; }
.day--today .day__name { color: var(--terra); }
.day__date { font-size: 11.5px; color: var(--faint); }

.plan-item { display: flex; align-items: center; gap: 12px; padding: 8px 0;
             border-top: 1px solid var(--line-soft); }
.plan-item__thumb {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  background: var(--sunken); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.plan-item__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* − und + am Timer im Kochmodus: auf der grünen Karte, wie Pause daneben. */
/* „Zeit merken" unter − und + am Timer: ruhig, eine Zeile, volle Breite. */
.timer-merken {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px;
  margin-top: 10px; padding: 0 2px; border: 0; border-top: 1px solid rgba(255, 255, 255, .18);
  background: none; color: var(--paper); font: inherit; font-size: 14px; font-weight: 600; text-align: left;
}
/* Die Zeit am Schritt im Rezept. */
.schrittzeit { margin-top: 8px; min-height: 36px; gap: 6px; }
.schrittzeit__alt { color: var(--muted); font-weight: 500; }
/* Minuten wählen im Blatt. */
.zeitwahl { display: flex; align-items: center; justify-content: center; gap: 18px; }
.zeitwahl__knopf {
  width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-size: 24px; line-height: 1;
}
.zeitwahl__wert { min-width: 120px; text-align: center; font-size: 40px; font-weight: 600; }
.zeitwahl__wert small { font-size: 17px; margin-left: 5px; }

.timer-plusminus {
  flex: 1; min-height: 44px; border-radius: 14px;
  background: rgba(255, 255, 255, .16); color: var(--paper);
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Der Stopp-Knopf, solange ein Timer klingelt: oben, über allem — auch über
   Blättern (70) und Meldungen (80). Wer mit nassen Händen zum Handy greift,
   soll nicht suchen. */
.klingelstopp {
  position: fixed; left: 0; right: 0; top: 0; z-index: 90;
  padding: calc(var(--safe-top) + 8px) 12px 8px;
}
.klingelstopp[hidden] { display: none; }
.klingelstopp__knopf {
  width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; border-radius: var(--radius-lg);
  background: var(--terra); color: #FFF6EF; box-shadow: var(--shadow-lg);
  font-size: 15px; text-align: left;
}
.klingelstopp__knopf > span:nth-child(2) { flex: 1; min-width: 0; }
.klingelstopp__aus {
  padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .22);
  font-weight: 800; letter-spacing: .02em;
}

/* Der Regler für die Lautstärke des Timertons. 44 px Tastfläche wie überall. */
.lautstaerke { width: 100%; min-height: 44px; accent-color: var(--terra); }

/* --- Untere Leiste -------------------------------------------------- */

/* Der ausgeblendete Kochmodus: eine schmale Leiste über der Navigation.
   Sie gehört zur Navigation (Ebene 50) — Überlagerungen und Blätter
   decken sie zu wie die Navigation selbst. */
.kochleiste {
  position: fixed; left: 0; right: 0; z-index: 50;
  bottom: calc(var(--nav-height) + var(--safe-bottom));
  padding: 0 12px 6px;
}
.kochleiste[hidden] { display: none; }
.kochleiste__knopf {
  width: 100%; min-height: var(--kochleiste-height);
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-radius: var(--radius); background: var(--green); color: var(--paper);
  box-shadow: var(--shadow-lg); text-align: left; font-size: 14px;
}
.kochleiste__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app.mit-kochleiste { padding-bottom: calc(var(--nav-height) + var(--kochleiste-height) + 6px + var(--safe-bottom)); }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; padding-bottom: var(--safe-bottom);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.nav button {
  flex: 1; height: var(--nav-height);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; color: var(--muted);
}
.nav button[aria-current="page"] { color: var(--terra); }
.nav__badge {
  position: absolute; transform: translate(14px, -12px);
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--terra); color: #FFF6EF;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}

/* --- Overlays ------------------------------------------------------- */

.sheet-backdrop {
  /* Unten um die Tastatur gekürzt: sonst liegt ein Blatt mit Eingabefeld
     hinter ihr. */
  position: fixed; inset: 0 0 var(--tastatur) 0; z-index: 70;
  background: rgba(35, 40, 31, .45);
  display: flex; align-items: flex-end;
}
.sheet {
  width: 100%; max-height: calc(88dvh - var(--tastatur)); overflow-y: auto;
  background: var(--paper);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 8px 0 calc(20px + var(--safe-bottom));
  box-shadow: var(--shadow-lg);
  animation: sheet-in .22s ease;
}
@keyframes sheet-in { from { transform: translateY(18px); opacity: .4; } }

/* Portionen: die Zahl tippt kurz an, die neuen Mengen blenden ein. */
.serv-tick { animation: serv-tick .22s ease-out; }
/* Herz: kurzer Puls und ein Ring nach außen (Entwurf A2). */
.herz-puls { position: relative; }
.herz-puls svg { animation: herz-puls .32s ease-out; }
.herz-puls::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid var(--terra); pointer-events: none;
  animation: herz-ring .45s ease-out forwards;
}
@keyframes herz-puls { 0% { transform: scale(.6); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes herz-ring { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }

/* Einkauf erledigt: Farbkreise fliegen zusammen und werden zum Haken (A3c). */
.ek__buehne { position: relative; height: 150px; }
.ek__haken {
  position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px;
  border-radius: 999px; background: var(--green); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.ek__kreis { position: absolute; left: 50%; top: 50%; border-radius: 999px; translate: -50% -50%; opacity: 0; }
.ek--jetzt .ek__kreis { animation: ek-kreis .9s ease-in forwards; }
.ek--jetzt .ek__haken { animation: ek-haken .5s ease-out .75s both; }
.ek--jetzt h3, .ek--jetzt p { animation: ek-text .4s ease-out 1.05s both; }
@keyframes ek-kreis {
  0% { transform: translate(var(--x), var(--y)); opacity: 0; }
  15% { opacity: 1; }
  80% { transform: translate(0, 0) scale(.6); opacity: 1; }
  100% { transform: translate(0, 0) scale(0); opacity: 0; }
}
@keyframes ek-haken { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ek-text { from { opacity: 0; transform: translateY(8px); } }

/* Neue Stufe der Kalibrierung (A4). */
.stufen { position: relative; display: flex; justify-content: space-between; padding: 8px 10px 0; }
.stufen__linie, .stufen__voll { position: absolute; left: 50px; right: 50px; top: 25px; height: 3px; background: var(--line); }
.stufen__voll { background: var(--green); transform-origin: left; transform: scaleX(var(--bis)); }
.stufe { position: relative; z-index: 1; width: 80px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stufe__punkt {
  width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 2px solid var(--line); color: var(--faint); font-weight: 700; font-size: 14px;
}
.stufe--an .stufe__punkt { background: var(--green); border-color: var(--green); color: var(--paper); }
.stufe__name { font-size: 12px; font-weight: 650; color: var(--muted); }
.stufe--an .stufe__name { color: var(--green); }
.stufen-blatt--jetzt .stufen__voll { animation: stufen-voll .7s ease-out .15s both; }
.stufen-blatt--jetzt .stufe--neu .stufe__punkt { animation: stufe-neu .4s ease-out .8s both; }
.stufen-blatt--jetzt .stufen__text { animation: ek-text .4s ease-out 1.1s both; }
@keyframes stufen-voll { from { transform: scaleX(max(0, calc(var(--bis) - .5))); } }
@keyframes stufe-neu { 0% { transform: scale(.6); background: var(--card); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Guten Appetit: Dampf über dem Teller (A5b). */
.dampf { animation: dampf 2.6s ease-out infinite; opacity: 0; }
@keyframes dampf { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-10px); } }

/* Einstieg (Entwurf B): Stationen auf einer Linie, Wahlkarten, Fertig. */
.einstieg { min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: 104px; }
.einstieg__kopf { display: flex; align-items: center; padding: calc(var(--safe-top) + 10px) 8px 0; }
.einstieg__frage { padding: 22px 20px 0; }
.einstieg__frage h1 { font-size: 27px; line-height: 1.2; }
.einstieg__frage p { margin-top: 8px; font-size: 15px; }
.einstieg__wahlen { padding: 20px 20px 0; }
.einstieg__unten {
  position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 20px calc(20px + var(--safe-bottom));
  background: linear-gradient(transparent, var(--paper) 30%);
}
.stationen { position: relative; display: flex; justify-content: space-between; padding: 6px 12px 0; }
.stationen__linie, .stationen__voll {
  position: absolute; left: 43px; right: 43px; top: 20px; height: 3px; background: var(--line);
}
.stationen__voll { background: var(--green); transform-origin: left; transform: scaleX(var(--fuell)); }
.station { position: relative; z-index: 1; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.station__punkt {
  box-sizing: border-box; width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  background: var(--card); border: 2px solid var(--line); color: var(--muted);
}
.station__name { font-size: 11.5px; font-weight: 650; color: var(--muted); }
.station--fertig .station__punkt { background: var(--green); border-color: var(--green); color: var(--paper); }
.station--fertig .station__name { color: var(--green-ink); }
.station--jetzt .station__punkt { background: var(--terra); border-color: var(--terra); color: #FFF6EF;
                                  box-shadow: 0 0 0 5px var(--terra-tint); }
.station--jetzt .station__name { color: var(--terra-dark); }
.wahl {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card);
}
.wahl[aria-pressed="true"] { border-color: var(--green); background: var(--green-tint); }
.wahl__punkt {
  box-sizing: border-box; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 999px;
  border: 2px solid var(--line-strong); margin-top: 1px;
}
.wahl[aria-pressed="true"] .wahl__punkt { border-color: var(--green); background: radial-gradient(var(--green) 0 4.5px, transparent 5px); }
.wahl__text { flex: 1; display: flex; flex-direction: column; }
.wahl__text b { font-size: 16px; font-weight: 650; }
.wahl__text > span { font-size: 13.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; }
.wahl__steller { display: flex !important; align-items: center; gap: 6px; margin-top: 10px; color: var(--ink) !important; font-size: 16px !important; font-weight: 650; }
.wahl__steller .iconbtn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 20px; }
.einstieg__fertig { text-align: center; padding: 60px 24px 0; }
.einstieg__fertig h1 { margin-top: 22px; font-size: 28px; }
.einstieg__fertig p { margin-top: 10px; font-size: 15px; }
.einstieg__haken {
  width: 96px; height: 96px; margin: 0 auto; border-radius: 999px; background: var(--green-tint);
  color: var(--green); border: 4px solid var(--green); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
/* Nach „Fertig": die Stationen füllen sich der Reihe nach, dann der Haken. */
.einstieg:has([data-einstieg-fertig]) .station__punkt { animation: station-an .4s ease-out calc(var(--i) * .12s) both; }
.einstieg:has([data-einstieg-fertig]) .stationen__voll { animation: stationen-voll .6s ease-out both; }
.einstieg__haken { animation: ek-haken .5s ease-out .7s both; }
.einstieg__fertig h1, .einstieg__fertig p { animation: ek-text .4s ease-out 1s both; }
@keyframes station-an { 0% { transform: scale(.4); opacity: .2; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes stationen-voll { from { transform: scaleX(.75); } }

/* „Sattify.me einrichten · 3 von 7" (E5) und die Kalibrierung. */
.einr__kopf { flex: 1; font-size: 19px; }
.einr__zahl { font-size: 14px; font-weight: 700; color: var(--green-ink); }
.einr__segmente { display: flex; gap: 4px; margin-top: 10px; }
.einr__segmente span { flex: 1; height: 7px; border-radius: 999px; background: var(--sunken); }
.einr__segmente span.an { background: var(--green); }
.einr-zeile .einr__segmente { margin: 0; width: 70px; flex: 0 0 70px; }
.einr__liste { list-style: none; margin: 12px 0 0; padding: 0; }
.einr__punkt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; text-align: left; font-size: 15px; }
.einr__punkt:disabled { cursor: default; }
.einr__haken {
  box-sizing: border-box; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 999px;
  border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center;
}
.einr__titel { flex: 1; }
.einr__punkt--fertig { color: var(--muted); font-size: 14.5px; }
.einr__punkt--fertig .einr__haken { background: var(--green); border-color: var(--green); color: var(--paper); }
.einr__punkt--fertig .einr__titel { text-decoration: line-through; }
.einr__punkt--naechster { font-weight: 650; }
.einr__punkt--naechster .einr__haken { border-color: var(--terra); }
.kal-karte { display: block; width: 100%; text-align: left; }
.kal-karte__kopf { font-family: var(--serif); font-size: 17px; }
.kal-karte__balken { display: block; height: 7px; border-radius: 999px; background: var(--sunken); margin-top: 10px; overflow: hidden; }
.kal-karte__balken span { display: block; height: 100%; border-radius: 999px; background: var(--green); }

/* Ohne Konto: die Leiste unten in Entdecken (G2) und das Schloss (G5). */
.gastleiste {
  position: sticky; bottom: 0; z-index: 2; margin-top: 18px;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(14px + var(--safe-bottom));
  background: var(--card); border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.35; color: var(--muted);
}
.gastleiste span { flex: 1; }
.gastleiste .btn { white-space: nowrap; }
.gesperrt__schloss {
  width: 72px; height: 72px; margin: 48px auto 0; border-radius: 999px;
  background: var(--sunken); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}

@keyframes serv-tick { 40% { transform: scale(1.18); color: var(--terra); } }
.rz-neu .item__amount { animation: rz-neu .35s ease-out; }
@keyframes rz-neu { from { opacity: .35; } }
.sheet__grip { width: 38px; height: 4px; border-radius: 999px; background: var(--line-strong);
               margin: 6px auto 12px; }

.toast {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px);
  z-index: 80;
  padding: 13px 16px; border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-lg);
  animation: sheet-in .2s ease;
}
.toast button { color: var(--terra-dark); font-weight: 700; }
@media (prefers-color-scheme: dark) { .toast button { color: var(--terra); } }

/* --- Formulare ------------------------------------------------------ */

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.input {
  min-height: 52px; padding: 0 15px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 15.5px; width: 100%;
}
.input::placeholder { color: var(--faint); }

/* Ankreuzfelder und Radios tragen die Farbe der App.
   Ohne das nimmt der Browser die Akzentfarbe des Betriebssystems — auf den
   meisten Geräten ein kaltes Blau, das in dieser Farbtafel nirgends
   vorkommt und sofort auffällt. Eine Zeile, und die nativen Bedienelemente
   bleiben nativ: eigengebaute Ankreuzfelder verlieren Tastatur und
   Vorlesehilfe, wenn man nicht aufpasst. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--terra); }

/* --- Passwort mit „Zeigen" -------------------------------------------
   Es gibt bewusst KEIN zweites Feld zum Wiederholen. Dessen einzige
   Aufgabe ist, einen Tippfehler zu fangen — und das tut ein Blick auf das
   Getippte besser, ohne dass jemand beide Felder aus der Zwischenablage
   füllt und damit denselben Fehler zweimal einträgt. Beides zugleich
   wegzulassen wäre falsch gewesen: dann legt ein Vertipper still ein
   Konto an, dessen Passwort niemand reproduzieren kann. */
.pw { position: relative; }
.pw .input { padding-right: 104px; }
.pw__zeigen {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  min-height: 44px; padding: 0 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; color: var(--terra);
}
.pw__zeigen:active { background: var(--sunken); }

.input:focus { outline: none; border-color: var(--terra); }
textarea.input { padding: 13px 15px; min-height: 96px; line-height: 1.5; resize: vertical; }

/* --- Stärke des Passworts ---------------------------------------------

   ÜBER DIE VOLLE BREITE, IN VIER ABSCHNITTEN. Zuerst war es eine kurze
   Pille am linken Rand, und die stand optisch über: das Eingabefeld
   darüber hat 14 px runde Ecken, seine sichtbare Kante beginnt unten also
   erst weiter innen, während die Pille bündig mit der Box anfing. Bündig
   zur Box und trotzdem falsch — das Auge vergleicht mit der Rundung.
   Über die volle Breite fällt der Vergleich weg, weil beide Enden auf den
   geraden Kanten des Feldes sitzen.

   Und die Abschnitte sind nicht nur Gestaltung: die Stärke hat VIER
   Stufen und ist keine stetige Grösse. Ein durchgehender Balken behauptet
   eine Genauigkeit, die die Schätzung ausdrücklich nicht hat (siehe
   pw.js). Deshalb hier bewusst NICHT `.bar` aus dem Rezeptbildschirm —
   das misst Anteile, das hier zählt Stufen. */
.pwstaerke { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.pwstaerke__leiste { display: flex; gap: 4px; }
.pwstaerke__teil {
  flex: 1; height: 5px; border-radius: 999px;
  background: var(--line-soft); transition: background-color .2s ease;
}
.pwstaerke__teil--schwach { background: var(--terra); }
.pwstaerke__teil--mittel  { background: var(--warn); }
.pwstaerke__teil--gut     { background: var(--green); }
.pwstaerke__zeile { display: flex; gap: 8px; align-items: baseline; }
.pwstaerke__wort { flex: 0 0 auto; font-weight: 700; }
.pwstaerke__tipp { flex: 1; min-width: 0; line-height: 1.35; }

/* Schnelleingabe oben auf der Einkaufsliste */
.quickadd { display: flex; align-items: center; gap: 10px;
            background: var(--card); border: 1px solid var(--line);
            border-radius: var(--radius); padding: 6px 6px 6px 15px; }
.quickadd input { flex: 1; min-width: 0; border: 0; background: none; min-height: 40px; font-size: 15px; }
.quickadd input:focus { outline: none; }
.quickadd__go { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radius-sm);
                background: var(--terra); color: #FFF6EF;
                display: flex; align-items: center; justify-content: center; }

/* Schnelleingabe der Einkaufsliste in EINER Zeile (Entwurf V1): Artikel |
   Menge | Einheit | +. Keine gefüllten Felder in der Karte — die Menge ist
   Text wie der Artikel, ein feiner Strich trennt sie. Die Einheit ist ein
   Knopf in Chip-Form, der ein Blatt öffnet. */
.quickadd__trenner { flex: 0 0 1px; align-self: stretch; margin: 8px 0; background: var(--line-soft); }
.quickadd .quickadd__menge { flex: 0 0 52px; width: 52px; text-align: right; font-weight: 700; }
.einheit-knopf {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  min-height: 34px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.einheit-knopf svg { color: var(--muted); }
.field .einheit-knopf { align-self: flex-start; min-height: 44px; padding: 0 14px; font-size: 15px; }
.einheit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.einheit-chips .chip { min-height: 44px; }

/* --- Zustände ------------------------------------------------------- */

.empty { padding: 48px 24px; text-align: center; color: var(--muted); }
.empty h3 { font-size: 19px; margin-bottom: 8px; color: var(--ink); }

.offline-badge {
  display: none; align-items: center; gap: 7px;
  padding: 7px 20px; background: var(--warn-tint); color: var(--warn);
  font-size: 12px; font-weight: 600;
}
body.is-offline .offline-badge { display: flex; }

.skeleton {
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--sunken) 50%, var(--line-soft) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* --- Grössere Bildschirme -------------------------------------------
   Kein eigenes Layout, nur eine Spalte, die nicht auseinanderläuft. */

@media (min-width: 720px) {
  .app { max-width: 560px; margin: 0 auto;
         border-inline: 1px solid var(--line); min-height: 100dvh; }
  .nav { max-width: 560px; margin: 0 auto; }
}

/* --- Vorschläge beim Tippen ------------------------------------------ */

.suggest {
  margin-top: 6px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.suggest__hit {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 46px; padding: 0 15px; text-align: left;
  font-size: 15px; font-weight: 600; border-top: 1px solid var(--line-soft);
}
.suggest__hit:first-child { border-top: 0; }
.suggest__hit:active { background: var(--sunken); }

/* --- Rezeptkarte ------------------------------------------------------
   Bild oben über die ganze Breite, darunter Titel und Kennzahlen (Entwurf
   K2). Die Bildhöhe ist fest — Foto oder Kreisbild, die Liste springt nicht.
   Ein Rezept IST ein Objekt — dafür sind Karten da. Listen bleiben
   rahmenlos. */

.rcard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; width: 100%; text-align: left;
  transition: transform .08s ease;
}
.rcard:active { transform: scale(.99); }
.rcard__bild { position: relative; height: 176px; background: var(--sunken); }
.rcard__inhalt { padding: 12px 14px 14px; }
.rcard__title { font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.rcard__meta { margin-top: 3px; }
.rcard__grund {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--green-tint); color: var(--green-ink);
  font-size: 12.5px; font-weight: 600;
}
.rcard__fav {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center; color: var(--faint);
}
.rcard__fav[aria-pressed="true"] { color: var(--terra); }
/* Auf dem Bild: ein heller Kreis, damit das Herz auf jedem Foto zu sehen ist. */
.rcard__fav--bild {
  position: absolute; top: 10px; right: 10px;
  border-radius: 999px; background: var(--card); color: var(--ink);
  box-shadow: var(--shadow);
}

/* Die kompakte Form (K3): eine Zeile, randlos wie jede Liste. */
.rzeile {
  display: flex; gap: 12px; align-items: center; width: 100%;
  padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left;
}
.rzeile__bild { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 12px; overflow: hidden;
                background: var(--sunken); }
.rzeile__text { flex: 1; min-width: 0; }
.rzeile__titel { font-family: var(--serif); font-size: 16px; line-height: 1.2; }
.rzeile__grund { color: var(--green-ink); font-weight: 600; margin-top: 2px; }

/* Entdecken: Überschrift mit Trefferzahl daneben, Sortierknopf */
.dc-titel { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 400; }
.dc-sort { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0;
           font-size: 14px; color: var(--ink); }

/* Karten oder Liste */
.ansicht { display: flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ansicht button {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--muted);
}
.ansicht button[aria-pressed="true"] { background: var(--sunken); color: var(--ink); }

/* Rubrik mit Zahl darunter (Entdecken): die Zahl rechnet alle aktiven
   Filter mit. */
.chip--zahl {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
  min-height: 48px; padding: 4px 13px; border-radius: 14px; line-height: 1.25;
}
.chip--zahl .chip__zahl { font-size: 11.5px; font-weight: 500; opacity: .8; }
.chip--zahl[data-leer] { opacity: .55; }

/* Rubriken-Leiste, waagerecht scrollend */
.chiprow {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 20px 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chiprow::-webkit-scrollbar { display: none; }
.chiprow .chip { flex: 0 0 auto; }

/* Reiter im Kochbuch */
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--sunken);
        border-radius: var(--radius); margin: 0 20px; }
.tabs button {
  flex: 1; min-height: 40px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tabs button[aria-pressed="true"] {
  background: var(--card); box-shadow: var(--shadow); font-weight: 700; color: var(--ink);
}
.tabs .count { font-size: 11px; color: var(--faint); }

/* Startseite */
.hero-greeting { font-family: var(--serif); font-size: 27px; line-height: 1.15; }
.tile {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 14px 16px; width: 100%; text-align: left;
}
.tile--accent { background: var(--terra-tint); border-color: var(--terra-line); }
.avatar {
  width: 34px; height: 34px; border-radius: 999px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  color: #FFF6EF; font-size: 13px; font-weight: 700;
}

/* Mengenspalte in Zutatenlisten: feste Breite, rechtsbündig. Ohne das
   springt die Zahl je nach Länge des Namens hin und her, und die Spalte
   liest sich als Schlangenlinie statt als Liste. */
.item__amount--col {
  min-width: 86px; text-align: right; white-space: nowrap; flex: 0 0 auto;
}

/* --- Verlauf ----------------------------------------------------------
   Ein senkrechter Strich mit Punkten. Die Linie trägt die Zeit, damit man
   Abstände sieht statt nur Datumsangaben zu lesen. */

.tl-day {
  position: sticky; top: calc(var(--safe-top) + 52px); z-index: 5;
  font-family: var(--serif); font-size: 16px; color: var(--green-ink);
  padding: 10px 0 6px; background: var(--paper);
}
.tl-entry { position: relative; padding-left: 22px; padding-bottom: 12px; }
.tl-entry::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: -6px;
  width: 2px; background: var(--line);
}
.tl-entry:last-child::before { bottom: 12px; }
.tl-dot {
  position: absolute; left: 0; top: 14px;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--terra); border: 3px solid var(--paper);
}
.tl-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}