@import url('/css/fonts.css'); /* Schriften selbst gehostet statt Google Fonts (30.09.2026, siehe fonts.css) */

/* Standard-Farbschema (Winki, 13.09.2026: "Standard wird kuenftig Salat-Fresh") - seit
   der grossen Farbpalette-Ueberarbeitung entspricht "Standard/System" (kein
   data-design-Attribut) exakt der Salat-Fresh-Palette weiter unten (:root[data-design=
   "salat-fresh"]), inkl. --accent-tab fuer Reiter separat von --accent (= Button-Akzent,
   Name aus Bestandsgruenden beibehalten, wird an ~47 Stellen im Stylesheet verwendet).
   Der bisherige eigenstaendige Standard-Look (warmes Beige/Braun) UND der automatische
   Dunkelmodus (bisher :root:not([data-theme="light"]) unter prefers-color-scheme:dark)
   entfallen komplett - Winkis Entscheidung: "immer hell wie Salat-Fresh". */
:root{
  /* Salat-Fresh-Palette neu abgestimmt (26.09.2026, Neugestaltung Frontend-Huelle):
     Blattgruen-Tinte, ein einziges Aktionsgruen, Limette als weiche Aktiv-Flaeche.
     --ink-muted ist aus dem Oliv #788947 der Uebergabe abgedunkelt (dort nur 3.6:1
     auf --bg, jetzt 5.6:1). --rail = Flaeche der Seitenleiste ("Karteikasten"),
     --rail-ink = Schrift der inaktiven Reiter darauf. --line-art = Logo-Braun, nur
     fuer Zeichnungen/Linien, nie fuer Text oder Flaechen. */
  --bg: #f7faf1;
  --surface: #fdfef8;
  --surface-hover: #ecf3d8;
  --ink: #18351f;
  --ink-muted: #5b6a33;
  --border: #cddbb0;
  --accent: #2f6b3b;
  --accent-tab: #2f6b3b;
  --accent-ink: #ffffff;
  --accent-soft: #dcec8b;
  --rail: #edf3dc;
  --rail-ink: #5b6a33;
  /* Unterseiten-Menue: Ebene 1 dunkel hinterlegt, Ebene 2 heller (siehe .section-subnav). */
  --nav-bg: #d3e3ad; --nav-ink: #18351f; --nav-active-bg: #2f6b3b; --nav-active-ink: #ffffff;
  --nav2-bg: #eef3e0; --nav2-ink: #4a5a2a;
  --line-art: #6b4a2f;
  /* --accent-strong/--accent-tab-strong (Winki, 13.09.2026, im Zuge der Kontrast-/
     Harmonie-Nachbesserung): --accent bzw. --accent-tab werden an vielen Stellen NICHT
     als Flaechenfarbe genutzt, sondern direkt als Schriftfarbe auf einer hellen
     "soft"-Flaeche (Badges, Chips, Reiter rechts im Rezeptbuch etc.). Bei Salat-Fresh
     und Sporty-Steel ist die Akzentfarbe selbst dunkel/kraeftig genug, um dafuer auch
     als Text zu funktionieren - hier sind --accent-strong/--accent-tab-strong daher
     identisch mit --accent/--accent-tab. Bei Color-Kids ist die Markenfarbe bewusst
     hell/leuchtend (Orange/Pink) und dafuer als Fliesstext viel zu kontrastarm (siehe
     dortiger Kommentar) - dort bekommen diese beiden Rollen einen dunkleren, aber
     farblich verwandten Ton. */
  --accent-strong: #2f6b3b;
  --accent-tab-strong: #2f6b3b;
  --danger: #a1372b;
  --danger-soft: #f2d9d4;
  --ok: #4a7a3d;
  --ok-soft: #dbe6d2;
  --warn: #a5750f;
  --warn-soft: #f0e0bd;

  --cat-warm: #b9502d;      --cat-warm-soft: #f0d9c9;
  --cat-breakfast: #a8791f; --cat-breakfast-soft: #eee0be;
  --cat-snack: #5c6b34;     --cat-snack-soft: #dbe1c6;
  --cat-drinks: #2e6b6a;    --cat-drinks-soft: #cde3e2;
  --cat-baking: #7a4a46;    --cat-baking-soft: #e6d3d1;
  --cat-cold: #3d6ea5;      --cat-cold-soft: #d3e3f0;
  /* "Aufstriche" (Winki, 12.09.2026 vierundzwanzigste Nachbesserung) - Pflaumenton,
     visuell klar von den bestehenden 6 Kategorien (u. a. dem rotbraunen "baking")
     unterscheidbar. */
  --cat-spreads: #8a4a7a;   --cat-spreads-soft: #e6d3e2;
  /* Convenience Produkte (Phase 3, 14./15.09.2026) - EIN einheitlicher Ton fuer
     Produkt-Kacheln im Wochenplan, unabhaengig von der Produkt-Kategorie (anders als
     bei Gerichten): ein Fertigprodukt ist im Plan visuell klar als "kein Rezept,
     kein Kochen" erkennbar, eine feine Unterscheidung zwischen "Snacks & Chips" vs.
     "Süßes & Gebäck" waere fuer eine Plan-Kachel unnoetiger Aufwand. Graublauer Ton,
     bewusst deutlich von allen 7 Gericht-Kategorietoenen oben unterscheidbar.
     Aliase --plan-product* vermeiden Verwechslung mit den *nummerierten*
     Produkt-Kategorien in constants.PRODUCT_CATEGORIES. */
  --cat-product: #5a6472;   --cat-product-soft: #dfe2e6;
  /* Lieblingsrestaurants (26.09.2026) - eigener Weinrot-Ton fuer Restaurant-Kacheln im
     Wochenplan ("auswaerts essen"), deutlich von Gericht-/Produkt-Tönen unterscheidbar. */
  --cat-restaurant: #8c3b3b; --cat-restaurant-soft: #f0d9d6;

  --shadow: 0 1px 2px rgba(58,46,34,.06), 0 8px 20px -12px rgba(58,46,34,.25);
  --radius-card: 14px;
  --radius-pill: 999px;

  /* Mondkalender-"Bereich" (Winki, 24.09.2026, zweite Nachbesserung: "dukler
     hintergrund, passend zum gewählten design theme des users") - eigene,
     je Design-Theme gesetzte Rollen statt einer fest hinterlegten Farbe, da
     --ink/--surface je nach Theme unterschiedlich hell/dunkel sind (Sporty-
     Steel ist z.B. bereits als Ganzes ein dunkles Theme - dort waere var(--ink)
     HELL, nicht dunkel). Default hier = Salat-Fresh (siehe dortiger Block).*/
  --moon-box-bg: #18351f;
  --moon-box-ink: #fdfef8;
}

/* Automatischer Dunkelmodus (bisher hier: @media (prefers-color-scheme: dark) +
   :root[data-theme="dark"]) wurde am 13.09.2026 komplett entfernt, im Zuge von
   "Standard wird kuenftig Salat-Fresh" - Standard war der einzige Traeger dieser
   Funktion (die Design-Skins hatten nie einen eigenen Dunkelmodus), Winki hat sich
   explizit fuer "immer hell wie Salat-Fresh" entschieden. data-theme="dark"/"light"
   werden von app.js ohnehin nie gesetzt (reines Relikt), koennen also gefahrlos
   entfallen. */

/* ---------- Designs/Themes (Winki, 10.09.2026: "mehrere Designs zur Auswahl") ----------
   Aktiviert per data-design="<id>" auf <html> (siehe app.js, applyTheme()) - "system"
   (Standard) setzt kein Attribut und nutzt daher direkt die Werte oben in :root, die
   seit 13.09.2026 der Salat-Fresh-Palette entsprechen (siehe Kommentar dort). Nur die
   9 Kernrollen werden pro Design ueberschrieben (nicht --danger/--ok/--warn/--cat-*/
   --shadow/--radius - die bleiben app-weit identisch, damit z.B. "Allergie = Rot" in
   jedem Design gleich erkennbar bleibt).
   FARBPALETTE-UEBERARBEITUNG (13.09.2026, Winki hat fuer Sporty-Steel und Salat-Fresh
   echte Website-Mockups geliefert, fuer Color-Kids nur ein Stimmungsbild mit
   Fruecht-Illustrationen): alle 4 Design-Paletten wurden rechnerisch aus den
   gelieferten Referenzbildern ausgelesen (Cluster-Analyse einzelner Bildbereiche,
   nicht per Augenmass), dabei zwei neue, bisher gemeinsame Rollen getrennt:
   --accent-tab (aktiver Reiter/Tab) ist jetzt eine EIGENE Farbe, unabhaengig von
   --accent (= Akzent-Button, Name aus Bestandsgruenden beibehalten - siehe die ca. 47
   Stellen im Stylesheet, die var(--accent) fuer Buttons/Links/Badges/Fokusringe nutzen
   und dafuer nicht einzeln angefasst werden mussten). --accent-ink (Text auf der
   Akzentflaeche) ist NICHT mehr in jedem Design automatisch Weiss: bei Sporty-Steel und
   Color-Kids ergab die Kontrastpruefung (WCAG-Formel), dass Weiss auf den hellen
   Akzentfarben (helles Cyan bzw. Orange) kaum lesbar waere (Kontrast ~1.6-2 statt der
   angestrebten >4.5) - dort wird stattdessen ein dunkler Ton aus der jeweiligen Palette
   verwendet, der auf beiden Akzentfarben (Reiter UND Button) gut lesbar ist. */
/* Salat-Fresh = Standard-Farbschema (siehe :root oben). */
:root[data-design="salat-fresh"]{
  --bg:#f7faf1; --surface:#fdfef8; --surface-hover:#ecf3d8;
  --ink:#18351f; --ink-muted:#5b6a33; --border:#cddbb0;
  --accent:#2f6b3b; --accent-tab:#2f6b3b; --accent-ink:#ffffff; --accent-soft:#dcec8b;
  --accent-strong:#2f6b3b; --accent-tab-strong:#2f6b3b;
  --rail:#edf3dc; --rail-ink:#5b6a33;
  --nav-bg:#d3e3ad; --nav-ink:#18351f; --nav-active-bg:#2f6b3b; --nav-active-ink:#ffffff;
  --nav2-bg:#eef3e0; --nav2-ink:#4a5a2a;

  --moon-box-bg:#18351f; --moon-box-ink:#fdfef8;
}
:root[data-design="sporty-steel"]{
  --bg:#0a1a26; --surface:#26313f; --surface-hover:#444e5a;
  --ink:#e6edf0; --ink-muted:#97abb8; --border:#578099;
  --accent:#43c8fb; --accent-tab:#44d0e8; --accent-ink:#0a1a26; --accent-soft:#174251;
  --accent-strong:#43c8fb; --accent-tab-strong:#44d0e8;
  --rail:#071521; --rail-ink:#b4c4ce;
  --nav-bg:#26313f; --nav-ink:#c9d6de; --nav-active-bg:#43c8fb; --nav-active-ink:#0a1a26;
  --nav2-bg:#142029; --nav2-ink:#9fb0bc;

  --moon-box-bg:#050d13; --moon-box-ink:#e6edf0;
}
/* Winki, 13.09.2026 (Nachbesserung nach Farbpalette): "diese bräunliche Farbe passt
   auch nicht zum salat fresh" / "auch diese Farbe passt nicht zu sporty-steel" (beide
   bezogen auf die Rezeptbuch-Reiter oben, .rb-toptab) sowie "hier ist der Text nicht
   lesbar" (Color-Kids, rechte Reiter/Chips, .rb-sidetab und aehnliche Badges) fuehrten
   zu zwei Korrekturen:
   1) --accent-soft war bei Color-Kids faelschlich ein Gruenton (#c7e2cb, vermutlich ein
      Kopierfehler aus Salat-Fresh) - passte weder farblich zur Orange/Pink-Palette noch
      ergab er zusammen mit --accent ausreichend Kontrast (WCAG-Kontrast nur 1.18:1).
      Jetzt ein warmer Pfirsichton (#fad19a), der zur restlichen Palette passt. (Ein
      erster, noch hellerer Versuch (#fceed9) lag farblich fast auf --bg/--surface und
      war dadurch als Flaeche kaum vom Seitenhintergrund zu unterscheiden - siehe
      Winki, 13.09.2026: "bei color-kids gibt es rechts bei der ansicht keine farbe
      mehr" -, jetzt bewusst kraeftiger/dunkler fuer sichtbaren Kontrast zur Flaeche.)
   2) --accent (#fdc052) ist als reine Button-Flaeche gedacht (mit dunkler --accent-ink
      Schrift) und dafuer bewusst hell/leuchtend - genau das macht ihn aber als Schrift-
      farbe auf einer hellen Flaeche (Badges, Chips, .rb-sidetab) praktisch unlesbar
      (Kontrast ~1.2-1.6:1 statt der angestrebten >=4.5:1). Siehe --accent-strong weiter
      oben: hier ein aus demselben Farbton (Hue) abgeleiteter, deutlich dunklerer Amber-
      bzw. Himbeerton (--accent-tab-strong aus dem Pink von --accent-tab), rechnerisch
      per HSL-Aufhellung/Abdunkelung bei gleichem Farbton bestimmt, damit die Familie
      erkennbar bleibt (Kontrast jetzt 4.1-4.9:1 je nach Flaeche). */
:root[data-design="color-kids"]{
  --bg:#fdecd8; --surface:#fffaf3; --surface-hover:#fff3e0;
  --ink:#3a2712; --ink-muted:#a3805a; --border:#fbe4d8;
  --accent:#fdc052; --accent-tab:#fc5a72; --accent-ink:#3a2712; --accent-soft:#fad19a;
  --accent-strong:#a16802; --accent-tab-strong:#d20422;
  --rail:#f8d8b4; --rail-ink:#6b4c29;
  --nav-bg:#f6c58c; --nav-ink:#3a2712; --nav-active-bg:#3a2712; --nav-active-ink:#fdecd8;
  --nav2-bg:#fdecd6; --nav2-ink:#6b4c29;

  --moon-box-bg:#3a2712; --moon-box-ink:#fffaf3;
}

/* Seitenhintergrund-Bild Salat-Fresh (Winki, 11.09.2026: "dazu die Hintergrundbilder") -
   dezent, da die meisten Flaechen (Karten, Sidebar, Kacheln) ohnehin deckendes
   --surface/--bg-Weiss haben; sichtbar vor allem in Zwischenraeumen/Rand. */
body[data-design="salat-fresh"]{
  background-image:url('/img/themes/salat-fresh-bg.webp');
  background-size:cover; background-position:center; background-attachment:fixed;
  background-repeat:no-repeat;
}
/* Sporty-Steel bekommt bewusst kein zusaetzliches Seiten-Hintergrundbild - bei einem
   dunklen Theme wuerde das im Kontrast zu den hellen Karten (--surface) eher unruhig
   wirken; das Foto aus dem Mockup wird stattdessen gezielt im Kopfbereich (siehe
   .theme-header-banner) eingesetzt. */

/* ---------- Themen-Kopfbanner (Winki, 11.09.2026, Rueckfrage-Antwort: "Nur
   Kopfzeille/oberer Bereich"; am 26.09.2026 zu einem schmalen Deko-Band ueber dem
   Header verkleinert - vorher 7rem hoch mit grosser leerer Flaeche in der Mitte) - dezente Design-Illustration/Foto oben im Hauptbereich,
   nur bei Themes mit passendem Bild sichtbar (per data-design gesteuert, kein JS
   noetig). Feste Hoehe, damit das Layout darunter (.masthead etc.) nicht springt. */
.theme-header-banner{display:none;}
:root[data-design="salat-fresh"] .theme-header-banner{
  display:block; height:3.25rem; margin:-1rem 0 1rem; border-radius:var(--radius-card);
  background-image:url('/img/themes/salat-fresh-corner-left.webp'), url('/img/themes/salat-fresh-corner-right.webp');
  background-position:left top, right top;
  background-repeat:no-repeat, no-repeat;
  background-size:auto 100%, auto 100%;
}
:root[data-design="sporty-steel"] .theme-header-banner{
  display:block; height:4rem; margin:-.5rem 0 1.25rem; border-radius:var(--radius-card);
  overflow:hidden;
  background-image:url('/img/themes/sporty-steel-header.webp');
  background-size:cover; background-position:center 35%;
}

/* ---------- Themen-Trenner/"Flourish" (Deko-Trennlinie, Winki 11.09.2026,
   Rueckfrage-Antwort: "Deko-Trenner zwischen Bereichen") - hier im Sidebar-Fuss unter
   dem Zitat platziert, je Theme ein eigenes Bild, per data-design gesteuert. */
.theme-flourish{display:none;}
:root[data-design="salat-fresh"] .theme-flourish{
  display:block; width:100%; height:2.6rem; margin-top:.3rem;
  background-image:url('/img/themes/salat-fresh-divider.webp');
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
:root[data-design="sporty-steel"] .theme-flourish{
  display:block; width:100%; height:1.6rem; margin-top:.3rem;
  background-image:url('/img/themes/sporty-steel-divider.webp');
  background-repeat:no-repeat; background-position:center; background-size:contain;
}

/* ---------- "Glossy" Hover-/Aktiv-Effekte fuer Salat-Fresh & Sporty-Steel (Winki,
   11.09.2026: "solche 'glossy mouseover' oder andere glossy elemente ... finde ich
   schoen. die muessen sein" - an der Optik des mitgeschickten Sporty-Steel-Mockups
   orientiert, NICHT an dessen Menue-/Layoutstruktur). Bewusst als zusaetzliche
   Hintergrund-Ebene (nicht als eigenes ::after-Pseudoelement), damit der
   Glanz-Verlauf immer HINTER Text/Icon liegt statt ihn zu ueberdecken. */
/* Glanz-Hover/-Aktiv-Effekt auf den Sidebar-.tab-btn (Winki, 11.09.2026) am
   26.09.2026 entfernt: der aktive Menuepunkt ist jetzt ein papierfarbener Reiter, der
   in die Inhaltsflaeche uebergeht (Rezeptkarten-Register, siehe .sidebar weiter
   unten) - ein Glanzverlauf darauf wuerde die Verbindung zur Seite brechen. */
/* Winki, 14.09.2026 (beim Kuren-Baustein aufgefallen, am Beispiel der "+ Einplanen"-
   Buttons im Kur-Gerichte-Picker): "mir gefallen die buttons hier nicht ... kein
   farbverlauf in den buttons" - der Farbverlauf/Glanz-Effekt auf .btn-primary (siehe
   Kommentar oben) wird deshalb zurueckgenommen, Buttons sind jetzt in allen 3 Themes
   einheitlich flach (nur die einfache .btn-primary-Basisregel weiter unten in dieser
   Datei greift). Der Glanz-Hover/Aktiv-Effekt auf den Sidebar-.tab-btn bleibt davon
   unberuehrt (Winki bezog sich ausdruecklich auf "Buttons", nicht auf die Navigation). */
:root[data-design="sporty-steel"] .theme-swatch.active,
:root[data-design="salat-fresh"] .theme-swatch.active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}

*{box-sizing:border-box;}
html,body{height:100%;}
/* Platz fuer den Scrollbalken immer reservieren (26.09.2026, Winki: "wechselt man die
   seite, springt es horizontal um einige pixel") - sonst verschiebt sich der zentrierte
   Inhalt, sobald eine Seite kurz genug ist, dass der Balken verschwindet. */
html{scrollbar-gutter:stable;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Karla',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Arvo',Georgia,serif; text-wrap:balance; margin:0;}
button, input, select, textarea{font-family:inherit;}
a{color:var(--accent-strong);}

.wrap{max-width:1180px; margin:0 auto; padding:2.25rem 1.5rem 5rem;}

.masthead{
  display:flex; align-items:center; justify-content:space-between; gap:1rem 1.5rem;
  flex-wrap:wrap; margin-bottom:1.5rem;
}
/* Header neu (26.09.2026): Seitentitel in Arvo links, Haushalt-Chip rechts. Kein
   Trennstrich mehr unter dem Header - die farbige Unterseiten-Leiste direkt darunter
   grenzt ohnehin ab. */
.masthead-title{display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; min-width:0;}
.masthead h1{font-size:1.9rem; line-height:1.15; letter-spacing:-.01em; color:var(--ink);}
.masthead-right{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;}
/* Nutzer-Chip: Avatar + Name des eingeloggten Mitglieds + Pfeil, oeffnet das Konto-Menue. */
.user-chip{
  display:inline-flex; align-items:center; gap:.5rem; height:2.5rem; padding:0 .8rem 0 .25rem;
  font:inherit; font-weight:600; font-size:.875rem; color:var(--ink); cursor:pointer; line-height:1;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill);
  transition:border-color .15s ease, background-color .15s ease;
}
.user-chip{position:relative;}
.user-chip:hover, .user-chip[aria-expanded="true"]{border-color:var(--accent-strong); background:var(--surface-hover);}
/* Eine der Seiten aus dem Nutzer-Menue ist offen (Freunde/Haushalt/Mein Konto). */
.user-chip.is-current{border-color:var(--accent-strong); background:var(--accent-soft);}
.user-chip-dot{
  position:absolute; top:-2px; left:1.7rem; width:.7rem; height:.7rem; border-radius:50%;
  background:var(--danger); box-shadow:0 0 0 2px var(--bg);
}
.user-chip-dot[hidden]{display:none;}
.user-chip:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px;}
.user-chip-avatar{display:inline-flex;}
.user-chip-avatar .member-avatar{width:2rem; height:2rem; font-size:.9rem;}
.user-chip-name{max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.user-chip-name:empty{display:none;}
.user-chip-caret{
  width:.45rem; height:.45rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.6;
}
@media (prefers-reduced-motion: reduce){ .user-chip{transition:none;} }
@media (max-width: 640px){
  .masthead{flex-wrap:nowrap; align-items:flex-start; margin-bottom:1.25rem;}
  .masthead h1{font-size:1.5rem;}
  .masthead-right{flex-wrap:nowrap; gap:.4rem;}
  /* Handy: nur der Avatar (der Name steht im Konto-Menue). */
  .user-chip{padding:0 .6rem 0 .25rem;}
  .user-chip-name{display:none;}
}

/* Winki, 12.09.2026 siebzehnte Nachbesserung: Account-Dropdown unter dem Nutzer-Icon
   oben rechts (siehe Kommentar in index.html) - dasselbe Popover-Grundmuster wie beim
   "Beliebt bei..."-Filter (.rating-filter-popover) bzw. dem Boards-Zuordnen-Popover
   (.board-add-popover), hier rechtsbuendig unter dem runden Avatar-Button. */
.user-menu{position:relative; display:inline-flex;}
.user-menu-dropdown[hidden]{display:none;}
.user-menu-dropdown{
  position:absolute; top:100%; right:0; margin-top:.5rem; z-index:20; min-width:13rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:.5rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.35rem;
}
/* Name des eingeloggten Mitglieds oben im Account-Dropdown (Winki, 13.09.2026) - rein
   informativ (kein Button, kein Hover/Cursor-Zeiger), deshalb bewusst kein
   .user-menu-item, sondern eine eigene, etwas kleinere/gedämpfte Zeile mit eigenem
   Trenner darunter. */
.user-menu-name{
  font-weight:700; font-size:.85rem; color:var(--ink); padding:.3rem .7rem 0;
}
/* Tarif/Kontingent-Zeile unter dem Namen (Winki, 21.09.2026: "es wäre gut, wenn es
   im header unterhalb des profilbildes steht") - uebernimmt den Trenner, den vorher
   .user-menu-name allein trug (siehe oben), jetzt als Abschluss des ganzen
   Kopf-Blocks (Name + Tarif zusammen). Leer/nicht sichtbar (CSS :empty), solange
   renderUserMenuPlan() noch keinen Text gesetzt hat (z.B. vor dem ersten Login).*/
.user-menu-plan{
  font-size:.75rem; color:var(--ink-muted); padding:.15rem .7rem .55rem;
  border-bottom:1px solid var(--border); margin-bottom:.15rem;
}
.user-menu-plan:empty{display:none;}
.user-menu-item{
  appearance:none; border:none; background:none; font:inherit; font-weight:600; font-size:.875rem;
  color:var(--ink); text-align:left; padding:.55rem .7rem; border-radius:var(--radius-pill); cursor:pointer;
}
.user-menu-item:hover{background:var(--surface-hover);}
/* Menue-Eintraege mit Icon (Freunde/Haushalt/Mein Konto, 26.09.2026). */
.user-menu-item[data-menu-section]{display:flex; align-items:center; gap:.6rem;}
.user-menu-item[data-menu-section] .hicon{font-size:1.05rem; color:var(--accent-strong);}
.user-menu-item:focus-visible{outline:2px solid var(--accent-strong); outline-offset:-2px;}
.user-menu-divider{height:1px; background:var(--border); margin:.15rem .3rem;}
/* Abmelden bewusst als richtiger, optisch abgesetzter Button (.btn.btn-danger, sonst
   fuer eher "vorsichtige/endgueltige" Aktionen genutzt) statt als Text-Zeile wie
   "Account" darueber - genau die Rueckmeldung "muss auch eher nach button aussehen".
   width:100% statt der sonst schmalen .btn-Groesse, damit er die volle Dropdown-Breite
   ausfuellt und dadurch klar als eigener, wichtiger Abschluss des Menüs auffaellt. */
.user-menu-logout{width:100%; justify-content:center;}
.user-menu-logout:hover{filter:brightness(.96);}

.btn{
  font:inherit; font-weight:700; font-size:.875rem; border-radius:var(--radius-pill);
  border:1px solid transparent; padding:.6rem 1.1rem; cursor:pointer; display:inline-flex;
  align-items:center; gap:.4rem;
}
/* Derselbe Bugfix wie bei .tab-btn[hidden] weiter unten (siehe Kommentar dort): ohne
   diese Regel blieb ein per JS ausgeblendeter (.hidden=true) Button trotzdem sichtbar,
   weil ".btn{display:inline-flex}" die Browser-Vorgabe "[hidden]{display:none}"
   ueberschrieb - hier beim Testen der vierundzwanzigsten Nachbesserung (12.09.2026,
   neuer Button #importRecipesBtn) entdeckt, betraf unbemerkt aber auch das bereits
   bestehende #newDishBtn ausserhalb von "Rezeptbuch". */
.btn[hidden]{display:none;}
.btn:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px;}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{filter:brightness(1.07);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border);}
.btn-ghost:hover{background:var(--surface);}
/* "Mitessen anfragen" (Winki, 13.09.2026 Nachtrag: "der button 'mitessen anfragen'
   hat noch keine farbe. Können wir ein ocker-gelb dem ganzen geben?") - wiederverwendet
   dasselbe Ocker bereits genutzt fuer die Frühstücks-Kategorie/deren Reiter
   (--cat-breakfast, siehe .rb-toptab weiter unten), hier als volltonige .btn-Variante
   (wie .btn-primary) statt der dortigen helleren "soft"-Flaeche, damit der Button
   dieselbe optische Staerke wie ".btn-primary" hat. Feste helle Schriftfarbe statt
   --accent-ink, da dieses Ocker vom eigentlichen Akzentton des jeweiligen Themes
   unabhaengig ist (--accent-ink ist nur auf Kontrast zu --accent abgestimmt).*/
.btn-ochre{background:var(--cat-breakfast); color:#fff6ee;}
.btn-ochre:hover{filter:brightness(1.07);}
.btn-danger{background:var(--danger-soft); color:var(--danger);}
/* Zerstoererische Hauptaktion in Bestaetigungsdialogen ("Rezept löschen"), 26.09.2026. */
.btn-danger-solid{background:var(--danger); color:#fff;}
.btn-danger-solid:hover{filter:brightness(1.08);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
/* "Passwort vergessen?" (Winki, 13.09.2026) - bewusst dezenter als btn-ghost (kein
   Rahmen), damit der Login-Bildschirm nicht mit gleichrangigen Buttons ueberladen wirkt;
   Anmelden/Registrieren bleiben optisch die Hauptaktionen. */
.btn-link{background:transparent; border-color:transparent; color:var(--ink-muted); text-decoration:underline; font-size:.85rem;}
.btn-link:hover{color:var(--ink);}

/* ---------- App-Gerüst: linke Seitenleiste + Hauptbereich (Winki, 10.09.2026: "Dafür
   müssen wir das eine Menü nach links verlagern") - ersetzt die vorherige horizontale
   Tab-Leiste oben im Inhaltsbereich. Die Tab-Buttons selbst (.tab-btn) und ihre
   Umschalt-Logik (app.js, initTabs()) bleiben unveraendert, nur die Anordnung (jetzt
   vertikal in der Seitenleiste statt horizontal) und Optik aendern sich hier. */
.app-shell{display:flex; align-items:stretch; min-height:100vh;}
/* Winki, 17.09.2026 (Landingpage-Implementierung): derselbe wiederkehrende Bugfix wie
   bei .btn[hidden]/.tabs[hidden]/.auth-screen[hidden] etc. weiter oben/unten - ohne
   dieses Gegenstueck wuerde die eigene "display:flex"-Regel oben die Browser-Vorgabe
   "[hidden]{display:none}" ausstechen und #appWrap bliebe trotz hidden-Attribut
   sichtbar. Bisher fiel das nie auf, weil #appWrap und #authScreen sich immer exakt
   gegenseitig abwechselten (letzteres deckt als Vollbild-Overlay alles ab) - seit die
   neue Landingpage (#landingScreen) als DRITTER, gleichberechtigter Bildschirm
   existiert, gibt es jetzt erstmals den Zustand "authScreen UND appWrap beide
   hidden", in dem #appWrap sonst unter der Landingpage durchgeschienen haette. */
.app-shell[hidden]{display:none;}
/* ---------- Rezeptkarten-Register (26.09.2026, Neugestaltung Frontend-Huelle) ----------
   Die Seitenleiste ist ein leicht getoenter "Karteikasten" (--rail), der aktive
   Menuepunkt ein Reiter in der Farbe der Inhaltsflaeche (--bg), der ueber die
   Trennlinie hinweg in die Seite uebergeht. Die Trennlinie ist deshalb KEIN border,
   sondern Teil des Hintergrunds (1px-Verlauf am rechten Rand) - so kann der aktive
   Reiter sie einfach mit seiner eigenen Flaeche ueberdecken. Erste Fassung hatte
   zusaetzlich eingezogene Ecken und einen Textmarker-Strich - Winki, 26.09.2026:
   "das sieht hässlich aus" -> jetzt ein schlichter Ordnerreiter. */
.sidebar{
  width:240px; flex:0 0 240px; display:flex; flex-direction:column;
  background:linear-gradient(to left, var(--border) 1px, var(--rail) 1px);
  padding:1.75rem 0 1.5rem 1rem;
  position:sticky; top:0; align-self:flex-start; height:100vh;
  overflow-y:auto; overflow-x:hidden;
  /* Kein sichtbarer Scrollbalken: er laege genau auf der Naht zwischen Reiter und
     Seite. Scrollen per Rad/Touch/Tastatur bleibt moeglich (nur bei sehr niedrigen
     Fenstern noetig). */
  scrollbar-width:none;
}
.sidebar::-webkit-scrollbar{display:none;}
.sidebar-brand{padding-right:1rem;}
.sidebar-brand h1{font-size:1.4rem; letter-spacing:-.01em; margin-bottom:1.6rem; color:var(--ink);}
/* Logo "Schmatzi Spatzi" (Winki, 13.09.2026): braun in den hellen Themes,
   brightness(0) invert(1) macht es bei Sporty-Steel (fest dunkles Skin) weiss -
   funktioniert unabhaengig von der exakten Ausgangsfarbe des Logos. Einen
   automatischen OS-Dunkelmodus gibt es seit 13.09.2026 nicht mehr (System =
   Salat-Fresh hell), daher keine media-query-Regel fuer den Standard-Fall. */
.sidebar-logo{display:block; width:100%; max-width:160px; height:auto; margin:0 0 1.75rem .5rem;}
:root[data-design="sporty-steel"] .sidebar-logo{ filter: brightness(0) invert(1); }
.main-col{flex:1; min-width:0;}
.main-col .wrap{max-width:1180px;}

.tabs{display:flex; flex-direction:column; gap:3px; margin-bottom:0; border-bottom:none; flex:1;}
.tabs[hidden]{display:none;}
/* Gruppenueberschriften in Sentence case, bewusst leise (keine Versalien, keine
   Nummern) - sie ordnen nur, sie sind kein eigener Inhalt. */
.nav-group-label{
  margin:1.5rem 1rem .45rem .85rem; font-size:.8125rem; font-weight:600; color:var(--rail-ink);
  opacity:.8;
}
.nav-group-label:first-child{margin-top:0;}
.nav-group-gap{height:1.5rem; flex:none;}
.tab-btn{
  position:relative; display:flex; align-items:center; gap:.7rem;
  font-family:'Karla'; font-weight:600; font-size:.9375rem; line-height:1.25; color:var(--rail-ink);
  padding:.6rem .85rem; margin-right:.85rem; border:1px solid transparent; background:none;
  border-radius:10px; cursor:pointer; text-align:left; width:auto;
  transition:background-color .15s ease, color .15s ease;
}
.tab-btn:hover{background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink);}
.tab-btn:focus-visible{outline:2px solid var(--accent-strong); outline-offset:-2px;}
.tab-btn .tab-icon{font-size:1.15rem; opacity:.8;}
.tab-btn:hover .tab-icon{opacity:1;}
/* Der Reiter selbst: Seitenflaeche, Rahmen nur oben/links/unten, rechts offen -
   dadurch liegt er buendig auf der Trennlinie und geht in die Seite ueber. */
.tab-btn.active{
  margin-right:0; background:var(--bg); color:var(--ink); font-weight:700;
  border-color:var(--border); border-right-color:var(--bg); border-radius:12px 0 0 12px;
  z-index:1;
}
.tab-btn.active:hover{background:var(--bg);}
.tab-btn.active .tab-icon{opacity:1; color:var(--accent-strong);}
/* [hidden]-Bugfix (12.09.2026): ".tab-btn{display:flex}" wuerde die Browser-Vorgabe
   "[hidden]{display:none}" sonst ueberstimmen - betrifft #inspirationSectionBtn und
   #backendSectionBtn. */
.tab-btn[hidden]{display:none;}
.tab-icon{font-size:1.05rem; line-height:1;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.sidebar-footer{
  margin:1.4rem 1rem 0 0; padding-top:1.2rem; border-top:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem;
}
.sidebar-corner-art{width:64px; height:64px; color:var(--accent);}
.sidebar-corner-art svg{width:100%; height:100%;}
.sidebar-quote{
  font-family:'Caveat', 'Karla', cursive; font-size:1.15rem; line-height:1.35; color:var(--rail-ink);
  margin:0; min-height:1.35em;
}

@media (max-width: 860px){
  .app-shell{flex-direction:column;}
  /* Handy: das Register kippt nach oben - eine waagerecht wischbare Reiterleiste,
     deren aktiver Reiter nach UNTEN in die Inhaltsflaeche uebergeht (Linie jetzt
     am unteren Rand der Leiste). Der Fuss (Ecke + Tageszitat) bleibt waagerecht und
     steht ueber den Reitern, damit diese direkt an der Seite anliegen. */
  .sidebar{
    width:100%; flex:0 0 auto; height:auto; position:static; overflow:visible;
    background:linear-gradient(to top, var(--border) 1px, var(--rail) 1px);
    padding:.75rem 0 0;
  }
  .sidebar-brand{display:none;}
  .nav-group-label, .nav-group-gap{display:none;}
  .tabs{
    order:2; flex-direction:row; flex-wrap:nowrap; gap:.25rem; margin-bottom:-1px; overflow-x:auto; overflow-y:hidden;
    padding:0 1rem; scrollbar-width:none; overscroll-behavior-x:contain;
    /* Weicher Auslauf rechts zeigt: hier geht es weiter. */
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
  }
  .tabs::-webkit-scrollbar{display:none;}
  .tab-btn{flex:none; margin:0 0 .35rem; padding:.5rem .75rem; font-size:.875rem; gap:.45rem;}
  .tab-btn.active{
    margin:0; padding:.5rem .8rem .85rem; border-color:var(--border); border-bottom-color:var(--bg);
    border-radius:12px 12px 0 0;
  }
  .sidebar-footer{
    order:1; flex-direction:row; justify-content:center; gap:.6rem;
    margin:0 1rem .6rem; padding-top:0; border-top:none;
  }
  .sidebar-corner-art{width:32px; height:32px; flex:none;}
  .sidebar-corner-art:empty{display:none;}
  .sidebar-quote{text-align:left; font-size:1rem; line-height:1.25;}
  /* Deko-Trenner passt nicht zur horizontalen Fuss-Anordnung auf schmalen Bildschirmen
     und bleibt hier ausgeblendet; das Kopfbanner wird nur verkleinert (bleibt sichtbar,
     Winki wollte den oberen Bereich als Deko-Flaeche). */
  :root[data-design="salat-fresh"] .theme-flourish,
  :root[data-design="sporty-steel"] .theme-flourish{display:none;}
  :root[data-design="salat-fresh"] .theme-header-banner{height:2.5rem; margin:-.5rem 0 .75rem;}
  :root[data-design="sporty-steel"] .theme-header-banner{height:3rem; margin:0 0 1rem;}
}
@media (prefers-reduced-motion: reduce){
  .tab-btn{transition:none;}
}

/* ---------- Design-Auswahl (Einstellungen) & Sprueche-/Mitglieder-Admin (Winki,
   10.09.2026) ---------- */
.theme-picker{display:flex; flex-wrap:wrap; gap:.6rem;}
.theme-swatch{
  display:flex; flex-direction:column; align-items:center; gap:.35rem; width:84px;
  border:2px solid var(--border); border-radius:12px; padding:.5rem .4rem; background:var(--surface);
  cursor:pointer; font:inherit; font-size:.75rem; font-weight:700; color:var(--ink-muted);
}
.theme-swatch .swatch-dot{width:28px; height:28px; border-radius:50%;}
.theme-swatch.active{border-color:var(--accent-strong); color:var(--ink);}

.admin-quote-textarea{
  width:100%; min-height:280px; font:inherit; font-size:.85rem; line-height:1.5;
  border:1px solid var(--border); border-radius:10px; padding:.8rem .9rem; background:var(--bg); color:var(--ink);
  resize:vertical;
}
.admin-quote-actions{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.7rem;}
.admin-members-list{display:flex; flex-direction:column; gap:.5rem; margin-top:.8rem;}
.admin-member-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid var(--border); border-radius:10px; padding:.6rem .9rem; background:var(--surface);
}
.admin-member-row .admin-member-name{font-weight:700;}
.admin-member-row .admin-member-role{color:var(--ink-muted); font-size:.8rem; margin-left:.4rem;}
.admin-toggle{display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; cursor:pointer;}
.admin-toggle input{width:1.1rem; height:1.1rem; accent-color:var(--accent); cursor:pointer;}
/* Zwei Rechte pro Mitglied nebeneinander (Winki, 12.09.2026: Sprueche-Admin UND
   Superadmin sind seit der Mehr-Haushalte-Unterstuetzung getrennte, beide global
   vergebbare Rechte) - bricht bei schmalen Breiten auf zwei Zeilen um. */
.admin-toggle-group{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; justify-content:flex-end;}

/* Kleinere Buttons innerhalb der Mitgliederverwaltung-Karten (Winki, 13.09.2026) -
   dieselbe .btn-Basis, nur kompakter, damit "Löschen"/Tarif-Buttons neben den Details
   nicht zu dominant wirken. */
.btn-sm{padding:.35rem .75rem; font-size:.8rem;}

/* "Mitgliederverwaltung" (Winki, 13.09.2026: "will ich auch sehen können, wann sich
   ein mitglied registriert hat, mit welcher e-mail-adresse ... halt alle erhobenen
   daten") - eine Karte pro Mitglied statt der bisherigen schlanken einzeiligen
   admin-member-row, da jetzt deutlich mehr Felder + Tarif-Kontrollen + Löschen Platz
   brauchen. Nutzt bewusst dieselben Grundfarben/Radien wie admin-member-row. */
.admin-member-mgmt-list{display:flex; flex-direction:column; gap:.7rem; margin-top:.8rem;}
.admin-member-mgmt-row{
  border:1px solid var(--border); border-radius:10px; padding:.8rem 1rem; background:var(--surface);
  display:flex; flex-direction:column; gap:.6rem;
}
.admin-member-mgmt-head{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.admin-member-mgmt-details{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:.4rem .9rem;
  font-size:.85rem; color:var(--ink);
}
.admin-detail-label{display:block; font-size:.72rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.02em;}
.admin-member-mgmt-plan{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; border-top:1px solid var(--border);
  padding-top:.6rem; font-size:.85rem;
}
.admin-plan-status{font-weight:700;}
/* KI-Testphase-Kontingent je Haushalt in der Mitgliederverwaltung (Winki,
   21.09.2026: "Im backend will ich als superadmin das ebenfalls sehen") - rein
   informativ, bewusst gedaempft neben dem fett hervorgehobenen Tarif-Status. */
.admin-plan-credits{font-size:.78rem; color:var(--ink-muted);}
.admin-plan-controls{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-left:auto;}
.admin-plan-until-input{
  font:inherit; font-size:.8rem; border:1px solid var(--border); border-radius:8px;
  padding:.3rem .5rem; background:var(--bg); color:var(--ink);
}

.placeholder-panel{
  border:1px dashed var(--border); border-radius:var(--radius-card); padding:3rem 2rem;
  text-align:center; color:var(--ink-muted);
}
.placeholder-panel strong{display:block; color:var(--ink); font-size:1.05rem; margin-bottom:.4rem;}

.category{margin-bottom:3rem; transition:outline-color .15s ease;}
.category.drag-over{outline:2px dashed var(--accent); outline-offset:8px; border-radius:var(--radius-card);}
.category-head{display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; cursor:pointer; user-select:none;}
.category-dot{width:11px; height:11px; border-radius:50%; background:var(--dot); flex-shrink:0;}
.category-head h2{font-size:1.3rem; flex:1;}
.category-count{color:var(--ink-muted); font-size:.85rem; font-weight:500;}
.category-chevron{display:flex; align-items:center; justify-content:center; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--surface-hover); border:1px solid var(--border); color:var(--ink-muted); font-size:.85rem; line-height:1; flex-shrink:0; transition:background .15s ease, color .15s ease;}
.category-head:hover .category-chevron{background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-soft);}
.category.collapsed .grid{display:none;}
.category.collapsed .board-dish-grid{display:none;}

.grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem;}
@media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid{grid-template-columns:1fr;} }

