/* ==========================================================================
   kreditkarte-diagramm.min.css — „Gebühren-Fieberkarte" (Kreditkarte DE), Chrome
   & Grundoptik.

   TROTZ `.min` IM NAMEN UNMINIFIZIERT ausgeliefert — wie alle Diagramm-Ansichten
   (CLAUDE.md „Dateiensatz": kein Minifikat bauen). Der Name trägt das Produkt-
   präfix zwingend, weil Festgeld den generischen `diagramm.min.css` im flachen
   Webroot belegt (E15).

   Phase 1 (Fundament, ?v=1): Bühnen-Layout, leerer Matrix-Mount, sichtbare
   No-JS-Fallback-Tabelle samt `.fieber-js`-Umschaltung, scoped Leak-Resets gegen
   die unscoped Bestands-Selektoren aus style.css, sr-only-Helfer.

   Nacharbeit Review-Agent #19 (25.07.2026, noch unter ?v=1 — die Assets sind bis
   dahin nicht per FTP live gegangen, es gibt also keinen Cache zu brechen):
   - §3 umformuliert: die `.fieber-js`-Umschaltung hängt jetzt am Erfolg des
     RENDERS statt am Erfolg des Parse (Befund B1); Regel für die Fußnotenzeile
     ergänzt, damit sie mit der Tabelle verschwindet.
   - §3 Optik für die Zusatzinfos-Fußnoten unter der Tabelle (Befund B2).
   - §5 NEU: `.fieber-intro`, `.profil-beschreibung`, `.nav-scroll-wrapper` —
     drei nutzersichtbare Elemente, deren Bestands-Optik nur im Inline-Block des
     Listen-Cores lebt (Befund H4).

   Phase 2 (Matrix, ?v=2, 25.07.2026):
   - §2 um drei Leak-Resets erweitert (`table`, `ol`, `td`) — die Matrix bringt
     erstmals genau die Elementtypen in die Bühne, für die style.css unscoped
     Regeln führt. Werte und Fundstellen stehen am jeweiligen Block.
   - §6 NEU: Legende der Fieberskala (Hülle vom Core, Kästchen von der Engine).
   - §7 NEU: waagerechter Scroller mit Randabschattung und Fokusring.
   - §8 NEU: Matrixlayout, Spaltenköpfe, Zellen, sticky erste Spalte,
     Sonderzustände samt Schraffur, Aktions-Vollfläche.
   - §9 NEU: Kontrast-Hell-Zweig für alle Elemente aus §6 bis §8.
   - §10 NEU: `prefers-reduced-motion`-Zweig.

   Nacharbeit Phase 2 (25.07.2026, weiter unter ?v=2 — die Assets sind bis dahin
   nicht per FTP live gegangen, es gibt also keinen Cache zu brechen):
   - §3: `.fieber-js .fieber-fallback-fussnoten { display: none }` ERSATZLOS
     ENTFERNT (E23). Der Fußnotenapparat bleibt mit aktivem JS stehen, sonst
     zeigte jeder Marker der Matrix ins Nichts. Dafür eine eigene Anbindung
     unter der Matrix samt sichtbarer Überschrift.
   - §6: `.fieber-legende-marker` — die Auflösung der vier Fußnoten-Zeichen.
   - §9: Hell-Pendants für beide Ergänzungen.

   Nacharbeit 2 (25.07.2026, weiter unter ?v=2 — nichts ist live):
   - §7 `.fieber-scroller { position: relative }` — behebt, dass die GANZE SEITE
     bei 640 und 375 waagerecht mitscrollte. Die sr-only-Spans der Marker sind
     absolut positioniert; ohne diese Zeile war ihr Bezugsrahmen der Mount statt
     des Scrollers, und sein `overflow-x` klemmte sie nicht. Keine Kosmetik.
   - §8 `.fieber-kopf-label`/`-sub` bekommen `hyphens: auto` UND
     `overflow-wrap: break-word`. Vorher stand hier GAR KEINE Umbruchregel; bei
     `table-layout: fixed` lief jedes lange Wort ohne Leerzeichen zwangsläufig in
     die Nachbarspalte. Die Engine setzt zusätzlich weiche Trennzeichen.
   - §8 Marker auf `0.85em` (vorher 0.72em — gemessen 4px Tintenhöhe, ein
     Staubkorn) und die neutrale Zellfläche von `rgba(255,255,255,0.10)` auf
     `rgba(0,0,0,0.12)`: die aufhellende Fassung drückte den weissen Zelltext auf
     4,34:1, also unter die Schwelle. Beides in `marker-opazitaet.mjs` belegt.
   - §6 `.fieber-legende-marker-liste` als zweispaltiges Grid — das Markup rendert
     der Core, und seine <dd> sind seit dem B1-Umbau zugleich die LAUFZEITQUELLE
     der Screenreader-Auflösung. Eine Änderung an diesem Block ist nie harmlos.

   Phase 3 (Reglerleiste, ?v=3, 30.07.2026):
   - §5a NEU: Reglerleiste (drei `type="range"`), Wertanzeigen, Hinweistext und
     die `aria-live`-Ergebniszeile. WARUM „5a" UND KEINE NUMMER AM ENDE: §9
     (Kontrast-Hell) und §10 (reduced-motion) sind Quer-Abschnitte und müssen
     die Enden der Datei bleiben; die Nummern §6 bis §10 sind quer durch Core,
     Engine, Namens-Verträge und Berichte referenziert. Ein Durchnummerieren
     hätte jede dieser Fundstellen still falsch gemacht — für eine Kosmetik.
   - §5a enthält zwei Leak-Resets, die §2 NICHT abdeckt: die Leiste steht
     außerhalb von `#fieber-buehne`, und `style.css:20` trifft mit
     `input,textarea,select{border:1px solid #006ab5;margin:4px 2px;
     padding:.4em}` jedes `<input type="range">` der Seite.
   - §4: der sr-only-Helfer bekommt `padding: 0` gegen `#vergleich p` — er
     trägt ab dieser Phase erstmals ein `<p>`.
   - §9 um die Hell-Pendants der neuen Klassen ergänzt.
   - §10 UNVERÄNDERT, mit Absicht: §5a bringt keine eigene Bewegung mit, es
     gibt also kein Pendant zu bilden. Der Farbwechsel der Zellen bei
     Reglerbewegung liegt in §8 und ist dort seit Phase 2 abgedeckt.
   - ⚠ ERSTER BUMP, DER EINEN ECHTEN CACHE BRICHT: v=2 steht seit dem
     Nachupload live (gemessen 30.07.2026). Bei v=1 und v=2 war nichts live.

   Nacharbeit Phase 3 (30.07.2026, weiter unter ?v=3 — v=3 ist gesetzt, aber
   noch nicht per FTP ausgeliefert; es gibt also nichts zu brechen):
   - §5a `min-height` der Reglerspur von `2.75rem` auf `3rem` (Review H5). 44px
     waren gehalten, aber ohne Reserve: `rem` hängt an der Wurzelschrift, die
     der Nutzer verkleinern kann. Details an der Regel.
   - §5a Wertspalte im Zweig ≤38em von `6em` auf `7em` (VRT H1). `EUR 10.000`
     ist unter `Roboto` — also auf Android — breiter als die Spalte trug und
     ragte auf die Reglerspur. Messwerte und die Begründung für 7em statt der
     vorgeschlagenen 6.6em stehen an der Regel.
   - KEINE neue Klasse: die zweite Live-Region der Nacharbeit
     (`#fieber-sortier-ansage`, Review H4) trägt `.fieber-visually-hidden` aus
     §4 und braucht deshalb keine eigene Optik. Sie ist zugleich der Grund,
     warum die `padding`-Durchsetzung in §4 seit dieser Phase nicht nur ein
     Einzelfall ist — es sind jetzt ZWEI `<p>` mit dieser Klasse.

   Phase 4 (Detail-Seitenpanel und Bottom-Sheet, ?v=4, 31.07.2026):
   - §8a NEU zwischen §8 und §9, dieselbe „a"-Vergabe und derselbe Grund wie bei
     §5a: §9 und §10 sind Quer-Abschnitte und müssen die Enden der Datei
     bleiben. Enthält Overlay, Panel, Kopf mit Schließen-Knopf und Bild, Körper,
     Kennzahlen, Gruppen, Zeilen, Zusatzinfos, Bewertung, CTA, Scroll-Sperre und
     den Sheet-Zweig ≤48em.
   - §8a bringt einen EIGENEN Satz Leak-Resets mit, auf die Panel-Wurzel
     gescopt. Die Resets aus §2 sind auf `.fieber-buehne` gescopt und erreichen
     das Panel nicht — es steht außerhalb der Bühne und außerhalb von
     `#vergleich`. Der Satz unterscheidet sich in beide Richtungen: die drei
     `aside`-Regeln entfallen (E-B: `<div role="dialog">`, kein `<aside>`),
     dafür kommt der GLOBALE `p`-Selektor (`style.css:9`) hinzu, den innerhalb
     von `#vergleich` bisher die `#vergleich p`-Resets abfingen.
   - §2: der Satz, die aside-/h3-/.icon-Resets stünden „vorbeugend für Phase 4
     (Detail-Panel)", ist ERSATZLOS FALSCH GEWESEN und korrigiert. Er hätte den
     nächsten Leser glauben lassen, das Panel sei bereits abgeschirmt.
   - §8: der Kommentar über `.fieber-karte[disabled]` behauptete, das Detailpanel
     komme „in Phase 4" — nachgezogen. Die Regel bleibt, sie deckt jetzt das
     Zeitfenster bis zur geglückten Aktivierung ab.
   - §9 um die Hell-Pendants ergänzt. Sie tragen als EINZIGE in diesem Abschnitt
     KEIN `#vergleich.kontrast-hell`, sondern die Klasse `.fieber-hell` auf
     Overlay und Panel: der Bestands-Schalter sitzt auf `#vergleich` und
     erreicht ein Element außerhalb davon nicht.
   - §10 erstmals seit Phase 2 ERWEITERT: §8a bringt zwei Bewegungsachsen mit.
     Es steht dort nicht nur `transition: none`, sondern je Zustand und je
     Breakpoint ein ausdrücklicher Endzustand — die Ruhelage des geschlossenen
     Panels ist eine `transform` AUSSERHALB des Bildes, und die bloße Wegnahme
     der Dauer ließe sie stehen (Girokonto-Lehre).
   - ⚠ ZWEITER BUMP AUF EINEN LIVE-CACHE, ABER NUR AUF DEM PAPIER: live steht
     weiterhin v=2 (Phase 3 ist gesetzt, aber nie per FTP ausgeliefert). Wer v=4
     hochlädt, bricht also den Sprung v=2 → v=4; die drei Referenzen (CSS, JS,
     Core) müssen dabei zusammen gehen.
   - §8a Kartenvorschau-Bild auf die MASSE DER LISTE verankert (Nachtrag zum
     Datenvertrag, 31.07.2026): 6.25rem × 3.875rem, im Sheet 4.625rem ×
     2.9375rem — das sind die 100×62 bzw. 74×47 der Liste, in `rem`
     umgerechnet. `object-fit: contain` macht die realen Bildmaße egal. KEIN
     `onerror`-Handler und KEIN CSS-Ersatzbild: die Liste hat auch keines, ein
     Abweichen wäre Drift.
   - ⚠ DIESE GRENZE IST MIT CT-0188 (13.09.2026) GEFALLEN, und zwar nicht hier,
     sondern im Core: er schließt `#content` und `#nonFooter` jetzt selbst. Das Panel
     liegt damit auf body-Ebene und behält seinen Viewport-Bezug auch bei offenem
     Mobilmenü (`#offen:target`). Historie im Kopf von §8a.

   Phase 5 (Bedienleiste, Geister-Prinzip, ?v=5, 31.07.2026):
   - §5b NEU zwischen §5 und §5a, dieselbe Buchstaben-Vergabe und derselbe
     Grund wie bei §5a und §8a: §9 und §10 sind Quer-Abschnitte und müssen die
     Enden der Datei bleiben. Enthält Profil-Strip, Kartenumsatz-Toggle,
     „weitere Filter"-Button samt Panel, Reset-Zeile und Trefferzähler.
   - WAS §5b NICHT ENTHÄLT, IST DER EIGENTLICHE BEFUND DER PHASE: der weitaus
     grösste Teil der Leisten-Optik kommt aus `vergleich.min.css` und braucht
     hier keine Zeile — Kontrast-Schalter, Pill-Geometrie, Segment-Control,
     Floating-Button samt Ecken und Icon-Reset, Panel-Innenteile, Amber-
     Hinweiszeile. Voraussetzung ist allein der Vorfahren-Vertrag: `#vergleich`
     für den Kontrast-Schalter, `.vergleich-dashboard` für alles andere. Beides
     steht im Core. §5b baut deshalb genau drei Sorten Regeln: (a) was im
     Bestand nur im INLINE-<style>-BLOCK der beiden Vorbild-Cores lebt und den
     wir nicht haben, (b) was in `tabelle.min.css` liegt, die wir nicht laden,
     (c) Kontrast- und Fokus-Härtungen, die beide Vorbilder ebenfalls bräuchten.
   - §2: der Satz, die aside-/h3-/.icon-Resets stünden „vorbeugend für Phase 5
     (Bedienleiste)", ist ERSATZLOS FALSCH GEWESEN und korrigiert — dieselbe
     Fehlerklasse, die Phase 4 für sich selbst schon berichtigt hat.
   - §5: der Profil-Strip bekommt die beiden fehlenden Maskenzustände
     (Mid-Scroll und „passt vollständig"). Damit ist die offene Auflage aus
     Phase 1 geschlossen. ⚠ Der Mid-Scroll-Zustand SETZT VORAUS, dass die
     Engine `scroll-start`/`scroll-end` pflegt — ohne sie liegt auf einem
     Strip, der gar nicht scrollt, ein Dauerschleier. Begründung an der Regel.
   - §8: `.fieber-zeile-inaktiv` verliert die `opacity: 0.55` aus Phase 2 und
     bekommt den neutralen Zellstil plus einen GEMESSENEN Grauton
     (Anwender-Entscheidung 31.07.2026). Die Datei argumentierte an drei
     Stellen mit Messung gegen jede `opacity`-Dämpfung und trug an dieser
     einen Stelle trotzdem eine — das ist bereinigt.
   - §8/§8a/§5a/§7: alle acht Fokusring-Stellen auf ein Bodenmass von 2 CSS-px
     gehoben (WCAG 2.4.13). Die achte Stelle (`.fieber-panel-koerper a`) hatte
     im Standardmodus überhaupt keinen eigenen Ring; ihr Hell-Pendant stand
     seit Phase 4 wirkungslos in §9.
   - §9 um die Hell-Pendants der Leiste ergänzt: sie kommen im Bestand
     vollständig aus den Core-Inline-Blöcken und fehlten hier deshalb
     ausnahmslos — im Hell-Modus wäre die halbe Leiste weiss auf weiss gewesen.
   - §10 um den Endzustand des Filter-Panels ergänzt (zweite Bewegungsachse
     nach dem Detail-Panel), wieder als ausdrücklicher Endzustand je Zustand
     und nicht als blosses `transition: none`.
   - Nachträge aus den Berichten von Core und Engine, noch unter ?v=5:
     * §5b: drei Regeln für die Glyphe `icon-chart-bar` des vierten
       `#hilfe`-Eintrags (seit CT-0332 vier Regeln für das Inline-SVG
       `fk-view-icon` — dieselbe Begründung, ein anderer Inhalt). style.css gibt jedem `.icon` 3em und `absolute` und
       nimmt das nur für die drei Bestands-Glyphen NAMENTLICH zurück — an DREI
       Stellen, nicht an zweien, wie der Auftrag annahm (:220 ohne Media,
       :~467 im 88em-Band, :514 im 72em-Band). Ohne die mittlere stünde die
       neue Glyphe zwischen 72em und 88em ein Drittel grösser als ihre
       Nachbarn. Gemessen auf sechs Breiten: identisch in Grösse UND Position.
     * §5b/§9/§10: der Offen-Zustand des Filter-Overlays heisst
       `fieber-filter-offen`, NICHT `open`. Der Namens-Vertrag hat den Namen
       vergessen, die Engine hat ihn vergeben. Ein abweichender Name hier
       hätte nicht die Bedienung gekostet, sondern nur die Sichtbarkeit — das
       Panel wäre funktionierend, aber `display: none` geblieben.
     * §5b: der „weitere Filter"-Knopf zeigt seinen Offen-Zustand über
       `aria-expanded="true"`. Die geteilte Datei kennt dafür nur `.open`, das
       im Bestand aus dem Inline-Block kommt; unsere Engine führt den Zustand
       am Attribut.
     * §9: das Hell-Pendant für `.filter-hinweis-icon` ist ERSATZLOS
       ENTFERNT — das Element existiert im Markup nicht (die Klasse
       `.icon-filter` ist nirgends definiert, und die Fontello-Schrift des
       Servers hat keine Glyphe dafür). Der Messwert bleibt als Kommentar
       stehen, die Regel nicht.
   - LIVE STEHT v=4 — am 31.07.2026 gegen den Server gemessen (Hauptthread,
     Befund N1 des Phase-5-Reviews): der ausgelieferte Core referenziert
     `kreditkarte-diagramm.min.css?v=4` und `kreditkarte-diagramm-race.js?v=4`,
     alle drei Wrapper antworten mit HTTP 200. Die frühere Angabe an dieser
     Stelle („live steht weiterhin v=2, Phase 3 und 4 nie ausgeliefert") war
     falsch und hat drei Quellen widersprechen lassen; Phase 3 UND Phase 4 sind
     ausgeliefert. Der Sprung ist also v=4 → v=5, ein Schritt, kein Sprung.
     ⚠ NICHT AUS EINER DOKU ABSCHREIBEN, SONDERN MESSEN: drei Quellen nannten
     hier drei verschiedene Live-Stände (v=2 hier, v=3 in CLAUDE.md, v=4 in der
     Phasen-Doku). Eine einzige curl-Abfrage hat es entschieden.
     Die drei Referenzen (CSS, JS, Core) müssen beim Bump zusammen gehen.

   Nacharbeit Live-Abnahme Phase 5 (?v=6, 31.07.2026) — DREI BEFUNDE, EIN
   UMLAUF, ALLE DREI VON DERSELBEN ART: eine Eigenschaft aus einer Datei, die
   diese Ansicht nicht lädt, greift auf ein Element, das wir übernommen haben.
   Zwei davon kommen aus `style.css` und waren im Hell-Modus blockierend, der
   dritte fehlte aus `tabelle.min.css`.
   - §8a: die `color: inherit`-Reparatur der Auszeichnungs-Tags bekommt einen
     ZWEITEN SCOPE `.fieber-fallback-fussnoten`. Elf `<strong>` mit den
     Bank-Markennamen im Fußnotenapparat standen im Hell-Modus bei **1,15:1**
     (nachher 11,69:1), im Standardmodus bei 4,64:1 (nachher 5,32:1). Es ist
     wörtlich derselbe Defekt, den der Kopf jener Regel seit Phase 4 als
     „VRT-B2, blockierend" beschreibt — nur an einer zweiten Fundstelle. Der
     Scope ist bewusst NICHT `.fieber-dashboard`: das Tag `i` der Allowlist ist
     hier die Icon-Schrift, und ein `inherit` mit (0,1,1) hätte
     `i.icon.icon-sliders` im Standardmodus schwarz gefärbt (gemessen).
   - §9 NEU: Hell-Pendant für die Anker außerhalb des Panels. Die beiden
     Fußzeilen-Links standen bei **1,24:1** (nachher 5,79:1) — wörtlich der
     Wert, den `phase-4-belege\kontrast-eichwerte.json` als „der Wert VOR der
     Reparatur" führt. Ihr Fokusring, im Befund nicht enthalten und beim Bauen
     nachgemessen, stand bei **1,59:1** (nachher 5,15:1).
   - §5b: `.eingrenzungsfilter-hint` bekommt `line-height: 1.4`. Die Zeile
     steht ausschließlich in `tabelle.min.css`; ohne sie 26,112 px statt
     14,56 px, das Panel 11,57 px höher als in der Tabelle.
   - LEHRE, DIE DIESE DREI VERBINDET: der lokale Lauf der Phase 5 hat den
     Hell-Modus an ELF AUSGEWÄHLTEN STELLEN gemessen und „alle über der
     Schwelle" gemeldet, während zwei Fundorte außerhalb der Auswahl bei 1,15
     und 1,24 standen. Gemessen wird ab jetzt der GANZE Teilbaum `#vergleich`
     in beiden Modi, und die Frage „was fehlt uns aus einer Datei, die wir
     nicht laden" wird mechanisch gestellt, nicht durch Lesen. Beide Werkzeuge
     liegen in `memory\berichte\phase-5-fix-v6-belege\`.

   Phase 6 (Politur aus dem Live-Bild, ?v=7, 6.8.2026) — vier Befunde des
   Politur-Spähers (`memory\berichte\phase-6-politur.md`), alle vier hier
   NACHGEMESSEN statt übernommen, einer davon korrigiert:
   - §8 A1, DEFEKT: der Zweig <=38em trug ZWEI wirkungslose Sonderregeln, nicht
     eine. Neben der bekannten Breite der Kartenspalte (`width: 9.5em` gegen
     `.fieber-kopf`) verpuffte auch das `padding: 0` der Kartenzelle gegen die
     `padding`-Regel desselben Blocks — die Zelle trug 4,144/4,736 px UND der
     Knopf darin noch einmal dieselben Werte. Der zweite Fall stand in keinem
     Bericht; er fiel beim Nachmessen der ersten auf. Beide über zusammengesetzte
     Selektoren bzw. `:not()` gelöst, nicht über die Reihenfolge. Tabellenhöhe
     bei 375: 2192,7 -> 1847,3 px. Begründung und alle Messwerte an der Regel.
   - §5 B5: `.fieber-intro` bekam bei <=52em `padding-right: 3.5rem`. Der
     Kontrast-Knopf lag `absolute` IM Kasten des Intro-Absatzes; bei 375 lief
     die längste Zeile 30,2 px unter ihn, bei 640 blieben 7,7 px. Die Regel lief
     über `.fieber-intro` und `#vergleich`, NICHT über die Bestandsklassen
     `.kontrast-zeile`/`.kontrast-toggle` — an ihnen hängen Liste und Tabelle.
     ⛔ **DIESE REGEL EXISTIERT SEIT DEM 06.08.2026 NICHT MEHR** (E41 hat den
     Intro-Absatz unter das Auswahlband verschoben, der Knopf steht jetzt 281 px
     darüber). Der Eintrag bleibt als Historie stehen, beschreibt aber KEINEN
     aktuellen Zustand — Grabstein mit allen Messwerten am Platz der Regel in §5.
   - §5a B3, ZWEI EINGRIFFE: `#fieber-ergebnis` reserviert mit
     `min-height: 1.45em` EINE Zeile, UND die Regel
     `#vergleich .fieber-ergebnis:empty { margin: 0 }` ist ENTFERNT (E36,
     Anwender-Entscheid 06.08.2026, nach dem Messlauf erneut bestätigt).
     ⚠ DIE ARBEIT LEISTET DAS `min-height`: Sprung 56,3 -> rund 20,5 px. Der
     Regel-Wegfall bringt darüber hinaus nur **0,13 px** (bei 375: 2,69 px) —
     zentral gemessen 6.8.2026 durch Wiedereinsetzen der Regel im Browser
     (20,41 px ohne, 20,53 px mit). Eine frühere Fassung nannte hier „rund
     4,9 px"; das war ein Rechenfehler in der Vorhersage, kein Messwert.
     ⚠ UND ER KOSTET NICHTS. Eine frühere Fassung wies hier „15,49 px
     zusätzlicher Leerraum beim Laden" als Preis aus — den gibt es nicht. Der
     VRT hat es am 6.8.2026 zerlegt: der Leerraum stammt aus dem `margin-top`
     der Bühne (15,36 px) und steht in BEIDEN Zuständen; die beiden Abstände
     KOLLABIEREN, weil `#fieber-ergebnis` und `.fieber-buehne` benachbarte
     Geschwister sind (dazwischen nur ein `position: absolute` sr-only-Element,
     das den Kollaps nicht bricht). 15,488 − 15,36 = 0,128 — genau die
     gemessenen 0,13 px. Ein Restsprung bleibt (der Satz bricht je Viewport auf
     zwei bis vier Zeilen um). `display: none` bleibt an dieser Live-Region
     ausgeschlossen.
   - §8 B6: `.fieber-karte` bekommt `min-height: 2.75rem`. Der flachste
     Kartenknopf stand bei 43,4 px. Nicht über `padding` gelöst — das hätte alle
     zwanzig Zeilen verlängert; so wachsen zwei Zeilen um 0,6 px.
   - ⛔ B2 (senkrecht sticky Spaltenkopf) IST NICHT GEBAUT, UND `top: 0` WÄRE
     DAFÜR DIE FALSCHE ANTWORT GEWESEN. `.fieber-scroller` trägt `overflow-x:
     auto` und `overflow-y: hidden` (§7) und ist damit in BEIDEN Achsen ein
     Scroll-Container. Ein `sticky`-Element bezieht sich auf den nächsten
     Scrollport — das ist hier der Scroller, und dessen senkrechter Scrollport
     bewegt sich nie (`clientHeight == scrollHeight`, live 1619 == 1619 bei
     1200; 2193 == 2193 bei 375). Live gegengeprüft: mit `top: 0` auf
     `.fieber-kopf` und 1919 px Fensterscroll stand die Kopfzeile bei
     `getBoundingClientRect().top = -800` — sie ist mit der Tabelle
     ausgewandert, `scrollTop` des Scrollers blieb 0. Eine Deklaration, die
     nachweislich nichts tut, wäre schlimmer als keine: sie liesse den Befund
     als erledigt aussehen. Der einzige Weg dorthin ist eine gedeckelte Höhe des
     Scrollers (`max-height` + `overflow-y: auto`), also ein zweiter senkrechter
     Scrollbereich in der Seite — eine Gestaltungsentscheidung, die E10 nie
     getroffen hat. Liegt als Vorschlag im Phase-6-Bericht.
   - Der Kopf dieser Datei nannte bis hierher „Cache-Bust: ?v=5", während live
     v=6 stand. Dieselbe Falle wie in Phase 5 (drei Quellen, drei Stände):
     gemessen wird, nicht abgeschrieben. Die drei Referenzen (CSS, JS, Core)
     setzt beim Bump auf v=7 der Hauptthread, im Lockstep.

   Namespace: ALLE EIGENEN Klassen tragen das Präfix `.fieber-`. Daneben stehen
   BESTANDSKLASSEN OHNE Präfix, und zwar immer aus demselben Grund: an ihnen
   hängt geteilte Optik, die wir nicht nachbauen wollen. Bis Phase 4 waren das
   nur die beiden Scroll-Zustandsklassen `scroll-start`/`scroll-end` aus dem
   Listen-Core (`initScrollNav`) sowie `.profil-beschreibung` und
   `.nav-scroll-wrapper` in §5. Mit §5b kommt die gesamte Vokabel der
   Bedienleiste hinzu (`.laufzeit-nav`, `.laufzeit-pill`, `.filter-section`,
   `.sub-auswahl`, `.anpassen-host`, `.toggle-btn`, `.anpassen-overlay`,
   `.anpassen-backdrop`, `.anpassen-panel`, `.panel-close-btn`,
   `.filter-panel-titel`, `.filter-column-title`, `.eingrenzungsfilter*`,
   `.filter-checkbox`, `.aktive-filter-hinweis`, `.filter-reset-btn`,
   `.result-count`, `#hilfe`) — ein eigenes Namenspaar hätte hier die geteilte
   Optik abgeschnitten, statt sie zu erben. Die IDs bleiben davon unberührt:
   sie stehen ausnahmslos im `fieber-`Namensraum (Namens-Vertrag §3.3).

   Farbregime: Zell- und Skalenfarben der Fieberskala stehen NICHT hier — sie
   kommen als Inline-Attribute aus der Engine-Palette (E10). In dieser Datei
   steht deshalb KEINE Fieberfarbe. Die Farben, die hier stehen, sind
   ausschließlich Chrome: Seitengrund, Kopfleiste, sticky Spalte, Zellrahmen,
   Fokusring — sämtlich Werte, die der Bestand ohnehin führt (style.css:3 und
   :40, Token-Sätze `.vergleich-dashboard` und `.kontrast-hell
   .vergleich-dashboard` aus vergleich.min.css).

   DER ZELLRAHMEN IST KEINE KOSMETIK (Namens-Vertrag §4, zweite benannte
   Palettengrenze): mehrere Skalenstufen heben sich allein über ihre Füllung
   nicht vom Seitengrund ab — im Standardmodus die dunklen Stufen 4 und 5 gegen
   das Blau #0070C0, im Hell-Modus die hellen Stufen 1, 2 und 7 gegen Weiß.
   Deshalb trägt der Rahmen in JEDEM Modus die Farbe, die gegen DEN GRUND DIESES
   MODUS steht: hell auf blauem Grund, dunkel auf weißem Grund. Damit ist die
   Zellgrenze immer sichtbar, unabhängig davon, welche Stufe die Zelle füllt.

   Einheiten: em/rem, kein px (Projektkonvention). Hairlines als 0.0625em nach
   dem Tagesgeld-Vorbild (`tagesgeld-diagramm.min.css` .skyline-fallback), nicht
   als 1px wie im Brokerage-Vorbild — damit die Datei den px-Gate-Grep sauber
   passiert. Kein `!important`; die geteilten `vergleich.min.css` / `style.css`
   werden ausschließlich per Spezifizität überschrieben, nie editiert. Auf den
   FLIP-Properties (`transform`, `transition` der Zeilen) steht ohnehin keines —
   die Engine setzt und LÖST beide inline, ein `!important` machte das Lösen
   wirkungslos.

   POLITUR-RUNDE, ERSTER DURCHGANG (06.08.2026, nach Phase 6, ?v=8, LIVE) —
   E41 bis E46. In DIESER Datei schlagen davon zwei durch:

   - E41 (Intro-Absatz wandert unter das Auswahlband) macht den PHASE-6-FIX B5
     GEGENSTANDSLOS: `#vergleich .fieber-intro { padding-right: 3.5rem }` im
     52em-Zweig von §5 ist ERSATZLOS ENTFALLEN. Der Kontrast-Knopf hängt
     `absolute` an `.kontrast-zeile` VOR dem Dashboard und steht nach dem Umzug
     281 px über dem Absatz; ein Gegentest über alle Elemente in `#vergleich`
     findet bei 375 kein einziges, das den Knopf überlappt. Die Regel hätte
     56 px für einen Knopf reserviert, der nicht mehr da ist — isoliert
     nachgemessen kostete sie bei 375 **21,51 px** Absatzhöhe. Der ganze
     Begründungsblock bleibt als Grabstein an Ort und Stelle stehen: wer den
     Absatz je wieder nach oben zieht, braucht die Regel sofort wieder.

   - E43, der Fußnotenapparat trägt jetzt die Optik der TABELLENANSICHT
     (`.tabelle-fussnoten`). Drei Eingriffe, alle in §3: die ::before-Überschrift
     „Anmerkungen der Anbieter" ist ERSATZLOS entfallen (das `aria-label` im Core
     bleibt), die Anbindung wechselt von Hairline-darüber auf getönte Fläche mit
     Radius, und die Maße steigen auf Tabellenniveau (0.85rem statt 0.78rem,
     line-height 1.5, hängender Einzug 1.5em / -1.5em, `li strong` in 600).
     Sämtliche Werte live an `vergleich-kreditkarte-niedriger-kartenpreis.php`
     gemessen (1200, 06.08.2026), nicht aus dem Quelltext abgeschrieben.
     ⚠ NEU HINZUGEKOMMEN ist das Kontrast-Hell-Pendant für `li strong`: der
     Dunkelmodus setzt dort reines Weiß, ohne Pendant stünden die Markennamen im
     Hell-Modus weiß auf weißem Grund.

   - E42 berührt diese Datei NICHT, wirkt aber auf sie: die Reglerleiste steht
     jetzt unter der Matrix. Das `min-height: 1.45em` auf `#fieber-ergebnis` (§5a,
     Phase-6-Befund B3) BLEIBT deshalb stehen, obwohl der Layoutsprung damit
     strukturell entschärft ist — es hält die Reglerleiste selbst ruhig und ist
     die Reserve für den Fall, dass die Leiste je wieder nach oben wandert.
     Wer es entfernt, misst bitte vorher beide Zustände, statt zu schließen.

   - E44 (tz-Spalte entfällt) und E45 (Aktionsspalte sortierbar) sind Engine- und
     Core-Arbeit. Diese Datei enthält KEINE Regel, die auf eine Spaltenzahl, ein
     `nth-child` oder einen Spalten-Key zielt — sie ist spaltenagnostisch und
     brauchte deshalb keinen Eingriff. Das ist geprüft, nicht angenommen.

   ZWEITER DURCHGANG DERSELBEN RUNDE (06.08.2026, ?v=9) — E47 bis E49, drei
   Anwender-Entscheide. In DIESER Datei schlagen davon zwei durch, in §6 und §5a
   (E47 ist reine Engine-Arbeit am Sortierschlüssel der Aktions-Spalte):

   - E48: `.fieber-legende-marker` ist aus der Legende heraus- und unter die
     Matrix gewandert. `flex-basis: 100%` ist entfallen (ausserhalb des
     Flexcontainers wirkungslos), dafuer traegt der Block eine EIGENE
     `.fieber-js`-Bindung — ohne sie stuende der Marker-Schluessel auch ohne JS
     da und erklaerte vier Zeichen, die die Fallback-Tabelle gar nicht setzt.
   - E49: `.fieber-regler { margin-top: 3em }` (vorher 0). Gemessen 46,08 px,
     kein Margin-Collapse.

   ⚠ CACHE-BUST: ?v=9, UND DAS IST EIN ECHTER BUMP, KEIN WEITERFUEHREN.
   Der erste Durchgang (E41–E46) stand unter ?v=8 und ist **bereits
   ausgeliefert** — am 06.08.2026 per curl gegen den Server gemessen: die
   Live-Engine unter `?v=8` fuehrt `key: 'tz'` 0-mal (Runde 1 ist live), aber
   auch `wert: -1` und `findeMarkerListe` 0-mal (Runde 2 ist es nicht).
   Lokal stand zu diesem Zeitpunkt ebenfalls ?v=8, mit ANDEREM Inhalt.
   Ein Upload ohne Bump waere bei jedem Besucher mit gecachtem ?v=8 gar nicht
   angekommen. Gefunden hat das der Erweiterungslauf des Pruefskripts, nicht der
   Bau — und die Lockstep-Pruefungen 0b/0c/0d konnten es KONSTRUKTIONSBEDINGT
   nicht sehen: sie vergleichen Versionsnummern, nicht Inhalte.
   ⚠ MERKSATZ: „war noch nicht live" ist eine Annahme, keine Messung. Vor jedem
   Weiterbauen unter derselben Versionsnummer den Auslieferungsstand abrufen.

   CT-0082 (26.08.2026, ?v=13) — RANDMASKE DES KARTENUMSATZ-STRIPS.
   §5 nimmt den neuen `.umsatz-scroll-wrapper` in DIESELBEN vier Selektorlisten
   auf, die der Profil-Strip schon trägt, und gibt ihm die Pflichtzeile
   `width: 100%`. Liste und Tabelle haben diese Maske seit CT-0008
   (23.08.2026); die Fieberkarte war die letzte der drei Ansichten ohne sie.

   ⚠ DAS TICKET NANNTE ZWEI FEHLENDE MASKEN, ES WAR NUR EINE. Sein Befund
   „der Core enthält null `mask-image`-Vorkommen" stimmt wörtlich, trägt aber
   nicht: die Fieberkarte hat als einzige der drei Ansichten überhaupt kein
   Inline-`<style>` — ihre Maske des PROFIL-Strips liegt seit Phase 5 hier in
   dieser Datei und war live nachweislich in allen vier Zuständen wirksam
   (gemessen 26.08.2026: 320px `scroll-start` → nur rechts gefadet, 375px
   `scroll-start scroll-end` → `mask-image: none`). Gebaut wurde deshalb nur
   der zweite Strip. Wer eine Datei auf ein Merkmal absucht, muss wissen, ob
   das Merkmal in dieser Datei überhaupt zu erwarten ist.

   ⚠ CACHE-BUST: ?v=13 — gemessen, nicht aus dem Ticket übernommen. Der Core
   referenzierte diese Datei vor dem Eingriff mit `?v=12`, und `?v=12` war live
   ausgeliefert (curl 26.08.2026: Live-Datei md5-gleich zum lokalen Stand).

   CT-0316 (09.09.2026, ?v=18) — POLITUR 3. Diese Datei trägt Anteile ALLER sieben
   Änderungen, die Engine Anteile von dreien (P3 Wegfall der Kartenpreis-Kennzahl,
   P4 Punkte-Markup, P6 Reihenfolge in der Aktionszeile) — Review-Auflage A4,
   die erste Fassung zählte „fünf gegen zwei":
   - P1 §6: `.fieber-legende-hinweis` 0.75rem → 0.8rem und
     `.fieber-legende-marker-liste` 0.72rem → 0.8rem. Kein neuer Wert in der
     Leiter — es ist die Stufe, die `.fieber-legende-titel` schon trägt.
     `.fieber-legende-stufe` (0.72rem, Kacheltexte) bleibt unberührt.
   - P2 §8a: Panelgrund `rgba(0,69,120,0.94)` → `rgba(9,87,143,0.92)`, der Wert
     der Festgeld-DE-Kreativansicht. Hell-Zweig (#F7F9FC) unverändert.
   - P3 §8a: `.fieber-panel-kennzahl + .fieber-panel-kennzahl` gestrichen — der
     Kasten hat nur noch ein Kind, der Selektor könnte nie mehr treffen.
   - P4 §8a/§9: `.fieber-panel-punkte` / `-punkt` / `-punkt-aktiv` NEU, Werte
     zeichengleich aus dem Inline-Block der Listenansicht, mit Hell-Pendant.
   - P5 §8a: `.fieber-panel .icon` 1.3em → 3em (Site-Default aus `style.css:210`,
     den Liste und Tabelle tragen). `position: static` bleibt der eigentliche
     Reset — die Größe war nur die mitgenommene Nebenwirkung.
   - P6 §8a: `.fieber-panel-aktion-betrag` NEU (`display: block`).
   - P7 §8a: `.fieber-panel-gruppe + .fieber-panel-gruppe { margin-top: 2.3em }`.
     ⚠ DER BAUAUFTRAG NANNTE 1em, UND DAS WÄRE EINE REGEL OHNE WIRKUNG GEWESEN:
     `.fieber-panel-koerper` ist kein Flexkontext, angrenzende Geschwister-
     margins kollabieren also zum größeren Wert und 1em verschwände restlos im
     `margin-bottom: 1.3em` des Vorgängers. Gemessen statt angenommen; die
     Begründung steht an der Regel.

   CT-0317 (09.09.2026, ?v=19) — POLITUR 3b, zwei Nachjustierungen am selben Tag.
   Diese Datei trägt Q1 ganz, Q2 gar nicht (Q2 ist reine DOM-Reihenfolge in der
   Engine, kein Selektor musste dafür wandern — nachgemessen, nicht vermutet):
   - Q1 §8a/§9: `.fieber-panel-bewertung-stack` / `-wert` / `-max` NEU, und
     `.fieber-panel-punkte` verliert `align-items: center` + `min-height: 1.4em`
     zugunsten von `margin-top: 0.2em`. Die Bewertung zeigt wieder die ZAHL
     („2/3") und darunter die Punkte — die vollständige Optik der Listenansicht
     (`.sterne-display`, Listen-Core `:398-426` / Hell `:1115-1117`). CT-0316 P4
     hatte am Vormittag desselben Tages die Zahl ersetzt statt ergänzt.
     Hell-Pendant §9: Zahl `#003A66`, Suffix `rgba(0,58,102,0.7)` — die
     Panel-Textfarbe, NICHT das `#111` der Liste.
   ⚠ CACHE-BUST: ?v=19 — Ist-Stand vor dem Bump an den Dateien GEMESSEN
   (CSS-Ref 18, JS-Ref 18, `Fieberkarte.version` 18), nicht aus dem Ticket.

   CT-0318 (09.09.2026, ?v=20) — POLITUR 3c, dritter Auftrag desselben Tages am
   Detailpanel. Diese Datei trägt R1 ganz und von R2 nur die Nachmessung
   (R2 ist reine DOM-Reihenfolge in der Engine — kein Selektor musste wandern,
   nachgemessen, nicht vermutet):
   - R1 §8a/§9: `a.fieber-panel-cta` auf FESTGELD-PARITÄT. Aus dem weiß
     umrandeten „Geister“-Knopf auf rgba(255,255,255,0.12) wird der mintfarbene
     Knopf des Zinsgebirges: `inline-flex`, `align-self: flex-end`,
     `margin-top: auto`, `padding: 0.8em 1.3em`, `#A9F6DB`/`#004578`,
     `border: none`, `border-radius: 0.5rem`, `font-size: 1rem`,
     Hover `#DFFDF2`, `transition: background-color 150ms ease` (NICHT `all`
     wie im Vorbild — Hauskonvention CT-0221/CT-0227/CT-0301).
     Alle Werte am Vorbild LIVE GEMESSEN, nicht aus dessen Quelltext
     abgeschrieben: dort stehen `var()`-Token, die in diesem Panel nicht
     auflösen (es hängt an `document.body`, außerhalb `.vergleich-dashboard`).
   - R1 §8a NEU: `a.fieber-panel-cta .link-arrow` — der Pfeil-Chip war seit
     Phase 4 UNGESTYLT. Die Engine baut den Span mit `.link-arrow` in der
     Annahme, die Listen-Regel greife; die steht aber unter
     `.vergleich-dashboard` und erreicht das Panel nie. Derselbe Fallstrick ist
     im Festgeld-Vorbild dokumentiert.
   - R1 §9: Hell-CTA `#0070C0`/weiß, Hover `#00528D`, Chip `#F7F9FC`/`#00528D`
     (vorher `#00528D`/Hover `#003A66`). `border-color` entfiel mit dem Rand.
     Fokus-Outline `#003A66` unverändert.
   - R1 §8a NEU, `@media (max-width: 48em)`: der Sheet-CTA wird vollbreit,
     `display: block`, `text-align: center`, `0.7em 1em`, `0.95rem` — und
     bleibt in BEIDEN Kontrastmodi mint (Festgeld-Parität, dort ausdrücklich so
     gewollt). Der Hell-Block (0,3,1) wird deshalb namentlich zurückgenommen.
     Bewusste Abweichung: das Haus-Bodenmaß `min-height: 44px` (WCAG 2.5.8)
     zieht den Knopf auf 44 px, das Vorbild misst 42,75 px.
   - R1 §8a: `.fieber-panel-koerper` wird `display: flex; flex-direction: column`.
     Das ist die Voraussetzung für `margin-top: auto` am CTA — und es macht die
     seit Phase 4 tote Regel `> * { flex: 0 0 auto }` lebendig (gewollt: sonst
     staucht der Flexkontext die Blöcke statt zu scrollen).
   - R1-Folge §8a: `.fieber-panel-gruppe + .fieber-panel-gruppe` 2.3em → 1em.
     ⚠ DAS IST KEINE KORREKTUR VON CT-0316 P7 — der Wert 2.3em war im
     Blockkontext richtig. Im Flexkontext kollabieren Geschwister-Margins
     nicht mehr, 1.3em + 2.3em ergäben 3.6em. 1em hält den Gesamtabstand bei
     denselben 2.3em (nachgemessen 35,3 px). Alle übrigen Blockabstände im
     Körper sind einseitig gesetzt und daher unberührt — gemessen, nicht
     angenommen (CT-0318-Bericht, Vorher/Nachher-Tabelle).
   - R3 §8/§9 (Nachtrag desselben Tages, während des Baus beauftragt):
     KLICK-RÜCKMELDUNG AM KARTENNAMEN. Der weiße Fokusrahmen gilt über
     `.fieber-karte:focus:not(:focus-visible)` nur noch für den Tastaturfokus.
     Vorher war der Rahmen die EINZIGE Rückmeldung — auch nach einem Mausklick,
     weil die Engine den Fokus beim Schließen an den Knopf zurückgibt. Der
     aufgehellte Grund saß zunächst am KNOPF (`.fieber-karte:focus` /
     `[aria-expanded="true"]`, rgba(255,255,255,0.14) bzw. Hell
     rgba(0,82,141,0.10)); Alpha 0.14 ist am Kontrast gemessen, nicht gewählt.
   - CT-0331 §8/§9 (09.09.2026, Politur 5): DERSELBE GRUND FÜLLT JETZT DIE GANZE
     KARTENZELLE. Träger sind `.fieber-zelle-karte:focus-within` und die
     Engine-Klasse `.fieber-zelle-karte-offen`; die beiden Knopf-Regeln und die
     `transition` am Knopf sind entfallen (sonst schichtete sich die Aufhellung
     doppelt), die `transition` sitzt an der Zelle. Die FARBE bleibt, ihre
     Notation wird deckend: #2471AC bzw. Hell #DEE8F1 — beides die exakten
     Mischwerte der alten Alpha-Angaben, weil eine sticky Spalte nicht
     halbtransparent sein darf. Grund für den Umzug: der Knopf endete bei 16 von
     20 Zeilen 17,75 bis 52,30 px über der Zellunterkante (live gemessen).
   - R4 §5a/§8a/§9 (zweiter Nachtrag desselben Tages): SCHLIESSEN-KNOPF DES
     PANELS als sichtbare Kachel nach dem Vorbild der Tagesgeld-DE-
     Kreativansicht (`.skyline-panel-close`): `background-color:
     rgba(255,255,255,0.16)` statt transparent, Radius 0.25em → 0.5em, Hover
     0.12 → 0.30, Schrift 1.35rem → 1.25rem, Anschlag 0.6em/0.7em → 1em/1em
     (Sheet-Zweig NEU: 0.9em/0.75em), `transition: background-color 130ms ease`.
     Hell: Kachel `rgba(0,82,141,0.12)`, Hover 0.10 → 0.22.
     ZWEI BEWUSSTE ABWEICHUNGEN VOM VORBILD: die Größe bleibt 2.75rem mit
     44-px-Boden (das Vorbild misst am Desktop 38,4 px — der Boden ist eine
     Anwender-Entscheidung aus Phase 6, WCAG 2.5.8), und der Fokus bleibt an
     `:focus` mit Innenring statt `:focus-visible` mit Außenring. Die
     Ringübersicht in §5a ist fortgeschrieben: der Knopf ist nicht mehr der
     breiteste Ring der Datei (2,70 → 2,50 px).
     ⚠ DIE ZWEITE DIESER ABWEICHUNGEN IST AM SELBEN TAG ZURÜCKGENOMMEN
     WORDEN — siehe CT-0323 S3 unten. Der Innenring bleibt, der Vorbehalt
     `:focus` → `:focus-visible` gilt jetzt auch hier.
   ⚠ CACHE-BUST: ?v=20 — Ist-Stand vor dem Bump an den Dateien GEMESSEN
   (CSS-Ref 19, JS-Ref 19, `Fieberkarte.version` 19), nicht aus dem Ticket.

   --------------------------------------------------------------------------
   CT-0323 / CT-0324 — POLITUR 4 AM DETAILPANEL UND AN DER BEDIENLEISTE
   (09.09.2026, vierter Auftrag desselben Tages, Assets im Lockstep auf ?v=21)
   - S1 §8a: EIN EM LUFT VOR DER ERSTEN MERKMALSGRUPPE.
     `.fieber-panel-bewertung + .fieber-panel-gruppe { margin-top: 1em }` —
     die bestehende `+`-Regel zwischen zwei Gruppen kann die erste nicht
     treffen. Gemessen 1200: 18,30 → 33,66 px; 375: 18,30 → 31,10 px.
   - S2 §8a: EIN EM LUFT UNTER DER LETZTEN GRUPPE („Neukundenaktion").
     `.fieber-panel-gruppe { margin-bottom: 1.3em → 2.3em }`, dafür entfällt
     `.fieber-panel-gruppe + .fieber-panel-gruppe { margin-top: 1em }`
     ersatzlos. Der Abstand ZWISCHEN zwei Gruppen bleibt damit unverändert
     (35,31 px bei 1200, 29,42 px bei 375 — im selben Lauf gegengemessen), und
     unter der LETZTEN Gruppe wirkt er zum ersten Mal mit.
     ⚠ ZWEI VORSCHLÄGE DES BAUAUFTRAGS SIND GEMESSEN AUSGESCHIEDEN:
     `:last-of-type` verfehlt die Karten MIT Zusatzinfos (dort ist der
     Zusatzinfos-`div` der letzte `div` — am DOM belegt), und ein
     `margin-top: 1em` an der Zusatzinfos-Box liefert den falschen Wert, weil
     `em` gegen deren eigene 0.85rem auflöst (gemessen 33,55 px bei 1200 statt
     35,31 und 30,22 px bei 375 statt 29,44). Begründung im Regelblock.
   - S3 §5a/§8/§8a: DIE VIER PANEL-FOKUSRINGE NUR NOCH FÜR TASTATUR
     (`:focus:not(:focus-visible) { outline: none }` an `.fieber-panel`,
     `.fieber-panel-schliessen`, `.fieber-panel-koerper a:not(.fieber-panel-cta)`
     und `a.fieber-panel-cta`). Muster wie R3 an `.fieber-karte`. Die
     Hell-Pendants brauchen KEINE eigene Regel — sie schalten nur
     `outline-color`, nie `outline-style`; in beiden Modi bei 1200 und 375
     nachgemessen. Die Ringübersicht in §5a führt jetzt eine Spalte
     „nur Tastatur / auch Maus".
   - CT-0324: KEINE CSS-ÄNDERUNG. Der Umzug der `.profil-beschreibung` unter
     das Kartenumsatz-Band sitzt allein im Core; die Margin-Werte dieser Datei
     sind seit Phase 5 zeichengleich zu Liste und Tabelle und wirken nach dem
     Umzug von selbst richtig (nachgemessen, siehe CT-0323-Bericht).
   ⚠ CACHE-BUST: ?v=21 — Ist-Stand vor dem Bump an den Dateien GEMESSEN
   (CSS-Ref 20, JS-Ref 20, `Fieberkarte.version` 20) und live per curl
   bestätigt (20/20/20), nicht aus dem Ticket übernommen.
   ========================================================================== */

/* ==========================================================================
   §1 BÜHNE UND MATRIX-MOUNT
   --------------------------------------------------------------------------
   `#fieber-buehne` ist der Wurzel-Container der Ansicht, `#fieber-matrix` der
   Mount, den die Engine füllt.
   ========================================================================== */
.fieber-buehne {
    /* Positionskontext für den horizontalen Scroller und die sticky erste
       Spalte — seit Phase 1 gesetzt, damit Phase 2 die Bühne nicht anfassen
       muss. */
    position: relative;
    width: 100%;
    margin: 1em 0 1.25em;
    /* min-width:0: als Flex-/Grid-Item bekäme der Container sonst
       min-width:auto (= min-content) und die breite Matrix würde ihn über den
       Viewport treiben, statt den Scroller greifen zu lassen (Lehre aus
       .kb-ranking im Brokerage-Vorbild). */
    min-width: 0;
}

.fieber-matrix {
    /* Layout-Anker für den leeren Mount: ohne Mindesthöhe kollabiert die Bühne
       auf 0 und die Compliance-Fußzeile rutscht direkt unter die Bedienleiste.
       Gilt nur, solange die Matrix NICHT steht — sobald die Engine gerendert
       hat, bringt sie ihre Höhe selbst mit (Ankündigung aus Phase 1 eingelöst). */
    min-height: 8em;
}
.fieber-js .fieber-matrix {
    min-height: 0;
    /* Positionskontext für die Randabschattung aus §7. */
    position: relative;
}

/* ==========================================================================
   §2 SCOPED LEAK-RESETS GEGEN DIE UNSCOPED BESTANDS-SELEKTOREN
   --------------------------------------------------------------------------
   style.css scopet mehrere Regeln nur über den Typ-/Klassennamen und trifft
   damit alles, was wir in die Bühne stellen. Der Kurvenblick (Brokerage DE)
   hat genau daran Layout-Schaden genommen — dort waren die Treffer erst mit
   der echten Live-CSS sichtbar (Phase-6-Befund, `brokerage-diagramm.min.css`
   §Leak-Schutz). Hier vorbeugend gescoped, mit den nachgeschlagenen
   Ist-Werten aus `Coden\Upload\DE\style.css`.

   Klassen-Spezifität schlägt die Typ-Selektoren in allen Media-Stufen, deshalb
   ist kein `!important` nötig.

   Stand Phase 2: Die drei Resets am Ende dieses Abschnitts greifen ab sofort
   WIRKLICH — die Matrix bringt `table`, `td` und `ol` erstmals in die Bühne.

   KORREKTUR IN PHASE 5, ZWEITE AUFLAGE DESSELBEN FEHLERS: Bis hierher stand,
   die aside-/h3-/.icon-Resets darüber „greifen weiterhin ins Leere und bleiben
   vorbeugend für PHASE 5 (Bedienleiste) stehen." Auch das war sachlich falsch,
   und zwar aus genau dem Grund, der eine Zeile tiefer schon für Phase 4
   ausformuliert steht. Nachgeschlagen im Core: die Bedienleiste steht in
   `div.vergleich-dashboard.fieber-dashboard`, und `#fieber-buehne` ist ein
   KIND dieses Containers, kein Vorfahr. Jeder Selektor dieses Abschnitts ist
   auf `.fieber-buehne` gescopt und erreicht damit nichts, was oberhalb der
   Bühne im Dashboard steht. Die Leiste bringt ihren eigenen, auf
   `.fieber-dashboard` gescopten Reset in §5b mit — wieder einen ANDEREN Satz:
   `aside`, `h3`, `table`, `td` und `ol` gibt es in der Leiste nicht, dafür
   `input[type="checkbox"]`, das style.css ungescopt aus dem Bild klemmt.

   Die drei Resets darüber greifen also weiterhin ins Leere. Sie bleiben
   trotzdem stehen — nicht „vorbeugend für Phase N", sondern weil sie den
   Elementtyp abdecken, den ein späterer Bühnen-Einbau mitbringen KÖNNTE, und
   weil ihr Entfernen einen Beleg vernichtete, den style.css jederzeit wieder
   scharf machen kann. Wer diesen Satz das nächste Mal liest: er ist eine
   Rückversicherung, keine Zusage an einen bestimmten Bauabschnitt.

   KORREKTUR IN PHASE 4: Bis hierher stand an dieser Stelle, die Resets stünden
   auch „vorbeugend für Phase 4 (Detail-Panel)". Das war sachlich falsch. JEDER
   Selektor dieses Abschnitts ist auf `.fieber-buehne` gescopt, das Panel steht
   aber außerhalb der Bühne UND außerhalb von `#vergleich` — kein Reset von hier
   erreicht es. Das Panel bringt seine eigenen, auf die Panel-Wurzel gescopten
   Resets in §8a mit, und zwar einen anderen Satz: die drei `aside`-Regeln
   entfallen dort (es ist ein `<div role="dialog">`, kein `<aside>`), dafür kommt
   der globale `p`-Selektor hinzu, den `#vergleich p` hier noch abfing.
   ========================================================================== */

/* style.css:44 `aside{width:25%;float:left;font-size:.9em;line-height:1.4em;
   margin:9em 7px 4em 5%}` — dazu die Media-Stufen :438 (width:25%), :519
   (width:84%;float:none;margin:-2.6em…;padding-top:3em;padding-bottom:4em;
   background:#066BB2), :540 (width:105%;position:relative;left:-3%;flex:1 1
   100%), :660 (width:98%;margin-left:1%). Gedacht für die Site-Sidebar; ein
   <aside> in unserer Bühne ist keine. */
.fieber-buehne aside {
    width: auto;
    float: none;
    flex: none;
    margin: 0;
    padding: 0;
    position: static;
    left: auto;
    background: none;
    font-size: 1em;
    line-height: 1.5;
}

/* style.css:153 `aside p{margin-top:5em}`, Media :522 `aside p{height:8em;
   padding:2.5em 5% 0 8em;text-align:center;border-bottom:2px dotted …}`,
   :541 `aside p{height:4em;border-bottom:0;padding:2.5em 0}`. Im Brokerage
   blähte das den mobilen Panel-Kopf auf ein Vielfaches (VRT-Befund B3). */
.fieber-buehne aside p {
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

/* style.css:8 `h3{…margin:75px 0 0;padding:0 5%}` — rückt jede Überschrift ein
   UND setzt 75px Vorabstand. Das Brokerage-Vorbild neutralisiert nur das
   padding; der margin gehört ebenso dazu. Unsere `.fieber-`Klassen liefern
   Abstand und Typo selbst. */
.fieber-buehne h3 {
    margin: 0;
    padding: 0;
}

/* style.css:210 `.icon{font-family:'fontello';font-size:3em;position:absolute;
   margin-left:-1.6em;color:var(--mint-200)}`, Media :523 `aside .icon{font-
   size:2.4em;left:16.1%}`. Trifft jedes Inline-SVG, das wir mit class="icon"
   aus dem Bestandsmarkup übernehmen, und schiebt es aus seiner Zelle
   (Brokerage: leeres Kästchen + daneben schwebende Glyphe). */
.fieber-buehne .icon {
    position: static;
    left: auto;
    margin-left: 0;
    font-size: 1.3em;
    line-height: 1;
}

/* NEU IN PHASE 2 — die drei Typ-Selektoren, die die Matrix wirklich trifft.

   style.css:469 `table{position:relative}` (innerhalb @media max-width:88em,
   also auf nahezu jedem Viewport aktiv). Ein positioniertes <table> ist für die
   sticky erste Spalte eine Variable, die wir nicht messen können — deshalb
   zurück auf static. Der Positionskontext, den §7/§8 brauchen, sitzt auf der
   Bühne und auf dem Mount, nicht auf der Tabelle.

   style.css:15 `td{font-size:.9em;line-height:1.2em}` — schrumpfte jede
   Matrixzelle gegenüber ihrer Kopfzeile und drückte die zweizeiligen Werte
   zusammen. Der Reset ist BEWUSST auf `.fieber-tabelle` verengt und nicht auf
   die ganze Bühne gelegt: er träfe sonst auch die Fallback-Tabelle, deren
   erklärte 0.85rem/1.45 heute ebenfalls von diesem Leak überschrieben werden.
   Das ist ein echter, aber eigenständiger Befund an einem in Phase 1
   freigegebenen Artefakt — er gehört gemeldet und nicht nebenbei mitgeändert.

   style.css:5 `ol{margin-left:20px}` — rückte die Legendenkästchen um 20px ein
   und riss die Reihe aus der Flucht des Intro-Absatzes. */
.fieber-buehne table {
    position: static;
}
.fieber-buehne .fieber-tabelle td {
    font-size: inherit;
    line-height: inherit;
}
.fieber-buehne ol {
    margin-left: 0;
}

/* ==========================================================================
   §3 NO-JS-FALLBACK-TABELLE (E13)
   --------------------------------------------------------------------------
   UMSCHALTUNG PER JS-KLASSE, NICHT PER <noscript>: Die Tabelle ist per
   Voreinstellung SICHTBAR; die Engine setzt `fieber-js` auf `#fieber-buehne`
   erst, NACHDEM sie die Matrix erfolgreich in den Mount gerendert hat, und
   blendet sie damit aus.

   Bewusste Abweichung von BEIDEN Vorbildern:
   - Brokerage klammert `.kb-fallback` per sr-only auf 1px und holt sie im
     <noscript>-Zweig zurück;
   - Tagesgeld versteckt die Bühne über `html.no-js` per Kopf-Inline-Swap.
   Beide binden die Sichtbarkeit an die VERFÜGBARKEIT von JS. Bei vorhandenem,
   aber ausgestiegenem JS (fehlende/kaputte JSON-Insel) bliebe die Seite dann
   leer — kein Fallback, keine Matrix.

   DIESE DATEI BINDET SIE AN DEN ERFOLG DES RENDERS, NICHT AN DEN ERFOLG DES
   PARSE (Nacharbeit Befund B1, 25.07.2026). Die Engine setzt `fieber-js` erst,
   wenn `zeichneMatrix()` `true` geliefert hat. Ab Phase 2 lässt damit auch
   jeder Bail-out INNERHALB `zeichneMatrix()` die Tabelle stehen — die Engine
   baut den Matrix-Teilbaum detached auf und hängt ihn erst im letzten Schritt
   ein, sodass ein Fehler beim Bauen nie einen halb gefüllten Mount hinterlässt.

   Preis der Entscheidung: ohne den Kopf-Swap kann die Tabelle vor dem Init
   kurz aufblitzen. Mit der jetzt langen Tabelle ist das ein offener Punkt für
   die Politur (Phase 6) — eine Mitigation darf die Bail-out-Sicherung aber
   nicht aufheben.

   Der Selektor setzt voraus, dass die Fallback-Tabelle INNERHALB von
   `#fieber-buehne` liegt (Namens-Vertrag mit dem Core).
   ========================================================================== */
.fieber-js .fieber-fallback {
    display: none;
}

/* E23 (Anwender-Entscheid 25.07.2026): DER FUSSNOTENAPPARAT BLEIBT MIT AKTIVEM JS
   SICHTBAR. Bis zur Nacharbeit stand hier `.fieber-js .fieber-fallback-fussnoten
   { display: none }` — die Regel ist ERSATZLOS ENTFERNT.

   Warum das keine Kosmetik ist: Ab Phase 2 trägt die Matrix Fußnoten-Marker
   (E9). Ohne den sichtbaren Apparat zeigte JEDER dieser Marker ins Nichts —
   exakt Befund R-B2 der Phase 1 („ein Sternchen zeigte ins Nichts"), nur in
   neuer Gestalt. Der Apparat löst konkret auf: den Gratis-Cash-Verweis der
   IDS 14 und 35, Klarnas „siehe Fußnote" beim Teilzahlungszins (IDS 65, der
   Effektivzins steht dort im Volltext) und die EUR 24,00 Jahresgebühr der
   IDS 66, die im Preisfeld gar nicht auftaucht.

   UNTERSCHIEDLICHE BEHANDLUNG VON LEGENDE UND APPARAT, mit Grund: Die Legende
   (§6) erklärt eine Farbskala, die es ohne gerenderte Matrix nicht gibt — sie
   hängt deshalb an `.fieber-js`. Der Apparat trägt Anbietertexte, die auch ohne
   JS gelten, und bleibt in beiden Zuständen stehen.

   Der Abschnitt ist das LETZTE Kind der Bühne, hinter der Fallback-Tabelle. Ist
   die Tabelle ausgeblendet und die Matrix gerendert, rückt er unter Matrix,
   Reglerleiste und Ergebniszeile — dort braucht er eine eigene Anbindung, sonst
   liest er als Rest einer verschwundenen Tabelle statt als Anmerkungsapparat.

   ⬇ POLITUR VOM 06.08.2026 (E43): DIE ANBINDUNG IST JETZT DIE DER
   TABELLENANSICHT — eigene getönte Fläche mit Radius statt Hairline darüber.
   Live gemessen an `.tabelle-fussnoten` auf
   `vergleich-kreditkarte-niedriger-kartenpreis.php` (1200, 06.08.2026):
   `background: rgba(0,0,0,0.04)`, `padding: 13,6 / 20,4 px` (= 1em / 1.5em bei
   0.85rem), `border-radius: 6,8 px` (= 0.5em), kein `border-top`.

   ⚠ DER AUSSENABSTAND IST BEWUSST NICHT ÜBERNOMMEN. Die Tabellenansicht setzt
   `margin-top: 61,2 px` (4.5em), weil der Apparat dort auf den Tabellen-Scroller
   folgt. Hier folgt er auf die Ergebniszeile, die schon `1.1em` nach unten
   trägt; 4.5em rissen eine Lücke, die es in der Tabelle so nicht gibt. */
.fieber-js .fieber-fallback-fussnoten {
    margin-top: 1.5em;
    padding: 1em 1.5em;
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 0.5em;
}
/* ⛔ HIER STAND BIS ZUM 06.08.2026 EINE ::before-ÜBERSCHRIFT
   `content: 'Anmerkungen der Anbieter'`. SIE IST ERSATZLOS ENTFERNT (E43,
   Anwender-Entscheid) — bitte nicht „wiederherstellen".

   Begründung: Die Tabellenansicht führt ihren Apparat ohne jede Überschrift,
   und der Apparat trägt seinen Bezug selbst — jede Zeile beginnt mit dem
   fetten Markennamen. Die Überschrift verdoppelte nur das `aria-label` des
   `<section>`, das im Core steht und BEWUSST BLEIBT: für Screenreader ist der
   Abschnitt damit weiterhin benannt, ohne dass eine Zeile Text im Bild steht.
   Der frühere Kommentar hier führte „eine echte Überschrift im Core" als
   Nachzug-Kandidaten. Der Kandidat ist damit erledigt, nicht offen. */

/* Optik nur für den sichtbaren Fall. Der Bestands-Dashboardgrund ist dunkles
   Blau, deshalb helle Schrift und helle Hairlines — im Brokerage-Vorbild sind
   die Fallback-Farben belanglos, weil die Tabelle dort nie sichtbar wird. */
.fieber-fallback {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1em;
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.45;
}
.fieber-fallback caption {
    text-align: left;
    font-weight: 600;
    margin-bottom: 0.5em;
}
.fieber-fallback th,
.fieber-fallback td {
    border: 0.0625em solid rgba(255, 255, 255, 0.28);
    padding: 0.3em 0.5em;
    text-align: left;
    vertical-align: top;
}
.fieber-fallback th {
    font-weight: 600;
}
/* ⚠ HIER STAND BIS CT-0355 (10.09.2026) `.fieber-fallback-inaktiv { opacity:
   0.55 }` — die Fallback-Fassung des Geister-Prinzips E13: gefilterte Karten
   fielen nicht heraus, sie dimmten. E76 hat E13 abgelöst, die Fallback-Tabelle
   führt jetzt nur noch die AKTIVEN Karten, und der Core setzt die Klasse
   nirgends mehr. Eine Regel ohne Gegenstand ist kein harmloser Rest: der
   nächste Leser hielte den gedimmten Zustand für erreichbar. Ersatzlos
   entfallen; den Sachverhalt trägt jetzt die <caption> als Satz. */

/* Zusatzinfos-Fußnoten unter der Fallback-Tabelle (Befund B2). Muster: der
   Fußnotenapparat des Tabellen-Cores (`.tabelle-fussnoten`) — Liste je Anbieter
   mit fettem Markennamen als Anker.

   ⬇ POLITUR VOM 06.08.2026 (E43): DIE MASSE SIND JETZT DIE DER TABELLENANSICHT,
   nicht mehr „eine Stufe kleiner". Live gemessen an `.tabelle-fussnoten`
   (1200, 06.08.2026, Wurzelschrift 16 px):

       font-size      13,6  px  = 0.85rem   (vorher 0.78rem = 12,48 px)
       line-height    20,4  px  = 1.5       (vorher 1.45)
       color          rgba(255,255,255,0.92)  (vorher #ffffff)
       li margin-bot   8,84 px  = 0.65em    (vorher 0.35em)
       li padding-left 20,4 px  = 1.5em     } zusammen der HÄNGENDE EINZUG
       li text-indent -20,4 px  = -1.5em    }
       strong         font-weight 600

   ⚠ DER HÄNGENDE EINZUG IST DER KERN, nicht Kosmetik. Er ist der Grund, warum
   der Apparat ohne Überschrift trägt: die ERSTE Zeile jedes Eintrags beginnt
   ganz links und führt den fetten Markennamen, JEDE FOLGEZEILE rückt um 1.5em
   ein. Damit liest die Spalte der Markennamen senkrecht durch, und ein Eintrag
   bleibt auch dann als Einheit erkennbar, wenn er über zwanzig Zeilen läuft.
   Beides gilt hier stärker als in der Tabelle: gemessen (06.08.2026, Profil
   „niedriger Kartenpreis") führt der Apparat 12 Einträge, davon vier Marken
   DOPPELT (Hanseatic Bank, easybank, Targobank, American Express — je zwei
   Karten), und die Texte tragen bis zu SECHS wörtliche `<br>` (IDS 2), der
   längste 3.037 Zeichen. Wer `text-indent` und `padding-left` trennt oder eines
   von beiden ändert, nimmt dem Apparat genau diese Lesbarkeit.

   `color` liegt bei 0.92 Alpha statt reinem Weiß — ebenfalls Tabellenmaß. Auf
   dem Dashboardgrund (#0070C0 mit rgba(0,0,0,0.02) darüber, plus die 0.04 des
   Apparats) bleibt das deutlich über der Kontrastschwelle; das Kontrast-Gate
   misst es mit. */
.fieber-fallback-fussnoten {
    margin: 0 0 1em;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    line-height: 1.5;
}
.fieber-fallback-fussnoten ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.fieber-fallback-fussnoten li {
    margin: 0 0 0.65em;
    padding-left: 1.5em;
    text-indent: -1.5em;
}
.fieber-fallback-fussnoten li:last-child {
    margin-bottom: 0;
}
/* Der Markenname als Anker der ersten Zeile. 600 statt des Browser-`bold` (700)
   — Tabellenmaß, live gemessen.

   ⛔ HIER STEHT BEWUSST KEIN `color`, OBWOHL DIE TABELLENANSICHT EINES SETZT
   (dort `li strong { color: #ffffff }` gegen 0.92 Alpha im Fließtext).
   Der Grund ist eine Regel weiter unten in §8a:

       .fieber-panel strong, … , .fieber-fallback-fussnoten strong, … { color: inherit }

   Das ist die v6-Reparatur eines BLOCKIERENDEN Kontrastfehlers: `style.css`
   färbt `strong` global fast weiß, und im Hell-Modus standen die elf Markennamen
   dieses Apparats dadurch bei **1,15:1**. `inherit` heilt beide Modi zugleich,
   weil die Auszeichnung damit an der Apparatfarbe hängt statt an einem Fremdwert.
   Ein `color` an DIESER Stelle hätte diese Reparatur für `strong` still
   ausgehebelt: `.fieber-fallback-fussnoten li strong` ist (0,1,2) und schlägt
   `.fieber-fallback-fussnoten strong` mit (0,1,1). Der Hell-Modus wäre über das
   Pendant in §9 zwar gedeckt gewesen, aber die Deckung hinge dann an zwei
   Regeln statt an einer — genau die Konstruktion, die v6 beseitigt hat.
   Der Anker trägt seine Hervorhebung deshalb allein über das Gewicht. Der
   Unterschied zur Tabelle ist 1.0 gegen 0.92 Alpha auf demselben Grund und
   damit nicht wahrnehmbar.
   ⚠ WER HIER JE EIN `color` ERGÄNZT, muss zuerst die inherit-Regel in §8a lesen. */
.fieber-fallback-fussnoten li strong {
    font-weight: 600;
}

/* Kontrast-Hell-Pendant: der Umschalter selbst kommt erst mit der Bedienleiste
   in Phase 5, aber die Klasse sitzt auf dem Bestands-`#vergleich` und kann
   schon vorher gesetzt sein. Ohne dieses Pendant wäre die Tabelle dann weiß
   auf weiß. Spezifität ID+Klasse, kein `!important`. */
#vergleich.kontrast-hell .fieber-fallback,
#vergleich.kontrast-hell .fieber-fallback-fussnoten {
    color: #003A66;
}
/* Hell-Pendant der getönten Apparat-Fläche (E43, 06.08.2026). Maß aus der
   Tabellenansicht: rgba(0,82,141,0.05) auf weißem Dashboard — hell genug, dass
   die Textfarbe #003A66 der Regel darüber die Schwelle deutlich hält.
   ⛔ HIER STEHT KEINE REGEL FÜR `li strong`, und das ist geprüft, nicht
   vergessen: die Markennamen tragen in beiden Modi `color: inherit` aus §8a
   (v6-Reparatur) und erben damit automatisch das #003A66 von oben. Eine eigene
   Deklaration hier wäre die zweite Quelle für denselben Wert. */
#vergleich.kontrast-hell .fieber-fallback-fussnoten {
    background-color: rgba(0, 82, 141, 0.05);
}
#vergleich.kontrast-hell .fieber-fallback th,
#vergleich.kontrast-hell .fieber-fallback td {
    border-color: #b7c6d4;
}

/* ==========================================================================
   §4 SR-ONLY-HELFER
   --------------------------------------------------------------------------
   Erste Verwendung ab Phase 2: die <caption> der Matrix, die den Sinn der
   Farbskala in Worten trägt. Seit Phase 3 zusätzlich der Titel der Regler-
   Gruppe (`<p id="fieber-regler-titel">`, Ziel des `aria-labelledby`).
   Muster aus `.kb-visually-hidden`, Maße in em.

   `padding: 0` ist seit Phase 3 nicht mehr nur Vollständigkeit: `#vergleich p`
   (style.css:45, `padding:0 5px 0 4px`) schlägt mit 101 gegen 10 jede
   Klassen-Regel dieser Datei, und der Helfer trägt seit Phase 3 erstmals ein
   `<p>`. Sichtbar wäre das nicht geworden — `clip-path` klemmt die Fläche
   ohnehin —, aber ein sr-only-Helfer mit 9px Innenabstand ist ein Widerspruch
   in sich, und die Regel unten sagt `padding: 0`, ohne es durchzusetzen.
   ========================================================================== */
.fieber-visually-hidden {
    position: absolute;
    width: 0.0625em;
    height: 0.0625em;
    padding: 0;
    margin: -0.0625em;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* Durchsetzung des `padding: 0` von oben gegen `#vergleich p`. Steht als
   eigene Regel hinter der Basis, damit beim Lesen klar ist, dass hier nichts
   Neues erklärt, sondern nur etwas gegen einen Leak gehalten wird. */
#vergleich .fieber-visually-hidden {
    padding: 0;
}

/* ==========================================================================
   §5 NUTZERSICHTBARE ELEMENTE OBERHALB DER BÜHNE (Nacharbeit Befund H4)
   --------------------------------------------------------------------------
   Die Bestands-Optik dieser drei Elemente lebt NICHT in der geteilten
   vergleich.min.css, sondern im Inline-<style>-Block des Listen-Cores
   (kreditkarte-vergleich-core.inc.php: .profil-beschreibung :446 und :675,
   .nav-scroll-wrapper :585-597). Unser Core hat keinen Inline-Block, also
   greift dort nichts — genau die von PLANUNG §1 benannte Falle und die
   Kurvenblick-Lehre. Die Werte sind aus dem Listen-Core abgelesen (read-only)
   und mit dem Kurvenblick abgeglichen, der dieselben beiden Regeln in seiner
   eigenen Datei führt (brokerage-diagramm.min.css :72 und :81).
   ========================================================================== */

/* Intro-Satz über der Bühne. Optik nach `.kurvenblick-dashboard .kb-intro`
   (dieses wiederum „exakt nach Festgeld .zg-intro"): weiß auf dem dunkelblauen
   Dashboard-Grund, Zeilenlänge auf 44em begrenzt. */
.fieber-dashboard .fieber-intro {
    margin: 0.24rem 0 0.96rem;
    max-width: 44em;
    font-size: 0.96rem;
    line-height: 1.4;
    color: #ffffff;
}
#vergleich.kontrast-hell .fieber-intro {
    color: #003A66;
}
/* PLATZ FÜR DEN KONTRAST-KNOPF AUF SCHMALEN VIEWPORTS (Phase-6-Befund B5).
   `.kontrast-zeile` ist 0 hoch und trägt den Knopf `position: absolute`; der
   Knopf liegt damit IM Kasten des nachfolgenden Intro-Absatzes, nicht daneben.
   Live gemessen (premium, 6.8.2026, Standardmodus — im Hell-Modus identisch,
   die Geometrie hängt an keiner Farbe):

     Viewport | Inhaltskante Intro | linke Knopfkante | Abstand
     ---------|--------------------|------------------|--------
     375      | 340,3 px           | 306,8 px         | **-33,5 px**
     640      | 585,9 px           | 563,0 px         | **-22,9 px**
     1200     | 693,1 px           | 1122,0 px        | +428,9 px (unkritisch)

   Bei 375 endete die LÄNGSTE Zeile des Absatzes bei 337 px und lief damit
   30,2 px unter den Knopf; bei 640 blieben zwischen dem Ende von Zeile 1
   (571 px) und dem Knopf 7,7 px. Der Phase-3-VRT hat Substitutionsunterschiede
   von bis zu 10,3 px zwischen Segoe UI, Roboto und Tahoma gemessen — 7,7 px
   liegen darunter, die Reserve hing also allein an der ausgelieferten Schrift.

   DIE REGEL LÄUFT ÜBER `.fieber-intro`, NICHT ÜBER DEN KNOPF. `.kontrast-zeile`
   und `.kontrast-toggle` sind BESTANDSKLASSEN; eine Regel an ihnen wanderte in
   die Listen- und die Tabellenansicht, die beide dieselben Klassen tragen. Der
   `#vergleich`-Scope ist zugleich das, was die Regel gegen `#vergleich p`
   (style.css:45, `padding:0 5px 0 4px`) durchsetzt: (1,1,0) gegen (1,0,1).

   3.5rem = 56 px = Knopfbreite (38,33 px gemessen) + 17,7 px Luft. Nach dem
   Umbau gemessen: Abstand Inhaltskante-Knopf **+17,5 px bei 375**, **+28,1 px
   bei 640**. Der Wert ist bewusst grösser als die reine Knopfbreite, weil die
   Knopfbreite selbst schriftabhängig ist (Glyphe `◐` in einem auto-breiten
   Knopf) — der Abstand dagegen ist reine Layoutgeometrie und damit
   schriftunabhängig.
   PREIS, GEMESSEN UND HINGENOMMEN: bei 375 bricht der Absatz von 8 auf 9
   Zeilen (172 -> 193,6 px). Das kosten 2.75rem, 3rem und 3.5rem gleichermassen
   — die neunte Zeile entsteht schon beim kleinsten Wert, deshalb ist der
   grösste der drei der einzige, der dafür etwas zurückgibt. Bei 640 kostet er
   gar nichts (5 Zeilen vorher wie nachher).

   ⛔ DIESE REGEL IST AM 06.08.2026 ERSATZLOS ENTFALLEN (E41). Der ganze Block
   darüber steht als Grabstein, weil er die Geometrie erklärt, die zu ihr
   geführt hat — die Regel selbst ist weg, und sie darf nicht zurück.

   GRUND: E41 hat den Intro-Absatz aus der ersten Position des Dashboards
   unmittelbar über den Trefferzähler verschoben. Damit ist die VORAUSSETZUNG
   des Befundes entfallen, nicht nur seine Wirkung: der Knopf hängt `absolute`
   an `.kontrast-zeile` (die selbst `position: relative` ist und VOR dem
   Dashboard steht) und kann den Absatz gar nicht mehr erreichen. Gemessen nach
   dem Umzug (06.08.2026, niedriger Kartenpreis):

     Viewport | Knopf-Unterkante | Intro-Oberkante | Abstand
     ---------|------------------|-----------------|--------
     375      | y = 130          | y = 411         | **+281 px**
     640      | y = 224          | y = 503         | **+279 px**

   Zusätzlich der Gegentest über alle Elemente in `#vergleich`, deren Kasten den
   Knopf überlappt: bei 375 **kein einziges**, bei 640 nur der Dashboard-Container
   selbst (kein Textknoten). Der Absatz ist also nicht bloss zufällig weit weg.

   ⚠ SIE STEHENZULASSEN WÄRE NICHT NEUTRAL GEWESEN. Sie hätte 56 px für einen
   Knopf reserviert, der 281 px weiter oben steht — und dafür bei 375 die
   neunte Zeile bezahlt, die der Block oben als „Preis" ausweist. Isoliert
   nachgemessen durch Abschalten im Browser: **21,51 px Absatzhöhe** und 22 px
   Dokumenthöhe bei 375, **0 px** bei 640. Der Preis war real, der Gegenwert ist
   es nicht mehr.

   ⚠ WER DEN INTRO-ABSATZ JE WIEDER NACH OBEN ZIEHT, holt den Befund B5 zurück
   und braucht diese Regel wieder. Das ist der Grund, warum hier ein Grabstein
   steht und keine gelöschte Zeile: die Messwerte oben sind dann sofort wieder
   die richtigen. */

/* Profil-Beschreibung: Bestands-Parität zu Liste und Tabelle, Werte
   zeichengleich zum Listen-Core :446 (Basis) und :675 (Mobile). `--text-secondary`
   wird von der geteilten CSS unter `.kontrast-hell .vergleich-dashboard` selbst
   umgeschaltet (rgba(255,255,255,0.7) -> rgba(0,0,0,0.88)) — deshalb hier kein
   eigenes Hell-Pendant, wie beim Kurvenblick. */
.fieber-dashboard .profil-beschreibung {
    font-size: 0.82rem;
    color: var(--text-secondary, #aab);
    line-height: 1.5;
    margin: 0.5em auto 2.5em;
    text-align: center;
    max-width: 44em;
}
@media (max-width: 38em) {
    .fieber-dashboard .profil-beschreibung {
        margin: 0.375em auto 1em;
        font-size: 0.8rem;
        line-height: 1.45;
    }
}

/* Scroll-Strip der Profil-Pills: Fade-Kanten wie im Listen-Core :585-597 — aber
   OHNE die dortige unbedingte Basisregel.
   Grund: im Bestand faded die Basisregel beide Kanten und wird sofort von
   `.scroll-start`/`.scroll-end` überschrieben, die sein Inline-JS `initScrollNav`
   (Listen-Core :1465-1483) noch im selben Tick setzt; die Basis trifft dort also
   nur den Mid-Scroll. Dieses JS lädt die Fieberkarte nicht (Phase 5 zieht es mit
   den Profil-Segmenten nach) — eine unbedingte Basisregel wäre hier ein
   Dauerschleier auf der einzigen Pill. Deshalb sind nur die beiden Zustände
   ausformuliert: ohne Zustandsklasse kein Schleier, mit Klasse dieselbe Optik wie
   im Bestand. Der Kurvenblick führt für seinen `.nav-scroll-wrapper` (Core :531)
   aus demselben Grund gar keine Regel.
   NACHZUG PHASE 5 — die offene Auflage ist hiermit geschlossen. Die drei
   Profil-Segmente stehen seit §5b, der Strip kann scrollen, also sind jetzt
   ALLE VIER Zustände des Bestands ausformuliert (Listen-Core :585-597):

     kein Zustandsattribut  -> beide Kanten faden   (Mid-Scroll)
     .scroll-start          -> nur rechts faden     (ganz links)
     .scroll-end            -> nur links faden      (ganz rechts)
     .scroll-start.scroll-end -> gar nicht faden    (passt vollständig)

   ⚠ DER MID-SCROLL-ZUSTAND IST EINE ABMACHUNG MIT DER ENGINE, KEINE REINE
   CSS-REGEL. „Kein Zustandsattribut" heisst im DOM zweierlei: entweder der
   Strip steht wirklich mittendrin, ODER niemand pflegt die Klassen. Im zweiten
   Fall liegt der Schleier dauerhaft auf einem Strip, der gar nicht scrollt —
   genau das, wovor der Phase-1-Kommentar an dieser Stelle gewarnt hat. Der
   Bestand hat dieselbe Ambiguität und löst sie ausschliesslich dadurch, dass
   `initScrollNav` die Klassen NOCH IM SELBEN TICK setzt und dabei bei einem
   Strip, der vollständig ins Bild passt, BEIDE setzt (`atStart` und `atEnd`
   sind dann gleichzeitig wahr, Listen-Core :1470-1474).

   Damit ist die Anforderung an die Engine benannt und prüfbar: sie muss die
   beiden Klassen auf `.nav-scroll-wrapper` führen. Der vierte Zustand unten
   ist der Grund, warum das nicht nur Kosmetik ist — ohne ihn läge der Schleier
   auch auf dem Strip, der vollständig passt. */
@media (max-width: 52em) {
    /* CT-0082 (26.08.2026) — DER KARTENUMSATZ-STRIP TEILT SICH DIESE VIER
       ZUSTÄNDE MIT DEM PROFIL-STRIP.

       Bis dahin war die Fieberkarte die einzige der drei Ansichten, deren
       Kartenumsatz-Band ohne Überlauf-Andeutung abgeschnitten wurde: Liste und
       Tabelle haben die Maske seit CT-0008 (23.08.2026), hier fehlte sie ganz —
       samt Trägerknoten. Gemessen an der Live-Seite am 26.08.2026, alle drei
       Profile, `.sub-auswahl .toggle-group`:

         320px  scrollWidth 289 / clientWidth 256  →  33px Überlauf
         360px  295 / 295, 375px 310 / 310, ab 600px 400 / 400  →  kein Überlauf

       Die Andeutung wird also nur unterhalb rund 340px sichtbar — genau wie in
       den beiden Schwester-Ansichten.

       ⚠ BEWUSST IN DENSELBEN SELEKTORLISTEN statt in einem eigenen Block. Das
       ist die Begründung des Tabellen-Cores, wörtlich übernommen: so kann die
       Maske der beiden untereinanderliegenden Strips gar nicht erst
       auseinanderlaufen. Eigene KLASSE statt Wiederverwendung von
       `.nav-scroll-wrapper`, weil `bindeProfilStrip()` seinen Wrapper mit
       `ersteKlasse(document, …)` sucht — zwei Knoten gleicher Klasse liessen den
       zweiten ohne Zustandsklassen und damit dauerhaft beidseitig gefadet.

       ⚠ DIE MASKE GEHÖRT AUF DEN WRAPPER, NIE AUF DIE `.toggle-group` SELBST.
       Auf einem Scroll-Container wandert sie mit dem Inhalt mit (im CT-0008-Lauf
       an der Tabelle gemessen: eine harte Maskenkante bei 50% wanderte um die
       volle Scrollweite). Genau deshalb hat auch der Profil-Strip seinen
       Wrapper.

       ⚠ DIE `width: 100%`-ZEILE IST PFLICHT, UND IHRE WIRKUNG IST IN DIESER
       ANSICHT GEMESSEN (26.08.2026, lokale Buehne, Regel im Browser aus dem
       Stylesheet entfernt und derselbe Stand zweimal vermessen — Beleg
       `memory/berichte/ct-0082/mess-width.mjs`):

         Breite   Wrapper mit Regel   ohne Regel   linke Kante des Strips
          320       268,81 px          288,91 px    22,39 → 12,34 px
          360       308,02 px          288,91 px    22,39 → 31,94 px
          375       322,72 px          288,91 px    22,39 → 39,30 px
          600       400,00 px          288,91 px    94,00 → 149,55 px
         1366       400,98 px          400,98 px    unveraendert

       Ohne die Zeile nimmt der Wrapper bei JEDER Breite bis 52em dieselben
       288,91 px an — seine max-content-Breite, also die volle nowrap-Reihe der
       drei Segmente. Daraus folgen ZWEI verschiedene Schaeden, je nach Viewport:

         • bei 320 ist max-content GROESSER als der Container: das Band tritt
           beidseitig aus, die linke Kante wandert um 10 px nach aussen — und
           der Ueberlauf im Strip verschwindet dabei von 20 px auf 0, die Maske
           haette also nichts mehr anzudeuten.
         • ab 360 ist max-content KLEINER: das Band schnurrt auf Inhaltsbreite
           zusammen (bei 600 um 111 px), waehrend die Leiste daneben breit bleibt.

       Ab 52em traegt die Zeile nichts bei (1366: Delta 0) — dort stretcht der
       Wrapper ohnehin, weil `align-items` in der geteilten `.filter-group` nur
       im 48em-Block auf `center` steht (hier nachgemessen: 320/360/375/600
       `center`, 1366 `normal`).

       ⚠ DIE ZWEITE HAELFTE MACHT DIE GETEILTE DATEI, NICHT DIESE: die Regel
       `.vergleich-dashboard .filter-group .toggle-group{width:100%}` ist ein
       Nachfahren-Selektor, kein Kind-Kombinator — sie reicht die Breite des
       Wrappers unveraendert an die `.toggle-group` weiter. Genau deshalb ist der
       Wrapper nicht Gegner, sondern Traeger: was er misst, misst die Gruppe. */
    .fieber-dashboard .umsatz-scroll-wrapper { width: 100%; }
    /* Mid-Scroll: beide Kanten. Steht ZUERST, damit die drei spezifischeren
       Zustände darunter sie über die Quellreihenfolge schlagen — sie wiegen
       alle mehr (0,3,0 bzw. 0,4,0 gegen 0,2,0), die Reihenfolge ist also nur
       die Lesehilfe, nicht der Mechanismus. */
    .fieber-dashboard .nav-scroll-wrapper,
    .fieber-dashboard .umsatz-scroll-wrapper {
        -webkit-mask-image: linear-gradient(to right, transparent, black 1.5em, black calc(100% - 1.5em), transparent);
        mask-image: linear-gradient(to right, transparent, black 1.5em, black calc(100% - 1.5em), transparent);
    }
    .fieber-dashboard .nav-scroll-wrapper.scroll-start:not(.scroll-end),
    .fieber-dashboard .umsatz-scroll-wrapper.scroll-start:not(.scroll-end) {
        -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 1.5em), transparent);
        mask-image: linear-gradient(to right, black, black calc(100% - 1.5em), transparent);
    }
    .fieber-dashboard .nav-scroll-wrapper.scroll-end:not(.scroll-start),
    .fieber-dashboard .umsatz-scroll-wrapper.scroll-end:not(.scroll-start) {
        -webkit-mask-image: linear-gradient(to right, transparent, black 1.5em, black);
        mask-image: linear-gradient(to right, transparent, black 1.5em, black);
    }
    /* „Passt vollständig": die Engine setzt beide Klassen. Ohne diese Regel
       bliebe die Mid-Scroll-Maske stehen und schnitte die äusseren Pillen an,
       obwohl es nichts zu scrollen gibt. */
    .fieber-dashboard .nav-scroll-wrapper.scroll-start.scroll-end,
    .fieber-dashboard .umsatz-scroll-wrapper.scroll-start.scroll-end {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ==========================================================================
   §5b BEDIENLEISTE (Phase 5)
   --------------------------------------------------------------------------
   Profil-Strip, Kartenumsatz-Toggle, „weitere Filter"-Button samt Panel,
   Reset-Zeile und Trefferzähler. Der Core rendert sie serverseitig in
   `div.vergleich-dashboard.fieber-dashboard`, also INNERHALB von `#vergleich`
   und OBERHALB von `#fieber-buehne`.

   WAS HIER NICHT STEHT, IST DER EIGENTLICHE BEFUND: Die Optik der Leiste kommt
   fast vollständig aus `vergleich.min.css`, die wir bereits laden. Live
   ausgelesen und gegengeprüft (Vorbild-Erhebung §E) — von dort kommen ohne
   eine einzige Zeile hier: der Kontrast-Schalter mitsamt Ecken, Hover, Fokus
   und Hell-Zweig; Geometrie und Zustände von `.laufzeit-nav`/`.laufzeit-pill`;
   `.filter-section`/`.filter-group`/`.filter-label`/`.toggle-group`/
   `.toggle-btn`; der Floating-Button `.anpassen-filter-btn` samt `.ecke*`,
   `.icon-wrap`, `.anpassen-badge`, Fokusring UND dem Reset gegen den
   `.icon`-Leak aus style.css; `.filter-row`/`.filter-column`/
   `.filter-column-title`/`.eingrenzungsfilter*`; die Checkbox-Optik; die
   Amber-Hinweiszeile mit `.filter-reset-btn`; `.result-count`.

   Bedingung dafür ist allein der VORFAHREN-VERTRAG:
     - `#vergleich`            für `.kontrast-zeile`/`.kontrast-toggle` (1,1,0)
     - `.vergleich-dashboard`  für alles übrige der geteilten Datei
     - ein POSITIONIERTER Vorfahr für `.anpassen-filter-btn` (unpräfigiert)
   Die ersten beiden liefert der Core. Den dritten liefert dieser Abschnitt.

   DIESER ABSCHNITT BAUT DESHALB NUR DREI SORTEN REGELN:

   (a) WAS IM BESTAND NUR IM INLINE-<style>-BLOCK DER VORBILD-CORES LEBT.
       Das ist derselbe Fallentyp, den §5 für `.profil-beschreibung` und
       `.nav-scroll-wrapper` schon abgeräumt hat, nur breiter: Scroll-Strip des
       Profil-Bandes, `font-family: inherit` der Segment-Knöpfe, der
       Positionsanker `.anpassen-host`, sämtliche Fokusringe der Leiste und
       — am teuersten — DER GESAMTE HELL-MODUS, der in §9 nachgezogen ist.

   (b) WAS IN `tabelle.min.css` LIEGT, DIE WIR NICHT LADEN. Die
       Overlay-/Backdrop-/Panel-/Schließer-Mechanik des Filter-Panels und die
       0.85-Kontrast-Politur auf `.filter-label`/`.filter-column-title`/
       `.laufzeit-pill`. Der Namens-Vertrag §5.5 nennt für diese Gruppe die
       Referenzwerte des LISTEN-Inline-Blocks; beide Quellen sind an den hier
       übernommenen Stellen wertgleich, geprüft.

   (c) KONTRAST- UND FOKUS-HÄRTUNGEN. Sie sind der einzige Punkt, an dem diese
       Datei bewusst von Liste und Tabelle ABWEICHT, und jede einzelne ist
       gemessen (Belege: memory\berichte\phase-5-css-belege\). Der Grund ist
       E10: 4,5:1 gilt für diese Ansicht, und Parität ist kein Freibrief, sie
       zu unterschreiten. Betroffen sind sechs Werte, die im Bestand zwischen
       2,56:1 und 4,07:1 liegen. Sie sind an ihrer Regel einzeln mit Zahl
       ausgewiesen und im Bericht als Kandidaten für einen späteren
       Cross-View-Rollout vermerkt — das zu entscheiden ist nicht Sache dieser
       Datei.

   EINHEITEN: Wo Werte aus dem Bestand übernommen sind, stehen sie hier in
   `em`/`rem`. Zwei Sorten `px` bleiben und sind begründet: die WCAG-Bodenmaße
   (dieselbe Ausnahme wie in §8a) und die 2-px-Fokusringe des Bestands, die
   dort ohnehin schon in px stehen. Hairlines sind auf `0.0625em` umgerechnet,
   wie überall in dieser Datei.
   ========================================================================== */

/* --- Leak-Reset der Leiste ----------------------------------------------
   §2 ist auf `.fieber-buehne` gescopt und erreicht die Leiste nicht (siehe die
   Korrektur im Kopf von §2). Die Leiste braucht einen EIGENEN Satz — und zwar
   einen anderen: `aside`, `h3`, `table`, `td`, `ol` gibt es hier nicht.

   ⛔ DER GEFÄHRLICHSTE LEAK IST DIE CHECKBOX. `style.css` führt ungescopt

       input[type="checkbox"], input[type="radio"] { position:absolute;
                                                     clip: rect(0,0,0,0) }

   und versteckt damit jede Checkbox der Seite. In BEIDEN Vorbildern ist die
   Regel live nur deshalb wirkungslos, weil dort `position: relative` gesetzt
   ist — `clip` greift ausschliesslich bei `position:absolute|fixed`.

   NACHGESCHLAGEN, NICHT ANGENOMMEN: In unserem Fall setzt das bereits die
   geteilte Datei selbst — `.vergleich-dashboard .filter-checkbox
   input[type="checkbox"]` enthält `position: relative` (0,3,1 gegen 0,1,1).
   Solange der Core die Checkboxen wie vereinbart als
   `label.filter-checkbox > input` INNERHALB des Dashboards rendert, ist der
   Leak also schon abgefangen.

   Die Regel unten bleibt trotzdem, und zwar als RIEGEL, nicht als Dopplung:
   sie hält auch dann, wenn eine Checkbox einmal ausserhalb von
   `.filter-checkbox` steht oder das Panel den Dashboard-Vorfahren verliert.
   Und sie nimmt zusätzlich das `clip` selbst zurück — die geteilte Datei tut
   das NICHT, sie entschärft es nur über die Positionierung. Zwei Schlösser für
   einen Fehler, der die Bedienung vollständig unsichtbar machen würde.

   WAS HIER BEWUSST NICHT ZURÜCKGESETZT WIRD: `style.css:20`
   `input,textarea,select{border:1px solid #006AB5;margin:4px 2px;padding:.4em}`
   trifft die Checkbox ebenfalls. Border und Radius überschreibt die geteilte
   Datei; `margin` und `padding` bleiben stehen — in Liste und Tabelle GENAUSO.
   Ein Reset hier machte die Fieberkarte zur einzigen der drei Ansichten mit
   anderem Zeilenabstand im Filter-Panel. Das ist kein Versehen, sondern die
   Entscheidung gegen eine Divergenz, die niemand bestellt hat. */
.fieber-dashboard input[type="checkbox"],
.fieber-dashboard input[type="radio"] {
    position: relative;
    clip: auto;
}

/* --- Profil-Strip -------------------------------------------------------
   Die Fade-Kanten des Wrappers stehen seit Phase 1 in §5; hier kommt der
   Strip selbst dazu. Ohne diesen Block bräche das Band bei schmalen Viewports
   zweizeilig um, statt zu scrollen — und die vier Maskenzustände aus §5 hätten
   nichts zu maskieren.

   Werte aus dem Listen-Core :563-583 (nicht aus dem Tabellen-Core): die Liste
   führt hier zwei Angaben mehr, die beide zählen — `width/max-width: 100%`,
   damit der Glasmorphismus-Grund bei nur drei Segmenten nicht rechts
   abgeschnitten wird, und `min-height: 2.75em` an der Pille. Die geteilte
   Datei setzt ihr Touchmass erst ab 48em; zwischen 48em und 52em, also genau
   im Tablet-Hochformat, trägt sonst nichts.

   ⚠ DIE BASISREGEL MUSS VOR DEM MEDIA-ZWEIG STEHEN, nicht dahinter. Ein
   `@media` erhöht die Spezifität NICHT — beide Regeln wiegen (0,2,0), und dann
   entscheidet die Quellreihenfolge. Stünde die Basis unten, nähme ihr
   `overflow: visible` dem Zweig sein `overflow-x: auto` und der Strip könnte
   auf keinem schmalen Viewport mehr scrollen: die vier Maskenzustände aus §5
   hingen an einer Bewegung, die es nicht gibt. Genau in dieser Reihenfolge
   steht es auch im Tabellen-Core (:681 vor :731). Der erste Entwurf dieses
   Abschnitts hatte sie vertauscht; gefunden hat es das Wirksamkeits-Gate
   erst, nachdem es um eine schmale Messbreite erweitert wurde — bei 1200 px
   ist der Fehler unsichtbar.

   `position: relative` und `overflow: visible` an der Basis sind kein
   Widerspruch dazu, sondern der Desktop-Fall: dort soll das Band den
   Floating-Knopf überstehen lassen können. */
.fieber-dashboard .laufzeit-nav {
    position: relative;
    margin-bottom: 1.5em;
    overflow: visible;
}
@media (max-width: 52em) {
    .fieber-dashboard .laufzeit-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        /* `safe center`: bei Platz mittig, bei Überbreite sicher am Anfang —
           ohne `safe` schnitte ein zentrierter Überlauf links ab und wäre
           unerreichbar. */
        justify-content: safe center;
        gap: 0.25em;
        padding: 0.2em;
        width: 100%;
        max-width: 100%;
    }
    .fieber-dashboard .laufzeit-nav::-webkit-scrollbar {
        display: none;
    }
    /* ⚠ `max(2.75em, 44px)` STATT DES BESTANDSWERTS `2.75em` — gemessen, nicht
       verschönert. Der Bestand meint mit `2.75em` die 44-px-Trefferfläche;
       das `em` hängt hier aber an `--text-sm` (13 px) bzw. im Zweig ≤38em an
       11 px, und daraus werden 35,75 px, 30,25 px und 27,50 px.

       Schlimmer noch: diese Regel wiegt (0,3,0) und schlägt damit das
       `min-height: 44px`, das die geteilte Datei im Zweig ≤48em selbst setzt
       (0,2,0). Wer den Bestandswert unbesehen übernimmt, MACHT die
       Trefferfläche auf dem Telefon also kleiner, statt sie zu sichern — die
       geteilte Datei hätte es allein besser gemacht.

       Der Boden in px ist dieselbe Konstruktion und dieselbe Begründung wie
       bei den Trefferflächen in §8a: die WCAG-Schwelle ist in CSS-px
       definiert, ein relatives Mass kann sie nicht garantieren. Nach oben
       bleibt `2.75em` bestimmend, sobald die Schrift gross genug ist.

       Die Abweichung ist bewusst: Liste und Tabelle tragen dieselbe Lücke.
       Gemessen mit dem Wirksamkeits-Gate bei 820 / 640 / 375 px. */
    .fieber-dashboard .laufzeit-nav .laufzeit-pill {
        min-height: max(2.75em, 44px);
        scroll-snap-align: center;
        flex-shrink: 0;
        padding-left: 0.75em;
        padding-right: 0.75em;
    }
}

/* KONTRAST-POLITUR DER INAKTIVEN PILLE — gemessen, nicht übernommen.
   Die geteilte Datei gibt der Pille `var(--text-secondary)`, im Standardmodus
   also rgba(255,255,255,0.7). Auf dem Band `rgba(0,82,141,0.4)` über dem
   Dashboardgrund misst das **3,91:1** und unterschreitet E10. Mit 0,85 sind es
   **5,00:1**. Genau diesen Schritt hat der Bestand am 12.06.2026 als
   „Kontrast-Politur (Schwester-Rollout)" schon gemacht — er liegt nur an einer
   Stelle, die wir nicht laden (Listen-Core :462, zentral in tabelle.min.css).

   DIE DREI ZUSTÄNDE MÜSSEN ZUSAMMEN STEHEN. Die Basisregel wiegt hier (1,2,0)
   und schlüge damit auch `.vergleich-dashboard .laufzeit-pill.active` (0,3,0)
   aus der geteilten Datei — die aktive Pille verlöre ihre dunkle Schrift auf
   weisser Fläche und würde weiss auf weiss. Hover und Aktiv sind deshalb keine
   Kür, sondern die Reparatur des Schadens, den die Basisregel sonst anrichtet.
   Gemessen: aktiv #004578 auf #ffffff = **9,89:1**. */
#vergleich .fieber-dashboard .laufzeit-pill {
    color: rgba(255, 255, 255, 0.85);
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
#vergleich .fieber-dashboard .laufzeit-pill:hover {
    color: #ffffff;
}
#vergleich .fieber-dashboard .laufzeit-pill.active {
    color: #004578;
}

/* --- Kartenumsatz-Segment-Control ---------------------------------------
   ⚠ DIE BUTTON-FONT-FALLE IST HIER REAL, und sie ist der Grund, warum dieser
   Block überhaupt existiert. `vergleich.min.css` setzt für
   `.vergleich-dashboard .toggle-btn` KEIN `font-family` (vollständige
   Deklaration live ausgelesen). Ein `<button>` erbt die Schrift des Elternteils
   nicht von selbst — er fällt auf die UA-Schrift zurück, also Arial. Die
   Systemschrift der Vorbilder kommt allein aus deren Inline-Block
   (`.sub-auswahl .toggle-btn{font-family:inherit}`, Liste :473, Tabelle :722),
   und unser Core hat keinen.

   Ohne die eine Zeile unten rendern die drei Umsatz-Pillen in Arial und werden
   breiter als in Liste und Tabelle. Live-Sollwerte zum Nachmessen:
   **112 / 175 / 110 px** bei `font-size: 13px`. Die Profil-Pillen sind davon
   NICHT betroffen — sie sind `<a>`/`<span>` und erben ganz normal. */
.fieber-dashboard .sub-auswahl {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}
.fieber-dashboard .sub-auswahl .filter-label {
    display: block;
}
.fieber-dashboard .sub-auswahl .toggle-btn {
    font-family: inherit;
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* === Stufen-Band (.sub-auswahl), Desktop-Hoehe oberhalb 52em — Anwender-Entscheid 10.09.2026 (CT-0130),
   Variante 1: die Girokonto-DE-Loesung gilt ab jetzt in ALLEN Vergleichsprodukten — 44px-Band
   (toggle-btn min-height:2.75rem), Band inhaltsbreit, Gesamtblock mittig. Zuvor fuehrte nur
   Girokonto DE 44px, die uebrigen Einheiten 31 bzw. 33px (Messtabelle CT-0051).
   ALLE VIER REGELN GEHOEREN ZUSAMMEN: flex:0 0 auto und filter-group width:auto tragen Pillenbreite
   und Bandzentrierung mit; ein isolierter min-height-Nachzug ergaebe eine dritte, nirgends
   abgenommene Optik (Sync-Waechter #12 zu CT-0051, Abschnitt 3.2). display:inline-grid statt
   inline-flex wegen CT-0228: der Schattentext im ::after waere als Flex-Item ein Geschwister NEBEN
   dem Text und addierte die Breite, statt sie zu reservieren.
   Unterhalb 52em bleibt das VERHALTEN des Bestands erhalten (CT-0039/CT-0051) - der vorhandene
   @media-Block traegt dafuer zwei Ruecknahmen dieses Pakets: `.sub-auswahl .filter-group{width:100%}`
   und `padding:0.2em` an der `.sub-auswahl .toggle-group`. Ohne sie schlugen Regel 2 und Regel 3
   mobil durch (gemessen: Dokument-Overflow bei 320px, Band 50,00 -> 60,00px). Der Block ist also
   NICHT unveraendert - wer ihn zurueckbaut, holt beide Regressionen zurueck. === */
.vergleich-dashboard .filter-section.sub-auswahl { justify-content: center; align-items: flex-start; }
.vergleich-dashboard .sub-auswahl .filter-group { width: auto; max-width: none; align-items: flex-start; text-align: start; }
.vergleich-dashboard .sub-auswahl .toggle-group { padding: var(--space-sm); align-items: center; }
.vergleich-dashboard .sub-auswahl .toggle-btn { flex: 0 0 auto; white-space: nowrap; min-height: 2.75rem; display: inline-grid; align-content: center; justify-items: center; }

/* KONTRAST-POLITUR DES INAKTIVEN SEGMENTS — dieselbe Rechnung wie bei der
   Pille, aber hier weicht die Fieberkarte vom Bestand AB: Liste und Tabelle
   haben die Politur 2026-06-12 auf `.laufzeit-pill` und `.filter-label`
   angewandt, den `.toggle-btn` aber ausgelassen. Gemessen liegt er dadurch bei
   **4,04:1** — unter E10. Mit 0,85 sind es **5,18:1**.

   Das ist eine bewusste, im Bericht ausgewiesene Divergenz. Sie ist billiger
   als die Alternative: einen Wert zu übernehmen, von dem wir wissen, dass er
   die Schwelle reisst. Aktiv-Zustand aus demselben Grund wie oben mitgeführt
   (#004578 auf #ffffff = 9,89:1). */
#vergleich .fieber-dashboard .toggle-btn {
    color: rgba(255, 255, 255, 0.85);
}
#vergleich .fieber-dashboard .toggle-btn:hover {
    color: #ffffff;
}
#vergleich .fieber-dashboard .toggle-btn.active {
    color: #004578;
}
/* `--text-muted` = rgba(255,255,255,0.5) misst auf der Filterfläche **2,56:1**.
   Der Bestand führt dafür die Politur auf 0,85 (**4,55:1**) — zentral in
   tabelle.min.css, die wir nicht laden. Wertgleich übernommen, nicht erhöht:
   4,55 hält die Schwelle, und ein eigener Wert wäre eine Divergenz ohne Not.
   Die dünne Reserve ist bekannt und steht im Bericht. */
#vergleich .fieber-dashboard .filter-label,
#vergleich .fieber-dashboard .filter-column-title {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 52em) {
    /* Segment-Band als Scroll-Strip, spiegelbildlich zum Profil-Band. Die
       Spezifität (0,3,0) ist nötig, nicht Zierde: die geteilte Datei setzt im
       Zweig ≤48em `.vergleich-dashboard .filter-group .toggle-btn{flex:1;
       white-space:normal}` — ebenfalls (0,3,0) —, und ohne Gegenstück
       schrumpfte die mittlere Pille und bräche zweizeilig um. */
    .fieber-dashboard .sub-auswahl .toggle-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: safe center;
        gap: 0.25em;
        padding: 0.2em; /* an das @52em-Nav-Padding (.laufzeit-nav 0.2em) gekoppelt -> Band-Hoehe = Kontoprofil-Leiste auch mobil (50px Tablet); nicht-medial sind es 8px=nav (60px Desktop) - CT-0130. Hier zieht die .laufzeit-nav ihre mobilen 3px aus dem geteilten Zweig (.vergleich-dashboard .laufzeit-nav{gap:0;padding:3px}) statt aus einem eigenen 0.2em wie in der Girokonto-DE-Vorlage; 0.2em = 3,2px haelt die Kopplung. */
    }
    .fieber-dashboard .sub-auswahl .toggle-group::-webkit-scrollbar {
        display: none;
    }
    .fieber-dashboard .sub-auswahl .toggle-btn {
        padding-left: 0.75em;
        padding-right: 0.75em;
        flex-shrink: 0;
        white-space: nowrap;
        min-height: 2.75rem;
    }
    .vergleich-dashboard .sub-auswahl .filter-group { width: 100%; } /* <=52em: Gesamtblock vollbreit (>52em ist er inhaltsbreit + zentriert) - CT-0130, sonst Dokument-Overflow bei 320px */
}

/* --- Positionsanker des „weitere Filter"-Buttons ------------------------
   `.anpassen-filter-btn` ist in der geteilten Datei UNPRÄFIGIERT und
   `position: absolute; right: 1.25em; bottom: -1.5em`. Sie greift bei uns also
   ohne Zutun — aber ihr Bezugsrahmen ist der nächste POSITIONIERTE Vorfahr,
   und der kommt im Bestand aus dem Inline-Block, nicht aus der geteilten
   Datei. Fehlt er, hängt der Knopf am Viewport statt an der Umsatzleiste.

   `overflow: visible` gehört dazu: `bottom: -1.5em` schiebt den Knopf
   absichtlich über die Unterkante seines Hosts hinaus. Die beiden Margins sind
   zeichengleich aus Liste :160 und Tabelle :685 übernommen — sie holen den
   Überstand wieder aus dem Textfluss heraus. */
.fieber-dashboard .anpassen-host {
    position: relative;
    margin-top: -1.1em;
    margin-bottom: 2.3em;
    overflow: visible;
}
/* Den Positionskontext des Profil-Bandes (Tabellen-Core :681) trägt bereits
   die Basisregel weiter oben — sie MUSS dort stehen, siehe die Begründung an
   ihrem Media-Zweig. */

/* OFFEN-ZUSTAND DES KNOPFES ÜBER `aria-expanded`, NICHT NUR ÜBER `.open`.
   Die geteilte Datei führt für den gedrückten Knopf ausschliesslich
   `.anpassen-filter-btn.open`. Diese Klasse setzt im Bestand der Inline-Block
   der Vorbilder; unsere Engine führt den Zustand dagegen am Overlay
   (`fieber-filter-offen`) und am Knopf über `aria-expanded` — beides steht so
   im Namens-Vertrag §4.5. Ohne die Regel unten bliebe der Knopf optisch
   unverändert, während sein Panel offen steht.

   Der Attributselektor ist hier die richtige Wahl und nicht bloss die
   bequeme: `aria-expanded` MUSS ohnehin gepflegt werden, weil Screenreader es
   vorlesen. Eine zusätzliche Klasse allein für die Optik wäre eine zweite
   Wahrheit über denselben Zustand — und die läuft irgendwann auseinander.
   Der Wert ist derselbe wie beim Hover, ebenfalls aus der geteilten Datei
   übernommen. */
.fieber-dashboard .anpassen-filter-btn[aria-expanded="true"] {
    background-color: rgba(13, 110, 175, 0.96);
}

/* --- Filter-Panel („weitere Filter") ------------------------------------
   Der einzige Teil der Leiste, für den es in keiner von UNS geladenen Datei
   eine Regel gibt: im Bestand liegt er in `tabelle.min.css` (Tabelle) bzw. im
   Inline-Block (Liste). Beide Quellen sind an diesen Stellen wertgleich.

   ⚠ `backdrop-filter` STEHT AUF DEM PANEL, NIEMALS AUF DEM OVERLAY. Ein Filter
   auf dem Overlay machte dieses zum Containing Block seiner `fixed`-Kinder —
   dann klebte der Backdrop nicht mehr am Viewport, sondern am Overlay, und
   die Abdunklung endete an dessen Kante. Dieselbe Grenze ist in §8a für das
   Detail-Panel ausformuliert (E12).

   ⚠ DIESELBE MOBILMENÜ-GRENZE WIE IN §8a — und mit CT-0188 (13.09.2026) ERLEDIGT:
   Panel und Backdrop lagen in `#content`, das bei offenem Mobilmenü (`#offen:target`)
   `transform` und `filter` bekommt und damit zum Containing Block seiner
   `fixed`-Nachfahren wurde. Seit der Core `#content` und `#nonFooter` selbst schließt,
   liegen beide auf body-Ebene und beziehen sich auf den Viewport.

   KEINE `opacity` — und das kostet nichts. Der Bestand blendet Panel und
   Backdrop über `opacity: 0 -> 1` ein. Diese Blende LÄUFT LIVE GAR NICHT: die
   Klasse `.open` schaltet im selben Frame `display: none -> block`, und über
   einen `display`-Wechsel hinweg startet kein Übergang. Was bleibt, ist der
   Einschub über `transform` — der ist hier übernommen. Die Ansicht verliert
   also nichts, und das `opacity`-Verbot dieser Phase (§1 des Namens-Vertrags)
   bleibt ausnahmslos. */
/* ⚠ DER OFFEN-ZUSTAND HEISST `fieber-filter-offen`, NICHT `open`. Der
   Namens-Vertrag hat diesen Namen vergessen; die Engine hat ihn vergeben, als
   Gegenstück zum bestehenden `fieber-panel-offen` des Detailpanels. Der Wechsel
   vom Bestandswort `open` ist damit bewusst und nicht versehentlich.

   ⚠ UND ER IST STILL GEFÄHRLICH: die Engine hängt ihre Logik an einer
   Modulvariablen, nicht an der Klasse. Ein abweichender Name hier kostet also
   NICHT die Bedienbarkeit — das Panel öffnete funktionierend, bliebe aber
   `display: none` und damit unsichtbar. Es gäbe keinen Fehler in der Konsole,
   nur ein Panel, das nicht erscheint. Auffallen würde das erst im VRT.

   Das Bestandswort `open` bleibt an genau einer Stelle stehen: am
   Floating-Button, wo die geteilte `vergleich.min.css` es selbst führt
   (`.anpassen-filter-btn.open`). Siehe dort. */
.fieber-dashboard .anpassen-overlay {
    display: none;
}
.fieber-dashboard .anpassen-overlay.fieber-filter-offen {
    display: block;
}
.fieber-dashboard .anpassen-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 100;
}
.fieber-dashboard .anpassen-panel {
    position: relative;
    z-index: 101;
    width: 90%;
    max-width: 60rem;
    margin: -3em auto 1em;
    padding: 1.75em 1.5em 1.25em;
    border: 0.0625em solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75em;
    background-color: rgba(9, 87, 143, 0.92);
    backdrop-filter: blur(1.25em);
    -webkit-backdrop-filter: blur(1.25em);
    box-shadow: 0 0.5em 2.5em rgba(0, 0, 0, 0.35),
                0 0.125em 0.5em rgba(0, 0, 0, 0.2),
                inset 0 0.0625em 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-0.75em);
    transition: transform 125ms ease;
}
.fieber-dashboard .anpassen-overlay.fieber-filter-offen .anpassen-panel {
    transform: translateY(0);
}
@media (max-width: 38em) {
    /* Volle Breite ohne den 5%-Rand: `calc(50% - 47.5vw)` zieht das Panel aus
       dem eingerückten Fluss heraus auf 95vw. Zeichengleich zum Bestand. */
    .fieber-dashboard .anpassen-panel {
        width: 95vw;
        max-width: none;
        margin: -3em 0 1em calc(50% - 47.5vw);
    }
}

/* Der Schließer. Zwei Abweichungen vom Bestand, beide begründet:

   1. `min-width`/`min-height` in px als BODENMASS. `1.85em` bei `1.5rem`
      Schriftgrösse sind 44,4 px — das hält WCAG 2.5.8, aber nur solange die
      Wurzelschrift 16 px beträgt. Dieselbe px-Ausnahme und dieselbe Begründung
      wie beim Schließer des Detail-Panels in §8a; dort steht sie ausführlich.

   2. KEIN `outline: none`. Der Bestand nimmt dem Knopf im `:focus`-Zustand den
      Ring ab und ersetzt ihn nur durch einen Flächenwechsel. Das ist für
      Tastaturnutzer zu wenig, und es wäre die einzige Stelle dieser Datei ohne
      sichtbaren Fokus. Der Ring steht deshalb hier, in derselben Sprache wie
      die übrigen Ringe der Leiste. */
.fieber-dashboard .panel-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.85em;
    height: 1.85em;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-top-right-radius: 0.5em;
    background-color: rgba(48, 55, 61, 0.85);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 125ms ease, color 125ms ease;
    z-index: 102;
}
.fieber-dashboard .panel-close-btn:hover,
.fieber-dashboard .panel-close-btn:focus {
    background-color: rgba(61, 69, 76, 0.85);
    color: #ffffff;
}

/* Panel-Überschrift. Der Bestand gibt ihr rgba(170,170,187,0.95) — auf der
   durchmischten Panelfläche gemessen **3,23:1**, also unter E10. Sie trägt
   hier stattdessen die 0,85-Politur, die der Bestand seinen übrigen
   Filter-Beschriftungen ohnehin gibt: **6,14:1**. Ausgewiesene Divergenz. */
.fieber-dashboard .filter-panel-titel {
    display: block;
    padding-bottom: 0.5em;
    margin-bottom: 0.75em;
    border-bottom: 0.0625em solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.7rem;
    font-weight: 600;
    /* Der Bestand schreibt hier `0.5px`. Umgerechnet auf die 0.7rem dieser
       Zeile sind das 0.045em — wertgleich bei 16px-Wurzelmaß und ohne den
       px-Fremdkörper, den die Einheiten-Konvention dieser Datei sonst nur für
       WCAG-Bodenmaße zulässt. */
    letter-spacing: 0.045em;
    text-transform: uppercase;
}
/* Die beiden Eingrenzungs-Beschriftungen holen ihre Farbe und Grösse aus der
   geteilten Datei (`var(--text-secondary)`, gemessen 4,71:1 — trägt). Hier
   steht, was im Bestand aus tabelle.min.css kommt — aus einer Datei also, die
   diese Ansicht nicht lädt: `display: block`, damit die `<div>`/`<span>`-
   Variante beider Vorbilder gleich bricht.

   ⚠ NACHTRAG v6: `display: block` WAR NICHT ALLES. `line-height: 1.4` steht
   ebenfalls ausschliesslich in `tabelle.min.css`. Ohne die Zeile erbt der
   Hinweis die Zeilenhöhe des Panels — gemessen **26,112 px** bei 10,4 px
   Schriftgrösse, gegen **14,56 px** in der Tabelle; das Filter-Panel wurde
   dadurch 11,57 px höher als das der Schwester.

   DIESELBE FEHLERKLASSE WIE DIE `font-family`-FOOTGUN und im Quelltext ebenso
   unsichtbar: es fehlt etwas, das bei uns nirgends steht. Deshalb ist der
   Befund NICHT durch Lesen entstanden, sondern mechanisch — `tabelle.min.css`
   an ihrer Kaskadenstelle in die gerenderte Fieberkarte gehängt und die
   computed styles aller 1.126 Elemente in `#vergleich` gediffed
   (`memory\berichte\phase-5-fix-v6-belege\fix6-tabelle-gegenprobe.mjs`). Wer
   hier etwas ergänzt, fährt diese Gegenprobe mit; die eigene Datei zu lesen
   genügt für diese Fehlerklasse nachweislich nicht.

   NUR DER HINWEIS, NICHT DIE ÜBERSCHRIFT: die Gegenprobe weist die Abweichung
   ausschliesslich an `.eingrenzungsfilter-hint` nach. `1.4` ohne Einheit, wie
   im Bestand — ein einheitenloser Wert vererbt den Faktor, nicht das Ergebnis,
   und bleibt damit an der Schriftgrösse des Hinweises hängen. */
.fieber-dashboard .eingrenzungsfilter-title,
.fieber-dashboard .eingrenzungsfilter-hint {
    display: block;
}
.fieber-dashboard .eingrenzungsfilter-hint {
    line-height: 1.4;
}

/* Checkbox-Zeile. Die Optik der Box selbst kommt vollständig aus der
   geteilten Datei; hier stehen nur die beiden Werte, die im Bestand aus dem
   Inline-Block kommen — und die Trefferfläche ist davon der wichtigere:
   `.vergleich-dashboard .filter-checkbox` setzt `padding: 3px 0`, und eine
   Filterzeile mit 21 px Höhe ist auf einem Telefon nicht bedienbar. */
.fieber-dashboard .filter-checkbox {
    min-height: 2.75rem;
    line-height: 1.35;
}
/* RAHMEN DER BOX — gemessen als Nicht-Text-Element (WCAG 1.4.11, Schwelle
   3:1). Die geteilte Datei gibt ihm rgba(255,255,255,0.4); auf der
   durchmischten Panelfläche sind das **2,57:1**. Verschärfend: die Füllung der
   ungehakten Box (`rgba(0,82,141,0.4)`) mischt sich auf dem Panelgrund zu
   praktisch derselben Farbe wie das Panel — der Rahmen ist die EINZIGE Kante,
   an der die Box überhaupt zu sehen ist. Mit 0,62 sind es **4,05:1**.
   Dieselbe Lücke haben Liste und Tabelle; ausgewiesene Divergenz. */
#vergleich .fieber-dashboard .filter-checkbox input[type="checkbox"] {
    border-color: rgba(255, 255, 255, 0.62);
}

/* --- Reset-Zeile und Trefferzähler --------------------------------------
   Beide holen ihre Optik aus der geteilten Datei; hier stehen nur die
   Kontrast-Härtungen. Die geteilte Datei setzt für alle drei Texte
   `var(--text-secondary)` = rgba(255,255,255,0.7), gemessen **3,41:1** auf dem
   Dashboardgrund und **3,28:1** auf der Amberfläche der Hinweiszeile. Selbst
   0,85 trägt hier nicht (4,29 bzw. 4,07) — der Grund ist zu hell. Volles Weiss
   misst **5,32:1** bzw. **4,98:1**.

   Der Hover des Reset-Knopfes wechselt im Bestand auf `var(--accent)`
   (#A9F6DB); auf der Amberfläche wären das **4,00:1** und damit ein Rückfall
   unter die Schwelle, ausgerechnet im Hover. Die Rückmeldung liegt hier
   deshalb auf dem RAHMEN — der ist Nicht-Text, 4,00:1 reicht dort (3:1) —,
   während die Schrift weiss bleibt. */
#vergleich .fieber-dashboard .result-count,
#vergleich .fieber-dashboard .aktive-filter-hinweis,
#vergleich .fieber-dashboard .filter-reset-btn {
    color: #ffffff;
}
#vergleich .fieber-dashboard .filter-reset-btn:hover {
    border-color: #A9F6DB;
    color: #ffffff;
}

/* --- Fokusringe der Leiste ----------------------------------------------
   FÜR DIE FÜNF UNTEN DEKLARIERTEN SELEKTOREN gilt: im Bestand stehen ihre
   Ringe ausnahmslos im Inline-Block (Liste :688-702, Tabelle analog), und
   `vergleich.min.css` führt für sie keine Fokusregel — sie fehlen hier deshalb
   und werden hier ergänzt. Ohne sie hätte die neue Leiste nur den UA-Ring —
   auf einer Seite, deren übrige Bedienelemente alle einen eigenen führen.

   ⛔ DIESE LISTE IST BEWUSST NICHT VOLLSTÄNDIG — zwei Elemente der Leiste
   fehlen hier ABSICHTLICH, weil die geteilte Datei sie schon bedient
   (Befund N2 des Phase-5-Reviews; jede Auslassung einzeln gegen
   `vergleich.min.css` geprüft):
     - `.anpassen-filter-btn`  — geteilte Datei liefert den Ring
       (`2px solid #A9F6DB`, `outline-offset:0.18em`), aber KEIN Hell-Pendant.
       Deshalb fehlt er in der Standard-Regel und steht nur im Hell-Zweig.
     - `.kontrast-toggle`      — geteilte Datei deckt BEIDE Modi ab
       (`#DFFDF2` bzw. `#0070C0` im Hell-Zweig). Deshalb fehlt er in beiden.
   Wer diese beiden hier „nachträgt", weil sie in der Elementliste der Leiste
   auftauchen, deklariert den Ring des Filter-Knopfes ein ZWEITES Mal — mit
   abweichendem `outline-offset` (0.125em statt 0.18em) und damit sichtbarem
   Versatz gegenüber Liste und Tabelle. NICHT ERGÄNZEN.

   TON UND MASS SIND DIE DES BESTANDS: `2px solid var(--accent)` = #A9F6DB mit
   `outline-offset: 0.125em`. Die 2 px sind hier keine Ausnahme, die diese
   Datei einführt — sie stehen im Bestand bereits so, und sie erfüllen
   WCAG 2.4.13 ohne Nachhilfe.

   GEMESSEN GEGEN JEDE FLÄCHE, AN DER DER RING WIRKLICH LIEGT (Nicht-Text,
   Schwelle 3:1): Profil-Band **5,05:1**, Segment-Band **5,25:1**, Panel
   **6,29:1**, Amberfläche **4,00:1**, Dashboardgrund **4,28:1**.

   WARUM DIE FÜLLUNG DES FOKUSSIERTEN KNOPFES NICHT ZÄHLT: der Offset ist
   POSITIV, der Ring liegt also aussen und hat auf beiden Seiten den Container
   als Nachbarn, nicht die Fläche des Knopfes. Das ist der Grund, warum die
   aktive Pille — weiss im Standardmodus, #0070C0 im Hell-Modus — den Ring
   nicht schluckt, obwohl #A9F6DB gegen Weiss nur 1,24:1 misst. Ein negativer
   Offset wäre an dieser Stelle ein echter Fehler. */
.fieber-dashboard .laufzeit-pill:focus-visible,
.fieber-dashboard .toggle-btn:focus-visible,
.fieber-dashboard .filter-reset-btn:focus-visible,
.fieber-dashboard .panel-close-btn:focus-visible,
.fieber-dashboard .filter-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid #A9F6DB;
    outline-offset: 0.125em;
}

/* --- Ansichtenumschalter #hilfe -----------------------------------------
   Position, Mobilband und Glyphenfarbe kommen aus `style.css` — die Ruhefarbe
   `var(--mint-200)` ist wertgleich mit dem `#A9F6DB`, das die Vorbilder in
   ihrem Inline-Block noch einmal setzen. Was dort NUR inline steht, ist die
   Rückmeldung beim Zeigen und beim Tastaturfokus; sie fehlt hier sonst.

   `#hilfe` steht als erstes Kind INNERHALB von `#vergleich`, aber absolut
   positioniert über dem Seitengrund — der Hell-Modus wechselt den
   Dashboardgrund unter ihm nicht. Deshalb steht in §9 zu `#hilfe` nichts, und
   das ist Absicht, kein vergessener Zweig. Liste und Tabelle halten es genauso.

   ⚠ KORREKTUR 06.08.2026 (VRT Phase 6, Befund N1). Hier stand als Begründung:
   „die Mintglyphe bleibt in beiden Modi auf Blau (4,28:1, Nicht-Text)". DAS GILT
   NUR FÜR 1200. Ab dem 72em-Band bekommt `#hilfe` einen EIGENEN Grund
   (`style.css:512`, `#subnav li,#hilfe{background:#09578f}`), und dort ist die
   Glyphe nicht mint, sondern dunkelblau auf dunkelblau: bei 640 messen die drei
   inaktiven Symbole **1,07:1** — praktisch unsichtbar, der schärfste
   Kontrastwert des ganzen Projekts.

   AN DER ENTSCHEIDUNG ÄNDERT DAS NICHTS, und zwar aus einem anderen Grund als
   dem hier ursprünglich genannten: Farbe UND Grund stammen beide aus der
   geteilten `style.css`, die Listenansicht misst bei HELL 640 zeichengleich.
   Es ist ein produktübergreifender Bestandsmangel (E33) und in dieser Datei
   nicht reparierbar — ein Hell-Zweig hier würde die Fieberkarte als einziges
   Produkt umfärben. Das Kontrast-Gate führt die vier Signaturen seit dem
   06.08.2026 als benannte Bestands-Ausnahmen B-H05 bis B-H08; **sie decken den
   Mangel ab, sie sprechen ihn nicht frei.**

   Die eigentliche Lehre steht im Gate: bis dahin fuhr es nur 1200 und 375, und
   der schärfste Befund lag exakt in der Lücke dazwischen. */
#hilfe a:hover .icon,
#hilfe a:focus .icon {
    color: #DFFDF2;
}

/* ⛔ `fk-view-icon` — DAS INLINE-SVG DES DRITTEN EINTRAGS BRAUCHT EIGENE
   REGELN, SONST RENDERT DER EINTRAG KAPUTT.

   ⭐ SEIT CT-0332 (09.09.2026, Politur 5) IST DAS ICON EIN EIGENES INLINE-SVG
   (Kreditkarte mit sechs Fieberfeldern) statt der Fontello-Glyphe
   `icon-chart-bar`. Alles unten Gesagte gilt unveraendert weiter: eine
   `.icon`-Klasse, die style.css nicht NAMENTLICH zuruecknimmt, faellt auf
   `font-size: 3em; position: absolute` zurueck — gleichgueltig, ob dahinter eine
   Schriftglyphe oder ein SVG steht. Dazu kommen zwei Zeilen, die es bei einer
   Glyphe nicht brauchte: `width`/`height` am `<i>` (ein SVG bringt kein
   Advance-Mass mit) und die Masse am `svg` selbst.

   `style.css:210` gibt JEDEM `.icon` `font-size: 3em`, `position: absolute` und
   `margin-left: -1.6em`. Das ist für die grossen Inhaltsglyphen gedacht. Für
   die kleinen Umschalter-Glyphen nimmt style.css es wieder zurück — aber
   NAMENTLICH, Klasse für Klasse. `icon-chart-bar` (die Fieberkarte, von
   Builder A gegen die Fontello-Schrift des Servers geprüft: `\e810` vorhanden,
   Klasse definiert in `style.css:247`) steht in keiner dieser Aufzählungen und
   fiele deshalb auf die 3em-Grundregel zurück: dreifach zu gross und absolut
   positioniert aus der Zelle heraus.

   ⚠ ES SIND DREI AUFZÄHLUNGEN, NICHT ZWEI. Der Bauauftrag nannte `style.css:220`
   und `:514`. Nachgeschlagen kommt eine dritte dazwischen, und sie ist die
   praktisch wichtigste, weil sie auf fast jedem Desktop greift:

     :220  (ohne Media)          font-size:1.85em; top:.2em; margin-left:.6em
     :~467 @media max-width:88em font-size:1.30em; top:.4em; margin-left:.8em
     :514  @media max-width:72em font-size:1.20em; position:static; margin:0
                                 (und NUR diese dritte ist auf `#hilfe` gescopt)

   88em sind 1408px — ohne die mittlere Regel stünde die neue Glyphe zwischen
   72em und 88em mit 1,85em neben drei Nachbarn mit 1,30em. Das ist kein
   Rundungsfehler, das ist ein Drittel Grösse Unterschied in der Leiste.

   REIHENFOLGE: Basis vor Media, Media absteigend — sonst schlägt die
   unspezifischere Regel über die Quellreihenfolge (ein `@media` erhöht die
   Spezifität nicht; dieselbe Falle wie beim Profil-Strip weiter oben).

   GESCOPT AUF `#hilfe`, obwohl die beiden ersten Bestandsregeln es nicht sind:
   im geteilten `style.css` darf das nicht passieren, und ein globaler
   `.icon-chart-bar`-Eingriff aus einer Produktdatei heraus wäre genau die Art
   Fernwirkung, die diese Datei sonst vermeidet. `#hilfe .icon-chart-bar`
   wiegt (1,1,0) und schlägt `.icon` (0,1,0) ohne `!important`.

   `position` bleibt in den ersten beiden Regeln UNANGETASTET: die drei
   Bestands-Glyphen sind dort ebenfalls `absolute` (style.css nimmt es erst im
   72em-Band zurück), und ihre Lage entsteht aus `top`/`margin-left` gegen die
   statische Position. Wer hier `static` setzte, rückte die neue Glyphe als
   einzige aus der Flucht. */
#hilfe .fk-view-icon {
    display: inline-block;
    vertical-align: middle;
    /* KASTENMASS DER FONTELLO-NACHBARN, GEMESSEN: die drei Bestands-Glyphen
       rendern 1.2em breit und 1em hoch (34,08 x 28,42 px bei 1500, 23,94 x
       26,11 px bei 1400 — Messung 09.09.2026). Ein SVG hat keine solche
       Vorgabe; ohne diese beiden Zeilen bestimmte der Inhalt das Mass. Genau
       dieses Kastenmass haelt die Mitte der dritten Glyphe an ihrem Platz —
       woran die Kalibrierung der Icon-Zeile am Dateiende haengt. */
    width: 1.2em;
    height: 1em;
    line-height: 1;
    font-size: 1.85em;
    top: 0.2em;
    margin-left: 0.6em;
}
#hilfe .fk-view-icon svg {
    display: block;
    /* 0.7em = 14/20 der Breite, also das Seitenverhaeltnis der viewBox. Der
       Rest von 0.3em verteilt sich als Aussenabstand — so sitzt das Motiv
       mittig im 1em hohen Kasten, ohne dass der Kasten wachsen muesste. */
    width: 100%;
    height: 0.7em;
    margin: 0.15em 0;
}
@media only screen and (max-width: 88em) {
    #hilfe .fk-view-icon {
        font-size: 1.3em;
        /* ⚠ 0.5543em STATT DER 0.4em DER NACHBARGLYPHEN — GEMESSEN, NICHT
           ABGESCHRIEBEN. Der Kasten der Fontello-Glyphen ist in diesem Band
           NICHT 1em hoch: er misst 26,11 px bei 19,968 px Schrift (also
           1.3076em), waehrend er im Basisband 28,42 px bei 28,416 px Schrift
           misst (1.0em). `height: 1em` trifft die Basis deshalb auf 0,01 px
           genau und liegt hier 3,08 px zu hoch. Der Nudge holt genau diese
           3,08 px zurueck (3,08 / 19,968 = 0.1543em). Gegenprobe: mit 0.4em
           stand die Mitte bei 80,40 statt 83,48 px (Viewport 1400), mit
           0.5543em bei 83,48. Dasselbe Mittel wie im Festgeld-Vorbild, dort
           als `top: 2.8px` — hier in `em`, weil diese Datei kein `px` fuehrt. */
        top: 0.5543em;
        margin-left: 0.8em;
    }
}
@media only screen and (max-width: 72em) {
    #hilfe .fk-view-icon {
        font-size: 1.2em;
        position: static;
        margin: 0;
    }
}

/* ==========================================================================
   §5a REGLERLEISTE UND ERGEBNISZEILE (Phase 3, E11)
   --------------------------------------------------------------------------
   Der Core rendert beide als GESCHWISTER der Bühne, unmittelbar davor. Sie
   liegen damit außerhalb von `#fieber-buehne` — die Leak-Resets aus §2 sind
   auf die Bühne gescopet und greifen hier NICHT. Deshalb stehen die beiden
   Resets, die diese Elemente wirklich treffen, an ihrer Regel.

   RESET 1 — `style.css:20` `input,textarea,select{border:1px solid #006ab5;
   margin:4px 2px;padding:.4em}` und `:21` `input,select{border-radius:3px}`.
   Zwei unscoped Typ-Selektoren, gedacht für Formularfelder; sie treffen jedes
   `<input type="range">` und legten einen blauen Rahmen samt Innenabstand und
   Außenabstand um die Spur. Klassen-Spezifität (10) schlägt sie (1), es
   braucht kein `!important`.

   RESET 2 — `style.css:45` `#vergleich p{padding:0 5px 0 4px;line-height:
   1.4em}`. Das ist der Fall, in dem Klassen-Spezifität NICHT reicht: 101 gegen
   10. Hinweistext und Ergebniszeile sind `<p>` innerhalb von `#vergleich`,
   also tragen ihre Regeln hier den `#vergleich`-Präfix statt eines
   `!important`. Die Hell-Pendants in §9 stehen mit `#vergleich.kontrast-hell`
   ohnehin darüber.

   KEIN AUFHELLENDER GRUND (Lehre 7 aus Phase 2 — dieselbe Korrektur, die §8
   an der neutralen Zellfläche schon gemacht hat): Der Dashboardgrund ist
   #0070C0 und trägt weißen Text mit 5,15:1. Eine Ebene rgba(255,255,255,0.10)
   darüber drückte ihn auf 4,34:1, also unter die Schwelle. Die Leiste dunkelt
   deshalb ab — rgba(0,0,0,0.12) ergibt gegen Weiß rechnerisch 6,29:1.

   SCHIEBER IN BROWSER-GRUNDGESTALT: `accent-color` färbt Daumen und gefüllte
   Spur; ein Vendor-Thumb-Styling (`::-webkit-slider-thumb` und Verwandte)
   findet hier bewusst NICHT statt (PLANUNG §6). Es zwänge dazu, Spur, Daumen
   und Fokusring je Engine einzeln nachzubauen, und ein vergessener Zweig
   fiele erst live auf.

   TOUCHZIEL: `min-height: 3rem` sind 48px bei 16px-Wurzelmaß. Die
   Trefferfläche eines `type="range"` ist das ganze Element, nicht der
   sichtbare Daumen — ein Zeigerdruck irgendwo auf der Leiste springt zum
   Wert. Damit trägt WCAG 2.5.8 auch bei 375, ohne den Daumen anzufassen.
   Die 4px über der Schwelle sind Reserve gegen eine verkleinerte
   Wurzelschrift, kein Zufallswert (Nacharbeit H5, Begründung an der Regel).

   KEINE EIGENE BEWEGUNG: dieser Abschnitt setzt weder `transition` noch
   `animation`. §10 hat deshalb nichts zu ergänzen — das ist Absicht, kein
   vergessener Zweig.
   ========================================================================== */
/* ⬆ `margin-top: 3em` SEIT E49 (Anwender-Entscheid 06.08.2026). Die Leiste steht
   seit E42 unter der Matrix und rückte dort ohne Abstand an ihren Unterbau heran;
   mit E48 ist der Marker-Schlüssel dazwischengetreten. Die 3em setzen sie sichtbar
   als eigenen Bereich ab — Bedienung, nicht Fortsetzung der Tabelle.

   ⚠ SIE KOLLABIEREN NICHT WEG: der Vorgänger `.fieber-legende-marker` trägt
   `margin-bottom: 0` (siehe dort), es gibt also keinen konkurrierenden Abstand,
   der die 3em schlucken könnte — angrenzende Aussenabstände kollabieren zum
   GRÖSSEREN der beiden, nicht zur Summe. Wer dem Marker-Block je ein
   `margin-bottom` gibt, ändert diesen Abstand nur, wenn es grösser als 3em ist,
   und macht ihn damit zur zweiten Quelle für denselben Wert. */
.fieber-regler {
    margin: 3em 0 1.1em;
    padding: 0.8em 1em 0.9em;
    border: 0.0625em solid rgba(255, 255, 255, 0.30);
    border-radius: 0.35em;
    background-color: rgba(0, 0, 0, 0.12);
}

.fieber-regler-zeile {
    display: grid;
    /* Feste dritte Spalte statt `auto`: die Wertanzeige wechselt zwischen
       „EUR 0,00" und „EUR 10.000", und eine inhaltsabhängige Spur wanderte
       bei jedem Schritt. `tabular-nums` allein hilft nur innerhalb gleicher
       Zeichenzahl. */
    grid-template-columns: minmax(9em, 15em) 1fr 7em;
    align-items: center;
    gap: 0.2em 0.9em;
    margin-bottom: 0.35em;
}
.fieber-regler-zeile:last-of-type {
    margin-bottom: 0;
}

.fieber-regler-label {
    font-size: 0.88rem;
    line-height: 1.35;
    color: #ffffff;
}

.fieber-regler-schieber {
    /* Reset 1 (siehe Abschnittskopf) — border/margin/padding/radius aus
       style.css:20 und :21. */
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    /* 3rem = 48px bei 16px-Wurzelmaß. Vorher standen hier 2.75rem; Review und VRT
       haben nachgemessen (44,00 px deklariert, 44,75 px effektive Trefferhöhe) —
       die Schwelle war gehalten, aber OHNE JEDE RESERVE. Da `rem` an der
       Wurzelschrift hängt, die der Nutzer im Browser verkleinern kann, fiel der
       Wert dann unter 44. Mit 3rem trägt die Fläche bis herunter zu einer
       Wurzelschrift von 14,67px. Befund H5. */
    min-height: 3rem;
    accent-color: #ffffff;
    cursor: pointer;
}
/* Der Server liefert alle drei Regler `disabled` (E11); die Engine nimmt das
   Attribut erst nach erfolgreichem Render. Solange bleibt die Browser-
   Grundgestalt des ausgegrauten Zustands stehen — nur der Zeiger soll nicht
   Bedienbarkeit versprechen. Keine `opacity`-Dämpfung: die Palette dieses
   Projekts hat dafür keine Reserve, und die Gewohnheit gehört gar nicht erst
   eingeführt. */
.fieber-regler-schieber[disabled] {
    cursor: default;
}
/* ⚠ BODENMASS DER FOKUSRINGE — die Stelle, an der es einmal ausführlich steht;
   die sieben weiteren Ringe dieser Datei verweisen hierher (Befund L-H2).

   DAS PROBLEM WAR NICHT „1 px". Alle Ringe dieser Datei sind mit `0.125em`
   deklariert, und `em` hängt an der Bezugsschrift des jeweiligen Elements.
   Nachgerechnet ergab dieselbe Deklaration acht verschiedene Breiten:

     .fieber-regler-schieber   UA-Schrift des <input> ~13,3px -> ~1,67px
     .fieber-scroller          erbt Dashboardschrift  ~16px   -> ~2,00px
     .fieber-sortier           0.8rem = 12,8px                -> 1,60px
                               im Zweig <=38em 0.74rem        -> 1,48px
     .fieber-karte             wie .fieber-sortier            -> 1,60 / 1,48px
     .fieber-panel             keine font-size, 16px          -> 2,00px
     .fieber-panel-schliessen  1.25rem = 20,0px  (R4, CT-0318) -> 2,50px
     a.fieber-panel-cta        0.9rem = 14,4px                -> 1,80px

   WCAG 2.4.13 verlangt mindestens 2 CSS-px Ringdicke. Vier Stellen lagen
   darunter, eine war grenzwertig, und die beiden SCHLECHTESTEN Werte sind die
   Matrix-Ringe im mobilen Zweig — dort, wo mit dem Daumen gezielt wird.

   DIE ANTWORT IST EIN BODEN, KEIN FESTWERT: `max(2px, 0.125em)`. Das ist
   genau die Konstruktion, die §8a für die Trefferflächen schon führt
   („min-width/min-height in px ziehen den Boden ein, ohne das Wachstum nach
   oben zu nehmen") — nur dass `outline-width` keine `min-`Eigenschaft hat und
   die Funktion deshalb ausgeschrieben werden muss. Bei grösserer Wurzel- oder
   Elementschrift bleibt `0.125em` bestimmend; der 2,70-px-Ring des
   Panel-Schließers verliert also nichts.

   WARUM ALS ZWEITE DEKLARATION UND NICHT IN DER KURZSCHREIBWEISE: Ein Browser,
   der `max()` nicht versteht, verwirft die ganze Deklaration — steht sie in
   der Kurzform `outline`, verlöre er Farbe und Stil gleich mit und zeigte gar
   keinen Ring. Als eigene Zeile hinter der Kurzform fällt er stattdessen auf
   die bisherigen `0.125em` zurück. Ein Rückschritt, aber kein Ausfall.

   DER OFFSET BLEIBT, WIE ER IST — nachgerechnet, nicht beibehalten aus
   Bequemlichkeit. Bei den beiden Matrix-Ringen (`-0.125em`, also nach innen)
   war die Sorge, der Ring verschmelze mit dem Zellrahmen (0.0625em = 1 px).
   Der Rahmen liegt AUSSERHALB der Knopfkante, der Ring 1,60 px (mobil
   1,48 px) INNERHALB — dazwischen bleibt in jedem Fall ein Streifen
   Zellfläche, und der 2-px-Ring endet bei 3,60 px, während der Innenabstand
   des Knopfes erst bei 5,12 px (mobil 4,14 px) Text zulässt. Ein tieferer
   Offset hätte im mobilen Zweig genau diesen Text angeschnitten.

   --- WELCHE RINGE GELTEN FÜR DIE MAUS? (Stand CT-0323, 09.09.2026) --------
   Bis zum 09.09.2026 galt jeder dieser acht Ringe für Maus UND Tastatur; nur
   `.fieber-karte` bekam mit CT-0318 R3 den Vorbehalt `:focus:not(:focus-visible)`.
   CT-0323 zieht die vier PANEL-Stellen nach (Anwender-Auftrag „Bei Klick auf
   die Icons/Elemente den weissen umliegend erscheinenden Rahmen entfernen"):

     NUR TASTATUR (`:focus:not(:focus-visible) { outline: none }`)
       .fieber-karte                                   R3, CT-0318
       .fieber-panel                                   S3, CT-0323
       .fieber-panel-schliessen                        S3, CT-0323
       .fieber-panel-koerper a:not(.fieber-panel-cta)  S3, CT-0323
       a.fieber-panel-cta                              S3, CT-0323

     WEITER FÜR MAUS UND TASTATUR (bewusst, nicht vergessen)
       .fieber-regler-schieber   Bedienelement ohne zweite Rückmeldung
       .fieber-scroller          tabindex="0"-Container, sonst unsichtbar
       .fieber-sortier           Sortierkopf der Matrix

   Die drei unteren tragen keine eigene Klick-Rückmeldung (Aufhellung, Farbe),
   der Ring ist dort die EINZIGE Antwort auf eine Bedienung. Wer sie später
   nachzieht, braucht vorher einen Ersatz — sonst quittiert die Seite den Zug
   am Regler gar nicht mehr. Die Ringbreiten oben ändern sich durch CT-0323
   NICHT: geändert hat sich, WANN der Ring erscheint, nicht WIE breit. */
.fieber-regler-schieber:focus {
    outline: 0.125em solid #ffffff;
    outline-width: max(2px, 0.125em);
    outline-offset: 0.125em;
}

.fieber-regler-wert {
    font-size: 0.88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    color: #ffffff;
}

/* Reset 2: `#vergleich`-Präfix, weil `#vergleich p` sonst padding und
   line-height setzt. */
#vergleich .fieber-regler-hinweis {
    margin: 0.7em 0 0;
    padding: 0;
    max-width: 44em;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #ffffff;
}

#vergleich .fieber-ergebnis {
    margin: 0 0 1.1em;
    padding: 0;
    max-width: 44em;
    /* EINE ZEILE IST RESERVIERT, NICHT DER GANZE SATZ (Phase-6-Befund B3).
       Die Zeile war beim Laden leer und 0 hoch; mit dem ersten Reglerzug
       bekam sie Text, und Legende und Matrix rutschten nach unten. Live
       gemessen (1200, premium, 6.8.2026): Legende vor dem ersten Zug bei
       y = 945,0, danach bei y = 1001,3 — **56,3 px Versatz**. Der Wert setzte
       sich zusammen aus 40,83 px Textkasten (zwei Zeilen) und 15,49 px
       `margin-bottom`, die damals an `:empty` hingen.

       DAS `min-height` HIER TRÄGT DIE VERBESSERUNG PRAKTISCH ALLEIN: es nimmt
       dem Sprung den Textkasten, 56,3 -> rund 20,5 px. Der zusätzliche Wegfall
       der `:empty`-Regel darunter bringt nur noch 0,13 px (bei 375: 2,69 px) —
       im zentralen Messlauf vom 6.8.2026 isoliert gemessen, indem die Regel im
       Browser wieder eingesetzt wurde: 20,41 px ohne sie, 20,53 px mit ihr.

       ⚠ EINE FRÜHERE FASSUNG DIESES KOMMENTARS VERSPRACH HIER „rund 4,9 px".
       Das war ein Rechenfehler in der Vorhersage, kein Messwert: die 15,49 px
       `margin-bottom` wurden vom Sprung abgezogen, obwohl sie nach dem Wegfall
       der Regel in BEIDEN Zuständen stehen und sich damit heraufheben. Wer
       diesen Wert irgendwo wiederfindet, hat eine veraltete Quelle vor sich.

       Wer eines von beidem zurückdreht, bekommt einen Teil des Sprungs zurück
       — beim `min-height` den grossen, beim Regel-Wegfall den kleinen.
       Begründung und Preis stehen am Platz der entfernten Regel weiter unten
       (E36).

       `1.45em` ist KEIN geschätzter Wert, sondern das Produkt der beiden
       Deklarationen unmittelbar darunter: `line-height: 1.45` mal der eigenen
       `font-size` (0.88rem) = 20,42 px = genau eine Zeile. Beide Werte müssen
       zusammen bleiben — wer die `line-height` ändert und das `min-height`
       stehen lässt, reserviert wieder etwas anderes als eine Zeile.

       NACH DEM UMBAU GEMESSEN (1200): reservierte Höhe 20,41 px, Legende beim
       Laden bei y = 981 statt 945, nach dem Reglerzug unverändert bei 1001,3 —
       **Restsprung 20,3 px statt 56,3 px**. Die 36 px, die die Reservierung
       beim Laden kostet, sind die eine Zeile plus die 15,5 px `margin`, die
       jetzt nicht mehr durch das 0 hohe Element hindurchkollabieren.

       DER RESTSPRUNG BLEIBT MIT ABSICHT: der Satz bricht bei 1200 auf zwei, bei
       375 auf vier Zeilen um. Eine Höhe, die alle Fassungen fasst, stünde beim
       Laden als grosse leere Fläche über der Legende — und wäre auf jedem
       Viewport ausser dem schmalsten zu hoch.
       `display: none` bleibt auch hier ausgeschlossen (siehe die Regel für
       `:empty` darunter); `min-height` ändert an der Live-Region nichts, sie
       bleibt durchgehend im Baum. */
    min-height: 1.45em;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #ffffff;
}
/* ⛔ HIER STAND BIS PHASE 6 `#vergleich .fieber-ergebnis:empty { margin: 0 }`.
   SIE IST BEWUSST ENTFERNT (E36, Anwender-Entscheid 06.08.2026) — bitte nicht
   „wiederherstellen", sie sieht nur wie eine vergessene Aufräumregel aus.

   Ihre ursprüngliche Begründung lautete: „ein leeres Blockelement ist ohnehin
   0 hoch, es bleibt also nur der Außenabstand zu nehmen." Dieser Satz ist mit
   dem `min-height` oben hinfällig geworden — das Element ist seither auch leer
   20,42 px hoch, mit Absicht (Befund B3).

   Damit war ihre Wirkung eine andere als gedacht: sie hielt der leeren Zeile
   ihre 1,1 em (15,49 px) Abstand NACH UNTEN vor, und dieser Betrag entstand
   dann erst mit dem Text.

   ⚠ WIE VIEL DAS BRINGT, IST GEMESSEN UND KLEINER ALS ANGENOMMEN. Der zentrale
   Messlauf vom 6.8.2026 hat die Regel im Browser wieder eingesetzt und isoliert
   verglichen: Sprung **20,41 px ohne** die Regel gegen **20,53 px mit** ihr —
   also **0,13 px** Gewinn bei 1200 und 640, **2,69 px** bei 375. Die frühere
   Angabe „rund 4,9 px" war ein Rechenfehler in der Vorhersage: die 15,49 px
   wurden vom Sprung abgezogen, obwohl sie ohne die Regel in BEIDEN Zuständen
   stehen und sich heraufheben. Die eigentliche Verbesserung von 56,3 px auf
   rund 20,5 px leistet das `min-height` oben, nicht dieser Wegfall.

   ⚠ EINEN PREIS HAT DER WEGFALL NICHT — auch das ist gemessen. Eine frühere
   Fassung wies hier „15,49 px zusätzlicher Leerraum beim Laden" aus. Der VRT
   hat den Zustand am 6.8.2026 zerlegt (Regel zur Laufzeit wieder eingesetzt,
   danach zurückgebaut und der Rückbau verifiziert):

       wie gebaut          Regel wieder aktiv
       margin-bottom  15,488 px    0 px      <- #fieber-ergebnis
       margin-top     15,36  px   15,36 px   <- .fieber-buehne
       Luecke         15,48  px   15,36 px
       Differenz .fieber-scroller: -0,13 px, Dokumenthoehe: 0 px

   `#fieber-ergebnis` und `.fieber-buehne` sind benachbarte Geschwister — das
   einzige Element dazwischen ist `#fieber-sortier-ansage` mit
   `position: absolute`, also ausserhalb des Flusses, und es bricht den Kollaps
   nicht. Die Aussenabstaende KOLLABIEREN: 15,488 − 15,36 = 0,128, exakt die
   gemessenen 0,13 px. Der Leerraum ueber der Legende existiert, stammt aber
   aus dem `margin-top` der Buehne und stuende in BEIDEN Zustaenden.

   Fuer die naechste Hand heisst das: dieser Wegfall bringt 0,13 px und kostet
   nichts. Wer ihn zurueckdreht, gewinnt nichts zurueck.

   `display: none` bleibt hier weiterhin AUSGESCHLOSSEN, unabhängig davon: eine
   Live-Region, die im selben Moment eingeblendet wird, in dem sie ihren Text
   bekommt, überhören mehrere Screenreader. Die Region bleibt durchgehend im
   Baum, leer wie gefüllt. */

@media (max-width: 38em) {
    .fieber-regler {
        padding: 0.7em 0.8em 0.8em;
    }
    /* Schmal: die Beschriftung über die volle Breite, darunter Spur und Wert
       nebeneinander. Die Spur behält ihre volle Trefferhöhe.

       DIE WERTSPALTE IST HIER SO BREIT WIE AUF DEM DESKTOP (Nacharbeit, VRT-Befund
       H1). Vorher standen 6em. Der VRT hat die Schriftsubstitution durchgemessen:
       `EUR 10.000` ist in `Segoe UI` 74,88 px breit, in `Roboto`/`Arial` 79,27 px,
       in `Tahoma` 85,20 px — die Spalte trug bei 6em aber nur 76,80 px (das `em`
       zählt gegen die 12,8px-Schrift des Containers, nicht gegen die 0.88rem der
       Wertanzeige). Auf Android löst `BlinkMacSystemFont` auf Roboto auf, und mit
       `white-space: nowrap` ragte der Höchstwert dann rund 2,5 px auf das Ende der
       Reglerspur.

       Warum 7em und nicht die vom VRT vorgeschlagenen 6.6em: 6.6em (84,48 px) deckt
       Roboto, aber nicht Tahoma. 7em (89,60 px) deckt alle drei gemessenen
       Substitutionen, macht die Spalte identisch zur Basisregel — ein Sonderwert
       weniger — und kostet die Spur nur rund 13 px von gemessenen 243 px. Die
       BESCHRIFTUNG verliert dabei nichts: sie steht auf `grid-column: 1 / -1` und
       spannt ohnehin über beide Spalten. */
    .fieber-regler-zeile {
        grid-template-columns: 1fr 7em;
        gap: 0.1em 0.7em;
        margin-bottom: 0.55em;
    }
    .fieber-regler-label {
        grid-column: 1 / -1;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   §6 LEGENDE DER FIEBERSKALA (Phase 2, H11)
   --------------------------------------------------------------------------
   Die Hülle rendert der Core als ERSTES Kind der Bühne — also VOR dem Mount und
   damit außerhalb jedes Teil-Redraws (Namens-Vertrag §2.1). Die sieben
   Kästchen trägt die Engine ein, mit denselben Inline-Farben wie die Zellen.

   SICHTBARKEIT AM RENDER-ERFOLG, nicht am Parse: die Legende erklärt eine
   Skala, die es ohne gerenderte Matrix nicht gibt. Sie hängt deshalb am selben
   Schalter wie die Fallback-Tabelle — zeichengleich zu §3, nur umgekehrt.
   Steigt `zeichneMatrix()` nach dem Füllen der Legende aus, bleibt sie korrekt
   verborgen.

   Diese Datei liefert nur Kästchengröße, Abstand und Typografie — keine Farbe
   der Stufen (E10).
   ========================================================================== */
.fieber-legende {
    display: none;
}
.fieber-js .fieber-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em 0.75em;
    margin: 0 0 0.75em;
}
.fieber-legende-titel {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
}
.fieber-legende-skala {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15em;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fieber-legende-stufe {
    padding: 0.15em 0.55em;
    font-size: 0.72rem;
    line-height: 1.5;
    /* Derselbe Rahmen wie die Zellen, aus demselben Grund: mehrere Stufen
       heben sich allein über die Füllung nicht vom Grund ab. */
    border: 0.0625em solid #F1F6FC;
}
/* SCHRAFFIERTES LEGENDENKÄSTCHEN „nicht bewertet" (E78, 12.09.2026, CT-0404).
   Das Markup rendert der CORE statisch, als Geschwister der Skalenliste und
   innerhalb von `.fieber-legende` — nicht die Engine: die Fläche ist KEINE
   Palettenstufe, und E10 bindet nur die Stufenfarben an die Inline-Regel.
   Sichtbar wird das Kästchen über denselben Schalter wie die ganze Legende
   (`.fieber-js .fieber-legende`).

   MASSE UND TYPOGRAFIE ZEICHENGLEICH ZU `.fieber-legende-stufe` — bewusst als
   eigene Deklaration und nicht per Sammelselektor: das Kästchen ist ein <span>
   in einem Flexkontext, die Stufen sind <li> in einem eigenen Flexkontext; ihre
   gemeinsame Höhe ist deshalb ein GEMESSENES Ergebnis (Abschnitt 35, A5), kein
   Nebeneffekt einer geteilten Regel. Fläche und Schraffur teilt es dagegen über
   dieselben Selektorlisten wie die Zelle — dort IST Gleichheit die Aussage.
   `display: block` steht hier nicht: als Flex-Item ist der <span> ohnehin
   blockifiziert. */
.fieber-legende-unbewertet {
    padding: 0.15em 0.55em;
    font-size: 0.72rem;
    line-height: 1.5;
    color: #ffffff;
    border: 0.0625em solid #F1F6FC;
}
/* 0.8rem seit CT-0316 P1 (09.09.2026, vorher 0.75rem): dieselbe Stufe, die
   `.fieber-legende-titel` schon trägt — die Leiter bekommt keinen neuen Wert,
   der Hinweis rückt nur eine Stufe hoch. Die Farbkästchen (`.fieber-legende-stufe`,
   0.72rem) bleiben bewusst darunter: sie tragen Kurztexte in einer Kachel, kein
   Fließtext. */
.fieber-legende-hinweis {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #ffffff;
}

/* Auflösung der vier Fußnoten-Zeichen (E9). Das Markup rendert der CORE
   statisch (Namens-Vertrag §2.1): `div.fieber-legende-marker` mit einer
   `dl.fieber-legende-marker-liste` aus vier dt/dd-Paaren.

   DIESE VIER <dd> SIND DIE EINZIGE FASSUNG DER TEXTE. Die Engine baut hier
   nichts, sondern LIEST sie zur Laufzeit aus dem DOM und setzt sie als
   sr-only-Auflösung und `title` an den Marker in der Zelle (Review-Befund B1).
   Hier stand vorher, beide Fassungen „müssten wörtlich übereinstimmen" — genau
   diese Zusage war gebrochen. Sie ist durch eine Konstruktion ersetzt, in der es
   nichts abzugleichen gibt: Wer den Wortlaut ändert, ändert ihn im Core, und die
   vorgelesene Fassung zieht ohne Zutun mit.

   ⛔ HIER STAND BIS E48: „`flex-basis: 100%` bricht die Zeile: Skala und
   Markerliste nebeneinander ergäben auf schmalen Viewports eine Rutschbahn aus
   Kurztexten." Das beschreibt einen Zustand, den es nicht mehr gibt — der Block
   ist seit dem 06.08.2026 **kein Kind der Legende mehr** und damit auch kein
   Flex-Item; die Eigenschaft ist entfallen (Begründung an der Regel unten).
   Das Problem, das sie löste, kann in der neuen Lage gar nicht mehr auftreten:
   der Block steht allein unter der Matrix, es gibt nichts, woneben er rutschen
   könnte.

   ZWEISPALTIGES GRID AUF ALLEN BREITEN, ein Paar je Zeile. `auto 1fr` gibt dem
   Markerzeichen seine eigene schmale Spalte und lässt den Text fliessen; bei
   mehrzeiligen Erklärungen bleibt die zweite Zeile am Text ausgerichtet und
   rutscht nicht unter das Zeichen.

   Zuerst als Fliesstext gebaut (dt/dd `inline`) und wieder verworfen: die vier
   Erklärungen sind zusammen über 700 Zeichen lang (Stand 25.07.2026: 190, 202,
   204 und 128), hintereinander ergeben sie einen dichten Absatz, in dem die
   Grenzen zwischen den Einträgen nur noch von den kleinen hochgestellten Zeichen
   markiert werden.
   Die Zahl „rund 55 Zeichen" stand hier bis zur Nacharbeit und war nie richtig —
   sie stammte aus einer früheren, engine-eigenen Kurzfassung, die es seit dem
   B1-Umbau nicht mehr gibt. Die Layout-Entscheidung war davon unberührt (sie
   wird durch die echten Längen sogar besser gestützt), aber eine Begründung, die
   eine falsche Messung nennt, wird von der nächsten Session zu Recht verworfen.
   ⚠ Diese Längen stehen im Core und ändern sich mit ihm; sie sind Kontext, kein
   Vertrag. Ein Flex-Container
   scheidet aus demselben Grund aus wie zuvor: dort wären Zeichen und Text
   gleichrangige Kacheln, und der Abstand innerhalb eines Paares liesse sich
   nicht vom Abstand zwischen zwei Paaren unterscheiden.

   Bewusst KEINE mehrspaltige Variante auf breiten Viewports: zwei Paare
   nebeneinander halbieren die Textspalte, und gerade der lange ³-Text bräche
   dann mehrfach um. Vier kurze Zeilen untereinander lesen sich als Fussnoten-
   schlüssel, was sie sind.

   Der Bestand führt keine unscoped dl/dt/dd-Regel (geprüft); die
   Browser-Voreinstellung `dd{margin-left:40px}` ist durch das Grid und das
   zurückgesetzte margin neutralisiert. */
/* ⬇ SEIT E48 (06.08.2026) STEHT DIESER BLOCK AUSSERHALB DER LEGENDE — als
   eigenes Bühnenkind unter der Matrix. Zwei Folgen, beide zwingend:

   1. `flex-basis: 100%` IST ENTFALLEN. Es war die Anweisung an das Flexlayout
      von `.fieber-js .fieber-legende`, eine eigene Zeile zu bekommen. Ausserhalb
      dieses Flexcontainers ist die Eigenschaft wirkungslos — sie stehenzulassen
      hiesse, eine Regel zu führen, die nichts tut.

   2. ⚠ ER BRAUCHT SEINE EIGENE `.fieber-js`-BINDUNG, und das ist der eigentliche
      Punkt: Sichtbarkeit kam bisher von `.fieber-legende` (`display: none`, nur
      `.fieber-js .fieber-legende` zeigt sie). Ohne Pendant stünde der
      Marker-Schlüssel jetzt AUCH OHNE JS da — und erklärte dort vier Zeichen,
      die es im No-JS-Fall gar nicht gibt: die Fallback-Tabelle zeigt die
      Original-Freitexte ohne jeden Marker. Ein Erklärungsapparat ohne
      Gegenstand, also genau die Sorte bezugsloser Text, die Befund R-B2 der
      Phase 1 beanstandet hat, nur in umgekehrter Richtung.
      Der Zusatzinfos-Apparat weiter unten wird bewusst ANDERS behandelt (E23,
      er bleibt in beiden Zuständen): der trägt Anbietertexte, die auch ohne JS
      gelten. Dieser hier erklärt eine Auszeichnung, die nur die Matrix setzt.

   `margin-top` trennt ihn von der Matrix, `margin-bottom` bleibt 0 — den
   Abstand nach unten setzt die Reglerleiste mit ihren 3em (E49). */
/* --- Rückholer der ausgeblendeten Karten (CT-0355, E76) ------------------
   Eine Eingrenzung blendet die ausgeschlossenen Karten aus; dieser Knopf holt
   sie als Geisterzeilen unter die aktiven zurück.

   ⚠ NACHARBEIT AUS DEM CODEX-REVIEW-GATE (10.09.2026, weiter unter ?v=25 — die
     Assets sind bis dahin nicht live gegangen, es gibt keinen Cache zu brechen):
     `.fieber-geister-knopf[hidden] { display: none }` ERGÄNZT (Befund B1). Die
     Regel unter Punkt 1 gilt nämlich auch für den Knopf selbst: eine
     Autor-Deklaration `display` schlägt das UA-`[hidden]`, und mit
     `display: inline-flex` stand der verborgene Knopf im ungefilterten
     Regelfall — also auf JEDER Seite ohne Eingrenzung — als leerer Rahmenknopf
     unter der Matrix (gemessen 44 × 13 px). Punkt 1 hatte den Fall für die
     Zeilen richtig beschrieben und für den Knopf nicht mitgedacht.

   1. DER SCHALTER IST EINE KLASSE AM <tbody>, KEIN `hidden` AN DEN ZEILEN.
      `.fieber-zeile` bekommt aus dieser Datei kein `display`, wohl aber aus
      dem Browser-Stylesheet `display: table-row` — und eine Regel schlägt das
      Präsentationsattribut `hidden`. Am DOM gemessen: die Zeilen melden
      `table-row`. Mit `hidden` an der Zeile wäre nichts verschwunden.
   2. DIE TRENNLINIE HÄNGT AM NACHBARSELEKTOR, NICHT AN EINER ENGINE-KLASSE.
      Sie trifft genau die erste Geisterzeile, weil `sortierteIds()` erst alle
      aktiven und dann alle Geister ausgibt. Im Fail-safe („null aktive") gibt
      es keine aktive Vorgängerzeile, der Selektor trifft nichts — richtig, denn
      dort ist nichts zu trennen. Sind die Geister verborgen, ist die Zeile
      `display: none` und die Linie unsichtbar.
      0.15rem = 2,4 px bei 16-px-Wurzel, GERENDERT 2 px (Chromium rundet auf
      ganze Gerätepixel ab), gegen den Regelrahmen der Zelle von gerendert 1 px —
      Review #19 mass das auf sechs Kombinationen 1200/640/375 × dpr 1/2 immer
      gleich; die vorher hier notierten 2,4 gegen 0,539 px waren rechnerisch,
      nicht gemessen. Die Linie liegt damit GENAU auf der Nachweisschwelle von
      2 px, Verhältnis 2:1 zum Regelrahmen; `rem` statt `em`, damit die Linie
      nicht mit der Zellschrift wächst.
   3. DIE KNOPFOPTIK FOLGT DEM GEMESSENEN BESTANDSMUSTER `.filter-reset-btn`
      (live an der Bühne abgelesen: transparent, weißer Text, Radius 8 px =
      0.5rem, Rahmen). Zwei bewusste Abweichungen, beide begründet:
        - TREFFERFLÄCHE. Das Vorbild misst 21,47 px hoch. Das ist unter der
          44-px-Schwelle (WCAG 2.5.8) und wäre für einen frei stehenden Knopf
          unter der Matrix ein Rückschritt hinter Phase 6 B6, die genau dafür
          `.fieber-karte` auf `min-height: 2.75rem` gehoben hat. Hier
          dieselben 2.75rem — `rem` und nicht `em`, damit der Boden nicht mit
          der eigenen Schriftgröße wandert (dieselbe Begründung wie am
          Schließen-Knopf).
        - RAHMENKONTRAST. Das Vorbild setzt `rgba(255,255,255,0.12)`; als
          Nicht-Text-Element (WCAG 1.4.11, Schwelle 3:1) trägt das nicht, und
          der Rahmen ist hier die einzige Kante des Knopfes. Gesetzt war
          zunächst 0.62 — derselbe Wert, mit dem schon die Filter-Checkbox
          gehärtet wurde. GEMESSEN ergab das auf dem komponierten Grund
          rgb(0,110,188) genau 3,00:1, also die Schwelle ohne jede Reserve; ein
          gerundeter Grenzwert ist kein bestandener Grenzwert. 0.75 misst
          4,13:1. Der Wert ist deshalb gemessen und nicht vom Nachbarn
          übernommen.
      Die Schriftgröße bleibt bei 0.8rem statt der 11 px des Vorbilds: das ist
      die Stufe des Marker-Schlüssels direkt darunter (CT-0316 P1), und der
      Knopf steht in dessen Umgebung, nicht in der Filterspalte.
   4. KEIN `!important`, KEIN `px`, keine Berührung der FLIP-Properties
      (`transform`/`transition` an `.fieber-zeile` setzt die Engine inline). */
.fieber-geister-verborgen .fieber-zeile-inaktiv {
    display: none;
}
.fieber-zeile:not(.fieber-zeile-inaktiv) + .fieber-zeile-inaktiv .fieber-zelle {
    border-top-width: 0.15rem;
    border-top-color: #F1F6FC;
}
.fieber-geister-schalter {
    margin: 0.9em 0 0;
    display: none;
}
.fieber-js .fieber-geister-schalter {
    display: block;
}
.fieber-geister-knopf {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.3em 0.8em;
    border: 0.0625rem solid rgba(255, 255, 255, 0.75);
    border-radius: 0.5rem;
    background: transparent;
    color: #ffffff;
    font-size: 0.8rem;
    font-family: inherit;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
/* ⚠ EINE AUTORREGEL `display` SCHLAEGT DAS UA-`[hidden]` (Codex-Review zum
   v=25-Diff, Befund B1). Die Engine verbirgt den Rueckholer ueber das Attribut
   `hidden` — im ungefilterten Regelfall, also auf JEDER Seite ohne Eingrenzung,
   und im Null-Aktive-Fail-safe. Das Browser-Stylesheet setzt dafuer
   `display: none`, aber `.fieber-geister-knopf { display: inline-flex }` steht
   in der Autor-Herkunft und gewinnt: gemessen rendert der `hidden`-Knopf sonst
   mit 44 px Hoehe und 13 px Breite samt Rahmen — ein leerer Rahmenknopf unter
   der Matrix. Dieselbe Falle und dieselbe Loesung wie bei
   `.fieber-panel-bild[hidden]` weiter unten; Spezifitaet 0,2,0 schlaegt die
   0,1,0 der Grundregel, deshalb ohne `!important`. */
.fieber-geister-knopf[hidden] {
    display: none;
}
.fieber-geister-knopf:hover {
    background-color: rgba(255, 255, 255, 0.10);
}
/* Der Ring gilt nur dem Tastaturfokus — dieselbe Linie wie CT-0323 S3 und
   CT-0318 R3 an den Panel-Elementen. Ein Mausklick lässt ihn aus; die
   Rückmeldung des Mauswegs ist der Textwechsel des Knopfes selbst. */
.fieber-geister-knopf:focus:not(:focus-visible) {
    outline: none;
}
.fieber-geister-knopf:focus-visible {
    outline: 0.125rem solid #ffffff;
    outline-offset: 0.125rem;
}
#vergleich.kontrast-hell .fieber-geister-knopf {
    border-color: #00528D;
    color: #003A66;
}
#vergleich.kontrast-hell .fieber-geister-knopf:hover {
    background-color: rgba(0, 82, 141, 0.10);
}
#vergleich.kontrast-hell .fieber-geister-knopf:focus-visible {
    outline-color: #003A66;
}
#vergleich.kontrast-hell .fieber-zeile:not(.fieber-zeile-inaktiv) + .fieber-zeile-inaktiv .fieber-zelle {
    border-top-color: #003A66;
}

.fieber-legende-marker {
    display: none;
}
.fieber-js .fieber-legende-marker {
    display: block;
    margin: 0.9em 0 0;
}
/* 0.8rem seit CT-0316 P1 (09.09.2026, vorher 0.72rem) — dieselbe Stufe wie der
   Legendenhinweis und der Legendentitel. Es waren die kleinsten Fließtexte der
   Seite, und der ³-Eintrag ist mit über 200 Zeichen der längste von vieren. */
.fieber-legende-marker-liste {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.45em;
    row-gap: 0.25em;
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #ffffff;
}
.fieber-legende-marker-liste dt {
    font-weight: 600;
    /* Rechtsbündig, damit die vier Zeichen trotz unterschiedlicher Breite
       (¹ ² ³ gegen *) eine saubere Kante zur Textspalte bilden. */
    text-align: right;
}
.fieber-legende-marker-liste dd {
    margin: 0;
}

/* ==========================================================================
   §7 WAAGERECHTER SCROLLER (E10, PLANUNG §5 und §8)
   --------------------------------------------------------------------------
   Neun Spalten treiben die Matrixbreite auf grob 72em (bis zum 06.08.2026 zehn
   Spalten und grob 78em — E44 hat die tz-Spalte gestrichen). Der Scroller ist nach
   E10 fokussierbar (`tabindex="0"`, `role="region"`, `aria-label` — alle drei
   setzt die Engine) und damit auch ohne Maus bedienbar; ein fokussierbarer
   Bereich braucht einen sichtbaren Fokusring.

   RANDABSCHATTUNG ALS PSEUDO-ELEMENT, NICHT ALS MASKE: Der Profil-Strip in §5
   arbeitet mit `mask-image`, weil dort nichts sticky ist. Hier läge die Maske
   auf einem Container mit sticky erster Spalte — eine Variable, die sich ohne
   echten Renderlauf nicht ausschließen lässt. Das Overlay hängt deshalb am
   Mount (der NICHT scrollt) und deckt nur die rechte Kante; die sticky Spalte
   links bleibt unberührt.

   Der Schleier verschwindet, sobald der rechte Anschlag erreicht ist — sonst
   läge er auch auf einer Matrix, die vollständig ins Bild passt. Die Klasse
   setzt die Engine aus scrollWidth/clientWidth, nicht das CSS.
   ========================================================================== */
.fieber-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* ⚠ NICHT KOSMETIK, SONDERN DER FIX FÜR VRT-BEFUND B1 — die ganze Seite
       scrollte bei 640 und 375 waagerecht mit.
       Ursache: `.fieber-visually-hidden` ist `position: absolute`. Ohne diese
       Zeile war der Scroller `static`, der Bezugsrahmen der sr-only-Spans also
       `#fieber-matrix` — ein VORFAHR der klemmenden Box. Ein absolut
       positioniertes Element, dessen Bezugsrahmen ausserhalb des Elements mit
       `overflow-x` liegt, wird von diesem overflow NICHT geklemmt: die 35
       Marker-Auflösungen lagen an ihrer ungescrollten x-Position, die äusserste
       bei 841px in einem 568px breiten Mount (gemessene rechte Kante 864px,
       body.scrollWidth 864px).
       Mit `relative` wird der Scroller selbst zum Bezugsrahmen und klemmt sie.
       Vom VRT gegengeprüft: scrollX fällt auf 0 bei beiden Viewports. Die
       Alternative — sr-only-Spans ausblenden — schied aus, sie nähme den Markern
       ihre Auflösung. */
    position: relative;
}
/* Bodenmass siehe §5a am Reglerschieber (Befund L-H2). */
.fieber-scroller:focus {
    outline: 0.125em solid #ffffff;
    outline-width: max(2px, 0.125em);
    outline-offset: 0.125em;
}

.fieber-js .fieber-matrix::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1.75em;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(0, 112, 192, 0), rgba(0, 112, 192, 0.92));
    opacity: 1;
    transition: opacity 150ms ease;
}
.fieber-js .fieber-matrix.scroll-end::after {
    opacity: 0;
}

/* ==========================================================================
   §8 MATRIX (E10)
   --------------------------------------------------------------------------
   `table-layout: fixed` mit gesetzten Kopfbreiten: ohne feste Breiten
   verhandelt der Browser neun Spalten mit sehr unterschiedlich langen Texten
   aus, und die schmalen Zahlenspalten würden von den langen Gebührenregeln
   auseinandergezogen.

   ⚠ SEIT E44 (06.08.2026) IST `min-width` DAS FÜHRENDE MASS, NICHT MEHR DIE
   SPALTENSUMME — die Rollen haben sich vertauscht, und das ist die eigentliche
   Aussage dieses Absatzes. Bis dahin galt: Summe 13em + 9 × 7.4em = 79,6em,
   also knapp ÜBER der `min-width: 78em`, die damit ein Boden war. Mit dem
   Wegfall der tz-Spalte sind es **13em + 8 × 7.4em = 72,2em** und damit
   **unter** 78em. Auf jedem Viewport schmaler als 78em bestimmt jetzt die
   `min-width` die Tabellenbreite, und die Spalten dehnen sich proportional
   darauf aus, statt von ihrer Summe getragen zu werden.

   Der gerenderte Zustand ist dadurch **besser, nicht schlechter** — im
   Review-Lauf vom 06.08.2026 mit echter CSS gemessen, neun gegen zehn Spalten
   im selben Durchgang:

       Viewport | 9 Spalten (Ist)                      | 10 (Kontrolle)
       ---------|--------------------------------------|----------------------
       1200     | 1200 px, Kartenspalte 214,47 px,     | Kartenspalte 194,50 px
                | kein waagerechter Scroll             |
       640      | 998,39 px (= min-width), Weg 358 px  | 1038,86 px, Weg 399 px
       375      | 781,44 px, Weg 406 px, Karte 123,02  | 803,67 px, Weg 429 px

   Die Kartenspalte gewinnt bei 1200 rund 20 px, der Scrollweg schrumpft auf
   allen drei Breiten. `min-width: 78em` bleibt deshalb unverändert stehen.
   ⚠ WER SPALTEN HINZUFÜGT ODER ENTFERNT, RECHNET DIESE SUMME NEU — und prüft,
   auf welcher Seite der `min-width` sie danach liegt. Genau diese Nachrechnung
   war bei E44 zunächst unterblieben; der Review hat es gefunden.

   `border-collapse: separate` mit `border-spacing: 0`: nur so trägt JEDE Zelle
   ihren eigenen, vollständigen Rahmen (die Abgrenzungs-Auflage aus §4 des
   Namens-Vertrags), und nur so funktioniert `position: sticky` auf <th>/<td>
   zuverlässig. Ein Abstand zwischen den Zellen ist bewusst NICHT gesetzt: die
   Lücken wären transparent, und die waagerecht scrollende Matrix zöge sichtbar
   hinter der sticky Spalte durch.
   ========================================================================== */
.fieber-tabelle {
    width: 100%;
    min-width: 78em;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #ffffff;
}

/* --- Kopfzeile ---------------------------------------------------------- */
.fieber-kopf {
    width: 7.4em;
    padding: 0;
    vertical-align: bottom;
    text-align: left;
    font-weight: 600;
    background-color: #004578;
    color: #ffffff;
    border: 0.0625em solid #F1F6FC;
}
.fieber-kopf-karte {
    width: 13em;
}

/* Der Sortierknopf füllt den Kopf vollständig aus, damit die Trefferfläche der
   Zelle entspricht. Alle Bestands-Knopfoptik wird zurückgesetzt; style.css
   führt keine unscoped `button`-Regel, aber die Browser-Voreinstellung setzt
   Rahmen, Fläche und eine fremde Schriftfamilie. */
.fieber-sortier {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.45em 0.5em;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.fieber-sortier:hover {
    background-color: rgba(255, 255, 255, 0.12);
}
/* Bodenmass siehe §5a am Reglerschieber (Befund L-H2). Dieser Ring und der an
   `.fieber-karte` waren die beiden schmalsten der Datei — 1,60 px, im Zweig
   <=38em 1,48 px. Der Boden greift dort automatisch mit, ohne eigenen
   Media-Zweig: `max()` wertet die aktuelle Bezugsschrift aus. */
.fieber-sortier:focus {
    outline: 0.125em solid #ffffff;
    outline-width: max(2px, 0.125em);
    outline-offset: -0.125em;
}
/* UMBRUCH DER SPALTENBESCHRIFTUNGEN (VRT-Befund B2). „Drittstaatenwährungen"
   lief bei 1200px um 42px in die Nachbarspalte und kollidierte mit
   „Versicherungen"; bei 375px überliefen acht Labels.

   Die Ursache war noch etwas schlichter, als der Befund beschreibt: Er nimmt an,
   die Umbruchfähigkeit hänge allein an `hyphens: auto`. In dieser Datei stand
   ÜBERHAUPT KEINE Umbruch-Deklaration. Bei `table-layout: fixed` hat ein langes
   Wort ohne Leerzeichen damit gar keinen erlaubten Bruchpunkt und läuft
   zwangsläufig über.

   Beides ist nötig, und die Reihenfolge der Wirkung ist genau diese:
   - `hyphens: auto` bricht mit Trennstrich an einer sprachlich richtigen Stelle,
     wo der Browser ein Wörterbuch mitbringt — und nur dann. Das ist eine Zusage,
     die kein Browser geben muss, deshalb ist es allein zu wenig.
   - `overflow-wrap: break-word` greift, wo die Trennung nicht greift, und bricht
     notfalls hart. Nie schön, aber nie über die Spaltengrenze.
   Dazu trägt das längste Label ein weiches Trennzeichen aus der Engine — das
   liefert einen semantisch richtigen Bruchpunkt ganz ohne Wörterbuch. */
.fieber-kopf-label,
.fieber-kopf-sub {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}
.fieber-kopf-label {
    display: block;
}
.fieber-kopf-sub {
    display: block;
    font-size: 0.85em;
    font-weight: 400;
    line-height: 1.3;
    /* Nicht per opacity gedimmt: das senkte den geprüften Kontrast der
       Kopfzeile. Die Unterscheidung trägt die Schriftstärke. */
}
.fieber-sortier-pfeil {
    display: block;
    font-size: 0.9em;
    line-height: 1.2;
}
/* Spalte 10 sortiert nicht und hat deshalb keinen Knopf — ihre Beschriftung
   braucht die Innenabstände des Knopfes trotzdem. */
.fieber-kopf > .fieber-kopf-label,
.fieber-kopf > .fieber-kopf-sub {
    padding: 0 0.5em;
}
.fieber-kopf > .fieber-kopf-label {
    padding-top: 0.45em;
}
.fieber-kopf > .fieber-kopf-sub {
    padding-bottom: 0.45em;
}

/* --- Zeilen ------------------------------------------------------------- */
.fieber-zeile {
    /* FLIP beim Sortieren: die Engine setzt `transform` inline und gibt es
       wieder frei, dieser Übergang lässt die Zeile zurückgleiten. Kein
       `!important` — sonst wäre das Freigeben wirkungslos. */
    transition: transform 220ms ease;
}
/* GEISTER-PRINZIP (E13): gefilterte Karten fallen nicht heraus — sie verlieren
   ihre Fieberfarbe und treten zurück. Eigener Name statt der
   `fieber-fallback-`Familie (Namens-Vertrag §3).

   ⚠ HIER STAND BIS PHASE 5 `opacity: 0.55`, UND DAS WAR EIN WIDERSPRUCH IN
   DIESER DATEI SELBST. An drei Stellen wird hier mit Messung gegen jede
   `opacity`-Dämpfung argumentiert — beim Marker (§8, `opacity: 0.9` drückt
   Stufe 6 auf 4,47:1 und damit unter E10), bei der Reglerspur (§5a) und bei
   der gestapelten Beschriftung (§8a, „echter Grauton statt opacity"). Für
   diese eine Regel gab es keinen Nachweis, und bei 0,55 fällt JEDE Zelle einer
   gedimmten Zeile weit unter die Schwelle. Anwender-Entscheidung 31.07.2026:
   neutrale Zelle plus gemessener Grauton, kein `opacity`.

   DIE FLÄCHE ist derselbe neutrale Zellstil, den die Ansicht für „nicht
   möglich" / „entfällt" / „k. A." bereits führt. Das ist kein zweites
   Vokabular, sondern dasselbe: eine Zelle ohne Fieberfarbe. Damit liest eine
   Geisterzeile in einer sonst durchgefärbten Matrix sofort als „zählt hier
   nicht mit" — und sie tut es, ohne eine einzige Zahl unleserlich zu machen.

   DIE STICKY ERSTE SPALTE BEKOMMT DIE FLÄCHE DECKEND, nicht halbtransparent.
   `rgba(0,0,0,0.12)` über `#005A9E` ergibt rechnerisch `#004F8B`; genau dieser
   Wert steht unten. Der Umweg ist nicht Kosmetik: eine halbtransparente sticky
   Spalte liesse die waagerecht durchscrollende Matrix sichtbar hinter sich
   durchziehen — dieselbe Falle, die §8 beim `border-spacing` schon benennt.

   DER GRAUTON IST GEMESSEN, NICHT GESCHÄTZT
   (memory\berichte\phase-5-css-belege\kontrast-phase5-lauf1.txt):
     Standard  #D6E4F0 auf der Geisterzelle #0063A9 : **4,85:1**
     Standard  #D6E4F0 auf der Kartenspalte #004F8B : **6,51:1**
     Hell      #3D6285 auf der Geisterzelle #EDF3F7 : **5,71:1**
     Hell      #3D6285 auf der Kartenspalte #EDF3F7 : **5,71:1**
   Beide Töne sind keine neuen Vokabeln: es sind die zwei Grautöne, die §8a und
   §9 für die gedämpfte Beschriftung des gestapelten Zweigs bereits führen
   (#d6e4f0 / #3d6285). Eine dritte Dämpfungsfarbe wäre nur eine weitere.

   ⛔ DIE SCHRAFFIERTE ZELLE IST AUSGENOMMEN, und das ist der einzige Punkt,
   an dem diese Regel eine Ausnahme braucht. Der Schraffurstreifen hellt die
   Fläche auf; der gedämpfte Grauton misst dort nur **3,09:1** (gemessen beim
   damaligen Alpha 0.22 gegen `rgb(56,133,188)`; seit dem 12.09.2026 ist das
   Alpha 0.15 und die Streifenfläche `rgb(38,122,182)` — die Ausnahme bleibt
   nötig, der Grauton liegt dort weiter unter der Schwelle). Die Zelle behält deshalb ihre volle
   Textfarbe. Sie verliert trotzdem nichts vom Geister-Signal — Farbe hatte sie
   ohnehin keine, sie fällt per Definition aus der Domäne.
   ⛔ HIER STAND BIS ZUM 12.09.2026: „dieselbe Schraffur drückt schon den
   WEISSEN Text auf 4,00:1 … Das ist eine Abwägung, keine Reparatur, und sie
   gehört nicht als Nebenwirkung eines Bedienleisten-Baus in die Datei."
   DIE ABWÄGUNG IST ENTSCHIEDEN UND DER BEFUND BEHOBEN (E78-Nachtrag,
   Nacharbeit 1 zu CT-0404, Anwender-/Orchestrator-Entscheid): das Alpha des
   Standard-Streifens ist 0.15 statt 0.22, der weisse Text misst dort jetzt
   **4,62:1**. Die Abwägung galt für ZWEI Zellen; mit E78 tragen 28 Zellen plus
   das Legendenkästchen dieselbe Schraffur, und bei dieser Zahl trägt sie nicht
   mehr. Der dritte Weg — Schraffur abdunkeln statt aufhellen — ist weiter
   verworfen: dunkel auf dunkel misst gegen die Nachbarfläche nur 1,53:1, das
   Muster verschwände. Begründung und Messwerte am Schraffur-Block in §8.

   INS ZUSAMMENSPIEL MIT DER ENGINE: Diese Regeln greifen nur, wenn die Engine
   für inaktive Karten KEINE Inline-Farbe mehr auf die Zelle schreibt (Vertrag
   §4.3.1). Ein Inline-Wert schlägt jede Regel dieser Datei, und ein
   `!important` ist hier ausgeschlossen. Die Zeilenklasse selbst setzt die
   Engine bereits. */
.fieber-zeile-inaktiv .fieber-zelle {
    background-color: rgba(0, 0, 0, 0.12);
    color: #D6E4F0;
}
.fieber-zeile-inaktiv .fieber-zelle-karte {
    background-color: #004F8B;
}
/* ⚠ `.fieber-zelle-unbewertet` STEHT SEIT DEM 12.09.2026 (E78) IN DERSELBEN
   AUSNAHME. Die Begründung ist die der Schraffur, nicht die des Zustands: der
   aufhellende Streifen drückt den gedaempften Grauton auch hier, und beide
   Klassen tragen exakt dasselbe `background-image`. */
.fieber-zeile-inaktiv .fieber-zelle-unmoeglich,
.fieber-zeile-inaktiv .fieber-zelle-unbewertet {
    color: #ffffff;
}

/* --- Zellen ------------------------------------------------------------- */
.fieber-zelle {
    padding: 0.4em 0.5em;
    vertical-align: top;
    text-align: left;
    font-weight: 400;
    color: #ffffff;
    /* DER RAHMEN LEISTET DIE ABGRENZUNG (siehe Dateikopf). Helle Linie auf dem
       blauen Seitengrund: sie steht sowohl gegen den Grund als auch gegen die
       dunklen Stufen 4 und 5, die sich selbst nicht vom Grund abheben. */
    border: 0.0625em solid #F1F6FC;
    /* E8: Farbwechsel bei Reglerbewegung über 200 ms. Die Engine setzt die
       Farben inline, dieser Übergang animiert den Wechsel — Phase 3 braucht
       dafür keine CSS-Änderung mehr. */
    transition: background-color 200ms ease, color 200ms ease;
}
.fieber-wert {
    display: block;
    font-weight: 600;
}
.fieber-zusatz {
    display: block;
    font-size: 0.92em;
    font-weight: 400;
}
/* VORBEHALTSZEILE IN DER ZELLE (E79, 12.09.2026, CT-0405). Dritte Zeile der acht
   Bargeldzellen, deren Feld `Geldautomat` eine Sollzinsklausel nennt - dieselbe
   Bedingung, aus der Marker ¹ entsteht. Der Text kommt aus der JSON-Insel des
   Core; diese Datei liefert nur die Typografie.

   WARUM EIN EIGENER SELEKTOR UND NICHT `.fieber-zusatz`: die Betragszeile ist
   eine RECHENGROESSE (Jahreskosten im eingestellten Nutzungsprofil, sie wandert
   bei jedem Reglerzug), der Vorbehalt eine AUSSAGE UEBER DIE KONDITION (er steht
   fest, solange die Bank ihn stellt). Beide koennen in derselben Zelle stehen,
   und genau dann muss eine Messung sie auseinanderhalten koennen. Zwei Selektoren
   mit derselben Deklaration waeren hier eine Dublette; zwei Selektoren mit
   verschiedener Schriftgroesse sind eine Rangfolge - der Vorbehalt steht eine
   Stufe unter der Betragszeile (0.85em gegen 0.92em), weil er die beiden Zeilen
   darueber einschraenkt und nicht mit ihnen konkurriert.

   ⚠ KEIN `color` - AUS DEMSELBEN GRUND WIE AM MARKER-BLOCK WEITER UNTEN: die
   Zeile erbt die Textfarbe ihrer Zelle und damit deren gemessenes Kontrastpaar.
   Ein eigener Farbwert muesste gegen ALLE fuenf Stufenflaechen und die beiden
   neutralen Zellstile halten - in zwei Kontrastmodi. Und KEINE `opacity`: die
   Palette hat dafuer keinen Spielraum (Stufe 5 liegt bei voller Deckung auf
   5,34:1). */
.fieber-vorbehalt {
    display: block;
    font-size: 0.85em;
    font-weight: 400;
}
/* Fußnoten-Marker (E9). ZURÜCKHALTEND, WEIL HÄUFIG: die Spalte `ausland` trägt
   bei neun von zwanzig Karten ein ³. Ein Zeichen, das bei jeder zweiten Zelle
   steht, darf nicht wie eine Warnung aussehen — sonst wird es zur Textur und
   verliert seine Wirkung dort, wo es selten ist.

   ⚠ KEINE `opacity`-DÄMPFUNG — nachgemessen, nicht geschätzt
   (memory\berichte\phase-2-asset-belege\marker-opazitaet.mjs). Die Palette hat
   dafür keinen Spielraum: Stufe 6 liegt bei voller Deckung schon bei 4,99:1
   (Standard) bzw. 5,17:1 (Hell). Bereits `opacity: 0.9` drückt sie auf 4,47:1
   und damit unter die 4,5:1, die E10 verlangt. Jede sichtbare Dämpfung wäre ein
   Regelbruch, keine Gestaltung.

   Die Zurückhaltung kommt deshalb aus Grösse, Gewicht und Hochstellung — drei
   Mitteln, die den Kontrast NICHT antasten. `color` bleibt ungesetzt: der Marker
   erbt damit die Textfarbe der Stufe, die die Engine ohnehin inline auf die
   Zelle schreibt, und ist auf allen sieben Flächen automatisch richtig.
   Eine feste Markerfarbe wäre auf der halben Skala falsch.

   `vertical-align: super` würde die Zeilenhöhe aufreissen; die feste Anhebung
   über `top` hält die Zellhöhe stabil. */
.fieber-marker {
    display: inline-block;
    margin-left: 0.15em;
    /* 0.85em statt der zuerst gewählten 0.72em (VRT-Befund H1): gemessen ergaben
       0.72em rund 4px Tintenhöhe, also 44% der danebenstehenden Ziffer — auf dem
       Screenshot ein Staubkorn statt eines Verweises. Zurückhaltung war richtig,
       das Mass war zu klein. Der Kontrastnachweis bleibt davon unberührt, weil
       sich keine Farbe ändert; die Schwelle 4,5:1 gilt in beiden Fällen, da der
       Marker so oder so kleiner Text ist. */
    font-size: 0.85em;
    font-weight: 400;
    line-height: 1;
    vertical-align: top;
}

/* --- Sticky erste Spalte ------------------------------------------------ */
.fieber-kopf-karte,
.fieber-zelle-karte {
    position: sticky;
    left: 0;
    /* Über den waagerecht durchziehenden Zellen. */
    z-index: 2;
    background-color: #005A9E;
}
.fieber-kopf-karte {
    /* Und über der eigenen Spalte, wenn beim Scrollen beides zusammentrifft. */
    z-index: 3;
    background-color: #004578;
}
.fieber-zelle-karte {
    padding: 0;
    /* R3/CT-0331: der aufgehellte Grund der Klick-Rückmeldung blendet ein, statt
       zu springen. Die Regel stand bis zum 09.09.2026 am Knopf (`.fieber-karte`)
       — sie ist mit dem Zustand an die Zelle gewandert, weil der Knopf jetzt
       gar keinen eigenen Grund mehr trägt. Explizite Property-Liste, kein `all`
       (Hauskonvention CT-0221/CT-0227).

       ⚠ `color` MUSS MIT, OBWOHL DER AUFTRAG NUR VON background-color SPRICHT:
       `.fieber-zelle` trägt seit E8 `transition: background-color 200ms ease,
       color 200ms ease`, und diese Zelle hat BEIDE Klassen. Eine Kurzfassung
       hier ersetzte die ganze Liste — der Farbwechsel der Kartenzelle beim
       Ein- und Ausblenden des Geister-Zustands (#ffffff <-> #D6E4F0) spränge
       dann hart. Gemessen: mit `transition: background-color 150ms ease`
       allein meldete die Zelle `transitionProperty: background-color` statt
       `background-color, color`. Die 150 ms für den Grund sind der R3-Wert und
       gelten hier für die Klick-Rückmeldung; für `color` bleiben es die 200 ms
       aus E8. */
    transition: background-color 150ms ease, color 200ms ease;
}
.fieber-karte {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.4em 0.5em;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    /* 44 CSS-px TREFFERFLÄCHE ALS BODEN (Phase-6-Befund B6). Live gemessen
       (1200, premium, 6.8.2026): der flachste der zwanzig Kartenknöpfe stand
       bei **43,4 px** — 0,6 px unter der Marke. Nach dem Boden: 44,0 px.

       ⛔ NICHT ÜBER DAS `padding` GELÖST, und das ist der ganze Punkt dieser
       Regel: der Knopf füllt die sticky Zelle, seine Höhe IST die Zeilenhöhe.
       Ein grösseres `padding` hätte alle zwanzig Zeilen verlängert. `min-height`
       hebt nur die Zeilen an, die ohne den Boden zu flach wären.
       NACHGEMESSEN, WAS ES KOSTET (1200, alle zwanzig Zeilen): 18 Zeilen
       unverändert, 2 Zeilen 44,5 -> 45,1 px, Tabelle 1619,2 -> 1620,4 px. Das
       sind die beiden Zeilen, deren Höhe der Kartenknopf selbst bestimmt hat —
       weniger als 0,6 px je Zeile ist rechnerisch nicht zu haben, wenn ein
       43,4-px-Knopf 44 px erreichen soll. Bei 375 ändert sich keine Zeilenhöhe
       (88 px vorher wie nachher), dort ist der Knopf ohnehin höher.

       `rem` statt `em`: die Marke ist ein absolutes Mass für den Finger und
       darf nicht mit der Zellschrift schrumpfen — im Zweig <=38em fällt die
       Tabellenschrift auf 0.74rem, ein `em`-Boden fiele mit. Kein `px`: die
       Wurzelschrift bleibt so die Stellschraube des Nutzers. */
    min-height: 2.75rem;
    /* ⛔ HIER STAND BIS ZUM 09.09.2026 `transition: background-color 150ms ease`
       (R3, CT-0318). Sie ist mit CT-0331 an `.fieber-zelle-karte` gewandert: der
       Knopf trägt seither keinen eigenen Grund mehr, eine Überblendung an ihm
       hätte also keinen Gegenstand. */
}
/* Die Engine baut den Knopf `disabled` und nimmt das Attribut erst, wenn
   `aktiviereDetailpanel()` vollständig durchgelaufen ist (Phase 4). Ein toter
   Klick wäre eine Lüge, ein Zeigefinger darüber auch. Die Regel ist mit dem
   Panel NICHT gegenstandslos geworden, im Gegenteil: sie deckt jetzt das
   Zeitfenster zwischen gerenderter Matrix und geglückter Aktivierung ab — und
   den Dauerzustand, falls die Aktivierung nach dem Alles-oder-nichts-Prinzip
   aussteigt. */
.fieber-karte[disabled] {
    cursor: default;
    opacity: 1;
}
/* Bodenmass siehe §5a am Reglerschieber (Befund L-H2). */
.fieber-karte:focus {
    outline: 0.125em solid #ffffff;
    outline-width: max(2px, 0.125em);
    outline-offset: -0.125em;
}
/* --- R3 (CT-0318) / CT-0331: KLICK-RÜCKMELDUNG AUF DER GANZEN KARTENZELLE ---
   Anwender-Auftrag 09.09.2026 (erste Fassung): „Bei Klick auf den Kartennamen
   soll im gesamten Feld des Kartennamens eine Nutzerrückmeldung kommen — durch
   Aufhellen der Hintergrundfarbe." Bis dahin war die einzige Rückmeldung der
   weiße Fokusrahmen der Regel darüber: die Engine gibt den Fokus nach dem
   Schließen des Panels programmatisch an den Knopf zurück, also stand nach
   jedem Klick-Zyklus ein Rahmen um die Zelle — die Optik eines
   Tastaturfokus als Antwort auf einen Mausklick.

   ⚠ ZWEITE FASSUNG (CT-0331, Anwender-Auftrag desselben Tages): „Dies soll auf
   die GESAMTE ZELLE der Tabelle ausgeweitet werden — nicht nur auf den
   Kreditkartennamen und den Banknamen."

   DIE ALTE BEGRÜNDUNG WAR WIDERLEGT, UND ZWAR NUR ZUR HÄLFTE: hier stand,
   „das gesamte Feld" sei der Knopf selbst, weil `.fieber-karte`
   `display: block; width: 100%` die sticky Zelle vollständig fülle. Das gilt
   für die BREITE (Restbreite 1,08 px = Zellrahmen) und nicht für die HÖHE. Der
   Knopf hat `min-height: 2.75rem` und wächst nur mit seinem eigenen Text; die
   Zeilenhöhe bestimmen die Wertzellen. Live gemessen (1100 px, Profil
   niedriger-kartenpreis, ?v=21): Zellhöhen 45,08 / 61,74 / 79,02 / 96,29 px
   gegen Knopfhöhen 44 bis 60,67 px — bei 16 von 20 Zeilen blieb unter dem Knopf
   ein Streifen von 17,75 bis 52,30 px in der Grundfarbe stehen.

   NICHT ÜBER DEN KNOPF GELÖST: `height: 100%` an einem Kind einer Tabellenzelle
   ohne definierte Zellhöhe ist browserabhängig und in `th` unzuverlässig, und
   ein größeres `padding` verlängerte alle zwanzig Zeilen (Phase-6-Befund B6).
   Die Zelle selbst ist der verlässliche Träger.

   ZWEI Auslöser, und beide werden gebraucht:
     `:focus-within`               — trägt den Zustand nach dem Klick und nach
                                     der Fokus-Rückgabe beim Schließen. Es
                                     ersetzt das frühere `:focus` am Knopf:
                                     fokussierbar ist weiterhin nur der Knopf,
                                     gefärbt wird sein Vorfahr.
     `.fieber-zelle-karte-offen`   — die Engine-Markierung der geöffneten Karte,
                                     gesetzt in setzeKartenZustand() gemeinsam
                                     mit `aria-expanded`. Ohne sie erlösche die
                                     Aufhellung in dem Moment, in dem der Fokus
                                     ins Panel wandert — also genau dann, wenn
                                     der Nutzer wissen will, WELCHE Karte er
                                     geöffnet hat. `:has()` wäre der CSS-Weg
                                     gewesen und ist verworfen: Firefox vor 121
                                     kennt es nicht.

   DECKENDER MISCHWERT STATT ALPHA — DAS IST DER PREIS DES UMZUGS: die Zelle ist
   `position: sticky`. Eine halbtransparente sticky Spalte ließe die scrollende
   Matrix hinter sich durchziehen (dasselbe Argument wie beim Geister-Prinzip
   §8, das dort zu #004F8B geführt hat). Gerechnet und gegengemessen:
   rgba(255,255,255,0.14) auf #005A9E = rgb(36,113,172) = #2471AC — genau der
   Wert, den CT-0321 am 09.09.2026 live am Knopf gemessen hat. Die FARBE ändert
   sich also nicht, nur ihr Träger und ihre Notation.

   ALPHA 0.14 WAR GEMESSEN, NICHT GEWÄHLT: der Kartenname (600) und die
   Bankzeile (0.92em) stehen weiß auf dem aufgehellten Grund, und der muss die
   4,5:1 halten (gemessen 5,21:1). Wer #2471AC aufhellt, muss neu messen — die
   Schwelle fällt mit jeder Aufhellung. Die STÄRKE der Hell-Rückmeldung ist ein
   eigenes Ticket (CT-0321) und hier ausdrücklich nicht mitentschieden.

   SPEZIFITÄT GEGEN DIE GEISTERZEILE, BEWUSST ENTSCHIEDEN: `.fieber-zeile-inaktiv
   .fieber-zelle-karte` (0,2,0, §8 weiter oben) färbt Geisterkarten #004F8B. Die
   Knöpfe der Geisterzeilen sind NICHT `disabled` — `aktiviereDetailpanel()`
   gibt alle zwanzig frei, unabhängig von `aktiv` (Engine, Reset-Schleife). Eine
   Geisterkarte lässt sich also öffnen, und dann muss sie ihre Rückmeldung
   bekommen: sonst führte der einzige Klick, der keine sichtbare Antwort gibt,
   ausgerechnet in ein Panel. Deshalb trägt die Offen-Regel den Zellnamen
   doppelt (`.fieber-zelle-karte.fieber-zelle-karte-offen`, 0,2,0) und gewinnt
   über die Quellreihenfolge; `:focus-within` wiegt ohnehin schon (0,2,0). */
.fieber-zelle-karte:focus-within,
.fieber-zelle-karte.fieber-zelle-karte-offen {
    background-color: #2471AC;
}
/* GEISTERZEILE: EIGENER MISCHWERT AUS IHREM EIGENEN GRUND (Review #19 zu
   CT-0331, Auflage A1, 09.09.2026). Der deckende Wert #2471AC ist aus dem
   Grund der AKTIVEN Zeile (#005A9E) gerechnet. Auf der Geisterzeile liegt
   darunter aber #004F8B mit gedimmter Schrift #D6E4F0 — und dort misst der
   Kartenname auf #2471AC nur noch **4,02:1**, unter der 4,5:1-Schwelle. Vor
   dem Umzug war das kein Thema: das Alpha am Knopf passte sich dem Geisterton
   an (rgba(255,255,255,0.14) auf #004F8B = 4,61:1). Ein eingefrorener Hexwert
   verliert genau diese Anpassung — deshalb braucht jeder Untergrund seinen
   eigenen Mischwert: rgba(255,255,255,0.14) auf #004F8B = rgb(36,104,155) =
   #24689B; darauf misst #D6E4F0 **4,60:1**, das Rückmeldungs-Delta zur Ruhe
   ist 1,42:1 (aktive Zeile 1,36:1). (0,3,0) schlägt die Offen-Regel darüber
   ohne `!important`. KEIN Hell-Pendant: dort verbessert der feste Wert die
   Lage (5,15:1 gegen 4,88:1 vorher), ein analog gerechneter #D5E3EC fiele
   zurück auf 4,88:1. */
.fieber-zeile-inaktiv .fieber-zelle-karte:focus-within,
.fieber-zeile-inaktiv .fieber-zelle-karte.fieber-zelle-karte-offen {
    background-color: #24689B;
}
/* ⚠ DER WEISSE RAHMEN BLEIBT — nur nicht mehr für die Maus. `:focus-visible`
   ist die Unterscheidung, die der Auftrag inhaltlich meint: Tastaturnutzer
   brauchen den Ring (WCAG 2.4.7), Mausnutzer bekommen den aufgehellten Grund.
   Der `:not()`-Weg ist bewusst so herum gebaut: ein Browser, der
   `:focus-visible` nicht kennt, verwirft den GANZEN Selektor und behält den
   Rahmen — der Ausfall geht also zugunsten der Zugänglichkeit aus, nicht
   gegen sie. Dasselbe Muster liegt in §5a an den Bedienelementen. */
.fieber-karte:focus:not(:focus-visible) {
    outline: none;
}
.fieber-karte-name {
    display: block;
    font-weight: 600;
}
.fieber-karte-bank {
    display: block;
    font-size: 0.92em;
    font-weight: 400;
}

/* --- Sonderzustände (PLANUNG §5, Namens-Vertrag §2.3) -------------------- */
/* Beide fallen aus der Farbdomäne und bekommen deshalb KEINE Inline-Farbe
   von der Engine. Sie brauchen hier eine neutrale Fläche, damit sie als Zelle
   und nicht als Loch lesen.
   ⚠ „variabel" GEHÖRT SEIT DEM 10.09.2026 NICHT MEHR DAZU (E77). Der Zustand
   war bis dahin ein Sonderfall von `'ka'` und trug damit diese Fläche; er ist
   in der Engine ein eigener Zellzustand geworden und trägt die feste
   Palettenstufe 4 als Inline-Farbe; eine Regel dafür wäre wirkungslos gewesen,
   weil Inline jede Regel dieser Datei schlägt.
   ⚠ SEIT DEM 12.09.2026 (E78) IST DAS ANDERS: „variabel" trägt keine Stufe und
   keine Inline-Farbe mehr, sondern die Klasse `.fieber-zelle-unbewertet` — also
   die neutrale Fläche DIESER Gruppe plus die Schraffur zwei Regeln weiter
   unten. Die Gruppe hat damit wieder drei Selektoren. Wer die Zelle im DOM
   sucht, findet sie weiterhin an `data-farbregel="variabel"`.
   ⛔ ES WAREN BIS ZUM 06.08.2026 DREI: `.fieber-zelle-entfaellt` ist mit dem
   Zustand `'entfaellt'` entfallen (E44). Den Zustand erzeugte allein die
   gestrichene `zelleTeilzahlung()` der Engine — ein Teilzahlungsfeld, das „-"
   trug, hiess „entfällt" statt „k. A.". Ohne die Spalte gibt es weder Erzeuger
   noch Auswerter; die Engine hat den Zweig in `zustandsKlasse()` mit entfernt.
   Der Selektor stand danach unerreichbar in dieser Gruppe und ist gestrichen. */
/* ABDUNKELN, NICHT AUFHELLEN — nachgemessen, nicht geschätzt
   (memory\berichte\phase-2-asset-belege\marker-opazitaet.mjs).
   Hier stand zuerst `rgba(255,255,255,0.10)`. Das hebt die Fläche auf #1A7EC6
   und drückt den weissen Zelltext auf **4,34:1** — unter die 4,5:1, die E10 für
   die ganze Ansicht verlangt. Der Fehler war meiner und wäre ohne die Messung
   für den Marker nie aufgefallen: der blanke Seitengrund trägt weissen Text mit
   5,15:1, der Schleier hat ihn darunter gezogen.
   `rgba(0,0,0,0.12)` ergibt #0063A9 und **6,25:1** — und liest zugleich richtig:
   eine Zelle ohne Wert tritt zurück, statt vorzutreten. */
.fieber-zelle-unmoeglich,
.fieber-zelle-unbewertet,
.fieber-legende-unbewertet,
.fieber-zelle-ka {
    background-color: rgba(0, 0, 0, 0.12);
}
/* „nicht möglich" (Geldautomat_moeglich = 0) zusätzlich schraffiert: der
   Zustand ist kategorial anders als eine Datenlücke — die Karte KANN es nicht,
   statt dass wir es nicht wissen.

   SEIT DEM 12.09.2026 TEILT `.fieber-zelle-unbewertet` DIESE OPTIK (E78,
   CT-0404) — die Zelle „variabel" der beiden Kursaufschlag-Spalten, und mit
   ihr das Legendenkästchen `.fieber-legende-unbewertet`.
   ⚠ SIE TEILT DIE OPTIK, NICHT DIE BEGRÜNDUNG. Bei „nicht möglich" sagt die
   Schraffur „die Karte KANN es nicht"; bei „variabel" sagt sie „wir bewerten
   es nicht" — die Angabe ist da, sie nennt nur keinen Satz (E18). Beide Fälle
   haben gemeinsam, was die Schraffur trägt: hier steht keine Zahl, die mit den
   übrigen Zellen der Spalte vergleichbar wäre. Deshalb EINE Selektorliste und
   KEINE Kopie der Deklarationen — ein Auseinanderlaufen der beiden Muster wäre
   ein Unterschied ohne Aussage.
   ⚠ DAS ALPHA DES STANDARD-STREIFENS IST AM 12.09.2026 VON 0.22 AUF 0.15
   GESENKT WORDEN (E78-Nachtrag, Nacharbeit 1 zu CT-0404) — GEMESSEN, NICHT
   GEWÄHLT. Mit 0.22 hob der Streifen die Fläche auf `rgb(56,133,188)` und
   drückte den weissen Zelltext auf **4,00:1**, also unter die 4,5:1, die E10
   für die ganze Ansicht verlangt. Seit Phase 2 stand das als bewusst getragener
   Befund hier (zwei Zellen, IDS 65). Mit E78 tragen **28 Zellen plus das
   Legendenkästchen** dieselbe Schraffur — dieselbe Abwägung trägt bei dieser
   Zahl nicht mehr. 0.15 ergibt `rgb(38,122,182)` und **4,62:1**.
   Der Preis ist ausgewiesen: der Streifen hebt sich von der Grundfläche jetzt
   schwächer ab. Gemessen bleibt er über der Sichtbarkeitsschwelle (CIE76 gegen
   die Grundfläche, Sollwert > 6,9 = drei JND — die Zahlen stehen im Bericht
   `memory\berichte\ct0404-0405-nacharbeit-1.md`).
   ⚠ DER HELL-MODUS IST NICHT ANGEFASST. Dort DUNKELT der Streifen ab
   (`rgba(0,58,102,0.20)`), und der dunkle Text hält 6,89:1 — es gibt nichts zu
   reparieren, und ein symmetrischer Eingriff hätte das Muster ohne Gegenwert
   geschwächt. Die beiden Modi sind hier verschieden, weil ihre Textfarben es
   sind.
   ⚠ KEINE FIEBERFARBE (E10): Fläche und Streifen sind Alpha auf dem Seitengrund,
   keine Palettenstufe. Die Zelle trägt deshalb auch kein `data-stufe`. */
.fieber-zelle-unmoeglich,
.fieber-zelle-unbewertet,
.fieber-legende-unbewertet {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0) 0.32em,
        rgba(255, 255, 255, 0.15) 0.32em,
        rgba(255, 255, 255, 0.15) 0.64em
    );
}
/* Die Fläche der Aktionszelle färbt die Engine inline. Hier nur die
   Auszeichnung.
   ⚠ BIS ZUM 10.09.2026 STAND HIER „die Aktions-Vollfläche … in beiden Modi
   dieselbe Farbe, PLANUNG §5". Beides gilt nicht mehr (E77): das Türkis
   #2BE5A8 ist entfallen, die Zelle trägt jetzt die Palettenstufe 1, wenn es
   eine Neukundenaktion gibt, und Stufe 7, wenn nicht — also je Kontrastmodus
   den Wert der jeweiligen Palette. Die Klasse `.fieber-zelle-aktion` setzt die
   Engine weiterhin NUR im ersten Fall; sie fettet den Wert und sagt nichts
   über die Farbe. Die rote Gegenseite („keine") trägt keine Klasse. */
.fieber-zelle-aktion .fieber-wert {
    font-weight: 700;
}

/* --- Schmale Viewports -------------------------------------------------- */
/* ⚠ DIESER BLOCK TRUG BIS PHASE 6 ZWEI WIRKUNGSLOSE SONDERREGELN — beide von
   derselben Art, beide nur an der Quellreihenfolge gescheitert. Die Kopfzelle
   der ersten Spalte heisst `class="fieber-kopf fieber-kopf-karte"`, die
   Datenzelle `class="fieber-zelle fieber-zelle-karte"` (Engine :1837 und
   :1757). Beide Klassenpaare wiegen (0,1,0); im Basisblock steht die
   allgemeine Regel jeweils VOR der speziellen, hier stand sie DAHINTER — und
   damit gewann die allgemeine.

   WAS DAS GEKOSTET HAT, live gemessen (375 x 800, premium, 6.8.2026, beide
   Modi identisch):
     - `width: 9.5em` der Kartenspalte verpuffte gegen `width: 6.3em`. Alle
       ZEHN Spalten massen 78,14 px (die Tabelle verteilte die Differenz zur
       `min-width` gleichmässig), statt 112,47 px für die Karte und 74,59 px
       für die neun Datenspalten. Kartennamen brachen auf bis zu sechs Zeilen.
     - `padding: 0` der Kartenzelle verpuffte gegen die `padding`-Regel dieses
       Blocks. Gemessen 4,144 px / 4,736 px AUF DER ZELLE, obendrauf dieselben
       Werte noch einmal auf dem Knopf darin — doppelter Innenabstand in genau
       der Spalte, die am wenigsten Platz hat.
     - Zusammen: Tabellenhöhe **2192,7 px**, zehn verschiedene Zeilenhöhen bis
       140,4 px. Nach der Reparatur **1847,3 px** (-345,4 px, -15,8%) und sechs
       verschiedene Zeilenhöhen bis 119,9 px.

   WARUM SPEZIFITÄT UND NICHT UMSORTIEREN: Ein Tausch der beiden Breitenregeln
   hätte den Fehler behoben und die Falle stehen gelassen — die nächste
   Ergänzung an dieser Stelle hätte ihn wieder aufgemacht. Die zusammengesetzten
   Selektoren beschreiben genau die Kollision, die den Defekt ausgemacht hat:
   „wo BEIDE Klassen zusammentreffen, gilt die Sonderbreite" — (0,2,0) gegen
   (0,1,0), unabhängig von der Reihenfolge. Ein Nachfahren-Selektor
   (`.fieber-tabelle .fieber-kopf-karte`) wöge gleich viel, bände die Regel aber
   an einen Vorfahren, den sie nicht braucht.
   Das `padding` ist bewusst ANDERS gelöst: statt die `0` der Basisregel hier zu
   wiederholen, nimmt `:not()` die Kartenzelle aus dem Zugriff — so bleibt die
   Basisregel die einzige Stelle, an der steht, dass diese Zelle keinen
   Innenabstand hat. Zwei Fundorte für denselben Wert wären genau die Drift, die
   diesen Block schon einmal auseinandergebracht hat.

   ⚠ `min-width: 66em` IST SEIT E44 DAS FÜHRENDE MASS — und dieser Absatz sagte
   bis zum 06.08.2026 das GEGENTEIL. Er stammt aus der Phase-6-Reparatur A1 und
   rechnete mit zehn Spalten: Summe 9.5em + 9 × 6.3em = 66,2em, also knapp ÜBER
   66em, der Wert damit ein Boden. Mit dem Wegfall der tz-Spalte sind es
   **9.5em + 8 × 6.3em = 59,9em** und damit **unter** 66em; die `min-width`
   bestimmt jetzt die Breite, die Spalten dehnen sich darauf aus.

   Der Wert bleibt trotzdem unverändert stehen, und zwar gemessen begründet: bei
   375 misst die Tabelle **781,44 px** gegen 803,67 px mit zehn Spalten, der
   waagerechte Scrollweg fällt von 429 auf **406 px**, die Kartenspalte hält
   123,02 px (32,8% des Bildes). Ein Absenken der `min-width` auf die neue Summe
   verengte die acht Datenspalten, ohne den Scrollweg nennenswert zu kürzen.

   ⚠ WER DIE SPALTENBREITEN ODER DIE SPALTENZAHL ÄNDERT, RECHNET DIESE SUMME NEU
   und prüft, auf welcher Seite der `min-width` sie danach liegt. Bei E44 ist
   genau das zunächst unterblieben — der Satz „der Wert ist ein Boden, kein
   Sollmass" stand hier noch, als er schon nicht mehr stimmte. Gefunden hat es
   der Review, nicht der Bau. */
@media (max-width: 38em) {
    .fieber-tabelle {
        font-size: 0.74rem;
        min-width: 66em;
    }
    .fieber-kopf {
        width: 6.3em;
    }
    /* Die sticky Spalte nimmt sonst mehr als die Hälfte eines 375px-Bildes. */
    .fieber-kopf.fieber-kopf-karte {
        width: 9.5em;
    }
    /* Die Kartenzelle ist ausgenommen: ihr `padding: 0` steht in §8 an
       `.fieber-zelle-karte`, den Innenabstand trägt dort der Knopf. */
    .fieber-zelle:not(.fieber-zelle-karte),
    .fieber-karte,
    .fieber-sortier {
        padding: 0.35em 0.4em;
    }
}

/* ==========================================================================
   §8a DETAIL-SEITENPANEL UND BOTTOM-SHEET (Phase 4, E12)
   --------------------------------------------------------------------------
   Modales Panel zum Kartenknopf der ersten Spalte: auf dem Desktop rechts
   angeschlagen (30rem, volle Höhe), ab 48em abwärts als Bottom-Sheet. Das
   Markup liefert der Core als LETZTES Geschwister nach `footer.inc`, die
   Füllung und beide Zustandsklassen liefert die Engine.

   WARUM DIE PANEL-REGELN NICHT AN `.fieber-js` HÄNGEN — Abweichung von der
   letzten Zeile des Namens-Vertrags §7, gemessen statt übernommen:
   `fieber-js` setzt die Engine auf `#fieber-buehne` (Engine-Kopf, `KLASSE_JS`).
   Die Bühne liegt INNERHALB von `#vergleich`, das Panel liegt dahinter — ein
   Nachfahren-Selektor `.fieber-js .fieber-overlay` könnte also nie zutreffen.
   Nötig ist die Kopplung hier ohnehin nicht, und der Grund ist genau das, was
   dieses Panel von Legende und Fallback-Tabelle unterscheidet: die Legende ist
   per Default UNSICHTBAR und wird von `fieber-js` enthüllt, die Fallback-
   Tabelle ist per Default SICHTBAR und wird davon versteckt. Beide brauchen
   deshalb einen Schalter. Das Panel ist per Default unsichtbar und wird
   ausschließlich über `.fieber-panel-offen` sichtbar — eine Klasse, die nur die
   Engine setzt. Ohne JS bleibt es damit von selbst zu; es gibt keinen Zustand,
   den eine `.fieber-js`-Regel noch abzufangen hätte.

   ⚠ DER EINE FALL, IN DEM DAS FIXIERTE PANEL SEINEN VIEWPORT-BEZUG VERLOR
   (gemessen, mit CT-0188 am 13.09.2026 BEHOBEN — im Core, nicht hier): Das Panel lag
   in `#content`, weil die Nav-Includes `#nonFooter` und `#content` öffnen, `footer.inc`
   beide nicht schließt und der Fieberkarten-Core sie bis dahin ebenfalls nicht schloss;
   der Parser hielt sie bis `</body>` offen. Im Normalzustand trug kein Vorfahre
   `transform`, `filter`, `perspective` oder `contain`, `position: fixed` hing also am
   Viewport (Namens-Vertrag §1.3a, nachgemessen). SOBALD DAS MOBILMENÜ OFFEN WAR, galt
   das nicht mehr: `style.css:618` gibt `#offen:target #content` ein `transform:
   translateX(30em)` (`:731` `translateX(100vw)`), und `:625` legt `filter: blur(1px)`
   auf jedes Kind von `#nonFooter`, also auch auf `#content`. Beides machte `#content`
   zum Containing Block seiner `fixed`-Nachfahren; das Panel wanderte mit der
   Inhaltsfläche aus dem Bild und wurde von deren `overflow: hidden` beschnitten,
   während Scroll-Sperre und Fokusfalle weiterliefen. Eine CSS-Antwort hätte es nur mit
   `!important` auf einem fremden Element gegeben; die Lösung lag im Seitengerüst und
   ist dort erfolgt — der Core schließt die beiden Container jetzt vor `footer.inc`,
   das Panel ist Geschwister von `#nonFooter`. KEINE Regel dieser Datei hat je
   dagegen kompensiert; es gibt deshalb nichts zurückzubauen.

   FARBEN: `#004578` ist kein neuer Ton, sondern der Grund der sticky Kopfzeile
   und der sticky ersten Spalte aus §8. Weißer Text darauf misst 9,90:1 und
   liegt damit klar über den 4,5:1 aus E10. Die 6% Restdurchlass des Panels
   (0.94) ändern daran nichts: dahinter steht das Overlay über dem Seitengrund
   #0070C0, gemischt rund (0,69,120) — also praktisch derselbe Wert. Der
   Panelgrund DUNKELT ab und hellt nicht auf; `rgba(255,255,255,0.10)` drückte
   weißen Text auf 4,34:1 (die Messung, die schon §8 korrigiert hat).
   ========================================================================== */

/* --- Leak-Resets, auf die Panel-Wurzel gescopt --------------------------
   Die Resets aus §2 sind auf `.fieber-buehne` gescopt und erreichen das Panel
   NICHT — es steht außerhalb der Bühne und außerhalb von `#vergleich`. Der
   Kommentar in §2, die aside-/h3-/.icon-Resets stünden dort „vorbeugend für
   Phase 4 (Detail-Panel)", ist damit sachlich falsch und in derselben Runde
   korrigiert worden. Die drei `aside`-Resets entfallen hier zusätzlich, weil
   das Panel nach E-B ein `<div role="dialog">` ist und kein `<aside>`.

   `#vergleich p` greift hier ebenfalls nicht — dafür aber der ungescopte
   GLOBALE Selektor `style.css:9 p{padding-left:5%;padding-right:5%;margin:2em 0
   0}`. Er trifft den Untertitel im Kopf und jeden Absatz im Körper und fehlt in
   der Aufzählung des Namens-Vertrags §7; nachgemessen ergänzt. Ebenso
   `style.css:8 h3{font-style:italic;margin:75px 0 0;padding:0 5%}` und
   `style.css:6 h2,h4,h5,h6{font-size:1.9em;…}`. */
.fieber-panel p {
    margin: 0;
    padding: 0;
}
.fieber-panel h2,
.fieber-panel h3 {
    margin: 0;
    padding: 0;
    font-style: normal;
}
/* style.css:210 `.icon{font-size:3em;position:absolute;margin-left:-1.6em}` und
   :207 `a > .icon::after{content:'';position:absolute;top:-5px;…}` — dieselbe
   Falle wie in §2, nur für den anderen Container. Das `::after` ist eine reine
   Trefferflächen-Vergrößerung des Bestands; im Panel hat jedes Ziel seine
   eigene Fläche. */
/* Diese beiden Regeln hat der Review der Nacharbeit R1 als „tot" eingestuft —
   ÜBERHOLT: der Anwender hat entschieden, dass `<a>` und `<img>` im Panel zu
   echten Elementen werden (Builder B baut das). Sie werden also gebraucht und
   bleiben. Der Review hat es selbst vorausgesehen („dass Builder A diese Resets
   für nötig hielt, ist der Fingerzeig auf B-1"). */
/* ⚠ `font-size: 3em` SEIT CT-0316 P5 (09.09.2026, vorher 1.3em): das ist der
   Site-Default aus `style.css:210`, den die beiden Schwesteransichten tragen
   (live gemessen 09.09.2026: Tabelle 40,8 px, Liste 39 px). Die Fieberkarte hatte
   das Erfahrungsberichte-Icon als einzige der drei auf 17,68 px stehen — es las
   sich wie ein Satzzeichen statt wie ein Bedienelement.
   Zurückgesetzt bleiben nur `position` und `margin-left`: die Bestandsregel zieht
   das Zeichen absolut positioniert um 1,6em nach links aus der Zeile heraus, und
   genau DAS ist im Panel falsch. Die GRÖSSE war nie das Problem — sie war die
   Nebenwirkung, die beim Reparieren mitgenommen wurde. */
.fieber-panel .icon {
    position: static;
    left: auto;
    margin-left: 0;
    font-size: 3em;
    line-height: 1;
}
.fieber-panel a > .icon::after {
    content: none;
}

/* ⚠ DER DRITTE UNGESCOPTE TYP-SELEKTOR, UND DER TEUERSTE (VRT-B2, blockierend).
   `style.css:16` setzt `strong{color:#E6F1F9;font-weight:600}` — global, ohne
   jeden Scope. Der Wert ist ein fast weißes Blau und war im Standardmodus nicht
   zu sehen, weil er dort zufällig passt (gemessen 9,79:1). Im HELL-MODUS
   dagegen stand fast weißer Text auf fast weißem Grund: **gemessen 1,02:1**.
   Betroffen ist namentlich das `<strong>`-Präfix mit dem Banknamen im
   Zusatzinfos-Block („Volkswagen Bank:") — die Auflösung der Sternchen, also
   genau der Text, dessentwegen der Block überhaupt existiert.

   `color: inherit` statt einer zweiten Farbangabe im Hell-Satz: damit hängt die
   Auszeichnung IN BEIDEN MODI am Panel und kann gar nicht mehr auseinander
   laufen. Eine Farbe im `.fieber-hell`-Satz hätte nur den Hell-Fall geheilt und
   den Standardmodus auf einem Fremdwert stehen lassen, der nicht aus unserer
   Palette stammt.

   Die Liste deckt die volle Tag-Allowlist ab (dieselbe, die `setzeFreitext()`
   und der No-JS-Fallback führen), obwohl heute NUR `strong` nachweislich leakt
   — gemessen tragen `b`, `em`, `i`, `sup` und `sub` bereits die Panelfarbe. Sie
   stehen mit in der Regel, weil der Bestand jederzeit eine Farbe nachziehen
   kann und dieser Fehler dann still zurückkäme. `font-weight` wird NICHT
   zurückgesetzt: dass `<strong>` fett ist, ist gewollt.

   ⚠ NACHTRAG v6 — ZWEITE FUNDSTELLE, UND DER BELEG, DASS DER SCOPE ZU ENG WAR.
   Der Live-Lauf der Phase 5 hat denselben Defekt im Fußnotenapparat gefunden:
   elf `<strong>` in `section.fieber-fallback-fussnoten` messen im Hell-Modus
   **1,15:1** (#E6F1F9 auf dem weißen Dashboardgrund), während der Fließtext
   derselben Zeile bei 11,69:1 steht — es verschwinden also ausgerechnet die
   Markennamen, die die Sternchen auflösen und derentwegen der Block nach E23
   mit aktivem JS überhaupt stehen bleibt. Im Standardmodus messen dieselben
   Knoten 4,64:1; mit `inherit` werden daraus 5,32:1, weil sie dann die
   Apparatfarbe des jeweiligen Modus tragen (§3: `#ffffff` bzw. im Hell-Zweig
   `#003A66`) statt eines Fremdwerts. Die Reparatur heilt also BEIDE Modi.

   WARUM DER ZWEITE SCOPE `.fieber-fallback-fussnoten` HEISST UND NICHT
   `.fieber-dashboard` ODER `.fieber-buehne` — gemessen, nicht abgewogen:
   Die Tag-Liste unten enthält `i`, und `i` ist in dieser Ansicht die
   Icon-Schrift. In `.fieber-dashboard` sitzt `i.icon.icon-sliders` mit
   rgb(169,246,219) auf einem Elternteil mit rgb(0,0,0) — ein `color: inherit`
   mit (0,1,1) schlüge die Bestandsregel und färbte das Icon im Standardmodus
   SCHWARZ. In `.fieber-buehne` säßen die 35 `sup.fieber-marker` der Matrix im
   Zugriff; heute wäre das folgenlos (gemessen tragen sie bereits exakt die
   Zellfarbe), aber es nähme jeder künftigen Marker-Farbe die Wirkung.
   `.fieber-fallback-fussnoten` ist dagegen der EINZIGE Ort außerhalb des
   Panels, an dem diese Tag-Liste überhaupt entsteht: Core `:2038` gibt den
   Fußnotentext durch `strip_tags($text, '<b><i><strong><em><br><sup><sub>')`
   — dieselbe Allowlist, dieselbe Begründung, kein Kollateralschaden.
   Der Fallback-Tabelle daneben fehlt sie: die geht durch `strip_tags()` OHNE
   Allowlist (`:504`) und kann gar kein Auszeichnungs-Tag tragen. */
.fieber-panel strong,
.fieber-panel b,
.fieber-panel em,
.fieber-panel i,
.fieber-panel sup,
.fieber-panel sub,
.fieber-fallback-fussnoten strong,
.fieber-fallback-fussnoten b,
.fieber-fallback-fussnoten em,
.fieber-fallback-fussnoten i,
.fieber-fallback-fussnoten sup,
.fieber-fallback-fussnoten sub {
    color: inherit;
}

/* `style.css:23` hängt an jeden Anker `transition: color .15s ease,
   text-decoration-color .15s ease`. Im Panel ist die Blende unerwünscht: der
   Wechsel des Kontrastmodus soll SOFORT stehen, nicht über 150 ms einlaufen.
   Ein Moduswechsel ist keine Zierbewegung, sondern eine Zustandsänderung —
   und während der Blende steht die Schrift auf Zwischenwerten, die in keinem
   der beiden Modi gemessen sind.

   ⚠ ZUR ENTSTEHUNG DIESER ZEILE, weil die ursprüngliche Begründung FALSCH war
   und in diesem Projekt eine falsche Begründung die Vorstufe des nächsten
   Fehlers ist: Hier stand zuerst, eine laufende Transition verhindere den
   Farbwechsel des Hell-Modus dauerhaft, wenn `.fieber-hell` per JavaScript
   gesetzt wird — mit einer Erklärung über Chromes `:visited`-Auflösungspfad.
   Diese Erklärung ist ZURÜCKGEZOGEN. Der Review hat sie mit echtem
   `:visited`-Zustand auf Chrome 151 nicht reproduzieren können, und meine
   eigene saubere Gegenprobe (Klasse nachweislich auf Overlay UND Panel,
   Messpunkte 0/300/800/2000 ms) widerlegt sie ebenfalls:
     ohne Transition: #0A7450 ab 0 ms
     mit  Transition: #A9F6DB bei 0 ms, dann #0A7450 ab 300 ms — also KORREKT,
                      der Mint-Wert war nur die laufende Blende.
   Die Zeile bleibt, aber allein aus dem Grund im ersten Absatz. Sie ist NICHT
   die Voraussetzung dafür, dass die Hell-Regeln in §9 greifen. */
.fieber-panel a {
    transition: none;
}

/* ⚠ FÜNFTER LEAK — das Icon IM Anker, und der Grund, warum die Ankerfarbe
   allein nicht reicht. Zwei Bestands-Regeln greifen nacheinander:

     `style.css:210` `.icon{…color:var(--mint-200)}`   Ruhezustand
     `style.css:217` `a:focus>.icon,a:hover>.icon{color:var(--mint-100)}`

   Den Ruhezustand fängt der `color: inherit`-Reset darüber bereits ab — ein
   `<i class="icon">` IST ein `i`, und `.fieber-panel i` (0,1,1) schlägt `.icon`
   (0,1,0). Der HOVER-/FOKUS-Zustand nicht: `a:focus > .icon` wiegt (0,2,1) und
   schlägt den Reset. Gemessen im Hell-Modus **1,08:1** — `#DFFDF2` auf Weiß,
   also praktisch unsichtbar, und zwar genau in dem Moment, in dem ein
   Tastaturnutzer das Element ansteuert.

   `color: inherit` statt eines Farbwerts: so folgt das Icon dem Anker, der es
   trägt — in BEIDEN Modi und in jedem seiner Zustände. Ein fester Wert müsste
   hier viermal gepflegt werden (hell/dunkel × Ruhe/Fokus) und liefe beim
   nächsten Palettenwechsel wieder auseinander.

   Die Spezifität (0,3,1) ist knapp gerechnet und deshalb hier vermerkt: sie
   schlägt die (0,2,1) des Bestands, mehr nicht. Wer den Selektor kürzt, dreht
   das Verhältnis um. */
.fieber-panel a:hover > .icon,
.fieber-panel a:focus > .icon {
    color: inherit;
}

/* --- Overlay ------------------------------------------------------------
   `z-index: 1005` ist ein GEMESSENER Mindestwert, keine Geschmacksfrage: die
   fixierte Navigation liegt auf 1001 (`style.css:602 .navMain`), der Menüknopf
   auf 1004 (`:611 #openBtn,#closeBtn`). Ein Overlay darunter läge unter der
   Navigation. Nach oben konkurriert seit CT-0188 (13.09.2026) überhaupt etwas — vorher lag
   das Panel in `#content` und damit in dessen eigenem Stapelkontext, jetzt auf body-Ebene.
   GEMESSEN statt gerechnet (Pre-Upload-VRT, 375 px): `#closeBtn` trägt computed **1004** in
   Portrait; die 1006 aus `:733` gelten nur unter `@media (orientation: landscape) and
   (max-width: 55em)`. `elementFromPoint` auf der Knopfmitte trifft in beiden Fällen den
   Schließer — er bleibt bedienbar. Eine sichtbare Kollision mit dem Overlay (1005) ist
   ausgeschlossen, weil die Engine das Panel beim Hash-Wechsel auf `#offen` schließt und das
   Overlay dort unsichtbar ist. Bewusst nicht gegengesteuert; der Fall gehört nach dem
   nächsten Upload live nachgemessen (Portrait UND Landscape).

   KEIN `backdrop-filter` AUF DEM OVERLAY (E12): ein Filter machte das Overlay
   zum Containing Block seines `fixed`-Kindes — genau der Fehler, gegen den die
   Warnung oben steht, nur hausgemacht.

   Ausgeblendet wird über `visibility` + `opacity`, nicht über `display`: mit
   `display: none` gäbe es keinen Übergang, und ein reines `opacity: 0` ließe
   das Panel unsichtbar fokussierbar. `visibility: hidden` nimmt es zugleich aus
   dem Tastaturpfad und aus dem Accessibility-Baum — der zweite Riegel neben dem
   `aria-hidden`, das die Engine pflegt. Die Verzögerung auf der
   `visibility`-Achse lässt das Ausblenden erst NACH der Blende greifen. */
.fieber-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1005;
    background-color: rgba(9, 30, 48, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease, visibility 0s linear 150ms;
}
.fieber-overlay.fieber-panel-offen {
    opacity: 1;
    visibility: visible;
    transition: opacity 150ms ease, visibility 0s linear 0s;
}

/* --- Panel (Desktop: rechts angeschlagen) -------------------------------
   `max-width: 100%` fängt Viewports zwischen 30rem und 48em ab, auf denen noch
   die Desktop-Regel gilt, das Panel aber breiter wäre als das Bild.
   `backdrop-filter` steht NUR hier (E12). */
.fieber-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30rem;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    /* CT-0316 P2 (09.09.2026, vorher rgba(0, 69, 120, 0.94)): derselbe Grund wie
       in der Festgeld-DE-Kreativansicht (`diagramm.min.css:445` `.zg-karte`, dort
       zeichengleich auch am `.anpassen-panel`). Die drei kreativen Ansichten
       tragen damit EIN Panelblau statt zweier ähnlicher.
       `backdrop-filter`, Schatten und der Hell-Zweig (#F7F9FC) bleiben unberührt. */
    background-color: rgba(9, 87, 143, 0.92);
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
    box-shadow: -0.25em 0 1.5em rgba(0, 0, 0, 0.35);
    color: #ffffff;
    transform: translateX(100%);
    transition: transform 220ms ease;
}
.fieber-panel-offen .fieber-panel {
    transform: translateX(0);
}
/* Bodenmass siehe §5a am Reglerschieber (Befund L-H2). Hier trug der Ring mit
   2,00 px bereits — der Boden ist die Absicherung gegen eine verkleinerte
   Wurzelschrift, nicht eine Verbreiterung. */
.fieber-panel:focus {
    outline: 0.125em solid #ffffff;
    outline-width: max(2px, 0.125em);
    outline-offset: -0.25em;
}
/* --- CT-0323 S3 (09.09.2026): DIE VIER PANEL-RINGE NUR NOCH FUER TASTATUR --
   Anwender-Auftrag: „Bei Klick auf die Icons/Elemente den weissen umliegend
   erscheinenden Rahmen entfernen." Muster und Begruendung stehen vollstaendig
   an `.fieber-karte` (R3, CT-0318, §5b): der `:not()`-Weg ist so herum gebaut,
   dass ein Browser OHNE `:focus-visible` den ganzen Selektor verwirft und den
   Rahmen behaelt — der Ausfall geht zugunsten der Zugaenglichkeit aus.

   VIER STELLEN, und jede hat einen eigenen Vorselektor, damit die Spezifitaet
   um genau eine Pseudoklasse ueber der Ringregel liegt: das Panel selbst
   (hier), der Schliessen-Knopf (§ weiter unten), die Anker im Koerper und der
   CTA.

   ⚠ DIE HELL-PENDANTS BRAUCHEN KEINE EIGENE REGEL, und das ist GEMESSEN, nicht
   aus der Spezifitaet geschlossen: sie schalten ausschliesslich
   `outline-color` um, nie `outline-style`. Der Stil kommt also weiterhin nur
   aus dem Standardzweig, und dort gewinnt diese Regel. Nachgewiesen am
   09.09.2026 in beiden Kontrastmodi bei 1200 und 375: nach Mausklick
   `outlineStyle: 'none'`, nach Tab/Enter `outlineStyle: 'solid'`, 2 px.

   ⚠ EIN SATZ DES BAUAUFTRAGS WAR FALSCH und ist hier korrigiert: das Panel
   bekommt beim Oeffnen NICHT den Fokus. `oeffnePanel()` ruft
   `if (!fokussiere(refs.zu)) { fokussiere(refs.panel); }` — also zuerst den
   SCHLIESSEN-KNOPF; das Panel ist nur der Rueckfall, wenn der Knopf fehlt.
   Gemessen: `document.activeElement.id` nach Maus- wie Tastaturoeffnung
   `fieber-panel-schliessen`. Diese Regel deckt deshalb den Rueckfallpfad ab,
   nicht den Regelfall — der liegt am Schliessen-Knopf. */
.fieber-panel:focus:not(:focus-visible) {
    outline: none;
}

/* --- Kopf ---------------------------------------------------------------
   `flex: 0 0 auto` — DER KOPF SCROLLT NICHT MIT (Tagesgeld-Muster). Das
   Brokerage-Vorbild scrollt das ganze Panel und verliert dabei den
   Schließen-Knopf aus dem Bild; auf einem Sheet mit 85vh ist das der
   Unterschied zwischen erreichbar und nicht erreichbar.
   `padding-right` hält die Titelzeile aus der Trefferfläche des Knopfes. */
.fieber-panel-kopf {
    flex: 0 0 auto;
    position: relative;
    padding: 1.1em 1.2em 0.9em;
    /* ⚠ 4.7em SEIT CT-0318 R4, VORHER 4.2em — UND DAS IST GEMESSEN, NICHT
       aufgerundet. Der Schliessen-Knopf ist mit R4 von `right: 0.7em` (der
       alten Knopfschrift 1.35rem = 21,6 px, also 15,12 px) auf `right: 1em`
       der neuen 1.25rem gewandert: 20 px. Zusammen mit seinen 44 px belegt er
       64 px von der rechten Kopfkante; 4.2em ergaben bei 15,36 px Panelschrift
       64,51 px — der Titelkasten endete also 0,51 px vor dem Knopf statt der
       geforderten 0,5em (7,68 px). GEMESSEN am 09.09.2026 mit geöffnetem
       Panel: `titelRechts → knopfLinks` = 0,50 px. 4.7em = 72,19 px lassen
       8,19 px stehen.
       ⚠ DER BAUAUFTRAG NANNTE 4.5em ALS AUSWEICHWERT — der hätte die eigene
       Vorgabe VERFEHLT: 4.5em = 69,12 px, Rest 5,12 px, weiterhin unter 0,5em.
       Nachgerechnet statt übernommen (CT-0318-Bericht, Abweichung A2). */
    padding-right: 4.7em;
    border-bottom: 0.0625em solid rgba(255, 255, 255, 0.30);
}

/* 2.75rem = 44px bei 16px-Wurzelmaß (WCAG 2.5.8). Bewusst `rem` und nicht `em`:
   im Sheet steht der Knopf in einem Kopf, dessen `em` an der Panelschrift
   hängt — die Trefferfläche darf davon nicht abhängen.

   ⚠ BEGRÜNDETE px-AUSNAHME — die einzige in dieser Datei, bitte nicht als
   Verstoß gegen die em/rem-Konvention wegräumen. Der VRT hat 43,997 × 43,997 px
   gemessen, weil die Wurzelschrift dort 15,999 px betrug: `rem` hängt an einer
   Größe, die Browser und Nutzer verstellen können, die WCAG-Schwelle 2.5.8 ist
   aber in CSS-px definiert. Ein relatives Maß kann eine absolute Schwelle nicht
   garantieren — es fehlten 0,003 px, und das ist kein Rundungsfehler, sondern
   ein systematischer. `min-width`/`min-height` in px ziehen den Boden ein, ohne
   das Wachstum nach oben zu nehmen: bei größerer Wurzelschrift bleibt `2.75rem`
   der bestimmende Wert. Derselbe Fall wie die 3rem-Reglerspur in §5a, dort nur
   mit Reserve statt mit Boden gelöst. */
/* R4 (CT-0318, 09.09.2026): der Knöpf wird eine SICHTBARE KACHEL, nach dem
   Vorbild der Tagesgeld-DE-Kreativansicht (`.skyline-panel-close`,
   `..\Tagesgeld DE\tagesgeld-diagramm.min.css:307-316`, Sheet `:471-475`,
   Hell `:524-526`). Bis dahin war er flächenlos: `background-color:
   transparent`, `border-radius: 0.25em` — ein `×` im Nichts, dessen
   Trefferfläche man nur erriet.

   ⚠ ZWEI BEWUSSTE ABWEICHUNGEN VOM VORBILD, beide begründet:

     1. DIE GRÖSSE BLEIBT 2.75rem MIT 44-px-BODEN. Das Vorbild misst am
        Desktop 2.4rem = 38,4 px und geht erst im Sheet auf 2.75rem. Der
        Auftrag sagt „gestaltet", nicht „gleich groß" — und die 44 px sind
        eine Anwender-Entscheidung aus Phase 6 (Befund B6, WCAG 2.5.8; live
        gemessen waren es damals 43,997 px). Eine Angleichung nach unten wäre
        der Verlust einer erarbeiteten Zugänglichkeitsschwelle.
     2. DER RING BLEIBT INNEN (`outline-offset: -0.125em`). Das Vorbild ringt
        außen; der Knopf sitzt hier am Panelrand, ein Außenring würde
        beschnitten.

        ⚠ HIER STAND BIS CT-0323 (09.09.2026) AUCH „DER FOKUS BLEIBT AN
        `:focus`, NICHT AN `:focus-visible`" — DAS GILT NICHT MEHR. Der
        Anwender hat am selben Tag genau diesen Rahmen beanstandet, und der
        Befund war berechtigt: `oeffnePanel()` gibt dem Knopf den Fokus
        PROGRAMMATISCH (`fokussiere(refs.zu)`), also stand nach jedem Mausklick
        auf eine Karte ein weißer Ring im Panelkopf, ohne dass jemand ihn
        angesteuert hätte. Seit CT-0323 gilt der Vorbehalt
        `:focus:not(:focus-visible)` (Regel unter der Ringregel), womit dieses
        Projekt in diesem Punkt jetzt DEM VORBILD FOLGT statt von ihm
        abzuweichen. Der Innenring aus Punkt 2 bleibt davon unberührt.

   Alles übrige folgt dem Vorbild: Kachel rgba(255,255,255,0.16), Radius
   0.5em, Hover 0.30, Schrift 1.25rem, Position 1em/1em (Sheet 0.9em/0.75em),
   `transition: background-color 130ms ease` — explizite Property-Liste statt
   des `background` des Vorbilds (Hauskonvention CT-0221/CT-0227). */
.fieber-panel-schliessen {
    position: absolute;
    top: 1em;
    right: 1em;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0.5em;
    background-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 130ms ease;
}
.fieber-panel-schliessen:hover {
    background-color: rgba(255, 255, 255, 0.30);
}
/* Bodenmass siehe §5a am Reglerschieber (Befund L-H2). ⚠ DIESER RING WAR BIS
   CT-0318 DER BREITESTE DER DATEI (2,70 px, weil das `em` an 1.35rem hing).
   Mit der Angleichung an das Vorbild steht die Knopfschrift auf 1.25rem, also
   ist `0.125em` = 2,50 px — immer noch über dem 2-px-Boden, `max()` lässt ihn
   deshalb weiterhin unangetastet. Die Zahl in der Ringübersicht §5a ist
   entsprechend fortgeschrieben. */
.fieber-panel-schliessen:focus {
    outline: 0.125em solid #ffffff;
    outline-width: max(2px, 0.125em);
    outline-offset: -0.125em;
}
/* CT-0323 S3: derselbe Tastatur-Vorbehalt wie an den drei anderen Panel-Ringen
   (Begruendung am `.fieber-panel:focus` weiter oben).

   ⚠ DIESE STELLE IST DIE WICHTIGSTE DER VIER, und die R4-Notiz darueber ist
   entsprechend fortgeschrieben: der Schliessen-Knopf bekommt beim Oeffnen des
   Panels den PROGRAMMATISCHEN Fokus (`fokussiere(refs.zu)`), also stand nach
   JEDEM Mausklick auf eine Karte ein weisser Ring im Panelkopf — genau der
   Rahmen, den der Anwender gemeldet hat. Gemessen 09.09.2026, alle vier
   Kombinationen aus 1200/375 und Standard/Hell: `:focus-visible === false`
   nach Maus, `=== true` nach Enter auf der Karte.

   Der INNENRING (`outline-offset: -0.125em`) bleibt — er ist eine bewusste
   Abweichung vom Tagesgeld-Vorbild (R4, Punkt 2), weil der Knopf am Panelrand
   sitzt und ein Aussenring beschnitten wuerde. Geaendert hat CT-0323 nur, WANN
   der Ring erscheint, nicht WIE er aussieht. */
.fieber-panel-schliessen:focus:not(:focus-visible) {
    outline: none;
}

/* Startet im Markup `hidden` und ohne `src`; die Engine setzt beides nur bei
   nicht-leerem `bild`. Ein leeres `src` löste einen zweiten Seitenabruf aus.

   MASSE SIND AUS DER LISTE ÜBERNOMMEN, nicht erfunden: dort 100×62 (Desktop) und
   74×47 (mobil), hier in `rem` umgerechnet — 6.25rem × 3.875rem bzw.
   4.625rem × 2.9375rem. Der Umrechnungsfaktor ist das 16er-Wurzelmaß, dieselbe
   Grundlage wie bei der 2.75rem-Trefferfläche des Schließen-Knopfes.

   `object-fit: contain` ist der Grund, warum die realen Bildmaße egal sind: die
   Datei wird in den Rahmen eingepasst, statt ihn zu füllen. Ohne diese Zeile
   verzerrte jedes Bild, dessen Seitenverhältnis nicht 100:62 trifft.

   KEIN `onerror`-Handler und KEIN CSS-Ersatzbild für fehlende Dateien — die
   Liste hat auch keines, und ein Abweichen wäre Drift zwischen zwei Ansichten
   derselben Daten. Die Regel unten ist KEIN solcher Ersatz: sie setzt nur das
   `hidden`-Attribut durch, das `display: block` sonst überstimmen würde. */
.fieber-panel-bild {
    display: block;
    width: 6.25rem;
    height: 3.875rem;
    object-fit: contain;
    margin: 0 0 0.6em;
    border-radius: 0.375em;
}
.fieber-panel-bild[hidden] {
    display: none;
}

.fieber-panel-titel {
    margin: 0;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: 600;
    color: #ffffff;
}
.fieber-panel-sub {
    margin: 0.25em 0 0;
    padding: 0;
    font-size: 0.88rem;
    line-height: 1.35;
    color: #ffffff;
}
.fieber-panel-sub:empty {
    margin: 0;
}

/* --- Körper -------------------------------------------------------------
   `flex: 1 1 auto` + `overflow-y: auto` — der scrollende Teil.
   `overscroll-behavior: contain` verhindert, dass die Seite hinter dem Panel
   weiterscrollt, sobald der Körper sein Ende erreicht (Scroll-Chaining). Die
   Sperre auf `html`/`body` weiter unten ist der zweite Riegel dafür.
   Kinder auf `flex: 0 0 auto`, sonst staucht der Flexkontext die Blöcke.

   ⚠ SEIT CT-0318 (09.09.2026) IST DER KÖRPER SELBST EIN FLEXKONTEXT
   (`display: flex; flex-direction: column`). Bis dahin war er ein reiner
   Blockcontainer, und die Regel `> * { flex: 0 0 auto }` darunter war TOT: sie
   beschrieb die Kinder eines Kontextes, den es hier nicht gab. Der Grund für
   den Wechsel ist der CTA — er dockt jetzt wie im Festgeld-Zinsgebirge per
   `margin-top: auto` am unteren Körperende an, und `auto` braucht dafür eine
   Flex-Spalte. Zwei Folgen, beide gemessen und aufgefangen:

     1. `> * { flex: 0 0 auto }` wird lebendig — und das ist genau richtig:
        ohne sie staucht der Flexkontext die Blöcke, statt den Körper scrollen
        zu lassen (dasselbe Argument wie im Festgeld-Sheet).
     2. Geschwister-Margins kollabieren NICHT mehr. Betroffen war genau EINE
        Regel: `.fieber-panel-gruppe + .fieber-panel-gruppe` ging deshalb mit
        CT-0318 auf 1em statt 2.3em. ⚠ DIESE REGEL GIBT ES SEIT CT-0323 NICHT
        MEHR — der Abstand steht jetzt einseitig als `margin-bottom: 2.3em` an
        der Gruppe selbst, damit er auch unter der letzten Gruppe wirkt; der
        Grabstein an ihrem Platz trägt die volle Geschichte. Die Aussage dieses
        Punktes bleibt gültig: alle Blockabstände im Körper sind einseitig
        gesetzt (`margin: 0 0 X`) und haben deshalb keinen Kollaps-Partner —
        gemessen unverändert (CT-0318- und CT-0323-Bericht, jeweils
        Vorher/Nachher-Tabelle). */
.fieber-panel-koerper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1em 1.2em 1.6em;
}
.fieber-panel-koerper > * {
    flex: 0 0 auto;
}

/* --- Kennzahlen (Preis-Freitext + berechnete Jahreskosten) -------------- */
.fieber-panel-kennzahlen {
    margin: 0 0 1.2em;
    padding: 0.7em 0.85em 0.8em;
    border: 0.0625em solid rgba(255, 255, 255, 0.30);
    border-radius: 0.35em;
    background-color: rgba(0, 0, 0, 0.12);
}
/* ⛔ `.fieber-panel-kennzahl + .fieber-panel-kennzahl { margin-top: 0.7em }` ist
   am 09.09.2026 ENTFALLEN (CT-0316 P3): der Block trägt seit der Streichung der
   Kennzahl „Kartenpreis laut Anbieter" nur noch EIN Kind, der Nachbarschafts-
   Selektor kann also nie mehr treffen. Wer eine zweite Kennzahl ergänzt, holt
   diese Regel mit zurück — sonst kleben beide aneinander. */
/* Die Beschriftung einer Kennzahl hat in der abschließenden Namensliste
   (Namens-Vertrag §3.3) keinen eigenen Namen. Bis zur Nacharbeit R1 stand hier
   zusätzlich der Alias `.fieber-panel-kennzahl-titel`, weil noch offen war,
   welchen Weg die Engine wählt. Sie erzeugt `.fieber-panel-label` — der Alias
   ist damit eine tote Regel und ERSATZLOS ENTFERNT (Review H-4), hier wie im
   Hell-Zweig §9. */
.fieber-panel-kennzahl .fieber-panel-label {
    display: block;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #ffffff;
}
.fieber-panel-kennzahl-wert {
    display: block;
    margin-top: 0.15em;
    font-size: 1.05rem;
    line-height: 1.3;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}
/* Der Kurztext, der bei `jahreskosten === null` den GRUND benennt (§5.3 des
   Namens-Vertrags). Er steht bewusst in der Wertzeile und nicht als Fußnote:
   „nicht berechenbar" ist hier die Auskunft, nicht ihr Fehlen. Kleiner und
   nicht fett, damit er nicht wie ein Betrag liest. */
.fieber-panel-kennzahl-grund {
    display: block;
    margin-top: 0.15em;
    font-size: 0.85rem;
    line-height: 1.4;
    font-weight: 400;
    color: #ffffff;
}

/* --- Gruppen ------------------------------------------------------------ */
/* ⚠ 2.3em SEIT CT-0323 S2 (09.09.2026), VORHER 1.3em — und der Wert ist der
   SELBE GESAMTABSTAND wie zuvor, nur an einer anderen Deklaration. Bis dahin
   entstanden die 2.3em zwischen zwei Gruppen aus 1.3em hier plus 1em an
   `.fieber-panel-gruppe + .fieber-panel-gruppe` (CT-0316 P7 / CT-0318). Diese
   Aufteilung konnte die LETZTE Gruppe nicht erreichen: `+` braucht eine
   nachfolgende Gruppe, und nach der letzten kommt der Zusatzinfos-Block oder
   der CTA.

   Der Anwender-Auftrag von CT-0323 verlangt aber genau dort ein em mehr
   („... und dasselbe unterhalb von *Neukundenaktion*"). Damit ist der Zuschlag
   nicht mehr die Ausnahme zwischen zwei Gruppen, sondern die Regel unter jeder
   Gruppe — und ein `margin-bottom` erreicht beide Fälle ohne Fallunterscheidung.
   Die `+`-Regel ist dafür ersatzlos entfallen; ihre Geschichte steht unten.

   ⚠ ZWEI WEGE, DIE GEMESSEN AUSGESCHIEDEN SIND — beide standen im Bauauftrag:

     `.fieber-panel-gruppe:last-of-type { margin-bottom: 2.3em }`
        trifft nur die Karten OHNE Zusatzinfos. `:last-of-type` fragt nach dem
        letzten Element seines TAGS, und `.fieber-panel-zusatzinfos` ist
        ebenfalls ein `div`. Am DOM gemessen (09.09.2026): bei IDS 14 und 35
        ist der letzte `div` des Körpers die Zusatzinfos-Box, bei IDS 12 die
        vierte Gruppe. Die beiden Karten mit Zusatzinfos wären leer ausgegangen.

     `.fieber-panel-gruppe + .fieber-panel-zusatzinfos { margin-top: 1em }`
        trifft zwar, liefert aber den FALSCHEN WERT: `em` löst gegen die
        Schrift des ELEMENTS auf, und die Zusatzinfos-Box steht auf 0.85rem =
        13,60 px — viewportunabhängig. Gemessen ergab das 33,55 px bei 1200
        (statt 35,31) und 30,22 px bei 375 (statt 29,44): zu wenig auf dem
        Desktop, zu viel auf dem Sheet, und je nach Karte ein anderer Abstand.
        Dieselbe Falle wie in CT-0318 (Memory `em-loest-gegen-elementschrift-auf`).

   `margin-bottom` an der Gruppe selbst hat das Problem nicht: die Gruppe erbt
   die Panel-Schrift (15,36 px bei 1200, 12,80 px im Sheet), 2.3em sind dort
   35,31 bzw. 29,44 px — in BEIDEN Kartenformen derselbe Wert. Nachgemessen. */
.fieber-panel-gruppe {
    margin: 0 0 2.3em;
}
.fieber-panel-gruppe:last-child {
    margin-bottom: 0;
}
/* ⚠ GRABSTEIN: HIER STAND BIS CT-0323 (09.09.2026) DIE REGEL
   `.fieber-panel-gruppe + .fieber-panel-gruppe { margin-top: 1em }`.
   Sie ist ERSATZLOS ENTFALLEN, weil ihr Beitrag jetzt im `margin-bottom` der
   Gruppe steckt (Begründung dort). Der gerenderte Abstand zwischen zwei
   Gruppen ist unverändert: 35,31 px bei 1200, 29,42 px bei 375 — im selben
   Lauf vorher und nachher gemessen.

   IHRE GESCHICHTE, weil sie zweimal ihren Wert gewechselt hat und beide Male
   aus einem guten Grund:
     CT-0316 P7  neu mit `2.3em`. Damals war `.fieber-panel-koerper` ein
                 Blockcontainer; dort kollabieren die Außenabstände zweier
                 Geschwister zum GRÖSSEREN der beiden, also ergab 2.3em gegen
                 das `margin-bottom: 1.3em` des Vorgängers genau 2.3em
                 (gemessen 35,33 px).
     CT-0318 R1  `2.3em` -> `1em`. Der Körper wurde eine FLEX-SPALTE (der CTA
                 braucht `margin-top: auto`), und dort kollabiert nichts mehr:
                 1.3em + 2.3em hätten sich still zu 3.6em addiert. 1.3em + 1em
                 hielt den Zielwert.
     CT-0323 S2  entfällt. 2.3em stehen jetzt einseitig am `margin-bottom`,
                 damit sie auch UNTER der letzten Gruppe wirken.

   Die Lehre über alle drei Runden (`sollwert-richtig-deklaration-falsch`):
   der SOLLWERT ist 2.3em Gesamtabstand, die DEKLARATION hängt am
   Layoutkontext. Wer den Körper wieder zum Blockcontainer macht, muss neu
   messen — dann kollabiert `margin-bottom: 2.3em` gegen einen etwaigen
   `margin-top` des Nachbarn. */
/* --- CT-0323 S1 (09.09.2026): EIN EM LUFT VOR DER ERSTEN GRUPPE ----------
   Anwender-Auftrag: „Im Panel zu den Details vor *Kartenausstattung* zusaetzlichen
   Freiraum von 1em hinzufuegen". Die Regel darueber trifft die erste Gruppe
   nicht — `+` verlangt eine Gruppe als Vorgaenger, und vor der ersten steht der
   Bewertungsblock (seit CT-0318 R2 direkt unter dem Jahreskosten-Kasten).

   `.fieber-panel-bewertung` ist der richtige Anker, weil die Engine ihn OHNE
   GUARD baut (`fuellePanel()`, kreditkarte-diagramm-race.js:4556): er steht bei
   jeder der 20 Karten unmittelbar vor der ersten Gruppe. Am DOM gemessen
   (09.09.2026, IDS 12/14/35): Kinderfolge des Koerpers
   `.fieber-panel-kennzahlen` · `.fieber-panel-bewertung` · 4× `.fieber-panel-gruppe`
   · [`.fieber-panel-zusatzinfos`] · `a.fieber-panel-cta`.

   Voller `1em`-Zuschlag statt eines Kollaps-Ausgleichs: der Koerper ist seit
   CT-0318 eine Flex-Spalte, dort kollabiert nichts (Begruendung im Block
   darueber). Gemessen 1200: 18,30 -> 33,66 px (Panelschrift 15,36); 375:
   18,30 -> 31,10 px (Sheet-Schrift 12,80). */
.fieber-panel-bewertung + .fieber-panel-gruppe {
    margin-top: 1em;
}
.fieber-panel-gruppe-titel {
    margin: 0 0 0.5em;
    padding: 0 0 0.3em;
    border-bottom: 0.0625em solid rgba(255, 255, 255, 0.30);
    font-family: inherit;
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 600;
    color: #ffffff;
}

/* Zwei Spalten statt Definitionsliste: die Werte sind Freitexte sehr
   unterschiedlicher Länge, und eine Beschriftungsspalte mit fester Obergrenze
   hält die Wertspalte in einer Flucht. `minmax(…, 11em)` lässt die Spalte auf
   schmalen Bildern schrumpfen, bevor der Wert umbricht. */
.fieber-panel-zeile {
    display: grid;
    grid-template-columns: minmax(7em, 11em) 1fr;
    gap: 0.15em 0.9em;
    padding: 0.35em 0;
    border-bottom: 0.0625em solid rgba(255, 255, 255, 0.12);
}
.fieber-panel-zeile:last-child {
    border-bottom: 0;
}
/* `overflow-wrap: anywhere` gegen den Überlauf aus VRT-B4. Der Befund ist
   feiner, als er aussieht: NICHT die Gesamtlänge des Labels ist das Problem —
   die beiden LÄNGSTEN Beschriftungen (Auslandsentgelt, EWR-Kursaufschlag)
   brechen sauber um, weil sie aus kurzen Wörtern bestehen. Es ist das einzelne
   lange KOMPOSITUM, das in keine Zeile passt und dann als Ganzes hinausragt:
   „Bargeldabhebungsgebühr" (gemessen 33,2 px Überlauf bei 375),
   „Teilzahlungskonditionen" (22,2), „Drittstaatenwährungen" (16,2),
   „PostIdent/VideoIdent" (4,2).

   `anywhere` und nicht `break-word`: nur `anywhere` senkt auch die
   INTRINSISCHE Mindestbreite, an der das Grid seine Spalte bemisst. Mit
   `break-word` bräche das Wort zwar um, die Spalte forderte aber weiterhin die
   volle Wortbreite an und drückte die Wertspalte zusammen.

   Kein `hyphens: auto` als Ersatz: das braucht ein gesetztes `lang` und
   liefert je Browser andere Trennstellen — für eine Kollisionssperre zu
   unsicher. Als Ergänzung schadet es nicht, als alleinige Maßnahme genügt es
   nicht. */
.fieber-panel-label {
    font-size: 0.82rem;
    line-height: 1.4;
    color: #ffffff;
    overflow-wrap: anywhere;
}
.fieber-panel-wert {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #ffffff;
    /* KEIN `white-space: pre-line`. Der echte Zeilenumbruch in den
       Gebühren-Freitexten kollabiert zum Leerzeichen, nur ein wörtliches `<br>`
       bricht um (Namens-Vertrag H-4). `pre-line` kippte diese Regel und ließe
       die Fieberkarte dieselben Felder anders auslegen als Liste und Tabelle —
       genau der Drift, den der cross-view-konsistenz-pruefer sucht. */
}
/* Der Betrag der Neukundenaktion steht seit CT-0316 P6 (09.09.2026) in einer
   EIGENEN Zeile unter dem Aktions-Icon, nicht mehr davor im selben Fließtext.
   `display: block` ist hier die ganze Regel: das Icon bringt über
   `.fieber-panel-koerper a` seine eigene Trefferfläche mit und ist damit hoch
   genug, dass ein danebenstehender Betrag die Zeile sprengte. */
.fieber-panel-aktion-betrag {
    display: block;
    margin-top: 0.25em;
}

/* `k. A.` nur bei LEEREM Wert. Ein `-` ist ein echter Feldinhalt („fällt nicht
   an", Stolperstein 2) und bekommt deshalb keine Sonderoptik. */
.fieber-panel-leer {
    color: #ffffff;
    font-style: italic;
}

/* --- Trefferflächen der Inhaltsanker (VRT-Auflage 1) --------------------
   Gemessen über alle 20 Karten: 25 Anker, ALLE unter 24 × 24 px, kleinste Höhe
   16,2 px (typisch 21,2 × 16,2 beim Erfahrungsberichte-Icon, 36,7 × 16,2 beim
   Aktions-Icon). Das verfehlt WCAG 2.5.8, und das Projekt legt beim
   Schließen-Knopf selbst 44 px an — ein Anker mitten im Text darf dann nicht
   auf 16 px stehen.

   DAS PROBLEM AN DER LÖSUNG IST NICHT DIE HÖHE, SONDERN DIE ZEILE: Das Panel
   trägt 28 Merkmalszeilen. Wer die Trefferfläche über `padding` und
   `line-height` erkauft, verlängert jede Zeile, in der ein Anker steht, und
   die Summe fällt dem Nutzer als Sprung auf. Deshalb hier:
     - `display: inline-block` (ein `inline`-Element nimmt weder Höhe noch
       senkrechtes Padding an — ohne diese Zeile bleibt alles Weitere wirkungslos),
     - `min-width` UND `min-height` als Bodenmaß, beide wachsen nur, wo sie müssen,
     - senkrechtes `padding` zum Auffüllen, und
     - ein NEGATIVES senkrechtes `margin` in derselben Größe, das dem
       Zeilenkasten genau das zurückgibt, was das Padding ihm genommen hat.
   `vertical-align: middle` hält den Anker dabei in der Textflucht.

   ⚠ BEIDE ACHSEN, NICHT NUR DIE HÖHE. Die erste Fassung dieser Regel hatte nur
   `min-height` — damit stiegen 25 Anker auf 28,5 px Höhe, blieben in der Breite
   aber bei **21,2 px** und verfehlten WCAG 2.5.8 weiterhin (21 von 25 Ankern).
   Die Breite ist hier der schwierigere Wert, weil sie bei Icon-Ankern von der
   GLYPHE kommt: `min-width` wirkt schriftunabhängig und deckt deshalb auch die
   Fälle ab, in denen die Icon-Schrift gar nicht lädt (ein Anker wurde lokal mit
   Breite 0 gemessen, weil die Grafik fehlte). Eine schriftabhängige Lösung —
   etwa über `font-size` oder `padding` in `em` — wäre genau dort unzuverlässig,
   wo sie gebraucht wird, und liesse sich lokal nicht belastbar messen.

   24px/44px sind — wie beim Schließen-Knopf — als px gesetzt: die
   WCAG-Schwelle ist in CSS-px definiert, ein relatives Maß kann sie nicht
   garantieren (siehe die ausführliche Begründung dort). Sie sind das
   BODENMASS, nicht die Größe; die Optik bleibt an em/rem.

   Der Schließen-Knopf und der CTA sind hier ausgenommen: beide bringen ihre
   Fläche schon mit (2.75rem bzw. Button-Padding). */
.fieber-panel-koerper a {
    display: inline-block;
    min-width: 24px;
    min-height: 24px;
    padding-top: 0.35em;
    padding-bottom: 0.35em;
    margin-top: -0.35em;
    margin-bottom: -0.35em;
    vertical-align: middle;
}
/* Im Bottom-Sheet gilt das strengere Maß: dort wird mit dem Daumen gezielt,
   und der Anker steht zwischen zwei weiteren Zeilen. */
@media (max-width: 48em) {
    .fieber-panel-koerper a {
        min-width: 44px;
        min-height: 44px;
        padding-top: 0.6em;
        padding-bottom: 0.6em;
        margin-top: -0.6em;
        margin-bottom: -0.6em;
    }
}
/* ⚠ DIE ACHTE FOKUSRING-STELLE — sie fehlte bis Phase 5 GANZ, und zwar auf
   eine Art, die beim Zählen leicht durchrutscht: §9 führt seit Phase 4 ein
   Hell-Pendant für `.fieber-panel a:not(.fieber-panel-cta):focus`, das nur die
   `outline-color` umschaltet. Im STANDARDMODUS gab es aber gar keinen eigenen
   Ring, den diese Farbe hätte umschalten können — die Anker im Panel-Freitext
   trugen dort den Bestands-Ring aus style.css (`--mint-400` #4DE5B4). Das
   Hell-Pendant hing also an einer Regel, die es nicht gab.

   Betroffen ist kein Randfall: es sind die Erfahrungsberichte-Links aller 20
   Karten und die Aktions-Icons von fünf. Ohne diese Regel wäre L-H2 auch nach
   der Härtung der sieben anderen Ringe nicht geschlossen.

   `:not(.fieber-panel-cta)` ist Pflicht, nicht Kosmetik — wortgleich zur
   Begründung am Hell-Pendant in §9: der CTA ist ebenfalls ein `<a>` im Panel
   und bringt seinen eigenen Ring mit. Ohne den Ausschluss läge hier ein
   Selektor auf ihm, und welcher gewänne, entschiede die Reihenfolge.
   Bodenmass wie bei den übrigen sieben (§5a am Reglerschieber). */
.fieber-panel-koerper a:not(.fieber-panel-cta):focus {
    outline: 0.125em solid #ffffff;
    outline-width: max(2px, 0.125em);
    outline-offset: 0.125em;
}
/* CT-0323 S3: Tastatur-Vorbehalt, Begruendung am `.fieber-panel:focus`.
   Betroffen sind das Erfahrungsberichte-Icon aller 20 Karten und die
   Aktions-Icons von fuenf — die „Icons", die der Anwender-Auftrag nennt.
   Das Hell-Pendant (§9) schaltet nur `outline-color`; der Stil kommt weiter
   von hier. Gemessen 09.09.2026 an IDS 14 (Icon 48,95 × 50,30 px bei 1200):
   Mausklick `outlineStyle 'none'`, Tab `'solid'` 2 px, in beiden Modi. */
.fieber-panel-koerper a:not(.fieber-panel-cta):focus:not(:focus-visible) {
    outline: none;
}

/* Der CTA ist ein eigener Knopf und bringt seine Fläche über sein Padding schon
   mit; er braucht von den Regeln oben nur das Bodenmaß. Padding und Margin
   holt er sich aus seiner eigenen Regel weiter unten — die steht später in der
   Datei und schlägt bei gleicher Spezifität (0,1,1) die Anker-Regeln hier. Das
   ist der Grund, warum hier NICHT noch einmal Padding stehen muss: eine zweite
   Angabe wäre wirkungslos und würde den nächsten Leser in die Irre führen. */
a.fieber-panel-cta {
    min-height: 44px;
}

/* --- Zusatzinfos (H-1, ohne Überschrift) --------------------------------
   Löst die Sternchen auf, die in den Gebühren-Freitexten ohne Auflösung stehen
   (IDS 14 und 35, Stolperstein 5). Abgesetzt, damit der Block nicht als
   weitere Merkmalszeile liest. */
.fieber-panel-zusatzinfos {
    margin: 0 0 1.3em;
    padding: 0.7em 0.85em;
    border-left: 0.1875em solid rgba(255, 255, 255, 0.30);
    background-color: rgba(0, 0, 0, 0.12);
    font-size: 0.85rem;
    line-height: 1.45;
    color: #ffffff;
}

/* --- Bewertung im aktiven Profil ---------------------------------------- */
.fieber-panel-bewertung {
    margin: 0 0 1.3em;
    font-size: 0.88rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}
/* Zahl ÜBER drei Punkten (CT-0317 Q1, 09.09.2026). Werte ZEICHENGLEICH aus dem
   Inline-Block der Listenansicht (`kreditkarte-vergleich-core.inc.php:398-426`,
   `.sterne-wert`/`.sterne-wert-max`/`.sterne-zeile`/`.stern-aktiv`/
   `.stern-inaktiv`) — die drei Ansichten sollen dieselbe Bewertung zeigen,
   nicht drei ähnliche.

   ⚠ CT-0316 P4 HATTE HIER NUR DIE PUNKTE STEHEN, UND DAS WAR DIE HALBE
   LISTEN-OPTIK: die Liste zeigt Zahl UND Punkte. Die Zahl ist am selben Tag
   zurückgekommen (CT-0317 Q1). Wer eine der beiden Hälften wieder entfernt,
   macht denselben Weg ein zweites Mal.

   `align-items: flex-start` statt der Zentrierung der Liste: dort steht der
   Stapel allein in einer Kachel, hier in der Wertspalte NEBEN einem Label —
   linksbündig fluchtet er mit jedem anderen Wert des Panels.

   `2px` am Ring ist Bestandsmaß aus der Liste, kein Optikwert — es steht dort
   ebenso in px und ist eine Kontur, kein Abstand. */
.fieber-panel-bewertung-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.fieber-panel-bewertung-wert {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
}
/* `/3` ist KIND der Zahl (wie `.sterne-wert-max` in `.sterne-wert`): nur so
   sitzt es auf deren Grundlinie und erbt die Laufweite.

   ⚠ KEIN eigenes `letter-spacing` — die Vererbung IST der Sollzustand. Die
   Liste setzt an `.sterne-wert-max` ebenfalls keines, das Suffix erbt dort die
   -0.03em der Zahl und misst live -0,72 px (am 09.09.2026 an
   `kreditkarte-vergleich-niedriger-kartenpreis.php` gemessen, nicht aus der
   Deklaration geschlossen: 0,8rem-Text mit der Laufweite eines 1,5rem-Textes).
   Ein `letter-spacing: normal` stand hier im ersten Wurf und wäre eine stille
   Abweichung von der Vorlage gewesen.

   Die Liste schreibt die Farbe als `color: var(--text-secondary, #aab)`. Das
   Token ist zentral definiert - `vergleich.min.css` setzt es auf
   `.vergleich-dashboard` als rgba(255,255,255,0.7) und mappt es im Hell-Zweig
   um (Liste hell gemessen: rgba(0,0,0,0.88)). IM PANEL IST ES NICHT AUFLÖSBAR:
   `#fieber-panel` hängt unter `#fieber-overlay` AUSSERHALB von
   `.vergleich-dashboard` (gemessen 09.09.2026: Token am Dashboard
   rgba(255,255,255,0.7), am Panel leer, `closest('.vergleich-dashboard')` am
   Suffix null). Ein `var(--text-secondary, #aab)` fiele hier also auf den
   Fallback #aab zurück - deshalb steht der Wert fest. ⚠ RESTRISIKO: ändert sich
   das Token zentral, wandert die Liste mit und das Panel nicht; wer es
   umstellt, zieht diese Regel und ihr Hell-Pendant (§9) von Hand nach.
   (Review-Auflage A1 zu CT-0317 - der erste Wurf nannte die Variable
   fälschlich als auf der Seite leer.) */
.fieber-panel-bewertung-max {
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}
/* `margin-top: 0.2em` statt des früheren `min-height: 1.4em`/`align-items:
   center`: die Reihe steht jetzt UNTER der Zahl und nicht mehr allein in der
   Zeilenmitte — die Zeilenhöhe trägt die Zahl. Der Wert ist der der Liste
   (`.sterne-zeile { margin-top: 0.2em }`). */
.fieber-panel-punkte {
    display: flex;
    gap: 0.2em;
    margin-top: 0.2em;
}
.fieber-panel-punkt {
    width: 0.625em;
    height: 0.625em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}
.fieber-panel-punkt-aktiv {
    background: #1FD99B;
    box-shadow: 0 0 0 2px rgba(31, 217, 155, 0.4);
}

/* --- CTA ----------------------------------------------------------------
   DAS `a.`-PRÄFIX IST PFLICHT, kein Stil: `style.css:31`
   `a[href^="https://www.modern-banking.de/r/"]::after` hängt ein
   fontello-Zeichen an jeden Redirect-Link und wiegt (0,1,1). `.fieber-panel-cta`
   allein wöge (0,1,0) und verlöre; `a.fieber-panel-cta` wiegt ebenfalls (0,1,1)
   und gewinnt über die Quellreihenfolge — diese Datei lädt nach `style.css`
   (Core-Kopf, `:1166` vor `:1168`). Der Bestand löst es an `:37` für `a.btn`
   genauso. */
/* CT-0318 (09.09.2026): FESTGELD-PARITÄT. Der Knopf trug bis dahin einen
   weißen 0.0625em-Rahmen auf rgba(255,255,255,0.12) — ein „Geister“-Knopf, der
   sich neben dem mintfarbenen CTA des Zinsgebirges wie ein Sekundär-Element
   las. Alle Werte hier sind am Vorbild LIVE GEMESSEN (09.09.2026,
   `diagramm-festgeld-12-monate.php`, `.zg-karte .zg-dk-cta`, Deklaration
   `Festgeld DE\diagramm.min.css:556-600`), nicht aus dessen Quelltext
   abgeschrieben: dort stehen `var()`-Token, die in DIESEM Panel nicht
   auflösen — das Fieberkarten-Panel hängt an `document.body`, also außerhalb
   von `.vergleich-dashboard`, wo die Listen-Variablen definiert sind.
   px des Vorbilds sind in rem/em übersetzt (Hauskonvention); bei 16 px Wurzel
   rendern sie zeichengleich.

   `margin-top: auto` ist der Positionsanker: der Körper ist seit CT-0318 eine
   Flex-Spalte, `auto` dockt den Knopf an deren unteres Ende. Läuft der Inhalt
   über, liefert `auto` 0 und der Mindestabstand kommt vom `margin-bottom` des
   letzten Inhaltsblocks — genau das Verhalten des Vorbilds.
   `align-self: flex-end` hält ihn inhaltsbreit und rechtsbündig (statt über
   die volle Breite zu laufen, was `align-items: stretch` sonst täte).

   `transition` ist bewusst NICHT `all` wie im Vorbild, sondern die explizite
   Property-Liste (Hauskonvention CT-0221/CT-0227/CT-0301).

   Die Angaben `display`, `margin`, `padding` und `vertical-align` stehen hier
   VOLLSTÄNDIG, obwohl sie teils Defaults wiederholen: `.fieber-panel-koerper a`
   weiter oben wiegt ebenfalls (0,1,1) und setzt negative Margins und ein
   eigenes Padding; nur die spätere Quellposition dieses Blocks hält sie fern. */
a.fieber-panel-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    gap: 0.25rem;
    margin: auto 0 0;
    padding: 0.8em 1.3em;
    border: none;
    border-radius: 0.5rem;
    background-color: #A9F6DB;
    color: #004578;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 600;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color 150ms ease;
}
a.fieber-panel-cta:hover,
a.fieber-panel-cta:focus {
    background-color: #DFFDF2;
    color: #004578;
}
/* Pfeil-Chip. Er war bis CT-0318 UNGESTYLT: die Engine baut den Span seit
   Phase 4 mit der Klasse `.link-arrow`, in der Annahme, „die vorhandene
   Listen-Regel greift“ — die steht aber in `vergleich.min.css` unter
   `.vergleich-dashboard`, und das Panel hängt außerhalb davon. Derselbe
   Fallstrick ist im Vorbild dokumentiert (`Festgeld DE\diagramm.min.css:584`,
   „gemessen: Probe-Chip ungestylt“). Deshalb voll definiert.
   Die 18/12/6/3/1-px-Werte des Vorbilds als rem: bei 16 px Wurzel identisch. */
a.fieber-panel-cta .link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background-color: #004578;
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1;
    margin-left: 0.375rem;
    position: relative;
    top: -0.1875rem;
    padding-bottom: 0.0625rem;
}
/* Bodenmass siehe §5a am Reglerschieber (Befund L-H2). */
a.fieber-panel-cta:focus {
    outline: 0.125em solid #ffffff;
    outline-width: max(2px, 0.125em);
    outline-offset: 0.125em;
}
/* CT-0323 S3: Tastatur-Vorbehalt, Begruendung am `.fieber-panel:focus`.
   ⚠ NUR DER RING FAELLT WEG, NICHT DIE FARBE: die Regel `a.fieber-panel-cta:hover,
   a.fieber-panel-cta:focus { background-color: #DFFDF2 }` weiter oben bleibt
   unangetastet — ein Klick auf den CTA soll weiterhin sichtbar quittiert
   werden, nur eben durch die Flaeche statt durch einen Rahmen. Das ist
   dieselbe Aufteilung wie an `.fieber-karte` (R3: Grund hell, Ring nur
   Tastatur). */
a.fieber-panel-cta:focus:not(:focus-visible) {
    outline: none;
}
a.fieber-panel-cta::after,
a.fieber-panel-cta:hover::after {
    content: none;
}

/* --- Scroll-Sperre ------------------------------------------------------
   ⚠ HIER STAND BIS ZUR NACHARBEIT R1 `html.fieber-modal-offen,
   html.fieber-modal-offen body { overflow: hidden }` — DAS WAR DER FEHLER, UND
   ER IST GEMESSEN, NICHT VERMUTET: Die Seite sprang bei JEDEM Öffnen rund
   700 px an den Anfang und kehrte nie zurück (VRT-B1). Ursache ist das
   `overflow: hidden` auf dem WURZELELEMENT: `html` ist der Scrollport des
   Dokuments; wird der auf `hidden` gesetzt, kollabiert er, der Browser wirft
   die Scrollposition weg und setzt sie auf 0. Das Vorbild, aus dem die Regel
   stammt, hat denselben Fehler — abgeschrieben statt nachgemessen.

   RICHTIG IST DIE SPERRE AUF DEM BODY, und zwar über `position: fixed`, nicht
   über `overflow`: ein fixierter Body nimmt sich aus dem Fluss, die Seite
   dahinter kann nicht mehr scrollen, und der Scrollport auf `html` bleibt
   unangetastet.

   DAS FEHLENDE `top` IST ABSICHT UND GEHÖRT NICHT HIERHER. Ein fixierter Body
   ohne Versatz zeigt immer den Seitenanfang — die Scrollposition muss also als
   negativer `top`-Wert nachgereicht werden, und den kann nur JavaScript kennen.
   Die Engine setzt ihn beim Sperren INLINE und stellt ihn beim Lösen wieder
   her (Builder B). Wer hier ein `top` einträgt, überschreibt den Messwert mit
   einer Konstanten und baut den Sprung wieder ein — nur diesmal auf eine feste
   Höhe statt auf 0.

   Träger der Klasse ist damit `body`, NICHT mehr `document.documentElement`
   (Änderung an §3.3 des Namens-Vertrags, vom Hauptthread festgelegt). */
body.fieber-modal-offen {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* --- Bottom-Sheet ≤48em -------------------------------------------------
   `max-height` statt fester Höhe: der Inhalt schwankt je Karte stark (28
   Merkmalszeilen plus ein Zusatzinfos-Block, den nicht jede Karte hat). Ein
   Sheet mit fester Höhe stünde bei der kurzen Karte halb leer und schnitte bei
   der langen ab. `height: auto` ist die ausdrückliche Rücknahme der
   Desktop-Regel `top: 0` — ohne sie spannte das Panel weiter über die ganze
   Höhe und der Sheet-Charakter ginge verloren.

   `max-width: 34em` + `margin: 0 auto`: auf einem Tablet quer wäre ein Sheet
   über die volle Breite ein Band; zentriert bleibt es ein Blatt.

   Die Modalität wechselt hier NICHT — `role`, `aria-modal` und `tabindex`
   stehen statisch im Markup. Nur so ist ein Resize über die 48em-Grenze bei
   offenem Panel ein Nicht-Ereignis (Pflicht-Testfall 5 der Gates). */
@media (max-width: 48em) {
    .fieber-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 34em;
        height: auto;
        max-height: 85vh;
        margin: 0 auto;
        border-radius: 0.75em 0.75em 0 0;
        box-shadow: 0 -0.25em 1.5em rgba(0, 0, 0, 0.35);
        transform: translateY(100%);
    }
    .fieber-panel-offen .fieber-panel {
        transform: translateY(0);
    }
    /* Der Greifer-Strich — `::before` am Kopf, KEIN Element und KEIN
       Drag-Handler. Ein Zieh-Handler kollidierte mit dem waagerechten
       Matrix-Scroller darunter; der Strich ist reine Formsprache („dieses Blatt
       gehört nach unten"). Nur im Sheet: über einem rechts angeschlagenen
       Panel voller Höhe hätte er keine Aussage. */
    .fieber-panel-kopf {
        padding-top: 1.5em;
    }
    /* R4 (CT-0318): Sheet-Position des Schliessen-Knopfes wie im Vorbild
       (`.skyline-panel-close` im Sheet-Zweig: 0.9em / 0.75em). Größe und
       Schrift stehen schon in der Basisregel auf dem Sheet-Maß des Vorbilds
       — hier wandert nur der Anschlag, damit der Knopf nicht mit dem
       Greifer-Strich (`.fieber-panel-kopf::before`, `top: 0.55em`, mittig)
       ins Gehege kommt. Beides nachgemessen, siehe CT-0318-Bericht. */
    .fieber-panel-schliessen {
        top: 0.9em;
        right: 0.75em;
    }
    /* Im Sheet fällt die Panelschrift auf 12,8 px, der Knopf behält aber
       seine 44 px und seinen rem-basierten Anschlag (0.75em von 1.25rem =
       15 px): er belegt 59 px von rechts, während 4.7em dort nur 60,16 px
       ergeben — 1,16 px Rest statt 0,5em (6,4 px). ⚠ DAS WAR SCHON VOR
       CT-0318 SO, und zwar schlechter: mit 4.2em/0.7em standen 53,76 px gegen
       59,12 px, der Titelkasten ragte also 5,36 px IN die Knopffläche.
       Gemessen, nicht geschlossen. 5.2em = 66,56 px lassen 7,56 px stehen. */
    .fieber-panel-kopf {
        padding-right: 5.2em;
    }
    /* Das mobile Maß der Liste (74×47), damit das Blatt auf schmalen Bildern
       nicht vom Bild dominiert wird. `object-fit: contain` steht in der
       Basisregel und gilt hier weiter. */
    .fieber-panel-bild {
        width: 4.625rem;
        height: 2.9375rem;
    }
    .fieber-panel-kopf::before {
        content: '';
        position: absolute;
        top: 0.55em;
        left: 50%;
        width: 2.75em;
        height: 0.3em;
        margin-left: -1.375em;
        border-radius: 0.15em;
        background-color: rgba(255, 255, 255, 0.35);
    }
}

/* --- Schmale Bilder: Beschriftung ÜBER den Wert (VRT-B4) ----------------
   Der Umbruch aus `overflow-wrap: anywhere` verhindert, dass ein Label in die
   Wertspalte ragt — er löst aber nicht, dass beide Spalten auf 375 zu schmal
   sind: die Beschriftung bekäme 140,8 px und zerfiele bei den langen
   Komposita in vier bis fünf Zeilen, der Wert daneben in ebenso viele.
   Untereinander bekommt jeder Teil die VOLLE Breite, und die Zeile wird
   kürzer statt länger.

   34em und nicht 48em als Grenze: zwischen beiden ist der Sheet durch
   `max-width: 34em` bereits so breit wie sein Inhalt, dort trägt das
   Zweispalter-Raster noch. Erst darunter wird die Breite wirklich knapp.

   DIE WERTE BLEIBEN LINKSBÜNDIG — das ist keine Änderung: `.fieber-panel-wert`
   hat nie ein `text-align` getragen, der Wert stand auch im Zweispalter links
   in seiner Spalte. Die Umstellung verschiebt also nur die Position der
   Spalte, nicht die Ausrichtung des Textes; zur Listenoptik entsteht kein
   Widerspruch.

   Die Beschriftung tritt hier zusätzlich zurück (0.78rem, etwas gedämpft), weil
   ohne die trennende Spaltenkante sonst Label und Wert gleich laut wirken. Die
   Dämpfung läuft über die Farbe eines echten Grautons auf der Panelfläche und
   NICHT über `opacity` — Auflage 3 des Phase-3-Vertrags. Gemessen bleibt sie
   deutlich über 4,5:1. */
@media (max-width: 34em) {
    .fieber-panel-zeile {
        grid-template-columns: 1fr;
        gap: 0.1em 0;
        padding: 0.45em 0;
    }
    .fieber-panel-label {
        font-size: 0.78rem;
        color: #d6e4f0;
    }
}

/* ==========================================================================
   §9 KONTRAST-HELL-ZWEIG FÜR MATRIX, SCROLLER UND LEGENDE
   --------------------------------------------------------------------------
   Klassenbasiert über `#vergleich.kontrast-hell` wie der Bestand, NICHT als
   `prefers-color-scheme`-Media-Query: der Modus ist eine Nutzerentscheidung im
   Vergleich, keine Systemeinstellung. Der Umschalter kommt mit der Bedienleiste
   in Phase 5; die Klasse kann aber schon jetzt aus Liste oder Tabelle gesetzt
   sein (`g_kontrast_hell` ist produktübergreifend geteilt).

   Der Dashboardgrund ist in diesem Modus HELL (seit 2026-08-21 mattes #F7F9FC
   statt Reinweiss; die Messwerte unten sind auf Reinweiss gerechnet und liegen
   um rund 0,2 Punkte hoeher als der heutige Stand)
   (vergleich.min.css `.kontrast-hell .vergleich-dashboard{…background:#fff}`).
   Deshalb kehrt sich die Rahmenfarbe um: dunkel statt hell. Sie steht damit
   gegen den weißen Grund UND gegen die hellen Stufen 1, 2 und 7, die sich
   selbst nicht vom Grund abheben — dieselbe Logik wie im Standardmodus, nur
   spiegelbildlich.

   Die sieben Stufenfarben selbst kommen auch hier aus der Engine (E10): sie
   liest den Modus einmal beim Rendern und wählt die Hell-Palette.
   ========================================================================== */
#vergleich.kontrast-hell .fieber-tabelle {
    color: #003A66;
}
#vergleich.kontrast-hell .fieber-kopf {
    background-color: #F7F9FC;
    color: #003A66;
    border-color: #003A66;
}
#vergleich.kontrast-hell .fieber-zelle {
    color: #003A66;
    border-color: #003A66;
}
#vergleich.kontrast-hell .fieber-zelle-karte {
    background-color: #F7F9FC;
}
#vergleich.kontrast-hell .fieber-kopf-karte {
    background-color: #F7F9FC;
}
#vergleich.kontrast-hell .fieber-sortier:hover {
    background-color: rgba(0, 82, 141, 0.10);
}
#vergleich.kontrast-hell .fieber-sortier:focus,
#vergleich.kontrast-hell .fieber-karte:focus,
#vergleich.kontrast-hell .fieber-scroller:focus {
    outline-color: #003A66;
}
/* ⛔ HIER STAND BIS ZUM 09.09.2026 DAS R3-HELL-PENDANT AM KNOPF
   (`#vergleich.kontrast-hell .fieber-karte:focus` /
   `[aria-expanded="true"]`, rgba(0,82,141,0.10)). Mit CT-0331 ist es an die
   ZELLE gewandert und steht weiter unten, HINTER dem Hell-Geister-Prinzip —
   die Begründung für den Ortswechsel steht dort. */
/* Hell-Pendant der Sonderzustände. ⛔ Der dritte Selektor
   `.fieber-zelle-entfaellt` ist am 06.08.2026 mit dem Zustand entfallen (E44) —
   Begründung am Standardmodus-Pendant in §8. */
#vergleich.kontrast-hell .fieber-zelle-unmoeglich,
#vergleich.kontrast-hell .fieber-zelle-unbewertet,
#vergleich.kontrast-hell .fieber-legende-unbewertet,
#vergleich.kontrast-hell .fieber-zelle-ka {
    background-color: rgba(0, 82, 141, 0.07);
}
/* Hell-Pendant der Schraffur. `.fieber-zelle-unbewertet` und das
   Legendenkästchen stehen seit dem 12.09.2026 (E78) in derselben Liste —
   Begründung am Standardmodus-Pendant in §8. */
#vergleich.kontrast-hell .fieber-zelle-unmoeglich,
#vergleich.kontrast-hell .fieber-zelle-unbewertet,
#vergleich.kontrast-hell .fieber-legende-unbewertet {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0, 58, 102, 0) 0,
        rgba(0, 58, 102, 0) 0.32em,
        rgba(0, 58, 102, 0.20) 0.32em,
        rgba(0, 58, 102, 0.20) 0.64em
    );
}
/* Geister-Prinzip (§8). Die Fläche ist dieselbe blasse Blaufläche, die dieser
   Abschnitt den neutralen Zellzuständen zwei Regeln weiter oben gibt — die
   Geisterzelle IST ein neutraler Zellzustand. Die sticky erste Spalte bekommt
   den deckenden Mischwert `#EDF3F7` (= rgba(0,82,141,0.07) auf Weiss), aus
   demselben Grund wie im Standardmodus: eine halbtransparente sticky Spalte
   liesse die scrollende Matrix hinter sich durchziehen.
   Grauton #3D6285 gemessen: **5,71:1** auf beiden Flächen. Die schraffierte
   Zelle bleibt auch hier ausgenommen (dort 3,96:1) und behält #003A66. */
#vergleich.kontrast-hell .fieber-zeile-inaktiv .fieber-zelle {
    background-color: rgba(0, 82, 141, 0.07);
    color: #3D6285;
}
#vergleich.kontrast-hell .fieber-zeile-inaktiv .fieber-zelle-karte {
    background-color: #EDF3F7;
}
#vergleich.kontrast-hell .fieber-zeile-inaktiv .fieber-zelle-unmoeglich,
#vergleich.kontrast-hell .fieber-zeile-inaktiv .fieber-zelle-unbewertet {
    color: #003A66;
}
/* R3-Hell-Pendant (CT-0318), seit CT-0331 an der ZELLE. ⚠ EINE AUSLEGUNG, KEINE
   ÜBERSETZUNG: der Hell-Modus färbt die Kartenzelle #F7F9FC — fast Weiß.
   „Aufhellen" ist dort nicht möglich; die Rückmeldung wird eine leichte
   ABDUNKLUNG. Genommen ist derselbe Ton, den der Hell-Modus schon für den
   Sortierknopf-Hover verwendet (`.fieber-sortier:hover` weiter oben) — so
   entsteht keine zweite Sprache für dieselbe Aussage. Die Schrift ist hier
   dunkel auf hell, der Kontrast steigt durch die Abdunklung, statt zu fallen.

   DECKEND wie das Standardmodus-Pendant, aus demselben Sticky-Grund:
   rgba(0,82,141,0.10) auf #F7F9FC = rgb(222,232,241) = #DEE8F1 — genau der Wert,
   den CT-0321 am 09.09.2026 live gemessen hat. Keine Farbänderung, nur ein
   anderer Träger und eine andere Notation.

   ⚠ WARUM DIESER BLOCK HINTER DEM HELL-GEISTER-PRINZIP STEHT UND NICHT BEI
   SEINEM DUNKEL-ZWILLING: `#vergleich.kontrast-hell .fieber-zeile-inaktiv
   .fieber-zelle-karte` wiegt (1,3,0) — GENAUSO VIEL wie
   `#vergleich.kontrast-hell .fieber-zelle-karte:focus-within`. Bei Gleichstand
   entscheidet die Quellreihenfolge, und an der alten Stelle (rund 30 Zeilen
   weiter oben) hätte die Geisterkarte gewonnen: eine geöffnete Geisterkarte
   bliebe im Hell-Modus ohne jede Rückmeldung. Im Standardmodus stellt sich die
   Frage nicht, dort steht das Geister-Prinzip ohnehin früher in der Datei.
   Ein `!important` ist hier ausgeschlossen (Hauskonvention) — die Reihenfolge
   ist das Werkzeug. */
#vergleich.kontrast-hell .fieber-zelle-karte:focus-within,
#vergleich.kontrast-hell .fieber-zelle-karte.fieber-zelle-karte-offen {
    background-color: #DEE8F1;
}
#vergleich.kontrast-hell .fieber-legende-titel,
#vergleich.kontrast-hell .fieber-legende-hinweis,
#vergleich.kontrast-hell .fieber-legende-marker-liste {
    color: #003A66;
}
#vergleich.kontrast-hell .fieber-legende-stufe {
    border-color: #003A66;
}
/* Hell-Pendant des schraffierten Legendenkästchens (E78). Rahmen wie die
   Stufenkästchen, Schriftfarbe wie Titel und Farbhinweis derselben Legende —
   die Fläche liefert der Hell-Block der Sonderzustände weiter oben, damit
   Kästchen und Zelle nicht auseinanderlaufen können. */
#vergleich.kontrast-hell .fieber-legende-unbewertet {
    color: #003A66;
    border-color: #003A66;
}
/* ⛔ HIER STAND BIS ZUM 06.08.2026
   `#vergleich.kontrast-hell .fieber-js .fieber-fallback-fussnoten
    { border-top-color: #b7c6d4 }` — das Hell-Pendant der Trennlinie über dem
   Fußnotenapparat. SIE IST MIT DER TRENNLINIE SELBST ENTFALLEN (E43): §3 bindet
   den Apparat jetzt über eine getönte Fläche mit Radius an, nicht mehr über
   einen `border-top`. Eine Regel, die die Farbe eines nicht vorhandenen Rahmens
   setzt, ist keine harmlose Altlast — sie liest sich beim nächsten Mal als
   Beleg dafür, dass der Rahmen noch da sei.
   Das Hell-Pendant der FLÄCHE steht weiter oben in diesem Abschnitt, das der
   Textfarbe in §3. */
/* `.fieber-js` sitzt auf #fieber-buehne INNERHALB von #vergleich — der
   Nachfahren-Kombinator ist hier also richtig, kein zusammengesetzter Selektor. */
#vergleich.kontrast-hell .fieber-js .fieber-matrix::after {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94));
}

/* --- Bedienleiste (§5b) --------------------------------------------------
   DER TEUERSTE BLOCK DIESER PHASE, UND ZWAR NICHT WEGEN SEINER LÄNGE: Der
   Hell-Modus der Bedienleiste kommt im Bestand VOLLSTÄNDIG aus den
   Inline-<style>-Blöcken der beiden Vorbild-Cores (Tabellen-Core :1019-1064,
   Listen-Core analog). In `vergleich.min.css` — der einzigen geteilten Datei,
   die wir mitladen — steht davon nichts ausser dem Kontrast-Schalter selbst.

   Ohne diesen Block wäre die Fieberkarte im Hell-Modus nicht „etwas anders",
   sondern streckenweise unbedienbar: der weisse Dashboardgrund unter Texten,
   die auf Blau gerechnet sind. Die geteilten Token kippen zwar mit
   (`--text-secondary` wird rgba(0,0,0,0.88), `--text-primary` wird #111) —
   aber genau daraus entsteht der Schaden: `.laufzeit-pill.active` und
   `.toggle-btn.active` nehmen ihre FLÄCHE aus `var(--text-primary)`, im
   Hell-Modus also #111. Eine schwarze aktive Pille mit dunkelblauer Schrift
   wäre das Ergebnis. Der Bestand fängt das mit einer ausdrücklich blauen
   Fläche ab; dieselbe Antwort steht hier.

   ALLE WERTE SIND GEMESSEN, nicht aus dem Bestand geglaubt
   (memory\berichte\phase-5-css-belege\, Läufe 1-3):
     Pille inaktiv     #003A66 auf rgba(0,82,141,0.06)   **10,61:1**
     Pille aktiv       #ffffff auf #0070C0                **5,15:1**
     Segment inaktiv   #003A66 auf dem Band               **9,81:1**
     Segment aktiv     #ffffff auf #0070C0                **5,15:1**
     Filter-Label      #003A66 auf der Filterfläche      **10,78:1**
     Panel-Titel       #00528D auf Weiss                  **8,10:1**
     Gruppentitel      #00528D auf Weiss                  **8,10:1**
     Eingrenzungs-Hint #404040 auf Weiss                 **10,37:1**
     Checkbox-Text     #333333 auf Weiss                 **12,63:1**
     Schließer         #00528D auf rgba(0,82,141,0.10)    **6,89:1**
     Badge             #ffffff auf #0070C0                **5,15:1**
   Nicht-Text (Schwelle 3:1): Checkbox-Rahmen rgba(0,82,141,0.70) **3,94:1**,
   Fokusring #0070C0 gegen Profil-Band **4,67:1**, gegen Segment-Band
   **4,32:1**, gegen weisses Panel **5,15:1**, gegen die Amberfläche **4,88:1**.

   ZWEI ABWEICHUNGEN VOM BESTAND, beide gemessen begründet:
   - Der Checkbox-Rahmen steht im Bestand auf rgba(0,82,141,0.5) und misst
     damit **2,51:1** — unter der Nicht-Text-Schwelle. Die ungehakte Box hat
     ausser diesem Rahmen keine Kante.
   - Das Hinweis-Icon der Reset-Zeile behält im Bestand sein #ffc107 auch im
     Hell-Modus und misst dort **1,55:1** auf der blassen Amberfläche, also
     praktisch unsichtbar. Ein dunkleres Bernstein (#7A5A00, **6,06:1**) hält
     die Farbfamilie und damit die Bedeutung „Hinweis", ohne zu verschwinden.

   Trefferzähler, Hinweistext und Reset-Knopf brauchen hier NICHTS: sie erben
   `var(--text-secondary)`, das im Hell-Zweig der geteilten Datei auf
   rgba(0,0,0,0.88) kippt (**15,84:1** bis **16,56:1**). Die `#ffffff`-Härtung
   aus §5b darf sie dort deshalb nicht erreichen — sie steht mit (1,2,0) unter
   den (1,3,0) dieses Blocks. */
#vergleich.kontrast-hell .fieber-dashboard .laufzeit-nav {
    background-color: rgba(0, 82, 141, 0.06);
}
#vergleich.kontrast-hell .fieber-dashboard .laufzeit-pill {
    color: #003A66;
}
#vergleich.kontrast-hell .fieber-dashboard .laufzeit-pill:hover {
    background-color: rgba(0, 82, 141, 0.08);
    color: #003A66;
}
#vergleich.kontrast-hell .fieber-dashboard .laufzeit-pill.active {
    background-color: #0070C0;
    color: #ffffff;
}
#vergleich.kontrast-hell .fieber-dashboard .toggle-group {
    background-color: rgba(0, 82, 141, 0.06);
}
#vergleich.kontrast-hell .fieber-dashboard .toggle-btn {
    color: #003A66;
}
#vergleich.kontrast-hell .fieber-dashboard .toggle-btn:hover {
    background-color: rgba(0, 82, 141, 0.08);
    color: #003A66;
}
#vergleich.kontrast-hell .fieber-dashboard .toggle-btn.active {
    background-color: #0070C0;
    color: #ffffff;
}
#vergleich.kontrast-hell .fieber-dashboard .filter-label {
    color: #003A66;
}
/* Der Gruppentitel steht im WEISSEN PANEL, nicht auf dem Dashboard — deshalb
   der eigene, etwas hellere Ton des Bestands (#00528D, 8,10:1) statt des
   Dashboard-Tons. Im Standardmodus teilen sich beide die 0,85-Politur, weil
   ihre Gründe dort nahe beieinander liegen; im Hell-Modus tun sie das nicht. */
#vergleich.kontrast-hell .fieber-dashboard .filter-column-title {
    color: #00528D;
}

/* „weitere Filter"-Knopf: dunkelblau/türkis wird weiss/blau. Die Ecken und die
   Schieberegler-Glyphe kommen aus der geteilten Datei und tragen dort die
   Türkistöne — auf weissem Grund unsichtbar, deshalb hier einzeln umgesetzt.
   `.anpassen-badge` steht ausserhalb der Knopf-Selektoren, weil die geteilte
   Regel ihn ebenfalls unpräfigiert führt. */
#vergleich.kontrast-hell .fieber-dashboard .anpassen-filter-btn {
    background-color: #F7F9FC;
    box-shadow: 0 0.125em 0.5em rgba(0, 82, 141, 0.25);
}
#vergleich.kontrast-hell .fieber-dashboard .anpassen-filter-btn:hover,
#vergleich.kontrast-hell .fieber-dashboard .anpassen-filter-btn.open,
#vergleich.kontrast-hell .fieber-dashboard .anpassen-filter-btn[aria-expanded="true"] {
    background-color: rgba(0, 112, 192, 0.14);
}
#vergleich.kontrast-hell .fieber-dashboard .anpassen-filter-btn .ecke-tl {
    border-top-color: #0070C0;
    border-left-color: #0070C0;
}
#vergleich.kontrast-hell .fieber-dashboard .anpassen-filter-btn .ecke-tr {
    border-top-color: #0070C0;
    border-right-color: #0070C0;
}
#vergleich.kontrast-hell .fieber-dashboard .anpassen-filter-btn .ecke-bl {
    border-bottom-color: #0070C0;
    border-left-color: #0070C0;
}
#vergleich.kontrast-hell .fieber-dashboard .anpassen-filter-btn .ecke-br {
    border-bottom-color: #0070C0;
    border-right-color: #0070C0;
}
#vergleich.kontrast-hell .fieber-dashboard .anpassen-filter-btn .icon-wrap .icon-sliders {
    color: #00528D;
}
#vergleich.kontrast-hell .fieber-dashboard .anpassen-badge {
    background-color: #0070C0;
    color: #ffffff;
}

/* Filter-Panel. Der Backdrop bleibt dunkel — er trennt das Panel vom
   Seiteninhalt, und das ist in beiden Modi dieselbe Aufgabe.
   `backdrop-filter: none` aus demselben Grund wie beim Detail-Panel (E12,
   §8a): unter einem weissen Panel milcht der Filter nur die Kanten. */
#vergleich.kontrast-hell .fieber-dashboard .anpassen-panel {
    background-color: #F7F9FC;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(0, 82, 141, 0.35);
    box-shadow: 0 0.5em 2.5em rgba(0, 0, 0, 0.25),
                0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}
#vergleich.kontrast-hell .fieber-dashboard .filter-panel-titel {
    color: #00528D;
    border-bottom-color: rgba(0, 82, 141, 0.18);
}
#vergleich.kontrast-hell .fieber-dashboard .eingrenzungsfilter-title {
    color: #00528D;
}
#vergleich.kontrast-hell .fieber-dashboard .eingrenzungsfilter-hint {
    color: #404040;
}
#vergleich.kontrast-hell .fieber-dashboard .filter-checkbox {
    color: #333333;
}
#vergleich.kontrast-hell .fieber-dashboard .filter-checkbox:hover {
    color: #003A66;
}
#vergleich.kontrast-hell .fieber-dashboard .filter-checkbox input[type="checkbox"] {
    background-color: #F7F9FC;
    border-color: rgba(0, 82, 141, 0.70);
}
#vergleich.kontrast-hell .fieber-dashboard .filter-checkbox input[type="checkbox"]:hover {
    border-color: #0070C0;
}
#vergleich.kontrast-hell .fieber-dashboard .filter-checkbox input[type="checkbox"]:checked {
    background-color: #0070C0;
    border-color: #0070C0;
}
#vergleich.kontrast-hell .fieber-dashboard .panel-close-btn {
    background-color: rgba(0, 82, 141, 0.10);
    color: #00528D;
}
#vergleich.kontrast-hell .fieber-dashboard .panel-close-btn:hover,
#vergleich.kontrast-hell .fieber-dashboard .panel-close-btn:focus {
    background-color: rgba(0, 82, 141, 0.18);
    color: #003A66;
}

/* Reset-Zeile und Trefferzähler.

   ⚠ DIESE DREI ZEILEN SIND KEINE KÜR, SONDERN DIE REPARATUR EINES SCHADENS,
   DEN §5b SONST SELBST ANRICHTET — gefunden vom Wirksamkeits-Gate, nicht beim
   Lesen. §5b hebt die drei Texte im Standardmodus auf volles Weiss, weil der
   geteilte Wert dort 3,28:1 bis 3,41:1 misst. Diese Härtung wiegt (1,2,0) und
   schlägt damit auch den HELL-Zweig der geteilten Datei, der `--text-secondary`
   auf rgba(0,0,0,0.88) kippt: ohne die Regeln hier stünde im Hell-Modus
   weisser Text auf weissem Dashboard — 1:1, also gar nichts.

   Das ist die allgemeine Falle bei jeder Härtung mit `#vergleich`-Präfix: sie
   überholt nicht nur den Wert, den sie meint, sondern auch dessen Hell-Pendant.
   Jede (1,2,0)-Farbregel in §5b braucht deshalb eine (1,3,0)-Antwort hier.

   Der Hover des Reset-Knopfes wechselt hier auf #00528D (8,10:1 auf der
   blassen Amberfläche) — im Hell-Modus trägt der Akzentton, anders als im
   Standardmodus, auch als Schriftfarbe. */
#vergleich.kontrast-hell .fieber-dashboard .result-count,
#vergleich.kontrast-hell .fieber-dashboard .aktive-filter-hinweis,
#vergleich.kontrast-hell .fieber-dashboard .filter-reset-btn {
    color: rgba(0, 0, 0, 0.88);
}
#vergleich.kontrast-hell .fieber-dashboard .filter-reset-btn:hover {
    border-color: #00528D;
    color: #00528D;
}
/* KEINE REGEL FÜR `.filter-hinweis-icon` — und das ist ein Befund, kein
   Vergessen. Hier stand bis zum Bauabschluss ein Hell-Pendant `#7A5A00`
   (6,06:1), weil der Bestandswert `#ffc107` auf der blassen Amberfläche nur
   **1,55:1** misst und damit praktisch unsichtbar ist.

   Die Regel ist ERSATZLOS ENTFERNT, weil das Element nicht existiert: Builder A
   hat das `span.filter-hinweis-icon > i.icon-filter` der Vorbilder bewusst
   nicht nachgebaut — die Klasse `.icon-filter` ist weder in `style.css` noch in
   `vergleich.min.css` definiert, und die Fontello-Schrift des Servers enthält
   keine Glyphe „filter" (alles drei gemessen). Der Bestand rendert dort also
   ohnehin ein leeres Kästchen.

   Der Messwert bleibt hier stehen, damit er nicht verlorengeht: taucht das
   Icon später doch auf, ist der Hell-Modus die Stelle, an der es zuerst
   verschwindet. Eine Regel für ein Element, das es nicht gibt, wäre dagegen
   eine falsche Auskunft an den nächsten Leser. */

/* Fokusringe der Leiste: der Türkiston #A9F6DB misst auf Weiss 1,24:1 — der
   Ring wäre im Hell-Modus unsichtbar, und damit auch die Tastaturbedienung.
   Dieselbe Umschaltung, die der Bestand für seine eigenen Ringe macht. */
#vergleich.kontrast-hell .fieber-dashboard .laufzeit-pill:focus-visible,
#vergleich.kontrast-hell .fieber-dashboard .toggle-btn:focus-visible,
#vergleich.kontrast-hell .fieber-dashboard .filter-reset-btn:focus-visible,
#vergleich.kontrast-hell .fieber-dashboard .panel-close-btn:focus-visible,
#vergleich.kontrast-hell .fieber-dashboard .anpassen-filter-btn:focus-visible,
#vergleich.kontrast-hell .fieber-dashboard .filter-checkbox input[type="checkbox"]:focus-visible {
    outline-color: #0070C0;
}

/* --- Reglerleiste und Ergebniszeile (§5a) --------------------------------
   Der Dashboardgrund ist hier weiß. Die abdunkelnde Fläche des Standardmodus
   wäre darauf ein Grauschleier ohne Zweck; stattdessen dieselbe blasse
   Blaufläche, die §9 den neutralen Zellzuständen gibt. #003A66 darauf misst
   rund 10:1 — dieselbe Textfarbe wie Matrix und Legende, kein eigener Ton.
   Diese Selektoren tragen `#vergleich.kontrast-hell` und stehen damit über
   den `#vergleich`-Regeln aus §5a. */
#vergleich.kontrast-hell .fieber-regler {
    background-color: rgba(0, 82, 141, 0.07);
    border-color: #b7c6d4;
}
#vergleich.kontrast-hell .fieber-regler-label,
#vergleich.kontrast-hell .fieber-regler-wert,
#vergleich.kontrast-hell .fieber-regler-hinweis,
#vergleich.kontrast-hell .fieber-ergebnis {
    color: #003A66;
}
#vergleich.kontrast-hell .fieber-regler-schieber {
    accent-color: #00528D;
}
#vergleich.kontrast-hell .fieber-regler-schieber:focus {
    outline-color: #003A66;
}

/* --- Anker außerhalb des Panels (Fußzeile) — Nacharbeit v6 ---------------
   ZWEITE FUNDSTELLE DERSELBEN REPARATUR, die weiter unten für das Panel steht,
   und der Beleg, dass deren Scope zu eng war. `style.css:23` setzt
   `a:link{color:var(--link)}` ungescopt; die beiden Anker in
   `footer.vergleich-footer > p.footer-line` („berücksichtigte Anbieter",
   „Rankingkriterien") stehen damit im Hell-Modus in #A9F6DB auf dem weißen
   Dashboardgrund. Gemessen live UND auf der Bühne, an beiden Fundorten
   zeichengleich: **1,24:1**.

   ⚠ 1,24:1 IST WÖRTLICH DER WERT, den `memory\berichte\phase-4-belege\
   kontrast-eichwerte.json` als „der Wert VOR der Reparatur" führt — mit der
   ausdrücklichen Warnung, ihn niemals als Sollwert zu übernehmen. Im Panel
   steht er seit Phase 4 repariert bei 5,79:1; außerhalb des Panels stand
   derselbe Defekt bis v6 unrepariert live.

   DIESELBEN FARBEN WIE IM PANEL, mit Absicht: #0A7450 (--link-dunkel =
   --mint-800) misst auf Weiß 5,79:1 und bleibt in der Grünfamilie — der Link
   bleibt als Link erkennbar, was #003A66 (11,69:1, aber Fließtext-Optik) nicht
   leistet. #075A3E (--mint-900) für hover/focus misst 8,26:1. Zwei
   verschiedene Linkfarben in einer Ansicht wären die schlechtere Antwort als
   eine Farbe, die an zwei Stellen steht.

   `:not(.laufzeit-pill)` IST PFLICHT, NICHT KOSMETIK — dieselbe Rolle wie
   `:not(.fieber-panel-cta)` im Panel: die Profil-Pillen sind ebenfalls `<a>`
   INNERHALB `.fieber-dashboard` und tragen im Hell-Modus ihre eigene, oben
   gesetzte Optik (inaktiv #003A66 auf blasser Blaufläche 10,61:1, aktiv
   #ffffff auf #0070C0 5,15:1). Gemessen sind das ALLE übrigen Anker im
   Dashboard: vier insgesamt, zwei Pillen und die zwei hier behandelten — im
   geöffneten Filter-Panel keine weiteren.

   SPEZIFITÄT (1,3,0) — die Antwort auf die Lehre dieser Phase, dass eine
   Farbregel im Hell-Zweig ihr Pendant auf mindestens gleicher Stufe braucht.
   Die Pillen-Regeln oben wiegen ebenfalls (1,3,0), bleiben aber unberührt,
   weil `:not()` sie gar nicht erst matchen lässt — nicht, weil sie ein
   Wettrennen um die Reihenfolge gewännen.

   `:visited` STEHT EINZELN, wortgleich zum Panel: der Bestand färbt den
   besuchten Link mit #7ADFC0, auf Weiß 1,60:1. Ein Pendant nur für den
   Grundzustand ließe ihn unsichtbar.

   DER FOKUSRING GEHÖRT DAZU, und den habe ich selbst gemessen — er stand in
   keinem Befund: `style.css:184` zeichnet `a:focus-visible` mit #4DE5B4
   (--mint-400), das auf dem weißen Dashboardgrund **1,59:1** misst. Für
   Tastaturnutzer im Hell-Modus wäre das ein unsichtbarer Ring an einem bis
   eben unsichtbaren Link — genau die Verschärfung, die der Panel-Block
   zwei Abschnitte weiter unten für sich beschreibt. #0070C0 misst dort
   5,15:1 und ist derselbe Ton, den der Ring-Block der Bedienleiste oben
   verwendet; kein neuer Wert. `:focus-visible` und nicht `:focus`, weil der
   Bestand den Ring genau dort zeichnet.

   NUR DER HELL-MODUS: im Standardmodus messen dieselben Links 4,28:1 und ihr
   Ring 3,34:1. Beides sind Bestandswerte, auf Liste und Tabelle identisch —
   sie hier zu verändern wäre eine Abweichung von den Schwestern ohne Anlass. */
#vergleich.kontrast-hell .fieber-dashboard a:not(.laufzeit-pill) {
    color: #0A7450;
}
#vergleich.kontrast-hell .fieber-dashboard a:not(.laufzeit-pill):visited {
    color: #0A7450;
}
#vergleich.kontrast-hell .fieber-dashboard a:not(.laufzeit-pill):hover,
#vergleich.kontrast-hell .fieber-dashboard a:not(.laufzeit-pill):focus {
    color: #075A3E;
}
#vergleich.kontrast-hell .fieber-dashboard a:not(.laufzeit-pill):focus-visible {
    outline-color: #0070C0;
}

/* --- Detail-Seitenpanel und Bottom-Sheet (§8a) ---------------------------
   HIER TRÄGT KEIN SELEKTOR `#vergleich.kontrast-hell`, und das ist der ganze
   Punkt: das Panel steht AUSSERHALB von `#vergleich` (§8a, Abschnittskopf), der
   Bestands-Schalter erreicht es also nicht. Die Engine spiegelt den Modus
   deshalb als eigene Klasse `.fieber-hell` auf Overlay UND Panel — beide, weil
   beide fixiert sind und keines im anderen liegt, was die Vererbung anginge.

   Die Selektoren wiegen (0,2,0) gegen die (0,1,0) der §8a-Basisregeln und
   stehen zusätzlich später in der Datei; kein `!important` nötig.

   `backdrop-filter: none` im Hell-Modus (E12): der Filter ist eine
   Tiefenandeutung für die dunkle Fläche. Unter einem weißen Panel milcht er nur
   die Kanten und kostet auf schwachen Geräten Bildrate ohne Gegenwert.

   KONTRAST: `#003A66` auf Weiß misst 11,68:1 — dieselbe Textfarbe, die §9
   Matrix, Legende und Reglerleiste gibt, kein eigener Ton. Der Fokusring
   wechselt mit: ein weißer Ring auf weißem Panel wäre unsichtbar. Das ist
   dieselbe Umschaltung, die die Reglerspur zwei Regeln weiter oben macht. */
.fieber-overlay.fieber-hell {
    background-color: rgba(9, 30, 48, 0.45);
}
.fieber-panel.fieber-hell {
    background-color: #F7F9FC;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #003A66;
}
.fieber-panel.fieber-hell:focus {
    outline-color: #003A66;
}
.fieber-panel.fieber-hell .fieber-panel-kopf {
    border-bottom-color: #b7c6d4;
}
/* R4 (CT-0318): Hell-Kachel nach dem Vorbild `.skyline-panel.skyline-hell
   .skyline-panel-close` — rgba(0,82,141,0.12) auf #F7F9FC, Hover 0.22. Bis
   dahin war der Knopf auch hier flächenlos und der Hover lag bei 0.10. */
.fieber-panel.fieber-hell .fieber-panel-schliessen {
    background-color: rgba(0, 82, 141, 0.12);
    color: #003A66;
}
.fieber-panel.fieber-hell .fieber-panel-schliessen:hover {
    background-color: rgba(0, 82, 141, 0.22);
}
.fieber-panel.fieber-hell .fieber-panel-schliessen:focus {
    outline-color: #003A66;
}
.fieber-panel.fieber-hell .fieber-panel-titel,
.fieber-panel.fieber-hell .fieber-panel-sub,
.fieber-panel.fieber-hell .fieber-panel-gruppe-titel,
.fieber-panel.fieber-hell .fieber-panel-label,
.fieber-panel.fieber-hell .fieber-panel-wert,
.fieber-panel.fieber-hell .fieber-panel-leer,
.fieber-panel.fieber-hell .fieber-panel-bewertung,
.fieber-panel.fieber-hell .fieber-panel-zusatzinfos,
.fieber-panel.fieber-hell .fieber-panel-kennzahl .fieber-panel-label,
.fieber-panel.fieber-hell .fieber-panel-kennzahl-wert,
.fieber-panel.fieber-hell .fieber-panel-kennzahl-grund {
    color: #003A66;
}
/* Der abdunkelnde Schleier des Standardmodus wäre auf Weiß ein Grauschleier
   ohne Zweck — dieselbe blasse Blaufläche wie bei Reglerleiste und neutralen
   Zellzuständen. */
.fieber-panel.fieber-hell .fieber-panel-kennzahlen,
.fieber-panel.fieber-hell .fieber-panel-zusatzinfos {
    background-color: rgba(0, 82, 141, 0.07);
}
.fieber-panel.fieber-hell .fieber-panel-kennzahlen,
.fieber-panel.fieber-hell .fieber-panel-gruppe-titel {
    border-color: #b7c6d4;
}
.fieber-panel.fieber-hell .fieber-panel-zusatzinfos {
    border-left-color: #b7c6d4;
}
.fieber-panel.fieber-hell .fieber-panel-zeile {
    border-bottom-color: #dbe4ec;
}
/* Bewertungszahl und Suffix im Hell-Modus (CT-0317 Q1). ⚠ NICHT das `#111` der
   Liste (`:1115`): im Panel ist die durchgehende Textfarbe `#003A66` (E-Reihe
   §9), und die Zahl ist der größte Text des Blocks — sie darf nicht als
   einziges Element aus der Farbfamilie fallen. Das Suffix trägt dieselbe Farbe
   auf 70 % Deckung, spiegelbildlich zum Standardmodus.
   Ohne diese beiden Regeln stünde die weiße Zahl aus dem Standardzweig auf dem
   mattweißen Panelgrund (#F7F9FC) und wäre unsichtbar. */
.fieber-panel.fieber-hell .fieber-panel-bewertung-wert {
    color: #003A66;
}
.fieber-panel.fieber-hell .fieber-panel-bewertung-max {
    color: rgba(0, 58, 102, 0.7);
}
/* Bewertungspunkte im Hell-Modus (CT-0316 P4). Werte aus dem Hell-Zweig der
   Listenansicht (`kreditkarte-vergleich-core.inc.php:1116-1117`) — dasselbe
   Blau, derselbe Ring, dieselbe blasse Fläche für den inaktiven Punkt. Ohne
   dieses Pendant stünde ein Mint-Punkt auf mattweißem Grund und der inaktive
   Punkt (Weiß auf Weiß) wäre unsichtbar. */
.fieber-panel.fieber-hell .fieber-panel-punkt {
    background: rgba(0, 82, 141, 0.18);
}
.fieber-panel.fieber-hell .fieber-panel-punkt-aktiv {
    background: #0070C0;
    box-shadow: 0 0 0 2px rgba(0, 112, 192, 0.4);
}
/* CT-0318: Hell-CTA auf Festgeld-Parität. Gemessen am Vorbild
   (`#vergleich.kontrast-hell .zg-karte .zg-dk-cta`, `Festgeld DE\diagramm.min.css:1086-1088`):
   #0070C0 auf Weiß, Hover #00528D, Chip #F7F9FC/#00528D. Bis dahin stand hier
   #00528D/Hover #003A66 — dieselbe Familie, aber eine Stufe dunkler.
   `border-color` ist entfallen: die Basisregel setzt seit CT-0318 `border: none`,
   eine Randfarbe ohne Rand wäre eine Deklaration ohne Wirkung.
   Die Fokus-Outline bleibt #003A66 (Bestand, gegen die hellere Fläche). */
.fieber-panel.fieber-hell a.fieber-panel-cta {
    background-color: #0070C0;
    color: #ffffff;
}
.fieber-panel.fieber-hell a.fieber-panel-cta:hover,
.fieber-panel.fieber-hell a.fieber-panel-cta:focus {
    background-color: #00528D;
    color: #ffffff;
}
.fieber-panel.fieber-hell a.fieber-panel-cta .link-arrow {
    background-color: #F7F9FC;
    color: #00528D;
}
.fieber-panel.fieber-hell a.fieber-panel-cta:focus {
    outline-color: #003A66;
}

/* --- CTA im Bottom-Sheet (CT-0318) --------------------------------------
   Das Vorbild hält den Sheet-CTA in BEIDEN Kontrastmodi mint und macht ihn
   vollbreit (`.zg-sheet-inhalt .zg-dk-cta`, `Festgeld DE\diagramm.min.css:869-898`,
   Kommentar `:862-868`) — gemessen: 375×800, Standard UND Hell identisch
   #A9F6DB/#004578. Der Hell-Block darüber (0,3,1) muss deshalb hier
   namentlich zurückgenommen werden; `a.fieber-panel-cta` allein (0,1,1)
   verlöre gegen ihn, auch aus einer späteren Media-Regel heraus.

   ⚠ EINE BEWUSSTE ABWEICHUNG VOM VORBILD: `a.fieber-panel-cta` trägt hier im
   Haus ein `min-height: 44px` (WCAG 2.5.8, weiter oben in dieser Datei). Aus
   0.7em/0.95rem ergeben sich rechnerisch 42,56 px — das Bodenmaß zieht auf
   44 px hoch. Das Vorbild misst 42,75 px. Die 1,25 px sind der Preis der
   Touch-Regel und werden bewusst gezahlt; „genauso wie dort“ meint die Optik,
   nicht das Unterschreiten einer Zugänglichkeitsschwelle. */
@media (max-width: 48em) {
    a.fieber-panel-cta {
        display: block;
        align-self: auto;
        text-align: center;
        margin: auto 0 0;
        padding: 0.7em 1em;
        font-size: 0.95rem;
        line-height: 1.4;
    }
    .fieber-panel.fieber-hell a.fieber-panel-cta,
    .fieber-panel.fieber-hell a.fieber-panel-cta:hover,
    .fieber-panel.fieber-hell a.fieber-panel-cta:focus {
        color: #004578;
    }
    .fieber-panel.fieber-hell a.fieber-panel-cta {
        background-color: #A9F6DB;
    }
    .fieber-panel.fieber-hell a.fieber-panel-cta:hover,
    .fieber-panel.fieber-hell a.fieber-panel-cta:focus {
        background-color: #DFFDF2;
    }
    .fieber-panel.fieber-hell a.fieber-panel-cta .link-arrow {
        background-color: #004578;
        color: #ffffff;
    }
}
.fieber-panel.fieber-hell .fieber-panel-kopf::before {
    background-color: rgba(0, 82, 141, 0.35);
}
/* --- Anker im Freitext (R2-B6, blockierend) ------------------------------
   Seit der Anwender-Entscheidung baut die Engine im Panel ECHTE `<a>` — die
   Erfahrungsberichte-Links aller 20 Karten und die Aktions-Icons von fünf. Ihre
   Farbe kommt aus dem Bestand und wurde vom Hell-Satz nicht mitgezogen:

     `style.css:23` `a:link{color:var(--link)}`   --link = --mint-200 = #A9F6DB

   Gemessen gegen den tatsächlich gemischten Grund: im Standardmodus **7,95:1**
   (unauffällig, deshalb fiel es nicht auf), im HELL-MODUS **1,24:1** — fast
   weißer Text auf weißem Panel. Verschärfend der Fokusring: `#4DE5B4`
   (--mint-400), gemessen 6,20:1 dunkel, aber **1,59:1 hell**. Für Tastatur-
   nutzer im Hell-Modus hieße das: ein unsichtbares Element mit einem
   unsichtbaren Fokusring.

   ALLE DREI Bestands-Linkzustände fallen im Hell-Modus durch, nicht nur der
   Grundzustand — gemessen auf Weiß: `:link` #A9F6DB 1,24:1, `:visited`
   #7ADFC0 1,60:1, `:hover` #DFFDF2 1,08:1. Deshalb steht hier jeder Zustand
   einzeln; ein Pendant nur für `:link` ließe den besuchten Link unsichtbar.

   WARUM #0A7450 UND NICHT DIE CTA-FARBE #003A66: Der Bestand führt in seiner
   Palette bereits ein Token für genau diesen Fall — `--link-dunkel:
   var(--mint-800)` = #0A7450, definiert in `:root` und bislang ungenutzt. Es
   misst **5,79:1** auf dem weißen Panel und **5,17:1** auf der Zusatzinfos-
   Fläche, hält die Schwelle also mit Reserve UND bleibt in der Grünfamilie:
   der Link bleibt als Link erkennbar. `#003A66` wäre kontrastreicher (11,69:1),
   sähe aber aus wie Fließtext — die Verlinkung ginge optisch verloren. Für
   `:hover`/`:focus` eine Stufe dunkler, #075A3E (--mint-900), gemessen 8,26:1.

   `:not(.fieber-panel-cta)` ist Pflicht, nicht Kosmetik: der CTA ist ebenfalls
   ein `<a>` im Panel, trägt im Hell-Modus aber weißen Text auf #00528D (8,10:1,
   gemessen). Ohne den Ausschluss läge hier ein Selektor gleicher Spezifität auf
   ihm, und welcher gewänne, entschiede die Reihenfolge. */
.fieber-panel.fieber-hell a:not(.fieber-panel-cta) {
    color: #0A7450;
}
.fieber-panel.fieber-hell a:not(.fieber-panel-cta):visited {
    color: #0A7450;
}
.fieber-panel.fieber-hell a:not(.fieber-panel-cta):hover,
.fieber-panel.fieber-hell a:not(.fieber-panel-cta):focus {
    color: #075A3E;
}
.fieber-panel.fieber-hell a:not(.fieber-panel-cta):focus {
    outline-color: #003A66;
}

/* Pendant zur gedämpften Beschriftung des gestapelten Zweigs ≤34em (§8a).
   Ohne diese Regel bliebe die Beschriftung im Hell-Modus auf dem vollen
   `#003A66` — kein Fehler, aber die Abstufung zwischen Label und Wert, die den
   gestapelten Zweig lesbar macht, fiele dort weg. `#3d6285` ist dieselbe
   Aufhellung wie `#d6e4f0` im Standardmodus, nur zur anderen Seite. Als eigene
   Media-Query in §9, damit die Hell-Regeln beisammen bleiben (Vertrag §7) und
   die Spezifität (0,2,0) über der Basisregel liegt. */
@media (max-width: 34em) {
    .fieber-panel.fieber-hell .fieber-panel-label {
        color: #3d6285;
    }
}

/* ==========================================================================
   §10 PREFERS-REDUCED-MOTION
   --------------------------------------------------------------------------
   Zweiter Riegel neben dem Zweig in der Engine: `reducedMotion()` überspringt
   die FLIP-Messung, hier fallen zusätzlich die Übergänge weg. Beides zusammen
   heißt, dass ein Vergessen an einer Stelle nicht durchschlägt.

   ENTFERNT WIRD NUR DIE ANIMATION, NICHT DIE FUNKTION (E8): die Zeilen ordnen
   sich weiterhin um, die Farben wechseln weiterhin — nur eben hart statt über
   200 ms. Deshalb steht hier `transition: none` und keine Regel, die eine
   Bewegung verhindert.

   STAND PHASE 3: Die Liste bleibt unverändert. §5a bringt weder `transition`
   noch `animation` mit, es gibt dort also keine Achse, die ein Pendant
   brauchte. Der Zellfarbwechsel, den eine Reglerbewegung auslöst, ist
   `.fieber-zelle` — die Zeile steht seit Phase 2 hier. Wer §5a später um eine
   Bewegung ergänzt, ergänzt sie hier mit.

   STAND PHASE 4: §8a bringt zwei Bewegungsachsen mit — die Blende des Overlays
   und den Einschub des Panels. Für beide steht hier nicht nur `transition:
   none`, sondern JE ZUSTAND UND JE BREAKPOINT EIN AUSDRÜCKLICHER ENDZUSTAND.

   Das ist die Girokonto-Lehre und der Grund, warum ein bloßes `transition:
   none` hier zu wenig wäre: die Bewegung des Panels ist eine `transform`, deren
   RUHELAGE im geschlossenen Zustand `translateX(100%)` bzw. `translateY(100%)`
   ist — also außerhalb des Bildes. Wer nur die Übergangsdauer wegnimmt, lässt
   diese Ruhelage stehen; jede Abweichung im Zusammenspiel von Klassenwechsel
   und Neuberechnung zeigt das Panel dann für einen Frame neben dem Bild. Mit
   `transform: none` in BEIDEN Zuständen gibt es diese Lage gar nicht mehr: das
   Panel erscheint und verschwindet ausschließlich über `visibility`/`opacity`
   des Overlays, und die einzige verbleibende Achse ist ein harter Schnitt.

   Der zweite `@media`-Block ist bewusst flach angeschrieben (`and (max-width:
   48em)`) statt als Verschachtelung — die ganze Datei führt Media-Queries flach,
   und der Sheet-Zustand braucht seinen eigenen Endzustand, weil dort
   `translateY` und nicht `translateX` die Ruhelage ist.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .fieber-zeile,
    .fieber-zelle,
    .fieber-js .fieber-matrix::after {
        transition: none;
    }
    /* Blende und Einschub abschalten. `visibility` behält seine Verzögerung
       NICHT: sie ist keine Bewegung, sondern der Riegel, der das geschlossene
       Panel aus dem Tastaturpfad nimmt — er soll sofort greifen. */
    .fieber-overlay,
    .fieber-overlay.fieber-panel-offen {
        transition: none;
    }
    /* Endzustand geschlossen UND offen, Desktop-Breakpoint. */
    .fieber-panel,
    .fieber-panel-offen .fieber-panel {
        transform: none;
        transition: none;
    }
    /* STAND PHASE 5 — §5b bringt eine dritte Bewegungsachse mit: den Einschub
       des Filter-Panels über `translateY(-0.75em)`. Auch hier steht nicht nur
       `transition: none`, sondern JE ZUSTAND EIN AUSDRÜCKLICHER ENDZUSTAND.

       Der Grund ist derselbe wie beim Detail-Panel, aber die Folgen wären
       milder: die Ruhelage liegt nur 0.75em über der Sollposition, nicht
       ausserhalb des Bildes. Ein Frame in falscher Lage wäre trotzdem ein
       sichtbarer Sprung, und die Regel kostet drei Zeilen.

       Die übrigen Übergänge der Leiste sind reine Farb- und Flächenwechsel;
       sie fallen hier mit weg, ohne dass eine Lage zu korrigieren wäre. Der
       Floating-Button braucht keinen Eintrag — die geteilte `vergleich.min.css`
       führt für ihn bereits einen eigenen reduced-motion-Zweig. */
    .fieber-dashboard .anpassen-panel,
    .fieber-dashboard .anpassen-overlay.fieber-filter-offen .anpassen-panel {
        transform: none;
        transition: none;
    }
    #vergleich .fieber-dashboard .laufzeit-pill,
    .fieber-dashboard .sub-auswahl .toggle-btn,
    .fieber-dashboard .panel-close-btn {
        transition: none;
    }
}
@media (prefers-reduced-motion: reduce) and (max-width: 48em) {
    /* KORREKTUR DER BEGRÜNDUNG (Review H-7). Hier stand: „Ohne diesen Block
       stünde hier die translateY(100%)-Ruhelage aus §8a." DAS IST FALSCH — und
       eine falsche Begründung ist in diesem Projekt die Vorstufe des nächsten
       Fehlers, deshalb steht die Richtigstellung hier und nicht nur im Bericht.
       Der Block darüber greift bereits: seine `.fieber-panel`-Regel wiegt
       gleich viel wie die Sheet-Regel in §8a (0,1,0), steht aber SPÄTER in der
       Datei und schlägt sie damit über die Quellreihenfolge. Die
       `translateY`-Ruhelage ist also schon aufgehoben, bevor dieser Block
       gelesen wird.

       Er bleibt trotzdem stehen, aber aus dem ehrlichen Grund: er schreibt den
       Endzustand des Sheet-Zweigs AUSDRÜCKLICH hin, statt ihn aus der
       Quellreihenfolge zweier Blöcke folgen zu lassen. Wer §8a später hinter
       §10 verschöbe oder die Sheet-Regel spezifischer machte, bekäme sonst
       lautlos die Ruhelage außerhalb des Bildes zurück. Kosten: vier Zeilen. */
    .fieber-panel,
    .fieber-panel-offen .fieber-panel {
        transform: none;
    }
}

/* Absatzwechsel innerhalb einer Fussnote (Rollout 2026-08-11, Nachtrag H1).
   Gleiche Korrektur wie in den Tabellenansichten, hier aber am Scope
   .fieber-fallback-fussnoten — dieser Apparat traegt NICHT .tabelle-fussnoten.
   0.35em ergibt bei 0.85rem Schrift gemessene 4,75 px und bleibt unter dem
   Abstand zwischen zwei Eintraegen. Der Apparat bleibt laut E23 mit aktivem JS
   sichtbar, die Korrektur wirkt also im Regelfall, nicht nur im Fallback. */
.fieber-fallback-fussnoten .fn-absatz { display: block; height: 0.35em; }

/* Fussnoten auf Mobile: dieselbe Ruecknahme wie in den Tabellenansichten
   (Rollout 2026-08-11, Anwender-Entscheid "Nachzuegler mitnehmen").
   BEIDE Selektoren noetig: die Basisregel oben traegt .fieber-js
   .fieber-fallback-fussnoten (Spezifitaet 0-2-0) mit padding 1em 1.5em —
   ein einfacher .fieber-fallback-fussnoten (0-1-0) verloere dagegen. Der
   Apparat steht laut E23 in BEIDEN JS-Zustaenden, deshalb auch der
   klassenlose Selektor. */
@media (max-width: 38em) {
    .fieber-fallback-fussnoten,
    .fieber-js .fieber-fallback-fussnoten {
        padding: 0.875em 1em;
        font-size: 0.8rem;
    }
}

/* === Icon-Zeile DE 2026-08-19 (DE-Rollout Phase 3) =======================
   Kontrast-Toggle + "weitere Filter" in EINER Zeile, buendig unter den
   #hilfe-Glyphen (Bezug ist die Glyph-MITTE, nicht die Kante).

   WARUM DIESER BLOCK HIER STEHT UND NICHT INLINE: dieser Core hat als
   einziger der Diagramm-Ansichten KEIN Inline-<style>. Die Vorbild-Cores
   legen den Block dort ab, weil er die geteilte vergleich.min.css
   ueberschreiben muss, ohne sie anzufassen (sie gilt fuer alle Produkte des
   Markts). Hier leistet dasselbe der #vergleich-Praefix: (1,1,0) gegen die
   unpraefigierte Basisregel (0,1,0) - und diese Datei laedt ohnehin nach der
   geteilten. Preis: die Datei traegt einen Cache-Buster, der Core bumpt
   deshalb auf ?v=11.

   ZWEI DESKTOP-BAENDER: DE hat bei 88em eine Glyphen-Stufe, die die Icon-
   MITTEN verschiebt (AT hat sie nicht); zwischen 1400 und 1420 springt der
   Ziel-Offset um 4,67 px. Die Konstanten sind live kalibriert.

   ICON-GRUPPE B (3-Icon-Kalibrierung), nicht A - und das ist der kontra-
   intuitive Teil: dieser #hilfe-Strip hat VIER <li>, sein drittes Icon sass
   aber auf der cx-Position der 3-Icon-Ansichten (gemessen: 23,94 px breit,
   cx 1244,44 bei Viewport 1366). Wer hier auf Gruppe A umstellt, weil er die
   vier Eintraege zaehlt, verschiebt den Knopf sichtbar.

   ⚠ SEIT CT-0332 (09.09.2026) TRAEGT DAS DRITTE ICON EIN INLINE-SVG - UND
   DIE KALIBRIERUNG BLEIBT TROTZDEM GUELTIG. Die alte Begruendung nannte als
   Grund, das dritte Icon sei „ein schlichtes icon-chart-bar ohne
   verschachteltes SVG“. Das war der Anlass, nicht die Ursache: massgeblich
   ist allein das KASTENMASS des <i>. Die fk-view-icon-Regeln in §5b setzen es
   deshalb auf 1.2em x 1em, also exakt das gemessene Mass der
   Fontello-Nachbarn. Nachgemessen am 09.09.2026 auf allen sechs Breiten
   (1500/1400/1100/820/640/375): die Mitte der dritten Glyphe wandert um
   hoechstens 0,01 px, .kontrast-toggle und .anpassen-filter-btn stehen auf
   0,00 px unveraendert. Wer das <i> auf 1.3em vergroessert (das
   Festgeld-Vorbild tut das), verschiebt die Mitte um 1,43 px und muss die
   Konstanten unten neu kalibrieren. */
#vergleich .kontrast-zeile {
    display: block; position: relative;
    height: 0; margin: 0; overflow: visible;
    z-index: 1;
}
#vergleich .kontrast-toggle {
    position: absolute; right: calc(0.403% + 1.439em); top: 0.98em;
    width: 2.51em; height: 2.09em; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 600; line-height: 1.2;
    letter-spacing: 0.02em; color: #e8f2fb;
    background: rgba(9,87,143,0.62); box-shadow: 0 0.125em 0.5em rgba(0,0,0,0.25);
    border: 0; border-radius: 0; cursor: pointer;
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
    transition: background 150ms ease, color 150ms ease;
}
/* Positionsanker des Knopfes nach dem Umzug: er ist jetzt erstes Kind des
   Dashboards, nicht mehr Kind von .anpassen-host. */
#vergleich .vergleich-dashboard { position: relative; }
#vergleich .anpassen-filter-btn {
    bottom: auto; top: calc(0.98em - var(--space-md)); right: calc(7.313em - 0.610%);
    width: 2.51em; height: 2.09em; font-size: 0.85rem;
}
#vergleich .anpassen-filter-btn .icon-wrap .icon-sliders { font-size: 1.05em; }
#vergleich .anpassen-filter-btn .ecke { width: 0.7em; height: 0.7em; }
#vergleich .anpassen-filter-btn .ecke-tl { top: 0.22em; left: 0.22em; }
#vergleich .anpassen-filter-btn .ecke-tr { top: 0.22em; right: 0.22em; }
#vergleich .anpassen-filter-btn .ecke-bl { bottom: 0.22em; left: 0.22em; }
#vergleich .anpassen-filter-btn .ecke-br { bottom: 0.22em; right: 0.22em; }
/* 88em-Stufe: unterhalb sitzen die #hilfe-Glyphen enger, die Mitten wandern. */
@media (max-width: 88em) {
    #vergleich .kontrast-toggle { right: calc(0.403% + 1.100em); }
    #vergleich .anpassen-filter-btn { right: calc(6.183em - 0.609%); }
}
@media (max-width: 72em) {
    #vergleich .kontrast-toggle { top: 0.97em; right: 0.85em; }
    #vergleich .anpassen-filter-btn { top: calc(0.97em - var(--space-md)); right: 3.92em; }
}
@media (max-width: 38em) {
    #vergleich .kontrast-toggle { top: 0.4em; right: 0.6em; }
    #vergleich .anpassen-filter-btn { top: calc(0.4em - var(--space-sm)); right: 4.13em; }
    #vergleich .vergleich-dashboard { padding-top: calc(var(--space-sm) + 0.5rem); }
}
/* === Ende Icon-Zeile === */