@font-face { font-family: "Manrope"; src: url("/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
/* Korb – Designsystem „Fresh Minimal“: Creme, Salbei, weiche Schatten */
:root {
  /* Farben */
  --bg: #f6f8f5;
  --bg-tief: #edf3ee;
  --karte: #ffffff;
  --kachel: #ffffff;
  --text: #172b24;
  --leise: #53645b;
  --linie: #dce5de;
  --salbei: #3fa36f;
  --salbei-mittel: #1f7a55;
  --salbei-tief: #146347;
  --salbei-hell: #e3f1e7;
  --salbei-zart: #eff6f1;
  --creme: #f4f8dc;
  --korb-linie: #f2f7ef;
  --knopf: #146347;
  --knopf-tief: #0e4d37;
  --knopf-text: #ffffff;
  --gefahr: #ad3042;
  --status-aus: #ad3042;
  --decke: rgba(35, 48, 42, .32);

  /* Schatten: weich, doppelt, leicht neumorph */
  --schatten-s: 0 1px 2px rgba(60, 80, 64, .06), 0 2px 6px rgba(60, 80, 64, .05);
  --schatten: 0 1px 2px rgba(60, 80, 64, .05), 0 6px 18px -6px rgba(60, 80, 64, .16);
  --schatten-hoch: -3px -3px 10px rgba(255, 255, 255, .85), 0 2px 4px rgba(60, 80, 64, .05), 0 12px 28px -10px rgba(60, 80, 64, .22);
  --schatten-knopf: 0 8px 20px -6px rgba(79, 125, 90, .55), inset 0 1px 0 rgba(255, 255, 255, .25);

  /* Formen */
  --rund-s: 12px;
  --rund: 20px;
  --rund-l: 28px;
  --pill: 999px;

  /* Schrift */
  --schrift: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --akzent: #d5ed8a;
  --auf-akzent: #24351a;
  --held-a: #e8f3eb;
  --held-b: #f4f8dc;

  /* Bewegung */
  --feder: cubic-bezier(.34, 1.4, .64, 1);
  --sanft: cubic-bezier(.22, .9, .24, 1);
  --dauer: 1;

  --welle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 0h400v190c-58 38-128 46-204 18S58 168 0 206z' fill='%23e7eedf'/%3E%3Cpath d='M0 0h400v128c-74 32-136 34-214 6S48 108 0 150z' fill='%23dde8d6' fill-opacity='.7'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111a16;
    --bg-tief: #0c1310;
    --karte: #1b2821;
    --kachel: #ffffff;
    --text: #f1f6ef;
    --leise: #b3c3b8;
    --linie: #3b4f41;
    --salbei: #5fbf8c;
    --salbei-mittel: #8bd7af;
    --salbei-tief: #a5e4c2;
    --salbei-hell: #24352b;
    --salbei-zart: #1f2e25;
    --creme: #303d24;
    --korb-linie: #24352b;
    --knopf: #8bd7af;
    --knopf-tief: #a5e4c2;
    --knopf-text: #11271a;
    --gefahr: #ffadb7;
    --status-aus: #ffadb7;
    --decke: rgba(0, 0, 0, .55);
    --schatten-s: 0 1px 2px rgba(0, 0, 0, .35);
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -8px rgba(0, 0, 0, .55);
    --schatten-hoch: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 28px -10px rgba(0, 0, 0, .7);
    --schatten-knopf: 0 8px 22px -8px rgba(143, 185, 150, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
    --welle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 0h400v190c-58 38-128 46-204 18S58 168 0 206z' fill='%231b241d'/%3E%3Cpath d='M0 0h400v128c-74 32-136 34-214 6S48 108 0 150z' fill='%23202c23' fill-opacity='.8'/%3E%3C/svg%3E");
    --held-a: #203c2e;
    --held-b: #303d24;
    color-scheme: dark;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --feder: cubic-bezier(.22, .9, .24, 1); --dauer: .6; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
html, body { margin: 0; color: var(--text); }
body {
  font: 17px/1.45 var(--schrift);
  min-height: 100dvh;
  background: var(--welle) top center / 100% 320px no-repeat, var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--salbei-tief); outline-offset: 2px; }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }
.ic { width: 22px; height: 22px; flex: none; display: block; }

/* Druck-Effekt für alle Taster */
button, .knopf { transition: transform .18s var(--sanft), background-color .2s, box-shadow .2s, color .2s; }
button:active:not(:disabled), .knopf:active { transform: scale(.96); }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  padding-top: env(safe-area-inset-top);
}
.kopf-zeile { display: flex; align-items: center; gap: 12px; padding: 14px 0 10px; }
.kopf-titel { flex: 1; min-width: 0; }
.kopf h1 {
  font: 600 25px/1.15 var(--schrift-titel); margin: 2px 0 0; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.status { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #adb5ad; flex: none; transition: background .3s; }
.status.an { background: var(--salbei-mittel); }
.status.an::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--salbei);
  animation: puls-ring 2.4s ease-out infinite;
}
.status.aus { background: var(--status-aus); }
@keyframes puls-ring { 0% { transform: scale(.5); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

.koepfe { display: flex; align-items: center; border: 0; background: transparent; padding: 4px 4px 4px 12px; border-radius: var(--pill); }
.kopf-punkt {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 14px; font-weight: 700; color: #fff; border: 2.5px solid var(--bg); margin-left: -10px;
  box-shadow: var(--schatten-s);
}
.kopf-punkt.mehr { background: var(--salbei-hell); color: var(--salbei-tief); }

/* Listen-Reiter */
.reiter, .filter, .schnell { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.reiter::-webkit-scrollbar, .filter::-webkit-scrollbar, .schnell::-webkit-scrollbar { display: none; }
.reiter { padding-top: 2px; padding-bottom: 10px; }
.reiter button {
  flex: none; border: 0; background: var(--karte); border-radius: var(--pill); box-shadow: var(--schatten-s);
  padding: 9px 16px; font-size: 15px; font-weight: 500; display: flex; gap: 7px; align-items: center; min-height: 40px;
}
.reiter button.aktiv { background: var(--knopf); color: var(--knopf-text); font-weight: 600; box-shadow: var(--schatten-knopf); }
.reiter .zahl { font-size: 14px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); display: grid; place-items: center; background: var(--salbei-hell); color: var(--salbei-tief); }
.reiter .aktiv .zahl { background: rgba(255, 255, 255, .22); color: inherit; }
.reiter-emo { font-size: 15px; }
.reiter .reiter-neu { padding: 0; width: 40px; justify-content: center; color: var(--salbei-tief); }
.reiter .reiter-neu .ic { width: 18px; height: 18px; }

/* Filter „für wen“ */
.filter { padding-bottom: 12px; }
.filter-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  border: 1px solid var(--linie); background: transparent; border-radius: var(--pill);
  padding: 6px 13px; font-size: 14.5px; color: var(--text);
}
.filter-chip.aktiv { background: var(--salbei-hell); border-color: var(--salbei); color: var(--salbei-tief); font-weight: 600; }
.filter-chip .zahl { font-size: 14px; color: var(--leise); font-weight: 600; }
.filter-chip.aktiv .zahl { color: var(--salbei-tief); }
.filter-chip.neu { width: 36px; padding: 0; justify-content: center; color: var(--salbei-tief); border-style: dashed; }
.filter-chip.neu .ic { width: 16px; height: 16px; }
.filter-emo { font-size: 15px; line-height: 1; }

/* ---------- Eingabe ---------- */
.eingabe { position: relative; padding-bottom: 12px; }
.eingabe-feld {
  display: flex; gap: 10px; background: var(--karte); border-radius: var(--pill);
  box-shadow: var(--schatten-hoch); padding: 6px 6px 6px 18px; align-items: center;
  border: 1.5px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.eingabe-feld:focus-within { border-color: var(--salbei); box-shadow: var(--schatten-hoch), 0 0 0 4px color-mix(in srgb, var(--salbei) 22%, transparent); }
.eingabe-ic { color: var(--leise); display: grid; }
.eingabe-fuer { font-size: 20px; line-height: 1; width: 30px; height: 30px; display: grid; place-items: center; background: var(--salbei-hell); border-radius: 50%; margin-left: -8px; }
.eingabe-feld input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 17px; padding: 9px 0; min-width: 0; }
.eingabe-feld input::placeholder { color: var(--leise); opacity: .85; }
.plus {
  width: 46px; height: 46px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--salbei-mittel), var(--knopf)); color: var(--knopf-text); box-shadow: var(--schatten-knopf);
}

