/* ==================================================================
   Trömel Betriebsprogramm - Gestaltung
   ------------------------------------------------------------------
   Markenfarben stammen aus der Logo-Druckdatei:
     Schwarz #1D1D1B  (16,88:1 auf Weiß)
     Grün    #76B729  (2,45:1 - nur Fläche, NIE Text auf Weiß)
   Für grünen Text auf hellem Grund gibt es --gruen-text (#53801D, 4,69:1).

   Bewegung: eine einzige Federkurve (kritisch gedämpft, damping 1.0,
   response 0.35s). Kein Überschwingen, weil in dieser Oberfläche
   nirgends gewischt oder geworfen wird - Bounce ohne Geste wirkt falsch.
   ================================================================== */

:root {
  /* ---- Marke ---- */
  --schwarz:        #1D1D1B;
  --gruen:          #76B729;
  --gruen-text:     #53801D;
  --gruen-dunkel:   #5F9520;

  /* ---- Flächen (hell) ---- */
  --grund:          #F4F4F2;
  --flaeche:        #FFFFFF;
  --flaeche-still:  #FAFAF8;
  --rand:           #E2E2DE;
  --rand-stark:     #C9C9C3;

  /* ---- Schrift ---- */
  --text:           #1D1D1B;
  --text-still:     #5C5C57;
  --text-leise:     #86867F;
  --text-auf-dunkel:#FFFFFF;

  /* ---- Status ---- */
  --status-auf-hof:      #53801D;
  --status-beim-kunden:  #B45309;
  --status-unterwegs:    #1D4ED8;
  --status-werkstatt:    #B91C1C;
  --status-ausgemustert: #6B7280;
  --achtung:             #B91C1C;

  /* ---- Glas ---- */
  --glas:        rgba(255, 255, 255, 0.62);
  --glas-kante:  rgba(255, 255, 255, 0.45);
  --glas-unschaerfe: blur(20px) saturate(180%);

  /* ---- Schatten ---- */
  --schatten-klein:  0 1px 2px rgba(29, 29, 27, 0.06),
                     0 1px 1px rgba(29, 29, 27, 0.04);
  --schatten-karte:  0 1px 3px rgba(29, 29, 27, 0.08),
                     0 8px 24px -12px rgba(29, 29, 27, 0.18);
  --schatten-schwebend: 0 2px 6px rgba(29, 29, 27, 0.10),
                        0 18px 40px -16px rgba(29, 29, 27, 0.30);

  /* ---- Abstände: eine Reihe, nichts daneben ---- */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;
  --raum-8: 4rem;

  --rundung-klein: 8px;
  --rundung:       12px;
  --rundung-gross: 18px;

  /* ---- Feder: damping 1.0, response 0.35s, 512ms Einschwingzeit ---- */
  --feder: linear(0, 0.0208, 0.072, 0.1411, 0.2188, 0.2992, 0.3782, 0.4533,
    0.5228, 0.5862, 0.6431, 0.6936, 0.7381, 0.7769, 0.8106, 0.8397, 0.8646,
    0.886, 0.9041, 0.9196, 0.9327, 0.9437, 0.953, 0.9608, 0.9674, 0.9729,
    0.9775, 0.9813, 0.9845, 0.9872, 0.9894, 0.9912, 0.9928, 0.994, 0.9951,
    0.9959, 0.9967, 0.9972, 0.9977, 0.9981, 0.9985, 0.9987, 0.999);
  --feder-zeit: 512ms;
  --druck-zeit: 100ms;
}

/* ---- Dunkles Erscheinungsbild -------------------------------------
   Nur Farbwerte werden getauscht, keine Regel doppelt geschrieben.  */
@media (prefers-color-scheme: dark) {
  :root {
    --grund:          #121211;
    --flaeche:        #1C1C1A;
    --flaeche-still:  #232320;
    --rand:           #33332F;
    --rand-stark:     #4A4A44;

    --text:           #F2F2EE;
    --text-still:     #B0B0A8;
    --text-leise:     #85857D;

    --status-auf-hof:      #8FCB3F;
    --status-beim-kunden:  #E8A33D;
    --status-unterwegs:    #6E9BFF;
    --status-werkstatt:    #F08585;
    --status-ausgemustert: #9A9A93;
    --achtung:             #F08585;

    --glas:       rgba(28, 28, 26, 0.62);
    --glas-kante: rgba(255, 255, 255, 0.10);

    --schatten-karte: 0 1px 3px rgba(0, 0, 0, 0.4),
                      0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --schatten-schwebend: 0 2px 6px rgba(0, 0, 0, 0.5),
                          0 18px 40px -16px rgba(0, 0, 0, 0.7);
  }
}

/* ==================================================================
   Grundlagen
   ================================================================== */

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

/* Das hidden-Attribut muss gewinnen.
   Es kommt aus dem Browser-Stylesheet, und JEDE eigene display-Angabe
   schlägt es - eine Leiste mit "display: flex" blieb trotz
   hidden="true" sichtbar. Das betraf die Speicherleiste, die
   Fotovorschau und die Standortauswahl in der Fahrer-App. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* Fahrer-App: größere Grundschrift - draußen, mit Abstand zum Gesicht. */
body.ist-app { font-size: 1.0625rem; }

h1, h2, h3 { margin: 0; font-weight: 600; }

h1 {
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

p { margin: 0 0 var(--raum-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--text); text-decoration-color: var(--rand-stark); }
a:hover { text-decoration-color: currentColor; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  background: var(--flaeche-still);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

:focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 2px;
  border-radius: 4px;
}

.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==================================================================
   Kopfleiste (Büro) - Glas, Inhalt scrollt darunter durch
   ================================================================== */

.seitenkopf {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--raum-5);
  padding: var(--raum-3) var(--raum-5);
  background: var(--glas);
  backdrop-filter: var(--glas-unschaerfe);
  -webkit-backdrop-filter: var(--glas-unschaerfe);
  border-bottom: 1px solid var(--glas-kante);
  /* Weiche Kante statt harter Linie (Kap. 12) */
  box-shadow: 0 12px 16px -16px rgba(29, 29, 27, 0.5);
}

.marke {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

.marke-zeichen {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex-shrink: 0;
}
.marke-zeichen.gross { width: 46px; height: 46px; border-radius: 9px; }

.benutzer-name { font-size: 0.875rem; color: var(--text-still); }
.abmelden-form { margin: 0; }

/*
 * Die frühere Umbruchregel für die Kopfzeile ist entfallen: die
 * Navigation steht seit dem Umbau links in der Seitenleiste und nicht
 * mehr zwischen Marke und Benutzernamen.
 */

/* ==================================================================
   Inhaltsflächen
   ================================================================== */

.inhalt { min-height: calc(100dvh - 60px); }

.bereich {
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--raum-6) var(--raum-5) var(--raum-8);
}

.schmal {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--raum-6) var(--raum-5) var(--raum-8);
}

.bereichs-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  flex-wrap: wrap;
  margin-bottom: var(--raum-5);
}

.bereichs-titel { font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em; }

.zurueck {
  display: inline-block;
  margin-bottom: var(--raum-3);
  font-size: 0.875rem;
  color: var(--text-still);
  text-decoration: none;
}
.zurueck::before { content: "← "; }
.zurueck:hover { color: var(--text); }

.zwei-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--raum-6);
}
@media (max-width: 60rem) {
  .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: var(--raum-5);
  box-shadow: var(--schatten-karte);
  margin-bottom: var(--raum-5);
}

.hinweis-text {
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text-still);
}

.neben-text {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text-leise);
}

.listen-zusammenfassung {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--text-still);
  margin-bottom: var(--raum-3);
}

.ist-auffaellig { color: var(--achtung); font-weight: 600; }

.leerer-zustand {
  text-align: center;
  padding: var(--raum-8) var(--raum-5);
  background: var(--flaeche);
  border: 1px dashed var(--rand-stark);
  border-radius: var(--rundung);
  color: var(--text-still);
}
.leerer-zustand .knopf { margin-top: var(--raum-4); }

/* ==================================================================
   Knöpfe - Rückmeldung beim Runterdrücken (Kap. 1)
   ================================================================== */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-height: 44px;
  padding: var(--raum-2) var(--raum-4);
  border: 1px solid var(--rand-stark);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--schatten-klein);
  transform: scale(1);
  transition: transform var(--druck-zeit) var(--feder),
              background var(--feder-zeit) var(--feder);
}
.knopf:hover { background: var(--flaeche-still); }

/* Zusammendrücken, sobald der Finger aufsetzt - nicht beim Loslassen. */
.knopf.wird-gedrueckt,
.knopf:active { transform: scale(0.97); }

.knopf[disabled] { opacity: 0.55; cursor: default; transform: none; }

.knopf-haupt {
  background: var(--schwarz);
  color: var(--text-auf-dunkel);
  border-color: var(--schwarz);
}
.knopf-haupt:hover { background: #2E2E2B; }

.knopf-still {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-still);
}
.knopf-still:hover { background: var(--flaeche-still); color: var(--text); }

.knopf-breit { width: 100%; }
.knopf-gross { min-height: 56px; font-size: 1rem; padding-inline: var(--raum-5); }

.knopf-reihe {
  display: flex;
  gap: var(--raum-3);
  flex-wrap: wrap;
  align-items: center;
}
.knopf-reihe-mitte { justify-content: center; }

.text-knopf {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--gruen-text);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  transform: scale(1);
  transition: transform var(--druck-zeit) var(--feder);
}
.text-knopf.wird-gedrueckt, .text-knopf:active { transform: scale(0.97); }

/* ------------------------------------------------------------------
   Aktionen am Zeilenende (bearbeiten / beenden / berichtigen)
   ------------------------------------------------------------------
   Zwei Textknöpfe nebeneinander in einer Tabellenzelle berührten sich:
   .text-knopf hat kein Polster, also klebten "bearbeiten" und
   "beenden" mit 0 px aneinander und waren 23 px hoch. Hier bekommen
   sie Abstand und eine Trefferfläche, ohne dass die Knöpfe im
   Fließtext (".. oder auswählen.") ihr Polster mitbekommen.
*/
.zeilen-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Bricht die Zelle um, stehen die beiden untereinander - dann
     braucht es auch senkrecht Luft, nicht nur waagerecht. */
  gap: var(--raum-3) var(--raum-4);
  justify-content: flex-end;
}
.zeilen-aktionen .text-knopf,
.text-knopf-flaeche {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-block: var(--raum-2);
}

.rund-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rand);
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--text);
  font-size: 1.125rem;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transform: scale(1);
  transition: transform var(--druck-zeit) var(--feder);
}
.rund-knopf.wird-gedrueckt, .rund-knopf:active { transform: scale(0.97); }

/* ---- Filter-Chips ---- */

.filter-reihe {
  display: flex;
  gap: var(--raum-2);
  flex-wrap: wrap;
  margin-bottom: var(--raum-4);
}

.chip {
  min-height: 36px;
  padding: var(--raum-1) var(--raum-3);
  border: 1px solid var(--rand-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text-still);
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  font-weight: 500;
  cursor: pointer;
  transform: scale(1);
  transition: transform var(--druck-zeit) var(--feder),
              background var(--feder-zeit) var(--feder),
              color var(--feder-zeit) var(--feder);
}
.chip.wird-gedrueckt, .chip:active { transform: scale(0.97); }
.chip.ist-aktiv {
  background: var(--schwarz);
  border-color: var(--schwarz);
  color: var(--text-auf-dunkel);
}

/* ==================================================================
   Formularfelder
   ================================================================== */

.formular { display: grid; gap: var(--raum-4); }

.feld { display: block; }
.feld + .feld { margin-top: var(--raum-4); }

.feld-beschriftung {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-still);
  margin-bottom: var(--raum-1);
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--rand-stark);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
.feld textarea { min-height: 5rem; resize: vertical; }
.feld select[multiple] { min-height: 14rem; }

.feld-hinweis {
  display: block;
  margin-top: var(--raum-1);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--text-leise);
}

/* Umbrechen statt quetschen: ohne flex-wrap wurde auf Handybreite aus
   dem Feld "Ort" ein 26 Pixel breiter Schlitz, in den niemand etwas
   eintragen kann. Die Basisbreiten sagen, ab wann umgebrochen wird. */
.feld-reihe {
  display: flex;
  gap: var(--raum-3);
  align-items: flex-end;
  flex-wrap: wrap;
}
.feld-reihe .feld { flex: 1 1 12rem; min-width: 0; margin-top: 0; }
.feld-eng { flex: 1 1 6rem !important; max-width: 8rem; }

.feld-gruppe {
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  padding: var(--raum-4);
  margin: 0;
}
.feld-gruppe legend {
  padding-inline: var(--raum-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-still);
}

.ankreuz {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-size: 0.875rem;
  color: var(--text-still);
  cursor: pointer;
}
.ankreuz input { width: 20px; height: 20px; }

/* ------------------------------------------------------------------
   Ankreuzfeld mit Beschriftung (.wahl)
   ------------------------------------------------------------------
   Die Klasse stand an 35 Stellen im Markup, aber nie im Stylesheet -
   also blieb das Kästchen bei den 13px des Browsers und die Zeile
   ohne Abstand. Auf einem Tablet im Führerhaus ist das nicht zu
   treffen. Die ganze Zeile ist die Trefferfläche, nicht das Kästchen.
*/
.wahl {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  min-height: 44px;
  padding: var(--raum-2) 0;
  cursor: pointer;
  line-height: 1.4;
}
.wahl input[type="checkbox"],
.wahl input[type="radio"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  /* Mit der Textzeile ausrichten, nicht mit deren Oberkante. */
  margin-top: 0.05em;
  accent-color: var(--schwarz);
  cursor: pointer;
}
.wahl > span { min-width: 0; }
.wahl-breit { width: 100%; }

