/* ================================================================
   Kundenfarbe (serverseitig injiziert) + Reset
   ----------------------------------------------------------------
   Nur die --c-theme-*-Ebene steht hier. Alles Weitere — Flächen,
   Text, Abstände, Radien, Dark Mode — kommt aus assets/tokens.css,
   das diese Werte zu --c-primary/-dk/-lt und --c-bg auflöst.
   app.js schreibt zur Laufzeit dieselben --c-theme-*-Variablen,
   wenn ein Kunde sein Design ändert.
================================================================ */
:root {
  /* Komfort-Stufe: bewusst größer als im Backend. Die Ansicht läuft
     auf Stationstablets, oft im Stehen und mit Handschuhen bedient —
     hier zählen Trefferfläche und Lesbarkeit mehr als Datendichte. */
  --r-tile:   12px;   /* Karten, Modale */
  --r-ctl:    8px;    /* Buttons, Pillen, Chips, Tags */
  --touch:    44px;   /* Mindesthöhe für alles Antippbare */
}

/* Icons aus dem Lucide-Sprite (icons.php). Strichstaerke und Farbe
   kommen von hier, die Groesse jeweils vom Kontext. */
.i {
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Native Browser-Fokus-/Active-Optik neutralisieren — sonst kann beim
   Resize kurz ein System-Fokusring (OS-Akzentfarbe, z.B. Cyan) statt
   unserer Theme-Farbe aufblitzen. Eigener, theme-konformer Ring bleibt
   für Tastatur-Navigation erhalten. */
button { appearance: none; -webkit-appearance: none; outline: none; }
button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

html { height: 100%; }
body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  background: var(--c-bg);
  color: var(--c-text);
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
  transition: background .3s ease;
}

/* ================================================================
   Header
================================================================ */
#hdr {
  background: var(--c-surface);
  color: var(--c-text);
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-hdr);
  transition: background .3s ease;
}
#hdr-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  color: var(--c-primary-dk); font-size: 1rem; font-weight: 800;
  white-space: nowrap; pointer-events: none;
}
.logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.2rem; font-weight: 800; color: var(--c-text);
  user-select: none;
  background: none; border: none; cursor: pointer;
  padding: 0;
  transition: opacity var(--t);
}
.logo:hover { opacity: .75; }
.hdr-right { display: flex; align-items: center; gap: 8px; }
#btn-station {
  background: var(--c-primary-lt);
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary-dk);
  padding: 5px 13px;
  border-radius: var(--r-ctl);
  cursor: pointer;
  font-size: .82rem; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  transition: background var(--t);
}
#btn-station:hover { background: var(--c-primary-lt); }
#btn-lang {
  background: transparent;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary-dk);
  padding: 4px 10px;
  border-radius: var(--r-ctl);
  cursor: pointer;
  font-size: .75rem; font-weight: 800;
  transition: background var(--t);
  min-width: 36px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
#btn-lang .flag { width: 20px; height: 20px; flex-shrink: 0; }
#btn-lang:hover { background: var(--c-primary-lt); }
.cm-toggle {
  background: transparent;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary-dk);
  padding: 4px 10px;
  border-radius: var(--r-ctl);
  cursor: pointer;
  font-family: inherit;
  font-size: .75rem; font-weight: 800;
  display: flex; align-items: center; gap: 5px;
  min-height: 30px;
  transition: background var(--t);
}
.cm-toggle:hover { background: var(--c-primary-lt); }
.cm-toggle .cm-i { display: none; flex-shrink: 0; }
.cm-toggle[data-pref="light"] .cm-i-light,
.cm-toggle[data-pref="dark"]  .cm-i-dark,
.cm-toggle[data-pref="auto"]  .cm-i-auto { display: block; }
/* In der Kopfzeile reicht das Symbol; im aufgeklappten Menü auf
   schmalen Geräten steht die Beschriftung daneben. */
.cm-toggle .cm-label { display: none; }
#hdr-controls { display: flex; align-items: center; gap: 8px; }
/* Alle Schaltflaechen der Kopfzeile gleich hoch. */
#hdr-controls > #btn-stats,
#hdr-controls > #btn-station,
#hdr-controls > #btn-lang,
#hdr-controls > .cm-toggle {
  height: 34px; padding-top: 0; padding-bottom: 0; border-radius: var(--r-ctl);
  display: inline-flex; align-items: center;
}
#btn-burger {
  display: none;
  background: transparent; border: 1.5px solid var(--c-primary);
  color: var(--c-primary-dk); border-radius: var(--r-ctl);
  padding: 5px 9px; cursor: pointer;
  align-items: center; justify-content: center;
  transition: background var(--t);
}
#btn-burger:hover { background: var(--c-primary-lt); }