.vorschlaege {
  position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 30;
  background: var(--karte); border-radius: var(--rund); box-shadow: 0 18px 44px -12px rgba(35, 48, 42, .32), var(--schatten-s);
  overflow: hidden auto; max-height: 60vh; padding: 6px; transform-origin: top center;
}
.vorschlaege.einblenden { animation: einblenden calc(.28s * var(--dauer)) var(--sanft) both; }
.vorschlaege.einblenden .vorschlag { animation: hochblenden calc(.32s * var(--dauer)) var(--sanft) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes einblenden { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes hochblenden { from { opacity: 0; transform: translateY(6px); } }
.vorschlag {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0;
  background: transparent; padding: 8px 10px 8px 8px; border-radius: 16px; min-height: 56px;
}
.vorschlag.markiert, .vorschlag:hover { background: var(--salbei-zart); }
.vorschlag .nm { flex: 1; min-width: 0; font-size: 16px; }
.vorschlag .kl { display: block; font-size: 14px; color: var(--leise); margin-top: 1px; }
.vorschlag .schon { font-size: 14px; color: var(--salbei-tief); font-weight: 600; background: var(--salbei-hell); padding: 3px 9px; border-radius: var(--pill); white-space: nowrap; }
.vorschlag-plus { color: var(--salbei-tief); opacity: .7; }
.vorschlag-plus .ic { width: 18px; height: 18px; }

/* Schnellwahl */
.schnell { padding-top: 2px; padding-bottom: 14px; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--linie); background: color-mix(in srgb, var(--karte) 60%, transparent);
  border-radius: var(--pill); padding: 7px 13px 7px 10px; font-size: 14.5px; color: var(--text); min-height: 36px;
}
.chip .ic { width: 15px; height: 15px; color: var(--salbei-tief); }
.chip.voll { background: var(--karte); border-color: transparent; box-shadow: var(--schatten-s); font-weight: 600; padding-left: 12px; }
.chip.voll .ic { width: 18px; height: 18px; }

/* ---------- Produkt-Kachel ---------- */
.bild {
  position: relative; width: 52px; height: 52px; flex: none; border-radius: 18px; background: var(--kachel);
  display: grid; place-items: center; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--salbei) 22%, transparent);
}
.bild img { width: 100%; height: 100%; object-fit: contain; padding: 5px; border-radius: inherit; display: block; }
.bild-emo { font-size: 28px; line-height: 1; }
.bild.klein { width: 40px; height: 40px; border-radius: 13px; }
.bild.klein .bild-emo { font-size: 21px; }
.bild.klein img { padding: 3px; }
.bild.gross { width: 72px; height: 72px; border-radius: 24px; }
.bild.gross .bild-emo { font-size: 40px; }
.bild.eigen { background: var(--salbei-hell); color: var(--salbei-tief); box-shadow: none; }
.bild.eigen .ic { width: 18px; height: 18px; }
.bild .punkt { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--karte); }

/* ---------- Liste ---------- */
.gruppe { margin: 6px 0 18px; }
.gruppe-kopf, .wagen-kopf h2 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px 2px;
  font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--text);
}
.kat-emo {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--salbei-hell); font-size: 15px; color: var(--salbei-tief);
}
.kat-emo .ic { width: 17px; height: 17px; }
.kat-zahl { font-size: 14px; font-weight: 600; color: var(--leise); background: color-mix(in srgb, var(--karte) 70%, transparent); border: 1px solid var(--linie); border-radius: var(--pill); padding: 1px 8px; }
.zeilen { display: grid; gap: 10px; }

.eintrag {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px;
  padding: 8px 8px 8px 8px; background: var(--karte); border-radius: var(--rund-l);
  box-shadow: var(--schatten-hoch); user-select: none; -webkit-user-select: none;
}
.eintrag .mitte { flex: 1; min-width: 0; cursor: pointer; padding: 4px 0; }
.eintrag .name { font-size: 16.5px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.eintrag .notiz { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; color: var(--leise); margin-top: 4px; }
.etikett { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--salbei-tief); background: var(--salbei-zart); border: 1px solid color-mix(in srgb, var(--salbei) 35%, transparent); border-radius: var(--pill); padding: 1px 8px 1px 6px; }
.menge {
  flex: none; font-size: 14px; font-weight: 600; color: var(--salbei-tief); background: var(--salbei-hell);
  border-radius: var(--pill); padding: 2px 9px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.klein-knopf {
  border: 0; background: transparent; width: 38px; height: 38px; border-radius: 50%; color: var(--leise); flex: none;
  display: grid; place-items: center; margin-right: -4px;
}
.klein-knopf .ic { width: 19px; height: 19px; }
.klein-knopf:hover { background: var(--salbei-zart); color: var(--salbei-tief); }
.klein-knopf.gefahr:hover { color: var(--gefahr); }

.haken {
  width: 44px; height: 44px; border-radius: 50%; flex: none; padding: 0; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--knopf-text); position: relative;
}
.haken::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--salbei) 70%, var(--linie));
  background: var(--karte); transition: background .2s, border-color .2s;
}
.haken-ic { position: relative; width: 20px; height: 20px; }
.haken-ic path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.erledigt .haken::before { background: var(--salbei-mittel); border-color: var(--salbei-mittel); }
.erledigt .haken-ic path { stroke-dashoffset: 0; }

.erledigt { box-shadow: var(--schatten-s); background: color-mix(in srgb, var(--karte) 70%, transparent); }
.erledigt .name { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--leise) 60%, transparent); color: var(--leise); }
.erledigt .bild { opacity: .55; filter: saturate(.6); }
.erledigt .menge { background: transparent; color: var(--leise); }

/* Abhaken: Haken zeichnet sich, Zeile wird kurz grün */
.abhakend { animation: abhak-zeile calc(.43s * var(--dauer)) var(--sanft) var(--d, 0ms) both; }
.abhakend .haken::before { animation: haken-fuellen calc(.24s * var(--dauer)) var(--sanft) var(--d, 0ms) both; }
.abhakend .haken-ic path { animation: haken-zeichnen calc(.32s * var(--dauer)) var(--sanft) calc(var(--d, 0ms) + 60ms) both; }
.abhakend .name { transition: color .3s; color: var(--salbei-tief); }
@keyframes abhak-zeile { 0% { background: var(--karte); } 45% { background: var(--salbei-hell); transform: scale(1.012); } 100% { background: var(--salbei-hell); transform: scale(1); } }
@keyframes haken-fuellen { from { background: var(--karte); transform: scale(.8); } 60% { transform: scale(1.12); } to { background: var(--salbei-mittel); border-color: var(--salbei-mittel); transform: scale(1); } }
@keyframes haken-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Neue Einträge federn ein */
.anim-neu, .anim-zurueck { animation: einfedern calc(.62s * var(--dauer)) var(--feder) var(--d, 0ms) both; }
.anim-neu::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--salbei); animation: glimmen calc(1.2s * var(--dauer)) ease-out var(--d, 0ms) both;
}
@keyframes einfedern { from { opacity: 0; transform: translateY(-16px) scale(.94); } 60% { opacity: 1; } }
@keyframes glimmen { from { opacity: .9; } to { opacity: 0; } }
.anim-wagen { animation: wagen-blitz calc(1s * var(--dauer)) ease-out var(--d, 0ms) both; }
@keyframes wagen-blitz { from { background: var(--salbei-hell); } }
.anim-puls { animation: puls calc(.5s * var(--dauer)) var(--feder) var(--d, 0ms) both; }
@keyframes puls { 40% { transform: scale(1.03); background: var(--salbei-zart); } }
.eintrag.weg { animation: weg calc(.42s * var(--dauer)) var(--sanft) var(--w, 0ms) both; }
@keyframes weg { to { opacity: 0; transform: translateX(28px) scale(.96); } }

