/* KaufRadar — Design-System v2 (shadcn/Beautiful-UI inspiriert)
   Prinzipien: neutrale Flächen, dezente Borders, 1 Akzentfarbe,
   klare Typo-Hierarchie, weiche Elevation, schnelle Micro-Interactions. */

:root, body.light {
  --bg: #f7f7f8;                     /* neutral statt grün */
  --surface: #ffffff;
  --surface-2: #f1f1f3;
  --border: #e4e4e7;               /* zinc-200 */
  --border-strong: #d4d4d8;
  --text: #18181b;                 /* zinc-900 */
  --text-2: #52525b;               /* zinc-600 */
  /* Vorher #a1a1aa: nur 2,4:1 auf Weiss — der schwaechste Wert der App.
     #71717a ergibt 4,6:1 und ist damit WCAG-AA-konform. */
  --text-3: #71717a;              /* zinc-500 */
  /* --accent ist der Hintergrund der Hauptbuttons mit WEISSER Schrift.
     #16a34a ergab nur 3,30:1 (AA gilt damit nur fuer grosse Schrift).
     #15803d ergibt 5,02:1. --accent-strong bleibt fuer Text-auf-Weiss. */
  --accent: #15803d;
  --accent-strong: #15803d;               /* ein kräftiger, frischer Grün-Akzent (Shopping) */
  /* Akzent als TEXTFARBE auf hellem Grund. */
  --accent-text: #15803d;
  --accent-btn: #15803d;      /* Buttonflaeche (weisse Schrift: 5,0:1) */
  --on-accent: #ffffff;
  --accent-hover: #15803d;
  --accent-soft: #f0fdf4;
  --accent-border: #bbf7d0;
  --radius: 14px;
  --radius-sm: 10px;
  --elev1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.08);
  --elev2: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04);
  /* --badge-deal ist die TEXTfarbe des Rabatt-Badges auf --accent-soft.
     #16a34a ergab dort nur 3,15:1; #15803d ergibt 4,79:1 (AA). */
  --badge-deal: #15803d;
  /* --badge ist reine TEXTfarbe (deal-indicator, saving-line, net-saving),
     teils auf Karten-Weiss, teils auf --accent-soft. #16a34a ergab dort nur
     3,15-3,30:1; #15803d erreicht 4,79-5,02:1. */
  --badge: #15803d;
}
body.dark {
  --bg: #18181b;
  --surface: #212124;
  --surface-2: #27272a;
  --border: #3f3f46;
  --border-strong: #52525b;
  --text: #fafafa;
  --text-2: #a1a1aa;
  /* Vorher #71717a: nur 3,1:1 auf --surface und an 18 Stellen benutzt
     (Platzhalter, Feldlabels, durchgestrichene Originalpreise) — der Nutzer
     meldete "Texte sehr schwer zu lesen". #a1a1aa ergibt 6,3:1. */
  --text-3: #a1a1aa;
  /* --accent ist im Dunkelmodus vor allem TEXT-/ICONfarbe auf dunklem Grund
     (aktiv-Navigation, Chips, Ortssymbol, Hilfe). #22c55e ergibt dort 7,8:1.
     Die Abdunklung auf #15803d hatte diese kleinen Labels auf ~3,2:1
     gedrueckt — also genau die Lesbarkeitsbeschwerde erzeugt. Fuer Buttons
     mit WEISSER Schrift gibt es darum ein eigenes Token unten. */
  --accent: #22c55e;
  /* Akzent als TEXTFARBE — auf dunklem Grund muss er hell sein.
     Link/aktive Navigation lagen vorher bei 3,5 bzw. 4,2:1. */
  --accent-text: #4ade80;
  /* Hintergrund GEFUELLTER Buttons, auf denen weisse Schrift liegt.
     Getrennt von --accent, weil dort zwei Anforderungen kollidieren:
     als Textfarbe muss es HELL sein, als Buttonflaeche DUNKEL. */
  --accent-btn: #15803d;
  --on-accent: #ffffff;
  --accent-strong: #4ade80;
  --accent-hover: #16a34a;
  --accent-soft: #14532d;
  --accent-border: #166534;
  --elev1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4);
  --elev2: 0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
  --badge-deal: #4ade80;
  --badge: #4ade80;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