/* ================================================================
   Navigation
================================================================ */
.nav-badge {
  background: rgba(255,255,255,.28); color: #fff;
  border-radius: var(--r-ctl); padding: 1px 7px;
  font-size: .7rem; font-weight: 800;
}
#badge-ang {
  background: var(--c-primary-lt); color: var(--c-primary-dk);
  margin-left: 4px;
}

/* ================================================================
   Main + Views
================================================================ */
#main { padding: 14px 3%; max-width: 80%; margin: 0 auto; width: 100%; flex: 1; min-height: 0; overflow: hidden; }
.view { display: none; }
.view.active { display: flex; flex-direction: column; height: 100%; }
#view-start { justify-content: center; gap: 0; }

.co2-banner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 20px 20px;
}
.co2-icon { width: 26px; height: 26px; color: var(--c-primary-dk); stroke-width: 1.75; }
.co2-text {
  font-size: .88rem; font-weight: 700; color: var(--c-primary-dk);
  text-align: center; letter-spacing: .01em;
}
.co2-text span {
  font-weight: 900;
}

/* ================================================================
   START: Hero-Kacheln
================================================================ */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 16px;
  /* dvh statt vh: Android-Chrome berechnet vh anhand des Viewports ohne
     Adressleiste, wodurch die Kacheln zu hoch werden und den co2-banner
     überlagern (#23). dvh folgt der tatsächlich sichtbaren Höhe. */
  height: min(55vh, 420px);
  height: min(55dvh, 420px);
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.hero-tile {
  background: var(--c-card);
  border-radius: var(--r-tile);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--c-border);
  transition: all var(--t);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  user-select: none;
}
.hero-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--c-primary); }
.hero-tile:hover #badge-ang { background: var(--c-primary-lt); }
.hero-tile.primary {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
  transition: background .3s ease, border-color .3s ease;
}
.hero-tile.primary:hover { background: var(--c-primary-dk); border-color: var(--c-primary-dk); }
.hero-tile-icon { width: 42px; height: 42px; stroke-width: 1.5; }
.hero-tile-label { font-size: 1.2rem; font-weight: 800; }
.hero-tile-sub   { font-size: .82rem; opacity: .75; }

/* ================================================================
   ANBIETEN: Wizard-Kacheln
================================================================ */
.anbieten-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sel-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-tile);
  padding: 10px 14px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t);
  display: grid;
  grid-template-rows: auto 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.sel-card.done { background: var(--c-primary-lt); box-shadow: var(--shadow-sm); transition: background .2s; }
.sel-card-title {
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-muted);
  margin-bottom: 7px;
  flex-shrink: 0;
  display: flex; align-items: center; gap: 7px;
}
.done-check { display: none; width: 14px; height: 14px; color: var(--c-primary); }
.sel-card.done .done-check { display: inline-block; vertical-align: -2px; }

/* Button-Gruppen (Raster) */
.btn-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  grid-auto-rows: 1fr;
  gap: 6px;
  height: 100%;
  align-content: stretch;
}
.btn-group.meal-grid { grid-template-columns: repeat(3, 1fr); }
.btn-group.diet-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.btn-group.time-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }

/* Auswahl-Buttons (rechteckig) */
.btn-sel {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  min-height: var(--touch);
  padding: 7px 6px;
  border-radius: var(--r-ctl);
  border: 2px solid var(--c-border);
  background: var(--c-bg);
  font-size: .78rem; font-weight: 700;
  cursor: pointer; color: var(--c-text);
  text-align: center; line-height: 1.2;
  transition: all var(--t);
}
    /* .btn-emoji traegt weiterhin Text: die Kostform-Buttons behalten ihre
   Emojis, weil Kunden im Kunden-Backend eigene Kostformen mit
   frei gewaehltem Emoji anlegen koennen. Mahlzeit-Buttons nutzen
   stattdessen .btn-icon aus dem Sprite. */
.btn-sel .btn-emoji { font-size: 1.2rem; line-height: 1; }
.btn-sel .btn-icon  { width: 20px; height: 20px; }
.btn-sel:hover  { border-color: var(--c-primary); background: var(--c-primary-lt); color: var(--c-primary-dk); }
.btn-sel.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn-sel:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }

