/* ==========================================================================
   WERK24-Stil: kochWERK24 im Erscheinungsbild von kellerWERK24 (gleiche Farben, Schrift, Karten, Leisten).
   Wird als LETZTE Stildatei geladen und ändert nur das Aussehen, nicht den Aufbau.
   Werte aus kellerWERK24 css/app.css (4.14–4.17).
   ========================================================================== */
:root {
  --k-bg: #f5f3ee; --k-surface: #fffdf9; --k-surface-2: #eeede6; --k-input: #fbfaf6; --k-ink: #18231d; --k-muted: #5f6963;
  --k-line: #e3e3db; --k-fill: #173d2a; --k-on-fill: #ffffff; --k-acc: #2f6b4b; --k-acc-soft: #e2ece4;
  --k-red: #b3372d; --k-red-soft: #fbe5e2; --k-amber: #95580a; --k-amber-soft: #fbefd9;
  --k-shadow: 0 1px 2px rgba(23, 40, 30, .05), 0 6px 18px rgba(23, 40, 30, .06); --k-r: 18px;
  --k-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html.dark, .dark {
  --k-bg: #0e1511; --k-surface: #172019; --k-surface-2: #222c25; --k-input: #121a15; --k-ink: #e8eee9; --k-muted: #a2ada5;
  --k-line: rgba(255, 255, 255, .1); --k-fill: #2f6b4b; --k-on-fill: #ffffff; --k-acc: #8fcc9f; --k-acc-soft: #1f3327;
  --k-red: #ff8f85; --k-red-soft: #3a1f1c; --k-amber: #e8b45e; --k-amber-soft: #382d18;
  --k-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
}

/* ---- Grundfläche und Schrift ---- */
html, html.dark { background: var(--k-bg) !important; }
body { background: var(--k-bg) !important; background-image: none !important; color: var(--k-ink); font-family: var(--k-font) !important; }
body::before { background: var(--k-surface) !important; }   /* Fläche unter der Statusleiste in Balkenfarbe */
h1, h2, h3, h4, .kwh-brand-txt b, .kw-nav-l, .kbn-tab, .kwh-cta, .kwh-btn, button, .btn, .pill, input, select, textarea { font-family: var(--k-font) !important; }
.kw-ansicht .head h2, .kw-ansicht > section > .head h2, section .head h2 { font-size: 22px !important; line-height: 1.2 !important; letter-spacing: -.3px !important; font-weight: 800 !important; color: var(--k-ink); }
.eyebrow { color: var(--k-muted) !important; letter-spacing: .9px !important; font-weight: 700 !important; font-size: 11.5px !important; }
.muted { color: var(--k-muted); }

/* ---- Kopfzeile: App-Symbol + Name + Unterzeile, flach wie kellerWERK24 ---- */
#kwHeader { background: var(--k-bg) !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#kwHeader .kwh-brand { display: flex !important; align-items: center; gap: 10px; text-decoration: none; color: var(--k-ink); min-width: 0; }
#kwHeader .kwh-brand .kwh-logo-horizontal { display: none !important; }
#kwHeader .kwh-logo-symbol { display: block !important; width: 44px; height: 44px; border-radius: 12px; flex: none; }
#kwHeader .kwh-brand-t { display: flex !important; flex-direction: column; min-width: 0; }
#kwHeader .kwh-brand-t b { font-size: 21px; line-height: 1.1; letter-spacing: -.3px; font-weight: 800; white-space: nowrap; }
#kwHeader .kwh-brand-t small { font-size: 11.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--k-muted); margin-top: 3px; white-space: nowrap; }
#kwHeader .kwh-icon, #kwHeader .kwh-more > summary { background: var(--k-surface) !important; border: 1px solid var(--k-line) !important; box-shadow: none !important; border-radius: 14px !important; color: var(--k-ink) !important; }
#kwHeader .kwh-suche input { background: var(--k-surface) !important; border: 1px solid var(--k-line) !important; border-radius: 16px !important; min-height: 50px; font-size: 16px; }
#kwHeader .kwh-suche input:focus { outline: 3px solid color-mix(in srgb, var(--k-acc) 35%, transparent) !important; border-color: var(--k-acc) !important; }
@media (max-width: 380px) { #kwHeader .kwh-brand-t b { font-size: 19px; } #kwHeader .kwh-logo-symbol { width: 40px; height: 40px; } }

/* ---- Karten: weiß, feiner Rand, Radius 18, leichter Schatten (Fotokarten behalten ihr Bild) ---- */
.kw-ansicht section.panel:not(.hero), .kw-ansicht section.glass:not(.hero), .kw-ansicht section.card, .kw-ansicht .card:not(.hero),
.kwh-card, .kwk-card, .rde-card, .kwh-recipe, #werk24Karte, #werk24Keller {
  background: var(--k-surface) !important; background-image: none !important; border: 1px solid var(--k-line) !important; border-radius: var(--k-r) !important;
  box-shadow: var(--k-shadow) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.kwk-item { background: var(--k-surface) !important; border: 1px solid var(--k-line) !important; border-radius: 16px !important; box-shadow: none !important; }

/* ---- Chips/Reiter: weiß mit Rand, aktiv dunkelgrün gefüllt ---- */
.kwk-tab, .rde-chip, .rde-bar .pill, .kwh-chip, .chip {
  background: var(--k-surface) !important; border: 1px solid var(--k-line) !important; border-radius: 999px !important; color: var(--k-ink) !important; font-weight: 600 !important; box-shadow: none !important;
}
.kwk-tab[aria-pressed="true"], .rde-chip[aria-pressed="true"], .rde-chip.on, .rde-bar .pill.active, .rde-bar .pill[aria-pressed="true"], .kwh-chip.on, .kwh-chip[aria-pressed="true"], .chip[aria-pressed="true"] {
  background: var(--k-fill) !important; border-color: var(--k-fill) !important; color: var(--k-on-fill) !important;
}

/* ---- Knöpfe: Haupt-Knopf dunkelgrün, sonst weiß mit Rand (Radius 13) ---- */
.btn-primary, .btn.primary, .kwk-add, .kwh-cta, button.primary, .pill.green {
  background: var(--k-fill) !important; border-color: var(--k-fill) !important; color: var(--k-on-fill) !important; border-radius: 13px !important; box-shadow: none !important; font-weight: 750 !important;
}
.btn:not(.btn-primary):not(.primary), .kwk-icon-btn, .kwk-sort, .kwk-scan {
  background: var(--k-surface) !important; border: 1px solid var(--k-line) !important; color: var(--k-ink) !important; border-radius: 13px !important; box-shadow: none !important;
}
.input, .select, input.input, select.select, textarea { background: var(--k-input) !important; border: 1px solid var(--k-line) !important; border-radius: 13px !important; color: var(--k-ink) !important; }

/* ---- Untere Leiste: durchgehend am Rand, flach; aktiver Punkt mit hellgrünem Hintergrund ---- */
#kwBottomNav {
  left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important;
  border-radius: 0 !important; background: color-mix(in srgb, var(--k-surface) 96%, transparent) !important; border: 0 !important; border-top: 1px solid var(--k-line) !important;
  box-shadow: none !important; padding: 6px 4px max(18px, env(safe-area-inset-bottom, 0px)) !important;   /* mind. 18 px: iOS meldet den Home-Balken-Bereich hier als 0 */
}
#kwBottomNav .kbn-tab { color: var(--k-muted) !important; font-size: 11.5px !important; font-weight: 600 !important; border-radius: 12px !important; background: transparent !important; }
#kwBottomNav .kbn-tab .kbn-i { width: 52px !important; height: 30px !important; border-radius: 99px !important; }
#kwBottomNav .kbn-tab.active, #kwBottomNav .kbn-tab[aria-current="page"] { color: var(--k-acc) !important; font-weight: 800 !important; }
#kwBottomNav .kbn-tab.active .kbn-i, #kwBottomNav .kbn-tab[aria-current="page"] .kbn-i { background: var(--k-acc-soft) !important; }
@media (max-width: 380px) { #kwBottomNav .kbn-tab { font-size: 10.5px !important; } #kwBottomNav .kbn-tab .kbn-i { width: 44px !important; } }

/* ---- Hinweis-Farben wie kellerWERK24 ---- */
.kwk-warn, .kw-warn, .kwk-hinweis-rot { background: var(--k-red-soft) !important; color: var(--k-red) !important; border-color: transparent !important; }

/* ---- Küchen-KI-Knopf in der Hauptfarbe ---- */
#kwKiFab { background: var(--k-fill) !important; box-shadow: 0 4px 14px rgba(23, 61, 42, .3) !important; }

/* ---- Hauptbereiche flach wie kellerWERK24: Inhalt direkt auf dem Hintergrund, nur die Einträge sind Karten ---- */
.kw-ansicht section#fridge, .kw-ansicht section#rezepte-de, .kw-ansicht section#shopping {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important;
}
.kw-ansicht section#fridge .head, .kw-ansicht section#rezepte-de .head, .kw-ansicht section#shopping .head { padding-left: 2px; padding-right: 2px; }

/* ---- App-Symbol hebt sich ab (weiße Kachel mit feinem Rand, wie das kellerWERK24-Symbol) ---- */
#kwHeader .kwh-logo-symbol { background: var(--k-surface); border: 1px solid var(--k-line); box-shadow: var(--k-shadow); padding: 2px; box-sizing: border-box; }

/* ---- Kontrast auf dem kellerWERK24-Hintergrund (WCAG AA): Grautöne und Favoriten-Pink abdunkeln ---- */
.kwh-footer, .kwh-footer a, .kwh-footer small, .kwh-footer p { color: var(--k-muted) !important; }
.rde-favbtn { color: #a3305d !important; border-color: #a3305d !important; }
.dark .rde-favbtn { color: #ff9cc4 !important; border-color: #ff9cc4 !important; }
.dark .kwh-footer a { background: var(--k-surface-2) !important; color: var(--k-ink) !important; }
#kwkDruckLink, .kwk-druck { color: var(--k-muted) !important; }
.rde-m, .rde-card .rde-m, .rde-meta, .kwh-recipe small { color: var(--k-muted) !important; }
/* Willkommensbereich (für Neue) */
.kwh-copy .lead, .kwh-benefits span { color: var(--k-muted) !important; }
.kwh-btn-zweit { color: var(--k-acc) !important; border-color: var(--k-acc) !important; }
.kwh-highlight-ribbon { color: var(--k-acc) !important; }
/* Sehr schmale Bildschirme (z. B. iPhone SE, 320 px): Name kleiner, Unterzeile weg – Kopfzeile bleibt zweizeilig */
@media (max-width: 360px) {
  #kwHeader .kwh-brand { gap: 8px; }
  #kwHeader .kwh-logo-symbol { width: 34px; height: 34px; border-radius: 10px; }
  #kwHeader .kwh-brand-t b { font-size: 16.5px; letter-spacing: -.2px; }
  #kwHeader .kwh-brand-t small { display: none; }
  #kwHeader .kwh-icon, #kwHeader .kwh-more > summary { width: 40px !important; height: 40px !important; min-width: 40px !important; }
}
/* Logo-Bereich darf schrumpfen, damit Symbol, Name und Knöpfe immer in EINE Zeile passen */
#kwHeader > .kwh-brand { flex: 1 1 0 !important; min-width: 0 !important; }
#kwHeader .kwh-brand-t b { overflow: hidden; text-overflow: ellipsis; }
#kwHeader > .kwh-actions { flex: 0 0 auto !important; }
@media (max-width: 360px) {
  #kwHeader > .kwh-actions { gap: 5px !important; }
  #kwHeader .kwh-icon, #kwHeader .kwh-more > summary { width: 38px !important; height: 38px !important; min-width: 38px !important; }
  #kwHeader .kwh-logo-symbol { width: 32px; height: 32px; }
  #kwHeader .kwh-brand { gap: 6px; }
}

/* Haupt-Knöpfe im Kühlschrank (z. B. „Hinzufügen“) wie die übrigen Haupt-Knöpfe – auch im Dunkel-Modus */
.kwk-btn.kwk-primary, html.dark .kwk-btn.kwk-primary, .dark .kwk-btn.kwk-primary { background: var(--k-fill) !important; border-color: var(--k-fill) !important; color: var(--k-on-fill) !important; }

/* ---- Baby-Küche ---- */
.baby-eintrag { margin: 10px 0; padding: 10px 14px; background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 14px; }
.baby-eintrag:empty { display: none; }
.baby-k > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 36px; font-weight: 700; font-size: 16px; }
.baby-k > summary small { font-size: 13px; font-weight: 700; color: var(--k-acc); background: var(--k-acc-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.baby-k h4 { margin: 16px 0 6px; font-size: 16px; }
.baby-lbl { display: block; font-weight: 700; margin: 10px 0 4px; }
.baby-zeile { display: flex; gap: 8px; flex-wrap: wrap; } .baby-zeile .input { flex: 1 1 180px; min-height: 44px; }
.baby-plan { margin: 0; padding-left: 20px; } .baby-plan li { margin: 6px 0; line-height: 1.4; } .baby-plan li span { color: var(--k-muted); font-size: 14px; }
.baby-plan li.baby-st-vorbei b { color: var(--k-muted); } .baby-jetzt { background: var(--k-fill); color: var(--k-on-fill); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.baby-reife { margin: 0; padding-left: 20px; font-size: 14.5px; }
.baby-rezept { border: 1px solid var(--k-line); border-radius: 14px; padding: 12px; margin: 8px 0; background: var(--k-input); }
.baby-rezept > b { display: block; font-size: 16px; } .baby-rezept > small { color: var(--k-muted); font-size: 13px; }
.baby-rezept ul { list-style: none; margin: 8px 0; padding: 0; } .baby-rezept li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 14.5px; }
.baby-rezept p { font-size: 14px; line-height: 1.45; margin: 6px 0; }
.baby-da { color: var(--k-acc); font-weight: 700; white-space: nowrap; } .baby-fehlt { color: var(--k-amber); font-weight: 700; white-space: nowrap; } .baby-alles { color: var(--k-acc); font-weight: 700; }
.baby-regeln { margin: 0; padding-left: 20px; } .baby-regeln li { margin: 6px 0; } .baby-regeln li span { color: var(--k-muted); font-size: 14px; }
.rde-baby { background: var(--k-acc-soft) !important; color: var(--k-acc) !important; }
.baby-hinweis { margin: 4px 0 8px; font-size: 14px; border-radius: 10px; padding: 8px 10px; background: var(--k-acc-soft); color: var(--k-ink); }
.baby-hinweis.baby-nein { background: var(--k-amber-soft); }
.baby-plan li span.baby-jetzt { color: var(--k-on-fill); }
.baby-quellen { margin: 0; padding-left: 20px; font-size: 14px; } .baby-quellen a { color: var(--k-acc); text-decoration: underline; }

/* Widerrufsbutton (§ 356a BGB): in der Fußzeile hervorgehoben */
.kwh-footer a.kw-widerruf-link, a.kw-widerruf-link { border: 2px solid var(--k-fill) !important; color: var(--k-fill) !important; font-weight: 800 !important; border-radius: 10px !important; padding: 4px 10px !important; background: var(--k-surface) !important; }
.dark .kwh-footer a.kw-widerruf-link { border-color: var(--k-acc) !important; color: var(--k-acc) !important; }

/* ---- iPhone-Rückmeldung 05.10.: Küchen-KI-Knopf, Werte-Liste, Fußzeile ---- */
/* Platz am Ende jeder Ansicht, damit der schwebende KI-Knopf (und „Nach oben“) keine Knöpfe verdeckt */
@media (max-width: 900px) { .kwh-footer { padding-bottom: 72px !important; } }   /* Platz für „Nach oben“ am Seitenende */   /* Platz NACH der Fußzeile, damit Seitenende und Fußzeile frei liegen */

/* „Nachhaltiger leben / Gesünder essen / Gemeinsam genießen“: festes Raster, gleich große Symbole, Text linksbündig */
.kwh-values { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.kwh-values > div { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 64px !important; align-items: center !important; gap: 14px !important; text-align: left !important;
  padding: 12px 14px !important; margin: 0 !important; background: var(--k-surface) !important; border: 1px solid var(--k-line) !important; border-radius: 16px !important; box-shadow: none !important; }
.kwh-values > div > i { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--k-acc-soft) !important; color: var(--k-acc) !important; margin: 0 !important; padding: 0 !important; }
.kwh-values > div > i svg { width: 22px !important; height: 22px !important; }
.kwh-values .kwh-vt { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 3px !important; padding: 0 !important; background: none !important; border: 0 !important; }
.kwh-values .kwh-vt b { font-size: 16px !important; text-align: left !important; color: var(--k-ink); }
.kwh-values .kwh-vt span { font-size: 13.5px !important; line-height: 1.35 !important; color: var(--k-muted) !important; text-align: left !important; }
.kwh-values picture, .kwh-values > div > img, .kwh-values picture img { display: block !important; width: 64px !important; height: 64px !important; border-radius: 12px !important; object-fit: cover !important; margin: 0 !important; }
@media (min-width: 901px) { .kwh-values { grid-template-columns: repeat(3, 1fr) !important; } }

/* Fußzeile: Links kompakt und zentriert statt über die Breite verstreut */
.kwh-footer nav[aria-label="Rechtliches"] { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 6px 16px !important; }
.kwh-footer nav[aria-label="Rechtliches"] a { padding: 6px 2px !important; margin: 0 !important; font-size: 14.5px !important; }
.kwh-footer nav[aria-label="Rechtliches"] a.kw-widerruf-link { flex-basis: 100%; max-width: max-content; margin: 0 auto 4px !important; padding: 6px 12px !important; }
.kwh-footer { gap: 10px !important; }

/* Küchen-KI auf dem Handy im Suchfeld statt als schwebender Knopf (der verdeckte Inhalte) */
.kwkc-kopf { display: none; }
@media (max-width: 900px) {
  .kwkc-fab { display: none !important; }
  #kwKopfSuche { position: relative !important; }
  #kwKopfSuche .kwkc-kopf { display: flex; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 12px;
    background: var(--k-acc-soft); color: var(--k-ink); font-size: 22px; line-height: 1; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 2; }
  #kwKopfSuche .kwkc-kopf:focus-visible { outline: 3px solid var(--k-acc); outline-offset: 2px; }
  #kwKopfSuche .kwkc-kopf[aria-expanded="true"] { background: var(--k-fill); }
  #kwHeader .kwh-suche input#kwKopfSucheFeld { padding-right: 54px !important; }
}

/* Computer-Kopfzeile: Logo-Bereich in natürlicher Breite, Schriftzug wie auf dem Handy (ältere Regeln für das breite Logo neutralisieren) */
@media (min-width: 821px) {
  #kwHeader .kwh-brand { flex: 0 0 auto !important; padding-right: 18px !important; gap: 10px !important; }
  #kwHeader .kwh-brand-t b { display: block !important; flex-direction: initial !important; letter-spacing: -0.3px !important; font-size: 20px !important; gap: 0 !important; }
  #kwHeader .kwh-brand-t small { letter-spacing: .9px !important; }
}
/* Mittlere Breiten: das Menü braucht den Platz – nur das App-Symbol zeigen */
@media (min-width: 821px) and (max-width: 1259px) {
  #kwHeader .kwh-brand-t { display: none !important; }
  #kwHeader .kwh-brand { padding-right: 10px !important; }
}
/* Computer: Menü braucht ~500 px – Platz schaffen, damit „Start“ und „Konto“ nicht abgeschnitten werden */
@media (min-width: 821px) {
  #kwHeader .kwh-suche { flex: 0 1 210px !important; min-width: 160px !important; }
  #kwHeader .kwh-brand { padding-right: 6px !important; }
  #kwHeader .kwh-links { justify-content: flex-start !important; min-width: 0 !important; }
  #kwHeader .kwh-tagline-full { display: none !important; }
}
/* Computer: „Konto“ steht schon als Personen-Symbol rechts in der Kopfzeile – im Menü nicht doppelt */
@media (min-width: 821px) { #kwHeader .kwh-links a[href="#/konto"] { display: none !important; } }
@media (min-width: 821px) and (max-width: 1099px) {
  #kwHeader .kwh-links { gap: 0 !important; }
  #kwHeader .kwh-links a { padding-left: 7px !important; padding-right: 7px !important; font-size: 14px !important; }
}
@media (max-width: 900px) {
  #rezepte-de .searchbar { position: relative !important; }
  #rezepte-de .searchbar .kwkc-kopf-rezept { display: flex; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 12px;
    background: var(--k-acc-soft); color: var(--k-ink); font-size: 22px; line-height: 1; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 2; }
  #rezepte-de .searchbar .kwkc-kopf-rezept:focus-visible { outline: 3px solid var(--k-acc); outline-offset: 2px; }
  #rezepte-de .searchbar .kwkc-kopf-rezept[aria-expanded="true"] { background: var(--k-fill); }
  #rezepte-de .searchbar #rdeSearch { padding-right: 54px !important; }
}

/* ---- Kopfzeile als weißer Balken über die ganze Breite (randlos, mit feiner Linie und leichtem Schatten) ---- */
#kwHeader { background: transparent !important; isolation: isolate; }
#kwHeader::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%); top: -80px; bottom: 0;
  background: var(--k-surface); border-bottom: 1px solid var(--k-line); box-shadow: 0 6px 18px rgba(23, 40, 30, .06); pointer-events: none; }
@media (max-width: 820px) { #kwHeader { top: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; } }
/* Auf Weiß: Suchfeld und Symbol-Knöpfe leicht getönt, damit sie sich abheben */
#kwHeader .kwh-suche input, #kwHeader .kwh-icon, #kwHeader .kwh-more > summary { background: var(--k-input) !important; }
#kwHeader .kwh-logo-symbol { box-shadow: none !important; }
html.dark #kwHeader::before, .dark #kwHeader::before { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }

/* ---- Konto-Knopf oben: nur die Initiale im Kreis, Name nur für Bildschirmleser (passte nie hinein) ---- */
#kwHeader #kwProfil.kwh-eingeloggt > span:not(.kwh-avatar-txt) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important; }
#kwHeader #kwProfil.kwh-eingeloggt { justify-content: center !important; align-items: center !important; padding: 0 !important; overflow: hidden !important; }
#kwHeader #kwProfil .kwh-avatar-txt { width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--k-fill) !important; color: var(--k-on-fill) !important; font-weight: 800 !important; font-size: 14px !important; margin: 0 !important; }

/* ---- Konto-Seite: Inhalte bündig auf voller Kartenbreite, kein extra Rahmen um den Namen, Systemschrift ---- */
#v10KontoBox, #v10KontoBox.v10-authbox { max-width: none !important; width: auto !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
#v10KontoBox .v10-reset { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; margin: 4px 0 10px !important; }
#ansicht-konto summary, #ansicht-konto details, .v10-fold, .v10-fold summary { font-family: var(--k-font) !important; }
#ansicht-konto details.v10-fold { background: var(--k-input) !important; border: 1px solid var(--k-line) !important; border-radius: 14px !important; }

/* Angebote: Händler ohne Daten erkennbar, Anzahl je Händler, erklärender Satz */
.ang-chip .ang-chip-zahl { font-size: 12px; font-weight: 700; opacity: .85; margin-left: 4px; }
.ang-chip.ang-chip-leer { border-style: dashed !important; opacity: .75; }
.ang-chip.ang-chip-leer[aria-pressed="true"] { background: var(--k-surface) !important; color: var(--k-muted) !important; border-color: var(--k-line) !important; }
.ang-verfuegbar { font-size: 14px; color: var(--k-muted); margin: 8px 0 12px; line-height: 1.45; }
.ang-verfuegbar b { color: var(--k-ink); }

/* Angebote abgeschaltet: alle Angebote-Elemente ausblenden (wieder sichtbar, sobald der Server Angebote meldet) */
.kw-ohne-angebote #angebote, .kw-ohne-angebote #shopZuAngeboten, .kw-ohne-angebote #shopAngebote, .kw-ohne-angebote #shopAngeboteBtn, .kw-ohne-angebote .kwh-highlight-angebote, .kw-ohne-angebote .kwpz-mehr { display: none !important; }

/* ---- App-Gefühl: Installations-Hinweis, Teilen-Fenster ---- */
.kwi-karte { position: relative; margin: 12px 0 14px; padding: 14px 16px; background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 16px; box-shadow: var(--k-shadow); }
.kwi-karte h2 { font-size: 18px !important; margin: 0 30px 6px 0; }
.kwi-karte p, #kwInstallKonto p { margin: 4px 0 8px; font-size: 14.5px; line-height: 1.45; }
.kwi-zu { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; background: none; font-size: 24px; color: var(--k-muted); cursor: pointer; border-radius: 10px; }
.kwi-zu:focus-visible { outline: 3px solid var(--k-acc); }
.kwi-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.kwi-schritte { margin: 6px 0 8px; padding-left: 22px; font-size: 14.5px; line-height: 1.6; }
.kwi-teilen { display: inline-block; border: 1.5px solid currentColor; border-radius: 5px; padding: 0 4px; font-size: 12px; line-height: 1.3; }
.kwi-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(15, 25, 20, .45); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.kwi-dialog { background: var(--k-surface); color: var(--k-ink); width: 100%; max-width: 520px; max-height: 80vh; overflow: auto; border-radius: 18px; padding: 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.kwi-dialog h2 { font-size: 19px !important; margin: 0 0 8px; }
.kwi-liste { margin: 8px 0; padding-left: 20px; max-height: 40vh; overflow: auto; }
@media (min-width: 700px) { .kwi-overlay { align-items: center; } }

/* ---- Computer-Ansicht (Etappe B) ---- */
/* Einkauf: ohne Angebote nimmt die Liste die volle Breite ein; Kategorien ab mittlerer Breite in zwei Spalten */
.kw-ohne-angebote #ansicht-einkauf { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 1000px) {
  #shopList { display: block !important; columns: 2 340px; column-gap: 28px; }
  #shopList .shopitem { margin-bottom: 8px !important; }
  #shopList .shop-gruppe { break-after: avoid; break-inside: avoid; margin-top: 0; padding-top: 14px; }
  #shopList .shopitem { break-inside: avoid; }
  #shopList .shop-block { break-inside: avoid; display: block; padding-bottom: 2px; }   /* Kategorie als Block – bricht nicht in die nächste Spalte um */
}
/* Wochenplan: breiter, vier Tage pro Reihe (sieben Spalten wären bei üblichen Bildschirmen zu schmal für die Rezeptnamen) */
@media (min-width: 1100px) {
  #ansicht-wochenplan { max-width: 1240px !important; }
  #ansicht-wochenplan .v59-woche { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* Textlinks ohne eigene Gestaltung (z. B. „… auf die Einkaufsliste gesetzt ›“): Akzentfarbe statt Browser-Blau – lesbar in hell und dunkel */
.kw-ansicht a:not([class]), .v62-good a { color: var(--k-acc) !important; }

/* ---- Wochenplan drucken / als PDF / teilen ---- */
.kwwp-leiste { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
#kwWpDruck { position: fixed; inset: 0; z-index: 9500; overflow: auto; background: #fff; color: #111; padding: 24px; font-family: var(--k-font); }
#kwWpDruck h1 { font-size: 26px; margin: 0 0 4px; color: #111; }
#kwWpDruck h2 { font-size: 18px; margin: 22px 0 8px; color: #111; }
#kwWpDruck .kwwp-kopf p { margin: 0 0 10px; color: #444; }
#kwWpDruck .kwwp-knopf { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 16px; }
#kwWpDruck p.kwwp-tipp { display: block; font-size: 13px; color: #555; }
.kwwp-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.kwwp-tabelle th, .kwwp-tabelle td { text-align: left; vertical-align: top; padding: 9px 8px; border-bottom: 1px solid #ccc; }
.kwwp-tabelle thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #555; border-bottom: 2px solid #333; }
.kwwp-tabelle tbody th { width: 26%; font-weight: 800; }
.kwwp-g + .kwwp-g { margin-top: 4px; }
.kwwp-g small { color: #555; white-space: nowrap; }
.kwwp-einkauf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; list-style: none; padding: 0; margin: 0; font-size: 15px; }   /* Raster statt Spaltensatz: bleibt beim Drucken auf derselben Seite */
.kwwp-einkauf li { padding: 3px 0; break-inside: avoid; }
body.kwwp-aktiv { overflow: hidden; }
@media print {
  body.kwwp-aktiv > *:not(#kwWpDruck) { display: none !important; }
  #kwWpDruck { position: static; padding: 0; overflow: visible; }
  #kwWpDruck .kwwp-knopf { display: none !important; }
  html, body.kwwp-aktiv { background: #fff !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  body.kwwp-aktiv::before, body.kwwp-aktiv::after { display: none !important; }
  @page { size: A4; margin: 15mm; }
}

/* ---- Eigene Rezepte ---- */
.er-inhalt { padding-top: 10px; }
.er-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.er-karte { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--k-input); border: 1px solid var(--k-line); border-radius: 14px; cursor: pointer; color: var(--k-ink); font: inherit; }
.er-karte:hover { border-color: var(--k-acc); }
.er-karte:focus-visible { outline: 3px solid var(--k-acc); outline-offset: 2px; }
.er-karte b { font-size: 16px; }
.er-karte small { color: var(--k-muted); font-size: 13px; }
.er-da { color: var(--k-acc); font-weight: 700; font-size: 13.5px; }
.er-fehlt { color: var(--k-warn-ink, #8a4b00); font-weight: 700; font-size: 13.5px; }
.dark .er-fehlt { color: #f0b46b; }
.er-dialog label { display: block; font-weight: 700; margin: 12px 0 4px; font-size: 14.5px; }
.er-dialog label small { font-weight: 400; color: var(--k-muted); }
.er-dialog input[type=text], .er-dialog input:not([type]), .er-dialog input[type=number], .er-dialog textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--k-line); border-radius: 12px; background: var(--k-input); color: var(--k-ink); }
.er-dialog textarea { resize: vertical; }
.er-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.er-check { display: flex !important; align-items: center; gap: 8px; font-weight: 600 !important; }
.er-check input { width: 22px; height: 22px; }
.er-dialog h3 { font-size: 16px; margin: 16px 0 6px; }
.er-zutaten { list-style: none; padding: 0; margin: 0 0 10px; }
.er-zutaten li { padding: 4px 0; border-bottom: 1px solid var(--k-line); }
.er-z-da span[aria-hidden] { color: var(--k-acc); font-weight: 800; }
.er-z-fehlt { color: var(--k-muted); }
.er-schritte { padding-left: 22px; line-height: 1.55; }
.er-schritte li { margin-bottom: 8px; }
.er-notiz { white-space: pre-wrap; }
.er-dialog .fehler { color: #b3261e; font-weight: 700; }
.kw-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Küchen-Statistik ---- */
.kst-knopf { margin-top: 10px; }
.kst-dialog { max-width: 620px !important; }
.kst-dialog h3 { font-size: 16px; margin: 18px 0 8px; }
.kst-zeitraum { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.kst-zeitraum label { font-weight: 700; }
.kst-zeitraum select { font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--k-line); background: var(--k-input); color: var(--k-ink); }
.kst-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kst-zahlen > div { background: var(--k-input); border: 1px solid var(--k-line); border-radius: 12px; padding: 10px 8px; text-align: center; }
.kst-zahlen b { display: block; font-size: 22px; }
.kst-zahlen small { color: var(--k-muted); font-size: 12.5px; }
@media (max-width: 420px) { .kst-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kst-monate, .kst-balken, .kst-tipps { list-style: none; padding: 0; margin: 0; }
.kst-monate li, .kst-balken li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.kst-balken li { grid-template-columns: minmax(80px, 34%) minmax(0, 1fr) auto; }
.kst-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kst-stapel { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--k-line); }
.kst-g { background: #2f6b4b; }
.kst-w { background: #b3261e; }
.kst-bar { display: block; height: 12px; border-radius: 6px; }
.kst-gruen { background: #2f6b4b; }
.kst-rot { background: #b3261e; }
.dark .kst-g, .dark .kst-gruen { background: #6cc28f; }
.dark .kst-w, .dark .kst-rot { background: #ef8a80; }
.kst-zahl { color: var(--k-muted); font-size: 13px; white-space: nowrap; }
.kst-tipps li { padding: 6px 0; border-bottom: 1px solid var(--k-line); font-size: 14.5px; line-height: 1.45; }
.kst-leer { background: var(--k-input); border: 1px dashed var(--k-line); border-radius: 12px; padding: 12px; }
.kst-fuss { font-size: 13px; margin-top: 14px; }

.er-dialog select { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--k-line); border-radius: 12px; background: var(--k-input); color: var(--k-ink); }

/* ---- Untere Leiste: Lucide-Symbole, einheitliches Raster, Beschriftung einzeilig, Abstand für den iPhone-Home-Balken ---- */
@media (max-width: 820px) {
  .kw-bottom-nav { padding: 6px 2px max(18px, env(safe-area-inset-bottom, 0px)) !important; background: var(--k-surface) !important; border-top: 1px solid var(--k-line) !important; box-shadow: 0 -4px 14px rgba(23, 40, 30, .05) !important; }
  .kw-bottom-nav .kbn-tab { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 3px !important; min-height: 50px !important; padding: 2px 0 0 !important; border-radius: 12px !important; color: var(--k-muted) !important; font-weight: 600 !important; overflow: visible !important; }
  .kw-bottom-nav .kbn-tab .kbn-i { width: 52px !important; height: 30px !important; border-radius: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; transition: background .15s; }
  .kw-bottom-nav .kbn-tab .kbn-i svg { width: 24px !important; height: 24px !important; stroke-width: 2 !important; }
  .kw-bottom-nav .kbn-tab span:last-child { white-space: nowrap !important; font-size: 11px !important; line-height: 14px !important; letter-spacing: -0.1px !important; overflow: visible !important; width: auto !important; max-width: none !important; hyphens: none !important; }
  .kw-bottom-nav .kbn-tab.active, .kw-bottom-nav .kbn-tab[aria-current="page"] { color: var(--k-fill) !important; font-weight: 800 !important; }
  .kw-bottom-nav .kbn-tab.active .kbn-i, .kw-bottom-nav .kbn-tab[aria-current="page"] .kbn-i { background: var(--k-acc-soft) !important; }
  .dark .kw-bottom-nav .kbn-tab.active, .dark .kw-bottom-nav .kbn-tab[aria-current="page"] { color: var(--k-acc) !important; }
}
/* Kopfzeile und Menüleiste: Lucide mit einheitlicher Strichstärke */
#kwHeader svg[data-ic] { stroke-width: 2; }
@media (max-width: 820px) {
  /* längstes Wort der Leiste minimal kleiner/enger, damit es sicher nicht an „Rezepte“ stößt */
  .kw-bottom-nav .kbn-tab[data-ansicht-link="kuehlschrank"] span:last-child { font-size: 10.5px !important; letter-spacing: -0.35px !important; }
}
@media (max-width: 380px) {
  .kw-bottom-nav .kbn-tab span:last-child { font-size: 10px !important; letter-spacing: -0.2px !important; }
  .kw-bottom-nav .kbn-tab[data-ansicht-link="kuehlschrank"] span:last-child { font-size: 9.5px !important; letter-spacing: -0.4px !important; }
  .kw-bottom-nav .kbn-tab .kbn-i { width: 46px !important; }
}

.kwh-footer .kwh-fb small.kw-build::after { content: none; }
.kwh-fb .kw-build { display: block; font-size: 11px; color: var(--k-muted); margin-top: 2px; letter-spacing: .2px; }