/* ===================================================================
   Kontofingerabdruck-Prototyp - Phase F1 (Geruest und Datenvertrag)
   Namespace .fp-. JEDER Selektor traegt das #vergleich-Praefix: die
   Bestandsregeln adressieren ueber die ID, ein reiner Klassen-Selektor
   setzt zwar padding durch, font-size aber nicht (gemessen: 15,36 px
   blieben stehen).

   FARBPRINZIP - hier lag der schwerste Fehler des ersten Wurfs:
   #vergleich traegt einen BLAUEN Farbverlauf, keine weisse Flaeche. Die
   erste Fassung setzte dunkle Schrift ohne deckenden Grund und erreichte
   1,05 bis 1,80:1 - gemessen an echten Pixeln, nicht an getComputedStyle
   (der Verlauf liefert dort rgba(0,0,0,0)).
   Die Regel des Bestands, hier uebernommen:
     - Text DIREKT auf der Chrome bekommt KEINE eigene color und erbt Weiss.
     - Text in einem Kasten bekommt einen DECKENDEN hellen Grund UND eine
       eigene dunkle color.
   Im Hochkontrast-Hell dreht sich die Chrome auf Weiss - jedes Element der
   ersten Gruppe braucht dort eine ausdrueckliche dunkle Farbe.

   Ring-CSS folgt in F2.

   CT-0363 (10.09.2026): Der Testhinweis-Kasten ist entfallen (beide Saetze),
   die Sektor-Uhr steht eine Stufe groesser (0.875rem statt 0.8125rem, im
   48em-Block 0.8125rem statt 0.75rem), und die drei Buehnenringe tragen den
   i-Knopf des Rasters - .fp-ring-info teilt sich Geometrie und Fokusring mit
   .fp-kachel-info ueber gemeinsame Selektorlisten, hat aber einen eigenen
   Namen, weil die Gates f3/f5/f9 ueber .fp-kachel-info ZAEHLEN.

   Politur (12.09.2026, ?v=13): Intro-Satz unter den Baendern (.fp-intro in
   .results-container), Ableitungshinweis-Regeln entfallen (der Satz eroeffnet
   jetzt "So zaehlen wir"), Detailblatt mit zwei Reitern (.fp-reiter*, Werte
   aus dem Ratenkredit-Panel), Meta-Zeile zweizeilig (.fp-detail-position /
   .fp-detail-stand), Zustandskante erfuellt/bedingt im Ring-Gruen #0E8E69.
   =================================================================== */

/* --- Kaesten: deckender Grund, eigene dunkle Schrift ---------------- */

/* Aufklappbox "So zaehlen wir" - rendert aus demselben Katalog wie Insel
   und Fallback-Tabelle. Deckend weiss, damit die Schrift traegt. */
#vergleich .fp-sozaehlenwir {
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    background: #FFFFFF;
    border: 0.0625rem solid #C3D0DC;
    border-radius: 0.25rem;
    color: #1B2733;
}

#vergleich .fp-sozaehlenwir > summary {
    cursor: pointer;
    font-weight: 600;
    color: #1B2733;
}

#vergleich .fp-sozaehlenwir p,
#vergleich .fp-sozaehlenwir-titel,
#vergleich .fp-sozaehlenwir-liste {
    color: #1B2733;
}

#vergleich .fp-sozaehlenwir-titel {
    margin: 1rem 0 0.25rem;
    font-size: 0.9375rem;
}

#vergleich .fp-sozaehlenwir-liste {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Belegliste des Detailblatts. Der Zustand ist unsere Lesart, der Feldtext
   ist der Beleg - deshalb steht er immer daneben. Eigener heller Grund,
   weil das Panel ueber der blauen Chrome liegt. */
#vergleich .fp-belege {
    background: #FFFFFF;
    color: #1B2733;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
}

#vergleich .fp-beleg-liste { margin: 0 0 1rem; }

#vergleich .fp-beleg-kriterium {
    font-weight: 600;
    margin-top: 0.5rem;
    color: #1B2733;
}

#vergleich .fp-beleg-zustand {
    font-weight: 400;
    color: #40556B;
}

#vergleich .fp-beleg-text {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: #33475B;
}

/* --- Text direkt auf der blauen Chrome: KEINE eigene color ---------- */

/* Seit der Politur vom 12.09.2026 steht der Satz UNTER den beiden
   Einstellungsbaendern, in .results-container vor .results-header (Muster
   .zg-intro Festgeld DE). Oberer Abstand klein: die Baender schliessen mit
   ihrem eigenen Abstand (30,72 px bei 1280) an den Ergebnisteil an. */
#vergleich .fp-intro {
    margin: 0.25rem 0 1rem;
    max-width: 52rem;
    font-size: 1rem;
    line-height: 1.55;
}

#vergleich .fp-abschnitt-titel {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.125rem;
}

#vergleich .fp-deutung {
    margin: 0 0 1rem;
    max-width: 52rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Buehne fuer die Ringe. In F1 leer - sie haelt den Platz und macht
   sichtbar, dass hier etwas entsteht. */
#vergleich .fp-buehne {
    min-height: 8rem;
    border: 0.0625rem dashed rgba(255, 255, 255, 0.55);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#vergleich .fp-buehne::after {
    content: "Der Ring braucht JavaScript. Alle Angaben stehen in der Tabelle darunter.";
    color: #E8F1F8;
    font-size: 0.875rem;
}

/* --- Ring (F2) -------------------------------------------------------- */
/* Sobald das JS gezeichnet hat, setzt es data-fp-ring="1". Erst dann
   bekommt die Buehne ihre eigene helle Flaeche - und erst dann faellt der
   Baustellen-Hinweis weg. Beides haengt bewusst am selben Schalter: ohne
   JS bleibt die Buehne, wie F1 sie gemessen hat (heller Text auf der
   blauen Chrome, 4,69:1). Kaeme die helle Flaeche unbedingt, stuende
   derselbe Text bei rund 1,1:1 auf ihr. */
#vergleich .fp-buehne[data-fp-ring="1"]::after { content: none; }

/* Die Ampelfarben sind gegen DIESE Flaeche gemessen, nicht gegen die
   blaue Chrome: #0E8E69 erreicht auf #dcebf8 3,39:1, auf rgb(0,109,188)
   dagegen 1,30:1. Der Ton ist der der Panorama-Buehne. */
#vergleich .fp-buehne[data-fp-ring="1"] {
    background: var(--fp-buehne);
    border: 0.0625rem solid rgba(51, 70, 92, 0.18);
    padding: 1rem 0.75rem;
    flex-direction: column;
}

/* Das geteilte Geometrie-Skelett. Es zeichnet nichts, es haelt nur die
   Pfade, auf die alle Ringe per <use> zeigen - sonst entstuende dieselbe
   Geometrie je Ring erneut. */
#vergleich .fp-ring-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

#vergleich .fp-ringreihe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

/* flex: 1 1 0 ergibt oberhalb des Umbruchs drei gleiche Spalten. Der
   21rem-Deckel greift NICHT bei grossen Breiten (dort endet die Buehne
   vorher: .results-container deckelt auf 900 px, gemessen 280,66 px bei
   1280 UND 1600) - sondern seit F6 im Band 769 bis ~938 px: die
   Mindestbreite unten laesst die Reihe 2+1 umbrechen, und die zwei oberen
   Felder wuerden ohne den Deckel auf ~348 px wachsen. Gemessen mit Deckel:
   336,00 px, Nabenzahl 30,80 px (F6-Gate, Kennung F6-F1n). */
#vergleich .fp-ring-feld {
    position: relative;   /* CT-0363: Bezugsrahmen des i-Knopfs (.fp-ring-info) */
    flex: 1 1 0;
    min-width: 0;
    max-width: 21rem;
    text-align: center;
}

/* min-height reserviert ZWEI Zeilen, auch wenn der Name nur eine braucht.
   Ohne die Reservierung schiebt jeder zweizeilige Kontoname genau seinen Ring
   um eine Zeilenhoehe nach unten - gemessen 18,8 px - und die Ringe stehen
   nicht mehr auf einer Linie. Das trifft den Zweck der Ansicht: der
   Deutungssatz verspricht, Konten "als Form vergleichbar" zu machen, und ein
   Formvergleich ueber versetzte Grundlinien ist messbar schwerer. Betroffen
   waren zwei der sieben Profile an JEDER Desktopbreite (BBVA traegt auch in
   280 px zwei Zeilen) und alle sieben im Band 769 bis 1000 px.
   em statt rem ist hier richtig: die Hoehe soll der Schriftgroesse dieses
   Elements folgen, nicht der Wurzel - es ist eine Zeilenreservierung, kein
   Touch-Ziel. */
#vergleich .fp-ring-name {
    margin: 0 0 0.375rem;
    min-height: 2.7em;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: #1B2733;
}

/* Breite ueber viewBox statt fester Pixel: eine feste width kippt bei
   375 px den Ueberlauf-Test (Buehne dort 351,5 px innen). */
#vergleich .fp-ring {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Ergrauungspfad (F4) --------------------------------------------- */
/* DIE EINE REGEL. Sie ist der gesamte CSS-Anteil des Ergrauungspfads; alles
   andere - graue Fuellung als Attribut, aria-hidden, entferntes <title> -
   schreibt setzeBogenAus() im Ring-JS. Ein zweiter Weg, Segmente
   unbedienbar zu machen, waere genau die Trefferfalle, die die schaerfste
   Messung dieses Baus aufdeckt: opacity:0 unterdrueckt kein Hit-Testing
   (im Projekt viermal aufgetreten), und ein Screenshot sieht den
   Unterschied nie.
   HIER STEHT BEWUSST KEINE REGEL AUF fill. Die Fuellung ist ein
   Praesentationsattribut; eine CSS-Regel darauf wuerde den ganzen
   Ergrauungspfad ueberstimmen. Die F2-Null bleibt null. */
#vergleich .fp-ring [data-aus="1"] {
    pointer-events: none;
}

/* Der Bogen ist der zweite Weg zum Baustein-Fokus - nur im grossen Ring.
   Im Mini-Ring ist das ganze SVG pointer-events:none (Dekor im Klickziel
   der Kachel), dort gaebe der Zeiger ein Versprechen, das nicht gilt. */
#vergleich .fp-ring:not(.fp-ring--mini) .fp-ring-bogen {
    cursor: pointer;
}

/* Der Fokus haengt an der Kontur, nicht an der Fuellung: die Fuellung
   gehoert dem Ergrauungspfad, und ein ergrauter Baustein bleibt ueber die
   Uhr fokussierbar (F40) - beide Zustaende muessen nebeneinander sichtbar
   sein. stroke-width als CSS-Regel schlaegt hier das
   Praesentationsattribut; das ist erwuenscht und ruehrt die Fuellung nicht
   an.
   WORTWAHL MIT GRUND: die Pruefung F2-D1 in tests/chk-fp-f2.mjs sucht in
   jedem Block, der .fp-ring oder .fp-legende nennt, nach dem Muster
   "fill:" - und sie entfernt die Kommentare vorher NICHT. Der englische
   Eigenschaftsname im Fliesstext liesse die Pruefung fallen, obwohl keine
   einzige Deklaration existiert. Deshalb steht hier "Fuellung". */
/* Das Piktogramm ist von der Fokuskontur AUSGENOMMEN. Es misst 16
   viewBox-Einheiten; eine Kontur von 2,5 Einheiten daraufgelegt schloesse
   seine ausgestanzten Loecher und machte aus dem Zeichen einen Klecks. Die
   Hervorhebung tragen die Segmente, das Zeichen bleibt lesbar. */
#vergleich .fp-ring:not(.fp-ring--mini) .fp-ring-bogen[data-fokus="1"] use:not([data-rolle="icon"]),
#vergleich .fp-ring:not(.fp-ring--mini) .fp-ring-bogen[data-fokus="1"] path:not([data-rolle="icon"]) {
    stroke: var(--fp-ring-zahl);
    stroke-width: 2.5;
}

#vergleich .fp-legende {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
}

#vergleich .fp-legende-punkt {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #1B2733;
}

/* Die Probe zeigt den Fuellgrad, nicht nur den Farbton - denselben
   zweiten Kanal, den die Segmente tragen. */
#vergleich .fp-legende-probe {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
}

/* Der vierte Eintrag "nicht im Schwerpunkt" (F44) erscheint nur, wenn
   ueberhaupt ein Schwerpunkt gesetzt ist - sonst erklaerte er eine Farbe,
   die gerade nirgends im Ring steht. Er wird EINMAL gebaut und hier nur
   ein- und ausgeblendet: ein Eintrag, der bei jedem Chip-Klick entstuende
   und verginge, waere eine childList-Mutation in der Buehne, und davon
   verlangt die Plan-Messung dort null. */
#vergleich .fp-buehne:not([data-fp-sp="1"]) .fp-legende-punkt[data-nur-schwerpunkt="1"] {
    display: none;
}

/* Faellt die Auswahl auf null, steht hier ein Satz statt der Ringe. Die
   Buehne behaelt dabei data-fp-ring="1" - der Grund bleibt hell, der
   Baustellen-Platzhalter bleibt weg. */
#vergleich .fp-buehne-leer {
    margin: 0;
    padding: 1.25rem 0.5rem;
    max-width: 32rem;
    color: #1B2733;
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: center;
}

/* --- Schwerpunkt-Chips (F4) ------------------------------------------ */
/* Der Anker steht leer im Core, Ueberschrift und Chips baut das JS (F41):
   ohne JS gaebe es keinen Ring, den ein Schwerpunkt ergrauen koennte, und
   ein sichtbarer Schalter ohne Wirkung ist ein Bedienfehler. Ohne JS bleibt
   der Anker leer und faellt nicht auf. */
#vergleich .fp-schwerpunkte {
    margin: 1.5rem 0 0;
}

#vergleich .fp-sp-hinweis {
    margin: 0 0 0.75rem;
    max-width: 52rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

#vergleich .fp-chipzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* 2.75rem = 44 px Trefferflaeche, auch bei 375 px. Weisser Grund wie beim
   Marken-Button: die Chips stehen auf der blauen Chrome, nicht auf der
   hellen Buehne. */
