/* ==========================================================================
   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).
   (?v=19 bis ?v=21 sind in dieser Chronik nicht nachgetragen worden.)
   Icon-Zeile (?v=22, DE-Rollout Phase 3, 19.08.2026): Kontrast-Toggle und „weitere
   Filter"-Button bilden EINE Zeile auf der Anlegerprofil-Label-Zeile, oberhalb 72em
   bündig unter den #hilfe-Icons (Konstanten der Icon-Gruppe A aus der live
   kalibrierten Bauvorlage). Die Flex-Zeile .filter-aktion-zeile samt ihrer
   Positions-Neutralisierung ist entfallen (Markup-Move im Core), ihr Höhen-Beitrag
   wird über .profil-beschreibung margin-bottom ausgeglichen. Geteilte Chrome
   (style.css?v=62, vergleich.min.css?v=18) bleibt unverändert.
   ========================================================================== */

/* --- 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-Nav-Reihe: Abstand zur Profilbeschreibung (Cross-View-Angleich
   23.08.2026) --------------------------------------------------------------
   Liste und Tabelle neutralisieren den 24px-Unterrand, den die geteilte
   vergleich.min.css auf .laufzeit-nav setzt, und tragen den Abstand stattdessen
   an .profil-nav-row (1em = 15.36px, kollabiert mit dem margin-top 0.5em =
   6.56px der Profilbeschreibung). Dem Kurvenblick fehlten beide Regeln, deshalb
   blieben die 24px stehen und die Beschreibung setzte 8.65px zu tief an.
   Live gemessen (Chromium, Viewport 1280, 23.08.2026): Liste 15.354px,
   Tabelle 15.354px, Kurvenblick 24.000px; nach Injektion dieser beiden Regeln
   15.354px - deckungsgleich mit beiden Schwester-Ansichten.
   Selektoren woertlich aus brokerage-vergleich-core.inc.php bzw.
   brokerage-tabelle-core.inc.php uebernommen; Spezifizitaet 0,3,0 schlaegt die
   0,2,0 der vergleich.min.css unabhaengig von der Ladereihenfolge. Der
   Unterrand der Profilbeschreibung (6.426em) bleibt unangetastet - der Abstand
   zur Kontrollzeile aendert sich nicht, der Block darunter rueckt lediglich um
   dieselben 8.65px mit nach oben. --------------------------------------------- */
.vergleich-dashboard .profil-nav-row { position: relative; margin-bottom: 1em; }
.vergleich-dashboard .profil-nav-row .laufzeit-nav { margin-bottom: 0; }

/* --- Profil-Beschreibung (Bestands-Parität Liste/Tabelle Brokerage DE) ----
   Icon-Zeilen-Rollout 19.08.2026: margin-bottom 2.5em -> 6.426em. Der „weitere
   Filter"-Button ist nach oben in die Icon-Zeile gewandert, die .filter-aktion-zeile
   darunter ist ersatzlos entfallen — mit ihr verschwand echte Fluss-Höhe. Rechnung
   (Werte aus den beteiligten Regeln, rem-Basis 16px, Button ohne eigene font-size
   auf UA-Default 13.333px — Kette zeichengleich zum bereits abgenommenen
   AT-Kurvenblick, wo sie live gegengemessen wurde):
     Zeilen-Höhe            40.00px  (Button height 3em bei 13.333px)
   + kollabierter Vorrand   17.44px  (2.5em*13.12px = 32.80px gegen
                                      -1em*15.36px = -15.36px)
   + kollabierter Nachrand  26.88px  (1.6em*15.36px = 24.58px gegen margin-top der
                                      .kb-kontrollzeile 1.75em*15.36px = 26.88px)
   = 84.32px Gesamtabstand Profilbeschreibung -> Kontrollzeile.
   Ohne die Zeile bliebe nur der grössere der beiden Ränder stehen (26.88px), deshalb
   trägt die Profilbeschreibung den Abstand jetzt allein: 6.426em * 13.12px = 84.31px
   (Δ 0.01px). Das .anpassen-overlay dazwischen ist display:none und nimmt am
   Rand-Kollaps nicht teil. -------------------------------------------------- */