/* Zahlen-Buttons (rechteckig) */
.btn-count {
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 7px 4px;
  border-radius: var(--r-ctl);
  border: 2px solid var(--c-border);
  background: var(--c-bg);
  font-size: 1rem; font-weight: 800;
  cursor: pointer; color: var(--c-text);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t);
}
.btn-count:hover  { border-color: var(--c-primary); background: var(--c-primary-lt); color: var(--c-primary-dk); }
.btn-count.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* Zeit-Buttons (rechteckig) */
.btn-time {
  min-height: var(--touch);
  padding: 8px 4px;
  border-radius: var(--r-ctl);
  border: 2px solid var(--c-border);
  background: var(--c-bg);
  font-size: .82rem; font-weight: 800;
  cursor: pointer; color: var(--c-text);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t);
  text-align: center;
}
.btn-time:hover   { border-color: var(--c-primary); background: var(--c-primary-lt); color: var(--c-primary-dk); }
.btn-time.active  { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn-time.expired { opacity: .25; cursor: not-allowed; pointer-events: none; text-decoration: line-through; }

#time-btns-wrap { display: grid; grid-template-rows: 1fr auto; height: 100%; }
.time-hint { font-size: .7rem; color: var(--c-muted); margin-top: 4px; flex-shrink: 0; }
.time-placeholder { font-size: .82rem; color: var(--c-muted); padding: 6px 0; }

/* Submit-Zeile */
.submit-row { margin-top: 4px; display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

/* ================================================================
   ABHOLEN: Angebotsliste
================================================================ */
.offers-list {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding-right: 2px;
  scrollbar-width: thin; scrollbar-color: var(--c-border) transparent;
}

.offer-row {
  background-color: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-tile);
  background-image: linear-gradient(var(--meal-color, transparent), var(--meal-color, transparent));
  background-repeat: no-repeat; background-size: 6px 100%; background-position: left top;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 20px;
  transition: box-shadow var(--t); flex-shrink: 0;
}
.offer-row.meal-fr { --meal-color: var(--c-meal-fr); }
.offer-row.meal-mi { --meal-color: var(--c-primary); }
.offer-row.meal-ab { --meal-color: var(--c-meal-ab); }
.offer-row.mine    { background-color: var(--c-surface-2); }
.offer-row:hover   { box-shadow: var(--shadow-md); }

.offer-row-meal { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; flex-shrink: 0; }
.offer-row-meal-icon { width: 20px; height: 20px; color: var(--meal-color, var(--c-primary)); }
.offer-row-meal-lbl  { font-size: .65rem; font-weight: 800; white-space: nowrap; }
.offer-row-meal-lbl.fr { color: var(--c-meal-fr); }
.offer-row-meal-lbl.mi { color: var(--c-primary-dk); }
.offer-row-meal-lbl.ab { color: var(--c-meal-ab); }

.offer-row-divider { width: 1px; height: 38px; background: var(--c-border); flex-shrink: 0; }

.offer-row-station { font-size: .78rem; color: var(--c-muted); font-weight: 600; width: 110px; flex-shrink: 0; }

.offer-row-count { font-size: 1.6rem; font-weight: 900; color: var(--c-primary-dk); line-height: 1; width: 36px; flex-shrink: 0; text-align: center; }

.offer-row-time { display: flex; align-items: center; gap: 8px; flex: 1 0 auto; }
.time-remaining { font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: var(--r-ctl); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.time-remaining.ok      { background: var(--c-success-bg); color: var(--c-success-tx); }
.time-remaining.warning { background: var(--c-warning-bg); color: var(--c-warning-tx); }
.time-remaining.urgent  { background: var(--c-danger-bg); color: var(--c-danger-tx); }
.offer-row-until { font-size: .68rem; color: var(--c-muted); white-space: nowrap; }

/* Breit genug, dass bis zu drei Kostform-Tags nebeneinander passen —
   sonst bricht je nach Tag-Länge mal nach zwei, mal nach drei Zeilen
   um und die Liste wirkt unruhig. */
.offer-row-tags { display: flex; flex-wrap: wrap; gap: 3px; flex: 0 1 300px; min-width: 166px; justify-content: flex-end; align-content: center; }

/* Breit genug für Mengenwahl + Halte-Button nebeneinander; die
   Mengenwahl ist seit #24 dauerhaft sichtbar.
   32+4+26+4+32 (Stepper) + 8 (Lücke) + 118 (Button) = 224 */
.offer-row-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; width: 224px; justify-content: flex-end; }

.tag {
  display: inline-flex; align-items: center;
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-ctl); padding: 2px 7px;
  font-size: .72rem; font-weight: 700;
}
/* Kostformen tragen einen farbigen Punkt statt einer eigenen
   Flächenfarbe. Sieben Pastelltöne nebeneinander wirkten unruhig und
   waren als feste Hellfarben im Dark Mode nicht mehr lesbar. */
.tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tag-c, var(--c-muted));
  margin-right: 5px; flex-shrink: 0;
}
.tag-v  { --tag-c: var(--chart-5); }
.tag-vg { --tag-c: var(--chart-2); }
.tag-d  { --tag-c: var(--chart-1); }
.tag-w  { --tag-c: var(--chart-3); }
.tag-h  { --tag-c: var(--c-success); }
.tag-k  { --tag-c: var(--chart-6); }
.tag-g  { --tag-c: var(--chart-4); }