.wagen-kopf { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 10px; }
.wagen-kopf h2 { margin: 0 0 0 2px; }
.text-knopf { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--salbei-tief); font-weight: 600; font-size: 14.5px; padding: 8px 10px; border-radius: var(--pill); }
.text-knopf .ic { width: 17px; height: 17px; }
.text-knopf:hover { background: var(--salbei-zart); }

.fertig-knopf {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 18px 0 30px; padding: 16px;
  border-radius: var(--pill); border: 0; background: linear-gradient(160deg, var(--salbei-mittel) -40%, var(--knopf) 60%);
  color: var(--knopf-text); font-weight: 600; font-size: 16.5px; letter-spacing: .01em; box-shadow: var(--schatten-knopf);
}

.leer { text-align: center; padding: 34px 20px 20px; color: var(--leise); }
.leer h3 { color: var(--text); margin: 6px 0 6px; font: 600 22px/1.2 var(--schrift-titel); }
.leer p { margin: 0 auto; max-width: 300px; }
.leer .knopf { display: inline-flex; width: auto; padding: 13px 22px; }
.leer.laden { padding-top: 90px; }
.leer.laden .korb-motiv { animation: atmen 1.6s ease-in-out infinite; }
@keyframes atmen { 50% { transform: scale(.96); opacity: .7; } }
.alles-da { padding: 20px; }
.alles-ic { width: 56px; height: 56px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; background: var(--salbei-hell); color: var(--salbei-tief); animation: einfedern .7s var(--feder) both; }
.alles-ic .ic { width: 28px; height: 28px; }

/* Korb-Motiv */
.korb-motiv { position: relative; width: 190px; height: 158px; margin: 0 auto 4px; }
.korb-motiv.gross { width: 260px; height: 216px; }
.korb-welle { position: absolute; inset: 0; width: 100%; height: 100%; }
.korb-koerper { position: absolute; left: 50%; bottom: 8%; width: 66%; transform: translateX(-50%); filter: drop-shadow(0 10px 14px rgba(60, 90, 66, .22)); }
.obst { position: absolute; font-size: 30px; line-height: 1; animation: schweben 4.5s ease-in-out infinite; }
.gross .obst { font-size: 40px; }
.obst.o1 { left: 26%; top: 22%; transform: rotate(-24deg); animation-delay: -.4s; }
.obst.o2 { left: 41%; top: 13%; animation-delay: -1.6s; }
.obst.o3 { left: 56%; top: 21%; animation-delay: -2.8s; }
.obst.o4 { left: 66%; top: 28%; transform: rotate(18deg); animation-delay: -3.5s; }
@keyframes schweben { 50% { translate: 0 -6px; } }

