@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* Sanfter Cross-Fade beim Seitenwechsel (Multi-Page-App): verhindert das
   harte Überlagern von alter und neuer Seite beim Full-Page-Load, das auf
   Mobil als kurzes "Hüpfen" der Tabbar-Symbole sichtbar war. Progressive
   Enhancement — Browser ohne Support (Safari <18.2) ignorieren es folgenlos. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ============================================================
   Bagalutenfood — Design „D · Glas"
   Drop-in-Stylesheet, gleiche Selektoren/Klassen wie bagaluten.css
   (Markup/JS/Formulare bleiben unverändert). Aubergine/Orange/Pfirsich-
   Verlauf mit weichen Blobs, milchige Glas-Karten (blur+saturate,
   helle 1px-Innenkante), schwebendes Glas-Dock als Tabbar.
   Mobile-first, dieselben Breakpoints wie bagaluten.css.
   ============================================================ */

:root {
  /* ---- Glas-Farbwelt (hell): Aubergine/Magenta/Orange/Pfirsich ---- */
  --bg: #f6ddef;                  /* Fallback-Grundton hinter dem Verlauf (zartes Pink/Violett statt Beige) */
  --karte: #fdf7fc;               /* nicht-Glas-Flächen (z.B. Bilder-Platzhalter), zartes Violett-Weiss */
  --text: #1d0a24;               /* nahezu Schwarz für maximalen Kontrast auf Milchglas */
  --text-leise: #46314d;         /* abgedunkelt für WCAG-AA-Kontrast auf Milchglas */
  --rand: rgba(43,18,51,.16);
  --rand-weich: rgba(43,18,51,.10);

  --akzent: #e2661f;             /* kräftiges Orange, Signalfarbe */
  --akzent-dunkel: #c2540f;
  --akzent-weich: #ffe4cc;

  --leaf: #9c3f8e;                /* Aubergine/Magenta — Struktur/Sektionen (Ersatz für „Senf/Olive") */
  --leaf-dunkel: #742d69;
  --leaf-weich: #f3e0f5;

  --gut: #3f8e5e;                /* „gekocht" */
  --gut-dunkel: #2f6e47;
  --gefahr: #c23a3a;

  --glow-1: rgba(255,214,150,.5);
  --glow-2: rgba(180,90,230,.4);
  --glow-3: rgba(255,150,110,.42);
  --glow-4: rgba(142,42,110,.18);
  --korn-deckkraft: .12;

  --wallpaper-blend: normal;

  /* Verlauf + Blobs (Design D, hell) */
  --wallpaper:
    radial-gradient(circle at 80% 10%, var(--glow-1), transparent 42%),
    radial-gradient(circle at 10% 40%, var(--glow-2), transparent 45%),
    radial-gradient(circle at 70% 90%, var(--glow-3), transparent 48%),
    linear-gradient(165deg, #4a1d6e 0%, #8e2a6e 34%, #e2603f 68%, #ffc48a 100%);

  /* ---- Glas-Oberflächen (deckender fuer Lesbarkeit, Blur bleibt) ---- */
  --glas: rgba(255,255,255,.66);
  --glas-stark: rgba(255,255,255,.8);
  --glas-kante: rgba(255,255,255,.55);
  --glas-blur: blur(20px) saturate(1.4);
  /* Fallback ohne backdrop-filter: deckender, kein Blur nötig */
  --glas-fallback: #fbf3fb;
  --glas-fallback-stark: #f7ecf8;

  --r-xl: 24px;
  --r-l: 18px;
  --r-m: 14px;
  --r-pill: 999px;

  --schatten: 0 1px 2px rgba(50,10,60,.06), 0 8px 22px rgba(50,10,60,.10);
  --schatten-hover: 0 6px 16px rgba(50,10,60,.16), 0 20px 40px rgba(50,10,60,.20);
  --schatten-akz: 0 10px 26px rgba(226,102,31,.35);

  /* Primaer-Buttons: Sonnenuntergangs-Verlauf aus den Wallpaper-Farben */
  --akzent-verlauf: linear-gradient(135deg, #ff8b46 0%, #e2603f 45%, #9c3f8e 100%);
  --akzent-verlauf-schatten: 0 10px 26px rgba(226,102,31,.30), 0 6px 20px rgba(156,63,142,.25);
  --akzent-verlauf-schatten-hover: 0 10px 26px rgba(226,102,31,.38), 0 6px 20px rgba(156,63,142,.33);

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* Legacy-Aliase, falls Restmarkup noch alte Tokennamen nutzt */
  --hintergrund: var(--bg);

  /* Text-Schutz fuer Schrift, die direkt auf dem Verlauf liegt */
  --schrift-schutz: 0 1px 2px rgba(255,253,249,.6), 0 2px 16px rgba(255,253,249,.5);
  --hauch-tint: rgba(255,253,249,.22);

  /* Gesamthoehe der unteren Tab-Leiste (bündig am Bildschirmrand, siehe .tabbar),
     inkl. Safe-Area — überall als Offset für main/padding-bottom nutzen statt
     den Wert einzeln zu wiederholen. */
  --tabbar-hoehe: calc(52px + env(safe-area-inset-bottom, 0px));
  /* Schatten der bündigen Tabbar zeigt nur nach oben (kein Schatten unter der
     Leiste möglich/nötig, da sie am Bildschirmrand klebt) */
  --tabbar-schatten: 0 -6px 16px rgba(50,10,60,.16);

  /* ---- Rezept-Kategorien: eigene Farbe je Kategorie ---- */
  --kat-hauptgericht: #e2661f;   /* Signal-Orange (Akzent) */
  --kat-dessert: #d4526e;        /* Himbeer-Pink */
  --kat-fruehstueck: #d99a26;    /* Honig-Gold */
  --kat-beilage: #3f8e5e;        /* Kräuter-Grün */
  --kat-snack: #b8642d;          /* Röst-Kupfer */
  --kat-getraenk: #3579a8;       /* Wasser-Blau */
  --kat-backen: #9c3f8e;         /* Aubergine */
}

/* ---- Dunkelmodus (per data-color-scheme="dark" am <html>) ---- */
[data-color-scheme="dark"] {
  --bg: #170b26;
  --karte: #241531;
  --text: #faf6fc;
  --text-leise: rgba(250,246,252,.85);
  --rand: rgba(255,255,255,.16);
  --rand-weich: rgba(255,255,255,.10);

  --akzent: #ffa25e;
  --akzent-dunkel: #ff8b46;
  --akzent-weich: #3a2311;

  --leaf: #c073b8;
  --leaf-dunkel: #e0a0d6;
  --leaf-weich: #3a1f38;

  --gut: #6fbf8e;
  --gut-dunkel: #8fd6a8;
  --gefahr: #e0705a;

  --glow-1: rgba(255,140,80,.28);
  --glow-2: rgba(150,70,220,.30);
  --glow-3: rgba(255,90,130,.22);
  --glow-4: rgba(120,150,90,.08);
  --korn-deckkraft: .16;
  --wallpaper-blend: normal;

  /* Verlauf + Blobs (Design D, dunkel) */
  --wallpaper:
    radial-gradient(circle at 82% 12%, var(--glow-1), transparent 45%),
    radial-gradient(circle at 12% 45%, var(--glow-2), transparent 42%),
    radial-gradient(circle at 65% 88%, var(--glow-3), transparent 48%),
    linear-gradient(165deg, #170b26 0%, #341347 30%, #5c1f3f 62%, #83322b 100%);

  --glas: rgba(18,10,28,.62);
  --glas-stark: rgba(18,10,28,.78);
  --glas-kante: rgba(255,255,255,.22);
  --glas-fallback: #1c1024;
  --glas-fallback-stark: #150c1c;

  --schatten: 0 1px 2px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.45);
  --schatten-hover: 0 6px 16px rgba(0,0,0,.5), 0 20px 40px rgba(0,0,0,.55);
  --schatten-akz: 0 10px 26px rgba(255,162,94,.35);

  --akzent-verlauf: linear-gradient(135deg, #ff8b46 0%, #d4526e 50%, #8e2a6e 100%);
  --akzent-verlauf-schatten: 0 10px 26px rgba(255,162,94,.30), 0 6px 20px rgba(192,115,184,.25);
  --akzent-verlauf-schatten-hover: 0 10px 26px rgba(255,162,94,.38), 0 6px 20px rgba(192,115,184,.33);

  --schrift-schutz: 0 1px 2px rgba(23,11,38,.75), 0 2px 16px rgba(23,11,38,.6);
  --hauch-tint: rgba(23,11,38,.28);
  --tabbar-schatten: 0 -6px 16px rgba(0,0,0,.45);

  /* Rezept-Kategorien, aufgehellt für Dunkelmodus-Kontrast */
  --kat-hauptgericht: #ffa25e;
  --kat-dessert: #ef7d95;
  --kat-fruehstueck: #ecc25c;
  --kat-beilage: #6fbf8e;
  --kat-snack: #e09a5e;
  --kat-getraenk: #6aa8d4;
  --kat-backen: #c073b8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Reduzierte Bewegung respektieren: alle Übergänge/Animationen einkürzen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Wiederverwendbare Glas-Fläche mit @supports-Fallback (stärker deckend, ohne Blur) */
.ic { width: 1.15em; height: 1.15em; fill: currentColor; flex: 0 0 auto; vertical-align: -0.18em; }

/* Basis-Farbe in der dunkelsten Verlaufsfarbe auf html UND body: selbst wenn die
   Verlaufs-Ebene irgendwo nicht greift, blitzt nie Schwarz/Weiß durch. */
html { background-color: #4a1d6e; }
html[data-color-scheme="dark"] { background-color: #170b26; }

body {
  margin: 0;
  font-family: var(--font-body);
  /* transparent: die Verlaufs-Ebene (body::before, fixed) muss durchscheinen —
     ein deckender body-Hintergrund würde sie verdecken. Failsafe-Farbe liegt auf html. */
  background-color: transparent;
  color: var(--text);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  min-height: 100vh; min-height: 100dvh;
}

/* Verlauf + Blobs als eigene fixe Ebene: füllt IMMER den kompletten Viewport,
   unabhängig von Inhaltshöhe, Scrollposition und Fenstergröße (statt
   background-attachment:fixed am body, das auf Mobile unzuverlässig ist und
   den Verlauf an der Elementgröße statt am Viewport bemisst). */
body::before {
  content: "";
  position: fixed; inset: 0; width: 100%;
  height: 100vh; height: 100dvh;
  z-index: -2; pointer-events: none;
  background: var(--wallpaper);
  background-blend-mode: var(--wallpaper-blend);
}

/* Feine Körnung, dezent — hält den Verlauf lebendig ohne die Glas-Flächen zu stören */
body::after {
  content: "";
  position: fixed; inset: 0; width: 100%;
  height: 100vh; height: 100dvh;
  z-index: -1; pointer-events: none;
  opacity: var(--korn-deckkraft);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  background-repeat: repeat;
}

/* Kochmodus hat einen eigenen dunklen Hintergrund direkt am body — Verlaufs- und
   Körnungs-Ebene dort abschalten (negative z-index-Kinder zeichnen sonst ÜBER
   dem body-eigenen Hintergrund). */
body.kochmodus::before, body.kochmodus::after { content: none; }

main { max-width: 940px; margin: 0 auto; padding: 18px 16px calc(var(--tabbar-hoehe) + 16px); }
/* Seiten mit zusätzlicher fixierter Eingabe-/Aktionsleiste über der Tabbar
   (Rezept-Suche, Planer-Aktionen) brauchen mehr padding-bottom, damit der
   Inhalt darunter nicht verdeckt wird. ~64px zusätzliche Leistenhöhe + Puffer.
   Puffer bewusst grosszuegig (76px), damit auch bei kleinen Rundungsfehlern
   nichts hinter der jetzt fugenlos verschmolzenen Fix-Leiste+Tabbar-Einheit
   (Punkt 2) verschwindet. */
main.hat-fix-eingabe { padding-bottom: calc(var(--tabbar-hoehe) + 146px); }
/* Einkaufsliste: .ek-add kann sich per .ist-offen aufklappen (Menge/Einheit,
   Punkt 3) und braucht dafuer mehr Reserve als die Basisregel */
main.ek-hat-fix-eingabe { padding-bottom: calc(var(--tabbar-hoehe) + 88px); }

h1, h2, h3, .logo { font-family: var(--font-display); letter-spacing: -0.02em; }

/* Lesbarkeit: Ueberschriften/Meta, die direkt auf dem Verlauf liegen, mit
   weichem Schein absichern (hell: heller Schein, dunkel: dunkler Schein). */
main h1, main h2, main h3, .leer, .ek-leer, .ek-kat-name,
.quelle, .koch-info, .meta-zeile, .ctx-hinweis, .ek-bar-label, .grp-intro, .grp-leer,
.profile-intro, .rk-status {
  text-shadow: var(--schrift-schutz);
}
/* Auf Glas-Flaechen ist der Schein unnoetig — dort wieder abschalten.
   Generische Ausnahme: alle Schutz-Ziele innerhalb grosser Glas-Container.
   :where() haelt die Container-Spezifitaet auf 0, damit die Regel ueber den
   Schutz-Regeln (max. 0,1,0) liegt, aber unter gezielterer Deko wie
   .detail h2::before (0,1,2). .settings-modal * / .ek-sheet-titel /
   body.kochmodus .koch-info bleiben als kontextfreie Sonderfaelle erhalten. */
:where(article.detail, .kachel, .login-box, .settings-modal, .modal, .ek-sheet,
       .saison-block, .stat-kachel, .neu-block, .grp-karte, .tag-karte,
       .profile-card, .konto-form, .edit-form:not(.neu-form),
       .zutaten-fieldset, .ab-block, .fb-eintrag)
  :is(h1, h2, h3, .leer, .ek-leer, .ek-kat-name, .quelle,
      .koch-info, .meta-zeile, .ctx-hinweis, .ek-bar-label, .grp-intro,
      .grp-leer, .profile-intro, .rk-status),
.settings-modal *, .ek-sheet-titel, body.kochmodus .koch-info { text-shadow: none; }

/* Glas-Hauch statt Schein: weicher Blur-Fleck hinter der Schrift (Fallback bleibt
   der Schein oben). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  main h1, main h2, main h3, .leer, .ek-leer, .ek-kat-name,
  .quelle, .koch-info, .meta-zeile, .ctx-hinweis, .ek-bar-label, .grp-intro, .grp-leer,
  .profile-intro, .rk-status {
    text-shadow: none;
    position: relative;
    z-index: 0;
  }
  main h1::before, main h2::before, main h3::before, .leer::before, .ek-leer::before,
  .ek-kat-name::before, .quelle::before, .koch-info::before, .meta-zeile::before,
  .ctx-hinweis::before, .ek-bar-label::before, .grp-intro::before, .grp-leer::before,
  .profile-intro::before, .rk-status::before {
    content: "";
    position: absolute;
    inset: -0.3em -0.7em;
    z-index: -1;
    pointer-events: none;
    border-radius: 24px;
    background: var(--hauch-tint);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 55%, transparent 100%);
  }
  /* Seitentitel ("Rezept bearbeiten", "Alle Rezepte"): Hauch bleibt beidseitig
     symmetrisch (Text mittig in der Bubble). Der Titel wird per transform um die
     Polsterbreite (0.7em) nach rechts geschoben, damit die linke Blasenkante
     buendig mit Inhalt/Karten darunter sitzt statt nach links hinauszuragen.
     transform statt margin, weil spaetere margin-Regeln (main h1, .uebersicht-
     titel) den margin sonst ueberschreiben. */
  main > h1, .uebersicht-titel, .planer-titel { transform: translateX(0.7em); }
  /* Kurze Titel/Hinweise nicht ueber die volle leere Zeile ziehen */
  main h1, main h2, main h3 { width: fit-content; }
  .leer { width: fit-content; margin-inline: auto; }
  /* Auf Glas-Flaechen bleibt es beim bisherigen Verhalten — kein Hauch, keine
     eigene Box. Gleiche generische Container×Ziel-Struktur wie beim Fallback
     oben. Die ::before-Regel setzt neben content:none auch die Hauch-
     Eigenschaften zurueck: .detail h2::before (Deko-Balken, 0,1,2) ist
     spezifischer, behaelt also seinen content/Optik, bekommt aber ueber diese
     Regel position:static etc. zurueck und sitzt damit wieder als Flex-Item
     im h2 statt absolut vom Hauch verschoben. */
  :where(article.detail, .kachel, .login-box, .settings-modal, .modal, .ek-sheet,
         .saison-block, .stat-kachel, .neu-block, .grp-karte, .tag-karte,
         .profile-card, .konto-form, .edit-form:not(.neu-form),
         .zutaten-fieldset, .ab-block, .fb-eintrag)
    :is(h1, h2, h3, .leer, .ek-leer, .ek-kat-name, .quelle,
        .koch-info, .meta-zeile, .ctx-hinweis, .ek-bar-label, .grp-intro,
        .grp-leer, .profile-intro, .rk-status),
  .settings-modal *, .ek-sheet-titel, body.kochmodus .koch-info {
    text-shadow: none;
    position: static;
    z-index: auto;
    width: auto;
  }
  :where(article.detail, .kachel, .login-box, .settings-modal, .modal, .ek-sheet,
         .saison-block, .stat-kachel, .neu-block, .grp-karte, .tag-karte,
         .profile-card, .konto-form, .edit-form:not(.neu-form),
         .zutaten-fieldset, .ab-block, .fb-eintrag)
    :is(h1, h2, h3, .leer, .ek-leer, .ek-kat-name, .quelle,
        .koch-info, .meta-zeile, .ctx-hinweis, .ek-bar-label, .grp-intro,
        .grp-leer, .profile-intro, .rk-status)::before,
  .settings-modal *::before, .ek-sheet-titel::before, body.kochmodus .koch-info::before {
    content: none;
    position: static;
    inset: auto;
    z-index: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* ---------------- Glas-Grundflächen (mit @supports-Fallback) ---------------- */
/* Ohne backdrop-filter-Unterstützung: deckende milchige Fläche statt Blur, damit
   Text immer auf ausreichend Kontrast liegt (Lesbarkeit vor Effekt). */
.topbar, .settings-modal,
.login-box, .filterbar input[type="search"],
.kachel, .zutaten-fieldset, .ab-block, .sterne, .modal, .ek-sheet, .ek-suggest,
.ek-toast, .ek-pop, .fb-eintrag, .stat-kachel, .stat-liste li,
.saison-block, .saison-kachel, .ek-list-pill, .ek-icon-btn,
.ek-quick-chip, .ek-cat-zeile, .neu-block, .tag-karte, .grp-karte, .frg-karte,
.profile-card, .food-row, article.detail {
  background: var(--glas-fallback);
}
/* Mehr-Menü (.settings-modal) auch im Fallback ohne backdrop-filter deckender */
.settings-modal {
  background: rgba(255,255,255,.92);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .topbar, .settings-modal,
  .login-box, .filterbar input[type="search"],
  .kachel, .zutaten-fieldset, .ab-block, .sterne, .modal, .ek-sheet, .ek-suggest,
  .ek-toast, .ek-pop, .fb-eintrag, .stat-kachel, .stat-liste li,
  .saison-block, .saison-kachel, .ek-list-pill, .ek-icon-btn,
  .ek-quick-chip, .ek-cat-zeile, .neu-block, .tag-karte, .grp-karte, .frg-karte,
  .profile-card, .food-row, article.detail {
    background: var(--glas);
    backdrop-filter: var(--glas-blur);
    -webkit-backdrop-filter: var(--glas-blur);
  }
  /* Mehr-Menü (.settings-modal) deckender als die generische Glas-Flaeche — der
     Hintergrund schien bisher zu stark durch. Nur dieses eine Element
     ueberschreiben, --glas bleibt global unveraendert. */
  .settings-modal {
    background: rgba(255,255,255,.92);
  }
}

/* ---------------- Unterer Block: Tabbar + fixierte Leiste darüber ----------------
   Punkt 1 (Mobile-Feinschliff Runde 3): .tabbar und die je nach Seite darüber
   klebende Fix-Leiste (.filterbar / .ek-add / .planer-aktionen-fix) sollen wie
   EINE durchgehende Fläche wirken. Zwei unabhängige transluzente/geblurrte
   Glas-Flächen, die aneinanderstoßen, ergaben an der Naht immer einen sichtbaren
   Absatz (unterschiedliche kumulierte Deckung je nach Untergrund + doppelter
   Blur an der Kante). Deshalb hier bewusst EIN deckender (opaker) Hintergrund
   ohne backdrop-filter für den ganzen unteren Block, auf allen Seiten gleich
   (nicht nur auf Fix-Seiten) — so sehen Tabbar und Leiste immer identisch aus,
   unabhängig davon ob die Seite eine Fix-Leiste hat. */
.tabbar, .filterbar, .ek-add, .planer-aktionen-fix {
  background: var(--glas-fallback);
}
/* Detail-/Rezeptseiten: Fliesstext lag bisher direkt auf dem Verlauf — milchige Unterlage */
article.detail {
  border: 1px solid var(--glas-kante); border-radius: var(--r-xl);
  padding: 20px 18px 26px; box-shadow: var(--schatten);
}
article.detail h1, article.detail h2, article.detail h3 { text-shadow: none; }
.karte, .settings-modal, .login-box, .modal, .ek-sheet, .ek-suggest, .ek-pop,
.tag-karte, .grp-karte, .frg-karte, .profile-card, .stat-kachel, .neu-block,
.zutaten-fieldset, .ab-block, .food-row, .saison-block, .saison-kachel,
.fb-eintrag, .stat-liste li {
  border: 1px solid var(--glas-kante);
}
/* Dark Mode: eigener deckenderer Hintergrund fuer .settings-modal, gilt fuer
   Fallback- UND @supports-Zweig (kein backdrop-filter:none hier, Blur bleibt) */
[data-color-scheme="dark"] .settings-modal {
  background: rgba(20,12,30,.92);
}

/* ---------------- Topbar ---------------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--glas-kante); border-top: none; border-left: none; border-right: none;
  padding: 11px 16px; position: sticky; top: 0; z-index: 30;
}
.logo {
  font-size: 1.2rem; font-weight: 800; color: var(--text); cursor: default;
  display: inline-flex; align-items: center; gap: 8px; line-height: 1.25;
  white-space: nowrap; min-width: 0;
}
.logo .logo-emoji { font-size: 1.35rem; line-height: 1; flex: 0 0 auto; }
.logo .logo-text { overflow: hidden; text-overflow: ellipsis; }
.logout-form { margin: 0; }
.topnav { display: flex; align-items: center; gap: 7px; }

/* ---- "Mehr"-Menü: Einstellungs-Modal als Bottom-Sheet (Vorbild Wiegenzeit-App) ---- */
.menu-wrap { position: relative; }

.settings-overlay {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(20,8,30,.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  align-items: flex-end; justify-content: center; padding: 0;
}
.settings-overlay.open { display: flex; }
body.settings-open { overflow: hidden; }

.settings-modal {
  width: 100%; max-width: 520px;
  border-radius: 22px 22px 0 0;
  box-shadow: var(--schatten-hover);
  display: flex; flex-direction: column; overflow: hidden;
  max-height: min(90dvh, 720px);
  animation: settings-sheet-auf .22s ease;
}
@keyframes settings-sheet-auf { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 620px) {
  .settings-overlay { align-items: center; }
  .settings-modal { border-radius: var(--r-xl); }
}

.settings-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--rand);
}
.settings-head h2 {
  margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
}
.settings-head .sh-title { flex: 1; min-width: 0; display: flex; align-items: center; }
.settings-head .sh-title h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-back {
  border: none; background: none; cursor: pointer; font: inherit; text-align: left;
  color: var(--text-leise); border-radius: 10px; margin-left: -8px; padding: 6px 10px 6px 6px;
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  transition: background .15s ease, color .15s ease;
}
.settings-back .sb-arrow { width: 20px; height: 20px; flex: 0 0 auto; }
.settings-back .sb-text {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.settings-back:hover { background: var(--leaf-weich); color: var(--text); }
.settings-back:active { background: var(--leaf-weich); color: var(--text); }
.settings-back[hidden] { display: none; }
.settings-x {
  /* Touch-Target: war 36px, jetzt 44px (siehe Konsistenz-Sweep) */
  width: 44px; height: 44px; flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--text-leise); font-size: 1.05rem; border-radius: 10px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: background .15s, color .15s;
}
.settings-x:hover { background: var(--leaf-weich); color: var(--text); }

.settings-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}

/* Unterseiten (Hub & Spoke): nur eine .set-page gleichzeitig sichtbar, sanfter
   Wechsel durch ein kurzes Fade/Slide. */
.set-page {
  display: flex; flex-direction: column; gap: 9px;
  animation: set-page-ein .2s ease;
}
.set-page[hidden] { display: none; }
@keyframes set-page-ein { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }

.set-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: color-mix(in srgb, var(--karte) 55%, transparent); border: 1px solid var(--rand); border-radius: var(--r-m);
  padding: 10px 12px; min-height: 62px; cursor: pointer; font: inherit; color: var(--text); text-align: left;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.set-row:active { transform: scale(.99); background: var(--leaf-weich); }
.set-row .sr-ico {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  background: var(--leaf-weich); color: var(--leaf-dunkel);
  display: inline-flex; align-items: center; justify-content: center;
}
.set-row .sr-ico .ic { width: 19px; height: 19px; }
.set-row .sr-ico.sr-ico-avatar { background: none; }
.set-row .sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-row .sr-title { font-weight: 600; font-size: 0.96rem; }
.set-row .sr-sub { font-size: 0.8rem; color: var(--text-leise); line-height: 1.3; }
.set-row .sr-chev { width: 16px; height: 16px; color: var(--text-leise); flex: 0 0 auto; }
a.set-row { text-decoration: none; }
button.set-row { appearance: none; }
.set-row-form { margin: 0; }
.set-row-gefahr .sr-title { color: var(--gefahr); }
.set-row-gefahr .sr-ico { background: color-mix(in srgb, var(--gefahr) 14%, transparent); color: var(--gefahr); }
.set-row-gefahr:active { background: color-mix(in srgb, var(--gefahr) 10%, transparent); }

.settings-fuss {
  padding: 6px 6px 2px; font-size: 0.8rem; color: var(--text-leise); text-align: center;
}
.settings-fuss a { color: inherit; text-decoration: underline; }

[data-color-scheme="dark"] .set-row { background: color-mix(in srgb, var(--karte) 55%, transparent); }

/* Kopfzeile auf der Konto-Unterseite: Avatar + Name */
.set-page-kopf {
  display: flex; align-items: center; gap: 12px; padding: 6px 4px 4px;
}
.set-page-kopf .avatar-circle { width: 48px; height: 48px; font-size: 1.05rem; }
.set-page-kopf .spk-name { font-weight: 700; font-size: 1.02rem; }
/* Kopfzeile mit editierbarem Namen: Name + Stift-Button nebeneinander */
.set-page-kopf .spk-namezeile { display: flex; align-items: center; gap: 6px; min-width: 0; }
.spk-edit {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--leaf-weich); color: var(--leaf-dunkel);
}
.spk-edit svg, .spk-edit .ic { width: 15px; height: 15px; }
.spk-edit:hover { background: color-mix(in srgb, var(--akzent) 18%, transparent); }
/* Inline-Formular zum Umbenennen (unter der Kopfzeile) */
.konto-name-form { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 4px; }
.konto-name-form[hidden] { display: none; }
.konto-name-form .spk-namelabel { display: block; font-weight: 600; font-size: .9rem; }
.konto-name-form input[type="text"] {
  width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--rand); border-radius: var(--r-m); background: var(--karte);
  color: var(--text); font: inherit;
}
.konto-name-form input:focus { outline: none; border-color: var(--akzent); }
.konto-name-form .aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.konto-name-form .aktionen .btn-primary, .konto-name-form .aktionen .btn-ghost { width: 100%; min-height: 46px; }
/* Abschnittsueberschriften auf der Konto-Unterseite */
.set-page .set-abschnitt { font-size: .95rem; font-weight: 700; margin: 12px 0 2px; }
.set-page .set-abschnitt-info { font-size: .82rem; color: var(--text-leise); line-height: 1.4; margin: 0 0 6px; }
.set-page .konto-meldung[hidden] { display: none; }
.set-page .konto-meldung { margin: 2px 0; }
/* Abmelden-Zeile etwas absetzen */
.set-page .konto-logout { margin-top: 8px; }
/* Passwort-/Codes-Formular im Modal: schlanker als auf der alten Vollseite */
.set-page .konto-form { margin: 0; }
.set-page .avatar-grid { margin: 4px 0 2px; }
.set-page .rk-erzeugen { margin-top: 6px; }

/* Bagaluten-Unterseite im Modal: die grp-*-Bloecke stammen von der frueheren
   Vollseite und stehen hier im schmalen Modal-Container. Deshalb Eingaben/Buttons
   unabhaengig vom Viewport (auch auf Desktop, wo das Modal schmal bleibt) stapeln
   statt nebeneinander zu legen. */
.set-page-bagaluten .grp-intro { font-size: .84rem; margin-bottom: 10px; }
.set-page-bagaluten .grp-add,
.set-page-bagaluten .grp-neu,
.set-page-bagaluten .grp-loeschen { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 0; }
.set-page-bagaluten .grp-add > *,
.set-page-bagaluten .grp-neu > *,
.set-page-bagaluten .grp-loeschen > * { width: 100%; box-sizing: border-box; }
.set-page-bagaluten .grp-add input,
.set-page-bagaluten .grp-neu input { flex: 1 1 auto; }
.set-page-bagaluten .grp-link-zeile { flex-direction: column; align-items: stretch; }
.set-page-bagaluten .grp-link-zeile input { flex: 1 1 auto; width: 100%; }
.set-page-bagaluten .grp-link-zeile .btn-primary { width: 100%; }
.set-page-bagaluten .grp-link-box { margin-bottom: 4px; }
.set-page-bagaluten .grp-mitglieder { margin: 4px 0; }
.set-page-bagaluten .grp-mitglied-controls { flex-basis: 100%; }
.set-page-bagaluten .grp-mitglied-controls form { flex: 1 1 auto; }
.set-page-bagaluten .grp-mitglied-controls select { width: 100%; }
.set-page-bagaluten .grp-einladungen { margin-top: 4px; }
/* "Verwalten"-Unterbereich (Umbenennen/Loeschen) je Karte, per <details> */
.set-page-bagaluten .grp-verwalten { margin-top: 12px; }
.set-page-bagaluten .grp-verwalten summary { display: inline-flex; width: auto; }
.set-page-bagaluten .grp-verwalten .grp-block:first-of-type { margin-top: 10px; }

/* Je Bagalut eine eigene, einklappbare Karte (<details class="grp-karte">).
   Aktiver Bagalut steht vorn und startet offen (open-Attribut serverseitig
   gesetzt), alle anderen sind zu. Kopf = <summary>, dient als Toggle. */
.set-page-bagaluten .grp-karte { padding: 2px 14px 14px; margin-bottom: 12px; }
.set-page-bagaluten .grp-karte:last-child { margin-bottom: 2px; }
.set-page-bagaluten .grp-kopf {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; padding: 12px 0; margin: 0; min-height: 44px;
}
.set-page-bagaluten .grp-kopf::-webkit-details-marker { display: none; }
.set-page-bagaluten .grp-kopf::marker { content: ""; }
.set-page-bagaluten .grp-name { font-size: 1.02rem; font-weight: 700; margin: 0; flex: 1 1 auto; min-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-page-bagaluten .grp-chev { width: 18px; height: 18px; flex: 0 0 auto; margin-left: auto; color: var(--text-leise); transition: transform .18s ease; }
.set-page-bagaluten .grp-karte[open] .grp-chev { transform: rotate(90deg); }
.set-page-bagaluten .grp-verlassen-form { margin-bottom: 0; }

/* Mitgliederliste auf der Bagaluten-Unterseite */
.set-mitglieder-liste {
  list-style: none; margin: 0; padding: 4px;
  background: color-mix(in srgb, var(--karte) 55%, transparent); border: 1px solid var(--rand); border-radius: var(--r-m);
  display: flex; flex-direction: column; gap: 2px;
}
.set-mitglieder-liste li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 9px; font-size: .9rem; }
.set-mitglieder-liste .avatar-circle { width: 30px; height: 30px; font-size: .7rem; }
[data-color-scheme="dark"] .set-mitglieder-liste { background: color-mix(in srgb, var(--karte) 55%, transparent); }

/* Statistik-Unterseite im Modal: die stat-*-Bausteine stammen von der frueheren
   Vollseite (main-Kontext, viel Platz). Hier im schmalen Modal-Container werden
   sie kompakter: kleinere Kacheln (3 Spalten bleiben auch bei 375px erhalten,
   statt wie auf der alten Vollseite auf 1 Spalte umzubrechen), Listenzeilen ohne
   eigenen Schatten (liegen ohnehin auf der Modal-Flaeche), Titel mit Ellipsis. */
.set-page-statistik .stat-kacheln { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 6px; }
.set-page-statistik .stat-kachel {
  padding: 12px 6px; border-radius: var(--r-m); box-shadow: none;
  background: color-mix(in srgb, var(--karte) 55%, transparent); border: 1px solid var(--rand);
}
.set-page-statistik .stat-kachel b { font-size: clamp(1.05rem, 5.5vw, 1.5rem); }
.set-page-statistik .stat-kachel span { font-size: .68rem; margin-top: 3px; line-height: 1.2; }
.set-page-statistik .stat-liste { margin: 0 0 2px; }
.set-page-statistik .stat-liste li {
  padding: 10px 12px; margin-bottom: 7px; box-shadow: none;
  background: color-mix(in srgb, var(--karte) 55%, transparent); border: 1px solid var(--rand);
}
.set-page-statistik .stat-liste a { font-size: .92rem; }
.set-page-statistik .leer { padding: 14px 4px; font-size: .88rem; text-align: left; margin: 0; }
.set-page-statistik .set-abschnitt-gefahr { color: var(--gefahr); margin-top: 16px; }
[data-color-scheme="dark"] .set-page-statistik .stat-kachel,
[data-color-scheme="dark"] .set-page-statistik .stat-liste li { background: color-mix(in srgb, var(--karte) 55%, transparent); }

/* Beschriftetes Feld auf Unterseiten (z.B. Darstellung): Label oben, Steuerelement
   darunter in voller Breite — verhindert jedes Verrutschen auf schmalen Viewports. */
.set-feld { display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.set-feld .sf-label { font-weight: 600; font-size: 0.92rem; }

/* Segmented Control Hell/Dunkel/System: bleibt garantiert innerhalb der Karte —
   Buttons schrumpfen statt umzubrechen, gleitender Pill-Indikator zeigt den
   aktiven Modus. */
.theme-switch {
  position: relative; display: flex; gap: 0; padding: 2px;
  background: color-mix(in srgb, var(--karte) 55%, transparent);
  border: 1px solid var(--rand); border-radius: var(--r-m);
}
.ts-pill {
  position: absolute; top: 2px; bottom: 2px; left: 2px;
  width: calc((100% - 4px) / 3);
  border-radius: calc(var(--r-m) - 2px);
  background: var(--akzent-verlauf);
  transform: translateX(calc(var(--ts-index, 2) * 100%));
  transition: transform .25s ease;
  z-index: 0;
}
.theme-switch button {
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 7px 4px; border-radius: calc(var(--r-m) - 2px); cursor: pointer;
  border: none; background: transparent; color: var(--text-leise);
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; line-height: 1.25;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: color .15s ease;
  box-sizing: border-box;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button.aktiv { color: #fff; }
.theme-switch button.aktiv:hover { color: #fff; }
.theme-switch .ic { width: 16px; height: 16px; flex: 0 0 auto; }
@media (max-width: 380px) {
  .theme-switch button { padding: 6px 2px; font-size: 0.62rem; gap: 1px; }
  .theme-switch .ic { width: 15px; height: 15px; }
}

/* Sanfter Theme-Übergang: nur kurz waehrend des Wechsels aktiv (Klasse wird per
   JS ~400ms gesetzt), damit nicht jede sonstige Interaktion mittransitioniert. */
html.theme-uebergang,
html.theme-uebergang body,
html.theme-uebergang .karte,
html.theme-uebergang .settings-modal,
html.theme-uebergang .settings-overlay,
html.theme-uebergang .topbar,
html.theme-uebergang .tabbar,
html.theme-uebergang .set-row,
html.theme-uebergang .set-mitglieder-liste,
html.theme-uebergang .theme-switch,
html.theme-uebergang .fam-pop {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* ---- Untere Tab-Leiste: bündig an den unteren Bildschirmrand, volle Breite,
   klassische App-Bottom-Bar (oben abgerundet, unten eckig) ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  /* Feste Gesamthoehe (Icon-Zone + Sicherheitsabstand), damit ein spaet
     aufgeloestes/aktualisiertes env(safe-area-inset-bottom) NICHT mehr die
     Hoehe dieses an bottom:0 verankerten Elements aendert. Vorheriger Ansatz
     (flex-direction:column mit .tabbar-reihe + .tabbar-safe als zwei Flex-
     Items) hat die Icon-Zone weiterhin verschoben: jedes Wachstum von
     .tabbar-safe hat bei bottom:0 zwangslaeufig die obere Kante der ganzen
     Bar (und damit auch .tabbar-reihe) nach oben gedrueckt — das "Huepfen".
     Jetzt: .tabbar-reihe liegt per position:absolute STARR an der Oberkante
     der Bar (top:0), die Bar-Hoehe selbst ist fix (--tabbar-hoehe, gleicher
     Wert wie ueberall sonst als Padding-Referenz genutzt). Die safe-area
     fliesst nur noch in die (fixe) Gesamthoehe ein, nicht mehr in eine
     zweite, zeitversetzt aufgeloeste Box darunter. */
  height: var(--tabbar-hoehe);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--tabbar-schatten);
  padding: 0 6px;
}
.tabbar-reihe {
  position: absolute; top: 0; left: 6px; right: 6px;
  display: flex; height: 52px; padding-top: 5px;
}
.tabbar-safe { display: none; }
/* Seiten OHNE Fix-Leiste: Tabbar ist die einzige/oberste Kante des Blocks und
   behaelt Rundung + Schatten. Seiten MIT Fix-Leiste ueberschreiben das unten
   (body.seite-fix-eingabe .tabbar) — dort uebernimmt die Fix-Leiste beides. */
.tabbar .menu-wrap { flex: 1; display: flex; position: relative; }
/* Punkt 1: nur noch Symbole, kein Textlabel mehr im Markup — Icon zentriert
   statt Spalte mit Label darunter, dadurch flacher (min-height 50px -> 42px). */
.tab {
  flex: 1; min-height: 42px; position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--text-leise);
  background: none; border: none; cursor: pointer; font-family: inherit; border-radius: 20px;
  transition: color .15s;
}
.tab svg { width: 22px; height: 22px; fill: currentColor; transition: transform .15s; }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--akzent); font-weight: 800; }
.tab.is-active svg { transform: translateY(-1px); }
.tab.is-active::before {
  content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--akzent-verlauf);
}

/* Punkt 2: Seiten mit fixierter Eingabeleiste (.filterbar / .ek-add /
   .planer-aktionen-fix) verschmelzen optisch mit der Tabbar darunter — die
   Tabbar verliert dort ihre eigene obere Rundung/Schatten, das uebernimmt die
   Fix-Leiste als jetzt oberste Kante der kombinierten Einheit. Body-Klasse
   wird in header.ejs gesetzt, wenn mainClass "hat-fix-eingabe" enthaelt. */
body.seite-fix-eingabe .tabbar {
  border-radius: 0;
  box-shadow: none;
}
/* Sub-Pixel-Spalt schliessen: die Fix-Leiste ueberlappt die Oberkante der
   Tabbar um 1px, statt buendig bei --tabbar-hoehe zu enden. Bei identischem
   deckendem Hintergrund (siehe oben) ist die Ueberlappung unsichtbar, schliesst
   aber zuverlaessig jede Rundungs-Haarlinie zwischen beiden Elementen. */
body.seite-fix-eingabe .filterbar,
body.seite-fix-eingabe .ek-add,
body.seite-fix-eingabe .planer-aktionen-fix {
  bottom: calc(var(--tabbar-hoehe) - 1px);
}
/* Primaer-Buttons INNERHALB der fixierten Leisten ohne Verlaufs-Glow: die
   Tabbar liegt im Stapel ueber der Leiste (z-index 80 vs. 79) und schneidet
   den nach unten fallenden Schatten sonst hart ab (sichtbare Kante). */
.filterbar .btn-primary, .ek-add .btn-primary, .planer-aktionen-fix .btn-primary,
.filterbar .btn-primary:hover, .ek-add .btn-primary:hover, .planer-aktionen-fix .btn-primary:hover {
  box-shadow: none;
}

/* ---------------- Buttons ---------------- */
.btn-primary, .btn-ghost, .btn-gefahr {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 18px; border-radius: var(--r-m); min-height: 44px;
  border: none; font-family: var(--font-body); font-size: 0.98rem; font-weight: 600;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .18s, color .18s, border-color .18s, transform .1s, box-shadow .18s;
}
/* Primaer-Button: Sonnenuntergangs-Verlauf, beim Hover wandert der Verlauf
   (background-position) statt Farbwechsel — Transition daher nur hier erweitert,
   nicht in der geteilten Button-Grundregel */
.btn-primary {
  background: var(--akzent-verlauf);
  background-size: 160% 160%;
  background-position: 0% 50%;
  color: #fff; box-shadow: var(--akzent-verlauf-schatten); font-weight: 800;
  transition: background-position .35s ease, color .18s, border-color .18s, transform .1s, box-shadow .18s;
}
.btn-primary:hover {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: var(--akzent-verlauf-schatten-hover);
}
/* :active nach :hover — der Druck-Effekt muss den Hover-Lift ueberschreiben */
.btn-primary:active { transform: scale(.985); }
/* Kochmodus bleibt bei der bisherigen flachen Akzent-Optik (bewusst reduziert,
   kein Glas-/Verlaufs-Look) — exakt der alte Zustand */
body.kochmodus .btn-primary {
  background: var(--akzent); background-size: auto; background-position: 0 0;
  box-shadow: var(--schatten-akz);
  transition: background .18s, color .18s, border-color .18s, transform .1s, box-shadow .18s;
}
body.kochmodus .btn-primary:hover {
  background: var(--akzent-dunkel); background-position: 0 0;
  transform: none; box-shadow: var(--schatten-akz);
}
body.kochmodus .btn-primary:active { transform: scale(.985); }
.btn-ghost {
  background: var(--glas-fallback); color: var(--text);
  border: 1px solid var(--glas-kante); box-shadow: none;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .btn-ghost { background: var(--glas); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }
}
.btn-ghost:hover { background: var(--leaf-weich); color: var(--leaf-dunkel); border-color: transparent; }
.btn-gefahr { background: transparent; color: var(--gefahr); border: 1px solid color-mix(in srgb, var(--gefahr) 40%, transparent); }
.btn-gefahr:hover { background: color-mix(in srgb, var(--gefahr) 12%, transparent); }

/* Danger-Buttons, vereinheitlicht (Konsistenz-Sweep): vorher 4 Varianten
   (.grp-mini--gefahr, .btn-gefahr-klein in naehrwerte.css, .btn-gefahr hier,
   .stat-weg in der Statistik) mit je eigener Groesse. Jetzt genau 2 Groessen:
   .btn-gefahr (voll, min-height 44px, s.o.) und .btn-gefahr-klein (klein,
   min-height 44px). .stat-weg und .grp-mini--gefahr bleiben als Alias-Klassen
   in den Views bestehen, uebernehmen aber dieselbe Zielgroesse. */
.btn-gefahr-klein {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--gefahr); color: var(--gefahr); background: transparent;
  border-radius: var(--r-pill, 999px); padding: 10px 16px; min-height: 44px; box-sizing: border-box;
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s;
}
.btn-gefahr-klein:hover { background: color-mix(in srgb, var(--gefahr) 12%, transparent); }
/* .stat-weg (kleiner Icon-Button in Listenzeilen der Statistik): behaelt die
   dezente Ghost-Optik (kein Rahmen, nur Icon), bekommt aber dieselbe
   Touch-Target-Groesse wie .btn-gefahr-klein, statt der bisherigen ~28px. */
.stat-weg {
  min-height: 44px; min-width: 44px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Details-Marker global entfernen: admin.ejs hat den Marker bisher nur ueber
   eine admin-eigene Regel (.admin-detail > summary) versteckt, konto.ejs
   (bleibt hier unveraendert) gar nicht. Jetzt einheitlich ueber die
   Button-Klassen der jeweiligen <summary>, greift automatisch ueberall,
   wo <summary class="btn-ghost"> oder <summary class="btn-gefahr-klein">
   verwendet wird (auch in konto.ejs, ohne dass konto.ejs dafuer angefasst wird). */
summary.btn-ghost, summary.btn-gefahr-klein {
  display: inline-flex; align-items: center; cursor: pointer; list-style: none;
}
summary.btn-ghost::-webkit-details-marker, summary.btn-gefahr-klein::-webkit-details-marker { display: none; }
summary.btn-ghost::marker, summary.btn-gefahr-klein::marker { content: ""; display: none; }

/* Topnav-Icon-Buttons (📅 🎲 📊 / Abmelden) */
.topnav .btn-ghost {
  width: 44px; height: 44px; padding: 0; border-radius: var(--r-m); font-size: 1.1rem;
}
.topnav .logout-form .btn-ghost { width: auto; padding: 0 14px; font-size: 0.9rem; }

/* ---------------- Login ---------------- */
.login-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh; padding: 20px;
}
.login-box {
  padding: 40px 30px 34px; border-radius: var(--r-xl);
  width: min(92vw, 380px); text-align: center;
  box-shadow: var(--schatten-hover);
}
.login-box h1 {
  margin: 0 0 18px; font-size: 1.7rem; font-weight: 800; color: var(--text);
}
.login-box input {
  width: 100%; padding: 14px 16px; margin: 8px 0 14px; min-height: 44px;
  border: 1px solid var(--rand); border-radius: var(--r-m); font-size: 1rem;
  background: color-mix(in srgb, var(--karte) 70%, transparent); font-family: inherit; color: var(--text);
}
.login-box input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; background: var(--karte); }
.login-box button { width: 100%; padding: 14px; font-size: 1.02rem; }
.fehler { color: var(--gefahr); font-weight: 700; }
.login-links { margin: 16px 0 0; font-size: .9rem; }
.login-links a { color: var(--akzent); text-decoration: none; }
.login-links a:hover { text-decoration: underline; }
.login-footlinks { width: 100%; max-width: min(92vw, 380px); margin: 18px 0 0; font-size: .8rem; text-align: center; color: var(--text); opacity: .7; }
.login-footlinks a { color: inherit; text-decoration: underline; }
.reset-hinweis { max-width: 46ch; margin: 0 auto; }
.rechttext-box { width: min(92vw, 640px); text-align: left; max-height: 84vh; overflow-y: auto; }
.rechttext h1 { margin: 0 0 14px; color: var(--text); }
.rechttext h2 { margin: 22px 0 8px; font-size: 1.1rem; color: var(--text); }
.rechttext p, .rechttext ul { margin: 0 0 10px; line-height: 1.55; }
.rechttext ul { padding-left: 22px; }
.rechttext code { background: color-mix(in srgb, var(--karte) 60%, transparent); padding: 1px 5px; border-radius: 4px; }

