/* =============================================================================
   SCHALLKISTE — Komponenten
   -----------------------------------------------------------------------------
   Marken-neutrale Bausteine für ALLE Schallkiste-Seiten. Format-spezifische
   Bausteine (z. B. die S:E-Wortmarke) liegen in Design/se/.
   Setzt tokens.css voraus — MUSS zuerst kommen:

     <link rel="stylesheet" href="Design/tokens.css">
     <link rel="stylesheet" href="Design/components.css">

   Regeln hier, Werte dort. In dieser Datei stehen KEINE Hex-Codes, keine nackten
   rem-Werte für Raum oder Schriftgröße — alles über var(--token).
   ============================================================================= */

/* =============================================================================
   BASIS
   ============================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--grund);
  background-image: var(--glow);
  color: var(--text);
  font-family: var(--schrift-mono);
  font-weight: var(--gewicht-text);
  font-size: var(--text-basis);
  line-height: var(--zeile-text);
  min-height: 100vh;
  padding: 4vw 5vw 6vw;
  /* Kein overflow-x:hidden — das versteckt Layoutfehler statt sie zu zeigen.
     Bricht etwas seitlich aus, gehört das gefunden und behoben. */
}

.wrap { max-width: var(--seite-max); margin: 0 auto; }

/* ---- Fokus · gilt global und wird nie pro Komponente abgeschaltet -------- */
:focus-visible {
  outline: var(--fokus-breite) solid var(--fokus-farbe);
  outline-offset: var(--fokus-abstand);
  border-radius: var(--radius);
}

/* ---- Bewegung nur, wenn erlaubt ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =============================================================================
   TYPOGRAFIE
   ============================================================================= */
.titel {
  font-family: var(--schrift-display); font-weight: var(--gewicht-display);
  font-size: var(--text-titel-l); letter-spacing: var(--sperr-eng); line-height: var(--zeile-eng);
  color: var(--text-titel);
}
.akzent { color: var(--akzent); font-weight: 400; }

.label, .untertitel {
  font-size: var(--text-mikro); text-transform: uppercase; color: var(--text-leise);
  letter-spacing: var(--sperr-weit);
}
.untertitel { margin-top: var(--raum-2); }

.lead { font-size: var(--text-lead); color: var(--text); max-width: var(--zeile-max); line-height: var(--zeile-text); }
.lead strong, .fliesstext strong { color: var(--text-stark); font-weight: var(--gewicht-fett); }

.fliesstext { max-width: var(--zeile-max); }
.fliesstext > * + * { margin-top: var(--raum-4); }
.fliesstext ul, .fliesstext ol { padding-left: var(--raum-5); }
.fliesstext li { margin-top: var(--raum-2); }
.fliesstext li::marker { color: var(--akzent); }

.zahl { font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-variant-numeric: tabular-nums; }

code, .code { font-family: var(--schrift-mono); color: var(--akzent); font-size: 0.92em; }

/* ---- Links · ohne diese Regeln ist jeder Link Browser-Blau -------------- */
a {
  color: var(--gold-300);
  text-decoration: none;
  text-decoration-color: var(--text-stark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--uebergang), text-decoration-color var(--uebergang);
}
a:hover, a:focus-visible { color: var(--text-stark); text-decoration: underline; text-decoration-color: var(--akzent); }

/* ---- Trennlinie --------------------------------------------------------- */
hr { border: none; height: 1px; background: var(--linie-fade); margin: var(--raum-5) 0; }

/* =============================================================================
   LOGO-BAND
   -----------------------------------------------------------------------------
   Die Vollfarb-Fassung trägt ihren eigenen Kreis in Logo-Blau und verschwindet
   deshalb auf --grund. Die Antwort ist NICHT eine invertierte Zeichnung, sondern
   ein heller Träger darunter: das Band. Es kommt aus einer Kante des Formats und
   steht QUER zu ihr — von oben oder unten senkrecht, von der Seite waagerecht.
   Das Logo sitzt am freien Ende, das Band endet einen Schutzraum dahinter.

   Die Seite setzt nur zwei Dinge: --d (Logogröße) und die Lage entlang der
   Kante (left/right bei senkrecht, top/bottom bei waagerecht).
   ============================================================================= */
