/* ============================================================
   Zustandsbuch (Fahrer-Interface) — geführter Übernahme-/Abgabe-Flow.
   Ergänzt assets/style.css: die Brand-Tokens (--navy, --champagne,
   --gruen …) kommen von dort und werden hier NICHT neu definiert.

   Leitplanken: Mobile-First, EIN Schritt pro Bildschirm, Tap-Ziele
   mindestens 44 px (Hauptknöpfe 56 px, Ampel 72 px), große Schrift,
   hoher Kontrast — die Nutzer stehen im Halbdunkel einer Tiefgarage.
   Alle Klassen mit Präfix .zbf- (Zustandsbuch-Flow), damit sich nichts
   mit der Übersichtsseite beißt.
   ============================================================ */

/* ---------- Vollbild-Layer ---------- */
.zbf-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* PFLICHT, nicht Kosmetik (Fehler vom 27.07.2026, in der Halle aufgefallen):
     Eine implizite `auto`-Spalte wird mindestens so breit wie der min-content
     ihres Inhalts. Die Kopfzeile enthält den Vorgangstitel mit
     `white-space: nowrap` — bei „Erstaufnahme · HH HH 384 · Sprinter VIP-Bus"
     sprengte das die Spalte, und weil Kopf, Inhalt und Fuß in DERSELBEN Spalte
     liegen, lief das ganze Layout rechts aus dem Bildschirm. minmax(0, 1fr)
     nagelt die Spalte auf die Containerbreite; erst dadurch greift das
     text-overflow: ellipsis im Titel überhaupt. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--paper);
  color: var(--ink);
  overscroll-behavior: contain;
}
/* Damit die Kinder auch wirklich schrumpfen dürfen (Flex/Grid-Items haben
   min-width: auto = min-content, solange man es nicht ausdrücklich aufhebt). */
.zbf-layer > * { min-width: 0; }

/* ---------- Kopf: Titel + Fortschritt ---------- */
.zbf-kopf {
  background: var(--navy);
  color: #fff;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
}
.zbf-kopfzeile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  min-width: 0;   /* sonst kann der Titel daneben nicht kürzen */
}
.zbf-kopf-titel {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zbf-abbrechen {
  flex: 0 0 auto;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
}
.zbf-abbrechen:active { background: rgba(255, 255, 255, .26); }

.zbf-balken-huelle {
  margin-top: 12px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}
.zbf-balken {
  height: 100%;
  width: 0;
  background: var(--champagne);
  border-radius: 999px;
  transition: width .2s ease-out;
}
.zbf-schrittzahl {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--champagne);
  letter-spacing: .02em;
}

/* ---------- Inhalt ---------- */
.zbf-inhalt {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px 24px;
}
.zbf-inhalt:focus { outline: none; }
.zbf-laden { color: var(--muted); text-align: center; padding: 40px 0; font-size: 17px; }

/* Schriftgrößen skalieren mit der Displaybreite (clamp): auf einem kleinen
   iPhone SE bleibt die Überschrift einzeilig, auf einem großen Gerät wird sie
   spürbar größer. Feste px-Größen wären für die eine oder andere Gruppe immer
   falsch — Zielgruppe sind teils ältere Augen auf teils kleinen Displays. */
.zbf-frage {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(27px, 8vw, 34px);
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 6px;
}
/* Erklärtexte sind Anweisungen, keine Randnotizen → dunkler und größer als
   der frühere Grauton (der war in der Tiefgarage kaum zu lesen). */
.zbf-unter { color: var(--ink); font-size: 18px; margin-bottom: 14px; }
.zbf-abstand { margin-top: 22px; }

.zbf-karte {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 14px;
  margin-bottom: 16px;
}

/* ---------- Werte-Liste (Anzeige + Zusammenfassung) ---------- */
.zbf-werte { display: grid; }
.zbf-wert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.zbf-wert:last-child { border-bottom: 0; }
.zbf-wert-lbl { color: var(--muted); font-size: 15px; }
.zbf-wert-val {
  font-weight: 800;
  font-size: 18px;
  color: var(--navy);
  text-align: right;
}
.zbf-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.zbf-punkt {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--grau); flex: 0 0 auto;
}
.zbf-punkt.gruen { background: var(--gruen); }
.zbf-punkt.gelb  { background: var(--gelb); }
.zbf-punkt.rot   { background: var(--rot); }

/* ---------- Hinweis-/Merkerzeilen ---------- */
.zbf-merker {
  background: var(--ivory);
  border-left: 5px solid var(--champagne);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
}
.zbf-merker-gross { font-size: 20px; padding: 18px 16px; }