#vergleich .fp-chip {
    min-height: 2.75rem;
    margin: 0;
    padding: 0.5rem 0.875rem;
    background: #FFFFFF;
    color: #1B2733;
    border: 0.0625rem solid #B7C6D4;
    border-radius: 1.375rem;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.3;
    cursor: pointer;
}

/* Gesetzt: kraeftigere Kante statt breiterer - eine breitere zoege den Chip
   um ihre eigene Staerke zusammen und liesse die Zeile bei jedem Klick
   zucken. Dieselbe Loesung wie bei der Rasterkachel. */
#vergleich .fp-chip[aria-pressed="true"] {
    background: #EAF3FB;
    border-color: #0B5FA5;
    box-shadow: inset 0 0 0 0.0625rem #0B5FA5;
}

/* Gesperrt heisst NICHT unsichtbar und nicht unlesbar: der Chip bleibt
   bedienbar und wird angesagt (aria-disabled statt disabled, F39), also
   muss sein Text die Textschwelle halten. #5A6E82 auf Weiss liegt bei
   4,81:1. Seit der F5-Nacharbeit fuehrt der Weg dorthin ueber die
   Pfeiltasten der Roving-Gruppe statt ueber je einen eigenen Tabstopp -
   erreichbar sind auch die gesperrten Chips, mit echten Tastendruecken
   nachgefahren. */
#vergleich .fp-chip[aria-disabled="true"] {
    color: #5A6E82;
    border-style: dashed;
    cursor: default;
}

/* ZWEIFARBIGER RING, nicht ein einzelner Ton (VRT-Befund W2, 14.08.2026).
   Vorher stand hier ein 0.1875rem-Ring in #0B5FA5 mit 0.125rem Versatz nach
   aussen. Der Versatz legt ihn auf die blaue Chrome (Verlauf #0067B0 bis
   #0070C0, style.css:40) - gemessen 1,23:1 gegen rgb(0,109,188). WCAG 2.2
   (1.4.11 / 2.4.11) verlangt 3:1 fuer den Fokusindikator.
   EINE Farbe kann das hier nicht leisten: der Chip ist weiss, sein Grund
   mitteldunkelblau. Was gegen den Grund traegt, verschwindet auf der
   Chipflaeche - und umgekehrt. Ein blosser Farbtausch verschoebe den Mangel
   also nur auf den anderen Nachbarn. Deshalb zwei Ringe aus einem Element:
     - box-shadow 0.125rem #0B5FA5 fuellt genau den Versatz und liegt damit an
       der Chipkante: 6,57:1 gegen die weisse Flaeche, 5,86:1 gegen die
       gedrueckte (#EAF3FB), 3,77:1 gegen die Kante #B7C6D4.
     - outline 0.1875rem #FFFFFF sitzt darueber auf der Chrome: 5,37:1 gegen
       den gemessenen Grund, 5,15:1 gegen den hellsten Punkt des Verlaufs
       (#0070C0) - das ist der schlechteste Fall der ganzen Flaeche.
   Die Aussenkante bleibt bei 0.3125rem (0.125 + 0.1875 wie bisher): die Zeile
   ruckt nicht, und der Chipabstand (gap 0.5rem) traegt zwei Ringe weiterhin.
   Angefasst ist nur der Fokuszustand - Grund-, Gedrueckt- und Gesperrt-Optik
   bleiben unveraendert (der VRT hat den Grundzustand als pixelgleich zur
   F4-Grundlinie abgenommen). */
#vergleich .fp-chipzeile .fp-chip:focus-visible {
    outline: 0.1875rem solid #FFFFFF;
    outline-offset: 0.125rem;
    box-shadow: 0 0 0 0.125rem #0B5FA5;
}

/* GEDRUECKT UND FOKUSSIERT ZUGLEICH - ohne diese Regel eine stille
   Regression: die Regel oben bringt ein box-shadow mit und schlaegt mit
   (1,3,0) die Gedrueckt-Regel (1,2,0, CSS:353-357). box-shadow ist nicht
   additiv, der gedrueckte Chip verloere beim Fokussieren also seine innere
   Kante - genau das Merkmal, an dem die getroffene Wahl zu erkennen ist. Die
   Gedrueckt-Kante wird deshalb woertlich mitgefuehrt. */
#vergleich .fp-chipzeile .fp-chip[aria-pressed="true"]:focus-visible {
    box-shadow: inset 0 0 0 0.0625rem #0B5FA5, 0 0 0 0.125rem #0B5FA5;
}

/* --- Sektor-Uhr (F4) -------------------------------------------------- */
/* Eine echte <table> - Baustein, Marktspanne und je gewaehltem Konto Muster
   und Zahl. Sie bleibt eine Tabelle: kein display:block-Umbau, kein
   min-width mit Horizontal-Scroll. F6 entfernt unterhalb von 48em nur die
   Marktspalte, und weil Kopf- und Datenzelle dieselbe Klasse tragen,
   genuegt dort eine einzige display:none-Regel.

   table-layout: fixed ist die Bedingung dafuer, dass das ueberhaupt geht -
   und zugleich die Bedingung, dass die Tabelle bei 375 px nicht ueber den
   Rand laeuft: die Spalten teilen die vorhandene Breite, statt sie sich vom
   Inhalt vorschreiben zu lassen. */
#vergleich .fp-uhr-anker {
    margin: 1.25rem 0 0;
}

/* CT-0363 (10.09.2026): eine Stufe der Hausleiter 12/13/14 px hoch,
   0.8125rem -> 0.875rem. Gemessen ohne waagerechten Ueberlauf an .fp-uhr,
   .fp-dashboard und der Wurzel bei 320/375/414/768/1280 px. */
#vergleich .fp-uhr {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: #FFFFFF;
    color: #1B2733;
    border: 0.0625rem solid #B7C6D4;
    font-size: 0.875rem;
    line-height: 1.35;
}

/* Mit der Tabelle mitgewachsen (CT-0363). */
#vergleich .fp-uhr-caption {
    margin: 0 0 0.375rem;
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: left;
}

#vergleich .fp-uhr th,
#vergleich .fp-uhr td {
    padding: 0.25rem 0.5rem;
    border: 0.0625rem solid #D7E1EA;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

#vergleich .fp-uhr thead th {
    background: #EAF3FB;
    font-weight: 600;
}

/* Eine Spalte, deren Zellen alle versteckt sind, bekommt bei
   table-layout: fixed keine Breite - die uebrigen wachsen von selbst. So
   kostet eine leere Kontospalte keinen Platz, ohne dass Zeilen oder
   Schalter aus- und wieder eingebaut werden muessten. */
#vergleich .fp-uhr [hidden] {
    display: none;
}

#vergleich .fp-uhr-name { width: 28%; }
#vergleich .fp-uhr-markt { width: 22%; }
#vergleich .fp-uhr-konto { width: 16.6%; }

#vergleich .fp-uhr th.fp-uhr-name {
    padding: 0;
    font-weight: 400;
}

/* Der Schalter fuellt die Kopfzelle ganz aus. Ein <button>, der eine ganze
   Tabellenzeile umspannt, ist ungueltiges HTML - deshalb sitzt er in der
   Zeilenkopfzelle, und der Rest der Zeile loest ueber denselben Zuhoerer am
   tbody dasselbe aus. Der Leser trifft die ganze Zeile, die
   Bedienhilfe-Technik findet einen echten Schalter mit aria-pressed. */
#vergleich .fp-uhr-schalter {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.25rem 0.5rem;
    background: none;
    color: inherit;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

#vergleich .fp-uhr-schalter[aria-pressed="true"] {
    background: #EAF3FB;
    box-shadow: inset 0.1875rem 0 0 0 #0B5FA5;
    font-weight: 600;
}

#vergleich .fp-uhr-schalter:focus-visible {
    outline: 0.1875rem solid #0B5FA5;
    outline-offset: -0.1875rem;
}

/* Gedaempft, nicht abgeschaltet: die Zeile eines ergrauten Bausteins bleibt
   bedienbar (F40) - Ergrauen daempft die Optik, es entzieht keine Auskunft.
   Deshalb traegt sie eine EIGENE Marke und nicht data-aus, ueber dem im Ring
   pointer-events: none haengt. Die Textfarbe bleibt ueber der Schwelle:
   #40556B auf Weiss liegt bei 7,0:1. */
#vergleich .fp-uhr tbody tr[data-gedaempft="1"] {
    color: #40556B;
    background: #F5F7F9;
}

#vergleich .fp-uhr-punkte {
    margin-right: 0.375rem;
    letter-spacing: 0.0625rem;
}

#vergleich .fp-uhr-zahl {
    white-space: nowrap;
}

/* --- Raster (F3) ------------------------------------------------------ */
/* Das Kartenraster aller im aktiven Profil gelisteten Konten. Reihenfolge
   nach pos, also dieselbe wie in der Fallback-Tabelle (F28) - Rasterplatz k
   traegt dasselbe Konto wie Tabellenzeile k. */
#vergleich .fp-raster {
    margin: 1.75rem 0 0;
}

/* Derselbe Bau wie bei der Buehne: ohne JS steht hier der Hinweis, mit JS
   setzt das Skript die Marke und der Hinweis faellt weg. */
#vergleich .fp-raster::after {
    content: "Die Auswahl braucht JavaScript. Alle Angaben stehen in der Tabelle unter dem Vergleich.";
    display: block;
    font-size: 0.875rem;
}

#vergleich .fp-raster[data-fp-raster="1"]::after { content: none; }

/* Ein Tabstopp fuehrt in das Raster, dieser Link fuehrt daran vorbei.
   Sichtbar wird er erst im Fokus - sonst staende ueber dem Raster eine
   Zeile, die nur mit der Tastatur einen Sinn ergibt. */
#vergleich .fp-raster-sprung {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    margin: -0.0625rem;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

#vergleich .fp-raster-sprung:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0.5rem;
    padding: 0.375rem 0.625rem;
    overflow: visible;
    clip: auto;
    clip-path: none;
    display: inline-block;
    background: #FFFFFF;
    color: #1B2733;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

#vergleich .fp-raster-hinweis {
    margin: 0 0 0.75rem;
    max-width: 52rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Eigene Live-Region, getrennt vom Trefferzaehler (F34): dessen
   aria-atomic="true" liest bei jeder Aenderung den ganzen Zaehlertext neu
   vor, und der gehoert fachlich den Filtern, nicht der Auswahl.
   min-height haelt den Platz, sonst schoebe die erste Ansage das ganze
   Raster nach unten. */
#vergleich .fp-raster-ansage {
    margin: 0 0 0.5rem;
    min-height: 1.4em;
    font-size: 0.875rem;
    line-height: 1.4;
}

#vergleich .fp-raster-ende {
    display: block;
    height: 0;
}

/* Erstes Grid im Stylesheet. Oberhalb des Umbruchs so viele Spalten, wie
   bei rund 152 px Mindestbreite hineinpassen; darunter genau zwei (siehe
   Umbruch-Abschnitt).
   touch-action: pan-x ALLEIN toetet das senkrechte Wischen - im Bestand
   gemessen. Deshalb stehen beide Achsen und das Zoomen ausdruecklich da. */
#vergleich .fp-raster-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    touch-action: pan-x pan-y pinch-zoom;
}

#vergleich .fp-kachel {
    position: relative;
    margin: 0;
}

/* Der Marken-Button IST die Kachel: er umschliesst Name und Ring, damit
   elementFromPoint auf der ganzen Flaeche dasselbe Klickziel liefert. */
#vergleich .fp-kachel-marke {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.5rem 0.625rem;
    background: #FFFFFF;
    color: #1B2733;
    border: 0.0625rem solid #B7C6D4;
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
}

/* Gewaehlt: kraeftigere Kante statt breiterer. Eine breitere Kante zoege
   die Kachel um ihre eigene Staerke zusammen und liesse das Raster bei
   jedem Klick zucken. */
#vergleich .fp-kachel-marke[aria-pressed="true"] {
    background: #EAF3FB;
    border-color: #0B5FA5;
    box-shadow: inset 0 0 0 0.0625rem #0B5FA5;
}

/* Alles im Marken-Button ist durchlaessig: erst dadurch liefert
   elementFromPoint auf JEDER Stelle der Kachel den Button selbst und nicht
   die Namenszeile oder das Ringfeld. Gemessen: ohne diese Regel gibt die
   Kachelmitte span.fp-kachel-ringfeld zurueck. */
#vergleich .fp-kachel-marke > * {
    pointer-events: none;
}

#vergleich .fp-kachel-name {
    display: block;
    font-weight: 600;
}

#vergleich .fp-kachel-produkt {
    display: block;
    font-weight: 400;
    color: #40556B;
}

/* Der Stand steht sichtbar in der Nabe des Mini-Rings; das SVG ist aber
   aria-hidden, damit die Angabe nicht zweimal vorgelesen wird. Diese Zeile
   ist die Vorlesefassung. */
#vergleich .fp-kachel-stand {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    margin: -0.0625rem;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Der Platz des Mini-Rings steht VOR dem Zeichnen fest: das ::before
   erzwingt ueber padding-top ein Quadrat. Ohne diese Reservierung waechst
   die Kachel in dem Augenblick, in dem der Beobachter den Ring nachliefert -
   und das Raster spraenge unter dem Zeiger weg.
   font-size: 1rem haelt die 8.25em unabhaengig von der Kachelschrift bei
   132 px; em statt rem, weil die Plan-Vorgabe so lautet. */
#vergleich .fp-kachel-ringfeld {
    display: block;
    position: relative;
    width: 100%;
    max-width: 8.25em;
    margin: 0.375rem auto 0;
    font-size: 1rem;
}

#vergleich .fp-kachel-ringfeld::before {
    content: "";
    display: block;
    padding-top: 100%;
}

/* Hoehere Spezifitaet als #vergleich .fp-ring - Absicht: der Mini-Ring
   fuellt sein reserviertes Quadrat, statt seine Hoehe selbst zu bestimmen.
   pointer-events: none macht ihn zum Dekor im Klickziel. */
#vergleich .fp-kachel-ringfeld .fp-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Volle Trefferflaeche 2,75rem = 44 px, auch bei 375 px Viewport. Sichtbar
   ist davon nur der kleine Kreis - die uebrige Flaeche ist durchsichtig und
   liegt ueber dem Marken-Button. */
