:root {
  --aubergine: #5b2a4e;
  --aubergine-2: #7a3d69;
  --tomate: #d4472b;
  --olive: #5f7324;
  --olive-hell: #e7ecd3;
  --safran: #f0a52e;
  --safran-hell: #fdf0d8;
  --bg: #fbf6ee;
  --karte: #ffffff;
  --karte-2: #f5eee3;
  --text: #2b1f27;
  --text-2: #6f6068;
  --linie: #eadfd2;
  --schatten: 0 1px 2px rgba(60, 30, 50, .06), 0 6px 20px rgba(60, 30, 50, .08);
  --auf: #ffffff;
  --radius: 22px;
  --radius-s: 14px;
  --kopf: 'Fraunces', Georgia, serif;
  --fliess: 'Nunito', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #1c1519; --karte: #2a2027; --karte-2: #33282f; --text: #f5ebef; --text-2: #bba9b3;
    --linie: #43363e; --aubergine: #c89bd0; --aubergine-2: #dcb8e2; --olive: #b5c96b; --olive-hell: #37391f; --tomate: #ff8a6d;
    --safran: #f7bd5c; --safran-hell: #40321b; --schatten: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); --auf: #231a20; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #1c1519; --karte: #2a2027; --karte-2: #33282f; --text: #f5ebef; --text-2: #bba9b3;
  --linie: #43363e; --aubergine: #c89bd0; --aubergine-2: #dcb8e2; --olive: #b5c96b; --olive-hell: #37391f; --tomate: #ff8a6d;
  --safran: #f7bd5c; --safran-hell: #40321b; --schatten: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); --auf: #231a20; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--fliess); min-height: 100dvh; }
h1, h2, h3 { font-family: var(--kopf); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.9rem; font-variation-settings: "SOFT" 100, "WONK" 1; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.08rem; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--aubergine); }
.leise { color: var(--text-2); font-size: .9rem; }
.versteckt { display: none !important; }

main { max-width: 640px; margin: 0 auto; padding: 16px 16px 24px; }
.kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 8px 0 16px; }
.kopf .unter { color: var(--text-2); font-size: .95rem; }

/* Navigation */
nav.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--linie);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
nav.tabs button { flex: 1; max-width: 140px; background: none; border: 0; padding: 6px 4px; border-radius: 14px; display: flex;
  flex-direction: column; align-items: center; gap: 2px; font-size: .78rem; color: var(--text-2); font-weight: 700; }
nav.tabs button svg { width: 24px; height: 24px; }
nav.tabs button[aria-current="page"] { color: var(--aubergine); background: color-mix(in srgb, var(--aubergine) 10%, transparent); }

/* Karten */
.karte { background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); padding: 18px; margin-bottom: 14px; }
.karte.flach { box-shadow: none; background: var(--karte-2); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: var(--karte-2); color: var(--text-2); }
.chip.olive { background: var(--olive-hell); color: var(--olive); }
.chip.safran { background: var(--safran-hell); }
.chip.tomate { background: color-mix(in srgb, var(--tomate) 14%, transparent); color: var(--tomate); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.knopf { border: 0; border-radius: 999px; padding: 12px 20px; font-weight: 800; background: var(--aubergine); color: var(--auf);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--aubergine) 30%, transparent); transition: transform .12s; min-height: 46px; }
.knopf:active { transform: scale(.97); }
.knopf.breit { width: 100%; }
.knopf.zweit { background: var(--karte-2); color: var(--text); box-shadow: none; }
.knopf:disabled { opacity: .5; }
.textknopf { background: none; border: 0; color: var(--aubergine); font-weight: 800; padding: 8px 4px; }

/* Wochenstreifen */
.streifen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; }
.streifen .tag { background: var(--karte); border-radius: 14px; padding: 8px 2px 10px; text-align: center; box-shadow: var(--schatten);
  animation: aufbau .45s cubic-bezier(.2,.8,.2,1) both; }
.streifen .tag b { display: block; font-size: .75rem; color: var(--text-2); }
.streifen .punkt { width: 12px; height: 12px; border-radius: 50%; margin: 6px auto 0; background: var(--linie); }
.streifen .punkt.ja { background: var(--olive); }
.streifen .punkt.frei { background: transparent; border: 2px dashed var(--text-2); }
.streifen .punkt.offen { background: var(--safran); }
@keyframes aufbau { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* Vorschlagskarten */
.slot { position: relative; }
.slot .wann { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.slot h3 { margin-top: 4px; cursor: pointer; }
.slot .aktionen { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
.slot .behalten { display: flex; gap: 8px; flex: 1.3; }
.slot .streichen { display: flex; gap: 6px; flex: 1; justify-content: flex-end; padding-left: 10px; border-left: 2px dotted var(--linie); }
.aktion { border: 0; border-radius: 16px; padding: 10px 8px; font-weight: 800; font-size: .88rem; display: flex; flex-direction: column;
  align-items: center; gap: 2px; min-height: 58px; flex: 1; line-height: 1.1; }
.aktion svg { width: 20px; height: 20px; }
.aktion.ja { background: var(--olive); color: var(--auf); }
.aktion.ersetzen { background: var(--safran-hell); color: color-mix(in srgb, var(--safran) 60%, var(--text)); }
.aktion.nicht { background: transparent; color: var(--text-2); border: 1.5px solid var(--linie); font-size: .78rem; min-width: 0; }
.aktion.nie { background: transparent; color: var(--tomate); border: 1.5px solid color-mix(in srgb, var(--tomate) 35%, transparent); font-size: .78rem; }
.slot.weg { animation: wegwischen .38s cubic-bezier(.5,0,.8,.3) forwards; }
@keyframes wegwischen { to { transform: translateX(110%) rotate(6deg); opacity: 0; } }
.slot.laedt h3 { color: var(--text-2); }
.laden-balken { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--karte-2), var(--safran-hell), var(--karte-2));
  background-size: 200% 100%; animation: schimmer 1.2s linear infinite; margin-top: 10px; }
@keyframes schimmer { to { background-position: -200% 0; } }
.frei-slot { border: 2px dashed var(--linie); background: transparent; box-shadow: none; padding: 14px 18px; }
.frei-slot .titel { color: var(--text-2); font-family: var(--kopf); font-size: 1.05rem; }
.frei-slot s { color: var(--text-2); }

/* Geplante Zeilen */
.plan-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--karte); border-radius: var(--radius-s);
  margin-bottom: 8px; box-shadow: var(--schatten); animation: aufbau .35s both; cursor: pointer; }
.plan-zeile .tagk { font-weight: 800; color: var(--olive); font-size: .85rem; line-height: 1.1; }
.plan-zeile .tagk small { display: block; color: var(--text-2); font-weight: 700; font-size: .7rem; }
.plan-zeile .n { flex: 1; font-weight: 700; }
.plan-zeile .haekchen { width: 26px; height: 26px; border-radius: 50%; background: var(--olive); color: var(--auf); display: grid; place-items: center;
  animation: pop .4s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop { from { transform: scale(0); } }

/* Maskottchen */
.aubergine { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 16px; }
.aubergine svg { width: 52px; height: 64px; flex: none; animation: wippen 3.5s ease-in-out infinite; transform-origin: 50% 90%; }
.aubergine .sagt { background: var(--karte-2); border-radius: 4px 18px 18px 18px; padding: 10px 14px; font-size: .95rem; flex: 1; }
.aubergine .sagt b { color: var(--aubergine); font-family: var(--kopf); }
@keyframes wippen { 50% { transform: rotate(-4deg); } }
/* Animierte Aubergine */
.figur { flex: none; overflow: visible; }
.figur.denkt { width: 64px; height: 61px; }
.figur.kocht { width: 110px; height: 78px; }
.figur.klein.denkt { width: 30px; height: 29px; vertical-align: -9px; margin-right: 6px; }
.figur.klein.kocht { width: 44px; height: 31px; }
.figur .figur-wippen { transform-box: view-box; transform-origin: 50px 118px; }
.figur.denkt .figur-wippen { animation: sinnieren 3.5s ease-in-out infinite; }
.figur.kocht .figur-wippen { animation: hueppen 1.6s ease-in-out infinite; }
.figur .pupillen { animation: umherschauen 4s ease-in-out infinite; }
.figur .blase { transform-box: fill-box; transform-origin: center; animation: blase 1.5s ease-in-out infinite; }
.figur .dampf { animation: dampf 2.4s ease-out infinite; opacity: 0; }
.figur .ruehren { transform-box: view-box; transform-origin: 82px 60px; animation: ruehren 1.6s ease-in-out infinite; }
@keyframes sinnieren { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg) translateY(-2px); } }
@keyframes hueppen { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes umherschauen { 0%, 40%, 100% { transform: translate(0, 0); } 55%, 80% { transform: translate(1.6px, -1px); } }
@keyframes blase { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: .9; transform: scale(1); } }
@keyframes dampf { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .7; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes ruehren { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } }
.denkt-zeile { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.denkt-zeile h3 { margin: 0; color: var(--text-2); }
.koch-laeuft { display: flex; align-items: center; gap: 16px; margin-top: 20px; background: var(--safran-hell); border-radius: 22px; padding: 12px 18px; }
.koch-laeuft .zeit { font-family: var(--fliess); font-weight: 800; font-size: 2rem; font-variant-numeric: tabular-nums; }
.koch-laeuft.fertig { background: color-mix(in srgb, var(--tomate) 18%, transparent); }
.koch-laeuft > svg:not(.figur) { width: 56px; height: 68px; flex: none; }
.timer > svg { width: 44px; height: 31px; flex: none; margin: -6px -4px -6px -8px; }
.timer > svg:not(.figur) { width: 26px; height: 32px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Formular */
label.feld { display: block; margin-bottom: 16px; }
label.feld > span { display: block; font-weight: 800; margin-bottom: 6px; }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  width: 100%; background: var(--karte-2); border: 1.5px solid transparent; border-radius: 12px; padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--aubergine); }
input[type="range"] { width: 100%; accent-color: var(--aubergine); }
.schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.schalter:last-child { border-bottom: 0; }
.schalter input { width: 46px; height: 28px; appearance: none; border-radius: 999px; position: relative; flex: none; transition: background .2s; cursor: pointer; }
.schalter input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.schalter input:checked { background: var(--olive); }
.schalter input:checked::after { transform: translateX(18px); }
.segment { display: flex; background: var(--karte-2); border-radius: 999px; padding: 4px; gap: 4px; }
.segment button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 8px 6px; font-weight: 800; font-size: .88rem; color: var(--text-2); }
.segment button[aria-pressed="true"] { background: var(--karte); color: var(--aubergine); box-shadow: var(--schatten); }
.tags-eingabe { display: flex; flex-wrap: wrap; gap: 6px; background: var(--karte-2); border-radius: 12px; padding: 8px; }
.tags-eingabe input { flex: 1; min-width: 120px; border: 0; background: none; padding: 4px; }
.tags-eingabe .chip button { border: 0; background: none; padding: 0 0 0 2px; color: inherit; font-weight: 800; }

/* Sheet (Rezept) */
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--bg); overflow-y: auto; }
@keyframes hoch { from { transform: translateY(30px); opacity: 0; } }
.sheet .innen { max-width: 640px; margin: 0 auto; padding: 16px 16px 120px; }
.sheet .zurueck { position: sticky; top: 0; background: var(--bg); padding: 8px 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.zutaten { list-style: none; padding: 0; margin: 0; }
.zutaten li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.zutaten .m { width: 84px; flex: none; text-align: right; font-weight: 800; color: var(--aubergine); font-variant-numeric: tabular-nums; }
.schritte { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.schritte li { counter-increment: s; position: relative; padding: 12px 0 12px 42px; border-bottom: 1px solid var(--linie); }
.schritte li::before { content: counter(s); position: absolute; left: 0; top: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--karte-2);
  display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.schritte li.kind { background: var(--olive-hell); border-radius: 16px; margin: 6px 0; padding-right: 12px; }
.schritte li.kind::before { background: var(--olive); color: var(--auf); }
.kind-marke { display: inline-block; font-weight: 800; color: var(--olive); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.timer-knopf { margin-top: 6px; border: 0; border-radius: 999px; padding: 4px 12px; background: var(--safran-hell); font-weight: 800; font-size: .85rem; }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--karte-2); border-radius: 999px; padding: 4px; }
.stepper button { border-radius: 50%; border: 0; background: var(--karte); font-weight: 800; font-size: 1.2rem; }
.stepper span { min-width: 80px; text-align: center; font-weight: 800; }

/* Kochmodus */
.kochmodus { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); }
.kochmodus .oben { justify-content: space-between; }
.kochmodus .schritt { flex: 1; display: flex; flex-direction: column; font-size: clamp(1.5rem, 5.8vw, 2.3rem); line-height: 1.35; font-family: var(--kopf); font-weight: 500; animation: aufbau .3s both; max-width: 720px; margin: 0 auto; width: 100%; }
.kochmodus .unten { display: flex; gap: 12px; max-width: 720px; margin: 0 auto; width: 100%; }
.kochmodus .unten .knopf { flex: 1; min-height: 64px; font-size: 1.1rem; }
.fortschritt { display: flex; gap: 4px; margin: 12px auto; max-width: 720px; width: 100%; }
.fortschritt i { flex: 1; height: 5px; border-radius: 3px; background: var(--linie); }
.fortschritt i.an { background: var(--aubergine); }