.logo-buehne { position: relative; overflow: hidden; }

.logo-band {
  position: absolute;
  display: flex;
  background: var(--band);
  --band-breite: calc(var(--d, 64px) * var(--logo-band-breite));
  --band-laenge: calc(var(--d, 64px) * var(--logo-band-breite) * var(--logo-band-laenge));
  --band-luft:   calc(var(--d, 64px) * var(--logo-schutzraum));
}
.logo-band > img { width: var(--d, 64px); height: var(--d, 64px); display: block; }

/* Senkrecht — hängt an der Ober- oder steht auf der Unterkante. */
.logo-band.von-oben,
.logo-band.von-unten  { width: var(--band-breite); height: var(--band-laenge); justify-content: center; }
.logo-band.von-oben   { top: 0;    align-items: flex-end;   padding-bottom: var(--band-luft); }
.logo-band.von-unten  { bottom: 0; align-items: flex-start; padding-top:    var(--band-luft); }

/* Waagerecht — kommt aus der linken oder rechten Seitenkante. */
.logo-band.von-links,
.logo-band.von-rechts { height: var(--band-breite); width: var(--band-laenge); align-items: center; }
.logo-band.von-links  { left: 0;  justify-content: flex-end;   padding-right: var(--band-luft); }
.logo-band.von-rechts { right: 0; justify-content: flex-start; padding-left:  var(--band-luft); }

/* =============================================================================
   ABSCHNITTE
   ============================================================================= */
.kapitel { margin-top: var(--raum-8); padding-bottom: var(--raum-2); position: relative; }
.kapitel::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--linie-fade); }
.kapitel-nr { font-size: var(--text-mikro); letter-spacing: var(--sperr-weit); color: var(--akzent); }
.kapitel-titel {
  font-family: var(--schrift-display); font-weight: var(--gewicht-display);
  font-size: var(--text-titel-m); letter-spacing: var(--sperr-eng);
  line-height: var(--zeile-eng); margin-top: var(--raum-1);
  color: var(--text-titel);
}

/* ---- Inhaltsverzeichnis ------------------------------------------------- */
.toc { margin-top: var(--raum-6); padding: var(--raum-4) var(--raum-5); border: 1px solid var(--linie); border-radius: var(--radius); }
.toc-titel { font-size: var(--text-mikro); letter-spacing: var(--sperr-weit); text-transform: uppercase; color: var(--akzent); margin-bottom: var(--raum-3); }
.toc ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5); }
.toc a { font-size: var(--text-klein); }

/* =============================================================================
   KARTE
   ============================================================================= */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--raum-6); }
.karte-titel {
  font-size: var(--text-mikro); letter-spacing: var(--sperr-weit); text-transform: uppercase;
  color: var(--akzent); margin-bottom: var(--raum-5);
  display: flex; align-items: center; gap: var(--raum-2);
}
.karte-titel::before { content: ''; width: 18px; height: 1px; background: var(--akzent); flex: none; }

/* =============================================================================
   SCHALTER
   ============================================================================= */
.schalter-reihe { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.schalter {
  font-family: inherit; font-size: var(--text-klein); letter-spacing: 0.05em;
  background: transparent; color: var(--text-leise);
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--raum-2) var(--raum-3); min-height: var(--treffer-min);
  cursor: pointer; transition: color var(--uebergang), border-color var(--uebergang), background var(--uebergang);
}
.schalter:hover { color: var(--text-stark); border-color: var(--text-leise); }
.schalter.aktiv { background: var(--akzent-warm); color: var(--text-stark); border-color: var(--akzent-warm); font-weight: var(--gewicht-fett); }
.schalter.gold.aktiv { background: var(--akzent); color: var(--tinte); border-color: var(--akzent); font-weight: var(--gewicht-fett); }
.schalter:disabled,
.schalter[aria-disabled='true'] { opacity: 0.4; cursor: not-allowed; }
.schalter:disabled:hover { color: var(--text-leise); border-color: var(--linie); }

/* =============================================================================
   FORMULARFELDER
   ============================================================================= */
