@media (max-width: 48em) {
        /* Einzeiliger Header auf Mobile: Treffer-Zaehler ausgeblendet (die Anzahl
           steckt im Pager "von N"), Pager links kompakt (Skala-Track aus). */
        .vergleich-dashboard.tabelle-dashboard .results-header {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            row-gap: 0.4em;
        }
        .vergleich-dashboard.tabelle-dashboard .result-count {
            display: none;
        }
        .vergleich-dashboard.tabelle-dashboard .tabelle-pager {
            flex: 0 1 auto;
            margin-inline: 0;
        }
        .tabelle-pager-track { display: none; }
        .tabelle-pager-leiste { flex: 0 0 auto; gap: 0; }
        /* Kurz-Range "X–Y / N" — "Angebote" und "von" ausgeblendet, Slash an.
           Pfeil-Flaechen schmaler (Hoehe 3em bleibt als Touch-Ziel). */
        .tabelle-pager { gap: 0.5em; }
        .tabelle-pager-prefix,
        .tabelle-pager-von-wort { display: none; }
        .tabelle-pager-slash { display: inline; }
        .tabelle-pager-btn { width: 2.25em; height: 3em; }
        .tabelle-pager-glyph { width: 2em; height: 0.7em; }
    }

    /* Dashboard-Innenabstand auf Tablet-/Schmaldesktop-Breiten (wortgleich zur
       Listendarstellung; inline => kein vergleich.min.css-Bump noetig). */
    @media (max-width: 52em) { .vergleich-dashboard { padding: 0.75em; } }
    @media (max-width: 38em) { .vergleich-dashboard { padding: 0.5em; } }

    /* CSS-Variablen am .tabelle-wrapper (Stolperstein #15: Variablen vererben nur
       an Descendants; spaetere Sibling-Elemente wie der Sticky-Mini-Header
       brauchen sie am gemeinsamen Vorfahre). Zwei Header-Reihen: Logo / Bewertung. */
    .tabelle-wrapper {
        margin-top: 1em;
        position: relative;
        /* Default-Spaltenbreiten — greifen nur, wenn keine Media-Query matcht. */
        --slot-breite: 12em;
        --vp-breite: 14em;
        /* Header-Reihen-Hoehen. Bewertungs-Reihe traegt Wert + Punkte + Gaps. */
        --hdr-logo-h: 12rem;
        --hdr-bewertung-h: 4.25rem;
        /* Datenreihen-Hoehen. */
        --row-data-h: 2.75rem;
        --row-titel-h: 2.75rem;
        --row-cta-h: 2.2rem;
    }

    /* VP-Spalte = Flex-Sibling, Sticky-Left. Eigenes Grid (NICHT subgrid —
       Stolperstein #1). <div class="vp-spalte">, NIEMALS <aside> (Stolperstein #4). */
    .vp-spalte {
        flex-shrink: 0;
        width: var(--vp-breite, 14em);
        position: sticky;
        left: 0;
        z-index: 4;
        background: rgba(9, 87, 143, 0.92);
        border-right: 1px solid rgba(255,255,255,0.18);
        box-shadow: 0.25em 0 0.5em rgba(0,0,0,0.2);
        display: grid;
        /* Stolperstein #9: min-width: auto = min-content ausschalten. */
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows:
            var(--hdr-logo-h)
            var(--hdr-bewertung-h)
            var(--tabelle-data-rows, repeat(var(--anzahl-reihen-rest, 27), minmax(var(--row-data-h), auto)));
    }
    .tabelle-grid {
        flex-shrink: 0;
        display: grid;
        grid-template-columns: repeat(var(--anzahl-anbieter, 8), var(--slot-breite, 12em));
        grid-template-rows:
            var(--hdr-logo-h)
            var(--hdr-bewertung-h)
            var(--tabelle-data-rows, repeat(var(--anzahl-reihen-rest, 27), minmax(var(--row-data-h), auto)));
        align-items: stretch;
    }

    /* === Header-Reihen (2 Stueck: logo / bewertung) — sticky oben mit opakem
       Hintergrund. Sticky-Tops in rem-Variablen, NIEMALS em (Stolperstein #3). === */
    .vp-zelle.vp-header,
    .ab-zelle.ab-bewertung {
        background: rgba(9, 87, 143, 0.92);
    }
    .ab-zelle.ab-logo,
    .ab-zelle.ab-bewertung,
    .vp-zelle.vp-header {
        position: sticky;
        z-index: 3;
    }
    .ab-zelle.ab-bewertung,
    .vp-zelle.vp-header.vp-bewertung          { top: var(--hdr-logo-h); }

    /* === Screenreader-Label === Unsichtbares Reihen-Label am Zellen-Anfang.
       px bewusst (Standard-sr-only-Clip-Pattern). position:absolute nimmt den
       Span aus dem Flex-Layout der .ab-zelle. */
    .vergleich-dashboard .sr-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .ab-merkmal-html {
        /* Wickel-Container fuer HTML-Felder mit <br>/<b>/<a> (Stolperstein #8). */
        display: inline-block;
        text-align: right;
    }
    /* Geschenk-IMG-Hover (Neukundenaktion, cardgift-m.svg): nur Aufhellung,
       das Tuerkis-Gruen bleibt (Override des Site-Defaults). */
    .ab-merkmal-html a.cardgifta:hover img {
        filter: brightness(1.12);
    }
    /* Geschenk-Icon-Vergroesserung: Site-Default width: 2.7em um 10 % anheben. */
    .ab-merkmal-html a.cardgifta:not(.ab-info-tooltip-action) img {
        width: 2.97em;
    }
    /* Erfahrungsberichte-Reihe: gruenes Kommentar-Icon; die globale .icon-Regel
       aus style.css (font-size: 3em; position: absolute; margin-left: -1.6em)
       muss hier neutralisiert werden, sonst ragt das Icon aus der Flex-Zelle.
       font-size bleibt 3em = optische Groesse der Listen-Icons. */
    .vergleich-dashboard .ab-zelle.ab-erfahrungsberichte .icon {
        color: #A9F6DB;
        position: relative; top: auto; left: auto;
        display: inline-block;
        font-size: 3em;
        line-height: 1;
        margin-left: 0;
        vertical-align: middle;
    }
    .vergleich-dashboard .ab-zelle.ab-erfahrungsberichte a:hover > .icon { color: #DFFDF2; }
    .ab-info-tooltip {
        display: none;
        position: absolute;
        z-index: 200;
        max-width: 18em;
        padding: 0.5em 0.75em;
        background: rgba(15, 20, 30, 0.95);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.4;
        border-radius: 0.4em;
        box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.35);
        pointer-events: auto;
    }
    .ab-info-tooltip.is-visible { display: block; }

    /* Heatmap-Farben (Top-3 je heatmap-faehigem Feld, drei Stufen).
       Hoehere Spezifizitaet als ab-merkmal-Default, kein !important. */
    .vergleich-dashboard .ab-zelle.ab-merkmal.heatmap-1 {
        background: rgba(169,246,219,0.28);
    }
    .vergleich-dashboard .ab-zelle.ab-merkmal.heatmap-2 {
        background: rgba(169,246,219,0.18);
    }
    .vergleich-dashboard .ab-zelle.ab-merkmal.heatmap-3 {
        background: rgba(169,246,219,0.10);
    }

    .tabelle-disclaimer {
        margin: 1.5em 2.5% 0.75em;
        font-size: 0.85rem;
        line-height: 1.5;
        color: rgba(255,255,255,0.55);
        max-width: 80em;
    }

    /* Empty State */
    .tabelle-keine-ergebnisse {
        padding: 2.5em 1em;
        text-align: center;
        color: rgba(255,255,255,0.92);
    }

    /* Responsive: kleinere Schrift im Tablet-Bereich. */
    @media (max-width: 52em) {
        .vp-zelle, .ab-zelle { font-size: 0.78rem; padding: 0.4375em 0.5em; }
        .ab-bewertung-wert { font-size: 1.25rem; }
    }
    /* Tablet-Fix (uebernommen aus neobroker.php, dort VRT-Befund 2026-07-10):
       lange Einwort-Gruppentitel brechen im Tablet-Bereich per
       overflow-wrap:break-word mitten im Wort um ("DEPOTMERKMAL E"). Hier auf
       "KONTOERÖFFNUNG" gescopet — der einzige Gruppentitel dieser Seite ohne
       Umbruchstelle. "Zinsen und Rendite" bricht an den Leerzeichen, "Merkmale"
       ist kurz genug. */
    .gruppe-toggle-form[data-gruppe="konto"] .vp-gruppentitel-label {
        overflow-wrap: normal;
        hyphens: none;
    }

    /* ============================================================
       Mini-Scrollbar-Indikator (Scroll-Fortschritt unterhalb des Scrollers).
       ============================================================ */
    .tabelle-scrollbar-indikator {
        position: relative;
        height: 0.375em;
        margin: 0.25em 0 0;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 0.1875em;
        overflow: hidden;
        transition: opacity 180ms ease;
    }
    .tabelle-scrollbar-thumb {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--thumb-x, 0%);
        width: var(--thumb-width, 0%);
        background: rgba(255, 255, 255, 0.6);
        border-radius: inherit;
        transition: background 125ms ease;
    }
    .tabelle-scroller.is-dragging ~ .tabelle-scrollbar-indikator .tabelle-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.75);
    }
    /* Scroll-Follow des Sticky-Mini-Tracks und der Mobile-Mini-Labels kommt
       KOMPLETT aus tabelle.min.css: timeline-scope/scroll-timeline-name
       `--tabelle-scroll` + Animationsregeln + @keyframes
       tabelle-sticky-mini-follow-x / tabelle-mini-follow-x (to-Position =
       var(--scroll-max-x), die das JS unten per ResizeObserver setzt).
       HIER KEINEN eigenen @supports-Block mit umbenannter Timeline/Animation
       ergaenzen — ein Inline-Override mit eigenen Namen zeigt auf nirgends
       definierte Keyframes und toetet den Compositor-Pfad, waehrend der
       JS-Fallback bei animation-timeline-Support bewusst pausiert
       (VRT-Befund B1, Iteration 2026-07-10). */
    .ab-mini-logo {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        max-height: 6em;
        max-width: 100%;
    }

    /* === Mobile-Hauptblock (max-width: 38em) ===
       Drei Anbieter-Spalten à 1/3 Scroller-Breite. VP-Spalte unsichtbar —
       Reihen-Labels uebernehmen Mini-Label-Banner, Bereichsbezeichnungen
       rendern als zweiter Toggle-Button (.mb-gruppentitel). */
    @media (max-width: 38em) {
        .tabelle-wrapper {
            /* Stolperstein #7: @property-Length-Variablen verlangen Einheit. */
            --slot-breite: calc((var(--scroller-w, 100vw) - 1.5em) / 3);
            --vp-breite: 0px;
            --hdr-logo-h: 11rem;
            --hdr-bewertung-h: 3.5rem;
            --row-data-h: 5rem;
            --row-titel-h: 3rem;
            --row-cta-h: 4rem;
        }
        .tabelle-scroller {
            scroll-snap-type: none;
            scroll-padding-right: 0.5em;
        }
        .tabelle-grid {
            column-gap: 0.5em;
        }
        .tabelle-wrapper::after,
        .tabelle-wrapper::before { width: 0.75em; }
        .tabelle-wrapper::after { opacity: 0.5; }
        .tabelle-wrapper.is-scroll-anfang::before { opacity: 0.5; }

        .vp-zelle, .ab-zelle { font-size: 0.72rem; padding: 0.375em 0.4375em; }
        .ab-bewertung-wert { font-size: 1.1rem; }

        /* Logo-Stack vertikal zentrieren. */
        .ab-zelle.ab-logo {
            justify-content: center;
        }

        /* Sticky-Header-Background solid statt semitransparent. */
        .ab-zelle.ab-bewertung,
        .vp-zelle.vp-header.vp-bewertung {
            background: rgb(9, 87, 143);
        }

        /* Sterne kleiner auf Mobile. */
        .stern-aktiv, .stern-inaktiv {
            width: 0.625em;
            height: 0.625em;
        }
        .sterne-zeile { gap: 0.2em; }

        .ab-pos-badge { font-size: 0.7rem; }

        /* Merkmal-Zellen reservieren Platz fuer das Mini-Label-Banner oben. */
        .ab-zelle.ab-merkmal {
            padding-top: 2em;
            border-bottom: 1px solid rgba(255,255,255,0.14);
        }
        .ab-zelle.ab-merkmal:has(+ .ab-gruppe-spacer) {
            border-bottom: none;
        }
        .tabelle-grid > .anbieter-spalte:first-child .ab-mini-label {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.25em;
            position: absolute;
            top: 0.2em;
            left: 0;
            width: var(--mini-label-w, calc(100vw - 0.5em));
            box-sizing: border-box;
            padding: 0.15em 0.5em;
            font-size: 0.8rem;
            line-height: 1.25;
            color: rgba(255,255,255,0.55);
            background: transparent;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            text-align: center;
            border-bottom: none;
            transform: translate3d(var(--mini-label-x, 0px), 0, 0);
            backface-visibility: hidden;
            will-change: transform;
            z-index: 2;
        }
        .ab-mini-label-text {
            min-width: 0;
            flex: 0 1 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* VP-Spalte ist auf Mobile komplett unsichtbar. */
        .vp-spalte { display: none; }

        /* Mobile-CTA: Icon-only-Button (Bank + externer Link-Pfeil). */
        .vergleich-dashboard .anbieter-link {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 4rem;
            min-height: 2rem;
            padding: 0.25rem 0.5rem;
            gap: 0.25rem;
        }
        .vergleich-dashboard .anbieter-link i.icon-bank,
        .vergleich-dashboard .anbieter-link i.icon-link-ext {
            display: inline-block;
            position: relative;
            top: 0;
            font-size: 1.25rem;
            margin: 0;
            line-height: 1;
            color: inherit;
            width: auto;
            height: auto;
        }
        .vergleich-dashboard .anbieter-link-text {
            display: none;
        }

        /* Info-Icon im Mini-Label fuer truncated Labels (Default unsichtbar). */
        .ab-info-icon {
            position: relative;
            isolation: isolate;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.4em;
            height: 1.4em;
            margin-left: 0.35em;
            padding: 0;
            background: transparent;
            color: rgba(255,255,255,0.85);
            border: none;
            border-radius: 50%;
            font-size: 1.7em;
            line-height: 1;
            cursor: pointer;
            vertical-align: baseline;
        }
        .ab-info-icon::before {
            content: '';
            position: absolute;
            top: max(-1.4em, -0.875rem);
            bottom: max(-1.4em, -0.875rem);
            left: max(-1.25em, -0.78125rem);
            right: max(-1.25em, -0.78125rem);
            z-index: 1;
        }
        .ab-info-icon:hover,
        .ab-info-icon:focus-visible {
            color: #fff;
        }
        .ab-info-icon:focus-visible {
            outline: 2px solid var(--accent, #A9F6DB);
            outline-offset: 2px;
        }
        .ab-info-icon.ab-info-icon-mini-label {
            display: none;
            font-size: 2em;
            width: 1em;
            height: 1em;
            margin-left: 0;
            background: transparent;
            color: rgba(255,255,255,0.55);
        }
        .ab-info-icon.ab-info-icon-mini-label.is-truncated {
            display: inline-flex;
        }
        .ab-info-icon.ab-info-icon-mini-label::before {
            top: max(-0.8em, -0.5rem);
            bottom: max(-0.8em, -0.5rem);
            left: max(-0.6em, -0.4rem);
            right: max(-0.6em, -0.4rem);
        }
        .ab-info-icon.ab-info-icon-mini-label:hover,
        .ab-info-icon.ab-info-icon-mini-label:focus-visible {
            color: #fff;
        }

        /* === Bereichstitel-Toggle in der ersten Anbieter-Spalte (.mb-gruppentitel) === */
        .tabelle-grid .ab-gruppe-spacer {
            min-height: 2.5em;
        }
        .tabelle-grid > .anbieter-spalte:first-child .ab-gruppe-spacer {
            position: relative;
        }
        .tabelle-grid > .anbieter-spalte:first-child .mb-gruppentitel {
            display: flex;
            position: absolute;
            top: 0;
            left: 0;
            width: var(--mini-label-w, calc(100vw - 0.5em));
            box-sizing: border-box;
            transform: translate3d(var(--mini-label-x, 0px), 0, 0);
            backface-visibility: hidden;
            will-change: transform;
            z-index: 2;
            background: transparent;
            border-top: none;
            border-bottom: none;
            padding-left: 2.5%;
            padding-right: 5%;
        }
        .tabelle-grid > .anbieter-spalte:first-child .mb-gruppentitel:hover .vp-gruppentitel-caret {
            color: #BFDBEF;
        }
        .tabelle-grid > .anbieter-spalte:first-child .mb-gruppentitel .vp-gruppentitel-caret svg {
            width: 18px;
            height: 18px;
        }

        /* Sticky-Mini-Header Mobile: column-gap muss zum Original-Grid passen. */
        .tabelle-sticky-mini-track {
            column-gap: 0.5em;
        }
        .anbieter-spalte-mini {
            font-size: 0.72rem;
            padding: 0.375em 0.4375em;
        }
        .tabelle-scrollbar-indikator {
            margin: 0.125em 0 0;
        }
    }

    /* === Hochkontrast-Hell-Modus — Ebene C (view-spezifische Farb-Overrides) ===
       Ebene A/B und die Toggle-Basis liegen ZENTRAL in vergleich.min.css?v=18.
       Dieser Block enthaelt nur die hartkodierten, tabellen-spezifischen Farben.
       Aktiv nur bei #vergleich.kontrast-hell; alle Overrides per ID+Klasse-
       Spezifitaet (NIE !important), Heatmap-Logik unveraendert (nur Farben).
       Bewusste Ausnahme: das Logo-Band bleibt Marken-Blau (#0070C0), damit helle
       Anbieterlogos lesbar bleiben; Schrift/Sterne dort weiss. */

    /* -- Sticky-VP-Spalte (Merkmal-Labels) hell, blaue Trennkante -- */
    #vergleich.kontrast-hell .vp-spalte { background: #fff; border-right-color: rgba(0,82,141,0.28); box-shadow: 0.25em 0 0.5em rgba(0,82,141,0.10); }
    #vergleich.kontrast-hell .vp-zelle { color: #003A66; background: #fff; }
    #vergleich.kontrast-hell .vp-zelle, #vergleich.kontrast-hell .ab-zelle { border-bottom-color: rgba(0,82,141,0.12); }
    #vergleich.kontrast-hell .ab-merkmal.ab-leer { color: rgba(0,0,0,0.65); }

    /* -- Logo-Band (VP-Header + .ab-logo) bleibt Marken-Blau, Schrift weiss. -- */
    #vergleich.kontrast-hell .vp-zelle.vp-header { background: #0070C0; color: rgba(255,255,255,0.9); }
    #vergleich.kontrast-hell .vp-zelle.vp-header.vp-bewertung,
    #vergleich.kontrast-hell .ab-zelle.ab-bewertung { background: #fff; border-bottom-color: rgba(0,82,141,0.30); }
    #vergleich.kontrast-hell .vp-zelle.vp-header.vp-bewertung { color: #00528D; }
    #vergleich.kontrast-hell .ab-anbieter { color: #fff; }
    #vergleich.kontrast-hell .stern-aktiv { background: #0070C0; box-shadow: 0 0 0.25em rgba(0,112,192,0.35); }
    #vergleich.kontrast-hell .stern-inaktiv { border-color: rgba(0,82,141,0.45); }

    /* -- Geschenk-Icon (cardgift-m.svg): Tuerkis -> Marken-Hellblau. -- */
    #vergleich.kontrast-hell .ab-merkmal-html a.cardgifta img {
        filter: brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(946%) hue-rotate(176deg) brightness(110%) contrast(113%);
    }
    #vergleich.kontrast-hell .ab-merkmal-html a.cardgifta:hover img {
        filter: brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(946%) hue-rotate(176deg) brightness(110%) contrast(113%) brightness(125%);
    }

    /* -- Erfahrungsberichte-Icon: Mint -> Marken-Blau (analog ab-info-icon) -- */
    #vergleich.kontrast-hell .vergleich-dashboard .ab-zelle.ab-erfahrungsberichte .icon { color: #00528D; }
    #vergleich.kontrast-hell .vergleich-dashboard .ab-zelle.ab-erfahrungsberichte a:hover > .icon { color: #0070C0; }

    /* -- Heatmap: Tuerkis -> Blau-Tints; Logik unveraendert -- */
    #vergleich.kontrast-hell .vergleich-dashboard .ab-zelle.ab-merkmal.heatmap-1 { background: rgba(0,112,192,0.16); }
    #vergleich.kontrast-hell .vergleich-dashboard .ab-zelle.ab-merkmal.heatmap-2 { background: rgba(0,112,192,0.10); }
    #vergleich.kontrast-hell .vergleich-dashboard .ab-zelle.ab-merkmal.heatmap-3 { background: rgba(0,112,192,0.05); }

    /* -- Footer-CTA-Reihe / Disclaimer / Empty-State -- */
    #vergleich.kontrast-hell .vp-zelle.vp-footer { background: #fff; border-top-color: rgba(0,82,141,0.15); color: #003A66; }
    #vergleich.kontrast-hell .ab-zelle.ab-cta { border-top-color: rgba(0,82,141,0.15); }
    #vergleich.kontrast-hell .tabelle-disclaimer { color: #404040; }
    /* .zusatz-Zeile (site-weit #CFCFCF + Tuerkis-Link) waere im Hell-Modus
       sonst unlesbar (~1,5:1) — VRT-Befund H1, Iteration 2026-07-10. */
    #vergleich.kontrast-hell .zusatz { color: #404040; }
    #vergleich.kontrast-hell .zusatz a { color: #00528D; }
    #vergleich.kontrast-hell .zusatz a:hover { color: #0070C0; }
    #vergleich.kontrast-hell .tabelle-keine-ergebnisse { color: #111; }
    #vergleich.kontrast-hell .vergleich-dashboard .footer-line a { color: #00528D; }
    #vergleich.kontrast-hell .vergleich-dashboard .footer-line a:hover { color: #0070C0; }

    /* -- CTA-Button "Zum Anbieter": blaue Fuellung, weisse Schrift. -- */
    #vergleich.kontrast-hell .vergleich-dashboard .anbieter-link { background: #0070C0; color: #fff; }
    #vergleich.kontrast-hell .vergleich-dashboard .anbieter-link:hover { background: #00528D; }
    #vergleich.kontrast-hell .vergleich-dashboard .anbieter-link .link-arrow { background: #fff; color: #00528D; }

    /* -- Fussnoten (hartkodiert Weiss-Text + Tuerkis-Links) -- */
    #vergleich.kontrast-hell .tabelle-fussnoten { background: rgba(0,82,141,0.05); color: #333; }
    #vergleich.kontrast-hell .tabelle-fussnoten li strong { color: #111; }
    #vergleich.kontrast-hell .tabelle-fussnoten a { color: #00528D; }
    #vergleich.kontrast-hell .tabelle-fussnoten a:hover { color: #0070C0; }

    /* -- Gruppen-Titel-Baender (Koernung) hell-blau -- */
    #vergleich.kontrast-hell .ab-gruppe-spacer, #vergleich.kontrast-hell button.vp-gruppentitel {
        background-color: rgba(0,82,141,0.06);
        background-image: radial-gradient(circle, rgba(0,82,141,0.10) 0 0.7px, transparent 1.1px);
        border-top-color: rgba(0,82,141,0.16); border-bottom-color: rgba(0,82,141,0.10);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    }
    #vergleich.kontrast-hell button.vp-gruppentitel { color: #00528D; }
    #vergleich.kontrast-hell .vp-gruppentitel-caret { color: #00528D; }
    #vergleich.kontrast-hell button.vp-gruppentitel:hover .vp-gruppentitel-caret,
    #vergleich.kontrast-hell button.vp-gruppentitel.is-row-hover .vp-gruppentitel-caret { color: #0070C0; }

    /* -- Pager (Skala/Chevrons): Tuerkis -> Blau -- */
    #vergleich.kontrast-hell .tabelle-pager-range { color: #111; }
    #vergleich.kontrast-hell .tabelle-pager-bereich, #vergleich.kontrast-hell .tabelle-pager-bereich strong { color: #00528D; }
    #vergleich.kontrast-hell .tabelle-pager-rest { color: #333; }
    #vergleich.kontrast-hell .tabelle-pager-btn { color: #0070C0; }
    #vergleich.kontrast-hell .tabelle-pager-btn:not(:disabled):hover, #vergleich.kontrast-hell .tabelle-pager-btn:focus-visible { color: #00528D; }
    #vergleich.kontrast-hell .tabelle-pager-btn:focus-visible { outline-color: #0070C0; }
    #vergleich.kontrast-hell .tabelle-pager-track::before { background: repeating-linear-gradient(90deg, rgba(0,82,141,0.20) 0 1px, transparent 1px 11px), rgba(0,82,141,0.08); }
    #vergleich.kontrast-hell .tabelle-pager-track:focus-visible { outline-color: #0070C0; }
    #vergleich.kontrast-hell .tabelle-pager-fenster { background: rgba(0,112,192,0.18); border-color: #0070C0; }

    /* -- Scroll-Indikator / native Scrollbar / Scroll-Fade-Kanten: Weiss -> Blau -- */
    #vergleich.kontrast-hell .tabelle-scrollbar-indikator { background: rgba(0,82,141,0.10); }
    #vergleich.kontrast-hell .tabelle-scrollbar-thumb { background: rgba(0,82,141,0.55); }
    #vergleich.kontrast-hell .tabelle-scroller.is-dragging ~ .tabelle-scrollbar-indikator .tabelle-scrollbar-thumb { background: rgba(0,82,141,0.75); }
    #vergleich.kontrast-hell .tabelle-scroller { scrollbar-color: rgba(0,82,141,0.55) rgba(0,82,141,0.10); }
    #vergleich.kontrast-hell .tabelle-scroller::-webkit-scrollbar-track { background: rgba(0,82,141,0.10); }
    #vergleich.kontrast-hell .tabelle-scroller::-webkit-scrollbar-thumb { background: rgba(0,82,141,0.55); }
    #vergleich.kontrast-hell .tabelle-scroller::-webkit-scrollbar-thumb:hover { background: rgba(0,82,141,0.75); }
    #vergleich.kontrast-hell .tabelle-wrapper::after { background: linear-gradient(to right, transparent 0%, rgba(0,82,141,0.14) 100%); }
    #vergleich.kontrast-hell .tabelle-wrapper::before { background: linear-gradient(to left, transparent 0%, rgba(0,82,141,0.14) 100%); }

    /* -- Mobile (<=38em): view-spezifische Ebene-C-Overrides. -- */
    @media (max-width: 38em) {
        #vergleich.kontrast-hell .ab-zelle.ab-bewertung, #vergleich.kontrast-hell .vp-zelle.vp-header.vp-bewertung { background: #fff; }
        #vergleich.kontrast-hell .ab-zelle.ab-merkmal { border-bottom-color: rgba(0,82,141,0.14); }
        #vergleich.kontrast-hell .ab-mini-label { color: #00528D; }
        #vergleich.kontrast-hell .ab-info-icon { color: #00528D; }
        #vergleich.kontrast-hell .ab-info-icon:hover, #vergleich.kontrast-hell .ab-info-icon:focus-visible { color: #003A66; }
        #vergleich.kontrast-hell .ab-info-icon.ab-info-icon-logo { color: #fff; }
        #vergleich.kontrast-hell .ab-info-icon.ab-info-icon-logo:hover, #vergleich.kontrast-hell .ab-info-icon.ab-info-icon-logo:focus-visible { color: rgba(255,255,255,0.8); }
        #vergleich.kontrast-hell .ab-info-icon.ab-info-icon-mini-label { color: #00528D; }
        #vergleich.kontrast-hell .ab-info-icon.ab-info-icon-mini-label:hover, #vergleich.kontrast-hell .ab-info-icon.ab-info-icon-mini-label:focus-visible { color: #003A66; }
        #vergleich.kontrast-hell .tabelle-grid > .anbieter-spalte:first-child .mb-gruppentitel:hover .vp-gruppentitel-caret { color: #0070C0; }
    }
    /* === Ende Hochkontrast-Hell-Modus Ebene C === */

    /* Spezial-Übersicht ohne Profil-/Sortierleisten: Die Kontrast-Zeile reserviert echte
       Höhe (statt des höhenlosen Ankers der Hauptvergleiche), damit der absolute Button
       nicht ins sticky Anbieter-Kopfband (.ab-logo, z-index 3) ragt und dort verdeckt wird. */
    #vergleich .kontrast-zeile { height: 2.4em; }
    #vergleich .kontrast-toggle { top: 0.2em; }

    /* Rendite-Reihe: das laengste Vergleichspunkt-Label dieser Seite
       ("Jahresrendite über Gesamtlaufzeit (Gesamterfolg des eingesetzten
       Kapitals)") braucht in der 14em breiten VP-Spalte drei Zeilen, die
       Datenzellen daneben nur eine ("2,58% über 3 Jahre"). Die VP-Spalte
       uebernimmt ihre Track-Hoehen per Subgrid-Emulation vom Hauptgrid
       (window._vpRowSync) und kann die Reihe deshalb NICHT selbst aufziehen —
       ohne diese Regel schneidet die Reihentrennlinie die dritte Zeile an
       (gemessen im Pre-Upload-Render 2026-08-11: Track 44 px, Textblock
       54,5 px + Padding). Die Mindesthoehe an der Datenzelle zieht den
       auto-Track hoch, die VP-Spalte erbt ihn im naechsten Sync.
       Unterhalb 38em entfaellt die VP-Spalte (Labels stehen dann als
       Mini-Banner ueber dem Wert) — dort waere die Regel verschenkte Hoehe.

       Der Wert 5.5rem ist GEMESSEN, nicht geschaetzt (Pre-Upload-Render 2,
       2026-08-11): die Zeilenzahl des Labels haengt an der VP-Spaltenbreite und
       kippt mehrfach — 2 Zeilen ab ~219 px, 3 Zeilen ab ~212,5 px, 4 Zeilen ab
       ~194 px, 5 Zeilen bei ~137 px (knapp oberhalb der 38em-Grenze). 4.5rem
       schnitt deshalb bei 612/620/840/880/900/1220/1280/1300 px noch an;
       5.5rem haelt alle 14 geprueften Breiten in beiden Scrollbar-Modi. Wer im
       schmalsten 5-Zeilen-Band zusaetzlich das volle Zellpadding sehen will,
       braucht 6rem — bewusst nicht gesetzt, weil die Reihe sonst in den breiten
       Viewports (dort nur 2-3 Zeilen) unnoetig auftraegt. */
    @media (min-width: 38.0625em) {
        .ab-zelle.ab-merkmal.ab-rendite { min-height: 5.5rem; }
    }

    /* Absatzwechsel innerhalb einer Fussnote (siehe .fn-absatz im PHP-Block):
       definierter Abstandshalter statt der vollen Leerzeile aus <br><br>.
       0.35em ergibt gemessene 7,4 px — unterhalb der 8,8 px zwischen zwei
       Anbieter-Eintraegen, damit die Absaetze sichtbar zum selben Eintrag
       gehoeren. */
    .tabelle-fussnoten .fn-absatz { display: block; height: 0.35em; }

    /* Fussnoten auf Mobile: 1:1 die Regel aus festgeld-tabelle-core.inc.php
       (dort im 38em-Block). tabelle.min.css setzt .tabelle-fussnoten auf
       font-size 0.85rem / padding 1em 1.5em; der Festgeldvergleich zieht das
       auf schmalen Breiten zurueck, diese Uebersicht tat es bisher nicht.
       Folge (gemessen 2026-08-11 bei 390 px): Schrift 13,6 statt 12,8 px,
       Zeilenhoehe 20,4 statt 19,2 px, Innenabstand 13,6/20,4 statt 11,2/12,8 px
       — und dadurch auch die Leerzeile vor dem zweiten Absatz eines Anbieters
       23,0 statt 21,7 px. Auf Desktop waren beide Seiten schon vorher
       pixelgleich. */
    @media (max-width: 38em) {
        .tabelle-fussnoten {
            padding: 0.875em 1em;
            font-size: 0.8rem;
        }
    }