/* ══════════════════════════════════════════════════════════════════════════
   KINISI — Optik-Entwurf · Stilvorlage
   ─────────────────────────────────────────────────────────────────────────
   Gestaltungsabsicht (aus kinisi_design.md §1):
   Helle, ruhige Kontooberfläche im Vertrauens-Register von kraken.com — der
   bewusste Gegensatz zu xdr5.de, das mit 13-px-Fließtext auf #111 ein
   Terminal ist. Die Brücke zurück ins Universum bilden zwei Dinge: das
   xdr5-Orange, das AUSSCHLIESSLICH für TRYX reserviert bleibt, und die
   dunklen Panels in xdr5-Schwarz.

   Aufbau: 1 Tokens · 2 Grundlagen · 3 Kopf/Fuß · 4 Bausteine · 5 Chart
           6 Seitenteile · 7 Schmal
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hausschrift: extern von daten.fabianbrose.de (Update-Kanal, CLAUDE.md).
   Nur als AKZENT für Wortmarke und die großen Kurszahlen — die Brose ist eine
   leichte Schrift und trägt keinen Fließtext in einer Kontooberfläche.
   Über font.php, nicht über den direkten Dateipfad: der direkte Pfad scheitert
   im Browser cross-origin (in ingofoerb am 23.07.2026 nachgemessen). ── */
@font-face {
  font-family: 'Brose';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://daten.fabianbrose.de/typo/font.php?f=Brose.woff2') format('woff2'),
       url('https://daten.fabianbrose.de/typo/font.php?f=Brose.woff') format('woff');
}

/* ══ 1 · Tokens ══════════════════════════════════════════════════════════ */
:root {
  /* Flächen */
  --grund:        #f6f6f2;   /* Seitengrund, leicht warm */
  --flaeche:      #ffffff;   /* Karten */
  --flaeche-2:    #fbfbf8;   /* zurückgenommene Karten */
  --tief:         #101418;   /* dunkle Panels — Brücke zu xdr5 (#111) */
  --tief-2:       #171d23;

  /* Text */
  --text:         #14181d;
  --text-leise:   #5b6672;
  --text-hell:    #f2f4f3;
  --text-hell-leise: rgba(242,244,243,.62);

  /* Währungsfarben — die eine Regel, die alles zusammenhält */
  --kin:          #0e9f84;   /* KINISI: Bewegung, Petrol — Flächen und Linien */
  --kin-knopf:    #0b846c;   /* gefüllter Knopf: hellster Ton, der mit weißer
                                Schrift noch 4,63:1 schafft (nachgerechnet).
                                --kin selbst kommt nur auf 3,33:1 und ist als
                                Grund für Text damit unzulässig. */
  --kin-tief:     #0a7a66;   /* Text auf Hellem (5,27:1), Hover */
  --kin-hauch:    #e7f5f1;
  --tryx:         #ff8800;   /* TRYX: aus xdr5 übernommen, NUR für TRYX */
  --tryx-hauch:   #fff2e0;

  /* Signale */
  --hoch:         #0e9f84;   /* steigender Kurs = dieselbe Farbe wie KINISI */
  --runter:       #d1484b;   /* nur als LINIE/Fläche — als Grafik reichen 3:1 */
  --runter-text:  #b93a3d;   /* als TEXT: 4,93:1 auf der Pillenfläche */

  /* DER ZEITSCHLÜSSEL — die zweite Kurve (25.08.2026).
     Eine DRITTE Farbe, mit Absicht: Grün ist der Kurs, Rot ist „fällt",
     und Orange gehört laut Token-Regel ausschließlich TRYX. Der
     Zeitschlüssel ist keines davon — er ist die Größe, an der Kurs und
     Karte zusammenhängen, und bekommt deshalb eine eigene.
     Gemessen: 5,45:1 auf Weiß und 5,07:1 auf der Kartenfläche, also auch
     als 11-px-Achsenbeschriftung lesbar. Auf --tief käme dieselbe Farbe
     nur auf 3,40:1 — dafür steht --zeit-hell darunter. */
  --zeit:         #7a5aa8;
  --zeit-hell:    #b49ae0;   /* auf --tief: 7,61:1 */

  /* Linien */
  --linie:        #e6e6df;
  --linie-stark:  #d5d5cc;
  --linie-dunkel: rgba(255,255,255,.12);

  /* Maße */
  --radius:       22px;
  --radius-klein: 12px;
  --radius-pille: 999px;
  --breite:       1140px;

  /* ── RAUM — die einzige Abstandsskala ───────────────────────────────
     Gemessen am 24.08.2026 ueber CSS und Markup: 35 verschiedene
     Abstandswerte, praktisch jede gerade Zahl von 2 bis 36. Das war keine
     Gestaltung, das war Raten — und genau der Grund, warum die Seite
     unruhig wirkte, obwohl jede Einzelstelle fuer sich plausibel aussah.
     Ab hier gibt es neun Stufen und dazwischen nichts. Wer einen Wert
     braucht, der hier fehlt, hat fast immer die falsche Stufe gesucht. */
  --raum-1:  4px;
  --raum-2:  8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 40px;
  --raum-8: 56px;
  --raum-9: 80px;

  /* Fliessende Stufen — hier darf die Seite atmen, und nur hier.
     Der Rhythmus zwischen zwei Sektionen ist das, was Bloecke voneinander
     trennt; ohne ihn kleben sie aneinander, egal wie sauber die Innenmasse
     sind. */
  --raum-teil:  clamp(56px, 8vw, 96px);   /* zwischen zwei Sektionen */
  --raum-innen: clamp(32px, 5vw, 64px);   /* Panelfutter */

  /* ── MASSE — die einzige Breitenskala ───────────────────────────────
     Vorher 17 verschiedene Maximalbreiten: 320, 520, 560, 620, 640, 700,
     720, 780, 840, 900, 1140 px und 20/38/52/54/62/65/70 ch. Vier davon
     galten demselben Bauteil. */
  --mass-eng:     520px;   /* Formular, einzelne Handlung */
  --mass-karte:   640px;   /* Kassen-/Wechselkarte, Sektionskopf */
  --mass-mittel:  780px;
  --mass-weit:    920px;
  --mass-fliese:  320px;   /* Feld in einer umbrechenden Kopfzeile */
  --mass-lese:     68ch;   /* Fliesstext */
  --mass-lese-eng: 52ch;   /* gefuehrter Vorspann */
  --mass-notiz:    40ch;   /* Randnotiz, Fusszeile */
  --mass-schlag:   20ch;   /* Schlagzeile */

  /* Der Aussenabstand der Seite. Auf dem Handy sind das 24 px — vorher
     20, und an sechs von zehn Bahnen null (siehe .teil). */
  --luft:         clamp(24px, 4vw, 40px);

  /* Schrift */
  --serifenlos: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --akzent: 'Brose', var(--serifenlos);

  --schatten:      0 1px 2px rgba(16,20,24,.04), 0 8px 24px rgba(16,20,24,.06);
  --schatten-hoch: 0 2px 4px rgba(16,20,24,.06), 0 18px 48px rgba(16,20,24,.10);
}

/* ══ 2 · Grundlagen ══════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--serifenlos);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -.022em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--kin-tief); text-decoration-color: rgba(14,159,132,.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--kin); outline-offset: 3px; border-radius: 4px; }

.bahn { max-width: var(--breite); margin: 0 auto; padding: 0 var(--luft); }
.leise { color: var(--text-leise); }
.klein { font-size: .875rem; }
.zahl  { font-variant-numeric: tabular-nums; }
.mitte { text-align: center; }

/* Nur für Screenreader (Sprungmarke, Chart-Beschreibungen) */
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung:focus {
  position: fixed; top: 12px; left: 12px; z-index: 100; width: auto; height: auto;
  clip: auto; margin: 0; padding: var(--raum-3) var(--raum-4); background: var(--tief);
  color: var(--text-hell); border-radius: var(--radius-pille);
}

/* ══ 3 · Kopfzeile und Fußzeile ══════════════════════════════════════════ */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,246,242,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen { display: flex; align-items: center; gap: var(--raum-5); height: 68px; }

.marke {
  display: inline-flex; align-items: center; gap: var(--raum-3);
  font-family: var(--akzent); font-size: 1.55rem; font-weight: 300;
  letter-spacing: .06em; color: var(--text); text-decoration: none;
  white-space: nowrap;
}
.marke:hover { text-decoration: none; }
.marke-zeichen { display: block; width: 26px; height: 26px; flex: none; }

.menue { display: flex; gap: var(--raum-1); margin-left: var(--raum-2); }
.menue a {
  padding: var(--raum-2) var(--raum-4); border-radius: var(--radius-pille);
  color: var(--text-leise); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.menue a:hover { background: rgba(16,20,24,.05); color: var(--text); text-decoration: none; }
.menue a[aria-current="page"] { background: var(--kin-hauch); color: var(--kin-tief); }

/* Konto/An-/Abmelden IM Klappmenü — über 780 px stumm.
   Gegenstück zu `.kopf-rechts`, das unter 780 px ausgeblendet wird. Genau
   einer der beiden Sätze ist jeweils sichtbar; `display: none` hält den
   anderen auch aus dem Vorlesebaum heraus. Sichtbar gemacht werden sie im
   Menü-Media-Query weiter unten — DIESELBE 780er-Grenze. */
.menue-konto, .menue-teiler { display: none; }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--raum-3); }