.kurvenblick-dashboard .profil-beschreibung {
    font-size: 0.82rem;
    color: var(--text-secondary, #aab);
    line-height: 1.5;
    margin: 0.5em auto 6.426em;
    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.
   CT-0264 (04.09.2026): Die drei CONTAINER-Werte folgen jetzt der zentralen
   .toggle-group aus vergleich.min.css (padding 2px, background rgba(0,82,141,0.4),
   border-radius --radius-sm = 8px). Die Bedienelement-Rolle ist dieselbe wie bei den
   Betrags-/Stufen-Umschaltern der übrigen Vergleiche; die Pillen-Herleitung der
   Politur 2 gilt weiter für die BUTTONS (.kb-toggle-btn), nicht mehr für den
   Container. Notation als rem/var statt px-Literal (Projektkonvention), gerendert
   2px/8px. --radius-sm ist auf .vergleich-dashboard gescoped, nicht auf :root, und
   löst hier auf, weil die Gruppe innerhalb dieses Containers liegt; der Fallback
   0.5rem greift nie und ist nur Netz. display bleibt bewusst inline-flex gegen
   zentral flex — flex zöge die Gruppe auf die volle Zeilenbreite und änderte den
   Umbruch der Kontrollzeile.
   Der Hell-Zweig bleibt bewusst bei rgba(0,82,141,0.1) statt des zentralen
   0.06: 0.06 ist hier bereits der Grund der .kb-kontrollzeile, der Container würde
   darin verschwinden (gemessener Kontrastabstand 1.1685 gegen 1.10). */
.kb-toggle-group {
    display: inline-flex;
    padding: 0.125rem;
    border-radius: var(--radius-sm, 0.5rem);
    background: rgba(0, 82, 141, 0.4);
}
/* 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;
}
/* Cross-View-Angleichung 2026-08-19: Farbe und Kursivstellung wie die
   Tabellen-/Listen-Variante .eingrenzungsfilter-hint (vergleich.min.css:
   color:var(--text-secondary); font-style:italic). Vorher rgba(170,170,187,0.7)
   und aufrecht — die Hinweiszeile sah in dieser Ansicht anders aus als in
   Liste und Tabelle desselben Produkts. Der Token loest hier zu
   rgba(255,255,255,0.7) auf (live gemessen). */
.sidebar-filter-hint {
    display: block;
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-style: italic;
    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: #F7F9FC; }
#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; }

/* --- Icon-Zeile: Kontrast-Toggle + „weitere Filter"-Button ----------------
   Icon-Zeilen-Rollout 19.08.2026 (DE-Phase 3, Muster aus dem Piloten Tagesgeld DE
   und dem bereits abgenommenen AT-Kurvenblick). Beide Knöpfe bilden EINE Zeile auf
   der „Anlegerprofil"-Label-Zeile; oberhalb 72em sitzen sie in Kachelgrösse der
   View-Switcher-Icons (2.51em x 2.09em) bündig unter den #hilfe-Icons — Kontrast
   unter der Seitenhilfe (rechtestes Icon), Filter unter der kreativen Ansicht
   (zweitrechtes). Bezugsgrösse der Kalibrierung ist die Icon-MITTE.
   ZWEI Desktop-Bänder, weil DE bei 88em eine Glyphen-Stufe hat, die die Icon-MITTEN
   verschiebt (AT hat sie nicht); Konstanten der Icon-Gruppe A (vier Icons mit
   *-view-icon) aus der live kalibrierten Bauvorlage.
   ERSETZT die frühere .filter-aktion-zeile-Lösung (Flex-Zeile unter der
   Profilbeschreibung, die die Absolut-Position der vergleich.min.css per
   position:relative; inset:auto neutralisierte). Die Neutralisierung war eine
   bewusste Cross-View-Paritäts-Entscheidung aus Phase 6 — sie fällt, weil alle
   DE-Ansichten gemeinsam auf die Icon-Zeile umgestellt werden; die Parität bleibt
   damit gewahrt. Der Ausgleich für die entfallene Fluss-Höhe der Zeile steht oben
   bei .profil-beschreibung.
   Dieser Core hat KEIN Inline-<style>, deshalb steht der Block hier in der
   produkteigenen Datei (Bauvorlage §3) — mit ?v=-Bump im Core (21 -> 22). Die Datei
   wird ausschliesslich vom Kurvenblick-Core geladen; die Selektoren sind wörtlich
   aus der Bauvorlage übernommen (#vergleich-Präfix schlägt die zentrale
   vergleich.min.css, die selbst unverändert bleibt — sie versorgt alle Produkte
   beider Märkte). Der Kontrast-Toggle hat in dieser Datei bisher KEINEN Regelsatz
   (Optik komplett aus vergleich.min.css), deshalb wird die Basis-Geometrie hier
   vollständig überschrieben; Hover/Focus/aria-pressed/.kontrast-icon und die
   kontrast-hell-Pendants bleiben zentral. ---------------------------------- */
#vergleich .kontrast-zeile {
    display: block; position: relative;
    height: 0; margin: 0; overflow: visible;
    z-index: 1;
}
#vergleich .kontrast-toggle {
    position: absolute; right: calc(0.403% + 1.439em); top: 0.98em;
    width: 2.51em; height: 2.09em; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 600; line-height: 1.2;
    letter-spacing: 0.02em; color: #e8f2fb;
    background: rgba(9,87,143,0.62); box-shadow: 0 0.125em 0.5em rgba(0,0,0,0.25);
    border: 0; border-radius: 0; cursor: pointer;
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
    transition: background 150ms ease, color 150ms ease;
}
/* top koppelt an den Toggle-top (gleicher em-Wert) und kompensiert das
   Dashboard-Padding per var(--space-md/-sm) — so bleibt die Zeile auch bei
   Text-Zoom und geänderten Space-Tokens deckungsgleich. */
#vergleich .vergleich-dashboard { position: relative; }
#vergleich .anpassen-filter-btn {
    bottom: auto; top: calc(0.98em - var(--space-md)); right: calc(7.225em - 0.612%);
    width: 2.51em; height: 2.09em; font-size: 0.85rem;
}
#vergleich .anpassen-filter-btn .icon-wrap .icon-sliders { font-size: 1.05em; }
#vergleich .anpassen-filter-btn .ecke { width: 0.7em; height: 0.7em; }
#vergleich .anpassen-filter-btn .ecke-tl { top: 0.22em; left: 0.22em; }
#vergleich .anpassen-filter-btn .ecke-tr { top: 0.22em; right: 0.22em; }
#vergleich .anpassen-filter-btn .ecke-bl { bottom: 0.22em; left: 0.22em; }
#vergleich .anpassen-filter-btn .ecke-br { bottom: 0.22em; right: 0.22em; }
/* 88em-Stufe: unterhalb sitzen die #hilfe-Glyphen enger, die Mitten wandern. */
@media (max-width: 88em) {
    #vergleich .kontrast-toggle { right: calc(0.403% + 1.100em); }
    #vergleich .anpassen-filter-btn { right: calc(6.035em - 0.609%); }
}
/* <=72em: #hilfe-Leiste sitzt im Seitenkopf, keine Icon-Bündigkeit möglich —
   Zeile rechtsbündig, Filter-Button mit Lücke links daneben (right so bemessen,
   dass auch der Aktiv-Badge nicht an den Kontrast-Toggle stösst). */