.empty-row{
  grid-column:1/-1; border:1px dashed var(--border); border-radius:var(--radius-card);
  padding:1.5rem; text-align:center; color:var(--ink-muted); font-size:.875rem;
}

/* ---------- Rezeptbuch-Reiter (Winki, 12.09.2026 dritte Nachbesserung) ----------
   "ich möchte die ganzen kategorien neu darstellen. wie reiter oben, die sich (wenn
   kategorie gewählt) mit dem ansichtsbereich 'verbinden' (keine trennlinie mehr)."
   Ersetzt NUR auf der Rezeptbuch-Gerichtsübersicht (renderOverview() in app.js) die
   bisherige Liste aus einzeln auf-/zuklappbaren .category-Abschnitten (die Klasse
   bleibt fuer Inspiration-Seite/Board-Gerichtsauswahl unveraendert im Einsatz) durch
   eine Reiter-Ansicht: die 6 normalen Kategorien (Frühstück, Snack, Warmes Essen,
   Kaltes Essen, Getränke, Backen) als Reiter OBEN, die 5 Essens-Tag-Abschnitte (Obst,
   Gemüse, Nüsse, Öle, Superfoods) als Reiter am RECHTEN Rand - jeweils immer nur EIN
   Reiter aktiv, dessen Kacheln der Ansichtsbereich (.rb-panel) zeigt. Der aktive Reiter
   bekommt bewusst dieselbe Hintergrundfarbe wie .rb-panel und (durch die gemeinsame,
   randlose Kante) keine sichtbare Trennlinie zu ihm - "verschmilzt" also optisch damit.
   Inaktive Reiter oben und inaktive Reiter rechts haben bewusst UNTERSCHIEDLICHE
   Farben (--surface-hover oben vs. --accent-soft rechts), wie explizit gewuenscht:
   "der eine reihe sollte eine andere farbe haben als die andere". Beide Farbpaare
   kommen aus den ohnehin je Theme definierten Variablen, die Reiter passen sich also
   automatisch an alle 17 Designs (inkl. Dark Mode) an, ohne eigene Farben pflegen zu
   muessen. */
/* Winki, 12.09.2026 vierte Nachbesserung: "Können wir die ersten reiter etwas weiter
   einrücken, damit es nicht so eine mini-kante ist?" - der bisherige Mini-Einzug (.4rem)
   lag sichtbar innerhalb der Rundung der Ansichtsbereich-Ecke darunter und wirkte dadurch
   wie ein winziger, ungewollter Versatz statt eines bewussten Abstands. Mit einem
   Einzug, der spuerbar groesser als der Eckenradius von .rb-panel ist, liegt die
   gerundete Ecke sauber sichtbar VOR dem ersten Reiter, statt darunter "abgeschnitten"
   zu wirken (siehe .rb-panel/.rb-sidetabs Kommentar unten).
   --rb-tab-inset ist als Custom Property auf .rb-shell definiert und wird sowohl fuer
   den Einzug oben (padding-left) als auch unten fuer die Mindesthoehe des Fuell-Elements
   rechts (.rb-sidetabs-filler, siehe dortiger Kommentar) verwendet, damit beide Abstaende
   nie auseinanderlaufen koennen (15. Nachbesserung: "ich will hier bei dem ansichtsbereich
   am rand einen mindestens genau so großen abstand zu 'superfoods' nach unten... haben wie
   im horizontalen bereich von der linken oberen ecke zu 'frühstück'"). */
.rb-shell{display:flex; flex-direction:column; --rb-tab-inset:1.6rem;}
.rb-toptabs{display:flex; flex-wrap:wrap; gap:.3rem; width:fit-content; padding-left:var(--rb-tab-inset);}
.rb-toptab{
  appearance:none; border:none; cursor:pointer; font:inherit; font-weight:600; font-size:.95rem;
  padding:.65rem 1.2rem; border-radius:var(--radius-card) var(--radius-card) 0 0;
  /* Winki, 12.09.2026 vierte/fünfte Nachbesserung: erst "ein dunkleres braun mit einer
     hellen schrift?", dann "die reiter... sind nun zu dunkel. dann vielleicht so eine
     art ocker?" - das damals gewaehlte Ocker (--cat-breakfast/--cat-breakfast-soft) ist
     eine feste, nicht theme-abhaengige Farbe und wurde nach der grossen Farbpaletten-
     Ueberarbeitung vom 13.09.2026 zu Recht bemaengelt: "diese bräunliche Farbe passt
     auch nicht zum salat fresh" / "auch diese Farbe passt nicht zu sporty-steel" - das
     Ocker passte nur zufaellig zur (aehnlich warmen) Color-Kids-Palette, wirkte bei den
     gruenen/blauen Themes aber wie ein Fremdkoerper. Jetzt stattdessen ein neutrales,
     in JEDEM Theme automatisch stimmiges Paar (--surface-hover/--ink-muted) - exakt die
     Farben, die urspruenglich (vor der Ocker-Iteration) hier vorgesehen waren, siehe
     Kommentar "Inaktive Reiter oben... (--surface-hover oben...)" weiter oben. Bleibt
     durch die andere Farbfamilie als --accent-soft/--accent bei .rb-sidetab weiterhin
     klar vom rechten Reiter unterscheidbar ("der eine reihe sollte eine andere farbe
     haben als die andere"), ohne je wieder mit einer Theme-Palette zu kollidieren. */
  background:var(--surface-hover); color:var(--ink-muted); white-space:nowrap;
  transition:filter .15s ease, background .15s ease, color .15s ease;
}
.rb-toptab:hover{filter:brightness(.94);}
.rb-toptab.active{background:var(--surface); color:var(--ink); filter:none;}
.rb-toptab.active:hover{filter:none;}
.rb-toptab.drag-over{outline:2px dashed var(--accent); outline-offset:-3px;}

.rb-row{display:flex;}

/* Winki, 12.09.2026 vierte Nachbesserung: "können wir den ansichtsbereich auch mit
   abgerundeten ecken machen?" - jetzt an ALLEN vier Ecken gerundet (vorher waren die
   beiden oberen Ecken eckig, damit dort nahtlos die Reiter andocken). Das funktioniert
   jetzt ohne Bruch, weil sowohl .rb-toptabs (padding-left) als auch .rb-sidetabs
   (margin-top) genug Abstand zu den beiden oberen Ecken lassen, dass deren Rundung frei
   sichtbar bleibt, statt vom ersten Reiter angeschnitten zu werden. */
.rb-panel{
  flex:1; min-width:0; background:var(--surface); padding:1.5rem; min-height:14rem;
  border-radius:var(--radius-card); transition:outline-color .15s ease;
  /* Winki, 13.09.2026: "bei salad fresh ist die ansicht nicht vom hintergrund zu
     unterscheiden" - --bg und --surface liegen bei Salat-Fresh (und teils auch bei
     Color-Kids) bewusst dicht beieinander (beides sehr helle, aus dem Mockup
     ausgelesene Toene), ohne eigene Kante war der Ansichtsbereich dadurch kaum vom
     Seitenhintergrund zu unterscheiden. Ein 1px-Rahmen in --border (wie bei .tile
     schon vorhanden) macht die Flaeche jetzt in JEDEM Theme sicher erkennbar, egal
     wie nah sich --bg/--surface farblich kommen. */
  border:1px solid var(--border);
}
.rb-panel.drag-over{outline:2px dashed var(--accent); outline-offset:-8px;}
.rb-panel-head{display:flex; align-items:baseline; gap:.7rem; margin-bottom:1.1rem;}
.rb-panel-head h2{font-size:1.3rem; margin:0;}
.rb-panel-count{color:var(--ink-muted); font-size:.85rem; font-weight:500;}

/* Winki, 12.09.2026 achtzehnte Nachbesserung: "ausgeblendete... sollen unten unter
   einem aufklappbarem Text 'Ausgeblendete anzeigen' wieder zu sehen sein (default ist
   dieser bereich eingeklappt)." - bewusst als unauffaelliger Text-Button (nicht als
   eigene .category-Sektion mit Punkt/großer Ueberschrift wie die normalen Abschnitte),
   damit er nicht mit den echten Inhalten konkurriert, sondern als sekundaere
   "Aufraeum-Schublade" am Ende des jeweiligen Tag-Abschnitts wirkt. */
.rb-hidden-section{margin-top:1.5rem; padding-top:1.2rem; border-top:1px dashed var(--border);}
.rb-hidden-toggle{
  appearance:none; border:none; background:none; font:inherit; font-size:.85rem; font-weight:600;
  color:var(--ink-muted); cursor:pointer; padding:.3rem 0; display:inline-flex; align-items:center; gap:.4rem;
}
.rb-hidden-toggle:hover{color:var(--ink);}
.rb-hidden-chevron{display:inline-block; width:1em; text-align:center;}
.rb-hidden-grid{margin-top:1rem; opacity:.75;}

/* Winki, 12.09.2026 sechste/fünfzehnte Nachbesserung: hier stand bis 13.09.2026 ein
   eigenes Fuell-Element (.rb-sidetabs-filler) unterhalb des letzten Reiters, das die
   Reiter-Spalte auf die Hoehe von .rb-panel strecken sollte, damit dort keine "Kante"
   entsteht. Winki, 13.09.2026: "und warum gibt es hier im rezeptbuch an der ansicht am
   rechten rand noch so einen fake-reiter? weg damit." - da .rb-panel und .rb-sidetabs
   nicht aneinander angrenzen (sichtbarer Abstand dazwischen, siehe .rb-row), wirkte das
   Fuell-Element in der Praxis nicht wie eine unsichtbare Verlaengerung des
   Ansichtsbereichs, sondern wie ein eigener, leerer Reiter ohne Beschriftung - jetzt
   komplett entfernt (Element in app.js nicht mehr erzeugt, Regeln hier geloescht). */
.rb-sidetabs{display:flex; flex-direction:column; gap:.3rem; flex-shrink:0; margin-top:1.1rem;}
.rb-sidetab{
  appearance:none; border:none; cursor:pointer; font:inherit; font-weight:600; font-size:.95rem;
  writing-mode:vertical-rl; padding:1rem .55rem; border-radius:0 var(--radius-card) var(--radius-card) 0;
  background:var(--accent-soft); color:var(--accent-strong); white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.rb-sidetab:hover{color:var(--ink);}
.rb-sidetab.active{background:var(--surface); color:var(--ink);}

@media (max-width:720px){
  /* Auf schmalen Bildschirmen (Handy) macht eine senkrechte Schrift am rechten Rand
     wenig Sinn - die 5 Tag-Reiter wandern stattdessen als zweite waagrechte Reiterzeile
     UNTER die 6 normalen Kategorie-Reiter (per "order" vor den Ansichtsbereich gezogen,
     der in der Reihenfolge im HTML eigentlich zuerst kommt). */
  .rb-toptabs{width:auto;}
  .rb-row{flex-direction:column;}
  .rb-panel{order:2; border-radius:0 0 var(--radius-card) var(--radius-card);}
  .rb-sidetabs{order:1; flex-direction:row; flex-wrap:wrap;}
  .rb-sidetab{writing-mode:horizontal-tb; border-radius:var(--radius-card) var(--radius-card) 0 0; padding:.6rem 1.1rem;}
}

.tile{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  overflow:hidden; text-align:left; cursor:pointer; padding:0; font:inherit; color:inherit;
  box-shadow:var(--shadow); transition:transform .15s ease, background .15s ease;
  display:flex; flex-direction:column; width:100%;
}
.tile:hover, .tile:focus-visible{background:var(--surface-hover); transform:translateY(-2px);}
.tile:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.tile.dragging{opacity:.4;}
.tile-photo{
  position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(155deg, var(--photo-a), var(--photo-b));
}
.tile-fav{
  position:absolute; top:.5rem; right:.5rem; width:2rem; height:2rem; z-index:1;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(255,255,255,.85); color:var(--ink-muted); font-size:1.15rem; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:pointer; transition:transform .1s ease, background .1s ease;
}
.tile-fav:hover{background:#fff; transform:scale(1.08);}
.tile-fav.active{color:#f0a71a;}
.tile-fav.active svg{fill:currentColor;}
.tile-photo .tile-fav svg, .drawer-photo .tile-fav svg{width:1em; height:1em; display:block; opacity:1;}
.tile-photo svg{width:38%; height:38%; opacity:.85;}
.tile-photo img{width:100%; height:100%; object-fit:cover;}
.tile-body{padding:.85rem .95rem 1rem;}
.tile-name{font-weight:700; font-size:.95rem; line-height:1.3; margin-bottom:.5rem;}
.tile-meta{display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; font-size:.75rem; color:var(--ink-muted); font-weight:600;}
.badge{display:inline-flex; align-items:center; gap:.25rem; padding:.12rem .45rem; border-radius:var(--radius-pill); font-size:.7rem; font-weight:700; letter-spacing:.02em;}
.badge-macro{background:var(--dot-soft); color:var(--dot);}
.badge-freeze{background:var(--accent-soft); color:var(--accent-strong);}
.badge-airfryer{background:var(--cat-warm-soft); color:var(--cat-warm);}
.badge-warn{background:var(--warn-soft); color:var(--warn);}
/* Medizinischer Disclaimer bei "NEM-Vorschläge"/"NEM Übersicht" (Nachbesserung
   15.09.2026, zweite Rückmeldung, Winki: "Stichwort Haftung") - dieselben
   Warn-Farbtoken wie .badge-warn/.meal-warning-dislike, nur als volle Zeile
   mit Icon statt als kleines Badge. */
.nem-disclaimer{
  display:flex; align-items:flex-start; gap:.5rem;
  background:var(--warn-soft); color:var(--warn); font-weight:600;
  border-radius:10px; padding:.7rem .9rem; margin-bottom:1rem; line-height:1.4;
}
.nem-disclaimer .hicon{flex:none; margin-top:.15rem;}
/* "enthält Alkohol" (Winki, 14.09.2026, fuenfte Runde) - automatisch aus den
   Zutaten ermittelt (siehe server/alcohol_detect.py), eigene dezente Weinrot-Optik
   statt einer bestehenden Badge-Farbe, damit sie auf einen Blick von Diaet-/
   Geraet-Badges unterscheidbar bleibt. */
.badge-alcohol{background:#f7e0e6; color:#9d1f43;}

/* Scrim + Drawer (Detailansicht)
   z-index bewusst ueber .modal-scrim (30) gehoben (Winki, 14.09.2026, im Zuge der
   Kur-Tagesplan-Kacheln: "diese sollen auch anklickbar sein, um von dort aus auch die
   zutaten, die kochansicht etc sehen zu können") - ein Klick auf eine Gerichte-Kachel
   INNERHALB eines bereits offenen Modals (z.B. dem Kur-Tagesplan-Baukasten oder dem
   Freund-Wochenplan) oeffnet den Detail-Drawer darueber, nicht dahinter verdeckt.
   Bleibt unter .toast (40) und .cookview-scrim (60), die weiterhin immer zuoberst
   sichtbar sein sollen. */
.scrim{position:fixed; inset:0; background:rgba(20,14,8,.42); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:35;}
.scrim.open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(440px, 100%); background:var(--surface);
  border-left:1px solid var(--border); transform:translateX(100%); transition:transform .25s ease;
  z-index:36; overflow-y:auto; box-shadow:-18px 0 40px -20px rgba(0,0,0,.35);
}
.drawer.open{transform:translateX(0);}
.drawer-photo{position:relative; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(155deg, var(--photo-a), var(--photo-b));}
.drawer-photo svg{width:26%; height:26%; opacity:.85;}
.drawer-photo img{width:100%; height:100%; object-fit:cover;}
.drawer-content{padding:1.5rem 1.6rem 2.5rem; position:relative;}
.drawer-close{position:absolute; top:1rem; right:1rem; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.35); color:#fff; border:none; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2;}
.drawer-cat{font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dot);}
.drawer h3{font-size:1.4rem; margin:.35rem 0 1rem;}
.drawer-badges{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.4rem;}

.stat-row{display:flex; gap:1.5rem; margin-bottom:1.5rem; padding:1rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.stat{display:flex; flex-direction:column; gap:.15rem;}
.stat .num{font-family:'Arvo'; font-size:1.15rem; font-variant-numeric:tabular-nums;}
.stat .lbl{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); font-weight:700;}

.section-label{font-size:.95rem; font-weight:700; color:var(--ink); margin-bottom:.75rem; margin-top:2rem; line-height:1.3;}
/* Beschreibungszeile direkt unter einer Abschnitts-Ueberschrift: etwas Luft zum
   folgenden Inhalt (26.09.2026, Winki: "manche abstände ... zu wenig"). */
.section-label + .hint{margin-top:-.4rem; margin-bottom:1rem; font-size:.8125rem;}
/* "+ Neue Kur" jetzt neben der "Meine Kuren"-Ueberschrift statt oben in der
   allgemeinen Werkzeugleiste (Winki, 14.09.2026, fuenfte Runde) - der Button teilt
   sich die Zeile mit der Ueberschrift statt eine eigene Zeile zu beanspruchen. */
.cure-list-head{display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap;}
.cure-list-head .section-label{margin-bottom:0;}
.ingredients{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem;}
.ingredients li{display:flex; justify-content:space-between; font-size:.875rem; padding-bottom:.5rem; border-bottom:1px dashed var(--border);}
.ingredients li span:last-child{color:var(--ink-muted); font-variant-numeric:tabular-nums;}
.recipe-link{display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.875rem; color:var(--accent-strong); text-decoration:none;}
.recipe-text{font-size:.875rem; line-height:1.5; white-space:pre-wrap; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.8rem .9rem;}

.plan-form, .modal-section{background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.2rem 1.3rem;}
.plan-row, .field-row{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:.7rem;}
/* Drei kurze Felder nebeneinander (z.B. Kategorie | Portionen | Zeit), 26.09.2026. */
.field-row-3{grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);}
@media (max-width: 480px){ .field-row-3{grid-template-columns:1fr 1fr;} .field-row-3 > :first-child{grid-column:1 / -1;} }
.field{display:flex; flex-direction:column; gap:.3rem;}
/* [hidden]-Falle (26.09.2026 bei der Popup-Pruefung gefunden): diese Elemente werden
   per JS ausgeblendet, ihre eigene display-Regel ueberstimmte das aber - dadurch z.B.
   ein leerer farbiger Balken ueber dem Wochenplan (#planMhdBanner) oder das
   Einladungscode-Feld bei der Registrierung, obwohl "Eigenen Haushalt anlegen"
   gewaehlt ist. */
.field[hidden],
.plan-cure-banner[hidden],
.plan-mhd-banner[hidden],
.pantry-bulk-bar[hidden],
.grid[hidden]{display:none;}
/* Winki, 14.09.2026 vierundvierzigste Nachbesserung: derselbe Bugfix wie bei
   .btn[hidden]/.tab-btn[hidden]/.tabs[hidden] weiter oben - ohne diese Regel bliebe
   #drinkSubtypeWrap trotz hidden-Attribut sichtbar, weil ".field{display:flex}" die
   Browser-Vorgabe "[hidden]{display:none}" (nur User-Agent-Stylesheet, hat IMMER
   Vorrang vor Autoren-CSS wie ".field") ueberschreibt. */
#drinkSubtypeWrap[hidden]{display:none;}
.field label, .plan-row label{font-size:.8125rem; font-weight:700; color:var(--ink-muted);}
.field input, .field select, .field textarea, .plan-row select{
  font:inherit; font-size:.875rem; padding:.5rem .6rem; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); width:100%;
}
.field textarea{resize:vertical; min-height:5rem;}
.checkbox-field{display:flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:600;}
.checkbox-field input{width:auto;}

.portion-stepper{display:flex; align-items:center; justify-content:space-between; border:1px solid var(--border); border-radius:8px; padding:.5rem .6rem; background:var(--surface);}
.portion-stepper button{background:none; border:none; color:var(--accent-strong); font-size:1.1rem; font-weight:700; cursor:pointer; width:1.4rem;}
.add-btn{width:100%; margin-top:.3rem;}

.toast{
  position:fixed; left:50%; bottom:1.75rem; transform:translate(-50%, 20px); background:var(--ink); color:var(--bg);
  padding:.75rem 1.25rem; border-radius:var(--radius-pill); font-size:.875rem; font-weight:600; opacity:0;
  transition:all .25s ease; z-index:40; box-shadow:0 12px 30px -10px rgba(0,0,0,.4);
}
.toast.show{opacity:1; transform:translate(-50%, 0);}

/* Modal (Neues Gericht) */
/* ---------- Popups: ein einziges Muster fuer alle Dialoge (26.09.2026,
   Neugestaltung Frontend-Huelle, Baustein 3) ----------
   Alle ~35 Dialoge nutzen bereits .modal-scrim > .modal - hier bekommen sie EIN
   gemeinsames Aussehen: papierfarbene Flaeche mit feinem Rand, Titel (erste h2/h3)
   in Arvo, ein einheitlicher Schliessen-Knopf oben rechts (egal ob im Markup als
   .modal-close oder .drawer-close angelegt), kurze Einblendung nur beim Oeffnen.
   Am Handy (<= 640px) wird jeder Dialog zum Bottom-Sheet - die per Inline-Style
   gesetzten Breiten (width:min(420px,...)) werden dort bewusst mit !important
   ueberstimmt. Verhalten (Escape, Fokus, Scroll-Sperre) steuert initModalLayer()
   in app.js zentral fuer alle. */
.modal-scrim{
  position:fixed; inset:0; background:rgba(14,24,16,.48); opacity:0; pointer-events:none;
  transition:opacity .18s ease; z-index:30; display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; overscroll-behavior:contain; padding:clamp(1.5rem, 6vh, 4rem) 1rem 2rem;
}
.modal-scrim.open{opacity:1; pointer-events:auto;}
.modal{
  background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:18px;
  width:min(640px, 100%); margin-inline:auto; padding:1.75rem 1.9rem 1.9rem; position:relative;
  box-shadow:0 24px 60px -24px rgba(14,24,16,.45), 0 2px 6px rgba(14,24,16,.08);
  transform:translateY(10px) scale(.985); transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.modal-scrim.open .modal{transform:none;}
.modal:focus{outline:none;}
/* Titel: die erste Ueberschrift im Dialog, Platz rechts fuer den Schliessen-Knopf. */
.modal > h2:first-of-type, .modal > h3:first-of-type{
  font-family:'Arvo', Georgia, serif; font-size:1.35rem; line-height:1.25; color:var(--ink);
  margin-top:0; padding-right:2.5rem;
}
.modal h2{margin-bottom:1.25rem;}
.modal > h3:first-of-type{margin-bottom:.75rem;}
.modal .hint{line-height:1.45;}
/* Einheitlicher Schliessen-Knopf. */
.modal-close,
.modal .drawer-close{
  position:absolute; top:1rem; right:1rem; width:2.25rem; height:2.25rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0; z-index:2;
  border:1px solid var(--border); background:var(--surface); color:var(--ink-muted);
  font-size:.95rem; line-height:1; cursor:pointer; transition:background-color .15s ease, color .15s ease;
}
.modal-close:hover,
.modal .drawer-close:hover{background:var(--surface-hover); color:var(--ink);}
.modal-close:focus-visible,
.modal .drawer-close:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px;}
/* Aktionszeile (fuer neue/umgebaute Dialoge, z.B. confirmDialog()): primaere Aktion
   rechts, sekundaere schlicht daneben. */
.modal-actions{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.6rem; margin-top:1.5rem;}
/* Zerstoererische Nebenaktion (z.B. "Rezept löschen") steht links, getrennt von der
   Hauptaktion rechts. */
.modal-actions .modal-action-danger{margin-right:auto; color:var(--danger); border-color:var(--danger-soft);}
.modal-actions .modal-action-danger:hover{background:var(--danger-soft);}
/* Einklappbarer Abschnitt in Popups (z.B. "Merkmale" im Rezept-Formular). */
.modal-details{border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:1.25rem 0; padding:.1rem 0;}
.modal-details > summary{
  cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:.6rem; padding:.7rem 0;
  font-weight:700; font-size:.95rem; color:var(--ink);
}
.modal-details > summary::-webkit-details-marker{display:none;}
.modal-details > summary::before{
  content:""; width:.45rem; height:.45rem; flex:none; align-self:center; margin-right:.15rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg);
  transition:transform .15s ease;
}
.modal-details[open] > summary::before{transform:rotate(45deg);}
.modal-details > summary:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px; border-radius:4px;}
.modal-details-hint{font-weight:400; font-size:.8125rem; color:var(--ink-muted);}
.modal-details[open]{padding-bottom:.6rem;}
/* Einstieg "Neues Rezept" (26.09.2026, Variante A): abgegrenzter Kasten - Link
   uebernehmen ODER selbst eingeben, bevor das volle Formular erscheint. */
.recipe-start{
  background:var(--rail); border:1px solid var(--border); border-radius:14px;
  padding:1.1rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:.5rem;
}
.recipe-start[hidden]{display:none;}
.recipe-start-title{font-family:'Arvo', Georgia, serif; font-size:1.05rem; color:var(--ink);}
.recipe-start-label{font-size:.85rem; font-weight:700; color:var(--ink); margin-top:.25rem;}
.recipe-start-row{display:flex; gap:.5rem;}
.recipe-start-row input{
  flex:1; min-width:0; font:inherit; padding:.6rem .8rem; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); color:var(--ink);
}
.recipe-start-row input:focus-visible{outline:2px solid var(--accent-strong); outline-offset:1px;}
.recipe-start .hint{margin-top:0;}
.recipe-start-or{display:flex; align-items:center; gap:.75rem; margin:.5rem 0 .2rem; color:var(--ink-muted); font-size:.85rem;}
.recipe-start-or::before, .recipe-start-or::after{content:""; flex:1; height:1px; background:var(--border);}
.recipe-start-manual{align-self:center;}
.recipe-source-details{margin-top:0;}
.recipe-source-details #recipeFieldWrap{margin-top:.6rem;}
@media (max-width: 480px){ .recipe-start-row{flex-direction:column;} }
/* Auswahl-Optionen (Radios/Checkboxen) zweispaltig statt einer langen Spalte. */
.modal-choice-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.45rem 1rem;}
@media (max-width: 480px){ .modal-choice-grid{grid-template-columns:1fr;} }
/* Datei-Auswahl mit kleinem Vorschaubild in einer Zeile (z.B. Coverbild einer Kur). */
.modal-inline-file{display:flex; align-items:center; gap:.75rem; min-width:0;}
.modal-inline-file input[type="file"]{min-width:0; font-size:.85rem;}
.modal-inline-thumb{width:3rem; height:3rem; flex:none; object-fit:cover; border-radius:8px; border:1px solid var(--border);}
/* NEM bearbeiten: Vorschaubild links, Felder rechts (26.09.2026). */
.nem-detail-head{display:grid; grid-template-columns:6rem minmax(0, 1fr); gap:1rem; align-items:start;}
.nem-detail-thumb{width:6rem; height:6rem; object-fit:cover; border-radius:12px; border:1px solid var(--border);}
.nem-detail-thumb-empty{display:flex; align-items:center; justify-content:center; background:var(--surface-hover); color:var(--ink-muted); font-size:2rem;}
.nem-detail-fields{display:flex; flex-direction:column; gap:.6rem; min-width:0;}
.nem-detail-fields input[type="file"]{font-size:.8rem; min-width:0;}
@media (max-width: 480px){ .nem-detail-head{grid-template-columns:4rem minmax(0, 1fr);} .nem-detail-thumb{width:4rem; height:4rem;} }
/* "Per Sprache erfassen" kompakter (26.09.2026). */
.voice-capture{display:flex; flex-direction:column; gap:.6rem;}
.voice-capture-row{display:grid; grid-template-columns:1fr 1fr; gap:.5rem;}
.voice-capture-row .btn{justify-content:center;}
.voice-capture-text{display:flex; gap:.5rem; align-items:stretch;}
.voice-capture-text textarea{
  flex:1; min-width:0; resize:vertical; font:inherit; padding:.5rem .7rem;
  border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink);
}
@media (max-width: 480px){ .voice-capture-row{grid-template-columns:1fr;} .voice-capture-text{flex-direction:column;} }
.product-detail-grid{grid-template-columns:minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr);}
@media (max-width: 560px){ .product-detail-grid{grid-template-columns:1fr 1fr;} }
@media (prefers-reduced-motion: reduce){ .modal-details > summary::before{transition:none;} }
body.modal-open{overflow:hidden;}
/* Kompakte Formularzeilen in Popups (26.09.2026, Winki: "Popups nicht so hoch"):
   Beschriftung links, kurzes Eingabefeld rechts, feine Trennlinie zwischen den
   Zeilen - statt Label ueber Feld. Fuer Uhrzeit/Zahl/kurze Auswahl gedacht. */
.modal-rows{display:flex; flex-direction:column; border-top:1px solid var(--border); margin-top:.25rem;}
.modal-row{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:1rem;
  padding:.45rem 0; border-bottom:1px solid var(--border);
}
.modal-row > label{font-size:.9rem; font-weight:600; color:var(--ink);}
.modal-row > input, .modal-row > select{
  min-width:8rem; background:var(--surface-hover); border:1px solid var(--border); border-radius:8px;
  padding:.4rem .6rem; font:inherit; color:var(--ink);
}
/* Bestaetigungsdialog (confirmDialog() in app.js): schmal, liegt ueber allen anderen
   Popups; Fliesstext statt .hint, damit die Rueckfrage gut lesbar bleibt. */
.confirm-scrim{z-index:60; align-items:center;}
.confirm-modal{width:min(440px, 100%);}
.confirm-modal .confirm-message{margin:0; font-size:.95rem; line-height:1.5; color:var(--ink-muted);}
@media (max-width: 640px){
  .modal-scrim{align-items:flex-end; padding:0; overflow:hidden;}
  .modal{
    width:100% !important; max-width:none !important; max-height:92vh !important; overflow-y:auto !important;
    border-radius:20px 20px 0 0; border-bottom:none;
    padding:1.4rem 1.2rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    transform:translateY(100%); transition:transform .24s cubic-bezier(.2,.8,.2,1);
  }
  .modal-scrim.open .modal{transform:none;}
  .modal-actions{flex-direction:column-reverse; align-items:stretch;}
  .modal-actions .btn{justify-content:center;}
}
@media (prefers-reduced-motion: reduce){
  .modal-scrim, .modal, .modal-close{transition:none;}
  .modal{transform:none;}
}
.segmented{display:flex; border:1px solid var(--border); border-radius:var(--radius-pill); overflow:hidden; width:fit-content; margin-bottom:.9rem;}
.segmented button{
  font:inherit; font-size:.8125rem; font-weight:700; padding:.4rem 1rem; border:none; background:var(--surface);
  color:var(--ink-muted); cursor:pointer;
}
.segmented button.active{background:var(--accent); color:var(--accent-ink);}
.ingredient-row{display:grid; grid-template-columns:1fr 5rem 5rem auto; gap:.5rem; margin-bottom:.55rem; align-items:center;}
.ingredient-row input{font:inherit; font-size:.85rem; padding:.45rem .55rem; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--ink); width:100%;}
.icon-btn{background:none; border:none; color:var(--ink-muted); cursor:pointer; font-size:1rem; width:1.6rem;}
.icon-btn:hover{color:var(--danger);}
.hint{font-size:.75rem; color:var(--ink-muted); margin-top:.3rem;}
/* Hinweis unter "Automatisch befüllen" (Winki, 12.09.2026: "Hinweis, dass nur Gerichte
   aus dem eigenen Rezeptbuch genutzt werden") - eigene volle Zeile unterhalb der
   restlichen, nebeneinander laufenden Werkzeugleisten-Gruppen statt als weiteres
   Flex-Element mittendrin. */
.plan-autofill-hint{flex-basis:100%; margin-top:-.4rem;}

@media (prefers-reduced-motion: reduce){
  .tile, .drawer, .scrim, .toast, .modal-scrim{transition:none;}
}