/* Mehrere Ankreuzfelder untereinander brauchen Luft dazwischen,
   sonst trifft ein Daumen zwei davon. */
.wahl + .wahl { margin-top: var(--raum-2); }

.suchleiste {
  display: flex;
  gap: var(--raum-3);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--raum-4);
}
.suchleiste .feld-suche { flex: 1; min-width: 14rem; }

/* ==================================================================
   Meldungen
   ================================================================== */

.meldung {
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--rundung-klein);
  font-size: 0.9375rem;
  border-left: 4px solid;
}
.meldung-fehler {
  background: color-mix(in srgb, var(--achtung) 10%, var(--flaeche));
  border-color: var(--achtung);
  color: var(--achtung);
}
.meldung-achtung {
  background: color-mix(in srgb, var(--status-beim-kunden) 10%, var(--flaeche));
  border-color: var(--status-beim-kunden);
}
.meldung-gut {
  background: color-mix(in srgb, var(--gruen) 14%, var(--flaeche));
  border-color: var(--gruen-text);
}

/* ==================================================================
   Status-Kennzeichnung
   ================================================================== */

.status-marke {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.status-marke.gross { font-size: 0.875rem; padding: 0.25em 0.8em; }

.status-punkt {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-auf_hof      { color: var(--status-auf-hof); }
.status-beim_kunden  { color: var(--status-beim-kunden); }
.status-unterwegs    { color: var(--status-unterwegs); }
.status-werkstatt    { color: var(--status-werkstatt); }
.status-ausgemustert { color: var(--status-ausgemustert); }

/* ==================================================================
   Tabellen
   ================================================================== */

.tabellen-huelle {
  overflow-x: auto;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  box-shadow: var(--schatten-karte);
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tabelle th, .tabelle td {
  text-align: left;
  padding: var(--raum-3) var(--raum-4);
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}
.tabelle tbody tr:last-child th,
.tabelle tbody tr:last-child td { border-bottom: 0; }

.tabelle thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-leise);
  background: var(--flaeche-still);
  position: sticky;
  top: 0;
}

.tabelle tbody tr:hover { background: var(--flaeche-still); }

.nummern-verweis {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text);
}
.nummern-verweis:hover { text-decoration: underline; }

.einfache-liste { list-style: none; margin: 0; padding: 0; }
.einfache-liste li {
  padding: var(--raum-3) 0;
  border-bottom: 1px solid var(--rand);
}
.einfache-liste li:last-child { border-bottom: 0; }

.daten-liste {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: var(--raum-2) var(--raum-4);
  margin: 0;
}
.daten-liste dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-leise);
}
.daten-liste dd { margin: 0; }

/* ==================================================================
   Kennzahlen
   ================================================================== */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-3);
  margin-bottom: var(--raum-5);
}

.kennzahl {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  padding: var(--raum-3);
  text-align: center;
}

.kennzahl-wert {
  display: block;
  font-size: 1.75rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kennzahl-text {
  display: block;
  margin-top: var(--raum-1);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--text-leise);
}

/* ==================================================================
   Verlauf
   ================================================================== */

.verlauf { list-style: none; margin: 0; padding: 0 0 0 var(--raum-5); }

.verlauf-punkt {
  position: relative;
  padding: 0 0 var(--raum-5) var(--raum-4);
  border-left: 2px solid var(--rand);
}
.verlauf-punkt:last-child { border-left-color: transparent; padding-bottom: 0; }

.verlauf-punkt::before {
  content: "";
  position: absolute;
  left: -7px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--flaeche);
  border: 2px solid var(--rand-stark);
}
.verlauf-abgestellt::before { border-color: var(--status-beim-kunden); }
.verlauf-abgeholt::before   { border-color: var(--status-unterwegs); }
.verlauf-auf_hof::before    { border-color: var(--status-auf-hof); }
.verlauf-werkstatt::before  { border-color: var(--status-werkstatt); }

.verlauf-kopf {
  display: flex;
  justify-content: space-between;
  gap: var(--raum-3);
  flex-wrap: wrap;
}
.verlauf-art { font-weight: 600; font-size: 0.9375rem; }
.verlauf-zeit {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.verlauf-koerper { font-size: 0.875rem; color: var(--text-still); }
.verlauf-koerper > span { display: block; }
.verlauf-notiz {
  margin: var(--raum-2) 0 0;
  padding: var(--raum-2) var(--raum-3);
  background: var(--flaeche-still);
  border-radius: var(--rundung-klein);
  font-size: 0.875rem;
}

/* ==================================================================
   Karte (Büro)
   ================================================================== */

.karten-buehne {
  display: grid;
  grid-template-columns: 23rem minmax(0, 1fr);
  height: calc(100dvh - 61px);
}
@media (max-width: 60rem) {
  .karten-buehne { grid-template-columns: minmax(0, 1fr); height: auto; }
  .karten-flaeche { height: 60dvh; }
}

.karten-leiste {
  overflow-y: auto;
  padding: var(--raum-5);
  border-right: 1px solid var(--rand);
  background: var(--flaeche);
}

.karten-flaeche { position: relative; }
#karte { width: 100%; height: 100%; }
.karte-klein {
  height: 20rem;
  border-radius: var(--rundung);
  border: 1px solid var(--rand);
  overflow: hidden;
}

.trefferliste { list-style: none; margin: 0; padding: 0; }

.treffer-knopf {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: var(--raum-3);
  border: 0;
  border-bottom: 1px solid var(--rand);
  background: none;
  font: inherit;
  cursor: pointer;
  transform: scale(1);
  transition: transform var(--druck-zeit) var(--feder),
              background var(--feder-zeit) var(--feder);
}
.treffer-knopf:hover { background: var(--flaeche-still); }
.treffer-knopf.wird-gedrueckt, .treffer-knopf:active { transform: scale(0.99); }

.treffer-kopf { display: flex; align-items: center; gap: var(--raum-2); }
.treffer-nummer {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.treffer-wo { font-size: 0.8125rem; color: var(--text-still); }
.treffer-zeit { font-size: 0.75rem; color: var(--text-leise); }

/* Kartennadeln */
.container-nadel { background: none; border: 0; }
.nadel-koerper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50% 50% 50% 2px;
  transform: rotate(45deg);
  background: var(--nadel-farbe, #4b5563);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.nadel-text {
  transform: rotate(-45deg);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.popup-neben { color: #6B7280; font-size: 0.8125rem; }

/* ==================================================================
   Anmeldung
   ================================================================== */

.anmelde-buehne {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--raum-5);
}
.anmelde-karte {
  width: 100%;
  max-width: 22rem;
  display: grid;
  gap: var(--raum-4);
  justify-items: stretch;
}
.anmelde-karte .marke-zeichen { justify-self: center; }
.anmelde-karte h1 { text-align: center; }
.anmelde-karte .hinweis-text { text-align: center; margin: 0; }

/* ==================================================================
   Fahrer-App
   ================================================================== */

body.ist-app { background: var(--grund); }

.app {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--raum-4) var(--raum-4) var(--raum-8);
  padding-bottom: max(var(--raum-8), env(safe-area-inset-bottom));
}

/* Gestapelte Knöpfe in der Fahrer-App standen ohne jeden Abstand
   aufeinander - "Nummer von Hand eingeben" klebte an "Fahrauftrag
   anlegen". Wer im Fahrerhaus mit Handschuh tippt, trifft dann das
   Falsche.

   Bewusst über jeden breiten Knopf statt über "+": zwischen zwei
   Knöpfen kann ein verstecktes Feld stehen (die Dateieingabe der
   Kamera), und dann greift der Geschwisterwähler nicht mehr. Ein
   Abstand, der von der Reihenfolge der Nachbarn abhängt, geht beim
   nächsten Einschub wieder verloren. */
.app .schritt > .knopf-breit,
.app .schritt > .riesen-knopf {
  margin-top: var(--raum-3);
}

.schritt { display: none; }
.schritt.ist-sichtbar {
  display: block;
  animation: schritt-auf var(--feder-zeit) var(--feder) both;
}

/* Ein- und Ausgang laufen denselben Weg (Kap. 7). */
@keyframes schritt-auf {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.app-statusleiste {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: calc(var(--raum-4) * -1) calc(var(--raum-4) * -1) var(--raum-4);
  padding: var(--raum-2) var(--raum-4);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  color: #fff;
}
.app-statusleiste.ist-offline  { background: var(--status-beim-kunden); }
.app-statusleiste.ist-sendend  { background: var(--status-unterwegs); }
.app-statusleiste.ist-fehler   { background: var(--achtung); }

.app-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  margin-bottom: var(--raum-5);
}
.app-kopf > div { flex: 1; min-width: 0; }

.app-begruessung {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.app-titel {
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 600;
}
.app-titel.gross {
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.app-abschnitt {
  margin: var(--raum-6) 0 var(--raum-3);
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
}

/* Die eine wichtigste Aktion - alles andere ist kleiner (Kap. 16). */
.riesen-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--raum-3);
  width: 100%;
  min-height: 160px;
  margin-bottom: var(--raum-3);
  border: 0;
  border-radius: var(--rundung-gross);
  background: var(--schwarz);
  color: var(--text-auf-dunkel);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--schatten-schwebend);
  transform: scale(1);
  transition: transform var(--druck-zeit) var(--feder);
}
.riesen-knopf.wird-gedrueckt, .riesen-knopf:active { transform: scale(0.97); }

.riesen-knopf-symbol { width: 48px; height: 48px; color: var(--gruen); }
.riesen-knopf-symbol svg { width: 100%; height: 100%; }

.riesen-knopf-text {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app-zustand {
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  border: 1px solid currentColor;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Vorgangswahl - vier gleich große Ziele, mit Handschuhen treffbar */
.wahl-gitter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raum-3);
}

.wahl-knopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--raum-1);
  min-height: 92px;
  padding: var(--raum-4);
  border: 1px solid var(--rand-stark);
  border-radius: var(--rundung);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--schatten-klein);
  transform: scale(1);
  transition: transform var(--druck-zeit) var(--feder);
}
.wahl-knopf.wird-gedrueckt, .wahl-knopf:active { transform: scale(0.97); }

.wahl-knopf-titel { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em; }
.wahl-knopf-text { font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--text-leise); }

.app-liste { list-style: none; margin: 0; padding: 0; }

.app-liste-eintrag {
  display: flex;
  align-items: baseline;
  gap: var(--raum-3);
  padding: var(--raum-3) 0;
  border-bottom: 1px solid var(--rand);
}
.app-liste-eintrag.ist-neu { animation: schritt-auf var(--feder-zeit) var(--feder) both; }

.app-liste-nummer {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.app-liste-text { flex: 1; font-size: 0.875rem; color: var(--text-still); }
.app-liste-zeit {
  font-size: 0.8125rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.app-liste-leer {
  padding: var(--raum-4) 0;
  color: var(--text-leise);
  font-size: 0.875rem;
}

.app-liste-waehlbar .app-liste-eintrag { padding: 0; border-bottom: 1px solid var(--rand); }

.liste-knopf {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 56px;
  padding: var(--raum-3);
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: scale(1);
  transition: transform var(--druck-zeit) var(--feder),
              background var(--feder-zeit) var(--feder);
}
.liste-knopf.wird-gedrueckt, .liste-knopf:active { transform: scale(0.99); }
.app-liste-eintrag.ist-gewaehlt {
  background: color-mix(in srgb, var(--gruen) 16%, var(--flaeche));
  border-left: 4px solid var(--gruen);
}
.liste-knopf-titel { font-weight: 600; font-size: 1rem; }
.liste-knopf-text { font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--text-leise); }

.gewaehlt-anzeige {
  margin: var(--raum-3) 0 0;
  padding: var(--raum-3);
  border-radius: var(--rundung-klein);
  background: color-mix(in srgb, var(--gruen) 16%, var(--flaeche));
  font-weight: 600;
  font-size: 0.9375rem;
}

/* GPS */
.gps-karte {
  padding: var(--raum-4);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  display: grid;
  gap: var(--raum-2);
  justify-items: start;
}
.gps-zustand { margin: 0; font-weight: 600; font-size: 0.9375rem; }
.gps-zustand.ist-suchend { color: var(--text-still); }
.gps-zustand.ist-da      { color: var(--gruen-text); }
.gps-zustand.ist-fehlend { color: var(--status-beim-kunden); }
.gps-genauigkeit { margin: 0; font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--text-leise); }
.gps-genauigkeit.ist-ungenau { color: var(--achtung); font-weight: 600; }

.app-aufklapp {
  margin-top: var(--raum-5);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
}
.app-aufklapp summary {
  padding: var(--raum-4);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  min-height: 44px;
  transform: scale(1);
  transform-origin: left center;
  transition: transform var(--druck-zeit) var(--feder);
}
.app-aufklapp summary.wird-gedrueckt,
.app-aufklapp summary:active { transform: scale(0.985); }
.app-aufklapp-inhalt { padding: 0 var(--raum-4) var(--raum-4); display: grid; gap: var(--raum-3); }