/* UNTEN rechts, nicht oben rechts (VRT-Befunde B-1 und B-2, 13.08.2026).
   Oben rechts lag die transparente 44-px-Trefferflaeche ueber der
   Namenszeile, die die volle Kachelbreite spannt: gemessen an der echten
   Glyphenausdehnung waren 31 von 45 Kacheln betroffen, in allen 49
   geprueften Profil-x-Viewport-Kombinationen. Ein Klick auf das rechte Ende
   von "Deutsche Kreditbank AG" oeffnete das Detailblatt, statt das Konto zu
   waehlen - mit echten Mausklicks belegt. Schlimmer noch: der weisse
   Kreisgrund UEBERMALTE das Namensende, "Deutsche Kreditbank AG" erschien
   als "Deutsche Kreditbank" - kein angeschnittener, sondern ein anderer
   plausibler Name.
   Unten rechts liegt die tote Ecke des runden Rings: der Kreis endet bei
   Radius 96 von 120, die Quadratecke ist rund 40 Einheiten weiter aussen.
   Dort steht nichts, was verdeckt werden koennte. */
/* CT-0363: der Buehnenknopf .fp-ring-info teilt sich GENAU DIESE Werte -
   gemeinsame Selektorliste statt zweiter Kopie. Die Ecke unten rechts ist
   auch am grossen Ring die tote Ecke (Kreis endet bei Radius 96 von 120),
   und weil .fp-ring-feld darueber eine eigene Namenszeile fuehrt, gilt der
   oben beschriebene Verdeckungsbefund dort genauso.
   EIGENER NAME, nicht dieselbe Klasse: die Gates f3/f5/f9 ZAEHLEN ueber
   .fp-kachel-info (Zahl der Rasterkacheln, Zahl der Dialog-Ausloeser). Drei
   Buehnenknoepfe mit derselben Klasse haetten diese Zaehlungen still um drei
   verschoben. */
#vergleich .fp-kachel-info,
#vergleich .fp-ring-info {
    position: absolute;
    top: auto;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

#vergleich .fp-kachel-info-zeichen,
#vergleich .fp-ring-info-zeichen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    background: #FFFFFF;
    color: #33475B;
    border: 0.0625rem solid #6E8296;
    border-radius: 50%;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

/* Der Fokusring wird nirgends abgeschaltet; hier bekommt er nur genug
   Kontrast gegen die weisse Kachel. Das gilt fuer den Info-Knopf, der INNEN
   sitzt: sein Ring liegt auf der Kachelflaeche #EAF3FB (gemessen 5,858:1). */
/* CT-0363: der Buehnenknopf haengt sich in DIESELBE Regel ein, keine zweite
   Wertkopie. Sein Ring liegt nicht auf der Kachelflaeche, sondern auf dem
   Buehnengrund var(--fp-buehne) - gemessen #0B5FA5 auf #dcebf8 = 5,41:1 im
   Normalsatz, im Hell-Satz #003A66 auf #F7F9FC = 11,08:1 (Regel unten).
   Der zweifarbige Marken-Ring des Rasters ist hier NICHT noetig: der Ring
   liegt vollstaendig auf dem hellen Buehnengrund, nicht auf dem blauen
   Seitengrund. */
#vergleich .fp-raster-gitter button:focus-visible,
#vergleich .fp-ring-info:focus-visible {
    outline: 0.1875rem solid #0B5FA5;
    outline-offset: 0.125rem;
}

/* Der Marken-Button IST die Kachel, sein Ring liegt deshalb AUSSERHALB auf
   dem Seitengrund - und dort trug der blaue Ring #0B5FA5 gegen #006DBC nur
   1,225:1 (F6, vier Farbschnitte links/rechts/oben/unten, dazu ein A/B-
   Pixelvergleich mit maxDelta 23 von 255; ein sichtbarer Ring erreicht hier
   244). Bei nicht gewaehlten Kacheln war das die GESAMTE Fokusanzeige, denn
   dort steht weder die Auswahlkante noch der Innenschatten.
   Geheilt mit derselben Zweifarbigkeit, die der Chip schon traegt (oben,
   .fp-chip:focus-visible): weiss nach aussen gegen den blauen Seitengrund
   (#FFFFFF auf #006DBC = 5,366:1), blau nach innen gegen die weisse
   Kachelflaeche (#0B5FA5 auf #FFFFFF = 6,574:1). Kein neuer Farbwert.
   Der Selektor braucht das button-Element: BEIDE Regeln tragen
   :focus-visible, die Gitter-Regel steht damit auf (1,2,1) und eine reine
   Klassenkette auf (1,2,0) - die Gitter-Regel gewaenne, und der Ring bliebe
   blau (per Gate F6-D1 genau so gemessen, bevor das button hier stand).
   Mit button ziehen beide gleich (1,2,1), und diese Regel steht spaeter. */
#vergleich button.fp-kachel-marke:focus-visible {
    outline: 0.1875rem solid #FFFFFF;
    outline-offset: 0.125rem;
    box-shadow: 0 0 0 0.125rem #0B5FA5;
}

/* Die gewaehlte Kachel traegt bereits einen Innenschatten (oben,
   [aria-pressed="true"]). Ein box-shadow ersetzt den anderen vollstaendig -
   deshalb hier beide in EINER Deklaration, sonst verschwindet die
   Auswahlkante genau im Moment des Fokussierens. */
#vergleich button.fp-kachel-marke[aria-pressed="true"]:focus-visible {
    box-shadow: inset 0 0 0 0.0625rem #0B5FA5, 0 0 0 0.125rem #0B5FA5;
}

/* --- Fallback-Tabelle ----------------------------------------------- */
/* Server-gerendert: visuell versteckt, fuer Screenreader und Suchmaschinen
   im DOM, per <noscript> sichtbar. Sie verschwindet mit aktivem JS NICHT -
   sie wird nur nicht gezeigt. */
#vergleich .fp-fallback {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    margin: -0.0625rem;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Wird sie per <noscript> sichtbar, braucht sie auf schmalen Viewports
   einen eigenen Scrollbereich - sonst schiebt sie die ganze Seite
   waagerecht auf. Gemessen: Tabelle 1346 px in 352 px Rahmen, Seite 375. */
#vergleich .fp-fallback table {
    display: block;
    max-width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    background: #FFFFFF;
    color: #1B2733;
}

/* F6: overflow-x steht seit dieser Phase NUR noch im No-JS-Fall.
   Grund: Chromium macht jedes Element mit eigenem Scrollport
   tastaturfokussierbar - auch ein per clip-path verstecktes. Gemessen war
   diese Tabelle ein echter Tabstopp mitten in der Kette (Stopp 21 von 24
   lokal): 1 x 1 px gross, 30.709 Zeichen Inhalt, Fokusring 1px auto auf
   einem 1-px-Ziel. Ein Tastaturnutzer landete auf einem unsichtbaren Ziel
   und wusste nicht, wo er ist.
   Bewusst NICHT ueber inert oder aria-hidden geheilt: die Tabelle ist der
   Paritaetsanker (F28) und ausdruecklich fuer Screenreader und Suchmaschinen
   im DOM - beide Attribute haetten sie genau diesen beiden Zielgruppen
   genommen. Ebenso wenig ueber tabindex="-1": das waere ein Attribut im
   server-gerenderten Markup, das im No-JS-Fall mitfaehrt und dort die dann
   SICHTBARE, breitere-als-der-Rahmen Tabelle untastbar machte.
   Der Scrollbereich wird nur gebraucht, wenn die Tabelle sichtbar ist - und
   das ist genau der No-JS-Fall, den dieselbe Bedingung markiert, die auch
   der <noscript>-Style im Rumpf nutzt. Das Inline-Skript im Kopf tauscht
   no-js gegen js, bevor irgendetwas gezeichnet wird. */
html.no-js #vergleich .fp-fallback table {
    overflow-x: auto;
}

#vergleich .fp-fallback caption {
    text-align: left;
    font-weight: 600;
    padding: 0.5rem 0 0.25rem;
}

#vergleich .fp-fallback th,
#vergleich .fp-fallback td {
    border: 0.0625rem solid #B7C6D4;
    padding: 0.25rem 0.5rem;
    text-align: left;
    white-space: nowrap;
}

/* --- Ampel ----------------------------------------------------------- */
/* Die Farben tragen zusaetzlich eine Kante links, damit der Zustand nicht
   allein am Farbton haengt. */
/* Die Zustandsfarben stehen ab F2 als Tokens auf #vergleich - EINE Quelle
   fuer beide Renderpfade. Die Belegzeilen unten nehmen sie per var(), der Ring
   liest sie per getComputedStyle().getPropertyValue() und setzt sie als
   ATTRIBUT (eine CSS-Regel auf fill wuerde den Ergrauungspfad in F4
   ueberstimmen). Vorher lag dieselbe Palette zweimal vor: hier und als
   Literale im Ring-JS. Zwei Quellen fuer dieselbe Farbe driften auseinander,
   eine nicht - derselbe Grundsatz, der fuer den Katalog gilt.
   Tokens auf #vergleich, NICHT auf :root: #vergleich.kontrast-hell muss sie
   ueberschreiben koennen, und die Bestandsregeln adressieren ueber die ID. */
/* ANWENDER-ENTSCHEID 10.09.2026 (CT-0347): "bedingt erfuellt" traegt DENSELBEN
   Gruenton wie "erfuellt". Positive Merkmale werden einheitlich dargestellt;
   unterschieden wird allein ueber den FUELLGRAD - erfuellt fuellt den ganzen
   Ringquerschnitt, bedingt nur die aeussere Haelfte (F23). Die Legende folgt
   von selbst, sie zeichnet ihre Probe aus denselben Tokens. Die Zustandskante
   der Belege folgt seit dem 12.09.2026 demselben Prinzip: .fp-z-b fuellt nur
   die untere Haelfte (Regeln bei .fp-z-b und im Overlay-Block).
   --fp-z-b bleibt als eigenes Token bestehen, obwohl es denselben Wert traegt:
   der Ring liest es je Zustand, und ein zusammengelegtes Token machte aus dem
   Entscheid eine Einbahnstrasse. */
#vergleich {
    --fp-z-g: #0E8E69;
    --fp-z-b: #0E8E69;
    --fp-z-n: #5A6E82;
    --fp-z-leer: #D7E1EA;
    --fp-buehne: #dcebf8;
    --fp-nabe: #FFFFFF;
    --fp-nabe-kante: #6E8296;
    --fp-trenn: #B7C6D4;
    --fp-ring-zahl: #1B2733;
    --fp-ring-unter: #40556B;
    /* Eigene Slot-Kante fuer den Mini-Ring. Sie muss dunkler sein als
       --fp-z-n, weil die Linie dort nur noch rund einen Geraetepixel breit
       ist und ihre halbe Deckkraft ans Antialiasing verliert: mit --fp-z-n
       gemessen rgb(157,172,186), also 1,75:1 gegen die Slot-Fuellung. Mit
       diesem Ton steigt derselbe Punkt auf 2,69:1.
       Die genauen Messwerte stehen an EINER Stelle, im Bericht
       memory/berichte/fp-phase-F3-builder.md, Abschnitt 3.1 - hier
       absichtlich nicht wiederholt, weil zwei Fassungen derselben Zahl
       auseinanderlaufen (in F2 zweimal passiert).
       Dass "leer" nicht kraeftiger wirkt als "gefuellt", entscheidet die
       FLAECHE, nicht der Kantenpixel: die Slot-Fuellung --fp-z-leer liegt
       bei Leuchtdichte 0,742, Gruen bei 0,205. Der leere Slot ist damit die
       hellere der beiden Zustandsflaechen. (Der frueher hier genannte dritte
       Wert - Gelb bei 0,134 - ist seit dem Entscheid vom 10.09.2026
       gegenstandslos: erfuellt und bedingt erfuellt teilen sich das Gruen.) */
    --fp-z-kante-mini: #1B2733;
    /* Ergrauungston der nicht gewaehlten Bausteine (F4/F36, verschaerft
       durch F44). DECKEND, nicht gedaempft: eine halbtransparente Farbe
       fiele in die offene Alpha-Luecke des kontrastSweep (slice(0,3)
       verwirft das Alpha) und wuerde zu gut bewertet - ein PASS haette
       dort keinen Aussagewert. Und opacity kommt im Ergrauungspfad ohnehin
       nicht vor: es unterdrueckt kein Hit-Testing.

       DUNKLER SEIT F44 (#C6C6C6 -> #A8A8A8). Der visuelle Test hat
       gefunden, dass ein ergrauter Baustein bei nur EINEM gewaehlten
       Schwerpunkt kaum noch vom leeren Slot eines aktiven Bogens zu
       trennen war: 1,289:1 an echten Pixeln. Mit diesem Ton steigt der
       Wert; der Messwert steht im Bericht, nicht hier, damit er nicht in
       zwei Fassungen auseinanderlaeuft.

       DECKEL, und er ist gemessen, nicht geschaetzt: 3:1 ist ueber die
       Grauwahl ALLEIN unerreichbar. Der Korridor zwischen leerem Track und
       Gruen ist nur 3,112:1 breit; ein Ton dazwischen erreicht hoechstens
       dessen Wurzel, also rund 1,76:1 zu beiden Seiten. Wer hier
       nachschaerfen will, muss an der Geometrie ansetzen, nicht am Ton.
       Prioritaet hat GRAU GEGEN GRAU - dieser Unterschied hat nichts
       ausser Helligkeit, waehrend Grau gegen Gruen zusaetzlich den Farbton
       traegt.

       ACHTUNG: Dieses Token steht im TOKENS-Objekt des Ring-JS und ist
       damit eine ZEICHENBEDINGUNG. Faellt es hier heraus, zeichnet das
       Skript gar nichts mehr - in BEIDEN Kontrastsaetzen fuehren.

       SEIT F46 traegt dieses Token nur noch das PIKTOGRAMM. Die Flaechen
       ergrauen in zwei Toenen (siehe unten); das Zeichen bleibt bei einem,
       weil es keinen Zustand hat, den ein zweiter Ton unterscheiden koennte. */
    --fp-z-aus: #A8A8A8;
    /* ---- Die beiden Flaechentoene des Ergrauens (F46) -------------------
       ausVoll faerbt die FUELLUNGEN (g und b), ausLeer die SPUR. Ein
       einziger Ton hatte beide gleich gefaerbt: ergrautes Voll gegen
       ergrauten Track lag bei 1,000:1, zwei Ringe unterschieden sich ueber
       der ergrauten Flaeche um 0,000 % der Punkte. Der Fuellgrad, den F23
       zum zweiten Kanal bestimmt hat, war dort nicht zu hell, sondern nicht
       vorhanden - kein Grauwert der Welt haette daran etwas geaendert.

       VIER BEDINGUNGEN, DIE GEGENEINANDER HANDELN (F46, Auflage 1+2):
       Voll gegen Leer, beide Toene gegen den aktiven Ring, die Segmentkontur
       --fp-z-n gegen beide Toene, und der Formanteil an echten Pixeln. Sie
       sind nicht gleichzeitig maximierbar: die Kontur kontrastiert umso
       besser, je HELLER das Grau ist, waehrend ein heller Leer-Ton dem
       aktiven Track --fp-z-leer nahekommt.

       DER DECKEL IST GEMESSEN, NICHT GESCHAETZT: Haelt man die Kontur auf
       dem F44-Wert, ist das Produkt aus (Voll/Leer) und (Leer gegen aktiven
       Track) rechnerisch bei rund 1,81 gedeckelt - was der eine Abstand
       gewinnt, verliert der andere. Gewaehlt ist die vermessene beste
       Kombination; alle Zahlen je Kontrastsatz stehen an EINER Stelle, im
       Bericht memory/berichte/fp-phase-F4-builder-f46.md, hier absichtlich
       nicht wiederholt (zwei Fassungen derselben Zahl laufen auseinander).

       Beide Tokens stehen im TOKENS-Objekt des Ring-JS und sind damit
       ZEICHENBEDINGUNGEN wie --fp-z-aus - in BEIDEN Kontrastsaetzen fuehren. */
    --fp-z-aus-voll: #A8A8A8;
    --fp-z-aus-leer: #C6C6C6;
}

