/* =========================================================================
   Seitenlayouts.

   Dieselben Regeln wie in components.css: ausschließlich semantische Token
   der Ebenen 2 und 3, keine Hexwerte, kein Markentoken der Ebene 1.

   Mobil zuerst. Referenzbreite 375 px, Desktop ist der Sonderfall.
   ========================================================================= */

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

html {
  /* Verhindert, dass iOS Schrift eigenmächtig vergrößert. */
  -webkit-text-size-adjust: 100%;
}

body.seite {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg-soft);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Sprungmarke. Erstes fokussierbares Element der Seite, sichtbar sobald sie
   den Fokus hat. Sie hängt nicht an :hover.
   ------------------------------------------------------------------------- */
.sprungmarke {
  position: absolute;
  left: var(--space-2);
  top: calc(-1 * var(--tap-primary));
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  background: var(--action-bg);
  color: var(--action-fg);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}

.sprungmarke:focus {
  top: var(--space-2);
}

/* -------------------------------------------------------------------------
   Kopfleiste als Markenzone.

   Konzept 5.2 Regel 1: im Lagebild und in Listen ist die Marke auf die
   Kopfleiste reduziert. Konzept 5.4: die Kopfleiste nimmt keine
   Bedienelemente auf, Primäraktionen gehören in die Daumenzone.
   Auf --bg-stage steht ausschließlich --fg-on-stage. Gelb ist Fläche, nie
   Schrift.
   ------------------------------------------------------------------------- */
.kopfleiste {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-frame);
  background: var(--bg-stage);
  color: var(--fg-on-stage);
}

.kopfleiste__logo {
  display: block;
  width: 96px;
  height: 32px;
  flex: none;
  background-image: var(--logo-src);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.kopfleiste__organisation {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--fg-on-stage);
}

.kopfleiste__zusatz {
  flex-basis: 100%;
  font-size: var(--fs-label);
  color: var(--fg-on-stage);
}

/* -------------------------------------------------------------------------
   Inhalt
   ------------------------------------------------------------------------- */
.inhalt {
  flex: 1 1 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-4);
}

/* -------------------------------------------------------------------------
   Aktionszone, unteres Bildschirmdrittel.

   Primäraktionen landen hier und nicht in der Kopfleiste. Die Zone bleibt am
   unteren Rand haften, damit sie einhändig erreichbar ist.
   ------------------------------------------------------------------------- */
.aktionszone {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-page);
}

.aktionszone:empty {
  display: none;
}

/* -------------------------------------------------------------------------
   Fußzeile
   ------------------------------------------------------------------------- */
.fusszeile {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-label);
  color: var(--fg-muted);
  text-align: center;
}

/* -------------------------------------------------------------------------
   Vorschauseite der Komponenten. Nur bei DEBUG erreichbar.
   ------------------------------------------------------------------------- */
.vorschau__abschnitt {
  margin-bottom: var(--space-7);
}

.vorschau__titel {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border-strong);
  font-size: var(--fs-lead);
}

.vorschau__notiz {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-label);
  color: var(--fg-muted);
}

.vorschau__reihe {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.vorschau__marke {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--fg-muted);
}

/* -------------------------------------------------------------------------
   Markenbühne der Anmelde- und Passwortstrecke.

   Scharfe Ecken über --radius-frame, Logo oben links, Claim unten am Fuß
   gegenüber dem Logo. Der Claim steht in --fg-accent und niemals unter 24 px:
   ASB-Rot auf ASB-Gelb hat 4,1:1 und ist erst ab 24 px zulässig
   (Konzept 5.3). Die Bühne animiert nicht.
   ------------------------------------------------------------------------- */
.markenbuehne {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 260px;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-frame);
  background: var(--bg-stage);
}

.markenbuehne__logo {
  display: block;
  width: 128px;
  height: 44px;
  background-image: var(--logo-src);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
}