/* Such-/Filterleiste (Reiter 1) */
.filter-bar{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:2.25rem;}
.search-input{
  flex:1 1 220px; min-width:180px; font:inherit; font-size:.875rem; padding:.6rem .9rem;
  border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--surface); color:var(--ink);
}
.search-input::placeholder{color:var(--ink-muted);}
.chip{
  font:inherit; font-size:.8125rem; font-weight:700; padding:.5rem 1rem; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface); color:var(--ink-muted); cursor:pointer; white-space:nowrap;
}
.chip.active{background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-strong);}

/* ---------- Mehrfachauswahl-Popover fuer den "Beliebt bei..."-Filter (Winki 10.09.2026) ---------- */
#ratingFilterWrap{position:relative; display:inline-block;}
/* "Schmeckt …" im Gericht-auswählen-Popup (Wochenplan "+") und im Board-Popup (30.09.2026:
   Popover landete ohne Bezugspunkt weit unten ausserhalb des Sichtbereichs). Knopf steht
   rechts, daher rechtsbuendig aufklappen. */
#planPickerRatingWrap, #boardPickerRatingWrap{position:relative; display:inline-block;}
#planPickerRatingWrap .rating-filter-popover, #boardPickerRatingWrap .rating-filter-popover{left:auto; right:0;}
.rating-filter-popover[hidden]{display:none;}
.rating-filter-popover{
  position:absolute; top:100%; left:0; margin-top:.4rem; z-index:5; min-width:13rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:.8rem .9rem; box-shadow:var(--shadow);
}
.rating-filter-popover .checkbox-group{flex-direction:column; gap:.5rem;}

/* ---------- Filter-Dropdown im Rezeptbuch (Winki, 14.09.2026 vierundvierzigste
   Nachbesserung: "Ich will diese ganzen Filter als Dropdown [...] also haben wir noch
   das Suchfeld und daneben ein dropdown (icon + 'Filtern')") - loest die vorherige
   flache Chip-Reihe ab, siehe FILTER_GROUPS/renderMainFilterDropdown() in app.js.
   Struktur/Positionierung bewusst analog zum bestehenden "Beliebt bei..."-Popover
   oben (#ratingFilterWrap/.rating-filter-popover), nur mit gruppierten Zeilen statt
   Checkboxen in einer Reihe. */
#mainFilterDropdownWrap{position:relative; display:inline-block;}
.dropdown-wrap{position:relative; display:inline-block;}
.filter-dropdown-trigger{display:inline-flex; align-items:center; gap:.4rem;}
.filter-dropdown-trigger-icon{display:inline-flex;}
.filter-dropdown-panel[hidden]{display:none;}
.filter-dropdown-panel{
  position:absolute; top:100%; left:0; margin-top:.4rem; z-index:5; min-width:15rem;
  max-height:70vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:.6rem .5rem; box-shadow:var(--shadow);
}
.filter-dropdown-row{
  display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; border-radius:8px;
  cursor:pointer; user-select:none; font-size:.9rem; color:var(--ink);
}
.filter-dropdown-row:hover{background:var(--surface-hover);}
.filter-dropdown-row.active{background:var(--accent-soft); color:var(--accent-strong); font-weight:700;}
.filter-dropdown-row input[type="checkbox"]{margin:0;}
.filter-dropdown-icon{display:inline-flex; align-items:center; justify-content:center; width:1.3rem; flex-shrink:0;}
.filter-dropdown-label{flex:1;}
.filter-dropdown-divider{border-top:1px solid var(--border); margin:.5rem .2rem;}
.filter-dropdown-heading{
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-muted); padding:.2rem .6rem .35rem;
}

/* Planeinstellungen-Dropdown (25.09.2026 Nachbesserung): buendelt zwei bestehende
   Toolbar-Knoepfe (Essenszeiten/Traditionen verwalten) in einem Panel - die generische
   .filter-dropdown-panel-Box ist sonst fuer Checkbox-/Radio-Reihen gedacht, hier stapeln
   wir stattdessen zwei normale Buttons untereinander. */
#planSettingsDropdownPanel:not([hidden]){display:flex; flex-direction:column; gap:.4rem; min-width:0;}
#planSettingsDropdownPanel .btn{justify-content:flex-start; width:100%;}

.chip-reset{
  font:inherit; font-size:.8125rem; font-weight:700; color:var(--accent-strong); background:none; border:none;
  cursor:pointer; text-decoration:underline; padding:.5rem .2rem;
}

/* Nährwerte (im Detail-Drawer) */
.nutrition-macros{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1rem;}
.macro-tile{background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.6rem .5rem; text-align:center;}
.macro-tile .num{display:block; font-family:'Arvo'; font-size:1.05rem; font-variant-numeric:tabular-nums;}
.macro-tile .lbl{display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); font-weight:700; margin-top:.15rem;}
.micro-list{list-style:none; margin:0 0 1rem; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.4rem .8rem;}
.micro-list li{display:flex; justify-content:space-between; font-size:.8125rem; color:var(--ink-muted); border-bottom:1px dashed var(--border); padding-bottom:.3rem;}
.micro-list li span:last-child{font-variant-numeric:tabular-nums; color:var(--ink);}
.unmatched-box{background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.8rem .9rem; margin-bottom:1rem;}
.unmatched-item{display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.8125rem; padding:.3rem 0;}
.unmatched-item .reason{color:var(--ink-muted); font-size:.7rem;}
.link-btn{font:inherit; font-size:.75rem; font-weight:700; color:var(--accent-strong); background:none; border:1px solid var(--accent-strong); border-radius:var(--radius-pill); padding:.25rem .7rem; cursor:pointer; white-space:nowrap;}
.link-search{margin-top:.5rem; display:flex; gap:.4rem;}
.link-search input{flex:1; font:inherit; font-size:.8125rem; padding:.4rem .6rem; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--ink);}
.link-results{margin-top:.5rem; display:flex; flex-direction:column; gap:.35rem; max-height:16rem; overflow-y:auto; padding-right:.2rem;}
.link-result{display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.8rem; background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:.4rem .6rem;}
.settings-hint{font-size:.8125rem; color:var(--ink-muted); line-height:1.5; margin-bottom:1rem;}
.settings-hint a{font-weight:700;}

/* Einstellungen als vier separate kleine Kartenbereiche (Winki, 11.09.2026: "Aus den
   Einstellungen vier separate kleine Bereiche machen") - Zeile 1: Design/Passwort
   (2 Bereiche), Zeile 2: je ein Bereich pro API-Key (3 Bereiche). Gleicher Kartenlook
   (Flaeche/Rahmen/Rundung) wie .member-card, damit es sich stimmig in den Rest der
   App einfuegt. Bricht bei schmaler Breite (Handy) auf eine Spalte um. */
.settings-heading{margin-bottom:1rem;}
.settings-row{display:grid; gap:1rem; margin-bottom:1rem;}
.settings-row-2{grid-template-columns:repeat(2, 1fr);}
.settings-row-3{grid-template-columns:repeat(3, 1fr);}
@media (max-width: 900px){
  .settings-row-2, .settings-row-3{grid-template-columns:1fr;}
}
.settings-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:1rem 1.1rem;
}
.settings-card h3{margin:0 0 .7rem; font-size:1rem;}
.settings-card .settings-hint{margin-bottom:.7rem;}

/* Funktionsstatus-Zeilen in "Mein Konto" (25.09.2026, ChatGPT-UX-Vorlage: "Zeige...
   verstaendlich den Funktionsstatus von Naehrwertberechnung, KI und Spracheingabe") -
   siehe renderSettingsPanel() in app.js. */
.settings-status-row{display:flex; align-items:center; gap:.5rem; padding:.3rem 0; font-size:.875rem;}
.settings-status-dot{width:.55rem; height:.55rem; border-radius:50%; flex-shrink:0;}
.settings-status-dot.on{background:var(--accent-strong);}
.settings-status-dot.off{background:var(--ink-muted);}

/* ---------- KI-Essensplan-Assistent (Winki, 14.09.2026) ----------
   ".ai-assistant-btn" bekommt bewusst eine leicht abgesetzte Akzent-Umrandung statt
   ein reiner .btn-ghost zu bleiben, damit er sich von den uebrigen Werkzeugleisten-
   Buttons abhebt - ausschliesslich ueber vorhandene Theme-Variablen (--accent), also
   automatisch in allen 3 Designs stimmig (kein fest codierter Farbwert, siehe die
   Chevron-Ladebalken-Lehre aus der sechsten Runde: --accent/--accent-strong sind in
   Salat-Fresh UND Sporty-Steel identisch, deshalb hier bewusst nur EINE Akzentfarbe
   verwendet statt eines zweifarbigen Verlaufs). */
.ai-assistant-btn{border-color:var(--accent); color:var(--accent);}
.ai-assistant-btn:hover{background:var(--accent-soft);}

/* Breiter als ein normales Modal (min(640px,100%), siehe ".modal" oben), damit auf
   groesseren Bildschirmen neben dem Chatverlauf noch Platz fuer den "Vorschläge"-
   Bereich bleibt (siehe ".ai-chat-layout" unten) - auf schmalen Bildschirmen wirkt
   sich das dank min(...,96vw) praktisch nicht aus. */
.ai-chat-modal{width:min(880px, 96vw); display:flex; flex-direction:column; max-height:min(82vh, 760px); padding-bottom:1.2rem;}
/* Zweizeiliger Titel "SchmatziSpatzi"/"Dein KI-Essensplaner" (Winki, 14.09.2026
   Nachtrag) statt der bisherigen technischen Ueberschrift "KI-Essensplan-Assistent",
   plus "↺ Neuer Chat" daneben - eigene Kopfzeile statt absoluter Positionierung,
   nur mit genug rechtem Abstand (padding-right), damit nichts unter den fest
   positionierten "✕"-Button (siehe ".modal-close") rutscht. */
.ai-chat-header{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.5rem .6rem; padding-right:2.4rem; margin-bottom:.9rem;}
.ai-chat-title-brand{font-size:1.4rem; font-weight:800;}
.ai-chat-title-sub{font-size:.85rem; color:var(--ink-muted); margin-top:.1rem;}
.ai-chat-reset-btn{flex-shrink:0; font-size:.78rem; padding:.35rem .7rem; margin-top:.15rem;}
/* Chatverlauf (links/oben) + persistenter "Vorschläge"-Bereich (rechts/unten) -
   standardmaessig (auch auf dem Handy) untereinander gestapelt, jeweils mit eigenem
   Scroll-Bereich; ab einer gewissen Breite nebeneinander (siehe Media Query unten). */
.ai-chat-layout{display:flex; flex-direction:column; flex:1; min-height:0; gap:.8rem;}
.ai-chat-messages{flex:1 1 55%; min-height:5rem; overflow-y:auto; display:flex; flex-direction:column; gap:.7rem; margin:.4rem -.3rem 0; padding:.2rem .3rem;}
.ai-chat-bubble{max-width:85%; padding:.6rem .85rem; border-radius:14px; font-size:.88rem; line-height:1.45; white-space:pre-wrap;}
.ai-chat-bubble.user{align-self:flex-end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:4px;}
.ai-chat-bubble.assistant{align-self:flex-start; background:var(--bg); border:1px solid var(--border); border-bottom-left-radius:4px;}
.ai-chat-bubble.ai-chat-loading{font-style:italic; color:var(--ink-muted);}
.ai-chat-assumptions{font-size:.78rem; color:var(--ink-muted); font-style:italic; margin:-.2rem 0 .2rem .1rem;}
/* "Vorschläge"-Bereich (Winki, 14.09.2026 Nachtrag: "Referenzkacheln ... in einem
   extra Bereich ('Vorschläge', z.B. als Streifen rechts im KI-Essensplaner-Chat)") -
   bleibt ueber die gesamte Chat-Sitzung sichtbar stehen (wird nur ueber "↺ Neuer
   Chat" geleert), statt mit dem Chatverlauf nach oben wegzuscrollen. */
.ai-chat-suggestions-panel{flex:1 1 45%; min-height:5rem; display:flex; flex-direction:column; border-top:1px solid var(--border); padding-top:.7rem; overflow:hidden;}
/* Derselbe wiederkehrende Bugfix wie bei ".btn[hidden]"/".tabs[hidden]" (siehe dort):
   ohne dieses "[hidden]"-Gegenstueck wuerde die eigene "display:flex"-Regel oben die
   Browser-Vorgabe "[hidden]{display:none}" ausstechen und das Panel bliebe trotz
   hidden-Attribut sichtbar. */
.ai-chat-suggestions-panel[hidden]{display:none;}
.ai-chat-suggestions-panel-title{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); margin-bottom:.5rem; flex-shrink:0;}
.ai-chat-suggestions-panel-list{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:.7rem; padding:.1rem .1rem .2rem;}
@media (min-width: 760px){
  .ai-chat-layout{flex-direction:row;}
  .ai-chat-messages{flex:1 1 auto;}
  .ai-chat-suggestions-panel{flex:0 0 16rem; width:16rem; border-top:none; border-left:1px solid var(--border); padding-top:0; padding-left:1rem;}
}
.ai-suggestion-card{border:1px solid var(--border); border-radius:12px; padding:.75rem .9rem; background:var(--surface); flex-shrink:0;}
.ai-suggestion-card h4{margin:.15rem 0 .3rem; font-size:.95rem;}
.ai-suggestion-meta{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); font-weight:700;}
.ai-suggestion-reasoning{font-size:.8rem; color:var(--ink-muted); margin:.35rem 0;}
.ai-suggestion-actions{margin-top:.6rem;}
.ai-suggestion-place-row{display:flex; gap:.4rem; align-items:center; margin-top:.6rem; flex-wrap:wrap;}
.ai-suggestion-place-row select{font:inherit; font-size:.8125rem; border:1px solid var(--border); border-radius:8px; padding:.35rem .5rem; background:var(--bg); color:var(--ink);}
.ai-chat-input-row{display:flex; gap:.6rem; align-items:flex-end; border-top:1px solid var(--border); padding-top:1rem; margin-top:.2rem;}
.ai-chat-input-row textarea{
  flex:1; resize:none; font:inherit; font-size:.88rem; line-height:1.4; padding:.55rem .75rem; border-radius:12px;
  border:1px solid var(--border); background:var(--bg); color:var(--ink); min-height:2.9rem; max-height:7.5rem;
  overflow-y:auto;
}

/* Referenzierte Katalog-Gerichte im KI-Chat (urspruenglich 08.09.2026, seit dem
   Nachtrag vom 14.09.2026 Teil des persistenten "Vorschläge"-Bereichs statt einer
   Kachelreihe direkt im Chatverlauf, siehe ".ai-chat-suggestions-panel" oben und
   "Kann es sein, dass wir sie neben dem scrollbaren Bereich des Chats in einem
   extra Bereich anzeigen müssten" - Winki). Gleiche Kachel-Optik (.tile-photo/
   .tile-name/.tile-meta) wie im Rezeptbuch, aber kompakter, da hier nur ein
   kurzer Hinweis + zwei Aktionen noetig sind. flex-shrink:0 verhindert, dass eine
   Kachel im scrollenden Vorschlaege-Bereich unter ihre eigentliche Inhaltshoehe
   gequetscht wird (dieselbe Flexbox-"min-height:auto"-Falle, die beim ersten Bau
   dieser Kacheln als horizontale Reihe im Chatverlauf gefunden wurde). */
.ai-ref-tile{
  flex-shrink:0; width:100%; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow);
}
.ai-ref-tile .tile-photo{aspect-ratio:16/9;}
.ai-ref-tile-body{padding:.6rem .65rem .7rem;}
.ai-ref-tile-body .tile-name{font-size:.82rem; margin-bottom:.3rem;}
.ai-ref-tile-body .tile-meta{font-size:.68rem;}
.ai-ref-tile-actions{display:flex; gap:.4rem; margin-top:.5rem;}
.ai-ref-tile-actions .btn{flex:1; font-size:.75rem; padding:.35rem .5rem;}

/* Kategorie-Abfrage fuer neu uebernommene KI-Gerichte (Winki, 08.09.2026: "neue
   ki-gerichte müssen noch einer Kategorie zugeordnet werden. dazu müsste die
   abfrage gleich kommen, wenn der nutzer das gericht erstmalig übernimmt") -
   erscheint direkt in der Vorschlagskarte, nutzt bewusst dieselbe
   .ai-suggestion-place-row-Optik wie die Tag/Slot-Auswahl weiter unten, damit
   keine zusaetzliche Formsprache noetig ist. */
.ai-suggestion-category-row{margin-top:.6rem;}

/* Wiki > Ernährungsformen: kleiner Erklär-Kasten "welche Regel gilt für High-Carb/
   -Protein/-Fat/Low-Carb/Keto?" (Winki, 17.09.2026), direkt über dem Kachel-Raster. */
.ernaehrungsform-tag-regeln{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:1rem 1.2rem; margin:1rem 0 1.4rem;}
.ernaehrungsform-tag-regeln-list{margin:.5rem 0 0; padding-left:1.2rem; font-size:.875rem; line-height:1.55;}
.ernaehrungsform-tag-regeln-list li{margin-bottom:.3rem;}
/* Wiki > Saisonalitaet (Winki, 26.09.2026) - Monatsleiste + Sorten-Chips je Gruppe.
   "frisch" = Akzentflaeche, "Lager" = gestrichelter Rahmen, damit beides auch ohne
   Farbwahrnehmung unterscheidbar bleibt. */
.season-month-bar{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:1rem 0;}
.season-month-select{min-width:9rem; cursor:pointer;}
.season-month-step{padding:.35rem .7rem; font-size:1.1rem; line-height:1;}
.season-legend{display:inline-flex; gap:.4rem; margin-left:.4rem;}
.season-show-recipes{margin-left:auto;}
.season-groups{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1rem;}
.season-group{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:.9rem 1rem;}
.season-group .section-label{margin-top:0;}
.season-count{opacity:.6; font-weight:normal; margin-left:.25rem;}
.season-items{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem;}
.season-item, .season-pill{display:inline-block; padding:.25rem .65rem; border-radius:999px; font-size:.85rem; line-height:1.3;}
.season-item-fresh, .season-pill-fresh{background:var(--accent-soft); color:var(--ink); border:1px solid transparent;}
.season-item-storage, .season-pill-storage{background:transparent; color:var(--ink); border:1px dashed var(--border);}
@media (max-width:600px){ .season-show-recipes{margin-left:0; width:100%;} }

/* Zutaten-Nährwerte verwalten ("Zutaten prüfen", erreichbar über Rezeptbuch) */
.nutrition-admin-bulk-ai{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:.8rem;}
.ingredient-admin-list{display:flex; flex-direction:column; gap:.6rem; margin-top:1.3rem;}
.ingredient-admin-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden;}
.ingredient-admin-summary{display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem; cursor:pointer; text-align:left; width:100%; background:none; border:none; font:inherit; color:inherit;}
.ingredient-admin-summary:hover{background:var(--surface-hover);}
.ingredient-admin-info{flex:1; min-width:0;}
.ingredient-admin-name{font-weight:700; font-size:.92rem;}
.ingredient-admin-usedin{font-size:.75rem; color:var(--ink-muted); margin-top:.15rem;}
.ingredient-admin-merged{font-size:.75rem; color:var(--ink-muted); margin-top:.1rem; font-style:italic;}
.ingredient-admin-summary .badge{flex-shrink:0;}
.badge-linked{background:var(--cat-snack-soft); color:var(--cat-snack);}
.badge-manual{background:var(--accent-soft); color:var(--accent-strong);}
.badge-unlinked{background:var(--border); color:var(--ink-muted);}
.badge-ai{background:var(--cat-cold-soft); color:var(--cat-cold);}
/* Herkunfts-Kuerzel vor Suchtreffern (BLS = primaer, USDA = Fallback, siehe
   nutrition.py) - bewusst dezent, kein eigener knalliger Farbcode noetig. */
.badge-bls,.badge-usda{background:var(--border); color:var(--ink-muted); font-size:.62rem; padding:.08rem .35rem; margin-right:.3rem;}

/* Zutat-fuer-Zutat-Aufschluesselung der aus Zutaten berechneten Naehrwerte (Gericht-
   Detailansicht, "Berechnung im Detail") - eigener Scroll-Container, damit die Tabelle bei
   schmalen Bildschirmen nicht die ganze Seite in die Breite zieht (Winki, 09.09.2026). */
.nutrition-breakdown-scroll{overflow-x:auto; margin-bottom:1rem;}
.nutrition-breakdown{width:100%; border-collapse:collapse; font-size:.78rem; white-space:nowrap;}
.nutrition-breakdown th{text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-muted); padding:.3rem .6rem; border-bottom:1px solid var(--border);}
.nutrition-breakdown td{padding:.4rem .6rem; border-bottom:1px dashed var(--border); vertical-align:top;}
.nutrition-breakdown td:first-child, .nutrition-breakdown th:first-child{white-space:normal; min-width:9rem;}
/* "Wiki" > "Nährwerttabelle" (Winki, 12.09.2026 vierundzwanzigste Nachbesserung: "zeig
   gleich die nährwerttabelle im wiki an. nicht nur die suche.") - die komplette BLS-/
   USDA-Referenztabelle (mehrere tausend Zeilen) braucht zusaetzlich zum horizontalen
   Scroll (.nutrition-breakdown-scroll) eine feste Hoehe mit vertikalem Scroll und
   angeklebtem Tabellenkopf, sonst waere die Seite endlos lang. */
.nutrition-overview-scroll{max-height:min(65vh, 34rem); overflow-y:auto;}
.nutrition-overview-scroll thead th{position:sticky; top:0; background:var(--bg); z-index:1;}
.breakdown-source{font-size:.68rem; color:var(--ink-muted); font-weight:400; margin-top:.15rem; white-space:normal;}
.ingredient-admin-caret{flex-shrink:0; color:var(--ink-muted); transition:transform .15s ease;}
.ingredient-admin-card.open .ingredient-admin-caret{transform:rotate(180deg);}
.ingredient-admin-form{padding:0 1rem 1.1rem;}
/* "Wiki" > "Ernährungsformen" (Winki, 12.09.2026 dreiundzwanzigste Nachbesserung) -
   Fließtext innerhalb der wiederverwendeten .ingredient-admin-form-Ausklappkarte. */
.ernaehrungsform-text{margin:0; line-height:1.55; white-space:pre-line;}
.nutrient-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:.6rem .7rem; margin:.7rem 0 1rem;}
@media (max-width:680px){ .nutrient-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:420px){ .nutrient-grid{grid-template-columns:1fr;} }
.nutrient-field label{font-size:.68rem; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.03em; display:block; margin-bottom:.25rem;}
.nutrient-field-inputs{display:flex; gap:.3rem;}
.nutrient-field-inputs input{font:inherit; font-size:.85rem; padding:.4rem .5rem; border-radius:7px; border:1px solid var(--border); background:var(--bg); color:var(--ink);}
.nutrient-field-inputs input[type="number"]{flex:1; min-width:0;}
.nutrient-field-inputs input[type="text"]{width:3.4rem; flex-shrink:0; text-align:center;}
.ingredient-admin-actions{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:.3rem;}
.admin-chip{
  font:inherit; font-size:.8125rem; font-weight:700; padding:.5rem 1rem; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface); color:var(--ink-muted); cursor:pointer; white-space:nowrap;
}
.admin-chip.active{background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-strong);}

/* Kochansicht - bewusst IMMER hell/weiss (unabhängig vom Farbschema),
   grosse Schrift, für Handy in der Küche gedacht */
.cookview-scrim{
  position:fixed; inset:0; background:#ffffff; color:#1f1f1f; z-index:60;
  overflow-y:auto; display:none;
}
.cookview-scrim.open{display:block;}
.cookview-header{
  position:sticky; top:0; background:#ffffff; border-bottom:1px solid #e7e2d6;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; z-index:1;
}
.cookview-header h2{font-family:'Arvo', serif; font-size:1.15rem; color:#1f1f1f; margin:0;}
.cookview-close{
  font:inherit; font-size:1rem; font-weight:700; padding:.6rem 1.1rem; border-radius:999px;
  border:1px solid #d8d0bd; background:#f7f3e8; color:#1f1f1f; cursor:pointer; flex-shrink:0;
}
.cookview-body{max-width:640px; margin:0 auto; padding:1.5rem 1.2rem 4rem;}
.cookview-portions{font-size:1rem; color:#6b604c; margin-bottom:1.6rem;}
.cookview-section-heading{
  font-family:'Arvo', serif; font-size:1.15rem; font-weight:700; color:#1f1f1f;
  margin:2rem 0 1rem; padding-bottom:.4rem; border-bottom:2px solid #b9502d;
}
.cookview-section-heading:first-child{margin-top:0;}
.cookview-step{display:flex; gap:1rem; margin-bottom:2rem; align-items:flex-start;}
.cookview-step-num{
  flex-shrink:0; width:2.4rem; height:2.4rem; border-radius:50%; background:#b9502d; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem;
}
.cookview-step-content{flex:1; min-width:0;}
.cookview-step-ingredients{
  font-size:.95rem; font-weight:700; color:#8a5a2e; background:#faf1e2; border-radius:8px;
  padding:.5rem .8rem; margin-bottom:.6rem; display:inline-block;
}
.cookview-step-text{font-size:1.25rem; line-height:1.6; color:#1f1f1f;}
@media (max-width:480px){
  .cookview-step-text{font-size:1.15rem;}
  .cookview-step-num{width:2.1rem; height:2.1rem; font-size:1rem;}
  .cookview-body{padding:1.2rem .9rem 3rem;}
}
.checkbox-group{display:flex; flex-wrap:wrap; gap:.4rem 1.1rem;}
.checkbox-group .checkbox-field{margin-bottom:0;}
.badge-diet{background:var(--cat-drinks-soft); color:var(--cat-drinks);}
/* ---------- Essensplan (Reiter "Essensplan") ---------- */
/* Wochen-Navigation oberhalb des Plan-Toolbars (Winki, 11.09.2026: "wochenweise vor/
   zurueck gehen", "aktuelle Woche muss deutlich erkennbar sein, farblich vielleicht
   praesenter") - .plan-week-range-current hebt die echte aktuelle Kalenderwoche
   farblich vom neutralen Grau ab, in das andere Wochen gerendert werden. */
.plan-week-nav{display:flex; align-items:center; justify-content:center; gap:.75rem; margin-bottom:1rem;}
.plan-week-nav-btn{
  font:inherit; font-size:1.05rem; font-weight:700; line-height:1; width:2.1rem; height:2.1rem;
  border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--ink);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.plan-week-nav-btn:hover:not(:disabled){background:var(--surface-hover); border-color:var(--accent-soft);}
.plan-week-nav-btn:disabled{opacity:.35; cursor:not-allowed;}
.plan-week-range{
  font-size:.875rem; font-weight:600; color:var(--ink-muted); padding:.4rem 1rem;
  border-radius:var(--radius-pill); border:1px solid transparent; white-space:nowrap;
}
.plan-week-range strong{color:var(--ink); font-weight:700;}
.plan-week-range-current{
  background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-soft);
}
.plan-week-range-current strong{color:var(--accent-strong);}
.plan-week-today-btn{font-size:.8125rem; padding:.4rem .9rem;}
.plan-toolbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap;}
.plan-export-group, .plan-manage-group, .plan-ai-group{display:flex; gap:.5rem; flex-wrap:wrap;}
.plan-layout-toggle{display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-pill); padding:.2rem; gap:.2rem; background:var(--surface);}
.layout-btn{
  font:inherit; font-weight:700; font-size:.8125rem; border:none; background:none; color:var(--ink-muted);
  padding:.4rem .9rem; border-radius:var(--radius-pill); cursor:pointer;
}
.layout-btn.active{background:var(--accent); color:var(--accent-ink);}

/* Horizontale Unterseiten-Leiste je Hauptbereich (Winki, 11.09.2026: "Links sollten die
   Logisch-Übergeordneten Seiten sein, horizontal dann immer nur die Unterseiten") -
   ersetzt die vorherige, nur für "Prüfen" existierende .pruefen-subnav (gleiche Optik,
   jetzt fuer alle 4 Hauptbereiche generisch ueber APP_SECTIONS/renderSectionSubnav()). */
.section-subnav-row{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem .75rem; flex-wrap:wrap;
  margin-bottom:1.5rem;
}
/* Bewusst als unterstrichene Reiter statt Pillen gestaltet (Winki, 11.09.2026: "die
   horizontale menü-leiste unterscheidet sich noch nicht wirklich von den filtern
   (angepinnt, einfrierbar, etc.) Das muss optimiert werden") - Filter-Chips (.chip) und
   der Ansicht-Umschalter (.layout-btn) bleiben abgerundete Pillen mit Fuellfarbe im
   aktiven Zustand; die Unterseiten-Navigation eines Bereichs (Boards/Kochbuch-Import/...)
   ist dagegen jetzt klar als ECHTE NAVIGATION erkennbar: keine Pillenform, kein Rahmen,
   stattdessen ein schlichter Unterstrich, der beim aktiven Reiter in der Akzentfarbe
   erscheint - dieselbe Optik, die z.B. Browser-Tabs oder Ordnerreiter verwenden.*/
/* Klassisches, farbig hinterlegtes Unterseiten-Menue (26.09.2026, Winki nach drei
   Zwischenstaenden: "ich will ein klassisches, farblich hinterlegtes horizontales
   menü. level 2 dann heller hinterlegt. außerdem ist das menü zu hoch"). Ebene 1 ist
   eine volle, dunkle Leiste (--nav-bg) ueber die ganze verfuegbare Breite, der
   aktive Punkt eine helle Flaeche (--nav-active-bg). Ebene 2 (nur bei "Planvorlagen &
   Kuren", .kuren-group-subnav) haengt direkt darunter in einem helleren Ton
   (--nav2-bg). Kompakt: keine Innenabstaende der Leiste selbst, nur die der Punkte.
   Bewusst ohne :has(), damit die Darstellung auf jeder Seite identisch ist. */
.section-subnav{
  flex:1 1 auto; display:flex; flex-wrap:wrap; gap:2px; align-items:stretch; padding:3px;
  background:var(--nav-bg); border-radius:10px; position:relative; z-index:1;
}
.section-subnav:empty{display:none;}
.section-subtab-btn{
  font:inherit; font-weight:600; font-size:.875rem; line-height:1.2; border:none; background:none;
  color:var(--nav-ink); padding:.5rem 1rem; border-radius:7px; cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.section-subtab-btn:hover{background:color-mix(in srgb, var(--nav-ink) 9%, transparent); color:var(--nav-ink);}
.section-subtab-btn:focus-visible{outline:2px solid var(--nav-active-bg); outline-offset:1px;}
.section-subtab-btn.active,
.section-subtab-btn.active:hover{background:var(--nav-active-bg); color:var(--nav-active-ink); font-weight:700;}
@media (prefers-reduced-motion: reduce){ .section-subtab-btn{transition:none;} }

/* Gruppen-Zwischenueberschrift in der horizontalen Subnav (25.09.2026, ChatGPT-UX-
   Vorlage: "Gruppiere die Backend-Inhalte") - rein visuell, aendert nichts an der
   eigentlichen (weiterhin flachen, einstufigen) Navigation, siehe renderSectionSubnav()
   in app.js. */
.section-subnav-group-label{
  align-self:center; font-size:.75rem; font-weight:600; color:var(--nav-ink); opacity:.7;
  padding:0 .35rem 0 1rem;
}

/* "Planvorlagen & Kuren"-Untermenue (25.09.2026, ChatGPT-UX-Vorlage: Kuren -> Wochenplan) -
   kleineres, eingerücktes Pendant zur Haupt-Subnav (.section-subnav), siehe
   #kurenGroupSubnav in index.html / initKurenGroupSubnav() in app.js. */
/* Zweite Ebene (nur "Planvorlagen & Kuren") als Karteireiter, die unter der Leiste
   von Ebene 1 haengen (Winki, 26.09.2026). Jeder Reiter ist oben gerade (liegt an der
   Leiste an) und unten mit demselben Radius gerundet wie die Leiste. Der aktive
   Reiter traegt dieselbe Farbe wie der aktive Punkt von Ebene 1 (--nav-active-bg) -
   so ist der aktive Pfad durchgehend markiert und klar von der Leiste (--nav-bg)
   unterscheidbar (Winki: "die aktive seite level 2 muss sich von inaktiv level 1
   unterscheiden"); die inaktiven Reiter sind heller (--nav2-bg). */
.kuren-group-subnav{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px; margin:-1.5rem 0 1.25rem; padding:0 .75rem;
}
/* Bekannte [hidden]-Falle: ohne diese Regel stand das Kuren-Untermenue per
   display:flex auf JEDER Seite (Dashboard, Wiki, Freunde, ...). */
.kuren-group-subnav[hidden]{display:none;}
/* Handy: Reiter nicht umbrechen (ein umgebrochener Reiter haenge sonst "in der Luft"),
   sondern waagerecht wischbar. */
@media (max-width: 640px){
  .kuren-group-subnav{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
  .kuren-group-subnav::-webkit-scrollbar{display:none;}
  .kuren-group-subnav .section-subtab-btn{flex:none;}
}
.kuren-group-subnav .section-subtab-btn{
  font-size:.8125rem; padding:.45rem .95rem .5rem; color:var(--nav2-ink);
  background:var(--nav2-bg); border-radius:0 0 10px 10px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nav-bg) 70%, transparent);
}
.kuren-group-subnav .section-subtab-btn:hover{background:color-mix(in srgb, var(--nav2-ink) 7%, var(--nav2-bg)); color:var(--nav-ink);}
.kuren-group-subnav .section-subtab-btn:focus-visible{outline-color:var(--nav-active-bg);}
.kuren-group-subnav .section-subtab-btn.active,
.kuren-group-subnav .section-subtab-btn.active:hover{background:var(--nav-active-bg); color:var(--nav-active-ink); font-weight:700; padding-bottom:.65rem; box-shadow:none;}

/* "Heute" (25.09.2026, dritte Nachbesserung zur ChatGPT-UX-Vorlage) - siehe
   loadAndRenderHeute()/renderHeutePage() in app.js. Bewusst schlichte Liste statt
   Kachel-Grid, da es hier nur um einen schnellen Tagesueberblick geht, nicht um
   Bearbeitung (dafuer bleibt "Wochenplan" zustaendig). */
.heute-confirm-banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem;
  margin:0 0 1rem; padding:.7rem .9rem; background:var(--warn-soft); border:1px solid var(--warn);
  border-radius:var(--radius-card); font-size:.85rem; font-weight:600;
}
.heute-slot{margin:0 0 1.2rem;}
.heute-slot-label{
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-muted); margin:0 0 .4rem;
}
.heute-entry{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.6rem .8rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-card); margin:0 0 .5rem;
}
.heute-entry-name{font-weight:600;}
.heute-entry-people{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;}

.autofill-strategy-select{
  font:inherit; font-size:.8125rem; border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:.5rem 1rem; background:var(--surface); color:var(--ink); cursor:pointer;
}

/* "nur Blitzrezepte"/"nur Superfoods" (Winki, 12.09.2026 Nachbesserung): zwei simple
   Checkbox-Filter neben der Autofill-Strategie, gleiche Pillenoptik wie die restliche
   plan-manage-group, damit sie nicht wie eigenstaendige neue UI wirken. */
.autofill-filter-toggle{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.8125rem; font-weight:700;
  color:var(--ink-muted); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:.5rem 1rem; background:var(--surface); cursor:pointer; user-select:none;
}
.autofill-filter-toggle input{cursor:pointer;}

/* Zauberstab-Popup (Winki, 25.09.2026, zweite Nachbesserung: "die checkboxen sind
   viel zu breit ... texte nicht gleich komplett sichtbar / auch doppelt sich
   manches"): bewusst KEINE ".field"-Divs mehr fuer die Gruppen im Popup -
   ".field input{width:100%}" (siehe Regel bei ".field" weiter unten) hatte jede
   Checkbox darin zu einer riesigen, leeren Box gezerrt (die Regel war nur fuer
   Text-/Auswahlfelder gedacht, nie fuer Checkboxen/Radios). Die neutrale Klasse
   hier bringt nur Zeilenabstand mit, ohne diese Nebenwirkung. */
.autofill-modal-section{display:flex; flex-direction:column; gap:.55rem;}
.autofill-modal-section > label{font-size:.8rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:.5rem;}
.autofill-modal-section > label select{flex:1; min-width:0;}
/* Innerhalb des Popups soll .autofill-filter-toggle (Basis-Regel oben, weiterhin
   unveraendert als kompakte Toolbar-Pille fuer #moonCalendarToggle aktiv) eine
   volle, normal umbrechende Zeile sein statt einer schmalen Pille. */