/* Belegzeilen der Lupe (?partial=fplupe) tragen seit dem 12.09.2026 (dritter
   Satz) dieselbe Baustein-Probe wie das Detailblatt statt der Zustandskante -
   hier ueber die Tokens, weil die Lupe unter #vergleich steht. Markup und
   Begruendung: Katalog fpRendereBelege und der Overlay-Block weiter unten. */
#vergleich .fp-beleg-kriterium {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
#vergleich .fp-beleg-probe { flex: none; width: 1rem; height: 1rem; margin-top: 0.2em; }
#vergleich .fp-beleg-probe-grund { fill: var(--fp-z-leer); stroke: var(--fp-z-n); stroke-width: 1; }
#vergleich .fp-beleg-probe-fuell { fill: var(--fp-z-g); stroke: var(--fp-z-n); stroke-width: 1; }
#vergleich .fp-beleg-wort { flex: 1 1 auto; min-width: 0; }
#vergleich .fp-beleg-text { padding-left: 1.5rem; }

/* --- Hochkontrast-Hell ------------------------------------------------ */
/* Der Umschalter sitzt im Bestand und setzt #vergleich.kontrast-hell; der
   Prototyp hat keinen eigenen. Dort dreht die Chrome auf Weiss - alles,
   was oben Weiss erbt, braucht hier ausdruecklich eine dunkle Farbe. */
#vergleich.kontrast-hell .fp-intro,
#vergleich.kontrast-hell .fp-abschnitt-titel,
#vergleich.kontrast-hell .fp-deutung,
/* Beide stehen auf der Chrome, nicht auf einer eigenen hellen Flaeche: der
   Hinweis unter der Chip-Ueberschrift und die <caption> der Uhr, die
   ausserhalb des Tabellenkastens sitzt und dessen Weiss nicht erbt. */
#vergleich.kontrast-hell .fp-sp-hinweis,
#vergleich.kontrast-hell .fp-uhr-caption {
    color: #1B2733;
}

/* Ein Tokensatz, beide Renderpfade: die Belegzeilen ueber var(), der Ring
   ueber getPropertyValue(). Vor F2 hatten die Ampelklassen hier gar keinen
   Gegenpart - die Belegliste zeigte auf weissem Grund denselben Ton wie auf
   der blauen Chrome. */
/* Auch hier tragen erfuellt und bedingt erfuellt denselben Ton (Entscheid
   10.09.2026) - im Hell-Satz den dunkleren #0B6E51. */
#vergleich.kontrast-hell {
    --fp-z-g: #0B6E51;
    --fp-z-b: #0B6E51;
    --fp-z-n: #4A5D70;
    --fp-z-leer: #E4EAF0;
    --fp-buehne: #F7F9FC;
    --fp-nabe: #FFFFFF;
    --fp-nabe-kante: #4A5D70;
    --fp-trenn: #9FB2BF;
    --fp-ring-zahl: #111111;
    --fp-ring-unter: #2B3B4B;
    --fp-z-kante-mini: #111111;
    /* Dunkler als im Normalsatz: der Grund ist hier Weiss und der leere
       Slot noch heller (#E4EAF0), also muss der Ergrauungston tiefer
       liegen, um beide Trennungen zu halten. Seit F44 #ADADAD -> #9C9C9C,
       aus demselben Grund wie im Normalsatz. Seit F46 nur noch fuer das
       Piktogramm. */
    --fp-z-aus: #9C9C9C;
    /* Die beiden Flaechentoene (F46). Eigene Werte, nicht die des
       Normalsatzes: der aktive leere Track liegt hier hoeher (#E4EAF0 statt
       #D7E1EA) und die Kontur tiefer (#4A5D70 statt #5A6E82) - beide
       Bedingungen verschieben sich also gegenlaeufig, und der Korridor ist
       hier breiter als im Normalsatz. Zahlen im Bericht, nicht hier. */
    --fp-z-aus-voll: #9C9C9C;
    --fp-z-aus-leer: #B8B8B8;
}

#vergleich.kontrast-hell .fp-buehne {
    background: #F7F9FC;
    border-color: #4A5D70;
}

#vergleich.kontrast-hell .fp-buehne::after { color: #33475B; }

/* Ring im Hochkontrast. Die Buehne dreht auf Weiss; die Segmentfarben
   setzt das JS als Attribut aus der zweiten Palette, deshalb steht hier
   nur, was Text und Flaeche betrifft. Die hoehere Spezifitaet gegenueber
   #vergleich .fp-buehne[data-fp-ring="1"] ist Absicht - gleiche
   Spezifitaet haengte das Ergebnis an der Reihenfolge im Stylesheet. */
#vergleich.kontrast-hell .fp-buehne[data-fp-ring="1"] {
    background: #F7F9FC;
    border-color: #4A5D70;
}

#vergleich.kontrast-hell .fp-ring-name,
#vergleich.kontrast-hell .fp-legende-punkt {
    color: #111111;
}

/* Raster im Hochkontrast. Die Chrome dreht auf Weiss, also brauchen alle
   Zeilen, die oben Weiss erben, hier ausdruecklich eine dunkle Farbe - und
   die Kachelkanten mehr Kraft, weil weiss auf weiss nichts abgrenzt. */
#vergleich.kontrast-hell .fp-raster-hinweis,
#vergleich.kontrast-hell .fp-raster-ansage,
#vergleich.kontrast-hell .fp-raster::after {
    color: #1B2733;
}

#vergleich.kontrast-hell .fp-buehne-leer {
    color: #111111;
}

#vergleich.kontrast-hell .fp-kachel-marke {
    background: #F7F9FC;
    color: #111111;
    border-color: #4A5D70;
}

#vergleich.kontrast-hell .fp-kachel-marke[aria-pressed="true"] {
    background: #F7F9FC;
    border-color: #003A66;
    box-shadow: inset 0 0 0 0.125rem #003A66;
}

/* Auf weisser Chrome traegt die Kante #B7C6D4 nur 1,81:1 - der Chip haette
   keinen sichtbaren Rand mehr. Dieselbe Korrektur wie beim Marken-Button. */
#vergleich.kontrast-hell .fp-chip {
    background: #F7F9FC;
    color: #111111;
    border-color: #4A5D70;
}

#vergleich.kontrast-hell .fp-chip[aria-pressed="true"] {
    background: #F7F9FC;
    border-color: #003A66;
    box-shadow: inset 0 0 0 0.125rem #003A66;
}

#vergleich.kontrast-hell .fp-chip[aria-disabled="true"] {
    color: #2B3B4B;
}

#vergleich.kontrast-hell .fp-uhr {
    color: #111111;
    border-color: #4A5D70;
}

#vergleich.kontrast-hell .fp-uhr th,
#vergleich.kontrast-hell .fp-uhr td {
    border-color: #9FB2BF;
}

#vergleich.kontrast-hell .fp-uhr tbody tr[data-gedaempft="1"] {
    color: #2B3B4B;
    background: #EFEFEF;
}

#vergleich.kontrast-hell .fp-chipzeile .fp-chip:focus-visible,
#vergleich.kontrast-hell .fp-uhr-schalter:focus-visible {
    outline-color: #003A66;
}

/* Der Innenring des Normalsatzes faerbt hier mit: sein #0B5FA5 waere im
   Hell-Satz ein zweiter Blauton fuer denselben Zweck - dieselbe Begruendung,
   aus der CTA und Schliessen dort auf #003A66 zusammenlaufen. Der helle
   Aussenring hat hier ohnehin keine Aufgabe mehr, weil die Chrome weiss ist:
   #003A66 traegt mit 11,69:1 gegen BEIDE Nachbarn, Chipflaeche wie Grund.
   Eigene Regel statt Anbau an die Liste oben: der Uhr-Schalter steht in
   derselben Liste, hat aber einen Versatz nach INNEN und braucht keinen
   zweiten Ring. */
#vergleich.kontrast-hell .fp-chipzeile .fp-chip:focus-visible {
    box-shadow: 0 0 0 0.125rem #003A66;
}

/* Gegenstueck zur Gedrueckt-Regel dieses Satzes (CSS:1015-1019) - dieselbe
   Ueberdeckung wie im Normalsatz, nur mit dessen Werten (0.125rem, #003A66). */
#vergleich.kontrast-hell .fp-chipzeile .fp-chip[aria-pressed="true"]:focus-visible {
    box-shadow: inset 0 0 0 0.125rem #003A66, 0 0 0 0.125rem #003A66;
}

#vergleich.kontrast-hell .fp-kachel-produkt {
    color: #2B3B4B;
}

#vergleich.kontrast-hell .fp-kachel-info-zeichen,
#vergleich.kontrast-hell .fp-ring-info-zeichen {
    color: #111111;
    border-color: #4A5D70;
}

#vergleich.kontrast-hell .fp-raster-gitter button:focus-visible,
#vergleich.kontrast-hell .fp-ring-info:focus-visible {
    outline-color: #003A66;
}

/* Gegenstueck zum zweifarbigen Marken-Ring des Normalsatzes (F6). Die Regel
   oben faerbt bereits die AUSSEN liegende outline auf #003A66 um; ohne die
   beiden folgenden Regeln bliebe der Innenring auf #0B5FA5 stehen und der
   Hell-Satz haette zwei Blautoene fuer denselben Zweck - dieselbe Begruendung
   wie beim Chip (CSS oben, Kommentar vor der Chip-Regel dieses Satzes).
   Ein weisser Aussenring hat hier ohnehin keine Aufgabe: die Chrome ist in
   diesem Satz weiss, #003A66 traegt gegen beide Nachbarn.
   button steht auch hier im Selektor (F6-Review 2-A): heute entscheidet es
   nichts, weil die Gitter-Hell-Regel oben nur outline-color setzt - aber
   bekaeme sie je ein box-shadow, gewaenne ihr (1,3,1) still gegen (1,3,0),
   und der Innenring verschwaende. Dieselbe Falle, die der Normalsatz in
   der Abnahme gemessen hat. */
#vergleich.kontrast-hell button.fp-kachel-marke:focus-visible {
    box-shadow: 0 0 0 0.125rem #003A66;
}

#vergleich.kontrast-hell button.fp-kachel-marke[aria-pressed="true"]:focus-visible {
    box-shadow: inset 0 0 0 0.125rem #003A66, 0 0 0 0.125rem #003A66;
}

#vergleich.kontrast-hell .fp-sozaehlenwir,
#vergleich.kontrast-hell .fp-sozaehlenwir > summary,
#vergleich.kontrast-hell .fp-sozaehlenwir p,
#vergleich.kontrast-hell .fp-sozaehlenwir-titel,
#vergleich.kontrast-hell .fp-sozaehlenwir-liste,
#vergleich.kontrast-hell .fp-belege,
#vergleich.kontrast-hell .fp-beleg-kriterium,
#vergleich.kontrast-hell .fp-beleg-text,
#vergleich.kontrast-hell .fp-fallback table {
    background: #F7F9FC;
    color: #111111;
}

#vergleich.kontrast-hell .fp-beleg-zustand { color: #2B3B4B; }

/* Die aktive Profil-Pill: der Bestand faerbt sie im Hochkontrast weiss auf
   #0070C0. Hier ausdruecklich nachgezogen, weil die Prototyp-Pills als
   <span>/<a> in einer eigenen Nav liegen und die Bestandsregel sie sonst
   nur teilweise erreicht (gemessen: 1,62:1). */
#vergleich.kontrast-hell .fp-dashboard .fp-profilnav .laufzeit-pill {
    color: #003A66;
}
#vergleich.kontrast-hell .fp-dashboard .fp-profilnav .laufzeit-pill.active {
    background: #0070C0;
    color: #FFFFFF;
}

