/* 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:

   - Nichts unter 15px. Die kleinste Stufe der Schriftskala (--fs-md) liegt bei
     13px und kommt hier darum gar nicht vor, auch nicht bei Datum und Herkunft.
     Was zu klein zum Lesen ist, ist im Zweifel schlimmer als nicht vorhanden,
     weil es trotzdem Platz und Aufmerksamkeit kostet.
   - Tippflächen mindestens 44px hoch. Das betrifft vor allem die
     Telefonnummern: Sie sind der einzige Teil, den jemand im Ernstfall unter
     Anspannung trifft.
   - Kein Rotlicht-Nachtmodus. Klingt nach Profi, ist aber schlechter lesbar,
     sobald eine Strassenlaterne mit dabei ist, und trifft Menschen mit
     Astigmatismus zusätzlich. Die dunkle Fassung der Anwendung
     (data-theme="dark") reicht und ist dafür geprüft.
   - Keine eigenen Farben und keine neuen Abstände: alles kommt aus den Tokens
     in styles.css. Ein zweiter Satz Werte wäre ein zweiter Stand derselben
     Wahrheit. */

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

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

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

/* Der Stand steht oben und nicht unten, weil er die Erwartung setzt: Wer
   weiss, dass drei Abschnitte fehlen, sucht nicht vergeblich danach. */
.stb-stand { margin-top: 14px; }
.stb-stand-zahl { font-size: var(--fs-lg); font-weight: 600; }
.stb-balken {
  height: 7px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
}
.stb-balken i { display: block; height: 100%; background: var(--accent); }
.stb-fehlend {
  margin-top: 8px;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-secondary);
}
/* Bewusst als Aufzählung der fehlenden Namen und nicht als leere Zeile im
   Steckbrief selbst: "Gefahrenstellen: —" liest sich wie "geprüft, keine". */
.stb-fehlend b { color: var(--text-primary); font-weight: 600; }

/* ---------- 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(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.stb-abschnitt h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xl);
}
/* Die Nummer bleibt sichtbar, weil die Reihenfolge selbst eine Aussage ist:
   Sie ist die Reihenfolge des Ankommens, nicht eine beliebige Sortierung. */
.stb-nr {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-fg);
  font-size: var(--fs-lg);
  font-weight: 600;
}
.stb-text {
  margin: 10px 0 0;
  font-size: var(--fs-xl);
  line-height: 1.55;
  color: var(--text-primary);
  /* Zeilenumbrüche aus der Eingabe bleiben erhalten. Drei Schlüsselstellen
     untereinander sind nachts schneller erfasst als ein Fliesstext. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Abschnitt 7 trägt zwei Angaben. Beide bekommen ihre eigene Beschriftung –
   ein gemeinsamer Absatz würde die Nummer, die man wählen soll, im Fliesstext
   verstecken. */
.stb-feldtitel {
  margin: 12px 0 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-secondary);
}
.stb-feldtitel:first-of-type { margin-top: 10px; }

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

/* Telefonnummern: der einzige Teil, den jemand unter Anspannung trifft. */
.stb-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  margin: 0 4px 0 0;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  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); }

/* Abschnitt 5 kommt aus den Kontrollpunkten und wird hier nur gelesen. */
.stb-punkte { margin: 10px 0 0; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.stb-punkte li { font-size: var(--fs-xl); line-height: 1.5; }
.stb-punkt-ort { display: block; font-size: var(--fs-lg); color: var(--text-secondary); }

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

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

/* Vertikal und nicht als Karussell: Ein Karussell verbirgt, wie viele Bilder
   noch kommen, und Wischen ist mit Handschuhen oder auf nassem Display
   unzuverlässig. Scrollen funktioniert in beiden Fällen. */
.stb-foto {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stb-foto img {
  display: block;
  width: 100%;
  height: auto;
  /* Kein Zuschnitt auf ein festes Seitenverhältnis: Genau der abgeschnittene
     Rand kann der Hinweis sein, an dem man das Tor wiedererkennt. Die Fläche
     in der Tokenfarbe hält den Platz, solange das Bild noch lädt. */
  background: var(--surface-sunken);
  min-height: 120px;
}
.stb-foto-text { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.stb-foto-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stb-foto-kopf .chip { font-size: var(--fs-lg); }
.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 Grösse wie der übrige Text und nicht als Kleingedrucktes. */
.stb-datum { font-size: var(--fs-lg); color: var(--text-secondary); margin: 0; }
.stb-gross { align-self: flex-start; }

/* ---------- Leerzustände ---------- */

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

/* ---------- Bearbeiten (Büro, 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 für denselben Zweck. */
.stb-warnung {
  margin: 0 0 8px;
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px 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-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: 10px; }
.stb-zeile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stb-mini {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: var(--surface-sunken);
  object-fit: cover;
}
.stb-zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.stb-zeile-text .field { margin-bottom: 0; }
.stb-tasten { display: flex; gap: 6px; flex-wrap: wrap; }
/* Symbolknöpfe brauchen die volle Tippfläche, auch wenn nur ein Pfeil drin steht. */
.stb-tasten .btn { min-height: 44px; min-width: 44px; }

@media (max-width: 620px) {
  .stb-zeile { flex-direction: column; }
  .stb-mini { width: 100%; height: 140px; }
}