/* Objektsteckbrief und Ankunftsfolge.

   Gelesen wird das hier um drei Uhr nachts, im Auto oder im Stehen, mit einer
   Hand, oft mit Handschuhen und manchmal auf einem nassen Display. Daraus
   folgen die Regeln dieser Datei:

   - Untergrenze fuer alles Gelesene ist --fs-lg (1rem = 16px). Die Skala hat
     drei kleinere Stufen: --fs-xs (11.5px), --fs-sm (12.8px) und --fs-md
     (14.1px). Keine davon kommt in der Leseansicht vor. --fs-md erscheint nur
     dort, wo geteilte Klassen aus styles.css es mitbringen (.btn.sm in der
     Bilderverwaltung) - also in der Eingabemaske, die tagsueber im Buero
     bedient wird.
     (Ein frueherer Kommentar an dieser Stelle nannte --fs-md die kleinste
     Stufe und bezifferte sie auf 13px. Beides stimmte nicht, und die Zahlen
     wurden hier zur Begruendung benutzt - darum jetzt nachgerechnet: die
     Wurzel steht auf 16px, body auf 15px, rem zaehlt von der Wurzel.)
   - Die .chip-Klasse aus styles.css steht auf --fs-xs. Sie wird im Steckbrief
     angehoben, sonst waeren ausgerechnet die Warnungen ("aelter als zwei
     Jahre") der kleinste Text auf dem Blatt.
   - Alles, was hier gewaehlt oder angetippt wird und dieser Datei gehoert,
     misst mindestens 48px: die Telefonflaechen, "Gross anzeigen", die
     Symbolknoepfe der Bilderverwaltung. Sie sind der Teil, den jemand im
     Ernstfall unter Anspannung trifft.
     Ausgenommen sind geteilte Knoepfe aus styles.css (.btn ohne Zusatz, etwa
     "Steckbrief bearbeiten"): Die stehen app-weit auf 44px. Das ist ueber der
     Untergrenze, und sie hier allein groesser zu machen hiesse, dieselbe
     Schaltflaeche je nach Ansicht anders aussehen zu lassen.
   - Kein Rotlicht-Nachtmodus. Klingt nach Profi, ist aber schlechter lesbar,
     sobald eine Strassenlaterne mit dabei ist, und trifft Menschen mit
     Astigmatismus zusaetzlich. Die dunkle Fassung der Anwendung
     (data-theme="dark") reicht und ist dafuer geprueft.
   - Keine eigenen Farben: alles kommt aus den Tokens in styles.css. Ein
     zweiter Satz Werte waere ein zweiter Stand derselben Wahrheit.
   - Abstaende nur aus {4, 8, 12, 16, 24, 32, 48, 64}. Vorher standen hier
     auch 6, 7, 10, 14 und 18 - Nachbarn, die kein Auge trennt, die aber jede
     Aenderung zum Ratespiel machen.

   Radien: styles.css kennt genau einen Radius (--radius: 12px). Damit
   Ecken ineinander passen statt zu kollidieren, werden die inneren daraus
   abgeleitet und nicht neu erfunden - ein Kasten im Kasten bekommt einen
   kleineren Radius, weil sonst der aeussere Bogen den inneren schneidet. */

.stb {
  display: flex;
  flex-direction: column;
  gap: 24px;

  /* Abgeleitet, nicht erfunden: eine Quelle (--radius), drei Tiefen. */
  --stb-r-aussen: var(--radius);
  --stb-r-innen: calc(var(--radius) - 4px);
  --stb-r-tief: calc(var(--radius) - 8px);
}

/* Nur fuer die Sprachausgabe. styles.css hat keine solche Klasse, darum hier -
   bewusst mit clip-path UND clip: Safari braucht noch das alte clip. */
.stb-nurvorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* Chips: siehe Kopfkommentar. --fs-xs waere hier der kleinste Text auf dem
   Blatt, und er traegt ausgerechnet die Warnungen ("aelter als zwei Jahre",
   "Aufnahmedatum nicht erfasst").

   Aufgezaehlt statt ".stb .chip": In den Aufhaengern steht fremdes Markup, und
   lagebild.css regelt seine Chips selbst (.rfb-kopfzeile .chip). Beide Regeln
   haetten dieselbe Spezifitaet - dann entschiede die Reihenfolge der
   <link>-Zeilen darueber, wessen Gestaltung gilt. Solche Abhaengigkeiten
   bemerkt niemand, bis jemand die Zeilen sortiert. */
.stb-punkt > .chip,
.stb-foto-kopf .chip,
.stb-datum .chip {
  font-size: var(--fs-lg);
  padding: 4px 12px;
}

/* ---------- Kopf: Objekt und ehrlicher Stand der Erfassung ---------- */

.stb-kopf {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--stb-r-aussen);
  padding: 16px;
  box-shadow: var(--shadow);
}
.stb-name { font-size: var(--fs-2xl); margin: 0; }
.stb-adresse {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  margin: 4px 0 0;
}

/* Der Stand steht oben und nicht unten, weil er die Erwartung setzt: Wer
   weiss, dass drei Angaben fehlen, sucht nicht vergeblich danach. */