.menue-knopf {
  display: none; margin-left: auto; width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein); font-size: 1.1rem; cursor: pointer; color: var(--text);
}

.fuss {
  margin-top: var(--raum-9); padding: var(--raum-8) 0 var(--raum-7);
  background: var(--tief); color: var(--text-hell-leise);
}
.fuss a { color: var(--text-hell); }
.fuss-raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--raum-7); }
/* h2 UND h3: Die Fusszeile traegt seit dem 25.08.2026 h2 statt h3 (sonst
   sprang die Ueberschriftenebene auf Seiten ohne eigenes h2 von 1 auf 3).
   Beide Ebenen stehen hier, damit die Gestaltung nicht daran haengt,
   welche gerade benutzt wird — genau dieser Mitzieh-Fehler waere sonst
   der naechste gewesen. */
.fuss h2, .fuss h3 { color: var(--text-hell); font-size: .8rem; text-transform: uppercase;
           letter-spacing: .1em; margin-bottom: var(--raum-4); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: var(--raum-2); }
.fuss-unten {
  margin-top: var(--raum-7); padding-top: var(--raum-5); border-top: 1px solid var(--linie-dunkel);
  font-size: .82rem;
}

/* ══ 4 · Bausteine ═══════════════════════════════════════════════════════ */

/* — Knöpfe — */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--raum-2);
  padding: var(--raum-3) var(--raum-5); border-radius: var(--radius-pille);
  font-size: 1rem; font-weight: 600; font-family: inherit;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.knopf:hover { text-decoration: none; transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }
.knopf--voll { background: var(--kin-knopf); color: #fff; box-shadow: 0 4px 14px rgba(14,159,132,.28); }
.knopf--voll:hover { background: var(--kin-tief); color: #fff; }
.knopf--rand { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); }
.knopf--rand:hover { border-color: var(--text-leise); color: var(--text); }
.knopf--hell { background: rgba(255,255,255,.1); color: var(--text-hell); border-color: rgba(255,255,255,.22); }
.knopf--hell:hover { background: rgba(255,255,255,.18); color: var(--text-hell); }
.knopf--klein { padding: var(--raum-2) var(--raum-4); font-size: .9rem; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* — Karte — */
.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: var(--raum-6);
}
.karte--still { background: var(--flaeche-2); }
.karte--dunkel { background: var(--tief); color: var(--text-hell); border-color: transparent; }
.karte--dunkel .leise { color: var(--text-hell-leise); }

/* align-items:start, weil Rasterzellen sonst auf gleiche Höhe gezogen
   werden — das stand 9x inline daneben, immer mit demselben Wert. */
.raster { display: grid; gap: var(--raum-5); align-items: start; }
.raster--weit { gap: var(--raum-7); }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }

