/* Layout: links das Gespräch, rechts das Ergebnis (Woche, Korb als Kassenbon, Vorrat, An REWE); am Handy untereinander mit fester Leiste unten.
   Helles Design passend zum Hochglanz-Logo: frisches Blattgrün, Korb-Gold nur als Schmuck, viel Weiß. */
:root {
  --bg: #f5faf3; --flaeche: #ffffff; --tinte: #1d2a21; --leise: #4f6356; --linie: #cfdcd1; --rand: #848f87;
  --blatt: #2a7d35; --blatt-zart: #eaf6e7; --auf-blatt: #ffffff; --gold: #f2b11b; --gold-schrift: #8f6a10; --gold-zart: #fff6dc;
  --bon: #fffdf6; --bon-linie: #d9d3bf;
  --gut: #2e7d32; --warn: #7d4c00; --schlecht: #b3261e; --warn-zart: #fff2d6; --schlecht-zart: #fde8e6; --ki: #4b4fa8; --ki-zart: #eef0ff;
  --f-titel: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --f-text: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-zahl: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 12px; color-scheme: light;
}
* { box-sizing: border-box; }
html { font-size: 16.5px; }
body { background: var(--bg); color: var(--tinte); font: 1rem/1.5 var(--f-text);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 14px 40px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
:focus-visible { outline: 3px solid var(--blatt); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; max-width: 1240px; margin: 0 auto 14px; }
.marke { font: 700 1.7rem/1 var(--f-titel); letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.marke img { width: 52px; height: 52px; filter: drop-shadow(0 4px 8px rgba(42,125,53,.28)); }
.marke .wort span { color: var(--blatt); }
.versprechen { font-size: .95rem; color: var(--leise); max-width: 60ch; }
.markt { font-size: .85rem; color: var(--leise); width: 100%; }
.schritte { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.schritte li { list-style: none; font-size: .85rem; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--linie); color: var(--leise); }
.schritte li.an { border-color: var(--blatt); color: var(--blatt); font-weight: 700; }
.schritte li.fertig { background: var(--blatt-zart); border-color: transparent; color: var(--tinte); }
.schritt-kurz { display: none; font-size: .9rem; color: var(--leise); }
@media (max-width: 900px) {
  .versprechen, .markt, .schritte { display: none; }
  .schritt-kurz { display: block; margin-left: auto; }
  .marke { font-size: 1.4rem; } .marke img { width: 40px; height: 40px; }
  body { padding-bottom: 96px; }
}

.raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; max-width: 1240px; margin: 0 auto; align-items: start; }
@media (max-width: 900px) { .raster { grid-template-columns: minmax(0, 1fr); } }

.chat { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); display: flex; flex-direction: column; height: min(760px, calc(100vh - 120px)); position: sticky; top: env(safe-area-inset-top, 0px); box-shadow: 0 2px 10px rgba(29,42,33,.05); }
@media (max-width: 900px) { .chat { position: static; height: min(72vh, 620px); } }
.ki-band { font-size: .9rem; padding: 8px 14px; border-bottom: 1px solid var(--linie); color: var(--leise); }
.ki-band.an { background: var(--ki-zart); color: var(--ki); }
.verlauf { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.blase { max-width: 90%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.blase.bot { background: var(--blatt-zart); border-top-left-radius: 4px; align-self: flex-start; position: relative; margin-left: 32px; }
.blase.bot::before { content: ""; position: absolute; left: -32px; top: 0; width: 26px; height: 26px; background: url(bilder/logo_64.png) center / contain no-repeat; }
.blase.bot.ki { background: var(--ki-zart); }
.blase.bot.ki::after { content: "KI"; position: absolute; left: -31px; top: 28px; font: 700 .65rem var(--f-text); color: var(--ki); border: 1px solid var(--ki); border-radius: 4px; padding: 0 3px; background: #fff; }
.blase.ich { background: var(--blatt); color: var(--auf-blatt); border-top-right-radius: 4px; align-self: flex-end; }
.blase.leise { background: transparent; color: var(--leise); font-size: .9rem; padding: 0 2px; }
.unten { border-top: 1px solid var(--linie); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 4px; max-height: 42vh; overflow-y: auto; }
.knoepfe:empty { display: none; }
.chip { border: 1.5px solid var(--rand); background: var(--flaeche); color: var(--tinte); border-radius: 99px; padding: 8px 15px; font-size: .95rem; min-height: 46px; }
.chip:hover { border-color: var(--blatt); }
.chip.an { background: var(--blatt); border-color: var(--blatt); color: var(--auf-blatt); }
.chip.an::before { content: "✓ "; }
.chip.weiter { border-color: var(--blatt); color: var(--blatt); font-weight: 700; }
.chip.haupt { background: var(--blatt); border-color: var(--blatt); color: var(--auf-blatt); font-weight: 700; min-height: 52px; padding-inline: 20px; }
.chip.fehlt { background: var(--warn-zart); border-color: var(--warn); color: var(--warn); }
.chip.fehlt::before { content: "🛒 "; }
.chip.zurueck { border-style: dashed; color: var(--leise); }
.eingabe { display: flex; gap: 8px; padding: 10px; }
.eingabe input { flex: 1; min-width: 0; border: 1.5px solid var(--rand); border-radius: 10px; padding: 11px 13px; background: #fff; font-size: 1rem; min-height: 48px; }
.knopf { border: 0; background: var(--blatt); color: var(--auf-blatt); border-radius: 10px; padding: 11px 18px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }
.knopf.zweit { background: #fff; color: var(--blatt); border: 1.5px solid var(--blatt); }

.ergebnis { min-width: 0; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 12px; }
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); overflow-x: auto; }
.reiter button { border: 0; background: none; padding: 10px 14px; border-bottom: 3px solid transparent; color: var(--leise); font-weight: 700; white-space: nowrap; min-height: 46px; }
.reiter button.an { color: var(--tinte); border-bottom-color: var(--blatt); }
.reiter .zahl { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: var(--warn-zart); color: var(--warn); font-size: .8rem; }
.banner { font-size: .95rem; border-radius: 10px; padding: 10px 14px; border: 1px solid var(--linie); background: var(--flaeche); display: grid; gap: 6px; }
.banner.warn { background: var(--warn-zart); color: var(--warn); border-color: transparent; }
.banner.schlecht { background: var(--schlecht-zart); color: var(--schlecht); border-color: transparent; }
.banner.gut { background: var(--blatt-zart); border-color: transparent; }
.banner ul { margin: 0; padding-left: 18px; }
.banner .zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tafel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 4px 0; box-shadow: 0 2px 10px rgba(29,42,33,.05); }

.tag { display: grid; grid-template-columns: 50px 128px minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--linie); align-items: start; }
.tag:last-child { border-bottom: 0; }
.tag .wt { font: 700 .8rem/1.2 var(--f-zahl); color: var(--leise); }
.tag .wt b { display: block; font: 700 1.15rem/1.1 var(--f-titel); color: var(--tinte); }
.tag h3 { margin: 0; font: 700 1.05rem/1.25 var(--f-titel); text-wrap: balance; }
.tag .info { font-size: .88rem; color: var(--leise); display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.rbild { width: 128px; height: 80px; border-radius: 10px; background-color: var(--blatt-zart); background-repeat: no-repeat; display: block; flex: none; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.tauschfeld { grid-column: 1 / -1; display: grid; gap: 8px; background: var(--bg); border-radius: 10px; padding: 10px; }
.tauschfeld .karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.tkarte { border: 1.5px solid var(--linie); background: #fff; border-radius: 10px; padding: 8px; text-align: left; display: grid; gap: 4px; min-height: 46px; }
.tkarte:hover, .tkarte:focus-visible { border-color: var(--blatt); }
.tkarte .rbild { width: 100%; height: auto; aspect-ratio: 8 / 5; }
.tkarte b { font: 700 .95rem/1.25 var(--f-titel); }
.tkarte small { color: var(--leise); }
@media (max-width: 560px) { .tag { grid-template-columns: 44px 96px minmax(0, 1fr); } .tag .rbild { width: 96px; height: 60px; } .tag > .rechts { grid-column: 1 / -1; } .tag select { width: 100%; } }
.pille { font-size: .78rem; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--linie); display: inline-block; max-width: 100%; }
.pille.gut { border-color: var(--gut); color: var(--gut); }
.pille.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-zart); }
.pille.schlecht { border-color: var(--schlecht); color: var(--schlecht); background: var(--schlecht-zart); }
.klein-knopf { font-size: .9rem; border: 1.5px solid var(--rand); background: var(--flaeche); border-radius: 9px; padding: 8px 12px; min-height: 44px; max-width: 100%; text-align: left; }
.klein-knopf.an { background: var(--blatt); border-color: var(--blatt); color: var(--auf-blatt); }
.pille.info { border-color: var(--linie); color: var(--leise); }
.klein { font-size: .82rem; color: var(--leise); margin-top: 4px; }
[hidden] { display: none !important; }
details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
/* Schichtplan im Chat: je Tag eine Zeile mit 4 Knöpfen */
.schichtplan { display: grid; grid-template-columns: 34px repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; align-items: center; }
.schichtplan b { font-size: .95rem; }
.schichtplan button { min-height: 44px; border-radius: 10px; border: 1.5px solid var(--rand); background: var(--flaeche); font-size: .85rem; padding: 4px 2px; }
.schichtplan button.an { background: var(--blatt); border-color: var(--blatt); color: var(--auf-blatt); font-weight: 700; }
/* Tag: Mittag/Abend-Zeilen und das Feld zum Umplanen */
.mz { display: flex; gap: 6px; align-items: baseline; font-size: .92rem; margin-top: 2px; }
.mz .uhr { min-width: 62px; color: var(--leise); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.tagfeld { grid-column: 1 / -1; display: grid; gap: 10px; background: var(--bg); border-radius: 10px; padding: 10px; }
.tagfeld .zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tagfeld .zeile > span { min-width: 120px; font-size: .9rem; color: var(--leise); }
.schicht-pille { font-size: .75rem; border-radius: 99px; padding: 1px 8px; background: var(--gold-zart); color: var(--gold-schrift); display: inline-block; margin-top: 3px; }
.frueh { display: grid; gap: 12px; }
/* Rezepte: fertige Wochen und Rezeptkarten */
.rezepte { display: grid; gap: 14px; }
.wochen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.wkarte { border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); padding: 10px; display: grid; gap: 6px; }
.wkarte .mini { display: flex; gap: 4px; } .wkarte .mini span { width: 56px; height: 36px; border-radius: 6px; background: #eee; }
.wkarte b { font: 700 1rem var(--f-titel); } .wkarte small { color: var(--leise); }
.rsuche { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rsuche input { flex: 1 1 200px; min-height: 46px; border: 1.5px solid var(--rand); border-radius: 10px; padding: 8px 12px; }
.rgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.rkarte { border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.rkarte.drin { border-color: var(--blatt); box-shadow: 0 0 0 2px var(--blatt-zart); }
.rkarte .rbild { width: 100%; height: 125px; border-radius: 0; display: block; }
.rkarte .txt { padding: 8px 10px; display: grid; gap: 4px; font-size: .9rem; }
.rkarte .txt b { font-size: .98rem; } .rkarte .txt small { color: var(--leise); }
.rkarte .unten2 { padding: 0 10px 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.frueh .bausteine { display: flex; flex-wrap: wrap; gap: 8px; }
.frueh .tage { display: flex; flex-wrap: wrap; gap: 6px; }
.tag select { font-size: .9rem; padding: 8px; border-radius: 9px; border: 1.5px solid var(--rand); background: var(--flaeche); max-width: 100%; min-height: 44px; }
a { color: var(--blatt); }

.bon { background: var(--bon); border: 1px dashed var(--bon-linie); border-radius: 6px; padding: 14px 16px; font: .9rem/1.6 var(--f-zahl); font-variant-numeric: tabular-nums; }
.bon .z { display: flex; justify-content: space-between; gap: 12px; }
.bon .summe { border-top: 2px solid var(--tinte); margin-top: 6px; padding-top: 6px; font-weight: 600; font-size: 1.05rem; }
.bon .kopfz { display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; color: var(--leise); margin-bottom: 6px; }
.bon .kopfz img { width: 24px; height: 24px; }
.budget { height: 9px; border-radius: 5px; background: var(--linie); overflow: hidden; margin-top: 8px; }
.budget i { display: block; height: 100%; background: var(--gut); }
.budget.ueber i { background: var(--schlecht); }
.bon .fuss { font-size: .75rem; color: var(--leise); margin-top: 6px; }

.gruppe h4 { margin: 0; padding: 12px 14px 4px; font: 700 .78rem/1 var(--f-text); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.pos { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 4px 10px; padding: 10px 14px; border-top: 1px solid var(--linie); align-items: center; }
.pos.weg .n { text-decoration: line-through; color: var(--leise); }
.pos.leuchtet { animation: leuchten 1.6s ease-out; }
@keyframes leuchten { from { background: var(--gold-zart); } to { background: transparent; } }
.pbild { width: 52px; height: 52px; border-radius: 9px; background-color: #fff; background-repeat: no-repeat; border: 1px solid var(--linie); grid-row: span 2; align-self: start; }
.pos .n { font-weight: 700; font-size: .98rem; }
.pos .d { font-size: .85rem; color: var(--leise); grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pos .preis { font: 600 .95rem var(--f-zahl); font-variant-numeric: tabular-nums; text-align: right; min-width: 66px; }
.zaehler { display: flex; align-items: center; gap: 4px; }
.zaehler button { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--rand); background: var(--flaeche); font-size: 1.2rem; }
.zaehler span { min-width: 26px; text-align: center; font: 600 1rem var(--f-zahl); }
details.zt { grid-column: 2 / -1; font-size: .82rem; color: var(--leise); }
details.zt summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
@media (max-width: 560px) { .pos { grid-template-columns: 52px minmax(0, 1fr) auto; } .pos .zaehler { grid-column: 2; grid-row: 3; } .pos .preis { grid-row: 1; grid-column: 3; } .pos .d { grid-row: 2; } }

.vorrat { display: grid; gap: 8px; padding: 10px 14px; }
.vz { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; border-bottom: 1px solid var(--linie); padding-bottom: 8px; }
.vz small { color: var(--leise); }
.wahl { display: flex; gap: 6px; }
.wahl button { border: 1.5px solid var(--rand); background: var(--flaeche); border-radius: 9px; padding: 8px 14px; min-height: 44px; }
.wahl button.da { background: var(--blatt-zart); border-color: var(--blatt); }
.wahl button.fehlt { background: var(--warn-zart); border-color: var(--warn); }

.uebergabe { display: grid; gap: 12px; padding: 14px; }
.logo-gross { display: flex; align-items: center; gap: 14px; }
.logo-gross img { width: 64px; height: 64px; filter: drop-shadow(0 4px 8px rgba(42,125,53,.25)); }
.weg-box { border: 1px solid var(--linie); border-radius: 12px; padding: 14px; display: grid; gap: 8px; }
.weg-box h3 { margin: 0; font: 700 1.05rem var(--f-titel); }
.weg-box p, .weg-box ol { margin: 0; font-size: .95rem; color: var(--leise); }
.weg-box ol { padding-left: 20px; }
.weg-box .zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.code { font: .78rem var(--f-zahl); word-break: break-all; background: var(--bg); border-radius: 6px; padding: 6px 8px; max-height: 90px; overflow: auto; }
.hinweis { font-size: .88rem; color: var(--leise); padding: 4px 14px 12px; }
.leer { padding: 28px 16px; text-align: center; color: var(--leise); }

.leiste { display: none; }
@media (max-width: 900px) {
  .leiste { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: 10px; align-items: center; justify-content: space-between;
    background: #fff; border-top: 1px solid var(--linie); box-shadow: 0 -4px 14px rgba(29,42,33,.08);
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .leiste .summe { font: 600 1.05rem/1.25 var(--f-zahl); min-width: 0; flex: 1; }
  .leiste .summe small { display: block; font: 400 .78rem var(--f-text); color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .leiste .knopf { min-height: 52px; max-width: 62vw; }
  html { scroll-padding-bottom: 96px; }
}