/* ------------------------------------------------------------------
   Aufklappbares Feld in Bueromasken
   ------------------------------------------------------------------
   Fuer Angaben, die selten gebraucht werden, aber wichtig sind, wenn
   doch - den bestimmten Behaelter etwa. Eingeklappt kosten sie eine
   Zeile statt einer halben Bildschirmhoehe; wer sie braucht, findet
   sie an der Stelle, an der er sie sucht.
*/
.aufklapp-feld {
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  background: var(--grund);
}
.aufklapp-feld summary {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  min-height: 44px;
  padding: var(--raum-2) var(--raum-4);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.aufklapp-feld summary::-webkit-details-marker { display: none; }
.aufklapp-feld summary::before {
  content: "›";
  display: inline-block;
  width: 0.75rem;
  color: var(--text-leise);
  transition: transform var(--feder-zeit) var(--feder);
}
.aufklapp-feld[open] summary::before { transform: rotate(90deg); }
.aufklapp-feld summary:hover { background: var(--flaeche-still); }
.aufklapp-feld-inhalt {
  padding: 0 var(--raum-4) var(--raum-4);
  display: grid;
  gap: var(--raum-3);
}
.aufklapp-feld-inhalt .hinweis-text { margin: 0; }
.foto-vorschau { display: grid; gap: var(--raum-2); justify-items: start; }
.foto-vorschau img {
  max-width: 100%;
  border-radius: var(--rundung-klein);
  border: 1px solid var(--rand);
}

/* Fußleiste: Glas, damit der Inhalt darunter durchscrollt (Kap. 12) */
.app-fussleiste {
  position: sticky;
  bottom: 0;
  margin: var(--raum-6) calc(var(--raum-4) * -1) 0;
  padding: var(--raum-3) var(--raum-4);
  padding-bottom: max(var(--raum-3), env(safe-area-inset-bottom));
  display: grid;
  gap: var(--raum-2);
  background: var(--glas);
  backdrop-filter: var(--glas-unschaerfe);
  -webkit-backdrop-filter: var(--glas-unschaerfe);
  border-top: 1px solid var(--glas-kante);
  box-shadow: 0 -12px 16px -16px rgba(29, 29, 27, 0.5);
}

/* Kamera */
.kamera-huelle {
  position: relative;
  margin: calc(var(--raum-4) * -1) calc(var(--raum-4) * -1) 0;
  background: #000;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
#kamera-bild { width: 100%; height: 100%; object-fit: cover; }

.kamera-rahmen {
  position: absolute;
  inset: 18%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--rundung-gross);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
}

.kamera-leiste { padding-top: var(--raum-5); display: grid; gap: var(--raum-4); }
.kamera-hinweis { text-align: center; font-size: 1.0625rem; }
.kamera-fehler {
  margin: 0;
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--rundung-klein);
  background: color-mix(in srgb, var(--achtung) 10%, var(--flaeche));
  color: var(--achtung);
  font-size: 0.9375rem;
}

/* Fertig-Bild */
.schritt-fertig { text-align: center; padding-top: var(--raum-8); }
.schritt-fertig .app-fussleiste { text-align: left; }
.fertig-text { color: var(--text-still); margin-top: var(--raum-3); }

.haken {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--raum-5);
  color: var(--gruen-text);
}
.haken.ist-lokal { color: var(--status-beim-kunden); }
.haken svg { width: 100%; height: 100%; }
.haken circle, .haken path {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.haken circle { stroke-dasharray: 152; stroke-dashoffset: 152;
  animation: haken-kreis var(--feder-zeit) var(--feder) forwards; }
.haken path { stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: haken-strich var(--feder-zeit) var(--feder) 160ms forwards; }
@keyframes haken-kreis  { to { stroke-dashoffset: 0; } }
@keyframes haken-strich { to { stroke-dashoffset: 0; } }

/* Dialoge - deckend, weil sie über Glas liegen (nie Glas auf Glas) */
.dialog {
  border: 0;
  border-radius: var(--rundung-gross);
  padding: 0;
  max-width: 28rem;
  width: calc(100% - var(--raum-6));
  background: var(--flaeche);
  color: var(--text);
  box-shadow: var(--schatten-schwebend);
}
.dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.dialog[open] { animation: dialog-auf var(--feder-zeit) var(--feder) both; }
@keyframes dialog-auf {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.dialog-inhalt { padding: var(--raum-5); display: grid; gap: var(--raum-4); }

/* ==================================================================
   Aufkleberbogen
   ================================================================== */

.bogen {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 3), 70mm);
  grid-auto-rows: 50.8mm;
  justify-content: center;
  gap: 0;
  margin: var(--raum-6) auto;
  background: #fff;
}

/* ---- QR-Code am einzelnen Container ---- */
.qr-karte { display: grid; gap: var(--raum-3); justify-items: start; }
.qr-bild {
  width: 11rem;
  height: 11rem;
  /* Ein QR-Code ist ein Raster: weich skaliert wird er unscharf und
     schlechter lesbar. */
  image-rendering: pixelated;
  background: #fff;
  padding: var(--raum-2);
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
}

/* ---- Auswahlliste auf der QR-Seite ---- */
.wahl-liste {
  list-style: none;
  margin: 0;
  padding: var(--raum-2);
  display: grid;
  gap: var(--raum-1);
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  background: var(--flaeche-still);
}
.wahl-zeile .wahl { width: 100%; margin: 0; }
.wahl-zeile .neben-text { display: block; }

.aufkleber {
  display: flex;
  align-items: center;
  gap: 3mm;
  padding: 4mm;
  border: 1px dashed #d4d4d4;
  color: #000;
  break-inside: avoid;
}
.aufkleber-qr { width: 32mm; height: 32mm; flex-shrink: 0; }
.aufkleber-text { display: grid; gap: 1mm; min-width: 0; }
.aufkleber-nummer {
  font-size: 15pt;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.aufkleber-zusatz { font-size: 8pt; line-height: 1.2; }
.aufkleber-fuss { font-size: 6.5pt; letter-spacing: 0.03em; color: #444; }

@media print {
  .seitenkopf, .nicht-drucken { display: none !important; }
  body { background: #fff; }
  .inhalt { min-height: 0; }
  .bogen { margin: 0; }
  .aufkleber { border-color: transparent; }

  /* Die @page-Regel steht NICHT hier, sondern in aufkleber.ts.
     @page gilt immer fürs ganze Dokument, nie für einen Selektor -
     zwei Regeln in einer gemeinsamen Datei überschreiben einander,
     und benannte Seiten (@page name) verwirft die Engine still. */
}

/* ==================================================================
   Zugänglichkeit - alle drei Signale (Kap. 14)
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  /* Kein Wegfall der Rückmeldung - nur ohne Bewegung. */
  .knopf.wird-gedrueckt, .knopf:active,
  .wahl-knopf.wird-gedrueckt, .wahl-knopf:active,
  .riesen-knopf.wird-gedrueckt, .riesen-knopf:active,
  .chip.wird-gedrueckt, .rund-knopf.wird-gedrueckt {
    transform: none;
    filter: brightness(0.92);
  }
  .schritt.ist-sichtbar, .dialog[open], .app-liste-eintrag.ist-neu {
    animation: nur-einblenden 150ms ease both;
  }
  @keyframes nur-einblenden { from { opacity: 0; } to { opacity: 1; } }
  .haken circle, .haken path { stroke-dashoffset: 0; animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .seitenkopf, .seitenleiste, .app-fussleiste, .speicherleiste{
    background: var(--flaeche);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --rand: #767670;
    --rand-stark: #3A3A36;
    --text-still: #333330;
    --text-leise: #4A4A45;
  }
  .knopf, .chip, .wahl-knopf, .karte, .tabellen-huelle, .kennzahl {
    border-width: 2px;
  }
  .seitenkopf, .seitenleiste, .app-fussleiste, .speicherleiste{
    background: var(--flaeche);
    backdrop-filter: none;
    border-color: var(--rand-stark);
  }
  .leiste-punkt.ist-aktiv { outline: 2px solid var(--text); }
}

/* ---- Gruppierte Kartennadeln ---- */

.nadel-buendel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--nadel-farbe, #4b5563);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Gemischte Gruppe: heller Ring als Hinweis "hier steht nicht alles gleich" */
.nadel-buendel.ist-gemischt {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nadel-farbe) 45%, transparent),
              0 2px 8px rgba(0, 0, 0, 0.4);
}
.nadel-anzahl {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.nadel-popup { display: grid; gap: 2px; }
.nadel-popup strong { font-size: 0.9375rem; }
.popup-anzahl {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: var(--raum-1);
}
.popup-status { font-size: 0.8125rem; font-weight: 600; }
.popup-liste {
  list-style: none;
  margin: var(--raum-2) 0 0;
  padding: 0;
  max-height: 190px;
  overflow-y: auto;
}
.popup-liste li {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  padding: 3px 0;
  border-bottom: 1px solid var(--rand);
}
.popup-liste li:last-child { border-bottom: 0; }
.popup-verweis {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.8125rem;
}

/* Von der Nadel in den Fahrauftrag. Steht bewusst als Knopf da und
   nicht als weiterer Textverweis: es ist die Handlung, nicht das
   Nachschlagen. */
.popup-fahrt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: var(--raum-2);
  padding: var(--raum-1) var(--raum-3);
  border: 1px solid var(--schwarz);
  border-radius: var(--rundung-klein);
  background: var(--schwarz);
  color: var(--text-auf-dunkel);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.popup-fahrt:hover { background: #2E2E2B; }
/* In der Liste steht die Fahrt neben der Nummer und darf nicht die
   halbe Zeile fressen. */
.popup-fahrt.ist-knapp {
  min-height: 28px;
  margin-top: 0;
  margin-left: auto;
  padding: 2px var(--raum-2);
  font-size: 0.75rem;
}
.popup-tage {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-leise);
  white-space: nowrap;
}

/* Leaflet-Popup an die eigene Gestaltung angleichen */
.leaflet-popup-content-wrapper {
  border-radius: var(--rundung) !important;
  background: var(--flaeche) !important;
  color: var(--text) !important;
  box-shadow: var(--schatten-schwebend) !important;
}
.leaflet-popup-tip { background: var(--flaeche) !important; }
.leaflet-popup-content { margin: var(--raum-4) !important; }

/* Fahrer-Ansicht: nur die Marke oben, der Rest steht im App-Kopf */
.seitenkopf.ist-schlank {
  padding: var(--raum-2) var(--raum-4);
  gap: var(--raum-2);
}
.seitenkopf.ist-schlank .marke-zeichen { width: 26px; height: 26px; border-radius: 5px; }

/* ==================================================================
   Dispo-Karten
   ================================================================== */

.dispo { display: flex; flex-direction: column; height: calc(100dvh - 61px); }

/* Spalten */
.tafel {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 1fr);
  gap: var(--raum-3);
  padding: var(--raum-4);
  overflow-x: auto;
  align-items: start;
  height: 100%;
}

.spalte {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  max-height: 100%;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: var(--raum-3);
  transition: border-color var(--feder-zeit) var(--feder);
}
/* Die Zielmarkierung liegt als eigene Ebene darüber und wird nur
   ein- und ausgeblendet. Ein background-Wechsel auf einer so großen
   Fläche müsste der Browser neu zeichnen - und zwar genau während
   des Ziehens, wo jedes Bild zählt (Kap. 11). */
.spalte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gruen);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--feder-zeit) var(--feder);
}
.spalte.ist-ziel { border-color: var(--gruen); }
.spalte.ist-ziel::after { opacity: 0.08; }

.spalte-anzahl {
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
  background: var(--grund);
  border-radius: 999px;
  padding: 0.1em 0.55em;
}
.spalte-leer {
  padding: var(--raum-4) var(--raum-2);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-leise);
  border: 1px dashed var(--rand);
  border-radius: var(--rundung-klein);
}

/* Auftragskarten */
.auftrag-karte {
  display: grid;
  gap: 2px;
  padding: var(--raum-3);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--karten-farbe, var(--rand-stark));
  border-radius: var(--rundung-klein);
  box-shadow: var(--schatten-klein);
  cursor: grab;
  touch-action: none;      /* sonst scrollt die Seite statt zu ziehen */
  user-select: none;
  transform: scale(1);
  transition: transform var(--druck-zeit) var(--feder),
              box-shadow var(--feder-zeit) var(--feder);
}
.auftrag-karte:active { cursor: grabbing; }
.auftrag-karte.wird-gedrueckt:not(.wird-gezogen) { transform: scale(0.98); }

