/* =====================================================================
   Seiten-Neugestaltung (26.09.2026, Folgeschritt der Frontend-Huelle)
   Eigene Datei statt style.css, damit parallele Sessions sich nicht in der
   gemeinsamen Datei ueberschreiben (siehe CLAUDE.md "Parallelarbeit"). Laedt
   NACH style.css und nutzt ausschliesslich deren Theme-Variablen
   (--surface, --border, --ink, --accent-strong, --radius-card, ...), damit alle
   drei Themes automatisch mitziehen. Pro Seite ein eigener Abschnitt.
   ===================================================================== */

/* ---------- Mein Konto > Einstellungen ---------- */
/* Ein zweispaltiges Raster fuer alle Karten statt wechselnder Einzel-/Paar-Zeilen.
   Karten einer Zeile sind gleich hoch, die Aktion sitzt jeweils unten. */
.settings-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; align-items:stretch;
}
.settings-grid > .settings-card{display:flex; flex-direction:column; margin:0;}
.settings-grid .settings-card h3{font-size:1.05rem; margin:0 0 .6rem;}
.settings-card-actions{margin-top:auto; padding-top:.9rem; display:flex; gap:.6rem; flex-wrap:wrap;}
.settings-grid .settings-status-row{margin-bottom:.35rem;}
.settings-grid .checkbox-field{font-size:.9rem;}
.settings-grid > .settings-card-wide{grid-column:1 / -1;}
.settings-grid .settings-hint{font-size:.8125rem; line-height:1.5; color:var(--ink-muted); margin:0 0 .7rem;}
.settings-grid .field{margin:0;}
/* Fremde Karte (Google/Restaurants) nutzt noch ".add-btn" (volle Breite) - im
   Raster auf normale Button-Breite zuruecksetzen, damit alle Karten gleich wirken. */
.settings-grid .settings-card > .add-btn{width:auto; align-self:flex-start; margin-top:auto;}
@media (max-width: 760px){
  .settings-grid{grid-template-columns:1fr;}
}

/* ---------- Backend: zweistufiges Menue (renderSectionGroupSubnav) ---------- */
/* Ebene 2 nutzt die Karteireiter-Optik von .kuren-group-subnav (style.css). */
.section-group-subnav[hidden]{display:none;}

/* ---------- Backend > API-Zugriff ---------- */
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.api-access-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  margin-bottom:.75rem; overflow:hidden;
}
.api-access-head{
  list-style:none; cursor:pointer; display:grid; grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:baseline; gap:.75rem; padding:.85rem 1.1rem;
}
.api-access-head::-webkit-details-marker{display:none;}
.api-access-head::before{
  content:""; width:.45rem; height:.45rem; align-self:center; border-right:2px solid var(--ink-muted);
  border-bottom:2px solid var(--ink-muted); transform:rotate(-45deg); transition:transform .15s ease;
  grid-column:1; grid-row:1; margin-right:.2rem;
}
.api-access-card[open] > .api-access-head::before{transform:rotate(45deg);}
.api-access-head{grid-template-columns:.8rem auto minmax(0, 1fr) auto;}
.api-access-name{font-family:'Arvo', Georgia, serif; font-size:1.02rem; color:var(--ink);}
.api-access-members{font-size:.85rem; color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.api-access-stats{font-size:.8125rem; color:var(--ink-muted); white-space:nowrap;}
.api-access-stats strong{color:var(--danger);}
.api-access-head:focus-visible{outline:2px solid var(--accent-strong); outline-offset:-2px;}
.api-access-card[open] > .api-access-head{border-bottom:1px solid var(--border);}
.api-access-body{padding:.9rem 1.1rem 1rem;}
.api-access-keys{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.9rem;}
.api-access-sub{font-size:.8125rem; font-weight:700; color:var(--ink);}
.api-key-chips{display:flex; flex-wrap:wrap; gap:.4rem;}
.api-key-chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .75rem; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--bg);
  font-size:.8125rem; font-weight:700; color:var(--ink);
}
.api-key-chip:has(input:checked){background:var(--accent-soft); border-color:var(--accent-strong);}
.api-key-chip.is-disabled{opacity:.55; cursor:not-allowed;}
.api-key-chip-note{font-weight:400; font-size:.75rem; color:var(--ink-muted);}
.api-usage-table{width:100%; border-collapse:collapse; font-size:.85rem;}
.api-usage-table th, .api-usage-table td{padding:.45rem .5rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle;}
.api-usage-table thead th{font-size:.75rem; font-weight:700; color:var(--ink-muted); border-bottom-width:2px;}
.api-usage-table tbody th{font-weight:600; color:var(--ink);}
.api-usage-table tbody tr:last-child > *{border-bottom:none;}
.api-usage-table tr.is-unused td{color:var(--ink-muted);}
.api-usage-shared{color:var(--ink-muted); font-size:.8rem;}
.api-usage-lock{text-align:right; white-space:nowrap; width:1%;}
.api-lock-toggle{display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; font-size:.8125rem; color:var(--ink-muted);}
.api-lock-toggle:has(input:checked){color:var(--danger); font-weight:700;}
@media (max-width: 640px){
  .api-access-head{grid-template-columns:.8rem minmax(0, 1fr) auto;}
  .api-access-members{grid-column:2 / -1; grid-row:2;}
  .api-usage-table thead{display:none;}
  .api-usage-table tr{display:grid; grid-template-columns:1fr auto; column-gap:.5rem; padding:.4rem 0; border-bottom:1px solid var(--border);}
  .api-usage-table th, .api-usage-table td{border:none; padding:.1rem 0;}
  .api-usage-table tbody th{grid-column:1 / -1;}
  .api-usage-lock{grid-column:2; grid-row:2 / 4; align-self:center;}
}
@media (prefers-reduced-motion: reduce){ .api-access-head::before{transition:none;} }

/* =====================================================================
   Kuechenpost (static/js/inbox.js, 26.09.2026)
   ===================================================================== */
/* Header-Knopf: gleiche Pillen-Optik wie der Nutzer-Chip daneben. */
.inbox-header-btn{
  display:inline-flex; align-items:center; gap:.5rem; height:2.5rem; padding:0 .9rem;
  font:inherit; font-weight:700; font-size:.875rem; color:var(--ink); cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill);
  transition:border-color .15s ease, background-color .15s ease;
}
.inbox-header-btn:hover{border-color:var(--accent-strong); background:var(--surface-hover);}
.inbox-header-btn.is-current{border-color:var(--accent-strong); background:var(--accent-soft);}
.inbox-header-btn:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px;}
.inbox-header-count, .inbox-tab-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:1.35rem; height:1.35rem;
  padding:0 .35rem; border-radius:var(--radius-pill); background:var(--danger); color:#fff;
  font-size:.72rem; font-weight:700; line-height:1;
}
.inbox-header-count[hidden], .inbox-tab-count[hidden]{display:none;}
.section-subtab-btn .inbox-tab-count{margin-left:.4rem;}
/* Der rote Punkt am Nutzer-Chip ist durch den Kuechenpost-Zaehler ersetzt. */
#userChipDot{display:none !important;}
@media (max-width: 640px){
  .inbox-header-btn{padding:0 .7rem; font-size:.8125rem;}
}

/* Posteingang: Filter-Chips ueber der Liste */
.kp-filters{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem;}
.kp-chip-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:1.2rem; height:1.2rem; padding:0 .3rem;
  margin-left:.15rem; border-radius:var(--radius-pill); background:var(--danger); color:#fff; font-size:.68rem; font-weight:700;
}
/* Zeile in der Gespraechsliste (Basis: .rsc-req aus rescue.js) */
.kp-row-meta{display:flex; align-items:center; flex-wrap:wrap; gap:.2rem .45rem; min-width:0;}
.rsc-req-body{min-width:0;}
.kp-row-preview{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;}
.rsc-req .rsc-req-top b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.kp-av-img img{width:100%; height:100%; object-fit:cover; display:block;}
.kp-av-initial{background:var(--accent-soft); color:var(--accent-strong); font-weight:700; font-family:'Arvo', Georgia, serif;}
/* Art-Marke (Freunde, Lebensmittel retten, ...) */
.kp-kind{
  display:inline-block; font-size:.7rem; font-weight:700; padding:.08rem .45rem; border-radius:var(--radius-pill);
  background:var(--surface-hover); color:var(--ink-muted); white-space:nowrap;
}
.kp-kind-friends{background:var(--accent-soft); color:var(--accent-strong);}
.kp-kind-rescue, .kp-kind-hub{background:var(--warn-soft); color:var(--warn);}
.kp-time{font-size:.75rem; color:var(--ink-muted); white-space:nowrap;}
.rsc-chat-head .kp-kind{margin-right:.35rem;}

/* Offene Anfragen oben im Gespraech */
.kp-open-items{display:flex; flex-direction:column; gap:.5rem;}
.kp-open-item{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; padding:.7rem .85rem;
  background:var(--bg); border:1px solid var(--border); border-left:4px solid var(--danger); border-radius:12px;
}
.kp-open-item-text{flex:1 1 16rem; min-width:0; font-size:.875rem; line-height:1.45; color:var(--ink);}
.kp-open-item-label{display:block; font-size:.72rem; font-weight:700; color:var(--danger); margin-bottom:.15rem;}
.kp-open-item-actions{display:flex; gap:.4rem; flex-wrap:wrap;}
.kp-open-item .meal-warnings{margin-top:.3rem;}

/* Nachrichten: Autor ueber der Blase, Tages-Trenner */
.kp-msg-author{font-size:.72rem; font-weight:700; color:var(--accent-strong);}
.kp-day-sep{font-weight:700;}
.kp-thread .rsc-msgs{min-height:12rem;}
/* Drei-Punkte-Menue oben rechts im Gespraech */
.kp-thread{position:relative;}
.kp-thread .rsc-chat-head{padding-right:2.6rem;}
.kp-menu{position:absolute; top:.9rem; right:.9rem; z-index:5;}
.kp-menu-btn{
  display:inline-flex; align-items:center; justify-content:center; width:var(--icon-btn-sm, 36px); height:var(--icon-btn-sm, 36px);
  border:1px solid transparent; border-radius:var(--radius-pill); background:transparent; color:var(--ink); cursor:pointer;
}
.kp-menu-btn:hover, .kp-menu-btn[aria-expanded="true"]{background:var(--surface-hover); border-color:var(--border);}
.kp-menu-btn:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px;}
.kp-menu-list{
  position:absolute; right:0; top:calc(100% + .3rem); min-width:14rem; padding:.35rem;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.kp-menu-list[hidden]{display:none;}
.kp-menu-item{
  text-align:left; padding:.55rem .75rem; min-height:40px; border:0; border-radius:8px; background:transparent;
  font:inherit; font-size:.875rem; color:var(--ink); cursor:pointer;
}
.kp-menu-item:hover, .kp-menu-item:focus-visible{background:var(--surface-hover); outline:none;}
.kp-menu-danger{color:var(--danger);}
.kp-menu-sep{height:1px; background:var(--border); margin:.3rem .2rem;}
/* Melden/Blockieren stehen im Menue - die Links von rescue.js bleiben nur als Ausloeser. */
.kp-rescue-host .rsc-safety{display:none;}

/* Zusammengefuehrtes Rettungs-Gespraech: eine Karte je Anfrage */
.rsc-person-reqs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; max-height:14rem; overflow-y:auto;}
.rsc-person-req{
  display:flex; flex-direction:column; gap:.45rem; padding:.55rem .75rem;
  background:var(--bg); border:1px solid var(--border); border-radius:12px;
}
.rsc-person-req.is-active{border-left:4px solid var(--accent-strong);}
.rsc-person-req-top{display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem;}
.rsc-person-req-items{font-size:.85rem; font-weight:600; color:var(--ink); min-width:0;}
.rsc-person-req .rsc-status{flex:none;}
.kp-archive-hint{margin:0 0 1rem;}
/* Rettungs-Ansicht (aus rescue.js) im Gespraech: ohne eigene Karte */
.kp-rescue-host{display:flex; flex-direction:column; gap:.6rem;}

.kp-empty{
  max-width:32rem; padding:2rem 1.25rem; text-align:center; margin:1rem auto;
  border:1px dashed var(--border); border-radius:var(--radius-card);
}
.kp-empty-title{font-family:'Arvo', Georgia, serif; font-size:1.1rem; color:var(--ink); margin-bottom:.35rem;}
.kp-empty .btn{margin-top:.6rem;}

/* Verlauf */
.kp-history{max-width:52rem;}
.kp-day{font-size:.9rem; font-weight:700; color:var(--ink-muted); margin:1.25rem 0 .5rem; font-family:'Karla', system-ui, sans-serif;}
.kp-day:first-child{margin-top:0;}
.kp-history-row{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.6rem .9rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-field, 10px); margin-bottom:.4rem;
}
.kp-history-row.is-new{border-color:var(--accent-strong);}
.kp-history-text{flex:1; min-width:12rem; font-size:.875rem; color:var(--ink);}
@media (prefers-reduced-motion: reduce){ .inbox-header-btn{transition:none;} }

/* ---------- Sidebar-Gruppen (Seitenstruktur-Runde 26.09.2026) ---------- */
/* Eine Gruppe ohne sichtbaren Punkt (z.B. "Teilen & Retten", wenn "Lebensmittel
   retten" fuer die Person ausgeblendet ist) zeigt auch keine Ueberschrift. */
.nav-group-label:has(+ .nav-group-label),
.nav-group-label:has(+ .nav-group-gap),
.nav-group-label:has(+ .tab-btn[hidden] + .nav-group-label),
.nav-group-label:has(+ .tab-btn[hidden] + .nav-group-gap){display:none;}

