/* ===================================================================
   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, seit U4a ohne CSS-Anteil) -------------------- */
/* HIER STAND DIE EINE REGEL `#vergleich .fp-ring [data-aus="1"] {
   pointer-events: none }` - der gesamte CSS-Anteil des Ergrauungspfads.
   U4a (13.09.2026) nimmt sie zurueck, und zwar ersatzlos:

   Solange die Sektor-Uhr jeden Baustein als bedienbare Zeile fuehrte, war
   ein unbedienbarer grauer Bogen folgenlos - der Weg zurueck lief ueber die
   Uhr (F40). Die Uhr gibt es nicht mehr. Mit ihr waere der Ring die
   Sackgasse: ein hervorgehobener Bereich, sechs graue Boegen, und kein Klick
   auf dem Ring, der weiterfuehrt. Ein ergrautes Segment FUEGT seinen Bereich
   jetzt hinzu.

   WAS AN DIE STELLE TRITT, ist keine zweite CSS-Regel, sondern die
   Tooltip-Sperre in tipZeigen(): ein grauer Bogen traegt keine
   Zustandsbedeutung mehr (g und b fallen dort auf ausVoll zusammen, n und x
   auf ausLeer, F46), ein Kasten mit "bedingt erfuellt" daneben widerspraeche
   dem Bild. aria-hidden bleibt unveraendert.

   Der Rest des Ergrauungspfads ist unberuehrt: graue Fuellung als Attribut,
   aria-hidden und das entfernte <title> schreibt weiterhin setzeBogenAus()
   im Ring-JS - EINE Funktion, EIN Durchgang, EINE Marke (F38-1).

   HIER STEHT WEITERHIN BEWUSST KEINE REGEL AUF fill. Die Fuellung ist ein
   Praesentationsattribut; eine CSS-Regel darauf wuerde den ganzen
   Ergrauungspfad ueberstimmen. Die F2-Null bleibt null. */

/* 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". */
/* U4 (13.09.2026): Hier stand die Kontur des BAUSTEIN-FOKUS
   ([data-fokus="1"]). Sie ist ersatzlos entfallen, weil es den Fokus als
   eigenen Zustand nicht mehr gibt: hervorgehoben ist seither genau das, was
   NICHT ergraut ist - eine Aussage, die der Ergrauungspfad schon traegt.
   Eine zweite Auszeichnung derselben Aussage haette sich mit ihm ueberlagert
   (der hervorgehobene Bogen ist nie ergraut, trug also Kontur UND volle
   Farbe, waehrend ein zweiter hervorgehobener nur die Farbe hatte). */

#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 Ergrau-Eintrag "nicht hervorgehoben" (F44, Wortlaut nach U4) erscheint
   nur, wenn ueberhaupt ein Bereich hervorgehoben 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 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-bereich="1"]) .fp-legende-punkt[data-nur-bereich="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;
}

/* --- Bereichsleiste (U4, 13.09.2026) ---------------------------------- */
/* Nachfolgerin der Schwerpunkt-Chips UND der Sektor-Uhr. Beide Abschnitte
   standen hier und sind ersatzlos entfallen; was von ihnen bleibt, ist die
   Optik der Chips - Groesse, Kante, Gedrueckt- und Gesperrt-Zustand sind
   woertlich uebernommen, weil sie gemessen und abgenommen sind.

   EIN UNTERSCHIED IST BAULICH UND ZWINGT ZU EINER ANDEREN FOKUSKONTUR: Die
   Chipzeile stand in der .results-container AUF DER BLAUEN CHROME, die
   Bereichsleiste steht IN DER BUEHNE auf deren heller Flaeche
   (var(--fp-buehne)). Der zweifarbige Ring der Chips (weisse Aussenkontur
   plus blauer Innenring, VRT-Befund W2) war die Antwort auf genau diesen
   blauen Grund - weiss traegt dort 5,37:1. Auf der hellen Buehne traegt
   weiss gar nichts mehr (rund 1,15:1 gegen #dcebf8). Deshalb hier EINE
   Kontur in #0B5FA5: 5,47:1 gegen die Buehnenflaeche, 6,57:1 gegen den
   weissen Schalter - beide ueber den 3:1 aus WCAG 2.2 (1.4.11/2.4.11),
   gemessen statt gerechnet. */