.expiry-bar { height: 4px; border-radius: 2px; background: var(--c-border); overflow: hidden; margin-top: 2px; }
.expiry-fill { height: 100%; border-radius: 2px; background: var(--c-primary); transition: width .5s, background .3s; }

.offer-actions { display: flex; gap: 7px; margin-top: 2px; }

/* ================================================================
   Abholen: Mengenwahl + Halte-Button

   Die Mengenwahl steht dauerhaft in der Zeile und besteht aus
   folgenlosen Taps. Ausgelöst wird nur über den Halte-Button —
   eine Fehlberührung kann deshalb nichts abholen.
================================================================ */
/* Feste Breiten und kein Umbruch: Jede Zeile ist gleich gebaut,
   dadurch stehen Mengenwahl und Abhol-Button in allen Zeilen
   untereinander in einer Spalte und keine Zeile wird höher als die
   anderen. */
.claim-controls { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }

.claim-controls { --claim-h: 36px; }
.qty-picker { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.qty-btn {
  width: var(--claim-h); height: var(--claim-h);
  border: 1.5px solid var(--c-border); border-radius: var(--r-ctl);
  background: var(--c-card); color: var(--c-text);
  font-size: 1.05rem; font-weight: 800; line-height: 1;
  cursor: pointer; flex-shrink: 0;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.qty-btn:hover:not(:disabled) { background: var(--c-bg); }
.qty-btn:disabled { opacity: .3; pointer-events: none; }
.claim-qty {
  width: 26px; text-align: center; flex-shrink: 0;
  font-size: 1.05rem; font-weight: 800; color: var(--c-text);
}
.claim-qty:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }

.claim-hold {
  position: relative; overflow: hidden;
  padding: 0 14px; height: var(--claim-h);
  /* Feste Breite, damit "1 abholen" und "12 abholen" die Spalte
     nicht verschieben. */
  width: 118px; justify-content: center; flex-shrink: 0;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;   /* kein Langdruck-Menü auf Android/iOS */
  /* pan-y statt none: Wer mit dem Daumen auf dem Button aufsetzt, muss
     die Liste weiterhin scrollen können. Beginnt ein Scrollen, schickt
     der Browser pointercancel — der Halt bricht dann sauber ab. */
  touch-action: pan-y;
}
/* Füllt sich während des Haltens von links nach rechts und zeigt so,
   wie lange noch zu halten ist. */
.claim-hold-fill {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .3);
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}
[dir="rtl"] .claim-hold-fill { transform-origin: right center; }
/* Die Halte-Geste erklärt der Tooltip (title) — im Button selbst
   wäre ein zweizeiliger Hinweis in jeder Listenzeile zu viel. */