/* ---------- Untere Navigation ---------- */
.unten { height: calc(120px + env(safe-area-inset-bottom)); }
.navleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 0 12px calc(10px + env(safe-area-inset-bottom)); pointer-events: none;
}
.nav-innen {
  pointer-events: auto; max-width: 520px; margin: 0 auto; height: 68px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: color-mix(in srgb, var(--karte) 90%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-radius: 26px; box-shadow: 0 -1px 0 rgba(255, 255, 255, .4) inset, 0 14px 36px -12px rgba(35, 48, 42, .28), var(--schatten-s);
  border: 1px solid color-mix(in srgb, var(--linie) 70%, transparent);
}
.nav-knopf {
  border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 60px; justify-content: center;
  font-size: 12.5px; font-weight: 500; color: var(--leise); border-radius: 18px; position: relative;
}
.nav-knopf.aktiv { color: var(--salbei-tief); font-weight: 600; }
.nav-knopf .ic { width: 40px; height: 28px; padding: 3px 9px; border-radius: var(--pill); transition: background .25s; }
.nav-knopf.aktiv .ic { background: var(--salbei-hell); animation: puls .45s var(--feder) both; }
.nav-mitte { display: grid; place-items: center; }
.nav-plus {
  width: 62px; height: 62px; margin-top: -30px; border-radius: 50%; border: 5px solid var(--bg); display: grid; place-items: center;
  background: linear-gradient(160deg, var(--salbei) -30%, var(--knopf) 80%); color: var(--knopf-text);
  box-shadow: var(--schatten-knopf);
}
.nav-plus .ic { width: 26px; height: 26px; stroke-width: 2; }
.nav-plus:active { transform: scale(.92); }

/* ---------- Blätter ---------- */
.decke { position: fixed; inset: 0; background: var(--decke); z-index: 50; animation: ein calc(.25s * var(--dauer)) ease both; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.decke.zu { animation: aus .26s ease both; }
@keyframes ein { from { opacity: 0; } }
@keyframes aus { to { opacity: 0; } }
.blatt {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; background: var(--karte);
  border-radius: 30px 30px 0 0; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 20px calc(26px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto;
  box-shadow: 0 -12px 40px -10px rgba(35, 48, 42, .3);
  animation: hochfedern calc(.5s * var(--dauer)) var(--feder) both;
}
.blatt.zu { animation: runter .26s var(--sanft) both; }
@keyframes hochfedern { from { transform: translateY(100%); } }
@keyframes runter { to { transform: translateY(100%); } }
.blatt .griff { width: 40px; height: 5px; border-radius: 3px; background: var(--linie); margin: 0 auto 14px; }
.blatt-zu { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--salbei-zart); color: var(--leise); display: grid; place-items: center; }
.blatt-zu .ic { width: 18px; height: 18px; }
.blatt h3 { margin: 0 0 14px; font: 600 23px/1.2 var(--schrift-titel); letter-spacing: -.005em; padding-right: 40px; }
.blatt-titel { display: flex; align-items: center; gap: 12px; }
.titel-ic { width: 40px; height: 40px; border-radius: 14px; background: var(--salbei-hell); color: var(--salbei-tief); display: grid; place-items: center; flex: none; }
.blatt-produkt { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding-right: 40px; }
.blatt-produkt h3 { margin: 0; padding: 0; }
.ueber { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }

.feld { display: block; margin-bottom: 14px; }
.feld > span { display: block; font-size: 14px; color: var(--leise); margin-bottom: 6px; font-weight: 600; }
.feld input, .feld select, .feld textarea {
  width: 100%; border: 1.5px solid var(--linie); background: var(--bg); border-radius: 16px; padding: 13px 14px; font-size: 16px; outline: 0;
  transition: border-color .2s, box-shadow .2s;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--salbei); box-shadow: 0 0 0 4px color-mix(in srgb, var(--salbei) 20%, transparent); }
.feld-reihe { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.such-feld { position: relative; }
.such-feld .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--leise); width: 20px; height: 20px; }
.such-feld input { padding-left: 44px; border-radius: var(--pill); }
.fuer-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.knopfreihe { display: flex; gap: 10px; margin-top: 8px; }
.knopf {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px; border-radius: var(--pill); border: 0; background: var(--knopf); color: var(--knopf-text);
  font-weight: 600; font-size: 16px; text-align: center; text-decoration: none; box-shadow: var(--schatten-knopf); min-height: 50px;
}
.knopf .ic { width: 19px; height: 19px; }
.knopf:hover { background: var(--knopf-tief); }
.knopf.gross { width: 100%; font-size: 17px; min-height: 56px; }
.knopf:disabled { opacity: .6; cursor: progress; }
.knopf.zweit { background: var(--bg); color: var(--text); border: 1.5px solid var(--linie); box-shadow: none; }
.knopf.zweit:hover { background: var(--salbei-zart); }
.knopf.gefahr { background: transparent; color: var(--gefahr); border: 1.5px solid var(--linie); box-shadow: none; }
.menue-gruppe { background: var(--bg); border-radius: var(--rund); padding: 4px 6px; margin-bottom: 12px; }
.menue-punkt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0; background: none; min-height: 56px;
  padding: 8px 8px; border-bottom: 1px solid var(--linie); font-size: 16px; text-decoration: none; color: var(--text); border-radius: 0;
}
.menue-punkt:last-child { border-bottom: 0; }
button.menue-punkt:active { transform: scale(.98); }
.menue-punkt .emo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--karte); color: var(--salbei-tief); flex: none; box-shadow: var(--schatten-s); }
.menue-punkt .emo .ic { width: 20px; height: 20px; }
.menue-punkt .emo.emoji { font-size: 20px; }
.menue-text { flex: 1; min-width: 0; }
.menue-punkt .pfeil { width: 16px; height: 16px; transform: rotate(180deg); color: var(--leise); opacity: .7; }
.menue-punkt.gefahr { color: var(--gefahr); }
.menue-punkt.gefahr .emo { color: var(--gefahr); }
.hinweis { font-size: 14.5px; color: var(--leise); margin: 4px 0 14px; line-height: 1.5; }
.hinweis.mit-ic { display: flex; gap: 8px; align-items: flex-start; }
.hinweis.mit-ic .ic { width: 17px; height: 17px; margin-top: 2px; }
.angebote { margin: 4px 0 6px; }
.angebote-titel { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--leise); margin-bottom: 8px; }
.angebote-titel .ic { width: 17px; height: 17px; color: var(--salbei-tief); }
.angebot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.mitglieder { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.mitglied { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border-radius: var(--pill); padding: 4px 12px 4px 4px; font-size: 14.5px; font-weight: 500; }
.mitglied .kopf-punkt { margin: 0; width: 28px; height: 28px; border: 0; font-size: 14px; }
.schritte { font-size: 15px; line-height: 1.8; padding-left: 22px; margin: 0 0 18px; }
.emoji-wahl { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.emoji-knopf { aspect-ratio: 1; border: 1.5px solid transparent; background: var(--bg); border-radius: 14px; font-size: 22px; display: grid; place-items: center; padding: 0; min-height: 40px; }
.emoji-knopf.aktiv { border-color: var(--salbei); background: var(--salbei-hell); transform: scale(1.06); }

/* Gerichte */
.gerichte { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gericht {
  border: 0; background: var(--bg); border-radius: var(--rund); padding: 16px 10px 14px; text-align: center; font-size: 14.5px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; animation: hochblenden calc(.4s * var(--dauer)) var(--sanft) both; animation-delay: calc(var(--i, 0) * 25ms);
}
.gericht:hover { background: var(--salbei-zart); }
.gericht-bild { width: 60px; height: 60px; border-radius: 50%; background: var(--kachel); display: grid; place-items: center; font-size: 32px; box-shadow: var(--schatten-s); }
.gericht-name { font-weight: 600; line-height: 1.25; }
.gericht-info { font-size: 14px; color: var(--leise); }
.zutaten { background: var(--bg); border-radius: var(--rund); padding: 4px 10px; }
.zutat { display: flex; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--linie); min-height: 56px; cursor: pointer; }
.zutat:last-child { border-bottom: 0; }
.zutat input { width: 22px; height: 22px; accent-color: var(--salbei-tief); flex: none; margin: 0; }
.zutat-name { flex: 1; min-width: 0; }
.zutat .m { color: var(--leise); font-size: 14px; text-align: right; }

/* ---------- Start ---------- */
.start { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(28px + env(safe-area-inset-top)); padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.start-held { text-align: center; animation: hochblenden .7s var(--sanft) both; }
.start h1 { font: 600 46px/1 var(--schrift-titel); margin: 4px 0 8px; letter-spacing: -.02em; }
.start .unter { color: var(--leise); margin: 0 auto 26px; font-size: 17px; max-width: 320px; }
.vorteile { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vorteile li {
  background: var(--karte); border-radius: var(--rund); padding: 14px; box-shadow: var(--schatten);
  display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--leise); line-height: 1.4;
  animation: hochblenden .6s var(--sanft) both;
}
.vorteile li:nth-child(2) { animation-delay: .06s; } .vorteile li:nth-child(3) { animation-delay: .12s; } .vorteile li:nth-child(4) { animation-delay: .18s; }
.vorteile b { display: block; color: var(--text); font-size: 15px; margin-bottom: 2px; }
.vorteil-ic { width: 38px; height: 38px; border-radius: 13px; background: var(--salbei-hell); color: var(--salbei-tief); display: grid; place-items: center; }
.vorteil-ic .ic { width: 20px; height: 20px; }
.start-karte { background: var(--karte); border-radius: var(--rund-l); padding: 20px 18px 18px; box-shadow: var(--schatten-hoch); animation: hochblenden .7s .2s var(--sanft) both; }

/* ---------- Toast & Konfetti ---------- */
#toast {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px) scale(.96);
  background: #26352c; color: #f5f3ec; padding: 12px 20px; border-radius: var(--pill); font-size: 15px; opacity: 0;
  transition: opacity .25s, transform .4s var(--feder); z-index: 60; pointer-events: none; max-width: 92vw; text-align: center;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .4);
}
#toast.zeigen { opacity: 1; transform: translate(-50%, 0) scale(1); }
.konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.konfetti i {
  position: absolute; width: 8px; height: 13px; border-radius: 2px; background: var(--f);
  animation: konfetti calc(1.3s * var(--dauer)) cubic-bezier(.15, .7, .3, 1) var(--v) both;
}
.konfetti i.rund { width: 9px; height: 9px; border-radius: 50%; }
.konfetti i.stern { width: 14px; height: 14px; background: none; }
.konfetti i.stern::before { content: "✦"; position: absolute; inset: 0; color: var(--f); font-size: 14.5px; line-height: 14px; }
@keyframes konfetti {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 1; }
  15% { transform: translate(-50%, -50%) scale(var(--s)) rotate(0); }
  55% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(var(--s)) rotate(calc(var(--r) * .6)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x) * 1.15), calc(-50% + var(--y) + 150px)) scale(var(--s)) rotate(var(--r)); opacity: 0; }
}

@media (min-width: 700px) {
  .kopf h1 { font-size: 28px; }
  .eintrag:hover { box-shadow: var(--schatten-hoch), 0 0 0 1px color-mix(in srgb, var(--salbei) 30%, transparent); }
}

/* Einladen: Teilen-Wege */
.teilen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 6px 0 18px; }
.teilen-knopf {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px;
  border-radius: var(--rund); border: 1px solid var(--linie); background: var(--kachel); color: var(--text);
  font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: var(--schatten-s); transition: transform .12s;
}
.teilen-knopf:active { transform: scale(.96); }
.teilen-knopf .ic { width: 24px; height: 24px; color: var(--salbei-tief); }
.teilen-knopf.wa { background: var(--knopf); color: var(--knopf-text); border-color: transparent; }
.teilen-knopf.wa .ic { color: var(--knopf-text); }
.mail-einladung { margin-bottom: 14px; padding: 14px; border-radius: var(--rund); background: var(--salbei-zart); }
.mail-einladung .knopf { width: 100%; }

/* ================= SYNTRA-Look (Konzept GPT-6 Astra) ================= */
body { background: linear-gradient(180deg, var(--held-a) 0, var(--bg) 340px) no-repeat, var(--bg); }
.kopf { background: color-mix(in srgb, var(--held-a) 78%, transparent); }
.kopf h1 { font: 800 27px/1.15 var(--schrift-titel); letter-spacing: -.025em; }
.gruss { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 1px; }
.live { font-size: 12.5px; }