#vergleich .fp-bereich-leiste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.875rem 0 0;
}

/* 2.75rem = 44 px Trefferflaeche, auch bei 375 px. */
#vergleich .fp-bereich-schalter {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    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;
}

/* Das Piktogramm ist dasselbe Zeichen, das der Ring im Bogen traegt (F42) -
   ein <use> auf dieselbe Definition, keine zweite Zeichnung. currentColor:
   es folgt der Schrift des Schalters durch alle vier Zustaende, statt eine
   eigene Farbe zu fuehren, die im gesperrten Zustand danebenlaege. */
#vergleich .fp-bereich-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    fill: currentColor;
}

/* Gesetzt: kraeftigere Kante statt breiterer - eine breitere zoege den
   Schalter um ihre eigene Staerke zusammen und liesse die Zeile bei jedem
   Klick zucken. Dieselbe Loesung wie bei der Rasterkachel. */
#vergleich .fp-bereich-schalter[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 Schalter 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. */
#vergleich .fp-bereich-schalter[aria-disabled="true"] {
    color: #5A6E82;
    border-style: dashed;
    cursor: default;
}

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

/* GEDRUECKT UND FOKUSSIERT ZUGLEICH. Anders als bei den Chips braucht es
   hier KEINE Nachfuehrung der Gedrueckt-Kante: die Fokusregel bringt kein
   box-shadow mehr mit, kann das inset der Gedrueckt-Regel also nicht
   ueberschreiben. Die Regel bei den Chips war genau dagegen gebaut; mit der
   einfarbigen Kontur entfaellt ihr Anlass. */

/* GEDRUECKT IM KONTRASTMODUS (CT-0430/P2). Gemessen am Live-Stand unter
   forced-colors: active unterschieden sich gedrueckter und offener Schalter
   allein in der Rahmenfarbe (rgb(55,0,110) gegen rgb(0,0,0)) - Fuellung,
   Rahmenstaerke, box-shadow und beide Pseudo-Inhalte waren gleich. Das
   System ersetzt eben Farben, es fuegt keine hinzu: die Gedrueckt-Kante
   #0B5FA5 und der weisse Grund werden zu Systemfarben, das inset-shadow
   faellt ersatzlos weg. Erkennbar blieb der gewaehlte Bereich nur noch am
   Panel weiter unten.

   Die Ersatzmarkierung traegt deshalb die RAHMENSTAERKE, nicht eine Farbe -
   sie ueberlebt jedes Systemschema. Das Padding gibt exakt zurueck, was die
   Kante zulegt (0.0625rem -> 0.1875rem je Seite), damit der Schalter seine
   Aussenmasse behaelt und die Leiste beim Klicken nicht umbricht; dieselbe
   Ueberlegung wie bei der farbigen Kante, nur mit anderem Mittel.
   Highlight ist die Systemfarbe fuer "ausgewaehlt" und damit die Farbe, die
   der Nutzer in seinem Schema fuer genau diese Aussage gewaehlt hat.

   outline bleibt frei: dort sitzt der Fokusring, und ein Element hat nur
   eine outline. Gedrueckt und fokussiert sind dadurch gleichzeitig
   ablesbar. */
@media (forced-colors: active) {
    #vergleich .fp-bereich-schalter[aria-pressed="true"] {
        border-width: 0.1875rem;
        border-color: Highlight;
        padding: 0.375rem 0.75rem;
    }
}