/* ---------------- Filterleiste (Übersicht) ---------------- */
/* Fest fixiert direkt UEBER dem Menueband (siehe --tabbar-hoehe), analog zur
   2x2-Aktionsleiste des Planers. Verschmilzt nahtlos mit der Tabbar darunter
   (Punkt 2): gleicher Hintergrund/Blur wie .tabbar (siehe gemeinsamer Glas-
   Selektor-Block oben), keine Grenzlinie, oben abgerundet wie die Tabbar-
   Oberkante, Schatten sitzt hier (an der Oberkante der Gesamteinheit) statt
   an der Tabbar. */
.filterbar {
  position: fixed; left: 0; right: 0; bottom: var(--tabbar-hoehe); z-index: 79;
  margin-bottom: 0; padding: 10px 14px;
  border-radius: 22px 22px 0 0;
  box-shadow: var(--tabbar-schatten);
}
.filterbar input[type="search"] {
  width: 100%; padding: 14px 18px; font-size: 1rem; font-family: inherit; color: var(--text);
  border: 1px solid var(--glas-kante); border-radius: var(--r-l); margin-bottom: 0;
  box-shadow: var(--schatten); min-height: 44px;
}
.filterbar input[type="search"]::placeholder { color: var(--text-leise); }
.filterbar input[type="search"]:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
/* Toggle-Zeile: „Filter" und „Zufall" gleichberechtigt nebeneinander */
.filter-leiste { display: flex; gap: 8px; margin-top: 10px; }
.filter-leiste .btn-ghost { flex: 1 1 0; }
.filter-toggle { gap: 8px; }
.filter-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-verlauf); display: inline-block; }
/* Ausgeklapptes Filter-Panel sitzt selbst in der fixierten Leiste — nach oben
   begrenzen und scrollbar machen, sonst sprengt es auf kleinen Screens den
   Viewport (viele Selects uebereinander). */