.art-stellen  { --karten-farbe: #53801D; }
.art-abholen  { --karten-farbe: #B45309; }
.art-tausch   { --karten-farbe: #1D4ED8; }
.art-umsetzen { --karten-farbe: #7C3AED; }

.auftrag-karte.ist-eilig { border-color: var(--achtung); }
.auftrag-karte.ist-erledigt { opacity: 0.5; cursor: default; }
.auftrag-karte.ist-unterwegs {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-unterwegs) 40%, transparent),
              var(--schatten-klein);
}
.auftrag-karte.ist-alt { border-style: dashed; }

/* Beim Ziehen: die Karte liegt frei über der Seite */
.auftrag-karte.wird-gezogen {
  position: fixed;
  z-index: 100;
  margin: 0;
  cursor: grabbing;
  box-shadow: var(--schatten-schwebend);
  pointer-events: none;

  /* KEIN Übergang beim Ziehen.
     Die Grundregel der Karte hat "transition: transform 100ms" für das
     Zusammendrücken beim Antippen. Beim Ziehen wäre das fatal: jede
     Zeigerbewegung startet dann eine neue 100-ms-Feder zum neuen Ort,
     und die Karte läuft dem Finger dauerhaft hinterher statt an ihm zu
     kleben (Kap. 2: "touch and content move together").
     Das Absetzen setzt die Feder danach direkt am Element wieder ein. */
  transition: none;
  /* transform setzt wochenplan.js - Verschiebung, Vergrößerung und leichte
     Neigung stecken dort in einem Wert. */
}
body.zieht-gerade { cursor: grabbing; }
body.zieht-gerade .auftrag-karte:not(.wird-gezogen) { cursor: grabbing; }

.auftrag-platzhalter {
  border: 2px dashed var(--gruen);
  border-radius: var(--rundung-klein);
  background: color-mix(in srgb, var(--gruen) 10%, transparent);
}

.karte-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
}
.karte-art {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--karten-farbe);
}
.karte-eilt {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--achtung);
  border-radius: 3px;
  padding: 0.1em 0.4em;
}
.karte-zeit {
  margin-left: auto;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-still);
}
.karte-kunde { font-weight: 600; font-size: 0.9375rem; line-height: 1.25; }
.karte-ort { font-size: 0.8125rem; color: var(--text-still); line-height: 1.3; }
.karte-fuss {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--raum-2);
  margin-top: var(--raum-1);
  font-size: 0.75rem;
  color: var(--text-leise);
  flex-wrap: nowrap;
}
/* Eine Zeile, nicht zwei: die Spalte ist schmal, und eine Karte, die
   für die Containernummer eine zweite Zeile aufmacht, verdrängt den
   nächsten Auftrag aus dem Blickfeld. Was nicht passt, wird gekürzt -
   vollständig steht es im Auftrag. */
.karte-container {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Welcher Behälter gefahren wird: eigene Zeile, Farbe des Typs.
   Davon hängt ab, welcher Wagen passt - das muss ins Auge fallen. */
.karte-typ {
  --typ-farbe: var(--text-still);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.375rem;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
}
.karte-typ-name {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  flex: none;
}
.karte-typ-name::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 2px;
  background: var(--typ-farbe);
}
.karte-typ.ist-offen .karte-typ-name {
  font-weight: 500;
  font-style: italic;
  color: var(--text-leise);
}
.karte-typ.ist-offen .karte-typ-name::before {
  background: transparent;
  border: 1.5px dashed var(--rand-stark);
}
.karte-typ-nummer {
  font-size: 0.75rem;
  color: var(--text-still);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Bearbeiten an der Karte: am PC klein und unaufdringlich, mit dem
   Finger (Tablet, Handy) groß genug zum sicheren Treffen. */
.karte-bearbeiten {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  margin-top: var(--raum-1);
  padding: 0.125rem 0.625rem;
  min-height: 1.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-still);
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: var(--rundung-klein);
  text-decoration: none;
  cursor: pointer;
}
.karte-bearbeiten:hover,
.karte-bearbeiten:focus-visible {
  color: var(--text);
  border-color: var(--text-still);
  background: var(--flaeche-still);
}
@media (pointer: coarse) {
  .karte-bearbeiten {
    justify-self: stretch;
    justify-content: center;
    min-height: 2.75rem;
    font-size: 0.875rem;
    margin-top: var(--raum-2);
  }
}

/* Eine Auftragsnummer über zwei Zeilen zu brechen ("A-2026-" / "0024")
   macht sie unlesbar und die Karte höher. Lieber umbricht die Zeile. */
.karte-nummer { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Hängt ein Papier am Auftrag - meist der Wiegeschein vom Entsorger -,
   soll die Dispo das sehen, ohne den Auftrag zu öffnen. */
.karte-papier {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-leise);
  white-space: nowrap;
}
.karte-warnung {
  margin-top: var(--raum-1);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--achtung);
}
.karte-lage {
  margin-top: var(--raum-1);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--status-unterwegs);
}

.liegengeblieben {
  margin-top: var(--raum-4);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--rand);
}
.liegengeblieben h3 {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--achtung);
  margin-bottom: var(--raum-1);
}

.dialog-breit { max-width: 34rem; }
.auftrag-offen       { color: var(--text-still); }
.auftrag-eingeplant  { color: var(--status-unterwegs); }
.auftrag-unterwegs   { color: var(--status-beim-kunden); }
.auftrag-erledigt    { color: var(--status-auf-hof); }
.auftrag-abgebrochen { color: var(--status-ausgemustert); }

.wahl-gitter-eng { gap: var(--raum-2); }
.wahl-knopf-wahl { cursor: pointer; }
.wahl-knopf-wahl:has(input:checked) {
  border-color: var(--gruen);
  background: color-mix(in srgb, var(--gruen) 12%, var(--flaeche));
}

@media (prefers-reduced-motion: reduce) {
  /* Die Verschiebung bleibt - sie IST die Geste. Nur die Neigung und
     das Anheben fallen weg, das sind Verzierungen. */
  .auftrag-karte.wird-gezogen { rotate: none; }
}

/* ---- Tour in der Fahrer-App ---- */

.tour { margin-bottom: var(--raum-5); }
.tour-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-3);
}
.tour-kopf .app-abschnitt { margin: 0 0 var(--raum-2); }
.tour-zaehler {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.tour-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--raum-3); }

.tour-halt {
  display: grid;
  gap: var(--raum-1);
  padding: var(--raum-4);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  box-shadow: var(--schatten-klein);
}
/* Der nächste Halt ist der, um den es gerade geht. */
.tour-halt.ist-naechster {
  border-color: var(--schwarz);
  box-shadow: var(--schatten-karte);
}
.tour-halt.ist-erledigt { opacity: 0.55; }

.tour-halt-kopf { display: flex; align-items: center; gap: var(--raum-2); flex-wrap: wrap; }
.tour-art {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gruen-text);
}
.tour-zeit {
  margin-left: auto;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-still);
}
/* Liegengeblieben aus den Vortagen: nicht zu übersehen. */
.tour-halt.ist-ueberfaellig {
  border-left: 4px solid var(--achtung);
  background: color-mix(in srgb, var(--achtung) 5%, var(--flaeche));
}
.tour-ueberfaellig {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--achtung);
}
.liegen-meldung { cursor: pointer; }

.tour-kunde { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.tour-ort { font-size: 0.9375rem; color: var(--text-still); }
.tour-container { font-size: 0.875rem; font-weight: 600; }
.tour-notiz {
  margin-top: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  background: var(--flaeche-still);
  border-radius: var(--rundung-klein);
  font-size: 0.875rem;
}
.tour-telefon {
  display: inline-block;
  margin-top: var(--raum-1);
  font-size: 0.9375rem;
  font-weight: 600;
}
.tour-lage {
  margin-top: var(--raum-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gruen-text);
}
/* Noch nicht beim Server: der Fahrer soll sehen, dass es raus MUSS,
   ohne dass es aussieht wie ein Fehler. */
.tour-lage.ist-lokal { color: var(--status-unterwegs); font-style: italic; }
.tour-knoepfe {
  display: flex;
  /* "Erledigen" und "Geht nicht" standen 8 px auseinander. Das eine
     schließt den Auftrag ab, das andere bricht ihn ab - bei
     Schlaglöchern ist das zu wenig Unterschied für einen Daumen. */
  gap: var(--raum-4);
  flex-wrap: wrap;
  margin-top: var(--raum-3);
}
/* Die Zeile fürs Papier steht für sich: sie gehört nicht zu
   "Erledigen/Geht nicht" und soll auch nicht danebengreifbar sein. */
.tour-knoepfe-papier {
  margin-top: var(--raum-4);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--rand);
  align-items: center;
}
.tour-knoepfe-papier .knopf { flex: 1 1 auto; }
.tour-dokumente {
  font-size: 0.8125rem;
  color: var(--text-leise);
}
.tour-knoepfe .knopf { flex: 1; min-height: 52px; min-width: 7rem; }

/* ==================================================================
   Kundenakte
   ================================================================== */

.reiter {
  display: flex;
  gap: var(--raum-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--rand);
  margin-bottom: var(--raum-5);
  scrollbar-width: none;
  /* Weiche Kante rechts: auf schmalen Bildschirmen liegen Reiter
     außerhalb des Sichtfelds, und ein hart abgeschnittenes Wort sagt
     nicht, dass da noch etwas kommt (Kap. 12/16). */
  mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}
.reiter::-webkit-scrollbar { display: none; }

.reiter-knopf {
  padding: var(--raum-3) var(--raum-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-still);
  white-space: nowrap;
  cursor: pointer;
  transform: scale(1);
  transition: transform var(--druck-zeit) var(--feder),
              color var(--feder-zeit) var(--feder),
              border-color var(--feder-zeit) var(--feder);
}
.reiter-knopf:hover { color: var(--text); }
.reiter-knopf.wird-gedrueckt, .reiter-knopf:active { transform: scale(0.97); }
.reiter-knopf.ist-aktiv {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--gruen);
}

.reiter-tafel { display: none; }
.reiter-tafel.ist-sichtbar {
  display: block;
  animation: schritt-auf var(--feder-zeit) var(--feder) both;
}

.kachel-liste {
  list-style: none;
  margin: 0 0 var(--raum-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--raum-3);
}
.kachel {
  display: grid;
  gap: var(--raum-1);
  padding: var(--raum-4);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  box-shadow: var(--schatten-klein);
}
.kachel-kopf { display: flex; align-items: center; gap: var(--raum-2); flex-wrap: wrap; }
.kachel .knopf { justify-self: start; margin-top: var(--raum-2); }

.marke-klein {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gruen-text);
  border-radius: 3px;
  padding: 0.1em 0.4em;
}

.daten-liste.kompakt { gap: var(--raum-1) var(--raum-3); font-size: 0.875rem; }

/* ---- Dateiablage ---- */

.ablage {
  padding: var(--raum-6) var(--raum-5);
  border: 2px dashed var(--rand-stark);
  border-radius: var(--rundung);
  text-align: center;
  background: var(--flaeche-still);
  transition: border-color var(--feder-zeit) var(--feder),
              background var(--feder-zeit) var(--feder);
}
.ablage.ist-ziel {
  border-color: var(--gruen);
  background: color-mix(in srgb, var(--gruen) 10%, var(--flaeche));
}
.ablage-text { font-size: 1rem; margin-bottom: var(--raum-1); }
.ablage-einstellung { margin: var(--raum-4) 0; align-items: flex-end; }

.dokument-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--raum-2); }

.dokument {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-3);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
}
.dokument.laeuft-ab { border-color: var(--status-beim-kunden); }
.dokument.ist-laedt { opacity: 0.6; }
.dokument.ist-fehler { border-color: var(--achtung); }

.dokument-typ {
  flex-shrink: 0;
  width: 3.25rem;
  padding: var(--raum-2) 0;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-auf-dunkel);
  background: var(--schwarz);
  border-radius: 5px;
}
.dokument-mitte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.dokument-name { font-weight: 600; font-size: 0.9375rem; }
.dokument-ablauf { font-size: 0.8125rem; }
/* 4 px zwischen "Herunterladen" und "Entfernen" waren zu wenig -
   danebengetippt heißt hier: Nachweis weg statt geöffnet. */
.dokument-knoepfe { display: flex; gap: var(--raum-3); flex-shrink: 0; flex-wrap: wrap; }

/* ---- Papiere zur Fahrt, auf dem Beleg ---- */
.fahrtpapiere { margin: var(--raum-6) 0; }
.fahrtpapiere .dokument-liste { margin-top: var(--raum-4); }
.fahrtpapiere .dokument-mitte { display: grid; }

/* ---- Dokumente am Fahrauftrag ---- */
.auftrag-dokumente { margin-top: var(--raum-6); }
.auftrag-dokumente .dokument-liste { margin-top: var(--raum-4); }
.bereichs-kopf-eng { margin-bottom: var(--raum-2); }

/* ==================================================================
   Belege
   ================================================================== */

.rechts { text-align: right; }
.geld { font-variant-numeric: tabular-nums; white-space: nowrap; }

.beleg-entwurf         { color: var(--text-leise); }
.beleg-festgeschrieben { color: var(--status-unterwegs); }
.beleg-versendet       { color: var(--status-beim-kunden); }
.beleg-bezahlt         { color: var(--status-auf-hof); }
.beleg-storniert       { color: var(--status-werkstatt); }

.belege-anlegen { margin-bottom: var(--raum-4); }

/* ---- Positionsmaske ---- */

.positionstabelle { font-size: 0.875rem; }
.positionstabelle td { padding: var(--raum-2); vertical-align: top; }
.spalte-menge   { width: 6rem; }
.spalte-einheit { width: 6.5rem; }
.zeilenfeld {
  width: 100%;
  min-height: 36px;
  padding: var(--raum-1) var(--raum-2);
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
}
.zeilenfeld.rechts { text-align: right; font-variant-numeric: tabular-nums; }
.zeilenfeld-notiz { margin-top: 3px; resize: vertical; min-height: 32px; }
.ist-textzeile { background: var(--flaeche-still); }
.zeile-weg { min-height: 36px; padding: 0 var(--raum-2); font-size: 1.125rem; }