/* BEREICHSLEISTE AUF DEM TELEFON (CT-0430/P3). Bei 375 px stand die Leiste
   auf vier Zeilen und 200 px Hoehe (Verteilung 2/2/2/1) - rund ein Fuenftel
   des Viewports fuer eine Bedienleiste, und die ungleichen Zeilen wirken
   unruhig. Gemessen: 316 px Zeilenbreite gegen 975,3 px Schaltersumme.

   BREITE DES BANDES, gemessen statt gewaehlt (VRT-Befund B1, 22.09.2026):
   Der erste Entwurf endete bei 34em = 544 px - und dort wurde die Leiste beim
   VERBREITERN hoeher: 544 px zeigte zwei kompakte Zeilen (96 px), 545 px drei
   volle (148 px), erst ab 583 px wieder zwei. Eine Leiste, die waechst, weil
   das Fenster waechst, ist ein Fehler, kein Kompromiss. Die volle Leiste
   braucht ab 583 px nur noch zwei Zeilen, deshalb endet das Band bei
   36.5em = 584 px: dort loest die kompakte Lage die volle Lage bei GLEICHER
   Hoehe ab. 1-px-Sweep 360-900 px als Beleg.

   Gekuerzt wird am Chrom, nicht an der Trefferflaeche: schmaleres Padding,
   engerer Abstand zum Piktogramm, ein Achtel kleinere Schrift. Die
   Mindesthoehe von 2.75rem = 44 px bleibt unberuehrt, die Schalter bleiben
   also in voller Groesse treffbar. Gemessen danach: Schaltersumme 849,4 px,
   drei Zeilen (3/2/2), Leistenhoehe 148,0 px, schmalster Schalter 67,4 px. */
@media (max-width: 36.5em) {
    #vergleich .fp-bereich-leiste {
        gap: 0.5rem 0.375rem;
    }

    #vergleich .fp-bereich-schalter {
        gap: 0.3125rem;
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
    }

    #vergleich .fp-bereich-icon {
        width: 1rem;
        height: 1rem;
    }

}

/* Die Kontrastmodus-Kante von oben rechnet ihr Padding in der schmalen Lage
   neu: die Aussenmasse muessen auch dort gleich bleiben. Eine eigene Regel
   statt einer verschachtelten Bedingung - die Datei fuehrt keine
   verschachtelten @media, und eine kombinierte Bedingung ist eindeutiger. */
@media (max-width: 36.5em) and (forced-colors: active) {
    #vergleich .fp-bereich-schalter[aria-pressed="true"] {
        padding: 0.375rem 0.5rem;
    }
}

/* --- Bereichs-Panel (U5, 13.09.2026) ---------------------------------- */
/* Je hervorgehobenem Bereich ein Block mit einer echten Tabelle: Zeilen =
   die drei Kriterien, Spalten = die gewaehlten Konten in Buehnenreihenfolge.
   Der Anker steht leer im Core - ohne JS gibt es keine Hervorhebung, und die
   Auskunft traegt dann die Fallback-Tabelle. */
#vergleich .fp-bereiche-anker {
    margin: 1.25rem 0 0;
}

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

#vergleich .fp-bereich-block {
    margin: 1.25rem 0 0;
}

#vergleich .fp-bereich-block:first-child {
    margin-top: 0;
}

#vergleich .fp-bereich-titel {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    line-height: 1.3;
}

/* EIGENER SCROLLCONTAINER JE TABELLE, nicht am Dokument: eine Tabelle, die
   breiter ist als der Platz, scrollt in sich - die Seite bekommt dadurch
   keinen waagerechten Ueberlauf. Unterhalb von 48em stapeln die Spalten
   ohnehin (Regel weiter unten), der Container greift dort nicht mehr. */
#vergleich .fp-bereich-tabwrap {
    overflow-x: auto;
}

/* EIGENE WEISSE FLAECHE, wie sie die Sektor-Uhr hatte: das Panel liegt im
   Anker der Sektion, also auf der blauen Chrome - ohne eigene Flaeche stuende
   dunkler Text auf Blau. Werte woertlich von .fp-uhr uebernommen, weil sie
   gemessen und abgenommen sind. KEIN table-layout: fixed: die Uhr brauchte es
   fuer ihre feste Spaltenteilung, hier sollen Kriterienspalte und Kontospalten
   dem Inhalt folgen duerfen - der Container darueber faengt den Ueberlauf. */
#vergleich .fp-bereich-tab {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
    color: #1B2733;
    border: 0.0625rem solid #B7C6D4;
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: left;
}