.stb-stand { margin-top: 16px; }
.stb-stand-zahl { font-size: var(--fs-xl); font-weight: 600; margin: 0; }

/* Der Balken ist eine Zweitdarstellung derselben Zahl, die direkt darueber
   steht - darum aria-hidden im Markup. Vorgelesen waere er eine Wiederholung,
   und "zu 75 Prozent erfasst" klaenge zudem genauer, als die Sache ist. */
.stb-balken {
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
}
.stb-balken i { display: block; height: 100%; background: var(--accent); }

.stb-fehlend {
  margin: 12px 0 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-secondary);
}
/* Bewusst als Aufzaehlung der fehlenden Namen und nicht als leere Zeile im
   Steckbrief selbst: "Gefahrenstellen: -" liest sich wie "geprueft, keine". */
.stb-fehlend b { color: var(--text-primary); font-weight: 600; }

/* Die eine Luecke, bei der das Nichtwissen selbst gefaehrlich ist. Sie bekommt
   den Akzentstrich der Warnung - und der Satz traegt die Aussage allein, ohne
   die Farbe: Wer nur den Text hoert, erfaehrt dasselbe. */
.stb-gefahrluecke {
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 4px solid var(--critical);
  border-radius: var(--stb-r-innen);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-primary);
}
.stb-gefahrluecke b { display: block; font-weight: 600; margin-bottom: 4px; }

.stb-kopf-tasten { margin-top: 16px; }

/* ---------- Lagebild: nur der Platz, gefuellt wird von aussen ---------- */

/* Solange niemand den Behaelter fuellt, ist er nicht da - sonst risse er eine
   Luecke von 24px zwischen Kopf und Abschnitte, die nach einem Fehler aussieht. */
.stb-lagebild:empty { display: none; }

/* Auf diesem Blatt gibt es genau EINE Primaeraktion, und das ist "Rundgang
   starten" im Fuss des Sheets. Das Lagebild-Modul bringt seinen Knopf als
   .primary mit, was fuer sich richtig ist - hier steht er in fremdem Haus und
   tritt eine Stufe zurueck. Die Regel greift nur in diesem Behaelter; wo das
   Modul sonst eingehaengt wird, bleibt sein eigener Rang unangetastet. */
.stb-lagebild .lgb-knopf.primary {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.stb-lagebild .lgb-knopf.primary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  filter: none;
}

/* ---------- Die Abschnitte, von aussen nach innen ---------- */

.stb-abschnitte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stb-abschnitt {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--stb-r-aussen);
  padding: 16px;
  box-shadow: var(--shadow);
}
.stb-abschnitt-titel {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-xl);
  margin: 0;
}
/* Die Nummer bleibt sichtbar, weil die Reihenfolge selbst eine Aussage ist:
   Sie ist die Reihenfolge des Ankommens, nicht eine beliebige Sortierung.
   Fuer die Sprachausgabe steht sie zusaetzlich als Wort im Titel. */
.stb-nr {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-fg);
  font-size: var(--fs-lg);
  font-weight: 600;
}
.stb-text {
  margin: 12px 0 0;
  font-size: var(--fs-xl);
  line-height: 1.55;
  color: var(--text-primary);
  /* Zeilenumbrueche aus der Eingabe bleiben erhalten. Drei Schluesselstellen
     untereinander sind nachts schneller erfasst als ein Fliesstext. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Abschnitt 7 traegt zwei Angaben. Beide bekommen ihre eigene Beschriftung -
   ein gemeinsamer Absatz wuerde die Nummer, die man waehlen soll, im
   Fliesstext verstecken. */
.stb-feldtitel {
  margin: 16px 0 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-secondary);
}
.stb-feldtitel:first-of-type { margin-top: 12px; }

/* Nachgestellte Erlaeuterung, z.B. die Anfahrtsrichtung unter der Anfahrt. */
.stb-zusatz { margin: 8px 0 0; font-size: var(--fs-lg); color: var(--text-secondary); }

/* ---------- Telefonnummern ---------- */

/* Nummern im Fliesstext (Ansprechpartner, Alarm, Besonderheiten). */
.stb-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  /* Auch die Breite: "117" waere sonst ein Ziel von rund vierzig Pixeln - hoch
     genug und trotzdem zu schmal, um es einhaendig sicher zu treffen. */
  min-width: 48px;
  padding: 4px 12px;
  margin: 0 4px 0 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--stb-r-tief);
  background: var(--surface-1);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.stb-tel:hover, .stb-tel:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Die Notfallnummern: je Zeile ein Streifen ueber die volle Breite. Das ist
   die groesste Tippflaeche auf dem Blatt, und das mit Absicht - hier greift
   jemand einhaendig, im Stehen, unter Anspannung. */