.beleg-aktionen { margin: var(--raum-4) 0; }

/* ==================================================================
   Belegblatt (Bildschirm und Druck)
   ================================================================== */

/* Die vier Maße kommen aus daten/firma.json und lassen sich am Beleg
   selbst verstellen - deshalb Variablen und keine festen Werte. */
.belegblatt {
  --blatt-logo-breite: 85mm;
  --blatt-rand-oben: 12mm;
  --blatt-rand-seite: 20mm;
  --blatt-abstand-kopf: 7mm;
  --blatt-schrift: 10.5pt;

  /* Echtes A4: 210 x 297 mm. Die Mindesthöhe ist wichtig, damit man
     am Bildschirm sieht, wie viel noch auf die Seite passt und wo die
     Fußzeile landet - ein Blatt, das nach dem letzten Absatz aufhört,
     verrät das nicht. */
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto var(--raum-8);
  padding: var(--blatt-rand-oben) var(--blatt-rand-seite);
  background: #fff;
  color: #1D1D1B;
  box-shadow: var(--schatten-karte);
  font-size: var(--blatt-schrift);
  line-height: 1.45;

  /* Damit die Fußzeile am unteren Blattrand sitzt und nicht direkt
     unter dem letzten Absatz klebt. */
  display: flex;
  flex-direction: column;
}

/* Markiert am Bildschirm, wo die nächste Seite anfängt. */
/* Buehne: faengt ab, wenn der Verkleinerungsfaktor nicht greift
   (aeltere Firefox-Fassungen kennen zoom nicht) - dann schiebt man
   das Blatt seitlich, statt dass die ganze Seite verrutscht. */
.blattbuehne { overflow-x: auto; }

.belegblatt {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent calc(297mm - 1px),
    var(--rand-stark) calc(297mm - 1px), var(--rand-stark) 297mm
  );
  background-repeat: repeat-y;
}

.blatt-kopf {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--blatt-abstand-kopf);
}
.blatt-logo { width: var(--blatt-logo-breite); height: auto; display: block; }
.blatt-firma { display: grid; text-align: right; font-size: 8.5pt; line-height: 1.35; }
.blatt-firma strong { font-size: 12pt; letter-spacing: 0.02em; }

/* Anschrift und Kennzahlen nebeneinander - spart rund 25 mm Höhe. */
.blatt-adresszeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8mm;
  align-items: start;
  margin-bottom: 8mm;
}
.blatt-anschrift { min-width: 0; }
.blatt-absenderzeile {
  display: block;
  font-size: 7pt;
  color: #666;
  border-bottom: 0.5pt solid #ccc;
  padding-bottom: 1mm;
  margin-bottom: 3mm;
}
.blatt-empfaenger { display: grid; font-size: 11pt; line-height: 1.4; }

.blatt-meta { display: flex; justify-content: flex-end; }
.blatt-meta dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.5mm 5mm;
  margin: 0;
  font-size: 9pt;
}
.blatt-meta dt { color: #555; }
.blatt-meta dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.blatt-titel {
  font-size: calc(var(--blatt-schrift) * 1.45);
  letter-spacing: -0.01em;
  margin-bottom: 2mm;
}
.blatt-storniert { color: var(--achtung); }
.blatt-betreff { font-weight: 600; margin-bottom: 4mm; }
.blatt-text { margin-bottom: 4mm; white-space: pre-line; }

.blatt-positionen {
  width: 100%;
  border-collapse: collapse;
  margin: 6mm 0;
  font-size: 9.5pt;
}
.blatt-positionen th {
  text-align: left;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
  border-bottom: 1pt solid #1D1D1B;
  padding: 1.5mm 2mm;
}
.blatt-positionen th.rechts { text-align: right; }
.blatt-positionen td {
  padding: 2mm;
  border-bottom: 0.5pt solid #ddd;
  vertical-align: top;
}
.blatt-positionen td.rechts { text-align: right; }
.blatt-beschreibung { display: block; font-size: 8.5pt; color: #555; margin-top: 0.5mm; }
.blatt-textzeile td { font-weight: 600; border-bottom: 0; padding-top: 4mm; }

.blatt-hinweis {
  font-size: 9pt;
  padding: 2mm 3mm;
  background: #f4f4f2;
  border-left: 2pt solid #76B729;
  margin-bottom: 4mm;
}

.blatt-unterschrift { margin-top: 12mm; display: flex; gap: 10mm; flex-wrap: wrap; }
.unterschrift-linie {
  min-width: 70mm;
  border-top: 0.5pt solid #1D1D1B;
  padding-top: 1.5mm;
  margin-top: 15mm;
  font-size: 8.5pt;
  color: #555;
}
.unterschrift-abbild { display: grid; gap: 0.5mm; }

/* Ein Nachweis ohne Bild: der Grund steht dort, wo sonst der
   Schriftzug wäre. Kursiv, damit niemand ihn für eine Unterschrift
   hält. */
.unterschrift-vermerk {
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--text-still);
  min-height: 3rem;
  display: flex;
  align-items: center;
}
.unterschrift-abbild img {
  width: 60mm;
  height: auto;
  border-bottom: 0.5pt solid #1D1D1B;
  padding-bottom: 1mm;
}
.unterschrift-name { font-weight: 600; font-size: 9.5pt; }

.blatt-fuss {
  /* auto schiebt die Fußzeile an den unteren Blattrand */
  margin-top: auto;
  display: grid;
  /* Vierte Spalte breiter: die IBAN in Vierergruppen braucht Platz,
     sonst hängt am Ende eine einzelne Gruppe allein auf einer Zeile. */
  grid-template-columns: 1.15fr 1.2fr 1.05fr 1.6fr;
  gap: 4mm;
  padding-top: 3mm;
  border-top: 0.75pt solid #76B729;
  font-size: 7pt;
  line-height: 1.5;
  color: #444;
}
.blatt-fuss div { display: grid; gap: 0.2mm; }
.fuss-stark { font-weight: 700; color: #1D1D1B; }
/* Zusammengehörige Angaben nicht mitten im Wort trennen */
.blatt-fuss span { hyphens: none; }

@media (max-width: 640px) {
  .blatt-fuss { grid-template-columns: 1fr 1fr; }
}

@media print {
  .blattbuehne { overflow: visible; }
  .belegblatt {
    /* Beim Drucken nie verkleinern - da gilt die echte Größe. */
    zoom: 1 !important;
    width: auto;
    max-width: none;
    /* Keine Mindesthöhe beim Drucken: ein Blatt, das auf den Millimeter
       297 mm hoch ist, schiebt sonst gerne eine leere zweite Seite raus.
       Die Seitenmarkierung ist auf Papier ohnehin sinnlos. */
    min-height: 0;
    display: block;
    margin: 0;
    box-shadow: none;
    background-image: none;
    /* Platz für die Fußzeile freihalten, die unten festsitzt. */
    padding-bottom: 30mm;
  }

  /* Die @page-Regel steht in beleg/routen.ts - siehe oben.
     Der Rand kommt aus den eingestellten Werten (padding am Blatt). */

  /* Die Fußzeile sitzt am unteren Rand JEDER Seite. Auf einer
     zweiseitigen Rechnung gehören die Pflichtangaben auch auf Seite 2 -
     und ohne Mindesthöhe würde sie sonst direkt unter den letzten
     Absatz rutschen statt ans Blattende. */
  .blatt-fuss {
    position: fixed;
    bottom: 8mm;
    left: var(--blatt-rand-seite);
    right: var(--blatt-rand-seite);
    margin-top: 0;
  }

  .blatt-positionen tr { break-inside: avoid; }
   .blatt-unterschrift{ break-inside: avoid; }
  /* Kopf und Anschrift gehören zusammen auf die erste Seite. */
  .blatt-kopf, .blatt-adresszeile { break-after: avoid; }
}

/* ---- Zeichenfeld für die Unterschrift ---- */

.zeichenfeld-huelle {
  position: relative;
  background: #fff;
  border: 1px solid var(--rand-stark);
  border-radius: var(--rundung-klein);
  overflow: hidden;
}
.zeichenfeld {
  display: block;
  width: 100%;
  height: 12rem;
  touch-action: none;   /* sonst scrollt die Seite beim Unterschreiben */
  cursor: crosshair;
}
.zeichenfeld-linie {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 2.5rem;
  border-bottom: 1px solid #c9c9c3;
  pointer-events: none;
}
/* Fingerkuppen sind ungefähr einen Zentimeter breit. Auf dem Tablett
   wird mit ausgestrecktem Arm getippt, nicht mit dem Daumen am Rand -
   die Knöpfe dürfen dort nicht kleiner sein als am Telefon. */
@media (pointer: coarse) {
  .app .knopf-gross, .app .knopf-breit { min-height: 3rem; }
  .app .knopf { min-height: 2.75rem; }
}

/* ---- Zwei Unterschriften: wo stehe ich gerade? ---- */
.unterschrift-schritte {
  display: flex;
  gap: var(--raum-2);
  list-style: none;
  margin: 0 0 var(--raum-3);
  padding: 0;
  font-size: 0.8125rem;
}
.unterschrift-schritte li {
  flex: 1;
  padding: var(--raum-1) var(--raum-2);
  border-radius: var(--rundung-klein);
  border: 1px solid var(--rand);
  color: var(--text-leise);
  text-align: center;
}
.unterschrift-schritte li.ist-dran {
  border-color: var(--schwarz);
  color: var(--text);
  font-weight: 700;
}
.unterschrift-schritte li.ist-erledigt {
  border-color: var(--gruen);
  color: var(--gruen-text);
}
.unterschrift-schritte li.ist-erledigt::before { content: "✓ "; }

@media (prefers-color-scheme: dark) {
  /* Das Belegblatt bleibt Papier - auch im dunklen Erscheinungsbild. */
  .belegblatt { background: #fff; color: #1D1D1B; }
}

/* ==================================================================
   Speicherleiste
   ------------------------------------------------------------------
   Die wichtigste Aktion bleibt in Sicht, statt hinter zehn
   Feldgruppen zu verschwinden (Kap. 16). Glas, damit der Inhalt
   darunter durchscrollt (Kap. 12).
   ================================================================== */

.speicherleiste {
  position: sticky;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  flex-wrap: wrap;
  margin: var(--raum-5) calc(var(--raum-5) * -1) 0;
  padding: var(--raum-3) var(--raum-5);
  padding-bottom: max(var(--raum-3), env(safe-area-inset-bottom));
  background: var(--glas);
  backdrop-filter: var(--glas-unschaerfe);
  -webkit-backdrop-filter: var(--glas-unschaerfe);
  border-top: 1px solid var(--glas-kante);
  box-shadow: 0 -12px 16px -16px rgba(29, 29, 27, 0.5);
}

/* Kommt von unten herein, geht denselben Weg wieder hinaus (Kap. 7). */
.speicherleiste:not([hidden]) {
  animation: leiste-auf var(--feder-zeit) var(--feder) both;
}
@keyframes leiste-auf {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

.speicherleiste-text {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-still);
}
.speicherleiste.ist-dauerhaft .speicherleiste-text {
  font-size: 1.125rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .speicherleiste:not([hidden]) {
    animation: nur-einblenden 150ms ease both;
  }
}

/* ==================================================================
   Regler fürs Belegbild
   ================================================================== */

/* Am Handy hat das Einstellen des Druckbilds nichts verloren: die
   Regler brauchen Platz, und wer unterwegs einen Beleg vorzeigt, will
   ihn nicht umgestalten. Ab Tablet-Breite aufwärts sichtbar. */
.blattregler { display: none; }

@media (min-width: 60rem) {
  .blattregler { display: block; }
}

.blattregler {
  max-width: 210mm;
  margin: 0 auto var(--raum-4);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
}
.blattregler summary {
  padding: var(--raum-3) var(--raum-4);
  min-height: 44px;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transform: scale(1);
  transform-origin: left center;
  transition: transform var(--druck-zeit) var(--feder);
}
.blattregler summary.wird-gedrueckt,
.blattregler summary:active { transform: scale(0.985); }

.blattregler-inhalt {
  padding: 0 var(--raum-4) var(--raum-4);
  display: grid;
  gap: var(--raum-3);
}

.regler {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr) 5rem;
  align-items: center;
  gap: var(--raum-3);
}
.regler-name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-still);
}
.regler input[type="range"] { width: 100%; accent-color: var(--gruen); }
.regler output {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text);
}

@media (max-width: 40rem) {
  .regler { grid-template-columns: 1fr auto; }
  .regler input[type="range"] { grid-column: 1 / -1; }
}

/* ==================================================================
   Rechtevergabe
   ================================================================== */

.rechte-gruppe { margin-bottom: var(--raum-4); }

.recht-zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-2) 0;
  cursor: pointer;
  border-bottom: 1px solid var(--rand);
}
.recht-zeile:last-child { border-bottom: 0; }
.recht-zeile input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
.recht-zeile:has(input:disabled) { cursor: default; opacity: 0.6; }

.recht-text { display: grid; gap: 1px; }
.recht-name { font-weight: 600; font-size: 0.9375rem; }
.recht-erklaerung {
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text-leise);
}

.ist-ausgetreten { opacity: 0.55; }
.ist-ausgetreten .nummern-verweis { text-decoration: line-through; }