.filter-erweitert {
  margin-top: 10px; max-height: calc(100vh - var(--tabbar-hoehe) - 140px);
  max-height: calc(100dvh - var(--tabbar-hoehe) - 140px);
  overflow-y: auto;
}
.filter-aktionen { display: flex; gap: 8px; margin-top: 10px; }
.filter-aktionen .btn-primary { flex: 1 1 auto; }

.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-row select {
  flex: 1 1 132px; padding: 11px 13px; font-size: 0.92rem; font-family: inherit; color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--r-m); background: var(--karte);
  cursor: pointer; transition: border-color .15s; min-height: 44px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239c3f8e' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
}
.filter-row select:hover { border-color: var(--leaf); }
.filter-row select:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* ---------------- Kachelraster (Übersicht) ---------------- */
.kacheln {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 560px) {
  .kacheln { gap: 11px; }
}

/* Kategorie-Farbe je Element: data-kat am Element (Kachel, Pille, Badge).
   Fallback --leaf am :root, damit auch Nutzer OHNE data-kat (z. B.
   .saison-kachel-Platzhalter) einen gültigen Wert erben. */
:root { --kat: var(--leaf); }
[data-kat] { --kat: var(--leaf); }
[data-kat="Hauptgericht"] { --kat: var(--kat-hauptgericht); }
[data-kat="Dessert"]      { --kat: var(--kat-dessert); }
[data-kat="Frühstück"]    { --kat: var(--kat-fruehstueck); }
[data-kat="Beilage"]      { --kat: var(--kat-beilage); }
[data-kat="Snack"]        { --kat: var(--kat-snack); }
[data-kat="Getränk"]      { --kat: var(--kat-getraenk); }
[data-kat="Backen"]       { --kat: var(--kat-backen); }

/* Rezept-Kachel „Glas-Editorial" (Overhaul 10.07., nach Katalog 20260710
   Glass Blog Card): Kategorie-Badge auf dem Bild, Verlaufs-Overlay unten,
   Meta-Zeile mit Zeit/Portionen/Saison, Hover-Zoom + Overlay nur auf
   Hover-Geräten. */
.kachel {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; box-shadow: var(--schatten);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kachel:hover { transform: translateY(-4px); box-shadow: var(--schatten-hover); }
.kachel-bild { position: relative; overflow: hidden; }
.kachel img, .platzhalter {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
}
.kachel .kachel-bild img { transition: transform .5s ease; }
/* Platzhalter ohne Foto: reiner Verlauf in der Kategoriefarbe, bewusst OHNE
   Symbol in der Mitte (Julians Vorgabe 10.07.) — Mischung über --karte, damit
   hell und dunkel automatisch stimmen. */
.platzhalter {
  display: flex; align-items: center; justify-content: center; font-size: 2.8rem;
  /* Lebendiger Verlauf im Wallpaper-Stil: heller Glow oben rechts, satter
     Farb-Blob unten links, diagonale Basis in der Kategoriefarbe */
  background:
    radial-gradient(110% 85% at 82% 10%, rgba(255,255,255,.42), transparent 55%),
    radial-gradient(130% 100% at 10% 92%, color-mix(in srgb, var(--kat) 90%, #2a0f33), transparent 62%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--kat) 30%, var(--karte)) 0%,
      color-mix(in srgb, var(--kat) 60%, var(--karte)) 55%,
      color-mix(in srgb, var(--kat) 88%, var(--karte)) 100%);
}
[data-color-scheme="dark"] .platzhalter {
  /* Dunkelmodus: Glow deutlich zurücknehmen, sonst wirkt er milchig */
  background:
    radial-gradient(110% 85% at 82% 10%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(130% 100% at 10% 92%, color-mix(in srgb, var(--kat) 80%, #0e0616), transparent 62%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--kat) 28%, var(--karte)) 0%,
      color-mix(in srgb, var(--kat) 55%, var(--karte)) 55%,
      color-mix(in srgb, var(--kat) 80%, var(--karte)) 100%);
}
/* Leichter Verlauf von unten übers Bild, damit das Kategorie-Badge immer lesbar liegt */
.kachel-bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(29,10,36,.42), transparent 52%);
  opacity: .55; transition: opacity .25s ease;
}
.kat-badge {
  position: absolute; bottom: 9px; left: 9px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 700; color: #fff; line-height: 1;
  background: color-mix(in srgb, var(--kat) 82%, #000 6%);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-pill); padding: 5px 10px 5px 7px;
  box-shadow: 0 2px 10px rgba(20,5,25,.25);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .kat-badge { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
.kat-badge .ic { width: 1em; height: 1em; vertical-align: 0; }
.kachel-text { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.kachel-text h2 {
  font-family: var(--font-display);
  font-size: 1.06rem; margin: 0; line-height: 1.2; font-weight: 700; text-wrap: balance;
  transition: color .2s ease;
}
/* Meta-Zeile: Zeit / Portionen / Saison — nur gerendert, wenn Felder gepflegt sind */
.kachel-meta {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  font-size: 0.8rem; font-weight: 600; color: var(--text-leise);
  margin: auto 0 0; padding-top: 9px; border-top: 1px solid var(--rand-weich);
}
.kachel-meta .m { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.kachel-meta .ic { width: 1.05em; height: 1.05em; opacity: .8; }
/* Hover-Zucker nur auf Geräten mit echtem Hover (Desktop): Bild-Zoom,
   Titel färbt in Kategoriefarbe, Overlay mit „Rezept öffnen" */
.kachel-overlay { display: none; }
@media (hover: hover) and (pointer: fine) {
  .kachel:hover .kachel-bild img { transform: scale(1.07); }
  .kachel:hover .kachel-bild::after { opacity: .3; }
  .kachel:hover .kachel-text h2 { color: var(--kat); }
  .kachel-overlay {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    background: rgba(29,10,36,.16);
    opacity: 0; transition: opacity .25s ease; pointer-events: none;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .kachel-overlay { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  }
  .kachel:hover .kachel-overlay { opacity: 1; }
  .kachel-overlay .btn-lesen {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--akzent-verlauf); color: #fff;
    font-size: .88rem; font-weight: 700; border-radius: var(--r-pill); padding: 10px 20px;
    box-shadow: var(--akzent-verlauf-schatten);
    transform: scale(.96); transition: transform .2s ease;
  }
  .kachel:hover .kachel-overlay .btn-lesen { transform: scale(1); }
}
.leer { color: var(--text-leise); text-align: center; padding: 48px 0; font-size: 1.05rem; }

/* Kategorie-Schnellfilter über dem Kachelraster: eine Pille je Kategorie,
   horizontal scrollbar auf Mobil, aktive Pille gefüllt */
.kat-filter {
  display: flex; gap: 8px; margin: 4px 0 14px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 4px 0 6px;
}
.kat-filter::-webkit-scrollbar { display: none; }
.kat-pille {
  /* Pillen teilen sich die volle Rasterbreite (buendig mit den Kacheln
     darunter); bei Platzmangel (Mobil) greift min-content + Scroll */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 auto;
  border-radius: var(--r-pill); padding: 7px 14px 7px 10px;
  font-size: .84rem; font-weight: 700; line-height: 1; text-decoration: none;
  color: var(--kat);
  background: color-mix(in srgb, var(--kat) 14%, var(--glas-fallback));
  border: 1.5px solid color-mix(in srgb, var(--kat) 40%, transparent);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.kat-pille:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--kat) 24%, var(--glas-fallback)); }
.kat-pille.is-active { background: var(--kat); color: #fff; border-color: var(--kat); }
.kat-pille .ic { width: 1.1em; height: 1.1em; vertical-align: 0; }

/* Glasbutton „Neues Rezept" (Overhaul 10.07., nach Katalog 20260709 Floating
   Action Button, Variante Glas mit Label): Milchglas-Pille mit Verlaufs-Plus,
   Label fährt auf Hover-Geräten aus. Sitzt über der fixierten Suchleiste. */
.fab-neu {
  position: fixed; right: 14px; z-index: 78;
  bottom: calc(var(--tabbar-hoehe) + 134px);
  display: inline-flex; align-items: center;
  height: 54px; border-radius: var(--r-pill); padding: 0 10px;
  background: var(--glas-fallback-stark);
  border: 1px solid var(--glas-kante); color: var(--text);
  text-decoration: none; font-weight: 700; font-size: .93rem;
  box-shadow: var(--schatten);
  transition: transform .2s ease, box-shadow .2s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .fab-neu { background: var(--glas-stark); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }
}
.fab-neu .fab-plus {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background: var(--akzent-verlauf); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--akzent-verlauf-schatten);
}
/* Plus als SVG-Icon (statt Textglyphe): sitzt exakt mittig */
.fab-neu .fab-plus .ic { width: 20px; height: 20px; vertical-align: 0; }
.fab-neu .fab-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; }
.fab-neu:hover { transform: translateY(-2px); box-shadow: var(--schatten-hover); }
@media (hover: hover) and (pointer: fine) {
  .fab-neu .fab-label { transition: max-width .3s ease, opacity .25s ease, margin .3s ease; }
  .fab-neu:hover .fab-label, .fab-neu:focus-visible .fab-label { max-width: 160px; opacity: 1; margin-left: 9px; margin-right: 4px; }
}

/* ---------------- Detailseite ---------------- */
.detail h1 {
  font-size: 2rem; font-weight: 700; margin: 16px 0 10px; line-height: 1.08; text-wrap: balance;
}
.detail-bild {
  width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--r-xl);
  box-shadow: var(--schatten);
}
.meta { margin: 6px 0 4px; display: flex; flex-wrap: wrap; gap: 7px; }
/* Basis-Badge (Kategorie-Pille, Admin-Stat-Pills, "du"): Sonnenuntergangs-
   Verlauf statt flachem Orange — statisch, kein Hover-Wander (nicht interaktiv) */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--akzent-verlauf); color: #fff;
  padding: 6px 13px; border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 600; margin: 0;
}
.badge-tag { background: var(--leaf-weich); color: var(--leaf-dunkel); }
.meta-zeile { color: var(--text-leise); font-weight: 500; }
.detail h2 {
  font-size: 1.32rem; font-weight: 700; margin: 30px 0 14px; padding-bottom: 0; border-bottom: none;
  display: flex; align-items: center; gap: 10px;
}
.detail h2::before {
  content: ""; width: 7px; height: 24px; border-radius: 3px; background: var(--leaf); flex: 0 0 auto;
}

/* Zutaten-Kopf + Portionsregler */
/* 1×2-Raster: Überschrift und Portionsanzeige gleich breit, auf gleicher Höhe zentriert */
.zutaten-kopf { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 10px; margin-top: 30px; }
/* Abstand sitzt jetzt am Container, die Überschrift selbst hat keine vertikalen Margins
   (sonst drückt margin-top die Überschrift in der Zelle nach unten) */
.zutaten-kopf h2 { margin: 0; }
/* Beide Portionsanzeigen gleiche Höhe + füllen ihre Rasterhälfte → ruhiges Bild */
.portionen-statisch, .portionen-regler { height: 46px; width: 100%; }
.portionen-statisch {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--leaf-dunkel); font-size: 0.95rem; font-weight: 600;
  background: var(--leaf-weich); padding: 0 16px; border-radius: var(--r-pill);
}
.portionen-regler {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 4px;
  border: 1px solid var(--glas-kante); border-radius: var(--r-pill);
  padding: 0 5px; box-shadow: var(--schatten);
}
/* Zahl in der Mitte, +/- an den Rändern; wächst mit (z. B. „10 Portionen") ohne Sprung */
.portionen-regler button { flex: 0 0 auto; }
.portionen-regler button {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--leaf-weich); color: var(--leaf-dunkel); font-size: 1.3rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s;
}
.portionen-regler button:hover { background: var(--leaf); color: #fff; }
.portionen-regler button:active { background: var(--leaf-dunkel); color: #fff; }
.portionen-regler span { flex: 1 1 auto; font-size: 0.95rem; font-weight: 600; white-space: nowrap; padding: 0 6px; min-width: 34px; text-align: center; }
/* Desktop: Überschrift links, Portionsanzeige kompakt rechts (nicht über die halbe Seite) */
@media (min-width: 700px) {
  .zutaten-kopf { display: flex; justify-content: space-between; }
  .portionen-statisch, .portionen-regler { width: auto; }
}

.zutaten-gruppe {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; letter-spacing: 0;
  text-transform: none; margin: 20px 0 6px; color: var(--leaf-dunkel);
  background: var(--leaf-weich); padding: 6px 14px; border-radius: var(--r-pill);
}
.zutaten-gruppe::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); flex: 0 0 auto; }
.zutaten { list-style: none; padding: 0; margin: 0; }
.zutaten li {
  display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; column-gap: 14px;
  padding: 12px 4px; border-bottom: 1px solid var(--rand-weich);
}
.zutaten li:last-child { border-bottom: none; }
.menge {
  font-weight: 700; min-width: 5.5rem; display: inline-block; color: var(--text);
  font-variant-numeric: tabular-nums;
}