.claim-hold-lbl  { position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.claim-hold.holding { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
/* Zweistufiger Ersatzweg für Screenreader und Umschaltgeräte */
.claim-hold.armed { background: var(--c-danger); }
.claim-hold.nudge { animation: claimNudge .4s ease; }
@keyframes claimNudge {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
/* Die Füllung bleibt auch bei reduzierter Bewegung erhalten — sie ist
   die einzige Rückmeldung, wie lange noch zu halten ist. Nur das
   Rütteln beim zu kurzen Tippen entfällt. */
@media (prefers-reduced-motion: reduce) {
  .claim-hold.nudge { animation: none; }
}

/* ================================================================
   Buttons
================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border-radius: var(--r-ctl);
  font-size: .9rem; font-weight: 700;
  cursor: pointer; border: none;
  transition: all var(--t);
}
.btn-primary { background: var(--c-primary); color: #fff; transition: background .3s; }
.btn-primary:hover { background: var(--c-primary-dk); }
.btn-ghost   { background: transparent; border: 1.5px solid var(--c-border); color: var(--c-text); }
.btn-ghost:hover { background: var(--c-bg); }
.btn-danger  { background: var(--c-danger); color: #fff; }
.btn-danger:hover { filter: brightness(.92); }
.btn-sm  { padding: 6px 12px; font-size: .8rem; }
.btn-xl  { padding: 14px 28px; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }
.btn:disabled { opacity: .35; pointer-events: none; }

/* ================================================================
   Verlauf
================================================================ */
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-shrink: 0; }
.sec-title { font-size: 1rem; font-weight: 800; }
.hist-list { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow: hidden; }
.hist-item {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-sm);
  padding: 13px 16px; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 13px;
}
.hist-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hist-icon .i { width: 16px; height: 16px; }
.hist-icon.sent { color: var(--c-muted); }
.hist-icon.recv { color: var(--c-primary-dk); }
.hist-icon.sent { background: var(--c-surface-2); }
.hist-icon.recv { background: var(--c-primary-lt); }
.hist-body  { flex: 1; min-width: 0; }
.hist-title { font-size: .87rem; font-weight: 700; }
.hist-sub   { font-size: .75rem; color: var(--c-muted); }
.hist-time  { font-size: .73rem; color: var(--c-muted); white-space: nowrap; }

/* ================================================================
   Empty State
================================================================ */
.empty {
  text-align: center; padding: 52px 20px; color: var(--c-muted);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  grid-column: 1 / -1;
}
.empty-icon  { opacity: .3; width: 38px; height: 38px; stroke-width: 1.5; }
.empty-title { font-size: 1rem; font-weight: 700; color: var(--c-text); }
.empty-sub   { font-size: .83rem; }

/* ================================================================
   Globale Notification-Leiste (neugedacht.-Admin, kundenübergreifend)
   Bewusst NICHT über die --c-theme-*-Variablen eingefärbt — die Farbe
   muss unabhängig vom individuellen Design des Kunden immer Rot sein.
================================================================ */
.global-notif {
  display: flex; align-items: center; gap: 10px;
  width: 100%; box-sizing: border-box;
  padding: 10px 20px;
  background: #c62828; color: #fff;
  font-size: .85rem; font-weight: 600;
  line-height: 1.35;
}
.global-notif-track {
  flex: 1; min-width: 0; overflow: hidden;
  display: flex; justify-content: center;
}
.global-notif-msg { white-space: nowrap; }
/* Passt der Text nicht in die Leiste (schmaler Bildschirm), läuft er als
   Endlos-Laufschrift durch statt abgeschnitten zu werden: zwei Kopien
   hintereinander (assets/global-notif.js), Animation schiebt exakt um
   eine Kopienbreite und beginnt dann nahtlos von vorn. */
.global-notif-track.marquee { justify-content: flex-start; }
.global-notif-msg-inner { display: flex; width: max-content; }
.global-notif-track.marquee .global-notif-msg-inner {
  animation: notif-marquee var(--marquee-duration, 14s) linear infinite;
}
@keyframes notif-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .global-notif-track.marquee .global-notif-msg-inner { animation: none; }
}
.global-notif-close {
  background: none; border: none; cursor: pointer;
  color: #fff; opacity: .85; padding: 2px 4px; flex-shrink: 0;
  font-size: 1rem; line-height: 1;
}
.global-notif-close:hover { opacity: 1; }

/* ================================================================
   Offer-Benachrichtigung (Banner, slide-in)
================================================================ */
#offer-notif-wrap {
  position: fixed; top: 70px; right: 18px; z-index: 998;
  display: flex; flex-direction: column; gap: 9px;
  max-width: 320px; pointer-events: none;
}
/* Wie .ngd-meldung (assets/meldung.css, Issue #25): helle Fläche, Art
   der Meldung als schmaler, runder Balken INNEN statt einer farbigen
   Kopfzeile oder eines Randes — konsistent mit den übrigen Toasts. */