/* ==================================================================
   Zweite Navigationszeile
   ------------------------------------------------------------------
   Glas wie die Kopfleiste, damit der Inhalt darunter durchscrollt.
   Sie klebt unter dem Kopf, nicht am Fenster - sonst überdeckt sie
   beim Scrollen die Kopfleiste.
   ================================================================== */

/* Der Bereichsreiter oben zeigt jetzt einen Bereich an, nicht eine
   einzelne Seite - deshalb etwas kräftiger. */
@media (prefers-reduced-transparency: reduce) {
  .seitenleiste { background: var(--flaeche); backdrop-filter: none; }
}

/* ==================================================================
   Startseite: Tagesübersicht
   ================================================================== */

.tageskacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--raum-4);
  margin-bottom: var(--raum-6);
}

.tageskachel {
  display: grid;
  gap: var(--raum-2);
  align-content: start;
  padding: var(--raum-5);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  box-shadow: var(--schatten-karte);
  text-decoration: none;
  color: var(--text);
  transform: scale(1);
  transition: transform var(--druck-zeit) var(--feder),
              border-color var(--feder-zeit) var(--feder);
}
.tageskachel:hover { border-color: var(--rand-stark); }
.tageskachel:active, .tageskachel.wird-gedrueckt { transform: scale(0.99); }
.tageskachel.braucht-aufmerksamkeit { border-left: 4px solid var(--achtung); }

.kachel-titel {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.kachel-zahl {
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kachel-zahl.ist-auffaellig { color: var(--achtung); }
.kachel-text { font-size: 0.9375rem; color: var(--text-still); }
/*
 * Die Zeilen INNERHALB einer Kachel. Hieß früher ebenfalls
 * .kachel-liste - derselbe Name wie das Kartenraster darüber, mit dem
 * Ergebnis, dass jede Karte in diesem Raster zur flachen Zeile wurde.
 * Zwei Dinge, zwei Namen.
 */
.kachel-zeilen {
  list-style: none;
  margin: var(--raum-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--raum-1);
  font-size: 0.8125rem;
}
.kachel-zeilen li {
  display: flex;
  justify-content: space-between;
  gap: var(--raum-2);
  padding-top: var(--raum-1);
  border-top: 1px solid var(--rand);
}

.begruessung { margin-bottom: var(--raum-5); }
.begruessung .bereichs-titel { margin-bottom: var(--raum-1); }

.antrag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  flex-wrap: wrap;
  padding: var(--raum-4);
  border: 1px solid var(--rand);
  border-top: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
}
/* ==================================================================
   Vertrauensarbeitszeit
   ================================================================== */

.karten-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--raum-4);
  flex-wrap: wrap;
  margin-bottom: var(--raum-4);
}

.karten-titel {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  margin-bottom: var(--raum-1);
}

.wochen-blaettern {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
}
/* Innerhalb des Blätter-Satzes darf es eng sein: die drei gehören
   zusammen und tun nichts, was sich nicht sofort rückgängig machen
   lässt. Abstand nach außen schützt den Rest. */
.wochen-blaettern-satz {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
}
.knopf-klein {
  padding: var(--raum-1) var(--raum-3);
  min-width: 2.25rem;
  font-size: 1rem;
  line-height: 1.2;
}

/* Ein Knopf, der wie ein Verweis aussieht - für die Wochen,
   die noch nachzutragen sind. */
.verweis-knopf {
  background: none;
  border: none;
  padding: 0 var(--raum-1);
  font: inherit;
  color: var(--gruen-text);
  text-decoration: underline;
  cursor: pointer;
}
.verweis-knopf:hover { color: var(--text); }

@media (max-width: 46rem) {
  .karten-kopf { gap: var(--raum-3); }
}

/* ==================================================================
   Seitenleiste (Büro-Ansicht)
   ==================================================================
   Die Navigation steht links und bleibt stehen; gescrollt wird nur
   der Inhalt. Auf schmalen Schirmen fährt sie über den Inhalt und
   wird über den Streifen oben geholt. */

:root { --leiste-breite: 15.5rem; }

body.ist-buero {
  display: grid;
  grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
  min-height: 100dvh;
}

.seitenleiste {
  grid-row: 1 / -1;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--raum-4);
  padding: var(--raum-5) var(--raum-4) var(--raum-4);
  background: var(--flaeche);
  border-right: 1px solid var(--rand);
  z-index: 45;
}

.seitenleiste .marke { padding-inline: var(--raum-2); }

.leiste-navigation {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  margin-inline: calc(var(--raum-2) * -1);
  padding-inline: var(--raum-2);
}

.leiste-liste { list-style: none; margin: 0; padding: 0; }

.leiste-punkt {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--rundung-klein);
  text-decoration: none;
  color: var(--text-still);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background var(--feder-zeit) var(--feder),
              color var(--feder-zeit) var(--feder);
}
.leiste-punkt:hover { color: var(--text); background: var(--flaeche-still); }
.leiste-punkt.ist-aktiv {
  color: var(--text);
  background: var(--flaeche-still);
  font-weight: 600;
}

.leiste-zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.75;
}
.leiste-punkt.ist-aktiv .leiste-zeichen { opacity: 1; color: var(--gruen-text); }
.leiste-text { min-width: 0; }

/* Unterpunkte klappen unter dem offenen Bereich auf. Der senkrechte
   Strich zeigt, dass sie dazugehören. */
.leiste-unterpunkte {
  list-style: none;
  margin: var(--raum-1) 0 var(--raum-2);
  padding: 0 0 0 var(--raum-3);
  margin-left: calc(var(--raum-3) + 0.75rem);
  border-left: 1px solid var(--rand);
}
.leiste-unterpunkte a {
  padding: var(--raum-1) var(--raum-3);
  border-radius: var(--rundung-klein);
  text-decoration: none;
  color: var(--text-still);
  font-size: 0.875rem;
}
.leiste-unterpunkte a:hover { color: var(--text); background: var(--flaeche-still); }
.leiste-unterpunkte a.ist-aktiv { color: var(--text); font-weight: 600; }

/* Wartezahl: wie viel an einer Stelle liegt. Grau heißt „es liegt
   etwas", rot heißt „es ist über der Zeit" - mehr Stufen braucht eine
   Zahl nicht, und mehr Farben lesen sich nicht mehr als Rangfolge.
   Die Zahl steht rechts; der Text davor darf vorher umbrechen. */
.leiste-zahl {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 1.5rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  background: var(--flaeche-still);
  border: 1px solid var(--rand);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--text-still);
  font-variant-numeric: tabular-nums;
}
.leiste-zahl.ist-dringend {
  background: color-mix(in srgb, var(--achtung) 12%, var(--flaeche));
  border-color: color-mix(in srgb, var(--achtung) 35%, var(--flaeche));
  color: var(--achtung);
}
/* Am Unterpunkt ist die Zeile ein Block, kein Flex-Kasten. */
.leiste-unterpunkte a {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
}
.leiste-punkt.ist-aktiv .leiste-zahl { border-color: var(--rand); }

.leiste-gruppe {
  margin: var(--raum-5) var(--raum-3) var(--raum-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise, var(--text-still));
}

/* ---------- Schnellsuche ---------- */

.schnellsuche { position: relative; }

.schnellsuche-feld {
  width: 100%;
  padding: var(--raum-2) 3rem var(--raum-2) var(--raum-3);
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  background: var(--flaeche-still);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
}
.schnellsuche-feld::-webkit-search-cancel-button { display: none; }

.schnellsuche-taste {
  position: absolute;
  top: 50%;
  right: var(--raum-3);
  transform: translateY(-50%);
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--rand);
  border-radius: 4px;
  background: var(--flaeche);
  font-size: 0.6875rem;
  color: var(--text-still);
  pointer-events: none;
}

.schnellsuche-treffer {
  position: absolute;
  top: calc(100% + var(--raum-2));
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--raum-2);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten-karte);
  z-index: 50;
}
.treffer-gruppe {
  margin: var(--raum-2) var(--raum-2) var(--raum-1);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-still);
}
.treffer {
  display: block;
  width: 100%;
  padding: var(--raum-2) var(--raum-3);
  border: none;
  border-radius: var(--rundung-klein);
  background: none;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
}
.treffer:hover, .treffer.ist-gewaehlt { background: var(--flaeche-still); }
.treffer-neben { display: block; font-size: 0.8125rem; color: var(--text-still); }
.treffer-leer { padding: var(--raum-3); color: var(--text-still); font-size: 0.9375rem; }

/* ---------- Projektwahl: wählen oder gleich anlegen ---------- */

.projektwahl { position: relative; }
/* In einem Dialog scrollt der Inhalt - ein absolut gesetzter Kasten
   würde dort abgeschnitten. Derselbe Grund wie bei der Kundenwahl. */
dialog .projektwahl .schnellsuche-treffer { position: static; margin-top: var(--raum-2); }

/* Das Anlegen steht IMMER unten, auch wenn es Treffer gibt - sonst
   muss man erst die Suche leerräumen, um heranzukommen. Die Linie
   darüber sagt: das ist keine weitere Zeile der Liste. */
.treffer-neu {
  margin-top: var(--raum-2);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--rand);
  border-radius: 0 0 var(--rundung-klein) var(--rundung-klein);
  font-weight: 600;
  color: var(--gruen-text);
}
.treffer-neu::before { content: "+ "; }

/* ---- Kunde schnell anlegen ---- */
.schnellkunde-aehnlich { display: grid; gap: var(--raum-3); }
.schnellkunde-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--raum-2);
}
.schnellkunde-eintrag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
}
.schnellkunde-text { display: grid; min-width: 0; }
.schnellkunde-eintrag .knopf { flex-shrink: 0; }
/* Der Eintrag „Neuen Kunden anlegen" in der Auftragsmaske hebt sich
   ab - er ist eine Handlung, kein Treffer. */
.liste-knopf-neu .liste-knopf-titel { color: var(--gruen-text); }

.treffer-anlegen { display: grid; gap: var(--raum-3); padding: var(--raum-3); }
.treffer-anlegen-titel {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-still);
}
.treffer-anlegen-feld {
  width: 100%;
  min-height: 44px;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--rand-stark);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  font: inherit;
  color: var(--text);
}
.treffer-anlegen-fehler {
  margin: 0;
  font-size: 0.875rem;
  color: var(--achtung);
}
.treffer-anlegen-knoepfe {
  display: flex;
  gap: var(--raum-3);
  justify-content: flex-end;
}

/* ---------- Benutzerblock unten ---------- */

.leiste-benutzer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--raum-2) var(--raum-3);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--rand);
}
/* Abmelden über die ganze Breite darunter - daneben bliebe für den
   Namen zu wenig Platz, und er brach um. */