/* Timerleiste */
.timerleiste { position: fixed; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 6px; width: min(92vw, 420px); }
.timer { display: flex; align-items: center; gap: 10px; background: var(--karte); color: var(--text); border: 2px solid var(--aubergine); border-radius: 999px; padding: 8px 8px 8px 16px; box-shadow: var(--schatten); }
.timer .z { font-weight: 800; font-variant-numeric: tabular-nums; }
.timer .n { flex: 1; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer button { border: 0; background: var(--karte-2); color: inherit; border-radius: 999px; padding: 6px 12px; font-weight: 800; }
.timer.fertig { border-color: var(--tomate); background: color-mix(in srgb, var(--tomate) 16%, var(--karte)); animation: puls 1s infinite; }
@keyframes puls { 50% { transform: scale(1.03); } }

/* Einkauf */
.einkauf-gruppe h3 { margin: 18px 0 8px; }
.eintrag { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--linie); cursor: pointer; user-select: none; }
.eintrag .box { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--linie); flex: none; display: grid; place-items: center; transition: all .15s; }
.eintrag.da .box { background: var(--olive); border-color: var(--olive); color: var(--auf); }
.eintrag.da .box svg { animation: pop .3s cubic-bezier(.3,1.6,.5,1); }
.eintrag.da .name { text-decoration: line-through; color: var(--text-2); }
.eintrag .name { flex: 1; font-weight: 700; }
.eintrag .menge { color: var(--text-2); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Toast */
.toast { position: fixed; left: 50%; z-index: 90; animation: aufbau .25s both; display: flex; align-items: center; }
.toast button { border: 0; color: var(--safran); font-weight: 800; }

.leerstand { text-align: center; padding: 32px 16px; }
.leerstand svg { width: 96px; height: 116px; }
.hinweis { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--safran-hell); font-size: .92rem; margin-bottom: 8px; }
.hinweis.olive { background: var(--olive-hell); }
.frage { background: var(--safran-hell); border-radius: 16px; padding: 12px 14px; margin-top: 12px; font-size: .92rem; }
.frage .reihe { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.zeile { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.liste-einfach { list-style: none; padding: 0; margin: 0; }
.liste-einfach li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.inspiration a { font-size: .9rem; }
.suche { margin-bottom: 12px; }
details summary { cursor: pointer; font-weight: 800; padding: 6px 0; }

.pfeil { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--karte); box-shadow: var(--schatten); color: var(--aubergine); font-size: 1.4rem; font-weight: 800; line-height: 1; }

/* ---------- Wochenplanung ---------- */
.fortschritt-zeile { display: flex; align-items: center; gap: 12px; margin: -6px 0 14px; }
.fbalken { flex: 1; height: 8px; border-radius: 4px; background: var(--karte-2); overflow: hidden; }
.fbalken i { display: block; height: 100%; background: var(--olive); border-radius: 4px; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.streifen .tag { border: 0; font: inherit; color: inherit; cursor: pointer; }
.streifen .tag:disabled { opacity: .45; cursor: default; }
.streifen .punkt.aus { background: transparent; }
.tag-block { margin: 22px 0 6px; scroll-margin-top: 12px; }
.tag-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
.tag-kopf h2 { font-size: 1.25rem; }
.tag-block .slot { margin-bottom: 10px; }
.slot .wann .notiz { text-transform: none; letter-spacing: 0; font-weight: 700; color: color-mix(in srgb, var(--safran) 60%, var(--text)); }
.plan-zeile .tagk { width: 64px; }
.slot.weg { animation-fill-mode: both; }

.planleiste { position: fixed; left: 0; right: 0; z-index: 15; padding: 10px 16px; }
.planleiste .knopf { margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; }
.planleiste .knopf svg { width: 20px; height: 20px; }
.knopf.zweit-voll { background: var(--olive); box-shadow: 0 4px 14px color-mix(in srgb, var(--olive) 35%, transparent); }

/* Raster Tage × Mahlzeiten */
.raster { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; margin: 12px 0 8px; }
.raster b { text-align: center; font-size: .78rem; color: var(--text-2); }
.raster .rl { font-size: .8rem; font-weight: 800; color: var(--text-2); }
.raster .zelle { aspect-ratio: 1; width: 100%; border: 2px solid var(--linie); border-radius: 10px; background: transparent; color: var(--auf);
  display: grid; place-items: center; padding: 0; transition: background .15s, border-color .15s; }
.raster .zelle[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); }
.raster .zelle[aria-pressed="true"] svg { animation: pop .3s cubic-bezier(.3,1.6,.5,1); }
.chip button { border: 0; background: none; padding: 0 0 0 4px; color: inherit; font-weight: 800; }

/* Chat */
.chat-karte summary { list-style: none; display: flex; align-items: center; gap: 8px; }
.chat-karte summary::-webkit-details-marker { display: none; }
.chat-karte summary::before { content: "💬"; }
.chat { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.msg.neu { animation: aufbau .25s both; }
.msg > svg { width: 30px; height: 37px; flex: none; }
.msg > svg.figur { width: 36px; height: 34px; }
.msg .blase { background: var(--karte-2); border-radius: 18px 18px 18px 4px; padding: 9px 13px; font-size: .95rem; }
.msg.ich { align-self: flex-end; }
.msg.ich .blase { background: var(--aubergine); color: var(--auf); border-radius: 18px 18px 4px 18px; }
.msg .chips { margin-top: 6px; }
.chat-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; scrollbar-width: none; }
.chat-chips .chip { border: 1.5px solid var(--linie); background: transparent; white-space: nowrap; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; }
.chat-eingabe { display: flex; gap: 8px; }
.chat-eingabe input { flex: 1; border-radius: 999px; padding: 11px 16px; }
.chat-eingabe .knopf { padding: 0; width: 46px; flex: none; }

.saison-regler { margin: 12px 0 14px; }
.saison-regler .skala { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-2); font-weight: 700; margin-top: 2px; }

.wunsch-link { font-size: .85rem; padding: 10px 2px 0; }
.wunsch-panel { margin-top: 12px; padding-top: 12px; border-top: 1px dotted var(--linie); animation: aufbau .2s both; }
.wunsch-panel .chip { border: 0; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; }
.wunsch-panel .knopf svg { width: 20px; height: 20px; }

/* Halbe Woche */
.tage-schnell { margin: 10px 0 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tage-schnell .chip { border: 1.5px solid var(--linie); background: transparent; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 800; white-space: nowrap; padding: 6px 12px; }
.tage-schnell .chip[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: var(--auf); }
.raster-tag { border: 0; background: none; padding: 4px 0; font: inherit; font-size: .78rem; font-weight: 800; color: var(--aubergine); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.tag-leer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; margin: 14px 0 4px;
  border: 2px dashed var(--linie); border-radius: var(--radius-s); }

/* ---------- UX-Überarbeitung ---------- */
:root { --nav-h: 70px; }

.timerleiste { bottom: calc(var(--nav-h) + 12px); }
body:has(.planleiste) .timerleiste { bottom: calc(var(--nav-h) + 84px); }

.toast { top: auto; bottom: calc(var(--nav-h) + 14px); }
body:has(.planleiste) .toast { bottom: calc(var(--nav-h) + 84px); }
.toast button { padding: 10px 14px; min-height: 40px; border-radius: 999px; background: color-mix(in srgb, var(--safran) 22%, transparent); }

.wochen-etikett { display: inline-block; font-weight: 800; color: var(--text-2); }
.wochen-etikett.jetzt { color: var(--olive); }
.streifen .tag.heute { outline: 2.5px solid var(--olive); outline-offset: -2.5px; }
.streifen .tag.heute b { color: var(--olive); }

.heute-karte { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--karte), var(--olive-hell)); }
.heute-karte .wann { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--olive); }
.heute-karte h2 { margin: 2px 0; }
.heute-karte .knopf { flex: none; }

.plan-zeile .anders { border: 0; background: var(--karte-2); color: var(--text-2); width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; flex: none; cursor: pointer; }
.plan-zeile .anders svg { width: 18px; height: 18px; }

.regeln-anstoss { margin-bottom: 14px; }
.regeln-anstoss .reihe { display: flex; gap: 10px; align-items: center; margin-top: 10px; }

.koch-x { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--karte-2); font-size: 1.6rem; line-height: 1; color: var(--text); cursor: pointer; }
.fortschritt i.kind { background: color-mix(in srgb, var(--olive) 45%, var(--linie)); }
.fortschritt i.kind.an { background: var(--olive); }
.koch-abschluss { align-items: center; text-align: center; gap: 10px; }
.koch-abschluss > svg { width: 110px; height: 136px; margin: 0 auto; }
.koch-abschluss h1 { font-size: 2.4rem; }
.koch-abschluss .schalter { width: 100%; max-width: 420px; margin: 0 auto; }

.bewertung .knopf { min-width: 56px; font-size: 1.2rem; padding: 8px 14px; }
.bewertung .knopf[aria-pressed="true"] { background: var(--olive); color: var(--auf); box-shadow: none; }
.schritte li.kind { border: 2px solid var(--olive); }
.kind-marke { font-size: .9rem; }
.slot details { margin-top: 6px; }

/* ---------- Tagesplanung statt fester Woche ---------- */

.tag-block.wochenstart { border-top: 1.5px dashed var(--linie); padding-top: 14px; }
.tag-block.gewaehlt .tag-kopf h2 { color: var(--olive); }
.tag-frei { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin: 4px 0 2px; border: 2px dashed var(--linie);
  border-radius: var(--radius-s); background: transparent; font: inherit; font-weight: 700; color: var(--text-2); cursor: pointer; text-align: left; min-height: 52px; }
.tag-frei .kreis { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linie); display: grid; place-items: center; flex: none; color: var(--auf); }
.tag-frei[aria-pressed="true"] { border-style: solid; border-color: var(--olive); background: var(--olive-hell); color: var(--olive); }
.tag-frei[aria-pressed="true"] .kreis { background: var(--olive); border-color: var(--olive); }
.tag-frei[aria-pressed="true"] .kreis svg { animation: pop .3s cubic-bezier(.3,1.6,.5,1); }
.frueher { margin: 2px 0 0; }

.leiste-zwei .knopf.zweit { width: 52px; padding: 0; font-size: 1.4rem; }
.tage-liste { margin: 10px 0 6px; }
.tag-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.tag-zeile b { width: 60px; flex: none; }
.tag-zeile .chip { border: 1.5px solid var(--linie); background: transparent; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 800; padding: 6px 12px; }
.tag-zeile .chip[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: var(--auf); }
.tag-x { margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--karte-2); color: var(--text-2); font-size: 1.2rem; cursor: pointer; }
.einkauf-frage { margin-bottom: 14px; }
.rueckmeldung { margin-top: 14px; }
.rueckmeldung textarea { margin-top: 8px; }
.rueckmeldung ul { margin: 8px 0; padding-left: 20px; }
.rueckmeldung .reihe { display: flex; gap: 10px; align-items: center; }
.kopf .textknopf[data-act="planen-zu"] { padding-left: 0; }

/* ===================== Planung: visuelles System =====================
   Eine Farbe, eine Bedeutung: Aubergine = ihr wählt gerade, Safran = wartet auf euch,
   Olive = steht, Tomate = nur Fehler. Gestrichelt heisst ausschliesslich «frei». */