.zbf-info {
  background: var(--ivory);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 15px;
  color: var(--muted);
  display: grid;
  gap: 6px;
}

.zbf-warnung {
  background: #FDECEA;
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0;
  color: var(--rot);
  font-size: 16px;
  font-weight: 600;
}
.zbf-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.zbf-check input { width: 26px; height: 26px; flex: 0 0 auto; accent-color: var(--navy); }

/* ---------- Große Auswahlflächen ---------- */
.zbf-flaeche {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  min-height: 56px;
  cursor: pointer;
}
.zbf-flaeche:active { background: var(--ivory); }
.zbf-gross { min-height: 76px; }
.zbf-flaeche-titel {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
}
.zbf-flaeche-unter {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--muted);
}
.zbf-flaeche.is-gewaehlt {
  border-color: var(--navy);
  background: var(--navy);
}
.zbf-flaeche.is-gewaehlt .zbf-flaeche-titel { color: #fff; }
.zbf-flaeche.is-gewaehlt .zbf-flaeche-unter { color: rgba(255, 255, 255, .8); }
.zbf-flaeche-hell { background: var(--ivory); border-style: dashed; }
/* Fläche mit Folgen (z. B. „Alles verwerfen") — rot umrandet, aber nicht
   vollflächig rot: sie soll erkennbar sein, nicht anziehend wirken. */
.zbf-flaeche-warnung { border-color: var(--rot); }
.zbf-flaeche-warnung .zbf-flaeche-titel { color: var(--rot); }

.zbf-link {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 14px 4px;
  min-height: 44px;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================================
   Foto-Schritt — der am stärksten überarbeitete Bildschirm.
   Praxisbefund 27.07.2026: „die Situation mit den Fotos war nicht ganz klar",
   dazu Chauffeure mit schlechteren Augen auf kleineren Displays. Deshalb:
   Fortschrittspunkte, sehr große Überschrift, Piktogramm mit Sichtkegel,
   Hinweis in echter Lesegröße und ein einziger, großer Auslöser.
   ============================================================ */

/* Fortschrittspunkte: wie viele Fotos sind fertig, welches ist dran. */
.zbf-punktleiste {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
}
.zbf-punkt-schritt {
  flex: 1 1 0;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
}
.zbf-punkt-schritt.ist-fertig { background: var(--gruen); }
.zbf-punkt-schritt.ist-dran {
  background: var(--champagne);
  box-shadow: 0 0 0 3px rgba(184, 153, 104, .25);
}

.zbf-fotozaehler {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 4px;
}
.zbf-foto-titel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 9.5vw, 40px);
  line-height: 1.08;
  color: var(--navy);
  margin-bottom: 14px;
}

/* Piktogramm: Auto von oben, Standort + Sichtkegel. Steht dort, wo später
   die Vorschau steht — der Fahrer schaut also immer an dieselbe Stelle. */
.zbf-pikto {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 10px 4px;
  margin-bottom: 14px;
}
.zbf-pikto-svg {
  display: block;
  width: 100%;
  max-height: 34vh;
  height: auto;
}

/* ---------- Der Auslöser bleibt sichtbar (Punkt 14 aus dem Testbetrieb) ----------
   „Foto aufnehmen" muss ohne Scrollen erreichbar sein — auf jedem Display und
   bei jeder eingestellten Schriftgröße. Also wird der Inhalt zu einer Spalte,
   in der NUR das Bild nachgibt: Text und Knopf behalten ihre Größe. Reicht
   auch das nicht, blendet flow.js das Bild ganz aus (unter 90 px erklärt ein
   Piktogramm nichts mehr). Große Systemschrift ist eine Einstellung, kein
   Fehler — niemals den Text kleiner rechnen, damit das Bild bleibt. */
.zbf-inhalt.hat-bild {
  display: flex;
  flex-direction: column;
}
.zbf-inhalt.hat-bild > * { flex: 0 0 auto; }
.zbf-inhalt.hat-bild > .zbf-pikto {
  flex: 0 1 auto;
  min-height: 0;
}
/* Die eigene Aufnahme schrumpft mit, verschwindet aber NIE: Sie ist das
   Ergebnis, das der Fahrer prüfen will. Unter 72 px hört sie auf nachzugeben —
   dann scrollt lieber der Rest. */
