/* HKM Abholung — eigene App (E5, SM 21.08.2026).
   Hallentauglich: 44-px-Ziele, große Schrift, ein Bildschirm ohne Reiter. Farben und
   Dunkelmodus kommen aus /ui/tokens.css, das Grundgerüst aus /liefern/style.css —
   kein zweites Designsystem.

   v2.234 (SM 30.08.2026): Cupertino hell — Abschnitte HEUTE/MORGEN/SPÄTER, weiße Karten
   mit weichen Schatten, Farbband nur am Helden (heute/überfällig), Quittier-Sheet von
   unten mit Lieferschein-Häkchen und Unterschrift. */

body { background: linear-gradient(180deg, #fbfdff 0%, #eef4fa 100%) fixed; }

/* Anrede wie im BDE: erst der Mensch/die Lage, dann die Karten. */
.abhol-gruss { margin: 0.4rem 0 0.8rem; }
.abhol-gruss h1 { font-size: 1.65rem; font-weight: 700; text-align: left; margin: 0; }
.abhol-lage { margin: 0.1rem 0 0; font-size: 0.92rem; color: var(--text-gedimmt); }
@media (max-width: 480px) { .abhol-gruss h1 { font-size: 1.4rem; } }

/* Abschnitts-Etikett wie im BDE-Entwurf: HEUTE / MORGEN / SPÄTER. */
.abhol-abschnitt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em;
  color: var(--text-gedimmt); margin: 1rem 0.2rem 0.25rem; }
.abhol-abschnitt.rot { color: var(--rot-text); }

.abhol-liste { display: flex; flex-direction: column; gap: 0.6rem; }

/* Karte: weiß, weicher Schatten, KEIN dicker Kantenbalken mehr — der Zustand steht im
   Chip und (beim Helden) im Farbband oben. */
.abhol-karte { background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(18, 60, 100, 0.05), 0 10px 24px -12px rgba(18, 60, 100, 0.16); }
.abhol-karte .ak-rumpf { padding: 0.85rem 1rem; }
.abhol-karte.held { box-shadow: 0 1px 3px rgba(18, 60, 100, 0.05),
  0 14px 30px -10px rgba(18, 60, 100, 0.18); }

/* Farbband nur am Helden (heute/überfällig): Uhrzeit links, Status rechts. */
.akh-band { display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0.5rem 1rem; background: #e2eff9; color: #004e70;
  border-bottom: 1px solid #cfe4f4; font-weight: 700; }
.akh-band.gruen { background: var(--gruen-flaeche); color: var(--gruen-text);
  border-bottom-color: #cbe8d6; }

/* Ruhige Zeilen für SPÄTER — Liste bleibt Liste. */
.abhol-liste.leise .abhol-karte { box-shadow: 0 1px 2px rgba(18, 60, 100, 0.05); }
.abhol-liste.leise .ak-rumpf { padding: 0.6rem 0.9rem; }
.abhol-liste.leise .ak-was { font-size: 0.95rem; }

.ak-wann { font-weight: 700; font-size: 0.95rem; color: var(--text-gedimmt); }
.ak-was { margin: 0.15rem 0; font-weight: 700; font-size: 1.05rem; }
.ak-meta { color: var(--text-gedimmt); font-size: 0.9rem; }
.ak-ls { color: var(--akzent-nr); font-size: 0.9rem; margin-top: 0.15rem;
  font-variant-numeric: tabular-nums; }
.ak-knoepfe { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.ak-knoepfe button { min-height: 44px; }
.ak-knoepfe .auffordernd { background: linear-gradient(180deg, var(--hk-blau-hell), var(--hk-blau));
  color: #fff; border: none; font-weight: 700; box-shadow: var(--schatten-blau); }
.ak-status { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; }
.ak-status.geplant { background: var(--gelb-flaeche); color: var(--gelb-text); }
.ak-status.bereit { background: var(--gruen-flaeche); color: var(--gruen-text); }
.ak-status.abgeholt { background: var(--flaeche-hell); color: var(--text-gedimmt); }
.akh-band .ak-status.geplant { background: rgba(255, 255, 255, 0.75); }
.akh-band .ak-status.bereit { background: rgba(255, 255, 255, 0.75); }

/* ---------- Formular (unverändert in der Sache, Cupertino-hell-Feinschliff) ---------- */
.abhol-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1rem;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(18, 60, 100, 0.05), 0 10px 24px -12px rgba(18, 60, 100, 0.16); }
.abhol-form h2 { margin: 0 0 0.2rem; font-size: 1.15rem; }
.abhol-form .feld { display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.95rem; }
.abhol-form .feld .hinweis { font-size: 0.8rem; }
.abhol-form input, .abhol-form select {
  min-height: 44px; font-size: 1.05rem;
  font-family: inherit; background: var(--flaeche); color: var(--text);
  border: 2px solid var(--rand); border-radius: 10px; padding: 0 0.7rem; }
.abhol-form .feldzeile { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.abhol-form .feldzeile .feld { flex: 1 1 9rem; }
.abhol-form .knopfzeile { display: flex; gap: 0.6rem;
  align-items: center; flex-wrap: wrap; }
/* Im Browser gemessen: der Abbrechen-Knopf war 34 px hoch (`.klein` aus dem gemeinsamen
   Stylesheet). In einer Hallen-App gilt 44 px DURCHGEHEND — auch für den Knopf, den man
   selten braucht: wer mit Handschuhen daneben tippt, löst sonst das Eintragen aus. */
.abhol-form .knopfzeile button, .abhol-form .knopfzeile .klein { min-height: 44px; }
.abhol-form .knopfzeile .riesig { flex: 1 1 12rem; margin-top: 0; }
#neu-auf { margin-top: 0.4rem; }

/* Die Pflichtregel steht sichtbar im Formular, nicht erst in der Fehlermeldung. */
.pflicht-hinweis { margin: 0.2rem 0 0; color: var(--gelb-text); }

/* Das Quittier-Sheet selbst (Overlay, Karte, Häkchenliste, Unterschrift) kommt seit
   v2.235 KOMPLETT aus /liefern/style.css (.q-overlay, .q-sheet, .q-ls, …) — SM
   31.08.2026: „dass die UI in der liefern App fürs abholen identisch ist". Eine
   Definition, zwei Apps; hier steht bewusst kein zweites Exemplar. */