:root { --linie-stark: #d9c9b8; --z-gewaehlt: var(--aubergine); --z-ja: var(--olive); }

.plan-kopf { align-items: center; margin-bottom: 8px; }
.aub-knopf { border-radius: 50%; border: 0; background: var(--karte); box-shadow: var(--schatten); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.aub-knopf svg { width: 26px; height: 32px; }

/* Kalenderband */

.band-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.band-zelle { position: relative; border: 0; background: transparent; padding: 4px 0 8px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font: inherit; color: var(--text); cursor: pointer; min-height: 56px; }
.band-zelle .wt { font-size: .68rem; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.band-zelle .dt { font-family: var(--kopf); font-weight: 600; font-size: 1.05rem; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-variant-numeric: tabular-nums; }
.band-zelle .pkt { border-radius: 50%; box-sizing: border-box; }
.band-zelle.heute .wt { color: var(--text); }
.band-zelle.heute .dt { text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 800; }

.band-zelle[data-z="gewaehlt"] .dt { background: var(--z-gewaehlt); color: var(--auf); }

.band-zelle[data-z="offen"] .pkt { background: var(--z-offen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--z-offen) 30%, transparent); }
.band-zelle[data-z="arbeit"] .pkt { border-right-color: transparent; }

.band-zelle[data-z="fehler"] .pkt { background: var(--tomate); }
.band-zelle[data-ek]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 1px; height: 3px; border-radius: 2px; box-sizing: border-box; }
.band-zelle[data-ek="gekauft"]::after { background: var(--z-ja); }
.band-zelle[data-ek="offen"]::after { border: 1.5px solid var(--z-ja); }
.band-zelle[data-ek=""]::after { display: none; }
.band-fuss { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.band-chips { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.band-chips::-webkit-scrollbar { display: none; }
.band-chips .chip { border: 1.5px solid var(--linie-stark); background: var(--karte); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 800; white-space: nowrap; padding: 7px 12px; color: var(--text); }
.band-nav { display: flex; gap: 4px; flex: none; }
.band-pfeil { border: 0; background: var(--karte-2); color: var(--aubergine); font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.band-pfeil:disabled { opacity: .35; cursor: default; }
.band-legende { display: flex; margin-top: 6px; font-size: .72rem; color: var(--text-2); font-weight: 700; align-items: center; flex-wrap: wrap; }
.band-legende span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.band-legende [data-z="offen"]::before { background: var(--z-offen); }
.band-legende [data-z="ja"]::before { background: var(--z-ja); }
.band-legende [data-z="frei"]::before { border: 1.5px dashed var(--linie-stark); box-sizing: border-box; }
.band-legende [data-ek="gekauft"]::before { width: 12px; height: 3px; border-radius: 2px; background: var(--z-ja); }
.band-legende .hinweis-klein { color: var(--aubergine); }
.band-legende .hinweis-klein::before { display: none; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* Aubergine: eine Zeile, keine Blase */
.aub-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0 10px; font-size: .92rem; color: var(--text-2); }
.aub-zeile > svg, .aub-zeile > .figur { width: 26px; height: 32px; flex: none; }
.aub-zeile > div { flex: 1; }
.aub-x { border: 0; background: none; color: var(--text-2); font-size: 1.2rem; width: 36px; height: 36px; cursor: pointer; flex: none; }

/* Agenda */
.agenda { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.abschnitt { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 10px 2px 0; }
.abschnitt > span { flex: 1; }
.abschnitt svg { width: 16px; height: 16px; flex: none; }
.abschnitt[data-ab="gekauft"] { color: var(--z-ja); }
.abschnitt[data-ab="offen"] svg { color: var(--z-ja); }
.abschnitt .textknopf { text-transform: none; letter-spacing: 0; font-size: .85rem; padding: 6px 4px; }
.ag-tag { background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; scroll-margin-top: 190px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ag-tag { box-shadow: none; border: 1px solid rgb(255 255 255 / .07); } }
:root[data-theme="dark"] .ag-tag { box-shadow: none; border: 1px solid rgb(255 255 255 / .07); }
.ag-tag.ist-heute { outline: 2px solid color-mix(in srgb, var(--z-ja) 55%, transparent); }
.ag-kopf { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px 6px; flex-wrap: wrap; }
.ag-wt { font-family: var(--kopf); font-weight: 600; font-size: 1.15rem; }
.ag-dt { font-size: .8rem; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.heute-chip { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--olive-hell); color: var(--z-ja); }
.ag-zeile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; border-top: 1px solid var(--linie);
  background: transparent; font: inherit; color: inherit; text-align: left; position: relative; box-sizing: border-box; }
.ag-kopf + .ag-zeile, .ag-kopf + .ag-zeile-wrap > .ag-zeile { border-top: 0; }
button.ag-zeile, .ag-klick { cursor: pointer; }
.ag-klick { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; padding: 0; min-height: 36px; }
.mz { width: 26px; flex: none; font-size: 1.05rem; text-align: center; color: var(--text-2); }
.mz span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ag-mitte { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ag-name { font-family: var(--kopf); font-weight: 500; font-size: 1.05rem; line-height: 1.25; }
.ag-meta { font-size: .8rem; font-weight: 700; color: var(--text-2); }
.ag-rechts { font-size: .85rem; font-weight: 800; color: var(--text-2); flex: none; }
.ag-zeile[data-z="offen"] { background: color-mix(in srgb, var(--z-offen) 12%, var(--karte)); }
.ag-zeile[data-z="offen"]::before, .ag-zeile[data-z="fehler"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--z-offen); }
.ag-zeile[data-z="fehler"]::before { background: var(--tomate); }
.ag-zeile[data-z="offen"] .ag-rechts { color: color-mix(in srgb, var(--safran) 60%, var(--text)); }
.ag-zeile[data-z="arbeit"] .ag-name { font-family: var(--fliess); font-size: .95rem; color: var(--text-2); }
.ag-zeile[data-z="arbeit"]::after { content: ""; position: absolute; left: 54px; right: 16px; bottom: 8px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--karte-2), var(--safran-hell), var(--karte-2)); background-size: 200% 100%; animation: schimmer 1.2s linear infinite; }
.ag-zeile[data-z="aus"] .ag-name { color: var(--text-2); font-style: italic; text-decoration: line-through; text-decoration-thickness: 1px; }
.ag-zeile[data-z="ja"] .mz { color: var(--z-ja); }
.ag-knoepfe { display: flex; gap: 6px; flex: none; }
.ag-zeile-wrap.auf { background: var(--karte-2); }
.ag-aktionen { display: flex; gap: 8px; padding: 0 16px 12px 54px; flex-wrap: wrap; }
.ag-aktionen .knopf { padding: 8px 14px; min-height: 40px; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; background: var(--karte); color: var(--text); box-shadow: none; border: 1px solid var(--linie); }
.ag-aktionen .knopf svg { width: 16px; height: 16px; }
.ag-wunsch { padding: 0 16px 12px 54px; }
.knopf.klein { padding: 8px 14px; min-height: 38px; font-size: .88rem; }

/* Freie Tage: die einzige gestrichelte Form */
.frei-block { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 16px; border: 1.5px dashed var(--linie-stark); border-radius: var(--radius-s);
  background: transparent; font: inherit; color: var(--text-2); text-align: left; cursor: pointer; box-sizing: border-box; }
.frei-block b { color: var(--text); font-weight: 800; }
.frei-block .kreis { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--linie-stark); display: grid; place-items: center; flex: none; color: var(--auf); box-sizing: border-box; }
.frei-block .kreis svg { width: 14px; height: 14px; }
.frei-block.gewaehlt { border-style: solid; border-color: var(--z-gewaehlt); background: color-mix(in srgb, var(--z-gewaehlt) 9%, var(--karte)); color: var(--z-gewaehlt); }
.frei-block.gewaehlt b { color: var(--z-gewaehlt); }
.frei-block.gewaehlt .kreis { background: var(--z-gewaehlt); border-color: var(--z-gewaehlt); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .frei-block.gewaehlt, :root:not([data-theme="light"]) .frei-block.gewaehlt b { color: var(--aubergine-2); } }
:root[data-theme="dark"] .frei-block.gewaehlt, :root[data-theme="dark"] .frei-block.gewaehlt b { color: var(--aubergine-2); }

/* Leiste: eine Handlung, Farbe nach Bedeutung */
.knopf-safran { background: var(--safran); color: #3b2a0c; box-shadow: 0 4px 14px color-mix(in srgb, var(--safran) 35%, transparent); }
.knopf-olive { background: var(--z-ja); color: var(--auf); box-shadow: 0 4px 14px color-mix(in srgb, var(--z-ja) 30%, transparent); }
.knopf-tomate { background: var(--tomate); color: #fff; box-shadow: none; }
.leiste-status { max-width: 608px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 999px;
  background: var(--karte); box-shadow: var(--schatten); font-weight: 800; color: var(--text-2); padding: 0 16px; }
.leiste-status .figur { margin: 0; width: 26px; height: 32px; }

/* Sheets: halbe Höhe für Planen und Chat, Fokus fast ganz */
.sheet-hg { position: fixed; inset: 0; z-index: 39; background: rgb(28 21 25 / .38); }
.sheet.halb, .sheet.fokus { inset: auto 0 0 0; max-height: 86dvh; border-radius: 26px 26px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.18);
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); animation: none; max-width: 640px; margin: 0 auto; box-sizing: border-box; }
.sheet.fokus { max-height: 94dvh; }
.sheet.halb::before, .sheet.fokus::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--linie-stark); margin: 2px auto 6px; }
.sheet.neu { animation: hochfahren .28s cubic-bezier(.2,.8,.2,1); }

.sheet-kopf { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; position: sticky; top: -8px; background: var(--bg); z-index: 2; }
.sheet-kopf h2 { flex: 1; margin: 0; font-size: 1.3rem; }
.sheet-fuss { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 78%, transparent); padding: 14px 0 4px; margin-top: 8px; }
.sheet-fuss .knopf { width: 100%; }
.ek-zeile { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-2); margin-bottom: 10px; flex-wrap: wrap; }
.ek-zeile svg { color: var(--z-ja); flex: none; width: 18px; height: 18px; }
.ek-zeile span { flex: 1; min-width: 180px; }
.mz-raster { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; gap: 6px 8px; align-items: center; margin: 6px 0 14px; }
.mz-raster > b { font-size: .78rem; color: var(--text-2); text-align: center; }
.mz-tag { font-weight: 800; }
.mz-tag small { color: var(--text-2); font-weight: 700; }
.mz-zelle { height: 44px; border-radius: 14px; border: 1.5px dashed var(--linie-stark); background: transparent; color: var(--auf); display: grid; place-items: center; cursor: pointer; padding: 0; }
.mz-zelle svg { width: 18px; height: 18px; }
.mz-zelle[aria-pressed="true"] { border: 1.5px solid var(--z-gewaehlt); background: var(--z-gewaehlt); }
.mz-zelle[aria-pressed="false"] svg { display: none; }
.wunsch-feld input, .wunsch-feld textarea { border-radius: 14px; }
.mehr { margin-top: 4px; }
.mehr summary { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--linie); cursor: pointer; list-style: none; font-weight: 800; }
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary small { color: var(--text-2); font-weight: 700; text-align: right; }