/* Die einzige px-Angabe dieses Abschnitts, und sie ist die im Projekt
   zugelassene Ausnahme: ein Tabellenrahmen unter 1 px verschwindet auf
   Geraeten ohne Teilpixel ganz. */
#vergleich .fp-bereich-tab th,
#vergleich .fp-bereich-tab td {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid rgba(51, 70, 92, 0.22);
    vertical-align: top;
}

#vergleich .fp-bereich-tab thead th {
    font-weight: 700;
    border-bottom-width: 0.125rem;
}

#vergleich .fp-bereich-krit {
    width: 28%;
    font-weight: 600;
}

/* nowrap (CT-0488, VRT-B2 der Phase AT-3): das Zustandswort bricht nicht um.
   Die Kontospalten folgen dem Inhalt (kein table-layout: fixed, siehe oben),
   und eine Spalte mit kurzer Bedingung wurde so schmal, dass "nicht | erfuellt"
   zweizeilig stand (AT 1280, Profil "ohne", Bereich Karten: 3 von 9). Mit
   nowrap ist die Breite des Zustandsworts die Mindestbreite der Spalte - die
   Verteilung des Rests bleibt automatisch, einen Ueberlauf faengt der
   Scrollcontainer .fp-bereich-tabwrap. Vererbt an .fp-beleg-zustand; unterhalb
   48em stapeln die Zellen in voller Breite, dort passt jedes Wort. */
#vergleich .fp-bereich-zustand {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    white-space: nowrap;
}

#vergleich .fp-bereich-bedingung {
    display: block;
    margin: 0.25rem 0 0;
    color: #33455C;
}

/* Der Fehlerfall des Abrufs: der Satz steht anstelle der Bedingung, die
   Zustaende darueber bleiben stehen. Eine halbe Auskunft ist mehr wert als
   eine leere - deshalb nur eine Kursivierung als Kennzeichnung, keine
   Warnfarbe und kein Wegnehmen der Zelle. */
#vergleich .fp-bereich-zelle[data-fp-fehler="1"] .fp-bereich-bedingung {
    font-style: italic;
}

/* Die Bildunterschrift der Tabelle traegt nur die Vorlesefassung: sichtbar
   steht die Ueberschrift des Blocks darueber, und beides nebeneinander
   naennte denselben Bereich zweimal. Die px-Angaben sind die zweite im
   Projekt zugelassene Ausnahme (sr-only). */
#vergleich .fp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- 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 bis U4 auch die Chipzeile trug
   (die steht auf demselben blauen Grund; die Bereichsleiste, die sie
   abgeloest hat, steht auf der hellen Buehne und kommt deshalb mit EINER
   Kontur aus): 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;
}


/* --- U9 (a): Etikett "Im Vergleich" ------------------------------------ */
/* Das Etikett steht bei JEDER Kachel im Baum und haelt seinen Platz auch
   ungewaehlt (visibility, nicht display): ein display-Wechsel liesse die
   Kachel beim Waehlen um eine Zeile wachsen und das Raster bei jedem Klick
   zucken - derselbe Grund, aus dem die Auswahl eine kraeftigere und keine
   breitere Kante bekommt (Regel oben).
   Gerechnet, nicht geschaetzt: #0B5FA5 auf der gewaehlten Kachelflaeche
   #EAF3FB traegt 5,858:1 (WCAG 2.1, dieselbe Paarung wie beim Info-Knopf).
   Sichtbar ist es NUR bei data-gewaehlt="1"; die Vorlesefassung des
   Zustands bleibt aria-pressed am Marken-Button. */
#vergleich .fp-kachel-etikett {
    display: block;
    visibility: hidden;
    margin: 0.125rem 0 0;
    color: #0B5FA5;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

#vergleich .fp-kachel[data-gewaehlt="1"] .fp-kachel-etikett {
    visibility: visible;
}