.feld { display: flex; flex-direction: column; gap: var(--raum-2); max-width: 32ch; }
.feld-label { font-size: var(--text-mikro); letter-spacing: var(--sperr-label); text-transform: uppercase; color: var(--text-leise); }
.eingabe, select.eingabe, textarea.eingabe {
  font-family: inherit; font-size: var(--text-basis); color: var(--text-stark);
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--raum-3); min-height: var(--treffer-min); width: 100%;
  transition: border-color var(--uebergang);
}
.eingabe::placeholder { color: var(--text-leise); opacity: 1; }
.eingabe:hover { border-color: var(--text-leise); }
.eingabe:focus { outline: none; border-color: var(--akzent); }
.eingabe:focus-visible { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: var(--fokus-abstand); }
.eingabe[aria-invalid='true'] { border-color: var(--akzent-warm); }
.eingabe:disabled { opacity: 0.4; cursor: not-allowed; }
textarea.eingabe { min-height: calc(var(--treffer-min) * 2); resize: vertical; line-height: var(--zeile-text); }
.feld-hilfe { font-size: var(--text-mikro); color: var(--text-leise); }
.feld-fehler { font-size: var(--text-mikro); color: var(--schlecht-text); }

/* =============================================================================
   TABELLE
   Immer in <div class="tabelle-scroll"> wickeln — sonst bricht sie auf dem Handy.
   ============================================================================= */
.tabelle-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-basis); }
thead th {
  font-size: var(--text-mikro); letter-spacing: var(--sperr-label); text-transform: uppercase;
  padding: var(--raum-3) var(--raum-4) var(--raum-2); color: var(--text-leise);
  font-weight: var(--gewicht-text);   /* Space Mono kennt nur 400/700 */
  border-bottom: 1px solid var(--linie); text-align: right; white-space: nowrap;
}
thead th:first-child { text-align: left; }
thead th.h { color: var(--akzent); }
thead th.a { color: var(--daten-1); }
tbody td { padding: var(--raum-3) var(--raum-4); text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--linie-fein); }
tbody td:first-child { text-align: left; color: var(--text-stark); font-weight: var(--gewicht-fett); }
tbody td.h { color: var(--akzent); font-weight: var(--gewicht-fett); }
tbody td.a { color: var(--daten-1); font-weight: var(--gewicht-fett); }
tbody tr:hover { background: var(--linie-hauch); }

/* =============================================================================
   AUFSCHLÜSSELUNG (ZEILEN)
   ============================================================================= */
.zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--raum-4);
  padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie-fein); font-size: var(--text-basis);
}
.zeile .lbl { color: var(--text); }
.zeile .wert { font-variant-numeric: tabular-nums; color: var(--text-stark); white-space: nowrap; }
.zeile .wert.abzug { color: var(--akzent-warm); }
.zeile.zwischensumme { border-bottom: none; border-top: 1px solid var(--linie-fein); margin-top: var(--raum-1); padding-top: var(--raum-2); }
.zeile.zwischensumme .lbl, .zeile.zwischensumme .wert { color: var(--text-stark); font-weight: var(--gewicht-fett); }
.zeile.summe { border-bottom: none; border-top: 1px solid var(--akzent); margin-top: var(--raum-2); padding-top: var(--raum-4); }
.zeile.summe .lbl { color: var(--text-stark); font-weight: var(--gewicht-fett); }
.zeile.summe .wert { color: var(--akzent); font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-titel-s); }

/* =============================================================================
   QUOTEN (KENNZAHL-PAAR)
   ============================================================================= */
.quoten { display: flex; flex-wrap: wrap; gap: var(--raum-6); }
.quote-zahl { font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-titel-m); line-height: 1; }
.quote-zahl.gold { color: var(--akzent); }
.quote-zahl.rot { color: var(--akzent-warm); }
.quote-label { font-size: var(--text-mikro); letter-spacing: var(--sperr-label); text-transform: uppercase; color: var(--text-leise); margin-top: var(--raum-1); }

/* =============================================================================
   BALKEN (GESTAPELT)
   ============================================================================= */