/* — Marken für die beiden Währungen — */
.marke-kin, .marke-tryx {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  padding: var(--raum-1) var(--raum-3) var(--raum-1); border-radius: var(--radius-pille);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.marke-kin  { background: var(--kin-hauch);  color: var(--kin-tief); }
.marke-tryx { background: var(--tryx-hauch); color: #a85600; }
.karte--dunkel .marke-kin  { background: rgba(14,159,132,.2);  color: #4fd6ba; }
.karte--dunkel .marke-tryx { background: rgba(255,136,0,.18); color: #ffab4d; }

/* — Kennzahl — */
.kennzahl { display: flex; flex-direction: column; gap: var(--raum-1); }
.kennzahl b {
  font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kennzahl span { font-size: .86rem; color: var(--text-leise); }
/* .panel ist dunkel wie .karte--dunkel und teilt sich mit ihr schon die
   Kurs-Farben (siehe --hoch/--runter weiter unten) — diese beiden Regeln
   fehlten dort. Ohne sie stand --text-leise (fuer HELLEN Grund gemacht)
   auf dem dunklen Panel: gemessen 3,16:1 statt der geforderten 4,5:1
   (WCAG 2.1 AA). Mit --text-hell-leise sind es 6,94:1. Gemessen am
   Live-System 24.08.2026, claudine-direkt. */
.panel .kennzahl span,
.karte--dunkel .kennzahl span { color: var(--text-hell-leise); }

/* — Kursstand — */
.kursstand { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--raum-2) var(--raum-4); }
.kursstand-zahl {
  font-family: var(--akzent); font-weight: 300;
  font-size: clamp(3rem, 8vw, 5.2rem); line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.kursstand-einheit { font-size: 1.05rem; color: var(--text-leise); font-weight: 500; }
/* ⚠ DIESE ZEILE HAT GEFEHLT, UND ZWAR GENAU EINE.
   Auf konto.php steht der Kursstand im dunklen Panel. Die ZAHL war dort
   nie ein Problem — sie setzt gar keine Farbe und erbt das helle --text-hell
   des Panels. Die EINHEIT daneben setzt als einzige eine eigene Farbe, und
   zwar die für hellen Grund: #5b6672 auf #101418 sind 3,16:1, gefordert
   sind 4,5:1.
   Vorher stand an genau dieser Stelle color:var(--text-hell-leise) als
   style-Attribut im Markup (6,94:1). Beim Auslagern habe ich es entfernt,
   weil es die Klasse .kursstand-einheit ja gibt — sie hatte nur kein
   Gegenstück für dunklen Grund. Die Bereinigung hat den Kontrast damit
   nicht bloß verschoben, sondern verschlechtert.
   Nachgerechnet vom barrierefreiheit-Agenten und von mir unabhängig
   bestätigt (24.08.2026). Idiom wie bei .panel .leise und .kennzahl span. */
.panel .kursstand-einheit,
.karte--dunkel .kursstand-einheit { color: var(--text-hell-leise); }

.wandel {
  display: inline-flex; align-items: center; gap: var(--raum-1);
  padding: var(--raum-1) var(--raum-3) var(--raum-2); border-radius: var(--radius-pille);
  font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums;
}
.wandel--hoch   { background: var(--kin-hauch); color: var(--kin-tief); }
.wandel--runter { background: #fdeced; color: var(--runter-text); }

/* Richtung als reiner TEXT — die Spannenzeile unter dem Chart („Tief … Hoch …
   +2,41 % im Zeitraum"). Eigene Klassen, weil app.js die Farbe dort bis zum
   24.08.2026 als style="color:…" aus innerHTML gesetzt hat: Das verstößt gegen
   §6 des Design-Vertrags (Richtungsfarben nie als Präsentationsattribut) UND
   wurde von der Content-Security-Policy der Seite ohnehin verworfen — die
   Farbe war also nur im Entwurf je zu sehen.
   Wie überall: gedämpfter Ton für Text, leuchtender nur für Linien (§2). */
.spanne--hoch   { color: var(--kin-tief); }
.spanne--runter { color: var(--runter-text); }

/* — Umschalter (Zeitraum am Chart) — */
.umschalter {
  display: inline-flex; gap: var(--raum-1); padding: var(--raum-1);
  background: rgba(16,20,24,.05); border-radius: var(--radius-pille);
}
.umschalter button {
  padding: var(--raum-2) var(--raum-4); border: 0; background: none; border-radius: var(--radius-pille);
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--text-leise); cursor: pointer;
}
/* aria-pressed, NICHT aria-selected (geändert 24.08.2026).
 *
 * Der Umschalter war als role="tablist" mit role="tab" ausgezeichnet. Damit
 * kündigt ein Screenreader „Registerkarte, 1 von 4" an und fordert zur
 * Bedienung mit den Pfeiltasten auf — die es hier nie gab, ebenso wenig wie
 * roving tabindex, aria-controls oder ein tabpanel. Das Muster versprach also
 * eine Bedienung, die nicht existiert.
 * Es sind auch gar keine Registerkarten: Es ist EIN Chart, für den man den
 * Zeitraum wählt. Das ist eine Gruppe von Umschaltknöpfen — und `aria-pressed`
 * ist auf einem <button> gültig, während `aria-selected` dort laut ARIA-
 * Spezifikation ignoriert wird. */
.umschalter button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }
.panel .umschalter,
.karte--dunkel .umschalter { background: rgba(255,255,255,.08); }
.panel .umschalter button,
.karte--dunkel .umschalter button { color: var(--text-hell-leise); }
/* ⚠ DIESE ZEILE MUSS MIT, wenn die darüber .panel bekommt — und zwar wegen
   der Spezifitaet, nicht wegen des Aussehens. `.panel .umschalter button`
   und `.umschalter button[aria-pressed="true"]` haben BEIDE 0,2,1; bei
   Gleichstand gewinnt die spaetere. Ohne diese Zeile faerbt die Regel oben
   also auch den AKTIVEN Knopf hell — und der steht auf weissem Grund.
   Genau so ist es am 25.08.2026 passiert: drei Knoepfe von 3,16:1 auf
   6,94:1 verbessert und der vierte von 17,82:1 auf 1,06:1 ruiniert, also
   praktisch unsichtbar. Gesehen hat das der Screenshot, nicht die Messung —
   gemessen worden war nur, was repariert werden sollte. */
.panel .umschalter button[aria-pressed="true"],
.karte--dunkel .umschalter button[aria-pressed="true"] { background: rgba(255,255,255,.16); color: var(--text-hell); box-shadow: none; }

/* — Liste von Bewegungen — */
.bewegungen { list-style: none; margin: 0; padding: 0; }
.bewegung {
  display: grid; grid-template-columns: 38px 1fr auto; gap: var(--raum-4); align-items: center;
  padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie);
}
.bewegung:last-child { border-bottom: 0; }
.bewegung-zeichen {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--kin-hauch); color: var(--kin-tief); flex: none;
}
.bewegung-zeichen svg { width: 19px; height: 19px; }
.bewegung-zeichen--tryx { background: var(--tryx-hauch); color: #a85600; }
.bewegung-zeichen--ab { background: #fdeced; color: var(--runter); }
.bewegung-text { min-width: 0; }
.bewegung-text b { display: block; font-weight: 600; font-size: .98rem; }
.bewegung-text span { font-size: .82rem; color: var(--text-leise); }
/* Der Weg zur selben Zahlung bei XDR⁵ (25.08.2026, Foerbs Auftrag).
   Eigene Zeile unter den Angaben, klein und leise: Er ist ein Angebot, kein
   Aufruf — die meisten Zeilen haben ihn gar nicht. Kein neuer Farbwert, keine
   neue Form; es ist ein Link in der Schriftgröße der Zeile darüber. */
.bewegung-weg {
  /* ⚠ block, nicht inline-block: Der Kommentar versprach „eigene Zeile",
     inline-block haengte den Link aber hinter „· Raum" in dieselbe.
     (Befund pruef-agent, 25.08.2026.) */
  display: block; width: fit-content; margin-top: var(--raum-2);
  font-size: .82rem; color: var(--kin-tief); text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.bewegung-weg:hover, .bewegung-weg:focus-visible { color: var(--kin); }
.bewegung-weg sup { font-size: .7em; }

.bewegung-wert { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bewegung-wert--plus { color: var(--kin-tief); }
.bewegung-wert--minus { color: var(--runter-text); }
.id-kurz { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .8em; }

/* — Tabelle — */
.tabelle { width: 100%; border-collapse: collapse; font-size: .96rem; }
.tabelle th {
  text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-leise); font-weight: 700; padding: 0 var(--raum-4) var(--raum-3) 0;
  border-bottom: 1px solid var(--linie);
}
.tabelle td { padding: var(--raum-3) var(--raum-4) var(--raum-3) 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .zahl { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }

/* — Hinweiskasten — */
.hinweis {
  border-left: 3px solid var(--kin); background: var(--kin-hauch);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0; padding: var(--raum-4) var(--raum-5);
}
.hinweis--warn { border-left-color: var(--tryx); background: var(--tryx-hauch); }

/* — Eingabe — */
.feld { display: block; margin-bottom: var(--raum-4); }
.feld > span { display: block; font-size: .82rem; font-weight: 600; color: var(--text-leise); margin-bottom: var(--raum-2); }
.feld input, .feld select {
  width: 100%; padding: var(--raum-3) var(--raum-4); font: inherit; font-variant-numeric: tabular-nums;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--text);
}
.feld input:focus, .feld select:focus { outline: none; border-color: var(--kin); box-shadow: 0 0 0 3px rgba(14,159,132,.15); }

/* ══ 5 · Chart ═══════════════════════════════════════════════════════════ */
/* Kurslinien nehmen --hoch / --runter, NICHT --kin: Die Farbe sagt hier die
   Richtung, nicht die Währung. Im Hellen ist --hoch mit --kin identisch; auf
   dunklem Grund werden beide Töne angehoben (siehe unten), und über die Tokens
   wirkt das automatisch auf Linie, Fläche, Punkt und Sparkline. */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-linie { fill: none; stroke: var(--hoch); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-linie--runter { stroke: var(--runter); }
/* Die zweite Kurve: dünner und ohne Fläche darunter. Sie erklärt den Kurs,
   sie bestreitet ihn nicht — deshalb tritt sie zurück, wo beide sich
   kreuzen. Keine Richtungsfarbe: Ob der Zeitschlüssel steigt oder fällt,
   ist keine gute und keine schlechte Nachricht, sondern eine Auskunft. */
.chart-linie--zwei { stroke: var(--zeit); stroke-width: 1.5; opacity: .85; }
.chart-flaeche { stroke: none; }
.chart-netz { stroke: var(--linie); stroke-width: 1; }
.chart-marke { font-size: 11px; fill: var(--text-leise); font-variant-numeric: tabular-nums; }
/* ⚠ DIESE ZWEI MUESSEN HINTER .chart-netz UND .chart-marke STEHEN.
   Sie haben dieselbe Spezifitaet (0,1,0) wie die Grundregeln — bei
   Gleichstand entscheidet die REIHENFOLGE. Zuerst standen sie oben bei
   .chart-linie--zwei, wo sie thematisch hingehoeren, und wurden dort still
   ueberschrieben: Die rechte Achse war grau statt violett, also genau die
   Beschriftung, die sagen soll, zu welcher Linie sie gehoert. Im Bild ist
   das kaum zu sehen und trotzdem falsch. (Gemessen 25.08.2026 am Rendering
   der Testmaschine.) */
.chart-netz--zwei  { stroke: var(--zeit); opacity: .55; }
.chart-marke--zwei { fill: var(--zeit); }
.chart-punkt { fill: var(--hoch); stroke: var(--flaeche); stroke-width: 3; }
.chart-punkt--runter { fill: var(--runter); }
.chart-lot { stroke: var(--linie-stark); stroke-width: 1; stroke-dasharray: 3 3; }

/* Die Jetzt-Linie: Waagerechte auf Höhe des letzten Werts. Sie nimmt die
   Richtungsfarbe wie die Kurslinie, aber stark zurückgenommen — sie soll die
   Höhe nach links verlängern, nicht mit der Kurve um Aufmerksamkeit ringen.
   Deshalb auch gestrichelt und dünner als die Kurve: Was gemessen ist, ist
   durchgezogen; was eine Lesehilfe ist, ist gestrichelt. */
.chart-jetzt {
  stroke: var(--hoch); stroke-width: 1; stroke-dasharray: 2 5;
  opacity: .45;
}
.chart-jetzt--runter { stroke: var(--runter); }

/* Schmaler Schirm. chart.js setzt die Klasse selbst, sobald der Kasten unter
   560 px liegt — und zeichnet dann in echten CSS-Pixeln, vier Netzlinien statt
   fünf und drei Zeitmarken statt vier. Was hier steht, ist nur die Schrift:
   11 px sind auf 340 px Breite eine Spur zu groß für vier Zahlen unter der
   Achse. Vor dem 25.08.2026 stellte sich diese Frage gar nicht — da wurde die
   ganze Zeichnung waagerecht auf ein Drittel gestaucht, samt Beschriftung. */
.chart--schmal .chart-marke { font-size: 10px; }
.chart--schmal .chart-fahne { font-size: .78rem; }

/* Auf Schwarz sind Petrol und Rot zu matt, um als Signal zu taugen. Beide Töne
   werden deshalb innerhalb dunkler Flächen als TOKEN angehoben — dadurch zieht
   die Änderung durch Linie, Verlauf, Punkt, Sparkline und Wandel-Pille, ohne
   dass eine einzige Regel doppelt geschrieben werden muss. */
.panel, .karte--dunkel { --hoch: #35c9a8; --runter: #ff6b6e; --runter-text: #ff8b8d; }

.karte--dunkel .chart-netz { stroke: rgba(255,255,255,.1); }
.karte--dunkel .chart-marke { fill: var(--text-hell-leise); }
.karte--dunkel .chart-linie--zwei { stroke: var(--zeit-hell); }
.karte--dunkel .chart-netz--zwei  { stroke: var(--zeit-hell); }
.karte--dunkel .chart-marke--zwei { fill: var(--zeit-hell); }
.karte--dunkel .chart-punkt { stroke: var(--tief); }
.karte--dunkel .chart-lot { stroke: rgba(255,255,255,.25); }

.chart-fahne {
  position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -100%);
  background: var(--tief); color: var(--text-hell); padding: var(--raum-2) var(--raum-3);
  border-radius: var(--radius-klein); font-size: .82rem; line-height: 1.45;
  white-space: nowrap; box-shadow: var(--schatten-hoch); transition: opacity .12s ease;
  z-index: 5;
}
.chart-fahne b { font-size: .98rem; font-variant-numeric: tabular-nums; }
/* Der Zeitpunkt in der Fahne, eine Stufe zurückgenommen gegenüber dem Wert.
   Als Klasse, weil chart.js sie per innerHTML einsetzt — siehe .spanne--hoch. */
.chart-fahne-zeit { opacity: .7; }
/* Der Wert der zweiten Kurve in der Fahne — in ihrer Farbe, damit ohne
   Beschriftung klar ist, zu welcher Linie er gehört.

   ⚠ HIER STAND --zeit, UND DAS WAR GENAU VERKEHRT HERUM.
   Die Fahne ist von Haus aus DUNKEL (.chart-fahne{background:var(--tief)});
   erst innerhalb .karte--dunkel kippt sie auf Weiß. Auf einer HELLEN Karte —
   also auf kurs.php, wo der große Chart steht — landete --zeit (#7a5aa8)
   damit auf #101418: 3,40:1, deutlich unter den 4,5:1, die dieser Text
   braucht. Ich hatte „hell/dunkel" nach der KARTE gedacht statt nach dem
   Untergrund, auf dem das Element tatsächlich liegt.
   (Befund css-agent, 25.08.2026. Derselbe Denkfehler wie beim
   Legendenstrich unten.) */
.chart-fahne-zwei { color: var(--zeit-hell); font-variant-numeric: tabular-nums; }
/* Die Legende unter dem Chart. Der Strich davor ist ein Stueck der Linie
   selbst — dieselbe Farbe, dieselbe Staerke; wer ihn sieht, muss den Namen
   der Farbe nicht kennen.

   Die Legende steht als eigener Absatz, nicht als Zeile im Chart: Sie gilt
   für das ganze Bild und soll beim Umschalten des Zeitraums stehen bleiben.
   Der Absatz selbst braucht KEINE eigene Klasse — er ist ein `klein leise
   folgt--eng`, wie die Spannen-Zeile darueber, und app.js findet ihn ueber
   `[data-chart-legende]`. Eine Klasse `.chart-legende` stand kurz im Markup
   und hatte weder Regel noch Aufgabe; sie ist wieder weg, statt sich hier
   eine leere Regel zu verdienen. (Befund css-agent, 25.08.2026.) */
.chart-legende-strich {
  display: inline-block; width: 16px; height: 0;
  border-top: 1.5px solid var(--zeit);
  vertical-align: middle; margin-right: 4px;
}
/* ⚠ .panel MUSS MIT — UND DAS IST HIER NICHT KOSMETIK.

   Auf start.php steht die Legende NICHT in der dunklen Karte: Das
   <div class="karte--dunkel"> schließt direkt nach dem Chart, der Absatz
   ist sein Geschwister und liegt nur noch in .panel. Und .panel ist
   ebenfalls dunkel (background:var(--tief)). Ohne diese Paarung fiele der
   Strich auf --zeit zurück und läge mit 3,40:1 auf dunklem Grund.

   Jede andere dunkle Variante in dieser Datei ist aus genau diesem Grund
   als Paar geschrieben (.panel X, .karte--dunkel X — siehe .txt-kin,
   .mini-titel, .kennzahl span). Die neuen Regeln hatten das Muster
   gebrochen. (Befund css-agent, 25.08.2026.)

   ⚠ Der Vorbehalt des Musters gilt auch hier: Laege die Legende je in einer
   HELLEN Karte INNERHALB eines .panel, faerbte diese Regel sie hell auf hell.
   Auf kurs.php ist das nachgesehen und nicht der Fall (.karte in .bahn, kein
   .panel darueber). Wer den Absatz verschiebt, sieht hier nach. */
.panel .chart-legende-strich,
.karte--dunkel .chart-legende-strich { border-top-color: var(--zeit-hell); }
/* Die Fahne ist der umgekehrte Fall: In .karte--dunkel wird SIE weiß, also
   braucht der Text dort die DUNKLE Variante. .panel gehört hier bewusst
   NICHT dazu — ein .panel färbt die Fahne nicht um. */
.karte--dunkel .chart-fahne-zwei { color: var(--zeit); }
.chart-fahne.an { opacity: 1; }
.karte--dunkel .chart-fahne { background: #fff; color: var(--text); }

/* Sparkline im Kopf der Startseite */
.funke { width: 100%; height: 54px; display: block; overflow: visible; }
/* stroke-linecap: round, damit auch eine Reihe aus einem einzigen Punkt sichtbar
   bleibt — sonst zeichnet der Browser einen Pfad ohne Länge gar nicht. */
.funke path { fill: none; stroke: var(--hoch); stroke-width: 2;
              stroke-linejoin: round; stroke-linecap: round; }
.funke path.ab { stroke: var(--runter); }

/* ══ 6 · Seitenteile ═════════════════════════════════════════════════════ */
/* ⚠ HIER STAND EINE KURZFORM, UND SIE HAT DEN AUSSENABSTAND DER SEITE
   GELOESCHT. Die Zeile lautete:

       .teil { padding: clamp(56px, 8vw, 96px) 0 0; }

   Die Kurzform 'padding' setzt ALLE VIER Seiten. Die beiden Nullen am Ende
   haben also nicht nichts gesagt, sondern ausdruecklich 'links und rechts
   kein Abstand' — und damit das padding von .bahn ueberschrieben, obwohl
   jede Sektion beide Klassen traegt (class="bahn teil").
   Folge auf dem Handy: Auf der Startseite standen SECHS von zehn Bahnen
   bei x=0, ihre Karten, Panels und Hinweise klebten an der Bildschirmkante,
   waehrend die uebrigen vier brav bei 20 px begannen. Es sah nach einem
   diffusen Gestaltungsproblem aus und war eine einzige Zeile.
   Deshalb Langform: sie sagt nur das, was sie meint. */
.teil { padding-top: var(--raum-teil); }
/* ⚠ DIE BREITE STEHT HIER UND NIRGENDWO SONST.
   Bis zum 24.08.2026 ueberschrieben sieben Seiten sie inline mit 560, 660,
   680 und 720 px — vier Breiten fuer denselben Kopfblock, entstanden durch
   Abschreiben und nicht durch Entscheidung. Alle bis auf den schmalen Fall
   sind entfallen; der Unterschied zwischen 640 und 720 ist bei einer
   Textspalte ohnehin nur ein anderer Zeilenumbruch. */
.teil-kopf { max-width: var(--mass-karte); margin-bottom: var(--raum-7); }
/* Schmal: fuer Seiten mit einer einzigen Handlung, wo der Text nicht die
   ganze Spalte braucht (zahlen.php). */
.teil-kopf--eng { max-width: var(--mass-eng); }
.teil-kopf p { color: var(--text-leise); font-size: 1.1rem; }

/* — Aufmacher —
   Maße nachgemessen, nicht geschätzt: Mit 15ch und 4rem brach die Überschrift
   auf drei Zeilen und schob die Kurskarte — den eigentlichen Inhalt — unter
   die Falz. 20ch ergeben zwei Zeilen, und der Kurs steht ohne Scrollen da. */
/* Gleiche Falle wie bei .teil, gleiche Loesung. */
.aufmacher { padding-top: clamp(var(--raum-6), 5vw, var(--raum-8)); text-align: center; }
.aufmacher h1 { max-width: var(--mass-schlag); margin-inline: auto; font-size: clamp(2.2rem, 4.6vw, 3.5rem); }
.aufmacher-unter {
  font-size: clamp(1.05rem, 2vw, 1.32rem); color: var(--text-leise);
  max-width: var(--mass-lese-eng); margin: 0 auto var(--raum-6);
}
.aufmacher-knoepfe {
  display: flex; gap: var(--raum-3); justify-content: center; flex-wrap: wrap;
  /* Der Abstand nach oben steckte in der 'margin:0 auto 32px' der Karte
     darüber und fiel mit ihr weg. Er gehört hierher, nicht dorthin. */
  margin-top: var(--raum-6);
}

/* — Vertrauensband (Krakens „MiFID II"-Zeile) — */
.band {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-6);
  max-width: var(--mass-weit); margin: var(--raum-7) auto 0; text-align: center;
}
.band b { display: block; font-size: 1.06rem; font-weight: 700; margin-bottom: var(--raum-1); }
/* Engere Zeilen als im Fließtext: Die 1,65 des Bodys reißen die zweizeiligen
   Beschriftungen hier optisch auseinander. */
.band span { font-size: .86rem; line-height: 1.42; color: var(--text-leise); display: block; }

/* — Panel: die dunkle Kontrastfläche — */
.panel {
  background: var(--tief); color: var(--text-hell);
  border-radius: var(--radius); padding: var(--raum-innen);
  margin-top: var(--raum-teil);
}
.panel h2 { color: var(--text-hell); }
/* ⚠ DER DUNKLE KASTEN BRAUCHT DIESELBE REGEL WIE DAS PANEL.
   Ohne sie stand die Farbe inline im Markup — an einer einzigen h2, und
   damit als stille Behauptung, dass hier etwas Besonderes gilt. Es gilt
   nichts Besonderes: Auf dunklem Grund ist die Überschrift hell, immer. */
.karte--dunkel h2 { color: var(--text-hell); }

/* Abstand zwischen einer Marke und der Überschrift darunter. Er stand
   inline, war aber nie eine Einzelfallentscheidung — eine Marke steht immer
   dicht über dem, was sie benennt. */
.marke-kin + h2, .marke-tryx + h2,
.marke-kin + h3, .marke-tryx + h3 { margin-top: var(--raum-4); }
.panel .leise { color: var(--text-hell-leise); }

/* — Gegenüberstellung TRYX / KINISI — */
.gegen { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(var(--raum-4), 3vw, var(--raum-7)); align-items: stretch; }
.gegen-seite {
  background: rgba(255,255,255,.05); border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius-klein); padding: var(--raum-5);
}
.gegen-seite h3 { color: var(--text-hell); margin-bottom: var(--raum-4); }
.gegen-seite dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--raum-2) var(--raum-4); font-size: .92rem; }
.gegen-seite dt { color: var(--text-hell-leise); }
.gegen-seite dd { margin: 0; font-weight: 600; }
.gegen-mitte { display: grid; place-items: center; gap: var(--raum-3); align-content: center; }
.gegen-pfeil { width: 34px; height: 34px; color: var(--text-hell-leise); }
.gegen-mitte span { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-hell-leise); }

/* — Schrittkarten — */
.schritt-nr {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: var(--raum-4);
  border-radius: 50%; background: var(--kin-hauch); color: var(--kin-tief);
  font-weight: 700; font-size: .95rem;
}

/* — Abgrenzungskasten (kein echtes Geld) — */
.abgrenzung {
  margin-top: var(--raum-teil);
  border: 1px dashed var(--linie-stark); border-radius: var(--radius);
  padding: clamp(var(--raum-6), 4vw, var(--raum-7)); background: var(--flaeche-2);
}
.abgrenzung ul { margin: 0; padding-left: 1.2em; color: var(--text-leise); }
.abgrenzung li { margin-bottom: var(--raum-2); }

/* — Wechselstube — */
/* Der Rechner bleibt beim Lesen der Erklärungen daneben stehen; ohne das
   klaffte unter dem kürzeren Formular eine große Leere.

   ⚠ NUR IM ZWEISPALTIGEN LAYOUT, und das ist am 25.08.2026 nachgetragen
   worden. `position: sticky` galt vorher auf jeder Breite — auch dann, wenn
   .raster--2 unter 700 px auf eine Spalte zusammengeht. Dort steht der
   Rechner dann NICHT mehr neben dem Text, sondern darüber: Er klebte oben
   fest, und die Erklärungen wanderten unter ihm hindurch. Auf dem Handy sah
   das aus, als schöbe sich die Seite hinter eine Kachel.

   Ein Element, das sich anheftet, braucht Nachbarn NEBEN sich. Fehlen die,
   heftet es sich vor sie. Die Grenze ist deshalb dieselbe wie die des
   Rasters — wer eine verschiebt, verschiebt beide. */
@media (min-width: 701px) {
  .wechsel-karte { position: sticky; top: 88px; }
}
.wechsel-reihe { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--raum-4); align-items: end; }
.wechsel-tausch {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie-stark);
  background: var(--flaeche); cursor: pointer; display: grid; place-items: center;
  margin-bottom: var(--raum-2); color: var(--text-leise);
}
.wechsel-tausch:hover { border-color: var(--kin); color: var(--kin); }
.wechsel-ausgabe {
  display: block; padding: var(--raum-3) var(--raum-4); border-radius: var(--radius-klein);
  background: var(--kin-hauch); color: var(--kin-tief);
  font-size: 1.15rem; font-weight: 700;
}
.wechsel-ergebnis {
  margin-top: var(--raum-5); padding: var(--raum-4) var(--raum-5); background: var(--kin-hauch);
  border-radius: var(--radius-klein); font-size: .96rem;
}
.wechsel-ergebnis b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* — Meldung: Rückmeldung nach einer Handlung — */
.meldung {
  margin-bottom: var(--raum-5);
  margin-top: var(--raum-4); padding: var(--raum-4) var(--raum-4); border-radius: var(--radius-klein);
  background: var(--kin-hauch); color: var(--kin-tief); font-size: .94rem; font-weight: 500;
}
.meldung[hidden] { display: none; }
/* Fehlschlag. Ab Phase 3 bucht das Formular auf konto.php wirklich, und die
   sieben Fehlermeldungen trugen bis dahin dieselbe petrolfarbene Fläche wie
   die eine Erfolgsmeldung — wer nur überflog, konnte „Guthaben reicht nicht"
   für eine Bestätigung halten.
   Farbe NICHT als einziges Unterscheidungsmerkmal: Der Text sagt es ohnehin,
   und die linke Kante trägt die Aussage auch ohne Farbwahrnehmung.
   --runter-text statt --runter, weil es hier Text ist (§2). */
