/* =========================================================================
   Komponenten-CSS.

   Regeln, die hier gelten und in scripts/check_tokens.py maschinell geprüft
   werden:
     - kein Hexwert
     - kein Zugriff auf ein Markentoken der Ebene 1
     - keine Regel, die ausschließlich unter :hover Inhalt sichtbar macht.
       :hover darf zusätzlich gestalten, :focus-visible mit --focus-ring ist
       Pflicht. Auf dem Handy existiert kein Hover.
     - keine Schriftgröße unter --fs-label, Fließtext nie unter --fs-body
     - Bewegung ausschließlich mit --dur-fast oder --dur-normal und --ease

   Seitenlayouts gehören nach app.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fokus. Gilt für alles Bedienbare, ohne Ausnahme.
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* -------------------------------------------------------------------------
   Icons
   ------------------------------------------------------------------------- */
.icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
}

/* -------------------------------------------------------------------------
   Schaltflächen

   Höhe: --tap-primary bei primaer und gefahr, --tap-min bei sekundaer.
   Der Primärbutton hat auf ASB-Rot nur 4,9:1 und trägt deshalb immer ein
   Icon als Zweitmerkmal (Konzept 5.3).
   ------------------------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.knopf--voll {
  display: flex;
  width: 100%;
}

.knopf--primaer {
  min-height: var(--tap-primary);
  background: var(--action-bg);
  color: var(--action-fg);
}

.knopf--primaer:hover {
  background: var(--action-bg-hover);
}

.knopf--primaer:active {
  background: var(--action-bg-active);
}

.knopf--sekundaer {
  min-height: var(--tap-min);
  background: var(--bg-page);
  border-color: var(--border-strong);
  color: var(--fg-default);
}

.knopf--gefahr {
  min-height: var(--tap-primary);
  background: var(--status-critical-bg);
  border-color: var(--status-critical);
  color: var(--status-critical);
}

.knopf:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.knopf__icon {
  display: flex;
  align-items: center;
}

/* Sichtbarer Hinweis, wenn bei variante="primaer" das Pflicht-Icon fehlt.
   Erscheint nur bei DEBUG, siehe templates/components/button.html. */
.knopf__icon-fehlt {
  padding: 0 var(--space-1);
  border: 2px dashed var(--status-critical);
  border-radius: var(--radius-control);
  background: var(--status-critical-bg);
  color: var(--status-critical);
  font-size: var(--fs-label);
}

/* -------------------------------------------------------------------------
   Eingabefelder

   Label immer sichtbar. Fehlertext immer im Klartext, nicht nur farbig.
   ------------------------------------------------------------------------- */
.feld {
  display: block;
  margin-bottom: var(--space-5);
}

.feld__label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--fg-default);
}

.feld__pflicht {
  font-weight: 400;
  color: var(--fg-muted);
}

.feld__eingabe {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--bg-page);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg-default);
}

.feld--fehler .feld__eingabe {
  border-color: var(--status-critical);
}

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

.feld__fehler {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--status-critical);
}

/* -------------------------------------------------------------------------
   Karte
   ------------------------------------------------------------------------- */
.karte {
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--bg-page);
}

.karte__titel {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  color: var(--fg-default);
}

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

.karte__inhalt {
  font-size: var(--fs-body);
  color: var(--fg-default);
}

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

/* -------------------------------------------------------------------------
   Statuskachel

   Der Status steht zusätzlich als Klartext in der Kachel. Farbe allein ist
   wegen Rot-Grün-Sehschwäche unzulässig.
   ------------------------------------------------------------------------- */
.kachel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: var(--tap-min);
  padding: var(--space-3);
  border-left: 6px solid var(--status-neutral);
  border-radius: var(--radius-control);
  background: var(--status-neutral-bg);
}

.kachel__wert {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--fg-default);
  font-variant-numeric: tabular-nums;
}

.kachel__label {
  font-size: var(--fs-body);
  color: var(--fg-default);
}

.kachel__status {
  font-size: var(--fs-label);
  font-weight: 700;
}

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

.kachel--ok {
  border-left-color: var(--status-ok);
  background: var(--status-ok-bg);
}

.kachel--ok .kachel__status {
  color: var(--status-ok);
}

.kachel--warn {
  border-left-color: var(--status-warn);
  background: var(--status-warn-bg);
}

.kachel--warn .kachel__status {
  color: var(--status-warn);
}

.kachel--critical {
  border-left-color: var(--status-critical);
  background: var(--status-critical-bg);
}

.kachel--critical .kachel__status {
  color: var(--status-critical);
}

.kachel--neutral {
  border-left-color: var(--status-neutral);
  background: var(--status-neutral-bg);
}

.kachel--neutral .kachel__status {
  color: var(--status-neutral);
}

.kachel--auto {
  border-left-color: var(--status-auto);
  background: var(--status-auto-bg);
}

.kachel--auto .kachel__status {
  color: var(--status-auto);
}

/* -------------------------------------------------------------------------
   Stärkeanzeige

   Die Zahl ist das Interface. Kein Behälter mit fester Breite, sonst bricht
   das clamp() in --fs-staerke um.
   ------------------------------------------------------------------------- */