.leiste-benutzer .abmelden-form { grid-column: 1 / -1; }
.leiste-benutzer .abmelden-form button { width: 100%; }
.benutzer-zeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gruen);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
}
.benutzer-block { min-width: 0; flex: 1; }
.leiste-benutzer .benutzer-name {
  display: block;
  max-width: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.benutzer-firma {
  display: block;
  font-size: 0.75rem;
  color: var(--text-still);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Streifen oben trägt nur den Menüknopf - im Büro am Rechner
   ist er überflüssig und bleibt weg. */
.seitenkopf.ist-schmalstreifen { display: none; }
.leiste-schleier { display: none; }

/* ---------- Schmale Schirme ---------- */

@media (max-width: 60rem) {
  body.ist-buero { grid-template-columns: minmax(0, 1fr); }

  .seitenkopf.ist-schmalstreifen {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .leiste-knopf { font-size: 1.125rem; padding: var(--raum-2) var(--raum-3); }

  .seitenleiste {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(var(--leiste-breite), 82vw);
    transform: translateX(-100%);
    transition: transform var(--feder-zeit) var(--feder);
    box-shadow: var(--schatten-karte);
  }
  body.leiste-offen .seitenleiste { transform: translateX(0); }

  .leiste-schleier {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(29, 29, 27, 0.35);
  }
  .leiste-schleier[hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .seitenleiste { transition: none; }
}

@media print {
  .seitenleiste, .leiste-schleier { display: none !important; }
  body.ist-buero { display: block; }
}

.status-marke.ist-aktiv { background: var(--gruen); color: #fff; }

/* ---- Auf den Startbildschirm legen ---- */
.app-installieren {
  display: grid;
  gap: var(--raum-2);
  margin: 0 0 var(--raum-4);
  padding: var(--raum-3);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
}
.app-installieren p { margin: var(--raum-1) 0 0; }
.app-installieren .knopf-reihe { justify-content: flex-start; }

/* ---- Kalender in der Fahrer-App ---- */
/* Ein Streifen zum Durchwischen. Eine Monatsansicht mit 35 Kästchen
   wäre auf 375 Punkten unlesbar; zwei Wochen zum Schieben sind das,
   was ein Fahrer tatsächlich braucht. */
.fahrer-kalender { margin-bottom: var(--raum-4); }
.kalender-streifen {
  display: flex;
  gap: var(--raum-2);
  overflow-x: auto;
  padding-bottom: var(--raum-2);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.kalender-tag {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 3.75rem;
  padding: var(--raum-2) var(--raum-1);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.kalender-wochentag {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-leise);
}
.kalender-datum { font-size: 0.8125rem; font-weight: 600; }
.kalender-anzahl {
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gruen-text);
}
.kalender-leer { color: var(--text-leise); font-weight: 400; }
.kalender-fertig { color: var(--gruen-text); }
.kalender-vermerk {
  font-size: 0.625rem;
  color: var(--achtung);
  max-width: 4.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kalender-tag.ist-heute { border-color: var(--rand-stark); }
.kalender-tag.ist-gewaehlt {
  border-color: var(--schwarz);
  box-shadow: inset 0 0 0 1px var(--schwarz);
}
.kalender-tag.ist-gesperrt {
  background: repeating-linear-gradient(
    -45deg,
    var(--flaeche) 0 5px,
    color-mix(in srgb, var(--achtung) 10%, var(--flaeche)) 5px 10px);
}

/* Projekt und abweichende Lieferadresse auf dem Blatt: abgesetzt,
   damit sie nicht mit den Positionen verschwimmen. */
.blatt-zusatz {
  margin: var(--raum-3) 0;
  padding-top: var(--raum-2);
  border-top: 1px solid var(--rand);
}

/* ---- Berichtigung ---- */
/* Abgesetzt und ruhig: es ist eine Ausnahme, kein Alltagsformular.
   Wer hier landet, will etwas geradeziehen. */
.berichtigung {
  margin: var(--raum-5) 0;
  padding: var(--raum-4);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--achtung);
  border-radius: var(--rundung);
}
.berichtigung .abschnitt-titel { margin-bottom: var(--raum-1); }
.berichtigung .hinweis-text { margin-bottom: var(--raum-3); }
.berichtigung .verlauf { margin-top: var(--raum-3); }

/* ---- Tourenzettel ---- */
/* Für den Tag, an dem das Gerät ausfällt. Bewusst schmucklos: er wird
   in den LKW gelegt, geknickt und mit schmutzigen Händen angefasst. */
.tourenzettel {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: var(--raum-4);
  margin: var(--raum-4);
}
.tourenzettel-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--raum-3);
  border-bottom: 2px solid var(--schwarz);
  padding-bottom: var(--raum-2);
  margin-bottom: var(--raum-3);
}
.tourenzettel-fahrer { font-size: 1.25rem; letter-spacing: -0.01em; }
.tourenzettel-firma { text-align: right; font-size: 0.8125rem; }
.tourenzettel-tabelle td { vertical-align: top; }
/* Zum Abhaken mit dem Kugelschreiber. */
.tourenzettel-haken {
  width: 3rem;
  border: 1px solid var(--rand-stark) !important;
}
.tourenzettel-fuss {
  margin-top: var(--raum-3);
  font-size: 0.8125rem;
  color: var(--text-still);
}

@media print {
  .nicht-drucken, .seitenleiste { display: none !important; }
  /* Jeder Fahrer bekommt sein eigenes Blatt - sonst reicht man einem
     Fahrer die Tour des anderen mit. */
  .tourenzettel {
    border: 0;
    margin: 0;
    padding: 0;
    break-after: page;
  }
  .tourenzettel:last-child { break-after: auto; }
}

/* Der Löschbereich steht abgesetzt am Ende, nicht zwischen den
   Feldern - man soll dort landen, wenn man es will, und nicht
   dagegenstoßen. */
.loeschbereich {
  margin-top: var(--raum-5);
  border-color: color-mix(in srgb, var(--achtung) 30%, var(--rand));
}
.loeschbereich .abschnitt-titel {
  font-size: 0.9375rem;
  margin-bottom: var(--raum-1);
}
.loeschbereich .hinweis-text { margin-bottom: var(--raum-3); }

/* Löschen ist gefährlich, aber nie die Hauptsache: rot umrandet statt
   rot gefüllt. Ein gefüllter roter Knopf neben "Speichern" zöge das
   Auge auf die Zerstörung. */
.knopf-gefahr {
  background: transparent;
  color: var(--achtung);
  border-color: color-mix(in srgb, var(--achtung) 45%, transparent);
}
.knopf-gefahr:hover {
  background: color-mix(in srgb, var(--achtung) 10%, transparent);
  border-color: var(--achtung);
}

@media print {
  .bereich { padding: 0; }
}

/* ==================================================================
   Kasse
   ================================================================== */

.unterschriftsflaeche {
  position: relative;
  margin: var(--raum-4) 0;
  border: 2px dashed var(--rand-stark, var(--rand));
  border-radius: var(--rundung);
  background: #ffffff;
  overflow: hidden;
}
.unterschriftsflaeche canvas {
  display: block;
  width: 100%;
  height: 15rem;
  touch-action: none;          /* sonst scrollt das Tablet beim Schreiben */
  cursor: crosshair;
}
.zeichenfeld-hinweis {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #9a9a97;
  font-size: 1.125rem;
}

/* ---- Tablet ----
   Die Fahrer bekommen Tabletts. Der Fahrer hält sie dem Kunden hin,
   und der unterschreibt im Stehen mit dem Finger oder einem Stift -
   eine Fläche in Telefongröße wäre dafür lächerlich klein. Ab 48rem
   wächst sie mit, ohne dass die Handschrift verzerrt: die Leinwand
   wird beim Aufziehen neu vermessen (unterschriftsfeld.js). */
@media (min-width: 48rem) {
  .app { max-width: 44rem; }
  .unterschriftsflaeche canvas { height: 20rem; }
  /* Quer gehalten ist wenig Höhe da. Ein Tablett im Querformat hat
     768 Punkte Höhe - mit einer Fläche von 20rem rutschen die Knöpfe
     darunter aus dem Bild, und der Fahrer sucht sie beim Kunden.
     Flacher ist hier besser als abgeschnitten. */
  @media (orientation: landscape) and (max-height: 50rem) {
    .unterschriftsflaeche canvas { height: 16rem; }
  }
}

@media (max-width: 46rem) {
  .unterschriftsflaeche canvas { height: 12rem; }
}

/* ==================================================================
   Wortmarke
   ==================================================================
   Das Logo besteht aus schwarzen Kacheln mit weißer Schrift. Auf
   hellem Grund steht es direkt; auf dunklem verschwänden die Kacheln,
   deshalb bekommt es dort eine helle Platte. Die Marke selbst wird
   nicht umgefärbt - ein invertiertes Logo ist ein anderes Logo. */

.marke-voll { padding: var(--raum-1) var(--raum-2); }

.marke-bild {
  display: block;
  width: auto;
  height: 1.75rem;          /* Wortmarke, nicht Bildmarke: Höhe führt */
  max-width: 100%;
  object-fit: contain;
}

.seitenleiste .marke-voll {
  margin-inline: calc(var(--raum-2) * -1);
  padding-inline: var(--raum-2);
}
.seitenleiste .marke-bild { height: 2rem; }
.seitenkopf.ist-schlank .marke-bild { height: 1.5rem; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marke-voll {
    background: #ffffff;
    border-radius: var(--rundung-klein);
  }
}
:root[data-theme="dark"] .marke-voll {
  background: #ffffff;
  border-radius: var(--rundung-klein);
}

@media print {
  .marke-voll { background: none; }
}

/* ==================================================================
   Wochenplan
   ==================================================================
   Oben liegt, was noch niemandem gehört; darunter jeder Fahrer mit
   seinen sechs Tagen. Die Farbe trägt die Aussage, die Zahl bleibt
   trotzdem lesbar - Farbe allein wäre für Farbfehlsichtige keine
   Information. */

.woche {
  display: grid;
  gap: var(--raum-4);
  padding: var(--raum-4);
}

/* ---- Der Pool ---- */

.woche-pool {
  position: relative;
  background: var(--flaeche-still);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: var(--raum-3);
  transition: border-color var(--feder-zeit) var(--feder);
}
.woche-pool-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  flex-wrap: wrap;
  margin-bottom: var(--raum-2);
}
.woche-pool-titel { font-size: 0.9375rem; letter-spacing: -0.005em; }
.woche-anleitung { flex-basis: 100%; margin: 0; }

.woche-pool-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--raum-2);
  align-items: start;
}

/* ---- Ein Fahrer mit seiner Woche ---- */

.woche-fahrer {
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  overflow: hidden;
}
.woche-fahrer-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  border-bottom: 1px solid var(--rand);
  background: var(--flaeche-still);
}
.woche-fahrer-name { font-size: 0.9375rem; letter-spacing: -0.005em; }

/* Wann die Fahrer-App zuletzt alles abgeliefert hat. */
.woche-abgleich {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  font-size: 0.75rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.woche-abgleich:empty { display: none; }
.woche-abgleich::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--rand-stark);
  flex: none;
}
.woche-abgleich.ist-frisch::before { background: var(--gruen); }
.woche-abgleich.ist-heute::before  { background: var(--gruen-text); opacity: 0.55; }
.woche-abgleich.ist-wartet { color: var(--status-beim-kunden); font-weight: 600; }
.woche-abgleich.ist-wartet::before { background: var(--status-beim-kunden); }
.woche-fahrer-summe {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.woche-tage {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.woche-fach {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  min-height: 7rem;
  padding: var(--raum-2);
  border-left: 1px solid var(--rand);
  transition: background-color var(--feder-zeit) var(--feder);
}
.woche-fach:first-child { border-left: 0; }
.woche-fach.ist-heute { background: color-mix(in srgb, var(--gruen) 5%, transparent); }

/* Die Zielmarkierung liegt als eigene Ebene darüber und wird nur
   ein- und ausgeblendet - ein background-Wechsel müsste der Browser
   genau während des Ziehens neu zeichnen, wo jedes Bild zählt. */
.woche-fach::after,
.woche-pool::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gruen);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--feder-zeit) var(--feder);
}
.woche-fach.ist-ziel::after,
.woche-pool.ist-ziel::after { opacity: 0.12; }
.woche-fach.ist-ziel { box-shadow: inset 0 0 0 2px var(--gruen); }
.woche-pool.ist-ziel { border-color: var(--gruen); }

.woche-fach-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-1);
  font-size: 0.75rem;
}
.woche-fach-tag { font-weight: 600; }
.woche-fach-zahl {
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}
/* Voll heißt: hier passt nichts mehr rein, ohne dass etwas kippt.
   Es bleibt trotzdem ein Ziel - wer umplanen muss, muss umplanen
   dürfen. Die Farbe warnt, sie verbietet nicht. */
.woche-fach.ist-voll .woche-fach-zahl {
  color: var(--achtung);
  font-weight: 700;
}
.woche-fach.ist-heute .woche-fach-tag { color: var(--text); font-weight: 700; }

.woche-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--raum-2);
  align-content: start;
  flex: 1;
}

/* ---- Karten in der Woche ---- */

.woche-karte { padding: var(--raum-2); }
.woche-karte .karte-kunde { font-size: 0.875rem; }
.woche-karte .karte-ort,
.woche-karte .karte-person { font-size: 0.75rem; }
.woche-karte .karte-person { color: var(--text-leise); }
.woche-karte.ist-gewaehlt {
  border-color: var(--gruen);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gruen) 45%, transparent);
}
.karte-zeit.ist-fix {
  font-weight: 700;
  color: var(--text);
}
.karte-zeit.ist-fix::before { content: "feste "; }

/* Solange ein Ziel gesucht wird - beim Ziehen wie nach dem Antippen -
   schrumpfen die Karten auf das, was fürs Zuteilen zählt: Art, Kunde,
   Adresse. Erst so passen alle Fahrer mit ihren sechs Tagen
   gleichzeitig aufs Bild. */
body.woche-eng .woche-karte:not(.wird-gezogen):not(.ist-gewaehlt) .karte-fuss,
body.woche-eng .woche-karte:not(.wird-gezogen):not(.ist-gewaehlt) .karte-warnung,
body.woche-eng .woche-karte:not(.wird-gezogen):not(.ist-gewaehlt) .karte-lage,
body.woche-eng .woche-karte:not(.wird-gezogen):not(.ist-gewaehlt) .karte-zeit,
body.woche-eng .woche-karte:not(.wird-gezogen):not(.ist-gewaehlt) .karte-eilt { display: none; }
body.woche-eng .woche-karte:not(.wird-gezogen):not(.ist-gewaehlt) {
  padding: var(--raum-1) var(--raum-2);
}
body.woche-eng .woche-karte:not(.wird-gezogen):not(.ist-gewaehlt) .karte-kunde,
body.woche-eng .woche-karte:not(.wird-gezogen):not(.ist-gewaehlt) .karte-ort,
body.woche-eng .woche-karte:not(.wird-gezogen):not(.ist-gewaehlt) .karte-person {
  font-size: 0.6875rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.woche-eng .woche-karte:not(.wird-gezogen):not(.ist-gewaehlt) .karte-person { display: none; }
body.woche-eng .woche-karte:not(.wird-gezogen):not(.ist-gewaehlt) .karte-art { font-size: 0.625rem; }

body.waehlt-ziel .woche-fach,
body.waehlt-ziel .woche-pool { cursor: copy; }

/* ---- Fahrertermine ---- */
/* Sieht bewusst anders aus als eine Auftragskarte: gestreift, ohne
   Farbstreifen links. Was sich anders verhält, darf nicht gleich
   aussehen - ein Termin wird nicht gezogen und keinem zugeteilt. */
.woche-termin {
  display: grid;
  gap: 2px;
  padding: var(--raum-2);
  border: 1px dashed var(--rand-stark);
  border-radius: var(--rundung-klein);
  background: repeating-linear-gradient(
    -45deg,
    var(--flaeche-still) 0 6px,
    color-mix(in srgb, var(--rand) 25%, var(--flaeche-still)) 6px 12px);
  font-size: 0.8125rem;
}
.woche-termin.ist-locker { border-style: dotted; opacity: 0.75; }
.termin-art {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-still);
}
.termin-betreff { font-weight: 600; line-height: 1.25; }
.termin-absagen { justify-self: start; font-size: 0.75rem; }