/* --- Detailblatt: Seitenpanel (F3 Geruest, F5 Inhalt, F9 Seitenpanel) --- */
/* AUSNAHME vom #vergleich-Praefix, mit Grund: #fpOverlay steht body-level
   AUSSERHALB von #vergleich (core:640 - damit es jeden Partial-Swap
   ueberlebt). Ein #vergleich-Praefix traefe es nie. Die Paarung
   #fpOverlay.fp-overlay hat dieselbe Spezifitaet (0,1,1,0) wie
   #vergleich .fp-x, also dieselbe Durchsetzungskraft gegen die
   Bestandsregeln.
   Aus demselben Grund stehen hier keine var(--fp-*)-Tokens: die liegen auf
   #vergleich und erreichen dieses Element nicht. Die gewaehlten Farben
   tragen in beiden Kontrastmodi - #vergleich.kontrast-hell kaeme hier
   ebenfalls nicht an.

   F9 (CT-0347) HAT DIE BAUART GEWECHSELT, nicht nur die Werte. Bis ?v=10 war
   das Detailblatt ein mittiges Blatt mit Weichzeichner-Scrim, das als GANZES
   scrollte; der Schliessen-Knopf brauchte dafuer erst sticky, dann einen
   klebenden Traeger mit deckendem Grund (F7/F8). Seit F9 faehrt ein
   Seitenpanel von rechts ein und zerfaellt in KOPF und INHALT: der Kopf
   scrollt nicht, der Knopf liegt gar nicht erst im Scrollport.
   Was dadurch ERSATZLOS ENTFAELLT, und warum das kein Verlust ist:
     - .fp-overlay-zu-traeger samt Deckungsgrund und Geometrie-Kopplung. Er
       loeste ein Problem, das ein nicht scrollender Kopf nicht hat. Mit 26
       Produkt- und 21 Belegzeilen waere die Kette nur laenger geworden.
     - die :has()-Regel, die dem letzten Inhaltselement seinen unteren Rand
       nahm. Sie korrigierte einen Randkollaps am Traeger-Polster.
     - der 20-px-Weichzeichner am Scrim. Ein Seitenpanel soll die Buehne
       sichtbar lassen - das ist der Zweck der Bauart; ein zugedeckter Ring
       nimmt dem Panel seinen Bezug. Der Scrim ist dafuer heller geworden.
   Die Bedingungen fuer sticky, die Traeger-Begruendung und die
   Pseudoelement-Warnung stehen nicht mehr hier: sie beschrieben eine
   Mechanik, die es nicht mehr gibt. Die Lehre dahinter bleibt in den
   Berichten zu F7 und F8. */
#fpOverlay.fp-overlay {
    display: none;
}

/* Der Scrim deckt, ohne zuzudecken: 0.35 Alpha statt der 0.55 mit
   Weichzeichner von ?v=10. Er bleibt der Klick-Schliessweg (dialogKlick
   prueft auf ev.target === #fpOverlay) und traegt weiterhin die
   Abschirmung - inert und Scrollsperre setzt das JS, nicht diese Regel. */
#fpOverlay.fp-overlay[data-fp-offen="1"] {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: rgba(9, 30, 48, 0.35);
}

/* Geometrie und Glas-Duktus des Festgeld-Seitenpanels (.zg-karte), Werte
   uebernommen: 30rem Breite laesst die Buehne daneben stehen, max-width:100%
   macht daraus unterhalb 30rem Fensterbreite ein volles Blatt - dasselbe
   Panel, keine zweite Zustandsmaschine fuer Mobilgeraete.
   position:absolute genuegt, weil das Overlay bereits fixed ist; ein zweites
   fixed erzeugte nur einen weiteren Containing Block.
   FLEX-SPALTE MIT ZWEI KINDERN: Kopf (feste Hoehe) und Inhalt (nimmt den
   Rest, scrollt selbst). Der Deckel gegen den Sichtbereich kommt aus
   height:100%, nicht aus max-height - das Panel FUELLT die Fensterhoehe. */
#fpOverlay .fp-overlay-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 30rem;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: rgba(9, 87, 143, 0.92);
    -webkit-backdrop-filter: blur(1.25em);
    backdrop-filter: blur(1.25em);
    border: 0;
    border-left: 0.0625em solid rgba(76, 181, 160, 0.45);
    border-radius: 0;
    box-shadow: -0.5em 0 2em rgba(0, 26, 48, 0.4);
    color: #FFFFFF;
    font-size: 0.9rem;
    line-height: 1.35;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* DIE KLASSE, NICHT DAS OFFEN-ATTRIBUT, schaltet die Einfahrt. data-fp-offen
   wird synchron gesetzt und wechselt display von none auf block; ein
   transform im selben Bild hat keinen Ausgangswert und spraenge. ring.js
   erzwingt deshalb VOR dem Setzen der Klasse einen Umbruch (void
   panel.offsetWidth) - bewusst kein requestAnimationFrame, dessen Rueckruf im
   Hintergrund-Tab ausbleibt und das Panel unsichtbar-offen liesse (Begruendung
   und Messung bei oeffneDialog im JS; hier nur der Verweis, keine Kopie).
   Eine Regel an [data-fp-offen="1"] .fp-overlay-panel stuende bei (1,3,0) und
   naehme der Klasse (1,2,0) die Wirkung - sie darf hier NICHT stehen. */
#fpOverlay .fp-overlay-panel.fp-eingefahren {
    transform: translateX(0);
}

/* Kopfzone. Der rechte Innenabstand von 4.5rem haelt den Titel vom
   Schliessen-Knopf frei; min-height sichert die Zone auch bei kurzem Titel,
   damit Kopf und Inhalt nicht springen (Lehre CT-0319 aus dem Festgeld-Panel:
   ein Titel, der dem Knopf ausweichen muss, bricht bei langen Anbieternamen
   als Waise um). position:relative macht den Kopf zum Bezug des Knopfes - so
   haengt seine Lage am Kopf und nicht an der Panelhoehe. */
#fpOverlay .fp-overlay-kopf {
    position: relative;
    flex: 0 0 auto;
    padding: 1em 4.5rem 0.75em 2em;
    min-height: 4.65em;
    box-sizing: border-box;
}

#fpOverlay .fp-overlay-titel {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.35;
    color: #FFFFFF;
    overflow-wrap: anywhere;
}

/* Bedienelement-Formel des Duktus: transluzente weisse Flaeche auf dunklem
   Glas, ruhend 0.16, im Hover 0.30, Fokusring weiss mit Versatz nach aussen.
   Der Rahmen ist im Normalsatz UNSICHTBAR - transparent laesst den Knopfgrund
   durch - und wird im erzwungenen Hochkontrast zu ButtonBorder. Ohne ihn ist
   der Knopf dort gar nicht abgegrenzt: sein Grund wird zu ButtonFace, also
   dieselbe Flaeche wie das Panel (Canvas), und nur das Zeichen verriete ihn.
   Auch das ohne eigene Media-Bedingung (F47: genau drei in dieser Datei). */
#fpOverlay .fp-overlay-zu {
    position: absolute;
    top: 1em;
    right: 1.8rem;
    width: 2.4rem;
    height: 2.4rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    border: 0.0625rem solid transparent;
    border-radius: 0.5em;
    font-family: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background 130ms ease;
}

#fpOverlay .fp-overlay-zu:hover {
    background: rgba(255, 255, 255, 0.30);
}

/* Inhaltszone. min-height:0 ist die tragende Zeile und keine Formalie: ein
   Flex-Element hat als Mindestgroesse seinen Inhalt, ohne diese Angabe
   wuechse das Panel ueber die Fensterhoehe hinaus, statt zu scrollen - der
   Kopf waere dann mit hinausgeschoben und der Schliessweg wieder fort.
   Der Hintergrund wird vom JS gesperrt; overscroll-behavior haelt das
   Kettenscrollen zusaetzlich am Panelrand an. */
#fpOverlay .fp-overlay-inhalt {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 2em 2em;
}

#fpOverlay .fp-overlay-text {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #FFFFFF;
}

/* --- Detailblatt: Inhalt (F5, Farben auf Glas seit F9) ----------------- */
/* EIGENER SATZ statt erweiterter Selektorlisten. Die vorhandene Beleg-Optik
   (CSS:74-99) traegt durchgaengig das #vergleich-Praefix und erreicht dieses
   Panel nicht - der Server liefert aber genau diese Klassen. Die Wahl lag
   zwischen "Selektorlisten oben um #fpOverlay erweitern" und einem eigenen
   Satz hier. Es ist der eigene Satz geworden, aus drei Gruenden, und der
   erste ist zwingend:

   1. STILLER AUSFALL DURCH var(). Die Zustandskante faerbt oben ueber
      var(--fp-z-*). Diese Tokens stehen auf #vergleich bzw.
      #vergleich.kontrast-hell und wirken ueber Vererbung - #fpOverlay ist
      kein Nachfahre, das var() bliebe hier unaufloesbar. Eine unaufloesbare
      var() macht nicht nur die Farbe ungueltig, sondern die GANZE
      Kurzschreibweise: border-left faellt auf unset zurueck, also
      border-left-style: none. Die Kante verschwaende lautlos, statt falsch zu
      faerben, und der Zustand haenge dann allein am Wort. Wer die Liste
      #vergleich .fp-z-g um #fpOverlay erweitert, baut genau diesen Ausfall
      ein, ohne dass ein Diff ihn zeigt.
   2. DER HELL-SATZ IST NICHT ERWEITERBAR. Er haengt hier an einer Klasse AM
      Overlay selbst (.fp-overlay.kontrast-hell, siehe unten), nicht an einem
      Vorfahren.
   3. DIE WERTE WEICHEN AB, und seit F9 vollstaendig: das Panel ist dunkles
      Glas, die Bestandsregeln sind fuer weissen Grund gebaut. Eine geteilte
      Liste muesste jeden Ton doppelt fuehren.

   FARBSYSTEM DIESES SATZES, damit es nicht bei jeder Ergaenzung neu erfunden
   wird - es ist der Duktus des Festgeld-Panels:
     Fliesstext          #FFFFFF
     Nebenzeilen         rgba(255, 255, 255, 0.8)
     gedaempfte Labels   rgba(255, 255, 255, 0.72)
     Leerwert            rgba(255, 255, 255, 0.6)
     Trennlinien         rgba(255, 255, 255, 0.14)
     Mint (Titel 2. Ordnung, Links, Zustandskante, CTA-Flaeche)  #A9F6DB */
#fpOverlay .fp-detail {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #FFFFFF;
}

/* Kopf: Titel, Position, Preis. Der Trennstrich ersetzt einen zweiten
   Kasten - ohne ihn beginnen die Produktangaben ohne erkennbare Zaesur. */
#fpOverlay .fp-detail-kopf {
    margin: 0 0 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 0.0625em solid rgba(255, 255, 255, 0.14);
}

/* Der Server liefert eine eigene Ueberschrift mit; das JS entfernt sie,
   weil das Panel mit #fp-overlay-titel bereits eine traegt (zwei h2 mit
   demselben Text waeren zwei Quellen). Die Regel steht trotzdem hier: sie
   kostet nichts und faengt den Fall ab, dass das Fragment einmal
   unveraendert eingehaengt wird. Werte wie .fp-overlay-titel. */
#fpOverlay .fp-detail-titel {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    line-height: 1.35;
    color: #FFFFFF;
    overflow-wrap: anywhere;
}

#fpOverlay .fp-detail-meta {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
}

/* Zwei Zeilen (Politur 12.09.2026): "Position 12 von 45" und "14 von 21
   Eigenschaften erfuellt · 4 bedingt · 3 nein" stehen je als Block. Die
   Aufschluesselung folgt der Zaehlung in derselben Zeile; inline-block mit
   nowrap laesst sie bei 375 px als GANZES umbrechen statt mitten im
   Zahlenpaar (deshalb stand sie vorher als eigener Block). Keine eigene
   Farbe - die Spans erben die der Meta-Zeile, in beiden Saetzen. */
#fpOverlay .fp-detail-position,
#fpOverlay .fp-detail-stand {
    display: block;
}
#fpOverlay .fp-detail-aufschluesselung {
    display: inline-block;
    white-space: nowrap;
}

/* Kontopreis. Der Feldtext kommt aus der DB und kann eine lange ungetrennte
   Kette tragen - dieselbe Vorsorge wie in der Uhr-Tabelle (CSS:444). */
#fpOverlay .fp-detail-preis {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
    overflow-wrap: anywhere;
}

/* --- Detailblatt: Reiter (Politur 12.09.2026) ------------------------- */
/* Produktangaben und Fingerabdruck liegen in zwei Reiterflaechen. Werte 1:1
   aus dem Ratenkredit-Panel (ratenkredit-diagramm.min.css, .zk-reiterleiste /
   .zk-reiter): Leiste mit Mint-Unterlinie, Reiter als Text-Knopf mit 2,75rem
   Mindesthoehe (Trefferflaechen-Mass der Bestands-Checkboxen), aktiver Reiter
   mit Balken an der Unterkante UND Grundflaeche - zwei Merkmale, die auch ohne
   Farbwahrnehmung tragen. Die Schriftstaerke bleibt 600 in beiden Zustaenden,
   sonst rutschte die Leiste bei jedem Wechsel nach. Beide Zustaende,
   aria-selected und .active, weil der Kontrakt beide setzt.
   Die Flaechen verstecken sich ueber das hidden-ATTRIBUT, nicht ueber eine
   Klasse: erreichbare() der Fokusfalle filtert ueber getClientRects, und das
   greift nur bei display:none. Der Reset am Knopf ist noetig, weil das
   Overlay ausserhalb von #vergleich liegt und die Site-Chrome Buttons
   eigene Schrift und Rahmen gibt. */
#fpOverlay .fp-reiter-block {
    display: block;
    margin: 0.25rem 0 0;
}

#fpOverlay .fp-reiterleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 2em;                /* 2em Luft unter den Reitern (Anwender-Wunsch 12.09.2026, vorher 0.85rem) */
    border-bottom: 0.0625rem solid rgba(169, 246, 219, 0.35);
}

#fpOverlay .fp-reiter {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.4rem 0.7rem;
    border: 0;
    border-bottom: 0.1875rem solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #C3D3E2;                 /* 4,80:1 auf dem Glas */
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

#fpOverlay .fp-reiter:hover { color: #FFFFFF; }

#fpOverlay .fp-reiter.active,
#fpOverlay .fp-reiter[aria-selected="true"] {
    color: #FFFFFF;
    background: rgba(169, 246, 219, 0.12);
    border-bottom-color: #A9F6DB;   /* 5,90:1 */
    border-radius: 0.25rem 0.25rem 0 0;
}