.schritte { counter-reset: schritt; padding-left: 0; list-style: none; }
.schritte li {
  position: relative; margin-bottom: 0; padding: 14px 0 14px 50px;
  border-bottom: 1px solid var(--rand-weich); line-height: 1.6;
}
.schritte li:last-child { border-bottom: none; }
.schritte li::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--leaf-weich); color: var(--leaf-dunkel);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}

.notizen {
  white-space: pre-wrap; background: var(--leaf-weich); padding: 16px 18px;
  border-radius: var(--r-l); border-left: 4px solid var(--leaf); line-height: 1.55;
}
.quelle { color: var(--text-leise); font-size: 0.9rem; margin-top: 22px; }
.quelle a { color: var(--leaf-dunkel); font-weight: 600; }

/* ---- Detailseite folgt der Kategoriefarbe (Angleichung an den Kachel-
   Overhaul 10.07.): data-kat am <article> setzt --kat (Zuordnung siehe
   [data-kat]-Block oben), Sektions-Balken, Zutaten-Gruppen, Schritt-Nummern,
   Portions-Elemente und Notizen mischen die Kategoriefarbe statt pauschal
   Aubergine. color-mix über --karte/--text haelt hell und dunkel stimmig. ---- */
article.detail[data-kat] h2::before { background: var(--kat); }
article.detail[data-kat] .zutaten-gruppe {
  color: color-mix(in srgb, var(--kat) 72%, var(--text));
  background: color-mix(in srgb, var(--kat) 14%, var(--karte));
}
article.detail[data-kat] .zutaten-gruppe::before { background: var(--kat); }
article.detail[data-kat] .schritte li::before {
  background: color-mix(in srgb, var(--kat) 15%, var(--karte));
  color: color-mix(in srgb, var(--kat) 72%, var(--text));
}
article.detail[data-kat] .portionen-statisch {
  color: color-mix(in srgb, var(--kat) 72%, var(--text));
  background: color-mix(in srgb, var(--kat) 14%, var(--karte));
}
article.detail[data-kat] .portionen-regler button {
  background: color-mix(in srgb, var(--kat) 14%, var(--karte));
  color: color-mix(in srgb, var(--kat) 72%, var(--text));
}
article.detail[data-kat] .portionen-regler button:hover { background: var(--kat); color: #fff; }
article.detail[data-kat] .notizen {
  background: color-mix(in srgb, var(--kat) 11%, var(--karte));
  border-left-color: var(--kat);
}
/* Kategorie-Badge im Meta-Block: gleiche Optik wie .kat-badge auf den Kacheln */
.badge-kat {
  background: color-mix(in srgb, var(--kat) 82%, #000 6%);
  border: 1px solid rgba(255,255,255,.35);
  padding-left: 10px;
}
.badge-kat .ic { width: 1em; height: 1em; vertical-align: 0; }
/* Meta-Zeile unter den Badges: Zeit/Saison als ruhige Icon-Paare */
.meta-zeile .m { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; white-space: nowrap; }
.meta-zeile .ic { width: 1.05em; height: 1.05em; opacity: .8; }

/* ---------------- Kommentare (Detailseite) ---------------- */
/* Das textarea hat im Markup keine Klasse — Theme-Optik daher ueber den
   Kontext-Container .kommentar-form (statt Browser-Standard-3D-Rahmen) */
.kommentare-leer { color: var(--text-leise); }
.kommentar-liste { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.kommentar {
  padding: 11px 14px; border: 1px solid var(--rand-weich); border-radius: var(--r-m);
  background: color-mix(in srgb, var(--karte) 45%, transparent);
}
.kommentar-kopf { display: flex; align-items: center; gap: 10px; }
.kommentar-name { font-weight: 700; }
.kommentar-zeit { color: var(--text-leise); font-size: .82rem; }
.kommentar-loeschen-form { margin: 0 0 0 auto; }
.kommentar-loeschen {
  background: none; border: none; color: var(--text-leise); cursor: pointer;
  padding: 4px 7px; border-radius: 8px; line-height: 1; transition: color .12s, background .12s;
}
.kommentar-loeschen:hover { color: var(--gefahr); background: color-mix(in srgb, var(--gefahr) 9%, transparent); }
.kommentar-text { margin: 6px 0 0; white-space: pre-wrap; }
.kommentar-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 4px; }
.kommentar-form textarea {
  width: 100%; padding: 12px 14px; min-height: 44px; font-family: inherit; font-size: 0.95rem;
  color: var(--text); background: color-mix(in srgb, var(--karte) 55%, transparent);
  border: 1px solid var(--rand); border-radius: var(--r-m); resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.kommentar-form textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.aktionen { display: flex; gap: 10px; margin: 26px 0 0; align-items: center; flex-wrap: wrap; }
.aktionen form { margin: 0; }
/* Detailseite: „Bearbeiten" + „Löschen" gleich groß im 1×2-Raster */
.detail .aktionen { display: grid; grid-template-columns: 1fr 1fr; }
.detail .aktionen form { display: contents; }
.detail .aktionen .btn-primary, .detail .aktionen .btn-gefahr { width: 100%; min-height: 50px; }

/* Punkt 1.4: Editor-Formular „Speichern"/„Abbrechen" ebenfalls gleich groß im
   1×2-Raster (gleiches Muster wie .detail .aktionen bzw. .neu-form .aktionen) */
.edit-form:not(.neu-form) .aktionen { display: grid; grid-template-columns: 1fr 1fr; }
.edit-form:not(.neu-form) .aktionen .btn-primary, .edit-form:not(.neu-form) .aktionen .btn-ghost { width: 100%; min-height: 50px; }

/* Aktionsbereich (Detailseite) — abgestimmtes Raster */
.rezept-aktionen { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 6px; }
.btn-kochen {
  width: 100%; font-size: 1.06rem; padding: 15px 24px; border-radius: var(--r-l);
}
/* width:100% + box-sizing:border-box: exakt so breit wie der Kochmodus-Button
   darueber (.btn-kochen), darf nie ueber den Rand hinausragen */
.aktion-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: 100%; box-sizing: border-box;
}
.gekocht-form { display: contents; min-width: 0; }
/* Alle vier Felder gleich hoch und gleich breit. min-width:0 ist der eigentliche
   Fix: ohne das erzwingen Icon+Text in Grid-Kindern eine Mindestbreite groesser
   als die Spalte, dadurch ragen die Kacheln auf schmalen Screens ueber den Rand. */
.aktion-grid .btn-ghost,
.aktion-grid .btn-gekocht,
.aktion-grid .sterne {
  width: 100%; min-width: 0; min-height: 52px; margin: 0; border-radius: var(--r-m);
  box-sizing: border-box;
}
/* Text in den Aktions-Kacheln darf umbrechen statt die Breite zu sprengen */
.aktion-grid .btn-ghost, .aktion-grid .btn-gekocht {
  white-space: normal; text-align: center; line-height: 1.2;
}
/* Schmale Screens: etwas kompakter, damit Icon+Text sicher in die Spalte passt
   (360px Viewport: 2 Spalten je ~163px bei 10px gap und 16px main-padding) */
@media (max-width: 380px) {
  .aktion-grid .btn-ghost, .aktion-grid .btn-gekocht {
    font-size: 0.88rem; padding: 10px 8px; gap: 5px;
  }
}
.btn-gekocht {
  background: var(--gut); color: #fff; border: none;
  font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 8px 20px rgba(79,148,104,.28); transition: background .15s, transform .1s;
}
.btn-gekocht:hover { background: var(--gut-dunkel); }
.btn-gekocht:active { transform: scale(.985); }

.sterne {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--glas-kante); box-shadow: var(--schatten);
}
.stern { background: none; border: none; cursor: pointer; font-size: 1.6rem; line-height: 1; color: var(--akzent); padding: 0 1px; transition: transform .1s; }
.stern:hover { transform: scale(1.12); }

.rating-note {
  width: 100%; padding: 11px 13px; border: 1px solid var(--rand); border-radius: var(--r-m); min-height: 44px;
  background: color-mix(in srgb, var(--karte) 55%, transparent); color: var(--text); font-family: inherit; font-size: 0.95rem; resize: vertical;
}
.rating-note:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }

.koch-info-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 0 0; }
.koch-info { color: var(--text-leise); font-size: 0.92rem; }
.koch-info b { color: var(--leaf-dunkel); }
.aktion-info { color: var(--gut-dunkel); font-weight: 700; font-size: 0.92rem; }

.plan-popup { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plan-popup input[type="date"] { flex: 1 1 auto; padding: 11px 13px; border: 1px solid var(--rand); border-radius: var(--r-m); font-size: 0.95rem; font-family: inherit; background: color-mix(in srgb, var(--karte) 55%, transparent); color: var(--text); min-height: 44px; }

/* ---------------- Edit-Formular ---------------- */
/* Der Rezept-Editor bekommt eine grosse Glas-Karte (Muster wie article.detail):
   Labels und Felder liegen damit nie direkt auf dem Verlauf, kein Schrift-
   Schatten noetig. Ausnahmen: .konto-form hat seine eigenen kleinen Karten,
   .neu-form (/neu) ist bewusst als einzelne .neu-block-Karten mit "oder"-
   Trennern gestaltet und wird nicht zusaetzlich eingewickelt. */
.edit-form:not(.konto-form):not(.neu-form) {
  background: var(--glas-fallback);
  border: 1px solid var(--glas-kante); border-radius: var(--r-xl);
  padding: 20px 18px 26px; box-shadow: var(--schatten); margin: 12px 0 20px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .edit-form:not(.konto-form):not(.neu-form) {
    background: var(--glas); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur);
  }
}
.edit-form label { display: block; margin-bottom: 16px; font-weight: 600; }
.edit-form label small { font-weight: 400; color: var(--text-leise); }
/* email/password/number waren bisher nicht abgedeckt und fielen auf den eckigen
   Browser-Standard zurueck (E-Mail-/Passwort-Felder auf /konto, Minuten-Feld im
   Editor). Bewusst ohne input[type="file"]: der wuerde die visually-hidden-Regel
   von .neu-datei-input auf /neu ueberstimmen. */
.edit-form input[type="text"], .edit-form input[type="url"],
.edit-form input[type="email"], .edit-form input[type="password"],
.edit-form input[type="number"],
.edit-form select, .edit-form textarea {
  width: 100%; padding: 12px 14px; font-size: 1rem; margin-top: 6px; min-height: 44px;
  border: 1px solid var(--rand); border-radius: var(--r-m); background: color-mix(in srgb, var(--karte) 55%, transparent);
  font-family: inherit; color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.edit-form input:focus, .edit-form select:focus, .edit-form textarea:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich);
}
.zutaten-fieldset {
  border: 1px solid var(--glas-kante); border-radius: var(--r-l); margin-bottom: 16px; padding: 16px;
}
.zutaten-fieldset-titel {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  margin: 0 0 4px; line-height: 1.2;
}
/* Punkt 1.3: jede Zutat als eigene, klar abgegrenzte Zeile (dezenter Karten-Ton,
   Rahmen, mehr Innenabstand) statt optisch verschmolzenem Block */
.zutat-zeile {
  display: flex; gap: 8px; margin-bottom: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--rand-weich); border-radius: var(--r-m);
  background: color-mix(in srgb, var(--karte) 45%, transparent);
}
.zutat-zeile:last-child { margin-bottom: 0; }
.zutat-griff {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  color: var(--text-leise); opacity: .7;
  cursor: grab; touch-action: none;
}
.zutat-griff:active { cursor: grabbing; }
.feld-menge { flex: 0 0 4.5rem; }
.feld-einheit { flex: 0 0 5rem; }
.feld-name { flex: 1 1 8rem; }
.feld-gruppe { flex: 1 1 100%; font-size: 0.9rem; }
.zutat-entfernen { flex: 0 0 auto; padding: 11px 13px !important; width: auto !important; height: auto !important; }
.feld-hinweis { color: var(--text-leise); margin: 8px 0 0; }

@media (max-width: 560px) {
  .zutat-zeile {
    display: grid; grid-template-columns: auto 1fr 1fr auto;
    column-gap: 8px; row-gap: 6px; align-items: center;
    margin-bottom: 12px;
  }
  .zutat-zeile .zutat-griff { grid-row: 1; grid-column: 1; }
  .zutat-zeile .feld-menge { grid-column: 2; }
  .zutat-zeile .feld-einheit { grid-column: 3; }
  .zutat-zeile .zutat-entfernen { grid-column: 4; grid-row: 1; }
  .zutat-zeile .feld-name { grid-column: 1 / -1; grid-row: 2; }
  .zutat-zeile .feld-menge, .zutat-zeile .feld-einheit, .zutat-zeile .feld-name { min-height: 42px; }
}

/* Abschnitt-Blöcke (Ordner-System) */
.ab-block {
  border: 1px solid var(--glas-kante); border-radius: var(--r-l); padding: 12px;
  margin-bottom: 12px;
  border-left: 4px solid var(--leaf);
}
.ab-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ab-griff { font-size: 1.15rem; flex: 0 0 auto; opacity: .8; }
.ab-name {
  flex: 1 1 auto; margin-top: 0 !important;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem !important;
  background: var(--bg) !important; border-color: var(--rand) !important;
}
.ab-name::placeholder { font-family: var(--font-body); font-weight: 500; }
.ab-entfernen { flex: 0 0 auto; padding: 9px 11px !important; width: auto !important; height: auto !important; color: var(--gefahr); }
.ab-entfernen:hover { background: color-mix(in srgb, var(--gefahr) 9%, transparent) !important; color: var(--gefahr) !important; }
.ab-zutaten { margin-bottom: 8px; }
.ab-zutaten:empty { display: none; }
.ab-add-zutat { font-size: 0.88rem; padding: 9px 14px; }
.form-row { display: flex; gap: 14px; }
.form-row label { flex: 1; }
.edit-bild-vorschau { max-width: 200px; border-radius: var(--r-m); margin-bottom: 14px; display: block; box-shadow: var(--schatten); }
#zutat-hinzufuegen { margin-top: 6px; }

/* ---------------- Statistik ---------------- */
main h1 { font-size: 2rem; font-weight: 700; margin: 8px 0 4px; }
.stat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.stat-reset-form { margin: 0; }
.stat-rechts { display: inline-flex; align-items: center; gap: 8px; }
.stat-weg {
  background: none; border: none; color: var(--text-leise); font-size: 1rem; cursor: pointer;
  padding: 5px 8px; border-radius: 8px; line-height: 1; transition: background .12s, color .12s;
}
.stat-weg:hover { color: var(--gefahr); background: color-mix(in srgb, var(--gefahr) 9%, transparent); }
.stat-sterne { color: var(--akzent); font-size: 0.95rem; letter-spacing: 1px; white-space: nowrap; }
.stat-sterne-leer { color: var(--rand); }
/* Von flex-wrap auf Grid umgestellt: bei flex-wrap 1 130px konnte die letzte
   Kachel je nach Fensterbreite unmotiviert allein in einer Zeile mit viel
   Leerraum landen. Grid mit fester Spaltenzahl ist bei 375px vorhersagbar. */
.stat-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 8px; }
.stat-kachel {
  border-radius: var(--r-l); min-width: 0;
  padding: 22px 24px; text-align: center; box-shadow: var(--schatten);
}
/* clamp statt fest 2.6rem: 4-stellige Werte (z.B. 1234×) sprengten bei
   schmalen Kacheln sonst die Breite bzw. brachen haesslich um. */
.stat-kachel b { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1; color: var(--akzent); }
.stat-kachel span { color: var(--text-leise); font-size: 0.9rem; font-weight: 500; margin-top: 6px; display: block; }
.stat-liste { padding-left: 0; list-style: none; }
.stat-liste li {
  margin: 0; padding: 13px 16px; display: flex; justify-content: space-between; gap: 14px; align-items: center;
  border-radius: var(--r-m); margin-bottom: 8px; box-shadow: var(--schatten);
}
.stat-liste a { color: var(--text); text-decoration: none; font-weight: 600; }
.stat-liste a:hover { color: var(--leaf-dunkel); }
/* 375px: lange Rezepttitel sprengten mit der Zahl rechts die Zeile. Titel
   schrumpft mit Ellipsis, die Zahl bleibt als fixer Block rechts stabil. */