.balken { display: flex; height: 48px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie); }
.balken-teil.gold { background: var(--akzent); }
.balken-teil.rot { background: var(--akzent-warm); }
.balken-teil.rot-tief { background: var(--rot-700); }
.balken-teil.daten-1 { background: var(--daten-1); }
.balken-teil.daten-2 { background: var(--daten-2); }
.balken-legende { display: flex; flex-wrap: wrap; gap: var(--raum-4); margin-top: var(--raum-4); font-size: var(--text-klein); }
.leg-punkt { display: inline-flex; align-items: center; gap: var(--raum-2); color: var(--text); }
.leg-punkt::before { content: ''; width: 10px; height: 10px; border-radius: var(--radius); background: var(--text-leise); flex: none; }
.leg-punkt.gold::before { background: var(--akzent); }
.leg-punkt.rot::before { background: var(--akzent-warm); }
.leg-punkt.rot-tief::before { background: var(--rot-700); }
.leg-punkt.daten-1::before { background: var(--daten-1); }
.leg-punkt.daten-2::before { background: var(--daten-2); }

/* =============================================================================
   PILLS (STATUS-MARKER) · immer in .pill-reihe, nie mit margin-left im Markup
   ============================================================================= */
.pill-reihe { display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: center; }
.pill {
  display: inline-block; font-size: var(--text-mikro); padding: var(--raum-1) var(--raum-2);
  border-radius: var(--radius); font-weight: var(--gewicht-fett); white-space: nowrap;
}
.pill.gut { background: var(--gut-tint); color: var(--gut-text); }
.pill.schlecht { background: var(--schlecht-tint); color: var(--schlecht-text); }
.pill.neutral { background: var(--neutral-tint); color: var(--neutral-text); }

/* =============================================================================
   MERKSATZ (ZITAT-BOX)
   ============================================================================= */
.merksatz { background: var(--verlauf-merksatz); border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: var(--raum-5) var(--raum-6); }
.merksatz .k { font-size: var(--text-mikro); letter-spacing: var(--sperr-weit); text-transform: uppercase; color: var(--akzent-warm); margin-bottom: var(--raum-3); }
.merksatz p { font-family: var(--schrift-display); font-size: var(--text-gross); color: var(--text-titel); line-height: var(--zeile-titel); text-wrap: pretty; }

/* =============================================================================
   HINWEIS
   ============================================================================= */
.hinweis { font-size: var(--text-klein); color: var(--text-leise); line-height: var(--zeile-weit); border-left: 2px solid var(--linie); padding-left: var(--raum-5); max-width: 80ch; }
.hinweis strong { color: var(--text); }

/* =============================================================================
   BILD / PLATZHALTER
   ============================================================================= */
figure { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
figure img { display: block; width: 100%; height: auto; }
figcaption { font-size: var(--text-mikro); color: var(--text-leise); padding: var(--raum-3) var(--raum-4); border-top: 1px solid var(--linie-fein); }
.platzhalter {
  display: grid; place-items: center; min-height: 180px;
  font-size: var(--text-mikro); letter-spacing: var(--sperr-label); text-transform: uppercase; color: var(--text-leise);
  background: repeating-linear-gradient(135deg, var(--linie-hauch) 0 8px, transparent 8px 16px), var(--flaeche);
}

/* =============================================================================
   ZUSTÄNDE (LEER / FEHLER)
   ============================================================================= */
.zustand { display: grid; gap: var(--raum-2); justify-items: start; padding: var(--raum-6); border: 1px dashed var(--linie); border-radius: var(--radius); }
.zustand .titel-klein { font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-titel-s); color: var(--text-titel); }
.zustand p { font-size: var(--text-klein); color: var(--text-leise); max-width: 48ch; }
.zustand.fehler { border-style: solid; border-color: var(--schlecht); }
.zustand.fehler .titel-klein { color: var(--schlecht-text); }

/* =============================================================================
   FUSS
   ============================================================================= */
.fuss { padding-top: var(--raum-5); position: relative; font-size: var(--text-mikro); color: var(--text-leise); letter-spacing: 0.05em; }
.fuss::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--linie-fade); }
.fuss .mk { color: var(--akzent); }

/* =============================================================================
   HILFSKLASSEN — bewusst wenige.
   ============================================================================= */
.nur-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stapel { display: grid; gap: var(--raum-4); }
.stapel-weit { display: grid; gap: var(--raum-6); }
.reihe { display: flex; flex-wrap: wrap; gap: var(--raum-4); align-items: center; }