/* Lagebild und Referenzbilder.

   Beides wird um drei Uhr nachts gelesen, im Auto oder im Stehen, mit einer
   Hand, oft mit Handschuhen und manchmal auf einem nassen Display. Es gelten
   darum dieselben Regeln wie in steckbrief.css:

   - Nichts unter 15px. Die kleinen Stufen der Skala (--fs-xs, --fs-sm,
     --fs-md) kommen hier gar nicht vor, auch nicht bei Stand und Herkunft.
     Was zu klein zum Lesen ist, ist schlimmer als nicht vorhanden, weil es
     trotzdem Platz und Aufmerksamkeit kostet.
   - Tippflaechen mindestens 44px hoch.
   - Keine eigenen Farben, keine neuen Schriftgroessen, keine neuen Abstaende:
     alles kommt aus den Tokens in styles.css. Ein zweiter Satz Werte waere ein
     zweiter Stand derselben Wahrheit.

   Eine Gestaltungsentscheidung traegt die ganze Datei: Der Herkunftshinweis am
   Lagebild ist NICHT kleingedruckt. Er hat dieselbe Schriftgroesse wie der
   Text, den er einordnet, und einen Akzentstrich links wie die Warnung im
   Steckbrief (steckbrief.css, .stb-warnung) – dieselbe Sprache fuer denselben
   Zweck. Ein Hinweis in Fussnotengroesse waere eine Fussnote, und die liest
   nachts niemand. */

/* ============================================================== Lagebild */

.lgb { display: flex; flex-direction: column; gap: 12px; }

.lgb-kopf {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.lgb-titel { font-size: var(--fs-xl); }

/* Der Vorspann erklaert VOR dem Klick, was der Klick auslöst: eine Anfrage an
   einen fremden Dienst, die den Betrieb Geld kostet. Wer das erst hinterher
   erfaehrt, hat es nicht entschieden. */
.lgb-vorspann {
  margin: 8px 0 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-secondary);
}
.lgb-knopf { margin-top: 12px; min-height: 44px; }

/* Bewusst NICHT bei :empty ausgeblendet: Der Bereich traegt aria-live. Wird er
   im selben Zug eingeblendet, in dem sein Inhalt entsteht, melden manche
   Sprachausgaben die Aenderung nicht. Leer ist er ohnehin null Pixel hoch, und
   danach kommt nichts mehr – der Abstand darunter faellt niemandem auf. */
.lgb-ergebnis { min-width: 0; }

.lgb-laedt, .lgb-fehler {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface-1);
  border: 1px solid var(--border);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-secondary);
}
.lgb-fehler { border-left: 3px solid var(--critical); color: var(--text-primary); }

.lgb-blatt { display: flex; flex-direction: column; gap: 12px; }

/* Der Herkunftshinweis. Er steht ueber dem Text, nicht darunter: Wer den Text
   zuerst liest und die Einordnung danach, hat ihn bereits als Tatsache
   abgespeichert. Der Akzentstrich in --critical macht ihn auffindbar, ohne die
   ganze Flaeche einzufaerben – der Text ist ja nicht falsch, er ist nur nicht
   beweiskraeftig. */
.lgb-hinweis {
  margin: 0;
  padding: 12px 14px;
  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);
}
.lgb-hinweis b { display: block; font-weight: 650; }

.lgb-abschnitte { display: flex; flex-direction: column; gap: 12px; }

.lgb-abschnitt {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
.lgb-abschnitt-titel {
  font-size: var(--fs-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.lgb-text {
  margin: 6px 0 0;
  font-size: var(--fs-xl);
  line-height: 1.55;
  color: var(--text-primary);
  /* Zeilenumbrueche des Dienstes bleiben erhalten: Drei Punkte untereinander
     sind nachts schneller erfasst als ein Fliesstext. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Stand und Grundlage. Sie stehen in einem eigenen Kasten und nicht als
   Randnotiz am Text: Eine Zusammenfassung ohne Herkunft ist eine Behauptung
   ohne Herkunft. Gleiche Schriftgroesse wie der uebrige Text – wer sie
   verkleinert, versteckt sie. */
.lgb-herkunft {
  padding: 12px 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lgb-stand { font-weight: 600; color: var(--text-primary); }
.lgb-grundlage { overflow-wrap: anywhere; }

/* ========================================================= Referenzbilder */

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

/* Untereinander 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. */
.rfb-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rfb-bild {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.rfb-rahmen { display: block; }

/* Ein Knopf und kein blosses Bild: Vergroessern muss mit der Tastatur gehen,
   und ein Bild ohne Rolle ist fuer eine Sprachausgabe kein Ziel. */
.rfb-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
  cursor: zoom-in;
}
.rfb-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rfb-zoom img {
  display: block;
  width: 100%;
  /* Eingepasst gross genug, um eine Tuer wiederzuerkennen, klein genug, dass
     drei Bilder noch scrollbar bleiben. */
  max-height: 260px;
  object-fit: cover;
  background: var(--surface-sunken);
}
/* Vergroessert: kein Zuschnitt mehr. Genau der abgeschnittene Rand kann der
   Hinweis sein, an dem man das Tor wiedererkennt. */
.rfb-rahmen.ist-gross .rfb-zoom { cursor: zoom-out; }
.rfb-rahmen.ist-gross .rfb-zoom img { max-height: none; object-fit: contain; }

.rfb-text { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.rfb-kopfzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Der Chip traegt im Grundzustand --fs-xs. Das ist hier zu klein: Der Zweck
   entscheidet, ob man ein Bild mit der Tuer vor sich vergleicht oder mit dem
   Weg dorthin. */
.rfb-kopfzeile .chip { font-size: var(--fs-lg); padding: 2px 10px; }
.rfb-zaehler { font-size: var(--fs-lg); color: var(--text-muted); }

.rfb-caption {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.45;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
/* Eine fehlende Beschriftung wird benannt und nicht durch einen Platzhalter
   ersetzt, der wie eine Beschriftung aussieht. */
.rfb-ohne { color: var(--text-muted); font-size: var(--fs-lg); }

.rfb-tasten { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.rfb-tasten .btn { min-height: 44px; }

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

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

.rfb-verwaltung {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.rfb-verwaltung-titel { font-size: var(--fs-lg); font-weight: 600; }
.rfb-verwaltung .field { margin-bottom: 12px; }
.rfb-verwaltung .field:first-of-type { margin-top: 10px; }
.rfb-verwaltung .field label { font-size: var(--fs-lg); }

.rfb-hilfe {
  margin: 8px 0 0;
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--text-muted);
}
.rfb-verwaltung .field .rfb-hilfe { margin-top: 4px; }

/* Die erreichte Obergrenze ist kein Fehler, sondern eine Entscheidung – darum
   derselbe Kasten wie die uebrige Verwaltung und keine Warnfarbe. */
.rfb-voll {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-secondary);
}

@media (max-width: 620px) {
  .lgb-kopf { padding: 14px; }
  .lgb-knopf { width: 100%; }
  .lgb-abschnitt { padding: 12px 14px; }
  .rfb-zoom img { max-height: 200px; }
  .rfb-tasten .btn { flex: 1; justify-content: center; }
}