.meldung--fehler {
  background: #fdeced; color: var(--runter-text);
  border-left: 3px solid var(--runter);
}
/* Der Fokus landet nach dem Absenden auf der Meldung (sie ist tabindex="-1").
   Ohne sichtbaren Ring wüsste eine Tastaturnutzerin nicht, wo sie steht. */
.meldung:focus-visible { outline: 2px solid var(--kin-tief); outline-offset: 3px; }

/* — Entwurfs-Fahne: diese Vorschau ist keine Anwendung — */
.entwurfsband {
  background: var(--tief); color: var(--text-hell-leise);
  font-size: .82rem; text-align: center; padding: var(--raum-2) var(--raum-4);
}
.entwurfsband b { color: var(--text-hell); }

/* ══ 7 · Schmal ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .gegen { grid-template-columns: 1fr; }
  .gegen-mitte { flex-direction: row; padding: var(--raum-2) 0; }
  .gegen-pfeil { transform: rotate(90deg); }
}

/* ⚠ DIE KOPFZEILE KLAPPT FRÜHER ZUSAMMEN ALS DER REST — und das ist Absicht.
 *
 * Diese Regeln standen bis zum 24.08.2026 im 700-px-Block darunter, zusammen
 * mit Raster und Schriftgröße. Der Umbruch der KOPFZEILE hängt aber an der
 * Zahl der Menüpunkte, der des INHALTS an der Textbreite — zwei verschiedene
 * Gründe, also zwei Blöcke.
 *
 * Was der Zusammenlegung im Weg stand, gemessen am selben Tag: Mit vier
 * Punkten lief der Kopf bis 745 px sauber. Ein fünfter Punkt („Fragen", nach
 * Foerbs Entscheid wieder heraus und nur noch im Fuß) ließ ihn schon ab
 * 831 px überlaufen — und der Burger griff erst bei 700 px. Dazwischen liegt
 * das iPad im Hochformat (768 px): „Anmelden" abgeschnitten, waagerechter
 * Scroll über die ganze Seite.
 *
 * 780 px sind die Grenze für die heutigen VIER Punkte: 35 px Luft über den
 * gemessenen 745. Der alte Wert 700 hätte auch getragen, lag aber näher am
 * Rand als jemand vermuten würde.
 *
 * ⚠ WER EINEN MENÜPUNKT ERGÄNZT, MISST DIESE GRENZE NACH — sie ist kein
 * Geschmackswert, sondern eine Funktion der Menülänge. */