.stat-liste li > a:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-zahl { font-weight: 700; color: var(--akzent); white-space: nowrap; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.stat-leise { font-weight: 600; color: var(--text-leise); }
.stat-rechts { flex: 0 0 auto; }

@media (max-width: 480px) {
  /* Mobil: 1 Spalte statt 3 gequetschter Kacheln nebeneinander. */
  .stat-kacheln { grid-template-columns: 1fr; gap: 10px; }
  .stat-kachel { padding: 16px 20px; }
}
main section h2 { font-size: 1.3rem; font-weight: 700; margin: 26px 0 12px; }

/* ---------------- Kochmodus (dunkel, fokussiert, in beiden Modi gleich) ----------------
   Bewusst kaum Glas-Effekte: maximale Lesbarkeit hat Vorrang. Nur Timer/Buttons
   bekommen ein dezentes Glas-Finish. */
body.kochmodus {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  background:
    radial-gradient(120% 80% at 50% -10%, #3a1d4a 0%, transparent 60%),
    #170b26;
  color: #fff; overflow: hidden;
}
.km-top {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  padding-top: max(14px, env(safe-area-inset-top));
}
.km-exit {
  color: rgba(255,255,255,.85); text-decoration: none; font-size: 1.3rem; line-height: 1;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.08); transition: background .15s;
}
.km-exit:hover { background: rgba(255,255,255,.16); }
.km-titel { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-fortschritt { height: 6px; background: rgba(255,255,255,0.12); margin: 0 18px; border-radius: 3px; overflow: hidden; }
.km-balken { height: 100%; width: 0; background: linear-gradient(90deg, var(--akzent), #f6a07f); border-radius: 3px; transition: width 0.25s ease; box-shadow: 0 0 14px rgba(239,125,87,.6); }
.km-buehne { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; align-items: safe center; justify-content: center; padding: 24px; }
.km-schritt { text-align: center; max-width: 720px; }
.km-schritt-nr { color: var(--akzent); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.km-schritt-text { font-family: var(--font-body); font-size: clamp(1.55rem, 5vw, 2.4rem); font-weight: 500; line-height: 1.4; margin: 0; color: #faf6fc; }
.km-fertig .km-schritt-nr { font-size: 1.4rem; }
.km-fertig .km-gekocht-btn { font-size: 1.15rem; margin: 22px auto 12px; display: inline-flex; }
.km-fertig .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); box-shadow: none; }
.km-fertig .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.km-nav { display: flex; gap: 12px; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.km-navbtn {
  flex: 1; padding: 20px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  border-radius: var(--r-l); cursor: pointer;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.09); color: #fff;
  transition: background .12s, transform .1s;
}
.km-navbtn:hover:not(:disabled) { background: rgba(255,255,255,0.16); }
.km-navbtn:active:not(:disabled) { transform: scale(.98); }
.km-navbtn:disabled { opacity: 0.28; }
.km-weiter { background: var(--akzent); border-color: transparent; flex: 2; box-shadow: 0 10px 28px rgba(239,125,87,.4); }
.km-weiter:hover:not(:disabled) { background: var(--akzent-dunkel) !important; }

/* Zutaten-Button in der Top-Leiste (während der Schritte) */
.km-zutaten-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.09);
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; cursor: pointer;
}
.km-zutaten-btn:hover { background: rgba(255,255,255,0.16); }
.km-zutaten-btn svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.km-zutaten-btn[hidden] { display: none; }

/* Mise en place (Schritt 0) */
.km-mise { width: 100%; max-width: 560px; text-align: center; }
.km-mise-sub { color: rgba(255,255,255,0.6); font-size: 1rem; margin: 0 0 20px; }
.km-mise-kopf, .km-sheet-kopf {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display); font-weight: 700; color: var(--akzent); font-size: 1.05rem;
}
.km-mise-kopf { justify-content: flex-start; padding: 0 2px 6px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.km-mise-zutaten { text-align: left; }
.km-mise-start { display: flex; width: 100%; justify-content: center; margin-top: 24px; font-size: 1.15rem; }
.km-zutaten-port { font-family: var(--font-body); font-weight: 500; color: rgba(255,255,255,0.55); font-size: 0.85rem; }
.km-zutaten-port[hidden] { display: none; }

/* Zutaten-Overlay als Bottom-Sheet */
.km-zutaten-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; background: rgba(0,0,0,0.5); }
.km-zutaten-overlay[hidden] { display: none; }
.km-zutaten-sheet {
  width: 100%; max-height: 78vh; max-height: 78dvh; display: flex; flex-direction: column;
  background: #1e1327; border-top: 1px solid rgba(255,255,255,0.12); border-radius: 22px 22px 0 0;
  padding-bottom: max(10px, env(safe-area-inset-bottom)); animation: km-sheet-auf .22s ease;
}
@keyframes km-sheet-auf { from { transform: translateY(100%); } to { transform: translateY(0); } }
.km-sheet-griff { width: 44px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.28); margin: 10px auto 2px; cursor: grab; touch-action: none; }
.km-sheet-kopf { justify-content: space-between; align-items: center; padding: 6px 20px 10px; }
.km-sheet-close {
  width: 2.1rem; height: 2.1rem; flex: 0 0 auto; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.km-sheet-close svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.km-zutaten-scroll { overflow-y: auto; padding: 0 20px 12px; }
.km-zutaten-scroll .zutaten-gruppe { color: var(--akzent); margin: 10px 0 2px; background: rgba(255,255,255,0.08); }
.km-zutaten-scroll .zutaten-gruppe::before { background: var(--akzent); }
.km-zutaten { list-style: none; padding: 0; margin: 0; }
.km-zutat label { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.km-zutat-check { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; accent-color: var(--akzent); }
.km-zutat .menge { min-width: 4.5rem; color: #fff; }
.km-zutat-name { flex: 1; }
.km-zutat.erledigt .menge, .km-zutat.erledigt .km-zutat-name { text-decoration: line-through; opacity: 0.4; }

/* Timer-Chip im Schritt-Text */
.timer-chip {
  display: inline-flex; align-items: center; background: var(--akzent); color: #fff; border: none;
  border-radius: var(--r-pill); padding: 3px 12px; margin: 0 3px; font-size: 0.82em; font-weight: 700;
  cursor: pointer; white-space: nowrap; vertical-align: baseline; box-shadow: 0 4px 12px rgba(239,125,87,.4);
  transition: background .12s, transform .1s;
}
.timer-chip:hover { background: var(--akzent-dunkel); }
.timer-chip:active { transform: scale(.96); }

.km-timerleiste { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px; justify-content: center; }
.km-timerleiste:empty { display: none; }
.km-timer {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1); border-radius: var(--r-pill); padding: 8px 8px 8px 16px;
  margin-top: 10px; font-variant-numeric: tabular-nums; font-weight: 600;
}
.km-timer-fertig { background: var(--akzent); animation: km-blink 0.8s steps(2) infinite; }
@keyframes km-blink { 50% { opacity: 0.5; } }
.km-timer-zeit { font-size: 1rem; }
.km-timer-stop { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: none; background: rgba(0,0,0,0.28); color: #fff; cursor: pointer; font-size: 0.9rem; }

/* ---------------- Einkaufsliste ---------------- */
.ek-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ek-kopf h1 { font-size: 1.9rem; font-weight: 700; margin: 8px 0; }
.ek-rezepte { border-radius: var(--r-l); padding: 16px 18px; box-shadow: var(--schatten); margin: 4px 0 22px; border: 1px solid var(--glas-kante); background: var(--glas-fallback); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ek-rezepte { background: var(--glas); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }
}
.ek-rezepte h2 { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-leise); border: none; margin: 0 0 10px; }
.ek-rezeptliste { list-style: none; padding: 0; margin: 0; }
.ek-rezept { display: flex; align-items: center; gap: 10px; padding: 9px 0; flex-wrap: wrap; border-bottom: 1px solid var(--rand-weich); }
.ek-rezept:last-child { border-bottom: none; }
.ek-rezept-titel { flex: 1 1 8rem; color: var(--text); text-decoration: none; font-weight: 600; }
.ek-rezept-titel:hover { color: var(--leaf-dunkel); }
.ek-portionen { display: inline-flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--rand); border-radius: var(--r-pill); padding: 4px 10px; font-size: 0.9rem; font-weight: 600; }
.ek-portionen button, .tag-rezept-port .port-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--leaf-weich); color: var(--leaf-dunkel); font-size: 1.2rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s;
}
.ek-portionen button:hover, .tag-rezept-port .port-btn:hover { background: var(--leaf); color: #fff; }
.ek-portionen-fix { color: var(--text-leise); font-size: 0.85rem; }
.ek-rezept-weg { background: none; border: none; color: var(--text-leise); font-size: 1.05rem; cursor: pointer; padding: 6px 8px; border-radius: 8px; transition: background .12s, color .12s; }
.ek-rezept-weg:hover { color: var(--gefahr); background: color-mix(in srgb, var(--gefahr) 8%, transparent); }
.ek-info { color: var(--text-leise); margin-top: 0; }
.ek-kategorie h2 {
  font-size: 1.18rem; font-weight: 700; color: var(--text); border: none; padding-bottom: 0;
  margin: 26px 0 8px; display: flex; align-items: center; gap: 9px;
}
.ek-kategorie h2::before { content: ""; width: 7px; height: 20px; border-radius: 3px; background: var(--leaf); }
.ek-liste { list-style: none; padding: 0; margin: 0; border-radius: var(--r-l); box-shadow: var(--schatten); overflow: hidden; border: 1px solid var(--glas-kante); background: var(--glas-fallback); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ek-liste { background: var(--glas); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }
}
.ek-item label { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-bottom: 1px solid var(--rand-weich); cursor: pointer; transition: background .1s; }
.ek-item:last-child label { border-bottom: none; }
.ek-item label:hover { background: var(--leaf-weich); }
.ek-check { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; accent-color: var(--leaf); }
.ek-name { flex: 1; font-weight: 500; }
.ek-menge { color: var(--text-leise); white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.ek-item.erledigt .ek-name, .ek-item.erledigt .ek-menge { text-decoration: line-through; opacity: 0.45; }

@media (max-width: 480px) {
  .form-row { flex-direction: column; gap: 0; }
  .menge { min-width: 4.5rem; }
  .zutaten li { grid-template-columns: 4.5rem 1fr; }
  .detail h1 { font-size: 1.7rem; }
}

/* ============================================================
   Wochenplaner  (Klassen aus dem früheren Inline-Block,
   neu in Richtung C — der Inline-<style> wird entfernt)
   ============================================================ */
.planer-kopf { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; max-width: 460px; }
.planer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Alle 4 Kopf-Buttons gleich groß (2×2-Raster) */
.planer-nav .btn-ghost { width: 100%; min-height: 46px; padding-left: 10px; padding-right: 10px; justify-content: center; }
.planer-titel { flex: 1; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin: 0; text-align: left; color: var(--text); }
/* „Heute" und Einkauf-Button gleich groß in einer Zeile */
.planer-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.planer-aktionen .btn-ghost, .planer-aktionen .btn-primary { width: 100%; min-height: 46px; }

.planer-grid { display: flex; flex-direction: column; gap: 12px; }
.tag-karte {
  border-radius: var(--r-l); padding: 14px;
  display: flex; flex-direction: column; gap: 9px; box-shadow: var(--schatten);
  transition: box-shadow .18s ease, transform .18s ease;
}
.tag-karte:hover { box-shadow: var(--schatten-hover); }
.tag-karte--heute { box-shadow: 0 0 0 2px var(--akzent), var(--schatten); }
.tag-karte--laedt { min-height: 90px; opacity: 0.5; background: var(--rand-weich); box-shadow: none; }
.tag-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tag-name { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--text); }
.tag-karte--heute .tag-name { color: var(--akzent-dunkel); }
.tag-datum { font-size: 0.8rem; color: var(--text-leise); white-space: nowrap; font-weight: 500; }

.tag-rezepte { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.tag-rezept { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--rand-weich); border-radius: var(--r-m); padding: 8px 10px; font-size: 0.9rem; }
/* Kategoriefarbe am Planer-Eintrag (Angleichung an den Kachel-Overhaul):
   linke Farbkante, Platzhalter-Bild als Mini-Verlauf in der Kategoriefarbe */
.tag-rezept[data-kat] { border-left: 3px solid var(--kat); }
.tag-rezept[data-kat] .tag-rezept-ph,
.modal-eintrag[data-kat] .modal-eintrag-ph {
  color: #fff;
  background:
    radial-gradient(120% 90% at 80% 12%, rgba(255,255,255,.32), transparent 60%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--kat) 35%, var(--karte)) 0%,
      color-mix(in srgb, var(--kat) 78%, var(--karte)) 100%);
}
[data-color-scheme="dark"] .tag-rezept[data-kat] .tag-rezept-ph,
[data-color-scheme="dark"] .modal-eintrag[data-kat] .modal-eintrag-ph {
  /* dunkel: Glanz zurücknehmen, sonst wirkt der kleine Platzhalter milchig */
  background:
    radial-gradient(120% 90% at 80% 12%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--kat) 30%, var(--karte)) 0%,
      color-mix(in srgb, var(--kat) 65%, var(--karte)) 100%);
}
/* Kategorie-Text im Rezept-Modal in der Kategoriefarbe */
.modal-eintrag[data-kat] .modal-eintrag-kat { color: color-mix(in srgb, var(--kat) 70%, var(--text)); font-weight: 600; }
.tag-rezept-port { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 100%; font-size: 0.85rem; color: var(--text-leise); }
.tag-rezept-port b { color: var(--text); }
.port-einheit { margin-right: auto; }
.tag-rezept-bild { width: 40px; height: 40px; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.tag-rezept-ph { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--leaf-weich); border-radius: 9px; flex-shrink: 0; }
.tag-rezept-name { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tag-rezept-del { flex-shrink: 0; background: none; border: none; color: var(--text-leise); font-size: 0.9rem; cursor: pointer; padding: 4px 6px; border-radius: 6px; line-height: 1; transition: color .1s, background .1s; }
.tag-rezept-del:hover { color: var(--gefahr); background: color-mix(in srgb, var(--gefahr) 8%, transparent); }
/* Greifer für Drag & Drop */
.tag-rezept-griff { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 22px; margin: -8px 0 -8px -4px; padding: 8px 0; color: var(--text-leise); cursor: grab; touch-action: none; opacity: 0.5; }
.tag-rezept-griff:hover { opacity: 1; }
.tag-rezept-griff svg { width: 17px; height: 17px; fill: currentColor; }
/* Verlinkter Bereich (Bild + Name) */
.tag-rezept-link { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
a.tag-rezept-link:hover .tag-rezept-name { text-decoration: underline; }
/* Eintrag während des Ziehens */
.tag-rezept--drag { opacity: 0.9; box-shadow: 0 6px 16px rgba(0,0,0,0.18); border-color: var(--akzent); cursor: grabbing; }
body.planer-dragging { user-select: none; -webkit-user-select: none; }
body.planer-dragging .tag-rezept-griff { cursor: grabbing; }
/* Freitext-Eintrag (nicht im Blog) */
.tag-rezept--freitext .tag-rezept-name { font-style: italic; }
.tag-rezept--freitext .tag-rezept-ph { background: color-mix(in srgb, var(--akzent) 14%, transparent); }
/* Freitext-Feld im Modal */
.modal-freitext { border-top: 1px solid var(--rand-weich); margin-top: 10px; padding-top: 13px; }
.modal-freitext-label { display: block; font-size: 0.85rem; color: var(--text-leise); margin-bottom: 6px; }
.modal-freitext-zeile { display: flex; gap: 8px; }
.modal-freitext-input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--rand); border-radius: var(--r-m); font: inherit; background: var(--bg); color: var(--text); }
.modal-freitext-zeile .btn-primary { flex-shrink: 0; }
.tag-add-btn {
  background: none; border: 1.5px dashed var(--rand); border-radius: var(--r-m); color: var(--leaf-dunkel);
  font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; padding: 10px 12px; cursor: pointer;
  text-align: left; width: 100%; transition: background .12s, border-color .12s;
}
.tag-add-btn:hover { background: var(--leaf-weich); border-color: var(--leaf); }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(28,24,20,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal { border-radius: var(--r-xl); width: min(95vw, 460px); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,0.28); }
.modal-kopf { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 12px; border-bottom: 1px solid var(--rand); flex-shrink: 0; }
.modal-titel { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.modal-schliessen { background: none; border: none; font-size: 1.15rem; color: var(--text-leise); cursor: pointer; padding: 6px 9px; border-radius: 8px; line-height: 1; }
.modal-schliessen:hover { background: var(--bg); color: var(--text); }
.modal-suche { margin: 14px 18px 8px; padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--r-m); font-size: 1rem; width: calc(100% - 36px); background: var(--bg); color: var(--text); font-family: inherit; flex-shrink: 0; }
.modal-suche:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.modal-liste { list-style: none; padding: 0 8px 12px; margin: 0; overflow-y: auto; flex: 1; }
.modal-eintrag { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-m); cursor: pointer; transition: background 0.1s; }
.modal-eintrag:hover { background: var(--leaf-weich); }
.modal-eintrag-bild { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.modal-eintrag-ph { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--leaf-weich); border-radius: 10px; flex-shrink: 0; }
.modal-eintrag-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.modal-eintrag-name { font-size: 0.96rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-eintrag-kat { font-size: 0.78rem; color: var(--text-leise); }
.modal-leer { padding: 16px 18px; color: var(--text-leise); font-size: 0.92rem; margin: 0; }

/* Datums-Bubble entfernt: Kopf bleibt auf allen Breiten ein kompaktes 2×2-Raster */

/* ---------------- Würfeln im Planer-Modal ---------------- */
.wuerfel-box { padding: 12px 18px 4px; border-bottom: 1px solid var(--rand-weich); }
.wuerfel-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.wuerfel-filter select {
  flex: 1 1 30%; min-width: 8rem; padding: 8px 10px; border: 1px solid var(--rand);
  border-radius: var(--r-m); background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.9rem;
}
.wuerfel-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.wuerfel-knoepfe .btn-primary, .wuerfel-knoepfe .btn-ghost { width: auto; flex: 1 1 auto; font-size: 0.9rem; padding: 9px 12px; }
.wuerfel-info { min-height: 1.1em; margin: 8px 0 4px; font-size: 0.85rem; color: var(--text-leise); }

/* ---------------- Saisonale Tagesvorschläge ---------------- */
.saison-block {
  margin: 4px 0 22px; padding: 16px 16px 18px;
  background: var(--leaf-weich); border: 1px solid var(--rand);
  border-radius: var(--r-l);
}
.saison-titel { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--leaf-dunkel); margin: 0 0 12px; }
.uebersicht-titel {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--text); margin: 16px 0 16px;
}
.saison-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.saison-kachel {
  display: flex; flex-direction: column; border-radius: var(--r-l);
  overflow: hidden; text-decoration: none; color: var(--text); box-shadow: var(--schatten);
  transition: box-shadow .18s ease, transform .18s ease;
}
.saison-kachel:hover { box-shadow: var(--schatten-hover); transform: translateY(-3px); }
.saison-kachel img, .saison-kachel .platzhalter { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.saison-name { padding: 9px 11px 3px; font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
/* Meta-Zeile der Saison-Kacheln: Zeit / Portionen / kcal, kompakt */
.saison-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 11px 9px; margin-top: auto;
  font-size: .74rem; font-weight: 600; color: var(--text-leise);
}
.saison-meta .m { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.saison-meta .ic { width: 1em; height: 1em; opacity: .8; }
@media (max-width: 520px) {
  .saison-reihe { grid-template-columns: 1fr 1fr; }
  .saison-reihe .saison-kachel:nth-child(3) { display: none; }
}

/* ---------------- Badges (Ernährung/Küche/Anlass) ---------------- */
.badge-diet { background: var(--gut); color: #fff; }
.badge-kueche { background: var(--leaf); color: #fff; }
.badge-anlass { background: var(--akzent-weich); color: var(--akzent-dunkel); }

/* ---------------- Feedback (Kochseite + Kochmodus) ---------------- */
.fb-details { width: 100%; margin-top: 6px; }
.fb-details summary { cursor: pointer; color: var(--leaf-dunkel); font-weight: 600; font-size: 0.9rem; }
.fb-gelungen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0; }
.fb-label { font-weight: 600; font-size: 0.9rem; }
.fb-opt { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 0.95rem; }
.fb-note {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rand); border-radius: var(--r-m); min-height: 44px;
  background: color-mix(in srgb, var(--karte) 55%, transparent); color: var(--text); font-family: inherit; font-size: 0.95rem; resize: vertical;
}
.fb-note:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.fb-liste { margin-top: 8px; }
.fb-eintraege { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fb-eintrag { border-radius: var(--r-m); padding: 10px 13px; box-shadow: var(--schatten); }
.fb-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.85rem; }
.fb-marker { font-weight: 700; }
.fb-gut { color: var(--gut-dunkel); }
.fb-schlecht { color: var(--gefahr); }
.fb-datum { color: var(--text-leise); }
.fb-text { margin: 6px 0 0; font-size: 0.95rem; }

/* Feedback im dunklen Kochmodus */
.km-feedback { display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin: 6px 0 14px; max-width: 460px; width: 100%; }
.km-feedback .fb-gelungen { justify-content: center; color: #fff; }
.km-feedback .fb-note { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; }
.km-feedback .fb-note::placeholder { color: rgba(255,255,255,0.6); }

/* Angemeldeter Benutzer im Menü */
.menu-user { text-transform: none; letter-spacing: 0; font-weight: 500; padding-top: 4px; display: flex; align-items: center; gap: 8px; }

/* Konto / Passwort ändern */
.hinweis-ok { color: var(--gut-dunkel); font-weight: 600; }
.konto-form {
  max-width: 420px; background: var(--glas-fallback);
  border: 1px solid var(--glas-kante); border-radius: var(--r-l);
  padding: 16px 18px; box-shadow: var(--schatten); margin: 10px 0 20px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .konto-form { background: var(--glas); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }
}
/* Details-Aufklapper "Neue Codes erzeugen" enthaelt sein eigenes .konto-form
   bereits mit Kartenoptik — Abstand zum Rand des Aufklappers etwas reduzieren */
.rk-erzeugen .konto-form { margin-top: 10px; margin-bottom: 0; }

/* Neues Rezept (Upload) */
.neu-form { max-width: 640px; }
/* Umschalter Bilder / Link / Eintippen (12.07.2026): drei gleich breite
   Pillen, aktive traegt den Sonnenuntergangs-Verlauf. Im Tab-Modus (JS aktiv,
   Klasse am Formular) ist nur der aktive Block sichtbar, die "oder"-Trenner
   entfallen — ohne JS bleibt alles gestapelt sichtbar wie bisher. */
.neu-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.neu-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 10px 8px; border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 700; color: var(--text);
  background: var(--glas-fallback); border: 1px solid var(--glas-kante);
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .neu-tab { background: var(--glas); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }
}
.neu-tab:hover { transform: translateY(-1px); }
.neu-tab.is-active { background: var(--akzent-verlauf); color: #fff; border-color: transparent; }
.neu-tab .ic { width: 1.15em; height: 1.15em; }
.neu-tabmodus .neu-trenner { display: none; }
.neu-tabmodus .neu-block:not(.is-aktiv) { display: none; }
/* Der Hinweistext oben ("Lade Bilder hoch…") liegt außerhalb des Formulars und
   folgte bisher der breiteren main-Breite (940px) statt der 640px des Formulars
   darunter — dadurch war die Box breiter als die .neu-block-Karten und die
   Kanten links/rechts nicht bündig. Scope auf main.seite-neu, damit .koch-info
   auf anderen Seiten (z.B. konto.ejs) unverändert bleibt. */
main.seite-neu .koch-info {
  max-width: 640px; box-sizing: border-box;
  padding: 16px 18px; border: 1px solid var(--glas-kante);
  border-radius: var(--r-l); background: var(--glas-fallback);
  box-shadow: var(--schatten); text-shadow: none;
}
main.seite-neu .koch-info::before { display: none; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  main.seite-neu .koch-info { background: var(--glas); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }
}
/* „Rezept erstellen" + „Abbrechen" gleich groß, 1×2-Raster */
.neu-form .aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.neu-form .aktionen .btn-primary, .neu-form .aktionen .btn-ghost { width: 100%; min-height: 50px; }
.neu-block { border-radius: var(--r-l); padding: 16px 18px; box-shadow: var(--schatten); }
.neu-block-titel { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; border: none; }
.neu-block input[type="url"], .neu-block textarea, .neu-block input[type="file"] { width: 100%; }
.neu-trenner { display: flex; align-items: center; text-align: center; color: var(--text-leise); font-size: 0.85rem; margin: 14px 0; }
.neu-trenner::before, .neu-trenner::after { content: ""; flex: 1; height: 1px; background: var(--rand); }
.neu-trenner span { padding: 0 12px; }
.neu-vorschau { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Punkt 4: sobald Bilder gewaehlt sind, bekommt die Vorschau denselben
   Karten-Rahmen/Radius wie label.neu-datei und dieselbe min-height, damit
   Upload-Flaeche und Bilder-Flaeche gleich gross wirken. Ohne Bilder bleibt
   die Box unsichtbar (kein leerer Rahmen vor der Auswahl). */
.neu-vorschau:not(:empty) {
  min-height: 78px; align-content: flex-start;
  padding: 15px 16px; border: 1.5px solid var(--glas-kante); border-radius: var(--r-l);
  background: var(--glas-fallback); box-shadow: var(--schatten); box-sizing: border-box;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .neu-vorschau:not(:empty) { background: var(--glas); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }
}
.neu-thumb { width: 78px; height: 78px; object-fit: cover; border-radius: var(--r-m); border: 1px solid var(--rand); }
/* Schöner Datei-Auswahl-Button (Drop-Zone) */
.neu-datei-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Drop-Zone als Glas-Flaeche statt gestrichelter Orange-Box: 1.5px-Kante mit
   Verlaufs-Ton (color-mix passt besser zum Bestand als der Doppel-Background-
   Trick, der mit backdrop-filter kollidiert), Icon-Quadrat traegt den
   Sonnenuntergangs-Verlauf, Hover hebt leicht an mit Verlaufs-Glow.
   Selektor als label.neu-datei: gleiche Spezifitaet wie ".edit-form label"
   (das display:block setzt), steht spaeter — Icon+Text liegen so wieder als
   Flex-Zeile nebeneinander. */
label.neu-datei {
  display: flex; align-items: center; gap: 13px; width: 100%; box-sizing: border-box; cursor: pointer;
  padding: 15px 16px; border: 1.5px solid color-mix(in srgb, #e2603f 40%, var(--glas-kante));
  border-radius: var(--r-l); background: var(--glas-fallback);
  box-shadow: var(--schatten);
  transition: transform .14s, box-shadow .14s, border-color .14s; -webkit-tap-highlight-color: transparent;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .neu-datei { background: var(--glas); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }
}
.neu-datei:hover {
  transform: translateY(-1px);
  box-shadow: var(--akzent-verlauf-schatten);
  border-color: color-mix(in srgb, #9c3f8e 50%, var(--glas-kante));
}
.neu-datei:active { transform: scale(.99); }
.neu-datei:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; }
.neu-datei.is-dragover {
  transform: translateY(-1px); border-color: #e2603f;
  box-shadow: var(--akzent-verlauf-schatten-hover);
}
.neu-datei.hat-dateien { border-color: color-mix(in srgb, #9c3f8e 55%, var(--glas-kante)); }
.neu-datei-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px; background: var(--akzent-verlauf); color: #fff; }
.neu-datei-icon .ic { width: 24px; height: 24px; }
.neu-datei-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.neu-datei-haupt { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--text); }
.neu-datei-sub { font-size: 0.78rem; color: var(--text-leise); }
.neu-warte { color: var(--text-leise); margin-top: 14px; }

/* Bild-Upload im Rezept-Editor (Punkt 1.2): schlanke Variante von .neu-datei,
   .edit-bild-feld ersetzt das sonst uebliche <label> als Aussen-Wrapper (kein
   display:block/margin von .edit-form label noetig, das Innen-Label uebernimmt
   die Klickflaeche). */
.edit-bild-feld { margin-bottom: 16px; }
.edit-bild-label { display: block; font-weight: 600; margin-bottom: 6px; }
.edit-bild-label small { font-weight: 400; color: var(--text-leise); }
.edit-datei { padding: 12px 14px; }
.edit-datei .neu-datei-icon { width: 40px; height: 40px; }
.edit-datei .neu-datei-icon .ic { width: 20px; height: 20px; }
.neu-banner { background: color-mix(in srgb, var(--gut) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gut) 35%, transparent); color: var(--gut-dunkel); padding: 12px 14px; border-radius: var(--r-m); margin: 0 0 18px; font-weight: 500; }

/* Fortschrittsanzeige beim Upload (/neu) */
.neu-fortschritt { margin-top: 14px; }
.neu-fortschritt-track { height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--text-leise) 22%, transparent); }
/* Schimmer-Verlauf in den Variante-F-Farben, symmetrisch fuer nahtloses Looping */
.neu-fortschritt-balken { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #ff8b46, #e2603f, #9c3f8e, #e2603f, #ff8b46); background-size: 200% 100%; animation: neu-schimmer 1.6s linear infinite; transition: width .4s ease; }
.neu-fortschritt-text { color: var(--text-leise); margin: 8px 0 0; font-size: 0.95em; }
@keyframes neu-schimmer { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }

/* ============================================================
   Einkaufsliste v2 — mehrere Listen · Kacheln · Realtime
   ============================================================ */
.ek-app { position: relative; }
/* Kein eckiges Tap-Highlight auf Touch-Geräten */
.ek-list-pill, .ek-icon-btn, .ek-tile, .ek-row, .ek-mini-btn,
.ek-tag-toggle, .ek-pop-item, .ek-add-btn, .ek-tile-edit, .ek-row-edit, .ek-list-add,
.ek-import-row, .ek-cat-del, .ek-listwahl .btn-ghost { -webkit-tap-highlight-color: transparent; }

/* ---- Kopfzeile: Listen-Umschalter + Werkzeuge ---- */
.ek-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.ek-bar-label { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; color: var(--text-leise); text-transform: uppercase; letter-spacing: .05em; }
.ek-bar-label .ic { width: 1.1em; height: 1.1em; }
.ek-listen { display: flex; align-items: center; gap: 8px; overflow-x: auto; flex: 1 1 auto; padding: 2px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ek-listen::-webkit-scrollbar { height: 5px; }
.ek-listen::-webkit-scrollbar-thumb { background: var(--rand); border-radius: 5px; }
.ek-list-pill {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--karte) 65%, var(--bg)); color: var(--text); border: none; outline: none;
  border-radius: var(--r-pill); padding: 9px 16px; font-size: 0.95rem; font-weight: 600;
  font-family: var(--font-display); cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, box-shadow .12s;
}
.ek-list-pill:hover { background: var(--leaf-weich); color: var(--leaf-dunkel); }
.ek-list-pill:focus-visible { box-shadow: 0 0 0 3px var(--akzent-weich); }
.ek-list-pill.is-active { background: var(--akzent-verlauf); color: #fff; }
.ek-list-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  background: color-mix(in srgb, var(--leaf) 22%, transparent); color: var(--leaf-dunkel);
  border-radius: var(--r-pill); font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ek-list-pill.is-active .ek-list-badge { background: rgba(255,255,255,.28); color: #fff; }
/* Punkt 3.3: "Neue Liste" soll wie die Geschwister-Pills aussehen (gleicher
   Hintergrund/Radius/Hover/Focus aus .ek-list-pill), nur als reiner Icon-Button
   quadratisch statt mit Textbreite */
.ek-list-add { padding: 9px; width: 40px; justify-content: center; }
.ek-list-add .ic { width: 1.2em; height: 1.2em; }
.ek-bar-tools { display: flex; gap: 6px; flex: 0 0 auto; }
.ek-icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-m);
  border: 1px solid var(--glas-kante); color: var(--text); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ek-icon-btn:hover { background: var(--leaf-weich); color: var(--leaf-dunkel); border-color: transparent; }
.ek-icon-btn .ic { width: 1.3em; height: 1.3em; }

/* ---- Schnell hinzufügen ----
   Fest fixiert direkt UEBER dem Menueband. Im Ruhezustand nur Namensfeld +
   Plus sichtbar; Menge/Einheit stecken in .ek-add-details und klappen erst
   per .ist-offen auf (eigene Zeile, siehe flex:1 1 100% unten).
   Punkt 2: verschmilzt nahtlos mit der Tabbar darunter — gleicher Hintergrund/
   Blur wie .tabbar (gemeinsamer Glas-Selektor-Block oben), keine Grenzlinie,
   oben abgerundet, Schatten sitzt hier an der Oberkante der Gesamteinheit. */
.ek-add {
  display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap;
  position: fixed; left: 0; right: 0; bottom: var(--tabbar-hoehe); z-index: 79;
  margin: 0; padding: 10px 14px;
  border-radius: 22px 22px 0 0;
  box-shadow: var(--tabbar-schatten);
}
/* Punkt 3: Textfeld + Plus garantiert in einer Zeile. name-wrap ist flexibel
   (flex:1 1 auto, min-width:0 verhindert Aufblasen durchs Eingabefeld) und
   der Plus-Button starr (flex:0 0 auto) — beide zusammen passen immer in die
   erste Zeile. .ek-add-details (Menge/Einheit) hat flex:1 1 100% und wuerde
   dadurch in Flexbox IMMER einen Zeilenumbruch erzwingen, egal ob es per
   max-height:0 unsichtbar ist (Breitenberechnung ignoriert das) — im Markup
   steht .ek-add-details zwischen name-wrap und Button, daher per order()
   ans Ende der Flex-Reihenfolge geschoben, damit der Umbruch NACH dem
   Button passiert statt davor. */
.ek-add-name-wrap { position: relative; flex: 1 1 auto; min-width: 0; order: 1; }
.ek-add-name, .ek-add-feld {
  width: 100%; height: 48px; padding: 0 14px; font-size: 1rem; font-family: var(--font-body);
  background: color-mix(in srgb, var(--karte) 55%, transparent); border: 1px solid var(--rand); border-radius: var(--r-m); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.ek-add-name:focus, .ek-add-feld:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.ek-add-feld { flex: 0 0 86px; width: 86px; text-align: center; }
.ek-add-unit { flex-basis: 92px; width: 92px; }
.ek-add-btn { flex: 0 0 auto; width: 52px; min-height: 48px; padding: 0; display: grid; place-items: center; border-radius: var(--r-m); order: 2; }

/* Collapse-Bereich Menge/Einheit: zu, bis .ek-add die Klasse .ist-offen bekommt
   (JS toggelt sie bei Fokus/Eingabe des Namensfelds). order:3 stellt sicher,
   dass dieser Block immer NACH name-wrap+Button umbricht (Punkt 3). */
.ek-add-details {
  flex: 1 1 100%; display: flex; gap: 8px; order: 3;
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height .22s ease, opacity .18s ease, margin-top .22s ease;
}
.ek-add.ist-offen .ek-add-details { max-height: 60px; opacity: 1; margin-top: 8px; }
.ek-add.ist-offen .ek-add-feld { flex: 1 1 0; width: auto; }

/* Sichtbares 2x2-Aktionsraster (Mobile-Feinschliff Runde 3, Punkt 2): drei
   Buttons + Erledigt-Zaehler als viertes Feld (.ek-aktion-info, siehe unten).
   "Nach Tags sortieren" ist ins Listen-Menü-Popover gewandert (#ek-list-menu).
   Vorschlaege (.ek-quick) stehen im DOM/Layout darueber (Punkt 7), .ek-aktionen
   steht unter dem Board/allen Items (Punkt 6). Da jetzt nur 2 statt 3 Felder
   pro Reihe, etwas grosszuegigere Schrift/Innenabstand als zuvor. */
.ek-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 0; }
.ek-aktion-btn {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.86rem; padding: 10px 10px; text-align: center; line-height: 1.25;
}
.ek-aktion-btn.is-armed {
  color: var(--gefahr); border-color: color-mix(in srgb, var(--gefahr) 45%, var(--rand));
  /* Warn-Puls (war frueher an der alten Fussleiste, Keyframes siehe unten) */
  animation: ek-armpuls .9s ease-in-out infinite;
}
/* Viertes Feld: reine Anzeige ("X erledigt"), kein Button — kein Hover, keine
   Cursor-Pointer, dezentere Farbe/Gewicht, damit es klar von den drei
   klickbaren Aktionen unterscheidbar bleibt, aber optisch als gleichwertige
   Kachel im Raster steht (gleiche Groesse/Rahmen wie .ek-aktion-btn). */
.ek-aktion-info {
  width: 100%; min-height: 48px; padding: 10px 10px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--glas-kante); border-radius: var(--r-m);
  font-size: 0.86rem; font-weight: 600; color: var(--text-leise);
  cursor: default; user-select: none;
}
.ek-add-btn .ic { width: 1.5em; height: 1.5em; }

/* ---- Autocomplete ---- */
/* Dropdown oeffnet nach OBEN: .ek-add sitzt fix am unteren Rand, ein Dropdown
   nach unten wuerde hinter Tabbar/Bildschirmtastatur verschwinden. */
.ek-suggest {
  position: absolute; bottom: calc(100% + 6px); top: auto; left: 0; right: 0; z-index: 40;
  border: 1px solid var(--glas-kante); border-radius: var(--r-m);
  box-shadow: var(--schatten-hover); overflow: hidden; max-height: 280px; overflow-y: auto;
}
.ek-sugg-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--rand-weich); }
.ek-sugg-item:last-child { border-bottom: none; }
.ek-sugg-item:hover, .ek-sugg-item.is-akt { background: var(--leaf-weich); }
.ek-sugg-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.ek-sugg-name { flex: 1; font-weight: 500; }
.ek-sugg-unit { color: var(--text-leise); font-size: 0.875rem; font-weight: 500; }

/* ---- Board: Kategorie-Sektionen ---- */
.ek-board { display: flex; flex-direction: column; gap: 22px; }
.ek-kat { --cat: var(--leaf); }
/* Kopfzeile: gap 14px, weil die Hauch-Pille des Titels links ~8px ueber den
   Text hinausragt (asymmetrischer inset unten) — bleiben ~6px sichtbare Luft
   zum Icon. Icon 34px = effektive Hauch-Pillen-Hoehe (line-height 1.3 ->
   ~23px Text + 2 x 0.3em Hauch-Ueberstand). */
.ek-kat-kopf { display: flex; align-items: center; gap: 14px; margin: 0 0 11px; }
.ek-kat-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--cat) 22%, var(--karte));
  color: color-mix(in srgb, var(--cat) 82%, var(--text));
}
.ek-kat-icon .ic { width: 21px; height: 21px; }
.ek-kat-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); }
/* Hauch der Titel-Pille links kappen, damit er nicht ins Icon ragt (Standard
   ist -0.7em auf beiden Seiten); steht nach dem zentralen Hauch-Block und
   gewinnt bei gleicher Spezifitaet per Reihenfolge */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ek-kat-name::before { inset: -0.3em -0.7em -0.3em -0.45em; }
}
/* Zaehler-Chip liegt direkt auf dem Verlauf (die Kopfzeile selbst ist keine
   Glas-Flaeche) — dezente Glas-Optik statt schwacher Farbwolke, Kategorie-Farbe
   bleibt als Textakzent erhalten */