@media (max-width: 72em) {
    #vergleich .kontrast-toggle { top: 0.97em; right: 0.85em; }
    #vergleich .anpassen-filter-btn { top: calc(0.97em - var(--space-md)); right: 3.92em; }
}
/* Mobil (h1 via style.css ab 38em ausgeblendet -> Anker rückt an den Kartenanfang).
   Nach oben ist kein Raum, deshalb entsteht die Luft zur Pill-Reihe im Fluss: mehr
   padding-top schiebt Label + Pills nach unten, die absolut verankerten Buttons
   bleiben oben stehen. */
@media (max-width: 38em) {
    #vergleich .kontrast-toggle { top: 0.4em; right: 0.6em; }
    #vergleich .anpassen-filter-btn { top: calc(0.4em - var(--space-sm)); right: 4.13em; }
    #vergleich .vergleich-dashboard { padding-top: calc(var(--space-sm) + 0.5rem); }
}

/* --- #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: #F7F9FC; 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: #F7F9FC; 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; }
/* Vergleichs-Fußzeile im Hell-Modus (Nachtrag 26.07.2026): vergleich.min.css setzt
   .vergleich-dashboard .footer-line a statisch auf Mint (#A9F6DB) — auf heller Fläche
   unlesbar. Überschreibung zeichengleich Liste/Tabelle (brokerage-vergleich-core.inc.php
   Z.1041 f. / brokerage-tabelle-core.inc.php Z.1754 f.). */
#vergleich.kontrast-hell .vergleich-dashboard .footer-line a { color: #00528D; }
#vergleich.kontrast-hell .vergleich-dashboard .footer-line a:hover { color: #0070C0; }