/* Einkaufen-Leiste: Fortschritt + „Ich gehe einkaufen“ */
.einkauf-start { display: flex; align-items: center; gap: 12px; padding: 2px 0 12px; }
.fortschritt-text { flex: 1; min-width: 0; display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--leise); }
.fortschritt { display: block; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--salbei) 18%, transparent); overflow: hidden; }
.fortschritt i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--salbei), var(--akzent)); transition: width calc(.5s * var(--dauer)) var(--sanft); }
.einkauf-los {
  flex: none; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 99px; min-height: 44px;
  padding: 0 16px; background: var(--knopf); color: var(--knopf-text); font-weight: 700; font-size: 14.5px; box-shadow: var(--schatten-knopf);
}
.einkauf-los .ic { width: 19px; height: 19px; }
.einkauf-banner {
  display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; padding: 12px 12px 12px 16px; border-radius: 20px;
  background: linear-gradient(120deg, var(--salbei-hell), var(--creme)); border: 1px solid color-mix(in srgb, var(--salbei) 30%, transparent);
  animation: einblenden calc(.4s * var(--dauer)) var(--sanft) both;
}
.einkauf-banner.ich { background: linear-gradient(120deg, var(--knopf), var(--salbei-mittel)); color: var(--knopf-text); border-color: transparent; }
.einkauf-puls { width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); flex: none; box-shadow: 0 0 0 0 var(--akzent); animation: einkauf-puls 1.8s ease-out infinite; }
@keyframes einkauf-puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--akzent) 80%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.einkauf-text { flex: 1; min-width: 0; display: grid; gap: 4px; font-size: 14px; }
.einkauf-text b { font-size: 15px; }
.einkauf-banner .fortschritt { margin-top: 2px; }
.einkauf-banner.ich .fortschritt { background: rgba(255, 255, 255, .25); }
.einkauf-ende { border: 0; border-radius: 99px; padding: 9px 14px; font-weight: 700; font-size: 14px; background: var(--akzent); color: var(--auf-akzent); }