#autofillSettingsRoot .autofill-filter-toggle{
  display:flex; align-items:flex-start; gap:.55rem; width:100%; border-radius:8px;
  white-space:normal; text-align:left; font-weight:600;
}
#autofillSettingsRoot .autofill-filter-toggle input[type="checkbox"]{
  flex:none; width:auto; margin-top:.15rem;
}
/* Kompakteres Zauberstab-Popup (26.09.2026, Popups nicht so hoch). */
.autofill-modal .autofill-modal-section{gap:.4rem; margin-bottom:1.1rem;}
.autofill-modal .autofill-modal-section > .hint{margin-top:0;}
.autofill-section-title{font-weight:700; font-size:.9rem; color:var(--ink);}
.autofill-grid-2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.45rem;}
.autofill-grid-3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.45rem;}
.autofill-grid-3 > label{display:flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:700; color:var(--ink-muted);}
.autofill-grid-3 select, .autofill-grid-2 select{width:100%; min-width:0;}
#autofillSettingsRoot .autofill-grid-2 .autofill-filter-toggle{padding:.45rem .7rem; align-items:center;}
#autofillSettingsRoot .autofill-grid-2 .autofill-filter-toggle input[type="checkbox"]{margin-top:0;}
@media (max-width: 480px){ .autofill-grid-2, .autofill-grid-3{grid-template-columns:1fr;} }

/* "nur Tag(e) x"/"ganze Woche"-Zeitauswahl fuer "Automatisch befüllen"
   (Nachbesserung 15.09.2026) - dieselbe Popover-Optik wie das bestehende
   "Beliebt bei..."-Popover (.rating-filter-popover), nur ueber diesem eigenen
   Wrapper positioniert (siehe initAutofillScopePopover() in app.js). */
.autofill-scope-wrap{position:relative; display:inline-block;}

/* "Zaubervogel"-Popup nach "Automatisch befüllen" (Nachbesserung 15.09.2026,
   überarbeitet nach Rückmeldung "das zaubervogel-popup funktioniert nicht" / "dieser
   hinweis blendet sich zu schnell aus, ich hätte den gern als popup, in dem popup
   kommt oben das gleiche zaubervogel-bild"): jetzt ein normales, dauerhaft offenes
   Popup über das gemeinsame #zaubervogelScrim (.modal-scrim, siehe index.html) -
   Bild oben zentriert, Ergebnis-Text darunter, siehe showAutofillResultPopup() in
   app.js. Eigene, etwas schmalere Modal-Breite als der Standard-.modal (reiner
   Hinweis-Dialog, keine Formularfelder). */
.zaubervogel-modal{width:min(420px, 100%); text-align:center;}
.zaubervogel-img{
  display:block; margin:0 auto 1.1rem; width:min(60vw, 170px); height:170px;
  max-width:min(60vw, 170px); max-height:170px; min-width:90px; min-height:90px; object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(20,14,8,.35));
}
.zaubervogel-message{margin:0 0 1.3rem; font-size:1rem; line-height:1.4;}
/* Nachtrag 15.09.2026 (Winki: "Das Popup ist nicht horizontal zentriert. bitte
   machen."): .modal-scrim zentriert per Flexbox ueber die volle Fensterbreite
   (inset:0) - bei der schmalen, festen 230px-Seitenleiste (siehe .sidebar oben)
   sieht das kompakte Zaubervogel-Popup dadurch sichtbar nach links verschoben aus,
   weil es optisch am INHALTSBEREICH rechts der Seitenleiste gemessen wird, nicht am
   ganzen Fenster. Ab der Breite, ab der die Seitenleiste tatsaechlich eine feste
   linke Spalte ist (> 860px, siehe die @media-Regel fuer .sidebar oben - darunter
   wird sie eine volle Breite einnehmende Kopfleiste und diese Korrektur muss
   entfallen), daher die linke Kante des Scrims um die Seitenleisten-Breite
   einruecken, damit "zentriert" sich auf den sichtbaren Inhaltsbereich bezieht. */
@media (min-width: 861px){
  #zaubervogelScrim{left:230px;}
}

.plan-grid-horizontal{overflow-x:auto; padding-bottom:.5rem;}
.plan-table{display:grid; grid-template-columns:110px repeat(7, minmax(120px, 1fr)); gap:.6rem; min-width:900px;}
.plan-corner{background:transparent;}
.plan-day-head{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  font-weight:700; font-size:.85rem; color:var(--ink); text-align:center; padding:.4rem 0;
}
.plan-day-date{font-size:.7rem; font-weight:500; color:var(--ink-muted);}
/* "X macht eine Kur" - Tag-Kopf-Hinweis (Winki, 14.09.2026, vierte Runde: "diese
   Tage werden im Kalender noch überschrieben mit User macht eine Kur -> direkt
   unter der Wochentag/Datumsanzeige") - bewusst schmal/klein, damit die Kopfzeile
   bei mehreren Mitgliedern nicht unnötig hoch wird. */
.plan-day-cure-note{font-size:.62rem; font-weight:600; color:var(--accent-strong); line-height:1.25; margin-top:.1rem;}
/* "Wer macht gerade eine Kur" oben im Essensplan (Winki, 14.09.2026, vierte Runde) */
.plan-cure-banner{
  display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 .8rem;
}
.plan-cure-banner-item{
  display:flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:.35rem .8rem .35rem .35rem; font-size:.8rem; font-weight:600;
  /* jetzt ein <button> statt eines <div> (25.09.2026: Klick springt zu "Laufende
     Kuren", siehe initKurenGroupSubnav() in app.js) - Button-Grundformat zuruecksetzen,
     damit die bisherige Pillen-Optik unveraendert bleibt. */
  font-family:inherit; cursor:pointer; text-align:left;
}
.plan-cure-banner-item:hover{background:var(--surface-hover);}
/* Convenience Produkte, MDH-Ablauf-Vorschlag (Phase 3, 14./15.09.2026) - siehe
   renderPlanMhdBanner() in app.js. Bewusst ein eigener, deutlich als "Achtung"
   erkennbarer Kasten (warnfarbener Rand) statt eine reine Wiederholung des
   Kur-Banner-Looks, damit er in der ohnehin schon vollen Essensplan-Kopfzeile
   nicht mit dem reinen Status-Hinweis "X macht eine Kur" verwechselt wird. */
.plan-mhd-banner{
  display:flex; flex-direction:column; gap:.5rem; margin:0 0 .8rem; padding:.7rem .9rem;
  background:var(--warn-soft); border:1px solid var(--warn); border-radius:var(--radius-card);
}
.plan-mhd-banner-title{font-size:.82rem; font-weight:700; color:var(--warn);}
.plan-mhd-banner-item{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:.3rem .7rem; font-size:.8rem;
}
.plan-mhd-banner-name{font-weight:700;}
.plan-mhd-banner-item select{font-size:.78rem; padding:.15rem .3rem;}
/* Kompakte "Info-Kachel" fuer Vorschlaege (Winki, 14.09.2026, fuenfte Runde) - siehe
   cureTileHtml: flacheres Titelbild statt des vollen 4:3-Fotos der eigenen Kuren. */
.cure-tile-suggestion .tile-photo{aspect-ratio:16/7;}
/* Wiki-"Ernährungsformen"-Kacheln (Winki, 14.09.2026, sechste Runde: "jede
   ernährungsform soll als popup beim draufklicken angezeigt werden - nicht zum
   ausklappen") - dieselbe flachere "Info-Kachel"-Optik wie bei den Kur-Vorschlägen
   oben, da hier reiner Text/ein Bild angezeigt wird statt eines vollen Gericht-Fotos. */
.ernf-tile-photo{aspect-ratio:16/7;}
/* Echter Chevron-Ladebalken statt Sternen-Reihe (Winki, 14.09.2026, sechste Runde:
   "du hast zwar jetzt sterne, aber so meinte ich es nicht. das erinnert an ein
   rating, nicht an einen fortschritt. wir brauchen hier einen
   ladebalken/fortschrittsbalken. gerne so wie hier im anhang. achtung: farben an
   design theme anpassen.") - siehe cureProgressBarHtml in app.js. Das
   Chevron-Aussehen des Referenzbilds kommt ueber ein diagonales
   repeating-linear-gradient-Streifenmuster im gefuellten Bereich zustande (kein
   Emoji/Icon). WICHTIG: die Streifen sind bewusst ein halbtransparentes
   Weiss/Transparent-Muster UEBER var(--accent) statt (wie im ersten Versuch)
   abwechselnd var(--accent)/var(--accent-strong) - bei Salat-Fresh UND
   Sporty-Steel ist --accent-strong exakt identisch mit --accent (siehe die drei
   :root[data-design=...]-Bloecke weiter oben), wodurch das Streifenmuster dort
   unsichtbar geblieben waere (in einem Screenshot-Test aufgefallen: der Balken
   wirkte als reine Flaeche ohne jede Chevron-Struktur). Die Weiss-Ueberlagerung
   ist dagegen in JEDEM Theme sichtbar, unabhaengig davon, ob accent/accent-strong
   sich unterscheiden - die Grundfarbe selbst bleibt weiterhin var(--accent), also
   nach wie vor themenabhaengig statt fest verdrahtet. */
.cure-progress-bar{display:flex; align-items:center; gap:.6rem; margin:.5rem 0 .1rem;}
.cure-progress-bar-track{
  flex:1; height:14px; border-radius:7px; background:var(--surface-hover);
  border:1px solid var(--border); overflow:hidden;
}
.cure-progress-bar-fill{
  height:100%; min-width:2px; border-radius:7px;
  background-color:var(--accent);
  background-image:repeating-linear-gradient(
    58deg,
    rgba(255,255,255,.4) 0 7px,
    rgba(255,255,255,0) 7px 14px
  );
  transition:width .35s ease;
}
.cure-progress-bar-fill.complete{background-color:var(--ok);}
.cure-progress-bar-label{font-weight:700; font-size:.85rem; color:var(--ink); min-width:2.8em; text-align:right; flex:none;}
.plan-slot-label{
  /* flex-direction:column (Fix 25.09.2026, Winki: "ich will die Uhrzeit, bis
     wann eine Mahlzeit gilt, soll unterhalb des Mahlzeitennamens stehen.") -
     vorher stand hier display:flex OHNE flex-direction (also row), wodurch die
     .plan-slot-time-Unterzeile (span, siehe unten) trotz ihres eigenen
     display:block als eigenes Flex-Item NEBEN statt UNTER dem Mahlzeitnamen
     gelandet ist. justify-content:center haelt die bisherige vertikale
     Zentrierung in der Zelle (jetzt auf der Hauptachse statt der Querachse),
     align-items:flex-start haelt die bisherige Linksbuendigkeit. */
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  font-weight:700; font-size:.8rem; color:var(--ink-muted);
  padding:.4rem .2rem;
}
.plan-cell{
  position:relative;
  min-height:3.2rem; border:1px dashed var(--border); border-radius:10px; padding:.4rem;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:.5rem;
  align-content:start; transition:outline-color .15s ease, background .15s ease;
}
/* Essenszeiten je Slot (Winki, 24.09.2026, Nachbesserung: "Das muss auch
   ersichtlich sein") - kleine Unterzeile unter dem Slot-Label ("Frühstück" /
   "bis 09:00"). */
.plan-slot-time{
  display:block; font-size:.65rem; font-weight:500; color:var(--ink-muted); opacity:.8;
}
/* Mondkalender-"Bereich" (Winki, 24.09.2026, zweite Nachbesserung: "das
   tierkreiszeichen wechselt ja auch schnell. daher wieder zurück zu den
   zeitslots ... der mondkalender muss ein kleiner 'bereich' sein (dukler
   hintergrund, passend zum gewählten design theme des users). links in dem
   bereich ist ein mond-icon, dann etwas abstand, dann tierkreiszeichen,
   element, nahrung") - wieder JE ZELLE statt im Tages-Kopf. grid-column:1/-1
   laesst den Bereich ueber die volle Zellenbreite laufen (.plan-cell ist ein
   Grid mit mehreren schmalen auto-fill-Spalten fuer die Kacheln darunter -
   ohne das wuerde der Bereich nur eine einzelne, schmale Spalte einnehmen).
   Hintergrund/Schrift ueber eigene, je Design-Theme gesetzte CSS-Variablen
   (--moon-box-bg/--moon-box-ink, siehe die drei :root[data-design=...]-Bloecke
   oben) statt einer fest hinterlegten Farbe - dadurch bleibt es in JEDEM
   Theme ein dunkler, aber zur jeweiligen Palette passender Ton. */
.plan-moon-box{
  grid-column:1/-1;
  display:flex; flex-direction:column; gap:.15rem;
  background:var(--moon-box-bg); color:var(--moon-box-ink);
  border-radius:8px; padding:.3rem .6rem; margin-bottom:.1rem;
  font-size:.72rem; font-weight:600; line-height:1.25;
  /* Kein cursor:help mehr (Winki, 25.09.2026: "warum ist beim mouseover über
     den mondkalender noch ein '?'") - die Detailinfos kommen weiterhin per
     nativem title-Tooltip, der Hilfe-Cursor war nur verwirrend. */
}
/* EINE Zeile je Information, jede mit eigenem Icon (Winki, 25.09.2026, zweite
   Nachbesserung: "jetzt kann man was nicht lesen ... Mond in der ersten
   zeile, der Rest darunter in den zeilen. verwende auch für die
   tierkreiszeichen icons sowie die Ernährung. Auch bei Mondphase und die
   mondrichtung.") - ersetzt das vorherige 2-Spalten-Layout mit EINER
   gemeinsamen Icon-Spalte, das den Text-Platz jeder Zeile verschmaelert und
   laengere Woerter (z.B. "Kohlenhydrate") sowie die Phase+Richtung-Zeile per
   text-overflow:ellipsis abgeschnitten hat. Jetzt bekommt JEDE Zeile ihr
   eigenes Icon fester Breite (.plan-moon-icon) - der Text jeder Zeile beginnt
   dadurch trotzdem an derselben Stelle (buendig), hat aber die volle
   Kachelbreite fuer sich. white-space:normal (statt nowrap+ellipsis) laesst
   laengere Zeilen umbrechen statt zu verschwinden - nichts wird mehr
   unlesbar. Reihenfolge: Mond (reiner Marker), Element, Tierkreiszeichen,
   Nahrung, Mondphase, Mondrichtung (nur wenn ermittelbar). */
.plan-moon-row{display:flex; align-items:flex-start; gap:.35rem; white-space:normal; overflow-wrap:break-word;}
/* Trennstrich unter der Kopfzeile "Mondkalender" (Winki, 25.09.2026, dritte
   Nachbesserung: "ich will in der ansichtskachel des mondkalenders, dass die
   nach der 1. zeile mit dem wort 'mondkalender' ein kleiner trennstrich folgt.")
   - trennt optisch die reine Ueberschrift von den Werten darunter. */
.plan-moon-row-header{
  font-size:.68rem; font-weight:700; opacity:.85;
  border-bottom:1px solid var(--border); padding-bottom:.3rem; margin-bottom:.05rem;
}
/* Winki, 25.09.2026, dritte Nachbesserung: "darunter hast du aktuell die
   qualitäten (luft, wasser, etc) noch fett. das muss normal werden!" - vorher
   font-weight:700, jetzt wie die uebrigen Werte-Zeilen normal. */
.plan-moon-row-element{font-size:.74rem; font-weight:400;}
.plan-moon-row-sign{font-size:.68rem; font-weight:600; opacity:.9;}
.plan-moon-row-food{font-size:.64rem; font-weight:500; opacity:.75;}
.plan-moon-row-phase{font-size:.64rem; font-weight:500; opacity:.8;}
.plan-moon-row-direction{font-size:.64rem; font-weight:500; opacity:.8;}
.plan-moon-icon{font-size:.85rem; flex:none; width:1.3em; text-align:center;}
.plan-moon-box.plan-moon-unavailable{opacity:.6;}

/* Backend > Mondkalender (Winki, 24.09.2026: "eine typische Monatsansicht mit
   allen Tagen, Tierkreiszeichen, Feuer/wasser etc.") - eigenstaendiges
   Monatsraster, da es dafuer noch kein Vorbild in der App gab (der Wochenplan
   ist ein 7-Spalten-Raster, hier braucht es bis zu 6 Zeilen x 7 Spalten plus
   fuehrende Leerzellen vor dem Monatsersten). */
.moon-calendar-nav{
  display:flex; align-items:center; justify-content:center; gap:1rem; margin:1rem 0; flex-wrap:wrap;
}
.moon-calendar-month-label{font-weight:600; min-width:11rem; text-align:center;}
.moon-calendar-weekdays{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:.5rem; margin-bottom:.4rem;
}
.moon-calendar-weekday{
  text-align:center; font-size:.75rem; font-weight:600; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.02em;
}
.moon-calendar-days{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:.5rem;
}
.moon-calendar-cell{
  border:1px solid var(--border); border-radius:10px; padding:.5rem .4rem; background:var(--surface);
  display:flex; flex-direction:column; gap:.15rem; min-height:5.9rem; cursor:help;
}
.moon-calendar-cell-blank{border:none; background:none; cursor:default;}
.moon-calendar-cell-unavailable{opacity:.55;}
/* Zeichenwechsel innerhalb eines Tages (Winki, 24.09.2026, Nachbesserung:
   "Wie kann das im laufe des tages wechselnde zeichen im backend gezeigt
   werden?") - dezent hervorgehoben (Akzent-Rahmen), da diese Zelle mehr
   Information traegt als die uebrigen (zwei Zeichen statt einem). */
.moon-calendar-cell-change{border-color:var(--accent); border-width:2px; padding:calc(.5rem - 1px) calc(.4rem - 1px);}
.moon-calendar-sign-change{font-size:.68rem; line-height:1.3;}
.moon-calendar-daynum{font-weight:600; font-size:.85rem;}
.moon-calendar-sign{font-size:.78rem;}
.moon-calendar-element{font-size:.7rem; color:var(--ink-muted);}
.moon-calendar-cell-na{font-size:.78rem; color:var(--ink-muted);}
/* Mondphase + Mondrichtung je Tag (Winki, 25.09.2026: "es muss darunter noch
   erwähnt werden, welche Mondphase und Mondrichtung es ist") - vierte,
   gedaempfte Zeile in jeder Kalender-Kachel. moon-calendar-change-mark
   markiert dezent, dass an diesem Tag ein Phasen- oder Richtungswechsel
   stattfindet (genaue Uhrzeit im Tooltip, gleiches Prinzip wie bei
   moon-calendar-cell-change fuer Tierkreiszeichen-Wechsel). */
.moon-calendar-phase{font-size:.66rem; color:var(--ink-muted); opacity:.85;}
.moon-calendar-change-mark{color:var(--accent); font-weight:700;}
@media (max-width: 640px) {
  .moon-calendar-weekday{font-size:.65rem;}
  .moon-calendar-cell{min-height:4.3rem; padding:.35rem .25rem;}
  .moon-calendar-sign, .moon-calendar-element, .moon-calendar-phase{font-size:.62rem;}
}
.plan-cell.drag-over{outline:2px dashed var(--accent); outline-offset:2px; background:var(--surface-hover);}
.plan-cell-add-btn{
  min-height:2rem; border:1px dashed var(--border); border-radius:8px; background:none;
  color:var(--ink-muted); font-size:1.1rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.plan-cell-add-btn:hover{border-color:var(--accent-strong); color:var(--accent-strong); background:var(--accent-soft);}
/* "+" und Notiz-Icon (Winki, 24.09.2026: "das sollen dann zwei 'buttons'
   nebeneinander sein (2 spalten - das '+' und das notiz-icon)"; zweite
   Nachbesserung direkt danach: "Wenn ein zeitfenster leer, dann die buttons
   untereinander. wenn in einem zeitfenster bereits etwas drin ist, dann die
   buttons nebeneinander.") - Standard (Feld schon belegt): kompakte Zeile
   nebeneinander (2 Spalten). Modifier .plan-cell-actions-stacked (leeres Feld,
   von planCellEl() gesetzt): stattdessen groesze Buttons UNTEREINANDER, wie
   urspruenglich. */
.plan-cell-actions{
  grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:.4rem;
}
.plan-cell-actions.plan-cell-actions-stacked{
  grid-template-columns:1fr;
}
.plan-cell-actions.plan-cell-actions-stacked .plan-cell-add-btn,
.plan-cell-actions.plan-cell-actions-stacked .plan-cell-note-btn{
  min-height:2.6rem; font-size:1.2rem;
}
.plan-cell-note-btn{
  min-height:2rem; border:1px dashed var(--border); border-radius:8px; background:none;
  color:var(--ink-muted); font-size:.9rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.plan-cell-note-btn:hover{border-color:var(--accent-strong); color:var(--accent-strong); background:var(--accent-soft);}

.plan-day-section{margin-bottom:2rem;}
.plan-day-section-head{display:flex; align-items:baseline; gap:.6rem; margin-bottom:.6rem; padding-bottom:.4rem; border-bottom:1px solid var(--border);}
.plan-day-section-head h3{font-size:1.05rem;}
.plan-slot-row{display:grid; grid-template-columns:110px 1fr; gap:.7rem; align-items:start; margin-bottom:.5rem;}
.plan-slot-row-label{font-weight:700; font-size:.8rem; color:var(--ink-muted); padding-top:.5rem;}
.plan-grid-vertical .plan-cell{min-height:2.6rem;}

.plan-chip{
  position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; overflow:hidden; font-size:.78rem; cursor:pointer; box-shadow:var(--shadow);
  text-align:left; transition:background .15s ease;
}
.plan-chip:hover{background:var(--surface-hover);}
.plan-chip.dragging{opacity:.4;}
/* Personalisierte Kachelfarbe bei einem Foto-Gericht (Winki, 16.09.2026 Nachbesserung
   - siehe Kommentar in planCellEl()): der Farbverlauf allein (--photo-a/--photo-b)
   reicht nicht, weil ein echtes Foto die Flaeche komplett ueberdeckt. Ein farbiger
   Ring um die ganze Kachel bleibt auch dann sichtbar - box-shadow statt border, damit
   sich die Kachelgroesse/das Grid-Layout dadurch nicht verschiebt. */
.plan-chip.plan-chip-personal-color{box-shadow:0 0 0 3px var(--photo-b), var(--shadow);}
/* Notiz-Kachel (Winki, 24.09.2026) - bewusst ohne .plan-chip-photo-Bereich, da eine
   Notiz kein Rezept/Produkt referenziert, nur freier Text. */
.plan-chip-note{background:var(--surface-hover);}
.plan-chip-note .plan-chip-body{padding:.55rem .6rem;}
.plan-chip-photo{
  width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(155deg, var(--photo-a), var(--photo-b));
}
.plan-chip-photo svg{width:40%; height:40%; opacity:.85;}
.plan-chip-photo img{width:100%; height:100%; object-fit:cover;}
.plan-chip-body{display:flex; flex-direction:column; gap:.2rem; min-width:0; padding:.4rem .5rem .5rem;}
.plan-chip-name{font-weight:700; line-height:1.25; white-space:normal; overflow-wrap:break-word;}
.plan-chip-portions{color:var(--ink-muted); font-weight:600; font-size:.72rem;}
.plan-chip-guests{font-size:.68rem; line-height:1.2;}
/* "Mitessen bei X" im eigenen Wochenplan (Winki, 13.09.2026 dritte Nachbesserung) -
   dieselbe auffaellige Optik wie .friend-plan-mitessen-status.confirmed, damit eine
   angenommene Mitessen-Anfrage genauso deutlich sichtbar ist wie im Freund-Plan. */
.plan-mitessen-chip{
  margin-top:.35rem; padding:.35rem .5rem; border-radius:8px; font-size:.78rem; font-weight:600;
  background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn);
}
.plan-mitessen-chip.confirmed{background:var(--ok-soft); color:var(--ok); border-color:var(--ok);}
.plan-chip-remove{
  position:absolute; top:.35rem; right:.35rem; width:1.3rem; height:1.3rem; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--ink-muted); cursor:pointer; font-size:.9rem; line-height:1; z-index:1;
  background:rgba(255,255,255,.85); box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.plan-chip-remove:hover{background:#fff; color:var(--danger);}
.plan-chip-duplicate{
  position:absolute; top:.35rem; left:.35rem; width:1.3rem; height:1.3rem; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--ink-muted); cursor:pointer; padding:.28rem; box-sizing:border-box; z-index:1;
  background:rgba(255,255,255,.85); box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.plan-chip-duplicate svg{width:100%; height:100%;}
.plan-chip-duplicate .hicon, .plan-chip-remove .hicon{width:100%; height:100%;}
.plan-chip-duplicate:hover{background:#fff; color:var(--accent-strong);}
/* Traditionen-Feature (Winki, 16.09.2026): Pin-Symbol auf jeder Gericht-Kachel im
   Wochenplan, mit dem sich eine Zelle als "feste Tradition" festpinnen laesst
   (siehe planCellEl in app.js). Bugfix (16.09.2026, Nachbesserung: "das icon für
   Traditionsgericht überdeckt aktuell die Anzahl an portionen. das icon in die
   rechte ecke der kachel.") - urspruenglich unten LINKS platziert, das ueberlappte
   dort mit der Portionsangabe (.plan-chip-portions) im Kachel-Textbereich; jetzt
   unten RECHTS (oben rechts ist bereits mit "Entfernen" belegt). Nutzt inzwischen
   ein eigenes Symbol (hicon-tradition) statt des Rezeptbuch-"Anpinnen"-Icons, siehe
   dortiger Kommentar. */
.plan-chip-pin{
  position:absolute; bottom:.35rem; right:.35rem; width:1.3rem; height:1.3rem; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--ink-muted); cursor:pointer; padding:.28rem; box-sizing:border-box; z-index:1;
  background:rgba(255,255,255,.85); box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.plan-chip-pin .hicon{width:100%; height:100%;}
.plan-chip-pin:hover{background:#fff; color:var(--accent-strong);}
.plan-chip-pin.active{color:#f0a71a; background:#fff;}
body.print-no-images .plan-chip-photo{display:none !important;}
/* Nachtrag (16.09.2026, sechste Rueckmeldung, PDF-Export Einnahmeplan) -
   dieselbe bereits bestehende Body-Klasse "print-no-images" (siehe
   exportPlanPdf() oben) wird hier fuer die Einnahmeplan-Kacheln wiederverwendet,
   statt eine zweite, gleichbedeutende Klasse einzufuehren. */
body.print-no-images .einnahmeplan-tile .tile-photo{display:none !important;}
.plan-empty-row{margin-top:1rem;}

/* "Heute" erkennbar machen + vergangene Tage ausgrauen (Winki, 11.09.2026 dritte
   Nachbesserung, aus dem Klicktiefen-Audit: "mache 'heute' im Wochenplan
   erkenntlich. oder vielleicht die vergangenen Tage ausgegraut? dann weiß man,
   dass bei den nicht-ausgegrauten Tagen auch der heutige tag zu beginn liegt").
   plan-day-today bekommt denselben Akzent-Look wie die "aktuelle Woche"-Hervor-
   hebung im Wochen-Navigations-Chip (.plan-week-range-current), damit beide
   "heute/aktuell"-Kennzeichnungen der Seite konsistent wirken. plan-day-past
   duempft nur die Kopfzeile/den Tagesabschnitt und die Zellen leicht ab (nicht
   die Planeintraege selbst - die bleiben unveraendert lesbar, nur der Rahmen drum
   herum signalisiert "vorbei"). */
.plan-day-head.plan-day-today{
  background:var(--accent-soft); color:var(--accent-strong); border-radius:8px;
}
.plan-day-head.plan-day-today .plan-day-date{color:var(--accent-strong);}
.plan-day-section.plan-day-today .plan-day-section-head{border-bottom-color:var(--accent-strong);}
.plan-day-section.plan-day-today .plan-day-section-head h3{color:var(--accent-strong);}

.plan-day-head.plan-day-past{opacity:.5;}
.plan-cell.plan-day-past{background:var(--surface-hover); opacity:.7;}
.plan-day-total-cell.plan-day-past{opacity:.6;}
.plan-day-section.plan-day-past{opacity:.65;}

.plan-chip-cook-badge{
  display:inline-flex; align-items:center; justify-content:center; width:1.1rem; height:1.1rem;
  border-radius:50%; font-size:.65rem; font-weight:700; line-height:1; flex:none;
}
.plan-chip-cook-badge.cook-yes{background:var(--accent-soft); color:var(--accent-strong);}
.plan-chip-cook-badge.cook-no{background:var(--surface-hover); color:var(--ink-muted);}
.plan-chip-cook-badge.cook-pending{
  background:var(--warn-soft); color:var(--warn); cursor:pointer;
}
.plan-chip-cook-badge.cook-pending:hover{filter:brightness(0.95);}

/* ---------- Naehrwert-Summen im Essensplan (je Zelle und je Tag) ----------
   Nachbesserung (Winki, 11.09.2026, zweite Runde: "im wochenplaner sind noch texte
   (naehrwerte) ausserhalb des feldes. lass uns die eiweisse, kohlenhydrate, fette
   untereinander schreiben.") - vorher standen kcal + die drei Makros in einer Zeile
   nebeneinander (display:flex ohne Umbruch), wodurch die Zeile bei schmalen
   Plan-Zellen ueber den Zellenrand hinaus lief. Jetzt: kcal oben, darunter die drei
   Makros je in einer eigenen Zeile - passt so immer in die Zellbreite. */
.plan-summary{
  grid-column:1/-1; display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  font-size:.68rem; color:var(--ink-muted); padding-top:.35rem; margin-top:.15rem;
  border-top:1px dashed var(--border); cursor:help; width:100%; min-width:0;
}
.plan-summary-kcal{font-weight:700; color:var(--ink);}
.plan-summary-macros{display:flex; flex-direction:column; gap:.1rem; width:100%; min-width:0;}
.plan-summary-macro{
  display:flex; align-items:center; gap:.2rem; white-space:nowrap; max-width:100%;
  overflow:hidden; text-overflow:ellipsis;
}
.nutrient-icon{flex-shrink:0;}
.plan-summary-flag{color:var(--accent-strong); font-weight:700;}
.plan-summary-none{font-style:italic;}

/* Naehrwert-Summe im Kur-Tageskopf (Winki, 14.09.2026, fuenfte Runde) - dieselbe
   .plan-summary-Optik wie im Essensplan, aber kompakt/zentriert fuer den schmalen
   Tageskopf statt als volle Zeile am Zellenrand (siehe cureDayNutrientSummaryHtml). */
.cure-day-nutrient-summary{
  grid-column:auto; border-top:none; margin-top:.2rem; padding-top:0; align-items:center;
  font-size:.62rem; cursor:help;
}
.cure-day-nutrient-summary .plan-summary-macros{align-items:center;}
.cure-day-nutrient-summary .plan-summary-macro{justify-content:center;}

.plan-day-total-label{font-weight:800; color:var(--ink);}
.plan-day-total-cell{
  border-top:2px solid var(--border); padding-top:.5rem; display:flex; align-items:flex-start;
}
.plan-day-total-cell .plan-summary{grid-column:auto; border-top:none; padding-top:0; margin-top:0;}
.plan-day-total-row{border-top:2px solid var(--border); margin-top:.4rem; padding-top:.5rem;}
.plan-day-total-row .plan-slot-row-label{padding-top:0;}


@media (max-width:900px){
  .plan-toolbar{flex-direction:column; align-items:stretch;}
}

/* ---------- Einkaufsplanung (09.09.2026) ---------- */
.shopping-toolbar{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.6rem;}
.shopping-scope-toggle{display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-pill); padding:.2rem; gap:.2rem; background:var(--surface);}
.scope-btn{
  font:inherit; font-weight:700; font-size:.8125rem; border:none; background:none; color:var(--ink-muted);
  padding:.4rem .9rem; border-radius:var(--radius-pill); cursor:pointer;
}
.scope-btn.active{background:var(--accent); color:var(--accent-ink);}
.shopping-scope-picker{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; font-size:.8125rem; color:var(--ink-muted); font-weight:600;}
.shopping-scope-picker select{
  font:inherit; margin-left:.4rem; padding:.35rem .6rem; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink);
}

.shopping-category{margin-bottom:1.6rem;}
.shopping-items{display:flex; flex-direction:column; gap:.4rem;}
.shopping-item{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.6rem .9rem;
}
.shopping-item-covered{opacity:.5;}
.shopping-item-covered .shopping-item-name{text-decoration:line-through;}
.shopping-item-check{display:flex; align-items:flex-start; gap:.6rem; font-size:.9rem; cursor:pointer;}
.shopping-item-check input{width:1.1rem; height:1.1rem; accent-color:var(--accent); cursor:pointer; margin-top:.15rem; flex:none;}
.shopping-item-main{display:flex; flex-direction:column; gap:.15rem;}
.shopping-item-amount{color:var(--ink-muted); font-variant-numeric:tabular-nums;}
.shopping-item-sources{font-size:.75rem; color:var(--ink-muted);}
.shopping-item-pantry-hint{font-size:.75rem; color:var(--cat-warm);}

/* Winki 11.09.2026: "abgehakte Zutaten muessen in einen extra Bereich unten rutschen" -
   eigener, optisch abgesetzter Bereich fuer Zutaten, die entweder manuell abgehakt oder
   durch Speisekammer-/"vorhanden"-Menge bereits vollstaendig gedeckt sind. */
.shopping-covered-section{margin-top:1.4rem; padding-top:1.2rem; border-top:1px dashed var(--border);}
.shopping-covered-title{
  font-size:.8125rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--ink-muted); margin-bottom:.8rem;
}
.shopping-item-controls{display:flex; align-items:center; gap:.5rem;}
.shopping-have-input{
  width:6.5rem; font:inherit; padding:.35rem .5rem; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--ink);
}
.shopping-have-input::placeholder{color:var(--ink-muted); opacity:.7;}
.shopping-cat-select{
  font:inherit; font-size:.75rem; padding:.35rem .5rem; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--ink-muted);
}
.shopping-create-btn{margin-top:.6rem;}

.shopping-final-toolbar{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.6rem; flex-wrap:wrap;}
.shopping-final-title{font-size:1.3rem; margin-bottom:1.2rem;}
.shopping-final-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.6rem;}
.shopping-final-cat-title{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--ink-muted);
  border-bottom:1px solid var(--border); padding-bottom:.4rem; margin-bottom:.6rem;
}
.shopping-final-list{list-style:none; display:flex; flex-direction:column; gap:.5rem; font-size:.9rem;}
.shopping-final-check{margin-right:.5rem;}
.shopping-final-amount{color:var(--ink-muted); font-variant-numeric:tabular-nums;}
.shopping-final-actions{display:flex; gap:.6rem; flex-wrap:wrap;}

/* ---------- Live-Einkaufsliste (26.09.2026) ----------
   Wird vor allem am Handy im Laden benutzt: ganze Zeile tippbar, Haken >= 44px,
   Zuweisen/Entfernen klein daneben. */
#shoppingLiveContent{display:flex; flex-direction:column; gap:1.2rem; max-width:760px;}
.live-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:1.1rem 1.2rem;}
.live-card-title{font-size:.95rem; font-weight:700; margin:0 0 .8rem;}
.live-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1rem;}
.live-title{font-size:1.15rem; margin:0 0 .25rem;}
.live-sub{font-size:.8rem; color:var(--ink-muted); display:flex; align-items:center; gap:.4rem;}
.live-dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft);}
.live-progress{display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; min-width:7rem;}
.live-progress-num{font-weight:800; font-variant-numeric:tabular-nums;}
.live-progress-bar{width:7rem; height:.4rem; border-radius:var(--radius-pill); background:var(--border); overflow:hidden;}
.live-progress-bar span{display:block; height:100%; background:var(--accent); transition:width .25s ease;}
@media (prefers-reduced-motion: reduce){ .live-progress-bar span{transition:none;} }

.live-add{display:flex; gap:.5rem; margin-bottom:1rem;}
.live-add input{
  flex:1; min-width:0; font:inherit; padding:.55rem .75rem; border-radius:10px;
  border:1px solid var(--border); background:var(--bg); color:var(--ink);
}

.live-category{margin-bottom:1rem;}
.live-category-title{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color:var(--ink-muted); margin-bottom:.35rem;
}
.live-item{
  display:flex; align-items:center; gap:.5rem; border-bottom:1px solid var(--border);
  min-height:3rem;
}
.live-item:last-child{border-bottom:none;}
.live-item-check{flex:1; min-width:0; display:flex; align-items:center; gap:.75rem; padding:.5rem 0; cursor:pointer;}
.live-item-check input{width:1.4rem; height:1.4rem; flex:none; accent-color:var(--accent); cursor:pointer;}
.live-item-main{display:flex; flex-direction:column; gap:.1rem; min-width:0;}
.live-item-name{font-size:.95rem; font-weight:600; overflow-wrap:anywhere;}
.live-item-amount{font-weight:400; color:var(--ink-muted); font-variant-numeric:tabular-nums; margin-left:.25rem;}
.live-item-meta{font-size:.75rem; color:var(--ink-muted);}
.live-item-assignee{color:var(--cat-drinks); font-weight:600;}
.live-item-assignee.is-me{color:var(--warn);}
.live-item.is-delegated .live-item-name{color:var(--ink-muted);}
.live-item.is-bought .live-item-name{text-decoration:line-through; color:var(--ink-muted);}
.live-item-controls{display:flex; align-items:center; gap:.25rem; flex:none;}
.live-assign-select{
  font:inherit; font-size:.75rem; max-width:9.5rem; padding:.3rem .4rem; border-radius:8px;
  border:1px solid var(--border); background:var(--bg); color:var(--ink-muted);
}
.live-item-delete{
  width:2rem; height:2rem; border:none; background:none; color:var(--ink-muted); font-size:1.2rem;
  border-radius:8px; cursor:pointer;
}
.live-item-delete:hover{background:var(--danger-soft); color:var(--danger);}