.ek-kat-zahl {
  margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; display: grid; place-items: center;
  background: var(--glas-fallback); border: 1px solid var(--glas-kante);
  color: color-mix(in srgb, var(--cat) 80%, var(--text));
  border-radius: var(--r-pill); font-size: 0.84rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ek-kat-zahl { background: var(--glas); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }
}

/* ---- Kachelansicht: neutrale Glas-Kacheln, Kategorie-Farbe nur als Kante + Punkt
   (statt Flaeche -- sonst faerben Bestandsfarben, z.B. Beige-Braun von „Sonstiges",
   die ganze Kachel ein; gleiche Lösung wie .ek-cat-zeile weiter unten) ---- */
.ek-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
/* Kein Blur hier (bewusst, anders als andere Glas-Flaechen): backdrop-filter
   auf scrollenden Kacheln erzeugt in Chrome/Android weisse Rand-Artefakte
   beim Scrollen. Stattdessen deckende milchige Flaeche in beiden Themes. */
.ek-tile {
  --cat: var(--leaf); position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; aspect-ratio: 1 / 1; padding: 14px 10px; cursor: pointer;
  border: 1px solid var(--glas-kante); border-left: 4px solid var(--cat); border-radius: var(--r-m);
  background: var(--glas-fallback); color: var(--text);
  box-shadow: var(--schatten); transition: transform .1s, box-shadow .12s, filter .12s, opacity .15s;
}
.ek-tile:hover { filter: brightness(1.05); box-shadow: var(--schatten-hover); }
.ek-tile:active { transform: scale(.98); }
.ek-tile-txt { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; width: 100%; line-height: 1.18; }
/* Umbruch: Silbentrennung (html lang="de") statt hartem Bruch mitten im Wort;
   overflow-wrap:break-word nur als Notnagel fuer untrennbare Ausreisser.
   max-width haelt das Flex-Item auf Kachelbreite, sonst waechst die Zeile
   mit dem laengsten Wort und es wird gar nicht erst umbrochen. */
