/* Seitenleiste – baut auf dem Design-Handbuch auf (design/tokens.css + design/komponenten.css, Herkunft:
 * design/HERKUNFT.md). Hier steht nur die Anordnung der App: Farben, Schrift und Abstände ausschließlich als
 * Bedeutungs-Tokens, Knöpfe nur als ds-knopf (ein Test prüft beides).
 * Immer hell – das Handbuch hat keinen Dunkelmodus (Entscheidung Philipp, 01.10.2026). */

/* Kopfleiste des Handbuchs, schmaler für die Seitenleiste. Logo aus dem Thema; ohne Thema nur der Name. */
.kopfleiste { gap: var(--abstand-3); padding: var(--abstand-3) var(--abstand-4); }
.kopfleiste h1 { margin: 0; }
.kopf-logo {
  display: var(--thema-logo-anzeige, none);
  flex: none;
  height: var(--hoehe-logo);
  aspect-ratio: var(--thema-logo-verhaeltnis);
  background: var(--thema-logo) no-repeat left center / contain;
}

.inhalt { padding: var(--abstand-3); }
.status { margin: 0 0 var(--abstand-3); font-weight: var(--schrift-gewicht-fett); }
.details {
  margin: calc(-1 * var(--abstand-2)) 0 var(--abstand-3);
  font-size: var(--schrift-groesse-klein);
  color: var(--farbe-text-leise);
  word-break: break-word;
}

.vorschau-modus {
  margin-bottom: var(--abstand-3);
  padding: var(--abstand-3);
  border: var(--linie-normal) dashed var(--farbe-rand-feld);
  border-radius: var(--radius-klein);
}

/* Schalter (an/aus): gedrückt = gefüllt wie der Haupt-Knopf. Das Handbuch kennt noch keinen Schalter – Kandidat dafür. */
.ds-knopf[aria-pressed="true"] { background: var(--farbe-aktion); border-color: var(--farbe-aktion); color: var(--farbe-text-auf-farbe); }

/* Knöpfe, die über die ganze Kartenbreite gehen – groß, damit niemand daneben tippt. */
.lupe-oeffnen, .fa-start, .fa-oeffnen, .als-jpg { display: flex; width: 100%; margin-bottom: var(--abstand-3); }

/* ---------------------------------------------------------------- Karte je Anhang (ds-karte) */
.anhang { margin-bottom: var(--abstand-4); padding: var(--abstand-3); }
.anhang.laedt { opacity: 0.6; }
.anhang.laedt .anhang-name::after { content: " – wird gelesen …"; font-weight: var(--schrift-gewicht-normal); }
/* Fehler = AUS-Regel des Handbuchs: roter Grund, 2 px roter Rand, rotes Wort. */
.anhang.fehler { border: var(--linie-normal) solid var(--farbe-gefahr); background: var(--farbe-gefahr-hell); }
.anhang-name {
  margin: 0 0 var(--abstand-2);
  font-size: var(--schrift-groesse-klein);
  font-weight: var(--schrift-gewicht-halbfett);
  color: var(--farbe-text-leise);
  word-break: break-all;
}

/* Meldung über dem Foto (ds-hinweis): blau = Info, gelb = Foto schwer lesbar/klein, im Fehlerfall rotes Wort. */
.anhang-meldung { margin: 0 0 var(--abstand-3); font-weight: var(--schrift-gewicht-halbfett); white-space: pre-line; }
.anhang.hinweis .anhang-meldung { border-left-color: var(--farbe-achtung); background: var(--farbe-achtung-hell); }
.anhang.fehler .anhang-meldung { padding: 0; border: 0; background: none; color: var(--farbe-gefahr-text); }

/* Fotos auf dunkler Fläche – das Handbuch hat kein Schwarz, die Kopfleisten-Farbe ist die dunkle Markenfläche. */
.anhang-bild {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: var(--farbe-kopfleiste);
  border-radius: var(--radius-klein);
}