/* 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: #F7F9FC; -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: #F7F9FC; 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%); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL-NAV-STRIP DER PROFIL-LEISTE (CT-0230, 29.08.2026)

   Nachzug des Musters aus Liste und Tabelle desselben Produkts
   (brokerage-vergleich-core.inc.php, Block "Responsive: Nav-Scroll-Strip").
   Der Kurvenblick fuehrte als einzige der drei Ansichten KEINEN der drei
   Muster-Teile: die Nav stand auf overflow-x: visible / flex-wrap: wrap, die
   Pille auf flex-shrink: 1, ein Scroller-JS gab es nicht. Die sechs
   Anlegerprofil-Pillen stapelten deshalb mehrzeilig.

   Kipppunkt gemessen (Live, Chromium, frischer Kontext je Breite, 29.08.2026),
   Zahl der Pillen-Zeilen je Viewport-Breite:
       320 -> 2 | 375 -> 2 | 600 -> 1 | 640 -> 1 | 700 -> 1
       769 -> 2 | 800 -> 2 | 833 -> 1 | 900..1600 -> 1
   Der Umbruch faellt damit vollstaendig unter 52em (832px): unterhalb 833px
   wird der Strip gebraucht, ab 833px nicht mehr. Der 52em-Block deckt beide
   Umbruchfenster (320-375 mobil, 769-832 schmaler Desktop) exakt ab; ein
   unkonditionaler Strip (Festgeld-/Ratenkredit-Sonderfall) ist hier deshalb
   nicht noetig. Die em-Einheit traegt die Schriftgroessen-Abhaengigkeit des
   Kipppunkts mit — bei groesserer Basisschrift wachsen Pillen und Grenze
   gemeinsam.

   Spezifizitaet 0,3,0 ueber .profil-nav-row statt !important (Hausregel
   Listendarstellung/CLAUDE.md); die geteilte vergleich.min.css setzt
   .laufzeit-nav mit 0,2,0.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 52em) {
    .vergleich-dashboard .profil-nav-row .laufzeit-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        /* A-7.1: Fallback-Deklaration ZUERST. Engines ohne das `safe`-Keyword
           (WebKit/Safari, Chrome < 115) verwerfen die naechste Deklaration
           komplett; ohne diese Zeile greift dort das zentrale `center` aus
           vergleich.min.css, und bei Overflow werden die linken Pillen
           unerreichbar, weil scrollLeft nicht negativ werden kann. In Chromium
           gewinnt danach das gueltige `safe center`. Gehoert mit den
           Auto-Margins unten zusammen — nie einzeln einbauen, nie als
           Redundanz aufraeumen. */
        justify-content: flex-start;
        justify-content: safe center;
        gap: 0.25em;
        padding: 0.2em;
        /* volle Breite, damit der Glasmorphismus-Hintergrund nicht rechts
           abgeschnitten wird (kein fit-content, keine Auto-Margins am Container) */
        width: 100%;
        max-width: 100%;
    }
    .vergleich-dashboard .profil-nav-row .laufzeit-nav::-webkit-scrollbar { display: none; }
    /* A-7.1b: Auto-Margins als Zentrier-Fallback. Wo oben flex-start gewinnt,
       stuende die Leiste sonst auch dann linksbuendig, wenn alle Pillen in eine
       Zeile passen; bei Overflow kollabieren sie auf 0, die linken Pillen
       bleiben per scrollLeft erreichbar. `:first-child`/`:last-child` sind
       zwingend — `:first-of-type` traefe wegen des gemischten Markups (aktive
       Pille = <span>, uebrige = <a>) ZWEI Elemente und risse die Leiste
       auseinander. */
    .vergleich-dashboard .profil-nav-row .laufzeit-nav .laufzeit-pill:first-child { margin-inline-start: auto; }
    .vergleich-dashboard .profil-nav-row .laufzeit-nav .laufzeit-pill:last-child { margin-inline-end: auto; }
    .vergleich-dashboard .profil-nav-row .laufzeit-nav .laufzeit-pill {
        min-height: 2.75em;
        scroll-snap-align: center;
        flex-shrink: 0;
        white-space: nowrap;
        padding-left: 0.75em;
        padding-right: 0.75em;
    }
    /* Fade-Masken am Wrapper, vier Zustaende (Klassen setzt initScrollNav in
       brokerage-diagramm-race.js). */
    .vergleich-dashboard .profil-nav-row .nav-scroll-wrapper {
        -webkit-mask-image: linear-gradient(to right, transparent, black 1.5em, black calc(100% - 1.5em), transparent);
        mask-image: linear-gradient(to right, transparent, black 1.5em, black calc(100% - 1.5em), transparent);
    }
    .vergleich-dashboard .profil-nav-row .nav-scroll-wrapper.scroll-start {
        -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 1.5em), transparent);
        mask-image: linear-gradient(to right, black, black calc(100% - 1.5em), transparent);
    }
    .vergleich-dashboard .profil-nav-row .nav-scroll-wrapper.scroll-end {
        -webkit-mask-image: linear-gradient(to right, transparent, black 1.5em, black);
        mask-image: linear-gradient(to right, transparent, black 1.5em, black);
    }
    .vergleich-dashboard .profil-nav-row .nav-scroll-wrapper.scroll-start.scroll-end {
        -webkit-mask-image: none;
        mask-image: none;
    }
}
/* Drag-to-Scroll nur fuer Maus-Nutzer und nur bei aktivem Strip — Touch-Geraete
   behalten natives Momentum-Scrolling. */
@media (max-width: 52em) and (hover: hover) and (pointer: fine) {
    .vergleich-dashboard .profil-nav-row .laufzeit-nav { cursor: grab; }
    .vergleich-dashboard .profil-nav-row .laufzeit-nav.is-dragging {
        cursor: grabbing;
        scroll-behavior: auto;
        user-select: none;
    }
    .vergleich-dashboard .profil-nav-row .laufzeit-nav.is-dragging .laufzeit-pill { pointer-events: none; }
}