/* --- U9 (b): Ruecknahme einer Verdraengung ----------------------------- */
/* DER SATZ STEHT GENAU EINMAL SICHTBAR (Orchestrator-Entscheid 13.09.2026),
   naemlich in der Live-Region. Der Block traegt deshalb nur den Schalter und
   steht unmittelbar NEBEN der Region: gemeinsamer Traeger .fp-ansagezeile.
   Grundzustand ist gestapelt (Schalter unter dem Satz); ab 48em stehen beide
   in einer Zeile. Mobile-first, damit die schmale Lage nicht von einer
   Ausnahme abhaengt.
   Die Region selbst bleibt unangetastet - hier faellt nur ihr unterer Abstand
   weg, den jetzt der Traeger haelt. */
#vergleich .fp-ansagezeile {
    margin: 0 0 0.5rem;
}

#vergleich .fp-ansagezeile .fp-raster-ansage {
    margin: 0 0 0.25rem;
}

#vergleich .fp-rueck {
    margin: 0;
}

@media (min-width: 48.0625em) {
    #vergleich .fp-ansagezeile {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.75rem;
    }

    #vergleich .fp-ansagezeile .fp-raster-ansage {
        margin: 0;
    }
}

/* 2,75rem Mindesthoehe wie der Info-Knopf des Rasters - die Trefferflaeche
   ist hier die sichtbare Flaeche, es gibt keine durchsichtige Aura. */
#vergleich .fp-rueckgaengig {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.375rem 1rem;
    background: #FFFFFF;
    color: #0B5FA5;
    border: 0.0625rem solid #FFFFFF;
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

/* --- U9 (c): Banksuche ------------------------------------------------- */
#vergleich .fp-suche {
    margin: 0 0 0.75rem;
}

#vergleich .fp-suche-label {
    display: block;
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* Seit der Loesch-Schalter im Feld sitzt, traegt die Zeile nur noch EIN
   Kind - die Feldbox. flex bleibt, damit deren flex-basis greift; wrap und
   gap sind ohne zweites Kind ohne Wirkung und darum fort. */
#vergleich .fp-suche-zeile {
    display: flex;
}

/* Der Leeren-Schalter steht IM Feld, nicht daneben - dafuer braucht das
   Feld einen eigenen Bezugsrahmen. Die Breitenangaben, die vorher am Feld
   hingen, tragen jetzt hier; das Feld fuellt die Box. */
#vergleich .fp-suche-feldbox {
    position: relative;
    box-sizing: border-box;
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 24rem;
}

/* font-size: 1rem ist kein Geschmack: unterhalb von 16 px zoomt iOS beim
   Fokus in das Feld hinein und laesst die Seite vergroessert stehen. */
#vergleich .fp-suche-feld {
    box-sizing: border-box;
    width: 100%;
    /* Der Browser gibt input ein eigenes margin (gemessen 4px oben/unten,
       2px links). Ungeloescht zieht es die Feldbox hoeher als das Feld, und
       der Schalter - er misst seine Hoehe an der Box - ragte oben und unten
       ueber die Feldkante hinaus. */
    margin: 0;
    min-width: 0;
    min-height: 2.75rem;
    /* rechts 2.75rem: so viel nimmt der Loesch-Schalter ein, und der
       Eingabetext laeuft nicht unter das Kreuz. */
    padding: 0.375rem 2.75rem 0.375rem 0.625rem;
    background: #FFFFFF;
    color: #1B2733;
    border: 0.0625rem solid #B7C6D4;
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
}

/* Das Kreuz am rechten Feldrand. 2.75rem breit und so hoch wie das Feld -
   die Trefferflaeche bleibt damit 44 x 44 px, wie beim beschrifteten
   Vorgaenger. Ohne eigene Flaeche und ohne Rahmen: es sitzt auf der
   weissen Feldflaeche und waere als zweites Kaestchen im Kaestchen
   unruhig. */
#vergleich .fp-suche-leeren {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 100%;
    min-height: 2.75rem;
    padding: 0;
    background: transparent;
    color: #1B2733;
    border: 0;
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
}

#vergleich .fp-suche-leeren-zeichen {
    display: block;
}