.zbf-inhalt.hat-bild > .zbf-vorschau {
  flex: 0 1 auto;
  min-height: 72px;
}
/* Damit das Piktogramm mit seiner Hülle schrumpft statt überzulaufen. */
.zbf-inhalt.hat-bild > .zbf-pikto {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.zbf-inhalt.hat-bild > .zbf-pikto > .zbf-pikto-svg {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;   /* die Spalte deckelt jetzt, nicht mehr 34vh */
}
.zbf-inhalt.hat-bild > .zbf-pikto > .zbf-pikto-text { flex: 0 0 auto; }
.zbf-pikto.ist-verborgen,
.zbf-vorschau.ist-verborgen { display: none !important; }
.zbf-pikto-text {
  padding: 8px 4px 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
}

/* Der Hinweis ist eine Arbeitsanweisung — entsprechend groß und kontrastreich. */
.zbf-foto-hinweis {
  background: var(--ivory);
  border-left: 5px solid var(--champagne);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--navy);
}

/* Ein einziger Auslöser, unübersehbar — kein Suchen im Halbdunkel. */
.zbf-ausloeser {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: var(--radius);
  padding: 20px 16px;
  min-height: 84px;
  cursor: pointer;
}
.zbf-ausloeser:active { background: var(--navy-soft); }

/* STILLER AUSLÖSER, sobald ein Foto da ist (Testbetrieb 19.08.2026):
   Vorher blieb „Foto neu aufnehmen" ein 84px hoher, navyfarbener Block —
   deutlich lauter als „Weiter" im Fuß (56px, 66% Breite). Die Fahrer haben
   folgerichtig darauf getippt und immer wieder neu fotografiert. Der Knopf
   bleibt erreichbar, gibt die Lautstärke aber an „Weiter" ab. */
.zbf-ausloeser.ist-still {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  background: var(--ivory);
  border: 1px solid var(--line);
  padding: 14px 16px;
  min-height: 52px;
}
.zbf-ausloeser.ist-still:active { background: var(--line); }

/* ---------- Foto-Vorschau + Status ---------- */
/* CONTAIN, NICHT COVER (Testbetrieb 19.08.2026): `cover` schnitt das Bild auf
   die Kastenform zu. Der Fahrer sah einen Ausschnitt und konnte nicht
   beurteilen, ob die Ecke wirklich drauf ist — also genau das nicht, wofür er
   das Foto macht. Der dunkle Grund lässt die Ränder gewollt aussehen. */
.zbf-vorschau {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #10202F;
  margin-bottom: 6px;
}
.zbf-vorschau.ist-antippbar { cursor: zoom-in; }
.zbf-lupe {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  margin: 0 0 12px;
}
.zbf-vorschau-leer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--muted);
  font-weight: 700;
}
.zbf-status {
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
  margin: 6px 0 10px;
}
.zbf-status.ok     { color: var(--gruen); }
.zbf-status.fehler { color: var(--rot); font-weight: 600; }

/* ---------- Abschlussbildschirm ----------
   Nach der Übernahme die einzige Botschaft: losfahren, App zu, erst beim
   Abstellen wieder her. Eine Einblendung wäre nach drei Sekunden weg. */
.zbf-fertig {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 4px 8px;
}
.zbf-fertig-haken {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--gruen);
  color: #fff;
  font-size: 46px;
  line-height: 84px;
  font-weight: 800;
  margin-bottom: 20px;
}
.zbf-fertig-titel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 8vw, 34px);
  line-height: 1.12;
  color: var(--navy);
  margin-bottom: 14px;
}
.zbf-fertig-text {
  font-size: 18px;
  line-height: 1.45;
  max-width: 30em;
  margin-bottom: 10px;
}

/* ---------- Aufgaben ---------- */
.zbf-aufgabe {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
}
.zbf-aufgabe-titel {
  font-size: 19px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 10px;
}
.zbf-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zbf-wahl {
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  background: var(--ivory);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 14px 8px;
  min-height: 56px;
  cursor: pointer;
}
.zbf-wahl.is-gewaehlt { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- Felder ---------- */
.zbf-feld { display: block; margin: 4px 0 12px; }
.zbf-feld > span {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--ink);
}
.zbf-feld input,
.zbf-feld textarea {
  width: 100%;
  font: inherit;
  font-size: 19px;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  resize: vertical;
}
.zbf-feld input:focus,
.zbf-feld textarea:focus {
  outline: 3px solid var(--champagne);
  border-color: var(--champagne);
}
.zbf-km { font-size: 26px !important; font-weight: 800; letter-spacing: .03em; }