.markenbuehne__headline {
  margin: 0;
  margin-block-end: auto;
  display: flex;
  flex-direction: column;
  color: var(--fg-on-stage);
}

/* Zweizeilige Rhythmik: Zeile 1 fett mit zusätzlicher Laufweite,
   Zeile 2 in normaler Stärke ohne Laufweite. Konzept 5.5 erlaubt sie nur auf
   der Anmeldeseite, dem Aushang und dem Berichtsdeckblatt. */
.markenbuehne__zeile1 {
  font-size: var(--fs-lead);
  font-weight: 700;
  letter-spacing: var(--ls-headline);
  text-transform: none;
}

.markenbuehne__zeile2 {
  font-size: var(--fs-lead);
  font-weight: 400;
  letter-spacing: normal;
}

.markenbuehne__claim {
  margin: 0;
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 700;
  letter-spacing: var(--ls-headline);
  line-height: 1.15;
  color: var(--fg-accent);
}

/* -------------------------------------------------------------------------
   Anmeldeformular
   ------------------------------------------------------------------------- */
.anmeldung {
  margin: 0;
  padding: var(--space-5) 0 0;
  background: var(--bg-page);
}

/* Die Primäraktion sitzt im unteren Drittel und nicht direkt unter dem
   letzten Feld. Einhandbedienung, Konzept 5.4. */
.anmeldung__aktion {
  margin-top: var(--space-6);
}

.textlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--fg-accent);
  font-size: var(--fs-body);
  font-weight: 700;
}

.meldung {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-left: 6px solid var(--status-neutral);
  border-radius: var(--radius-control);
  background: var(--status-neutral-bg);
  font-size: var(--fs-body);
}

.meldung p {
  margin: 0;
}

.meldung--fehler {
  border-left-color: var(--status-critical);
  background: var(--status-critical-bg);
  color: var(--status-critical);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Listen von Fachobjekten.

   Auf 375 px ist jeder Eintrag eine gestapelte Karte und keine Tabellenzeile.
   Die ganze Zeile ist die Trefffläche, mindestens --tap-min hoch.
   ------------------------------------------------------------------------- */
.liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.liste__eintrag {
  margin-bottom: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--bg-page);
  overflow: hidden;
}

.liste__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  color: var(--fg-default);
  text-decoration: none;
}

/* Ein Eintrag ohne Ziel. Gleiche Form, gedämpfte Schrift: sonst tippt man
   darauf und nichts passiert, und das liest sich als Fehler. */
.liste__link--ohne-ziel {
  color: var(--fg-muted);
}

.liste__titel {
  font-size: var(--fs-lead);
  font-weight: 700;
}

.liste__zeile {
  font-size: var(--fs-body);
}

.liste__zeile--leise {
  font-size: var(--fs-label);
  color: var(--fg-muted);
}

/* -------------------------------------------------------------------------
   Abschnitte und Kenndaten
   ------------------------------------------------------------------------- */
.abschnitt {
  margin-bottom: var(--space-6);
}

.abschnitt__titel {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-lead);
}

.kenndaten {
  margin: var(--space-4) 0;
  padding: 0;
}

.kenndaten__paar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.kenndaten__paar dt {
  font-size: var(--fs-label);
  color: var(--fg-muted);
}

.kenndaten__paar dd {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  text-align: right;
}

/* -------------------------------------------------------------------------
   Moduswahl: zwei grosse Schaltflächen statt eines Auswahlfeldes.

   Unter Zeitdruck und mit Einsatzhandschuhen ist ein Dropdown unbedienbar.
   Die Auswahl bleibt ein Radiofeld, damit sie ohne JavaScript funktioniert.
   Sichtbar ist das Label, das eigentliche Feld liegt darunter.
   ------------------------------------------------------------------------- */
.moduswahl {
  margin: 0 0 var(--space-5);
  padding: 0;
  border: none;
}