/* Die browser-eigene Loeschtaste des type=search fliegt raus: sie erscheint
   nur in WebKit-Browsern, traegt keinen Namen fuer die Vorlesefassung und
   waere ein zweiter Weg zu dem, was der Leeren-Schalter tut. */
#vergleich .fp-suche-feld::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Dieselbe Zweifarbigkeit wie beim Marken-Button (F6): weiss nach aussen
   gegen den blauen Seitengrund (5,366:1), blau nach innen gegen die weisse
   Flaeche (6,574:1). Ein einfarbiger Ring traegt hier nicht - #0B5FA5 auf
   #006DBC sind 1,225:1. */
#vergleich .fp-rueckgaengig:focus-visible,
#vergleich .fp-suche-feld:focus-visible {
    outline: 0.1875rem solid #FFFFFF;
    outline-offset: 0.125rem;
    box-shadow: 0 0 0 0.125rem #0B5FA5;
}

/* Der Schalter steht auf der weissen Feldflaeche - ein weisser Aussenring
   waere dort unsichtbar. Blau nach innen traegt: #0B5FA5 auf #FFFFFF sind
   6,574:1. */
#vergleich .fp-suche-leeren:focus-visible {
    outline: 0.1875rem solid #0B5FA5;
    outline-offset: -0.1875rem;
    box-shadow: none;
}

/* Der Satz fuer die leere Treffermenge spannt die ganze Rasterbreite -
   als Gitterzelle stuende er sonst in der ersten Spalte. */
#vergleich .fp-raster-keintreffer {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Das hidden-Attribut traegt seine Wirkung allein aus dem Browser-
   Stylesheet und verloere sie an jeder Regel, die hier display setzt.
   Ausdruecklich hingeschrieben statt darauf vertraut. */
#vergleich .fp-kachel[hidden],
#vergleich .fp-rueck[hidden],
#vergleich .fp-suche-leeren[hidden],
#vergleich .fp-raster-keintreffer[hidden] {
    display: none;
}

/* --- 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;
}

/* AT-ANPASSUNG (AT-3, 01.10.2026) - die einzige inhaltliche Abweichung dieser
   Datei vom DE-Endstand. Die AT-style.css fuehrt unterhalb von 48em
   `.vergleichstabelle td, #vergleich td { font-size: 0.7em }`, die DE-Fassung
   nur `.vergleichstabelle td`. Damit traf sie jede Zelle der Bereichs- und der
   Fallback-Tabelle: gemessen 9,8 statt 12,6 px bei 375 (Gate AT-F12-F2).
   Die Regel stellt den Grundwert `td { font-size: 0.9em }` beider Bestands-CSS
   wieder her - in jeder Breite derselbe Wert wie in DE. Spezifitaet 1,1,1
   schlaegt die AT-Regel (1,0,1) unabhaengig von der Ladefolge. */
#vergleich .fp-bereich-tab td,
#vergleich .fp-fallback td {
    font-size: 0.9em;
}

/* --- 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; }
/* Schraffur fuer "keine eindeutige Angabe" (Umbau 13.09.2026, U2). Dieselben
   zwei Toene wie der leere Slot - Grund --fp-z-leer, Striche --fp-z-n -, also
   kein dritter Farbwert und dieselbe Kontrastlage wie die Kante. */
#vergleich .fp-beleg-probe-schraffur { fill: none; stroke: var(--fp-z-n); stroke-width: 1.4; }
#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:
   Hinweissatz und Blocktitel des Bereichs-Panels liegen im Anker der
   Sektion und erben das Weiss der Tabelle darunter nicht. (Bis U4 standen
   hier der Hinweis unter der Chip-Ueberschrift und die <caption> der Uhr -
   beide Bausteine gibt es nicht mehr.) */
#vergleich.kontrast-hell .fp-bereich-hinweis,
#vergleich.kontrast-hell .fp-bereich-titel {
    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 Schalter
   haette keinen sichtbaren Rand mehr. Dieselbe Korrektur wie beim
   Marken-Button. */
#vergleich.kontrast-hell .fp-bereich-schalter {
    background: #F7F9FC;
    color: #111111;
    border-color: #4A5D70;
}