/* Fokus: Vorschläge der Reihe nach */
.fk-punkte { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fk-punkte i { width: 9px; height: 9px; border-radius: 50%; background: var(--z-offen); opacity: .45; box-sizing: border-box; }
.fk-punkte i[data-z="arbeit"] { background: transparent; border: 1.5px solid var(--aubergine-2); }
.fk-punkte i[data-z="ja"] { background: var(--z-ja); }
.fk-punkte i.jetzt { opacity: 1; transform: scale(1.35); }
.fk-karte { background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); padding: 20px 18px; border-top: 5px solid var(--z-offen); }
.fk-karte.laedt { border-top-color: var(--aubergine-2); text-align: center; color: var(--text-2); }
.fk-karte.weg { animation: annehmen .26s ease-in forwards; pointer-events: none; }
@keyframes annehmen { to { transform: translateY(-24px) scale(.97); opacity: 0; } }
.fk-wann { font-size: .8rem; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.fk-name { font-family: var(--kopf); font-weight: 600; font-size: 1.6rem; line-height: 1.2; margin: 6px 0 8px; }
.fk-weil { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--olive-hell); color: color-mix(in srgb, var(--olive) 75%, var(--text)); font-size: .9rem; font-weight: 700; }
.fk-gericht { display: grid; gap: 10px; margin-top: 18px; }
.fk-gericht .knopf { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.05rem; }
.fk-gericht .knopf svg { width: 20px; height: 20px; }
.fk-ja { background: var(--z-ja); color: var(--auf); box-shadow: 0 4px 14px color-mix(in srgb, var(--z-ja) 30%, transparent); }
.fk-ersetzen { box-shadow: none; }
.fk-abend { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.fk-text { display: flex; align-items: flex-start; gap: 8px; border: 0; background: none; font: inherit; font-weight: 800; color: var(--text-2); cursor: pointer; text-align: left; padding: 6px 2px; min-height: 44px; }
.fk-text svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.fk-text small { display: block; font-weight: 700; font-size: .75rem; }

.fk-frage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 800; width: 100%; }
.fk-rest { display: block; margin: 16px auto 0; }
.fk-ende { text-align: center; padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fk-ende > svg, .fk-ende > .figur { width: 80px; height: 100px; }

/* Bewegung nur bei Zustandswechsel */
.wechsel { animation: wechsel .4s cubic-bezier(.2,.8,.2,1); }
@keyframes wechsel { from { background-color: color-mix(in srgb, var(--safran) 24%, transparent); } }
.band-zelle.wechsel { animation: none; }
.band-zelle.wechsel .pkt, .band-zelle.wechsel .dt { animation: pop .3s cubic-bezier(.3,1.6,.5,1); }
@media (prefers-reduced-motion: reduce) {
  .wechsel, .band-zelle.wechsel .pkt, .band-zelle.wechsel .dt, .sheet.neu, .fk-karte.weg, .band-zelle[data-z="arbeit"] .pkt, .ag-zeile[data-z="arbeit"]::after { animation: none !important; }
}
.ag-zeile[data-z="fehler"] { flex-wrap: wrap; }
.ag-zeile[data-z="fehler"] .ag-knoepfe { width: 100%; padding-left: 38px; }
.toast { width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; }
body:has(#ebene .sheet) .toast { bottom: auto; top: calc(10px + env(safe-area-inset-top)); }
.planleiste { animation: none; }

/* Nachprüfung: letzte Stolperstellen */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --linie-stark: #a8909e; } }
:root[data-theme="dark"] { --linie-stark: #a8909e; }
/* Heute: Ring statt Strich (Strich unten heisst Einkauf) */
.band-zelle.heute .dt { text-decoration: none; box-shadow: inset 0 0 0 2px var(--text); }
.band-zelle.heute[data-z="gewaehlt"] .dt { box-shadow: inset 0 0 0 2px var(--auf), 0 0 0 2px var(--z-gewaehlt); }
.band-legende [data-z="fehler"]::before { background: var(--tomate); }
.band-legende [data-ek="offen"]::before { width: 12px; height: 3px; border-radius: 2px; background: none; border: 1.5px solid var(--z-ja); box-sizing: border-box; }
/* In Arbeit: ruhiger hohler Punkt, die Bewegung bleibt in Leiste und Fokus */
.band-zelle[data-z="arbeit"] .pkt { width: 8px; height: 8px; }
.ag-zeile[data-z="arbeit"]::after { animation-duration: 2.4s; }
.ag-tag.ist-heute { outline-color: var(--linie-stark); }
.fk-ersetzen { background: var(--karte-2); color: var(--text); border: 1.5px solid var(--linie-stark); }
/* Ganze Zeile tippbar */
.ag-zeile[data-z="ja"] { padding: 0 16px; }
.ag-zeile[data-z="ja"] .ag-klick { align-self: stretch; min-height: 56px; padding: 10px 0; }
.ag-zeile[data-z="ja"] .ag-klick .ag-rechts { margin-left: auto; padding: 0 2px 0 8px; }
.mz svg { width: 16px; height: 16px; vertical-align: -2px; }
.mz-raster > b svg { width: 14px; height: 14px; vertical-align: -2px; }
.frei-block small { display: block; font-size: .78rem; font-weight: 700; color: var(--text-2); }
.wunsch-los { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 0 16px; }
.wunsch-los svg { width: 16px; height: 16px; }
/* Touch-Ziele ≥ 44 px */
.band-chips .chip, .abschnitt .textknopf, .wunsch-link, [data-act="einkauf-wahl"], .ag-aktionen .knopf, .ag-knoepfe .textknopf, .knopf.klein,
.wunsch-feld input, .fk-frage .textknopf { min-height: 44px; }
.band-pfeil { width: 40px; height: 44px; border-radius: 22px; }
.ek-zeile { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--linie); }
/* Sheet hebt sich im Dunkeln ab */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sheet.halb, :root:not([data-theme="light"]) .sheet.fokus { box-shadow: 0 -1px 0 rgb(255 255 255 / .16), 0 -12px 40px rgba(0,0,0,.6); } }
:root[data-theme="dark"] .sheet.halb, :root[data-theme="dark"] .sheet.fokus { box-shadow: 0 -1px 0 rgb(255 255 255 / .16), 0 -12px 40px rgba(0,0,0,.6); }
.band-legende { gap: 4px 10px; }

/* ===================== Ruhige Front (Runde 2) ===================== */
html { overscroll-behavior-y: contain; }
.plan-kopf2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.datum-griff { display: inline-flex; align-items: baseline; gap: 8px; border: 0; background: none; padding: 8px 0; min-height: 48px; cursor: pointer; font-family: var(--kopf); font-weight: 600; color: var(--text); text-align: left; }
.griff-pfeil { font-family: var(--fliess); font-size: 1rem; color: var(--aubergine); }
.aub-knopf { position: relative; }
.aub-knopf.hat-was::after { content: ""; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--safran); box-shadow: 0 0 0 2px var(--bg); }
.zieh-anzeige { height: 0; overflow: hidden; display: grid; place-items: center; color: var(--text-2); font-size: .82rem; font-weight: 800; }

.band.neu { animation: band-auf .25s cubic-bezier(.2,.8,.2,1); transform-origin: top; }
@keyframes band-auf { from { opacity: 0; transform: translateY(-12px); } }
.band-hinweis { margin: 6px 2px 0; font-size: .8rem; font-weight: 700; color: var(--aubergine); min-height: 1em; }
.band-hinweis:empty { display: none; }

/* Agenda: eine Spalte Tag, eine Zeile pro Mahlzeit */
.agenda2 { display: flex; flex-direction: column; margin-top: 4px; }
.tz { grid-template-columns: 52px minmax(0, 1fr); align-items: stretch; }
.tz-tag { display: flex; line-height: 1.1; }

.tz-tag small { font-weight: 700; font-variant-numeric: tabular-nums; }

.tz.ist-heute .zl-name { font-size: 1.2rem; }
.tz-mz { display: flex; flex-direction: column; min-width: 0; }
.tz-frei { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; }
.tz-frei-text { align-self: center; color: var(--text-2); font-weight: 700; border: 1.5px dashed var(--linie-stark); border-radius: 12px; padding: 8px 12px; margin: 6px 0; }
.tz-frei.gewaehlt .tz-frei-text { border-style: solid; border-color: var(--z-gewaehlt); background: color-mix(in srgb, var(--z-gewaehlt) 10%, transparent); color: var(--z-gewaehlt); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tz-frei.gewaehlt .tz-frei-text { color: var(--aubergine-2); } }
:root[data-theme="dark"] .tz-frei.gewaehlt .tz-frei-text { color: var(--aubergine-2); }
.ek-trenner { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ek-trenner::after { content: ""; flex: 1; height: 2px; border-radius: 1px; }
.ek-trenner[data-ab="offen"]::after { background: none; border-top: 2px dashed var(--z-ja); height: 0; }
.horizont { margin: 14px 0 0; font-size: .82rem; font-weight: 700; color: var(--text-2); text-align: center; }

.zl { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 4px 8px 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; position: relative; box-sizing: border-box; }
.tz-mz > * + * { border-top: 1px dotted var(--linie); }
button.zl, .zl-klick { cursor: pointer; }
.zl-klick { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; align-self: stretch; border: 0; background: none; font: inherit; color: inherit; text-align: left; padding: 0; min-height: 46px; }
.zl-mitte { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.zl-name { font-family: var(--kopf); font-weight: 500; font-size: 1.05rem; line-height: 1.25; }
.zl-meta { font-size: .78rem; font-weight: 700; color: var(--text-2); }
.zl-rechts { font-size: .85rem; font-weight: 800; flex: none; padding-right: 4px; }
.zl .mz { width: 20px; color: var(--text-2); }
.zl[data-z="offen"] .zl-name::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--z-offen); margin-right: 7px; vertical-align: 2px; }
.zl[data-z="offen"] .zl-rechts { color: color-mix(in srgb, var(--safran) 60%, var(--text)); }
.zl[data-z="fehler"] .zl-name { font-family: var(--fliess); font-weight: 800; font-size: .95rem; }

.zl[data-z="arbeit"] .zl-name { font-family: var(--fliess); font-size: .95rem; }
.zl[data-z="arbeit"]::after { content: ""; position: absolute; left: 0; right: 16px; bottom: 6px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--karte-2), var(--safran-hell), var(--karte-2)); background-size: 200% 100%; animation: schimmer 2.4s linear infinite; }
.zl[data-z="aus"] .zl-name { color: var(--text-2); font-style: italic; }
.zl-wrap.auf { background: color-mix(in srgb, var(--karte-2) 60%, transparent); border-radius: 12px; }
.zl-aktionen { display: flex; gap: 8px; padding: 2px 0 12px; flex-wrap: wrap; }
.zl-aktionen .knopf { padding: 8px 14px; min-height: 44px; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; background: var(--karte); color: var(--text); box-shadow: none; border: 1px solid var(--linie); }
.zl-aktionen .knopf svg { width: 16px; height: 16px; }
.zl-wunsch { padding: 0 0 12px; }

/* Wischen */
.wz { position: relative; overflow: hidden; touch-action: pan-y; }
.wz-vorn { position: relative; background: var(--bg); transform: translateX(var(--dx, 0)); transition: transform .22s cubic-bezier(.2,.8,.2,1); }

.wz.zieht .wz-vorn { transition: none; }
.wz.fliegt .wz-vorn { transition: transform .17s ease-in; }
.wz-hg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-weight: 800; font-size: .88rem; border-radius: 12px; }
.wz-hg span { display: none; align-items: center; gap: 6px; }
.wz-hg svg { width: 18px; height: 18px; }
.wz[data-richtung="r"] .wz-hg { background: color-mix(in srgb, var(--z-ja) 22%, var(--bg)); color: var(--z-ja); }
.wz[data-richtung="l"] .wz-hg { background: var(--karte-2); color: var(--text-2); justify-content: flex-end; }
.wz[data-richtung="r"] .wz-r, .wz[data-richtung="l"] .wz-l { display: inline-flex; }
.wz.scharf[data-richtung="r"] .wz-hg { background: var(--z-ja); color: var(--auf); }
.wz.scharf[data-richtung="l"] .wz-hg { background: var(--text-2); color: var(--bg); }
.wz[data-z="fehler"][data-richtung="r"] .wz-hg, .wz[data-z="ja"][data-richtung="r"] .wz-hg { background: color-mix(in srgb, var(--aubergine) 15%, var(--bg)); color: var(--aubergine); }
.wz.scharf[data-z="fehler"][data-richtung="r"] .wz-hg, .wz.scharf[data-z="ja"][data-richtung="r"] .wz-hg { background: var(--aubergine); color: var(--auf); }

/* Prüfkarte wischen */
.fk-karte[data-wisch] { position: relative; touch-action: pan-y; transform: translateX(var(--dx, 0)); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.fk-karte.zieht { transition: none; }
.fk-karte.fliegt { transition: transform .17s ease-in, opacity .17s; opacity: .2; }
.fk-stempel span { display: none; position: absolute; top: 14px; z-index: 2; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: .9rem; }
.fk-stempel svg { width: 16px; height: 16px; }
.fk-stempel .wz-r { left: 14px; background: var(--z-ja); color: var(--auf); }
.fk-stempel .wz-l { right: 14px; background: var(--text-2); color: var(--bg); }
.fk-karte.zieht[data-richtung="r"] .wz-r, .fk-karte.zieht[data-richtung="l"] .wz-l { display: inline-flex; opacity: .55; }
.fk-karte.scharf[data-richtung="r"] .wz-r, .fk-karte.scharf[data-richtung="l"] .wz-l { opacity: 1; }
.fk-karte.scharf[data-richtung="r"] { box-shadow: 0 0 0 3px var(--z-ja), var(--schatten); }
.fk-karte.scharf[data-richtung="l"] { box-shadow: 0 0 0 3px var(--text-2), var(--schatten); }
.wisch-tipp { text-align: center; font-size: .78rem; font-weight: 700; color: var(--text-2); margin: 12px 0 0; }

/* Was die Aubergine sagt: nur im Overlay */
.aub-sagt { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0 12px; border-bottom: 1px solid var(--linie); margin-bottom: 8px; }
.aub-sagt > svg { width: 34px; height: 42px; flex: none; }
.aub-sagt p { margin: 0; flex: 1; }
@media (prefers-reduced-motion: reduce) { .band.neu, .wz-vorn, .fk-karte[data-wisch] { animation: none !important; transition: none !important; } }
.sheet.fokus, .sheet.halb { overflow-x: hidden; }

/* ===================== Wochenübersicht: wenige Farben =====================
   neutral = frei/geplant/eingekauft · Safran = wartet auf euch · Aubergine = gewählt */
.band-zelle[data-ek]::after { display: none !important; }
.band-zelle .pkt { width: 10px; height: 10px; margin-top: 2px; display: grid; place-items: center; box-shadow: none !important; }
.band-zelle[data-z="frei"] .pkt { background: none; border: 1.5px dashed var(--linie-stark); }
.band-zelle[data-z="ja"] .pkt, .band-zelle[data-z="gekauft"] .pkt { background: var(--text-2); border: 0; }
.band-zelle[data-ek="gekauft"]:is([data-z="ja"],[data-z="gekauft"]) .pkt { width: 14px; height: 14px; margin-top: 0; background: var(--text-2); }
.band-zelle[data-ek="gekauft"]:is([data-z="ja"],[data-z="gekauft"]) .pkt::after { content: ""; width: 3px; height: 6px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.band-zelle[data-z="offen"] .pkt, .band-zelle[data-z="fehler"] .pkt { background: var(--safran); border: 0; }
.band-zelle[data-z="arbeit"] .pkt { background: none; border: 2px solid var(--text-2); animation: none; }
.band-zelle[data-z="aus"] .pkt { width: 10px; height: 2px; margin: 6px 0 4px; border-radius: 1px; background: var(--linie-stark); border: 0; }
.band-zelle[data-z="gewaehlt"] .pkt { background: var(--z-gewaehlt); border: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band-zelle[data-z="gewaehlt"] .pkt { background: var(--aubergine-2); } }
/* Agenda im gleichen Sinn: Einkauf neutral, «keine Idee» wartet wie ein Vorschlag */
.ek-trenner { color: var(--text-2); }
.ek-trenner::after { background: var(--linie-stark); opacity: 1; }
.ek-trenner[data-ab="offen"]::after { border-top-color: var(--linie-stark); }
.zl[data-z="fehler"] .zl-name { color: var(--text); }
.zl[data-z="fehler"] .zl-name::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--safran); margin-right: 7px; vertical-align: 1px; }
.zl[data-z="fehler"] .zl-rechts { color: color-mix(in srgb, var(--safran) 60%, var(--text)); }