/* ---------- Kochbuch > Meine Rezepte: Hinweis "Rezepte prüfen" (Prüfen-Variante A) ---------- */
.recipe-review-hint{display:flex; justify-content:flex-end; margin:0 0 .6rem;}
.recipe-review-hint[hidden]{display:none;}
.recipe-review-chip{
  display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .65rem; font:inherit; font-size:.8rem;
  color:var(--ink-muted); background:transparent; border:1px solid var(--border); border-radius:999px; cursor:pointer;
}
.recipe-review-chip:hover{color:var(--ink); border-color:var(--warn); background:var(--warn-soft);}
.recipe-review-chip:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px;}
.recipe-review-chip > .hicon{color:var(--warn); font-size:.9rem;}
/* Restaurant-Knopf im Zeitslot (Woche): gleiche Groesse wie der Notiz-Knopf. */
.plan-cell-restaurant-btn{font-size:1rem;}

/* ---------- Woche: Knoepfe im Zeitslot (26.09.2026) ----------
   Leeres Feld: "+" (Gericht) oben ueber die volle Breite, darunter Notiz und
   Restaurant nebeneinander (Winki). Belegtes Feld: alle drei kompakt in einer Zeile. */
.plan-cell-actions{grid-template-columns:repeat(3, minmax(0, 1fr));}
.plan-cell-actions.plan-cell-actions-stacked{grid-template-columns:repeat(2, minmax(0, 1fr));}
.plan-cell-actions.plan-cell-actions-stacked .plan-cell-add-btn{grid-column:1 / -1;}
.plan-cell-actions.plan-cell-actions-stacked .plan-cell-note-btn{min-height:2.1rem; font-size:1rem;}

/* Header am Handy: mit Kuechenpost-Knopf + Nutzer-Chip darf der Titel umbrechen,
   statt an die Knoepfe zu stossen. */
@media (max-width: 480px){
  .masthead{flex-wrap:wrap; row-gap:.6rem;}
  .masthead-right{margin-left:auto;}
}

/* ---------- Mein Tag (26.09.2026) ------------------------------------------ */
#tab-heute.active, #tab-heute.heute-planned.active{display:flex; flex-direction:column;}
#tab-heute.heute-planned #heuteRoot{order:-1; margin-bottom:1.4rem;}
/* "Erste Schritte" (tour.js) setzt display:flex und wuerde versteckt als leere
   Karte stehen bleiben ([hidden]-Falle); sichtbar bleibt sie ganz oben. */
#tab-heute .tour-checklist[hidden]{display:none;}
#tab-heute .tour-checklist{order:-2;}
#heuteRoot, #todaySuggestRoot{max-width:980px; width:100%;}
.heute-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:.2rem 1rem; margin:0 0 1.1rem;}
.heute-date{font-family:'Arvo', Georgia, serif; font-size:1.35rem; font-weight:700; color:var(--ink); margin:0;}
.heute-summary{margin:0; font-size:.9rem; color:var(--ink-muted);}
.heute-empty{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem;
  padding:.9rem 1.1rem; margin:0 0 1rem; border:1px dashed var(--border); border-radius:var(--radius-card);
}
.heute-empty p{margin:0; color:var(--ink-muted);}

/* Zeitleiste: Tageszeit-Icon links, verbunden durch eine Linie */
.heute-timeline{list-style:none; margin:0; padding:0; position:relative;}
.heute-slot{display:grid; grid-template-columns:44px minmax(0, 1fr); gap:0 .9rem; position:relative; padding-bottom:1.4rem;}
.heute-slot::before{content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:var(--border);}
.heute-slot:last-child::before{display:none;}
.heute-slot:last-child{padding-bottom:0;}
.heute-slot-dot{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:2px solid var(--border); color:var(--ink-muted);
}
.heute-slot-dot .hicon{width:24px; height:24px;}
.heute-slot.is-next .heute-slot-dot{border-color:var(--accent-strong); background:var(--accent-soft); color:var(--accent-strong);}
.heute-slot.is-past .heute-slot-main{opacity:.55;}
.heute-slot.is-past .heute-slot-dot{opacity:.6;}
.heute-slot-main{min-width:0; padding-top:.55rem;}
.heute-slot-head{display:flex; align-items:center; flex-wrap:wrap; gap:.25rem .6rem; margin:0 0 .6rem;}
.heute-slot-label{font-weight:700; font-size:1rem; color:var(--ink); text-transform:none; letter-spacing:0; margin:0;}
.heute-slot-time{font-size:.8rem; color:var(--ink-muted);}
.heute-slot-badge{
  font-size:.72rem; font-weight:700; padding:.1rem .55rem; border-radius:var(--radius-pill);
  background:var(--accent-strong); color:var(--accent-ink, #fff);
}
/* Notiz: schlanke Zeile statt Foto-Kachel */
.heute-note{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; padding:.6rem .85rem;
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--warn); border-radius:12px;
  font-weight:600;
}
.heute-note .heute-card-people{margin-left:auto;}
.heute-cook-btn{display:inline-flex; align-items:center; gap:.35rem;}
.heute-cook-btn .hicon{width:1.05rem; height:1.05rem;}
.heute-card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:.7rem;}
.heute-card{
  display:flex; align-items:stretch; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-card); overflow:hidden; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:background .15s ease;
}
.heute-card:hover{background:var(--surface-hover);}
.heute-card:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.heute-card-static{cursor:default;}
.heute-card-static:hover{background:var(--surface);}
.heute-card-photo{
  flex:0 0 96px; min-height:96px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(155deg, var(--photo-a, var(--accent-soft)), var(--photo-b, var(--accent)));
}
.heute-card-photo img{width:100%; height:100%; object-fit:cover;}
.heute-card-photo svg{width:42%; height:42%; opacity:.85;}
.heute-card-emoji{font-size:1.8rem;}
.heute-card-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem; padding:.65rem .8rem;}
.heute-card-kind{font-size:.72rem; font-weight:700; color:var(--ink-muted);}
.heute-card-name{font-weight:700; line-height:1.3;}
.heute-card-portions{font-size:.8rem; color:var(--ink-muted); font-weight:600;}
.heute-card-people{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; font-size:.78rem;}
.heute-card-actions{margin-top:auto; padding-top:.2rem;}
.heute-nem-list{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.55rem;}
.heute-nem{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .75rem; min-height:36px;
  background:var(--surface); border:1px dashed var(--border-strong, var(--border)); border-radius:999px;
  font:inherit; font-size:.82rem; color:var(--ink); cursor:pointer; text-align:left;
}
.heute-nem:hover{background:var(--surface-hover);}
.heute-nem .hicon{width:1.2rem; height:1.2rem; flex:0 0 auto;}
.heute-nem-kind{font-weight:700; color:var(--ink-muted); margin-right:.35rem;}
@media (max-width:600px){
  .heute-card-grid{grid-template-columns:1fr;}
  .heute-card-photo{flex-basis:84px;}
}

/* ---------- Freunde: nur Verbindungen verwalten (26.09.2026) ---------------- */
#tab-friends .friends-two-col[hidden], #tab-friends .friends-panel[hidden]{display:none;}
.friend-connection-actions{display:flex; flex-wrap:wrap; gap:.4rem; justify-content:flex-end;}
.friend-dissolve-btn{color:var(--danger);}

/* ---------- Einkaufstage in Einkaufsliste > Planen und Haushalt (26.09.2026) --- */
.trips-card{margin:0 0 1.25rem; max-width:none; padding:.8rem 1.1rem;}
#tab-household .trips-card{margin-top:1rem; max-width:48rem;}
.trips-card-head{display:flex; align-items:center; gap:.5rem 1rem; flex-wrap:wrap;}
.trips-card .live-card-title{margin:0; font-size:.95rem;}
.trips-card .live-day-chips{gap:.3rem;}
.trips-card .live-day-chip{width:36px; height:36px;}
.trips-others{margin:.5rem 0 0; font-size:.82rem; color:var(--ink-muted); display:flex; flex-wrap:wrap; gap:.2rem .5rem;}
.trips-person b{color:var(--ink); font-weight:700;}
.trips-sep{color:var(--border);}

.carry-card .live-card-title{display:flex; align-items:center; gap:.4rem;}

/* Live-Liste: Infokasten "Für dich besorgt" (26.09.2026) - bewusst ruhig, kein Alarm */
.live-done-info{
  background:var(--accent-soft); color:var(--ink); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:.8rem 1rem; font-size:.9rem; line-height:1.5;
  display:flex; flex-direction:column; gap:.2rem;
}
.live-done-title{font-weight:700; color:var(--accent-strong);}

/* ---------- "Was koche ich heute?" an das Seitendesign angleichen (26.09.2026) ---
   Die Karte gehoert today.js/today.css (andere Session) - hier nur optische
   Angleichung: Satzschreibung statt Grossbuchstaben, Titel in Arvo wie die anderen
   Seitenueberschriften, gleiche Innenabstaende und Schatten wie die Mahlzeit-Kacheln. */
#tab-heute .today-card{padding:1.15rem 1.3rem 1.25rem; box-shadow:var(--shadow-sm);}
#tab-heute .today-title{font-family:'Arvo', Georgia, serif; font-weight:700; font-size:1.2rem;}
#tab-heute .today-filters{gap:.6rem; margin:1rem 0 1.1rem;}
#tab-heute .today-filter-row{gap:.45rem;}
#tab-heute .today-filter-label{
  text-transform:none; letter-spacing:0; font-size:.875rem; font-weight:600;
  color:var(--ink-muted); min-width:5.5rem;
}
#tab-heute .today-item{border-radius:12px; background:var(--surface);}
#tab-heute .today-ai{margin-top:1.1rem; padding-top:1rem;}
@media (max-width:600px){
  #tab-heute .today-card{padding:1rem;}
  #tab-heute .today-filter-row{flex-wrap:wrap;}
  #tab-heute .today-filter-label{flex:1 1 100%; min-width:0;}
}

/* ---------- Wochenplan > Woche: eine Kopfzeile (26.09.2026, plan_toolbar.js) ---- */
#tab-plan .plan-toolbar{display:none;}          /* Knoepfe bleiben als Ausloeser im DOM */
#tab-plan .plan-week-copy-btn{display:none;}    /* steht jetzt im Drei-Punkte-Menue */
.plan-topbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:.75rem 1rem; margin:0 0 1.25rem;
}
.plan-topbar .plan-week-nav{margin:0; justify-content:flex-start;}
.plan-topbar-actions{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;}
.plan-topbar-actions [hidden]{display:none !important;}
.plan-topbar-actions .btn{min-height:40px;}
.plan-topbar-autofill{display:inline-flex; align-items:center; gap:.35rem;}
.plan-topbar-autofill .hicon{width:1.1rem; height:1.1rem;}
.plan-topbar-menu{position:relative;}
.plan-topbar-menu-btn{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); color:var(--ink); cursor:pointer;
}
.plan-topbar-menu-btn:hover, .plan-topbar-menu-btn[aria-expanded="true"]{background:var(--surface-hover); border-color:var(--accent-strong);}
.plan-topbar-menu-btn:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px;}
.plan-topbar-menu-list{
  position:absolute; right:0; top:calc(100% + .35rem); z-index:30; min-width:15rem; padding:.35rem;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.plan-topbar-menu-list[hidden]{display:none;}
.plan-topbar-check{display:inline-block; width:1.1rem; color:var(--accent-strong); font-weight:700;}

/* Leere Zeitslots ruhiger: Knoepfe ohne Rahmen, erst beim Ueberfahren deutlich.
   Auf Touch-Geraeten (kein Hover) bleiben sie wie bisher sichtbar. */
@media (hover:hover){
  .plan-cell .plan-cell-add-btn, .plan-cell .plan-cell-note-btn{border-color:transparent; opacity:.55;}
  .plan-cell:hover .plan-cell-add-btn, .plan-cell:hover .plan-cell-note-btn,
  .plan-cell .plan-cell-add-btn:focus-visible, .plan-cell .plan-cell-note-btn:focus-visible{border-color:var(--border); opacity:1;}
}
.plan-summary-empty{display:none;}             /* "keine Nährwertangaben" je Feld war nur Rauschen */
@media (max-width:760px){
  .plan-topbar{flex-direction:column; align-items:stretch;}
  .plan-topbar .plan-week-nav{justify-content:center;}
  .plan-topbar-actions{flex-wrap:nowrap;}
  .plan-topbar-actions .btn{flex:1 1 0; min-width:0; justify-content:center; padding-inline:.5rem; font-size:.85rem; white-space:nowrap;}
  .plan-topbar-menu{flex:none;}
  .plan-topbar .plan-week-nav{gap:.5rem;}
  .plan-topbar .plan-week-nav{flex-wrap:wrap; justify-content:space-between;}
  .plan-topbar .plan-week-range{flex:1 1 0; min-width:0; text-align:center; font-size:.85rem; order:1;}
  .plan-topbar #planWeekPrevBtn{order:0;}
  .plan-topbar #planWeekNextBtn{order:2;}
  .plan-topbar .plan-week-today-btn{order:3;}
  .plan-topbar .plan-week-nav > :not(button):not(.plan-week-range){order:4; flex:1 1 100%; display:block; text-align:center;}
  .plan-topbar-long{display:none;}
  .plan-topbar-autofill{text-transform:capitalize;}
}

/* ---------- Wochenplan: Zeitleiste in der Mahlzeiten-Spalte (26.09.2026) -------
   Wie auf "Mein Tag": Tageszeit-Icon im Kreis, eine Linie von Fruehstueck bis
   Abendessen, am Ende ein Pfeil. Icons oben in der Zeile, damit die Linie bei
   unterschiedlich hohen Zeilen durchgehend bleibt (Zeilenabstand = --tl-gap). */
.plan-table{grid-template-columns:136px repeat(7, minmax(120px, 1fr));}
.plan-slot-row{grid-template-columns:136px 1fr;}
.plan-slot-tl{
  --tl-dot:34px; --tl-top:.35rem; --tl-gap:.6rem;
  position:relative; display:flex; flex-direction:row !important; align-items:flex-start !important;
  justify-content:flex-start !important; gap:.5rem; padding:var(--tl-top) .2rem .4rem 0 !important;
}
.plan-slot-row-label.plan-slot-tl{--tl-gap:.5rem; align-self:stretch;}
.plan-slot-dot{
  flex:none; width:var(--tl-dot); height:var(--tl-dot); border-radius:50%; position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:2px solid var(--border); color:var(--ink-muted);
}
.plan-slot-dot .hicon{width:20px; height:20px;}
.plan-slot-tl[data-tl="none"] .plan-slot-dot:not(:has(.hicon)){visibility:hidden;} /* Getraenke: Kreis mit Glas, ohne Linie */
.plan-slot-text{display:flex; flex-direction:column; min-width:0; padding-top:.35rem; font-weight:700; color:var(--ink);}
/* Verbindungslinie: laeuft durch die ganze Zeile bis in die naechste */
.plan-slot-tl[data-tl="first"]::before, .plan-slot-tl[data-tl="mid"]::before, .plan-slot-tl[data-tl="last"]::before{
  content:""; position:absolute; left:calc(var(--tl-dot) / 2 - 1px); width:2px; background:var(--border);
  top:0; bottom:calc(-1 * var(--tl-gap));
}
.plan-slot-tl[data-tl="first"]::before{top:calc(var(--tl-top) + var(--tl-dot) / 2);}
/* letzte Mahlzeit: kurze Linie unter dem Icon, dann Pfeil nach unten */
.plan-slot-tl[data-tl="last"]::before{bottom:auto; height:calc(var(--tl-top) + var(--tl-dot) + 1.1rem);}
.plan-slot-tl[data-tl="last"]::after{
  content:""; position:absolute; left:calc(var(--tl-dot) / 2 - 6px);
  top:calc(var(--tl-top) + var(--tl-dot) + 1.05rem);
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--border);
}
@media (max-width:760px){
  .plan-table{grid-template-columns:112px repeat(7, minmax(120px, 1fr));}
  .plan-slot-row{grid-template-columns:112px 1fr;}
  .plan-slot-tl{--tl-dot:28px; gap:.35rem;}
  .plan-slot-dot .hicon{width:16px; height:16px;}
}