#app { max-width: 560px; margin: 0 auto; padding-bottom: 96px; }

/* ---------- Typo ---------- */
h1,h2,h3,h4,h5,h6 { font-weight: 650; letter-spacing: -.01em; margin: 0; }
.sec-title { font-size: .92rem; font-weight: 700; color: var(--text); margin: 1.4rem .2rem .6rem; }
.sec-sub { font-size: .74rem; color: var(--text-3); font-weight: 500; }

/* ---------- Top-Bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  /* Der Balken lief ueber die volle Fensterbreite aus (gemessen 0..1440),
     waehrend der Inhalt auf 560 px zentriert ist. Auf dem Rechner sah das
     aus, als gehoere der Kopf nicht zur App. Darum dieselbe Breite und
     Zentrierung wie #app. */
  max-width: 560px; margin: 0 auto;
  border-bottom: 1px solid var(--border);
  /* Safe-Area: auf Android-Geraeten mit Display-Ausschnitt darf die Topbar
     nicht unter der StatusBar verschwinden (unten war env() bereits gesetzt). */
  padding: max(12px, env(safe-area-inset-top)) 18px;
}
/* Die Header-Bausteine waren im HTML benutzt, aber NIE im CSS definiert —
   dadurch stapelten Marke, Wochen-Chip und die drei Aktionsknoepfe
   unformatiert untereinander (vom Nutzer als "sieht sehr komisch aus"
   gemeldet). Hier vollstaendig definiert. */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  font-size: 1.5rem; color: var(--accent-strong); line-height: 1;
  flex: 0 0 auto; display: flex; align-items: center;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-text strong {
  font-size: 1.02rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.week-chip { font-size: .7rem; color: var(--text-2); font-weight: 500; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.icon-btn { background: none; border: none; color: var(--text-2); font-size: 1.2rem;
  width: 48px; height: 48px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:active { transform: scale(.94); }

/* ---------- Filial-Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 5px 11px; font-size: .74rem; font-weight: 600;
  transition: border-color .15s ease, background .15s ease; }
.chip:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.chip i { font-size: .95rem; color: var(--accent-text); }
.small-text { font-size: .72rem; }
.opacity { opacity: .65; }

/* ---------- Screens & Nav ---------- */
.page { display: none; padding: 14px 16px; animation: fadein .22s ease; }
.page.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } }
.bottomnav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 560px; z-index: 20;
  display: flex; justify-content: space-around;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; font-size: .66rem; color: var(--text-3);
  cursor: pointer; padding: 6px 4px; border-radius: var(--radius-sm);
  transition: color .15s ease;
}
.nav-btn span { font-size: 1.22rem; }
.nav-btn.active { color: var(--accent-text); font-weight: 700; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--elev1);
  padding: 16px; margin-bottom: 12px;
}

/* ---------- Dashboard ---------- */
/* Icons: <i> (JS-Templates) + span.material-symbols-outlined */
i, .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
  direction: ltr; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; user-select: none; }
#plzInput {
  border: none; border-bottom: 2px solid var(--border);
  background: none; font-size: 1.05rem; padding: 4px 0; outline: none;
  color: var(--text);
}
#plzInput:focus { border-color: var(--accent); }
.savings-card {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
}
.savings-label { display: block; font-size: .74rem; color: var(--text-2); }
.savings-value { display: block; font-size: 1.9rem; font-weight: 750; letter-spacing: -.02em; }
.savings-right { text-align: center; }
.savings-count { display: block; font-size: 1.4rem; font-weight: 700; }
.savings-count-label { font-size: .66rem; color: var(--text-2); }

.deal-carousel { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px;
  scroll-snap-type: x mandatory; scrollbar-width: none; }