/* Tage als Überschrift über den Menüs */
.tz { display: block; border-bottom: 0; }
.tz-tag { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; }
.tz-tag b { font-family: var(--kopf); font-size: 1.05rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.tz-tag small { font-size: .8rem; }
.tz.ist-heute .tz-tag b { color: var(--aubergine); }

:root[data-theme="dark"] .tz.ist-heute .tz-tag b { color: var(--aubergine-2); }

.tz-frei { display: block; border-bottom: 0; margin-top: 12px; min-height: 0; }
.tz-frei .tz-frei-text { margin: 4px 0 0; }
.ek-trenner { margin-top: 20px; }

/* Griff zum Runterziehen */
.zieh-griff { display: flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 800; }
.griff-strich { width: 44px; height: 5px; border-radius: 3px; background: var(--linie-stark); transition: width .15s, background .15s; }
.zieh-griff:hover .griff-strich, .zieh-griff.zieht .griff-strich { width: 60px; background: var(--aubergine); }
.zieh-anzeige { border-radius: 14px; background: color-mix(in srgb, var(--aubergine) 8%, transparent); margin: 0 0 4px; transition: none; }
.zieh-anzeige .zieh-text { font-size: .85rem; }
.zieh-anzeige.bereit { background: color-mix(in srgb, var(--aubergine) 18%, transparent); color: var(--aubergine); }

/* Aubergine mit Sprechblase */
.aub-knopf { width: 54px; height: 50px; overflow: visible; }
.aub-knopf.hat-was::after { display: none; }
.sprechblase { position: absolute; padding: 0 5px; background: var(--karte); border: 1.5px solid var(--linie-stark); align-items: center; justify-content: center; font-weight: 800; color: var(--aubergine); box-sizing: border-box; }
.sprechblase::after { content: ""; position: absolute; right: 3px; bottom: -5px; width: 7px; height: 7px; background: inherit; border: solid var(--linie-stark); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.sprechblase i { border-radius: 50%; background: var(--text-2); }
.aub-knopf.hat-was .sprechblase { background: var(--safran); border-color: var(--safran); color: #3b2a0c; }
.aub-knopf.hat-was .sprechblase::after { border-color: var(--safran); }
.sprechblase { min-width: 32px; height: 24px; border-radius: 12px; top: -8px; left: -16px; gap: 3px; font-size: .85rem; }
.sprechblase i { width: 4px; height: 4px; }

/* Tage klar abgegrenzt, Einkauf nur noch als «!» am Gericht */
.tz { margin-top: 14px; }
.tz-tag { background: color-mix(in srgb, var(--aubergine) 9%, var(--bg)); border-radius: 10px; padding: 6px 10px; margin-bottom: 2px; }
.tz-tag b { color: var(--aubergine); }
.tz-tag small { color: color-mix(in srgb, var(--aubergine) 55%, var(--text-2)); }
.tz.ist-heute .tz-tag { background: var(--aubergine); }
.tz.ist-heute .tz-tag b, .tz.ist-heute .tz-tag small { color: var(--auf); }
.tz-mz { border-top: 0; padding: 0 2px 0 10px; }
.tz-frei .tz-tag { background: none; padding-left: 10px; }
.tz-frei .tz-tag b { color: var(--text-2); }
.tz-frei .tz-frei-text { margin-left: 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tz-tag { background: color-mix(in srgb, var(--aubergine) 16%, var(--bg)); }
  :root:not([data-theme="light"]) .tz-tag b { color: var(--aubergine-2); } :root:not([data-theme="light"]) .tz.ist-heute .tz-tag { background: var(--aubergine); } :root:not([data-theme="light"]) .tz.ist-heute .tz-tag b { color: var(--bg); } }
:root[data-theme="dark"] .tz-tag { background: color-mix(in srgb, var(--aubergine) 16%, var(--bg)); }
:root[data-theme="dark"] .tz-tag b { color: var(--aubergine-2); }
.ek-fehlt { flex: none; display: grid; place-items: center; background: var(--safran); color: #3b2a0c; margin-right: 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tz.ist-heute .tz-tag small { color: var(--bg); opacity: .8; } }
:root[data-theme="dark"] .tz.ist-heute .tz-tag b, :root[data-theme="dark"] .tz.ist-heute .tz-tag small { color: var(--bg); }

/* ===================== Verschieben, Zeilen-Menü, Noch nicht gekocht ===================== */
[data-zieh] { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.wz.gehoben .wz-vorn { background: var(--karte); box-shadow: 0 6px 20px rgba(60, 30, 50, .22); border-radius: 12px; transform: scale(1.02); transition: transform .15s, box-shadow .15s; }
.wz.platzhalter .wz-vorn { opacity: .35; box-shadow: none; transform: none; }
.zieh-geist { position: fixed; z-index: 60; pointer-events: none; background: var(--karte); border-radius: 12px; box-shadow: 0 14px 34px rgba(40, 20, 35, .3); transform: rotate(-1.5deg); }
.zieh-geist .wz-hg { display: none; }
.zieh-ziel { outline: 2px dashed var(--aubergine); outline-offset: -2px; border-radius: 12px; background: color-mix(in srgb, var(--aubergine) 8%, transparent); }
.zl-mehr { flex: none; height: 44px; border: 0; background: none; color: var(--text-2); font-size: 1.3rem; font-weight: 800; cursor: pointer; border-radius: 10px; }
.zl-mehr:hover { background: var(--karte-2); }
.vergangen { margin: 6px 0 4px; padding: 4px 10px 10px; border-radius: 14px; background: color-mix(in srgb, var(--safran) 9%, transparent); }
.verg-kopf { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); padding: 8px 0 0; }
.tz-alt { margin-top: 6px; }
.tz-alt .tz-tag { background: none; padding: 2px 0; }
.tz-alt .tz-tag b { color: var(--text-2); }
.tz-alt .tz-mz { padding-left: 0; }
.tz-alt .wz-vorn { background: transparent; }
.zm-sheet .sheet-kopf h2 { font-size: 1.25rem; }
.zm-liste { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; }
.zm-punkt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: 12px; background: none; font: inherit; font-weight: 700; color: var(--text); text-align: left; cursor: pointer; }
.zm-punkt:hover { background: var(--karte-2); }
.zm-punkt svg, .zm-ic { width: 20px; height: 20px; flex: none; color: var(--aubergine); font-weight: 900; text-align: center; }
.zm-punkt small { font-size: .78rem; color: var(--text-2); font-weight: 700; }
.zm-punkt.leise, .zm-punkt.leise svg { color: var(--text-2); }
.zm-ziele { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.zm-ziel { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.zm-ziel span { font-family: var(--kopf); }
.zm-ziel.frei span { font-family: var(--fliess); color: var(--text-2); }
.zm-ziel i { font-style: normal; font-size: .78rem; font-weight: 800; color: var(--aubergine); }

/* Griff: nur ein kleiner Pfeil */
.zieh-griff { flex-direction: row; justify-content: center; padding: 0; }
.zieh-griff:hover, .zieh-griff.zieht { background: color-mix(in srgb, var(--aubergine) 14%, var(--karte-2)); color: var(--aubergine); }
.zieh-griff svg { animation: stups 2.4s ease-in-out 1s 2; }
@keyframes stups { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(4px); } 30% { transform: translateY(0); } }
.zieh-anzeige svg { transition: transform .15s; color: var(--text-2); }
.zieh-anzeige.bereit svg { transform: rotate(180deg) scale(1.2); color: var(--aubergine); }

/* Sprechblase: geschlossene Form */
.sprechblase { display: none; }
.aub-blase { position: absolute; top: -10px; left: -18px; width: 36px; height: 28px; overflow: visible; }
.aub-blase path { fill: var(--karte); stroke: var(--linie-stark); stroke-width: 1.5; stroke-linejoin: round; }
.aub-blase circle { fill: var(--text-2); }
.aub-blase text { font: 900 13px var(--fliess); fill: #3b2a0c; }
.aub-knopf.hat-was .aub-blase path { fill: var(--safran); stroke: var(--safran); }
@media (prefers-reduced-motion: reduce) { .zieh-griff svg { animation: none; } }

/* ===================== Kalender als Overlay, mitlaufende Tagesköpfe, Teilen, Rezeptlinks ===================== */
.band { position: sticky; z-index: 25; background: var(--bg); margin: 0 -16px 8px; padding: 4px 16px 0; border-bottom: 0; box-shadow: 0 12px 18px -14px rgba(50, 25, 40, .4); }
.band .zieh-griff.zu { margin: 6px auto 6px; }
.band .zieh-griff.zu svg { transform: rotate(180deg); animation: none; }
.tz-tag { position: sticky; z-index: 5; }
.tz.ist-heute .tz-tag { z-index: 6; }
.tz-alt .tz-tag { position: static; }
.reihe-knapp { display: flex; gap: 8px; align-items: center; }
.teilen-knopf { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; }
.teilen-knopf svg { width: 18px; height: 18px; }
@media (max-width: 380px) { .teilen-knopf span { display: none; } }
.teil-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; padding: 10px 12px; border-radius: 14px; background: var(--karte-2); font-size: .88rem; font-weight: 700; }
.teil-zeile a { color: var(--aubergine); word-break: break-all; flex: 1; min-width: 140px; }
.idee-link { margin-top: 4px; font-size: .82rem; font-weight: 700; color: var(--text-2); }
.idee-link a { color: var(--aubergine); }
.idee-link.ok { color: color-mix(in srgb, var(--olive) 70%, var(--text)); }
.idee-link.warnung { color: color-mix(in srgb, var(--safran) 45%, var(--text)); }
.idee-link.laeuft { font-style: italic; }
.idee-link .textknopf { font-size: .82rem; padding: 2px 4px; min-height: 0; }

/* ===================== Küche: Statistik ===================== */
.statistik h2 { margin: 0; }
.statistik .zeile { align-items: baseline; margin-bottom: 12px; flex-wrap: wrap; gap: 4px 10px; }
.st-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .st-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-kachel { background: var(--karte-2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; }
.st-kachel b { font-family: var(--kopf); font-size: 1.35rem; font-weight: 600; color: var(--aubergine); }
.st-kachel span { font-size: .85rem; font-weight: 800; }
.st-kachel small { font-size: .74rem; color: var(--text-2); font-weight: 700; }
.kueche-seg { margin: 4px 0 16px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-kachel b { color: var(--aubergine-2); } }

/* Zahlen mit Minus/Plus, Saison als Knopfreihe */
.zahl-feld { margin-bottom: 16px; }
.zahl-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 800; }
.zahl-zeile .stepper .zahl { min-width: 2.2em; text-align: center; font-variant-numeric: tabular-nums; }
.stepper button:disabled { opacity: .35; }
.saison-seg { margin-top: 8px; }
.saison-seg button { font-size: .8rem; padding-left: 4px; padding-right: 4px; }

/* KI-Kosten in der Statistik */
.kosten { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.kosten-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; background: none; padding: 4px 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.kosten-kopf small { display: block; font-size: .78rem; font-weight: 700; color: var(--text-2); }
.kosten-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.kosten-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto 7.5em; gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--linie); font-size: .88rem; }
.kosten-liste li b { text-align: right; font-variant-numeric: tabular-nums; }
.kosten-liste li span:nth-child(2) { color: var(--text-2); font-variant-numeric: tabular-nums; }
.kosten .klein { font-size: .75rem; margin: 8px 0 0; }

/* ===================== Robustheit: gemessene Leisten, Texte brechen um statt überzulaufen ===================== */
body { padding-bottom: calc(var(--nav-h, 80px) + var(--leiste-h, 0px) + 20px); }
.planleiste-platz { height: 0; }
.toast, body:has(.planleiste) .toast { bottom: calc(var(--nav-h, 80px) + var(--leiste-h, 0px) + 10px); }
.timerleiste, body:has(.planleiste) .timerleiste { bottom: calc(var(--nav-h, 80px) + var(--leiste-h, 0px) + 10px); }

.knopf, .textknopf, .segment button, .chip, .zm-punkt, .fk-text, .zieh-griff, .tz-frei-text {
  min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.knopf { line-height: 1.2; text-align: center; height: auto; }
.knopf.breit { padding-left: 16px; padding-right: 16px; }
.segment button { line-height: 1.15; }
.planleiste .knopf { max-width: 100%; }
.leiste-zwei { display: flex; gap: 8px; max-width: 608px; margin: 0 auto; }
.leiste-zwei .knopf.zweit { flex: none; }
.leiste-zwei .knopf.breit { flex: 1; min-width: 0; }
.sheet .innen .zurueck { flex-wrap: wrap; gap: 8px; }
.fk-gericht .knopf { padding-left: 10px; padding-right: 10px; }
.fk-abend > * { min-width: 0; }
.zl-mitte, .zl-name { overflow-wrap: break-word; hyphens: auto; }
.zahl-zeile > span:first-child { min-width: 0; }
.kosten-kopf > span:first-child { min-width: 0; }
@media (max-width: 360px) {
  .segment button { font-size: .78rem; padding-left: 3px; padding-right: 3px; }
  .knopf { padding-left: 14px; padding-right: 14px; }
  .fk-gericht { grid-template-columns: 1fr 1fr; }
  .saison-seg button { font-size: .72rem; }
  .sheet .innen .zurueck .knopf { padding: 10px 12px; }
}
.zeile { flex-wrap: wrap; row-gap: 8px; }
.zeile > * { min-width: 0; }
.stepper, .bewertung { flex: none; }
.bewertung { display: inline-flex; gap: 8px; }
/* Chips in scrollbaren Reihen nie schrumpfen lassen (sonst überlappen die Texte) */
.chat-chips .chip, .band-chips .chip, .tage-schnell .chip, .chips .chip { flex: none; min-width: auto; }
/* Aktionsleiste nie unter die Navigation: gemessene Höhe, mindestens aber Navigation + Home-Leiste */
.planleiste { bottom: max(var(--nav-h, 0px), calc(64px + env(safe-area-inset-bottom))); }
.fk-fazit { max-width: 34em; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.fk-fazit p { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--karte-2); font-size: .95rem; }

/* ===================== Frühere Tage, klebender Kopf ===================== */
.plan-kopf2 { position: sticky; top: 0; z-index: 27; background: var(--bg); margin: 0 -16px; padding: 4px 16px; }
.band { top: var(--kopf-h, 0px); }
.tz-tag { top: calc(var(--kopf-h, 0px) + var(--band-h, 0px)); }
.frueher { text-align: center; font-size: .8rem; font-weight: 700; color: var(--text-2); padding: 14px 0 4px; }
.tz-vorbei .tz-tag { background: var(--karte-2); }
.tz-vorbei .tz-tag b { color: var(--text-2); }
.tz-vorbei .zl-name { color: var(--text-2); }
.tz-vorbei .wz-vorn { background: var(--bg); }
.datum-griff { font-size: 1.35rem; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.datum-griff > span:first-child { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 360px) { .datum-griff { font-size: 1.2rem; } }
.einkauf-zurueck { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 16px 0 0; }
.einkauf-zurueck .leise { font-size: .8rem; padding-left: 4px; }
/* Einkauf: Abgehaktes unten eingeklappt, Abschliessen mit Rückfrage */
.einkauf-gruppe.erledigt { margin-top: 18px; }
.einkauf-gruppe.erledigt summary { list-style: none; cursor: pointer; }
.einkauf-gruppe.erledigt summary::-webkit-details-marker { display: none; }
.einkauf-gruppe.erledigt summary h3 { color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; }
.einkauf-gruppe.erledigt summary h3::after { content: '▾'; font-size: .9rem; }
.einkauf-gruppe.erledigt[open] summary h3::after { content: '▴'; }
.alles-im-korb { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--olive); }
.alles-im-korb svg { width: 22px; height: 22px; flex: none; }
.alles-im-korb span { color: var(--text); }
.abschluss-frage { max-width: 608px; margin: 0 auto; background: var(--karte); border-radius: 22px; padding: 12px 12px 10px; box-shadow: var(--schatten); }
.abschluss-frage p { margin: 2px 6px 10px; font-size: .9rem; }
/* Eigene Sachen auf der Einkaufsliste */
.extra-eingabe { display: flex; gap: 8px; margin: 4px 0 8px; }
.extra-eingabe input { flex: 1; min-width: 0; border-radius: 14px; }
.extra-weg { flex: none; width: 36px; height: 36px; margin: -6px -4px -6px 0; border: 0; border-radius: 50%; background: none; color: var(--text-2); font-size: 1.2rem; cursor: pointer; }
.extra-weg:hover { background: var(--karte-2); }
.chat-frage { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* Mengen in den Schritten */
.schritt-mengen { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--fliess); font-size: 1rem; }
.schritt-mengen li { background: var(--karte-2); border-radius: 999px; padding: 6px 12px; font-weight: 800; }
.schritt-mengen-zeile { margin-top: 6px; font-size: .85rem; font-weight: 800; color: var(--aubergine); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .schritt-mengen-zeile { color: var(--aubergine-2); } }
/* Zurück zu heute */
.zu-heute { position: fixed; top: calc(var(--kopf-h, 56px) + 8px); z-index: 28; border: 0; border-radius: 999px; padding: 8px 16px; min-height: 40px; background: var(--aubergine); color: var(--auf); font: inherit; font-weight: 800; box-shadow: 0 6px 18px rgba(50, 25, 40, .3); cursor: pointer; }
.zu-heute[hidden] { display: none; }
/* Kochmodus: waagrechte Gesten gehören der App, senkrecht darf gescrollt werden */
.kochmodus .schritt { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
/* Plan: links wischen = kochen */

/* Halter zum Kalender: grösser und deutlicher */
.zieh-griff { width: 72px; height: 36px; border-radius: 18px; margin: 2px auto 10px; background: color-mix(in srgb, var(--aubergine) 13%, var(--karte-2)); color: var(--aubergine);
  box-shadow: 0 2px 8px rgba(60, 30, 50, .12); }
.zieh-griff svg { width: 28px; height: 28px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zieh-griff { color: var(--aubergine-2); background: color-mix(in srgb, var(--aubergine-2) 18%, var(--karte-2)); } }
:root[data-theme="dark"] .zieh-griff { color: var(--aubergine-2); background: color-mix(in srgb, var(--aubergine-2) 18%, var(--karte-2)); }
.mehr-planen { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 8px; max-width: 320px; }
.mehr-planen svg { width: 18px; height: 18px; }

/* ===================== UX-Prüfung 01.11.2026 ===================== */
/* Hinweis-Leiste mit Schliessen */
.toast-x { background: none !important; color: var(--bg) !important; opacity: .7; font-size: 1.2rem; padding: 6px 10px !important; min-height: 40px; }
/* Kontrast (WCAG 1.4.3 / 1.4.11) */
.zl[data-z="offen"] .zl-rechts, .zl[data-z="fehler"] .zl-rechts { color: color-mix(in srgb, var(--safran) 45%, var(--text)); }
.chip.safran { color: color-mix(in srgb, var(--safran) 40%, var(--text)); }
.fk-text.nie { color: #b83a20; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fk-text.nie { color: color-mix(in srgb, var(--tomate) 80%, var(--text)); } }
.eintrag .box { border-color: var(--text-2); }
.band-zelle[data-z="frei"] .pkt { border-color: var(--text-2); opacity: .7; }
/* «Heute» immer als stärkster Anker, auch wenn heute noch frei ist */
.tz-frei[data-anker^="frei-"] .tz-tag b { color: var(--aubergine); }
/* Beschriftetes «noch kaufen» statt «!» */
.ek-fehlt { white-space: nowrap; }
/* Wisch-Hinweis als zwei Pfeile */
.wisch-tipp { display: flex; justify-content: space-between; padding: 0 8px; }
/* Grössere Touch-Ziele (Apple HIG 44 pt) */
.zl-mehr { width: 44px; }
.stepper button { width: 44px; height: 44px; }
/* Chips im Kalender umbrechen statt abschneiden */
.band-chips { flex-wrap: wrap; overflow: visible; }
.zm-punkt small { display: block; }
/* Einheitliche Wischrichtung: rechts = bestätigen (Olive), links = weg (neutral) – auch bei angenommenen Gerichten */
.wz[data-z="ja"][data-richtung="r"] .wz-hg { background: color-mix(in srgb, var(--z-ja) 22%, var(--bg)); color: var(--z-ja); }
.wz.scharf[data-z="ja"][data-richtung="r"] .wz-hg { background: var(--z-ja); color: var(--auf); }
.wz[data-z="ja"][data-richtung="l"] .wz-hg { background: var(--karte-2); color: var(--text-2); }
.wz.scharf[data-z="ja"][data-richtung="l"] .wz-hg { background: var(--text-2); color: var(--bg); }
/* Vergangenheit: sichtbares Nachladen und klare Grenze zu heute */
.frueher.laedt { color: var(--aubergine); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 0 10px; }
.frueher-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: drehen .8s linear infinite; }
.zeit-grenze { flex-direction: column; align-items: center; gap: 2px; margin: 22px 0 6px; padding: 10px 0; border-top: 2px dashed var(--linie-stark); border-bottom: 2px dashed var(--linie-stark); font-size: .78rem; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.zeit-grenze b { color: var(--aubergine); }

@media (prefers-reduced-motion: reduce) { .frueher-spinner { animation: none; } }
/* Knöpfe mit Text dürfen nicht in die Breite eines Rund-Symbols gezwängt werden */
.chat-eingabe .knopf.wunsch-los { width: auto; padding: 0 14px; font-size: .9rem; }
.abschluss-frage .leiste-zwei .knopf.zweit { width: auto; padding: 12px 16px; font-size: 1rem; }
@media (max-width: 400px) {
  .wunsch-panel .chat-eingabe { flex-wrap: wrap; }
  .wunsch-panel .chat-eingabe input { flex: 1 1 100%; }
  .wunsch-panel .chat-eingabe .knopf.wunsch-los { margin-left: auto; min-height: 44px; padding: 0 22px; }
}
/* Timer-Leiste: nie über den ganzen Bildschirm spannen und keine Tipps abfangen (Kochmodus-Tippen!) */
.timerleiste { top: auto; pointer-events: none; }

.timerleiste > * { pointer-events: auto; }
.timerleiste:empty { display: none; }
/* Vergangenheit farbig abgesetzt statt langer Grenz-Text */
.zeit-grenze { display: none; }
.vergangenheit { margin: 6px -16px 14px; padding: 4px 16px 10px; background: color-mix(in srgb, var(--text-2) 9%, var(--bg)); border-bottom: 3px solid color-mix(in srgb, var(--text-2) 25%, var(--bg)); }
.vergangenheit .tz-tag { background: color-mix(in srgb, var(--text-2) 14%, var(--bg)); }
.vergangenheit .wz-vorn { background: transparent; }
.verg-ende { text-align: center; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); padding-top: 10px; }
.tz-vorbei { opacity: .8; }
/* Prüfkarte: «Ersetzen» als Symbol, wenn es eng wird – «Ja» bekommt den Platz */
.fk-gericht { container-type: inline-size; grid-template-columns: minmax(0, 1fr) auto; }
.fk-gericht .fk-ersetzen { padding-left: 18px; padding-right: 18px; }
.fk-gericht .fk-ersetzen svg { width: 22px; height: 22px; }
@container (max-width: 360px) {
  .fk-ersetzen .knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fk-gericht .fk-ersetzen { width: 64px; padding: 0; }
}

/* «Noch nicht eingekauft» wieder als runder «!»-Punkt */
.ek-fehlt { width: 22px; height: 22px; border-radius: 50%; padding: 0; font-size: .85rem; font-weight: 900; }
/* Antwortvorschläge unter der letzten Nachricht der Aubergine */
.antwort-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px 46px; }
.antwort-chips .chip { flex: none; min-width: auto; min-height: 40px; padding: 8px 14px; font-size: .9rem; cursor: pointer;
  background: var(--karte, #fff); border: 1.5px solid var(--aubergine); color: var(--aubergine); font-weight: 700; }
.antwort-chips .chip.olive { background: var(--aubergine); color: #fff; }
.antwort-chips .chip { max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; }

/* ===================== Kleines Gespräch (Kochen, Einkauf, Wie war's?) ===================== */
#frage-ebene .sheet-hg { z-index: 79; }
#frage-ebene .sheet { z-index: 80; }
.koch-frage { margin-left: auto; margin-right: 8px; border: 1.5px solid var(--linie-stark); background: var(--karte); color: var(--text); border-radius: 999px; min-height: 40px; font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; }
.kochmodus .oben { display: flex; align-items: center; gap: 8px; }
.kochmodus .oben b { flex: 1; min-width: 0; }
.kochmodus .oben .koch-frage { margin-left: 0; flex: none; }
.fazit-chat { width: 100%; max-width: 520px; margin: 12px auto 0; text-align: left; font-family: var(--fliess); font-size: 1rem; }
.fazit-chat .antwort-chips { margin-left: 0; }
.gab-nicht { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; text-align: left; }
.gab-nicht svg { width: 30px; height: 30px; flex: none; }
.plan-chips { margin: -4px 0 12px; }
.plan-chip-frage { width: 100%; font-weight: 800; font-size: .9rem; }
.plan-chips .chip { min-height: 38px; padding: 6px 13px; }
.plan-chips .leise-chip { border-style: dashed; opacity: .8; }

/* Gelernte Vorschläge (oft gesagt) */
.plan-chips .eigen-chip { border-style: solid; background: var(--karte-2); }

/* ===================== Schwebende Aubergine ===================== */
.aub-schwebe { position: fixed; right: 16px; bottom: calc(var(--nav-h, 66px) + var(--leiste-h, 0px) + 14px); z-index: 45;
  width: 58px; height: 58px; border-radius: 50%; background: var(--karte); box-shadow: 0 8px 24px rgba(40, 20, 35, .28), 0 0 0 1px var(--linie);
  animation: schweben 3.2s ease-in-out infinite; }
.aub-schwebe.ueber-blatt { bottom: calc(18px + env(safe-area-inset-bottom)); }
.aub-schwebe svg:not(.aub-blase) { width: 30px; height: 37px; }
.aub-schwebe .aub-blase { top: -12px; left: -16px; }
.aub-schwebe .aub-text { font-weight: 900; font-size: 1.4rem; color: var(--aubergine); }
.aub-schwebe:active { transform: scale(.94); }
@keyframes schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .aub-schwebe { animation: none; } }

/* Platz, damit die Aubergine nichts am Listenende verdeckt */
body.aub-schwebt #app { padding-bottom: 76px; }
/* Kochmodus: Frage-Knopf mit Aubergine */
.koch-frage { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 8px; }
.koch-frage svg { width: 24px; height: 30px; flex: none; }
/* «Mehr planen» am Listenende nicht unter der schwebenden Aubergine */
body.aub-schwebt .mehr-planen { width: calc(100% - 74px); margin-left: 0; margin-right: auto; }
/* Im Kochmodus: Hinweise unten über den Weiter-Knöpfen – oben lagen sie über dem Schliessen-× */
body.kochen .toast { top: auto !important; }
/* Hinweis mittig über «translate» – die Einblend-Animation (transform) verschiebt ihn so nicht mehr seitlich */
.toast { transform: none; translate: -50% 0; }
/* Kochmodus: kleine Pfeile in den Ecken, die Aubergine schwebt über dem rechten */
.kochmodus .koch-nav { align-items: center; justify-content: space-between; }
.koch-pfeil { width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--karte-2); color: var(--text); font-size: 2rem; line-height: 1; display: grid; place-items: center; cursor: pointer; flex: none; }
.koch-pfeil.vor { background: var(--aubergine); color: var(--auf); }
.koch-pfeil:disabled { cursor: default; }
.koch-stand { font-weight: 800; color: var(--text-2); font-size: 1rem; }
.kochmodus .unten .knopf.koch-fertig { flex: none; min-height: 58px; padding: 0 26px; }
.aub-schwebe.im-koch { z-index: 65; bottom: calc(96px + env(safe-area-inset-bottom)); right: 20px; }
/* Hinweise im Kochmodus zwischen den Pfeilen */
body.kochen .toast { bottom: calc(22px + env(safe-area-inset-bottom)) !important; max-width: calc(100vw - 170px); }
/* «+» unten links: weitere Tage planen (Gegenstück zur Aubergine) */
.plus-schwebe { position: fixed; left: 16px; bottom: calc(var(--nav-h, 66px) + var(--leiste-h, 0px) + 14px); z-index: 45;
  width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--aubergine); color: var(--auf); cursor: pointer;
  box-shadow: 0 8px 24px rgba(40, 20, 35, .28); display: grid; place-items: center; padding: 0; animation: aufbau .25s both; }
.plus-schwebe span { font-size: 2.1rem; font-weight: 400; line-height: 1; margin-top: -3px; }
.plus-schwebe:active { transform: scale(.94); }
/* Aubergine hat etwas zu sagen: erst «tippt» sie, dann pulsiert das «!» */
.aub-schwebe.tippt .aub-blase circle { animation: tippen 1s ease-in-out infinite; }
.aub-schwebe.tippt .aub-blase circle:nth-of-type(2) { animation-delay: .15s; }
.aub-schwebe.tippt .aub-blase circle:nth-of-type(3) { animation-delay: .3s; }
@keyframes tippen { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-2.5px); opacity: 1; } }
.aub-schwebe.hat-was .aub-blase { transform-origin: 60% 90%; animation: blase-puls 1.8s ease-in-out infinite; }
@keyframes blase-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .aub-schwebe.tippt .aub-blase circle, .aub-schwebe.hat-was .aub-blase { animation: none; } }
/* Planungsfenster als Vollbild (wie Rezept und Kochmodus) */
.sheet.voll { padding: calc(8px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); box-sizing: border-box; overflow-x: hidden; }
.sheet.voll > * { max-width: 640px; margin-left: auto; margin-right: auto; }
.sheet.voll .sheet-kopf { top: calc(-8px - env(safe-area-inset-top)); }
.sheet.voll .sheet-kopf h2 { flex: 1; }
.andere-tage { display: flex; align-items: center; gap: 6px; margin: -4px auto 10px; }
.andere-tage svg { width: 18px; height: 18px; }
.sheet.voll { display: flex; flex-direction: column; }
.sheet.voll > * { width: 100%; box-sizing: border-box; flex: none; }
.sheet.voll > .andere-tage { width: auto; }
.sheet.voll .sheet-fuss { margin-top: auto; }

/* Planen: Tage im Vollbild wählen */
.plan-frage { font-size: .95rem; font-weight: 800; margin: 6px 0 8px; }
.plan-kal { margin-bottom: 14px; }
.plan-kal .band-zelle:disabled { opacity: .45; cursor: default; }
.plan-kal .band-chips .chip[aria-pressed="true"] { background: var(--aubergine); color: var(--auf); border-color: var(--aubergine); }
.band-fuss .band-hinweis { margin: 0; font-size: .8rem; color: var(--text-2); }

/* ===================== Planen, schlank ===================== */
.plan-voll .plan-kal { align-items: center; gap: 2px; margin: 4px 0 6px; }
.plan-voll .plan-kal .band-raster { flex: 1; }
.plan-pfeil { flex: none; width: 28px; height: 44px; border: 0; background: none; color: var(--text-2); font-size: 1.5rem; cursor: pointer; padding: 0; }
.plan-pfeil:disabled { opacity: .25; cursor: default; }
/* Nur der Hauptknopf ist gefüllt: gewählte Tage und Mahlzeiten getönt */
.plan-voll .band-zelle[data-z="gewaehlt"] .dt { background: color-mix(in srgb, var(--aubergine) 16%, transparent); color: var(--aubergine); box-shadow: inset 0 0 0 2px var(--aubergine); }
.plan-voll .band-zelle[data-z="gewaehlt"] .pkt { background: var(--aubergine); }
.plan-voll .mz-zelle { min-height: 40px; }
.plan-voll .mz-zelle[aria-pressed="true"] { background: color-mix(in srgb, var(--aubergine) 16%, transparent); color: var(--aubergine); border: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-voll .band-zelle[data-z="gewaehlt"] .dt,
  :root:not([data-theme="light"]) .plan-voll .mz-zelle[aria-pressed="true"] { color: var(--aubergine-2); box-shadow: inset 0 0 0 2px var(--aubergine-2); background: color-mix(in srgb, var(--aubergine-2) 22%, transparent); } }
:root[data-theme="dark"] .plan-voll .band-zelle[data-z="gewaehlt"] .dt, :root[data-theme="dark"] .plan-voll .mz-zelle[aria-pressed="true"] { color: var(--aubergine-2); box-shadow: inset 0 0 0 2px var(--aubergine-2); background: color-mix(in srgb, var(--aubergine-2) 22%, transparent); }
.plan-summe { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: 2px 0 6px; font-size: 1.02rem; }
.plan-summe .textknopf { flex: none; }
.plan-voll .mz-raster { margin-bottom: 8px; }
.plan-aub { display: flex; align-items: flex-end; gap: 8px; margin: 22px 0 10px; }
.plan-aub svg { width: 32px; height: 39px; flex: none; }
.aub-sprech { margin: 0; background: var(--karte-2); border-radius: 18px 18px 18px 4px; padding: 9px 14px; font-weight: 700; }
/* Chips ruhig: getönt, ohne Rand */

.plan-voll .plan-chips .chip { border: 0; background: var(--karte-2); color: var(--text); font-weight: 700; min-height: 38px; }
.plan-voll .plan-chips .mehr-chip { min-width: 44px; font-size: 1.1rem; }
.plan-voll .plan-chip-frage { width: 100%; font-weight: 800; font-size: .9rem; }
.wunsch-leise { width: 100%; box-sizing: border-box; margin: 2px 0 8px 40px; width: calc(100% - 40px); border: 0; border-bottom: 1px solid var(--linie); background: none; padding: 10px 2px; font: inherit; color: var(--text); }
.wunsch-leise:focus { outline: none; border-bottom-color: var(--aubergine); }
/* «frei»-Zeile mit Abkürzung */
.tz-frei .tz-frei-text { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 0 12px; }
.frei-planen { flex: 1; text-align: left; border: 0; background: none; font: inherit; color: var(--text-2); font-weight: 700; padding: 10px 0; cursor: pointer; }
.frei-sofort { flex: none; border: 0; background: none; font: inherit; font-weight: 800; color: var(--aubergine); padding: 10px 12px; cursor: pointer; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .frei-sofort { color: var(--aubergine-2); } }
:root[data-theme="dark"] .frei-sofort { color: var(--aubergine-2); }
/* Platz am Listenende für Leiste und die schwebenden Knöpfe */
body.aub-schwebt #app, body.plus-schwebt #app { padding-bottom: calc(var(--leiste-h, 0px) + 84px); }
/* Planen: Tage als wischbares Band (rastet tageweise ein) */
.plan-kal-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); }
.plan-kal-scroll::-webkit-scrollbar { display: none; }
.plan-kal-band { display: flex; }
.plan-kal-band .band-zelle { flex: 0 0 calc(100% / 7); scroll-snap-align: start; }
.plan-kal-band .band-zelle.wochenstart { box-shadow: inset 1px 0 0 var(--linie); }
.plan-voll .plan-kal { display: block; }
/* Vollbild-Planen: Einblenden nur beim ersten Öffnen, nicht bei jedem Neuzeichnen (sonst «holpert» jeder Tipp) */
.sheet.voll { animation: none; }
.sheet.voll.neu { animation: hochfahren .28s cubic-bezier(.2,.8,.2,1); }
/* Blätter blenden nur beim Öffnen ein – Neuzeichnen (Portionen, Chips, Tage) holpert sonst */
.sheet { animation: none; }
.sheet.rezept-blatt.neu { animation: hoch .3s cubic-bezier(.2,.8,.2,1); }