#fpOverlay .fp-reiter:focus-visible {
    outline: 0.125rem solid #A9F6DB;
    outline-offset: -0.125rem;      /* nach INNEN, sonst kappt die Leiste den Ring */
}

#fpOverlay .fp-reiter-label { display: inline-block; }

#fpOverlay .fp-reiterflaeche { display: block; }
#fpOverlay .fp-reiterflaeche[hidden] { display: none; }

/* --- Detailblatt: Produktmerkmale (F9, Satz Kreditkarte seit 12.09.2026) --- */
/* Die 26 Zeilen des 1:1-Vergleichs in vier Gruppen. Seit der Politur vom
   12.09.2026 (dritter Satz) folgt die Gestaltung dem Panel der Kreditkarten-
   Fieberkarte (kreditkarte-diagramm.min.css: .fieber-panel-gruppe, -gruppe-
   titel, -zeile, -label, -wert; Werte am Live-Panel gemessen, 1280 px):
   Gruppenabstand 2.3em, Gruppentitel weiss 600 mit Unterlinie, Zeile als
   Zweispalter-Raster (Beschriftung 7-11em, Wert 1fr) mit Kante UNTEN.
   DER GRUPPENTITEL SETZT DIE GLOBALE h3-REGEL ZURUECK: style.css:7 gibt jeder
   h3 Kursivschrift, Verdana und padding 0 5% - im Panel stand der Titel damit
   um 5 % eingerueckt und schraeg (gemessen: padding 0 20,33 px bei 406 px
   Blattbreite), obwohl text-align nie etwas anderes als start war. Deshalb
   font-family inherit, font-style normal, padding 0 wie im Kreditkarten-
   Panel. Dieselbe Regel gilt fuer .fp-beleg-titel (Fingerabdruck-Reiter).
   Bis zum zweiten Satz stand der Titel in Mint; weiss mit Linie ist der
   Kreditkarten-Satz. */
#fpOverlay .fp-produkt {
    margin: 0;
}

#fpOverlay .fp-produkt-gruppe {
    margin: 0 0 2.3em;
}

#fpOverlay .fp-produkt-gruppe:last-child {
    margin-bottom: 0;
}

#fpOverlay .fp-produkt-titel,
#fpOverlay .fp-beleg-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;
    text-align: left;
    color: #FFFFFF;
}

#fpOverlay .fp-produkt-liste {
    margin: 0;
}

/* Zwei Spalten statt Flex-Paar (Kreditkarte, .fieber-panel-zeile): die Werte
   sind Freitexte sehr unterschiedlicher Laenge, eine Beschriftungsspalte mit
   fester Obergrenze haelt die Wertspalte in einer Flucht. minmax(7em, 11em)
   laesst die Spalte auf schmalen Blaettern schrumpfen, bevor der Wert
   umbricht. Die Kante steht UNTEN und faellt an der letzten Zeile weg - der
   Gruppentitel traegt seine eigene Linie. */
#fpOverlay .fp-produkt-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);
}

#fpOverlay .fp-produkt-zeile:last-child {
    border-bottom: 0;
}

/* overflow-wrap: anywhere gegen das einzelne lange Kompositum in der
   Beschriftungsspalte (Kreditkarte, VRT-B4): nur anywhere senkt auch die
   intrinsische Mindestbreite, an der das Raster seine Spalte bemisst. */
#fpOverlay .fp-produkt-label {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #FFFFFF;
    overflow-wrap: anywhere;
}

/* LINKSBUENDIG (Fable-Entscheid E12, 10.09.2026): Fliesstext ueber bis zu
   sieben Zeilen, rechtsbuendig franste der linke Rand aus. margin 0 nimmt
   dem dd seinen Browser-Einzug. */
#fpOverlay .fp-produkt-wert {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: left;
    overflow-wrap: anywhere;
}

#fpOverlay .fp-produkt-leer {
    color: rgba(255, 255, 255, 0.6);
}

/* Anker im Feldwert (Erfahrungsberichte, Neukundenaktion, Portraits). Die
   globale Regel a:link { color: var(--link) } aus style.css steht bei
   (0,1,1) und kippte die Farbe sonst auf das Bestandsblau, das auf dunklem
   Glas nicht traegt. Unterstrichen, weil Mint allein den Link nicht von der
   Mint-Ueberschrift daneben unterscheidet. */
#fpOverlay .fp-produkt-wert a,
#fpOverlay .fp-produkt-wert a:link,
#fpOverlay .fp-produkt-wert a:visited {
    color: #A9F6DB;
    text-decoration: underline;
}

/* Reine Bild- und Icon-Anker (Geschenk-Zeichen, Erfahrungsberichte) tragen
   keinen Text - ein Strich darunter unterstriche nichts (Review #19, B6).
   Und sie bekommen eine TREFFERFLAECHE: als Inline-Anker massen sie nur die
   Zeilenbox (18 px hoch) unter einem 28 px hohen Zeichen; als Flex-Kasten
   mit 2.75rem Mindestmass tragen sie das 44-px-Touch-Ziel, das der Dialog
   fuer alle seine Schaltflaechen fuehrt (F5/F6). :has() steht im Haus
   bereits im Overlay-Satz; Browser ohne :has() zeigen den Strich und die
   kleine Flaeche, mehr nicht. */
#fpOverlay .fp-produkt-wert a:has(> img),
#fpOverlay .fp-produkt-wert a:has(> i.icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    text-decoration: none;
}

/* DAS ICON DES ERFAHRUNGSBERICHTE-LINKS. Der Feldwert bringt <i class="icon
   icon-chat-empty"> mit, und style.css:229 setzt auf .icon position:absolute,
   font-size 3em, margin-left -1.6em - gebaut fuer die Tabellen des Bestands,
   deren einzige Entschaerfung (style.css:249) an einem <table>-Vorfahren
   haengt. Ohne Gegenregel steht das Zeichen 2.341 px unter der Panelkante
   (Bezug ist das Panel, nicht der Scrollport), der <a> misst 0 x 0, die
   Zeile ist leer - bei 39 von 39 Konten (Review #19, B1). Dieselbe Falle
   haben 1:1-Tool, Panorama (girokonto-diagramm.min.css, .erfahrungsberichte-row)
   und Fieberkarte je einzeln geheilt; das ist die vierte Ansicht mit dem
   Markup und uebernimmt das Panorama-Muster.
   pointer-events:none gehoert dazu: Icon-Fonts gewinnen elementFromPoint fern
   ihrer Border-Box (Projektgedaechtnis) und naehmen dem <a> die Klickflaeche.
   Die Farbe ist gepinnt, nicht geerbt - faellt die Bestandsregel weg, kippte
   das Zeichen sonst auf Weiss. */
#fpOverlay .fp-produkt-wert i.icon {
    position: static;
    margin: 0;
    display: inline-block;
    font-size: 1.75rem;
    line-height: 1;
    vertical-align: middle;
    pointer-events: none;
    color: #A9F6DB;
}

/* Das Geschenk-Zeichen der Neukundenzeile. width kommt aus style.css
   (a.cardgifta img { width: 2.7em }) und bleibt unangetastet; hier steht nur
   der Deckel gegen zu schmale Panels und die Grundlinienlage. */
#fpOverlay .fp-produkt-wert img {
    max-width: 100%;
    vertical-align: middle;
}

/* --- Detailblatt: Belege (F5, Farben seit F9) ------------------------- */
/* Beleg-Block: kein eigener Grund, kein Polster, kein Radius - alles drei
   traegt das Panel. Der Unterschied zu #vergleich .fp-belege (CSS:74-79)
   ist damit Absicht, nicht Auslassung. */
#fpOverlay .fp-belege {
    margin: 0;
    color: #FFFFFF;
}

/* Bausteine als Gruppen im Satz der Kreditkarte (12.09.2026, dritter Satz):
   2.3em Abstand wie .fp-produkt-gruppe, KEINE eigene Unterlinie mehr - die
   traegt der Titel (Regel oben, gemeinsam mit .fp-produkt-titel). */
#fpOverlay .fp-beleg-baustein {
    margin: 0 0 2.3em;
    padding: 0;
    border: 0;
}

/* Der letzte Baustein grenzt an die CTA, nicht an einen weiteren Baustein. */
#fpOverlay .fp-beleg-baustein:last-child {
    margin-bottom: 0;
}

#fpOverlay .fp-beleg-liste {
    margin: 0;
}

/* KRITERIENZEILE MIT BAUSTEIN-PROBE statt Zustandskante (Anwender-Entscheid
   12.09.2026, dritter Satz). Die 3-px-Kante links liess nicht erkennen, ob
   sie ein- oder zweifarbig war. Jetzt steht vor jedem Kriterium dieselbe
   Probe wie in der Legende der Buehne (ring.js baueLegende): ein Quadrat im
   Leer-Ton mit Kante, darueber so viel Fuellung, wie der Zustand traegt -
   ganz (erfuellt), obere Haelfte (bedingt erfuellt), nichts (nicht erfuellt,
   kein Muster). Das Markup kommt aus fpRendereBelege (Katalog):
   svg.fp-beleg-probe mit rect.fp-beleg-probe-grund und optional
   rect.fp-beleg-probe-fuell.
   FARBEN ALS LITERALE, nicht als var(--fp-z-*): die Tokens leben auf
   #vergleich, und #fpOverlay ist kein Nachfahre (F5-D1). Leer-Ton #D7E1EA,
   Kante #5A6E82, Fuellung #0E8E69 sind die Werte der Buehnen-Tokens im
   Normalsatz; der Hell-Satz unten zieht die drei Hell-Werte nach. Auf dem
   Glas liest der helle Grund staerker als die alte Kante, das ist Absicht:
   die Probe ist ein Bild des Bausteins, nicht eine Kante des Textes.
   Die Zeile ist ein Flex-Paar (Probe, Wort); die Probe haelt 1rem und rueckt
   um 0.2em nach unten auf die erste Zeile (22,5 px Zeile, 16 px Probe).
   Der Belegtext darunter rueckt um Probe + Luecke ein (1.5rem) und traegt die
   Zeilenkante unten wie .fp-produkt-zeile; die letzte Zeile eines Bausteins
   bleibt ohne Kante. */
#fpOverlay .fp-beleg-kriterium {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.35em 0 0;
    font-weight: 600;
    color: #FFFFFF;
}

#fpOverlay .fp-beleg-probe {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.2em;
}

#fpOverlay .fp-beleg-probe-grund {
    fill: #D7E1EA;
    stroke: #5A6E82;
    stroke-width: 1;
}

#fpOverlay .fp-beleg-probe-fuell {
    fill: #0E8E69;
    stroke: #5A6E82;
    stroke-width: 1;
}

#fpOverlay .fp-beleg-wort {
    flex: 1 1 auto;
    min-width: 0;
}

#fpOverlay .fp-beleg-zustand {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
}

/* Der woertliche Feldtext. overflow-wrap wie in der Uhr-Tabelle: er kommt
   aus der DB und traegt gelegentlich lange ungetrennte Ketten. */
#fpOverlay .fp-beleg-text {
    margin: 0;
    padding: 0.125rem 0 0.35em 1.5rem;
    border-bottom: 0.0625em solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
    overflow-wrap: anywhere;
}

#fpOverlay .fp-beleg-text:last-child {
    border-bottom: 0;
}

/* Die Klassen fp-z-g/-b/-n/-x bleiben am dt als Zustandsmarke (Gates zaehlen
   sie, fpDumpText nennt sie) - eine Kante tragen sie seit dem dritten Satz
   nicht mehr; die Regel steht ausdruecklich, damit kein aelterer Satz aus
   #vergleich oder einem Cache sie wieder einzieht. */
#fpOverlay .fp-z-g,
#fpOverlay .fp-z-b,
#fpOverlay .fp-z-n,
#fpOverlay .fp-z-x { border-left: 0; padding-left: 0; }

/* CTA am Blattende, rechtsbuendig wie im Festgeld-Panel. */
#fpOverlay .fp-detail-cta {
    margin: 1.2rem 0 0;
    text-align: right;
}

/* Mint-Flaeche auf dunklem Grund, Text im Haus-Dunkelblau. min-height sichert
   die 44-px-Trefferflaeche, die das Polster allein nicht erreicht: 0.8em bei
   0.9rem Basis sind 2 x 11,5 px auf rund 19 px Zeile, zusammen 42,5 px.
   Die Regel ist damit keine Doppelung des Polsters, sondern sein Deckel nach
   unten.
   DER GLOBALE ::after-GLYPH MUSS WEG: style.css haengt an jeden Link auf
   /r/ ein Fontello-Zeichen (a[href^="https://www.modern-banking.de/r/"]),
   und die CTA-Ziele sind genau solche Links. Auf der Mint-Flaeche stuende es
   in der Bestands-Linkfarbe. */
#fpOverlay .fp-detail-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.8em 1.3em;
    background: #A9F6DB;
    color: #004578;
    border-radius: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

#fpOverlay .fp-detail-cta a:hover {
    background: #DFFDF2;
}

#fpOverlay .fp-detail-cta a::after {
    content: none !important;
    display: none !important;
}

/* Fehlerpfad des Endpoints und des JS. Der Kasten ist KEIN Zustandston: er
   sagt "etwas stimmt nicht" und behaelt deshalb seine warme Optik samt Kante
   links, auch nachdem das Gelb aus der Zustandspalette verschwunden ist
   (Entscheid 10.09.2026). Die Kante bleibt #8A5E00 im Normalsatz und
   #6B4A00 im Hell-Satz. Bis CT-0363 teilte er diesen warmen Ton mit dem
   Testansicht-Kasten (.fp-hinweis-test); der ist mit dem Testhinweis
   entfallen, seither ist der Fehlerkasten der einzige Traeger der beiden
   Toene - ein Grund mehr, sie hier stehen zu lassen. Dass #8A5E00 frueher
   auch der Zustandston "bedingt" war, ist Zufall der Palette, kein Grund
   zum Umfaerben (Review #19, B5).

   ZWEITER SELEKTOR, damit die Regel nicht an der Reihenfolge haengt: das JS
   setzt fp-fehler ZUSAETZLICH an den Ladehinweis (ring.js, fehlerZustand) -
   der Knoten traegt dann beide Klassen. Die einfache Fassung stuende gegen
   #fpOverlay .fp-overlay-text bei gleicher Spezifitaet (1,1,0) und gewaenne
   nur, weil sie weiter unten steht; Farbe und Zeilenhoehe kippten beim ersten
   Umsortieren lautlos zurueck. Die Paarung .fp-overlay-text.fp-fehler (1,2,0)
   entscheidet es ueber die Spezifitaet statt ueber den Ort. Der einfache
   Selektor bleibt daneben stehen: das Fragment des Endpoints bringt ein
   eigenes div.fp-fehler mit, das keine zweite Klasse traegt. */