/* ---------- Wochenplan > Restaurants (26.09.2026) ------------------------------ */
.restaurant-intro{margin:0 0 1rem;}
#restaurantList .grid{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem;}
.restaurant-tile .tile-photo{aspect-ratio:16/10;}
.restaurant-tile .tile-photo svg{width:30%; height:30%;}
.restaurant-tile .tile-body{display:flex; flex-direction:column; gap:.35rem;}
.restaurant-tile .tile-name{margin:0;}
.restaurant-cuisine{
  display:inline-block; font-size:.72rem; font-weight:700; padding:.1rem .5rem; border-radius:var(--radius-pill);
  background:var(--cat-restaurant-soft); color:var(--ink);
}
.restaurant-empty{margin:1rem 0; max-width:34rem; text-align:left;}
/* Detail-Popup: Links und "Foto hinzufuegen" in einer Zeile statt untereinander */
.restaurant-detail-head > div:last-child{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; min-width:0;}
.restaurant-detail-head > div:last-child > h2{flex:1 1 100%;}
.restaurant-detail-head > div:last-child > .btn{margin-top:0 !important;}
.restaurant-detail-links{display:contents;}

/* Grundregel Satzschreibung: einzelne Formular-Labels tragen noch Inline-Grossbuchstaben
   (z.B. "Wer geht mit?" beim Einplanen) - hier zentral neutralisiert. */
.modal label[style*="text-transform:uppercase"], .modal div[style*="text-transform:uppercase"],
.drawer label[style*="text-transform:uppercase"], .drawer div[style*="text-transform:uppercase"]{
  text-transform:none !important; letter-spacing:0 !important; font-size:.85rem !important;
}

/* ---------- Wochenplan > Planvorlagen & Kuren (26.09.2026) --------------------- */
.cure-list .cure-empty, .cure-list > .hint{grid-column:1 / -1;}
.cure-empty{margin:0; max-width:34rem; text-align:left;}
#tab-kuren-meine .cure-list-head{margin-bottom:.3rem;}
#tab-kuren-meine .cure-list{margin:.9rem 0 1.6rem;}
#tab-kuren-meine #cureSuggestionsHeading{margin-top:.6rem;}
/* Laufende Kuren: Personen ohne Kur kompakt nebeneinander, laufende Kuren volle Breite */
#cureHouseholdOverview{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.8rem;}
#cureHouseholdOverview > .tile{margin:0 !important; box-shadow:var(--shadow-sm);}
#cureHouseholdOverview > .tile[data-cure-id]{grid-column:1 / -1;}
#cureHouseholdOverview > .tile:hover{transform:none;}
.cure-member-idle{display:flex; flex-direction:column; align-items:flex-start; gap:.35rem;}
.cure-pick-btn{margin-top:.3rem;}

/* ---------- Wochenplan > Nahrungsergaenzung (26.09.2026) ----------------------- */
.nem-list-head{margin-bottom:.3rem;}
#nemMeineRoot{margin-top:1rem;}
#nemMeineRoot .grid, #tab-nem-vorschlaege .grid{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1rem;}
.nem-usage-missing{
  display:inline-block; font-size:.72rem; font-weight:700; padding:.12rem .5rem; border-radius:var(--radius-pill);
  background:var(--warn-soft); color:var(--ink);
}
.nem-empty{margin:.4rem 0 0; max-width:36rem; text-align:left;}
/* Hinweis "keine medizinische Beratung": bleibt sichtbar, aber ruhiger */
#tab-nem-vorschlaege .nem-disclaimer, #nemEinnahmeplanRoot .nem-disclaimer{
  font-size:.8rem; padding:.55rem .8rem; line-height:1.45;
}
/* Einnahmeplan als Zeitleiste wie "Mein Tag" / "Woche" (Icon im Kreis, Linie, Pfeil).
   Nur am Bildschirm - der PDF-Export (Druck) bleibt unveraendert. */
@media screen{
  #nemEinnahmeplanRoot .einnahmeplan-gruppe{
    position:relative; border:0; background:transparent; border-radius:0;
    padding:0 0 1.4rem 58px; margin:0;
  }
  #nemEinnahmeplanRoot .einnahmeplan-gruppe::before{
    content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:var(--border);
  }
  #nemEinnahmeplanRoot .einnahmeplan-gruppe:not(:has(~ .einnahmeplan-gruppe))::before{bottom:.6rem;}
  #nemEinnahmeplanRoot .einnahmeplan-gruppe:not(:has(~ .einnahmeplan-gruppe))::after{
    content:""; position:absolute; left:16px; bottom:0;
    border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--border);
  }
  #nemEinnahmeplanRoot .einnahmeplan-gruppe-titel{display:flex; align-items:center; min-height:44px; font-size:1rem;}
  #nemEinnahmeplanRoot .einnahmeplan-slot-dot{
    position:absolute; left:0; top:0; width:44px; height:44px; box-sizing:border-box; border-radius:50%;
    border:2px solid var(--border); background:var(--surface); color:var(--ink-muted);
    display:flex; align-items:center; justify-content:center;
  }
  #nemEinnahmeplanRoot .einnahmeplan-slot-dot .einnahmeplan-slot-icon{width:24px; height:24px; margin:0;}
  #nemEinnahmeplanRoot .einnahmeplan-tile-grid{grid-template-columns:repeat(auto-fill, minmax(180px, 220px));}
  #nemEinnahmeplanRoot .einnahmeplan-print-toolbar{justify-content:flex-end; margin:-.2rem 0 .8rem;}
}
/* Hinweis "nur eigenes Kochbuch" steht seit 26.09.2026 im Vorschlagen-Popup */
#planAutofillHint{display:none !important;}

/* ---------- Kochbuch > Meine Rezepte (26.09.2026) ------------------------------ */
/* Filterzeile: eine Zeile, einheitlich 40px hoch, SchmatziSpatzi rechts */
#tab-overview .filter-bar{align-items:center; gap:.5rem; margin-bottom:1.1rem;}
#tab-overview .filter-bar .search-input{flex:1 1 200px; min-width:170px; max-width:none; height:40px;}
#tab-overview .filter-bar select, #tab-overview .filter-bar .filter-dropdown-trigger,
#tab-overview .filter-bar .btn{height:40px; min-height:40px;}
#tab-overview #seasonFilterSelect{max-width:170px;}
#tab-overview #memberFilterSelect{max-width:215px;}
#tab-overview #recipeAiAssistantBtn{margin-left:auto;}
@media (max-width:760px){
  #tab-overview .filter-bar .search-input{flex:1 1 100%;}
  #tab-overview #recipeAiAssistantBtn{margin-left:0;}
}
/* Kachel-Raster wie bei NEMs/Vorschlaegen: passt sich der Breite an (1440px: 5 Spalten) */
#categories .grid{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:1rem;}
/* Boards: "Rezepte importieren" / "+ Neues Rezept" gehoeren nicht auf diese Seite
   (dort gibt es die Kachel "Board erstellen") */
body:has(#tab-board.active) #newDishBtn, body:has(#tab-board.active) #importRecipesBtn{display:none;}

/* ---------- Kochbuch > Boards (26.09.2026) ------------------------------------- */
#boardList{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1rem;}
.board-collage{position:absolute; inset:0; display:grid; gap:2px; background:var(--surface);}
.board-collage img{width:100%; height:100%; object-fit:cover; min-height:0;}
.board-collage-2{grid-template-columns:1fr 1fr;}
.board-collage-3{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;}
.board-collage-3 img:first-child{grid-row:1 / 3;}
.board-collage-4{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;}
/* Board-Detail: Kopfzeile mit "+ Gericht hinzufuegen", Einladungen als schmale Zeile */
#boardDetailView:not([hidden]){display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:.8rem;}
#boardDetailView > .board-detail-header{grid-column:1; margin-bottom:0;}
#boardDetailView > #boardAddDishBtn{grid-column:2; grid-row:1;}
#boardDetailView > #boardGuestBox, #boardDetailView > #boardDishGrid{grid-column:1 / -1;}
#boardGuestBox:not([hidden]){
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .7rem;
  padding:.55rem .9rem; margin:1rem 0 0; background:var(--surface);
}
#boardGuestBox .section-label{margin:0; font-size:.85rem;}
#boardGuestBox .board-guest-list{margin:0; flex:1 1 auto;}
#boardGuestBox .board-guest-list .hint{margin:0;}
#boardGuestBox #boardInviteBtn{min-height:36px;}
#boardDishGrid{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:1rem;}
@media (max-width:600px){
  #boardDetailView:not([hidden]){grid-template-columns:1fr;}
  #boardDetailView > #boardAddDishBtn{grid-column:1; grid-row:auto; margin-top:.8rem; justify-self:start;}
}

/* ---------- Kochbuch > Inspiration (26.09.2026, cookbook_nav.js) --------------- */
.cookbook-jumpbar{
  position:sticky; top:0; z-index:20; display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:thin;
  padding:.6rem 0; margin:0 0 .6rem; background:var(--bg);
}
.cookbook-jumpbar[hidden]{display:none;}
.cookbook-jumpbar .chip{flex:none; min-height:34px; padding:.3rem .7rem; white-space:nowrap;}
@media (min-width:900px){ .cookbook-jumpbar{flex-wrap:wrap; overflow:visible;} }
.cookbook-jump-count{font-size:.72rem; color:var(--ink-muted); margin-left:.2rem;}
#inspirationCategories .grid{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:1rem;}
/* Import/Neu gehoeren zum eigenen Kochbuch, nicht zur Inspiration-Bibliothek */
body:has(#tab-inspiration.active) #importRecipesBtn{display:none;}
/* Handy: Kachel-Raster zweispaltig statt einer riesigen Kachel pro Reihe */
@media (max-width:600px){
  #categories .grid, #inspirationCategories .grid, #boardList, #boardDishGrid,
  #nemMeineRoot .grid, #tab-nem-vorschlaege .grid, #restaurantList .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.7rem;
  }
}

/* ---------- Einkaufsliste > Planen (26.09.2026) -------------------------------- */
.shopping-legend{margin:.2rem 0 1rem;}
#tab-shopping .shopping-item{padding:.55rem .9rem; gap:.6rem 1rem;}
#tab-shopping .shopping-have-input{width:7.5rem;}
/* Kategorie je Zeile nur dezent - wird erst beim Ueberfahren/Fokus zum Auswahlfeld */
#tab-shopping .shopping-cat-select{border-color:transparent; background-color:transparent; max-width:12rem;}
#tab-shopping .shopping-item:hover .shopping-cat-select, #tab-shopping .shopping-cat-select:focus-visible{border-color:var(--border); background-color:var(--bg);}
@media (hover:none){ #tab-shopping .shopping-cat-select{border-color:var(--border);} }
/* "Einkaufsliste erstellen" bleibt bei langen Listen unten sichtbar */
#tab-shopping .shopping-create-btn{
  position:sticky; bottom:1rem; z-index:5; margin-top:1rem; box-shadow:var(--shadow);
}
@media (max-width:600px){
  #tab-shopping .shopping-item-controls{width:100%; justify-content:space-between;}
  #tab-shopping .shopping-create-btn{width:100%;}
}