/* Planen: «Etwas Besonderes» als Gespräch mit der Aubergine */
.plan-voll .plan-chat { margin: 18px 0 4px; }
.plan-voll .plan-chat .msg > svg { width: 30px; height: 37px; }
.plan-voll .plan-chat .blase { font-weight: 600; }
.plan-voll .plan-chips { margin: 4px 0 8px 38px; }
.blase-weg { border: 0; background: none; color: inherit; opacity: .7; font: inherit; font-size: 1.05rem; padding: 0 0 0 10px; cursor: pointer; }
.plan-eingabe { margin-bottom: 10px; }

.sheet-fuss .plan-eingabe .knopf { width: auto; flex: none; min-width: 48px; }
.plan-eingabe input { flex: 1; min-width: 0; }

/* Vorschläge direkt in der Liste */
.zl-vorschlag .zl-name::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--safran); margin: 0 7px 2px 0; vertical-align: middle; }
.zl-vorschlag .zl-meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.zl-ja { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--olive); background: none; color: var(--olive); display: grid; place-items: center; cursor: pointer; padding: 0; }
.zl-ja svg { width: 20px; height: 20px; }
.zl-ja:active { background: var(--olive); color: #fff; }
.rezept-entscheid { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 10px; margin-top: 18px; padding: 10px 0 0; background: linear-gradient(to top, var(--bg) 75%, transparent); }
.rezept-entscheid .knopf { flex: 1; }
.plan-voll .plan-chips .chip { max-width: 100%; white-space: normal; text-align: left; flex: 0 1 auto; }
/* Die Aubergine schreibt: drei hüpfende Punkte */
.tippt-punkte { display: inline-flex; gap: 4px; align-items: center; height: 1.2em; vertical-align: middle; }
.tippt-punkte i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; animation: tipp-punkt 1.1s ease-in-out infinite; }
.tippt-punkte i:nth-child(2) { animation-delay: .15s; }
.tippt-punkte i:nth-child(3) { animation-delay: .3s; }
@keyframes tipp-punkt { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.tippt-text { display: block; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .tippt-punkte i { animation: none; } }
/* Neu eingeplant (gut einen Tag): Punkt und Begründung statt Minuten */
.zl-name.ist-neu::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--safran); margin: 0 7px 2px 0; vertical-align: middle; }
.zl:has(.ist-neu) .zl-meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
/* Einkauf: Ansicht wählen, Kacheln */

