/* ==========================================================================
   brokerage-diagramm.min.css — „Kurvenblick" (Brokerage DE), Chrome & Grundoptik.
   Phase 1 (Fundament): Intro, Diagramm-Kontrollzeile, Bühnen-Grid, „weitere Filter"-
   Panel-Sektionen, Detailpanel-Templates, No-JS-Fallback, Compliance — in BEIDEN
   Kontrast-Modi (Normal = dunkles Glas, kontrast-hell = hell).
   Phase 2 (Kurven-Panorama): farbfreie Chart-Optik (Strichstärken als unitless SVG-
   user-units, Opazität, Typo). Alle Chart-FARBEN kommen als Inline-SVG-Attribute aus
   der Engine (E8) — hier steht KEINE Kurven-/Achsen-/Markenfarbe.
   Phase 3 (Interaktion): Ranking-Liste (aria-live-Zwilling, FLIP), Detailpanel-Optik
   (dunkel-glasiges Seitenpanel §6, Icon-Tabs, Pin), Scrubber-Fangfläche (touch-action:
   pan-y). Chart-FARBEN weiterhin ausschließlich inline aus der Engine.
   Phase 4 (Mobile & A11y): Detail-Aside wird mobil (≤48em) zum modalen Bottom-Sheet
   (E9/§8) — derselbe Klon im .kb-ranking, nur Position/Backdrop/Modal-Semantik kommen
   hinzu; Label-Ausdünnungs-Hinweis; prefers-reduced-motion auch für den Sheet-Slide.
   Basis-Chrome (Kontrast-Umschalter, Profil-Pills, „weitere Filter"-Button/Overlay,
   Icons) liefern style.css + vergleich.min.css. Farben über var(--…, fallback);
   Phase 6 (Live-Abnahme): scoped Leak-Resets gegen die unscoped style.css-Regeln
   „aside" (traf .kb-ranking: width:25%/float/margins) und „.icon" (traf den
   kb-view-icon im aktiven #hilfe-Eintrag) — beide erst mit der echten Live-CSS
   sichtbar; zg-view-icon-Blaupause übernommen.
   Phase 6b (Cross-View-Parität): Filter-Panel-Optik (Header/Titel/Hint/Checkbox-
   Toggle) + Leisten-Helligkeit + kontrast-hell-Pendants wörtlich aus dem Inline-
   Block des Listen-Cores übernommen.
   em/rem, kein px (Projektkonvention; SVG-Maße = unitless user units). Cache-Bust: ?v=18.
   Farbwelt: Primary #0070C0/#005a9e/#004578, Mint #A9F6DB/#DFFDF2, Zweitakzent
   Apricot #ffb59e (hell) / #b33e19 (Kontrast-hell-Modus) — Anwender-Entscheid
   2026-07-25, loest das fruehere Amber #E8A33D/#f5d564/#c77b14 ab.
   Politur 1 (?v=9, „Farbwelt Zinsgebirge"): Chart-Bühne in die Festgeld-Farbwelt
   überführt — .kb-chartkarte normal jetzt HELL (#dcebf8 / Rahmen #b9cfe2), Intro-Satz
   weiß über der Bühne (Festgeld .zg-intro), Einstellungsblock in Bestands-Reihenfolge
   (weitere-Filter-Button vor der Kontrollzeile, profil-beschreibung angeglichen). Die
   Serienfarben/Chart-Chrome liegen in der Engine (brokerage-diagramm-race.js ?v=6).
   Politur 2 (?v=10, „Detailpanel + Punkte"): (1) Detailansicht auf den großflächigen
   Girokonto-Stil — body-level Overlay (.kb-overlay) + Glas-Panel (.kb-panel, 34em von
   rechts / mobil Bottom-Sheet), Desktop UND Mobil modal; der Template-Klon lebt jetzt im
   Panel statt im Ranking-Aside (alte .kb-ranking.kb-zeigt-detail-/Sheet-Regeln ersetzt).
   (2) Ranking-Aside auf Blau-Glas (rgba(9,87,143,0.92)); Bewertung von Sternen auf Punkte
   (.kb-punkt, Apricot #ffb59e). (3) Hinweis-Abstand + Bindestriche. (4) Toggle-Form wie die
   Anlegerprofil-Pills (.laufzeit-pill). (5) Slider Mint-Akzent + Kipp-Banner neutral-info.
   Politur 3 (?v=11, „Detailpanel-Feinschliff + EUR"): (1) Bereichsüberschriften bündig
   (h3-padding-Leak) + mehr Luft davor, (2) Fußnoten-Abstand, (3) Close-Button frei von
   der Bewertung, (4) CTA in Bestands-Optik (.anbieter-link), (5) Erfahrungsberichte-
   Glyphe auf Zeilenmaß, (6) Ranking-Legende mehr Abstand; EUR-Schreibweise in der
   Engine (?v=8).
   Politur 4 (?v=12, „Panel-Nachschliff"): (1) EB-Glyphe pointer-events:none (Klick-
   Fehlleitung auf die Reiterleiste, Girokonto-DE-Muster), (2) Bereichs-Abstände +1.5em
   (Überschriften 2.25em, Reiterband margin-top 1.5em), (3) CTA rechtsbündig,
   (4) Anbietername im Panel-Kopf immer weiß (Serienfarben-Einfärbung raus, Engine ?v=9).
   Politur 5 (?v=13, „Entkasten + Panel-Fixes"): (1) Kipp-Banner ohne Kasten als
   schlichter Absatz unterm Intro, (2) Panel overflow-x:hidden (5px Phantom-scrollWidth
   der EB-Zeile), (3) .kb-kriterium auto/1fr (TAN-Verfahren-Umbruch), (4) 3em vor den
   Fußnoten, (5) .kb-detail-tab-titel entfernt (Reiter beschriftet den Bereich).
   Politur 6 (?v=14, „Inline-Kipp + Farben"): (1) Kipp-Text als <span> IM Intro-Absatz
   (ohne neue Zeile, erbt Typo/Farbe), (2) Live-Zeile in Girokonto-heatmap-1-Mint
   rgba(169,246,219,0.28) / hell rgba(0,112,192,0.16) statt Amber, (3) Marke-Badge
   ohne Halo (Engine ?v=10).
   Politur 7 (?v=15, „Pin-Politur + Stufen-Icon"): (1) .kb-detail-pin border-radius
   999px -> 0.35em (weniger Rundung, Anwender-Entscheid); Kleinschreibung anheften/
   angeheftet-Toggle + Pin-Limit-Aufhebung + „noch nicht"-Kipp-Text in der Engine
   (?v=11), Stufen-Icon (kb-view-icon) im PHP-Core.
   Politur 10 (?v=16, „Ranking breiter"): .kb-buehne-Spalte 310px -> 341px (+10%
   Ranking-Panel auf Anwender-Wunsch; Chartkarte minmax(0,1fr) entsprechend schmaler).
   Politur 11 (?v=17, „Anzeige-Gruppe + Ranking-Luft"): Anzeige-Toggle als Zwei-
   Knopf-Gruppe (gewählt = weiß, .kb-top5-toggle-Sonderregeln entfernt, Engine ?v=15);
   .kb-rang-kopf margin-bottom 0.5em -> 1.5em.
   Politur 12 (?v=18, „Ranking-Zeilen-Luft"): .kb-rang-haupt vertikales Padding
   0.34em -> 0.55em (Anbieter-Zeilen wirkten gedrängt).
   ========================================================================== */