.offer-notif {
  position: relative;
  background: var(--c-card);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: notifIn .24s ease;
}
.offer-notif::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--ngd-indikator-abstand);
  top: var(--ngd-indikator-abstand);
  bottom: var(--ngd-indikator-abstand);
  width: var(--ngd-indikator-breite);
  border-radius: 999px;
  background: var(--notif-color, var(--c-primary));
  pointer-events: none;
}
.offer-notif-header {
  display: flex; align-items: center; gap: 8px;
  padding-block: 9px 8px;
  padding-inline: calc(var(--ngd-indikator-abstand) + var(--ngd-indikator-breite) + 10px) 12px;
}
.offer-notif-icon    { width: 16px; height: 16px; color: var(--notif-color, var(--c-primary-dk)); }
.offer-notif-title   { font-size: .78rem; font-weight: 800; color: var(--c-text); flex: 1; }
.offer-notif-station { font-size: .75rem; font-weight: 700; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.offer-notif-close   {
  background: none; border: none; cursor: pointer;
  font-size: .85rem; color: var(--c-muted); padding: 0 0 0 4px;
  line-height: 1; flex-shrink: 0;
}
.offer-notif-close:hover { color: var(--c-text); }
.offer-notif-body {
  padding-block: 0 10px;
  padding-inline: calc(var(--ngd-indikator-abstand) + var(--ngd-indikator-breite) + 10px) 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.offer-notif-count { font-size: .9rem; font-weight: 800; color: var(--c-text); }
.offer-notif-time  { font-size: .75rem; color: var(--c-muted); }
.offer-notif-diets { font-size: .76rem; color: var(--c-muted); margin-top: 1px; }
@keyframes notifIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
  #offer-notif-wrap { right: 10px; max-width: calc(100vw - 20px); top: 64px; }
}
[dir="rtl"] .offer-notif { animation: notifInRtl .24s ease; }
[dir="rtl"] #offer-notif-wrap { right: auto; left: 18px; }
@keyframes notifInRtl { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ================================================================
   Station Modal
================================================================ */
#modal-overlay {
  position: fixed; inset: 0;
  background: var(--c-overlay); z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(2px);
}
#modal-overlay.hidden { display: none; }
/* Sperrbildschirm, wenn der Server den Zugang ablehnt (app.js: showBlocked) */
#sync-blocked {
  position: fixed; inset: 0; z-index: 400;
  background: var(--c-bg, #fff);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#sync-blocked.hidden { display: none; }
#sync-blocked h2 { font-size: 1.5rem; margin-bottom: 12px; }
/* Der Teller der Bildmarke zerfällt beim Einblenden in ~5 s (theme_assets.php: stLogoShatterSvg) */
/* Der Teller der Bildmarke zerfällt beim Einblenden in ~5 s (theme_assets.php: stLogoShatterSvg) */

.modal {
  background: var(--c-card); border-radius: var(--r-tile);
  padding: 30px 28px; box-shadow: var(--shadow-md);
  width: 100%; max-width: 440px; text-align: center;
}
.modal-icon  { width: 34px; height: 34px; stroke-width: 1.5; color: var(--c-primary-dk); margin-bottom: 10px; }
.modal-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 5px; }
.modal-sub   { font-size: .85rem; color: var(--c-muted); margin-bottom: 22px; }
.station-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.station-btn {
  min-height: var(--touch);
  padding: 11px 8px;
  border: 2px solid var(--c-border); border-radius: var(--r-ctl);
  background: var(--c-bg); cursor: pointer;
  font-size: .84rem; font-weight: 700; color: var(--c-text);
  transition: all var(--t);
}
.station-btn:hover { border-color: var(--c-primary); background: var(--c-primary-lt); }
.station-btn.sel   { border-color: var(--c-primary); background: var(--c-primary-lt); color: var(--c-primary-dk); }

/* ================================================================
   Statistik-Button & Panel
================================================================ */
#btn-stats {
  background: transparent;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary-dk);
  padding: 4px 10px;
  border-radius: var(--r-ctl);
  cursor: pointer;
  font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; gap: 5px;
  transition: background var(--t);
  white-space: nowrap;
}
#btn-stats:hover { background: var(--c-primary-lt); }

#modal-stats-overlay {
  position: fixed; inset: 0;
  background: var(--c-overlay); z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(2px);
}
#modal-stats-overlay.hidden { display: none; }

.stats-tabs {
  display: flex; gap: 4px; margin-top: 17px; margin-bottom: 16px;
  justify-content: center; flex-wrap: wrap;
}
.stats-tab {
  padding: 5px 11px;
  border: 1.5px solid var(--c-border); border-radius: var(--r-ctl);
  background: var(--c-bg);
  font-size: .76rem; font-weight: 700; cursor: pointer; color: var(--c-text);
  transition: all var(--t);
}
.stats-tab:hover  { border-color: var(--c-primary); background: var(--c-primary-lt); color: var(--c-primary-dk); }
.stats-tab.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.stats-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 18px;
}
.stat-card {
  background: var(--c-bg); border-radius: var(--r-sm);
  padding: 14px 10px; text-align: center;
  border: 1.5px solid var(--c-border);
  height: 148px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
}
.stat-tip {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 11px;
  transform: translateX(-50%) translateY(4px);
  width: 218px; max-width: 78vw;
  background: var(--c-card); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 12px 14px; text-align: left;
  font-size: .72rem; line-height: 1.55;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 30;
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.stat-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--c-card);
}
.stat-card:hover .stat-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.stat-tip-title { font-weight: 800; margin-bottom: 6px; }
.stat-tip-row { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.stat-tip-row .stat-tip-v { font-weight: 700; white-space: nowrap; }
.stat-tip-row .stat-tip-v.pos { color: var(--c-success); }
.stat-tip-row .stat-tip-v.neg { color: var(--c-danger); }
.stat-tip-hr { border: none; border-top: 1px solid var(--c-border); margin: 5px 0; }
.stat-tip-note { color: var(--c-muted); font-size: .66rem; font-style: italic; margin-top: 7px; line-height: 1.4; }
.stat-card-icon { width: 20px; height: 20px; stroke-width: 1.75; color: var(--c-muted); margin-bottom: 6px; }
.stat-card-val  { font-size: 1.25rem; font-weight: 900; color: var(--c-primary-dk); line-height: 1.15; }
.stat-card-lbl  { font-size: .7rem; color: var(--c-muted); margin-top: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ================================================================
   RTL-Unterstützung (Arabisch)
================================================================ */
[dir="rtl"] #hdr { flex-direction: row-reverse; }
[dir="rtl"] .hdr-left { flex-direction: row-reverse; }
[dir="rtl"] .hdr-right { flex-direction: row-reverse; }
[dir="rtl"] .offer-top { flex-direction: row-reverse; }
[dir="rtl"] .offer-station-lbl { text-align: left; }

/* ================================================================
   Diet Filter Bar
================================================================ */
#filter-bar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: 0 16px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
  overscroll-behavior-x: contain;
}
#filter-bar::-webkit-scrollbar { display: none; }
#filter-bar.hidden { display: none; }

.diet-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 13px;
  border-radius: var(--r-ctl);
  border: 1.5px solid var(--c-border);
  background: var(--c-bg);
  font-size: .78rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; color: var(--c-text);
  transition: all var(--t); flex-shrink: 0;
}
.diet-chip:hover { border-color: var(--c-primary); background: var(--c-primary-lt); color: var(--c-primary-dk); }
.diet-chip.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* Tablet/schmaler Desktop: Die Buttons bleiben sichtbar, aber der
   mittig positionierte Titel würde sich mit ihnen überlagern. Er
   rutscht deshalb in eine eigene Zeile unter Logo und Buttons. */