/* ---------- Einkaufsliste > Live-Liste (26.09.2026): Satzschreibung ------------- */
#shoppingLiveContent .live-section-title, #shoppingLiveContent .live-section-count,
#shoppingLiveContent .live-category-title, .live-trips-group{
  text-transform:none; letter-spacing:0;
}
#shoppingLiveContent .live-section-title{font-size:.95rem;}
#shoppingLiveContent .live-category-title{font-size:.8rem; color:var(--ink-muted); font-weight:700;}
@media (max-width:600px){
  .trips-card .live-day-chips{flex:1 1 100%; flex-wrap:nowrap; justify-content:space-between; gap:.2rem;}
  .trips-card .live-day-chip{flex:1 1 0; min-width:0; max-width:44px; width:auto; height:auto; aspect-ratio:1; padding:0;}
}

/* ---------- Vorraete > Uebersicht (26.09.2026, Reihenfolge 27.09.2026) ------------
   Seite gehoert vorraete.js (andere Session) - nur Reihenfolge und Optik per CSS.
   Reihenfolge (Wunsch Winki ueber die Kassenbon-Session, 27.09.2026):
   0. Intro  1. "Wurde gekocht?"-Hinweis  2. Aktionsleiste (Sprache/Bon - die haeufigsten
   Handgriffe nach dem Einkauf, ohne Scrollen erreichbar)  3. Bald ablaufend
   4. Von Hand hinzufuegen (Hinweis + Formular als Karte)  5. Filter  6. Auswahl  7. Liste */
#tab-pantry.active{display:flex; flex-direction:column;}
#tab-pantry > .pantry-intro{order:0; margin:0 0 1rem;}
#tab-pantry > #pantryCookConfirmBanner{order:1;}
#tab-pantry > #vrToolbar{order:2;}
#tab-pantry > #vrRiskBox, #tab-pantry > #pantryExpiryOverview{order:3;}
#tab-pantry > #vrAddHint{order:4;}
#tab-pantry > #pantryAddForm{order:5;}
#tab-pantry > #vrFilterBar{order:6;}
#tab-pantry > #pantryBulkBar{order:7;}
#tab-pantry > #pantryList{order:8;}
#tab-pantry > :not(.pantry-intro):not(#pantryCookConfirmBanner):not(#vrRiskBox):not(#pantryExpiryOverview):not(#vrToolbar):not(#vrAddHint):not(#pantryAddForm):not(#vrFilterBar):not(#pantryBulkBar):not(#pantryList){order:9;}
/* Aktionsleiste: schlicht, Knoepfe in einer Zeile, keine Karte */
#tab-pantry > #vrToolbar{margin:0 0 1rem; padding:0; background:none; border:0;}
/* "Von Hand hinzufuegen": Hinweis + Formular als EINE Karte */
#tab-pantry > #vrAddHint{
  margin:0; padding:.75rem .9rem .5rem; background:var(--surface);
  border:1px solid var(--border); border-bottom:0; border-radius:14px 14px 0 0;
}
#tab-pantry > #pantryAddForm{
  margin:0 0 1.2rem; padding:0 .9rem .9rem; background:var(--surface);
  border:1px solid var(--border); border-top:0; border-radius:0 0 14px 14px;
}
#tab-pantry > #vrToolbar .btn{min-height:38px;}
/* "zurueckziehen" in der Ablauf-Liste als kleiner Knopf statt grossem Link */
#tab-pantry #vrRiskBox .vr-linkbtn[data-risk="unshare"]{
  text-decoration:none; font-size:.78rem; font-weight:700; color:var(--ink);
  padding:.3rem .65rem; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface);
}
#tab-pantry #vrRiskBox .vr-linkbtn[data-risk="unshare"]:hover{border-color:var(--accent-strong);}
#tab-pantry #vrRiskBox{margin-bottom:1.2rem;}

/* ---------- Vorraete > Rettungsliste (26.09.2026): Knoepfe wie in der Uebersicht ---- */
#tab-rescue .btn.btn-sm:not(.btn-primary):not(.btn-link){
  background:var(--surface); border:1px solid var(--border); color:var(--ink);
}
#tab-rescue .btn.btn-sm[data-act="outcome"][data-outcome="consumed"]{
  background:var(--accent-strong); border-color:var(--accent-strong); color:var(--accent-ink, #fff);
}
#tab-rescue .btn-link[data-act="unshare"]{
  text-decoration:none; font-size:.78rem; font-weight:700; color:var(--ink);
  padding:.3rem .65rem; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface);
}
#tab-rescue .btn-link[data-act="unshare"]:hover{border-color:var(--accent-strong);}

/* ---------- Budget (26.09.2026) -------------------------------------------------
   Diagrammfarben im Salat-Theme aus der Theme-Palette statt Blau (budget.js setzt
   --bud-est/--bud-act; hier mit hoeherer Spezifitaet nur fuer salat-fresh). */
html:root[data-design="salat-fresh"], html:root:not([data-design]){
  --bud-est:var(--accent-strong); --bud-act:#c2622d;
}
/* Preise pruefen: Tabellenkopf in Satzschreibung, Suchfeld/Auswahlen wie ueberall 40px */
#tab-budget-prices .budget-table th{text-transform:none; letter-spacing:0; font-size:.8rem;}
#tab-budget-prices .budget-toolbar{gap:.5rem; align-items:center;}
#tab-budget-prices .budget-toolbar input[type="text"], #tab-budget-prices .budget-toolbar input[type="search"],
#tab-budget-prices .budget-toolbar select{
  height:40px; padding:0 .8rem; border:1px solid var(--field-border, var(--border));
  border-radius:var(--radius-field, 10px); background:var(--surface); color:var(--ink); font:inherit; font-size:.875rem;
}
#tab-budget-prices .budget-toolbar input[type="text"], #tab-budget-prices .budget-toolbar input[type="search"]{flex:1 1 220px;}

/* ---------- Wiki > Ernaehrungsformen (26.09.2026) -------------------------------- */
details.ernaehrungsform-tag-regeln{margin-bottom:1.2rem;}
details.ernaehrungsform-tag-regeln > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:.5rem; margin:0;}
details.ernaehrungsform-tag-regeln > summary::-webkit-details-marker{display:none;}
details.ernaehrungsform-tag-regeln > summary::before{content:"▸"; color:var(--ink-muted); transition:transform .15s ease;}
details.ernaehrungsform-tag-regeln[open] > summary::before{transform:rotate(90deg);}
details.ernaehrungsform-tag-regeln[open] > summary{margin-bottom:.6rem;}
@media (prefers-reduced-motion:reduce){ details.ernaehrungsform-tag-regeln > summary::before{transition:none;} }
#wikiErnaehrungsformenList{grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:.7rem;}
/* Ohne eigenes Bild: kompakte Zeile mit kleinem Icon statt grosser leerer Bildflaeche */
.ernf-tile:not(:has(img)){flex-direction:row; align-items:center;}
.ernf-tile:not(:has(img)) .tile-photo{flex:0 0 52px; aspect-ratio:1; height:52px; margin:.55rem 0 .55rem .55rem; border-radius:10px;}
.ernf-tile:not(:has(img)) .tile-photo svg{width:60%; height:60%;}
.ernf-tile:not(:has(img)) .tile-body{padding:.55rem .8rem;}
.ernf-tile:not(:has(img)) .tile-name{margin:0; font-size:.9rem;}

/* ---------- Wiki > Naehrwerttabelle (26.09.2026) --------------------------------- */
#tab-wiki-naehrwerttabelle .nutrition-breakdown tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--surface) 70%, var(--bg));}
#tab-wiki-naehrwerttabelle .nutrition-breakdown tbody tr:hover td{background:var(--surface-hover);}
/* Spalte "Lebensmittel" bleibt beim seitlichen Scrollen stehen */
#tab-wiki-naehrwerttabelle .nutrition-breakdown th:first-child,
#tab-wiki-naehrwerttabelle .nutrition-breakdown td:first-child{position:sticky; left:0; z-index:1; background:var(--surface);}
#tab-wiki-naehrwerttabelle .nutrition-breakdown thead th:first-child{z-index:3;}
#tab-wiki-naehrwerttabelle .nutrition-breakdown tbody tr:nth-child(even) td:first-child{background:color-mix(in srgb, var(--surface) 70%, var(--bg));}

/* ---------- Wiki > Zutaten-Naehrwerte (26.09.2026): Suche + KI-Knopf in einer Zeile */
#tab-pruefen-zutaten.active{display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:.6rem; align-items:center;}
#tab-pruefen-zutaten > *{grid-column:1 / -1;}
#tab-pruefen-zutaten > .filter-bar{grid-column:1; margin-bottom:1rem;}
#tab-pruefen-zutaten > .nutrition-admin-bulk-ai{grid-column:2; grid-row:2; margin:1rem 0 1rem; /* gleiche Raender wie .filter-bar (inline margin-top:1rem), sonst sitzt der Button hoeher */ display:flex; align-items:center; gap:.5rem;}
#tab-pruefen-zutaten .search-input, #tab-pruefen-zutaten .filter-bar .admin-chip, #tab-pruefen-zutaten .nutrition-admin-bulk-ai .btn{height:40px; min-height:40px;}
@media (max-width:760px){
  #tab-pruefen-zutaten > .filter-bar, #tab-pruefen-zutaten > .nutrition-admin-bulk-ai{grid-column:1 / -1; grid-row:auto;}
  #tab-pruefen-zutaten > .nutrition-admin-bulk-ai{margin-top:0;}
}

/* ---------- Wiki > Saisonalitaet (26.09.2026): Karten nur so hoch wie ihr Inhalt --- */
#tab-wiki-saisonalitaet .season-groups{align-items:start;}

/* ---------- Unterleiste mit nur EINEM Reiter ausblenden (26.09.2026) -------------
   z.B. "Entdecken": der Reiter wiederholt nur den Seitentitel darueber. */
#sectionSubnav:has(> .section-subtab-btn:only-child){display:none;}

/* ---------- Entdecken (26.09.2026, discover.js/-.css gehoeren einer anderen Session) */
#tab-entdecken .dsc-page{max-width:none;}
#tab-entdecken .dsc-grid{grid-template-columns:repeat(auto-fill, minmax(15.5rem, 1fr)); align-items:stretch;}
#tab-entdecken .dsc-card{flex-direction:column; align-items:stretch; gap:.7rem;}
#tab-entdecken .dsc-card .dsc-open{white-space:nowrap;}
#tab-entdecken .dsc-card-body{height:100%;}
#tab-entdecken .dsc-card .dsc-open{margin-top:auto;}

/* ---------- Haushalt > Uebersicht (26.09.2026) -----------------------------------
   Aufbau: oben zweispaltig (links Name + Coverbild, rechts Einladungscode),
   darunter Einkaufstage, dann "Mitglieder" (Karten) und "Neues Mitglied" als Karte. */
#tab-household.active{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:1.5rem; align-items:start;
  grid-template-areas:
    "label  invite"
    "name   invite"
    "cover  invite"
    "hint   hint"
    "trips  trips"
    "list   list"
    "add    add";
}
#tab-household > .section-label:first-child{grid-area:label; margin-bottom:.4rem;}
#tab-household > .household-name-row{grid-area:name; margin-bottom:1rem;}
#tab-household > #householdCoverField{grid-area:cover; max-width:none; margin:0;}
#tab-household > #householdNotOwnerHint{grid-area:hint;}
#tab-household > #inviteCodeBox{grid-area:invite; margin:0;}
#tab-household > #tripsCardHousehold{grid-area:trips; max-width:none; margin:1.5rem 0 0;}
#tab-household > #memberList{grid-area:list; margin-top:1.8rem;}
#tab-household > #memberAddForm{grid-area:add;}
/* Ueberschrift "Mitglieder" ueber den Karten */
#tab-household > #memberList::before{
  content:"Mitglieder"; grid-column:1 / -1; font-family:'Arvo', Georgia, serif; font-weight:700;
  font-size:1.15rem; color:var(--ink); margin-bottom:-.2rem;
}
/* "Neues Mitglied" als eigene Karte mit Ueberschrift, Labels in Satzschreibung */
#tab-household > #memberAddForm:not([hidden]){
  margin:1.4rem 0 0; padding:1rem 1.1rem; background:var(--surface);
  border:1px dashed var(--border); border-radius:var(--radius-card);
}
#tab-household > #memberAddForm::before{
  content:"Neues Mitglied"; flex:1 1 100%; font-weight:700; color:var(--ink); margin-bottom:.2rem;
}
#tab-household .member-add-form .field label{text-transform:none; letter-spacing:0; font-size:.78rem;}
#tab-household .member-add-form input{border-radius:var(--radius-field, 10px);}
@media (max-width:860px){
  #tab-household.active{
    grid-template-columns:minmax(0, 1fr);
    grid-template-areas:"label" "name" "cover" "invite" "hint" "trips" "list" "add";
  }
  #tab-household > #inviteCodeBox{margin-top:1rem;}
}
/* Dateiauswahl (Coverbild u.a.) wie ein normaler Ghost-Knopf statt Browser-Standard */
.tab-panel input[type="file"]{font:inherit; font-size:.85rem; color:var(--ink-muted); max-width:100%;}
.tab-panel input[type="file"]::file-selector-button{
  font:inherit; font-size:.85rem; font-weight:700; color:var(--ink); cursor:pointer;
  padding:.5rem 1rem; margin-right:.7rem; min-height:40px;
  border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface);
}
.tab-panel input[type="file"]::file-selector-button:hover{border-color:var(--accent-strong); background:var(--surface-hover);}
/* Haekchen und Auswahlpunkte ueberall in der Theme-Farbe statt Browser-Blau */
.tab-panel input[type="checkbox"], .tab-panel input[type="radio"],
.modal input[type="checkbox"], .modal input[type="radio"]{accent-color:var(--accent-strong);}
/* Freunde: Eingabefeld so hoch wie der Knopf daneben */
#friendAddForm{align-items:center; gap:.5rem;}
#friendAddForm input{height:40px;}
#friendAddForm .btn{min-height:40px;}
/* Mein Konto > Benachrichtigungen: "Kanaele" nicht halb leer neben nichts */
#tab-notifier-prefs .settings-card{grid-column:1 / -1;}