.ek-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; }
.ek-kachel { border: 0; border-radius: 14px; background: var(--aubergine); color: var(--auf); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; text-align: center; min-width: 0; }
.ek-kachel .ek-ic { font-size: 1.9rem; line-height: 1; }
.ek-kachel .ek-n { font-weight: 800; font-size: .82rem; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.ek-kachel .ek-m { font-size: .72rem; opacity: .85; }
.ek-kachel.da { background: var(--karte-2); color: var(--text-2); }
.ek-kachel.da .ek-ic { filter: grayscale(1); opacity: .6; }
.ek-kachel:active { transform: scale(.96); }
@media (min-width: 520px) { .ek-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kopf:has(.ek-ansicht) { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ek-ansicht { margin: 0 0 4px; flex: none; }
.ek-ansicht button { min-width: 44px; min-height: 40px; font-size: 1.1rem; padding: 0 10px; }
/* Alle Kacheln gleich gross: feste Höhe, Name höchstens zwei Zeilen */
.ek-kacheln { grid-auto-rows: 108px; }
.ek-kachel { aspect-ratio: auto; height: 108px; overflow: hidden; }
.ek-kachel .ek-n { max-width: 100%; }
/* Lange drücken auf Zutaten: kein Text markieren, kein Systemmenü */
.eintrag, .ek-kachel { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Einfarbige Symbole auf den Kacheln */
.ek-kachel .ek-ic { display: grid; place-items: center; width: 36px; height: 36px; }
.ek-kachel .ek-ic svg { width: 34px; height: 34px; }

/* Einkauf: eigene Sachen über die schwebende «+»-Leiste */
.dazu-leiste { position: fixed; left: 0; right: 0; z-index: 46; display: flex; gap: 8px; align-items: center;
  bottom: max(var(--tastatur, 0px), var(--nav-h, 66px)); padding: 10px 12px; background: var(--bg); box-shadow: 0 -8px 24px rgba(40, 20, 35, .14); animation: aufbau .2s both; }
.dazu-leiste input { flex: 1; min-width: 0; }
.dazu-leiste .koch-x { width: 44px; height: 44px; font-size: 1.3rem; flex: none; }
.alles-erledigt { display: flex; align-items: center; gap: 6px; margin: 14px auto 0; }
.alles-erledigt svg { width: 16px; height: 16px; }
.dazu-ok { width: 48px; min-width: 48px; height: 44px; padding: 0; display: grid; place-items: center; flex: none; }
.dazu-ok svg { width: 22px; height: 22px; }
/* Rest einer schon abgehakten Zutat: offen, mit «+ Menge» */
.ek-kachel.mehr .ek-m { font-weight: 800; opacity: 1; }
/* Kleines Gespräch: Trenner zwischen Früherem und Neuem */

/* Kleines Gespräch: Trenner zwischen Früherem und Neuem */
.chat-trenner { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin: 4px 0; }
.chat-trenner::before, .chat-trenner::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
/* Hinweis: Rückgängig als Symbol, klarer Kontrast (umgekehrte Farben statt Gelb) */
.toast .toast-undo { display: inline-flex; align-items: center; gap: 4px; justify-content: center; border-radius: 999px; font-weight: 800; }
.toast .toast-undo b { font-size: .8rem; }
/* Hinweis über den schwebenden Knöpfen (Aubergine, +), nicht darauf */

/* Planung: genug Platz unter der Liste, damit «Heute» zuoberst stehen kann */
.agenda2 { padding-bottom: var(--plan-reserve, 0px); }
.vergangen.am-ende { margin-top: 18px; }
/* Wischen: die Zeile deckt die Beschriftung dahinter immer ganz ab (nie durchsichtig),
   und die Beschriftung zeigt sich nur, solange man zieht – nach halbem Wischen überlagert sich nichts */
.zl-wrap.auf .wz-vorn { background: color-mix(in srgb, var(--karte-2) 60%, var(--bg)); }
.vergangen .wz-vorn, .tz-alt .wz-vorn { background: color-mix(in srgb, var(--safran) 9%, var(--bg)); }
.vergangenheit .wz-vorn, .tz-vorbei .wz-vorn { background: color-mix(in srgb, var(--text-2) 9%, var(--bg)); }
.wz:not(.zieht):not(.fliegt) .wz-hg span { display: none !important; }
/* Wochenleiste oben in der Planung (wischbar, 7 Tage sichtbar) */
.wochen-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 2px 0 4px;
  mask-image: linear-gradient(to right, #000 90%, transparent); -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); }
.wochen-scroll::-webkit-scrollbar { display: none; }
.wochen-scroll .band-zelle { flex: 0 0 calc(100% / 7); scroll-snap-align: start; }
.wochen-scroll .band-zelle.wochenstart { box-shadow: inset 1px 0 0 var(--linie); }
.plan-kopf2 { padding-top: 6px; padding-bottom: 2px; border-bottom: 1px solid var(--linie); }
/* Wochenleiste: der Tag, der gerade oben in der Liste steht */
.wochen-scroll .band-zelle.im-blick .wt { color: var(--aubergine); }
.wochen-scroll .band-zelle.im-blick::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 2px; background: var(--aubergine); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wochen-scroll .band-zelle.im-blick::after { background: var(--aubergine-2); } :root:not([data-theme="light"]) .wochen-scroll .band-zelle.im-blick .wt { color: var(--aubergine-2); } }
:root[data-theme="dark"] .wochen-scroll .band-zelle.im-blick::after { background: var(--aubergine-2); }

/* Hinweis: kompakt in der Zeile der schwebenden Knöpfe statt über der Liste; immer dunkel mit weissem Rückgängig – in hell und dunkel gut lesbar */
.toast { background: #2b1f27 !important; color: #fff !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .3), 0 0 0 1px rgb(255 255 255 / .14);
  min-height: 44px; padding: 4px 4px 4px 14px; gap: 6px; font-size: .84rem; font-weight: 650; line-height: 1.25; border-radius: 22px; }
.toast:not(:has(.toast-undo)) { padding-right: 14px; }
.toast > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.toast .toast-undo { background: #fff !important; color: #2b1f27 !important; padding: 0 10px; flex: none; }
body.aub-schwebt:not(.kochen) .toast, body.plus-schwebt:not(.kochen) .toast { bottom: calc(var(--nav-h, 80px) + var(--leiste-h, 0px) + 21px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast { background: #45333f !important; } }
:root[data-theme="dark"] .toast { background: #45333f !important; }
/* Rezept eines Vorschlags: Symbole in «Ersetzen»/«Einplanen» klein halten (ohne Grösse wuchsen sie auf Knopfbreite) */
.rezept-entscheid .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 16px; }
.rezept-entscheid .knopf svg { width: 20px; height: 20px; flex: none; }

/* Einkauf: «⋯»-Menü statt Umschalter und Bring-Knopf */
.kopf-mehr { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--karte-2); color: var(--text); display: grid; place-items: center; cursor: pointer; flex: none; }
.kopf-mehr:active { transform: scale(.94); }
.ek-menu-ansicht { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px 12px; }
.ek-menu-ansicht > span { font-weight: 800; color: var(--text-2); }
.ek-menu-ansicht .segment { flex: 0 1 230px; }
.ek-menu-ansicht .segment button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; }
.ek-menu .zm-punkt > svg { width: 22px; height: 22px; flex: none; color: var(--aubergine); }

/* UX-Prüfung 05.11.: Tippziele mindestens 44 px, Mengen auf Kacheln lesbar, beschrifteter Hinweis-Knopf */
.textknopf, .antwort-chips .chip, .plan-chips .chip, .knopf.klein, .segment button, .extra-weg { min-height: 44px; }
.toast .toast-undo { min-height: 40px; min-width: 44px; }
.toast .toast-undo.mit-text { padding: 0 14px; font-weight: 800; font-size: .82rem; white-space: nowrap; }
.blase-weg, .chip button { position: relative; }
.blase-weg::after, .chip button::after { content: ""; position: absolute; inset: -12px; }
.ek-kachel .ek-m, .ek-kachel .menge { font-size: .84rem !important; opacity: 1 !important; font-weight: 800; }

/* Grafik-Prüfung 05.11. */
/* Schwebende Knöpfe nie über einem Blatt; während eines Hinweises machen sie ihm Platz (Hinweis dann über die ganze Breite) */
body:has(#ebene .sheet) .plus-schwebe, body:has(#ebene .sheet) .aub-schwebe:not(.ueber-blatt):not(.im-koch) { display: none; }
body:has(.toast):not(.kochen) .plus-schwebe, body:has(.toast):not(.kochen) .aub-schwebe { opacity: 0; pointer-events: none; transition: opacity .15s; }
body.aub-schwebt:not(.kochen) .toast, body.plus-schwebt:not(.kochen) .toast { max-width: calc(100vw - 32px); }
/* Platz unten, damit die Aubergine keine Bedienelemente am Seitenende verdeckt */
#app::after { content: ""; display: block; height: 84px; }
/* Planleiste deckend statt durchscheinend */
.planleiste { background: linear-gradient(transparent, var(--bg) 30%); }
/* Segmente: nicht mitten im Wort umbrechen */
.segment button { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Schliessen-× im Blattkopf ganz rechts */
.sheet-kopf > div { flex: 1; min-width: 0; }
/* Kochmodus: Timer unter dem Fortschritt, Inhalt springt nicht, klare Pfeile */
body.kochen .timerleiste { top: calc(104px + env(safe-area-inset-top)) !important; bottom: auto !important; }
.kochmodus .schritt { justify-content: flex-start; padding-top: 4vh; }
.koch-pfeil { padding: 0; }
.koch-pfeil:disabled { opacity: .35; box-shadow: inset 0 0 0 1.5px var(--text-2); }
/* Kontrast: Vorschlags-Punkte, Schalter aus, Metatexte vergangener Tage */
:root { --z-offen: color-mix(in srgb, var(--safran) 72%, #5a3300); }
.schalter input { background: color-mix(in srgb, var(--text-2) 45%, var(--linie)); }
.tag-block.vergangen { opacity: 1; }
.tag-block.vergangen .zl-name { color: color-mix(in srgb, var(--text) 70%, var(--bg)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .schalter input:checked::after { background: var(--bg); }
  :root:not([data-theme="light"]) .aub-schwebe { background: var(--karte-2); box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 0 1.5px var(--aubergine); } }
:root[data-theme="dark"] .schalter input:checked::after { background: var(--bg); }
:root[data-theme="dark"] .aub-schwebe { background: var(--karte-2); box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 0 1.5px var(--aubergine); }
/* Blatt fährt hoch ohne durchscheinende Liste */
@keyframes hochfahren { from { transform: translateY(40px); } }
/* «Heute»-Knopf rechts statt mittig über dem Inhalt */
.zu-heute { left: auto !important; right: 16px; transform: none !important; translate: none !important; }
/* Einkauf: Symbole einer Reihe auf gleicher Höhe, abgehakte Listenzeile mit Häkchen */
.ek-kachel { justify-content: flex-start !important; padding-top: 16px; }
.eintrag.da .box svg { color: #fff; stroke: #fff; }
/* Kalenderbalken: Wochentag gross (im Kreis), Datum klein darüber */
.band-zelle .wt { font-size: .72rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.band-zelle .dt { font-size: 1rem; letter-spacing: -.01em; }

/* Konto und Anmeldung (app.cookeray.ch) */
body.ohne-konto nav.tabs, body.ohne-konto .timerleiste { display: none; }
.auth { max-width: 420px; margin: 0 auto; padding: 24px 0 40px; }
.auth-logo { text-align: center; margin-bottom: 18px; }
.auth-logo svg { width: 64px; height: 78px; }
.auth-logo h1 { margin: 6px 0 2px; }
.auth-karte h2 { margin: 0 0 12px; font-size: 1.25rem; }
.auth-karte input { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 1rem; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 12px; }
.auth-fehler { color: var(--tomate); font-weight: 700; margin: 4px 0 10px; }
.auth-ok { color: var(--olive); font-weight: 700; margin: 4px 0 10px; }
.auth-fuss { text-align: center; margin-top: 18px; }
/* Küche: Einstellungen als aufklappbare Gruppen */
.kueche-seg .zaehler { font-weight: 700; opacity: .7; margin-left: 3px; font-size: .8rem; }
details.gruppe { padding: 0; }
details.gruppe > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; cursor: pointer; min-height: 44px; }
details.gruppe > summary::-webkit-details-marker { display: none; }
details.gruppe > summary > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
details.gruppe > summary small { color: var(--text-2); font-weight: 700; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.gruppe[open] > summary .griff-pfeil { transform: rotate(180deg); }
details.gruppe .gruppe-inhalt { padding: 0 18px 18px; }
.chip.safran { background: var(--safran-hell); color: var(--text); }