.deal-card {
  min-width: 186px; max-width: 186px; cursor: pointer; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--elev1);
  padding: 13px; position: relative;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.deal-card:hover { transform: translateY(-2px); box-shadow: var(--elev2); }
.deal-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
/* Ohne eigene Farbe erbte der Haendlername vom <button>-Default und rendete
   SCHWARZ auf dunklem Grund (gemessen rgb(0,0,0) auf rgb(33,33,36) = 1,31:1,
   praktisch unsichtbar). Jetzt eine explizite, modusabhaengige Farbe. */
.deal-chain { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-2); }
.chain-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }
.deal-name { font-size: .84rem; font-weight: 600; margin: 0 0 9px; min-height: 2.4em;
  line-height: 1.25; color: var(--text); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal-prices { display: flex; align-items: baseline; gap: 7px; margin-top: auto; }
.deal-price { font-size: 1.3rem; font-weight: 750; color: var(--text); letter-spacing: -.01em; }
.deal-pct { font-size: .7rem; font-weight: 700; color: var(--badge-deal);
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  padding: 2px 6px; border-radius: 6px; }
.deal-also { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 7px; font-weight: 600; color: var(--text-2); }

/* ---------- Smart input / list ---------- */
.smart-input { display: flex; gap: 8px; padding: 8px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; box-shadow: var(--elev1); }
.smart-input input { flex: 1; border: none; outline: none; font-size: .95rem;
  padding: 9px 14px; background: transparent; color: var(--text); }
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  border-radius: 999px; min-width: 44px; min-height: 44px; font-size: 1.15rem;
  cursor: pointer; box-shadow: var(--elev1); transition: background .18s ease, transform .12s ease;
  display: flex; align-items: center; justify-content: center;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(.96); }
.cat-header { display: flex; align-items: center; gap: 8px; margin: 14px 6px 7px;
  font-size: .72rem; font-weight: 700; color: var(--text-2); text-transform: uppercase;
  letter-spacing: .07em; }
.list-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--elev1);
  padding: 11px 13px; margin-bottom: 8px;
  transition: border-color .15s ease;
}
.list-item .qty-chip { background: var(--surface-2); border-radius: 999px;
  padding: 4px 10px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.list-item .name { flex: 1; font-size: .93rem; font-weight: 500; }
.deal-indicator { font-size: .7rem; font-weight: 700; color: var(--badge);
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.del-btn { background: none; border: none; font-size: 1rem; cursor: pointer;
  color: var(--text-3); padding: 8px; border-radius: 8px; transition: color .15s ease;
  min-height: 48px; min-width: 48px; }
.del-btn:hover { color: #dc2626; background: #fef2f2; }
.btn-optimieren {
  width: 100%; margin-top: 8px; padding: 15px; border: none; border-radius: var(--radius);
  background: var(--accent-btn); color: var(--on-accent); font-size: .98rem; font-weight: 650; cursor: pointer;
  box-shadow: var(--elev1); transition: background .18s ease, transform .12s ease;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-optimieren:hover { background: var(--accent-hover); }
.btn-optimieren:active { transform: scale(.99); }

/* ---------- Results ---------- */
.segmented { display: flex; background: var(--surface-2); border-radius: 999px;
  padding: 4px; margin-bottom: 14px; border: 1px solid var(--border); }
.seg-btn { flex: 1; border: none; background: none; padding: 10px 6px; border-radius: 999px; min-height: 48px;
  font-size: .8rem; font-weight: 600; color: var(--text-2); cursor: pointer;
  transition: background .15s ease, color .15s ease; }
.seg-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--elev1); font-weight: 650; }
.result-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--elev1); padding: 15px; margin-bottom: 10px; }
.result-card.winner { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border), var(--elev2); }
.result-head { display: flex; justify-content: space-between; align-items: center; }
.chain-name { font-weight: 650; font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.chain-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.total-big { font-size: 1.45rem; font-weight: 750; letter-spacing: -.01em; }
/* Textfarbe auf --accent-soft: --accent-text ist dafuer definiert (dunkel
   auf hell, hell auf dunkel). Mit --accent-hover waren es nur 2,76:1. */
/* Die Stufen-Badges ("Aktion", "Regulaer", "Geschaetzt"...) bekommen ihren
   Hintergrund inline aus STAGE_META (app/engine.py). Die Klasse war nie
   definiert, daher fehlten Innenabstand und Schriftfarbe — im Dunkelmodus
   rendete das Label weiss auf hellgelb. */
.badge-pill {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: .66rem; font-weight: 700; line-height: 1.5;
  /* Immer dunkle Schrift: die Stufenfarben sind mittelhell (gruen/gelb/orange). */
  color: #18181b;
}
.badge-pill:empty { display: none; }
.win-badge { display: inline-block; background: var(--accent-soft); color: var(--accent-text);
  font-size: .64rem; font-weight: 800; letter-spacing: .07em;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 6px;
  border: 1px solid var(--accent-border); }
.saving-line { font-size: .78rem; color: var(--badge); font-weight: 600; margin-top: 2px; }
.price-bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden;
  margin: 10px 0 5px; background: var(--surface-2); }