/* --- Intro-Satz (Politur 1: an die Festgeld-Position unmittelbar vor die Bühne
       gezogen; Optik exakt nach Festgeld .zg-intro — weiß auf dem blauen Dashboard-
       Grund, kontrast-hell #003A66 unten). --------------------------------------- */
.kurvenblick-dashboard .kb-intro {
    margin: 0.24rem 0 0.96rem;
    max-width: 44em;
    font-size: 0.96rem;
    line-height: 1.4;
    color: #ffffff;
}

/* --- Profil-Beschreibung (Bestands-Parität Liste/Tabelle Brokerage DE) ---- */
.kurvenblick-dashboard .profil-beschreibung {
    font-size: 0.82rem;
    color: var(--text-secondary, #aab);
    line-height: 1.5;
    margin: 0.5em auto 2.5em;
    text-align: center;
    max-width: 44em;
}

/* --- Diagramm-Kontrollzeile ---------------------------------------------- */
.kb-kontrollzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75em 1.5em;
    /* Politur 1: Kontrollzeile sitzt jetzt HINTER dem „weitere Filter"-Button
       (Bestands-Reihenfolge) — margin-top setzt den sichtbaren Abstand zum
       Filter-Block (kollabiert mit dessen 1.6em-Unterrand). */
    margin: 1.75em 0 1.25em;
    padding: 0.85em 1em;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.kb-control {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    min-width: 9em;
}
.kb-control-volumen,
.kb-control-trades { flex: 1 1 14em; }
.kb-control[data-inaktiv="1"] { opacity: 0.45; }
.kb-control-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mint, #A9F6DB);
}
.kb-control-wert {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
/* Politur 2: Slider-Akzent auf Mint (var(--mint, #A9F6DB) wie Z.84, konsistent zur
   Bühnen-Farbwelt). kontrast-hell setzt unten ein dunkleres Teal (heller Mint auf
   weißer Fläche wäre kontrastschwach). */
.kb-slider { width: 100%; accent-color: var(--mint, #A9F6DB); cursor: pointer; }
.kb-slider:disabled { cursor: default; }

/* Modus-Toggle (pro Order / pro Jahr) + Top5/Alle-Toggle. Politur 2: FORM der
   Anlegerprofil-Pills .laufzeit-pill (vergleich.min.css) übernommen — dort
   border-radius:calc(var(--radius-md) - 2px)=10px, padding:var(--space-sm)
   var(--space-md)=8px 16px (gemessen: --radius-md 12px, --space-sm 8px, --space-md
   16px). Hier als rem (10px=0.625rem, 8/16px=0.5rem/1rem) statt px-Literal
   (Projektkonvention). Farben der Toggles unverändert. Container-Radius passend zur
   Button-Form (0.75rem = --radius-md). */
.kb-toggle-group {
    display: inline-flex;
    padding: 0.15em;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
}
/* Politur 11: der Anzeige-Toggle ist eine Zwei-Knopf-Gruppe (.kb-toggle-btn.kb-top5-btn)
   im Muster des Kosten-Toggles — die früheren .kb-top5-toggle-Sonderregeln
   (Ein-Knopf-Umschalter, data-top5-Färbung) sind entfernt. */
.kb-toggle-btn {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;
    background: transparent;
    color: #eaf4ff;
}
.kb-toggle-btn.active { background: #fff; color: var(--primary-dark, #005a9e); }
.kb-toggle-btn:focus-visible,
.kb-slider:focus-visible { outline: 2px solid var(--mint-hell, #DFFDF2); outline-offset: 2px; }

/* --- Kipp-Punkt-Text (aria-live) -----------------------------------------
   Politur 5: Kasten entfernt; Politur 6: als <span> in den kb-intro-Absatz gezogen
   (Anwender: ohne neue Zeile direkt am Intro-Satz) — Typo/Farbe erben vom Intro,
   auch im Hell-Modus. Nur die hidden-Mechanik braucht noch CSS. Der Amber-Kipp-
   PUNKT/Marker im Chart kommt aus der Engine-Palette (seit Politur 13 Mint). */
.kb-kipp-banner[hidden] { display: none; }

/* --- Bühne: Chartkarte (links) + Ranking/Detail-Aside (rechts, 341 px —
       Politur 10: +10% Ranking-Breite auf Anwender-Wunsch, vorher 310 px;
       die Chartkarte (minmax(0,1fr)) wird entsprechend schmaler) ---- */
.kb-buehne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 341px;
    gap: 1.25em;
    align-items: start;
}
.kb-chartkarte {
    position: relative;
    min-height: 22em;
    border-radius: 0.375rem;
    /* Politur 1 „Farbwelt Zinsgebirge": helle Festgeld-Bühne (#dcebf8) statt des
       früheren dunklen Navy-Panels — die Serienfarben sind in der Engine auf
       dark-on-light umgestellt (PAL + Markenpalette). Werte 1:1 aus der Festgeld-
       Bühne (.zinsgebirge-svg): Grund #dcebf8, Rahmen #b9cfe2, radius 0.375rem.
       kontrast-hell bleibt weiß (unten). */
    background: #dcebf8;
    border: 0.0625em solid #b9cfe2;
    padding: 0.75em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kb-chart { width: 100%; height: auto; display: block; touch-action: pan-y; }
/* Scrubber-Interaktion (Phase 3): freie Fläche = Marke ziehen, Kurve = Detail öffnen. */
.kb-fang { cursor: ew-resize; }
.kb-marke-griff { cursor: ew-resize; }
.kb-hit { cursor: pointer; }
.kb-chart-platzhalter {
    text-align: center;
    /* Politur 1: liegt AUF der hellen Chartkarte -> dunkler Text (wie kontrast-hell). */
    color: #4a5a68;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0.75em auto 0;
    max-width: 26em;
}
.kb-ranking {
    min-height: 22em;
    /* min-width:0: als Grid-Item sonst min-width:auto (= min-content) → sehr lange
       Anbieternamen würden die Ranking-Spalte über den Viewport treiben (die vorhandene
       .kb-rang-name-Ellipsis greift erst, wenn das Item schrumpfen darf). Robustheit
       gegen überlange Namen; reale Namen sind unberührt. */
    min-width: 0;
    /* Leak-Reset gegen die unscoped aside-Regeln der zentralen style.css (width:25% /
       float:left / margin:9em … 5% / font-size:.9em; in deren Media-Stufen zudem
       width:84–105%, position:relative + left:-3%, padding-top:10em, background):
       dieses Aside ist Grid-Item der .kb-buehne, NICHT die Site-Sidebar. Live-Befund
       Phase 6 (18.07.2026): Ranking auf 25% der 310px-Spalte gequetscht, Namen auf 0px.
       Klassen-Spezifität schlägt die Typ-Selektoren in allen Media-Stufen. (Politur 2:
       das Detailpanel ist jetzt ein eigenes body-level Overlay, das Ranking bleibt hier.) */
    width: auto;
    float: none;
    flex: none;
    margin: 0;
    position: static;
    left: auto;
    font-size: 1em;
    line-height: 1.5;
    border-radius: 0.6rem;
    /* Politur 2 (Anwender-Entscheid): Ranking-Aside = dasselbe Blau-Glas wie das
       Detailpanel (rgba(9,87,143,0.92)); Rand in der Panel-Mint-Familie
       (rgba(76,181,160,0.45)) für einen stimmigen Glas-Verbund. Helle Schrift
       bleibt. kontrast-hell-Pendant unten deckend hell. */
    background: rgba(9, 87, 143, 0.92);
    border: 1px solid rgba(76, 181, 160, 0.45);
    padding: 0.75em;
}
.kb-ranking:empty::before {
    content: "Das Ranking wird geladen. Ohne JavaScript steht die vollständige Tabelle unten.";
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ==========================================================================
   CHART-ENGINE (Phase 2): Kurven-Panorama in .kb-chart (viewBox 960x540).
   NUR farbfreie Optik — Strichstärken (unitless = SVG user units, skalieren mit
   viewBox, kein px), Opazität, Typo-Familie. Alle Chart-FARBEN liefert die Engine
   als Inline-SVG-Attribute (E8), damit sie pro Palette/Kontrast-Modus umschaltbar
   bleiben; Schriftgrößen setzt die Engine ebenfalls als SVG-Attribute (user units).
   ========================================================================== */
.kb-chart text { font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
.kb-achse-text { font-variant-numeric: tabular-nums; }
.kb-achse-einheit { font-weight: 600; }
.kb-kurve { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.kb-kurve--hi { stroke-width: 2.6; }
.kb-kurve--grau { stroke-width: 1.5; }
.kb-kurve--geist { stroke-width: 1.2; opacity: 0.28; }
.kb-nulllinie { stroke-width: 1; }
.kb-gitter-linie { stroke-width: 1; }
.kb-marke-linie { stroke-width: 1.6; stroke-dasharray: 4 4; }
.kb-marke-badge { font-weight: 700; font-variant-numeric: tabular-nums; }
.kb-label-text { font-weight: 600; }
.kb-label-chip { stroke: none; }
.kb-leader { stroke-width: 1; opacity: 0.5; }

/* Platzhalter ausblenden, sobald die Engine gezeichnet hat (No-JS bleibt über den
   <noscript>-Style im Core unberührt; dort greift kb-hat-chart nie). */
.kb-chartkarte.kb-hat-chart .kb-chart-platzhalter { display: none; }

/* --- „weitere Filter"-Overlay-Schale: Öffnen/Schließen-Mechanik + Panel/Backdrop/Close.
       Die Bestands-Schale liegt in tabelle.min.css — das Diagramm lädt sie NICHT (nur
       style.css + vergleich.min.css + dieses CSS), daher hier self-contained (Phase-3-Fix
       einer Phase-1-Lücke). Panel = dunkles Glas wie im Bestand (rgba(9,87,143,.92));
       Inhalt hell (Farben unten). ---------------------------------------------- */
.anpassen-overlay { display: none; }
.anpassen-overlay.open { display: block; }
.anpassen-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 100; opacity: 0; transition: opacity 125ms ease; }
.anpassen-overlay.open .anpassen-backdrop { opacity: 1; }
.anpassen-panel {
    position: relative; z-index: 101; width: 90%; max-width: 40rem; margin: -3em auto 1em;
    background: rgba(9, 87, 143, 0.92); backdrop-filter: blur(1.25em); -webkit-backdrop-filter: blur(1.25em);
    border-radius: 0.75em; padding: 1.75em 1.5em 1.25em; border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 0.5em 2.5em rgba(0, 0, 0, 0.35), 0 0.125em 0.5em rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0; transform: translateY(-0.75em); transition: opacity 125ms ease, transform 125ms ease; color: #eaf4ff;
}
.anpassen-overlay.open .anpassen-panel { opacity: 1; transform: translateY(0); }
.panel-close-btn {
    position: absolute; top: 0; right: 0; width: 1.85em; height: 1.85em; padding: 0;
    background: rgba(48, 55, 61, 0.85); color: rgba(255, 255, 255, 0.85); border: none;
    border-top-right-radius: 0.5em; font-size: 1.5rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 102;
}
.panel-close-btn:hover, .panel-close-btn:focus { background: rgba(61, 69, 76, 0.85); color: #fff; outline: none; }
@media (max-width: 38em) { .anpassen-panel { width: 95vw; max-width: none; margin: -3em 0 1em calc(50% - 47.5vw); } }

/* --- „weitere Filter"-Panel: Sektionen (Inhalt hell auf dem dunklen Glas-Panel) -- */
.anpassen-filter-section { display: flex; flex-direction: column; gap: 0.4em; }
.anpassen-filter-section + .anpassen-filter-section { margin-top: 1.25em; }
/* Panel-Optik = WÖRTLICHE Bestands-Parität (Cross-View-Befund Phase 6): Header/
   Titel/Hint/Checkbox-Toggle 1:1 aus dem Inline-Block des Listen-Cores
   (brokerage-vergleich-core.inc.php Z.692–763) übernommen — die frühere Mint-
   Eigenoptik beruhte auf der falschen Prämisse, .sidebar-filter-* sei diagramm-
   eigen. px-Werte (35/21/14px, 0.5px) sind Bestands-Zitat, keine Neueinführung. */
.sidebar-filter-header {
    display: block;
    font-size: 0.7rem;
    padding-bottom: 0.5em;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0.625em;
}
.sidebar-filter-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary, #aab);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.375em;
}
.sidebar-filter-hint {
    display: block;
    font-size: 0.65rem;
    color: rgba(170, 170, 187, 0.7);
    margin-bottom: 0.5em;
    line-height: 1.4;
}
.sidebar-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0;
    min-height: 2.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #aab);
    cursor: pointer;
    transition: color 150ms ease;
    line-height: 1.35;
}
.sidebar-filter-checkbox:hover {
    color: var(--text-primary, #fff);
}
.sidebar-filter-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 35px;
    height: 21px;
    min-width: 35px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    background: rgba(0,82,141,0.4);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 150ms ease;
}
.sidebar-filter-checkbox input[type="checkbox"]:checked {
    background: rgba(0,82,141,0.4);
    border-color: rgba(0,82,141,0.4);
}
.sidebar-filter-checkbox input[type="checkbox"]:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #fff;
    font-weight: 700;
}
.sidebar-filter-checkbox input[type="checkbox"]:hover {
    border-color: rgba(255,255,255,0.7);
}
.sidebar-filter-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid #DFFDF2;
    outline-offset: 0.125em;
}
/* Leisten-Helligkeit in Bestands-Parität (Liste/Tabelle heben die Basis-Optik
   der vergleich.min.css per Inline-Block auf 0.85 an — hier identisch). */
.vergleich-dashboard .laufzeit-pill { color: rgba(255,255,255,0.85); }
.vergleich-dashboard .laufzeit-pill:hover { color: var(--text-primary, #fff); }
.vergleich-dashboard .laufzeit-pill.active { color: var(--primary-darker, #004578); }
.vergleich-dashboard .filter-label { color: rgba(255,255,255,0.85); }
@media (max-width: 38em) {
    .sidebar-filter-title { font-size: 0.65rem; }
    .sidebar-filter-hint { font-size: 0.6rem; }
}
/* kontrast-hell-Pendants (Bestands-Zitat, Listen-Core Z.923–965) */
#vergleich.kontrast-hell .vergleich-dashboard .laufzeit-pill { color: #003A66; }
#vergleich.kontrast-hell .vergleich-dashboard .laufzeit-pill:hover { background: rgba(0,82,141,0.08); color: #003A66; }
#vergleich.kontrast-hell .vergleich-dashboard .laufzeit-pill.active { background: #0070C0; color: #fff; }
#vergleich.kontrast-hell .vergleich-dashboard .filter-label { color: #003A66; }
#vergleich.kontrast-hell .sidebar-filter-hint { color: #404040; }
#vergleich.kontrast-hell .sidebar-filter-checkbox input[type="checkbox"] { border-color: rgba(0,82,141,0.5); background: #fff; }
#vergleich.kontrast-hell .sidebar-filter-checkbox input[type="checkbox"]:hover { border-color: #0070C0; }
#vergleich.kontrast-hell .sidebar-filter-checkbox input[type="checkbox"]:checked { background: #0070C0; border-color: #0070C0; }
#vergleich.kontrast-hell .sidebar-filter-checkbox input[type="checkbox"]:focus-visible { outline-color: #0070C0; }
.sidebar-ordergroesse-label { font-size: 0.78rem; font-weight: 600; color: var(--mint, #A9F6DB); }
.sidebar-ordergroesse-row { display: flex; gap: 0.5em; align-items: center; }
.sidebar-ordergroesse-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4em 0.6em;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.3rem;
    font: inherit;
    font-size: 0.85rem;
    background: #fff;
    color: #10314f;
}
.sidebar-ordergroesse-btn {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45em 0.8em;
    border-radius: 0.3rem;
    background: var(--primary, #0070C0);
    color: #fff;
}
.sidebar-ordergroesse-btn--entfernen { background: transparent; color: #cfe0f0; text-decoration: underline; padding: 0.2em 0.3em; }
.sidebar-ordergroesse-aktiv-zeile { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; margin-top: 0.4em; }
.sidebar-ordergroesse-aktiv { font-size: 0.8rem; font-weight: 600; color: var(--mint, #A9F6DB); }

/* --- Detailpanel-Templates (Grundoptik; Klon lebt im Ranking-Aside) ------- */
.kb-detail { display: flex; flex-direction: column; gap: 0.9em; font-size: 0.85rem; }
.kb-detail-kopf { display: flex; flex-direction: column; gap: 0.15em; }
.kb-detail-anbieter { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; }
.kb-detail-produkt { margin: 0; color: rgba(255, 255, 255, 0.8); }
.kb-sterne { display: inline-flex; align-items: center; gap: 0.25em; margin-top: 0.2em; }
.kb-sterne-text { margin-left: 0.4em; font-size: 0.78rem; color: rgba(255, 255, 255, 0.8); }
/* Politur 2 (Anwender-Entscheid): Bewertung als PUNKTE statt Sterne (Kreis-Symbole
   wie im Girokonto-Detailpanel). Apricot #ffb59e = zweite Akzentfarbe. Genutzt von
   BEIDEN Renderern (PHP kbRenderSterne für den Panel-Kopf, JS punkteHtml fürs
   Ranking). Die visuellen Punkte sind aria-hidden; die Textalternative liefert die
   Container-aria-label bzw. der sichtbare „n/3"-Text. kontrast-hell unten. */
.kb-punkt { display: inline-block; width: 0.625em; height: 0.625em; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.kb-punkt-an { background: #ffb59e; }
.kb-punkt-aus { background: rgba(255, 255, 255, 0.22); }
.kb-orderpreis-tabelle { width: 100%; border-collapse: collapse; }
.kb-orderpreis-tabelle th,
.kb-orderpreis-tabelle td { text-align: left; padding: 0.3em 0.4em; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.kb-orderpreis-tabelle th { font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.kb-orderpreis-tabelle td { text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
/* Politur 6: Hervorhebung in der Girokonto-heatmap-1-Farbe (vergleich-girokonto-…,
   Zeile "monatlicher Kontopreis": mint rgba(169,246,219,0.28); hell unten
   rgba(0,112,192,0.16)) statt Amber. */
.kb-live-zeile { background: rgba(169, 246, 219, 0.28); font-weight: 700; }
.kb-live-zeile[hidden] { display: none; }
.kb-detail-jahr-fussnote,
.kb-detail-zusatzinfo { margin: 0; font-size: 0.76rem; line-height: 1.45; color: rgba(255, 255, 255, 0.72); }
/* Politur 3: Fußnote rückt von der Orderpreis-Tabelle ab; Politur 5: 3em Abstand
   vor den Fußnoten (Zusatzinfo: 2.1em + 0.9em Flex-gap = sichtbar ebenfalls 3em). */
.kb-detail-jahr-fussnote { margin-top: 3em; }
.kb-detail-zusatzinfo { margin-top: 2.1em; }
/* Politur 4: margin-top trennt das Reiterband vom Orderpreis-Bereich darüber
   (zusätzlich zum .kb-detail-Flex-gap 0.9em). */
.kb-detail-tabs { display: flex; flex-direction: column; gap: 0.75em; margin-top: 1.5em; }
/* Politur 5: die .kb-detail-tab-titel-Überschriften (Depotverwaltung, Service, …)
   sind ENTFERNT (Core-Template) — der aktive Reiter (unterstrichenes Icon +
   Beschriftung) macht den Bereich bereits kenntlich. Die h3-Leak-/Abstands-Historie
   (Politur 3/4) lebt in .kb-detail-abschnitt-titel unten weiter. */
.kb-kriterien { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.3em; }
/* Politur 5: Spalten auto/1fr statt 1fr/auto — bei langen Werten (z.B. TAN-Verfahren-
   Text) quetschte der auto-Wert das Label auf min-content („TAN-/Verfahren"-Umbruch).
   Jetzt behält das Label seine natürliche Breite, der rechtsbündige Wert bricht um. */
.kb-kriterium { display: grid; grid-template-columns: auto 1fr; gap: 0.5em; align-items: baseline; }
.kb-kriterium dt { margin: 0; color: rgba(255, 255, 255, 0.72); }
.kb-kriterium dd { margin: 0; text-align: right; color: #fff; }
/* Politur 3: Erfahrungsberichte-Glyphe (DB-Wert: <a class="iframe"><i class="icon
   icon-chat-empty"></i></a>) — die zentrale .icon-Regel der style.css (font-size:3em,
   position:absolute, margin-left:-1.6em) schob das Fontello-Icon aus der Zeile; das
   Panel liegt seit Politur 2 außerhalb der Dashboard-Resets. Bestands-Gegenstück:
   .merkmal-wert .iframe .icon im Tabelle-/Liste-Core; hier zusätzlich auf Zeilenmaß. */
.kb-detail .kb-kriterium .icon { position: static; margin-left: 0; font-size: 1.3em; line-height: 1; color: var(--mint, #A9F6DB); pointer-events: none; }
/* Politur 4: pointer-events:none (Girokonto-DE-Muster) — das Icon-Font-<i> gewann den
   Klick-Test teils weit außerhalb seiner sichtbaren Box (Reiterklicks landeten in den
   Erfahrungsberichten). Der umschließende EB-Link <a class="iframe"> bleibt klickbar. */
/* Politur 3: Optik des "zum Anbieter"-Links aus der Tabellen-/Listenansicht übernommen
   (vergleich.min.css .vergleich-dashboard .anbieter-link + .link-arrow; gemessene
   Var-Werte accent #A9F6DB, accent-light #DFFDF2, primary-darker #004578, Padding
   8px/24px, Radius 8px, Schrift 13px/600 — als rem, da die Dashboard-Variablen das
   body-level Panel nicht erreichen). a-Präfix nötig: a:link der style.css (0,1,1)
   schlägt sonst die reine Klassen-Farbe. */
a.kb-detail-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-end; /* Politur 4: rechtsbündig (wie der Bestands-anbieter-link-container) */
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    background: var(--mint, #A9F6DB);
    color: #004578;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
a.kb-detail-cta:hover { background: var(--mint-hell, #DFFDF2); color: #004578; }
.kb-cta-pfeil {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.125rem; height: 1.125rem; padding-bottom: 0.0625rem;
    background: #004578; color: #ffffff; border-radius: 50%;
    font-size: 0.75rem; line-height: 1; margin-left: 0.375rem;
    position: relative; top: -0.1875rem;
}

/* ==========================================================================
   PHASE 3 — INTERAKTION: Ranking-Liste, Detailpanel-Chrome, Icon-Tabs, Pins.
   (Chip-/Anbieter-Farben setzt die Engine inline aus der Serienpalette — hier nur
   Layout/Neutraloptik. Chart-Farben bleiben E8-inline.)
   ========================================================================== */

/* --- Ranking (aria-live-Text-Zwilling, FLIP-animiert) -------------------- */
/* Politur 11: margin-bottom 0.5em -> 1.5em (Anwender: +1em Abstand nach der Überschrift). */
.kb-rang-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5em; margin: 0 0 1.5em; }
.kb-rang-titel { margin: 0; font-size: 0.95rem; font-weight: 700; color: #fff; }
.kb-rang-treffer { margin: 0; font-size: 0.74rem; font-weight: 600; color: var(--mint, #A9F6DB); white-space: nowrap; }
.kb-rang-liste { list-style: none; margin: 0; padding: 0; }
.kb-rang-zeile { display: flex; align-items: center; gap: 0.15em; transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); }
.kb-rang-haupt {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.5em;
    border: 0; background: transparent; cursor: pointer; font: inherit; text-align: left;
    /* Politur 12: vertikal 0.34em -> 0.55em (Anwender: Zeilen wirkten gedrängt). */
    padding: 0.55em 0.35em; border-radius: 0.3rem; color: #eaf4ff;
}
.kb-rang-haupt:hover { background: rgba(255, 255, 255, 0.08); }
.kb-rang-haupt:focus-visible { outline: 2px solid var(--mint-hell, #DFFDF2); outline-offset: 1px; }
.kb-rang-nr { width: 1.4em; text-align: right; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.6); flex: none; }
.kb-rang-chip { width: 0.72em; height: 0.72em; border-radius: 0.125em; flex: none; }
.kb-rang-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.86rem; }
.kb-rang-wert { font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.kb-rang-sterne { display: inline-flex; align-items: center; gap: 0.25em; flex: none; }
.kb-rang-pin {
    flex: none; border: 0; background: transparent; cursor: pointer; padding: 0.3em; border-radius: 0.3rem;
    color: rgba(255, 255, 255, 0.4); line-height: 0;
}
.kb-rang-pin:hover { color: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.08); }
.kb-rang-pin:focus-visible { outline: 2px solid var(--mint-hell, #DFFDF2); outline-offset: 1px; }
.kb-rang-pin.kb-pin-an { color: var(--apricot, #ffb59e); }
.kb-pin-icon { width: 1em; height: 1em; display: block; }
/* Politur 2: mehr Abstand nach oben (0.6em -> 1.1em); Politur 3: -> 1.6em. */
.kb-rang-hinweis { margin: 1.6em 0 0; padding-top: 0.5em; border-top: 1px dashed rgba(255, 255, 255, 0.18); font-size: 0.72rem; line-height: 1.45; color: rgba(255, 255, 255, 0.62); }

/* --- style.css-Leak-Schutz (VRT-Befund B3) --------------------------------
   Die global schwach gescopte Regel `aside p { height:8–9.5em; padding:2.5em…8em;
   text-align:center; margin-top:5em }` in style.css (gedacht für eine fremde Service-
   Sidebar) trifft ALLE <p> in unserem <aside class="kb-ranking"> — mobil blähte das den
   Detail-Sheet-Kopf auf ~282px (Anbieter/Produkt je ~130–160px statt einer Textzeile).
   Innerhalb des Dashboards neutralisieren; die .kb-*-Klassen liefern Größe/Farbe/Marge.
   Der Hinweis-Separator (border-top + padding-top) wird danach höher-spezifisch
   wiederhergestellt. Nur Chart-Farben bleiben Engine-inline (E8) — dies ist Chrome-CSS. */
.kurvenblick-dashboard .kb-ranking p { height: auto; margin: 0; padding: 0; border: 0; text-align: left; }
.kurvenblick-dashboard .kb-ranking p.kb-rang-hinweis { margin-top: 1.6em; padding-top: 0.5em; border-top: 1px dashed rgba(255, 255, 255, 0.18); }

/* --- Detailpanel: body-level Overlay + Glas-Panel (Girokonto-Muster, Politur 2) ---
   Der Template-Klon (.kb-detail) lebt jetzt in #kbPanelBody statt im Ranking-Aside;
   das Ranking bleibt beim Öffnen unverändert stehen. Desktop UND Mobil modal. Optik
   1:1 aus dem Girokonto-Panorama-Panel (.panorama-overlay/.panorama-panel). Die
   Detail-INHALTS-Styles (.kb-detail-*, Orderpreis-Tabelle, Tabs, Kopf, Pin) stehen
   unverändert weiter unten/oben und greifen im Panel (waren bereits für den Grund
   rgba(9,87,143,0.92) gestaltet). */
.kb-overlay {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(9, 30, 48, 0.5);
    /* visibility (nicht display) macht den Panel-Ein-/Ausflug transitionierbar und
       unterdrückt zugleich das Hit-Testing (Girokonto-Lehre). */
    visibility: hidden; opacity: 0;
    transition: opacity 0.24s ease-out, visibility 0s linear 0.24s;
}
.kb-overlay[data-offen] {
    visibility: visible; opacity: 1;
    transition: opacity 0.24s ease-out, visibility 0s linear 0s;
}
.kb-panel {
    position: absolute; top: 0; right: 0; height: 100%; width: 34em; max-width: 100%;
    box-sizing: border-box; margin: 0; padding: 1.5em 1.5em 2em;
    /* Politur 5: overflow-x hidden — Chrome meldete 5px Phantom-scrollWidth (Grid-
       Artefakt der Erfahrungsberichte-Zeile; KEIN Element ragt real über die
       Content-Kante, per Element-Scan verifiziert) → sichtbare h-Scrollbar am
       Panel-Fuß. Nichts Echtes wird geclippt. */
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    background: rgba(9, 87, 143, 0.92);
    -webkit-backdrop-filter: blur(1.25em); backdrop-filter: blur(1.25em);
    border-left: 0.0625em solid rgba(76, 181, 160, 0.45);
    box-shadow: -0.5em 0 2em rgba(0, 26, 48, 0.4);
    color: #ffffff;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.kb-overlay[data-offen] .kb-panel { transform: translateX(0); }
.kb-panel:focus { outline: none; }

/* Schließen-Knopf (im Template, .kb-detail-kopf ist position:relative). Politur 2:
   Girokonto-Optik — abgerundetes Quadrat, randlos, transluzentes Weiß, oben rechts. */
.kb-detail-kopf { position: relative; }
.kb-detail-close {
    position: absolute; top: 0; right: 0; width: 2.1em; height: 2.1em; padding: 0;
    border: 0; background: rgba(255, 255, 255, 0.16); color: #ffffff; border-radius: 0.5em;
    font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 130ms ease;
}
.kb-detail-close:hover { background: rgba(255, 255, 255, 0.30); color: #fff; }
.kb-detail-close:focus-visible { outline: 0.125em solid #ffffff; outline-offset: 0.125em; }
/* Politur 3: padding-right 2.5em -> 3.6em — der 2.1em-Close-Knopf (font-size 1.1rem
   = 2.31rem) plus Panel-Scrollbar überdeckte sonst die rechtsbündige Bewertung. */
.kb-detail-kopf-haupt { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6em; padding-right: 3.6em; }
.kb-detail-titel { min-width: 0; }
.kb-detail-pin {
    display: inline-flex; align-items: center; gap: 0.35em; margin-top: 0.15em;
    border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: rgba(255, 255, 255, 0.8);
    border-radius: 0.35em; padding: 0.25em 0.7em; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.kb-detail-pin:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.kb-detail-pin:focus-visible { outline: 2px solid var(--mint-hell, #DFFDF2); outline-offset: 2px; }
.kb-detail-pin.kb-pin-an { background: var(--apricot, #ffb59e); border-color: var(--apricot, #ffb59e); color: #3a2a06; }
.kb-detail-pin .kb-pin-icon { width: 0.95em; height: 0.95em; }
/* Politur 3: padding:0 neutralisiert das h3-Leak der style.css (h3 { padding: 0 5% }
   rückte die Überschrift ein). Politur 4: margin-top 0.75em -> 2.25em (Anwender:
   +1.5em). Politur 5: einzige verbliebene Bereichsüberschrift im Panel (die
   .kb-detail-tab-titel sind entfernt — der aktive Reiter beschriftet den Bereich). */
.kb-detail-abschnitt-titel { margin: 2.25em 0 0.4em; padding: 0; font-size: 0.82rem; font-weight: 700; color: var(--mint, #A9F6DB); }

/* --- Detailpanel: Icon-Tab-Leiste (5 Gruppen, ein Panel sichtbar) --------- */
.kb-tablist { display: flex; gap: 0.2em; border-bottom: 1px solid rgba(255, 255, 255, 0.14); margin-bottom: 0.75em; }
.kb-tab {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.2em;
    border: 0; background: transparent; cursor: pointer; font: inherit; color: rgba(255, 255, 255, 0.7);
    padding: 0.4em 0.15em 0.5em; border-bottom: 2px solid transparent; border-radius: 0.3rem 0.3rem 0 0;
}
.kb-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.kb-tab:focus-visible { outline: 2px solid var(--mint-hell, #DFFDF2); outline-offset: -2px; }
.kb-tab.active { color: #fff; border-bottom-color: var(--mint, #A9F6DB); }
.kb-tab-icon { display: inline-flex; }
.kb-tab-icon svg { width: 1.3em; height: 1.3em; }
/* Labels brechen im schmalen Aside auf 2 Zeilen um (overflow-wrap:anywhere senkt die
   min-content-Breite → der Flex-Tab darf schrumpfen und der Text umbrechen). */
.kb-tab-label { font-size: 0.6rem; font-weight: 600; line-height: 1.1; text-align: center; overflow-wrap: anywhere; hyphens: manual; }
.kb-detail-tabpanel { animation: kb-tab-fade 0.2s ease; }
.kb-detail-tabpanel[hidden] { display: none; }
@keyframes kb-tab-fade { from { opacity: 0; } to { opacity: 1; } }

/* --- prefers-reduced-motion: Hartschnitt statt FLIP/Fade ----------------- */
@media (prefers-reduced-motion: reduce) {
    .kb-rang-zeile { transition: none; }
    .kb-detail-tabpanel { animation: none; }
}

/* --- Compliance-Fußzeile + Datenstand ------------------------------------ */
.kb-compliance { margin: 1.5em auto 0; max-width: 60em; }
.kb-disclaimer { font-size: 0.72rem; line-height: 1.5; color: rgba(255, 255, 255, 0.6); margin: 0 0 0.4em; }
.kb-datenstand { font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); margin: 0; }

/* --- „weitere Filter"-Button in der filter-aktion-zeile -------------------
   Bestands-Parität: Liste + Tabelle neutralisieren die Absolut-Position der
   .anpassen-filter-btn-Regel aus vergleich.min.css (position:absolute,
   bottom:-1.5em → ohne diese Regeln rutschte der Button ans Ende des
   Dashboards, Live-Befund Phase 6) per Inline-Core-Block. Hier identisch
   übernommen, gescoped auf das Kurvenblick-Dashboard. */
.kurvenblick-dashboard .filter-aktion-zeile { display: flex; justify-content: flex-end; padding-right: 1.25em; margin: -1em 0 1.6em; }
.kurvenblick-dashboard .filter-aktion-zeile .anpassen-filter-btn { position: relative; inset: auto; }

/* --- #hilfe: Diagramm-Glyphe (Kurvenzug) ---------------------------------
   Leak-Reset nach der zg-view-icon-Blaupause (diagramm-festgeld-core.inc.php
   Z.689–696): die zentrale .icon-Regel der style.css (font-family:fontello,
   font-size:3em, position:absolute, margin-left:-1.6em) schob das Inline-SVG sonst
   aus der current-Zelle (Live-Befund Phase 6: leeres Kästchen + daneben schwebende
   Glyphe). Größen-Kaskade wie die Fontello-Nachbarn: Basis 1.85em, ≤88em 1.3em,
   ≤72em 1.2em. */
#hilfe .kb-view-icon { display: block; position: static; margin: 0 auto; width: 1.3em; line-height: 1; font-size: 1.85em; }
#hilfe .kb-view-icon svg { width: 1.3em; height: 0.91em; vertical-align: -0.08em; display: inline-block; }
@media only screen and (max-width: 88em) {
    #hilfe .kb-view-icon { font-size: 1.3em; }
}
@media only screen and (max-width: 72em) {
    #hilfe .kb-view-icon { font-size: 1.2em; position: static; margin: 0; }
}

/* --- sr-only-Helfer + No-JS-/SEO-Fallback -------------------------------- */
.kb-visually-hidden,
.kb-fallback {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* Der <noscript>-Style im Core hebt .kb-fallback ohne JS wieder auf (§8). */
.kb-fallback caption { text-align: left; font-weight: 600; margin-bottom: 0.5em; }
.kb-fallback th,
.kb-fallback td { border: 1px solid #b9c6d3; padding: 0.3em 0.5em; text-align: left; font-size: 0.85rem; }
.kb-fallback-inaktiv { opacity: 0.55; }
/* .kb-fallback IST die <table> selbst → width:1px greift ohne display-Wechsel NICHT
   (Tabellen wachsen auf ihre min-content-Breite ~1518px; overflow:hidden clippt nur den
   Inhalt, nicht die Box-Breite → die absolut positionierte Tabelle treibt den Dokument-
   scrollWidth über jeden Viewport = Phantom-Seitwärts-Scroll, VRT-Befund B1). display:block
   macht die 1px-Klammerung wirksam. Der <noscript>-Override im Core stellt display:table
   wieder her (ohne JS volle Tabelle); im JS-Fall ist die Tabelle ohnehin aria-hidden. */
.kb-fallback { display: block; }

/* ==========================================================================
   HOCHKONTRAST-HELL-MODUS (#vergleich.kontrast-hell) — helle Flächen, dunkler Text.
   Spezifität ID+Klasse, kein !important.
   ========================================================================== */
#vergleich.kontrast-hell .kb-intro { color: #003A66; }
#vergleich.kontrast-hell .kb-kontrollzeile { background: rgba(0, 82, 141, 0.06); border-color: rgba(0, 82, 141, 0.18); }
#vergleich.kontrast-hell .kb-control-label { color: var(--primary-dark, #005a9e); }
#vergleich.kontrast-hell .kb-control-wert { color: #10314f; }
#vergleich.kontrast-hell .kb-toggle-group { background: rgba(0, 82, 141, 0.1); }
#vergleich.kontrast-hell .kb-toggle-btn { color: #10314f; }
#vergleich.kontrast-hell .kb-toggle-btn.active { background: #0070C0; color: #fff; }
/* Politur 2: Slider-Akzent im Hell-Modus dunkles Teal (heller Mint wäre auf weißer
   Fläche kontrastschwach); Farbfamilie des hell-Akzent-Grüns. */
#vergleich.kontrast-hell .kb-slider { accent-color: #0A6E58; }
#vergleich.kontrast-hell .kb-chartkarte { background: #fff; border-color: #b7c6d4; }
#vergleich.kontrast-hell .kb-chart-platzhalter { color: #4a5a68; }
/* Politur 2: Ranking-Aside im Hell-Modus deckend hell (weiß), dunkle Schrift, Rand
   #00528D-Familie — Gegenstück zum Blau-Glas im Normal-Modus. */
#vergleich.kontrast-hell .kb-ranking { background: #ffffff; border-color: rgba(0, 82, 141, 0.30); }
#vergleich.kontrast-hell .kb-ranking:empty::before { color: #5a6b7a; }
#vergleich.kontrast-hell .kb-detail-anbieter { color: #10314f; }
#vergleich.kontrast-hell .kb-detail-produkt { color: #3a4b5a; }
#vergleich.kontrast-hell .kb-sterne-text { color: #3a4b5a; }
#vergleich.kontrast-hell .kb-orderpreis-tabelle th { color: #3a4b5a; }
#vergleich.kontrast-hell .kb-orderpreis-tabelle td { color: #10314f; }
#vergleich.kontrast-hell .kb-orderpreis-tabelle th,
#vergleich.kontrast-hell .kb-orderpreis-tabelle td { border-bottom-color: rgba(0, 82, 141, 0.15); }
#vergleich.kontrast-hell .kb-live-zeile { background: rgba(0, 112, 192, 0.16); }
#vergleich.kontrast-hell .kb-kriterium dt { color: #3a4b5a; }
#vergleich.kontrast-hell .kb-kriterium dd { color: #10314f; }
#vergleich.kontrast-hell .kb-detail-jahr-fussnote,
#vergleich.kontrast-hell .kb-detail-zusatzinfo { color: #5a6b7a; }
#vergleich.kontrast-hell .kb-disclaimer { color: #404040; }
#vergleich.kontrast-hell .kb-datenstand { color: #5a6b7a; }

/* Phase 3 — Hell-Modus: Ranking + Detailpanel + Tabs auf hellen Flächen. */
#vergleich.kontrast-hell .kb-rang-titel { color: #10314f; }
#vergleich.kontrast-hell .kb-rang-treffer { color: var(--primary-dark, #005a9e); }
#vergleich.kontrast-hell .kb-rang-haupt { color: #10314f; }
#vergleich.kontrast-hell .kb-rang-haupt:hover { background: rgba(0, 82, 141, 0.08); }
#vergleich.kontrast-hell .kb-rang-nr { color: #5a6b7a; }
#vergleich.kontrast-hell .kb-rang-wert { color: #10314f; }
/* Politur 2: Bewertungspunkte im Hell-Modus (dunkles Apricot auf heller Fläche). Gilt
   für Ranking (.kb-rang-sterne) UND Panel-Kopf (.kb-sterne) gleichermaßen. */
#vergleich.kontrast-hell .kb-punkt-an { background: #b33e19; }
#vergleich.kontrast-hell .kb-punkt-aus { background: rgba(0, 82, 141, 0.18); }
#vergleich.kontrast-hell .kb-rang-pin { color: #9aa8b5; }
#vergleich.kontrast-hell .kb-rang-pin:hover { color: #10314f; background: rgba(0, 82, 141, 0.08); }
#vergleich.kontrast-hell .kb-rang-pin.kb-pin-an { color: #b33e19; }
#vergleich.kontrast-hell .kb-rang-hinweis { color: #5a6b7a; border-top-color: rgba(0, 82, 141, 0.2); }
/* Politur 2: Overlay/Panel im Hell-Modus — Glas wird weiß, Schrift dunkel, Rand
   #00528D (Girokonto html[data-pan-hell]-Mapping, hier via #vergleich.kontrast-hell,
   weil das Overlay innerhalb von #vergleich hängt). Die Detail-Inhalts-Hell-Regeln
   (Anbieter/Produkt/Tabelle/Tabs/Pin) stehen bereits oben und greifen im Panel. */
#vergleich.kontrast-hell .kb-overlay { background: rgba(0, 26, 48, 0.35); }
#vergleich.kontrast-hell .kb-panel { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border-left-color: #00528D; color: #111111; }
#vergleich.kontrast-hell .kb-detail-close { background: rgba(0, 82, 141, 0.12); color: #003A66; }
#vergleich.kontrast-hell .kb-detail-close:hover { background: rgba(0, 82, 141, 0.22); }
#vergleich.kontrast-hell .kb-detail-close:focus-visible { outline-color: #00528D; }
#vergleich.kontrast-hell .kb-detail-abschnitt-titel { color: var(--primary-dark, #005a9e); }
/* Politur 3: CTA-/Glyphen-Pendants — Hell-Mapping wörtlich aus dem Bestands-Inline-
   Block (#vergleich.kontrast-hell .vergleich-dashboard .anbieter-link …). */
#vergleich.kontrast-hell a.kb-detail-cta { background: #0070C0; color: #fff; }
#vergleich.kontrast-hell a.kb-detail-cta:hover { background: #00528D; color: #fff; }
#vergleich.kontrast-hell .kb-cta-pfeil { background: #fff; color: #00528D; }
#vergleich.kontrast-hell .kb-detail .kb-kriterium .icon { color: var(--primary-dark, #005a9e); }
#vergleich.kontrast-hell .kb-detail-pin { border-color: rgba(0, 82, 141, 0.3); color: #3a4b5a; }
#vergleich.kontrast-hell .kb-detail-pin:hover { background: rgba(0, 82, 141, 0.08); color: #10314f; }
#vergleich.kontrast-hell .kb-detail-pin.kb-pin-an { background: #b33e19; border-color: #b33e19; color: #fff; }
#vergleich.kontrast-hell .kb-tablist { border-bottom-color: rgba(0, 82, 141, 0.18); }
#vergleich.kontrast-hell .kb-tab { color: #3a4b5a; }
#vergleich.kontrast-hell .kb-tab:hover { color: #10314f; background: rgba(0, 82, 141, 0.06); }
#vergleich.kontrast-hell .kb-tab.active { color: #10314f; border-bottom-color: var(--primary, #0070C0); }

/* ==========================================================================
   MOBILE (≤ 48em): Bühne einspaltig (Chart voll, Ranking darunter). Engine ohne
   JS-Breakpoint (CSS-first, Lehre Zins-Skyline). Feinschliff in Phase 4.
   ========================================================================== */
@media (max-width: 48em) {
    .kb-buehne { grid-template-columns: 1fr; }
    .kb-ranking { min-height: 0; }
    .kb-kontrollzeile { gap: 0.6em 1em; padding: 0.7em 0.8em; }
    .kb-control-volumen,
    .kb-control-trades { flex-basis: 100%; }
}

/* ==========================================================================
   PHASE 4 — MOBILES BOTTOM-SHEET, LABEL-HINWEIS & A11y-FEINSCHLIFF (≤ 48em).
   Das Detail-Aside wird mobil zum modalen Bottom-Sheet (E9/§8): der Template-Klon
   lebt WEITER im .kb-ranking (Panel-Live-Mechanik/Delegation unverändert) — nur
   Position, Backdrop und Modal-Semantik (role=dialog/aria-modal/Fokus-Falle, von der
   Engine gesetzt) kommen hinzu, ausschließlich mobil. Desktop-Panel bleibt exakt
   Phase 3 (nicht-modal). Engine-Layout bleibt CSS-first; nur das Sheet-Verhalten und
   die Label-Ausdünnung nutzen einen matchMedia-Check (SVG-Attribute sind CSS-unerreichbar).
   ========================================================================== */

/* Hintergrund-Scroll sperren, solange das modale Overlay offen ist (Klasse setzt die
   Engine — Desktop UND Mobil). */
html.kb-overlay-locked,
html.kb-overlay-locked body { overflow: hidden; }

/* Mobil-Hinweis unter dem Chart (Alle-Modus mit ausgedünnten Labels; Engine toggelt hidden). */
.kb-alle-hinweis { margin: 0.6em 0 0; font-size: 0.75rem; line-height: 1.4; text-align: center; color: rgba(255, 255, 255, 0.62); }
.kb-alle-hinweis[hidden] { display: none; }
#vergleich.kontrast-hell .kb-alle-hinweis { color: #5a6b7a; }

/* Politur 2: das Glas-Panel wird mobil (≤48em) zum Bottom-Sheet (von unten statt von
   rechts). Overlay/Endpoint/Fokusfalle/Escape/Backdrop-Klick bleiben identisch — nur
   die Geometrie ändert sich (Girokonto-Muster). */
@media (max-width: 48em) {
    .kb-panel {
        top: auto; bottom: 0; left: 0; right: 0;
        width: 100%; max-width: 100%; height: auto; max-height: 85vh;
        border-left: none; border-top: 0.0625em solid rgba(76, 181, 160, 0.45);
        border-radius: 1em 1em 0 0;
        padding: 1.25em 1.15em 2em;
        box-shadow: 0 -0.5em 2em rgba(0, 26, 48, 0.4);
        transform: translateY(100%);
    }
    /* Griff-Andeutung oben am Sheet. */
    .kb-panel::before {
        content: ""; display: block;
        width: 2.5em; height: 0.3em; margin: -0.4em auto 0.9em;
        border-radius: 0.3em; background: rgba(255, 255, 255, 0.35);
    }
    .kb-overlay[data-offen] .kb-panel { transform: translateY(0); }
    /* Touch-Ziele im Sheet ≥ 2,75rem (E7-Referenzmaße). */
    .kb-detail-close { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
    .kb-tab { min-height: 2.75em; }
    /* Kontrast-Hell: heller Sheet → dunkle Kante + dunkler Griff. */
    #vergleich.kontrast-hell .kb-panel { border-top-color: #00528D; }
    #vergleich.kontrast-hell .kb-panel::before { background: rgba(0, 82, 141, 0.35); }
}

/* prefers-reduced-motion: Panel-Einflug wird übersprungen, nicht bloß beschleunigt
   (Girokonto-Lehre: eine 0.01ms-Transition ließe das Panel einen Frame außerhalb des
   Bildes stehen). */
@media (prefers-reduced-motion: reduce) {
    .kb-overlay, .kb-overlay * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    .kb-panel { transform: translateX(0); }
    .kb-overlay:not([data-offen]) .kb-panel { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 48em) {
    .kb-overlay[data-offen] .kb-panel { transform: translateY(0); }
    .kb-overlay:not([data-offen]) .kb-panel { transform: translateY(100%); }
}