.moduswahl__option {
  display: flex;
  align-items: center;
  min-height: var(--tap-primary);
  margin-top: var(--space-2);
  padding: 0 var(--space-4);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  cursor: pointer;
}

.moduswahl__eingabe {
  width: 24px;
  height: 24px;
  margin-right: var(--space-3);
  flex: none;
  accent-color: var(--action-bg);
}

.moduswahl__text {
  font-size: var(--fs-body);
  font-weight: 700;
}

.moduswahl__option:has(.moduswahl__eingabe:checked) {
  border-color: var(--border-accent);
}

.moduswahl__option:has(.moduswahl__eingabe:focus-visible) {
  box-shadow: var(--focus-ring);
}

/* -------------------------------------------------------------------------
   Statusaktionen. Gestapelt, weil auf 375 px keine zwei Schaltflächen
   nebeneinander passen.
   ------------------------------------------------------------------------- */
.statusaktionen {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.statusaktionen form {
  margin: 0;
}

/* -------------------------------------------------------------------------
   Einsatzformular
   ------------------------------------------------------------------------- */
.einsatzformular {
  margin: 0;
}

/* -------------------------------------------------------------------------
   Strukturliste eines Einsatzes
   ------------------------------------------------------------------------- */
.strukturzeile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
}

.strukturzeile__name {
  font-size: var(--fs-lead);
  font-weight: 700;
}

.strukturzeile__art {
  font-size: var(--fs-label);
  color: var(--fg-muted);
}

.strukturzeile__hinweis {
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--status-warn);
}

/* -------------------------------------------------------------------------
   Mehrfachauswahl.

   Auf 375 px ist jede Option eine eigene Zeile mit voller Breite. Das
   Kontrollfeld bleibt ein echtes Formularfeld, damit die Auswahl ohne
   JavaScript funktioniert, und das umschliessende Label liefert die
   Trefffläche.
   ------------------------------------------------------------------------- */
.auswahl {
  margin: 0 0 var(--space-5);
  padding: 0;
  border: none;
}

.auswahl__gruppe {
  margin-bottom: var(--space-3);
}

.auswahl__option {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  cursor: pointer;
}

.auswahl__eingabe {
  width: 24px;
  height: 24px;
  margin-right: var(--space-3);
  flex: none;
  accent-color: var(--action-bg);
}

.auswahl__text {
  display: flex;
  flex-direction: column;
}

.auswahl__name {
  font-size: var(--fs-body);
  font-weight: 700;
}

.auswahl__zusatz {
  font-size: var(--fs-label);
  color: var(--fg-muted);
}

.auswahl__option:has(.auswahl__eingabe:checked) {
  border-color: var(--border-accent);
}

.auswahl__option:has(.auswahl__eingabe:focus-visible) {
  box-shadow: var(--focus-ring);
}

.auswahl__mitnehmen {
  margin-top: var(--space-2);
  width: 100%;
}

/* -------------------------------------------------------------------------
   Rückmeldungen aus den Views
   ------------------------------------------------------------------------- */
.meldungen {
  margin-bottom: var(--space-4);
}

.meldung--warnung {
  border-left-color: var(--status-warn);
  background: var(--status-warn-bg);
  color: var(--status-warn);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Schichten: Überlappungswarnung und Vorschlagsliste

   Die Überlappung ist eine Warnung und kein Verbot. Sie steht dauerhaft an der
   betroffenen Schicht und nicht nur im Formular, damit sie nicht übersehen
   wird. Der Hinweis trägt Text, nicht nur Farbe.
   ------------------------------------------------------------------------- */
.ueberlappung {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  border-left: 6px solid var(--status-warn);
  background: var(--status-warn-bg);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--status-warn);
}

.vorschlag__anzahl {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--fs-lead);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Lagebild

   Die Marke ist hier auf die Kopfleiste reduziert. Keine gelben Flächen: die
   Markenbühne ist eine Bühne, kein Hintergrund für Daten (Konzept 5.2).
   ------------------------------------------------------------------------- */