/* Der Hell-Satz fuehrt eine eigene Gedrueckt-Farbe mit hoeherer Spezifitaet
   (#vergleich.kontrast-hell …) und schlaegt damit die Systemfarbe der
   forced-colors-Regel weiter oben. Die Markierung ueberlebt das, weil die
   Rahmenstaerke allein dort steht - die FARBE aber fiele auf den ersetzten
   Autorenwert zurueck. Deshalb hier dieselbe Aussage noch einmal, im Kontext
   des Hell-Satzes (Review-Befund B3 zu CT-0430). */
@media (forced-colors: active) {
    #vergleich.kontrast-hell .fp-bereich-schalter[aria-pressed="true"] {
        border-color: Highlight;
    }
}

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

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

/* Ein zweiter Blauton fuer denselben Zweck waere hier falsch: CTA,
   Schliessen und jede Fokuskontur laufen im Hell-Satz auf #003A66
   zusammen. Es traegt mit 11,69:1 gegen beide Nachbarn - die weisse
   Chrome wie die Schalterflaeche. */
#vergleich.kontrast-hell .fp-bereich-leiste .fp-bereich-schalter:focus-visible {
    outline-color: #003A66;
}

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

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

#vergleich.kontrast-hell .fp-bereich-bedingung {
    color: #2B3B4B;
}

#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;
}

/* --- U9 im Hell-Satz --------------------------------------------------- */
/* Die Chrome ist hier weiss, also traegt kein weisser Ring und kein
   weisser Text. Dieselben Ersatzwerte wie im uebrigen Hell-Satz:
   #003A66 fuer Blau (11,08:1 auf #F7F9FC), #1B2733 fuer Fliesstext. */
#vergleich.kontrast-hell .fp-kachel-etikett {
    color: #003A66;
}

#vergleich.kontrast-hell .fp-suche-label,
#vergleich.kontrast-hell .fp-raster-keintreffer {
    color: #1B2733;
}

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

/* Der Schalter hat keine eigene Flaeche - er nimmt den Feldgrund mit und
   braucht nur den Textton des Hell-Satzes. */
#vergleich.kontrast-hell .fp-suche-leeren {
    color: #111111;
}

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

/* Beide Ringe in EINEM Ton: der weisse Aussenring hat auf weisser Chrome
   keine Aufgabe mehr, #003A66 traegt gegen Flaeche und Grund gleichermassen
   (dieselbe Begruendung wie beim Chip und beim Marken-Button). */
#vergleich.kontrast-hell .fp-rueckgaengig:focus-visible,
#vergleich.kontrast-hell .fp-suche-feld:focus-visible {
    outline-color: #003A66;
    box-shadow: 0 0 0 0.125rem #003A66;
}

#vergleich.kontrast-hell .fp-suche-leeren:focus-visible {
    outline-color: #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 Ueberschrift der Fallback-Tabelle (CT-0488, VRT-B9 der Phase AT-3).
   Sie erbt die globale h2-Farbe #F1F6FC aus style.css, die auf der blauen
   Chrome traegt (gemessen 4,90:1), im Hell-Satz aber auf dem matten #F7F9FC
   der .vergleich-dashboard steht: gemessen 1,03:1, ohne JS praktisch
   unsichtbar. Mit JS ist der ganze Block sr-only, dort aendert sich nichts.
   #111111 ist der Textton der Tabelle darunter (Liste oben). */
#vergleich.kontrast-hell .fp-fallback h2 { color: #111111; }

/* 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 (DE in #nonFooter, AT am body)
   AUSSERHALB von #vergleich (Core, Kommentar vor #fpOverlay - 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:8 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;
}

/* Schraffur fuer "keine eindeutige Angabe" (U2) - Literale wie die Nachbarn,
   weil die Tokens auf #vergleich leben und das Overlay ausserhalb haengt. */
#fpOverlay .fp-beleg-probe-schraffur {
    fill: none;
    stroke: #5A6E82;
    stroke-width: 1.4;
}

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