.ek-tile-name { font-weight: 700; font-family: var(--font-display); font-size: 0.88rem; line-height: 1.18; letter-spacing: -0.02em; max-width: 100%; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; color: var(--text); }
.ek-tile-menge { font-size: 0.85rem; color: var(--text-leise); font-weight: 600; font-variant-numeric: tabular-nums; }
.ek-tile-note { font-size: 0.8rem; color: var(--text-leise); font-style: italic; max-width: 100%; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.ek-tile-edit {
  position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 28px; height: 28px;
  background: transparent; border: none; border-radius: 8px; color: var(--text-leise); cursor: pointer; transition: background .12s, color .12s;
}
.ek-tile-edit:hover { color: var(--text); background: color-mix(in srgb, var(--cat) 14%, transparent); }
.ek-tile-edit .ic { width: 18px; height: 18px; }
.ek-tile.is-checked { opacity: .5; }
.ek-tile.is-checked .ek-tile-name { text-decoration: line-through; }

/* ---- Listenansicht: farbige Karten (Tag oben, Name, Notiz/Menge unten) ---- */
.ek-items-list { display: flex; flex-direction: column; gap: 8px; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.ek-kat { margin-bottom: 16px; }
.ek-kat-flach { margin-bottom: 0; }
/* Kein Blur hier (bewusst, anders als andere Glas-Flaechen): backdrop-filter
   auf scrollenden Karten erzeugt in Chrome/Android weisse Rand-Artefakte
   beim Scrollen. Stattdessen deckende milchige Flaeche in beiden Themes. */
.ek-row {
  --cat: var(--leaf); position: relative; display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "tags edit" "name edit" "meta edit";
  /* Zeilen wachsen mit Inhalt (kein fester Tag-Reserveplatz) -> Text bleibt mittig */
  align-items: center; align-content: center; column-gap: 8px; row-gap: 2px;
  min-height: 84px; box-sizing: border-box; /* alle Karten gleich hoch, ob Tag/Menge oder nicht; Inhalt vertikal zentriert */
  padding: 10px 14px; cursor: pointer;
  border: 1px solid var(--glas-kante); border-left: 4px solid var(--cat); border-radius: var(--r-m);
  background: var(--glas-fallback);
  color: var(--text); box-shadow: var(--schatten); transition: transform .08s, filter .12s;
}
.ek-row:hover { filter: brightness(1.05); }
.ek-row:active { transform: scale(.992); }
.ek-row-tags { grid-area: tags; display: flex; gap: 5px; flex-wrap: nowrap; align-items: center; height: 20px; overflow: hidden; }
.ek-row-name { grid-area: name; min-width: 0; font-weight: 700; font-size: 0.98rem; line-height: 1.2; overflow-wrap: anywhere; color: var(--text); }
.ek-row-meta { grid-area: meta; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 1px; }
.ek-row-note { min-width: 0; color: var(--text-leise); font-style: italic; font-size: 0.85rem; overflow-wrap: anywhere; }
.ek-row-menge { color: var(--text-leise); font-weight: 600; font-size: 0.86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ek-row-edit { grid-area: edit; align-self: center; background: none; border: none; color: var(--text-leise); cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.ek-row-edit:hover { color: var(--text); background: color-mix(in srgb, var(--cat) 14%, transparent); }
.ek-row-edit .ic { width: 20px; height: 20px; }
.ek-row.is-checked { opacity: .5; }
.ek-row.is-checked .ek-row-name { text-decoration: line-through; }

/* ---- Tags (Markierungen) als Symbol-Badges ---- */
.ek-tag {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: none;
  background: color-mix(in srgb, var(--tg) 22%, var(--karte));
  color: color-mix(in srgb, var(--tg) 85%, var(--text));
}
.ek-tag .ic { width: 13px; height: 13px; }
/* Auf der (jetzt neutralen Glas-)Listenkarte: Symbole wie im Standardfall eingefaerbt */
.ek-row .ek-tag { width: 18px; height: 18px; }
.ek-row .ek-tag .ic { width: 12px; height: 12px; }
/* Kachel: Tag-Symbole oben links */
.ek-tile-tags { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; flex-wrap: wrap; max-width: 70%; pointer-events: none; }
.ek-tag-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ek-tag-toggle {
  display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; white-space: nowrap; letter-spacing: -0.01em;
  padding: 9px 4px; border-radius: var(--r-pill); font-size: 0.8rem; font-weight: 600; cursor: pointer;
  background: var(--bg); border: 1px solid var(--rand); color: var(--text-leise);
  transition: background .12s, color .12s, border-color .12s;
}
.ek-tag-toggle .ic { width: 14px; height: 14px; flex: 0 0 auto; }
.ek-tag-toggle.is-on {
  background: color-mix(in srgb, var(--tg) 18%, var(--karte));
  color: color-mix(in srgb, var(--tg) 78%, var(--text));
  border-color: color-mix(in srgb, var(--tg) 46%, transparent);
}

/* (Board-Fußleiste .ek-foot* entfernt 12.07.2026 — Markup existiert seit dem
   Umbau auf das 2x2-Aktionsraster .ek-aktionen nicht mehr; die Armier-Animation
   ek-armpuls bleibt, sie wird von .ek-aktion-btn.is-armed weiterverwendet.) */
@keyframes ek-armpuls { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gefahr) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }

/* ---- Leerzustand ---- */
.ek-leer { text-align: center; color: var(--text-leise); padding: 50px 16px; }
.ek-leer-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--leaf-weich); color: var(--leaf); }
.ek-leer-icon .ic { width: 32px; height: 32px; }
.ek-leer p { margin: 4px 0; }
.ek-leer-hint { font-size: 0.9rem; opacity: .8; }

/* ---- Aktivitäts-Toasts ---- */
.ek-toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: min(86vw, 340px); }
.ek-toast {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--glas-kante);
  border-left: 3px solid var(--akzent); border-radius: var(--r-m); padding: 10px 13px; box-shadow: var(--schatten-hover);
  font-size: 0.9rem; transform: translateY(10px); opacity: 0; transition: transform .25s, opacity .25s;
}
.ek-toast.ein { transform: translateY(0); opacity: 1; }
.ek-toast b { color: var(--akzent-dunkel); font-family: var(--font-display); }
.ek-toast-ic { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; background: var(--akzent-weich); color: var(--akzent-dunkel); border-radius: 50%; }
.ek-toast-ic .ic { width: 15px; height: 15px; }
.ek-toast-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Bottom-Sheet / Modal ----
   Das Sheet muss ueber der Tabbar liegen UND bis zum unteren Bildschirmrand
   reichen (das Dock wird komplett ueberlagert) — sonst frisst die alte
   Bottom-Reservierung Platz weg und der untere Sheet-Rand samt Aktions-Buttons
   landet optisch/interaktiv hinter der Tabbar (z-index 80, siehe .tabbar).
   Deshalb: Overlay-z-index ueber der Tabbar, keine Bottom-Reservierung mehr im
   Overlay-Padding, das Sheet selbst traegt die Sicherheitszone unten ueber
   padding-bottom + env(safe-area-inset-bottom). */
.ek-sheet-overlay {
  position: fixed; inset: 0; z-index: 85; background: rgba(20,14,8,.46);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 12px; backdrop-filter: blur(2px);
}
.ek-sheet {
  width: 100%; max-width: 560px; border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--schatten-hover);
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  /* dvh statt vh: mobile Browser-Leisten (Adresszeile etc.) sollen die
     verfuegbare Sheet-Hoehe nicht verfaelschen. vh bleibt als Fallback fuer
     Browser ohne dvh-Unterstuetzung stehen. */
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto; animation: ek-sheet-rein .22s ease;
}
@keyframes ek-sheet-rein { from { transform: translateY(24px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
.ek-sheet-griff { width: 40px; height: 4px; border-radius: 4px; background: var(--rand); margin: 4px auto 12px; }
.ek-sheet-titel { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 16px; }
.ek-sheet-form { display: flex; flex-direction: column; gap: 13px; }
.ek-feld-label { display: flex; flex-direction: column; gap: 5px; font-size: 0.86rem; font-weight: 600; color: var(--text-leise); flex: 1; }
.ek-feld-row { display: flex; gap: 12px; }
.ek-feld-label input, .ek-feld-label select {
  height: 44px; padding: 0 12px; font-size: 1rem; font-family: var(--font-body); color: var(--text);
  background: color-mix(in srgb, var(--karte) 55%, transparent); border: 1px solid var(--rand); border-radius: var(--r-m);
}
.ek-feld-label input:focus, .ek-feld-label select:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
/* Fixer Fuss innerhalb des Sheet-Scrollcontainers: .ek-sheet ist der einzige
   Scroll-Container (overflow-y:auto), .ek-sheet-aktionen bleibt darin per
   position:sticky immer am unteren Rand sichtbar (z.B. Speichern-Button beim
   Artikel-Sheet in einkaufsliste.ejs) — kein zweites Scrollen mehr noetig, um
   an den Button zu kommen. Eigener Hintergrund + Schatten, damit darunter
   scrollender Inhalt nicht durchscheint. */
.ek-sheet-aktionen {
  display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: nowrap;
  position: sticky; bottom: 0; z-index: 1;
  background: var(--glas-fallback-stark);
  padding: 10px 0 2px;
  box-shadow: 0 -10px 14px -10px rgba(0,0,0,.16);
}
.ek-sheet-aktionen-ende { justify-content: flex-end; }
.ek-sheet .btn-primary, .ek-sheet .btn-ghost, .ek-sheet .btn-gefahr { width: auto; padding: 0 18px; min-height: 44px; }
/* Löschen als kompaktes Mülleimer-Icon, damit Löschen / Abbrechen / Speichern in eine Zeile passen */
.ek-del-icon { flex: 0 0 auto; width: 46px; min-width: 46px; padding: 0; display: grid; place-items: center; }
.ek-del-icon .ic { width: 20px; height: 20px; }
#ek-item-abbruch { margin-left: auto; }

/* ---- Kategorie-Manager ---- */
.ek-sheet-gross { max-width: 600px; }
.ek-cat-liste { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
/* Kategorie-Farbe nur als Akzent (Vorschau-Chip + linke Kante), nicht als Flaeche —
   sonst faerben Bestandsfarben (z.B. Beige-Braun von „Sonstiges") die Glas-Zeile ein. */
.ek-cat-zeile { --cat: var(--leaf); display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--glas-kante); border-left: 4px solid var(--cat); border-radius: var(--r-m); }
.ek-cat-vorschau { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; background: color-mix(in srgb, var(--cat) 26%, var(--karte)); color: color-mix(in srgb, var(--cat) 85%, var(--text)); }
.ek-cat-vorschau .ic { width: 19px; height: 19px; }
.ek-cat-color { width: 38px; height: 38px; flex: 0 0 auto; padding: 0; border: 1px solid var(--rand); border-radius: 9px; background: none; cursor: pointer; }
.ek-cat-color::-webkit-color-swatch-wrapper { padding: 3px; }
.ek-cat-color::-webkit-color-swatch { border: none; border-radius: 6px; }
.ek-cat-name { flex: 1; min-width: 0; height: 38px; padding: 0 11px; font-size: 0.95rem; color: var(--text); background: color-mix(in srgb, var(--karte) 55%, transparent); border: 1px solid var(--rand); border-radius: var(--r-m); }
.ek-cat-icon { flex: 0 0 auto; height: 38px; max-width: 110px; padding: 0 8px; color: var(--text); background: color-mix(in srgb, var(--karte) 55%, transparent); border: 1px solid var(--rand); border-radius: var(--r-m); }
.ek-cat-del { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; background: none; border: none; color: var(--text-leise); cursor: pointer; border-radius: 8px; }
.ek-cat-del:hover { color: var(--gefahr); background: color-mix(in srgb, var(--gefahr) 9%, transparent); }
.ek-cat-std { width: 36px; text-align: center; color: var(--leaf); flex: 0 0 auto; }
.ek-cat-neu { width: 100%; justify-content: center; margin-bottom: 8px; }

/* ---- Rezept-Import-Dialog ---- */
.ek-import-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 8px; font-size: 0.82rem; font-weight: 700; color: var(--text-leise); text-transform: uppercase; letter-spacing: .04em; }
.ek-import-quick { display: flex; gap: 6px; }
.ek-mini-btn { background: color-mix(in srgb, var(--karte) 40%, transparent); border: 1px solid var(--rand); color: var(--text-leise); border-radius: var(--r-pill); padding: 4px 12px; font-size: 0.82rem; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; }
.ek-mini-btn:hover { background: var(--leaf-weich); color: var(--leaf-dunkel); border-color: transparent; }
.ek-import-items { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; max-height: 42vh; overflow-y: auto; border: 1px solid var(--rand-weich); border-radius: var(--r-m); padding: 4px; }
.ek-import-row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.ek-import-row:hover { background: var(--leaf-weich); }
.ek-import-row input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; accent-color: var(--akzent); cursor: pointer; }
.ek-import-name { flex: 1; font-weight: 500; }
.ek-import-menge { color: var(--text-leise); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ek-import-row input:not(:checked) ~ .ek-import-name,
.ek-import-row input:not(:checked) ~ .ek-import-menge { opacity: .4; }

/* ---- Listenwahl (Planer-Import) ---- */
.ek-listwahl { display: flex; flex-direction: column; gap: 8px; }
.ek-listwahl .btn-ghost { width: 100%; min-height: 48px; justify-content: center; font-size: 1rem; }

/* ---- Listen-Popover ---- */
.ek-pop { position: fixed; z-index: 65; border: 1px solid var(--glas-kante); border-radius: var(--r-m); box-shadow: var(--schatten-hover); padding: 6px; min-width: 220px; }
.ek-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; color: var(--text); padding: 10px 12px; border-radius: 9px; font-size: 0.93rem; cursor: pointer; text-align: left; }
.ek-pop-item:hover { background: var(--leaf-weich); color: var(--leaf-dunkel); }
.ek-pop-item .ic { width: 1.15em; height: 1.15em; color: var(--text-leise); }
.ek-pop-item:hover .ic { color: inherit; }
.ek-pop-sep { height: 1px; background: var(--rand-weich); margin: 5px 4px; }
.ek-pop-gefahr:hover { background: color-mix(in srgb, var(--gefahr) 9%, transparent); color: var(--gefahr); }
.ek-pop-gefahr:hover .ic { color: var(--gefahr); }

/* ---- Schnellvorschläge: häufig gekauft ---- */
/* Scrollbar dezent: scrollbar-color ist noetig, weil Chrome bei gesetztem
   scrollbar-width die ::-webkit-scrollbar-Styles ignoriert und sonst die
   klobige Systemfarbe zeigt; die Webkit-Regeln bleiben als Safari-Fallback */
.ek-quick { display: flex; gap: 7px; flex-wrap: nowrap; overflow-x: auto; margin: 16px 0 18px; padding: 2px; scrollbar-width: thin; scrollbar-color: var(--glas-kante) transparent; -webkit-overflow-scrolling: touch; }
.ek-quick::-webkit-scrollbar { height: 6px; background: transparent; }
.ek-quick::-webkit-scrollbar-track { background: transparent; }
.ek-quick::-webkit-scrollbar-thumb { background: var(--glas-kante); border-radius: 5px; }
.ek-quick-chip {
  --cat: var(--leaf); display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  border: 1px solid var(--glas-kante); color: var(--text);
  border-radius: var(--r-pill); padding: 7px 13px; font-size: 0.88rem; font-weight: 600;
  font-family: var(--font-display); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
}
.ek-quick-chip:hover { background: color-mix(in srgb, var(--cat) 12%, var(--karte)); border-color: color-mix(in srgb, var(--cat) 40%, transparent); }
.ek-quick-chip:active { transform: scale(.96); }
.ek-quick-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--cat); }

/* ---- Mengen-Stepper im Bearbeiten-Sheet ---- */
.ek-qty-stepper { display: flex; align-items: stretch; gap: 8px; }
.ek-qty-stepper input { flex: 1 1 auto; min-width: 0; text-align: center; }
.ek-qty-btn {
  flex: 0 0 44px; width: 44px; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--karte) 45%, transparent); border: 1px solid var(--rand); border-radius: var(--r-m); color: var(--text);
  transition: background .15s, color .15s, border-color .15s;
}
.ek-qty-btn:hover { background: var(--leaf-weich); color: var(--leaf-dunkel); border-color: transparent; }
.ek-qty-btn:active { transform: scale(.94); }
.ek-qty-btn .ic { width: 1.3em; height: 1.3em; }