@media (min-width: 641px) and (max-width: 1100px) {
  #hdr { height: auto; min-height: 58px; flex-wrap: wrap; row-gap: 2px; padding: 8px 20px 6px; }
  .logo { order: 1; }
  .hdr-right { order: 2; }
  #hdr-title {
    order: 3; position: static; transform: none;
    flex: 0 0 100%; text-align: center; font-size: .85rem;
  }
  #hdr-title:empty { display: none; }
}

/* ================================================================
   Responsive 640px
================================================================ */
@media (max-width: 640px) {
  /* Kopfzeile zweizeilig: Zeile 1 = Logo + Menü, Zeile 2 = Seitentitel —
     sonst überlagert der zentrierte #hdr-title die Wortmarke auf schmalen Screens. */
  #hdr { height: auto; flex-wrap: wrap; row-gap: 2px; padding: 8px 12px 6px; }
  .logo { order: 1; }
  .hdr-right { order: 2; }
  #hdr-title {
    order: 3; position: static; transform: none;
    flex: 0 0 100%; text-align: center; font-size: .85rem;
  }
  #hdr-title:empty { display: none; }
  #btn-burger { display: flex; }
  #hdr-controls {
    display: none;
    position: absolute; right: 0; top: 100%;
    background: var(--c-card);
    flex-direction: column; gap: 6px;
    padding: 10px 12px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--c-border);
    border-top: none;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    z-index: 200; min-width: 160px;
  }
  #hdr-controls.open { display: flex; }
  #hdr-controls #btn-stats,
  #hdr-controls #btn-station,
  #hdr-controls #btn-lang,
  #hdr-controls .cm-toggle {
    width: 100%; justify-content: flex-start; text-align: left;
    border-radius: var(--r-ctl); min-height: var(--touch);
  }
  #hdr-controls #btn-lang { min-width: unset; text-align: left; }
  /* Im Klappmenü ist Platz für die Beschriftung — "Hell"/"Dunkel"/
     "Automatisch" ist eindeutiger als ein Sonnensymbol allein. */
  #hdr-controls .cm-toggle .cm-label { display: inline; }
  .stats-cards { gap: 8px; }
  .hero-grid { height: min(50vh, 360px); height: min(50dvh, 360px); gap: 10px; }
  .hero-tile { padding: 12px 8px; }
  .hero-tile-icon { width: 30px; height: 30px; }
  .hero-tile-label { font-size: .9rem; }
  .hero-tile-sub { display: none; }
  .anbieten-grid { gap: 6px; }
  #main { max-width: 100%; padding: 8px 10px; }
  #filter-bar { padding: 0 10px; height: 42px; gap: 5px; }
  .diet-chip { padding: 4px 11px; font-size: .74rem; }
  .sel-card { padding: 10px 12px; }
  .sel-card-title { margin-bottom: 8px; }
  .btn-count { min-width: 36px; font-size: .88rem; }
  .btn-time  { font-size: .72rem; }
  .btn-sel   { font-size: .68rem; }
  .btn-sel .btn-emoji { font-size: 1rem; }
  .station-grid { grid-template-columns: 1fr 1fr; }
  .btn-group { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 5px; }
  .btn-group.meal-grid { grid-template-columns: repeat(3, 1fr); }
  .anbieten-grid { gap: 5px; }
  .sel-card { padding: 8px 10px; }

  /* Anbieten-Formular: natürliche Kartenhöhe + internes Scrollen, damit
     die Kostform-Chips groß und vollständig sichtbar bleiben (kein Clipping) */
  .anbieten-grid { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .sel-card  { flex: 0 0 auto; overflow: visible; }
  .btn-group { height: auto; grid-auto-rows: auto; }
  .btn-sel   { min-height: 54px; font-size: .74rem; }
  .btn-group.diet-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }

}