/* ---------- Inventar-Kacheln ---------- */
.zbf-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.zbf-kachel {
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 16px 10px;
  min-height: 64px;
  cursor: pointer;
}
.zbf-kachel.is-gewaehlt {
  background: var(--rot);
  border-color: var(--rot);
  color: #fff;
}

/* ---------- Ampel (drei große Farbflächen) ---------- */
.zbf-ampeln { display: grid; gap: 12px; }
.zbf-ampel {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 84px;
  padding: 16px 18px;
  font: inherit;
  border: 3px solid transparent;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  opacity: .82;
}
.zbf-ampel.gruen { background: var(--gruen); }
.zbf-ampel.gelb  { background: var(--gelb); }
.zbf-ampel.rot   { background: var(--rot); }
.zbf-ampel-text { font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.zbf-ampel.is-gewaehlt {
  opacity: 1;
  border-color: var(--navy);
  box-shadow: 0 6px 18px rgba(10, 37, 62, .28);
}
.zbf-ampel.is-gewaehlt::after {
  content: '✓';
  margin-left: auto;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

/* ---------- Tank ---------- */
.zbf-tank { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.zbf-tankbtn {
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 14px 2px;
  min-height: 64px;
  cursor: pointer;
}
.zbf-tankbtn.is-gewaehlt { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- Gemeldete Schäden (Kurzliste) ---------- */
.zbf-gemeldet {
  background: var(--ivory);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 6px 0 12px;
  font-size: 16px;
}
.zbf-gemeldet-kopf { font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.zbf-gemeldet ul { margin: 0; padding-left: 20px; }
.zbf-gemeldet li { margin: 2px 0; }

/* ---------- Fuß: Zurück / Weiter ---------- */
.zbf-fuss {
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.zbf-hinweis {
  background: #FDECEA;
  color: var(--rot);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
}
.zbf-fussknoepfe { display: flex; gap: 10px; }
.zbf-btn {
  flex: 1 1 auto;
  font: inherit;
  font-size: 19px;
  font-weight: 800;
  border: 0;
  border-radius: var(--radius);
  padding: 16px 12px;
  min-height: 56px;
  cursor: pointer;
}
.zbf-btn-zurueck {
  flex: 0 0 34%;
  background: var(--ivory);
  color: var(--navy);
  border: 1px solid var(--line);
}
.zbf-btn-weiter { background: var(--navy); color: #fff; }
.zbf-btn-weiter:active { background: var(--navy-soft); }
.zbf-btn-weiter.is-final { background: var(--gruen); }
.zbf-btn.is-aus { opacity: .5; }

/* ---------- Unterdialog ---------- */
.zbf-dialog {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(10, 37, 62, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.zbf-dialog-box {
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);   /* s. Kommentar bei .zbf-layer */
  background: var(--paper);
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}
.zbf-dialog-box > * { min-width: 0; }
.zbf-dialog-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--navy);
  color: #fff;
}
.zbf-dialog-titel {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
}
.zbf-x {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font: inherit;
  font-size: 20px;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.zbf-dialog-inhalt {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}
.zbf-dialog-text { font-size: 17px; margin-bottom: 14px; }
.zbf-dialog-abschnitt {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 6px 0 8px;
}
.zbf-dialog-hinweis { color: var(--muted); font-size: 15px; margin-top: 12px; }
.zbf-dialog-fuss {
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--card);
}
.zbf-artliste { display: grid; }

/* Silhouette (Modul assets/silhouetten.js zeichnet hier hinein) */
.zbf-silhouette {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  margin-bottom: 12px;
  min-height: 180px;
}
.zbf-silhouette svg, .zbf-silhouette img, .zbf-silhouette canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

/* Altschäden-Liste */
.zbf-schadenzeile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.zbf-schaden-kopf { font-weight: 800; color: var(--navy); font-size: 17px; }
.zbf-schaden-text { font-size: 16px; margin-top: 4px; }
.zbf-minibilder { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.zbf-minibild {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ivory);
  display: block;
}
/* Das Vorschaubild sitzt jetzt in einem Knopf — ein <img> allein ist für
   Tastatur und Vorlesesoftware kein Bedienelement. */
.zbf-minibild-knopf {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  line-height: 0;
}
.zbf-minibild-knopf:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
/* „+2" auf dem dritten Bild, wenn mehr da sind. Ohne diesen Hinweis wüsste
   niemand, dass es weitere Fotos gibt — vorher waren sie unsichtbar. */
.zbf-minibild-mehr {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(10, 37, 62, .62);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

/* ---------- Fotos einer Schadensmeldung (mehrere je Meldung) ----------
   Zeilen statt Kachelraster: In einer Kachel müsste das Entfernen-Kreuz auf
   dem Bild sitzen und wäre mit Handschuhen kaum zu treffen — und jede Zeile
   trägt hier ohnehin ihren eigenen Sendestatus, der Platz braucht. */
.zbf-fotoliste {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.zbf-fotozeile {
  display: flex;
  flex-wrap: wrap;          /* der Status rutscht in eine eigene Zeile */
  align-items: center;
  gap: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 8px;
}
.zbf-fotozeile-bild {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 8px;
  line-height: 0;
  cursor: pointer;
}
.zbf-fotozeile-bild img {
  display: block;
  width: 84px;
  height: 63px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ivory);
}
.zbf-fotozeile-bild:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.zbf-fotozeile-titel {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  font-size: 17px;
  color: var(--navy);
}
/* Volle Breite: Fehlermeldungen des Servers sind ganze Sätze und dürfen
   nicht in die Restspalte neben dem Vorschaubild gequetscht werden. */
.zbf-fotozeile-status {
  flex: 1 0 100%;
  font-size: 15px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.zbf-fotozeile-status.ok     { color: var(--gruen); font-weight: 700; }
.zbf-fotozeile-status.fehler { color: var(--rot);   font-weight: 700; }
/* „markiert" hinter dem Titel: kleiner Beleg dafür, dass in dem Bild etwas
   eingezeichnet ist — sonst sieht man es erst in der Großansicht. */
.zbf-fotozeile-marke {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rot);
  border: 1px solid var(--rot);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: 2px;
}
.zbf-fotozeile-knoepfe {
  flex: 1 0 100%;
  display: flex;
  gap: 10px;
}
.zbf-fotozeile-tat,
.zbf-fotozeile-weg {
  flex: 1 1 0;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 48px;
  padding: 0 12px;
  cursor: pointer;
}
.zbf-fotozeile-tat { color: var(--navy); }
.zbf-fotozeile-weg { color: var(--rot); }
/* Während des Sendens sind Entfernen, Einzeichnen und Aufnehmen gesperrt —
   sonst verschiebt sich die Liste unter dem laufenden Upload. */
.zbf-fotozeile-tat[disabled],
.zbf-fotozeile-weg[disabled],
.zbf-wahl[disabled],
.zbf-btn[disabled],
.zbf-flaeche[disabled] { opacity: .5; cursor: default; }

/* ---------- Stelle im Foto einzeichnen ----------
   Die Zeichenfläche liegt deckungsgleich über dem Bild; ihre Maße setzt
   flow.js nach dem Einhängen (Seitenverhältnis des Fotos, gedeckelt auf
   knapp die halbe Bildschirmhöhe). touch-action muss aus, sonst scrollt
   die Seite mit, statt einen Kreis zu ziehen. */
/* Bewusst OHNE Rahmen: Ein Rand würde die Bildfläche um zwei Pixel
   verkleinern, die Zeichenfläche läge dann minimal versetzt über dem Foto. */
.zbf-malflaeche {
  position: relative;
  margin: 0 auto 12px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ivory);
}
.zbf-malflaeche img,
.zbf-malflaeche canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.zbf-malflaeche img { object-fit: contain; }
.zbf-malflaeche canvas { touch-action: none; cursor: crosshair; }
.zbf-malzeile { margin-bottom: 10px; }

/* ---------- Foto groß ansehen ----------
   Eigene Ebene über allem. Bedienung bewusst grob: ganzflächig antippen
   schließt, die Blätterknöpfe sind fingergroß. Wer das in der Halle
   benutzt, hat Handschuhe an oder nasse Hände. */
.zbf-foto-gross {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(8, 12, 18, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 12px 84px;
}
.zbf-fg-bild {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.zbf-fg-zu {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.zbf-fg-leiste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.zbf-fg-blatt {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.zbf-fg-zaehler {
  color: #fff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  text-align: center;
}
.zbf-foto-gross [hidden] { display: none !important; }

/* ---------- Größere Displays ---------- */
@media (min-width: 700px) {
  .zbf-kopf > *, .zbf-inhalt, .zbf-fuss > * {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .zbf-inhalt { width: 100%; }
  .zbf-dialog { align-items: center; }
  .zbf-dialog-box { border-radius: 18px; max-height: 86dvh; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .zbf-balken { transition: none; }
}