/* Kategorien als ruhige Karten mit Trennlinien statt einzelner Pillen */
.gruppe { margin: 4px 0 22px; }
.gruppe .zeilen, .wagen-liste { gap: 0; background: var(--karte); border-radius: 22px; border: 1px solid var(--linie); box-shadow: 0 8px 24px rgba(23, 43, 36, .05); overflow: hidden; }
.gruppe .eintrag, .wagen-liste .eintrag { border-radius: 0; box-shadow: none; background: transparent; min-height: 80px; padding: 12px 8px 12px 12px; }
.gruppe .eintrag + .eintrag, .wagen-liste .eintrag + .eintrag { border-top: 1px solid var(--linie); }
.gruppe-kopf, .wagen-kopf h2 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.kat-emo { width: 32px; height: 32px; border-radius: 11px; font-size: 17px; }
.bild { width: 58px; height: 58px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linie); }
.bild img { padding: 4px; }
.eintrag .name { font-size: 17px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.erledigt .name { font-weight: 500; }

/* Farbtupfer je Kategoriegruppe */
[data-kg="frisch"] .kat-emo { background: #e5f2dc; } [data-kg="fleisch"] .kat-emo { background: #fae7e1; }
[data-kg="milch"] .kat-emo { background: #e5effa; } [data-kg="back"] .kat-emo { background: #f7eccd; }
[data-kg="getraenk"] .kat-emo { background: #e0f1ee; } [data-kg="pflege"] .kat-emo { background: #f1e7f5; }
[data-kg="haushalt"] .kat-emo { background: #e9edef; } [data-kg="tk"] .kat-emo { background: #e1f2f8; }
[data-kg="vorrat"] .kat-emo { background: #f6efe4; }
@media (prefers-color-scheme: dark) {
  [data-kg] .kat-emo { background: var(--salbei-hell) !important; }
}

/* Neue Kennzeichen in der Zeile */
.neu-label { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; padding: 2px 7px; border-radius: 6px; background: var(--akzent); color: var(--auf-akzent); animation: einfedern calc(.5s * var(--dauer)) var(--feder) both; }
.sorte { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--text); margin-top: 3px; }
.sorte .ic { width: 14px; height: 14px; }
.nicht-da { font-size: 14px; font-weight: 700; color: #805300; background: #fff1d6; border-radius: 99px; padding: 2px 9px; }
@media (prefers-color-scheme: dark) { .nicht-da { color: #f3ce7d; background: #3a301e; } }

/* Mikrofon */
.mikro { width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: var(--text); display: grid; place-items: center; flex: none; }
.mikro.an { background: #fde8ea; color: #ad3042; animation: puls 1s ease-in-out infinite; }

/* Toast mit Rückgängig */
#toast.mit-knopf { display: flex; align-items: center; gap: 14px; pointer-events: auto; padding-right: 8px; }
.toast-knopf { border: 0; border-radius: 99px; padding: 7px 13px; background: var(--akzent); color: var(--auf-akzent); font-weight: 800; font-size: 14.5px; }

/* Mengenwähler */
.mengen-wahl { display: grid; gap: 10px; margin-bottom: 8px; }
.stepper { display: inline-flex; align-items: center; justify-self: start; background: var(--salbei-zart); border-radius: 99px; padding: 4px; }
.stepper button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--karte); color: var(--salbei-tief); font-size: 22px; font-weight: 700; box-shadow: var(--schatten-s); }
.menge-zahl { min-width: 64px; text-align: center; font-size: 20px; font-weight: 800; }
.einheiten { display: flex; flex-wrap: wrap; gap: 6px; }
.einheit { border: 1px solid var(--linie); background: var(--karte); border-radius: 99px; padding: 7px 12px; font-size: 14.5px; font-weight: 600; }
.einheit.aktiv { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-text); }
.mit-ic { display: inline-flex !important; align-items: center; gap: 6px; }
.mit-ic .ic { width: 15px; height: 15px; }

/* Papierkorb */
.papierkorb-zeile { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 6px; border-bottom: 1px solid var(--linie); }
.papierkorb-zeile .nm { flex: 1; }
.papierkorb-zeile .kl { display: block; font-size: 14px; color: var(--leise); }

/* Gerichte-Rubriken */
.rubriken { display: grid; gap: 8px; margin: 2px -20px 14px; }
.rubrik-reihe { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 20px; }
.rubrik-reihe::-webkit-scrollbar { display: none; }
.rubriken .filter-chip.aktiv { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-text); }
/* Kopf scrollt mit weg – die Liste bekommt den Platz; die Navigation unten bleibt */
.kopf { position: relative; backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; }

/* SYNTRA-Marke */
.kopf-logo { width: 44px; height: 44px; border-radius: 13px; flex: none; box-shadow: 0 6px 16px -6px rgba(20, 99, 71, .5); }
.start-logo { display: block; width: min(250px, 66vw); height: auto; margin: 0 auto 6px; filter: drop-shadow(0 18px 30px rgba(20, 99, 71, .22)); animation: einfedern calc(.9s * var(--dauer)) var(--feder) both; }
.start-titel { font: 800 27px/1.2 var(--schrift-titel) !important; letter-spacing: -.025em; text-align: center; margin: 4px 0 6px; }
.start .unter { max-width: 34ch; margin-left: auto; margin-right: auto; }

/* ================= Wow-Effekte ================= */
/* Aurora: zwei weiche Farbwolken bewegen sich langsam hinter dem Kopf */
body::before, body::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .55;
}
body::before { width: 340px; height: 340px; top: -120px; left: -90px; background: radial-gradient(circle, #bfe8cf 0, transparent 70%); animation: aurora-a 18s ease-in-out infinite alternate; }
body::after { width: 300px; height: 300px; top: -60px; right: -110px; background: radial-gradient(circle, #e6f5a8 0, transparent 70%); animation: aurora-b 22s ease-in-out infinite alternate; }
@keyframes aurora-a { to { transform: translate(90px, 60px) scale(1.15); } }
@keyframes aurora-b { to { transform: translate(-70px, 90px) scale(.9); } }
@media (prefers-color-scheme: dark) { body::before { background: radial-gradient(circle, #1f5a3f 0, transparent 70%); } body::after { background: radial-gradient(circle, #3d4a1c 0, transparent 70%); } }

/* Glas-Navigation */
.navleiste .nav-innen { background: color-mix(in srgb, var(--karte) 72%, transparent) !important; backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border: 1px solid color-mix(in srgb, var(--linie) 70%, transparent); }

/* Kategorie-Überschriften bleiben beim Scrollen oben stehen */
.gruppe-kopf { position: sticky; top: 0; z-index: 5; padding: 10px 2px 8px; margin: 0 -2px 4px; background: linear-gradient(var(--bg) 70%, transparent); }

/* Produktfoto „schwebt“ auf einem weißen Teller */
.bild { background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 14px -6px rgba(23, 43, 36, .28), inset 0 0 0 1px var(--linie); transition: transform .25s var(--feder); }
.eintrag:active .bild { transform: scale(.94) rotate(-2deg); }
.bild img { transition: transform .35s var(--feder); }
.eintrag:hover .bild img { transform: scale(1.08); }

/* Fliegendes Foto */
.flug { position: fixed !important; z-index: 90; margin: 0; pointer-events: none; box-shadow: 0 18px 30px -8px rgba(20, 99, 71, .45) !important; }

/* Fortschrittsbalken schimmert */
.fortschritt i { position: relative; overflow: hidden; }
.fortschritt i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.65) 50%, transparent 80%); transform: translateX(-100%); animation: schimmer 2.6s ease-in-out infinite; }
@keyframes schimmer { 60%, 100% { transform: translateX(100%); } }

/* Kaskade beim Öffnen */
.kaskade .gruppe, .kaskade .wagen-kopf, .kaskade .zeilen.wagen-liste { animation: kaskade calc(.7s * var(--dauer)) var(--feder) both; animation-delay: calc(var(--k, 0) * 70ms + 80ms); }
@keyframes kaskade { from { opacity: 0; transform: translateY(26px) scale(.97); } }
.kaskade .gruppe-kopf { animation: none; }

/* Einkaufen-Knopf mit Glanz */
.einkauf-los { position: relative; overflow: hidden; }
.einkauf-los::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); animation: schimmer 3.4s ease-in-out infinite 1s; }

/* Plus-Taste pulsiert sanft, solange die Liste leer ist */
.leer ~ * .nav-plus, body:has(.leer) .nav-plus { animation: puls 2.2s ease-in-out infinite; }

/* Gerichte mit echten Food-Fotos */
.gericht { padding: 0 0 12px; overflow: hidden; }
.gericht-bild.foto { display: block; width: 100%; aspect-ratio: 1; height: auto; border-radius: 0; margin: 0 0 10px; background: none; box-shadow: none; overflow: hidden; }
.gericht-bild.foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--sanft); }
.gericht:hover .gericht-bild.foto img, .gericht:active .gericht-bild.foto img { transform: scale(1.06); }
.gericht .gericht-name, .gericht .gericht-info { padding: 0 10px; }
.gericht-held { display: block; width: 92px; height: 92px; border-radius: 22px; overflow: hidden; flex: none; box-shadow: 0 10px 24px -10px rgba(23,43,36,.45); }
.gericht-held img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vektor-Logo + Wortmarke */
.start-logo { width: 132px !important; height: 132px; border-radius: 30px; filter: drop-shadow(0 22px 34px rgba(20, 99, 71, .35)); }
.wortmarke { display: grid; justify-items: center; gap: 2px; margin: 14px 0 18px; }
.wm-name { font: 800 34px/1 var(--schrift-titel); letter-spacing: .14em; color: var(--salbei-tief); padding-left: .14em; }
.wm-claim { font: 700 12px/1 var(--schrift); letter-spacing: .32em; text-transform: uppercase; color: var(--text); padding-left: .32em; }
.kopf-logo { border-radius: 12px; }

/* Gerichte: Zeit + Schwierigkeit */
.gericht-info { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.g-zeit { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--text); }
.g-zeit .ic, .g-fakten .ic { width: 14px; height: 14px; color: var(--text); }
.g-stufe { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: 14px; }
.g-stufe i { width: 6px; height: 6px; border-radius: 50%; background: var(--linie); }
.g-stufe i:nth-of-type(3) { margin-right: 4px; }
.g-stufe.s1 { color: #1f7a55; } .g-stufe.s1 i:nth-of-type(1) { background: #3fa36f; }
.g-stufe.s2 { color: #8a5a00; } .g-stufe.s2 i:nth-of-type(-n+2) { background: #e3a21a; }
.g-stufe.s3 { color: #ad3042; } .g-stufe.s3 i { background: #d9485f; }
.g-fakten { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; font-size: 14.5px; font-weight: 600; }
.g-fakten > span { display: inline-flex; align-items: center; gap: 5px; }
.kat-emo.foto { width: 38px; height: 38px; border-radius: 12px; background: #fff !important; overflow: hidden; box-shadow: 0 4px 10px -4px rgba(23,43,36,.3), inset 0 0 0 1px var(--linie); }
.kat-emo.foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }

/* Neue Liste / Listen verwalten */
.vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.vorlage { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--linie); background: var(--kachel); font-weight: 600; font-size: 14.5px; text-align: left; }
.vorlage .emo { font-size: 20px; }
.emoji-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-knopf { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--linie); background: var(--kachel); font-size: 20px; }
.emoji-knopf.aktiv { border-color: var(--knopf); box-shadow: 0 0 0 3px color-mix(in srgb, var(--knopf) 25%, transparent); }
.listen-info { display: block; font-size: 14px; color: var(--leise); font-weight: 500; }

/* Live-Status */
.kopf-punkt { position: relative; }
.kopf-punkt[data-status]::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bg); background: #b8c2bb; }
.kopf-punkt[data-status="online"]::after { background: #2fbf63; }
.kopf-punkt[data-status="tippt"]::after { background: #d4e830; animation: puls 1s ease-in-out infinite; }
.live-zeile { display: flex; align-items: center; gap: 8px; min-height: 0; font-size: 14px; font-weight: 600; color: var(--leise); margin: -2px 0 10px; }
.live-zeile:empty { display: none; }
.live-zeile.online { color: var(--text); }
.live-zeile.tippt { color: var(--text); }
.live-punkt { width: 8px; height: 8px; border-radius: 50%; background: #b8c2bb; flex: none; }
.live-zeile.online .live-punkt { background: #2fbf63; box-shadow: 0 0 0 3px #2fbf6333; }
.live-zeile.tippt .live-punkt { background: #9bc21a; }
.tipp-punkte { display: inline-flex; gap: 3px; }
.tipp-punkte i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .4; animation: tipp 1.2s infinite; }
.tipp-punkte i:nth-child(2) { animation-delay: .2s; } .tipp-punkte i:nth-child(3) { animation-delay: .4s; }
@keyframes tipp { 30% { opacity: 1; transform: translateY(-2px); } }
.mitglieder-status { display: grid; gap: 4px; margin: 14px 0; }
.mitglied-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.mz-name { display: grid; font-weight: 700; }
.mz-status { font-size: 14px; font-weight: 600; color: var(--leise); }
.mz-status.online { color: #1f9d55; } .mz-status.tippt { color: #6e8a00; }

/* ================= SYNTRA-Markenlook im Stil von Logo D (Konzept GPT-6 Astra) ================= */
:root {
  --bg: #f5f8f2; --karte: #ffffff; --text: #10251b; --leise: #526558; --linie: #dce6d8;
  --knopf: #11743c; --knopf-tief: #0a5029; --knopf-text: #ffffff;
  --salbei: #1a9a4a; --salbei-mittel: #1a9a4a; --salbei-tief: #11743c; --salbei-hell: #e6f4bd; --salbei-zart: #edf4e9;
  --akzent: #d4e830; --auf-akzent: #082012;
  --marke: linear-gradient(135deg, #1a9a4a 0%, #6cc23a 55%, #d4e830 100%);
  --aktion: linear-gradient(180deg, #158a47, #0a5029);
  --glanz: inset 0 1px 0 rgba(255,255,255,.35);
  --schatten-knopf: 0 6px 14px rgba(17,116,60,.28), var(--glanz);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0c1711; --karte: #14251b; --text: #eef7ee; --leise: #b3c5b7; --linie: #304b38;
    --knopf: #62d87c; --knopf-tief: #4fc66a; --knopf-text: #082012; --salbei-hell: #294326; --salbei-zart: #1c3023;
    --aktion: linear-gradient(180deg, #6fe08a, #4fc66a); }
}
body { background: var(--bg); }
body::before { background: radial-gradient(circle, #c9ef9a 0, transparent 70%); }
body::after { background: radial-gradient(circle, #f1f7b0 0, transparent 70%); }

/* Kopf als Marken-Hero */
.kopf-zeile {
  position: relative; overflow: hidden; margin-top: 10px; padding: 18px 16px 18px 16px; border-radius: 24px;
  background: var(--marke); color: #082012; box-shadow: 0 14px 30px -14px rgba(26,154,74,.55), var(--glanz);
}
.kopf-zeile::after {
  content: "S"; position: absolute; right: -14px; top: -38px; font: 900 170px/1 var(--schrift-titel);
  color: #ffffff; opacity: .16; pointer-events: none; transform: rotate(-8deg);
}
.kopf-zeile h1 { color: #082012; }
.kopf-zeile .gruss { color: #0a3d1f; opacity: .85; }
.kopf-zeile .live { color: #0a3d1f; }
.kopf-zeile .kopf-logo { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 6px 14px -4px rgba(0,0,0,.3); }
.kopf-zeile .kopf-punkt { border-color: rgba(255,255,255,.85); }
.kopf-zeile .kopf-punkt[data-status]::after { border-color: #9ad04a; }
.reiter { padding-top: 12px; }

/* Listen-Reiter: ausgewählt hell mit Unterstrich statt dunkler Pille */
.reiter button.aktiv { background: var(--salbei-hell); color: #183b20; box-shadow: inset 0 -3px 0 var(--knopf); }
.reiter .aktiv .zahl { background: var(--knopf); color: #fff; }

/* Einkaufsmodus: helle Statusleiste */
.einkauf-banner, .einkauf-banner.ich { background: var(--salbei-hell); color: #183b20; border: 1px solid #cfe59a; }
.einkauf-banner.ich .fortschritt, .einkauf-banner .fortschritt { background: rgba(17,116,60,.14); }
.einkauf-ende { background: var(--aktion); color: #fff; box-shadow: var(--schatten-knopf); }
.einkauf-puls { background: var(--knopf); }

/* Hauptknöpfe mit Glanzkante */
.knopf, .plus, .nav-plus, .einkauf-los, .fertig-knopf { background: var(--aktion) !important; color: var(--knopf-text) !important; box-shadow: var(--schatten-knopf) !important; }
.nav-plus { width: 60px !important; height: 60px !important; }
.knopf.zweit { background: var(--karte) !important; color: var(--text) !important; box-shadow: none !important; border: 1px solid var(--linie); }
.knopf.gefahr { background: transparent !important; color: var(--gefahr) !important; box-shadow: none !important; border: 1px solid var(--linie); }

/* Fortschritt im Markenverlauf */
.fortschritt { height: 8px; }
.fortschritt i { background: var(--marke) !important; }

/* Abhaken: Füllung im Markengrün */
.erledigt .haken::before, .abhakend .haken::before { background: var(--knopf) !important; border-color: var(--knopf) !important; }
.haken::before { border-color: #718476; }

/* Filter-Chips und Rubriken aktiv */
.filter-chip.aktiv { background: var(--salbei-hell); border-color: #b9d96a; color: #183b20; }
.rubriken .filter-chip.aktiv { background: var(--knopf); color: #fff; border-color: var(--knopf); }

/* Startseite: Markenfläche hinter dem Logo */
.start-held { position: relative; padding: 26px 16px 10px; border-radius: 28px; background: linear-gradient(160deg, #e9f8d6, #f7fbe4); }
.vorschlag .marke { color: var(--salbei-tief); font-weight: 700; }
.marken-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }

/* Installations-Hinweis */
.install-hinweis { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 8px 10px 10px; border-radius: 18px; background: var(--karte); border: 1px solid var(--linie); box-shadow: 0 8px 20px -12px rgba(17,116,60,.4); }
.install-hinweis img { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.ih-text { flex: 1; min-width: 0; display: grid; font-size: 14px; color: var(--leise); }
.ih-text b { font-size: 14.5px; color: var(--text); }
.ih-los { border: 0; border-radius: 99px; padding: 9px 14px; font-weight: 800; font-size: 14px; background: var(--aktion); color: #fff; box-shadow: var(--schatten-knopf); }
.ih-zu { border: 0; background: transparent; width: 32px; height: 32px; border-radius: 50%; color: var(--leise); display: grid; place-items: center; }
.ih-zu .ic { width: 16px; height: 16px; }

/* Eigene Produkte / eigenes Foto */
.foto-bereich { display: flex; gap: 8px; margin: -4px 0 14px; }
.foto-bereich .knopf { flex: 1; }
.eigen-label { font-size: 14px; color: var(--text); font-weight: 700; }

/* ================= Lesbarkeit ================= */
:root { --leise: #3b4d42; --linie: #cfdacb; }
@media (prefers-color-scheme: dark) { :root { --leise: #cfdcd2; --linie: #3d5a45; } }
body { font-size: 17px; line-height: 1.5; }
.eintrag .name { font-size: 18.5px; font-weight: 700; }
.eintrag .notiz { font-size: 15px; color: var(--leise); }
.menge, .etikett { font-size: 14px !important; }
.sorte { font-size: 14.5px !important; }
.gruppe-kopf, .wagen-kopf h2 { font-size: 18.5px; }
.kat-zahl, .reiter .zahl, .filter-chip .zahl { font-size: 13.5px !important; }
.reiter button, .filter-chip, .chip { font-size: 15.5px !important; }
.live-zeile { font-size: 15px !important; color: var(--leise); }
.hinweis, .ih-text, .mz-status, .listen-info { font-size: 14.5px !important; color: var(--leise); }
.feld span { font-size: 14.5px !important; color: var(--text); font-weight: 700; }
.gericht-name { font-size: 16px !important; font-weight: 700; }
.gericht-info, .g-zeit, .g-stufe { font-size: 14px !important; }
.nav-knopf span { font-size: 13.5px !important; font-weight: 700; }
.eingabe-feld input { font-size: 18px; }
.vorschlag .nm { font-size: 17px; } .vorschlag .kl { font-size: 14px !important; }
.kopf-zeile .gruss { font-size: 16px; font-weight: 700; color: #06280f; }
.kopf-zeile .live { font-size: 13px !important; color: #06280f; font-weight: 800; }
.kopf-zeile h1 { font-size: 28px; }
.einkauf-text { font-size: 15px !important; } .einkauf-text b { font-size: 17px !important; }
input::placeholder { color: #5b6e62; opacity: 1; }
.schrift-wahl { display: grid; gap: 10px; margin-top: 8px; }
.schrift-wahl button { display: flex; align-items: baseline; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--linie); background: var(--karte); font-weight: 700; text-align: left; }
.schrift-wahl button.aktiv { border-color: var(--knopf); box-shadow: 0 0 0 3px color-mix(in srgb, var(--knopf) 22%, transparent); }
.schrift-wahl .aa { font-weight: 800; color: var(--salbei-tief); }
.install-hinweis { gap: 10px; }
.ih-text b { font-size: 16px; }
.ih-text span { font-size: 14px !important; }
.ih-los { white-space: nowrap; font-size: 15px !important; }

/* ================= Schwarze Schrift ================= */
@media (prefers-color-scheme: light) {
  :root { --text: #0a0d0b; --leise: #27322b; --salbei-tief: #0a0d0b; }
}
.kopf-zeile h1, .kopf-zeile .gruss { color: #0a0d0b !important; opacity: 1 !important; }
.kopf-zeile .gruss { font-weight: 800; }
/* LIVE als weißes Schild – gut sichtbar auf dem grünen Kopf */
.kopf-zeile .live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 99px; background: rgba(255,255,255,.94); color: #0a0d0b !important; font-size: 13.5px !important; font-weight: 800; letter-spacing: .06em; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
.kopf-zeile .live .status { width: 10px; height: 10px; }
.live-zeile, .live-zeile.online, .live-zeile.tippt { color: var(--text) !important; font-weight: 700; }
.mz-status, .mz-status.online, .mz-status.tippt, .g-stufe, .g-stufe.s1, .g-stufe.s2, .g-stufe.s3 { color: var(--text) !important; }
.menge, .etikett, .sorte, .eigen-label, .vorschlag .marke, .kat-zahl, .filter-chip.aktiv, .reiter button.aktiv, .reiter .zahl { color: var(--text) !important; }
.einkauf-banner, .einkauf-banner b, .einkauf-text span { color: #0a0d0b !important; }
.schrift-wahl .aa { color: var(--text); }

/* Anmelden / Registrieren */
.start-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: var(--salbei-zart); border-radius: 16px; margin-bottom: 16px; }
.start-tabs button { border: 0; border-radius: 12px; padding: 13px 8px; font-weight: 800; font-size: 16px; background: transparent; color: var(--text); }
.start-tabs button.aktiv { background: var(--karte); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.pw-zeile { position: relative; }
.pw-zeile input { padding-right: 96px; }
.pw-zeige { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; font-weight: 800; font-size: 14.5px; padding: 10px; color: var(--text); }
.start-fehler { color: #8f1414; background: #fde6e6; border: 1px solid #f3b9b9; border-radius: 12px; padding: 11px 13px; font-weight: 700; font-size: 15px; margin: 0 0 14px; }

/* ================= Dunkelmodus: gut lesbar, keine grüne Schrift ================= */
@media (prefers-color-scheme: dark) {
  :root { --text: #f4f8f2; --leise: #d3dfd6; --salbei-tief: #f4f8f2; --linie: #3f5d47; }
  /* Knöpfe, die hell waren, bekommen dunkle Fläche + helle Schrift (vorher: weiß auf weiß) */
  .teilen-knopf:not(.wa), .vorlage, .emoji-knopf, .install-hinweis, .einheit, .stepper button, .start-tabs button.aktiv {
    background: var(--karte) !important; color: var(--text) !important; border-color: var(--linie);
  }
  .teilen-knopf:not(.wa) .ic, .vorlage .emo { color: var(--text) !important; }
  .teilen-knopf:not(.wa) { border: 1.5px solid var(--linie); }
  .einheit.aktiv, .filter-chip.aktiv, .reiter button.aktiv { background: var(--knopf) !important; color: #082012 !important; border-color: var(--knopf); }
  .rubriken .filter-chip.aktiv { color: #082012 !important; }
  .menge, .etikett, .kat-zahl, .reiter .zahl, .filter-chip .zahl { background: #2c4a33 !important; color: var(--text) !important; }
  .reiter .aktiv .zahl { background: rgba(8,32,18,.25) !important; color: #082012 !important; }
  .einkauf-banner, .einkauf-banner b, .einkauf-text span { color: #f4f8f2 !important; }
  .einkauf-banner { background: #1f3a29 !important; border-color: #3f5d47 !important; }
  .einkauf-ende, .ih-los { color: #082012 !important; }
  .mail-einladung { background: #1c3023; }
  input::placeholder { color: #a9bdae; opacity: 1; }
  .feld input, .feld select, .feld textarea { background: #0f1c15; color: var(--text); border-color: var(--linie); }
  .start-fehler { background: #4a1d1d; color: #ffd7d7; border-color: #7a3030; }
  .gruppe-kopf, .wagen-kopf h2, .eintrag .name, .gericht-name { color: var(--text); }
  .live-zeile, .live-zeile.online, .live-zeile.tippt, .mz-status, .g-stufe { color: var(--text) !important; }
}

/* Angebote */
.angebot-blatt .prospekt-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
.angebot-blatt .prospekt-raster .knopf{justify-content:center;text-align:center;text-decoration:none}
.angebot-blatt .trenner{border:0;border-top:1px solid var(--linie,rgba(128,128,128,.3));margin:18px 0 12px}
.angebot-blatt .zwischen{margin:0 0 10px;font-size:1.05em}
.angebot-blatt .zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.angebot-links .knopf{text-decoration:none}

/* Startkarte ist immer hell: Texte darin immer dunkel, auch im Dunkelmodus */
.start-held .start-titel{color:#0b2a1a !important}
.start-held .unter{color:#1f3b2c !important}
.start-held .wm-claim{color:#1f5a3a !important}

.install .schritte.gross{list-style:none;padding:0;margin:8px 0}
.install .schritte.gross li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;font-size:1.05em}
.install .schritt-nr{flex:none;width:30px;height:30px;border-radius:50%;background:#19a35a;color:#fff;font-weight:800;display:grid;place-items:center}
.install .hinweis.warn{background:#fff3cd;color:#3a2a00;padding:10px 12px;border-radius:12px}

.angebot-alt{color:#a33a1a !important;font-weight:700}

.laden-tag,.angebot-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-weight:700;font-size:.85em;margin-right:4px;background:rgba(25,163,90,.14);color:#0b5a30}
.angebot-tag{background:#fff0c2;color:#6a4a00}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .laden-tag{background:rgba(120,230,170,.2);color:#d6ffe6}:root:not([data-theme="light"]) .angebot-tag{background:rgba(255,210,90,.22);color:#ffe9a8}}
.chip.nachtrag{border:2px solid #19a35a;font-weight:700}

/* Einladen im Dunkelmodus: Schrift neutral weiß statt grünlich, auf grünen Knöpfen schwarz */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .blatt.einladen,
  :root:not([data-theme="light"]) .blatt.einladen h3,
  :root:not([data-theme="light"]) .blatt.einladen p,
  :root:not([data-theme="light"]) .blatt.einladen span,
  :root:not([data-theme="light"]) .blatt.einladen label,
  :root:not([data-theme="light"]) .blatt.einladen .hinweis,
  :root:not([data-theme="light"]) .blatt.einladen .teilen-knopf:not(.wa),
  :root:not([data-theme="light"]) .blatt.einladen .knopf.zweit{color:#fff !important}
  :root:not([data-theme="light"]) .blatt.einladen .teilen-knopf.wa,
  :root:not([data-theme="light"]) .blatt.einladen button.knopf:not(.zweit),
  :root:not([data-theme="light"]) .blatt.einladen button.knopf:not(.zweit) span{color:#000 !important}
  :root:not([data-theme="light"]) .blatt.einladen .teilen-knopf svg,
  :root:not([data-theme="light"]) .blatt.einladen .knopf.zweit svg{color:#fff;stroke:currentColor}
  :root:not([data-theme="light"]) .blatt.einladen .teilen-knopf.wa svg,
  :root:not([data-theme="light"]) .blatt.einladen button.knopf:not(.zweit) svg{color:#000}
}

/* Alle Fenster im Dunkelmodus: Texte weiß und kräftig, nie grünlich-blass */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .blatt h3,
  :root:not([data-theme="light"]) .blatt h4,
  :root:not([data-theme="light"]) .blatt .hinweis,
  :root:not([data-theme="light"]) .blatt .feld > span,
  :root:not([data-theme="light"]) .blatt .menue-text{color:#fff !important}
  :root:not([data-theme="light"]) .blatt .hinweis{font-weight:500}
}

/* Startseite: Name auf der hellen Karte dunkelgrün, Texte darunter weiß (Dunkelmodus) */
.start-held .wm-name{color:#0b5a30 !important}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .start .vorteile li,
  :root:not([data-theme="light"]) .start .vorteile li span,
  :root:not([data-theme="light"]) .start .vorteile li b,
  :root:not([data-theme="light"]) .start .hinweis,
  :root:not([data-theme="light"]) .start .feld > span{color:#fff !important}
  :root:not([data-theme="light"]) .start .vorteile li span{font-weight:500}
}

.reiter-schloss{margin-left:4px;font-size:.85em}

.portionen{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;padding:10px 12px;border-radius:16px;background:rgba(25,163,90,.1)}
.portionen-text{font-weight:700}
.portionen .stepper{display:flex;align-items:center;gap:6px}
.portionen .stepper button{width:40px;height:40px;border-radius:50%;border:0;font-size:22px;font-weight:800;background:#19a35a;color:#fff}
.portionen input{width:56px;height:40px;text-align:center;font-size:1.2em;font-weight:800;border-radius:12px;border:2px solid rgba(25,163,90,.5);background:transparent;color:inherit}