.als-jpg-meldung {
  margin: calc(-1 * var(--abstand-1)) 0 var(--abstand-3);
  font-size: var(--schrift-groesse-klein);
  font-weight: var(--schrift-gewicht-halbfett);
  color: var(--farbe-gefahr-text);
}

/* ---------------------------------------------------------------- Gelesene Werte */
.felder { margin: 0; padding: 0; list-style: none; }
.feld { padding: var(--abstand-2) 0; border-top: var(--linie-duenn) solid var(--farbe-rand); }
.feld:first-child { border-top: 0; }
/* Rot = am Foto prüfen (AUS-Regel: roter Rand, roter Grund, rotes Wort darunter). */
.feld.mit-warnung {
  margin: var(--abstand-1) 0;
  padding: var(--abstand-2);
  border: var(--linie-normal) solid var(--farbe-gefahr);
  border-radius: var(--radius-klein);
  background: var(--farbe-gefahr-hell);
}
.feld-bezeichnung { font-size: var(--schrift-groesse-klein); color: var(--farbe-text-leise); }
/* Der Wert bleibt in einer Zeile (FIN Zeichen für Zeichen mit dem Foto vergleichen) – wird es eng, rutscht der
 * Kopieren-Knopf darunter statt den Wert umzubrechen. Nur sehr lange Werte brechen selbst um. */
.feld-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); }
.feld-wert {
  flex: 1 1 auto;
  font-size: var(--schrift-groesse-gross);
  font-weight: var(--schrift-gewicht-halbfett);
  overflow-wrap: anywhere;
  user-select: all;
}
.kopieren { flex: none; min-width: 96px; margin-left: auto; }
.feld-bestaetigung, .feld-warnung, .feld-korrektur { margin: var(--abstand-1) 0 0; font-size: var(--schrift-groesse-klein); }
.feld-bestaetigung { font-weight: var(--schrift-gewicht-halbfett); color: var(--farbe-gut-text); }
.feld-warnung { font-weight: var(--schrift-gewicht-halbfett); color: var(--farbe-gefahr-text); }
.feld-korrektur { color: var(--farbe-text-leise); }

.rohtext { margin-top: var(--abstand-3); }
.rohtext summary { cursor: pointer; color: var(--farbe-text-leise); }
.rohtext pre { max-height: 240px; overflow: auto; font-size: var(--schrift-groesse-klein); white-space: pre-wrap; }

/* ---------------------------------------------------------------- Bitte an den Kunden um ein besseres Foto */
.foto-anfrage { margin: 0 0 var(--abstand-3); }
.foto-anfrage .fa-start { margin-bottom: 0; }
.fa-formular {
  margin-top: var(--abstand-2);
  padding: var(--abstand-3);
  border-radius: var(--radius-mittel);
  background: var(--farbe-flaeche-ruhig);
}
.fa-frage { margin: 0 0 var(--abstand-1); font-weight: var(--schrift-gewicht-fett); }
.fa-anrede { display: flex; gap: var(--abstand-2); }
.fa-anrede .ds-knopf { flex: 1; padding-inline: var(--abstand-2); }
.fa-leise { margin: var(--abstand-1) 0 var(--abstand-3); font-size: var(--schrift-groesse-klein); color: var(--farbe-text-leise); }
.fa-namen { display: flex; gap: var(--abstand-2); margin-bottom: var(--abstand-3); }
.fa-namen .ds-feld { flex: 1; min-width: 0; }
.fa-vorschau { margin: 0 0 var(--abstand-3); font-weight: var(--schrift-gewicht-halbfett); }
.fa-meldung { margin: var(--abstand-2) 0 0; font-weight: var(--schrift-gewicht-halbfett); }
.fa-meldung.fehlgeschlagen { color: var(--farbe-gefahr-text); }
.fa-ersatz { margin-top: var(--abstand-2); }