/* ======================= Backend (26.09.2026) ======================================== */
/* --- Mitgliederverwaltung: ein Kasten je Haushalt --- */
.admin-household-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:1rem 1.1rem; margin:0 0 1rem; box-shadow:var(--shadow-sm);
}
.admin-household-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:.3rem 1rem; margin-bottom:.7rem;}
.admin-household-head h3{margin:0; font-family:'Arvo', Georgia, serif; font-size:1.15rem;}
.admin-household-meta{font-size:.82rem; color:var(--ink-muted);}
.admin-household-head .admin-plan-status{font-weight:700; font-size:.9rem;}
.admin-household-head .admin-plan-credits{font-size:.8rem; color:var(--ink-muted); margin-left:auto;}
.admin-household-plan{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; padding:.7rem .8rem; margin-bottom:.8rem;
  background:var(--bg); border-radius:12px;
}
.admin-household-plan .admin-plan-controls{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:0 !important;}
.admin-household-members{display:flex; flex-direction:column; gap:.6rem;}
.admin-household-members .admin-member-mgmt-row{
  margin:0; padding:.7rem .8rem; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:none;
}
.admin-member-mgmt-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem;}
.admin-member-head-actions{display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .9rem;}
.admin-member-head-actions .admin-toggle-group{margin:0; display:flex; flex-wrap:wrap; gap:.3rem .9rem;}
.admin-member-mgmt-details{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.5rem 1rem; margin-top:.6rem; font-size:.85rem;
}
.admin-member-mgmt-details .admin-detail-wide{grid-column:span 2;}
.admin-member-mgmt-details .admin-detail-label{display:block; font-size:.72rem; color:var(--ink-muted);}

/* --- Einheitliche Felder: Eingaben/Auswahlen im Backend wie ueberall 40px hoch --- */
[id^="tab-admin-"] input[type="text"], [id^="tab-admin-"] input[type="number"], [id^="tab-admin-"] input[type="date"],
[id^="tab-admin-"] input[type="password"], [id^="tab-admin-"] input[type="search"], [id^="tab-admin-"] select{
  min-height:40px; padding-inline:.75rem; border:1px solid var(--field-border, var(--border));
  border-radius:var(--radius-field, 10px); background:var(--surface); color:var(--ink); font:inherit; font-size:.875rem;
}
[id^="tab-admin-"] table input, [id^="tab-admin-"] table select{min-height:36px;}
/* Tabellenkoepfe in Satzschreibung */
[id^="tab-admin-"] th{text-transform:none !important; letter-spacing:0 !important; font-size:.8rem;}
/* Speichern-Knoepfe nicht als Balken ueber die ganze Kartenbreite */
[id^="tab-admin-"] .btn.btn-primary{width:auto; align-self:flex-start;}

/* --- Zauber-Bilder: kleinere Kacheln, Loeschen als kleiner Knopf --- */
#tab-admin-zauberbilder .grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.8rem;}
#tab-admin-zauberbilder .tile .btn, #tab-admin-zauberbilder .tile button{
  width:auto; min-height:32px; padding:.25rem .8rem; font-size:.8rem;
}

/* --- Meldungen: "Erledigt" wie ein normaler Knopf, Notizfeld in normaler Hoehe --- */
#tab-admin-rescue-reports .rsc-report input[type="text"], #tab-admin-rescue-reports .rsc-report textarea{min-height:40px;}
#tab-admin-zauberbilder .zbild-delete-btn{width:auto !important; min-height:32px; padding:.25rem .8rem; font-size:.8rem;}
#tab-admin-zauberbilder .tile-body{display:flex; justify-content:flex-end; padding:.5rem .6rem;}
#tab-admin-rescue-reports .btn.btn-sm[data-resolve="dismiss"]{background:var(--surface); border:1px solid var(--border); color:var(--ink);}
.admin-household-members .admin-member-name{font-weight:700; margin-right:.35rem;}
.admin-household-members .admin-member-role{font-size:.82rem; color:var(--ink-muted);}

/* Handgezeichnete Icons statt Emojis im Fliesstext/Knoepfen (27.09.2026) */
.btn > .hicon, .badge > .hicon, strong > .hicon, label > .hicon, .section-label > .hicon,
.live-group-title > .hicon, .ai-chat-title-brand > .hicon{width:1.1em; height:1.1em; vertical-align:-.18em; margin-right:.1em;}
.btn:has(> .hicon){display:inline-flex; align-items:center; gap:.35rem;}
.btn:has(> .hicon) > .hicon{margin:0; vertical-align:0;}

/* ---------- Wiki > Ernaehrungsform-Popup: gut lesbar (27.09.2026) ---------------- */
.ernf-modal .ernf-cover{width:100%; aspect-ratio:16/7; object-fit:cover; border-radius:12px; margin:0 0 1rem; display:block;}
.ernf-modal .ernf-title{font-family:'Arvo', Georgia, serif; font-size:1.4rem; margin:0 0 .8rem;}
.ernf-text{font-size:1rem; line-height:1.65; color:var(--ink); max-width:62ch;}
.ernf-text p{margin:0 0 .85rem;}
.ernf-lead p{font-size:1.05rem; color:var(--ink);}
.ernf-h{font-family:'Arvo', Georgia, serif; font-size:1.02rem; margin:1.2rem 0 .4rem; color:var(--ink);}
.ernf-boxes{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.7rem; margin:.3rem 0 .6rem;}
.ernf-box{padding:.75rem .9rem; border-radius:12px; border:1px solid var(--border); background:var(--surface);}
.ernf-box p{margin:0; font-size:.95rem; line-height:1.55;}
.ernf-box-label{font-weight:700; font-size:.85rem; margin-bottom:.3rem;}
.ernf-box-note{font-weight:400; color:var(--ink-muted);}
.ernf-box-yes{border-left:4px solid var(--accent-strong); background:color-mix(in srgb, var(--accent-soft) 45%, var(--surface));}
.ernf-box-yes .ernf-box-label{color:var(--accent-strong);}
.ernf-box-no{border-left:4px solid var(--danger); background:color-mix(in srgb, var(--danger) 7%, var(--surface));}
.ernf-box-no .ernf-box-label{color:var(--danger);}

/* ---------- Neue Icons (27.09.2026, KI-generiert im Logo-Stil) ------------------- */
.hicon-restaurant{-webkit-mask-image:url('/img/icons/restaurant.png'); mask-image:url('/img/icons/restaurant.png');}
.hicon-mikrofon{-webkit-mask-image:url('/img/icons/mikrofon.png'); mask-image:url('/img/icons/mikrofon.png');}
.hicon-notiz{-webkit-mask-image:url('/img/icons/notiz.png'); mask-image:url('/img/icons/notiz.png');}
.hicon-ort{-webkit-mask-image:url('/img/icons/ort.png'); mask-image:url('/img/icons/ort.png');}
.hicon-glocke{-webkit-mask-image:url('/img/icons/glocke.png'); mask-image:url('/img/icons/glocke.png');}
.hicon-kassenbon{-webkit-mask-image:url('/img/icons/kassenbon.png'); mask-image:url('/img/icons/kassenbon.png');}
.hicon-kamera{-webkit-mask-image:url('/img/icons/kamera.png'); mask-image:url('/img/icons/kamera.png');}
.hicon-telefon{-webkit-mask-image:url('/img/icons/telefon.png'); mask-image:url('/img/icons/telefon.png');}
.hicon-website{-webkit-mask-image:url('/img/icons/website.png'); mask-image:url('/img/icons/website.png');}
.hicon-hinweis{-webkit-mask-image:url('/img/icons/hinweis.png'); mask-image:url('/img/icons/hinweis.png');}
.hicon{-webkit-mask-size:contain; mask-size:contain;}
.hicon-off{opacity:.4;}
h2 > .hicon, h3 > .hicon, summary > .hicon, .hint > .hicon, .tile-meta span > .hicon, small > .hicon, .plan-chip-name > .hicon,
.friend-plan-dish-name > .hicon, .dish-alert-chip > .hicon, a.btn > .hicon{width:1.05em; height:1.05em; vertical-align:-.16em;}
.heute-note > .hicon{width:1.2rem; height:1.2rem; color:var(--warn);}
.plan-cell-note-btn .hicon{width:1.1rem; height:1.1rem;}
.rsc-inbox-icon.hicon{width:1.3rem; height:1.3rem;}
@media (max-width:600px){
  #tab-pantry > #vrToolbar{display:flex; flex-wrap:nowrap; gap:.5rem;}
  #tab-pantry > #vrToolbar .btn{flex:1 1 0; min-width:0; justify-content:center; white-space:nowrap; margin:0 !important;}
}

/* ---------- Kochbuch-Filterzeile: alles voll rund (27.09.2026) ------------------- */
#tab-overview .filter-bar select, #tab-overview .filter-bar .search-input,
#tab-overview .filter-bar .chip, #tab-overview .filter-bar .btn{border-radius:var(--radius-pill);}
#tab-overview .filter-bar select{padding-inline:1rem 2rem;}
/* Safari/macOS zeichnet native Auswahlfelder und ignoriert dort den Innenabstand ->
   das Saison-Icon rutschte in den Text (Winki, 27.09.2026). Deshalb ohne native Optik,
   Pfeil als Verlauf in currentColor (passt in allen Themes). */
#tab-overview .filter-bar select{
  -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 1.05rem) 55%, calc(100% - .75rem) 55%;
  background-size:.32rem .32rem; background-repeat:no-repeat;
}
/* Saison: handgezeichnetes Keimling-Icon im Feld statt Emoji im Optionstext */
#seasonFilterWrap{position:relative; display:inline-flex;}
#seasonFilterToggleBtn{display:inline-flex; align-items:center; gap:.4rem;}
#seasonFilterToggleBtn .hicon{width:1rem; height:1rem;}
.season-filter-popover{max-height:min(60vh, 26rem); overflow-y:auto;}
.hicon-filter{-webkit-mask-image:url('/img/icons/filter.png'); mask-image:url('/img/icons/filter.png');}
.hicon-saison{-webkit-mask-image:url('/img/icons/saison.png'); mask-image:url('/img/icons/saison.png');}
.filter-dropdown-trigger .hicon{width:1rem; height:1rem;}

/* ---------- Hinweis statt Handschrift-Sprechblase (27.09.2026) -------------------- */
.speech-bubble{
  display:flex; align-items:flex-start; gap:.55rem; margin:0 0 .7rem; padding:.6rem .85rem; max-width:32rem;
  background:color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); color:var(--ink);
  border:1px solid var(--border); border-left:4px solid var(--accent-strong); border-radius:12px;
  font-family:inherit; font-size:.875rem; font-weight:500; line-height:1.45;
}
.speech-bubble::before, .speech-bubble::after{display:none;}
.speech-bubble > .hicon{flex:none; width:1.1rem; height:1.1rem; margin-top:.1rem; color:var(--accent-strong);}
.hicon-bearbeiten{-webkit-mask-image:url('/img/icons/bearbeiten.png'); mask-image:url('/img/icons/bearbeiten.png');}

/* ---------- Runde Knoepfe auf Kacheln: Icons mit Luft (27.09.2026) ----------------
   Die neuen Icons fuellen ihre Flaeche ganz aus - in den 2rem-Kreisen brauchen sie Rand. */
.tile-fav > .hicon{width:1.05rem; height:1.05rem;}
.tile-fav.tile-rate-trigger{width:auto; min-width:2rem; padding:0 .5rem; border-radius:var(--radius-pill);}
.rate-trigger-icon{gap:.3em;}
.rate-trigger-icon .hicon{width:.9rem; height:.9rem;}
.plan-chip-remove .hicon, .plan-chip-duplicate .hicon, .plan-chip-pin .hicon{width:.8rem; height:.8rem;}

/* ---------- Naehrwert-Icons (27.09.2026) ----------------------------------------- */
.hicon-eiweiss{-webkit-mask-image:url('/img/icons/eiweiss.png'); mask-image:url('/img/icons/eiweiss.png');}
.hicon-kohlenhydrate{-webkit-mask-image:url('/img/icons/kohlenhydrate.png'); mask-image:url('/img/icons/kohlenhydrate.png');}
.hicon-fett{-webkit-mask-image:url('/img/icons/fett.png'); mask-image:url('/img/icons/fett.png');}
.plan-summary-macro{display:inline-flex; align-items:center; gap:.3rem;}
.plan-summary-macro > .hicon{width:.85rem; height:.85rem; color:var(--ink-muted);}
/* Kleine Knoepfe auf Plan-Kacheln: Icons gut erkennbar, nicht zu wuchtig */
.plan-chip-remove, .plan-chip-pin, .plan-chip-duplicate{width:1.45rem; height:1.45rem;}
.plan-chip-pin{padding:.2rem;}
.plan-chip-remove .hicon, .plan-chip-duplicate .hicon{width:.95rem; height:.95rem;}

/* Wiki > Saisonalitaet (27.09.2026): Kategoriebild je Gruppe, Sorten klickbar
   (Popup mit passenden Rezepten, openSeasonProduceModal in app.js). */