/* Verbindungshinweis. Trägt Text und nicht nur Farbe: Farbe fällt bei
   Rot-Grün-Sehschwäche und bei Sonneneinstrahlung aus. */
.verbindung {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-left: 6px solid var(--status-warn);
  border-radius: var(--radius-control);
  background: var(--status-warn-bg);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--status-warn);
}

.neuladen {
  margin-bottom: var(--space-4);
}

.zusatzzaehler {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  text-align: center;
}

.zusatzzaehler__eintrag {
  font-size: var(--fs-body);
  color: var(--fg-muted);
}

/* Gliederung. Aufklappen über details und summary, ohne JavaScript. */
.ebene {
  margin-bottom: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--bg-page);
}

.ebene__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.ebene__kopf::-webkit-details-marker {
  display: none;
}

.ebene__kopf:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ebene__gesamt {
  font-size: var(--fs-lead);
  font-variant-numeric: tabular-nums;
}

.ebene__inhalt {
  padding: 0 var(--space-4) var(--space-3);
}

.ebene__staerke {
  display: flex;
  gap: var(--space-2);
  margin: 0;
}

.ebene__posten {
  flex: 1 1 0;
  padding-top: var(--space-2);
  border-top: 2px solid var(--border-subtle);
}

.ebene__posten dt {
  font-size: var(--fs-label);
  color: var(--fg-muted);
}

.ebene__posten dd {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Liste der Angemeldeten. Jede Zeile mindestens --tap-min, damit TICK-018 und
   TICK-019 dort Aktionen anhängen können. */
.anwesende {
  list-style: none;
  margin: 0;
  padding: 0;
}

.anwesende__zeile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.anwesende__name {
  font-size: var(--fs-body);
  font-weight: 700;
}

.anwesende__funktion {
  font-size: var(--fs-body);
}

.anwesende__zeit {
  font-size: var(--fs-label);
  color: var(--fg-muted);
}

/* ------------------------------------------------------------------ */
/* Korrekturansicht "Zeiten prüfen" (TICK-021)                        */
/* ------------------------------------------------------------------ */

.korrekturen__anzahl {
  margin: 0 0 var(--space-4);
  color: var(--fg-muted);
}

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

.korrektur {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--bg-page);
}