/* ---- Termine für alle Fahrer ---- */
/* Eigene Zeile über den Fahrern. Grüner Rand links, damit sie beim
   Überfliegen nicht für einen weiteren Fahrer gehalten wird. */
.woche-alle { border-left: 4px solid var(--gruen); }
.woche-fach-alle.ist-leer .woche-liste { min-height: 1.5rem; }
.termin-wer {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gruen-text);
}
/* Offen heißt: hier muss sich noch jemand melden. */
.woche-termin.ist-offen { border-color: var(--achtung); border-style: solid; }
.woche-termin.ist-offen .termin-wer { color: var(--achtung); }
.termin-wer.ist-offen { color: var(--achtung); }
.app-liste-zusatz { display: block; font-size: 0.8125rem; margin-top: 2px; }
.app-liste-eintrag.ist-offen {
  padding-left: var(--raum-3);
  box-shadow: inset 3px 0 0 var(--achtung);
}
.app-liste-eintrag > .knopf { flex-shrink: 0; align-self: center; }

/* ---- Gesperrte Tage ---- */
/* Der Tag bleibt ein Ziel - das Programm fragt nach, statt zu
   verbieten. Aber man muss es sehen, bevor man zieht. */
.woche-sperre {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--achtung);
  padding: 0.1em 0;
}
.woche-fach.ist-gesperrt {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 8px,
    color-mix(in srgb, var(--achtung) 8%, transparent) 8px 16px);
}
.woche-fach.ist-feiertag .woche-sperre { color: var(--text-leise); }
.woche-fach.ist-feiertag {
  background: color-mix(in srgb, var(--rand) 22%, transparent);
}

/* ---- Fahrer sortieren ---- */
.woche-griff {
  /* Der Griff ist nur ein Zeichen, die Trefferfläche muss trotzdem
     für einen Finger reichen - sonst lässt sich die Reihenfolge auf
     dem Tablet nicht ändern. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: calc(var(--raum-2) * -1);
  border: 0;
  background: none;
  cursor: grab;
  color: var(--text-leise);
  font-size: 1.125rem;
  line-height: 1;
  border-radius: var(--rundung-klein);
  touch-action: none;
}
.woche-griff:hover { color: var(--text); background: var(--grund); }
.woche-fahrer.wird-sortiert {
  box-shadow: var(--schatten-schwebend);
  outline: 2px solid var(--gruen);
}
body.sortiert-fahrer { cursor: grabbing; user-select: none; }
/* Mit der Tastatur muss sichtbar sein, wo man gerade steht. */
.woche-fach:focus-visible,
.woche-pool:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: -2px;
}
.karte-nummer[href] {
  color: inherit;
  text-decoration: none;
}
.karte-nummer[href]:hover,
.karte-nummer[href]:focus-visible { text-decoration: underline; }

@media (max-width: 60rem) {
  /* Sechs Spalten nebeneinander ergeben auf dem Tablett Streifen von
     zwei Zentimetern. Dann lieber untereinander - aber als Zeile mit
     dem Tag links daneben, nicht als sechs volle Blöcke. Sonst wären
     es bei drei Fahrern achtzehn Bildschirmhöhen. */
  .woche-tage { grid-template-columns: 1fr; }
  .woche-fach {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    align-items: start;
    gap: var(--raum-2);
    border-left: 0;
    border-top: 1px solid var(--rand);
    min-height: 3.5rem;
  }
  .woche-fach:first-child { border-top: 0; }
  .woche-fach-kopf {
    display: grid;
    gap: 0;
    justify-items: start;
  }
  .woche-liste {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  }
}

/* Auf dem Telefon ist für eine Tagesspalte NEBEN den Karten kein
   Platz mehr - 4,5rem Beschriftung plus eine Karte von mindestens
   13rem passen nicht in 375 Punkte, und die Karten liefen rechts aus
   dem Bild. Dann steht der Tag eben darüber. */
@media (max-width: 34rem) {
  .woche { padding: var(--raum-2); gap: var(--raum-3); }
  .woche-fach { grid-template-columns: 1fr; }
  .woche-fach-kopf {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
  .woche-liste { grid-template-columns: 1fr; }
  .woche-pool-liste { grid-template-columns: 1fr; }
  /* Name, Zähler und Knopf brechen um, statt sich zu quetschen. */
  .woche-fahrer-kopf { flex-wrap: wrap; }
  .woche-fahrer-summe { margin-left: 0; }
  .wochen-blaettern { flex-wrap: wrap; }
}

/* Stammdaten: stillgelegte Zeilen bleiben lesbar, treten aber zurück. */
.ist-stillgelegt { opacity: 0.55; }
.farbtupfer {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--rundung-klein);
  border: 1px solid var(--rand);
  vertical-align: middle;
}

/* Kundenauswahl mit Vorschlägen - sieht aus wie ein Feld, verhält
   sich wie eine Suche. */
.kundenwahl { position: relative; }
.kundenwahl input[data-suchfeld] { width: 100%; }
.kundenwahl.ist-gewaehlt input[data-suchfeld] {
  border-color: var(--gruen-text);
}
.kundenwahl .schnellsuche-treffer { top: calc(100% + 0.25rem); }

/* Im Dialog fließt die Trefferliste MIT, statt darüber zu schweben.
   Ein Dialog hat "overflow: auto"; ein schwebender Kasten, der unten
   herausragt, wird deshalb abgeschnitten und steht unsichtbar
   außerhalb des Fensters. Genau so war die Kundensuche beim Anlegen
   eines Belegs kaputt: die Liste war da, nur nicht zu sehen. */
.dialog .kundenwahl .schnellsuche-treffer {
  position: static;
  margin-top: var(--raum-1);
  max-height: 14rem;
  box-shadow: none;
}

/* ==================================================================
   Fahrzeugakte
   ================================================================== */

/* Eine Frist: Datum, bei Bedarf mit Ampel. */
.frist { font-variant-numeric: tabular-nums; font-weight: 600; }
.frist.ist-bald {
  color: var(--status-beim-kunden);
}
.frist.ist-bald::after { content: " · bald fällig"; font-weight: 500; font-size: 0.8em; }
.frist.ist-abgelaufen { color: var(--achtung); }
.frist.ist-abgelaufen::after { content: " · abgelaufen"; font-weight: 500; font-size: 0.8em; }

.fristen-leiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--raum-3);
  margin: var(--raum-4) 0;
}
.frist-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
}
.frist-kachel .frist { font-size: 1.125rem; }
.fahrzeugakte .karte { margin-bottom: var(--raum-4); }
.fahrzeugakte .dokument-liste { margin-top: var(--raum-3); }
.gefahrenzone { border-color: color-mix(in srgb, var(--achtung) 35%, var(--rand)); }

/* ==================================================================
   Behälterwahl: Bauart und Größe als Knöpfe
   ================================================================== */

.behaelterwahl { display: grid; gap: var(--raum-2); }
.bw-reihe { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.bw-reihe[hidden] { display: none; }
.bw-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.8rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  background: var(--flaeche);
  border: 1.5px solid var(--rand-stark);
  border-radius: 999px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.bw-knopf:hover { border-color: var(--text-still); }
.bw-knopf.ist-gewaehlt {
  color: var(--flaeche);
  background: var(--text);
  border-color: var(--text);
}
.bw-farbe {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 2px;
  flex: none;
}
.bw-knopf.ist-gewaehlt .bw-farbe { box-shadow: 0 0 0 1.5px var(--flaeche); }
.bw-groessen .bw-knopf { min-width: 4.25rem; justify-content: center; }
.bw-eigene { display: inline-flex; align-items: center; gap: var(--raum-2); }
.bw-eigene[hidden] { display: none; }
.bw-eingabe {
  width: 6.5rem;
  min-height: 2.5rem;
  padding: var(--raum-1) var(--raum-3);
  border: 1px solid var(--rand-stark);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
@media (pointer: coarse) {
  .bw-knopf { min-height: 2.75rem; padding: 0.4rem 1rem; font-size: 0.9375rem; }
}

.karte-typ-fehlt {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--achtung);
}

/* ==================================================================
   Auftragsliste
   ================================================================== */

/* Zahl am Filterknopf: wie viele Aufträge in dieser Lage stehen. */
/* Als Verweis gebaut, wenn der Filter in der Adresse steht - er soll
   sich trotzdem anfühlen wie ein Knopf. */
a.chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.chip-zahl {
  margin-left: 0.4em;
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}
.chip.ist-aktiv .chip-zahl { opacity: 0.8; }

/* Überfällig: der Termin ist vorbei und niemand hat abgeschlossen. */
.marke-ueberfaellig {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--achtung);
}
.tabelle-auftraege tr.ist-ueberfaellig th[scope="row"] {
  box-shadow: inset 3px 0 0 var(--achtung);
}
.tabelle-auftraege td { vertical-align: top; }
/* Eine Auftrags- oder Belegnummer über zwei Zeilen ist unlesbar. */
.tabelle-auftraege th[scope="row"] { white-space: nowrap; }
.tabelle-auftraege .neben-text { line-height: 1.35; }

/* Papiere in der Abrechnungsübersicht: kurze Liste statt Fließtext. */
.papier-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.papier-liste a { font-size: 0.8125rem; }
.abrechnung .kennzahlen { margin: var(--raum-4) 0; }

/* ==================================================================
   Behälterlage über dem Wochenplan
   ================================================================== */

.behaelterlage { margin-bottom: var(--raum-5); }
.behaelterlage[hidden] { display: none; }
.behaelterlage-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--raum-3);
  margin-bottom: var(--raum-2);
  flex-wrap: wrap;
}
.tabelle-lage { font-variant-numeric: tabular-nums; }
.tabelle-lage td, .tabelle-lage th { padding-top: var(--raum-2); padding-bottom: var(--raum-2); }
.tabelle-lage .lage-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-weight: 600;
}
.tabelle-lage .lage-bestand { font-weight: 700; }
/* Mehr zugesagt als überhaupt dasteht - das muss auffallen. */
.tabelle-lage .ist-knapp {
  color: var(--achtung);
  font-weight: 700;
}

/* ==================================================================
   Abrechnung am Fahrauftrag
   ================================================================== */

.abrechnungs-block { border-color: var(--rand-stark); }
.tabelle-positionen { margin-top: var(--raum-2); width: 100%; }
/* Feste Breiten: sonst quetscht die Bezeichnung die Art auf einen
   Buchstaben zusammen, und niemand sieht mehr, was gewählt ist. */
.tabelle-positionen th:nth-child(1) { width: 7.5rem; }
.tabelle-positionen th:nth-child(3) { width: 5.5rem; }
.tabelle-positionen th:nth-child(4) { width: 6rem; }
.tabelle-positionen th:nth-child(5) { width: 8rem; }
.tabelle-positionen th:last-child { width: 3rem; }
.tabelle-positionen td, .tabelle-positionen th {
  padding-left: var(--raum-2);
  padding-right: var(--raum-2);
}
.tabelle-positionen .zeilenfeld {
  width: 100%;
  min-height: 2.25rem;
  padding: var(--raum-1) var(--raum-2);
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
}
.tabelle-positionen .rechts .zeilenfeld { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle-positionen .zeile-weg { min-height: 2.25rem; padding: 0 var(--raum-2); }

/* In der Fahrer-App: diese Fahrt wird berechnet. */
.tour-abrechnung {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
  margin-top: var(--raum-2);
  font-size: 0.875rem;
  color: var(--achtung);
  font-weight: 600;
}
.tour-abrechnung.ist-da { color: var(--status-auf-hof); }
.tour-abrechnung-marke {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.1em 0.6em;
}

/* Offen zur Abrechnung: rot, bis jemand es in eine Rechnung nimmt. */
.tabelle-abrechnung tr.ist-offen th[scope="row"] {
  box-shadow: inset 3px 0 0 var(--achtung);
}
.betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.betrag-fehlt { color: var(--achtung); font-weight: 600; }

/* Lohnfahrt: fremder Container, fremdes Material - eigene Marke, weil
   es für den Fahrer vor Ort etwas anderes bedeutet. */
.karte-lohn {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--status-unterwegs);
  border-radius: 3px;
  padding: 0.1em 0.45em;
}

/* Preisliste: Vorschläge über den Positionen, Hauspreise treten zurück. */
.preis-vorschlaege { margin-bottom: var(--raum-2); }
.preis-knopf { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.preis-knopf-name { font-weight: 600; }
.preis-knopf-wert {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
tr.ist-hauspreis th, tr.ist-hauspreis td { opacity: 0.75; }

/* Preistabelle: viele kurze Zeilen. Die Zellen sollen nicht
   auseinanderlaufen, nur weil in der Notiz zwei Wörter stehen. */
.preistabelle td, .preistabelle th { vertical-align: top; }
.preistabelle .zeilen-aktionen { flex-wrap: nowrap; gap: var(--raum-3); }
.preistabelle .neben-text { font-size: 0.8125rem; }