#tab-wiki-saisonalitaet .season-group{overflow:hidden;padding-top:0}
#tab-wiki-saisonalitaet .season-group-img{display:block;width:calc(100% + 2rem);margin:0 -1rem .8rem;aspect-ratio:16/7;object-fit:cover}
#tab-wiki-saisonalitaet .season-group:not(:has(.season-group-img)){padding-top:.9rem}
#tab-wiki-saisonalitaet .season-item{font:inherit;font-size:.85rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;transition:filter .15s,border-color .15s}
#tab-wiki-saisonalitaet .season-item:hover{filter:brightness(.95);border-color:var(--primary)}
#tab-wiki-saisonalitaet .season-item:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
#tab-wiki-saisonalitaet .season-item-norecipe{opacity:.7}
.season-item-count{font-size:.72rem;font-weight:600;min-width:1.2rem;padding:0 .3rem;border-radius:999px;background:var(--surface);color:var(--ink-soft,var(--ink));text-align:center}
.season-produce-months{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.85rem;margin:.2rem 0 .8rem}
.season-recipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem;margin-top:.5rem}
.season-recipe{display:flex;flex-direction:column;gap:.35rem;padding:0;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.season-recipe:hover{border-color:var(--primary)}
.season-recipe img,.season-recipe-noimg{width:100%;aspect-ratio:4/3;object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--accent-soft)}
.season-recipe-noimg .hicon{width:1.6rem;height:1.6rem;opacity:.6}
.season-recipe-name{font-size:.82rem;font-weight:600;line-height:1.25;padding:0 .55rem .55rem}

/* Wochenplan-Naehrwertsumme (27.09.2026): kein Fragezeichen-Cursor mehr, Warndreieck
   als Knopf mit Popup "Nicht mitgerechnet" (openPlanMissingNutritionModal). */
.plan-summary{cursor:default}
.plan-summary-flag{appearance:none;border:0;background:none;padding:.15rem;margin:-.15rem;border-radius:6px;cursor:pointer;display:inline-flex;color:var(--accent-strong)}
.plan-summary-flag .hicon{width:.85rem;height:.85rem}
.plan-summary-flag:hover{background:var(--accent-soft)}
.plan-summary-flag:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.plan-missing-list{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.plan-missing-list li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.6rem .8rem;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
.plan-missing-name{display:flex;flex-direction:column;font-weight:600;min-width:0}
.plan-missing-name small{font-weight:400;color:var(--ink-muted);font-size:.78rem}
.plan-missing-list .btn{flex-shrink:0}

/* Ernaehrungsform-/Filter-Icons (27.09.2026) - ersetzen die Emojis in DIET_FILTER_ICON. */
.hicon-vegetarisch{-webkit-mask-image:url('/img/icons/vegetarisch.png'); mask-image:url('/img/icons/vegetarisch.png');}
.hicon-fisch{-webkit-mask-image:url('/img/icons/fisch.png'); mask-image:url('/img/icons/fisch.png');}
.hicon-steak{-webkit-mask-image:url('/img/icons/steak.png'); mask-image:url('/img/icons/steak.png');}
.hicon-milch{-webkit-mask-image:url('/img/icons/milch.png'); mask-image:url('/img/icons/milch.png');}
.hicon-low-carb{-webkit-mask-image:url('/img/icons/low-carb.png'); mask-image:url('/img/icons/low-carb.png');}
.hicon-avocado{-webkit-mask-image:url('/img/icons/avocado.png'); mask-image:url('/img/icons/avocado.png');}
.hicon-glyx{-webkit-mask-image:url('/img/icons/glyx.png'); mask-image:url('/img/icons/glyx.png');}
.hicon-salat{-webkit-mask-image:url('/img/icons/salat.png'); mask-image:url('/img/icons/salat.png');}
.hicon-karotte{-webkit-mask-image:url('/img/icons/karotte.png'); mask-image:url('/img/icons/karotte.png');}
.hicon-speck{-webkit-mask-image:url('/img/icons/speck.png'); mask-image:url('/img/icons/speck.png');}
.hicon-knochen{-webkit-mask-image:url('/img/icons/knochen.png'); mask-image:url('/img/icons/knochen.png');}
.hicon-palme{-webkit-mask-image:url('/img/icons/palme.png'); mask-image:url('/img/icons/palme.png');}
.hicon-olive{-webkit-mask-image:url('/img/icons/olive.png'); mask-image:url('/img/icons/olive.png');}
.hicon-herz{-webkit-mask-image:url('/img/icons/herz.png'); mask-image:url('/img/icons/herz.png');}
.hicon-melone{-webkit-mask-image:url('/img/icons/melone.png'); mask-image:url('/img/icons/melone.png');}
.hicon-shake{-webkit-mask-image:url('/img/icons/shake.png'); mask-image:url('/img/icons/shake.png');}
.hicon-waage{-webkit-mask-image:url('/img/icons/waage.png'); mask-image:url('/img/icons/waage.png');}
.hicon-yinyang{-webkit-mask-image:url('/img/icons/yinyang.png'); mask-image:url('/img/icons/yinyang.png');}
.hicon-reisschale{-webkit-mask-image:url('/img/icons/reisschale.png'); mask-image:url('/img/icons/reisschale.png');}
.hicon-teller-geteilt{-webkit-mask-image:url('/img/icons/teller-geteilt.png'); mask-image:url('/img/icons/teller-geteilt.png');}
.hicon-sonnenblume{-webkit-mask-image:url('/img/icons/sonnenblume.png'); mask-image:url('/img/icons/sonnenblume.png');}
.hicon-mond{-webkit-mask-image:url('/img/icons/mond.png'); mask-image:url('/img/icons/mond.png');}
.hicon-saftglas{-webkit-mask-image:url('/img/icons/saftglas.png'); mask-image:url('/img/icons/saftglas.png');}
.hicon-schneeflocke{-webkit-mask-image:url('/img/icons/schneeflocke.png'); mask-image:url('/img/icons/schneeflocke.png');}
.hicon-flamme{-webkit-mask-image:url('/img/icons/flamme.png'); mask-image:url('/img/icons/flamme.png');}
.hicon-blitz{-webkit-mask-image:url('/img/icons/blitz.png'); mask-image:url('/img/icons/blitz.png');}
.hicon-teller{-webkit-mask-image:url('/img/icons/teller.png'); mask-image:url('/img/icons/teller.png');}
#mainFilterDropdownPanel .filter-dropdown-icon .hicon, .filter-dropdown-icon .hicon{width:1.05rem;height:1.05rem}

/* Kochbuch: Suchzeile + Filterzeile + kleine Statuszeile (cookbook_nav.js). */
.cookbook-status-row{display:flex; justify-content:flex-end; margin:0 0 .6rem;}
.cookbook-status-row[hidden]{display:none;}
.cookbook-status-row .recipe-review-hint{margin:0;}
.cookbook-search-row{display:flex; align-items:center; gap:.5rem; margin:0 0 .6rem;}
.cookbook-search-row .search-input{flex:1 1 auto; min-width:0; max-width:none; height:40px; border-radius:var(--radius-pill);}
.cookbook-search-row .btn{height:40px; min-height:40px; flex:none; border-radius:var(--radius-pill);}
#tab-overview .cookbook-reset-chip{
  display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .75rem; font:inherit; font-size:.8rem; font-weight:600;
  color:var(--accent-strong); background:var(--accent-soft); border:1px solid transparent; border-radius:999px;
  text-decoration:none; cursor:pointer;
}
#tab-overview .cookbook-reset-chip[hidden]{display:none;}
#tab-overview .cookbook-reset-chip:hover{border-color:var(--accent-strong);}
.cookbook-reset-x{font-size:.7rem; line-height:1;}
#memberFilterWrap{position:relative; display:inline-block;}
#tab-overview > .filter-bar .chip{height:40px; min-height:40px; display:inline-flex; align-items:center; gap:.4rem; padding-inline:1rem;}

/* Kochbuch-Filter (27.09.2026, Winki: "schriftarten und -groessen sind noch
   unterschiedlich"): die Popover von Saison/Essensregeln/Schmeckt sehen jetzt aus wie
   die Liste unter "Filtern" (.filter-dropdown-panel/-row/-heading in style.css). */
#tab-overview .filter-bar .rating-filter-popover{padding:.6rem .5rem; min-width:15rem;}
#tab-overview .filter-bar .rating-filter-popover .checkbox-group{display:flex; flex-direction:column; gap:0;}
#tab-overview .filter-bar .rating-filter-popover .checkbox-field{
  display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; border-radius:8px; margin:0;
  cursor:pointer; user-select:none; font-size:.9rem; font-weight:400; color:var(--ink);
}
#tab-overview .filter-bar .rating-filter-popover .checkbox-field:hover{background:var(--surface-hover);}
#tab-overview .filter-bar .rating-filter-popover .checkbox-field:has(input:checked){background:var(--accent-soft); color:var(--accent-strong); font-weight:700;}
#tab-overview .filter-bar .rating-filter-popover .checkbox-field input{margin:0;}
#tab-overview .filter-bar .rating-filter-popover .member-field-label{
  display:block; font-size:.7rem; font-weight:700; color:var(--ink-muted); padding:.2rem .6rem .35rem; margin:0 !important;
}
#tab-overview .filter-bar .rating-filter-popover .member-field-row{display:block; margin:.5rem 0 0 !important; padding-top:.5rem; border-top:1px solid var(--border);}
#tab-overview .filter-bar .rating-filter-popover select{
  width:calc(100% - 1.2rem); margin:0 .6rem .2rem; height:36px; min-height:36px; font:inherit; font-size:.9rem; padding:0 2rem 0 .8rem;
}

/* Inspiration: "Am beliebtesten" (27.09.2026) - Daumen-Zahl unten links auf der Kachel. */
.tile-likes{
  position:absolute; left:.55rem; bottom:.55rem; z-index:2; display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .55rem; border-radius:999px; background:var(--surface); color:var(--ink);
  font-size:.78rem; font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.tile-likes .hicon{width:.85rem; height:.85rem; color:var(--accent-strong);}

/* Inspiration-Reiter "Am beliebtesten" mit Daumen-Icon (renderInspiration). */
.rb-toptab-top{display:inline-flex; align-items:center; gap:.35rem;}
.rb-toptab-top .hicon{width:.9rem; height:.9rem;}

/* Kochbuch: Schalter "Tags" rechts in der Kopfzeile der Rezept-Karte (cookbook_nav.js). */
.rb-panel-head .cookbook-tags-switch{margin-left:auto; align-self:center;}
.cookbook-tags-switch{display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; font-weight:600; color:var(--ink-muted); cursor:pointer; user-select:none;}
.cookbook-tags-switch input{position:absolute; opacity:0; width:1px; height:1px;}
.cookbook-switch-track{position:relative; width:2.1rem; height:1.2rem; border-radius:999px; background:var(--border); transition:background .15s;}
.cookbook-switch-track::after{content:""; position:absolute; top:.15rem; left:.15rem; width:.9rem; height:.9rem; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s;}
.cookbook-tags-switch input:checked + .cookbook-switch-track{background:var(--accent-strong);}
.cookbook-tags-switch input:checked + .cookbook-switch-track::after{transform:translateX(.9rem);}
.cookbook-tags-switch input:focus-visible + .cookbook-switch-track{outline:2px solid var(--primary); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ .cookbook-switch-track, .cookbook-switch-track::after{transition:none;} }
body.cookbook-hide-tags .tile .tile-meta .badge:not(.badge-warn){display:none;}
.heute-head .heute-confirm-chip{margin-left:auto; align-self:center;}
.hicon-getraenke{-webkit-mask-image:url('/img/icons/getraenke.png'); mask-image:url('/img/icons/getraenke.png');}

/* Profilbild-Icons im Logo-Stil (27.09.2026, AVATAR_ICON_SVGS in app.js). */
.avatar-hicon{-webkit-mask-image:var(--avatar-icon); mask-image:var(--avatar-icon);}
.member-avatar .avatar-hicon{width:68%; height:68%; vertical-align:0;}
.avatar-icon-opt .avatar-hicon{width:100%; height:100%;}
/* Onboarding: Auswahl wirklich rund (vorher streckte das Raster die Breite -> oval). */
div.onb-avatar-grid{grid-template-columns:repeat(auto-fill, 3.1rem); justify-content:space-between; align-items:center;}
.onb-avatar-grid .onb-avatar{width:3.1rem; height:3.1rem; padding:.5rem; aspect-ratio:auto;}
.onb-avatar .avatar-hicon{width:100%; height:100%;}

/* SchmatziSpatzi-Chat neu aufgeteilt (27.09.2026, Winki: "der vorschläge-output soll in
   einer zeile (3 spalten) unterhalb des chats sein. das text-eingabe-feld ist im
   chatbereich. grenze die bereiche durch geeignete mittel entsprechend ab").
   index.html bleibt unveraendert: .ai-chat-layout wird per display:contents
   "aufgeloest", die Reihenfolge kommt ueber order. Chat = eine Karte (Verlauf oben,
   Eingabe unten angesetzt), Vorschlaege = eigener Bereich darunter. */
#aiChatModal{width:min(960px, 96vw); max-height:min(90vh, 900px);}
#aiChatModal .ai-chat-header{order:0;}
#aiChatModal .ai-chat-layout{display:contents;}
#aiChatModal .ai-chat-messages{
  order:1; flex:1 1 auto; min-height:9rem; margin:0; padding:1rem 1rem .8rem; gap:.8rem;
  background:var(--bg); border:1px solid var(--border); border-bottom:none; border-radius:var(--radius-card) var(--radius-card) 0 0;
}
#aiChatModal .ai-chat-input-row{
  order:2; margin:0; padding:.7rem .8rem; background:var(--bg); align-items:center;
  border:1px solid var(--border); border-top:1px dashed var(--border); border-radius:0 0 var(--radius-card) var(--radius-card);
}
#aiChatModal .ai-chat-input-row textarea{background:var(--surface);}
#aiChatModal .ai-chat-suggestions-panel{
  order:3; flex:0 0 auto; width:auto; min-height:0; max-height:46%; margin-top:1rem; padding:0; border:none; overflow:visible;
}
#aiChatModal .ai-chat-suggestions-panel-list{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 1.4rem) / 3); gap:.7rem;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; padding:.1rem .1rem .5rem; align-items:stretch;
}
#aiChatModal .ai-suggestion-card{scroll-snap-align:start; min-width:0; max-height:19rem; overflow-y:auto;}
@media (max-width: 760px){
  #aiChatModal .ai-chat-suggestions-panel-list{grid-auto-columns:82%;}
}
/* Zeilen mit Profilbild */
.ai-chat-row{display:flex; align-items:flex-end; gap:.55rem;}
.ai-chat-row.user{flex-direction:row-reverse;}
.ai-chat-row .ai-chat-bubble{max-width:min(80%, 34rem); align-self:auto;}
.ai-chat-row > .member-avatar, .ai-chat-avatar{width:2.1rem; height:2.1rem; flex:none; font-size:.85rem;}
.ai-chat-avatar{border-radius:50%; overflow:hidden; background:var(--surface); border:1px solid var(--border);}
.ai-chat-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
#aiChatModal .ai-chat-assumptions{margin-left:2.7rem;}
#aiChatModal .ai-chat-title{display:grid; grid-template-columns:auto 1fr; column-gap:.75rem; align-items:center;}
#aiChatModal .ai-chat-title::before{
  content:""; grid-row:1 / span 2; width:3rem; height:3rem; border-radius:50%; border:1px solid var(--border);
  background:var(--surface) url('/img/schmatzispatzi-avatar.png') center / cover no-repeat;
}
#aiChatModal .ai-chat-title-brand .hicon{display:none;}