/* nowrap (CT-0488, VRT #15 H1 der DE-Abnahme): das Zustandswort hinter dem
   Kriterium bricht nicht um - wie in der Bereichstabelle (.fp-bereich-zustand).
   Es steht als Inline-Span am Ende des Kriteriums in .fp-beleg-wort; ohne
   nowrap stand "bedingt | erfuellt" in 1-2 von 21 Zeilen je Konto bei
   375/640/1280 zweizeilig. Mit nowrap wandert das Wort als Ganzes in die
   naechste Zeile; das laengste ("keine eindeutige Angabe") ist schmaler als
   die Spalte bei 375er Breite, ein Ueberlauf entsteht nicht. */
#fpOverlay .fp-beleg-zustand {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}

/* 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
   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; }
#fpOverlay.fp-overlay.kontrast-hell .fp-beleg-probe-schraffur { 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). */

    /* --- U5: Bereichs-Panel unterhalb des Umbruchs -------------------- */
    /* DIE KONTOSPALTEN STAPELN. Bis U4 stand hier die Behandlung der
       Sektor-Uhr (Marktspalte weg, Breiten neu, Angabe in eigene Zeile) -
       die Uhr gibt es nicht mehr. Das Panel hat dasselbe Problem in
       schaerferer Form: drei Kontospalten mit je Zustandswort UND
       woertlicher Bedingung passen bei 375 px in keine Tabellenzeile,
       und ein waagerechter Scrollcontainer waere hier die schlechtere
       Loesung - der Leser muesste je Zeile hin und her fahren.
       Deshalb wird die Tabelle unterhalb von 48em zur Liste: jede Zelle
       nimmt die volle Breite und traegt ihren Spaltennamen selbst
       (data-konto, aus dem Kopf uebernommen). Der Tabellenkopf entfaellt
       dabei nur OPTISCH - er bleibt fuer die Vorlesefassung stehen
       (position: absolute), damit die Spaltenzuordnung nicht verloren geht.
       KEIN vierter Breakpoint: das Projekt fuehrt genau drei
       Media-Bedingungen (F47, bewacht von Gate F6-H1). */
    #vergleich .fp-bereich-tab,
    #vergleich .fp-bereich-tab tbody,
    #vergleich .fp-bereich-tab tr,
    #vergleich .fp-bereich-tab td,
    #vergleich .fp-bereich-tab tbody th {
        display: block;
        width: auto;
    }

    #vergleich .fp-bereich-tab thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    #vergleich .fp-bereich-tab tr {
        border-bottom: 0.125rem solid rgba(51, 70, 92, 0.3);
    }

    #vergleich .fp-bereich-tab tr:last-child {
        border-bottom: 0;
    }

    #vergleich .fp-bereich-tab tbody th {
        border-bottom: 0;
        padding-bottom: 0.25rem;
    }

    /* Der Spaltenname vor der Zelle - ohne ihn stuenden bei drei Konten
       drei Bloecke untereinander, die kein Wort mehr voneinander trennt.
       Er kommt aus dem Kopf derselben Tabelle (JS/Server schreiben
       data-konto), ist also keine zweite Quelle. */
    #vergleich .fp-bereich-zelle::before {
        content: attr(data-konto);
        display: block;
        margin: 0 0 0.125rem;
        font-weight: 700;
    }

    #vergleich .fp-bereich-tabwrap {
        overflow-x: visible;
    }

    /* --- 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.
       CT-0384 (04.10.2026): inline-grid statt inline-flex. Die zentrale
       Regel .laufzeit-pill[data-label]::after (vergleich.min.css) haelt die
       Breite des fetten Aktivzustands als Schattentext vor. In einem
       Flex-Kasten waere das ::after ein Nachbar und addierte seine Breite,
       im Grid liegt es in derselben Spalte (Breite = Maximum). Die
       Zentrierung uebernehmen align-content/justify-items. Gekoppelt an
       white-space: nowrap der Bestandsregel - ohne nowrap stuende der Text
       im Grid zweizeilig. */
    #vergleich .fp-dashboard .fp-profilnav .laufzeit-pill {
        display: inline-grid;
        align-content: center;
        justify-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;
    }
}