/* ---- Feedback beim Abhaken ---- */
.ek-tile.ek-just { animation: ek-tilepop .34s ease; }
.ek-row.ek-just { animation: ek-rowflash .42s ease; }
@keyframes ek-tilepop { 0% { transform: scale(.92); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes ek-rowflash { 0% { background: color-mix(in srgb, var(--gut) 22%, transparent); } 100% { background: transparent; } }

/* ---- Mobile ---- */
@media (max-width: 540px) {
  /* Punkt 3: Textfeld + Plus bleiben auch auf Mobil garantiert in Zeile 1
     (kein order/100%-Zwang mehr auf .ek-add-name-wrap). Nur .ek-add-details
     (Menge/Einheit, aufklappbar per .ist-offen) bricht in eine eigene Zeile. */
  .ek-add { flex-wrap: wrap; }
  .ek-add-feld { flex: 1 1 0; width: auto; min-width: 0; }
  .ek-add-btn { flex: 0 0 52px; }
  .ek-feld-row { flex-direction: column; gap: 13px; }

  /* 2) "LISTEN"-Label ausblenden, mehr Platz für die Listen-Pills */
  .ek-bar-label { display: none; }

  /* 3) Bearbeiten-Punkt auf der Kachel größer antippbar */
  .ek-tile-edit { width: 38px; height: 38px; top: 3px; right: 3px; }

  /* 5) Listen-Pills auf 42px Höhe */
  .ek-list-pill { min-height: 42px; }
}

/* ============================================================
   Gruppen-Feature: sichtbarer Kontext, NEU-Markierungen, Neuigkeiten-Punkt
   (additiv, Theme "Glas" — gruenlicher Schimmer als Signalfarbe)
   ============================================================ */

/* NEU-Badge auf Rezept-Kacheln — seit Overhaul 10.07. oben RECHTS
   (links unten sitzt jetzt das Kategorie-Badge) */
.badge-neu {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--akzent-verlauf); color: #fff; font-size: .68rem; font-weight: 800;
  letter-spacing: .04em; padding: 2px 8px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* Kontext-Hinweis auf Formularen ("Wird gespeichert in: …") */
.ctx-hinweis {
  display: inline-flex; align-items: center; gap: 6px; font-size: .84rem;
  color: var(--text); background: color-mix(in srgb, #5fae7a 18%, var(--glas-fallback, #fbf3fb));
  padding: 4px 10px; border-radius: 999px; margin: 2px 0 12px;
  border: 1px solid var(--glas-kante);
}
.ctx-hinweis svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Avatare: runde Kreise, einzeln oder gestapelt (Kommentare, Mitgliederlisten,
   Familien-Stack im Header) - Vorlage: Wiegenzeit-App public/styles.css Z.761ff,
   Farben an glas.css-Variablen angepasst (Dark Mode faehig). */
.avatar-circle {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  border: 2px solid var(--karte); background: var(--leaf); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; box-sizing: content-box;
}
.avatar-circle img { width: 100%; height: 100%; display: block; object-fit: cover; }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar-circle:not(:first-child) { margin-left: -10px; }
.avatar-circle.avatar-more { background: var(--text-leise); font-size: .64rem; }

/* Avatar-Auswahl (Konto, Einladung neuer Konten): Grid aus anklickbaren Kreisen */
.avatar-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
/* Eingeklappte Avatar-Auswahl (Konto-Modal) */
.avatar-aufklapper { margin: 6px 0; }
.avatar-summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; padding: 4px 0; min-height: 44px; list-style: none; }
.avatar-summary::-webkit-details-marker { display: none; }
.avatar-aufklapper .avatar-grid { margin-top: 10px; }
/* .avatar-grid setzt display:flex mit hoeherer Spezifitaet als die
   UA-Regel "details:not([open]) > *:not(summary)" — ohne diese Regel
   bliebe das Grid auch eingeklappt sichtbar. */
.avatar-aufklapper:not([open]) .avatar-grid { display: none; }
.avatar-swatch { border: 0; background: transparent; padding: 2px; cursor: pointer; border-radius: 50%; line-height: 0; }
.avatar-swatch .avatar-circle { width: 46px; height: 46px; }
.avatar-swatch.is-active { box-shadow: 0 0 0 3px var(--akzent); }
.avatar-swatch:active { transform: scale(.94); }
.avatar-swatch--reset .avatar-circle { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }

/* Privat-Badge auf Rezept-Kacheln (Familien-Modell, Phase 2): teilt sich die
   Form mit .badge-neu, sitzt aber oben LINKS (frei, da kat-badge unten links
   und badge-neu oben rechts sitzen) und ist dezent grau statt Akzentfarbe. */
.badge-neu.badge-privat {
  top: 8px; right: auto; left: 8px;
  background: rgba(20,10,25,.62); display: inline-flex; align-items: center; gap: 3px;
}
.badge-neu.badge-privat svg { width: .9em; height: .9em; vertical-align: -1px; }

/* NEU-Badge auf Einkaufslisten-Kacheln/-Zeilen */
.ek-tile .badge-neu { top: 6px; left: 6px; right: auto; }
.ek-row .badge-neu--row {
  position: static; display: inline-block; margin-right: 6px;
  background: var(--akzent-verlauf); color: #fff; font-size: .62rem; font-weight: 800;
  letter-spacing: .04em; padding: 1px 6px; border-radius: 999px;
  vertical-align: middle;
}

/* Tipp-Banner "Wiederherstellungs-Codes anlegen" (Markup+Basis-Styles kommen aus
   header.ejs, per Inline-<style> NACH glas.css geladen) — die Selektoren hier
   sind bewusst mit "body" praefigiert fuer hoehere Spezifitaet, damit sie im
   Glas-Theme gewinnen, ohne die View anzufassen. Vorher: schwacher, kaum
   deckender Farbschleier auf dem Verlauf, jetzt: echte Glas-Flaeche wie der
   Rest des Themes, Text in kraeftigem --text statt "inherit"/leise. */
body .hinweis-codes-banner {
  background: var(--glas-fallback);
  border: 1px solid var(--glas-kante);
  color: var(--text);
  box-shadow: var(--schatten);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  body .hinweis-codes-banner { background: var(--glas); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }
}
body .hinweis-codes-banner a, body .hinweis-codes-banner .hinweis-codes-link { color: var(--akzent-dunkel); }
body .hinweis-codes-x { color: var(--text); opacity: .85; }
body .hinweis-codes-x:hover { opacity: 1; }

/* Admin-Panel: aktiver Design-Umschalter kommt als Inline-<style> aus admin.ejs
   (flaches Akzent-Orange) — gleiches body-Praefix-Muster wie beim Tipp-Banner,
   damit der Sonnenuntergangs-Verlauf ohne View-Aenderung gewinnt */
body .admin-inline-form button.is-active {
  background: var(--akzent-verlauf);
  color: #fff;
  border-color: transparent;
}

/* ---------------- Teilen-Sheet (Phase 4) ----------------
   Bottom-Sheet wiederverwendet .ek-sheet-overlay/.ek-sheet (Glas-Optik, Blur,
   Rand, Animation kommen von dort) — hier nur die share-spezifischen Inhalte:
   Personen-Liste mit Recht-Auswahl + Auto-Teilen-Schalter, Link-Box, Hinweise. */
.share-sect { margin: 0 0 16px; }
.share-sect-titel { margin: 0 0 8px; font-size: .92rem; font-weight: 700; }
.share-hint { margin: 0; font-size: .82rem; color: var(--text-leise); }
.share-personen { display: flex; flex-direction: column; gap: 10px; }
.share-leer { margin: 0; font-size: .88rem; color: var(--text-leise); }
.share-person {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 9px 10px; border: 1px solid var(--rand); border-radius: var(--r-m);
}
.share-person-info { display: flex; align-items: center; gap: 9px; font-size: .9rem; flex: 1 1 auto; min-width: 0; }
.share-person-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-recht {
  height: 38px; padding: 0 8px; font-size: .86rem; font-family: var(--font-body); color: var(--text);
  background: color-mix(in srgb, var(--karte) 55%, transparent); border: 1px solid var(--rand); border-radius: var(--r-s);
}
.share-auto {
  display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-leise);
  flex: 1 1 100%; padding-left: 2px;
}
.share-auto input { width: 16px; height: 16px; }
.share-link-box { display: flex; flex-direction: column; gap: 8px; }
.share-link-status { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; font-size: .9rem; }
.share-link-status .ic { width: 18px; height: 18px; color: var(--gut, var(--akzent)); }
.share-link-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.share-native-btn { width: 100%; justify-content: center; }
.share-manage { margin: 4px 0 14px; font-size: .84rem; }
.share-manage a { color: inherit; text-decoration: underline; }
.share-toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 200; background: var(--akzent-verlauf); color: #fff; padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); font-size: .88rem; text-align: center;
}
.btn-teilen { display: inline-flex; align-items: center; gap: 7px; }
.planer-teilen-btn { align-self: flex-start; }

/* ---------------- Gruppen / Bagaluten (zentralisiert aus familie.ejs & gruppen.ejs,
   vorher fast identische <style>-Bloecke in beiden Views) ---------------- */
.grp-wrap { max-width: 760px; margin: 0 auto; }
.grp-intro { color: var(--text-leise); font-size: .94rem; margin-bottom: 18px; }
.grp-banner { padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: .92rem; }
.grp-banner--ok { background: color-mix(in srgb, var(--leaf) 18%, transparent); }
.grp-banner--fehler { background: color-mix(in srgb, var(--gefahr) 18%, transparent); }
.grp-neu { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.grp-neu input[type=text] { flex: 1 1 220px; font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--rand); min-height: 44px; box-sizing: border-box; }
/* Hintergrund/Rahmen kommen aus dem Glas-Grundflaechen-Block weiter oben
   (.grp-karte ist dort Teil der Glas-Flaeche) — hier nur Layout. */
.grp-karte { border-radius: 14px; padding: 16px; margin-bottom: 18px; }
.grp-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.grp-name { font-size: 1.15rem; font-weight: 700; margin: 0; }
.grp-badge { font-size: .76rem; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--akzent) 16%, transparent); font-weight: 600; }
.grp-badge--aktiv { background: color-mix(in srgb, var(--leaf) 22%, transparent); }
.grp-mitglieder { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.grp-mitglied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.grp-mitglied-name { font-weight: 600; flex: 1 1 auto; min-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-mitglied-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.grp-mitglied form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
/* Touch-Target: Rollen-Select war ~26px hoch (nur font+padding 4px 7px) */
.grp-mitglied select { font: inherit; padding: 8px 10px; border-radius: 8px; min-height: 44px; box-sizing: border-box; }
/* 375px-Referenz: Rollen-Select + Entfernen-Button brachen bisher uneinheitlich um
   (Select landete neben dem Namen, Entfernen-Button rutschte allein in eine dritte
   Zeile). Jetzt: Name+Avatar feste erste Zeile (Name mit Ellipsis), die Controls
   (.grp-mitglied-controls, neuer Wrapper um beide Formulare) erzwingen per
   flex-basis:100% eine gemeinsame zweite Zeile. */
@media (max-width: 480px) {
  .grp-mitglied-controls { flex-basis: 100%; }
  .grp-mitglied-controls form { flex: 1 1 auto; }
  .grp-mitglied-controls select { width: 100%; }
}
.grp-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: flex-start; }
.grp-aktionen form { margin: 0; }
.grp-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rand); }
.grp-block h3 { font-size: .9rem; margin: 0 0 8px; color: var(--text-leise); }
.grp-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Touch-Target: Eingabefelder waren ~33px hoch (padding 7px 10px) */
.grp-add select, .grp-add input { font: inherit; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--rand); min-height: 44px; box-sizing: border-box; }
/* Touch-Target: .grp-mini war ~28px hoch (padding 5px 11px) — jetzt 44px, wie
   der Referenz-Massstab .set-row. Farbvariante .grp-mini--gefahr bleibt als
   Alias-Klasse fuer .btn-gefahr-klein bestehen (siehe Buttons-Abschnitt),
   Groesse ist jetzt identisch mit dieser. */
.grp-mini {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--rand);
  background: transparent; cursor: pointer; min-height: 44px; box-sizing: border-box;
}
.grp-mini--gefahr { color: var(--gefahr); border-color: color-mix(in srgb, var(--gefahr) 50%, transparent); }
.grp-loeschen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grp-loeschen input { font: inherit; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--rand); min-height: 44px; box-sizing: border-box; }
.grp-leer { color: var(--text-leise); }
.grp-link-box { background: color-mix(in srgb, var(--leaf) 12%, transparent); border: 1px solid color-mix(in srgb, var(--leaf) 35%, transparent); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.grp-link-box p { margin: 0 0 8px; font-size: .9rem; }
.grp-link-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grp-link-zeile input { flex: 1 1 260px; font: inherit; font-size: .85rem; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--rand); background: var(--karte); min-height: 44px; box-sizing: border-box; }
/* 375px: Button brach bisher in eine halbe Zeile mit Luecke daneben. Sauberer
   Stapel: Feld und Button je volle Breite untereinander. */
@media (max-width: 480px) {
  .grp-link-zeile { flex-direction: column; align-items: stretch; }
  /* flex-basis:260px (s.o.) wird im Column-Flow zur Hoehen-Vorgabe statt
     Breite -> hier auf auto zuruecksetzen, sonst 260px hohes Eingabefeld. */
  .grp-link-zeile input { flex: 1 1 auto; width: 100%; }
  .grp-link-zeile .btn-primary { width: 100%; }
}
.grp-einladungen { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.grp-einladung { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border-radius: 9px; background: color-mix(in srgb, var(--text) 5%, transparent); font-size: .86rem; }
.grp-einladung form { margin: 0; }
.grp-aktivitaet { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 5px; font-size: .86rem; }
.grp-aktivitaet li { padding: 2px 0; }
.grp-aktivitaet a { color: inherit; text-decoration: underline; }
.grp-aktivitaet-zeit { color: var(--text-leise); font-size: .8rem; }

/* ---------------- Kopfzeile: Familien-Popover & Codes-Hinweis-Banner
   (zentralisiert aus views/partials/header.ejs) ---------------- */
.fam-wrap { position: relative; margin-left: auto; }
.fam-btn { border: 0; background: transparent; padding: 2px; cursor: pointer; border-radius: 999px;
  display: inline-flex; align-items: center; }
.fam-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: min(280px, 84vw);
  background: var(--karte); border: 1px solid var(--rand); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow: hidden; }
.fam-pop-kopf { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--rand); }
.fam-pop-kopf .avatar-circle { width: 40px; height: 40px; font-size: .92rem; }
.fam-pop-name { font-weight: 700; }
.fam-pop-liste { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  max-height: 220px; overflow-y: auto; }
.fam-pop-liste li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; font-size: .88rem; }
.fam-pop-liste .avatar-circle { width: 26px; height: 26px; font-size: .64rem; border-width: 1px; }
.fam-pop-fuss { display: flex; flex-direction: column; border-top: 1px solid var(--rand); padding: 6px; }
.fam-pop-fuss a, .fam-pop-fuss .fam-pop-konto { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px;
  color: inherit; text-decoration: none; font-size: .9rem; }
.fam-pop-fuss .fam-pop-konto { width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.fam-pop-fuss a svg, .fam-pop-fuss .fam-pop-konto svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; }
.fam-pop-fuss a:hover, .fam-pop-fuss .fam-pop-konto:hover { background: color-mix(in srgb, currentColor 9%, transparent); }

/* Aktiver Kontext im Kopf + Umschalter (Bagaluten wechseln / Privat) */
.fam-btn { position: relative; }
.fam-btn-dot { position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--akzent); border: 2px solid var(--karte); }
.fam-pop-kopf-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fam-pop-aktiv { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--text-leise); }
.fam-pop-aktiv svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .8; }
.fam-pop-switch { border-top: 1px solid var(--rand); padding: 8px 6px 6px; display: flex; flex-direction: column; gap: 3px; }
.fam-pop-switch-titel { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); padding: 0 6px 3px; }
.fam-switch-form { margin: 0; }
.fam-switch { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 9px;
  background: none; cursor: pointer; font-family: inherit; text-align: left; color: inherit; }
.fam-switch:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.fam-switch.is-aktiv { background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.fam-switch-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.fam-switch-name { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fam-switch-meta { font-size: .72rem; color: var(--text-leise); }
.fam-switch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); flex: 0 0 auto; }
.fam-switch-check { color: var(--akzent); font-weight: 700; flex: 0 0 auto; }

.hinweis-codes-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--akzent) 30%, transparent);
  border-radius: 10px; padding: 8px 12px; margin: 10px 0; font-size: .88rem; }
.hinweis-codes-banner svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.hinweis-codes-banner a, .hinweis-codes-banner .hinweis-codes-link { color: inherit; text-decoration: underline; font-weight: 600; }
.hinweis-codes-banner .hinweis-codes-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.hinweis-codes-ausblenden { margin: 0; }
.hinweis-codes-x { background: transparent; border: 0; font-size: 1.2rem; line-height: 1; cursor: pointer; color: inherit; opacity: .7; padding: 2px 6px; }
.hinweis-codes-x:hover { opacity: 1; }

/* ---------------- Admin-Panel (zentralisiert aus views/admin.ejs) ---------------- */
/* 375px-Referenz: die 4 Chips (Codes/Passwort/Umbenennen/Löschen) hatten je
   ihre eigene, textabhaengige Breite -> wirkte bei ungleicher Laenge unruhig,
   besonders wenn sie einzeln umbrachen. Jetzt Grid mit gleich breiten Spalten,
   Loeschen (Gefahr) bleibt eigene volle Zeile. */
.admin-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; align-items: start; }
.admin-detail { min-width: 0; }
.admin-detail > summary { width: 100%; box-sizing: border-box; justify-content: center; }
/* Details-Marker global entfernt siehe "summary.btn-ghost, summary.btn-gefahr-klein"
   im Buttons-Abschnitt — hier nur noch Layout. */
.admin-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; max-width: 100%; }
.admin-inline-form input[type="text"] { padding: 7px 9px; min-width: 180px; }
.admin-detail-gefahr { grid-column: 1 / -1; }
.admin-del-form { flex-direction: column; align-items: stretch; max-width: 460px; }
.admin-warn { margin: 8px 0 4px; font-size: .9rem; }
.admin-confirm-label { display: block; font-size: .88rem; }
.admin-confirm-input { display: block; margin-top: 4px; width: 100%; padding: 7px 9px; }
.admin-del-btn { margin-top: 8px; align-self: flex-start; }
.admin-del-btn[disabled] { opacity: .5; cursor: not-allowed; }
.admin-hinweis { display: block; margin-top: 6px; color: var(--text-leise); }
.rk-neu-box { border: 1px solid var(--rand); border-radius: 12px; padding: 14px 16px; margin: 10px 0 18px; background: var(--karte); }
.rk-neu-warnung { color: var(--gefahr); margin: 0 0 10px; }
.rk-code-liste { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.rk-code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 1.05rem; font-weight: 700;
  letter-spacing: .04em; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--text) 6%, transparent); text-align: center; }
.rk-kopiert-status { margin-left: 8px; color: var(--gut-dunkel); font-weight: 600; }
/* Handy: Formularfelder untereinander, damit sie nicht ueber den Kartenrand ragen */
@media (max-width: 480px) {
  .admin-inline-form { flex-direction: column; align-items: stretch; }
  .admin-inline-form input[type="text"],
  .admin-inline-form input[type="password"],
  .admin-inline-form button { width: 100%; min-width: 0; box-sizing: border-box; }
  /* Hoehere Spezifitaet (.profile-form .admin-profile-grid) bewusst, damit diese
     Admin-spezifische Ein-Spalten-Ansicht unabhaengig von der Reihenfolge der
     CSS-Dateien zuverlaessig ueber der allgemeinen .profile-grid-Regel (aus
     naehrwerte.css) steht, ohne profile.ejs' eigenes .profile-grid zu beeinflussen. */
  .profile-form .admin-profile-grid { grid-template-columns: 1fr; }
  /* Chips bei 375px alle in einer Spalte, statt auto-fit mit wechselnder
     Spaltenzahl je nach Textlaenge. */
  .admin-actions { grid-template-columns: 1fr; }
}