/* SchmatziSpatzi-Chat lebendiger (27.09.2026, Winki: "Peppe den chat auf - er wirkt
   distanziert" / Sprechblasen duerfen weiter in die Mitte reichen). */
.ai-chat-row{align-items:flex-start;}
.ai-chat-row .ai-chat-bubble{max-width:min(88%, 46rem); box-shadow:0 1px 2px rgba(0,0,0,.05);}
#aiChatModal .ai-chat-bubble.assistant{
  background:color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius:4px 16px 16px 16px;
}
#aiChatModal .ai-chat-bubble.user{border-radius:16px 4px 16px 16px;}
.ai-chat-avatar{box-shadow:0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);}
@media (prefers-reduced-motion: no-preference){
  .ai-chat-row{animation:aiChatPop .22s ease-out both;}
  @keyframes aiChatPop{from{opacity:0; transform:translateY(6px) scale(.98);} to{opacity:1; transform:none;}}
}
/* "Ich überleg mal kurz" mit huepfenden Punkten statt Wartetext */
#aiChatModal .ai-chat-bubble.ai-chat-loading{font-style:normal; color:var(--ink-muted);}
#aiChatModal .ai-chat-bubble.ai-chat-loading::after{content:" …"; display:inline-block;}
@media (prefers-reduced-motion: no-preference){
  #aiChatModal .ai-chat-bubble.ai-chat-loading::after{content:"..."; margin-left:.1rem; animation:aiChatDots 1.2s steps(4, end) infinite; overflow:hidden; width:0; vertical-align:bottom; white-space:nowrap;}
  @keyframes aiChatDots{to{width:1.1em;}}
}

/* Vorschlaege als Anhang im Chat (27.09.2026, appendToAiSuggestionsPanel in app.js) -
   der fruehere eigene Bereich unter dem Chat entfaellt, der Chat nutzt die volle Hoehe. */
#aiChatModal .ai-chat-suggestions-panel{display:none !important;}
#aiChatModal .ai-chat-messages{min-height:16rem;}
.ai-chat-attach{flex:1 1 auto; min-width:0; max-width:calc(100% - 3.2rem);}
.ai-chat-attach-label{font-size:.75rem; font-weight:700; color:var(--ink-muted); margin:.15rem 0 .35rem .2rem;}
.ai-chat-attach-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(14rem, calc((100% - 1.2rem) / 3)); gap:.6rem;
  overflow-x:auto; scroll-snap-type:x proximity; padding:.1rem .1rem .45rem; align-items:stretch;
}
.ai-chat-attach-strip > *{scroll-snap-align:start; min-width:0;}
.ai-chat-attach-strip .ai-suggestion-card{
  max-height:17rem; overflow-y:auto; border-radius:4px 14px 14px 14px;
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow:0 1px 3px rgba(0,0,0,.06);
}
@media (max-width: 760px){
  .ai-chat-attach-strip{grid-auto-columns:78%;}
}
/* Groessere Profilfotos */
.ai-chat-row > .member-avatar, .ai-chat-avatar{width:2.6rem; height:2.6rem; font-size:1rem;}
#aiChatModal .ai-chat-assumptions{margin-left:3.2rem;}

/* Kachel: Preis unter der Zeit statt daneben (27.09.2026, Winki: "wirkt es wie ein
   'Zeit ist gleich Preis'") - Zeit fett, Preis normal in eigener Zeile, danach die
   Tags. Die Zeit ist der Span ohne Klasse (createDishTile), der Preis kommt aus
   budget.js (.budget-tile-cost). */
.tile .tile-meta > span:not([class]){order:0; font-weight:700;}
.tile .tile-meta > .budget-tile-cost{order:1; flex-basis:100%; font-weight:400;}
.tile .tile-meta > :not(span:not([class])):not(.budget-tile-cost){order:2;}

/* Gemerkte Essensregeln + Filtern-Liste auch im Gericht-Picker (27.09.2026). */
.essensregeln-wrap{position:relative; display:inline-block;}
.essensregeln-note{font-size:.72rem; color:var(--ink-muted); margin:.5rem .6rem .1rem; line-height:1.35;}
.plan-picker-filters .dropdown-wrap{position:relative; display:inline-block;}
.plan-picker-filters .chip, .plan-picker-filters .filter-dropdown-trigger{height:40px; min-height:40px; display:inline-flex; align-items:center; gap:.4rem; padding-inline:1rem; border-radius:var(--radius-pill);}
.plan-picker-filters .search-input{height:40px; border-radius:var(--radius-pill);}
.plan-picker-filters .rating-filter-popover{padding:.6rem .5rem; min-width:15rem;}
.plan-picker-filters .rating-filter-popover .checkbox-group{display:flex; flex-direction:column; gap:0;}
.plan-picker-filters .rating-filter-popover .checkbox-field{
  display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; border-radius:8px; margin:0;
  cursor:pointer; user-select:none; font-size:.9rem; font-weight:400; color:var(--ink);
}
.plan-picker-filters .rating-filter-popover .checkbox-field:hover{background:var(--surface-hover);}
.plan-picker-filters .rating-filter-popover .checkbox-field:has(input:checked){background:var(--accent-soft); color:var(--accent-strong); font-weight:700;}
.plan-picker-filters .rating-filter-popover .checkbox-field input{margin:0;}
.plan-picker-filters .rating-filter-popover .member-field-label{display:block; font-size:.7rem; font-weight:700; color:var(--ink-muted); padding:.2rem .6rem .35rem; margin:0 !important;}
.plan-picker-filters .rating-filter-popover .member-field-row{display:block; margin:.5rem 0 0 !important; padding-top:.5rem; border-top:1px solid var(--border);}
.plan-picker-filters .rating-filter-popover select{width:calc(100% - 1.2rem); margin:0 .6rem .2rem; height:36px; font:inherit; font-size:.9rem;}
/* Tags-Schalter auch in Gericht-Auswahlen und Board-Ansicht (cookbook_nav.js) */
.filter-bar .tags-switch-inline{margin-left:auto; height:40px;}
.board-tags-row{display:flex; justify-content:flex-end; margin:.2rem 0 .6rem;}
/* Wiki > Ernaehrungsformen: einheitliche Erklaerung (27.09.2026) */
.ernf-regeln-body{max-width:52rem; padding:.2rem 0 .4rem 1.1rem; border-left:3px solid var(--accent-soft);}
.ernf-regeln-h{font-size:.92rem; margin:1rem 0 .3rem; color:var(--ink);}
.ernf-regeln-body .hint{margin:.2rem 0;}
/* "Filter zurücksetzen" in den Gericht-Pickern wie im Kochbuch als kleine Pille */
.plan-picker-filters .chip-reset{
  display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .75rem; font-size:.8rem; font-weight:600;
  color:var(--accent-strong); background:var(--accent-soft); border:1px solid transparent; border-radius:999px; text-decoration:none;
}
.plan-picker-filters .chip-reset::before{content:"✕"; font-size:.7rem;}
.plan-picker-filters .chip-reset[hidden]{display:none;}
.plan-picker-filters .chip-reset:hover{border-color:var(--accent-strong);}

/* Anmeldeseite (27.09.2026, Winki: "die seite für das anmelden ist kaputt"): billing.js
   haengt die Rechtstexte-Leiste (.billing-legal-footer.is-auth) in #authScreen - der ist
   ein waagerechtes Flex-Layout, dadurch stand die Leiste NEBEN der Karte. Jetzt
   untereinander, Karte + Links mittig. */
.auth-screen{flex-direction:column; overflow-y:auto; justify-content:safe center;}
.auth-screen > .billing-legal-footer.is-auth{flex:none;}
.help-inline-icon{width:1.15em; height:1.15em; vertical-align:-.2em; margin:0 .1em; color:var(--accent-strong);}

/* ---------- Handy-Menue (28.09.2026, mobile_nav.js) ----------
   Bis 860px: feste, schmale Kopfzeile (☰ · Seitentitel · Küchenpost · Profil) und die
   Seitenleiste als ausklappbares Seitenmenue statt der waagerechten Reiterleiste. */
.mobile-nav-btn, .mobile-nav-scrim{display:none;}
@media (max-width: 860px){
  /* Kopfzeile: klebt oben, eine Zeile */
  .masthead{
    position:sticky; top:0; z-index:40; flex-wrap:nowrap; align-items:center; gap:.5rem;
    margin:0 -24px 1rem; padding:.55rem 16px; background:color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 1px 0 var(--border);
  }
  /* Offene Detailansicht/Popups liegen darueber (Winki, 28.09.2026: "Ich kann mobil nicht
     scrollen, sodass ich den obersten Inhalt der Kachel gut bedienen kann (liegt unter dem Header)") */
  body:has(.drawer.open) .masthead, body:has(.modal-scrim.open) .masthead, body:has(.scrim.open) .masthead{z-index:20;}
  .masthead-title{flex:1 1 auto; min-width:0;}
  .masthead h1{font-size:1.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .mobile-nav-btn{
    display:inline-flex; flex-direction:column; justify-content:center; gap:4px; flex:none;
    width:42px; height:42px; padding:0 10px; border:1px solid var(--border); border-radius:12px;
    background:var(--surface); cursor:pointer;
  }
  .mobile-nav-btn span{display:block; height:2px; border-radius:2px; background:var(--ink);}
  .mobile-nav-btn:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px;}
  #appWrap .wrap{padding-top:0;}
  /* Kuechenpost: nur Glocke + Zahl (Beschriftung bleibt fuer Screenreader im aria-label) */
  .inbox-header-btn .inbox-header-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .inbox-header-btn::before{content:""; width:1.2rem; height:1.2rem; background-color:currentColor;
    -webkit-mask:url('/img/icons/glocke.png') center / contain no-repeat; mask:url('/img/icons/glocke.png') center / contain no-repeat;}
  .inbox-header-btn{display:inline-flex; align-items:center; gap:.35rem; padding-inline:.7rem;}
  /* Deko-Band oben entfaellt auf dem Handy (spart Platz) */
  .theme-header-banner{display:none !important;}

  /* Seitenleiste -> Seitenmenue */
  .sidebar{
    position:fixed; top:0; bottom:0; left:0; z-index:70; width:min(84vw, 320px); height:100dvh;
    display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
    padding:1.1rem 0 1.4rem; background:var(--rail); box-shadow:0 0 28px rgba(0,0,0,.25);
    transform:translateX(-105%); transition:transform .22s ease; visibility:hidden;
  }
  body.mobile-nav-open .sidebar{transform:none; visibility:visible;}
  .sidebar-brand{display:block; order:0; padding:0 1rem;}
  .sidebar-brand .sidebar-logo{max-width:130px; margin:0 0 1rem .3rem;}
  .nav-group-label{display:block;}
  .nav-group-gap{display:block; height:.8rem;}
  .sidebar .tabs{
    order:1; flex-direction:column; flex-wrap:nowrap; overflow:visible; gap:2px; margin:0; padding:0 .6rem;
    -webkit-mask-image:none; mask-image:none;
  }
  .sidebar .tab-btn{margin:0; padding:.7rem .85rem; font-size:.98rem; border-radius:12px; gap:.75rem;}
  .sidebar .tab-btn.active,
  .sidebar .tab-btn.active:hover{
    margin:0; padding:.7rem .85rem; border:none; border-radius:12px;
    background:var(--accent-soft); color:var(--ink); font-weight:700;
  }
  .sidebar-footer{
    order:2; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
    margin:1.2rem 1rem 0; padding-top:1rem; border-top:1px solid var(--border);
  }
  .sidebar-corner-art{width:64px; height:64px;}
  .sidebar-quote{text-align:center; font-size:1.05rem;}
  .mobile-nav-scrim{
    display:block; position:fixed; inset:0; z-index:65; background:rgba(20,20,20,.38);
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  body.mobile-nav-open .mobile-nav-scrim{opacity:1; pointer-events:auto;}
  body.mobile-nav-open{overflow:hidden;}
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce){
  .sidebar, .mobile-nav-scrim{transition:none;}
}

/* Eingabefelder mobil nie breiter als ihr Platz (28.09.2026, Winki: "manche
   eingabefelder uÄ gehen rechts über den Rand hinaus, wie zB hier das Datumsfeld bei den
   Vorräten"). Ursache v.a. Safari/iOS: Datums-/Zeitfelder haben dort eine eigene
   Mindestbreite und sprengen Grid-/Flex-Spalten. */
@media (max-width: 860px){
  input, select, textarea{max-width:100%; min-width:0; box-sizing:border-box;}
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"]{
    -webkit-appearance:none; appearance:none; min-width:0; width:100%; max-width:100%;
    /* Safari zieht ein LEERES Datumsfeld ohne native Optik sonst auf ~0 Hoehe zusammen
       (28.09.2026: leere umrahmte Zeile bei "Eigenes NEM anlegen", flaches MHD-Feld). */
    min-height:2.75rem; line-height:1.4; padding-top:.55rem; padding-bottom:.55rem;
    display:block;
  }
  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value{text-align:left; min-width:0;}
  /* Grid-/Flex-Kinder duerfen schrumpfen (sonst gilt min-width:auto = Inhaltsbreite) */
  .pantry-card-main > *, .vr-card .pantry-card-main > *, .product-pantry-card > *, .filter-bar > *{min-width:0;}
}