.live-done{padding:1rem 0; font-weight:700; color:var(--ok);}
.live-section-title{
  display:flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink); margin:0 0 .6rem;
}
.live-section-count{
  font-size:.72rem; font-variant-numeric:tabular-nums; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:.05rem .5rem; color:var(--ink-muted); letter-spacing:0;
}
.live-bought{margin-top:1.2rem; border-top:2px dashed var(--border); padding-top:1rem;}
.live-bought-hint{margin:-.3rem 0 .4rem;}
.live-item.is-just-bought{animation:live-just-bought 1.6s ease-out;}
@keyframes live-just-bought{from{background:var(--accent-soft);} to{background:transparent;}}
@media (prefers-reduced-motion: reduce){ .live-item.is-just-bought{animation:none; background:var(--accent-soft);} }
.live-footer{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--border);}
.live-end-btn{margin-left:auto; color:var(--danger);}
.live-empty p{color:var(--ink-muted); font-size:.9rem; margin:.3rem 0 1rem;}

.live-flash{font-size:.72rem; font-weight:700; white-space:nowrap; margin-left:.4rem; vertical-align:middle;}
.live-flash.is-saving{color:var(--ink-muted);}
.live-flash.is-saved{color:var(--ok);}
.live-flash.is-error{color:var(--danger);}
.live-add-flash{margin:-.6rem 0 .8rem;}
.live-item-assignee.is-none{color:var(--ink-muted); font-weight:400; font-style:italic;}
.live-responsible{
  display:flex; align-items:center; flex-wrap:wrap; gap:.3rem .6rem; margin-bottom:1rem;
  padding:.6rem .75rem; border-radius:10px; background:var(--bg); border:1px solid var(--border);
}
.live-responsible label{font-size:.8rem; font-weight:700;}
.live-responsible .live-assign-select{max-width:none; font-size:.85rem; color:var(--ink);}
.live-responsible-hint{flex-basis:100%; margin:0;}
.member-shopping-row{
  display:flex; align-items:flex-start; gap:.55rem; cursor:pointer; font-size:.85rem;
  padding:.55rem .7rem; border-radius:10px; border:1px solid var(--border); background:var(--bg); margin:.2rem 0 .6rem;
}
.member-shopping-row input{width:1.1rem; height:1.1rem; margin-top:.1rem; accent-color:var(--accent); flex:none;}
.badge-shopping{background:var(--accent-soft); color:var(--ink);}
.live-group{border:1px solid var(--border); border-radius:12px; margin-bottom:.8rem; background:var(--surface);}
.live-group.is-mine{border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent);}
.live-group > summary{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; cursor:pointer;
  padding:.7rem .9rem; font-weight:700; font-size:.95rem; list-style:none; min-height:2.75rem;
}
.live-group > summary::-webkit-details-marker{display:none;}
.live-group > summary::after{content:"▾"; color:var(--ink-muted); margin-left:.2rem; transition:transform .15s ease;}
.live-group:not([open]) > summary::after{transform:rotate(-90deg);}
@media (prefers-reduced-motion: reduce){ .live-group > summary::after{transition:none;} }
.live-group-title{flex:1;}
.live-group-count{
  font-size:.75rem; font-variant-numeric:tabular-nums; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:.05rem .55rem; color:var(--ink-muted);
}
.live-group.is-mine .live-group-count{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.live-group > .live-category{padding:0 .9rem;}
.live-group > .live-category:last-child{padding-bottom:.4rem;}
.live-mine-banner{
  background:var(--warn-soft); color:var(--ink); border-radius:var(--radius-card);
  padding:.8rem 1rem; font-size:.9rem;
}

.live-day-chips{display:flex; gap:.4rem; flex-wrap:wrap;}
.live-day-chip{
  font:inherit; font-weight:700; font-size:.85rem; min-width:2.75rem; height:2.75rem;
  border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--bg);
  color:var(--ink-muted); cursor:pointer;
}
.live-day-chip.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.live-trips-others{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1rem; margin-top:1rem;}
.live-trips-group{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--ink-muted); margin-bottom:.3rem;}
.live-trip-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.25rem; font-size:.85rem;}
.live-trip-list li{display:flex; justify-content:space-between; gap:.5rem;}
.live-trip-name{font-weight:600;}
.live-trip-days{font-variant-numeric:tabular-nums;}
.live-trip-days.is-empty{color:var(--ink-muted); font-style:italic;}

@media (max-width:600px){
  .live-card{padding:.9rem .9rem;}
  /* Name bekommt die volle Breite, Zuweisen/Entfernen rutschen eingerueckt darunter */
  .live-item{flex-wrap:wrap; gap:0 .5rem;}
  .live-item-check{flex:1 1 100%;}
  .live-item-controls{margin:-.35rem 0 .45rem 2.15rem;}
  .live-assign-select{max-width:none;}
  .live-end-btn{margin-left:0;}
}

@media print{
  .masthead, .tabs, .sidebar, .section-subnav-row, .filter-bar, #tab-overview, #tab-nutrition-admin,
  .scrim, .drawer, .modal-scrim, .plan-toolbar, .toast{ display:none !important; }
  body, .wrap{ background:#fff !important; }
  .app-shell{ display:block !important; }
  .main-col{ width:100% !important; }
  .wrap{ max-width:none !important; padding:0 !important; margin:0 !important; }
  #tab-plan{ display:block !important; }
  #tab-shopping{ display:none !important; }
  body.printing-shopping #tab-plan{ display:none !important; }
  body.printing-shopping #tab-shopping{ display:block !important; }
  body.printing-shopping #shoppingPlanningView{ display:none !important; }
  body.printing-shopping #shoppingFinalView{ display:block !important; }
  body.printing-shopping .shopping-final-toolbar{ display:none !important; }

  /* PDF-Export "Zauberstab"-Einnahmeplan (16.09.2026, sechste Rueckmeldung:
     "Der Einnahmeplan muss auch als PDF druckbar sein: mit bildern oder ohne,
     mit oder ohne Zusatzinformationen") - gleiches Grundmuster wie
     body.printing-shopping oben: das jeweils betroffene Popup wird beim
     Drucken sichtbar gemacht, obwohl .modal-scrim oben generell ausgeblendet
     wird, und in eine normale Druckseite verwandelt (kein Overlay/Schatten/
     Scroll-Begrenzung mehr). */
  /* Anders als beim Wochenplan/Einkaufszettel liegt der Einnahmeplan-Inhalt in
     einem MODAL, das über der jeweils gerade aktiven Seite (z.B. "Meine NEMs")
     schwebt - ohne diese Zeile würde die aktive Seite (die #tab-plan-Sonderregel
     oben betrifft sie nicht) zusätzlich zum Modal mit ausgedruckt. */
  /* #nemEinnahmeplanScrim liegt im Markup AUSSERHALB von .app-shell (wie jedes
     Modal) - .app-shell behält aber normalerweise min-height:100vh (siehe
     .app-shell weiter oben), was hier trotz ausgeblendeter Kind-Elemente einen
     grossen leeren Bereich VOR dem Einnahmeplan-Ausdruck erzeugen würde. */
  body.printing-einnahmeplan .app-shell{ min-height:0 !important; }
  body.printing-einnahmeplan .tab-panel{ display:none !important; }
  /* #tab-plan bekommt weiter oben ein UNBEDINGTES display:block!important (fuer
     den Wochenplan-PDF-Export) - hier mit derselben Spezifitaet (ID-Selektor)
     plus Body-Klasse gezielt wieder ausblenden, sonst wuerde die Regel oben
     gewinnen und der Wochenplan zusaetzlich zum Einnahmeplan-Modal erscheinen. */
  body.printing-einnahmeplan #tab-plan{ display:none !important; }
  body.printing-einnahmeplan #nemEinnahmeplanScrim{
    display:flex !important; position:static !important; background:#fff !important; padding:0 !important; opacity:1 !important;
  }
  body.printing-einnahmeplan #nemEinnahmeplanScrim .modal{
    box-shadow:none !important; width:100% !important; max-width:none !important; max-height:none !important; overflow:visible !important;
  }
  /* Der Mitglieder-Auswähler (Essensplaner-Korrektur) ist ein interaktives
     Formularelement ohne Nutzen auf Papier - der Titel ("Einnahmeplan von
     ...") nennt das betrachtete Mitglied dort bereits, daher blenden wir den
     Auswähler beim Drucken aus statt ihn als Dropdown mit auszudrucken. */
  body.printing-einnahmeplan .drawer-close, body.printing-einnahmeplan .einnahmeplan-print-toolbar,
  body.printing-einnahmeplan .einnahmeplan-member-select-label{ display:none !important; }
  body.printing-einnahmeplan .einnahmeplan-tile{ cursor:default !important; break-inside:avoid; }
  /* Korrektur (16.09.2026, Rückmeldung "der pdf druck bei pirelli ohne
     bilder sieht nicht gut aus. seitenumbruch?"): die urspruengliche feste
     "repeat(3, 1fr)" liess bei WENIGER als 3 Kacheln in einer Zeitfenster-
     Gruppe (z.B. Pirelli mit nur 1 NEM insgesamt) 2 leere, aber genauso
     breite (weil 1fr) Spalten übrig - dadurch wurde die eine tatsächliche
     Kachel auf ein schmales Drittel der Seite gequetscht.
     Zwischenkorrektur 1 (verworfen): "repeat(auto-fit, minmax(220px, 1fr))"
     liess die uebrig bleibende(n) Spalte(n) kollabieren, wodurch die einzige
     Kachel per 1fr auf die VOLLE Seitenbreite gestreckt wurde - bei
     Bildern (aspect-ratio 3/4, siehe .tile-photo) fuehrte das zu einem
     riesigen, ueberdimensionierten Foto (Winkis Rueckmeldung: "hier ist die
     kachel groß skaliert... auch bei winki sind die kacheln / bilder zu
     groß").
     Zwischenkorrektur 2 (verworfen): "repeat(3, 250px)" - eine ABSOLUTE
     Pixelbreite, geschaetzt anhand eines Playwright-Test-Screenshots mit
     900px Browser-Fensterbreite. Das entspricht aber NICHT der tatsaechlich
     bedruckbaren Breite eines echten, von Winkis eigenem Browser via
     window.print() erzeugten PDFs (A4 Hochformat: von den 210mm/793px
     Papierbreite bleiben nach Abzug der vom jeweiligen Betriebssystem/
     Drucker-Dialog gesetzten Raender nur ca. 733px echt nutzbare Breite -
     per pypdf/pdfplumber an den von Winki tatsaechlich exportierten PDFs
     nachgemessen). 3 * 250px + Zwischenraeume ergaben ca. 814px, also gut
     80px BREITER als die real bedruckbare Flaeche - das drueckte laut
     Winkis Rueckmeldung ("bei pirelli ist alles links abgeschnitten und es
     gibt noch einen unnötigen platz zwischen oberem text und erster
     kachel") den kompletten Seiteninhalt (nicht nur die Kacheln, auch die
     Überschrift ganz oben) nach links aus der Seite heraus UND verursachte
     durch die dadurch gestoerte Seitenberechnung zusaetzlichen Leerraum vor
     der ersten Kachel.
     Finale Loesung: statt einer geschaetzten absoluten Pixelzahl wieder
     relative Drittel ("repeat(3, minmax(0, 1fr))", technisch aequivalent zu
     "repeat(3, 1fr)", minmax(0, ...) verhindert zusaetzlich, dass ein
     einzelnes sehr langes/unteilbares Wort eine Spalte ueber ihr Drittel
     hinaus aufspreizt) - eine Prozent-basierte Breite kann die tatsaechlich
     verfuegbare Seitenbreite (egal ob 733px oder etwas anderes, je nach
     Drucker-/Papierformat) per Definition NIEMALS ueberschreiten, es gibt
     also keine Ueberlauf-/Abschneide-Gefahr mehr. Gleichzeitig bleibt genau
     Winkis Vorgabe erfuellt ("lege ein 3 spalten design fest. wenn nur eine
     befüllt wird (weil nur 1 nem), dann ist das halt so."): alle 3 Spalten
     sind IMMER exakt gleich gross (unabhaengig von der Anzahl tatsaechlich
     befuellter Kacheln in der Zeile) und werden NICHT gestreckt, wenn
     weniger als 3 Kacheln vorhanden sind - anders als bei der ersten,
     ueberholten "repeat(3, 1fr)"-Fassung ist das jetzt eine bewusste,
     dokumentierte Entscheidung statt eines Nebeneffekts. */
  body.printing-einnahmeplan .einnahmeplan-tile-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
  /* Korrektur (16.09.2026, Rückmeldung "nur zusatzinfos - passt nicht. immer
     noch viel platz zum oberen eingangstext"): "break-inside:avoid" auf der
     GESAMTEN Zeitfenster-Gruppe (Titel + kompletter Kachel-Grid als ein
     unteilbarer Block) hat dazu gefuehrt, dass die komplette erste Gruppe
     (inkl. "☀️ Morgens"-Ueberschrift) auf Seite 2 verschoben wurde, sobald die
     Kachel(n) mit angehakten Zusatzinformationen nicht mehr komplett in den
     Rest von Seite 1 passten - mit einem Direkt-PDF-Test (Playwright
     page.pdf() + pdfplumber) nachgewiesen: bei 2 Kacheln in einer Gruppe blieb
     nach dem oberen Einleitungstext auf Seite 1 fast die GESAMTE Seite leer
     (Inhalt endete bei ca. 25% der Seitenhoehe), weil die Gruppe als Ganzes
     nicht mehr auf den Rest von Seite 1 passte. Die einzelne Kachel (siehe
     ".einnahmeplan-tile{ ... break-inside:avoid; }" oben) bleibt weiterhin
     unteilbar (kein Zerreissen eines einzelnen NEM-Textblocks mitten im Satz),
     aber die Gruppe selbst darf jetzt zwischen ihren Kacheln umbrechen: damit
     kann die Ueberschrift ("☀️ Morgens" o.ä.) direkt im Anschluss an den oberen
     Text auf Seite 1 stehen bleiben, waehrend nur die zu grosse(n) Kachel(n)
     bei Bedarf auf die naechste Seite rutschen - deutlich weniger verschenkter
     Leerraum als wenn die komplette Gruppe samt Ueberschrift verschoben wird. */
  body.printing-einnahmeplan .einnahmeplan-gruppe{ break-inside:auto; }
  /* "mit oder ohne Zusatzinformationen" - die ausführliche Erklärung je NEM
     (sonst nur im Klick-Popup sichtbar, siehe .einnahmeplan-tile-detail-print
     in style.css) wird beim Drucken nur mit aktiviertem Haken eingeblendet,
     da beim Drucken niemand mehr klicken kann. */
  body.print-einnahmeplan-details .einnahmeplan-tile-detail-print{
    display:block !important; margin-top:.5rem; padding-top:.4rem; border-top:1px dashed #ccc; font-size:.7rem; line-height:1.4;
  }
  .shopping-final, .shopping-final *{ background:#fff !important; color:#111 !important; box-shadow:none !important; }
  .shopping-final-category{ break-inside:avoid; }
  .plan-grid, .plan-grid *{ background:#fff !important; color:#111 !important; box-shadow:none !important; }
  .plan-cell, .plan-chip, .plan-day-section-head, .plan-slot-row{ border-color:#ccc !important; }
  .plan-chip{ font-size:.65rem !important; }

  /* Horizontale Ansicht beim Drucken: Bei Bildschirmansicht scrollt die Wochentabelle horizontal
     (overflow-x:auto) - beim Drucken gibt es kein Scrollen, alles ausserhalb des sichtbaren
     Bereichs wuerde sonst abgeschnitten. Deshalb hier: kein Scroll-Container mehr, Tabelle auf
     volle Seitenbreite schrumpfen, je Spalte weiterhin ein schmales Bild oben/Text darunter. */
  .plan-grid-horizontal{ overflow:visible !important; width:100% !important; }
  .plan-grid-horizontal .plan-table{
    width:100% !important; min-width:0 !important;
    grid-template-columns:60px repeat(7, 1fr) !important; gap:.25rem !important;
  }
  .plan-grid-horizontal .plan-day-head{ font-size:.7rem !important; }
  .plan-grid-horizontal .plan-day-date{ font-size:.6rem !important; }
  .plan-grid-horizontal .plan-slot-label{ font-size:.7rem !important; }
  .plan-grid-horizontal .plan-chip-photo{ aspect-ratio:3/2 !important; }
  .plan-grid-horizontal .plan-cell{ grid-template-columns:1fr !important; padding:.25rem !important; }

  /* Vertikale Ansicht beim Drucken: Zellen sind hier sehr breit (ganze Zeile), darum sonst ein
     riesiges Bild oben in der Kachel - stattdessen wie in der horizontalen Ansicht ein kleines,
     festes Bild links und der Text daneben (Listenform). */
  .plan-grid-vertical .plan-cell{ grid-template-columns:1fr !important; gap:.3rem !important; }
  .plan-grid-vertical .plan-chip{
    display:flex !important; flex-direction:row !important; align-items:center !important; gap:.5rem !important;
  }
  .plan-grid-vertical .plan-chip-photo{
    width:2rem !important; height:2rem !important; aspect-ratio:auto !important; flex-shrink:0 !important;
  }
  .plan-grid-vertical .plan-chip-body{ padding:.25rem .4rem !important; }
  .plan-grid-vertical .plan-chip-remove{
    position:static !important; margin-left:auto !important; background:none !important; box-shadow:none !important;
  }
  .plan-chip-duplicate{ display:none !important; }
  .plan-chip-pin{ display:none !important; }

  @page{ size:landscape; margin:8mm; }
}

/* ---------- Speisekammer (Pantry) - Lastenheft Phase 1/2, Winki 09.09.2026 ---------- */
.pantry-add-form{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.3rem; align-items:center;
}
.pantry-add-form input, .pantry-add-form select{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:.55rem 1rem; color:var(--ink); font:inherit;
}
#pantryName{flex:2; min-width:10rem;}
#pantryAmount{width:6rem;}
#pantryUnit{width:6rem;}
#pantryDrainedAmount{width:8rem;}
#pantryLocation, #pantryBrand{flex:1; min-width:8rem;}
/* "Convenience Produkte" (Winki, 14.09.2026, 3. Nachtrag): Anlage-Formular nutzt
   dieselbe .pantry-add-form-Grundoptik, nur mit einem zusaetzlichen Kategorie-
   Dropdown statt der Speisekammer-spezifischen Mengen-/Abtropfgewicht-Felder. */
#productName{flex:2; min-width:10rem;}
#productCategory{min-width:11rem;}
#productBrand{flex:1; min-width:8rem;}
#productPackageAmount{width:7rem;}
#productPackageUnit{width:6rem;}

/* Erinnerungsbanner fuer offene "Wurde gekocht?"-Bestaetigungen (Winki, 11.09.2026
   dritte Nachbesserung), gleicher Akzent-Look wie andere Hinweisbanner der App. */
.pantry-confirm-banner{
  background:var(--accent-soft); border:1px solid var(--accent-strong); border-radius:var(--radius-card);
  padding:.8rem 1rem; margin-bottom:1rem; display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;
  justify-content:space-between; color:var(--accent-strong); font-size:.85rem;
}
/* Fehlte bisher (Winki, 12.09.2026: leere Speisekammer zeigte 2 leere Balken statt
   nur des "leer"-Hinweises) - wie an anderer Stelle in dieser Datei dokumentiert
   (siehe Kommentar bei .tab-btn[hidden]) gewinnt die eigene display:flex-Regel
   ohne diesen expliziten Override gegen das Browser-Vorgabe-[hidden]{display:none},
   das Banner blieb also trotz hidden-Attribut sichtbar (nur eben leer), wann immer
   gerade keine offene Kochbestaetigung/kein bald ablaufender Vorrat vorlag. */
.pantry-confirm-banner[hidden]{display:none;}

.pantry-expiry-overview{
  background:var(--warn-soft); border:1px solid var(--warn); border-radius:var(--radius-card);
  padding:.9rem 1rem; margin-bottom:1rem; display:flex; flex-direction:column; gap:.5rem;
}
.pantry-expiry-overview[hidden]{display:none;}
/* Kompaktes 3-Spalten-Raster statt ganzseitiger Zeilen (Winki, 11.09.2026 dritte
   Nachbesserung: "In der Speisekammer werden auch die zutaten, die bald ablaufen,
   über die ganze seite angezeigt. das ist zu viel für so einen kurzen eintrag ...
   3 spalten-design ... bei z.b. 3 zutaten stehen sie nebeneinander. bei 6 zutaten,
   werden 2 zeilen befüllt") - eine feste 3-Spalten-Grid-Reihe fuellt sich automatisch
   zeilenweise, ohne dass JS die Zeilenumbrueche selbst berechnen muss; bei wenigen
   Eintraegen (1-2) bleiben die restlichen Zellen der Zeile einfach leer. Bricht bei
   schmaler Breite (Tablet/Handy) auf 2 bzw. 1 Spalte um, gleiches Muster wie bei
   .settings-row weiter oben in dieser Datei. */
.pantry-expiry-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:.6rem;}
@media (max-width: 700px){ .pantry-expiry-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width: 460px){ .pantry-expiry-grid{grid-template-columns:1fr;} }
.pantry-expiry-item{
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:.5rem .6rem; display:flex; flex-direction:column; gap:.25rem; min-width:0;
}
.pantry-expiry-item-name{font-weight:600; font-size:.82rem; overflow-wrap:break-word;}
.pantry-expiry-item-meta{font-size:.7rem; color:var(--ink-muted);}
.pantry-expiry-item-foot{display:flex; align-items:center; justify-content:space-between; gap:.4rem; font-size:.68rem;}
/* Kartenraster statt seitenbreiter Zeilen (26.09.2026, Winki: "mir gefällt auch nicht
   die breite darstellung bei den vorräten") - jede Karte ist ein kompakter Block,
   Name oben ueber die volle Kartenbreite, darunter Menge/MHD, dann Lagerort/Marke,
   unten der Verbrauchen-Bereich. Rein per CSS, das Markup (pantryCardHtml/
   productPantryCardHtml in app.js) ist unveraendert. */
.pantry-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(21rem, 1fr)); gap:1rem; align-items:start;}
@media (max-width: 480px){ .pantry-list{grid-template-columns:1fr;} }
/* Wisch-nach-links-zum-Loeschen (mobile, Phase 2 Rest): die Wisch-Flaeche
   ".pantry-swipe-delete" ist ein GESCHWISTER-Element der Karte, beide stecken in
   diesem Wrap mit "overflow:hidden" - nur so bleibt sie wirklich verdeckt, bis die
   Karte per JS-transform darueber weggeschoben wird. Fruehere Fassung hatte die
   Wisch-Flaeche als KIND der Karte, wodurch sie beim Verschieben der Karte einfach
   mitgewandert ist statt sichtbar zu werden - deshalb stand "Löschen" vorher immer
   halb offen da (Winki, 09.09.2026 gemeldet). */
.pantry-card-wrap{position:relative; border-radius:var(--radius-card); overflow:hidden;}
.pantry-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.7rem;
  position:relative; touch-action:pan-y; transition:transform .2s ease;
}
/* Festes 3-Spalten-Raster innerhalb der Karte, damit alle Karten gleich aufgebaut
   sind: Name ueber die volle Breite, darunter Menge | Einheit | Abtropfgewicht,
   dann MHD (2 Spalten) + Status. Selektoren mit .pantry-list-Praefix, damit sie die
   aelteren Flex-Regeln weiter unten (.pantry-card-main .pantry-field:first-child)
   sicher ueberstimmen. */
.pantry-list .pantry-card-main{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.5rem;}
.pantry-list .pantry-card-main > *{min-width:0; width:auto;}
.pantry-list .pantry-card-main > :first-child{grid-column:1 / -1; font-size:1rem;}
.pantry-list .pantry-card-main > [type="date"]{grid-column:span 2;}
.pantry-list .pantry-card-main > .mdh-badge{justify-self:start; align-self:center;}
.pantry-list .pantry-card-secondary{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)) auto; gap:.5rem; align-items:center;}
.pantry-list .pantry-card-secondary > input{min-width:0;}
.pantry-list .pantry-card-secondary > input:first-child:not([data-field="location"]){grid-column:1 / 3;}
.pantry-list .pantry-card-secondary > [data-field="brand"]:not(:first-child){grid-column:2 / 4;}
.pantry-list .pantry-card-secondary > .pantry-consume{grid-column:1 / 3; margin-left:0;}
.pantry-list .pantry-card-secondary > .icon-btn{grid-column:3; justify-self:end;}
.pantry-list .pantry-consume .pantry-consume-amount{flex:1 1 3rem; width:auto; min-width:0;}
.pantry-swipe-delete{
  position:absolute; top:0; right:0; bottom:0; width:7.4rem;
  background:var(--danger); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; cursor:pointer;
}
.pantry-card-main, .pantry-card-secondary{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;}
/* Mehrfachauswahl-Loeschen (Winki, 26.09.2026: "hier oben die Moeglichkeit haben,
   die Vorraete zu loeschen") - kleine Auswaehlen-Zeile ueber jeder Karte
   (.pantry-select-row) plus Sammel-Leiste ueber der ganzen Liste
   (#pantryBulkBar/.pantry-bulk-bar), siehe pantryCardHtml()/productPantryCardHtml()/
   renderPantryBulkBar() in app.js. Bewusst eine eigene Zeile statt Teil des
   .pantry-card-main-Rasters, damit die bestehende feste 3-Spalten-Grid-Regel
   (".pantry-list .pantry-card-main > :first-child") unveraendert auf dem
   Namensfeld greift.*/
.pantry-select-row{
  display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--ink-muted);
  cursor:pointer; align-self:flex-start;
}
.pantry-bulk-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin:0 0 .8rem;
  padding:.6rem .9rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-card);
}
.pantry-bulk-select-all{display:flex; align-items:center; gap:.4rem; font-size:.85rem; cursor:pointer;}
.pantry-bulk-bar .hint{margin:0;}
.pantry-bulk-bar .btn{margin-left:auto;}
.pantry-field, .product-field, .product-pantry-field{
  background:var(--surface-hover); border:1px solid var(--border); border-radius:8px;
  padding:.4rem .6rem; color:var(--ink); font:inherit;
}
.pantry-card-main .pantry-field:first-child, .pantry-card-main .product-field:first-child, .pantry-card-main .product-pantry-field:first-child{flex:2; min-width:9rem; font-weight:600;}
/* "Convenience Produkte" (Winki, 14.09.2026, 3. Nachtrag): ausklappbarer
   Nährwerte-Bereich je Produktkarte (gleiches .nutrient-grid/.nutrient-field wie
   bei "Zutaten prüfen", siehe ingredientAdminFormHtml/productNutritionFormHtml in
   app.js) - eigene Karte in der .pantry-card{display:flex; flex-direction:column}
   daher automatisch unterhalb der Felder, nur ein optischer Abstand/Trenner fehlt
   sonst noch ohne diese Regel. */
.product-nutrition-form{border-top:1px solid var(--border); padding-top:.7rem; margin-top:.2rem;}
.product-nutrition-form[hidden]{display:none;}
/* Foto-Vorschau auf der Produktkarte (Phase 2, 4. Nachtrag: per URL-Import
   übernommen oder später manuell ergänzt) - klein und rund wie die
   Mitglieder-Avatare, damit es sich neben den schmalen Textfeldern nicht
   aufdrängt. */
.product-photo{width:2.6rem; height:2.6rem; border-radius:8px; object-fit:cover; flex-shrink:0; border:1px solid var(--border); background:var(--surface-hover);}
.pantry-field-amount{width:5.5rem;}
.pantry-field-unit{width:5.5rem;}
.pantry-field-drained{width:7rem;}
.pantry-consume{display:flex; gap:.4rem; align-items:center; margin-left:auto;}
.pantry-consume-amount{
  width:4.2rem; background:var(--surface-hover); border:1px solid var(--border); border-radius:8px;
  padding:.4rem .5rem; color:var(--ink); font:inherit; text-align:center;
}
.pantry-quick-btn{
  width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid var(--border);
  background:var(--surface-hover); color:var(--ink); font:inherit; font-weight:700; cursor:pointer;
  flex-shrink:0;
}
.pantry-quick-btn:hover{background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-strong);}

/* Groessere Tipp-Flaechen auf schmalen (mobilen) Bildschirmen (Phase 2 Rest,
   Winki 09.09.2026: "größere +/− Buttons") */
@media (max-width: 640px){
  .pantry-quick-btn{width:2.9rem; height:2.9rem; font-size:1.05rem;}
  .pantry-consume-btn{padding:.65rem 1rem; font-size:.9rem;}
  .pantry-delete-btn{width:2.6rem; height:2.6rem; font-size:1.1rem;}
  .pantry-consume-amount{width:3.6rem;}
}

.mdh-badge{
  font-size:.72rem; font-weight:600; padding:.25rem .6rem; border-radius:var(--radius-pill);
  white-space:nowrap;
}
.mdh-ok{background:var(--ok-soft); color:var(--ok);}
.mdh-soon{background:var(--warn-soft); color:var(--warn);}
.mdh-expired{background:var(--danger-soft); color:var(--danger);}

/* ---------- Haushalt (Household/Member) - Lastenheft Phase 1, Winki 09.09.2026 ---------- */
.household-name-row{display:flex; gap:.6rem; margin-bottom:1.3rem; max-width:24rem;}
.household-name-input{
  flex:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:.55rem 1rem; color:var(--ink); font:inherit;
}
/* Haushalts-Coverbild (Winki, 14.09.2026, fuenfte Runde: "rechteckig mit
   abgerundeten ecken") - dieselbe Optik wie das Kur-Coverbild im Kur-Formular. */
.household-cover-field{margin:0 0 1.3rem; max-width:24rem;}
.household-cover-preview{margin-bottom:.5rem;}
.household-cover-preview img{width:100%; max-width:16rem; aspect-ratio:16/6; object-fit:cover; border-radius:12px; display:block;}

.member-add-form{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.3rem; align-items:flex-end;
}
/* Derselbe Bugfix wie bei .btn[hidden]/.tab-btn[hidden] (siehe dortige Kommentare): ohne
   diese Regel blieb das per JS ausgeblendete (.hidden=true) Formular fuer "nur"-Mitglieder
   trotzdem sichtbar, weil ".member-add-form{display:flex}" die Browser-Vorgabe
   "[hidden]{display:none}" ueberschrieb - entdeckt beim Testen der vierundzwanzigsten
   Nachbesserung (12.09.2026, Winki: "als 'nur' mitglied ... soll man das hier nicht
   sehen (Mitglieder anlegen)"). */
.member-add-form[hidden]{display:none;}
.member-add-form input{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:.55rem 1rem; color:var(--ink); font:inherit; width:100%;
}
.member-add-form .field{gap:.25rem;}
.member-add-form .field label{
  font-size:.68rem; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.03em;
  padding-left:.2rem;
}
.member-add-form .maf-name{flex:2; min-width:9rem;}
.member-add-form .maf-num{width:8.5rem;}
.member-add-form .maf-allergies{flex:1; min-width:10rem;}
.member-add-form .maf-dislikes{flex:1; min-width:10rem;}
.member-add-form .maf-username{flex:1; min-width:12rem;}
.member-add-form #memberDietChips{flex-basis:100%;}
.member-add-form > button[type="submit"]{flex-basis:100%; margin-top:.2rem;}

.member-list{display:flex; flex-direction:column; gap:.6rem;}
.member-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:.9rem 1.1rem; display:flex; flex-direction:column; gap:.6rem;
}
.member-card-main, .member-card-secondary{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;}
.member-field{
  background:var(--surface-hover); border:1px solid var(--border); border-radius:8px;
  padding:.4rem .6rem; color:var(--ink); font:inherit;
}
.member-card-main .member-field:first-child{flex:1.5; min-width:8rem; font-weight:600;}
.member-card-main input[type="number"]{width:8.5rem;}
.member-card-main .icon-btn{margin-left:auto;}

.member-diet-chips{display:flex; flex-wrap:wrap; gap:.5rem; width:100%;}
.member-diet-chip{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--ink-muted);
  background:var(--surface-hover); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:.3rem .7rem .3rem .5rem; cursor:pointer;
  /* Winki 11.09.2026: Labeltext wurde bei bestimmten Fensterbreiten/Browsern
     innerhalb der Pille umgebrochen bzw. abgeschnitten ("Gl" statt "Glyx") -
     weil ein Flex-Kind ohne diese beiden Regeln unter sein Wortinhalt schrumpfen
     bzw. mitten im Wort umbrechen kann. white-space:nowrap + flex:none erzwingen
     stattdessen, dass eine ganze Pille bei Platzmangel komplett in die naechste
     Zeile umbricht (das erledigt bereits flex-wrap auf dem Container), statt dass
     der Text innerhalb der Pille bricht/abgeschnitten wird. */
  white-space:nowrap; flex:none;
}
/* Winki 11.09.2026, Nachbesserung: .member-add-form input{width:100%} (siehe Formularfelder
   weiter oben) traf ungewollt auch auf dieses verschachtelte Checkbox-<input>, weil beide
   Regeln dieselbe Spezifitaet haben (1 Klasse + 1 Elementtyp) und nur die aeltere Regel
   ueberhaupt eine width deklariert hatte - dadurch wurde die Checkbox auf ca. 47px
   aufgeblaeht und quetschte/ueberlappte den Labeltext daneben. width:auto hier setzt die
   Checkbox wieder auf ihre native Breite (~13-16px) zurueck. */
.member-diet-chip input{margin:0; flex:none; width:auto;}
/* Winki, 25.09.2026, dritte Nachbesserung: "beim userprofil rutscht noch text
   außerhalb des fensters." - seit der Wiki-Anbindung gibt es deutlich laengere
   Ernaehrungsform-Namen (z.B. "Detox-Kur nach Anthony William (Medical Medium,
   „3:6:9-Cleanse")"), die als starre, nicht umbrechende Pille (siehe
   .member-diet-chip oben: white-space:nowrap + flex:none, das war Winki
   11.09.2026 bewusst GEGEN Mitten-im-Wort-Umbrueche bei KURZEN Namen wie "Glyx")
   breiter als das Popup wurden und ueber dessen Rand hinausragten. Hier gezielt
   nur fuer die Checkliste im "Ernährungsform"-Popup wieder Umbruch an
   Wortgrenzen erlauben (overflow-wrap bewusst NICHT auf break-word gesetzt, also
   weiterhin kein Umbruch MITTEN in einem einzelnen Wort) und auf die verfuegbare
   Breite begrenzen, statt die Pille ueber den Rand ragen zu lassen. */
#memberDietChecklist .member-diet-chip{white-space:normal; flex:0 1 auto; max-width:100%;}

/* ---------- Authentifizierung (Login/Passwort festlegen) - Winki 09.09.2026 ---------- */
.auth-screen{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--bg); z-index:50; padding:1.5rem;
}
.auth-screen[hidden]{display:none;}
/* Externe (nicht-app-) Einladungs-Ansicht (Winki, 16.09.2026) - bewusst dieselbe
   zentrierte Karten-Optik wie der Login-Screen (.auth-screen/.auth-card), damit sich
   die kein-Login-noetig-Seite trotzdem wie ein zur App gehoeriger Ort anfuehlt. */
.external-invite-screen{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--bg); z-index:50; padding:1.5rem; overflow-y:auto;
}
.external-invite-screen[hidden]{display:none;}
.external-invite-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  width:min(440px, 100%); padding:2rem 1.9rem 2.2rem; margin:auto;
}
.external-invite-other{
  display:flex; flex-direction:column; gap:.4rem; margin:.8rem 0 1.2rem;
}
.external-invite-other-row{
  background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:.5rem .7rem; font-size:.85rem;
}
.auth-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  width:min(360px, 100%); padding:2rem 1.9rem 2.2rem;
}
/* Logo + handschriftlicher Untertitel statt des bisherigen reinen Textnamens
   "Essensplaner" (Winki, 13.09.2026) - dieselbe Caveat-Schriftart wie der
   Sidebar-Spruch (.sidebar-quote), fuer denselben "handschriftlichen" Look. */
.auth-logo{display:block; max-width:220px; width:70%; height:auto; margin:0 auto .4rem;}
.auth-tagline{
  font-family:'Caveat', 'Karla', cursive; font-size:1.3rem; line-height:1.2;
  color:var(--ink-muted); text-align:center; margin:0 0 1.4rem;
}
.auth-card h2{font-size:1.05rem; margin-bottom:1rem;}
.auth-error{
  background:var(--danger-soft); color:var(--danger); border-radius:8px;
  padding:.5rem .7rem; font-size:.8125rem; margin-top:.5rem;
}
.password-field{position:relative; display:flex;}
.password-field input{flex:1; padding-right:2.4rem;}
.password-toggle{
  position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:1.05rem;
  line-height:1; padding:.2rem .3rem; opacity:.65; border-radius:6px;
}
.password-toggle:hover{opacity:1; background:var(--surface-soft, rgba(255,255,255,.06));}