#fpOverlay .fp-fehler,
#fpOverlay .fp-overlay-text.fp-fehler {
    margin: 0 0 1rem;
    padding: 0.625rem 0.875rem;
    border-left: 0.25rem solid #8A5E00;
    background: #FFF4D6;
    color: #4A3300;
    font-size: 0.9375rem;
    line-height: 1.45;
}

/* Fokusring der Bedienelemente im Panel. Weiss mit Versatz nach AUSSEN - die
   Formel des Duktus. Der Versatz ist tragend und nicht Kosmetik: der
   Schliessen-Knopf ist selbst eine helle transluzente Flaeche, ein Ring
   darin verschwaende; ausserhalb liegt er auf dem dunklen Glas. Beim CTA
   ebenso, dort gegen die Mint-Flaeche. */
#fpOverlay .fp-overlay-zu:focus-visible,
#fpOverlay .fp-detail-cta a:focus-visible,
#fpOverlay .fp-produkt-wert a:focus-visible {
    outline: 0.125em solid #FFFFFF;
    outline-offset: 0.125em;
}

/* --- Detailblatt im Hochkontrast-Hell ---------------------------------- */
/* Der Bestands-Umschalter setzt die Klasse an #vergleich. Das Overlay steht
   body-level ausserhalb davon und wuerde NIE erreicht. Ab F5 setzt der Core
   die Klasse deshalb ZUSAETZLICH an den Overlay-Container selbst, und diese
   Regeln haengen an dieser zweiten Fundstelle. Nicht an #vergleich, und nicht
   an :has() ueber eine Elternkette - das machte den Zustand von der
   Reihenfolge des Umschaltens abhaengig und braeuchte fuer eine reine
   Farbfrage einen Selektor, der die ganze Seite neu bewertet.
   Alle Selektoren fuehren .fp-overlay MIT: damit erreichen sie (1,2,x) und
   schlagen den Normalsatz (1,1,x) ueber die SPEZIFITAET statt ueber die
   Reihenfolge im Stylesheet - dieselbe Absicht wie bei
   #vergleich.kontrast-hell .fp-buehne[data-fp-ring="1"].
   Die Werte sind die des Festgeld-Hell-Satzes (.zg-karte in kontrast-hell):
   mattes #F7F9FC statt Reinweiss, Glas faellt weg, Kante wird kraeftig. */
#fpOverlay.fp-overlay.kontrast-hell[data-fp-offen="1"] {
    background: rgba(0, 26, 48, 0.35);
}

#fpOverlay.fp-overlay.kontrast-hell .fp-overlay-panel {
    background: #F7F9FC;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-left-color: #00528D;
    color: #22303c;
}

#fpOverlay.fp-overlay.kontrast-hell .fp-overlay-titel,
#fpOverlay.fp-overlay.kontrast-hell .fp-detail-titel {
    color: #0b2740;
}

#fpOverlay.fp-overlay.kontrast-hell .fp-overlay-text,
#fpOverlay.fp-overlay.kontrast-hell .fp-detail,
#fpOverlay.fp-overlay.kontrast-hell .fp-belege,
#fpOverlay.fp-overlay.kontrast-hell .fp-beleg-kriterium {
    color: #22303c;
}

/* Nebenzeilen eine Stufe heller als der Fliesstext. Die Aufschluesselung
   steht nicht dabei: sie erbt ihn aus der Meta-Zeile. */
#fpOverlay.fp-overlay.kontrast-hell .fp-detail-preis {
    color: #52514e;
}

/* #5F6E7E statt des Festgeld-Werts #6b7a8a: der lag auf #F7F9FC bei 14-15 px
   regular gemessen bei 4,17:1, unter der AA-Schwelle fuer Fliesstext (VRT
   CT-0347, B2). #5F6E7E rechnet 4,96:1 und bleibt eine Stufe heller als der
   Fliesstext #22303c - die Absicht der Nebenzeile ist unveraendert. */
#fpOverlay.fp-overlay.kontrast-hell .fp-detail-meta,
#fpOverlay.fp-overlay.kontrast-hell .fp-beleg-zustand,
#fpOverlay.fp-overlay.kontrast-hell .fp-beleg-text,
#fpOverlay.fp-overlay.kontrast-hell .fp-produkt-label {
    color: #5F6E7E;
}

#fpOverlay.fp-overlay.kontrast-hell .fp-produkt-leer {
    color: #8a97a3;
}

/* Kanten bekommen mehr Kraft, weil hell auf hell nichts abgrenzt. */
#fpOverlay.fp-overlay.kontrast-hell .fp-detail-kopf,
#fpOverlay.fp-overlay.kontrast-hell .fp-beleg-text,
#fpOverlay.fp-overlay.kontrast-hell .fp-produkt-zeile {
    border-color: #dbe6f0;
}

/* Gruppen- und Bausteintitel im Hell-Satz: Titelton der Ueberschriften und
   die kraeftigere Titellinie des Kreditkarten-Hell-Satzes (#b7c6d4). */
#fpOverlay.fp-overlay.kontrast-hell .fp-produkt-titel,
#fpOverlay.fp-overlay.kontrast-hell .fp-beleg-titel {
    color: #0b2740;
    border-bottom-color: #b7c6d4;
}

#fpOverlay.fp-overlay.kontrast-hell .fp-produkt-wert a,
#fpOverlay.fp-overlay.kontrast-hell .fp-produkt-wert a:link,
#fpOverlay.fp-overlay.kontrast-hell .fp-produkt-wert a:visited {
    color: #0070C0;
}

/* Das Erfahrungsberichte-Icon nimmt im Hell-Satz den Linkton - Mint auf
   #F7F9FC laege bei 1,18:1 (dieselbe Rechnung wie beim Geschenk-Zeichen). */
#fpOverlay.fp-overlay.kontrast-hell .fp-produkt-wert i.icon {
    color: #0070C0;
}

/* Das Geschenk-Zeichen ist eine SVG-Datei mit fest eingebautem fill #A9F6DB -
   auf dem Glas des Normalsatzes richtig, auf #F7F9FC gemessen 1,18:1 und
   damit unsichtbar. Die Datei liegt im gemeinsamen Webroot und wird von drei
   Ansichten geladen; sie darf nicht umgefaerbt werden. filter faerbt statt
   dessen die AUSGABE: brightness dunkelt ab, saturate holt den Farbton
   zurueck, den das Abdunkeln nimmt. Der erreichte Wert steht im Bericht
   memory/berichte/fp-panel-builder.md - hier absichtlich nicht wiederholt,
   damit zwei Fassungen derselben Zahl nicht auseinanderlaufen. Auflage: >= 3:1
   gegen den Panelgrund. */
#fpOverlay.fp-overlay.kontrast-hell .fp-produkt-wert img[src$="cardgift-m.svg"] {
    filter: brightness(0.55) saturate(1.6);
}

/* Baustein-Probe im Hell-Satz: die drei Hell-Werte der Buehnen-Tokens
   (#vergleich.kontrast-hell: --fp-z-leer #E4EAF0, --fp-z-n #4A5D70,
   --fp-z-g #0B6E51). Nur die Farben - Masse stehen im Normalsatz. */
#fpOverlay.fp-overlay.kontrast-hell .fp-beleg-probe-grund { fill: #E4EAF0; stroke: #4A5D70; }
#fpOverlay.fp-overlay.kontrast-hell .fp-beleg-probe-fuell { fill: #0B6E51; stroke: #4A5D70; }

/* Reiter im Hell-Satz - Werte 1:1 aus dem Ratenkredit-Panel. */
#fpOverlay.fp-overlay.kontrast-hell .fp-reiterleiste { border-bottom-color: rgba(0, 82, 141, 0.30); }
#fpOverlay.fp-overlay.kontrast-hell .fp-reiter { color: #3C4F5E; }   /* 8,50:1 */
#fpOverlay.fp-overlay.kontrast-hell .fp-reiter:hover { color: #00528D; }
#fpOverlay.fp-overlay.kontrast-hell .fp-reiter.active,
#fpOverlay.fp-overlay.kontrast-hell .fp-reiter[aria-selected="true"] {
    color: #00528D;                 /* 8,10:1 */
    background: rgba(0, 82, 141, 0.08);
    border-bottom-color: #00528D;
}
#fpOverlay.fp-overlay.kontrast-hell .fp-reiter:focus-visible { outline-color: #0070C0; }  /* 5,15:1 */
#fpOverlay.fp-overlay.kontrast-hell .fp-z-n,
#fpOverlay.fp-overlay.kontrast-hell .fp-z-x { border-left-color: #4A5D70; }

/* Gleiche Absicherung wie im Normalsatz: der Hell-Satz faerbt .fp-overlay-text
   in derselben Spezifitaetsklasse (1,3,0) ein, die Paarung (1,4,0) entscheidet
   es hier ohne Rueckgriff auf die Reihenfolge. */
#fpOverlay.fp-overlay.kontrast-hell .fp-fehler,
#fpOverlay.fp-overlay.kontrast-hell .fp-overlay-text.fp-fehler {
    background: #F7F9FC;
    border-left-color: #6B4A00;
    color: #3A2800;
}

#fpOverlay.fp-overlay.kontrast-hell .fp-overlay-zu {
    background: rgba(0, 82, 141, 0.12);
    color: #003A66;
}

#fpOverlay.fp-overlay.kontrast-hell .fp-overlay-zu:hover {
    background: rgba(0, 82, 141, 0.22);
}

#fpOverlay.fp-overlay.kontrast-hell .fp-detail-cta a {
    background: #0070C0;
    color: #FFFFFF;
}

#fpOverlay.fp-overlay.kontrast-hell .fp-detail-cta a:hover {
    background: #00528D;
}

#fpOverlay.fp-overlay.kontrast-hell .fp-overlay-zu:focus-visible,
#fpOverlay.fp-overlay.kontrast-hell .fp-detail-cta a:focus-visible,
#fpOverlay.fp-overlay.kontrast-hell .fp-produkt-wert a:focus-visible {
    outline-color: #00528D;
}

/* --- Tooltip der Ringsegmente (F9) ------------------------------------- */
/* Der Kasten haengt an document.body, also AUSSERHALB von #vergleich und
   ausserhalb von #fpOverlay. Beide Kontrastsaetze erreichen ihn nicht - das
   ist derselbe Befund, den die Overlay-Insel seit F3 fuehrt. Er traegt
   deshalb feste Farben, und zwar EINEN Satz fuer beide Modi: dunkler Grund,
   weisse Schrift. Auf dem hellen Buehnengrund des Kontrast-Hell traegt das
   ebenso wie auf dem blauen des Normalsatzes.
   position: fixed und der Sitz an body gehoeren zusammen: ein Vorfahre mit
   transform oder overflow braeche den Viewport-Bezug bzw. schnitte den Kasten
   ab, und die Ringreihe ist beides potenziell.

   VERSTECKT WIRD UEBER hidden, NIE UEBER opacity. Ein Element mit opacity:0
   nimmt weiter Treffer an - im Projekt viermal aufgetreten, Screenshots
   finden es nie, document.elementFromPoint immer. Dazu pointer-events:none:
   der Kasten steht dem Zeiger im Weg, dem er folgt, und liesse ihn sonst
   zwischen Segment und Tooltip flackern.
   KEINE transition, aus demselben Grund - eine Ein- oder Ausblendung braeuchte
   genau den opacity-Zwischenzustand, den diese Datei nicht kennt.
   Der transparente Rahmen ist die Vorsorge fuer den erzwungenen Hochkontrast:
   dort wird der Element-Grund zu Canvas, also derselbe Ton wie die Seite, und
   ohne Kante staende der Text frei im Bild. */
.fp-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    max-width: 18rem;
    padding: 0.4rem 0.6rem;
    background: #1B2733;
    color: #FFFFFF;
    border: 0.0625rem solid transparent;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    pointer-events: none;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
}

/* Ausdruecklich, nicht auf das Browser-Standardblatt vertrauend: hidden ist
   dort display:none, aber jede eigene display-Angabe an .fp-tip wuerde es
   ueberstimmen. Die Regel haelt die Zusage unabhaengig davon. */
.fp-tip[hidden] {
    display: none;
}

/* Zwei Zeilen, zwei Rollen: oben WOFUER der Baustein steht (Baustein und
   Kriterium), unten WIE dieses Konto dort abschneidet. Die zweite Zeile ist
   gedaempft, weil sie die Angabe des Rings wiederholt, die daneben zu sehen
   ist - sie ordnet ein, sie ist nicht die Auskunft. */
.fp-tip-krit {
    display: block;
    font-weight: 600;
}

.fp-tip-zustand {
    display: block;
    opacity: 0.85;
}

/* --- Umbruch ---------------------------------------------------------- */
/* GENAU EIN Breakpoint im ganzen Projekt: (max-width: 48em) und sein
   Gegenstueck (min-width: 48.0625em). 375/414/640/1280/1600 sind
   Test-Viewports, keine Breakpoints.
   Bis F5 war das eine Absichtserklaerung - das Gegenstueck stand gar nicht
   in der Datei. Seit F6 steht es (weiter unten, fuer die Ringreihe), und
   damit stimmt dieser Satz. Die dritte Media-Regel der Datei prueft
   prefers-reduced-motion und ist keine Breiten-Regel; das Breakpoint-Audit
   des Plans meint Breiten, nicht Merkmalsabfragen. */