@media (max-width: 780px) {
  .menue {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0; padding: var(--raum-3);
    background: var(--flaeche); border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-hoch);
  }
  .menue.auf { display: flex; }
  .menue a { padding: var(--raum-3) var(--raum-4); border-radius: var(--radius-klein); }
  .menue-knopf { display: flex; }
  .kopf-rechts { display: none; }

  /* Hier — und nur hier — werden Konto und An-/Abmelden im Klappmenü
     sichtbar. Sie treten an die Stelle von `.kopf-rechts`, das eine Zeile
     darüber verschwindet: EIN Weg zum Konto, nicht zwei, und keiner weniger. */
  .menue-konto { display: block; }
  /* ⚠ `.menue a` mitschreiben ist PFLICHT, nicht Zierde: `.menue a` ist
     (0,1,1) und schlägt ein blankes `.menue-konto--haupt` (0,1,0) — Farbe
     und Schriftstärke kamen dann still von `.menue a` und die Hervorhebung
     fiel aus. Nachgemessen: ohne den Elternteil rgb(91,102,114)/500 statt
     --kin-tief/600. Dieselbe Falle hat am 25.08. schon einen Knopf
     unsichtbar gemacht. */
  .menue a.menue-konto--haupt { color: var(--kin-tief); font-weight: 600; }
  .menue-teiler {
    display: block; height: 1px; margin: var(--raum-2) var(--raum-4);
    background: var(--linie);
  }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; gap: var(--raum-4); }
  .fuss-raster { grid-template-columns: 1fr; gap: var(--raum-6); }
  .wechsel-reihe { grid-template-columns: 1fr; }
  .wechsel-tausch { transform: rotate(90deg); margin: 0 auto; }
  .karte { padding: var(--raum-5); }
  .bewegung { grid-template-columns: 34px 1fr auto; gap: var(--raum-3); }

  /* ⚠ DER ZEITRAUM-UMSCHALTER LIEF AUS DER SEITE HERAUS (gemessen 25.08.2026).
     Vier Knöpfe mit je 16 px Innenabstand links und rechts brauchen rund
     330 px. Auf einem 360-px-Schirm bleiben nach Seitenrand und Kartenfutter
     etwa 264 px — „90 Tage" stand also außerhalb, und weil .umschalter ein
     inline-flex OHNE Umbruch ist, wanderte die ganze Gruppe nach rechts hinaus
     statt umzubrechen. Sichtbar wurde das als waagerechter Scroll.

     Schmal teilen sich die vier Knöpfe die volle Breite zu gleichen Teilen.
     Das ist zugleich die bessere Bedienung: gleich große Ziele statt vier
     verschieden breiter, von denen der letzte am Rand klebt. */
  /* gap: 0 gewinnt die zwölf Pixel, an denen es bei 320 px Schirmbreite
     hängt — nachgerechnet: 320 minus Seitenrand (2×24) minus Kartenfutter
     (2×24) minus Umschalter-Futter (2×4) sind 216 px, also 54 je Knopf.
     „90 Tage" braucht bei .82rem rund 45 px plus Innenabstand. Es passt,
     aber ohne Reserve; deshalb bleibt der Umbruch erlaubt statt mit
     white-space: nowrap erzwungen — eine zweizeilige Beschriftung ist
     hässlicher als eine einzeilige, aber besser als eine, die aus ihrem
     Knopf herausläuft. */
  .umschalter { display: flex; width: 100%; gap: 0; }
  /* ⚠ `flex: 1 1 auto`, NICHT `1 1 0` — und der Unterschied ist auf dem Gerät
     nachgesehen worden (390 und 360 px, 25.08.2026):
     Mit `1 1 0` bekommen alle vier Knöpfe dieselbe Breite, ohne Rücksicht auf
     ihre Beschriftung. Bei 360 px sind das 64 px je Knopf — genug für „Tag",
     zu wenig für „90 Tage": Das Wort brach auf zwei Zeilen um und zog die
     ganze Pille in die Höhe.
     Mit `auto` richtet sich die Breite nach dem Wort und der übrige Platz
     wird gleichmäßig verteilt. Die Knöpfe sind dann verschieden breit —
     genau wie in der Weitansicht, wo es seit jeher so aussieht — aber keiner
     bricht um. Gleich große Ziele wären schöner; eine zweizeilige
     Beschriftung ist es weniger. */
  .umschalter button {
    flex: 1 1 auto; min-width: 0; text-align: center;
    padding: var(--raum-2) var(--raum-1); font-size: .82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ══ Bausteine aus der Inline-Style-Bereinigung ═══════════════════════════
   ⚠ DIESER BLOCK STEHT BEWUSST AM DATEIENDE.
   .panel--eng hat dieselbe Spezifitaet wie .panel — bei Gleichstand gewinnt
   die spaetere Regel. Weiter oben eingeordnet blieb margin-top:0 wirkungslos,
   und zwar lautlos: gemessen var(--raum-9) statt 0 (24.08.2026, Test-LXC im Browser).
   Wer hier etwas ergaenzt, laesst es unten und misst nach.
   Aufgenommen 24.08.2026, nachdem der css-agent nachgezählt hat: Es waren
   nicht 122 Einzelfälle, sondern zum Teil dasselbe Muster, an sechs bis
   dreizehn Stellen neu erfunden. Genau das verbietet §4 des Design-Vertrags.
   Die verbleibenden Abstandswerte bleiben vorerst inline — dafür fehlt eine
   Abstands-Skala, und die ist eine Vertragsentscheidung, kein CSS-Detail.
   ═══════════════════════════════════════════════════════════════════════ */

/* Erste Sektion einer Seite, direkt unter dem Kopf. 5x identisch. */
.bahn--einstieg { padding-top: var(--raum-7); }

/* Panel, das NICHT das erste Element der Seite ist — die umgebende Sektion
   bringt ihren Abstand schon mit. 5x identisch. */
.panel--eng { margin-top: 0; }
/* ⚠ MUSS NACH .panel--eng STEHEN, SONST IST ES WIRKUNGSLOS.
   anbinden.php trägt beide Klassen an einem Element. Beide haben
   Spezifität 0,1,0, also entscheidet die Reihenfolge in DIESER Datei —
   und .panel--eng mit margin-top:0 stand hinten. Die 24px, die ich
   gemessen hatte, kamen in Wahrheit aus der Fluss-Regel; als die auf
   :where() und damit auf Spezifität 0 gesetzt wurde, fiel der Abstand auf
   0 und der Baustein war als das sichtbar, was er die ganze Zeit war:
   tot. Ein Baustein, dessen Wirkung von einem anderen Baustein abhängt,
   muss hinter ihm stehen — das ist keine Feinheit, das ist die Regel. */
.panel--anschluss { margin-top: var(--raum-5); }

/* Die kleineren Überschriften in den .gegen-seite-Kästchen. 6x identisch. */
.h3--klein { font-size: 1rem; }

/* Die Frage-Überschriften der FAQ. Semantisch h2 (sieben gleichrangige
   Fragen), optisch kleiner — die WCAG verlangt nirgends, dass die Größe der
   Ebene folgt.
   ⚠ EIGENE KLASSE, nicht .h3--klein mit einem style="font-size" daneben: So
   stand es zuerst, und damit tat die Klasse dort NICHTS außer dem Namen nach.
   Wer später .h3--klein anpasst, hätte die drei echten h3 erwischt und keine
   einzige Frage. Eine Klasse, die überschrieben wird, ist schlimmer als keine
   — sie behauptet einen Zusammenhang, den es nicht gibt. */
.frage { font-size: 1.15rem; }

/* Hervorhebung INNERHALB gedämpften Fließtexts auf dunklem Grund. 8x — das
   Gegenstück zu .leise, das es längst gibt. */
.panel .leise strong, .panel .leise b,
.karte--dunkel .leise strong, .karte--dunkel .leise b { color: var(--text-hell); }

/* Währungsfarbe als TEXT. Vorher standen hier die Hexwerte #4fd6ba und
   #ffab4d direkt im Markup — abgeschrieben aus .karte--dunkel .marke-kin /
   .marke-tryx. Das war der einzige Ort im Projekt mit einer festen Farbe
   ohne Token und damit ein Verstoß gegen §2 („Petrol ist KINISI, Orange ist
   TRYX" — über Tokens, nicht neu erfunden). */
.txt-kin  { color: var(--kin-tief); }
.txt-tryx { color: #a85600; }          /* gedämpft: als Text auf hellem Grund */
.panel .txt-kin,  .karte--dunkel .txt-kin  { color: #4fd6ba; }
.panel .txt-tryx, .karte--dunkel .txt-tryx { color: #ffab4d; }



/* ══ ABSTAENDE AM BLOCKENDE ════════════════════════════════════════════════
   Das letzte Kind eines Kastens bekommt keinen Abstand nach unten — sonst
   sitzt unter dem letzten Absatz ein Loch, das der Kasten selbst schon als
   Innenabstand hat.

   ⚠ WARUM DAS EINE REGEL IST UND KEINE HILFSKLASSE: Bis zum 24.08.2026 stand
   an 32 Stellen style="margin-bottom:0" im Markup — immer aus demselben
   Grund, immer am selben Ort. Das ist kein Sonderfall, den man je Stelle
   entscheidet, sondern eine Eigenschaft der Bausteine .karte und .panel.
   Eine Abstands-Skala mit .mb-0 haette dasselbe Problem nur umbenannt.

   :last-child und nicht :last-of-type: Es geht um das letzte Element im
   Kasten, gleich welcher Art — Absatz, Tabelle, Formular. */
.karte > :last-child,
.panel > :last-child,
.karte--dunkel > :last-child { margin-bottom: 0; }

/* Und das Gegenstueck oben: Das erste Kind braucht keinen Abstand nach oben,
   der Kasten hat seinen Innenabstand schon. Bis zum 24.08.2026 stand dafuer
   an zehn Stellen margin:0 im Markup — dieselbe Regel, nur einzeln
   aufgeschrieben. */
.karte > :first-child,
.panel > :first-child,
.karte--dunkel > :first-child { margin-top: 0; }

/* ══ ABSTAND ZWISCHEN GESTAPELTEN KARTEN ══════════════════════════════════
   Bis zum 24.08.2026 stand er 14-mal inline, mit drei verschiedenen Werten
   (16, 20, 26 px) — fuer immer dieselbe Sache. Der haeufigste war 20; die
   anderen beiden waren Abschreibfehler mit Jahren Vorsprung.

   Als Geschwister-Regel und nicht als Klasse: Der Abstand gehoert nicht der
   Karte, sondern dem ZWISCHENRAUM. Eine Karte allein braucht ihn nicht, und
   eine Klasse muesste man an jeder zweiten Karte nicht vergessen. */
.karte + .karte { margin-top: var(--raum-5); }

/* ⚠ ABER NICHT IM RASTER — und das war ein sichtbarer Fehler, kein Feinschliff.
   (Foerbs Befund 25.08.2026: „bei den drei weissen Blöcken oben ist ‚970 KIN im
   Umlauf' nach oben verrutscht".)

   Die Regel darüber meint GESTAPELTE Karten: Der Abstand gehört dem
   Zwischenraum zweier untereinander stehender Karten. Im `.raster` stehen sie
   aber NEBENEINANDER, und dort ist `+` trotzdem erfüllt — jede Karte außer der
   ersten bekam 24 px Abstand nach OBEN. Gemessen auf register.php: Karte 1 bei
   y=313, Karten 2 und 3 bei y=337, alle drei gleich hoch. Es sah aus, als sei
   die erste hochgerutscht; tatsächlich waren die beiden anderen heruntergedrückt.

   Den Zwischenraum im Raster macht ohnehin `gap`. Hier gehört also eine Null
   hin, keine zweite Abstandsquelle.

   Mit `.raster >` und nicht mit `:where(.raster) >`: So hat die Regel eine
   höhere Spezifität und gewinnt unabhängig von ihrer Stelle in der Datei.
   Genau an dieser Reihenfolgefrage hat sich dieses Stylesheet schon zweimal
   selbst überholt (siehe die Kommentare bei .panel--eng). */
.raster > .karte + .karte { margin-top: 0; }

/* ══ DER NACHSATZ ═════════════════════════════════════════════════════════
   Der kleine Hinweis unter einem Inhalt — die Fussnote der Karte.
   Er stand 17-mal inline mit ACHT verschiedenen Abstaenden (8, 12, 14, 16,
   18, 24, 26, 28 px). Acht Werte fuer dieselbe Rolle sind keine Gestaltung,
   sondern Drift. 16 ist der Mittelwert der haeufigsten. */
.nachsatz { margin-top: var(--raum-4); }


/* ══ 8 · Bausteine aus dem Markup zurückgeholt ═══════════════════════════
   Am 24.08.2026 standen 107 style="…"-Angaben im Markup. Sie waren nicht
   „Feinschliff", sondern ein zweites, unsichtbares Stylesheet: dieselbe
   Kopfzeile sechsmal mit drei verschiedenen align-items, dieselbe
   Lesespalte siebenmal mit sieben Breiten. Jede Stelle war für sich
   plausibel — zusammen ergaben sie das Bild, das Foerb „chaotisch" nannte.
   Erst wenn keine mehr da ist, kann 'unsafe-inline' aus der CSP.
   ══════════════════════════════════════════════════════════════════════ */

/* — Kopfzeile eines Blocks: links der Gegenstand, rechts die Bedienung.
     Stand 6x inline, mit drei verschiedenen align-items und drei Gaps. — */
.kopfzeile {
  display: flex; flex-wrap: wrap; gap: var(--raum-5);
  justify-content: space-between; align-items: flex-start;
  /* Der Abstand nach unten steht HIER und nicht als Nachbarschaftsregel.
     Als ':where(.kopfzeile) + *' hatte er Spezifität 0 und verlor gegen
     jedes Bauteil mit eigenem margin — ul.bewegungen setzt margin:0, und
     die Liste klebte an der Kopfzeile. Ein Abstand, den ein Bauteil
     braucht, gehört an das Bauteil. */
  margin-bottom: var(--raum-4);
}
.kopfzeile--mitte { align-items: center; }
.kopfzeile--fuss  { align-items: flex-end; }
/* Das schmale Feld rechts (Funke, Filter) — darf schrumpfen, aber nicht
   die ganze Zeile an sich reißen. */
.kopfzeile-feld { flex: 1; min-width: 200px; max-width: var(--mass-fliese); }

/* — Reihe: gleichrangige Elemente nebeneinander, umbrechend. — */
.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3); margin-bottom: var(--raum-4); }

/* — Lesespalten. Vorher 70ch, 65ch, 62ch, 54ch, 52ch und 38ch für
     dieselbe Sache: eine Textspalte, die nicht zu breit werden soll. — */
.lesespalte      { max-width: var(--mass-lese); }
.lesespalte--eng { max-width: var(--mass-lese-eng); }
.notiz           { max-width: var(--mass-notiz); }

/* — Karten und Bahnen mit eigener Breite — */
.karte--eng    { max-width: var(--mass-eng);    margin-inline: auto; }
.karte--mittig { max-width: var(--mass-karte);  margin-inline: auto; }
.bahn--eng     { max-width: var(--mass-eng); }
.bahn--mittel  { max-width: var(--mass-mittel); padding-top: var(--raum-8); }

/* — Karte, die eine Tabelle trägt: unten enger, weil die letzte Zeile
     ihre eigene Trennlinie mitbringt. — */
.karte--tabelle { padding-bottom: var(--raum-3); }

/* — Codeblöcke. Sie müssen quer scrollen dürfen, sonst sprengt eine lange
     URL das Layout auf dem Handy. — */
/* ⚠ HIER STAND EINMAL margin:0 — UND DAS WAR EIN ÜBERTRAGUNGSFEHLER.
   Von den sieben <pre class="klein"> trug genau EINES inline margin:0; die
   anderen sechs hatten nur overflow-x:auto und lebten vom Vorgabe-Abstand
   des Browsers. Beim Zusammenfassen habe ich die Sonderregel der einen
   Stelle zur Regel für alle gemacht — danach klebten sechs Codeblöcke
   ohne jeden Abstand an ihrem Folgetext. Gemessen, nicht gesehen: sechs
   Nachbarschaften mit 0px auf anbinden.php.
   Jetzt trägt die Regel den Normalfall; die Ränder der Karte räumen die
   Kanten ab (.karte > :first-child / :last-child). */
pre.klein { overflow-x: auto; margin: var(--raum-4) 0; }

/* — Knopf über die volle Breite des Formulars — */
.knopf--breit { width: 100%; }

/* — Kleine Kapitälchen-Überschrift, 2x wortgleich inline — */
.mini-titel {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-leise); margin-bottom: var(--raum-4);
}
.karte--dunkel .mini-titel, .panel .mini-titel { color: var(--text-hell-leise); }

/* — Vorspann: der etwas größere Absatz unter einer Überschrift — */
.vorspann { font-size: 1.1rem; }

/* — Chart-Platzhalter. Die Höhe stand als padding:127px 0 bzw. 107px 0 im
     Markup — von Hand auf die Chart-Höhe abgestimmt und damit zum Bruch
     verurteilt, sobald sich die Chart-Höhe ändert. — */
.chart-platzhalter {
  margin: 0; display: grid; place-items: center; text-align: center;
  min-height: 214px;
}
.chart-platzhalter--hoch { min-height: 254px; }

/* ⚠ DIE SCHMALE FASSUNG MUSS HIER STEHEN, DIREKT DAHINTER — und dafür gibt
   es einen Grund, den die Datei schon dreimal beschreibt und der trotzdem
   wieder zugeschlagen hat: Diese beiden Regeln standen zuerst oben im
   700er-Block. Gleiche Spezifität (0,1,0), und eine Media Query hebt die
   NICHT an — bei Gleichstand gewinnt die spätere Regel, also die 214/254 px
   hier unten. Die mobilen Höhen waren damit wirkungslos, ohne dass etwas
   kaputtging: Auf dem Handy stand weiter der zu hohe Leerkasten, gegen den
   sie geschrieben waren. (Befund pruef-agent, 25.08.2026.)

   Der Platzhalter hält die Höhe frei, die der Chart später einnimmt — und die
   ist schmal ebenfalls kleiner, weil chart.js sie aus der Breite rechnet. */
@media (max-width: 700px) {
  .chart-platzhalter { min-height: 150px; }
  .chart-platzhalter--hoch { min-height: 175px; }
}

/* — Nummerierte Liste in einem Hinweis — */
.liste-nummern { margin: var(--raum-3) 0 0; padding-left: 1.3em; }

/* ── Der Fluss ──────────────────────────────────────────────────────────
   „Blöcke dürfen nicht aneinander kleben." Das ist keine Sache einzelner
   Stellen, sondern eine Regel über Nachbarschaften.

   ⚠ ALLES HIER STEHT BEWUSST IN :where() — UND ZWAR AUS EINEM GRUND, DER
   MICH HEUTE EINMAL ERWISCHT HAT. Diese Regeln hingen zuerst ohne :where()
   am Dateiende. Ihre Spezifität war damit 0,1,0 — dieselbe wie die eines
   Bausteins — und bei Gleichstand gewinnt, was WEITER UNTEN steht. Also
   gewann der Fluss:

       .panel--eng    → margin-top 0      (absichtlich 0)
       .teil > * + *  → margin-top 24px   (stand weiter unten, gewann)

   ⚠ DIESES BEISPIEL IST BEWUSST KEIN GÜLTIGES CSS — Pfeile statt
   geschweifter Klammern, kein Semikolon. Der Grund steht gleich darunter
   und ist die eigentliche Lehre dieses Blocks.

   Auf kurs.php und start.php stand .panel--eng danach 24 px tiefer als
   gewollt — still, ohne Fehler, und nur dort, wo es ein vorangehendes
   Geschwister hat. Auf drei anderen Seiten ist es das erste Kind, dort
   stimmte es weiter. Derselbe Mechanismus hob .meldung von 16 auf 24.

   :where() hat Spezifität NULL. Damit ist diese ganze Schicht das
   Schwächste in der Datei: Sie gibt den Grundrhythmus vor und JEDER
   Baustein, jede Ausnahmeklasse übersteuert sie — unabhängig davon, wo
   sie steht. Genau das soll eine Vorgabe können und ein Baustein nicht.
   Deshalb hier nie wieder einen Selektor ohne :where() eintragen.
   (Befund css-agent, an fünf Stellen im Browser nachgemessen, 24.08.2026.)

   ⚠⚠ UND JETZT DER FEHLER, DEN DIESER KOMMENTAR SELBST VERURSACHT HAT.
   Das Beispiel oben stand hier zuerst als gültiges CSS — Zeichen für
   Zeichen dasselbe wie die echte .panel--eng-Regel weiter oben in der
   Datei. Eine Stunde später suchte ein Reparatur-Script genau diesen
   String und ersetzte ALLE Vorkommen: die echte Regel (richtig) und
   dieses Beispiel (falsch). Damit stand mitten in diesem Kommentar ein
   zweiter Kommentarblock. CSS-Kommentare schachteln nicht — sein
   Abschlusszeichen beendete den äußeren Kommentar, der Resttext wurde zu
   Code, und der Selektor der Fluss-Regel darunter war ungültig. Die ganze
   Regel wurde vom Browser verworfen.
   Ein Kommentar, der einen Fehler erklärt, war der Träger des nächsten.
   Gefunden vom css-agent mit zwei unabhängigen CSS-Parsern. Im Browser
   allein war es NICHT zu sehen: Dort lag noch das alte Stylesheet, und
   meine erste Messung bestätigte deshalb eine Datei, die es nicht mehr
   gab.

   DREI REGELN DARAUS, alle drei an einem Abend gelernt:
   · In einem Kommentar steht nie Code, der in derselben Datei auch echt
     vorkommt. Ein Beispiel darf nicht kompilierbar sein.
   · Ein Script, das ersetzt, ersetzt ALLES — auch das, was nur davon
     erzählt. Wer eine Stelle meint, muss auf Eindeutigkeit bestehen.
   · Nach jeder Änderung an einer Datei, die der Browser zwischenspeichert,
     erst neu laden, dann messen. Sonst misst man den Vorgänger.

   Benachbarte Ränder fallen weiterhin zusammen und der größere gewinnt —
   die eigenen Abstände der Bausteine bleiben also unangetastet. */
:where(.teil) > * + *,
:where(.bahn--einstieg) > * + *,
:where(.bahn--mittel) > * + * { margin-top: var(--raum-5); }

/* Ein Block, der auf Fließtext folgt, braucht mehr Luft als der
   Zeilenabstand hergibt. */
:where(p, ul, ol, dl, table) + :where(.raster, .hinweis, .karte),
:where(.raster, .hinweis) + :where(.raster) { margin-top: var(--raum-5); }

/* Zwei benannte Ausnahmen für Stellen, an denen die Nachbarschaft nichts
   verrät. Mehr als zwei braucht es nicht — wer eine dritte anlegen will,
   hat meist ein Struktur- und kein Abstandsproblem. */
.folgt      { margin-top: var(--raum-5); }
.folgt--eng { margin-top: var(--raum-4); }

/* — Kleinteile, die aus dem Markup kamen — */
/* ⚠ DIESE KLASSE HIESS EINMAL .kein-abstand UND SETZTE 4px.
   Der Name versprach null, der Wert war vier — und schlimmer: Sie hatte
   beim Auslagern VIER verschiedene Originale eingesammelt (margin:0,
   2px, 4px, 6px) und alle auf denselben Wert gelegt. Für die drei
   Beschriftungen über einer Kennzahl war das richtig und gewollt
   („alle Werte etwas angleichen"). Für die zwei Stellen mit margin:0 war
   es falsch: In einer mittig ausgerichteten Kopfzeile (register.php)
   schob der Rest von 4px die Überschrift um 6px gegen ihr Filterfeld.
   Jetzt zwei Klassen für zwei Rollen — und .kein-abstand bedeutet, was es
   sagt. (Befund pruef-agent, im Browser nachgemessen, 24.08.2026.) */
.kein-abstand { margin: 0; }
.dicht-unten  { margin-bottom: var(--raum-1); }
.h2--klein    { font-size: 1.25rem; }
.h2--dicht    { margin-bottom: var(--raum-2); }
.rechts       { text-align: right; }
/* ⚠ IN EINER MEDIA-QUERY, DAMIT ES UNTEN KEINEN GLEICHSTAND GIBT.
   Am 25.08.2026 stand im 700er-Block kurzzeitig ein `.reihe--rechts
   { justify-content: stretch }` — mit derselben Spezifität (0,1,0) und
   WEITER OBEN in der Datei. Bei Gleichstand gewinnt die spätere Regel, also
   diese hier: Die neue Regel war tot, ohne dass irgendetwas kaputtging.
   Genau die Falle, die diese Datei an zwei anderen Stellen beschreibt
   (.panel--eng, der Fluss-Block) — und sie ist trotzdem wieder passiert.
   Sie ist jetzt ausgeräumt statt umschifft: Die Regel gilt nur noch dort, wo
   sie gemeint ist, nämlich im breiten Layout. Schmal nimmt der Umschalter
   ohnehin die volle Breite ein, dann bleibt nichts zu verteilen.
   Gefunden vom css-agent. */
@media (min-width: 701px) {
  .reihe--rechts { justify-content: flex-end; }
}
.kopfzeile--dicht { margin-bottom: var(--raum-2); }
.kopfzeile--luft  { margin-bottom: var(--raum-5); }
.karte--gehoben { box-shadow: var(--schatten-hoch); text-align: left; }
.zeile-folgt  { display: block; margin-top: var(--raum-2); }
.leitsatz {
  font-size: clamp(1.2rem, 3vw, 1.9rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.5;
}
.betrag-gross { font-size: 2rem; font-weight: 700; margin: var(--raum-1) 0; }

/* Letzte Nachzügler aus dem Markup (24.08.2026) */
.wandel--mini { font-size: .78rem; padding: var(--raum-1) var(--raum-2); margin-left: var(--raum-2); }
.funke--folgt { margin-top: var(--raum-4); }
/* Zahlenfeld in der Wechselstube — trug seinen Rahmen, seinen Radius UND
   seine Breite inline; drei Werte, die es längst als Token gibt. */
.feld-zahl {
  padding: var(--raum-3); width: 140px;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  font: inherit; color: inherit; background: var(--flaeche);
}
/* Die Meldung über dem Formular steht als eigener Block im Fluss. */

/* — Bank-ID als abhebbarer Kasten. Stand als sechsteiliges style-Attribut
     im Markup, direkt neben der Klasse .id-kurz, die es schon gab. Der
     Kasten ist eine Ausprägung dieser Klasse, kein Sonderfall. — */
.id-kurz--kasten {
  word-break: break-all; margin: 0;
  background: var(--flaeche); font-size: .8rem;
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
.panel .id-kurz--kasten, .karte--dunkel .id-kurz--kasten {
  background: rgba(255,255,255,.06); border-color: var(--linie-dunkel);
}

/* ── Nachtrag: was beim Zusammenfassen verloren ging ────────────────────
   Fünf Inline-Angaben waren ZWEI Entscheidungen in einer Zeile:
   'max-width:520px;margin:0 auto 32px' ist eine Breite UND ein Abstand
   nach unten. Beim Überführen in Klassen habe ich jeweils die Eigenschaft
   behalten, die der Klasse den Namen gab, und die zweite verloren.
   Fünfmal dasselbe Muster, gefunden durch Nachmessen der Abstände
   zwischen benachbarten Blöcken — im Screenshot war nur der auffälligste
   der fünf zu sehen.
   Statt fünf Einzelwerte zurückzuholen, steht der Abstand jetzt EINMAL
   als Nachbarschaftsregel: Was auf eine Kopfzeile oder eine Reihe folgt,
   hält Abstand. Das ist dieselbe Idee wie beim Fluss weiter oben. */

/* Die Knöpfe unter der Aufmacher-Karte. Ihr Abstand steckte in deren
   'margin:0 auto 32px' und fiel mit ihr weg. */

/* — Zwei Lagen, in denen ein Feld seinen Unterrand NICHT haben darf.
     Beide trugen ihn im Entwurf als style="margin:0", und beide brechen
     sichtbar, wenn er zurückkommt:
     · .wechsel-reihe richtet an der Unterkante aus (align-items:end) und
       der Tauschknopf ist mit seinen 8px genau auf randlose Felder
       kalibriert — mit Rand sitzt er 8px zu tief statt 8px höher.
     · .kopfzeile--mitte zentriert; 16px Unterrand am Feld verschieben es
       gegen die Überschrift daneben (gemessen: 6px Versatz). — */
.wechsel-reihe > .feld,
.kopfzeile-feld { margin-bottom: 0; }