/* ---------- Haushalt: Zugang (Benutzername/Rolle), Teil der Authentifizierung ---------- */
#memberUsername{flex:1; min-width:14rem;}
.member-card-access{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; padding-top:.5rem;
  border-top:1px dashed var(--border);
}
.member-card-access .member-field{min-width:10rem;}
.member-card-access select.member-field{min-width:7rem;}
.member-access-status{font-size:.75rem; color:var(--ink-muted);}
.member-card-access-readonly{color:var(--ink-muted); font-size:.8rem;}

/* ---------- Dashboard (Phase 2 Rest, Winki 09.09.2026) ---------- */
.dashboard-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr)); gap:.8rem; margin-top:1rem;
}

/* ---------- Sprach-Erfassung Speisekammer (Phase 4, vorgezogen, Winki 09.09.2026) ---------- */
.voice-item-row{position:relative;}
.voice-item-include{width:auto; flex:0 0 auto; background:none; border:none; padding:0; margin-right:.2rem;}
.voice-item-name{flex:2; min-width:9rem;}
.voice-item-amount{width:5.5rem;}
.voice-item-unit{width:6rem;}

/* ---------- "Wurde gekocht?"-Popup (automatischer Speisekammer-Abzug, Winki
   09.09.2026) ---------- */
.cook-confirm-list{display:flex; flex-direction:column; gap:.8rem; max-height:60vh; overflow-y:auto;}
.cook-confirm-row{
  background:var(--surface-hover); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:.8rem 1rem; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
}
.cook-confirm-info{display:flex; flex-direction:column; gap:.2rem; flex:1; min-width:10rem;}
.cook-confirm-actions{display:flex; gap:.5rem;}
.cook-confirm-actions[hidden]{display:none;}
/* Nachbesserung (Winki, 11.09.2026, zweite Runde): Nein/Ja sind jetzt Auswahl-Toggles
   statt Sofort-Aktionen (siehe app.js wireCookConfirmRow) - .cook-confirm-selected
   markiert die aktuell gewaehlte Seite, umschaltbar bis zum globalen "Speichern". */
.cook-confirm-actions .btn.cook-confirm-selected{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.cook-confirm-actions .cook-confirm-no.cook-confirm-selected{background:var(--danger); border-color:var(--danger);}
.cook-confirm-portions{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; width:100%;}
.cook-confirm-portions[hidden]{display:none;}
.cook-confirm-portions label{font-size:.85rem; color:var(--ink-muted);}
.cook-confirm-portions-input{
  width:5.5rem; background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:.4rem .5rem; color:var(--ink); font:inherit; text-align:center;
}
/* Wochentag-Abschnitte (Winki, 11.09.2026, zweite Runde: "bei der abfrage sollten
   noch die Wochentage da stehen ... so als abschnitte") - eingefuegt zwischen den
   Zeilen der .cook-confirm-list, siehe app.js openCookConfirmModal(). */
.cook-confirm-day-head{
  font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em;
  color:var(--ink); padding-top:.6rem; margin-top:.2rem; border-top:1px solid var(--border);
}
.cook-confirm-day-head:first-child{padding-top:0; margin-top:0; border-top:none;}


/* ---------- Mitglieder-Avatare (farbig) + Haushalt-Kacheln, Winki 10.09.2026 ----------
   Farbe kommt aus denselben Kategorie-Variablen wie die Gericht-Kacheln (--dot/--dot-soft,
   siehe memberAvatarVars() in app.js) - deshalb hier bewusst KEINE eigenen Farbwerte. */
.member-avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:2.9rem; height:2.9rem; border-radius:50%;
  background:var(--dot-soft); color:var(--dot); font-weight:700; font-size:1.25rem;
}
.member-avatar svg{width:60%; height:60%; display:block;}
/* "insgesamt dürfen dann die icons etwas größer sein in der webapp"
   (Winki, 13.09.2026, zusammen mit dem Profilfoto-Upload) - Basis-, lg- und
   sm-Groeße jeweils um ca. 20% angehoben (2.4->2.9rem / 3.4->4.1rem / 1.7->2.05rem). */
.member-avatar.lg{width:4.1rem; height:4.1rem; font-size:1.8rem;}
.member-avatar.sm{width:2.05rem; height:2.05rem; font-size:1rem;}
/* Eigenes Profilfoto statt Icon/Buchstabe (Winki, 13.09.2026) - das <img> fuellt
   den gleichen kreisrunden Rahmen wie die Buchstaben-/Icon-Variante komplett aus. */
.member-avatar-photo{background:none; overflow:hidden; padding:0;}
.member-avatar-photo img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;}

/* Avatar + sichtbarer Name (Winki, 13.09.2026 dritte Nachbesserung: "die namen der
   haushaltsmitglieder müssen hier noch stehen neben den icons") - siehe
   memberChipHtml() in app.js; ersetzt an den betroffenen Stellen die vorher
   nackten memberAvatarHtml()-Kreise. */
.member-chip{display:inline-flex; align-items:center; gap:.3rem;}
.member-chip-name{font-size:.85rem; color:var(--ink); white-space:nowrap;}

.member-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)); gap:1rem;}
.member-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.7rem; box-shadow:var(--shadow);
  position:relative;
}
.member-card-main{display:flex; align-items:center; gap:.7rem;}
.member-avatar-wrap{position:relative; flex:none;}
.member-avatar-edit{
  position:absolute; right:-.2rem; bottom:-.2rem; width:1.3rem; height:1.3rem; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); color:var(--ink-muted);
  font-size:.65rem; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.member-avatar-edit:hover{color:var(--ink); background:var(--surface-hover);}
.member-avatar-picker[hidden]{display:none;}
.member-avatar-picker{
  background:var(--surface-hover); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:.7rem; margin-top:-.2rem; max-height:17rem; overflow-y:auto;
}
/* Foto-Upload-Button oben in der Avatar-Auswahl (Winki, 13.09.2026), optisch wie
   der "Buchstabe statt Icon"-Button unten, damit die Auswahl aus einem Guss wirkt. */
.avatar-photo-upload-row{margin-bottom:.6rem; padding-bottom:.6rem; border-bottom:1px solid var(--border);}
.avatar-photo-upload-row .btn{width:100%;}
.avatar-icon-section{margin-bottom:.7rem;}
.avatar-icon-section-label{
  font-size:.65rem; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.03em;
  margin-bottom:.35rem;
}
.avatar-icon-grid{display:flex; flex-wrap:wrap; gap:.35rem;}
.avatar-icon-opt{
  width:2.3rem; height:2.3rem; border-radius:8px; border:1px solid transparent; background:var(--surface);
  color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:.35rem;
}
.avatar-icon-opt svg{width:100%; height:100%; display:block;}
.avatar-icon-opt:hover{background:var(--surface-hover); border-color:var(--border);}
.avatar-icon-opt.active{border-color:var(--accent-strong); color:var(--accent-strong); background:var(--accent-soft);}
.member-name-field{flex:1; font-weight:700; font-size:1.02rem; min-width:6rem;}
.member-card-fields{display:grid; grid-template-columns:repeat(2, 1fr); gap:.5rem .7rem;}
.member-field-row{display:flex; flex-direction:column; gap:.2rem; min-width:0;}
.member-field-row .member-field{width:100%; box-sizing:border-box; min-width:0;}
.member-field-row-wide{grid-column:1 / -1;}
.member-field-label{
  font-size:.68rem; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.03em;
}
.member-card-secondary{display:flex; flex-direction:column; gap:.6rem; align-items:stretch;}

/* "Farbe im Wochenplan" bei "Mitglieder" (Winki, 16.09.2026: "die einstellung für
   'meine Farbe' muss bei 'Mitglieder' stehen, direkt unter dem Bild/Nutzernamen" -
   siehe memberColorPickerHtml()/wireMemberColorPicker() in app.js). Eigenes Farbrad
   statt <input type="color">, weil sich Winkis "Palette"-Bug (Systemfarbwaehler des
   Betriebssystems, Auswahl wird nicht uebernommen) so komplett umgehen laesst. */
.member-color-row{display:flex; flex-direction:column; gap:.35rem; position:relative;}
.member-color-picker{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;}
.member-color-swatch-btn{
  width:1.8rem; height:1.8rem; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border);
  cursor:pointer; padding:0; flex:none;
}
.member-color-swatch-btn:hover{box-shadow:0 0 0 1px var(--accent-strong);}
.member-color-popover[hidden]{display:none;}
.member-color-popover{
  position:absolute; top:100%; left:0; z-index:5; margin-top:.3rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:.9rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.7rem; align-items:center;
  width:13.5rem;
}
.member-color-wheel-wrap{position:relative; width:150px; height:150px;}
.member-color-wheel{display:block; width:150px; height:150px; border-radius:50%; cursor:crosshair; touch-action:none;}
.member-color-wheel-marker{
  position:absolute; width:.9rem; height:.9rem; border-radius:50%; border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35); transform:translate(-50%, -50%); pointer-events:none;
}
.member-color-brightness-row{display:flex; align-items:center; gap:.5rem; width:100%; font-size:.72rem; color:var(--ink-muted);}
.member-color-brightness-row input[type="range"]{flex:1;}
.member-color-popover-footer{display:flex; align-items:center; gap:.6rem; width:100%;}
.member-color-preview{width:1.6rem; height:1.6rem; border-radius:50%; border:1px solid var(--border); flex:none;}
.member-color-popover-footer .btn{flex:1;}

/* Rein informative Mitglieder-Karte (Winki, 12.09.2026 vierundzwanzigste Nachbesserung:
   "die karteikarten zu den anderen usern im haushalt sollten nicht eingabefelder und
   checkboxen haben, sondern wie rein informative karteikarten aussehen") - Gegenstueck
   zu .member-card-fields/.member-field-row oben, aber als reiner Text statt Formularfeld. */
.member-name-display{flex:1; font-weight:700; font-size:1.02rem; min-width:6rem;}
.member-readonly-facts{display:grid; grid-template-columns:repeat(2, 1fr); gap:.4rem .7rem;}
.member-readonly-fact{display:flex; flex-direction:column; gap:.15rem; min-width:0; font-size:.85rem;}

/* ---------- Ernährungs-Portionsziele (Winki, 11.09.2026: "täglich x Portionen Obst,
   x Portionen Gemüse, ...") ---------- */
.member-card-nutrition{display:flex; flex-direction:column; gap:.5rem; padding-top:.5rem; border-top:1px dashed var(--border);}
.nutrition-target-rows{display:flex; flex-direction:column; gap:.4rem;}
.nutrition-target-row{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;}
.nutrition-target-row .nt-tag{flex:1.3; min-width:7rem;}
.nutrition-target-row .nt-amount{width:5rem;}
.nutrition-target-row .nt-freq{flex:1; min-width:6rem;}
.nutrition-target-row .nt-remove{margin-left:auto;}
.add-nutrition-target-btn{align-self:flex-start;}

/* ---------- Gerichte-Bewertungen (Netflix-Stil), Winki 10.09.2026 ---------- */
.tile-rating-badges{
  position:absolute; left:.5rem; bottom:.5rem; z-index:1; display:flex; align-items:center;
}
.tile-rating-avatar{
  position:relative; width:1.6rem; height:1.6rem; border-radius:50%; margin-left:-.55rem;
  border:2px solid var(--surface); display:flex; align-items:center; justify-content:center;
}
.tile-rating-avatar:first-child{margin-left:0;}
.tile-rating-inner{width:100%; height:100%; font-size:.7rem;}
.tile-rating-thumb{
  position:absolute; right:-.3rem; bottom:-.3rem; font-size:.6rem; line-height:1;
  background:var(--surface); border-radius:50%; padding:1px;
}
.tile-rating-extra{
  background:var(--surface); color:var(--ink-muted); font-size:.65rem; font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.drawer-rate-btn{top:.5rem; right:.5rem;}
.drawer-fav-btn{top:.5rem; left:.5rem;}
/* Anpinnen direkt auf der Kachel (Winki, 12.09.2026 fünfte Nachbesserung: "ich hätte
   das anpinnen-symbol gern für alle kacheln immer da... das anpinnen muss über 1 klick
   möglich sein.") - ersetzt das vorherige rein passive .tile-fav-badge (nur sichtbar,
   wenn schon angepinnt). Nutzt bewusst dieselbe Basis-Klasse .tile-fav wie das
   "Bewerten"-Symbol (Kreis-Button, Hover-Effekt, orange Farbe im aktiven Zustand via
   .tile-fav.active oben) - nur links statt rechts positioniert, damit beide Symbole
   gleichzeitig Platz haben. */
.tile-fav-trigger{left:.5rem; right:auto;}

/* Augensymbol auf Default-Kacheln (Obst/Gemüse/Nüsse/Öle/Superfoods, Winki, 12.09.2026
   Nachbesserung "individuelles Rezeptbuch") - unten links auf dem Kachelfoto, damit es
   sich nicht mit Pin-Badge (oben links) oder Bewerten-Icon (oben rechts) überschneidet.
   Ausgeblendete Gerichte bleiben als Kachel bestehen (nur durchgestrichen/abgedunkelt,
   siehe .tile-hidden-dish), damit sie sich wieder einblenden lassen. */
.tile-visibility-toggle{
  position:absolute; bottom:.5rem; left:.5rem; width:1.9rem; height:1.9rem; z-index:1;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(255,255,255,.85); color:var(--ink-muted); font-size:1rem; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:pointer; transition:transform .1s ease, background .1s ease;
}
.tile-visibility-toggle:hover{background:#fff; transform:scale(1.08);}
/* Allergie-/"Mag nicht"-Warnicons auf der Rezeptbuch-Kachel (Winki, 13.09.2026,
   Nachtrag zur siebenunddreissigsten Nachbesserung: "bei den rezepten im
   rezeptbuch gleich noch ein icon (warnhinweis) bei allergien eines
   haushaltsmitglieds, und ein icon für mag nicht (frowny)") - unten rechts auf dem
   Kachelfoto (einzige noch freie Ecke: oben links/rechts sind Pin/Bewerten belegt,
   unten links die Bewertungs-Avatare bzw. das Augensymbol bei Grundnahrungsmitteln,
   siehe .tile-rating-badges/.tile-visibility-toggle oben) - prueft gegen ALLE
   Haushaltsmitglieder (nicht nur ein bestimmtes), da die Kachel keinen Bezug zu
   einer konkreten Person hat. */
.tile-warnings{position:absolute; right:.5rem; bottom:.5rem; z-index:1; display:flex; gap:.3rem;}
.tile-warning-icon{
  width:1.7rem; height:1.7rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.tile-warning-allergy{background:var(--danger-soft); color:var(--danger);}
.tile-warning-dislike{background:var(--warn-soft); color:var(--warn);}
.tile-hidden-dish{opacity:.55;}
.tile-hidden-dish .tile-name{text-decoration:line-through;}
/* Eigenes Icon-Set statt Emoji fuer Bewertungen (Winki, 10.09.2026) */
.rating-icon{display:inline-flex;}
.rating-icon svg{display:block; width:1em; height:1em;}
/* Bugfix (Winki, 16.09.2026: "die bewertung von gerichten im kochbuch hat keinen
   daumen nach unten mehr") - .rating-icon.down drehte frueher die GEMEINSAME
   Daumen-hoch-Grafik um 180 Grad, um daraus optisch einen Daumen-runter zu machen.
   Mit der echten eigenen Daumen-runter-Zeichnung (siehe .hicon-daumen-runter weiter
   unten) hat diese Drehung die schon korrekt nach unten zeigende Grafik faelschlich
   wieder auf den Kopf gestellt - sie sah dadurch wieder wie ein Daumen-hoch aus. Die
   (wirkungslos gewordene) Gegen-Drehung auf .hicon selbst (siehe dortiger Kommentar)
   wurde deshalb ebenfalls entfernt, da sie ohne diese Zeile nichts mehr auszugleichen
   hat. */
.rating-icon-pair{display:inline-flex; align-items:center; gap:.15em;}
.rate-trigger-icon{display:inline-flex; align-items:center; gap:.12em;}
.rate-trigger-icon .rating-icon svg{width:.6em; height:.6em;}
.rate-trigger-icon .hicon{width:.85em; height:.85em;}

.rating-member-list{display:flex; flex-direction:column; gap:.4rem; max-height:50vh; overflow-y:auto;}
.rating-member-row{
  display:flex; align-items:center; gap:.7rem; background:var(--surface-hover); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:.6rem .8rem; cursor:pointer; font:inherit; color:inherit; text-align:left;
}
.rating-member-row:hover{background:var(--border);}
.rating-member-name{flex:1; font-weight:600;}
.rating-member-badge-emoji{font-size:1.1rem;}
.rating-thumbs-head{display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; font-size:1.05rem;}
.rating-thumbs-row{display:flex; gap:.7rem;}
.rating-thumb-btn{
  flex:1; background:var(--surface-hover); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:.8rem; font-size:1.6rem; cursor:pointer; transition:transform .1s ease, border-color .1s ease;
}
.rating-thumb-btn:hover{transform:translateY(-2px);}
.rating-thumb-btn.active{border-color:var(--accent-strong); background:var(--accent-soft);}

/* Board: anlassbezogene Gerichte-Sammlungen (Winki 10.09.2026) - Kacheln nutzen bewusst
   die bestehende .tile-Basis (gleicher Look wie die Gerichte-Uebersicht), nur Grid- und
   ein paar Sonderfaelle (Hinzufuegen-Kachel, Entfernen-Button, Picker-Button) sind neu. */
#boardList{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem; margin-top:1rem;}
@media (max-width:900px){ #boardList{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ #boardList{grid-template-columns:1fr;} }

.board-tile-add{background:transparent; border:2px dashed var(--border); box-shadow:none;}
.board-tile-add:hover{background:var(--surface-hover);}
.board-tile-add-photo{font-size:2.4rem; font-weight:700; color:var(--ink-muted); background:none;}

/* Kuren (Winki, 14.09.2026) - eigene Kacheln statt .tile-Fotokacheln (keine Bilder,
   nur Text + Aktionen), aber gleiches Grid-Raster wie #boardList. */
#cureList{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.1rem; margin-top:1rem;}
@media (max-width:900px){ #cureList{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ #cureList{grid-template-columns:1fr;} }
#cureList .tile, #cureHouseholdOverview .tile{cursor:default;}
#cureList .tile:hover{transform:none; background:var(--surface);}

/* Kur-Tagesplan-Baukasten als Wochenkalender-Raster (Winki, 14.09.2026: "ich möchte
   sie wie [den Wochenplan] in einer wochen-kalenderansicht planen ... als nur Tag 1,
   Tag 2, Tag 3....") - bewusst dieselben .plan-table/.plan-day-head/.plan-slot-label/
   .plan-cell-Klassen wie im normalen Essensplan-Wochenraster wiederverwendet (gleiche
   Optik), nur mit einer je nach Kur-Länge DYNAMISCHEN statt fest auf 7 Tage
   ausgelegten Spaltenzahl (per Inline-Style gesetzt, da CSS keine Kur-Länge kennen
   kann) und "Tag 1"/"Tag 2"-Beschriftung statt Wochentagsnamen.
   Nachbesserung (Winki, 14.09.2026 zweite Runde: "ich will ... die kacheln des
   gerichts sehen (diese sollen auch wieder duplizierbar und verschiebbar sein)") -
   die Zellen zeigen jetzt echte .plan-chip-Kacheln (siehe cureEditChipHtml in app.js)
   statt reiner Text-Badges, deshalb align-items von flex-start auf stretch
   umgestellt, damit die Kacheln (wie im normalen Wochenplan) die volle Zellbreite
   ausfuellen; .plan-cell.drag-over (schon fuer den Wochenplan definiert) greift hier
   unveraendert mit, da jede Kur-Zelle zusaetzlich zu .cure-grid-cell auch die Klasse
   .plan-cell traegt. */
.cure-plan-table-wrap{overflow-x:auto; margin:1rem 0 1.4rem;}
.cure-plan-table{display:grid; gap:.5rem;}
.cure-grid-cell{display:flex !important; grid-template-columns:none !important; flex-direction:column; align-items:stretch; gap:.4rem;}
.cure-grid-add-btn{
  border:1px dashed var(--border); border-radius:8px; background:none; color:var(--ink-muted);
  font-size:.8rem; font-weight:700; padding:.15rem .55rem; cursor:pointer; align-self:stretch;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.cure-grid-add-btn:hover{border-color:var(--accent-strong); color:var(--accent-strong); background:var(--accent-soft);}

/* Ganzer Kalender statt nur "Heute" in der Haushalts-Uebersicht (Winki, 14.09.2026,
   dritte Runde: "auch wieder wie im kalender bitte: wochentage (ergänzt um Tag 1,
   Tag 2 etc.). Vergangene Tage /mahlzeiten der kur ausgrauen. (also wie bei der
   Essensplanung eigentlich)") - dieselbe .plan-table/.plan-day-head/.plan-cell-Optik
   wie der normale Essensplan UND der Kur-Tagesplan-Baukasten, hier rein lesend mit
   echten Kacheln (cureReadonlyChipHtml) je Zeitslot/Tag. .plan-day-past/.plan-day-
   today (oben, aus dem Essensplan) greifen unveraendert mit, da jede Kalender-
   Kopfzelle/-Zelle zusaetzlich zu .cure-cal-day-head/.cure-cal-cell auch die
   jeweilige .plan-day-<state>-Klasse traegt. */
.cure-cal-wrap{overflow-x:auto; margin-top:.7rem;}
.cure-cal-day-head{display:flex; flex-direction:column; align-items:center; gap:.1rem;}
.cure-cal-day-number{font-size:.68rem; font-weight:700; color:var(--ink-muted);}
.plan-day-head.plan-day-today .cure-cal-day-number{color:var(--accent-strong);}
.cure-cal-cell{display:flex !important; grid-template-columns:none !important; flex-direction:column; align-items:stretch; gap:.4rem;}

.board-detail-header{display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem; flex-wrap:wrap;}
.board-detail-header h2{font-size:1.3rem; margin:0; flex:1; min-width:0;}

.board-dish-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem; margin-top:1rem;}
@media (max-width:900px){ .board-dish-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .board-dish-grid{grid-template-columns:1fr;} }

.board-picker-tile .tile-body{display:flex; flex-direction:column; gap:.5rem;}
.board-picker-btn{width:100%;}

.modal-wide{width:min(920px, 100%);}
#boardPickerGrid{max-height:min(50vh, 30rem); overflow-y:auto; margin-top:1rem;}

.board-add-wrap{position:relative; display:inline-block;}
.board-add-popover[hidden]{display:none;}
.board-add-popover{
  position:absolute; top:100%; left:0; margin-top:.4rem; z-index:5; min-width:16rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:.8rem .9rem; box-shadow:var(--shadow);
}
.board-add-popover .checkbox-group{flex-direction:column; gap:.5rem; margin-bottom:.8rem;}
.board-add-new-row{display:flex; gap:.5rem;}
.board-add-new-row input{flex:1; min-width:0;}

.cookbook-result-row{padding:.6rem .8rem; border-radius:var(--radius-card); border:1px solid var(--border); font-size:.85rem;}
.cookbook-result-row .hint{margin-top:.2rem; word-break:break-all;}
.cookbook-result-ok{border-color:var(--accent-soft);}
.cookbook-result-error{border-color:var(--danger-soft); color:var(--danger);}

/* ---------- "Rezept-Check" (Winki 10.09.2026): geführte Seite fürs Nachtragen von
   Portionen/Nährwerten/Diäten, siehe app.js renderRecipeCheckStep. Sprechblasen (Winki:
   "abgerundete Ecken, leicht handschriftlicher Font, nicht zu verschnörkelt") zeigen
   jeweils nur an den Feldern, die bei diesem Gericht noch offen sind. ---------- */
.recipecheck-progress{font-size:.8rem; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.8rem;}
.recipecheck-card{
  max-width:34rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:1.4rem 1.5rem;
}
.recipecheck-head{display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem;}
.recipecheck-photo{width:4.5rem; height:4.5rem; border-radius:var(--radius-card); overflow:hidden; flex-shrink:0;}
.recipecheck-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.recipecheck-cat{font-size:.75rem; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em;}
.recipecheck-field{margin-bottom:1.3rem;}
.recipecheck-field label{display:block; font-size:.75rem; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem;}
.recipecheck-field input[type="number"]{
  width:100%; font:inherit; padding:.55rem .7rem; border-radius:var(--radius-card);
  border:1px solid var(--border); background:var(--bg); color:var(--ink);
}
.recipecheck-actions{display:flex; gap:.6rem; margin-top:1.4rem; flex-wrap:wrap;}
.recipecheck-empty{
  max-width:34rem; text-align:center; padding:3rem 1.5rem; background:var(--surface);
  border:1px dashed var(--border); border-radius:var(--radius-card); color:var(--ink-muted);
  font-size:1.05rem;
}
.recipecheck-empty-icon{font-size:2.2rem; margin-bottom:.6rem;}

.speech-bubble{
  position:relative; display:block; margin:0 0 .6rem; padding:.5rem .85rem 1rem;
  background:var(--accent-soft); color:var(--accent-strong); border:1.5px solid var(--accent-strong);
  border-radius:14px 14px 14px 3px; font-family:'Caveat','Bradley Hand','Chalkboard SE',cursive;
  font-size:1.2rem; font-weight:600; line-height:1.2; max-width:26rem;
}
.speech-bubble::after{
  content:""; position:absolute; left:18px; bottom:-8px; width:0; height:0;
  border:8px solid transparent; border-top-color:var(--accent-strong); border-bottom:0;
}
.speech-bubble::before{
  content:""; position:absolute; left:20px; bottom:-5.5px; width:0; height:0; z-index:1;
  border:6px solid transparent; border-top-color:var(--accent-soft); border-bottom:0;
}

/* ---------- Selbstregistrierung (Winki, 13.09.2026) ----------
   Vierstufiger Ablauf, ein View (#authRegisterView) mit vier per JS ein-/
   ausgeblendeten .register-step-Bloecken - nutzt ansonsten dieselben Klassen wie
   Login/Setup (.field, .auth-error, .btn) und braucht darum kaum eigenes CSS. */
.register-step[hidden]{display:none;}
.register-mode-toggle{display:flex; border:1px solid var(--border); border-radius:var(--radius-pill); overflow:hidden; width:100%;}
.register-mode-btn{
  flex:1; font:inherit; font-size:.8rem; font-weight:700; padding:.5rem .6rem; border:none;
  background:var(--surface); color:var(--ink-muted); cursor:pointer;
}
.register-mode-btn.active{background:var(--accent); color:var(--accent-ink);}

/* ---------- Nav-Badge (Backend-Reiter: Anzahl offener Registrierungsanfragen) ---------- */
.nav-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:1.3rem; height:1.3rem;
  padding:0 .35rem; border-radius:var(--radius-pill); background:var(--danger); color:#fff;
  font-size:.7rem; font-weight:700; margin-left:auto;
}
.nav-badge[hidden]{display:none;}
/* Kleine Inline-Variante (Winki, 13.09.2026: Ungelesen-Zahl direkt im Button
   "Wochenplan & Chat ansehen" je verbundenem Haushalt) - kein margin-left:auto,
   da sie mitten im Button-Text sitzt statt am Rand einer Nav-Zeile. */
.nav-badge-inline{margin-left:.4rem; min-width:1.1rem; height:1.1rem; font-size:.65rem;}

/* ---------- Einladungscode-Box (Haushalt beitreten via Registrierung) ---------- */
.invite-code-box{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:1rem 1.1rem; margin-bottom:1.4rem;
}
.invite-code-box[hidden]{display:none;}
.invite-code-row{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:.5rem;}
.invite-code-row code{
  font-family:'Arvo', monospace; font-size:1.05rem; font-weight:700; letter-spacing:.03em;
  background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.4rem .7rem;
}

/* ---------- "Freunde"-Reiter ---------- */
.friend-add-form{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem;}
.friend-add-form[hidden]{display:none;}
.friend-add-form input{
  flex:1; min-width:14rem; font:inherit; font-size:.875rem; padding:.5rem .6rem; border-radius:8px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
}
.friend-request-row{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.7rem .9rem; margin-bottom:.5rem;
  font-size:.875rem;
}
/* Wording-Überarbeitung der Mitessen-Anfragen (Winki, 13.09.2026): Haupttext +
   Zeitstempel jetzt zweizeilig übereinander statt einer einzelnen Zeile, damit
   der neue (längere) Satz plus der gewünschte Zeitstempel Platz haben. */
/* Profilbild vor dem Namen bei Mitessen-Anfragen (Winki, 16.09.2026: "Bei den
   Mitessen-anfragen muss auch immer erst das profilbild und dann der name
   kommen") - eigener Flex-Wrapper um Avatar + Text, damit .friend-request-row
   weiterhin genau 2 Kinder hat (dieser Wrapper + actions) und ihr
   justify-content:space-between wie bisher Text-Block links, Aktionen rechts
   anordnet, statt durch ein drittes Kind (den Avatar) verschoben zu werden. */
.meal-request-main{display:flex; align-items:center; gap:.6rem; min-width:0;}
.meal-request-info{display:flex; flex-direction:column; gap:.15rem; min-width:0;}
.meal-request-time{margin:0;}
/* "neu"-Label je Mitessen-Anfrage-Zeile (Winki, 13.09.2026, fuenfunddreissigste
   Nachbesserung) - eigene Zeile ueber dem Anfragetext statt .meal-request-info direkt
   zu stauchen, damit der rote Badge nicht durch align-items:stretch (Spalten-Flex) auf
   die volle Breite gezogen wird. */
.meal-request-textline{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;}
.friend-connections-list, .friend-shares-list{display:flex; flex-direction:column; gap:.5rem;}

/* Zwei-Spalten-Layout "Mitessen-Anfragen"/"Notifications" (Winki, 16.09.2026: "Den
   Bereich 'Mitessen-anfragen' (links) und den Bereich 'Notifications' (rechts)
   müssen nebeneinander sein (zwei spalten) ... diese beiden spalten müssen in sich
   scrollbar sein."). Feste Hoehe + eigener Scrollbereich je Spalte (statt die ganze
   Seite scrollen zu lassen), damit beide Listen unabhaengig voneinander durchsehbar
   sind, auch wenn eine davon deutlich laenger ist als die andere. Unter der
   Tablet-Breite (siehe Media Query weiter unten) untereinander statt nebeneinander,
   sonst waere jede Spalte auf einem Handy zu schmal.*/
/* "Ansichtsbereiche" (Winki, 16.09.2026: "Auf der freundeseite brauchen wir noch
   ansichtsbereiche für die ereignisse mitessen, geteilte rezepte, notifications") -
   eine gemeinsame, klar umrandete Kachel-Optik fuer alle drei Bereiche (die beiden
   Spalten oben UND "Geteilte Rezepte" darunter), damit sie als gleichwertige,
   abgegrenzte Ansichtsbereiche erkennbar sind statt als lose Listen auf der Seite -
   bewusst dieselbe Optik wie andere Karten/Panels in der App (Rand + Rundung +
   dezenter Hintergrund), auch wenn eine Liste gerade leer ist (siehe Leer-Hinweise
   in renderMealRequestsSection()/renderNotificationsFeed()/renderFriendsPanel()).*/
.friends-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:1rem 1.1rem; margin-bottom:1.2rem;
}
/* "Verbundene Haushalte" (Winki, 16.09.2026, Nachbesserung: "Zwischen diesem
   ansichtsbereich und den unteren brauchen wir mehr abstand." - zweite
   Rueckmeldung, der erste Versuch mit 2.4rem Abstand fiel Winki noch zu klein
   auf) - deutlich mehr Abstand als das normale .friends-panel-margin-bottom
   zwischen den einzelnen Ansichtsbereichen, damit "Verbundene Haushalte" klar
   von der Mitessen-Anfragen/Notifications-Zeile darunter abgesetzt wirkt statt
   daran zu kleben. */
.friends-panel-spaced{margin-bottom:4rem;}
.friends-two-col{display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start;}
.friends-col-scroll{max-height:26rem; overflow-y:auto; padding-right:.2rem;}
@media (max-width: 720px){
  .friends-two-col{grid-template-columns:1fr;}
  .friends-col-scroll{max-height:18rem;}
}
.friend-connection-row{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.7rem .9rem;
}
/* Haushalts-Coverbild bei verbundenen Haushalten (Winki, 14.09.2026, fuenfte
   Runde: "rechteckig mit abgerundeten ecken ... daneben ... die mitglieder mit
   ihren runden profilbildern und namen") - feste Groesse, damit die Zeile bei
   Haushalten ohne Coverbild (kein <img>, siehe coverHtml) nicht "springt". */
.friend-connection-cover{
  width:4.5rem; height:3.2rem; object-fit:cover; border-radius:10px; flex:none;
}
/* Winki, 14.09.2026, sechste Runde: "dann sind der name sowie die
   familienmitglieder zu weit davon entfernt. bring sie nah (aber nicht zu nah!) an
   das coverbild." - Cover+Info gruppiert mit fester, kleiner Luecke statt sie (wie
   zuvor) als zwei von drei Kindern eines justify-content:space-between-Containers
   direkt auseinandertreiben zu lassen (siehe .friend-connection-row, das
   space-between wirkt jetzt nur noch zwischen dieser Gruppe und dem Aktions-Button
   rechts). */
.friend-connection-main{display:flex; align-items:center; gap:.7rem; min-width:0;}
.friend-connection-info{display:flex; flex-direction:column; gap:.3rem; min-width:0;}
.friend-connection-name{font-weight:700;}
/* Mitglieder-Kreise UND (seit 16.09.2026) die aktiven Gericht-Alarme fuer diesen
   Haushalt in einer gemeinsamen, umbrechenden Zeile - Winki: "Der Hinweis, welche
   Gerichtalarme aktiv sind, muss einfach bei den verbundenen haushalten mit stehen
   (also rechts neben den Nutzern)." Die .dish-alert-chip-Optik dafuer stammt noch
   von der vorherigen eigenen "Gericht-Alarme"-Sektion (siehe .dish-alert-chip
   weiter unten), hier nur als zusaetzliche Kinder derselben Zeile statt eines
   eigenen Blocks darunter. */
.friend-connection-members{display:flex; align-items:center; gap:.25rem; flex-wrap:wrap;}
/* "wer davon gerade eine Kur macht" (Winki, 14.09.2026, sechste Runde) - siehe
   partner_active_cures in server/app.py _friends_links_view(). */
.friend-connection-active-cures{display:flex; gap:.3rem; flex-wrap:wrap;}
.friend-share-row{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.7rem .9rem;
}
.friend-share-row .admin-toggle-group{margin-left:auto;}
.friend-share-name{font-weight:700;}
/* Bild -> Name -> Freundesname (Winki, 16.09.2026: "geteilte rezepte dann mit zuerst
   bild, dann namen, dann freundesnamen") + klickbare Vorschau, siehe
   openSharePreviewModal() in app.js. */
.friend-share-photo{
  flex:0 0 auto; width:2.75rem; height:2.75rem; border-radius:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--bg); cursor:pointer;
}
.friend-share-photo img{width:100%; height:100%; object-fit:cover;}
.friend-share-photo svg{width:1.5rem; height:1.5rem;}
.friend-share-info{display:flex; flex-direction:column; gap:.1rem; min-width:0; cursor:pointer;}
.friend-share-textline{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;}

/* "Freunde zum Essen einladen"-Popup (Winki, 16.09.2026: "es müssen ganze haushalte
   oder einzelne freunde auswählbar sein (wenn ganzer haushalt bereits ausgewählt,
   dann stehen diese mitglieder nicht mehr zur einzelauswahl zur verfügung)") - siehe
   openInviteFriendsModal() in app.js. */
.invite-household-block{
  border:1px solid var(--border); border-radius:10px; padding:.6rem .8rem; margin-bottom:.6rem; background:var(--bg);
}
.invite-household-row{font-size:.9rem;}
.invite-members-list{display:flex; flex-direction:column; gap:.3rem; margin:.5rem 0 0 1.6rem;}
.invite-member-row{display:flex; align-items:center; gap:.4rem; font-size:.85rem;}
/* Mitglieder-Checkbox ausgegraut, sobald der ganze Haushalt bereits ausgewaehlt ist -
   sie stehen dann bewusst NICHT mehr zur Einzelauswahl zur Verfuegung (siehe
   Change-Handler in openInviteFriendsModal()), statt sie komplett zu verstecken (so
   bleibt sichtbar, wer alles zum Haushalt gehoert). */
.invite-member-row-disabled{opacity:.45;}
.invite-existing-row{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:.5rem .7rem; margin-bottom:.4rem;
  font-size:.85rem;
}
.invite-email-row{display:flex; gap:.5rem; margin-bottom:.4rem;}
.invite-email-row input{flex:1; font:inherit; font-size:.875rem; padding:.5rem .6rem; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink);}
/* Wird aus dem Gericht-Detail (Drawer) heraus geoeffnet (siehe drawerInviteFriendsBtn
   in app.js) - der Drawer hat sein eigenes Scrim (#scrim, z-index:35) bewusst ueber
   dem generischen .modal-scrim (30) liegen (siehe Kommentar dort), sonst wuerde es
   dieses Popup verdecken/Klicks abfangen. */
#inviteFriendsScrim{z-index:36;}
.badge-new{background:var(--danger); color:#fff;}

/* Aktive Gericht-Alarme im Freunde-Reiter (Winki, 16.09.2026) - kompakte Chips statt
   voller Zeilen wie bei Verbindungen/Anfragen, da hier nur "was" + "deaktivieren"
   noetig ist (die eigentliche Verwaltung/das Aktivieren passiert auf der
   Gericht-Kachel im Wochenplan-Modal selbst, siehe .friend-plan-alert-btn). Sitzen
   seit der Freunde-Reiter-Neugestaltung direkt in .friend-connection-members statt
   in einem eigenen Block darunter (siehe dortiger Kommentar) - kein eigener
   Container mehr noetig, .friend-connection-members bringt Flex-Wrap+Gap schon mit. */
.dish-alert-chip{
  display:inline-flex; align-items:center; gap:.35rem; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:.3rem .5rem .3rem .7rem; font-size:.8rem;
}
.dish-alert-chip-remove{
  border:none; background:none; cursor:pointer; color:var(--ink-muted); font-size:.8rem; line-height:1;
  padding:.1rem .2rem; border-radius:50%;
}
.dish-alert-chip-remove:hover{color:var(--danger); background:var(--danger-soft);}

/* ---------- Board: eingeladene Haushalte ("gemeinsam ein Board bearbeiten") ---------- */
.board-guest-box{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:1rem 1.1rem; margin-bottom:1rem;
}
.board-guest-box[hidden]{display:none;}
.board-guest-list{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.8rem;}
.board-guest-chip{
  display:inline-flex; align-items:center; gap:.4rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:.3rem .7rem; font-size:.8rem; font-weight:600;
}
.board-guest-remove{cursor:pointer; color:var(--ink-muted); font-size:.75rem;}
.board-guest-remove:hover{color:var(--danger);}

/* ---------- Freund-Wochenplan + Chat (Modal) ---------- */
.friend-plan-layout{display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap;}
.friend-plan-grid{flex:2; min-width:16rem; display:flex; flex-direction:column; gap:.9rem;}
.friend-plan-weeknav{display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:1rem; font-size:.85rem; font-weight:700;}
/* Wochenbereich statt roher Wochenschluessel (Winki, 13.09.2026: "07.-13.09.26"
   darunter "KW 37") - zentriert, zweizeilig, analog zum Header-week-chip. */
.friend-plan-week-range{text-align:center; font-weight:400; line-height:1.3;}
.friend-plan-week-range strong{font-weight:700;}
.friend-plan-day-label{font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--ink-muted); margin-bottom:.4rem;}
.friend-plan-slot{background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.6rem .8rem; margin-bottom:.4rem;}
.friend-plan-slot-label{font-size:.7rem; font-weight:700; color:var(--accent-strong); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.3rem;}
/* Gericht-Kachel im Freund-Wochenplan (Winki, 13.09.2026 Nachbesserung: "es müssen
   die Bilder der Gerichte gezeigt werden und ernährungstags... Rezept öffnen...
   Mitessen anfragen") - Foto + Name/Badges/Aktionen statt reinem Text. */
.friend-plan-entry{display:flex; gap:.6rem; font-size:.875rem; padding:.4rem 0; cursor:pointer;}
.friend-plan-entry[data-dish-id=""]{cursor:default;}
.friend-plan-entry-photo{
  flex:none; width:3rem; height:3rem; border-radius:8px; overflow:hidden; background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--accent-strong);
}
.friend-plan-entry-photo img{width:100%; height:100%; object-fit:cover;}
.friend-plan-entry-photo svg{width:60%; height:60%;}
.friend-plan-entry-body{display:flex; flex-direction:column; gap:.2rem; flex:1; min-width:0;}
.friend-plan-dish-name{font-weight:600;}
/* Gericht-Alarm-Glocke (Winki, 16.09.2026) sitzt neben dem Namen statt darunter,
   daher eine eigene Kopfzeile fuer beide zusammen. */