.korrektur__kopf {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.korrektur__name {
  font-size: var(--fs-lead);
  font-weight: 600;
}

.korrektur__funktion {
  color: var(--fg-muted);
}

.korrektur__daten {
  margin: var(--space-3) 0 var(--space-4);
}

/* Begriff und Wert nebeneinander, aber umbruchfähig: auf 375 px darf eine
   lange Fahrzeugbezeichnung die Zeile brechen und nicht die Seite. */
.korrektur__paar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.korrektur__paar:last-child {
  border-bottom: 0;
}

.korrektur__begriff {
  color: var(--fg-muted);
  font-size: var(--fs-label);
  margin: 0;
}

.korrektur__wert {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Die Aktionen liegen am Fuss der Karte, nicht in ihrem Kopf: die Führungskraft
   liest erst die Zeiten und entscheidet dann, und der Daumen erreicht das
   untere Ende der Karte. */
.korrektur__aktionen {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.korrektur__formular {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Die Kachel im Lagebild wird anklickbar, ohne ihre Gestalt zu ändern. */
.kachellink {
  display: block;
  color: inherit;
  text-decoration: none;
  min-height: var(--tap-min);
}

/* ------------------------------------------------------------------ */
/* Manueller Check-in und Check-out (TICK-018)                        */
/* ------------------------------------------------------------------ */

/* Der Arbeitsbereich liegt ausserhalb des pollenden Lagebilds. Leer nimmt er
   keinen Platz weg, damit die Seite ohne offene Aktion unverändert aussieht. */
.aktionsbereich:empty {
  display: none;
}

.aktionsbereich {
  margin-top: var(--space-5);
}

.anwesende__aktion {
  margin-top: var(--space-2);
  min-height: var(--tap-min);
}

.schnellwahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Die Schnellwahl steht neben dem Zeitfeld und ersetzt es nicht. Auf 375 px
   passen zwei Knöpfe nebeneinander, der dritte bricht um. */
.schnellwahl__knopf {
  flex: 1 1 8rem;
  min-height: var(--tap-min);
}

.checkinformular {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.anmeldung__person {
  font-size: var(--fs-lead);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

/* Verworfene Einträge (TICK-019). --status-neutral ist keine Bewertung,
   sondern eine Feststellung: der Eintrag existiert, zählt aber nicht. */
.anwesende__zeile--verworfen {
  border-left: 4px solid var(--status-neutral);
  padding-left: var(--space-3);
}

/* Durchgestrichen UND in --fg-muted: die Streichung allein ist auf einem
   Handydisplay bei Sonne kaum zu sehen. */
.verworfen__name {
  text-decoration: line-through;
  color: var(--fg-muted);
}

/* Gruppe "Zu prüfen" (TICK-017). Steht über der regulären Liste: eine Aufgabe,
   die man scrollen muss, wird bis zum Einsatzende ignoriert. */
.zupruefen {
  border-left: 4px solid var(--status-warn);
  padding-left: var(--space-3);
}

.zupruefen__aktionen {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Protokollansicht (TICK-022) */
.protokoll__filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.protokoll__anzahl {
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
}

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

.protokoll__zeile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.protokoll__zeit {
  color: var(--fg-muted);
  font-size: var(--fs-label);
}

/* Der Satz bricht um, statt die Seite breit zu machen: auf 375 px passt eine
   vollständige Änderungsbeschreibung nie in eine Zeile. */
.protokoll__satz {
  overflow-wrap: anywhere;
}

.protokoll__quelle {
  color: var(--fg-muted);
  font-size: var(--fs-label);
}

.blaetterung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.blaetterung__stand {
  color: var(--fg-muted);
}

/* Freigabezusammenfassung (TICK-023). Untereinander, nicht nebeneinander:
   vier Kacheln nebeneinander sind auf 375 px vier unlesbare Spalten. */
.zusammenfassung {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Stammdatenverwaltung (TICK-024) */
.suche {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.stammdaten__filter {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Beide Filter teilen sich die Breite: auf 375 px passen zwei nebeneinander,
   und mehr als zwei gibt es hier nicht. */
.stammdaten__filter .knopf {
  flex: 1;
}

.stammdaten__anzahl {
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
}

/* CSV-Vorschau (TICK-027). Der Bildlauf liegt in der Tabelle, nicht auf der
   Seite: eine CSV mit zwölf Spalten ist auf 375 px nicht darstellbar, aber sie
   darf die ganze Seite nicht breit machen. */
.vorschau__rahmen {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}

.vorschau__tabelle {
  border-collapse: collapse;
  min-width: 100%;
  font-size: var(--fs-label);
}

.vorschau__beschriftung {
  padding: var(--space-2) var(--space-3);
  color: var(--fg-muted);
  text-align: left;
}

.vorschau__tabelle th,
.vorschau__tabelle td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  white-space: nowrap;
}

.vorschau__tabelle thead th {
  background: var(--bg-soft);
  position: sticky;
  top: 0;
}

/* Abweichende Zeilen werden markiert UND beschriftet, nicht nur eingefärbt. */
.vorschau__zeile--abweichend {
  background: var(--status-warn-bg);
}

/* Spaltenzuordnung (TICK-028). Untereinander statt als Tabelle: eine Tabelle
   mit Auswahlfeldern ist auf 375 px nicht bedienbar. */
.zuordnung {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.zuordnung__quelle {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.zuordnung__lesart {
  margin-top: var(--space-1);
}

/* Soll-Ist-Vergleich (TICK-030). */
.sollist {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.sollist__titel {
  font-size: var(--fs-body);
  margin: 0 0 var(--space-3);
}

.sollist__zeilen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sollist__hinweis {
  margin: var(--space-3) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-label);
}

/* Die Ampel im zusammengeklappten Kopf. Ein Punkt reicht, weil der Klartext
   eine Zeile weiter im aufgeklappten Bereich steht; ohne Aufklappen zählt nur,
   dass überhaupt etwas auffällt. Deshalb trägt sie zusätzlich einen
   Titel-Text für Screenreader. */
.ebene__ampel {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.ebene__ampel--ok { background: var(--status-ok); }
.ebene__ampel--warn { background: var(--status-warn); }
.ebene__ampel--critical { background: var(--status-critical); }
.ebene__ampel--neutral { background: var(--status-neutral); }

/* Der Klartext neben der Ampel. Klein, aber nie weggelassen: die Farbe allein
   trägt die Bedeutung nicht (Konzept 5.2). */
.ebene__ampeltext {
  font-size: var(--fs-label);
  color: var(--fg-muted);
  white-space: nowrap;
}

/* Zählerkacheln (TICK-034). Gross und weit auseinander: gezählt wird mit
   Handschuhen, im Stehen, neben einer Person, die gerade versorgt wird.

   Zwei Spalten, sobald 320 px je Kachel Platz haben. Auf 375 px bleibt es bei
   einer Spalte, weil "ohne Überlebenschance" sonst umbricht und die Kacheln
   unterschiedlich hoch werden. */
.zaehler__kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-3);
}

.zaehler__regel {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-body);
  color: var(--fg-default);
}

.zaehler__kachel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-primary);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--bg-page);
  color: var(--fg-default);
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
}

.zaehler__kachel:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Gesperrt, solange die Antwort unterwegs ist. Ohne das erzeugt ein doppelter
   Tipp mit Handschuhen zwei Datensätze. */
.zaehler__kachel:disabled {
  opacity: 0.6;
  cursor: progress;
}

.zaehler__beschriftung,
.sk__klartext {
  flex: 1;
}

.sk__ziffer {
  font-weight: 700;
  font-size: var(--fs-lead);
  min-width: 4.5em;
}

.zaehler__zahl {
  font-size: var(--fs-lead);
  font-weight: 700;
  min-width: 2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Die Sichtungsfarben sind normiert und nicht themebar. Sie tragen Bedeutung,
   keine Marke, und stehen deshalb nur in --sk-*. Die Farbe liegt als Fläche
   hinter der Kachel, die Schriftfarbe kommt aus dem gemessenen Gegenstück
   --sk-*-fg; die Begründung steht bei den Token in _base.css.

   Die Farbe ist die Zugabe. Ziffer und Klartext stehen unabhängig davon in
   jeder Kachel, siehe components/sk_tile.html. */
.zaehler__kachel--sk-i { background: var(--sk-i); border-color: var(--sk-i); color: var(--sk-i-fg); }
.zaehler__kachel--sk-ii { background: var(--sk-ii); border-color: var(--sk-ii); color: var(--sk-ii-fg); }
.zaehler__kachel--sk-iii { background: var(--sk-iii); border-color: var(--sk-iii); color: var(--sk-iii-fg); }
.zaehler__kachel--sk-iv { background: var(--sk-iv); border-color: var(--sk-iv); color: var(--sk-iv-fg); }
.zaehler__kachel--sk-none { background: var(--sk-none); border-color: var(--sk-none); color: var(--sk-none-fg); }

.zaehler__ruecknahme,
.zaehler__schwerpunkt {
  margin-bottom: var(--space-4);
}

/* Tagesübersicht. Zwei Zahlenspalten nebeneinander, weil am Funk nach beiden
   in einem Satz gefragt wird. */
.uebersicht {
  width: 100%;
  margin-bottom: var(--space-5);
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.uebersicht__caption {
  margin-bottom: var(--space-2);
  color: var(--fg-muted);
  font-size: var(--fs-label);
  text-align: left;
}

.uebersicht th,
.uebersicht td {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  font-weight: 400;
}

.uebersicht thead th {
  color: var(--fg-muted);
  font-size: var(--fs-label);
}

.uebersicht tfoot th,
.uebersicht tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--border-strong);
  font-weight: 700;
}

.uebersicht__zahl {
  width: 4.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* In der Übersicht trägt ein farbiger Streifen die Sichtungsfarbe, nicht die
   Schrift. Zwei Gründe: eine volle Fläche in einer Tabellenzeile liest sich als
   Warnung, die hier keine ist, und --sk-ii erreicht als Schriftfarbe auf Weiss
   nur 3.2:1. Die Schrift bleibt deshalb in --fg-default. */
.uebersicht__sk .sk__ziffer {
  display: inline-block;
  min-width: 0;
  margin-right: var(--space-2);
  padding-left: var(--space-2);
  border-left: 4px solid var(--border-strong);
  font-size: var(--fs-body);
}

.uebersicht__sk--i .sk__ziffer { border-left-color: var(--sk-i); }
.uebersicht__sk--ii .sk__ziffer { border-left-color: var(--sk-ii); }
.uebersicht__sk--iii .sk__ziffer { border-left-color: var(--sk-iii); }
.uebersicht__sk--iv .sk__ziffer { border-left-color: var(--sk-iv); }
.uebersicht__sk--none .sk__ziffer { border-left-color: var(--sk-none); }

/* Versandprotokoll (TICK-036). Ein Eintrag ist keine Zeile mit einem Ziel,
   sondern ein Block mit Empfängerliste und Fehlertext; deshalb bekommt er
   seinen Innenabstand selbst statt über .liste__link. */
.liste__eintrag--block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
}

.protokoll__adressen {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  font-size: var(--fs-body);
  color: var(--fg-muted);
}

/* Der Fehlertext nennt Adresse und Meldung im Klartext. Rot allein sagt der
   Führungskraft nicht, welche Zustellung gescheitert ist. */
.protokoll__fehler {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 6px solid var(--status-critical);
  background: var(--status-critical-bg);
  font-size: var(--fs-body);
  color: var(--status-critical);
}

/* Einschätzung der Einsatzleitung (TICK-037). Ein Textfeld, sonst nichts. */
.einschaetzung textarea.feld__eingabe {
  min-height: 240px;
  font-family: var(--font-sans);
  line-height: 1.5;
  resize: vertical;
}

.einschaetzung__rest {
  color: var(--fg-muted);
}

/* Knapp wird es erst am Ende. Vorher ist die Zahl eine Nebeninformation. */
.einschaetzung__rest--knapp {
  color: var(--status-warn);
  font-weight: 700;
}

/* Der gesperrte Zustand: lesbar, aber ohne Eingabefeld. Ein deaktiviertes
   Textfeld sieht aus wie ein Fehler, ein gesetzter Text wie eine Aussage. */
.einschaetzung__gelesen {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--bg-page);
  font-size: var(--fs-body);
}

/* Vorschau des Berichts im Browser. Die Berichts-Partials bringen ihre eigenen
   Klassen mit; hier bekommen sie nur die Grundtypografie der Oberfläche. */
.vorschau .daten {
  width: 100%;
  margin-bottom: var(--space-4);
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.vorschau .daten th,
.vorschau .daten td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.vorschau .daten thead th,
.vorschau .daten tfoot th,
.vorschau .daten tfoot td {
  font-weight: 700;
}

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

/* Die Personalliste hat acht Spalten. Auf 375 px passt sie nicht; sie rollt in
   ihrem eigenen Kasten, damit die Seite es nicht tut. */
.vorschau .daten--liste {
  display: block;
  overflow-x: auto;
}

.vorschau .abschnitt__leer {
  color: var(--fg-muted);
  font-style: italic;
}

.vorschau .legende {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-label);
  color: var(--fg-muted);
}

.vorschau .legende__paar {
  display: flex;
  gap: var(--space-2);
}

.vorschau .legende__zeichen {
  flex: 0 0 1.5em;
  font-weight: 700;
}

.vorschau .legende__text {
  margin: 0;
}

.vorschau .sk__ziffer {
  font-weight: 700;
}

.vorschau .sk__klartext::before {
  content: ", ";
}

/* Baumtiefe im Lagebild (TICK-039). Einrückung bis Ebene zwei; ab Ebene drei
   steht der Pfad in der Kopfzeile, weil weiteres Einrücken auf 375 px die
   Bezeichnung unlesbar macht. */
.ebene--tiefe2 {
  margin-left: var(--space-4);
}

.ebene__bezeichnung {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

/* Der Weg zum Knoten, klein und leise: er ordnet ein, er ist nicht die
   Aussage. */
.ebene__pfad {
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--fg-muted);
}

/* Einheit, Fahrzeug oder Ad hoc im Klartext. Die Tiefe wird nicht über Farbe
   gezeigt (Konzept 5.2). */
.ebene__art {
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--fg-muted);
}

.ebene__eigen {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-body);
  color: var(--fg-muted);
}

/* Ein Unterknoten sitzt im aufgeklappten Bereich seines Elternknotens und
   bekommt dort Luft nach oben. */
.ebene__inhalt .ebene {
  margin-top: var(--space-3);
}

/* Einheitenbaum in den Stammdaten (TICK-039). Einrückung bis Ebene zwei; ab
   Ebene drei bliebe auf 375 px kein Platz mehr für den Namen. */
.baum {
  margin: 0;
  padding: 0;
  list-style: none;
}

.baum .baum {
  margin-left: var(--space-4);
}

.baum__eintrag--tiefe3 .liste__eintrag,
.baum__eintrag--tiefe4 .liste__eintrag {
  border-left: 4px solid var(--border-strong);
}

/* ------------------------------------------------------------------ */
/* Ablaufwarnungen (TICK-040)                                         */
/* ------------------------------------------------------------------ */

/* Drei Kacheln nebeneinander, sobald 220 px je Kachel Platz haben. Auf 375 px
   bleibt es bei einer Spalte: die Beschriftung "in 90 Tagen fällig" bricht
   sonst um und die Kacheln werden unterschiedlich hoch. */
.ablauf__kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Die Farbe wiederholt, was der Klartext in .ablauf__status ohnehin sagt. Sie
   trägt die Information nie allein (Konzept 5.2, Regel 3). */
.ablauf__eintrag--critical {
  border-left: 6px solid var(--status-critical);
}

.ablauf__eintrag--warn {
  border-left: 6px solid var(--status-warn);
}

.ablauf__status {
  font-weight: 700;
}

.ablauf__eintrag--critical .ablauf__status {
  color: var(--status-critical);
}

.ablauf__eintrag--warn .ablauf__status {
  color: var(--status-warn);
}

/* Kennzeichnung in der Personenliste. Eine Person wird einmal gekennzeichnet,
   nicht je Nachweis. */
.person__warnung {
  font-weight: 700;
  color: var(--status-critical);
}

/* Filterzeile der Stammdaten. Untereinander, weil drei Auswahlfelder auf
   375 px nebeneinander unter --tap-min fielen. */
.stammdaten__filterzeile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Der Filter der Ablaufwarnungen liegt in einem details und trägt deshalb den
   Rahmen der Gliederungsebene. Abstand nach unten, damit die Kacheln nicht am
   Rahmen kleben. */
.ablauf__filter {
  margin-bottom: var(--space-4);
}