/* Fahrer-App – mobile-first, große Bedienelemente für Handschuh-Betrieb */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f4f5f7; --card: #fff; --text: #1a1d21; --muted: #4b5563;
  /* AKZENTFARBE = das Blau des Firmenlogos (Vorgabe des Chefs am 14.08.2026:
     "nur die akzente der farbe grün in blau ändern").

     Das Logo selbst ist #3198D3. Als Akzent taugt es nicht überall: auf dem
     Kopfbalken und den Knöpfen steht WEISSE Schrift darauf, und #3198D3 bringt
     dafür nur 3,2:1 Kontrast – zu wenig für kleine Schrift (gebraucht: 4,5:1).
     Ein Fahrer liest das draußen bei Sonne auf einem Handy.

     Deshalb zwei Töne mit DEMSELBEN Farbton (202 Grad) und derselben Sättigung:
       --akzent      #257BAC  dunkler, 4,66:1 zu Weiß – für Flächen mit Schrift
       --logo-blau   #3198D3  das Logo-Blau selbst – für Linien und Hervorhebungen,
                              auf denen keine weiße Schrift liegt
     Gerechnet, nicht geschätzt: die Werte stammen aus dem Logo (Farbe
     ausgemessen) und einer Kontrastrechnung nach WCAG.

     NICHT umgestellt wurden die STATUSFARBEN (grün für "frei", "gesendet", das
     Häkchen ✓, rot für gesperrt). Grün heißt dort "in Ordnung" – das ist eine
     Aussage, keine Zierde. Blau daraus zu machen würde das Signal löschen. */
  --akzent: #257bac; --akzent-hell: #e2f0f9; --logo-blau: #3198d3;
  --trocken: #8d6e63; --kuehl: #1976d2; --tk: #00838f;
  --warn: #c62828; --rand: #e2e4e8;
}
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
header.app { position: sticky; top: 0; z-index: 20; background: var(--akzent); color: #fff; padding: 8px 16px; display: flex; align-items: center; gap: 10px; }
header.app h1 { font-size: 17px; font-weight: 600; flex: 1; }
/* 44 px hoch, dafuer weniger Polsterung am Kopf: die Leiste bleibt so hoch
   wie vorher, die Knoepfe sind aber treffbar. */
header.app button { background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; min-height: 44px; font-size: 14px; }
main { max-width: 640px; margin: 0 auto; padding: 14px 12px 90px; }
.card { background: var(--card); border: 1px solid var(--rand); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
h2 { font-size: 15px; margin-bottom: 10px; }
label.feld { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
input, select, textarea { width: 100%; font-size: 17px; padding: 12px; border: 1px solid var(--rand); border-radius: 10px; background: #fff; color: var(--text); }
button.primaer { width: 100%; background: var(--akzent); color: #fff; border: 0; border-radius: 12px; padding: 16px; font-size: 17px; font-weight: 600; margin-top: 12px; }
button.sekundaer { width: 100%; background: #fff; color: var(--akzent); border: 2px solid var(--akzent); border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 600; margin-top: 10px; }
button:disabled { opacity: .5; }
/* Ein Link, der wie ein Knopf aussieht – gebraucht für die Tourabrechnung, die
   sich als PDF in einem neuen Fenster öffnet. Dieselben Maße wie ein Knopf,
   damit die Fingergröße stimmt (mindestens 44 px hoch). */
/* Das Firmenlogo über der Anmeldung und dem Startbildschirm.
   Es liegt auf einer WEISSEN Fläche mit runden Ecken – wie die übrigen Karten.
   Grund: die Logodatei ist ein JPEG und hat einen weißen Grund. Ohne diese
   Fläche stünde auf dem grauen Hintergrund ein sichtbarer weißer Kasten um das
   Logo. Mit einem PNG mit durchsichtigem Grund könnte die Fläche entfallen.
   Feste width/height am Bild verhindern, dass der Inhalt beim Laden springt. */
.logo-oben { display: flex; justify-content: center; margin: 2px 0 12px; }
.logo-oben img { width: 210px; max-width: 62vw; height: auto;
  background: #fff; border-radius: 12px; padding: 10px 16px;
  border: 1px solid var(--rand); box-sizing: content-box; }

a.knopf-link { display: flex; align-items: center; justify-content: center;
  min-height: 48px; width: 100%; box-sizing: border-box; background: #fff;
  color: var(--akzent); border: 2px solid var(--akzent); border-radius: 12px;
  padding: 14px; font-size: 16px; font-weight: 600; margin-top: 10px;
  text-decoration: none; }
.hinweis { font-size: 14px; color: var(--muted); margin-top: 8px; }
.fehler { color: var(--warn); font-size: 14px; margin-top: 8px; }
/* Fingergroesse: 44 px ist das Mindestmass, mit Handschuhen tippt man darunter
   daneben. Vorher hatte button.mini keine Mindesthoehe - der Knopf
   "Standort zulassen" war dadurch nur 19 px hoch (im Klick-Test gemessen). */
button.mini { flex: none; border: 1px solid var(--rand); background: #fff; border-radius: 10px; padding: 0 14px; min-height: 44px; font-size: 15px; color: var(--akzent); font-weight: 600; }
button.primaer.hell { background: #fff; color: var(--akzent); }

/* Standort-Abweichungswarnung */
.standort-warn { background: #fdecea; border: 2px solid var(--warn); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 700; color: #8c1d18; margin-bottom: 12px; }

/* Wichtiger Kundenhinweis: Banner statt Kleintext */
.wichtig { background: #fff8e1; border: 2px solid #f9a825; border-radius: 12px; padding: 12px 14px; font-size: 16px; font-weight: 700; color: #7a4f01; margin-bottom: 12px; }
.stopp-warn { color: #a15c00; font-weight: 700; }

/* Fortschritt der Tour */
.fortschritt { height: 12px; background: var(--rand); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.fortschritt .balken { height: 100%; background: var(--akzent); border-radius: 999px; transition: width .3s; }
.card.naechster { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.card.naechster .primaer { background: #fff; color: var(--akzent); }

/* Beleg-Kopf */
.kunde-name { font-size: 20px; }
.adresse { font-size: 15px; margin-top: 2px; }
.bar-badge { display: inline-block; background: var(--warn); color: #fff; font-weight: 800; font-size: 16px; border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.bar-tag { display: inline-block; background: var(--warn); color: #fff; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 3px 8px; }
.tel-knopf { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 1px solid var(--rand); border-radius: 10px; padding: 10px 14px; font-size: 15px; color: var(--akzent); font-weight: 700; text-decoration: none; min-height: 44px; }

/* Status-Tags */
.tag { border-radius: 999px; padding: 3px 10px; font-size: 12.5px; background: #fff3e0; color: #a15c00; }
.tag.ok { background: var(--akzent-hell); color: var(--akzent); }
.tag.warte { background: #e3f2fd; color: #1565c0; }
.tag.warn { background: #fff3e0; color: #a15c00; }
.tag.rot { background: var(--warn); color: #fff; font-weight: 700; }

/* Pflicht-Status unter den Aktions-Kacheln */
.pflicht-status { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--warn); }
.pflicht-status.ok { color: var(--akzent); }
.aktionen button.fehlt { border: 2px solid var(--warn); }
.aktionen button.fehlt .status { color: var(--warn); font-weight: 700; }

/* Temperatur */
input.temp.kuehl { border: 2px solid var(--kuehl); }
input.temp.tk { border: 2px solid var(--tk); }
label.feld.temp-kuehl { color: var(--kuehl); font-weight: 700; }
label.feld.temp-tk { color: var(--tk); font-weight: 700; }
.chips.klein { margin-top: 8px; }
.chips.klein button { padding: 8px 12px; min-height: 44px; }

/* Warenliste einklappbar */
details.ware summary { min-height: 48px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; font-size: 15px; list-style: none; }
details.ware summary::before { content: "▸"; color: var(--akzent); font-size: 18px; }
details.ware[open] summary::before { content: "▾"; }
details.ware .zone { margin-top: 10px; }

/* Erfolgskarte */
.card.erfolg { text-align: center; border-color: var(--akzent); }
.erfolg-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--akzent); color: #fff; font-size: 36px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 4px auto 10px; }

/* Hilfe-Zeile (Anleitung + Problem melden) */
.hilfe-zeile { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.hilfe-zeile a { color: var(--akzent); font-weight: 600; text-decoration: none; font-size: 15px; min-height: 44px; display: flex; align-items: center; }
.hilfe-zeile button.mini { min-height: 44px; }
.modal textarea { width: 100%; font-size: 16px; padding: 12px; border: 1px solid var(--rand); border-radius: 10px; }

/* Speicher-Warnung und Offline-Anzeige */
.speicher-warnung { background: var(--warn); color: #fff; padding: 12px 16px; font-size: 15px; font-weight: 700; position: sticky; top: 0; z-index: 19; }
#offlineTag { background: #f9a825; color: #4a2f00; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 9px; letter-spacing: .5px; }

/* Sprachauswahl */
.sprachen-liste { display: flex; flex-direction: column; gap: 10px; }
.sprachen-liste button { border: 1px solid var(--rand); background: #fff; border-radius: 12px; padding: 16px; font-size: 18px; font-weight: 600; }
.sprachen-liste button.aktiv { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent); }

/* Ware komplett zurück */
.komplett-banner { background: var(--warn); color: #fff; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 800; margin-bottom: 12px; }
button.komplett { width: 100%; border: 2px solid var(--warn); background: #fff; color: var(--warn); border-radius: 12px; padding: 12px 10px; font-size: 15px; font-weight: 700; margin-bottom: 10px; min-height: 56px; }
button.komplett .status { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 3px; }
button.komplett.aktiv { background: var(--warn); color: #fff; }
button.komplett.aktiv .status { color: #fff; opacity: .9; }

/* Rechts-nach-links (Arabisch): Flexbox dreht automatisch, nur Sonderfälle */
[dir="rtl"] .stopp .betrag { text-align: left; align-items: flex-start; }
[dir="rtl"] .k-tab th, [dir="rtl"] .k-tab td { text-align: right; }

/* Retoure: Artikel aus der Lieferung */
.lieferung-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lieferung-art { text-align: left; border: 1px solid var(--rand); background: #fff; border-radius: 10px; padding: 11px 12px; font-size: 15px; min-height: 52px; }
.lieferung-art small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.lieferung-art:active { background: var(--akzent-hell); }

/* Tour-Liste */
.stopp { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--rand); border-radius: 12px; background: #fff; margin-bottom: 8px; }
.stopp.done { opacity: .55; background: #eef4f0; }
.stopp .nr { min-width: 34px; height: 34px; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.stopp.done .nr { background: var(--akzent); color: #fff; }
.stopp .info { flex: 1; min-width: 0; }
.stopp .info b { display: block; font-size: 16px; }
.stopp .info small { color: var(--muted); font-size: 14px; display: block; }
.stopp .betrag { text-align: right; font-size: 13px; color: var(--muted); white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.stopp .betrag b { display: block; color: var(--text); font-size: 16px; }
/* Drei Beträge je Stopp: Heute / Offen vorher / Offen gesamt */
.betrag .fin { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.betrag .fin-z { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.betrag .fin-z i { font-style: normal; }
.betrag .fin-z b { display: inline; color: var(--text); font-size: 14px; }
.fin-karte { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: 14px; color: #fff; }
.fin-karte b { color: #fff; }
.stopp .navi { font-size: 22px; text-decoration: none; border: 1px solid var(--rand); border-radius: 10px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; }

/* Beleg / Positionen */
.zone { border-radius: 10px; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--rand); }
.zone .kopf { padding: 8px 12px; color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: .4px; }
.zone.trocken .kopf { background: var(--trocken); }
.zone.kuehl .kopf { background: var(--kuehl); }
.zone.tk .kopf { background: var(--tk); }
.pos { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--rand); background: #fff; font-size: 16px; }
.pos:nth-child(even) { background: #f7f8fa; }
.pos .mge { min-width: 92px; font-weight: 700; font-size: 17px; }
.pos .bez { flex: 1; }
.aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.aktionen button { border: 1px solid var(--rand); background: #fff; border-radius: 12px; padding: 14px 10px; font-size: 15px; font-weight: 600; color: var(--text); position: relative; min-height: 64px; }
.aktionen button .status { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; }
.aktionen button.erledigt { border-color: var(--akzent); background: var(--akzent-hell); }
.aktionen button.erledigt .status { color: var(--akzent); }
.temp-zeile { display: flex; gap: 10px; }
.temp-zeile > div { flex: 1; }

/* Modal */
.modal-hg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; display: flex; align-items: flex-end; }
.modal { background: #fff; width: 100%; max-width: 640px; margin: 0 auto; border-radius: 18px 18px 0 0; max-height: 92vh; display: flex; flex-direction: column; }
.modal .m-kopf { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--rand); }
.modal .m-kopf h3 { flex: 1; font-size: 16px; }
.modal .m-kopf button { background: none; border: 0; font-size: 28px; color: var(--muted); line-height: 1; min-width: 44px; min-height: 44px; }
.modal .m-body { overflow-y: auto; padding: 14px 16px; }
.modal .m-fuss { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rand); }

/* Leergut */
.lg-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rand); }
/* Große Kistenfotos: bewusst groß, damit man auf einen Blick ~3 Pfandarten sieht
   und die Kiste klar erkennt. Beutel-Icon und Retoure-Liste bleiben klein. */
.lg-zeile .bild { width: 96px; height: 96px; flex: none; }
/* Fotos im eigenen Seitenverhältnis (feste Breite, Höhe automatisch) – ganzes
   Bild, KEIN Zuschnitt und KEIN weißer Rand. Nur das SVG-Symbol bleibt quadratisch. */
.lg-zeile img.bild { width: 130px; height: auto; cursor: zoom-in; }

/* Zoom-Lightbox – NUR für Pfand-Bilder. Zwei-Finger-Pinch + Verschieben. */
.bild-zoom-hg { position: fixed; inset: 0; background: rgba(0,0,0,.86); z-index: 4000; display: flex; align-items: center; justify-content: center; touch-action: none; overscroll-behavior: contain; }
.bild-zoom-img { max-width: 94vw; max-height: 84vh; transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; }
.bild-zoom-zu { position: fixed; top: 14px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: #111; font-size: 26px; line-height: 1; }
.bild-zoom-tipp { position: fixed; bottom: 20px; left: 0; right: 0; text-align: center; color: #fff; opacity: .8; font-size: 13px; pointer-events: none; }
/* contain statt cover: die Fotos sind bereits passend zugeschnitten – nichts an
   den Seiten abschneiden, ganzes Bild zeigen. */
.lg-zeile img.bild { object-fit: contain; border-radius: 8px; border: 1px solid var(--rand); background: #fff; }

/* Kontrolleur: zwei große Knöpfe (Leergut / Rückläufer) */
.kontroll-knopf { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--rand); border-radius: 14px; padding: 16px; margin-bottom: 10px; font-size: 17px; color: var(--text); }
.kontroll-knopf .kk-icon { font-size: 26px; flex: none; }
.kontroll-knopf .kk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kontroll-knopf .kk-txt small { color: var(--muted); font-size: 13px; margin-top: 2px; }
.kontroll-knopf .kk-pfeil { font-size: 24px; color: var(--muted); flex: none; }
.kontroll-knopf:active { background: var(--akzent-hell); }

/* Kontrolleur: Häkchen je Stopp (geprüft) */
.stopp-check { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--rand); background: #fff; color: #fff; font-size: 20px; line-height: 1; padding: 0; }
.stopp-check.an { border-color: var(--akzent); background: var(--akzent); color: #fff; }
.stopp.geprueft { background: var(--akzent-hell); border-color: var(--akzent); }

/* Retoure: deutlicher Löschknopf */
.ret-del { flex: none; background: #fff; color: var(--warn); border: 1px solid var(--warn); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.ret-del:active { background: var(--warn); color: #fff; }
/* Rechte Spalte neben dem Bild: Text oben (volle Breite -> kein Wortbruch mitten
   im Wort), Stepper darunter rechts. */
.lg-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lg-haupt .menge-feld { align-self: flex-end; }
.lg-zeile .txt { min-width: 0; font-size: 14px; overflow-wrap: break-word; }
.lg-zeile .txt small { color: var(--muted); display: block; }
/* MENGENFELD statt Plus/Minus (14.08.2026). Die Knöpfe lagen beim Wischen durch
   die Liste unter dem Daumen und zählten unbemerkt mit – eine Kiste zu viel fällt
   erst im Büro auf. Jetzt wird die Zahl eingetippt.
   Das Feld ist mit 74 x 54 Punkten deutlich größer als die Mindestgröße: es ist
   das einzige Ziel in der Zeile, und es soll mit Handschuhen zu treffen sein.
   Der dickere Rahmen sagt "hier tippen" – vorher war es ein blasses Feld
   zwischen zwei Knöpfen. */
.menge-feld { flex: none; }
.menge-feld input { width: 74px; height: 54px; text-align: center; font-size: 20px;
  font-weight: 700; padding: 0; border: 2px solid var(--rand); border-radius: 10px;
  background: #fff; color: var(--text); }
.menge-feld input:focus { border-color: var(--akzent); outline: none;
  box-shadow: 0 0 0 3px var(--akzent-hell); }
/* Leeres Feld = nichts erfasst. Der Platzhalter bleibt blass, damit eine 0 nicht
   wie eine eingetippte Zahl aussieht. */
.menge-feld input::placeholder { color: #b8bec7; font-weight: 400; }

/* Retoure */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips button { border: 1px solid var(--rand); background: #fff; border-radius: 999px; padding: 9px 14px; min-height: 44px; min-width: 44px; font-size: 14px; }
.chips button.aktiv { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.suchtreffer { border: 1px solid var(--rand); border-radius: 10px; margin-top: 6px; max-height: 220px; overflow-y: auto; }
.suchtreffer div { padding: 10px 12px; border-bottom: 1px solid var(--rand); font-size: 14px; }
.suchtreffer div:active { background: var(--akzent-hell); }
.ret-liste .lg-zeile .bild { display: none; }

/* Fotos */
.foto-reihe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.foto-reihe img { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; border: 1px solid var(--rand); }
.foto-knopf { display: inline-flex; align-items: center; gap: 8px; border: 2px dashed var(--rand); border-radius: 10px; padding: 12px 16px; font-size: 15px; color: var(--akzent); background: #fff; font-weight: 600; }

/* Unterschrift */
canvas.unterschrift { width: 100%; height: 220px; border: 2px dashed var(--rand); border-radius: 12px; background: #fff; touch-action: none; }

/* Scanner */
#scanVideo { width: 100%; border-radius: 12px; background: #000; max-height: 46vh; }

/* Kasse */
.kasse-summe { font-size: 34px; font-weight: 800; color: var(--akzent); text-align: center; padding: 10px 0; }
.kasse-zeile { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--rand); font-size: 14.5px; }

/* Fußleiste */
nav.fuss { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--rand); display: flex; z-index: 30; padding-bottom: env(safe-area-inset-bottom); }
nav.fuss button { flex: 1; border: 0; background: none; padding: 10px 4px 12px; font-size: 14px; color: var(--muted); min-height: 56px; }
nav.fuss button.aktiv { color: var(--akzent); font-weight: 700; box-shadow: inset 0 3px 0 var(--akzent); }
nav.fuss .icon { display: block; font-size: 26px; margin-bottom: 2px; }

/* Kontrolle (Desktop-tauglich) */
body.kontrolle main { max-width: 1000px; }
.k-abschluss { border: 1px solid var(--rand); border-radius: 12px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.k-abschluss .k-kopf { display: flex; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; }
.k-abschluss .k-kopf b { font-size: 15px; }
.k-abschluss .k-kopf .tag { border-radius: 999px; padding: 3px 10px; font-size: 12.5px; background: #fff3e0; color: #a15c00; }
.k-abschluss .k-kopf .tag.ok { background: var(--akzent-hell); color: var(--akzent); }
.k-abschluss .k-body { border-top: 1px solid var(--rand); padding: 12px 14px; }
.k-tab { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 10px; }
.k-tab th, .k-tab td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--rand); }
.k-tab input { font-size: 14px; padding: 6px 8px; width: 90px; }
.filter-zeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filter-zeile > div { flex: 1; min-width: 140px; }
.filter-zeile button { flex: none; background: var(--akzent); color: #fff; border: 0; border-radius: 10px; padding: 12px 20px; font-size: 15px; font-weight: 600; }

/* Rückmeldungen der Fahrer */
.meldung { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.meldung.erledigt { opacity: .55; }
.meldung .m-text { font-size: 15px; margin-top: 3px; white-space: pre-wrap; }
.meldung button.mini { flex: none; }

/* Tour-Import aus büro+ */
.import-box { border: 1px dashed var(--rand); border-radius: 10px; padding: 12px; margin: 10px 0; font-size: 14px; }
.import-box textarea { width: 100%; font-size: 13px; font-family: Consolas, monospace; margin: 8px 0; }
.import-box kbd { border: 1px solid var(--rand); border-radius: 4px; padding: 1px 5px; font-size: 12px; background: #f7f8fa; }

/* Kontrolle: Summen, Badges, Abweichungen, Auswertungen */
.summen-zeile { display: flex; flex-wrap: wrap; gap: 10px; }
.kennzahl { flex: 1; min-width: 110px; border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; text-align: center; }
.kennzahl b { display: block; font-size: 19px; }
.kennzahl span { font-size: 12.5px; color: var(--muted); }
.kennzahl.warn b { color: var(--warn); }
.kennzahl.ok b { color: var(--akzent); }
.k-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.k-badge { border: 1px solid var(--rand); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; background: #f7f8fa; white-space: nowrap; }
.abweichung { color: var(--warn); font-weight: 700; }
.auswertung-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 800px) { .auswertung-grid { grid-template-columns: 1fr; } }
.grund-zeile { cursor: pointer; }
.grund-zeile:hover td { background: var(--akzent-hell); }
.grund-zeile.aktiv td { background: var(--akzent-hell); font-weight: 700; }
@media (min-width: 700px) { .aktionen { grid-template-columns: repeat(4, 1fr); } }

/* Getrennte Anmeldung / Tour-Kopf */
.tour-kopf { display: flex; align-items: center; gap: 12px; }
.tour-kopf-info { flex: 1; min-width: 0; }
.tour-kopf-info b { font-size: 16px; }
.tour-kopf button.mini { flex: none; min-height: 44px; }

/* Standort-Freigabe (erzwungen) */
.standort-pflicht { background: #fff8e1; border: 1px solid #f0c000; border-radius: 12px; padding: 10px 12px; font-size: 14px; color: #7a5b00; margin: 6px 0 12px; }
.standort-ok { background: var(--akzent-hell); border: 1px solid var(--akzent); border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--akzent); margin: 6px 0 12px; }

/* Rollenauswahl (Schritt 0: Fahrer oder Abholer) */
.rollen { display: grid; gap: 12px; margin-top: 6px; }
.rolle-knopf { display: block; width: 100%; text-align: left; background: #fff; border: 2px solid var(--rand); border-radius: 14px; padding: 18px 16px; min-height: 88px; }
.rolle-knopf b { display: block; font-size: 19px; color: var(--akzent); margin-bottom: 4px; }
.rolle-knopf small { color: var(--muted); font-size: 14px; }
.rolle-knopf:active { border-color: var(--akzent); background: var(--akzent-hell); }
header.app #btnRolle { font-size: 14px; }

/* Tour-Kopf: zwei Knöpfe nebeneinander */
.tour-kopf-knoepfe { display: flex; flex-direction: column; gap: 6px; flex: none; }

/* Reihenfolge ändern (Drag & Drop + Pfeile) */
/* touch-action NUR auf dem Griff sperren – sonst lässt sich die Liste nicht
   scrollen (touch-action:none auf der ganzen Zeile blockierte das Scrollen). */
.sort-zeile { background: #fff; }
.sort-zeile.zieht { opacity: .85; box-shadow: 0 6px 18px rgba(0,0,0,.18); border-radius: 12px; }
.sort-griff { flex: none; width: 44px; min-height: 48px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--akzent); cursor: grab; user-select: none; touch-action: none; }
.sort-pfeile { flex: none; display: flex; flex-direction: column; gap: 4px; }
.sort-pfeile button { width: 44px; height: 34px; border: 1px solid var(--rand); background: #fff; border-radius: 8px; font-size: 14px; color: var(--akzent); }
.sort-pfeile button:disabled { opacity: .3; }
.hinweis.sort-ok { color: var(--akzent); font-weight: 700; }

/* Abholer-Modus */
.ab-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ab-betrag { font-size: 22px; font-weight: 800; color: var(--akzent); white-space: nowrap; }
.ab-pos { margin-top: 10px; }
.ab-pos summary { cursor: pointer; color: var(--akzent); font-weight: 600; padding: 6px 0; }
.ab-pos-zeile { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rand); font-size: 14px; }

/* Rechnungsansicht (was der Kunde sieht) */
.rg-kopf { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 2px solid var(--akzent); margin-bottom: 10px; }
.rg-anschrift { font-size: 14.5px; line-height: 1.45; font-weight: 600; }
.rg-meta td { font-size: 13px; padding: 2px 0 2px 10px; color: var(--muted); }
.rg-meta td + td { color: var(--text); text-align: right; }
.rg-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rg-tab th { text-align: left; background: #f4f5f7; padding: 8px 6px; font-size: 12.5px; }
.rg-tab td { padding: 8px 6px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.rg-tab .num { text-align: right; white-space: nowrap; }
.rg-tab .rg-summe td { border-top: 1px solid var(--rand); color: var(--muted); }
.rg-tab .rg-gesamt td { font-size: 17px; color: var(--akzent); border-bottom: none; padding-top: 10px; }

/* Unterschrift: was wird quittiert? (Nachweiskraft) */
.sig-info { background: var(--akzent-hell); border: 1px solid var(--akzent); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; font-size: 14px; }
.sig-betrag { font-size: 24px; font-weight: 800; color: var(--akzent); margin: 4px 0; }
.sig-erklaerung { font-size: 13px; color: #2f4f3f; border-top: 1px solid var(--akzent); padding-top: 8px; margin-top: 8px; }
.sig-name { font-size: 13.5px; margin-top: 6px; }

/* Teilzahlung: Rechnung − Teilzahlung = Rest */
.rest-box { background: #f7f7f5; border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.rest-z { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 3px 0; }
.rest-z.rest-summe { border-top: 1.5px solid var(--rand); margin-top: 5px; padding-top: 7px; font-size: 16px; color: var(--akzent); }
.sig-teil { font-size: 13.5px; margin-top: 4px; color: #2f4f3f; }

/* Fertige Unterschrift mit Namen */
.sig-fertig { border: 1px solid var(--rand); border-radius: 10px; padding: 8px 10px; margin-top: 8px; background: #fff; }
.sig-fertig-name { font-size: 14px; margin-bottom: 4px; }
.sig-fertig img { display: block; max-width: 100%; max-height: 110px; }

/* Übungs-Rechnung: unübersehbar kennzeichnen */
.demo-banner { background: #fff4d6; border: 2px dashed #b8860b; color: #6b4e00; border-radius: 12px; padding: 12px 14px; font-weight: 700; margin-bottom: 12px; }
.ab-zeile.ab-demo { border: 2px dashed #b8860b; background: #fffbf0; }
.ab-zeile.ab-demo b { color: #6b4e00; }
.k-badge.demo-badge { background: #fff4d6; color: #6b4e00; border: 1px dashed #b8860b; }

/* Abholer: Liste der zuletzt erstellten Rechnungen (antippen) */
.ab-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 60vh; overflow-y: auto; }
.ab-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 12px 14px; min-height: 60px; }
.ab-zeile:active { border-color: var(--akzent); background: var(--akzent-hell); }
.ab-zeile-txt { flex: 1; min-width: 0; }
.ab-zeile-txt b { display: block; font-size: 15px; }
.ab-zeile-txt small { color: var(--muted); font-size: 12.5px; }
.ab-zeile-betrag { flex: none; text-align: right; font-weight: 700; color: var(--akzent); }
.ab-zeile-betrag .bar-tag { display: block; margin-top: 2px; }
#abListeBox summary { cursor: pointer; color: var(--akzent); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
/* Belegnummer ist der Hauptweg: großes, gut treffbares Feld */
input.gross { font-size: 22px; letter-spacing: 1px; text-align: center; font-weight: 700; padding: 16px 12px; }

/* Leergut: Beutel-Sonderzeile (ungezählt) */
/* DER UNGEZÄHLTE BEUTEL fällt jetzt ROT auf, nicht in der Akzentfarbe.
   Grund (Vorgabe des Chefs am 14.08.2026): an dieser Zeile MUSS im Büro noch
   etwas geändert werden – der Beutel wird dort nachgezählt, die Menge im Beleg
   ist eine vorläufige. In der Akzentfarbe sah die Zeile aus wie jede andere,
   also wie "erledigt". Rot heißt hier nicht "Fehler", sondern "noch offen" –
   deshalb steht der Satz dabei, statt nur die Farbe zu wechseln. */
.lg-zeile.lg-beutel { background: #fdecea; border: 1px solid var(--warn); border-radius: 12px;
  padding: 9px 10px; border-bottom: 1px solid var(--warn); margin-bottom: 6px; }
.lg-beutel-icon { width: 46px; flex: none; text-align: center; font-size: 26px; }
.lg-zeile.lg-beutel .txt b { color: var(--warn); }
.lg-zeile.lg-beutel .txt small { color: #8c1d18; }
/* Derselbe Hinweis am Stopp selbst, damit man das Leergut-Fenster nicht öffnen
   muss, um zu sehen, dass dort noch etwas offen ist. */
.beutel-offen { background: #fdecea; border: 1px solid var(--warn); color: #8c1d18;
  border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 14px; font-weight: 600; }

/* Angemeldet-Leiste: wer ist angemeldet, und ein Abmelden-Knopf in Fingergröße.
   Vorher hing "Abmelden" als winziger Knopf zwischen Anleitung und Melden –
   schwer zu treffen und leicht zu übersehen. */
.angemeldet-leiste { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.angemeldet-wer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.angemeldet-wer b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.angemeldet-wer small { color: var(--muted); font-size: 14px; }
.abmelden-knopf { min-height: 48px; padding: 12px 20px; font-size: 16px; font-weight: 700; flex: 0 0 auto; }

/* Erklärung über der Unterschrift. Kein Ankreuzfeld mehr: die Unterschrift
   selbst ist die Zustimmung, wie auf Papier. Der Satz muss aber dastehen –
   sonst ist es nur ein Namenszug. */
.sig-erklaerung { background: var(--akzent-hell); border: 1px solid var(--akzent);
  border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.sig-erklaerung small { display: block; font-size: 13px; color: var(--akzent); font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.sig-erklaerung b { display: block; font-size: 16px; line-height: 1.4; color: var(--text); }

/* Bereich ist nicht geschützt (kein Chef-Passwort im Haus gesetzt). Auffällig,
   aber nicht sperrend: eine geschlossene Kasse hält abends die ganze Tour auf. */
.schutz-warnung { background: #fff3cd; border: 2px solid #d98300; color: #6b4a00;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 15px; font-weight: 600; line-height: 1.4; }

/* Stopp ist nach der Unterschrift zu. Deutlich sichtbar, damit der Fahrer nicht
   ratlos auf graue Knöpfe tippt und denkt, die App sei kaputt. */
.zu-hinweis { background: #eef2f7; border: 1px solid var(--rand); border-left: 4px solid var(--akzent);
  border-radius: 10px; padding: 12px 14px; margin: 12px 0 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.aktionen button:disabled, button.komplett:disabled { opacity: .45; }

/* Der Übergabe-Code: groß, in zwei Blöcken, mit Abstand zwischen den Zeichen.
   Man soll ihn über den Hof rufen und abtippen können, nicht nur scannen. */
.uebergabe-code { font-family: "Courier New", monospace; font-size: 44px; font-weight: 700;
  letter-spacing: 6px; text-align: center; color: var(--akzent); background: var(--akzent-hell);
  border: 2px solid var(--akzent); border-radius: 14px; padding: 22px 10px; margin: 14px 0 8px;
  user-select: all; }
@media (max-width: 380px) { .uebergabe-code { font-size: 34px; letter-spacing: 3px; } }

/* Das QR-Bild dazu. Immer weißer Grund und dunkle Felder – auch im Nachtmodus,
   sonst findet keine Kamera den Code. Die Größe ist bewusst großzügig: gescannt
   wird von einem Handybildschirm auf ein anderes Handy, und ein zu kleines Bild
   verlangt ein Heranrücken, das im Betrieb keiner macht. Rand gehört zum Bild
   (im SVG enthalten), sonst erkennt der Leser den Code nicht. */
.uebergabe-qr { display: flex; justify-content: center; margin: 6px 0 2px; }
.uebergabe-qr svg { width: 260px; max-width: 78vw; height: auto; background: #fff;
  border: 1px solid var(--rahmen); border-radius: 10px; padding: 6px; }
@media (max-width: 380px) { .uebergabe-qr svg { width: 220px; } }

/* Fotos des Fahrers in der Prüfansicht. Kleine Vorschau, antippen vergrößert –
   der Kontrolleur soll auf einen Blick sehen, ob überhaupt fotografiert wurde. */
.nachweis-reihe { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 2px; }
.nachweis-reihe figure { margin: 0; flex: 0 0 auto; width: 96px; }
.nachweis-reihe img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--rand); background: #fff; display: block; }
.nachweis-reihe figcaption { font-size: 11px; color: var(--muted); text-align: center;
  margin-top: 3px; line-height: 1.2; }