/* Liefern-App — drei Schritte, Daumen-Bedienung, null Erklärungsbedarf.
   (Wird auch von Einkauf und Störmeldung geladen — Klassen sind geteilt.) */
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
body { background: var(--atmo) fixed, var(--nacht); color: var(--text); font-family: var(--schrift);
  min-height: 100vh; -webkit-font-smoothing: antialiased; }
.versteckt { display: none !important; }

header { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem;
  background: var(--kopf-flaeche); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rand); box-shadow: var(--schatten-1);
  position: sticky; top: 0; z-index: 5; }
.logo { background: linear-gradient(135deg, var(--hk-blau), var(--hk-dunkelblau)); color: #fff;
  font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 6px; box-shadow: var(--schatten-blau); }
.home { text-decoration: none; }
.titel { color: var(--text-gedimmt); font-weight: 600; }
#abmelden { margin-left: auto; }

main { max-width: 620px; margin: 0 auto; padding: 1rem 1rem 2rem; }
h1 { font-size: 1.3rem; font-weight: 700; letter-spacing: var(--titel-spationierung);
  text-align: center; margin: 0.7rem 0 1rem; }
.hinweis { color: var(--text-gedimmt); text-align: center; }

button { font-family: inherit; border: none; border-radius: 12px; cursor: pointer; color: var(--text); }
.klein { background: var(--flaeche); border: 1px solid var(--rand-stark); padding: 0.5rem 0.9rem;
  font-size: 0.9rem; box-shadow: var(--schatten-1); }
.klein:hover { border-color: var(--hk-blau); }

.kuerzel-eingabe { display: block; width: 100%; max-width: 300px; margin: 0 auto 0.8rem;
  text-align: center; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.05em;
  background: var(--flaeche); color: var(--text); border: 2px solid var(--rand-stark);
  border-radius: 14px; padding: 0.75rem; font-family: inherit; text-transform: uppercase; }
.kuerzel-eingabe:focus { outline: none; border-color: var(--hk-blau);
  box-shadow: 0 0 0 3px rgba(18, 117, 187, 0.15); }
.pin-anzeige { text-align: center; font-size: 2rem; letter-spacing: 0.5rem; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 14px; padding: 0.6rem; margin: 0 auto 1rem;
  max-width: 300px; box-shadow: var(--schatten-1); font-variant-numeric: tabular-nums; }
.ziffern { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; max-width: 340px; margin: 0 auto; }
.ziffern button { background: var(--flaeche); border: 1px solid var(--rand); font-size: 1.6rem;
  padding: 1.1rem 0; font-weight: 600; box-shadow: var(--schatten-1); }
.ziffern button:active { background: var(--hk-blau); color: #fff; transform: scale(0.96); }

.karten { display: flex; flex-direction: column; gap: 0.8rem; }
.auftrag-karte { background: var(--flaeche); border: 2px solid var(--rand); border-radius: var(--radius-gross);
  padding: 1.1rem 1.2rem; text-align: left; font-size: 1rem; box-shadow: var(--schatten-2);
  transition: border-color var(--schnell), transform var(--schnell), box-shadow var(--sanft);
  animation: hkm-auftauchen var(--sanft) both; }
.auftrag-karte:hover { border-color: var(--hk-blau); transform: translateY(-2px); box-shadow: var(--schatten-3); }
.auftrag-karte:active { border-color: var(--hk-blau); transform: scale(0.99); }
.auftrag-karte .kunde { font-weight: 700; font-size: 1.15rem; letter-spacing: var(--titel-spationierung); }
.auftrag-karte .meta { color: var(--text-gedimmt); font-size: 0.88rem; margin-top: 0.25rem; }
.auftrag-karte .offen { color: var(--akzent-nr); font-weight: 600; }

.position { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-gross);
  padding: 1rem 1.1rem; margin-bottom: 0.8rem; box-shadow: var(--schatten-2);
  animation: hkm-auftauchen var(--sanft) both; }
.position .name { font-weight: 700; font-size: 1.05rem; }
.position .rest { color: var(--text-gedimmt); font-size: 0.85rem; margin: 0.2rem 0 0.7rem; }
.stepper { display: flex; align-items: center; gap: 0.8rem; justify-content: center; }
.stepper button { width: 64px; height: 64px; font-size: 2rem; font-weight: 700;
  background: var(--flaeche); border: 2px solid var(--rand-stark); border-radius: 16px;
  box-shadow: var(--schatten-1); }
.stepper button:active { border-color: var(--hk-blau); background: var(--hk-blau); color: #fff;
  transform: scale(0.95); }
.stepper input { width: 110px; height: 64px; text-align: center; font-size: 1.8rem; font-weight: 700;
  background: var(--flaeche-hell); color: var(--text); border: 2px solid var(--rand-stark);
  border-radius: 16px; font-family: inherit; font-variant-numeric: tabular-nums; }
.stepper input:focus { outline: none; border-color: var(--hk-blau);
  box-shadow: 0 0 0 3px rgba(18, 117, 187, 0.15); }
.stepper .alles { height: 64px; padding: 0 1rem; font-weight: 700; background: var(--flaeche);
  border: 2px solid var(--rand-stark); border-radius: 16px; font-size: 0.95rem; box-shadow: var(--schatten-1); }
.stepper .alles:active { border-color: var(--hk-blau); color: var(--hk-dunkelblau); }

.riesig { display: block; width: 100%; padding: 1.3rem; font-size: 1.25rem; font-weight: 700;
  background: linear-gradient(180deg, var(--hk-blau-hell), var(--hk-blau)); color: #fff; margin-top: 1rem;
  box-shadow: var(--schatten-blau), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform var(--schnell), filter var(--schnell), box-shadow var(--schnell); }
.riesig:hover { filter: brightness(1.06); }
.riesig:active { transform: scale(0.98); }
.riesig:disabled { opacity: 0.45; box-shadow: none; }
.riesig.sekundaer { background: var(--flaeche); color: var(--text); border: 1px solid var(--rand-stark);
  box-shadow: var(--schatten-1); }

.fertig-haken { width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(180deg, #3cb371, var(--gruen)); color: #fff;
  font-size: 3.4rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  margin: 2.5rem auto 1rem; animation: plopp 400ms ease;
  box-shadow: 0 10px 30px -6px rgba(46, 158, 91, 0.55); }
@keyframes plopp { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
#fertig-nummer { font-size: 1.6rem; letter-spacing: var(--titel-spationierung); }
.fertig-aktionen { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }

#toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  background: var(--flaeche); border: 1px solid var(--rand); border-left: 4px solid var(--rot);
  border-radius: 10px; padding: 0.8rem 1.2rem; opacity: 0; transition: opacity 0.2s;
  pointer-events: none; max-width: 90vw; box-shadow: var(--schatten-3); }
#toast.sichtbar { opacity: 1; }