/* Ruhiger Start + ruhiges "Mein Tag" (28.09.2026, siehe startApp/loadAndRenderHeute) */
body.app-booting #appWrap .wrap{visibility:hidden;}
body.app-booting #appWrap::after{
  content:""; position:fixed; left:50%; top:42%; width:76px; height:76px; margin:-38px 0 0 -38px; z-index:30;
  background:url('/img/app-icon-192.png') center / contain no-repeat; border-radius:20px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
@media (min-width: 861px){ body.app-booting #appWrap::after{left:calc(50% + 120px);} }
@media (prefers-reduced-motion: no-preference){
  body.app-booting #appWrap::after{animation:bootPulse 1.4s ease-in-out infinite;}
  @keyframes bootPulse{0%,100%{transform:scale(1); opacity:.9;} 50%{transform:scale(1.06); opacity:1;}}
}
#tab-heute.heute-loading #todaySuggestRoot{display:none;}
#tab-heute .heute-loading-hint{min-height:50vh;}

/* Hinweis-Leiste (Toast) ruhiger (28.09.2026, Winki: "Zentrierend, Ziel abkürzen.
   Höchstens zweizeilig"): zentriert, abgerundetes Rechteck statt Oval, max. 2 Zeilen,
   und immer UEBER geoeffneten Fenstern (vorher Ebene 40 - Fehlermeldungen konnten
   hinter einem Auswahlfenster verschwinden). */
.toast{
  width:max-content; max-width:min(90vw, 26rem); text-align:center; line-height:1.35;
  border-radius:14px; padding:.65rem 1.1rem; z-index:120;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}

/* "Inspirier mich!" auf Mein Tag (today_teaser.js) */
.today-inspire-teaser{
  display:flex; align-items:center; gap:.9rem; max-width:980px; width:100%; margin:0 0 1.2rem;
  padding:.9rem 1rem; background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-card);
}
.today-inspire-icon{flex:none; display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem;
  border-radius:50%; background:var(--accent-soft); color:var(--accent-strong);}
.today-inspire-icon .hicon{width:1.3rem; height:1.3rem;}
.today-inspire-text{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.15rem; font-size:.9rem; color:var(--ink-muted);}
.today-inspire-text strong{color:var(--ink); font-size:1rem;}
.today-inspire-btn{flex:none; white-space:nowrap; display:inline-flex; align-items:center; gap:.4rem;}
#tab-heute:not(.today-inspire-open) #todaySuggestRoot{display:none;}
#tab-heute.today-inspire-open .today-inspire-teaser{margin-bottom:.6rem; border-style:solid;}
#tab-heute.heute-loading .today-inspire-teaser{display:none;}
@media (max-width: 560px){
  .today-inspire-teaser{flex-wrap:wrap;}
  .today-inspire-btn{flex:1 1 100%; justify-content:center;}
}

/* NEM-Einnahmeplan neu (28.09.2026): die NEMs im Mittelpunkt, Mahlzeit nur als Symbol. */
#tab-nem-plan .einnahmeplan-tile-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:.8rem;}
#tab-nem-plan .einnahmeplan-tile{display:flex; flex-direction:column; padding:.75rem .85rem; gap:.55rem; cursor:pointer;}
#tab-nem-plan .einnahmeplan-tile > .tile-photo{display:none;}
.einnahmeplan-tile-head{display:flex; align-items:center; gap:.55rem; padding-bottom:.5rem; border-bottom:1px solid var(--border);}
.einnahmeplan-meal-thumb{width:2.2rem; height:2.2rem; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--border);}
.einnahmeplan-tile-bezug{flex:1 1 auto; font-weight:700; font-size:.85rem; color:var(--ink-muted);}
#tab-nem-plan .einnahmeplan-tile-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem;}
.einnahmeplan-nem{display:flex; align-items:center; gap:.65rem;}
.einnahmeplan-nem-img{width:3.2rem; height:3.2rem; border-radius:10px; object-fit:cover; flex:none; background:var(--surface-hover); border:1px solid var(--border);}
.einnahmeplan-nem-img-empty{display:inline-flex; align-items:center; justify-content:center; color:var(--accent-strong);}
.einnahmeplan-nem-img-empty .hicon{width:1.4rem; height:1.4rem;}
.einnahmeplan-nem-name{flex:1 1 auto; min-width:0; font-weight:700; font-size:.95rem; line-height:1.25; color:var(--ink);}
#tab-nem-plan .einnahmeplan-tile-menge{flex:none; font-size:.82rem; font-weight:700; color:var(--accent-strong); background:var(--accent-soft); padding:.15rem .55rem; border-radius:999px; white-space:nowrap;}
.einnahmeplan-ki-badge{display:inline-block; margin-left:.35rem; font-size:.62rem; font-weight:700; padding:.05rem .35rem; border-radius:6px; background:var(--surface-hover); color:var(--ink-muted); vertical-align:middle;}
.einnahmeplan-einordnen-btn{display:inline-flex; align-items:center; gap:.35rem;}
/* NEM-Zeile ruhiger (28.09.2026): Bild links, rechts daneben Name oben, Menge darunter */
#tab-nem-plan .einnahmeplan-nem{display:flex !important; flex-wrap:nowrap !important; align-items:center; gap:.7rem;}
.einnahmeplan-nem-text{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.25rem;}
#tab-nem-plan .einnahmeplan-nem-name{flex:none;}
#tab-nem-plan .einnahmeplan-nem .einnahmeplan-tile-menge, #tab-nem-plan .einnahmeplan-nem .einnahmeplan-menge-ergaenzen{margin:0;}
.nem-manual-mhd{display:flex; flex-direction:column; gap:.25rem; flex:1 1 11rem; min-width:0; font-size:.78rem; font-weight:700; color:var(--ink-muted);}
.nem-manual-mhd input{width:100%;}
.einnahmeplan-abstand{display:flex; align-items:flex-start; gap:.3rem; font-size:.78rem; line-height:1.3; color:var(--accent-strong); font-weight:600;}
.einnahmeplan-abstand .hicon{width:.85rem; height:.85rem; flex:none; margin-top:.1rem;}
.hicon-gesicht-nein{-webkit-mask-image:url('/img/icons/gesicht-nein.png'); mask-image:url('/img/icons/gesicht-nein.png');}
.hicon-gesicht-ja{-webkit-mask-image:url('/img/icons/gesicht-ja.png'); mask-image:url('/img/icons/gesicht-ja.png');}
.hicon-gesicht-liebe{-webkit-mask-image:url('/img/icons/gesicht-liebe.png'); mask-image:url('/img/icons/gesicht-liebe.png');}

/* Seitenleiste: Spruch + Bild bleiben unten sichtbar, nur die Menueliste scrollt (Winki,
   28.09.2026: "unsere sprüche [sind] unterhalb, weil unser menü zu lang ist").
   Bei niedrigen Fenstern wird das Bild kleiner bzw. faellt weg, der Spruch bleibt. */
@media (min-width: 861px){
  .sidebar{overflow:hidden;}
  .sidebar > .tabs{
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
    /* weicher Auslauf unten zeigt: hier geht es weiter */
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent);
            mask-image:linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent);
    padding-bottom:1rem;
  }
  .sidebar > .tabs::-webkit-scrollbar{display:none;}
  .sidebar > .sidebar-footer{flex:none; margin-top:.6rem;}
}
@media (min-width: 861px) and (max-height: 900px){
  :root[data-design="color-kids"] .sidebar-corner-art{max-width:110px;}
  :root[data-design="sporty-steel"] .sidebar-corner-art{max-width:140px;}
}
@media (min-width: 861px) and (max-height: 760px){
  .sidebar-corner-art{display:none !important;}
  .sidebar > .sidebar-footer{padding-top:.7rem;}
}

/* ---------- "Wochenplan vorschlagen" schlank (28.09.2026) ----------
   Vier gleich hohe Felder im Raster, Filter im Aufklapp-Feld, Ziele-Zeile, "Erweitert". */
.autofill-modal .af-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.9rem 1rem; margin-bottom:1rem;}
.autofill-modal .af-field{display:flex; flex-direction:column; gap:.3rem; min-width:0; position:relative; margin:0;}
.autofill-modal .af-label{font-size:.78rem; font-weight:700; color:var(--ink-muted);}
.autofill-modal .af-field select, .autofill-modal .af-select-like{
  width:100%; height:2.6rem; box-sizing:border-box; border:1px solid var(--border); border-radius:10px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:.92rem; padding:0 2rem 0 .8rem; margin:0;
}
.autofill-modal .af-select-like{
  display:flex; align-items:center; justify-content:flex-start; text-align:left; cursor:pointer; position:relative;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; list-style:none; font-weight:600;
}
.autofill-modal .af-select-like::-webkit-details-marker{display:none;}
.autofill-modal .af-select-like::after{
  content:""; position:absolute; right:.9rem; top:50%; width:.45rem; height:.45rem; margin-top:-.35rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:.6;
}
.autofill-modal .af-select-like > span{overflow:hidden; text-overflow:ellipsis;}
.autofill-modal .autofill-scope-wrap{display:block; position:relative;}
.autofill-modal .af-dropdown{position:relative;}
.autofill-modal .af-dropdown[open] > .af-select-like{border-color:var(--accent);}
.autofill-modal .af-dropdown-panel{
  position:absolute; z-index:5; top:calc(100% + .35rem); right:0; width:min(22rem, 80vw);
  background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 40px -18px rgba(0,0,0,.45);
  padding:.5rem; display:flex; flex-direction:column; gap:.15rem;
}
.autofill-modal .af-dropdown-panel .autofill-filter-toggle{
  border:none; background:none; padding:.45rem .5rem; margin:0; border-radius:8px; min-height:0; font-size:.9rem;
}
.autofill-modal .af-dropdown-panel .autofill-filter-toggle:hover{background:var(--surface-hover);}
.autofill-modal .af-dropdown-panel select{height:2.2rem; margin:0 0 .25rem 1.9rem; width:calc(100% - 1.9rem);}
.autofill-modal .af-goals{
  display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; border:1px solid var(--border);
  border-radius:12px; padding:.8rem 1rem; margin:0 0 1rem; cursor:pointer; background:var(--surface);
}
.autofill-modal .af-goals.is-off{cursor:default; align-items:center;}
.autofill-modal label.af-goals{justify-content:flex-start;}
.autofill-modal .af-goals input{margin-top:.2rem; width:1.1rem; height:1.1rem; accent-color:var(--accent); flex:none;}
.autofill-modal .af-goals-text{display:flex; flex-direction:column; gap:.3rem; min-width:0;}
.autofill-modal .af-goals-text .hint{margin:0; font-size:.8rem;}
.autofill-modal .af-goals-people{display:flex; flex-direction:column; gap:.25rem;}
.autofill-modal .af-goals-person{display:flex; align-items:center; gap:.45rem; font-size:.85rem;}
.autofill-modal .af-advanced{border-top:1px solid var(--border); padding-top:.6rem;}
.autofill-modal .af-advanced > summary{cursor:pointer; font-weight:700; font-size:.88rem; color:var(--ink-muted); padding:.2rem 0;}
.autofill-modal .af-advanced[open] > summary{margin-bottom:.4rem;}
@media (max-width: 640px){
  .autofill-modal .af-grid{grid-template-columns:1fr;}
  .autofill-modal .af-dropdown-panel{position:static; width:auto; margin-top:.35rem; box-shadow:none;}
}

/* Seitenleiste: aufklappbare Gruppen (static/js/nav_groups.js, 29.09.2026) */
.nav-group-label.nav-group-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; cursor:pointer; user-select:none;
  margin-left:.35rem; margin-right:.6rem; padding:.3rem .5rem; border-radius:8px;
}
.nav-group-label.nav-group-toggle:hover{background:var(--surface-hover); opacity:1;}
.nav-group-label.nav-group-toggle:focus-visible{outline:2px solid var(--accent-strong); outline-offset:1px;}
.nav-group-label.nav-group-toggle::after{
  content:""; width:.42rem; height:.42rem; flex:none; margin-right:.15rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px);
  transition:transform .15s ease; opacity:.7;
}
.nav-group-label.nav-group-toggle.is-collapsed::after{transform:rotate(-45deg);}
.tab-btn.nav-collapsed{display:none !important;}
/* zugeklappte Gruppen stehen enger beieinander */
.nav-group-label.nav-group-toggle.is-collapsed{margin-bottom:.1rem;}
@media (prefers-reduced-motion: reduce){ .nav-group-label.nav-group-toggle::after{transition:none;} }