.stb-nummern {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stb-nummer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--stb-r-innen);
  background: var(--surface-1);
  color: var(--text-primary);
  text-decoration: none;
}
.stb-nummer:hover, .stb-nummer:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.stb-nummer-zweck {
  font-size: var(--fs-lg);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.stb-nummer-zahl {
  font-size: var(--fs-xl);
  font-weight: 600;
  white-space: nowrap;
  color: var(--accent-fg);
  margin-left: auto;
}
/* Eine Zeile ohne erkennbare Nummer bleibt Text und sieht auch so aus. Ein
   Streifen, der aussaehe wie die anderen, aber nichts waehlt, waere die
   schlechtere Luege. */
.stb-nummer-text {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 4px 0;
  overflow-wrap: anywhere;
}

/* ---------- Abschnitt 5: Kontrollpunkte ---------- */

.stb-punkte {
  margin: 12px 0 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stb-punkt { font-size: var(--fs-xl); line-height: 1.5; }
.stb-punkt-name { font-weight: 600; }
.stb-punkt-ort {
  display: block;
  font-size: var(--fs-lg);
  color: var(--text-secondary);
}

/* Platz fuer die Referenzbilder eines Kontrollpunkts. Gefuellt wird von aussen
   (lagebild.js, referenzbilderZeigen); leer nimmt der Behaelter keinen Raum. */
.stb-refbilder:empty { display: none; }
.stb-refbilder { margin-top: 12px; }

/* ---------- Ankunftsfolge ---------- */

.stb-bilder { display: flex; flex-direction: column; gap: 12px; }
.stb-bilder-titel { font-size: var(--fs-xl); margin: 0; }
.stb-bilder-vorspann {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-secondary);
}

.stb-fotos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Vertikal und nicht als Karussell: Ein Karussell verbirgt, wie viele Bilder
   noch kommen, und Wischen ist mit Handschuhen oder auf nassem Display
   unzuverlaessig. Scrollen funktioniert in beiden Faellen. */
.stb-foto {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--stb-r-aussen);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stb-foto img {
  display: block;
  width: 100%;
  height: auto;
  /* Kein Zuschnitt auf ein festes Seitenverhaeltnis: Genau der abgeschnittene
     Rand kann der Hinweis sein, an dem man das Tor wiedererkennt. Die Flaeche
     in der Tokenfarbe haelt den Platz, solange das Bild noch laedt. */
  background: var(--surface-sunken);
  min-height: 120px;
}
.stb-foto-text {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stb-foto-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stb-bildunterschrift { font-size: var(--fs-xl); line-height: 1.45; margin: 0; }
/* Das Datum ist Pflicht und keine Zierde: Ein zwei Jahre altes Bild einer
   Baustelle, die heute ein Parkplatz ist, richtet Schaden an. Darum steht es
   in derselben Groesse wie der uebrige Text und nicht als Kleingedrucktes. */
.stb-datum {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Erbt .btn.sm und damit --fs-md (14.1px). Das ist die Eingabemaskengroesse und
   gehoert nicht in die Leseansicht - hier auf die Untergrenze zurueckgeholt. */
.stb-gross { align-self: flex-start; min-height: 48px; font-size: var(--fs-lg); }

/* ---------- Leerzustaende ---------- */

.stb-leer {
  background: var(--surface-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--stb-r-aussen);
  padding: 16px;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------- Bearbeiten (Buero, Leitung) ---------- */

/* Der Hinweis am Alarmfeld. Sichtbar wie eine Warnung, weil er eine ist:
   Ein Alarmcode in einer Datenbank, die Rapporte an Kunden ausliefert, ist ein
   Einbruchswerkzeug. Der Akzentstrich links folgt der Nachfrageleiste
   (hinweise.css) - dieselbe Sprache fuer denselben Zweck. */
.stb-warnung {
  margin: 0 0 8px;
  padding: 12px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 4px solid var(--critical);
  border-radius: var(--radius);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-primary);
}
.stb-warnung b { font-weight: 600; }
.stb-warnung-text { margin: 4px 0 0; }

.stb-editor .field label { font-size: var(--fs-lg); }
.stb-editor textarea { font-size: var(--fs-lg); }
.stb-hilfe { font-size: var(--fs-lg); color: var(--text-muted); line-height: 1.45; }

/* Bilderverwaltung im Dialog */
.stb-verwaltung { display: flex; flex-direction: column; gap: 12px; }
.stb-zeile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stb-mini {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: calc(var(--radius) - 4px);
  background: var(--surface-sunken);
  object-fit: cover;
}
.stb-zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.stb-zeile-text .field { margin-bottom: 0; }
.stb-tasten { display: flex; gap: 8px; flex-wrap: wrap; }
/* Symbolknoepfe brauchen die volle Tippflaeche, auch wenn nur ein Pfeil drin steht. */
.stb-tasten .btn { min-height: 48px; min-width: 48px; }

@media (max-width: 620px) {
  .stb-zeile { flex-direction: column; }
  .stb-mini { width: 100%; height: 140px; }
  /* Zweck und Nummer untereinander, sobald der Streifen sonst umbrechen wuerde -
     die Nummer bleibt so am Stueck lesbar und die Flaeche bleibt gross. */
  .stb-nummer { flex-direction: column; align-items: flex-start; gap: 4px; }
  .stb-nummer-zahl { margin-left: 0; }
}