.friend-plan-entry-head{display:flex; align-items:center; gap:.4rem;}
.friend-plan-alert-btn{
  flex:none; width:1.7rem; height:1.7rem; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); font-size:.85rem; line-height:1; display:flex; align-items:center;
  justify-content:center; cursor:pointer; padding:0; opacity:.55; transition:transform .1s ease, opacity .1s ease;
}
.friend-plan-alert-btn:hover{transform:scale(1.1); opacity:.85;}
.friend-plan-alert-btn.active{opacity:1; background:var(--danger-soft); border-color:var(--danger);}
.friend-plan-entry-badges{display:flex; flex-wrap:wrap; gap:.2rem;}
.friend-plan-mitessen{margin-top:.2rem;}
/* Winki, 13.09.2026 (Nachtrag zur dritten Nachbesserung): "unterschiedliche farben
   ... aber auch gleich groß ... gleiche schriftgröße" - frueher hatte dieser Button
   eine eigene, kleinere Schrift/Polsterung als ".friend-plan-adopt-btn" (der einfach
   die normale .btn-Groeße nutzte) - jetzt bewusst KEIN Groeßen-Override mehr, beide
   Buttons teilen sich dieselbe ".btn"-Basisgroeße und unterscheiden sich nur noch
   per Farbe (.btn-primary/.btn-ochre, siehe app.js).
   Weiterer Nachtrag (13.09.2026): "die buttons sind echt breit. mache sie schmaler
   (so schmal, dass sie nur etwas länger sind, als der längste text der beiden)" -
   vorher per Inline-Style "width:100%" auf volle Kartenbreite gestreckt (der
   umgebende ".friend-plan-entry-body" ist ein Flex-Container, der Kinder ohne
   eigene Breite sonst automatisch streckt). Jetzt eine gemeinsame, auf den
   längeren der beiden Texte ("Ins Rezeptbuch übernehmen") abgestimmte feste Breite,
   damit BEIDE Buttons gleich schmal/gleich breit erscheinen, unabhängig davon, ob
   gerade einer oder beide gleichzeitig angezeigt werden. */
.friend-plan-action-btn{width:17rem; max-width:100%; align-self:flex-start; margin-top:.3rem;}
.friend-plan-mitessen-status{margin:0;}
/* "Mitessen bestätigt" deutlich sichtbar machen (Winki, 13.09.2026 dritte
   Nachbesserung: "Das 'Mitessen bestätigt' muss deutlich sichtbarer sein!") -
   auffaelliger gruener Banner statt der vorherigen unauffaelligen .hint-Textzeile,
   dieselben Erfolgs-Farbvariablen wie z.B. .mdh-ok/.badge-warn im Rest der App. */
.friend-plan-mitessen-status.confirmed{
  margin-top:.3rem; padding:.4rem .6rem; border-radius:8px; font-weight:600; font-size:.82rem;
  background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok);
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
}
/* "Absagen"-Link direkt im gruenen Banner (sechsunddreissigste Nachbesserung) - eigene,
   etwas kraeftigere Farbe statt des blass-grauen .btn-link-Standards, sonst kaum lesbar
   auf dem gruenen Untergrund. */
.friend-plan-mitessen-withdraw-btn{color:var(--danger); font-weight:600;}
.friend-plan-mitessen-form{
  display:flex; flex-direction:column; gap:.25rem; margin-top:.4rem; padding:.5rem .6rem;
  background:var(--bg); border:1px solid var(--border); border-radius:8px; font-size:.8rem;
}
.friend-plan-mitessen-form[hidden]{display:none;}
/* Absagen-Formular in der Mitessen-Anfragen-Liste (Freunde-Tab), sechsunddreissigste
   Nachbesserung - gleiches Muster wie .friend-plan-mitessen-form oben. */
.meal-request-withdraw-wrap{display:flex; flex-direction:column; align-items:flex-end; gap:.3rem;}
.meal-request-withdraw-form{
  display:flex; flex-direction:column; gap:.25rem; padding:.5rem .6rem; min-width:12rem;
  background:var(--bg); border:1px solid var(--border); border-radius:8px; font-size:.8rem;
}
.meal-request-withdraw-form[hidden]{display:none;}
/* Allergie-/"Mag nicht"-Warnhinweise (Winki, 13.09.2026, siebenunddreissigste
   Nachbesserung): Allergien rot mit Warnzeichen (Sicherheitsthema), "Mag nicht"
   neutral (Geschmackssache) - siehe app.js mealMemberWarningsHtml(). */
.meal-warnings{display:flex; flex-direction:column; gap:.2rem; margin-top:.3rem;}
/* text-transform:none (Nachtrag 13.09.2026, Wording-Anpassung "Allergien:"/"Abneigung:"):
   #planMemberWarnings (siehe planMemberPickerHtml() in app.js) liegt innerhalb des
   Gross-geschriebenen "Wer isst mit?"-Labels (text-transform:uppercase) und hat den
   Text bisher komplett in Grossbuchstaben mitgerissen ("ALLERGIEN: WINKI: ERDNUSSÖL"),
   obwohl die Warnungen selbst nie gross geschrieben sein sollten. Hier fest auf "none"
   setzen, egal in welchem Kontext die Warnungen eingebettet werden. */
.meal-warning{display:inline-block; font-size:.76rem; border-radius:6px; padding:.15rem .5rem; width:fit-content; text-transform:none;}
.meal-warning-allergy{background:var(--danger-soft); color:var(--danger); font-weight:600;}
/* Winki, 13.09.2026 (Nachtrag zur siebenunddreissigsten Nachbesserung): "das 'mag
   nicht' textfeld im wochenplan... geht aktuell noch unter... auch wieder in
   ocker-farben? (wie gelb - mittlere warnstufe, rötlich ist ja allergie = höchste
   warnstufe)" - vorher benutzte .meal-warning-dislike dieselbe Farbe wie der
   Hintergrund (var(--bg)) und ging damit optisch komplett unter; jetzt dieselben
   ocker/gelben --warn-Variablen wie das bestehende "Portionen prüfen"-Badge
   (.badge-warn), als mittlere Warnstufe klar zwischen "keine Warnung" und der
   roten Allergie-Warnung erkennbar. */
.meal-warning-dislike{background:var(--warn-soft); color:var(--warn); font-weight:600;}

.friend-plan-chat{
  flex:1; min-width:14rem; display:flex; flex-direction:column; background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius-card); padding:.8rem; max-height:30rem;
}
/* Haushaltsmitglieder ueber dem Chat (Winki, 13.09.2026: "welche mitglieder zu
   dem jeweiligen haushalt gehören") - eigener Haushalt links, Freund-Haushalt
   rechts, symmetrisch zur Chat-Ausrichtung selbst. */
.friend-plan-chat-members{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-bottom:.6rem; padding-bottom:.6rem; border-bottom:1px solid var(--border);
}
.friend-plan-chat-members-group{display:flex; gap:.2rem; flex-wrap:wrap;}
.friend-plan-chat-members-sep{color:var(--ink-muted); font-size:.8rem;}
.friend-plan-chat-messages{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:.35rem; margin-bottom:.6rem; max-height:20rem;}
/* Datumstrenner (Winki, 13.09.2026: "so wie bei Telegram oder whatsapp -> datum
   ist über der ersten sprechblase des tages") */
.friend-plan-chat-daysep{align-self:center; margin:.3rem 0; font-size:.7rem; font-weight:700; color:var(--ink-muted); background:var(--surface); border-radius:var(--radius-pill); padding:.15rem .7rem;}
/* Eine Chat-Zeile = Avatar + Sprechblase. WICHTIG (Winki): Ausrichtung folgt NUR
   dem Haushalt (own = eigener Haushalt = links, unabhaengig vom Mitglied; other =
   Freund-Haushalt = rechts) - die Sprechblasen-FARBE (siehe --bubble-soft/-dot
   inline) folgt dagegen dem einzelnen Mitglied. */
.friend-plan-chat-row{display:flex; gap:.4rem; align-items:flex-end; max-width:100%;}
.friend-plan-chat-row.own{justify-content:flex-start;}
.friend-plan-chat-row.other{justify-content:flex-end; flex-direction:row-reverse;}
.friend-plan-chat-bubble{
  position:relative; background:var(--bubble-soft, var(--surface)); border-radius:10px;
  padding:.3rem .6rem .35rem; padding-top:1.15rem; padding-right:2.9rem; font-size:.8rem; max-width:75%;
  display:flex; flex-direction:column; gap:.05rem;
}
.friend-plan-chat-row.own .friend-plan-chat-bubble{border-bottom-left-radius:2px;}
.friend-plan-chat-row.other .friend-plan-chat-bubble{border-bottom-right-radius:2px;}
/* Uhrzeit oben rechts in der Sprechblase (Winki: "uhrzeit ist in der sprechblase
   (rechte obere ecke)") */
.friend-plan-chat-time{position:absolute; top:.25rem; right:.5rem; font-size:.62rem; color:var(--ink-muted); opacity:.8;}
.friend-plan-chat-author{display:block; font-size:.7rem; font-weight:700; color:var(--bubble-dot, var(--ink-muted));}
.friend-plan-chat-text{white-space:pre-wrap; word-break:break-word;}
/* Bugfix (Winki, 13.09.2026, Nachtrag): "hier ist der senden-button noch außerhalb
   des chat bereichs" - das Eingabefeld hatte "flex:1" ohne "min-width:0", und ein
   Flex-Element schrumpft per Browser-Vorgabe nie unter seine eigene Inhalts-
   Mindestbreite ("min-width:auto") - dadurch sprengte das Eingabefeld bei einem
   schmalen Chat-Panel die verfuegbare Breite und schob den "Senden"-Button ueber
   den Kartenrand hinaus. "min-width:0" erlaubt dem Feld jetzt tatsaechlich zu
   schrumpfen; "flex-shrink:0" haelt den Button dabei in voller Groeße. */
.friend-plan-chat-form{display:flex; gap:.5rem;}
.friend-plan-chat-form input{
  flex:1; min-width:0; font:inherit; font-size:.85rem; padding:.45rem .6rem; border-radius:8px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
}
.friend-plan-chat-form .btn{flex-shrink:0;}


/* ---------- Winkis handgezeichnete Icons (13./14.09.2026, "was ist mit den icons?")
   ersetzen ab jetzt Emoji + die bisherigen programmierten Platzhalter-SVGs
   (SVG_ICONS in app.js) an allen dafuer sinnvollen Stellen. Technik: die von
   Winki gelieferten PNGs (schwarze Linien auf weissem Grund) wurden serverseitig
   in echte Alpha-Masken umgewandelt (schwarz -> deckend, weiss -> transparent),
   liegen als /img/icons/*.png. Per CSS mask-image + background-color:currentColor
   erben sie automatisch die Textfarbe ihrer Umgebung - dadurch passen sie sich
   ganz ohne eigene Regeln pro Design-Theme (Salat-Fresh/Sporty-Steel/Color-Kids)
   der jeweiligen Akzentfarbe an, genau wie es Winki gewuenscht hat ("denk daran
   die icon farbe an die color palette des jeweiligen design themes anzupassen"). */
.hicon{
  display:inline-block; width:1em; height:1em; flex:none;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  vertical-align:-0.15em;
}
.hicon-startseite{-webkit-mask-image:url('/img/icons/startseite.png'); mask-image:url('/img/icons/startseite.png');}
.hicon-rezeptbuch{-webkit-mask-image:url('/img/icons/rezeptbuch.png'); mask-image:url('/img/icons/rezeptbuch.png');}
.hicon-zauberstab{-webkit-mask-image:url('/img/icons/zauberstab.png'); mask-image:url('/img/icons/zauberstab.png');}
.hicon-essensplanung{-webkit-mask-image:url('/img/icons/essensplanung.png'); mask-image:url('/img/icons/essensplanung.png');}
.hicon-warnhinweis{-webkit-mask-image:url('/img/icons/warnhinweis.png'); mask-image:url('/img/icons/warnhinweis.png');}
.hicon-wiki{-webkit-mask-image:url('/img/icons/wiki.png'); mask-image:url('/img/icons/wiki.png');}
.hicon-freunde{-webkit-mask-image:url('/img/icons/freunde.png'); mask-image:url('/img/icons/freunde.png');}
.hicon-account{-webkit-mask-image:url('/img/icons/account.png'); mask-image:url('/img/icons/account.png');}
.hicon-einstellungen{-webkit-mask-image:url('/img/icons/einstellungen.png'); mask-image:url('/img/icons/einstellungen.png');}
.hicon-daumen-hoch{-webkit-mask-image:url('/img/icons/daumen-hoch.png'); mask-image:url('/img/icons/daumen-hoch.png');}
.hicon-daumen-runter{-webkit-mask-image:url('/img/icons/daumen-runter.png'); mask-image:url('/img/icons/daumen-runter.png');}
.hicon-zwei-daumen-hoch{-webkit-mask-image:url('/img/icons/zwei-daumen-hoch.png'); mask-image:url('/img/icons/zwei-daumen-hoch.png');}
.hicon-anpinnen{-webkit-mask-image:url('/img/icons/anpinnen.png'); mask-image:url('/img/icons/anpinnen.png');}
.hicon-duplizieren{-webkit-mask-image:url('/img/icons/duplizieren.png'); mask-image:url('/img/icons/duplizieren.png');}
.hicon-auge{-webkit-mask-image:url('/img/icons/auge.png'); mask-image:url('/img/icons/auge.png');}
.hicon-auge-durchgestrichen{-webkit-mask-image:url('/img/icons/auge-durchgestrichen.png'); mask-image:url('/img/icons/auge-durchgestrichen.png');}
.hicon-loeschen{-webkit-mask-image:url('/img/icons/loeschen.png'); mask-image:url('/img/icons/loeschen.png');}
.hicon-kochansicht{-webkit-mask-image:url('/img/icons/kochansicht.png'); mask-image:url('/img/icons/kochansicht.png');}
.hicon-entfernen{-webkit-mask-image:url('/img/icons/entfernen.png'); mask-image:url('/img/icons/entfernen.png');}
.hicon-automatisch-befuellen{-webkit-mask-image:url('/img/icons/automatisch-befuellen.png'); mask-image:url('/img/icons/automatisch-befuellen.png');}
.hicon-einkaufsliste{-webkit-mask-image:url('/img/icons/einkaufsliste.png'); mask-image:url('/img/icons/einkaufsliste.png');}
.hicon-frowny{-webkit-mask-image:url('/img/icons/frowny-abneigung.png'); mask-image:url('/img/icons/frowny-abneigung.png');}
/* Nachbesserung 15.09.2026 (Winki: "Wir brauchen passendere Icons für die Menüpunkte
   der convenience produkte und die Kuren ... achte auf die color pallettes der
   design-themes") - loesen die bisherigen Emoji-Platzhalter (🛒/🌿) in der Sidebar ab.
   Gleiches Muster wie alle anderen .hicon-* oben: PNG mit transparentem Hintergrund als
   Maske + background-color:currentColor, dadurch automatisch passend eingefaerbt in
   jedem Design-Theme (Salat-Fresh/Sporty-Steel/Color-Kids/...), ganz ohne eigene
   Theme-Regeln. */
.hicon-convenience-produkte{-webkit-mask-image:url('/img/icons/convenience-produkte.png'); mask-image:url('/img/icons/convenience-produkte.png');}
.hicon-kuren{-webkit-mask-image:url('/img/icons/kuren.png'); mask-image:url('/img/icons/kuren.png');}
/* "Speisekammer"/"Nahrungsergänzung" (Nachbesserung 15.09.2026, zweite Rückmeldung
   zum NEM-Feature): loesen die Emoji-Platzhalter (🥫/💊) ab - Winkis eigene Icons
   (Vorratsdosen-/Kapsel-Motiv), als PNG mit weissem Hintergrund geliefert und hier
   per Alpha-Maskierung (Distanz zur Hintergrundfarbe -> Alphawert) in echte
   transparente hicon-Masken umgewandelt, exakt dasselbe Muster wie oben. */
.hicon-speisekammer{-webkit-mask-image:url('/img/icons/speisekammer.png'); mask-image:url('/img/icons/speisekammer.png');}
.hicon-nahrungsergaenzung{-webkit-mask-image:url('/img/icons/nahrungsergaenzung.png'); mask-image:url('/img/icons/nahrungsergaenzung.png');}
/* Traditionen-Feature: eigenes Symbol fuer "als Tradition festpinnen" (Winki,
   16.09.2026: "wir haben das gleiche icon schon zum anpinnen von gerichten im
   kochbuch. wir brauchen hier ein anderes symbol. ich hänge eins an." - von ihr
   mitgeliefertes Hut-mit-Feder-Motiv statt des bisher wiederverwendeten
   hicon-anpinnen, siehe planCellEl() in app.js). */
.hicon-tradition{-webkit-mask-image:url('/img/icons/tradition.png'); mask-image:url('/img/icons/tradition.png');}
/* "Zauberstab"-Einnahmeplan (Winki, 15.09.2026, fuenfte Rueckmeldung) - eine Karte
   je Zeitfenster-Gruppe, gleiches Grundmuster wie .admin-member-mgmt-row. */
.einnahmeplan-gruppe{
  border:1px solid var(--border); border-radius:10px; padding:.8rem 1rem; background:var(--surface);
  margin-bottom:.8rem;
}
.einnahmeplan-gruppe-titel{font-weight:700; font-size:1.02rem;}
/* Echte Tageszeiten-Icons von Winki (Nachbesserung 15.09.2026, Ordner
   "Downloads/tageszeiten") statt der bisherigen Emoji - gleiches
   hicon-Maskenmuster wie alle anderen Icons im Projekt. */
.hicon-tageszeit-morgens{-webkit-mask-image:url('/img/icons/tageszeit-morgens.png'); mask-image:url('/img/icons/tageszeit-morgens.png');}
.hicon-tageszeit-mittags{-webkit-mask-image:url('/img/icons/tageszeit-mittags.png'); mask-image:url('/img/icons/tageszeit-mittags.png');}
.hicon-tageszeit-abends{-webkit-mask-image:url('/img/icons/tageszeit-abends.png'); mask-image:url('/img/icons/tageszeit-abends.png');}
.hicon-tageszeit-schlafen{-webkit-mask-image:url('/img/icons/tageszeit-schlafen.png'); mask-image:url('/img/icons/tageszeit-schlafen.png');}
.einnahmeplan-slot-icon{font-size:1.3rem; margin-right:.4rem; vertical-align:-.25rem;}
.einnahmeplan-item{margin-top:.5rem;}
.einnahmeplan-item:first-child{margin-top:0;}

/* Nachtrag (16.09.2026, sechste Rueckmeldung): "ich möchte es noch
   uebersichtlicher, cleaner. wieder mehr kacheln." - die bisherigen reinen
   Text-Unter-Gruppen (Fliesstext je Mahlzeitbezug) sind jetzt echte Kacheln,
   eine je Zeitfenster+Mahlzeitbezug-Kombination, mit denselben .tile/.tile-
   photo/.tile-body-Grundklassen wie im Rezeptbuch (siehe .board-dish-grid für
   dasselbe Grid-Muster) - für den Wiedererkennungswert app-weit dieselbe
   Optik. Absichtlich eigenes, etwas schmaleres Grid als .board-dish-grid, da
   eine Einnahmeplan-Kachel viel weniger Inhalt (nur Name+Menge je NEM) als
   eine Gericht-Kachel trägt. */
.einnahmeplan-tile-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:1rem; margin-top:.6rem;}
.einnahmeplan-tile{cursor:pointer; text-align:left; border:none; font:inherit; color:inherit;}
.einnahmeplan-tile .tile-photo{aspect-ratio:3/4;}
.einnahmeplan-tile .tile-body{padding:.65rem .75rem .75rem;}
.einnahmeplan-tile .tile-name{font-size:.85rem; margin-bottom:.35rem;}
.einnahmeplan-tile-list{list-style:none; margin:0; padding:0; font-size:.82rem; line-height:1.5;}
.einnahmeplan-tile-list li{display:flex; justify-content:space-between; align-items:baseline; gap:.3rem .4rem; flex-wrap:wrap;}
.einnahmeplan-tile-menge{color:var(--ink-muted); font-variant-numeric:tabular-nums; white-space:nowrap; font-size:.76rem;}
/* Korrektur (16.09.2026, direkt im Anschluss): "der nutzer muss nicht
   verpflichtet sein, da eine menge zu hinterlegen" - fehlt die Menge, zeigt
   die Kachel stattdessen diesen kompakten Direktlink ins Bearbeiten-Popup,
   statt das NEM (wie zuvor faelschlich) ganz auszublenden. Bewusst kleiner
   als der normale .btn-sm, damit die Kachel trotzdem "nicht zu überladen"
   wirkt (Winkis eigene Vorgabe zur Kachel-Optik). */
.einnahmeplan-tile-list .einnahmeplan-menge-ergaenzen{padding:.1rem .5rem; font-size:.7rem; white-space:nowrap; flex-shrink:0;}
/* Nur für den PDF-Export mit aktivierten Zusatzinformationen sichtbar (siehe
   exportNemEinnahmeplanPdf() in app.js sowie die @media print-Regel unten) -
   auf dem Bildschirm bleibt die ausführliche Erklärung im Klick-Popup
   (openNemEinnahmeplanTileDetailModal), damit die Kachel selbst nicht
   überladen wirkt. */
.einnahmeplan-tile-detail-print{display:none;}
.einnahmeplan-print-toolbar{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:0 0 .8rem;
  font-size:.82rem; color:var(--ink-muted);
}
.einnahmeplan-print-toolbar label{display:flex; align-items:center; gap:.35rem; cursor:pointer;}



/* =====================================================================
   Grundelemente (26.09.2026, Neugestaltung Frontend-Huelle, Baustein 4)
   Steht bewusst am ENDE des App-CSS (vor der Landingpage), damit diese
   gemeinsamen Regeln die ueber die Jahre gewachsenen Einzelvarianten bei
   gleicher Spezifitaet per Reihenfolge ueberstimmen - ohne jede einzelne Regel
   weiter oben anfassen zu muessen. Nur Aussehen, keine Groessen/Abstaende der
   jeweiligen Felder (die sind je Ansicht bewusst unterschiedlich).
   ===================================================================== */
:root{ --radius-field:10px; --field-border:var(--border); }
/* Color-Kids: --border (#fbe4d8) ist als Feldrand auf hellem Grund kaum sichtbar. */
:root[data-design="color-kids"]{ --field-border:#e5b98c; }

/* 1) Eingabefelder: EINE Optik statt sieben (Papierflaeche, feiner Rand, 10px
      Radius). Ausnahme: das Suchfeld in Filterleisten bleibt pillenfoermig, weil
      es dort zwischen den (pillenfoermigen) Filter-Chips steht. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.field select,
.field textarea,
.friend-add-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.friend-plan-chat-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.shopping-scope-picker select,
.member-field,
.pantry-field,
.product-field,
.product-pantry-field,
.modal-row > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.modal-row > select,
.pantry-consume-amount,
.shopping-have-input,
.shopping-cat-select,
.admin-plan-until-input,
.ai-suggestion-place-row select,
.ingredient-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.link-search input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.nutrient-field-inputs input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.pantry-add-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.pantry-add-form select,
.member-add-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.member-add-form select,
.household-name-input,
.recipe-start-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.voice-capture-text textarea,
.admin-quote-textarea,
.recipecheck-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.invite-email-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.cook-confirm-portions-input,
.autofill-strategy-select{
  border-radius:var(--radius-field); border:1px solid var(--field-border);
  background:var(--surface); color:var(--ink);
}

/* 2) Sichtbarer Tastaturfokus - vorher hatte genau ein Feld einen. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.friend-add-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.friend-plan-chat-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.shopping-scope-picker select:focus-visible,
.member-field:focus-visible,
.pantry-field:focus-visible,
.product-field:focus-visible,
.product-pantry-field:focus-visible,
.modal-row > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.modal-row > select:focus-visible,
.pantry-consume-amount:focus-visible,
.shopping-have-input:focus-visible,
.shopping-cat-select:focus-visible,
.admin-plan-until-input:focus-visible,
.ai-suggestion-place-row select:focus-visible,
.ingredient-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.link-search input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.nutrient-field-inputs input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.pantry-add-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.pantry-add-form select:focus-visible,
.member-add-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.member-add-form select:focus-visible,
.household-name-input:focus-visible,
.recipe-start-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.voice-capture-text textarea:focus-visible,
.admin-quote-textarea:focus-visible,
.recipecheck-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.invite-email-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.cook-confirm-portions-input:focus-visible,
.autofill-strategy-select:focus-visible,
.search-input:focus-visible{
  outline:2px solid var(--accent-strong); outline-offset:1px; border-color:var(--accent-strong);
}
.chip:focus-visible,
.admin-chip:focus-visible,
.link-btn:focus-visible,
.icon-btn:focus-visible,
.chip-reset:focus-visible,
.layout-btn:focus-visible,
.scope-btn:focus-visible,
.segmented button:focus-visible,
.register-mode-btn:focus-visible,
.theme-swatch:focus-visible,
.rb-toptab:focus-visible,
.rb-sidetab:focus-visible,
.pantry-quick-btn:focus-visible,
.plan-week-nav-btn:focus-visible,
.category-chevron:focus-visible,
.plan-cell-add-btn:focus-visible,
.plan-cell-note-btn:focus-visible,
.cure-grid-add-btn:focus-visible,
.rating-thumb-btn:focus-visible,
.friend-plan-alert-btn:focus-visible,
.tile-fav:focus-visible,
.tile-visibility-toggle:focus-visible,
.plan-chip-remove:focus-visible,
.plan-chip-duplicate:focus-visible,
.plan-chip-pin:focus-visible,
.user-menu-item:focus-visible,
.checkbox-field input:focus-visible,
.autofill-filter-toggle input:focus-visible{
  outline:2px solid var(--accent-strong); outline-offset:2px;
}

/* 3) Buttons: einheitliche Mindesthoehe, sichtbarer Hover bei "ghost" (vorher
      --surface, in Salat-Fresh praktisch unsichtbar), Chips mit Hover. */
.btn{min-height:2.375rem;}
.btn.btn-sm{min-height:2rem;}
.btn-ghost:hover{background:var(--surface-hover); border-color:var(--accent-strong);}
.chip:not(.active):hover, .admin-chip:not(.active):hover{background:var(--surface-hover); color:var(--ink);}

/* 4) Beschriftungen in normaler Schreibweise statt Versalien (Uebergabe:
      "Sentence case ueberall, keine Versal-Eyebrows"). Mindestgroesse .75rem,
      damit die bisher sehr kleinen Versal-Labels lesbar bleiben. */
.admin-detail-label,
.drawer-cat,
.stat .lbl,
.filter-dropdown-heading,
.macro-tile .lbl,
.ai-chat-suggestions-panel-title,
.ai-suggestion-meta,
.nutrition-breakdown th,
.nutrient-field label,
.heute-slot-label,
.moon-calendar-weekday,
.shopping-covered-title,
.shopping-final-cat-title,
.member-add-form .field label,
.cook-confirm-day-head,
.avatar-icon-section-label,
.member-field-label,
.recipecheck-progress,
.recipecheck-cat,
.recipecheck-field label,
.friend-plan-day-label,
.friend-plan-slot-label{
  text-transform:none; letter-spacing:0;
}
.macro-tile .lbl, .nutrition-breakdown th, .nutrient-field label, .member-add-form .field label,
.avatar-icon-section-label, .member-field-label, .ai-suggestion-meta, .stat .lbl{font-size:.75rem;}


/* ---------- Grundelemente, Teil 2 (26.09.2026) ---------- */
:root{
  --shadow-sm:0 1px 4px rgba(14,24,16,.16);
  --overlay:rgba(14,24,16,.48);
  --fav:#e8a317;
  --surface-soft:color-mix(in srgb, var(--ink) 6%, transparent);
  --icon-btn-xs:1.375rem;  /* Mini-Aktionen IN Plan-Kacheln */
  --icon-btn-sm:2rem;      /* Icon-Knoepfe, Fav/Sichtbarkeit auf Fotos, Chevrons */
  --icon-btn-md:2.375rem;  /* neben normalen Buttons (gleiche Hoehe wie .btn) */
}

/* A) Runde Icon-Knoepfe: drei Groessen statt acht (1.3-2.4rem). */
.icon-btn{
  width:var(--icon-btn-sm); height:var(--icon-btn-sm); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; padding:0; flex:none;
  transition:background-color .15s ease, color .15s ease;
}
.icon-btn:hover{background:var(--surface-hover);}
.category-chevron, .tile-fav, .tile-visibility-toggle, .friend-plan-alert-btn{
  width:var(--icon-btn-sm); height:var(--icon-btn-sm);
}
.plan-week-nav-btn, .pantry-quick-btn{width:var(--icon-btn-md); height:var(--icon-btn-md);}
@media (max-width: 640px){ .pantry-quick-btn{width:2.75rem; height:2.75rem;} }
.plan-chip-remove, .plan-chip-duplicate, .plan-chip-pin{width:var(--icon-btn-xs); height:var(--icon-btn-xs);}

/* B) Knoepfe auf Fotos/Kacheln: Themenflaeche statt festem Weiss - passt sich
      damit auch dem dunklen Sporty-Steel an. */
.tile-fav, .tile-visibility-toggle, .plan-chip-remove, .plan-chip-duplicate, .plan-chip-pin{
  background:color-mix(in srgb, var(--surface) 90%, transparent); color:var(--ink-muted);
  box-shadow:var(--shadow-sm);
}
.tile-fav:hover, .tile-visibility-toggle:hover, .plan-chip-remove:hover,
.plan-chip-duplicate:hover, .plan-chip-pin:hover{background:var(--surface);}
.tile-fav.active, .plan-chip-pin.active{color:var(--fav);}
.plan-chip-pin.active{background:var(--surface);}

/* C) Ein Umschalter-Muster (Segmented Control) fuer alle vier Varianten:
      .segmented (Formulare), Horizontal/Vertikal im Wochenplan, Einkaufs-Zeitraum,
      Registrieren-Modus. Rahmen, Innenabstand, Pillen-Knoepfe, aktiv = Akzent. */
.segmented, .plan-layout-toggle, .shopping-scope-toggle, .register-mode-toggle{
  border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface);
  padding:3px; gap:2px; overflow:visible;
}
.segmented, .plan-layout-toggle, .shopping-scope-toggle{display:inline-flex;}
.segmented button, .layout-btn, .scope-btn, .register-mode-btn{
  font:inherit; font-size:.8125rem; font-weight:700; line-height:1.2; padding:.4rem .95rem;
  border:none; border-radius:var(--radius-pill); background:none; color:var(--ink-muted); cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.segmented button:not(.active):hover, .layout-btn:not(.active):hover,
.scope-btn:not(.active):hover, .register-mode-btn:not(.active):hover{background:var(--surface-hover); color:var(--ink);}
.segmented button.active, .layout-btn.active, .scope-btn.active, .register-mode-btn.active{
  background:var(--accent); color:var(--accent-ink);
}

/* D) Hinweistexte etwas groesser (12px -> 12.8px) und mit ruhigerem Zeilenabstand. */
.hint{font-size:.8rem; line-height:1.45;}

/* E) Karten: ein Radius fuer Karten (--radius-card), einer fuer kleine Elemente
      (--radius-field); flache Inhaltskarten ohne Schatten, Schatten nur fuer
      Foto-Kacheln und schwebende Elemente. */
.member-card{box-shadow:none;}
.ai-suggestion-card{border-radius:var(--radius-card);}
.plan-chip{border-radius:var(--radius-field); box-shadow:var(--shadow-sm);}
.plan-moon-box{border-radius:var(--radius-field);}

/* F) Ein Abdunkelungston fuer alle Hintergruende hinter Popups/Drawern. */
.scrim, .modal-scrim{background:var(--overlay);}
@media (prefers-reduced-motion: reduce){
  .icon-btn, .segmented button, .layout-btn, .scope-btn, .register-mode-btn{transition:none;}
}

/* =====================================================================
   Oeffentliche Landingpage (Winki, 17.09.2026, dritte Fassung: Port der
   verbindlichen Referenzimplementierung aus "landingpage assets/dist/"
   (CLAUDE-INTEGRATION.md) - ersetzt die vorherigen "lp-"-praefixierten
   Fassungen 1:1 nach Inhalt/Abmessungen/Proportionen aus dist/styles.css.
   Jede Regel ist mechanisch mit ".landing-page " (Nachfahren-Selektor)
   praefixiert, damit nichts nach aussen in die eingeloggte App wirkt und
   nichts von aussen hineinwirkt (bestehende App-CSS nutzt keine
   ".landing-page"-Selektoren, kann also nie mit gleicher oder hoeherer
   Spezifitaet gewinnen). :root-Variablen wurden zu ".landing-page{--x:...}"
   custom properties, "body" (fuer die Basis-Typografie/-Farben) zu ".landing-page",
   "body.menu-open" bewusst zu "body.lp-menu-open" (bleibt eine echte Body-Klasse,
   da Scroll-Lock nur am echten <body> wirkt - umbenannt zur Kollisionsvermeidung
   und wird nur von der Landingpage selbst gesetzt/entfernt, nie dauerhaft).
   Schriften/Farben sind bewusst dist/styles.css' eigenes, eigenstaendiges
   Farbschema (Georgia/Inter statt Arvo/Karla), unabhaengig vom gewaehlten
   App-Theme der eingeloggten Person - siehe CLAUDE-INTEGRATION.md "verbind-
   liche visuelle und inhaltliche Vorlage, nicht neu interpretieren". ===== */

.landing-page {
  --ink: #10233f;
  --ink-soft: #526176;
  --green: #087047;
  --green-dark: #075a3b;
  --mint: #edf7ed;
  --mint-soft: #f4faf3;
  --paper: #fbfcf7;
  --white: #ffffff;
  --line: #cbdcca;
  --orange: #d98956;
  --shadow: 0 18px 42px rgba(16, 35, 63, 0.12);
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container: 1200px;

}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;

}
.landing-page {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;

}
body.lp-menu-open {
  overflow: hidden;

}
.landing-page img {
  display: block;
  max-width: 100%;
  /* Bugfix (Winki, 17.09.2026, dritte Fassung): viele Bilder tragen HTML-width/
     height-Attribute (zur Vermeidung von Layout-Shifts vor dem Laden), waehrend
     nur width per CSS eingeschraenkt wird (z.B. .footer-logo, .hero-leaves,
     .faq-leaves). Ohne dieses height:auto rendert der Browser dann die rohe
     HTML-height (z.B. 1024px statt proportional ~95px) - per Playwright bei
     .footer-logo entdeckt (H:1024px statt korrekt skaliert). */
  height: auto;

}
.landing-page a {
  color: inherit;
  text-decoration: none;

}
.landing-page button, .landing-page a {
  -webkit-tap-highlight-color: transparent;

}
.landing-page :focus-visible {
  outline: 3px solid #e6a169;
  outline-offset: 4px;

}
.landing-page h1, .landing-page h2, .landing-page h3, .landing-page p {
  margin-top: 0;

}
.landing-page h1, .landing-page h2, .landing-page h3 {
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0;

}
.landing-page h2 {
  margin-bottom: 20px;
  font-size: 44px;
  line-height: 1.14;

}
.landing-page h3 {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.3;

}
.landing-page p {
  color: var(--ink-soft);

}
.landing-page .container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;

}
.landing-page .section-paper {
  background-color: var(--paper);
  background-image: url("/img/landing/backgrounds/page-paper-texture.webp");
  background-size: 720px auto;

}
.landing-page .section-mint {
  background: var(--mint);

}
.landing-page .section-light {
  background: var(--paper);

}
.landing-page .centered {
  text-align: center;

}
.landing-page .section-title {
  margin-bottom: 46px;

}
.landing-page .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;

}
.landing-page .skip-link {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: 4px;
  transform: translateY(-150%);

}
.landing-page .skip-link:focus {
  transform: translateY(0);

}
/* Header-Hoehe/Logobreite (21.09.2026, Kompromiss auf Winkis Entscheidung "Mittelweg"
   hin korrigiert): beim 1:1-Portieren der v2-Referenz (siehe
   landingpage-schmatzispatzi-v2-implementierung-17092026.md) wurden Header-Hoehe
   (78px) und Logobreite (146px) unabhaengig voneinander aus dist/styles.css
   uebernommen, ohne zu pruefen, ob beide zur tatsaechlichen Logo-Bilddatei
   (Seitenverhaeltnis 1,5, d.h. 146px breit = 97,3px hoch) zusammenpassen - das Logo
   war dadurch hoeher als der Header selbst und ist vermutlich oben/unten
   ueber ihn hinausgeragt. Neue, in sich konsistente Werte (Header etwas hoeher,
   Logo etwas schmaler als vorher, beide exakt aufeinander abgestimmt: 120px breit
   -> 80px hoch, macht bei 96px Header genau 8px Rand oben/unten). */