/* ================================================================
   Offer Row: Rasterlayout für Handy und Tablet

   Bis 1279px wird die einzeilige Desktop-Darstellung zu eng: mit der
   dauerhaft sichtbaren Mengenwahl summieren sich die festen Spalten
   auf mehr Breite, als ein Tablet im Hochformat hergibt. Deshalb
   greift das Raster hier bis einschließlich Tablet — nicht wie
   zuvor nur bis 640px.
================================================================ */
@media (max-width: 1279px) {
  .offer-row {
    display: grid;
    grid-template-columns: 64px minmax(0, auto) auto 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 3px 8px;
    padding: 10px 12px;
    align-items: center;
  }
  .offer-row-meal {
    grid-column: 1; grid-row: 1 / 3;
    width: 64px; align-self: center;
  }
  .offer-row-divider { display: none; }
  /* Kopfzeile: Station, "bis hh:mm", Restzeit-Pille, rechts die Anzahl.
     .offer-row-time löst sich auf, damit seine Kinder im Raster
     einzeln sitzen. */
  .offer-row-station {
    grid-column: 2; grid-row: 1;
    width: auto; font-size: .82rem; font-weight: 700; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .offer-row-count {
    grid-column: 5; grid-row: 1;
    font-size: 1.25rem; width: auto; text-align: right;
  }
  .offer-row-time { display: contents; }
  .offer-row-until { grid-column: 3; grid-row: 1; white-space: nowrap; }
  .time-remaining  { grid-column: 4; grid-row: 1; justify-self: start; }
  .offer-row-tags {
    grid-column: 2 / 6; grid-row: 2;
    display: flex; width: auto;
    justify-content: flex-start; flex-wrap: wrap; gap: 3px; padding-top: 2px;
    /* Höhe auch ohne Tags reservieren ("Normal" erzeugt keinen Tag) —
       sonst sind Zeilen mit und ohne Kostform verschieden hoch. */
    min-height: 26px;
  }
  /* Mengenwahl und Halte-Button bekommen eine eigene, volle Zeile —
     große Ziele, auch mit Handschuhen sicher zu treffen. */
  .offer-row-actions {
    grid-column: 1 / 6; grid-row: 3;
    width: auto; justify-content: flex-end; align-self: center;
    padding-top: 6px;
  }
  /* Mengenwahl links, Halte-Button rechts. Ohne Mengenwahl (Einzel-
     portion) rückt der Button an den rechten Rand statt in der
     leeren Zeile links zu hängen. */
  .claim-controls { --claim-h: 44px; width: 100%; justify-content: flex-end; }
  .qty-picker { gap: 6px; margin-inline-end: auto; }
  .claim-qty { width: 32px; font-size: 1.15rem; }
  /* Hier darf der Button wachsen: er steht in einer eigenen Zeile,
     eine feste Spaltenbreite ist dafür nicht nötig. */
  .claim-hold { width: auto; min-width: 150px; padding: 0 18px; font-size: .88rem; }
}

/* Handy: der Halte-Button nimmt die Restbreite ein, damit er auch
   einhändig sicher zu treffen ist. */
@media (max-width: 640px) {
  .claim-hold { flex: 1; min-width: 0; }
}

/* Einwilligung Statistik — beide Schaltflächen bewusst gleich groß und gleich gestaltet */
#consent-banner { position:fixed; inset-inline:12px; bottom:12px; z-index:300; max-width:560px; margin-inline:auto;
  background:var(--c-card); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:14px 16px; }
#consent-banner.hidden { display:none; }
#consent-banner h2 { font-size:.95rem; font-weight:800; margin-bottom:4px; }
#consent-banner p  { font-size:.8rem; line-height:1.45; color:var(--c-muted); margin-bottom:12px; }
.consent-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.consent-btns button { min-height:44px; border-radius: var(--r-ctl); font:inherit; font-weight:700; font-size:.88rem; cursor:pointer;
  background:var(--c-surface); color:var(--c-text); border:1.5px solid var(--c-primary); }
.consent-btns button:hover { background:var(--c-primary-lt); }

.stat-unit { font-size: .75rem; font-weight: 700; }