/* Die Segmentfarben bilden STAGE_META aus app/engine.py eins zu eins ab.
   Ohne Inline-Style im Balken (siehe barSegments in app.js) ist DIES die
   einzige Farbquelle — Balken und Legende koennen nicht mehr auseinanderlaufen. */
.price-bar .seg-deal { background: #2e7d32; }
.price-bar .seg-reg { background: #616161; }
.price-bar .seg-community { background: #00838f; }
.price-bar .seg-est { background: #f9a825; }
.price-bar .seg-schaetz { background: #ef6c00; }
.price-bar .seg-own { background: #1565c0; }
/* Legend-Punkte nutzen dieselben Klassen wie die Balkensegmente, damit
   Erklaerung und Balkenfarbe nicht auseinanderlaufen koennen. */
.bar-legend .legend-dot.seg-deal { background: #2e7d32; }
.bar-legend .legend-dot.seg-reg { background: #616161; }
.bar-legend .legend-dot.seg-community { background: #00838f; }
.bar-legend .legend-dot.seg-est { background: #f9a825; }
.bar-legend .legend-dot.seg-schaetz { background: #ef6c00; }
.bar-legend .legend-dot.seg-own { background: #1565c0; }
.bar-legend { display: flex; gap: 12px; font-size: .66rem; color: var(--text-2); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.acc-toggle { width: 100%; background: none; border: none; margin-top: 6px; color: var(--accent-text);
  font-weight: 650; font-size: .82rem; cursor: pointer; text-align: left; padding: 6px 0; }
.acc-body { display: none; border-top: 1px solid var(--border); margin-top: 5px; padding-top: 5px; }
.acc-body.open { display: block; }
.detail-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0;
  font-size: .84rem; }
.detail-row .badge { font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; color: #fff; }
.split-cards { display: flex; gap: 9px; margin-bottom: 11px; }
.split-half { flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--elev1); padding: 13px; text-align: center; }
.split-vs { align-self: center; font-weight: 800; color: var(--text-3); }
.split-total-line { text-align: center; font-size: .85rem; margin-bottom: 11px; }
.net-saving { color: var(--badge); font-weight: 800; font-size: 1.02rem; }
.empty-hint { text-align: center; color: var(--text-2); padding: 28px 10px; font-size: .9rem; }

/* ---------- Favoriten ---------- */
.tpl-card { display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--elev1); padding: 13px; margin-bottom: 9px; }
.tpl-icon { font-size: 1.3rem; }
.tpl-body { flex: 1; }
.tpl-name { font-weight: 650; font-size: .92rem; }
.tpl-sub { font-size: .74rem; color: var(--text-2); }
.mini-btn { border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 7px 13px; font-size: .75rem; font-weight: 600;
  cursor: pointer; color: var(--text); transition: background .15s ease;
  min-height: 48px; box-sizing: border-box; }
.mini-btn:hover { background: var(--surface-2); }
.mini-btn.danger { color: #dc2626; border-color: #fecaca; background: #fef2f2; }

/* ---------- Mobile-UX (W27) ---------- */
/* Lade-Spinner in den Filial-Chips: der Text allein ("werden gesucht …")
   liess die 3-s-Polling-Pausen wie Stillstand aussehen. */
.spinner {
  display: inline-block; width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid var(--border); border-top-color: var(--accent-text);
  border-radius: 50%; animation: spin .9s linear infinite; vertical-align: -2px;
  margin-right: 2px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Hint unter dem Ersparnis-Wert: motivierend bei 0, "Nicht verbunden"
   statt irrtuemlichem "0,00 EUR gespart" im Offline-Fall. */
.savings-hint { font-size: .72rem; color: var(--text-3); display: block; margin-top: 2px; }
/* Fehlerzeile im Autocomplete: Umbruch erlauben, sonst drueckt der
   Retry-Knopf die Meldung aus der Zeile. */
.suggest-error { white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- FAB ---------- */
/* Der FAB klebte an einer Prozentrechnung (50% - 280px), die nur bei genau
   560 px Inhaltsbreite aufging — auf breiten Fenstern stand er neben der App.
   Jetzt haengt er an derselben Kante wie der Inhalt. */
.fab {
  position: fixed;
  right: max(20px, calc((100vw - 560px) / 2 + 20px));
  bottom: 96px; z-index: 19;
  width: 56px; height: 56px; border-radius: 17px; border: none;
  background: var(--accent-btn); color: var(--on-accent); font-size: 1.4rem; cursor: pointer;
  box-shadow: var(--elev2); transition: transform .15s ease, background .18s ease;
  display: flex; align-items: center; justify-content: center;
}
.fab:hover { background: var(--accent-hover); }
.fab:active { transform: scale(.94); }
/* Auf schmalen Fenstern greift der max(20px, ...) bereits. */
.fab-badge {
  position: absolute; top: -5px; right: -5px; background: #dc2626; color: #fff;
  font-size: .68rem; font-weight: 800; border-radius: 999px; padding: 2px 7px;
}
.hidden { display: none !important; }

/* ---------- Settings sheet ---------- */
.sheet { background: var(--surface); width: 100%; max-width: 560px;
  border-radius: 22px 22px 0 0; padding: 22px; border: 1px solid var(--border); }
.sheet h2 { margin-top: 0; font-size: 1.05rem; }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; font-size: .88rem; }
.switch-row small { color: var(--text-2); }
.sheet label:not(.switch-row) { font-size: .78rem; color: var(--text-2); }
.seg-penalty { display: flex; gap: 6px; margin: 8px 0 18px; }
.seg-penalty button { flex: 1; border: 1px solid var(--border); background: var(--surface);
  /* Ohne eigene Farbe erbte der Text vom <button>-Default und rendete
     SCHWARZ auf dunklem Grund (gemessen 1,31:1 — unsichtbar). */
  color: var(--text);
  border-radius: 999px; padding: 9px 4px; font-size: .72rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease; }
.seg-penalty button.active { background: var(--accent-soft); border-color: var(--accent); font-weight: 650; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 165px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--surface); padding: 11px 20px; border-radius: 999px;
  font-size: .82rem; z-index: 60; box-shadow: var(--elev2); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; max-width: 90%; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* ---------- Autocomplete ---------- */
.suggest-wrap { flex: 1; position: relative; }
.suggest-list {
  /* INLINE-FLOW statt Overlay (W63): Die absolut positionierte Liste lief
     auf echten Geraeten hinter der Software-Tastatur — visualViewport/
     dvh sind in Android-WebViews inkonsistent, jede Rechenlogik blieb
     ein Lotteriespiel (Owner-Geraet bewies es zweimal). Im Fluss der
     Seite kann die Liste nicht "hinter" etwas laufen: Sie verschiebt
     den nachfolgenden Inhalt, die Seite scrollt nativ. */
  position: static; margin: 8px 0 4px; z-index: 30;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev2); overflow: hidden; overflow-y: auto;
  max-height: 45dvh;         /* Nur Fallback; Fluss-Layout benoetigt es kaum */
  overscroll-behavior: contain;
}
/* FLIP-Klasse ist im Fluss-Layout obsolet - bleibt als No-Op fuer
   Rueckwaerts-kompatibilitaet mit evtl. gecachten Bundles. */
.suggest-list.suggest-up { }
.suggest-item { display: flex; flex-direction: column; padding: 9px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border); }
.suggest-item:last-child { border-bottom: none; }
.suggest-item.active, .suggest-item:hover { background: var(--accent-soft); }
.suggest-label { font-size: .88rem; font-weight: 600; }
.suggest-sub { font-size: .7rem; color: var(--text-2); }

/* ---------- Unbekannte Artikel ---------- */
.unknown-item { opacity: .55; }
.unk-note { color: var(--text-3); font-size: .7rem; }

/* ---------- Einkaufs-Modus ---------- */
.shop-progress { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--elev1); padding: 13px 15px; margin-bottom: 11px; }
.shop-progress-bar { height: 11px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.shop-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.shop-row { display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--elev1); padding: 15px; margin-bottom: 9px; cursor: pointer; min-height: 62px;
  transition: opacity .2s ease, border-color .15s ease; }
.shop-row.done { opacity: .5; text-decoration: line-through; }
.shop-check { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-strong);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: transparent; transition: all .18s ease; }
.shop-row.done .shop-check { background: var(--accent-btn); border-color: var(--accent-btn); color: var(--on-accent); }
.shop-name { flex: 1; font-size: .95rem; font-weight: 600; }
.shop-price { font-weight: 700; white-space: nowrap; }

/* ---------- Vorlagen-Editor ---------- */
.qty-btn { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); font-size: .95rem; font-weight: 700; cursor: pointer; color: var(--text); }
.qty-btn:hover { background: var(--surface-2); }

/* ---------- Skelett / Status ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s infinite; border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% {background-position: 100% 50%} 100% {background-position: 0 50%} }

/* ---------- Formulare & Dialoge ---------- */
dialog {
  border: 1px solid var(--border); border-radius: 16px; padding: 22px;
  background: var(--surface); color: var(--text); max-width: 420px; width: calc(100% - 32px);
  box-shadow: var(--elev2);
}
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h2 { font-size: 1.05rem; margin-bottom: 6px; }
.text-input, .select-input {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text); padding: 11px 13px; font-size: .92rem; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.text-input:focus, .select-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.text-input::placeholder { color: var(--text-3); }
.sec-title { margin: 1.2rem .2rem .6rem; }


/* ================= Redesign (Welle 13): Start = Liste + Aktionen ========= */
/* Kompakter Standort-Streifen statt grosser Karte */
.loc-bar {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 14px; margin-bottom: 12px; cursor: pointer; color: var(--text);
  font-size: .9rem; text-align: left; box-shadow: var(--elev1);
}
.loc-bar .material-symbols-outlined { color: var(--accent-text); font-size: 1.15rem; }
.loc-bar .chev { margin-left: auto; color: var(--text-3); }

/* Block = thematische Einheit mit Kopfzeile */
.block { margin-bottom: 18px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 .2rem 8px; }
.block-head h2 { font-size: 1.02rem; font-weight: 700; }
.block-count, .block-head .block-count {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .78rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.link-btn { background: none; border: 0; color: var(--accent-text); font-weight: 600;
  font-size: .85rem; cursor: pointer; padding: 2px 4px; }
.link-btn:hover { text-decoration: underline; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.filter-row { display: flex; gap: 8px; margin-bottom: 10px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filter-chips .chip { min-height: 48px; box-sizing: border-box; display: inline-flex; align-items: center; }
.chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font-size: .8rem; cursor: pointer; color: var(--text); }
.chip.on { background: var(--accent-btn); border-color: var(--accent-btn); color: var(--on-accent); }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.mini-btn.wide { width: 100%; justify-content: center; }

/* Aktionen-Liste (eigener Screen) */
.deal-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--elev1); margin-bottom: 8px; }
.deal-row-body { flex: 1; min-width: 0; }
.deal-row .name { font-size: .92rem; font-weight: 600; }
.deal-row .suggest-sub { font-size: .74rem; color: var(--text-3); }
.deal-also-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.deal-add { margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; }
.deal-add .material-symbols-outlined { font-size: 1.05rem; }
.deal-was { text-decoration: line-through; color: var(--text-3); font-size: .82rem; margin-left: 6px; }
.deal-card { text-align: left; cursor: pointer; position: relative; }

/* Einkaufs-Modus: Fortschritt */
.shop-progress { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px; margin-bottom: 12px; box-shadow: var(--elev1); }
.shop-rest { font-size: .82rem; color: var(--text-3); margin-top: 3px; }
.shop-progress-bar { height: 7px; background: var(--surface-2); border-radius: 999px;
  margin-top: 9px; overflow: hidden; }
.shop-progress-fill { height: 100%; background: var(--accent); transition: width .25s ease; }

.split-sub { font-size: .72rem; color: var(--text-3); }

/* ---------- Adminbereich (nur unter #admin) ---------- */
#screen-admin { padding-bottom: 40px; }
.admin-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.admin-badge { background: #b3261e; color: #fff; font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; padding: 4px 9px; border-radius: 6px; }
.admin-head .link-btn { margin-left: auto; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px; text-align: center; font-size: .78rem; color: var(--text-3); box-shadow: var(--elev1); }
.stat span { display: block; font-size: 1.35rem; font-weight: 800; color: var(--text); }
.field-label { display: block; font-size: .82rem; color: var(--text-3); margin: 12px 0 5px; }
.adv { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.adv summary { cursor: pointer; font-size: .85rem; color: var(--text-3); }
.help-list { margin: 10px 0 0 18px; padding: 0; font-size: .88rem; line-height: 1.65; }
.help-list li { margin-bottom: 7px; }
.help-list b { color: var(--accent-text); }
.regional-chip { font-size: .68rem; padding: 3px 7px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-3); white-space: nowrap; }

/* Der Adminbereich nutzt dieselbe Shell, blendet aber die Nutzer-Navigation aus */
body.admin-mode .bottomnav, body.admin-mode .fab { display: none; }

/* Kennzeichnung "ohne Preisvergleich": Angebot aus dem Prospekt, fuer das
   keine Vergleichspreise der anderen Ketten vorliegen. */
.deal-flag { display: inline-block; margin-top: 5px; padding: 2px 7px;
  border-radius: 6px; font-size: .68rem; font-weight: 600;
  background: color-mix(in srgb, var(--text-3) 15%, transparent); color: var(--text-3); }

/* Vergleichspreis im Screen "Aktionen" (siehe _vergleichszeile in app.js).
   Die gedeckelten Karten tragen ein Warnzeichen und einen Tooltip, damit sie
   nicht wie fehlende Daten aussehen. */
.deal-row .deal-was {
  color: var(--muted, #6b7280); font-size: 0.85em;
  text-decoration: line-through; white-space: nowrap;
}
.deal-row .deal-was-capped { text-decoration: none; cursor: help; }

/* W16c: Angebote, deren Name im Prospekt nicht ausgeschrieben war (nur ein
   Markenrest). Das Angebot ist vollwertig — markiert wird nur, dass der
   Text unvollstaendig ist. Frueher stand ein "?" im Label selbst; das
   wanderte in classify() und in den Dedup-Schluessel. */
.deal-unsicher {
  display: inline-block; font-size: 0.72em; font-weight: 400;
  color: var(--muted, #6b7280); border: 1px dashed currentColor;
  border-radius: 4px; padding: 0 4px; margin-left: 4px;
  vertical-align: middle; white-space: nowrap;
}