.landing-page .site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  height: 96px;
  background: rgba(251, 252, 247, 0.96);
  border-bottom: 1px solid rgba(8, 112, 71, 0.14);
  backdrop-filter: blur(12px);

}
.landing-page .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;

}
.landing-page .brand-link {
  flex: 0 0 auto;
  width: 120px;

}
.landing-page .brand-link img {
  width: 100%;
  height: auto;

}
.landing-page .main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 14px;
  font-weight: 650;

}
.landing-page .main-nav > a:not(.button) {
  position: relative;

}
.landing-page .main-nav > a:not(.button)::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  background: var(--green);
  content: "";
  transform: scaleX(0);
  transition: transform 180ms ease;

}
.landing-page .main-nav > a:not(.button):hover::after {
  transform: scaleX(1);

}
.landing-page .login-link {
  margin-left: 30px;

}
.landing-page .menu-toggle {
  display: none;

}
.landing-page .button > span {
  margin-left: 8px;

}
.landing-page .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 25px;
  color: var(--white);
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;

}
.landing-page .button:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-2px);

}
.landing-page .button-small {
  min-height: 44px;
  padding: 10px 21px;
  font-size: 13px;

}
.landing-page .button-secondary {
  color: var(--green);
  background: transparent;

}
.landing-page .button-secondary:hover {
  color: var(--white);
  background: var(--green);

}
.landing-page .button-light {
  color: var(--green-dark);
  background: var(--white);
  border-color: var(--white);

}
.landing-page .button-light:hover {
  color: var(--green-dark);
  background: #f3f8ef;
  border-color: #f3f8ef;

}
.landing-page .hero {
  overflow: hidden;

}
.landing-page .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(570px, 1.12fr);
  align-items: center;
  gap: 40px;
  min-height: 670px;
  padding-top: 46px;
  padding-bottom: 58px;

}
.landing-page .hero-copy {
  position: relative;
  z-index: 3;
  padding-bottom: 4px;

}
.landing-page .hero h1 {
  max-width: 540px;
  margin-bottom: 18px;
  font-size: 64px;
  line-height: 1.04;

}
.landing-page .hero-lead {
  max-width: 520px;
  margin-bottom: 28px;
  font-size: 18px;
  line-height: 1.6;

}
.landing-page .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;

}
.landing-page .hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 0;
  margin: 0;
  list-style: none;

}
.landing-page .hero-benefits li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 650;

}
.landing-page .hero-benefits img {
  width: 22px;
  height: 22px;
  padding: 4px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(16, 35, 63, 0.08);

}
.landing-page .hero-visual {
  position: relative;
  width: 100%;
  height: 535px;

}
.landing-page .hero-leaves {
  position: absolute;
  z-index: 0;
  top: 50px;
  right: -92px;
  width: 290px;

}
.landing-page .laptop-frame {
  position: absolute;
  z-index: 2;
  top: 100px;
  left: 0;
  width: 565px;
  padding: 13px 13px 17px;
  background: var(--ink);
  border-radius: 15px 15px 9px 9px;
  box-shadow: 0 24px 38px rgba(16, 35, 63, 0.22);

}
.landing-page .laptop-frame > img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  background: var(--white);

}
.landing-page .laptop-camera {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #647086;
  border-radius: 50%;
  transform: translateX(-50%);

}
.landing-page .laptop-base {
  position: absolute;
  right: -20px;
  bottom: -14px;
  left: -20px;
  height: 15px;
  background: #31415a;
  border-radius: 2px 2px 12px 12px;

}
.landing-page .laptop-base::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 66px;
  height: 5px;
  background: #738096;
  border-radius: 0 0 5px 5px;
  content: "";
  transform: translateX(-50%);

}
.landing-page .phone-frame {
  position: absolute;
  z-index: 4;
  top: 198px;
  right: 0;
  width: 176px;
  padding: 24px 9px 10px;
  background: var(--ink);
  border-radius: 25px;
  box-shadow: 0 24px 36px rgba(16, 35, 63, 0.25);

}
.landing-page .phone-speaker {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 34px;
  height: 4px;
  background: #758197;
  border-radius: 4px;
  transform: translateX(-50%);

}
.landing-page .phone-content {
  min-height: 266px;
  padding: 14px 13px;
  background: var(--white);
  border-radius: 14px;

}
.landing-page .phone-content h2 {
  margin-bottom: 8px;
  font-size: 16px;

}
.landing-page .phone-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
  font-size: 10px;

}
.landing-page .phone-tabs span {
  padding: 3px 8px;
  background: var(--mint);
  border-radius: 999px;

}
.landing-page .phone-tabs span:first-child {
  color: var(--white);
  background: var(--green);

}
.landing-page .phone-content ul {
  padding: 0;
  margin: 0;
  list-style: none;

}
.landing-page .phone-content li {
  padding: 7px 0 7px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;

}
.landing-page .phone-content li::before {
  position: absolute;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  margin-left: -13px;
  background: var(--orange);
  border-radius: 50%;
  content: "";

}
.landing-page .annotation {
  position: absolute;
  z-index: 5;
  object-fit: contain;
  pointer-events: none;

}
.landing-page .annotation-hero-top {
  top: 4px;
  right: 8px;
  width: 148px;
  height: 54px;

}
.landing-page .annotation-hero-bottom {
  bottom: 0;
  left: 282px;
  width: 170px;
  height: 48px;

}
.landing-page .problem {
  padding: 84px 0 94px;

}
.landing-page .problem-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;

}
.landing-page .feature-card {
  min-width: 0;
  padding: 28px 26px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 2px 5px rgba(16, 35, 63, 0.025);

}
.landing-page .feature-card > img {
  width: 30px;
  height: 30px;
  margin-bottom: 20px;

}
.landing-page .feature-card h3, .landing-page .feature-card p {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;

}
.landing-page .feature-card p {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.55;

}
.landing-page .flow-section {
  padding: 78px 0 94px;

}
.landing-page .flow-section .section-title {
  margin-bottom: 18px;

}
.landing-page .flow-note {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  padding-right: 30px;
  margin-bottom: 4px;

}
.landing-page .flow-note img {
  width: 160px;
  height: 48px;
  object-fit: contain;

}
.landing-page .flow-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 30px 18px 26px;
  margin: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 7px;

}
.landing-page .flow-grid li {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  flex-direction: column;
  text-align: center;

}
.landing-page .flow-grid li:not(:last-child)::after {
  position: absolute;
  top: 17px;
  right: -8px;
  color: #52a47c;
  content: "→";
  font-size: 24px;
  font-weight: 400;

}
.landing-page .flow-grid span {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  place-items: center;
  background: var(--mint);
  border-radius: 50%;

}
.landing-page .flow-grid img {
  width: 24px;
  height: 24px;

}
.landing-page .flow-grid strong {
  margin-bottom: 4px;
  font-size: 14px;

}
.landing-page .flow-grid small {
  color: #728093;
  font-size: 12px;
  line-height: 1.4;

}
.landing-page .split-section {
  padding: 96px 0;

}
.landing-page .split-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 72px;

}
.landing-page .section-copy {
  min-width: 0;

}
.landing-page .section-copy > p, .landing-page .media-copy > p, .landing-page .social-copy > p {
  max-width: 520px;
  margin-bottom: 28px;
  font-size: 17px;

}
.landing-page .check-list {
  display: grid;
  gap: 11px;
  padding: 0;
  margin: 0;
  list-style: none;

}
.landing-page .check-list li {
  position: relative;
  padding-left: 29px;
  font-size: 15px;
  font-weight: 620;

}
.landing-page .check-list li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #26945e;
  content: "✓";
  font-size: 20px;

}
.landing-page .screenshot-frame {
  overflow: hidden;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);

}
.landing-page .screenshot-frame img {
  width: 100%;
  height: auto;

}
.landing-page .landscape-shot {
  max-width: 650px;
  justify-self: end;

}
.landing-page .personalization-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
  align-items: center;

}
.landing-page .portrait-shot {
  width: min(100%, 520px);
  max-height: 690px;
  justify-self: end;

}
.landing-page .portrait-shot img {
  max-height: 668px;
  object-fit: cover;
  object-position: top center;

}
.landing-page .persona-list {
  display: grid;
  gap: 16px;
  max-width: 500px;

}
.landing-page .persona-list article {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 14px;

}
.landing-page .persona-list img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;

}
.landing-page .persona-list h3 {
  margin-bottom: 2px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 750;

}
.landing-page .persona-list p {
  margin-bottom: 0;
  font-size: 14px;

}
.landing-page .inline-annotation {
  display: flex;
  width: 100%;
  margin-top: 20px;

}
.landing-page .inline-annotation img {
  width: 185px;
  height: 58px;
  object-fit: contain;

}
.landing-page .personas-copy .inline-annotation {
  justify-content: flex-end;
  padding-right: 26px;

}
.landing-page .ai-grid {
  grid-template-columns: minmax(0, 0.75fr) minmax(580px, 1.25fr);

}
.landing-page .chat-demo {
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(16, 35, 63, 0.07);

}
.landing-page .user-message {
  max-width: 82%;
  padding: 15px 18px;
  margin: 0 0 16px auto;
  background: var(--mint);
  border-radius: 12px 12px 3px 12px;
  font-size: 14px;

}
.landing-page .assistant-message {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;

}
.landing-page .assistant-message > strong {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;

}
.landing-page .recipe-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;

}
.landing-page .recipe-row article {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;

}
.landing-page .recipe-row img {
  width: 100%;
  aspect-ratio: 4 / 2.75;
  object-fit: cover;

}
.landing-page .recipe-row h3 {
  padding: 10px 10px 0;
  margin-bottom: 2px;
  font-family: var(--font-body);
  font-size: 12px;

}
.landing-page .recipe-row p {
  padding: 0 10px 10px;
  margin-bottom: 0;
  font-size: 11px;

}
.landing-page .shopping-section {
  padding-top: 84px;
  padding-bottom: 84px;

}
.landing-page .shopping-grid {
  grid-template-columns: minmax(0, 0.78fr) minmax(620px, 1.22fr);

}
.landing-page .shopping-lists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;

}
.landing-page .shopping-lists article {
  min-height: 260px;
  padding: 24px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 7px;

}
.landing-page .shopping-lists h3 {
  font-family: var(--font-body);
  font-size: 15px;

}
.landing-page .shopping-lists ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 14px;

}
.landing-page .shopping-lists .shopping-active {
  color: var(--white);
  background: var(--green);
  border-color: var(--green);

}
.landing-page .shopping-active h3 {
  color: var(--white);

}
.landing-page .shopping-active li {
  position: relative;
  padding-left: 24px;

}
.landing-page .shopping-active li::before {
  position: absolute;
  top: 5px;
  left: 0;
  width: 13px;
  height: 13px;
  background: var(--white);
  border-radius: 4px;
  content: "";

}
.landing-page .pantry-section {
  padding: 98px 0 104px;

}
.landing-page .pantry-grid {
  display: grid;
  grid-template-columns: minmax(380px, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 74px;

}
.landing-page .pantry-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;

}
.landing-page .pantry-note {
  align-self: flex-start;
  height: 68px;
  padding-left: 6px;
  margin: 0;

}
.landing-page .pantry-note img {
  width: 160px;
  height: 62px;

}
.landing-page .grocery-image {
  width: min(100%, 455px);
  margin-top: 6px;

}
.landing-page .pantry-content > p {
  max-width: 600px;
  margin-bottom: 26px;
  font-size: 17px;

}
.landing-page .waste-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;

}
.landing-page .waste-benefits article {
  min-width: 0;
  padding: 20px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 7px;

}
.landing-page .waste-benefits img {
  width: 26px;
  height: 26px;
  margin-bottom: 14px;

}
.landing-page .waste-benefits h3 {
  font-size: 16px;

}
.landing-page .waste-benefits p {
  margin-bottom: 0;
  font-size: 13px;

}
.landing-page .dashboard-shot {
  width: 100%;

}
.landing-page .recipes-section, .landing-page .social-section {
  padding: 96px 0;

}
.landing-page .media-grid, .landing-page .social-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(410px, 0.95fr);
  align-items: center;
  gap: 72px;

}
.landing-page .food-visual, .landing-page .social-visual {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;

}
.landing-page .food-visual .inline-annotation, .landing-page .social-visual .inline-annotation {
  height: 58px;
  justify-content: flex-end;
  margin: 0 0 10px;
  padding-right: 24px;

}
.landing-page .food-visual > img {
  width: min(100%, 440px);

}
.landing-page .social-grid {
  grid-template-columns: minmax(390px, 0.82fr) minmax(0, 1.18fr);

}
.landing-page .social-visual .inline-annotation {
  justify-content: flex-start;
  padding-left: 8px;

}
.landing-page .social-visual > img {
  width: min(100%, 430px);

}
.landing-page .three-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;

}
.landing-page .three-card-grid .feature-card {
  min-height: 220px;
  padding: 22px 20px;

}
.landing-page .three-card-grid .feature-card h3 {
  font-size: 17px;

}
.landing-page .all-features {
  padding: 88px 0 96px;

}
.landing-page .six-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 940px;
  margin-inline: auto;

}
.landing-page .six-card-grid .feature-card {
  min-height: 160px;
  text-align: center;

}
.landing-page .six-card-grid .feature-card img {
  margin-right: auto;
  margin-left: auto;

}
.landing-page .six-card-grid .feature-card h3 {
  font-size: 17px;

}
.landing-page .faq-section {
  position: relative;
  overflow: hidden;
  padding: 90px 0 104px;

}
.landing-page .faq-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 72px;
  max-width: 980px;

}
.landing-page .faq-intro h2 {
  margin-bottom: 12px;

}
.landing-page .faq-list {
  display: grid;
  gap: 12px;

}
.landing-page .faq-item {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;

}
.landing-page .faq-item button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 14px 20px;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;

}
.landing-page .faq-item button span:last-child {
  color: var(--green);
  font-size: 23px;
  font-weight: 400;

}
.landing-page .faq-answer {
  padding: 0 20px 16px;

}
.landing-page .faq-answer p {
  margin-bottom: 0;
  font-size: 14px;

}
.landing-page .faq-leaves {
  position: absolute;
  right: -24px;
  bottom: -16px;
  width: 190px;
  opacity: 0.9;

}
.landing-page .site-footer {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background-color: #07583a;
  background-image: url("/img/landing/backgrounds/footer-background.webp");
  background-position: center;
  background-size: cover;

}
.landing-page .footer-cta {
  position: relative;
  display: grid;
  min-height: 330px;
  place-items: center;
  padding-top: 56px;
  padding-bottom: 44px;

}
.landing-page .footer-center {
  position: relative;
  z-index: 2;
  text-align: center;

}
.landing-page .footer-center h2, .landing-page .footer-center p {
  color: var(--white);

}
.landing-page .footer-center h2 {
  margin-bottom: 10px;
  font-size: 44px;

}
.landing-page .footer-center p {
  margin-bottom: 24px;

}
.landing-page .footer-note {
  position: absolute;
  top: 44px;
  left: 52px;
  width: 165px;
  height: 64px;

}
.landing-page .footer-note img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.82;

}
.landing-page .footer-logo {
  position: absolute;
  right: 34px;
  bottom: 30px;
  width: 142px;

}
.landing-page .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 12px;

}
.landing-page .footer-bottom nav {
  display: flex;
  gap: 24px;

}
.landing-page .footer-bottom a:hover {
  text-decoration: underline;

}
@media (max-width: 1180px) {
.landing-page .hero-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(520px, 1.15fr);
  
}
.landing-page .laptop-frame {
    width: 520px;
  
}
.landing-page .phone-frame {
    right: -5px;
    width: 166px;
  
}
.landing-page .annotation-hero-top, .landing-page .annotation-hero-bottom {
    display: none;
  
}
.landing-page .main-nav {
    gap: 24px;
  
}
.landing-page .login-link {
    margin-left: 12px;
  
}
}
@media (max-width: 1040px) {
.landing-page h2 {
    font-size: 38px;
  
}
.landing-page .hero-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(450px, 1.18fr);
    min-height: 610px;
  
}
.landing-page .hero h1 {
    font-size: 56px;
  
}
.landing-page .hero-visual {
    height: 475px;
  
}
.landing-page .laptop-frame {
    top: 78px;
    width: 450px;
  
}
.landing-page .phone-frame {
    top: 160px;
    width: 150px;
  
}
.landing-page .phone-content {
    min-height: 230px;
  
}
.landing-page .split-grid, .landing-page .media-grid, .landing-page .social-grid, .landing-page .pantry-grid {
    gap: 46px;
  
}
.landing-page .shopping-grid, .landing-page .ai-grid, .landing-page .personalization-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  
}
.landing-page .three-card-grid {
    gap: 10px;
  
}
.landing-page .three-card-grid .feature-card {
    padding: 20px 15px;
  
}
}
@media (max-width: 900px) {
.landing-page .site-header {
    height: 84px;
  
}
.landing-page .brand-link {
    width: 102px;
  
}
.landing-page .menu-toggle {
    position: relative;
    z-index: 102;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 10px;
    place-content: center;
    gap: 5px;
    background: transparent;
    border: 0;
    cursor: pointer;
  
}
.landing-page .menu-toggle > span:not(.sr-only) {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ink);
    transition: transform 180ms ease, opacity 180ms ease;
  
}
.landing-page .menu-toggle[aria-expanded="true"] > span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  
}
.landing-page .menu-toggle[aria-expanded="true"] > span:nth-child(2) {
    opacity: 0;
  
}
.landing-page .menu-toggle[aria-expanded="true"] > span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  
}
.landing-page .main-nav {
    position: fixed;
    z-index: 101;
    top: 70px;
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
    padding: 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 28px rgba(16, 35, 63, 0.12);
  
}
.landing-page .main-nav.is-open {
    display: flex;
  
}
.landing-page .main-nav a:not(.button) {
    padding: 12px 4px;
  
}
.landing-page .login-link {
    margin-left: 0;
  
}
.landing-page .main-nav .button {
    margin-top: 8px;
  
}
.landing-page .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 68px;
    padding-bottom: 68px;
  
}
.landing-page .hero-copy {
    max-width: 650px;
  
}
.landing-page .hero-visual {
    width: min(100%, 690px);
    height: 510px;
    margin-inline: auto;
  
}
.landing-page .laptop-frame {
    top: 60px;
    width: calc(100% - 74px);
    max-width: 570px;
  
}
.landing-page .phone-frame {
    top: 164px;
    right: 6px;
    width: 168px;
  
}
.landing-page .problem-grid, .landing-page .six-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  
}
.landing-page .flow-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 12px;
  
}
.landing-page .flow-grid li:nth-child(3)::after, .landing-page .flow-grid li:last-child::after {
    display: none;
  
}
.landing-page .split-grid, .landing-page .shopping-grid, .landing-page .ai-grid, .landing-page .personalization-grid, .landing-page .media-grid, .landing-page .social-grid, .landing-page .pantry-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  
}
.landing-page .landscape-shot, .landing-page .portrait-shot {
    width: min(100%, 680px);
    justify-self: center;
  
}
.landing-page .portrait-shot {
    max-height: 600px;
  
}
.landing-page .portrait-shot img {
    max-height: 578px;
  
}
.landing-page .ai-grid .section-copy, .landing-page .shopping-grid .section-copy {
    max-width: 620px;
  
}
.landing-page .pantry-visual {
    order: 2;
  
}
.landing-page .pantry-content {
    order: 1;
  
}
.landing-page .grocery-image {
    width: min(100%, 500px);
  
}
.landing-page .media-copy, .landing-page .social-copy {
    order: 1;
  
}
.landing-page .food-visual, .landing-page .social-visual {
    order: 2;
  
}
.landing-page .faq-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  
}
.landing-page .footer-cta {
    min-height: 370px;
    padding-top: 110px;
  
}
.landing-page .footer-note {
    top: 25px;
    left: 20px;
  
}
}
@media (max-width: 640px) {
.landing-page .container {
    width: min(calc(100% - 32px), var(--container));
  
}
.landing-page h2 {
    font-size: 34px;
  
}
.landing-page .hero-grid {
    gap: 30px;
    padding-top: 48px;
    padding-bottom: 56px;
  
}
.landing-page .hero h1 {
    font-size: 45px;
  
}
.landing-page .hero-lead {
    font-size: 16px;
  
}
.landing-page .hero-actions {
    align-items: stretch;
    flex-direction: column;
  
}
.landing-page .hero-actions .button {
    width: 100%;
  
}
.landing-page .hero-benefits {
    align-items: flex-start;
    flex-direction: column;
  
}
.landing-page .hero-visual {
    height: 350px;
  
}
.landing-page .hero-leaves {
    top: 24px;
    right: -75px;
    width: 210px;
  
}
.landing-page .laptop-frame {
    top: 45px;
    left: 0;
    width: calc(100% - 40px);
    padding: 8px 8px 11px;
    border-radius: 10px 10px 6px 6px;
  
}
.landing-page .phone-frame {
    top: 111px;
    right: 0;
    width: 116px;
    padding: 17px 6px 7px;
    border-radius: 18px;
  
}
.landing-page .phone-speaker {
    top: 7px;
    width: 25px;
  
}
.landing-page .phone-content {
    min-height: 184px;
    padding: 9px 8px;
    border-radius: 10px;
  
}
.landing-page .phone-content h2 {
    font-size: 12px;
  
}
.landing-page .phone-tabs, .landing-page .phone-content li {
    font-size: 7px;
  
}
.landing-page .phone-content li {
    padding-top: 5px;
    padding-bottom: 5px;
  
}
.landing-page .problem, .landing-page .flow-section, .landing-page .split-section, .landing-page .shopping-section, .landing-page .pantry-section, .landing-page .recipes-section, .landing-page .social-section, .landing-page .all-features, .landing-page .faq-section {
    padding-top: 68px;
    padding-bottom: 72px;
  
}
.landing-page .section-title {
    margin-bottom: 30px;
  
}
.landing-page .problem-grid, .landing-page .six-card-grid, .landing-page .shopping-lists, .landing-page .waste-benefits, .landing-page .three-card-grid {
    grid-template-columns: 1fr;
  
}
.landing-page .feature-card, .landing-page .six-card-grid .feature-card, .landing-page .three-card-grid .feature-card {
    min-height: 0;
  
}
.landing-page .flow-note {
    height: 42px;
    padding-right: 0;
  
}
.landing-page .flow-note img {
    width: 145px;
    height: 40px;
  
}
.landing-page .flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 8px;
    padding: 28px 12px;
  
}
.landing-page .flow-grid li:nth-child(2)::after, .landing-page .flow-grid li:nth-child(4)::after {
    display: none;
  
}
.landing-page .flow-grid li:nth-child(3)::after {
    display: block;
  
}
.landing-page .section-copy > p, .landing-page .media-copy > p, .landing-page .social-copy > p, .landing-page .pantry-content > p {
    font-size: 16px;
  
}
.landing-page .chat-demo {
    padding: 16px;
  
}
.landing-page .user-message {
    max-width: 94%;
  
}
.landing-page .recipe-row {
    grid-template-columns: 1fr;
  
}
.landing-page .recipe-row article {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto;
  
}
.landing-page .recipe-row img {
    grid-row: 1 / 3;
    height: 100%;
  
}
.landing-page .shopping-lists article {
    min-height: 0;
  
}
.landing-page .pantry-note {
    height: 54px;
  
}
.landing-page .pantry-note img {
    width: 145px;
    height: 50px;
  
}
.landing-page .inline-annotation img {
    width: 160px;
    height: 52px;
  
}
.landing-page .faq-leaves {
    width: 120px;
  
}
.landing-page .footer-cta {
    min-height: 390px;
    padding-top: 100px;
    padding-bottom: 90px;
  
}
.landing-page .footer-center h2 {
    font-size: 36px;
  
}
.landing-page .footer-note {
    top: 28px;
    left: 8px;
    width: 145px;
  
}
.landing-page .footer-logo {
    right: 50%;
    bottom: 22px;
    width: 122px;
    transform: translateX(50%);
  
}
.landing-page .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    padding-bottom: 20px;
  
}
.landing-page .footer-bottom nav {
    flex-wrap: wrap;
    gap: 10px 20px;
  
}
}
@media (max-width: 360px) {
.landing-page .hero h1 {
    font-size: 40px;
  
}
}
@media (prefers-reduced-motion: reduce) {
html {
    scroll-behavior: auto;
}
.landing-page *,
.landing-page *::before,
.landing-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
}
}
.landing-page .hero h1 span {
  display: inline-block;
  white-space: nowrap;

}


/* ---------- Lieblingsrestaurants (26.09.2026) ---------- */
.restaurant-tile{cursor:pointer;}
.restaurant-tile .tile-photo{color:var(--cat-restaurant); background:var(--cat-restaurant-soft);}
.restaurant-tile .tile-photo svg{width:44%; height:44%;}
.restaurant-tile-address span{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.restaurant-detail-head{display:flex; gap:1rem; align-items:flex-start; margin-bottom:.4rem;}
.restaurant-detail-photo{flex:0 0 96px; width:96px; height:96px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--cat-restaurant-soft); color:var(--cat-restaurant);}
.restaurant-detail-photo img{width:100%; height:100%; object-fit:cover;}
.restaurant-detail-photo svg{width:55%; height:55%;}
.restaurant-detail-links{display:flex; flex-wrap:wrap; gap:.4rem;}
.restaurant-detail-links .btn{text-decoration:none;}
.restaurant-drawer-photo{height:160px; border-radius:10px; overflow:hidden; margin-bottom:.8rem; display:flex; align-items:center; justify-content:center; background:var(--cat-restaurant-soft); color:var(--cat-restaurant);}
.restaurant-drawer-photo img{width:100%; height:100%; object-fit:cover;}
.restaurant-drawer-photo svg{width:64px; height:64px;}
.plan-chip-restaurant .plan-chip-photo{color:var(--cat-restaurant);}
.plan-chip-kind{display:block; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cat-restaurant);}
@media (max-width:520px){
  .restaurant-detail-head{flex-direction:column;}
}
.friend-plan-restaurant-photo{display:flex; align-items:center; justify-content:center; background:var(--cat-restaurant-soft); color:var(--cat-restaurant);}
.friend-plan-restaurant-photo svg{width:55%; height:55%;}

/* Öffnungszeiten-Editor (26.09.2026: "öffnungszeiten brauchen Tage und von --- bis") */
.oh-editor{display:flex; flex-direction:column; gap:.35rem; border:1px solid var(--border); border-radius:10px; padding:.6rem .7rem; text-transform:none; letter-spacing:0; font-weight:400;}
.oh-row{display:grid; grid-template-columns:8.5rem 1fr auto; align-items:start; gap:.3rem .6rem; padding:.2rem 0; border-bottom:1px dashed var(--border);}
.oh-row:last-of-type{border-bottom:none;}
.oh-day{display:flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; padding-top:.35rem;}
.oh-ranges{display:flex; flex-direction:column; gap:.3rem;}
.oh-range{display:flex; align-items:center; gap:.35rem;}
.oh-range input[type="time"]{width:auto; min-width:6.2rem; padding:.3rem .4rem;}
.oh-closed-label{display:none; margin:0; padding-top:.35rem;}
.oh-row.oh-closed .oh-closed-label{display:block;}
.oh-row.oh-closed .oh-ranges{display:none;}
.oh-add{white-space:nowrap; padding-top:.35rem;}
.oh-copy{align-self:flex-start; margin-top:.2rem;}
.oh-summary{display:grid; grid-template-columns:auto 1fr; gap:.15rem .8rem; margin:.3rem 0 .6rem; font-size:.9rem;}
.oh-summary dt{font-weight:700;}
.oh-summary dd{margin:0;}
.plan-chip-closed{display:block; font-size:.7rem; font-weight:700; color:var(--danger);}
@media (max-width:520px){
  .oh-row{grid-template-columns:1fr auto;}
  .oh-ranges, .oh-closed-label{grid-column:1 / -1;}
  .oh-add{grid-row:1; grid-column:2;}
}
.oh-editor .oh-day{font-size:.85rem; color:var(--ink); justify-content:flex-start;}
.oh-editor .oh-day input[type="checkbox"]{width:auto; flex:0 0 auto; margin:0;}
.oh-paste{margin-bottom:.3rem;}
.oh-paste-input{width:100%; resize:vertical; font-size:.85rem;}
.oh-paste-hint{margin:.2rem 0 0;}
.oh-paste-hint:empty{display:none;}

/* Eingebettete Google-Maps-Karte (26.09.2026) - erst nach Klick geladen. */
.restaurant-map{margin:.8rem 0; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--surface-hover);}
.restaurant-map iframe{display:block; width:100%; height:300px; border:0;}
.restaurant-map-load{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; width:100%; min-height:120px; padding:1rem; border:0; background:transparent; cursor:pointer; text-align:center; font:inherit; color:var(--ink);}
.restaurant-map-load:hover{background:var(--cat-restaurant-soft);}
.restaurant-map-load-title{font-weight:700;}
.restaurant-map-load .hint{margin:0; max-width:34rem;}
/* Neu eingeplante Kachel kurz hervorheben (showPlanEntryInWeek). */
@keyframes plan-chip-pulse{0%,100%{box-shadow:0 0 0 0 transparent;} 50%{box-shadow:0 0 0 4px var(--cat-restaurant);}}
.plan-chip-highlight{animation:plan-chip-pulse .9s ease-in-out 3;}
@media (prefers-reduced-motion: reduce){.plan-chip-highlight{animation:none; box-shadow:0 0 0 3px var(--cat-restaurant);}}

/* ===== FAQ (26.09.2026) =====
   Ein Inhaltsblock (#faqPage) fuer zwei Kontexte: in der App (Wiki-Unterseite, folgt
   dem gewaehlten Design ueber die App-Variablen) und unter "/faq" ohne Login im
   Rahmen der Landingpage (deren eigene Farb-Variablen, siehe .landing-page oben). */
.faq-page{
  --faq-ink:var(--ink); --faq-muted:var(--ink-muted); --faq-card:var(--surface);
  --faq-line:var(--border); --faq-accent:var(--accent-strong); --faq-chip:var(--surface-hover);
  --faq-tag-bg:var(--warn-soft); --faq-tag-ink:var(--warn);
  color:var(--faq-ink); max-width:820px;
}
.landing-page .faq-page{
  --faq-muted:var(--ink-soft); --faq-card:var(--white); --faq-line:var(--line);
  --faq-accent:var(--green); --faq-chip:var(--mint); --faq-tag-bg:#fff3d6; --faq-tag-ink:#7a5400;
  margin:0 auto;
}
.faq-page-head h1{display:none;}
.landing-page .faq-page-head{text-align:center; margin-bottom:24px;}
.landing-page .faq-page-head h1{display:block; font-family:var(--font-heading); font-size:clamp(28px,4vw,38px); line-height:1.2; margin:0 0 10px;}
.faq-lead{color:var(--faq-muted); margin:0 0 1rem;}
.landing-page .faq-lead{max-width:560px; margin:0 auto;}
.lp-faq-slot{padding:56px 0 80px;}

.faq-toolbar{padding-bottom:12px; border-bottom:1px solid var(--faq-line); margin-bottom:24px;}
.faq-search{
  width:100%; box-sizing:border-box; font:inherit; font-size:16px; padding:12px 16px;
  border:1px solid var(--faq-line); border-radius:999px; background:var(--faq-card); color:var(--faq-ink);
}
.faq-search:focus{outline:2px solid var(--faq-accent); outline-offset:1px;}
.faq-cats{display:flex; flex-wrap:wrap; gap:8px; padding-top:12px;}
.faq-cats a{
  font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px;
  background:var(--faq-chip); color:var(--faq-accent); text-decoration:none; white-space:nowrap;
}
.faq-cats a:hover{text-decoration:underline;}
.faq-tools{display:flex; justify-content:flex-end; gap:14px; margin-top:10px; font-size:13px;}
.faq-tools button{appearance:none; border:0; background:none; padding:0; font:inherit; color:var(--faq-accent); cursor:pointer; text-decoration:underline;}

.faq-group{margin-bottom:32px; scroll-margin-top:100px;}
.faq-group h2{font-size:1.3rem; margin:0 0 12px;}
.landing-page .faq-group h2{font-family:var(--font-heading);}
.faq-page details{
  background:var(--faq-card); border:1px solid var(--faq-line); border-radius:14px;
  margin-bottom:8px; scroll-margin-top:100px;
}
.faq-page summary{list-style:none; cursor:pointer; padding:14px 44px 14px 18px; font-weight:600; position:relative;}
.faq-page summary::-webkit-details-marker{display:none;}
.faq-page summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:20px; font-weight:400; color:var(--faq-accent);
}
.faq-page details[open] summary::after{content:"–";}
.faq-page summary:focus-visible{outline:2px solid var(--faq-accent); outline-offset:-2px; border-radius:14px;}
.faq-answer-body{padding:0 18px 16px; color:var(--faq-muted); font-size:15px; line-height:1.6;}
.faq-answer-body p{margin:0 0 10px;}
.faq-answer-body ul, .faq-answer-body ol{margin:0 0 10px; padding-left:20px;}
.faq-answer-body li{margin-bottom:4px;}
.faq-answer-body > :last-child{margin-bottom:0;}
.faq-answer-body strong{color:var(--faq-ink);}
.faq-answer-body a{color:var(--faq-accent);}
.faq-path{font-size:13px; font-weight:600; background:var(--faq-chip); color:var(--faq-accent); padding:1px 7px; border-radius:6px;}
.faq-tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  padding:1px 7px; border-radius:6px; margin-left:6px; vertical-align:2px;
  background:var(--faq-tag-bg); color:var(--faq-tag-ink);
}
.faq-empty{text-align:center; color:var(--faq-muted); padding:24px 0;}
@media (max-width:600px){
  .faq-page summary{padding:13px 40px 13px 14px;}
  .faq-answer-body{padding:0 14px 14px;}
}