.staerke {
  display: block;
  width: 100%;
  padding: var(--space-4) 0;
  text-align: center;
}

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

.staerke__gesamt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-staerke);
  font-weight: 700;
  line-height: 1;
  color: var(--fg-default);
  font-variant-numeric: tabular-nums;
}

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

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

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

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

.staerke__posten dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--fg-default);
  font-variant-numeric: tabular-nums;
}

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

.staerke--veraltet .staerke__gesamt,
.staerke--veraltet .staerke__posten dd {
  color: var(--status-neutral);
}

.staerke__hinweis {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 6px solid var(--status-warn);
  background: var(--status-warn-bg);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--status-warn);
  text-align: left;
}

/* -------------------------------------------------------------------------
   Leerzustand
   ------------------------------------------------------------------------- */
.leerzustand {
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--bg-soft);
  text-align: center;
}

.leerzustand__titel {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  color: var(--fg-default);
}

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

.leerzustand__aktion {
  display: inline-flex;
}

/* -------------------------------------------------------------------------
   Bestätigung in zwei Schritten

   Kein JavaScript. Der Auslöser wechselt im geöffneten Zustand auf den
   Abbruchtext, das ist gleichzeitig der Weg zum Schließen. Der Zustand hängt
   an [open], nicht an :hover.
   ------------------------------------------------------------------------- */
.bestaetigung {
  border: 2px solid var(--status-critical);
  border-radius: var(--radius-control);
  background: var(--bg-page);
}

/* Nicht jeder zweite Schritt ist eine Warnung. Die Übernahme in die
   Folgeschicht (TICK-021) und der Berichtsversand (TICK-036) brauchen zwei
   Bedienschritte, machen aber nichts unbrauchbar. Sie bekommen deshalb den
   neutralen Rahmen; die Farbe des bestätigenden Knopfes steuert weiterhin
   die Variante. */
.bestaetigung--neutral {
  border-color: var(--border-strong);
}

.bestaetigung--neutral .bestaetigung__ausloeser {
  color: var(--fg-default);
}

.bestaetigung__ausloeser {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--status-critical);
  cursor: pointer;
  list-style: none;
}

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

.bestaetigung__ausloeser-auf {
  display: none;
}

.bestaetigung[open] .bestaetigung__ausloeser-zu {
  display: none;
}

.bestaetigung[open] .bestaetigung__ausloeser-auf {
  display: inline;
}

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

.bestaetigung__frage {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--fg-default);
}

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

.bestaetigung__formular {
  margin: 0;
}

/* Primäraktionen unter Zeitdruck: --tap-primary statt --tap-min.
   Der manuelle Check-in wird mit Einsatzhandschuhen bedient (Konzept 5.4). */
.knopf--gross {
  min-height: var(--tap-primary);
}

/* -------------------------------------------------------------------------
   Auswahlblöcke für Kategorie, Format und Einsatzschwerpunkt.

   Das Kontrollfeld bleibt ein echtes Formularfeld, damit die Auswahl ohne
   JavaScript funktioniert; das Label liefert die Trefffläche von --tap-min.

   Die öffentliche Check-in-Strecke hat in checkin.css eine eigene Kopie. Das
   ist dieselbe bewusste Verdopplung wie bei .knopf und .feld: die Check-in-
   Seite lädt kein components.css, weil sie am Einsatzort über Mobilfunk
   aufgerufen wird. Änderungen hier gehören dort geprüft.

   Ohne diesen Block waren die Optionen in Vorkommnissen (TICK-033), in der
   Spaltenzuordnung (TICK-028) und im Zähler (TICK-034) 22 px hoch. Gefunden
   beim Messen auf 375 px, nicht im Test.
   ------------------------------------------------------------------------- */
.wahl {
  margin: 0 0 var(--space-5);
  padding: 0;
  border: none;
}

.wahl__titel {
  padding: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--fg-muted);
}

.wahl__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  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;
}

.wahl__eingabe {
  width: 24px;
  height: 24px;
  flex: none;
  accent-color: var(--action-bg);
}

.wahl__text {
  flex: 1 1 auto;
  font-size: var(--fs-body);
  font-weight: 700;
}

.wahl__option:has(.wahl__eingabe:focus-visible) {
  box-shadow: var(--focus-ring);
}

/* Variante für kurze Beschriftungen: die Optionen liegen nebeneinander und
   brechen um. Vier Schwerpunkte untereinander schieben auf 375 px die Kacheln
   des Zählers unter die Falz, und die Kacheln sind der Zweck des Bildschirms.
   Die Trefffläche bleibt --tap-min hoch. */
.wahl--nebeneinander {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.wahl--nebeneinander .wahl__titel,
.wahl--nebeneinander .feld__hinweis {
  flex: 1 0 100%;
  margin: 0;
}

.wahl--nebeneinander .wahl__option {
  flex: 1 1 auto;
  margin-top: 0;
  padding: var(--space-2) var(--space-3);
}