/* --- Detailblatt: Zweispalter wird Einspalter (Satz Kreditkarte) ---------- */
/* 34em wie .fieber-panel-zeile der Kreditkarte: darueber ist das Blatt breit
   genug fuer Beschriftung 7-11em neben dem Wert; darunter (375 px Blattbreite,
   Labels wie "Benachrichtigungen bei Kontobewegungen per Push-Nachricht/
   E-Mail/SMS") stuenden zwei schmale Saeulen mit je vier bis sechs Zeilen.
   Untereinander liest sich dieselbe Angabe als Beschriftung und Wert. Die
   Beschriftung tritt zurueck (0.78rem, echter Grauton statt opacity), weil
   ohne trennende Spaltenkante Label und Wert sonst gleich laut wirken. Die
   Ausrichtung bleibt: der Wert ist seit E12 in beiden Breiten linksbuendig. */
@media (max-width: 34em) {
    #fpOverlay .fp-produkt-zeile {
        grid-template-columns: 1fr;
        gap: 0.1em 0;
        padding: 0.45em 0;
    }
    #fpOverlay .fp-produkt-label {
        font-size: 0.78rem;
        color: #d6e4f0;
    }
}

@media (max-width: 48em) {
    #vergleich .fp-ring-feld {
        flex: 1 1 100%;
        max-width: 17.5rem;
    }

    /* --- F9: das Detailblatt unterhalb des Umbruchs -------------------- */
    /* DER RANDSTREIFEN IST FORT, und das ist kein verlorener Schliessweg.
       Bis ?v=10 stand hier eine Polsterung von 1.5rem am Overlay: das Blatt
       lag mittig, und der Streifen zwischen Fensterkante und Blatt war der
       einzige Ort, an dem elementFromPoint div#fpOverlay lieferte - er
       musste die 24-px-Mindestgroesse fuer Zeigerziele erreichen (WCAG 2.2
       SC 2.5.8). Seit F9 faehrt das Panel von rechts ein und nimmt bei
       375 px die volle Breite; ein Streifen daneben gaebe es gar nicht mehr
       zu polstern. Die Polsterung wuerde stattdessen das Panel von der
       Fensterkante wegschieben und eine 24-px-Fuge hinter ihm offen lassen -
       Kante und Schlagschatten stuenden dann im Bild statt am Rand.
       Der Schliessweg unterhalb des Umbruchs ist deshalb ein anderer und
       vollstaendig vorhanden: der Schliessen-Knopf im festen Kopf (44 px, s.
       Regel darunter) und die Escape-Taste. Oberhalb des Umbruchs kommt der
       Scrim links des Panels hinzu, der dort die ganze uebrige Flaeche ist.

       DER SCHLIESSEN-KNOPF WAECHST AUF 44 px. Die 2.4rem des Duktus sind eine
       Zeigergroesse; unterhalb des Umbruchs wird mit dem Finger bedient, und
       das Haus fuehrt dafuer 2.75rem (so auch .zg-sheet-close im Festgeld).
       Die Lage bleibt: top und right sind Abstaende, keine Groessen. */
    /* Reiterleiste enger (Politur 12.09.2026, Werte wie das Ratenkredit-Panel). */
    #fpOverlay .fp-reiterleiste { gap: 0.15rem; }
    #fpOverlay .fp-reiter { padding: 0.4rem 0.55rem; font-size: 0.78rem; }

    #fpOverlay .fp-overlay-zu {
        width: 2.75rem;
        height: 2.75rem;
    }

    /* Die Produktzeile bricht erst unterhalb von 34em in eine Spalte - eigener
       Block VOR dieser Regel (Satz Kreditkarte, 12.09.2026). */

    /* --- F6: Uhr-Kopfzeile ------------------------------------------- */
    /* Die Marktspalte faellt weg - der vorbereitete Haken aus F4 (Kopf UND
       Zelle tragen dieselbe Klasse, deshalb genuegt eine Regel; der
       Tabellenbau bleibt unberuehrt). Gemessen bringt der Wegfall ALLEIN
       aber weniger als erwartet: bei table-layout:fixed verteilt der Browser
       die frei werdenden 22 Prozent proportional auf ALLE verbleibenden
       Spalten, und die breiteste - "Baustein" - nimmt den groessten Anteil.
       Ohne die Breitenkorrektur unten waechst Baustein um 27,81 px und jede
       Kontospalte nur um 16,50 px; der laengste Bankname faellt dann von 12
       auf 8 Zeilen statt auf die erhofften 5 bis 6.
       Deshalb werden die Breiten hier ausdruecklich neu gesetzt, statt sie
       dem Browser zu ueberlassen: 22 + 3 x 26 = 100 Prozent. */
    #vergleich .fp-uhr-markt {
        display: none;
    }

    #vergleich .fp-uhr-name { width: 22%; }
    #vergleich .fp-uhr-konto { width: 26%; }

    /* Der volle Anbietername MIT Kontomodell bleibt stehen (Anwender-Entscheid
       14.08.2026): mehrere Anbieter fuehren mehr als ein Girokontomodell, ohne
       den Zusatz waeren zwei Spalten desselben Hauses nicht unterscheidbar.
       Die Kopfzeile wird deshalb ueber die Schriftgroesse entlastet, nicht
       ueber den Text. Nur thead - der Tabellenrumpf behaelt seine Groesse.
       CT-0363: mit der Tabelle eine Stufe hoch, 0.75rem -> 0.8125rem, also
       gemessen 13 px. Der Rumpf steht daneben bei 14 px in der Zeilen-
       kopfzelle (dem Schalter, font-size: inherit) und bei 12,6 px in den
       Datenzellen - die 0.9em kommen aus der Bestands-Tabellenregel und
       waren hier nie gesetzt. Der Kopf bleibt damit die kleinste Schrift der
       Tabelle, so wie vorher. */
    #vergleich .fp-uhr thead th {
        font-size: 0.8125rem;
    }

    /* --- F7: Uhr-Rumpfzellen, die Angabe bekommt ihre eigene Zeile ----- */
    /* VRT-Befund V-1, am Live-Stand nachgemessen (15.08.2026, vier Profile x
       elf Breiten). Die Rumpfzelle traegt zwei Spans: die Punktgruppe und die
       Angabe "x von 3". Ob beide in eine Zeile passen oder umbrechen,
       entscheidet allein die Spaltenbreite - und im Band 365 bis 410 px faellt
       diese Entscheidung je Zelle VERSCHIEDEN aus. Bei 390 px (der Breite
       aktueller iPhones) stehen 8 bis 10 der 21 Angaben einzeilig neben den
       Punkten und die uebrigen darunter; die Zahlen fluchten dann in 2 bis 5
       Zeilen nicht mehr waagerecht, in allen vier geprueften Profilen. Bei
       320/360 brechen alle 21 um, ab 414 bleiben alle einzeilig - dort
       fluchtet es von selbst. Geheilt wird der Zwischenbereich, indem der
       Umbruch nicht mehr dem verfuegbaren Platz ueberlassen, sondern gesetzt
       wird: unter 48em steht die Angabe IMMER unter den Punkten.
       Bewusst KEIN eigener Breakpoint fuer das Band 365-410 px: Das Projekt
       fuehrt genau drei Media-Bedingungen (F47, bewacht von Gate F6-H1). Eine
       vierte waere teurer als die zusaetzliche Zeilenhoehe, die diese Regel
       im bereits fluchtenden Band 414-767 px kostet.
       Die Ausrichtung kommt aus der Zelle und traegt weiter: die Uhr-Zellen
       sind linksbuendig (text-align: left, CSS:449), beide Zeilen beginnen
       also auf derselben Senkrechten statt gestuft zu stehen.
       white-space: nowrap an der Angabe bleibt unberuehrt - es verhindert den
       Umbruch INNERHALB von "x von 3", nicht den davor.
       KOSTET KEINE HOEHE, gemessen im visuellen Test ueber 56 Kombinationen:
       Die Zeilenhoehe bestimmt der Umschalt-Knopf im Zeilenkopf (44 px
       Trefferflaeche + 1 px Rahmen = 45 px). Der Zellinhalt waechst von 16,00
       auf 30,05 px und bleibt damit 13,95 px unter dieser Hoehe - die zweite
       Zeile waechst in vorhandenen Leerraum. tbody-Hoehe, Tabellenhoehe und
       scrollHeight sind vorher wie nachher auf 0,00 px identisch. */
    #vergleich .fp-uhr-zahl {
        display: block;
    }

    /* --- F6: Profil-Pills --------------------------------------------- */
    /* Gemessen 40,00 px hoch ueber das ganze Band 320 bis 608 px, gegen die
       44-px-Zusage aus dem Plan und aus F30. Die Ursache liegt in der
       geteilten vergleich.min.css (@media max-width: 38em), die hier out of
       scope ist - deshalb wird sie nicht geaendert, sondern im
       Fingerabdruck-Kontext ueberschrieben (Anwender-Entscheid 14.08.2026,
       Divergenz zur Liste/Tabelle bewusst in Kauf genommen).
       min-height statt height: zwischen 609 und 768 px stehen die Pills
       bereits auf 48,11 px, ein fester Wert wuerde sie dort VERKLEINERN.
       Selektorkette wie beim Hell-Satz weiter oben, damit beide Regeln
       dieselbe Durchsetzungskraft gegen die Bestandsregel haben. */
    #vergleich .fp-dashboard .fp-profilnav .laufzeit-pill {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    /* Fuer das Rastergitter steht hier bewusst NICHTS mehr (VRT-Befund W-3,
       13.08.2026). Vorher erzwang eine Regel `repeat(2, 1fr)` zwei Spalten
       unterhalb des Umbruchs. Bei 375 px war das richtig, nach oben hin lief
       die Kachel aber leer: der Ring fuellte bei 640 px nur 46 Prozent der
       Kachel und bei 767 px 38 Prozent, weil das Ringfeld bei 8.25em
       (132 px) gedeckelt ist. Der Leerraum, den F2 neben dem grossen Ring
       hatte, war damit nicht gefuellt, sondern in jede Kachel verschoben.
       Die `auto-fill`-Regel von oben (minmax(9.5rem, 1fr)) leistet beides
       ohne Sonderfall: gemessen 2 Spalten bei 375 und 414, 3 bei 640, 4 bei
       767, 5 ab 1280. Eine Zwischenstufe mit kleinerer Mindestbreite wurde
       verworfen - 7.5rem ergab bei 414 px drei Spalten zu 121,9 px, die
       Nabenzahl faellt dort von 12,10 auf 9,5 px (22/240 der Ringfeldbreite).
       9.5rem haelt sie ueber ALLE Breiten bei 12,10 px, weil das Ringfeld
       dann stets seinen Deckel erreicht. */
}

/* --- F6: das Gegenstueck ---------------------------------------------- */
/* Der Nabenzahl-Einbruch zwischen 769 und 940 px, gemessen ueber 20 Breiten
   und einen Feinsweep in 2-px-Schritten: das Minimum liegt bei 769 px mit
   20,79 px gerendert, nicht - wie zwei aeltere Notizen sagen - bei 780 oder
   800 px. 780 px ist bereits ein Punkt auf der wieder steigenden Rampe.
   Der Mechanismus ist eine Kante, kein Verlauf: bei 768 px traegt jedes
   Ringfeld volle 280 px (Deckel 17.5rem, eines pro Zeile), bei 769 px teilen
   sich DREI Felder dieselbe Reihe und jedes faellt auf 226,84 px. Die
   Nabenzahl skaliert mit der Feldbreite, also faellt sie um 19,0 Prozent -
   und zwar genau an der Stelle, an der der Bildschirm GROESSER wird.
   Die Heilung braucht keinen dritten Breakpoint (der wuerde das
   Breakpoint-Audit des Plans brechen): .fp-ringreihe traegt bereits
   flex-wrap: wrap, nur das min-width: 0 der Felder verhindert den Umbruch.
   Eine Mindestbreite laesst die Reihe von selbst umbrechen, sobald drei
   Felder nicht mehr nebeneinander passen - 2 + 1 statt 3 gequetschte.
   Bewusst NUR oberhalb des Breakpoints: unterhalb steht ohnehin ein Feld
   pro Zeile, und bei 320 px waere eine Mindestbreite von 280 px breiter als
   die Buehne. */
@media (min-width: 48.0625em) {
    #vergleich .fp-ring-feld {
        min-width: 17.5rem;
    }
}

/* --- F6: Bewegung ----------------------------------------------------- */
/* Der Fingerabdruck bringt selbst KEINE Bewegung mit - 152 Regeln, davon
   null mit transition, animation oder will-change, und keine @keyframes.
   Gemessen wurde trotzdem Bewegung an seinen Elementen: die Profil-Pills
   erben transition: all 0.15s aus der geteilten vergleich.min.css, die
   Sprungmarke und die Fusszeilen-Links eine Farbtransition aus style.css,
   und der CTA im Detailblatt eine fadeIn-Animation. Beide Bestandsdateien
   kennen prefers-reduced-motion zwar, aber keine ihrer Regeln trifft ein
   fp-Element - unter "reduce" waren die Wertemengen deshalb identisch zu
   "no-preference".
   Diese Regel setzt das Versprechen des Plans ("unter prefers-reduced-motion
   jede Dauer 0s") fuer den Fingerabdruck-Bereich durch, ohne den geteilten
   Bestand anzufassen. Sie muss !important tragen: die Bestandsregeln stehen
   in einer spaeter geladenen Datei bzw. mit eigener Spezifitaet, und ein
   Nutzer, der Bewegung abbestellt hat, darf nicht von der Ladereihenfolge
   abhaengen. 0s statt der sonst ueblichen 0.01ms, weil das Abnahmekriterium
   woertlich 0s nennt und hier kein Code an einem transitionend-Ereignis
   haengt - im ganzen Modul gibt es keinen solchen Zuhoerer.
   scroll-behavior kommt mit: ein erzwungenes Sanftscrollen ist fuer
   vestibulaer empfindliche Nutzer dasselbe Problem wie eine Animation. */
@media (prefers-reduced-motion: reduce) {
    #vergleich,
    #vergleich *,
    #vergleich *::before,
    #vergleich *::after,
    #fpOverlay,
    #fpOverlay *,
    #fpOverlay *::before,
    #fpOverlay *::after {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}