/* diagramm.min.css — v6 — "Das Zinsgebirge" (Festgeld AT).
   v6 (AT-Nachzug DE-P20/20b/23/24/25, 2026-07-20): Kurvenblick-Panel-Nachzug. P20/20b: Bottom-Sheet
   auf dunkles Glas-Panel (rgba(9,87,143,0.92)+blur+Mint-Kante, weisse Typo) statt weisser Karte,
   Flex-Spalte + Inhalt flex:1 0 auto, feste Mobil-Hoehe 85vh (Peek-Ausnahme height:auto), CTA/Linie
   per margin-top:auto unten geankert; Kontrast-Hell des Sheets per JS-.zg-hell-Spiegelung (Sheet
   haengt an document.body -> #vergleich-Kaskade greift nicht), die frueheren toten
   #vergleich.kontrast-hell .zg-sheet*-Regeln durch .zg-hell-Muster ersetzt. P23: die Desktop-Hover-Karte
   .zg-karte wird ein rechts einfahrendes Glas-Panel (position:fixed am Viewport-Rand, X-Achsen-Slide via
   .sichtbar mit visibility-Delay, mobil weiter display:none); .zg-dk-*-Dunkelfaerbung teilt sich die Karte
   mit dem Sheet (Selektorlisten erweitert, Werte nicht dupliziert) + eigenes Wechsler-/Nav-Dunkelmapping;
   Kontrast-Hell der Karte per #vergleich.kontrast-hell-Kaskade (Karte haengt in #vergleich; der fruehere
   CTA-Einzel-Hell-Block ist darin aufgegangen). P24: grosszuegiges Panel-Layout (width 30rem in rem statt em,
   font-size 0.9rem, Padding 2.25em/2em, Flex-Spalte + Kinder flex:0 0 auto, Produktname display:block,
   Zins 2.4rem, luftige Reihen/Checks). P25: Seiten-Dock .zg-karte.zg-links (Spiegel-Geometrie, Slide von
   links, Mint-Kante rechts, Hell-Pendant + (0,3,0)-Kombi .zg-links.sichtbar) + CTA inhaltsbreit/rechtsbuendig
   (align-self:flex-end, margin-top:auto, padding 0.8em 1.3em, font-size 1rem) im P13-CTA-Block konsolidiert
   (P24-B1-Fix: keine zwei gleich-spezifischen CTA-Bloecke). Passt zu JS v9.
   v5 (AT-Nachzug DE v34/v35, 2026-07-20): Mobile-Vertikal-Padding der Umschalter-Buttons 0.6em -> 0.3em
   (zweizeilig umgebrochene Buttons flacher, einzeilige haelt die min-height) + Label "Maßstab:" vor dem
   Zoom-Toggle (.zg-zoom/.zg-zoom-label, Optik wie .zg-farbmodus-label inkl. kontrast-hell + Mobile-Gap);
   der Core referenzierte diese Regeln bereits als ?v=5, der Kopf-Eintrag wurde jetzt nachgetragen.
   v4 (AT-Nachzug DE-P22c, 2026-07-19): Chip-Name der Pin-Leiste ist jetzt ein Button
   (Detail-Karte des Gepinnten wieder einblenden) — Button-Reset button.zg-pin-chip-name
   auf Chip-Optik + :hover (Unterstreichung) + :focus-visible (Fokusring #0070C0). Aus DE css v33.
   v3 (AT-Nachzug DE-P15-20, 2026-07-19): Banknamen-Suche (.zg-suche* Combobox, P15/16),
   Rest-Toast des Drittel-Zooms (.zg-toast/#zgToast, P18) und Lupen-Verbindungslinien der
   Kontextachse (.zg-kontext-linie, P19) aus dem DE-Endstand (css v32) uebernommen —
   marktneutral (Literalfarben, #vergleich-Scope), Toast bewusst ohne kontrast-hell-Override.
   v2 (AT-Nachzug DE-Politur 16 E, 2026-07-18): Intro-Satz .zg-intro ueber dem Diagramm
   (Muster .skyline-intro Tagesgeld DE): weiss auf blauem Grund (AT live gemessen Body
   rgb(0,112,192) durch das quasi-transparente Dashboard), kontrast-hell #003A66 auf
   weissem Grund; Markup rendert der Core.
   v1: AT-Rollout des live-abgenommenen DE-Stands v27 (Polituren 1-14 vom 18.07.2026);
   eigene AT-Datei-Historie ab v=1, die DE-Politur-Historie ist bewusst nicht mitgefuehrt
   (Datei-Inhalt ist byte-identisch zum abgenommenen DE-Stand — keine markt-spezifischen
   Selektoren; die AT-Anpassung des Zinsgebirges liegt allein in Core + race.js).
   Namespace .zinsgebirge- / .zg-. em/rem fuer HTML-UI; SVG-interne Geometrie unitless
   (user units, KEIN px; Ausnahme: sr-only-Fallback + Fallback-Tabellen-Rahmen 1px wie
   Phase 1/2 dokumentiert). Serienfarben (Kurven/Punkte/Bienen/Pins) setzt das JS als
   Inline-SVG-Attribute (Kontrast-Paletten A4) — CSS traegt Chart-Chrome (Achsen, Gitter,
   Band, Legende, Farb-Umschalter), Hover-/Dimm-Zustaende, Detail-Karte, Saeulen-Info,
   Pin-Leiste, Fokus-Zoom-Kontextachse und die kontrast-hell-Overrides.
   Phase 4 ergaenzt: Touch-Bottom-Sheet, groessere Touch-Targets/Umbruch mobil,
   touch-action:pan-y pinch-zoom auf der Buehne (Wisch-Fahrt ohne Scroll-Hijacking, aber
   nativer Pinch-Zoom des Browsers erlaubt — Politur 4). */

/* ---- Buehne + SVG-Panel ---- */
/* Breite Buehne: vergleich.min.css (geteilt mit der Liste, darf nicht
   modifiziert werden) kappt .results-container bei 900px — das Panorama
   bekommt mehr Raum, mit sanfter Obergrenze gegen Riesen-Skalierung
   auf sehr breiten Monitoren (SVG waechst per viewBox proportional). */
.vergleich-dashboard.zinsgebirge-dashboard .results-container {
    max-width: 100em; /* ~1600px bei 16px-Basis */
}
.zinsgebirge-buehne {
    position: relative;
    width: 100%;
    margin-top: var(--space-md, 1em);
}
.zinsgebirge-buehne .zinsgebirge-svg {
    width: 100%;
    height: auto;
    display: block;
    /* Politur 2: flach blaue Buehne (Band-Blauton als Flaeche); Off-White-Gradient entfaellt. */
    background: #dcebf8;
    border: 0.0625em solid #b9cfe2;
    border-radius: 0.375rem;
    /* Wisch-Fahrt (Phase 4): horizontale Geste gehoert dem Chart, vertikales
       Scrollen bleibt nativ (kein Scroll-Hijacking). Politur 4: pinch-zoom ergaenzt, damit
       der native Browser-Zoom (zwei Finger) auf dem SVG funktioniert. Nur Touch betroffen. */
    touch-action: pan-y pinch-zoom;
}
#vergleich.kontrast-hell .zinsgebirge-buehne .zinsgebirge-svg {
    background: #ffffff;
    border-color: #b7c6d4;
}

/* ---- SVG-Chrome (Klassen; Inline-Attribute nur fuer Serienfarben) ---- */
/* Politur 2: Gitter/Achsentext auf blauem Grund (#dcebf8) — kuehle Blaugrau-Toene statt
   der alten Warmgrau-Werte, die auf Blau "schmutzig" wirkten. */
.zg-grid { stroke: #c4d5e5; stroke-width: 1; }
.zg-grid--null { stroke: #a7bfd4; stroke-width: 1.4; }
/* Schriftgroesse der SVG-Texte setzt das JS als unitless Attribut (user units, kein px). */
.zg-achstext { fill: #4a6076; }
.zg-achstext--stark { fill: #0b0b0b; font-weight: 600; }
.zg-achstitel { fill: #33475a; font-weight: 600; }
/* Aktives Laufzeit-Band: weissliche Spalte = Systemfarbe "aktiv" (weisse Pill/Betrag-Button). */
.zg-band { fill: #ffffff; opacity: 0.6; }
#vergleich.kontrast-hell .zg-grid { stroke: #cdd6de; }
#vergleich.kontrast-hell .zg-grid--null { stroke: #9fb0bf; }
#vergleich.kontrast-hell .zg-achstext { fill: #003A66; }
#vergleich.kontrast-hell .zg-achstext--stark { fill: #00274d; }
#vergleich.kontrast-hell .zg-achstitel { fill: #003A66; }
#vergleich.kontrast-hell .zg-band { fill: #cfe3f6; opacity: 0.6; }

/* ---- Kurven (Gebirge) ---- */
.zg-kurve {
    fill: none;
    /* Politur 2b: 1.4 -> 1.2 feiner — einfarbiges Gewebe vertraegt duennere Striche und
       wirkt so ruhiger/gleichmaessiger (Referenzbild: feines Netz). */
    stroke-width: 1.2;
    /* Grundzustand bewusst zurueckhaltend: nicht ausgewaehlte Linien treten in den
       Hintergrund, damit die aktive Laufzeit (Band + Bienen) und hervorgehobene/
       gepinnte Linien (opacity 1 / 0.95) den Fokus tragen.
       Politur 2: von 0.32 auf 0.36 angehoben — die mittelblauen Grundlinien verloren auf
       dem neuen blauen Grund etwas Praesenz (Screenshot-Vergleich); bleibt zurueckhaltend.
       Politur 2b: 0.36 -> 0.44 — einfarbiges Gewebe erzeugt weniger visuelles Rauschen, die
       leichte Anhebung gibt dem Netz Dichte, ohne Band/Bienen zu ueberdecken (max. 0.5). */
    opacity: 0.44;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.zg-kurve--geist { opacity: 0.1; }
/* Politur 2b: EINFARBIGES Gewebe im Ruhezustand. Ueberschreibt das JS-Serienfarben-
   Praesentationsattribut (Praesentationsattribute verlieren gegen jede CSS-Regel) genau fuer
   Kurven, die NICHT gehovert (zg-aktiv), NICHT gepinnt (zg-kurve--pin / [data-gepinnt]) sind.
   Nur im Normalmodus (:not(.kontrast-hell)) — der Hochkontrast-Hell-Modus behaelt bewusst
   seine farbigen Linien (Barrierefreiheit). Geist-Kurven (--geist) erben die Einheitsfarbe. */
#vergleich:not(.kontrast-hell) .zg-kurve:not(.zg-aktiv):not(.zg-kurve--pin):not([data-gepinnt]) {
    stroke: #6f9dc9;
}
#vergleich.kontrast-hell .zg-kurve { stroke-width: 1.9; opacity: 0.85; }
#vergleich.kontrast-hell .zg-kurve--geist { opacity: 0.22; }

/* ---- Stuetzstellen-Punkte ---- */
.zg-punkt { stroke: #ffffff; stroke-width: 0.6; }
/* Punkte nur im Fokus: der Ruhezustand zeigt reine Kurven (Punkt-Rauschen weg,
   gilt auch fuer Geister). Der gehoverte Anbieter bekommt seine Punkte + Labels
   ueber den Overlay-Spot-Layer; gepinnte Anbieter behalten ihre Stations-Punkte. */
.zg-punkt { display: none; }
.zg-punkt[data-gepinnt] { display: inline; }
.zg-punkt--geist { opacity: 0.16; }
#vergleich.kontrast-hell .zg-punkt--geist { opacity: 0.24; }

/* ---- Halo-Punkt (Ein-Laufzeit-Anbieter) ---- */
/* Ein-Laufzeit-Anbieter: im Ruhezustand kurzer Einzelstrich (Kurven-Stub) in
   Kurven-Deckung — der Ziel-Ring las sich wie eine Auswahl-Hervorhebung
   (Befund 17.07.). Der Ring erscheint erst im Fokus: Hover (zg-aktiv) bzw.
   Pin (data-gepinnt). */
.zg-halo-ring { fill: none; stroke-width: 1.6; opacity: 0; }
.zg-halo-strich { stroke-width: 1.4; stroke-linecap: round; opacity: 0.35; }
/* Politur 2b: der Einzelstrich (Ein-Laufzeit-Anbieter) ist das Ein-Stationen-Pendant der
   Kurve und gehoert im Ruhezustand ins EINFARBIGE Gewebe — sonst blieben vereinzelte farbige
   Striche stehen und durchbraechen das Netz. Gleiche Logik wie bei .zg-kurve: nur Normalmodus,
   nicht gehovert (Eltern-.zg-halo ohne .zg-aktiv), nicht gepinnt (Strich ohne [data-gepinnt]).
   Der Ring bleibt unberuehrt — er erscheint erst im Fokus (Hover/Pin) und traegt dort Serienfarbe. */
#vergleich:not(.kontrast-hell) .zg-halo:not(.zg-aktiv) .zg-halo-strich:not([data-gepinnt]) {
    stroke: #6f9dc9;
}
.zg-halo-ring[data-gepinnt] { opacity: 0.9; }
.zg-halo-strich[data-gepinnt] { opacity: 1; stroke-width: 2.2; }
.zg-halo--geist { opacity: 0.1; }
#vergleich.kontrast-hell .zg-halo-ring { stroke-width: 2; opacity: 0; }
#vergleich.kontrast-hell .zg-halo-strich { stroke-width: 1.9; opacity: 0.55; }
#vergleich.kontrast-hell .zg-halo.zg-aktiv .zg-halo-ring,
#vergleich.kontrast-hell .zg-halo-ring[data-gepinnt] { opacity: 0.85; }
#vergleich.kontrast-hell .zg-halo.zg-aktiv .zg-halo-strich { opacity: 1; }
#vergleich.kontrast-hell .zg-halo--geist { opacity: 0.18; }

/* ---- Beeswarm-Schnitt (aktive Laufzeit) ---- */
.zg-bienen { opacity: 0; transition: opacity 0.5s ease; }
.zg-bienen.zg-sichtbar { opacity: 1; }
.zg-biene { stroke: #ffffff; stroke-width: 1.1; }
.zg-biene--geist { opacity: 0.2; }
#vergleich.kontrast-hell .zg-biene { stroke-width: 1.4; }
#vergleich.kontrast-hell .zg-biene--geist { opacity: 0.28; }

/* ---- Farb-Umschalter + Legende (unter der Buehne, Bestands-Optik) ---- */
/* Politur 2: gestaltete Leiste — gleiche blaue Flaeche/Rundung wie die Buehne, sodass
   Buehne + Leiste als zusammengehoeriges Paar wirken (margin-top verringert). */
.zinsgebirge-steuerung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em 1.25em;
    margin-top: 0.5em;
    background: #dcebf8;
    border: 0.0625em solid #b9cfe2;
    border-radius: 0.375rem;
    padding: 0.6em 1em;
}
.zg-farbmodus, .zg-zoom { display: inline-flex; align-items: center; gap: 0.5em; }
.zg-farbmodus-label, .zg-zoom-label { color: #3b4c5d; font-size: 0.85rem; }
.zg-farbmodus-group {
    display: inline-flex;
    /* Betrag-Toggle-Optik (Politur 3b): solide effektive Farbe der zentralen .toggle-group
       (rgba(0,82,141,.4) ueber Seitenblau #0070C0) — auf der hellen Leiste als Solid noetig. */
    background: #0060A5;
    border-radius: 0.5em;
    padding: 0.125em;
}
.zg-farbmodus-btn {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.42em 0.9em;
    border-radius: 0.375em;
    cursor: pointer;
    line-height: 1.2;
}
.zg-farbmodus-btn:hover { background: rgba(255, 255, 255, 0.1); }
.zg-farbmodus-btn[aria-pressed="true"] { background: #ffffff; color: #004578; font-weight: 600; }
.zg-farbmodus-btn:focus-visible { outline: 0.125em solid #0070C0; outline-offset: 0.125em; }

.zg-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em 1em;
    font-size: 0.82rem;
    color: #1f3347; /* Politur 2: auf blauem Leisten-Grund abgestimmt */
    flex-basis: 100%; /* Politur 2d: Legende beginnt in eigener Zeile (unter Umschalter/Zoom) */
}
.zg-legende-titel { color: #3b4c5d; }
.zg-leg-item { display: inline-flex; align-items: center; gap: 0.4em; }
.zg-leg-swatch {
    width: 1.5em;
    height: 0.26em;
    border-radius: 0.13em;
    display: inline-block;
    flex-shrink: 0;
}

#vergleich.kontrast-hell .zg-farbmodus-group,
#vergleich.kontrast-hell .zg-zoom-wrap { background: rgba(0, 82, 141, 0.06); }
#vergleich.kontrast-hell .zg-farbmodus-btn,
#vergleich.kontrast-hell .zg-zoom-btn { color: #003A66; }
#vergleich.kontrast-hell .zg-farbmodus-btn:hover,
#vergleich.kontrast-hell .zg-zoom-btn:hover { background: rgba(0, 82, 141, 0.08); }
#vergleich.kontrast-hell .zg-farbmodus-btn[aria-pressed="true"],
#vergleich.kontrast-hell .zg-zoom-btn[aria-pressed="true"] { background: #0070C0; color: #ffffff; }
#vergleich.kontrast-hell .zg-farbmodus-label,
#vergleich.kontrast-hell .zg-zoom-label,
#vergleich.kontrast-hell .zg-legende-titel { color: #003A66; }
#vergleich.kontrast-hell .zg-legende { color: #111111; }
/* Politur 2: die neue Leisten-Flaeche darf den Hochkontrast-Hell-Modus nicht verwaessern
   — reinweisse Flaeche analog zur dortigen Buehne, kraeftige Textfarben bleiben unveraendert. */
#vergleich.kontrast-hell .zinsgebirge-steuerung { background: #ffffff; border-color: #b7c6d4; }

@media (prefers-reduced-motion: reduce) {
    .zg-bienen { transition: none !important; }
}

/* Fallback-Tabelle: sr-zugaenglich, visuell versteckt (per <noscript> im Core sichtbar). */
.zinsgebirge-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;
}
.zinsgebirge-fallback table { border-collapse: collapse; width: 100%; }
.zinsgebirge-fallback caption { text-align: left; font-weight: 600; padding: 0.25em 0 0.5em; }
.zinsgebirge-fallback th,
.zinsgebirge-fallback td {
    border: 1px solid var(--border, #345);
    padding: 0.3em 0.5em;
    text-align: left;
    font-size: 0.85rem;
    vertical-align: top;
}
.zinsgebirge-zaehler { display: block; }

/* ============================================================
   PHASE 3 — INTERAKTION
   ============================================================ */

/* ---- Pointer-Hit-Flaeche (transparent, faengt Pointer-Events fuer Nearest-Curve) ---- */
.zg-hitflaeche { pointer-events: all; cursor: crosshair; }

/* ---- Hover: Dimmen + aktive Hervorhebung ---- */
.zg-kurven .zg-kurve { transition: opacity 0.16s ease, stroke-width 0.16s ease; }
.zg-kurven.zg-gedimmt .zg-kurve { opacity: 0.06; }
.zg-kurven.zg-gedimmt .zg-punkt { opacity: 0.05; }
.zg-kurven.zg-gedimmt .zg-halo { opacity: 0.06; }
.zg-kurve.zg-aktiv { opacity: 1; stroke-width: 2.6; }
.zg-halo.zg-aktiv { opacity: 1; }
.zg-halo.zg-aktiv .zg-halo-ring { opacity: 0.9; stroke-width: 2; }
.zg-halo.zg-aktiv .zg-halo-strich { opacity: 1; stroke-width: 2.6; }
.zg-bienen.zg-gedimmt .zg-biene { opacity: 0.12; }
.zg-biene.zg-aktiv { stroke: #111111; stroke-width: 1.6; }
/* Gepinnte Marken bleiben auch beim Dimmen sichtbar (Pin = dauerhafter Fokus) */
.zg-kurven.zg-gedimmt .zg-kurve[data-gepinnt], .zg-kurven.zg-gedimmt .zg-punkt[data-gepinnt] { opacity: 0.9; }
.zg-bienen.zg-gedimmt .zg-biene[data-gepinnt] { opacity: 1; }
/* Politur 11 (A2): die AKTIVE Marke nicht mitdimmen. Spezifitaet (0,4,0) schlaegt die Dimm-Regel
   .zg-bienen.zg-gedimmt .zg-biene (0,3,0), die die aktive Biene sonst auf 0,12 mitzieht (Pendant zur
   Kurven-Regel unten). Die Auswahl-Kennzeichnung liegt im Overlay darueber, die echte Marke soll
   aber nicht ausgegraut durchscheinen. */
.zg-bienen.zg-gedimmt .zg-biene.zg-aktiv { opacity: 1; }
.zg-bienen.zg-gedimmt .zg-gruppe-zahl { opacity: 0.12; }
/* Politur 2c: die gehoverte Kurve bleibt beim Dimmen voll sichtbar — durchgezogene Linie in
   Serienfarbe (das Gewebe-Stroke-Override nimmt .zg-aktiv aus, also greift das JS-Attribut).
   Vorher gewann die Dimm-Regel (0,3,0) gegen .zg-kurve.zg-aktiv (0,2,0) und nur Spots/Labels/
   Karte trugen den Fokus. Gleiche Ausnahme-Mechanik wie bei den Pins; gilt auch fuer das
   Ein-Laufzeit-Pendant (.zg-halo) und im Hochkontrast-Hell-Modus. */
.zg-kurven.zg-gedimmt .zg-kurve.zg-aktiv, .zg-kurven.zg-gedimmt .zg-halo.zg-aktiv { opacity: 1; }
#vergleich.kontrast-hell .zg-kurven.zg-gedimmt .zg-kurve { opacity: 0.1; }
#vergleich.kontrast-hell .zg-kurven.zg-gedimmt .zg-kurve.zg-aktiv { opacity: 1; }

/* ---- Overlay: Zins-Labels an den Stuetzstellen + Spotlight-Punkte ---- */
/* Groesse + Halo-Staerke setzt das JS als unitless Attribute (user units, kein px). */
.zg-label-zins {
    fill: #0b0b0b;
    font-weight: 600;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-linejoin: round;
}
.zg-spot { fill: #ffffff; stroke-width: 2; }
#vergleich.kontrast-hell .zg-label-zins { fill: #00274d; }

/* ---- Pin-Marker im SVG ---- */
.zg-pin-ring { fill: none; stroke-width: 2.4; opacity: 0.95; }
.zg-pin-dot { stroke: #ffffff; stroke-width: 0.8; }
.zg-kurve--pin { opacity: 0.95; stroke-width: 2.2; }

/* ---- Detail-Karte (HTML ueber dem SVG) ---- */
/* Politur 23: Am Desktop (> 48em) ist die Karte ein rechts einfahrendes Seitenpanel im
   Kurvenblick-Duktus (dunkles Glas, position:fixed am Viewport-Rand) statt der frueheren
   schwebenden weissen Hover-Karte. Nicht-modal (kein Backdrop, kein Fokus-Trap); die
   Ausloese-Logik (Hover zeigt, Klick pinnt) bleibt unveraendert. Slide von rechts per
   .sichtbar; das visibility-Delay-Muster (0s @ 0.28s -> beim Schliessen sichtbar bis
   Slide-Ende) ist das des Bottom-Sheets, nur auf der X-Achse. Mobil (<=48em) bleibt die
   Karte display:none (s.u.), dort uebernimmt das Bottom-Sheet. */
.zg-karte {
    position: fixed;
    z-index: 1000;
    top: 0; right: 0; left: auto; bottom: 0;
    height: 100%;
    /* P24: rem statt em — die Panelbreite haengt nicht mehr an der Panel-Schriftgroesse
       (30rem = 480px; bewusst schmaler als das 34em-Kurvenblick-Vorbild, mehr Diagramm-Sicht). */
    width: 30rem;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    background: rgba(9, 87, 143, 0.92);
    -webkit-backdrop-filter: blur(1.25em); backdrop-filter: blur(1.25em);
    border: none;
    border-left: 0.0625em solid rgba(76, 181, 160, 0.45);
    border-radius: 0;
    box-shadow: -0.5em 0 2em rgba(0, 26, 48, 0.4);
    padding: 2.25em 2em 2em;
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    /* P24: Flex-Spalte, damit der CTA per margin-top:auto ans untere Panel-Ende andockt
       (P20b-Muster des Sheets); Kinder unten auf flex:0 0 auto gegen Scroll-Stauchung. */
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    line-height: 1.35;
    color: #ffffff;
    /* Karte ist voll interaktiv: Betreten stoppt die SVG-Hover-Events von
       selbst, damit der CTA in Ruhe erreichbar ist (Guard im JS). */
    pointer-events: auto;
    /* Slide-Mechanik (Muster Bottom-Sheet, X-Achse): geschlossen aus dem Viewport
       geschoben + unsichtbar (nicht hover-/tab-/AT-erreichbar); visibility wechselt
       verzoegert (0s @ 0.28s), damit die Schliess-Slide erhalten bleibt. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.28s;
}
.zg-karte.sichtbar { transform: translateX(0); visibility: visible; transition-delay: 0s; }
/* ---- P25: Seiten-Dock — liegt die aktive Laufzeit-Station in der rechten Viewport-Haelfte
   (lange Laufzeiten), dockt das Panel am LINKEN Rand an, damit die gewaehlte Laufzeit nicht
   verdeckt wird (JS v9 setzt .zg-links in zeigeKarte(), Halbraum-Logik wie die fruehere
   Hover-Karte). Spiegel-Geometrie: Slide von links, Mint-Kante + Schatten auf der rechten
   Panelkante. ---- */
.zg-karte.zg-links {
    right: auto; left: 0;
    border-left: none;
    border-right: 0.0625em solid rgba(76, 181, 160, 0.45);
    box-shadow: 0.5em 0 2em rgba(0, 26, 48, 0.4);
    transform: translateX(-100%);
}
/* .zg-links und .sichtbar sind beide (0,2,0) — der Offen-Zustand braucht die (0,3,0)-Kombi,
   sonst entschiede die Source-Order zwischen den beiden transform-Werten. */
.zg-karte.zg-links.sichtbar { transform: translateX(0); }
/* ---- P24: Grosszuegiges Panel-Layout (nur Desktop-Panel; das Sheet nutzt die kompakten
   .zg-dk-*-Basiswerte weiter). Live abgestimmt 2026-07-20: ruhiger vertikaler Rhythmus statt
   19em-Kaertchen-Dichte, CTA unten angedockt. ---- */
.zg-karte > * { flex: 0 0 auto; }
.zg-karte .zg-dk-wechsler { margin: -0.5em 0 1.1em; padding-bottom: 0.7em; }
.zg-karte .zg-dk-bank { font-size: 1.15rem; line-height: 1.35; margin-bottom: 0.1em; }
/* Produktname aus der Bank-Zeile loesen — eigene Zeile liest sich im breiten Panel ruhiger. */
.zg-karte .zg-dk-produkt { display: block; font-size: 0.95rem; margin-top: 0.2em; }
.zg-karte .zg-dk-zins { font-size: 2.4rem; margin: 0.3em 0 0.1em; }
.zg-karte .zg-dk-zins small { font-size: 0.95rem; }
.zg-karte .zg-dk-zins.leer { font-size: 1.05rem; }
.zg-karte .zg-dk-rang { font-size: 0.92rem; margin-bottom: 1.2em; }
.zg-karte .zg-dk-einordnung { padding: 1em 1.15em; margin-bottom: 1.4em; line-height: 1.55; }
.zg-karte .zg-dk-reihe { padding: 0.8em 0; }
.zg-karte .zg-dk-checks { margin: 1em 0 1.2em; }
.zg-karte .zg-dk-check { margin: 0.5em 0; line-height: 1.5; }
.zg-karte .zg-dk-badges { margin-bottom: 1em; }
.zg-karte .zg-dk-aktion { margin-bottom: 1.2em; line-height: 1.5; }
/* CTA-Anker (margin-top:auto) + CTA-Groesse stehen im P13-CTA-Block weiter unten — gleiche
   Spezifitaet (0,2,0), die Source-Order entscheidet dort (Review-Befund P24-B1). */
.zg-dk-bank { font-weight: 700; font-size: 0.98rem; color: #0b2740; margin-bottom: 0.15em; }
.zg-dk-wechsler { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; margin: -0.15em 0 0.45em; padding-bottom: 0.4em; border-bottom: 0.0625em solid #dbe6f0; }
.zg-dk-nav { flex: 0 0 auto; min-width: 1.7em; padding: 0.1em 0.4em; border: 0; border-radius: 0.25em; background: rgba(0, 82, 141, 0.10); color: #00528D; font-size: 1rem; line-height: 1.4; cursor: pointer; }
.zg-dk-nav:hover { background: rgba(0, 82, 141, 0.20); }
.zg-dk-nav:focus-visible { outline: 0.125em solid #0070C0; outline-offset: 0.125em; }
.zg-dk-wechsler-label { flex: 1 1 auto; text-align: center; font-size: 0.82rem; color: #52514e; }
.zg-dk-wechsler-label b { color: #22303c; font-weight: 700; }
.zg-dk-flagge { margin-right: 0.25em; }
.zg-dk-produkt { font-weight: 400; color: #52514e; font-size: 0.86rem; }
.zg-dk-zins { font-size: 1.7rem; font-weight: 700; color: #00528D; line-height: 1.05; margin: 0.1em 0 0.05em; }
.zg-dk-zins small { font-size: 0.72rem; font-weight: 500; color: #6b7a8a; }
.zg-dk-zins.leer { font-size: 0.95rem; font-weight: 600; color: #6b7a8a; }
.zg-dk-rang { font-size: 0.82rem; margin-bottom: 0.4em; }
.zg-dk-rang b { color: #0b2740; }
.zg-dk-rang--leer { color: #8a97a3; }
.zg-dk-einordnung {
    background: #eef5fc;
    border-radius: 0.4em;
    padding: 0.4em 0.55em;
    font-size: 0.8rem;
    margin-bottom: 0.5em;
    color: #2b3a47;
}
.zg-dk-einordnung .z { font-weight: 700; color: #00528D; }
.zg-dk-reihe { display: flex; justify-content: space-between; gap: 0.75em; padding: 0.12em 0; border-top: 0.0625em solid #eef1f4; }
.zg-dk-reihe .k { color: #6b7a8a; flex-shrink: 0; }
.zg-dk-reihe span:last-child { text-align: right; }
.zg-dk-checks { display: flex; flex-direction: column; gap: 0.1em; margin: 0.45em 0 0.2em; font-size: 0.8rem; }
.zg-dk-check { display: flex; align-items: baseline; gap: 0.35em; }
.zg-dk-check .ok { color: #1baf7a; font-weight: 700; }
.zg-dk-check .no { color: #b1332f; font-weight: 700; }
.zg-dk-check .neg { color: #b1332f; font-weight: 700; } /* negatives Merkmal mit Minus (z.B. ohne Zinseszinseffekt) */
.zg-dk-badges { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: 0.4em; }
.zg-dk-badge { font-size: 0.72rem; padding: 0.12em 0.5em; border-radius: 0.8em; font-weight: 600; }
.zg-dk-badge.top { background: #fff3d6; color: #8a5a00; }
.zg-dk-badge.akt { background: #e7f6ee; color: #0b7a4b; display: inline-flex; align-items: center; gap: 0.3em; }
/* Geschenk-Icon (cardgift-m.svg) wie in Listen-/Tabellenansicht auf weissen Flaechen */
.zg-dk-gift { width: 1.15em; height: auto; }
.zg-dk-aktion { font-size: 0.76rem; color: #52514e; margin-top: 0.3em; }
/* Politur 13: CTA "zum Anbieter" in der Optik der Listen-/Tabellen-Buttons — HOVER-KARTE.
   Auf .zg-karte gescopt (Spez 0,2,0): die globale Regel a:link{color:var(--link)}
   (style.css, 0,1,1) kippt sonst die color — genauso gewinnt die Liste .anbieter-link
   (0,2,0) gegen a:link. Die Karte ist Nachfahre von .vergleich-dashboard, daher loesen die
   Listen-Variablen (vergleich.min.css) hier auf und halten den Button im Normalmodus
   automatisch synchron zur Liste (gemessen: #A9F6DB/#004578). Quelle: .anbieter-link. */
.zg-karte .zg-dk-cta {
    display: inline-flex;
    align-items: center;
    /* P25: nicht ueber die volle Panel-Breite — inhaltsbreit + rechtsbuendig wie der
       Kurvenblick-CTA (a.kb-detail-cta, align-self:flex-end; Anwender-Wunsch). */
    align-self: flex-end;
    gap: var(--space-xs);
    /* P24-B1-Fix (Review #19): CTA-Anker + Groesse MUESSEN hier im P13-Block stehen — der
       P24-Layout-Block weiter oben hat dieselbe Spezifitaet (0,2,0), die Source-Order
       entscheidet, und dieser Block steht spaeter. margin-top:auto dockt den CTA in der
       Flex-Spalte ans untere Panel-Ende (P20b-Muster); im Scroll-Fall liefert auto 0 —
       den Mindestabstand traegt der margin-bottom des letzten Inhaltsblocks. */
    margin-top: auto;
    padding: 0.8em 1.3em;
    background: var(--accent);
    color: var(--primary-darker);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}
.zg-karte .zg-dk-cta:hover { background: var(--accent-light); }
/* Politur 13: das globale a::after-Icon (fontello, externes-Link-Glyph aus style.css)
   unterdruecken — analog zur Liste (.anbieter-link::after{content:none!important}); der
   Pfeil-Chip ersetzt es. Gilt fuer Karte UND Sheet. */
.zg-karte .zg-dk-cta::after, .zg-karte .zg-dk-cta:hover::after,
.zg-sheet-inhalt .zg-dk-cta::after, .zg-sheet-inhalt .zg-dk-cta:hover::after { content: none !important; display: none !important; }
/* Pfeil-Chip: die unscoped .link-arrow-Regel der Liste greift auf der Diagrammseite NICHT
   (gemessen: Probe-Chip ungestylt), daher voll definiert. Quelle: vergleich.min.css
   .link-arrow; px fuer Pixel-Paritaet zum Listen-Chip. */
.zg-karte .zg-dk-cta .link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--primary-darker);
    color: var(--text-primary);
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    margin-left: 6px;
    position: relative;
    top: -3px;
    padding-bottom: 1px;
}
/* Hochkontrast-Hell fuer den CTA + das gesamte Karten-Panel: siehe den Sammel-Block
   "#vergleich.kontrast-hell .zg-karte …" unter dem Sheet-Hell-Block (Politur 23 — der
   fruehere CTA-Einzelblock ist dort aufgegangen). */

/* ---- Saeulen-Hover-Mini-Verteilung ---- */
.zg-saeule-info {
    position: absolute;
    z-index: 38;
    top: 0.5em; left: 0;
    background: rgba(11, 39, 64, 0.92);
    color: #ffffff;
    border-radius: 0.45em;
    padding: 0.5em 0.7em;
    font-size: 0.78rem;
    line-height: 1.35;
    pointer-events: none;
    box-shadow: 0 0.375em 1em rgba(10, 40, 70, 0.28);
    display: none;
    min-width: 9em;
}
.zg-saeule-info.sichtbar { display: block; }
.zg-si-titel { font-weight: 700; margin-bottom: 0.25em; font-size: 0.72rem; letter-spacing: 0.01em; color: #cfe3f6; }
.zg-si-zeile { display: flex; justify-content: space-between; gap: 1em; }
.zg-si-zeile b { color: #ffffff; }

/* ---- Zoom-Button (in der Steuerungs-Zeile) ---- */
/* Betrag-Toggle-Optik (Politur 3b): der Wrap traegt die Gruppenflaeche, der Button
   verhaelt sich wie eine Toggle-Option (weisse Pill = aktiv). kontrast-hell-Regeln
   stehen gebuendelt beim Farbmodus-Block. */
.zg-zoom-wrap {
    display: inline-flex;
    align-items: center;
    background: #0060A5;
    border-radius: 0.5em;
    padding: 0.125em;
}
.zg-zoom-btn {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.42em 0.9em;
    border-radius: 0.375em;
    cursor: pointer;
    line-height: 1.2;
}
.zg-zoom-btn:hover { background: rgba(255, 255, 255, 0.1); }
.zg-zoom-btn[aria-pressed="true"] { background: #ffffff; color: #004578; font-weight: 600; }
.zg-zoom-btn:focus-visible { outline: 0.125em solid #0070C0; outline-offset: 0.125em; }

/* ---- Fokus-Zoom-Kontextachse (SVG) ---- */
.zg-kontext-rahmen { fill: #eef1f4; stroke: #c3c2b7; stroke-width: 1; }
.zg-kontext-fenster { fill: #0070C0; opacity: 0.5; }
.zg-kontext-text { fill: #6b7a8a; }
#vergleich.kontrast-hell .zg-kontext-rahmen { fill: #e6eef5; stroke: #9fb0bf; }
#vergleich.kontrast-hell .zg-kontext-fenster { fill: #00528D; opacity: 0.6; }
#vergleich.kontrast-hell .zg-kontext-text { fill: #003A66; }

/* ---- Pin-Leiste (Chips, Bestands-Optik) ---- */
.zinsgebirge-pins { display: none; flex-wrap: wrap; align-items: center; gap: 0.4em 0.6em; margin-top: 0.7em; }
.zinsgebirge-pins.hat-pins { display: flex; }
.zg-pin-label { color: rgba(255,255,255,0.85); font-size: 0.82rem; }
.zg-pin-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: #ffffff;
    border: 0.0625em solid #d4dee8;
    border-radius: 1em;
    padding: 0.2em 0.35em 0.2em 0.6em;
    font-size: 0.8rem;
    color: #22303c;
}
.zg-pin-chip-swatch { width: 0.7em; height: 0.7em; border-radius: 50%; flex-shrink: 0; }
.zg-pin-chip-name { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Politur 22c: Chip-Name ist ein Button (Detail-Karte wieder einblenden) — Reset auf Chip-Optik */
button.zg-pin-chip-name { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.zg-pin-chip-name:hover { text-decoration: underline; }
.zg-pin-chip-name:focus-visible { outline: 0.125em solid #0070C0; outline-offset: 0.125em; }
.zg-pin-chip-x {
    border: 0;
    background: #eef1f4;
    color: #52514e;
    border-radius: 50%;
    width: 1.35em;
    height: 1.35em;
    line-height: 1;
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.zg-pin-chip-x:hover { background: #d8dee4; color: #22303c; }
.zg-pin-hinweis {
    display: none;
    margin-top: 0.5em;
    font-size: 0.8rem;
    color: #8a5a00;
    background: #fff3d6;
    border-radius: 0.4em;
    padding: 0.35em 0.6em;
}
.zg-pin-hinweis.sichtbar { display: inline-block; }
#vergleich.kontrast-hell .zg-pin-label { color: #003A66; }
#vergleich.kontrast-hell .zg-pin-chip { border-color: #0070C0; color: #003A66; }

/* ---- reduced-motion: keine Uebergaenge ---- */
@media (prefers-reduced-motion: reduce) {
    .zg-kurven .zg-kurve { transition: none !important; }
    .zg-karte, .zg-saeule-info { transition: none !important; }
}

/* ============================================================
   PHASE 4 — MOBILE + A11y
   ============================================================ */

/* ---- Bottom-Sheet (Touch-Tap zeigt Anbieter-Detail von unten) ---- */
.zg-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(9, 30, 48, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}
.zg-sheet-backdrop.sichtbar { opacity: 1; visibility: visible; }
.zg-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0 auto;
    max-width: 34em;
    z-index: 999;
    box-sizing: border-box;
    background: rgba(9, 87, 143, 0.92);
    -webkit-backdrop-filter: blur(1.25em); backdrop-filter: blur(1.25em);
    border-top: 0.0625em solid rgba(76, 181, 160, 0.45);
    border-radius: 1em 1em 0 0;
    box-shadow: 0 -0.5em 2em rgba(0, 26, 48, 0.4);
    max-height: 85vh;
    color: #ffffff;
    /* P20b: Flex-Spalte — der Inhalt (flex:1) fuellt die feste Mobil-Hoehe (85vh, MQ unten),
       CTA + Linie-Button ankern per margin-top:auto unten (Kurvenblick-Duktus, konstante
       Kachel-Hoehe statt inhaltsgetriebener). */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.4em 1.15em 1.5em;
    transform: translateY(102%);
    /* E3: geschlossen zusaetzlich unsichtbar (nicht tab-/AT-erreichbar). visibility wechselt
       verzoegert (0s @ 0.28s), damit die Slide-Animation beim Schliessen erhalten bleibt;
       im .sichtbar-Zustand kippt transition-delay auf 0s -> sofort sichtbar beim Oeffnen. */
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
}
.zg-sheet.sichtbar { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.zg-sheet-handle {
    flex-shrink: 0;
    width: 2.75em;
    height: 0.3em;
    border-radius: 0.3em;
    background: rgba(255, 255, 255, 0.35);
    margin: 0.4em auto 0.7em;
}
.zg-sheet-close {
    position: absolute;
    top: 0.45em; right: 0.55em;
    width: 2.75rem; height: 2.75rem;
    border: 0;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border-radius: 0.5em;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.zg-sheet-close:hover { background: rgba(255, 255, 255, 0.30); color: #fff; }
.zg-sheet-close:focus-visible { outline: 0.125em solid #ffffff; outline-offset: 0.125em; }

/* ---- Buendel-Wechsler-Zeile (Politur 5, Auftrag A) ---- */
/* Standardmaessig versteckt; nur bei Cluster >= 2 (.sichtbar) als flex sichtbar — der
   Ein-Anbieter-Fall bleibt so pixelgleich zum bisherigen Sheet. Zentriert, mit rechtem
   Freiraum (padding-right 3.1em) fuer den absolut positionierten Close-Button (2.75rem @
   top 0.45em/right 0.55em), damit die Zeile ihn nicht unterlappt; leichter Links-Versatz
   (padding-left 1.15em) haelt die Optik gegen den Close-Button ausbalanciert. Duktus wie
   .zg-sheet-close (transluzente weisse Flaeche auf dunklem Glas, :focus-visible-Outline). */
.zg-sheet-wechsler {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 0.1em 3.1em 0.5em 1.15em;
    margin-bottom: 0.1em;
}
.zg-sheet-wechsler.sichtbar { display: flex; }
.zg-sheet-nav {
    flex-shrink: 0;
    min-width: 2.75em;
    min-height: 2.75em;
    border: 0;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.zg-sheet-nav:hover { background: rgba(255, 255, 255, 0.30); color: #fff; }
.zg-sheet-nav:focus-visible { outline: 0.125em solid #ffffff; outline-offset: 0.125em; }
.zg-sheet-wechsler-label { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); text-align: center; }
.zg-sheet-wechsler-label b { color: #ffffff; font-weight: 700; }

/* Der Sheet-Inhalt nutzt dieselben .zg-dk-*-Bausteine wie die Hover-Karte, hier aber
   voll interaktiv/scrollbar (kein pointer-events:none). Detailzins etwas groesser. */
/* P20b: Inhalt als wachsende Flex-Spalte (flex:1 0 auto — KEIN Shrink, sonst wuerde der
   Scroll-Container den Inhalt stauchen statt zu scrollen); der CTA schiebt sich per
   margin-top:auto ans Ende -> freier Raum sammelt sich zwischen Merkmalen und Buttons. */
.zg-sheet-inhalt { font-size: 0.95rem; line-height: 1.4; color: #ffffff; display: flex; flex-direction: column; flex: 1 0 auto; }
/* Politur 13: CTA im Sheet — Struktur wie bisher (block, zentriert, groesser), zusaetzlich die
   Listen-Akzent-Optik. Das Sheet haengt an document.body (ausserhalb .vergleich-dashboard und
   #vergleich), daher loesen dort WEDER die Listen-Variablen NOCH der kontrast-hell-Scope auf
   (gemessen) — also KONKRETE Werte (= Live-Liste .anbieter-link normal #A9F6DB/#004578, Chip
   #004578/weiss). (0,2,0) schlaegt die globale a:link-Regel. Seit Politur 20 spiegelt das JS
   den Kontrast-Hell-Zustand als .zg-hell auf das Sheet; der CTA bleibt bewusst in BEIDEN Modi
   mint (heutige Live-Optik, Abweichung vom Brokerage-Hell-CTA #0070C0). */
.zg-sheet-inhalt .zg-dk-cta {
    display: block;
    text-align: center;
    /* P20b: auto statt 0.9em — ankert den CTA am Inhalts-Ende; der 0.9em-Mindestabstand
       kommt vom margin-bottom der davor stehenden Bloecke (checks/badges/aktion, unten). */
    margin-top: auto;
    padding: 0.7em 1em;
    font-size: 0.95rem;
    background: #A9F6DB;
    color: #004578;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
}
.zg-sheet-inhalt .zg-dk-cta:hover { background: #DFFDF2; }
.zg-sheet-inhalt .zg-dk-cta .link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #004578;
    color: #ffffff;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    margin-left: 6px;
    position: relative;
    top: -3px;
    padding-bottom: 1px;
}

/* ---- Peek-Modus (Politur 6): Sheet kollabiert auf Handle/Close/Wechsler, Chart frei ---- */
/* Der Peek entsteht durch Ausblenden von Inhalt + Linie-Button; das Sheet ist am unteren Rand
   verankert und schrumpft instant auf die Kopfzeile (KEIN Hoehen-Uebergang — die transform-Slide
   beim Oeffnen/Schliessen bleibt die einzige Sheet-Animation, reduced-motion unberuehrt). */

/* Linie-Button (voll -> peek): volle Breite, Sekundaer-Optik im Sheet-Duktus (Flaeche wie
   .zg-sheet-close/.zg-sheet-nav). Nur im vollen Zustand sichtbar (im Peek per .zg-peek weg). */
.zg-sheet-linie {
    display: block;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0.9em 0 0;
    min-height: 2.75em;
    border: 0;
    border-radius: 0.6em;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}
.zg-sheet-linie:hover { background: rgba(255, 255, 255, 0.30); }
.zg-sheet-linie:focus-visible { outline: 0.125em solid #ffffff; outline-offset: 0.125em; }

/* Expand-Element in der Wechsler-Zeile: traegt im Peek Bankname (+ N von M) + ˄-Indiz und fuehrt
   per Tap zurueck zum vollen Sheet. Im vollen Zustand ausgeblendet (dort zeigt das Bestands-span
   .zg-sheet-wechsler-label). Label-Optik, Hintergrund transparent; lange Namen kappen per Ellipse. */
.zg-sheet-expand {
    display: none;
    flex: 0 1 auto;
    min-height: 2.75em;
    max-width: 100%;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0.4em;
}
.zg-sheet-expand b { color: #ffffff; font-weight: 700; }
.zg-sheet-expand .zg-sheet-expand-caret { margin-left: 0.2em; color: rgba(255, 255, 255, 0.6); }
.zg-sheet-expand:hover { color: #ffffff; }
.zg-sheet-expand:focus-visible { outline: 0.125em solid #ffffff; outline-offset: 0.125em; }

/* Peek-Zustand: Inhalt + Linie-Button weg, Wechsler-Zeile IMMER sichtbar (Voll-span aus, Expand
   ein). Backdrop-Sichtbarkeit steuert weiterhin die .sichtbar-Klasse (JS entfernt sie im Peek). */
.zg-sheet.zg-peek .zg-sheet-inhalt { display: none; }
.zg-sheet.zg-peek .zg-sheet-linie { display: none; }
.zg-sheet.zg-peek .zg-sheet-wechsler { display: flex; }
.zg-sheet.zg-peek .zg-sheet-wechsler-label { display: none; }
.zg-sheet.zg-peek .zg-sheet-expand { display: block; }
/* Solo-Buendel im Peek: nur die ‹/›-Buttons ausblenden (Expand + Close bleiben). */
.zg-sheet.zg-peek .zg-sheet-wechsler.zg-solo .zg-sheet-nav { display: none; }
/* P20b: der Peek kollabiert auf die Kopfzeile — die feste 85vh-Voll-Hoehe (MQ unten)
   darf hier nicht greifen. */
.zg-sheet.zg-peek { height: auto; }

/* ---- Detail-Inhalt auf dunklem Glas-Panel (Kurvenblick-Duktus) — Sheet UND Desktop-Karte ----
   Politur 20: Der Sheet haengt an document.body (ausserhalb #vergleich). Politur 23: die Hover-Karte
   .zg-karte ist am Desktop selbst ein rechts einfahrendes Glas-Panel (position:fixed, s.o.) und teilt
   sich daher dasselbe helle-Schrift-auf-dunklem-Glas-Mapping (Selektorlisten erweitert, Werte NICHT
   dupliziert). Die .zg-dk-*-Bestandsfarben sind auf weisse Flaeche gestimmt und werden hier auf das
   dunkle Panel umgefaerbt. Badges bleiben unveraendert; der CTA ist bereits der Mint-Button.
   Kontrast-Hell: der Sheet per JS-.zg-hell-Spiegelung (body-seitig), die Karte per
   #vergleich.kontrast-hell-Kaskade (s. Karten-Hell-Block unter dem Sheet-Hell-Block). */
.zg-sheet .zg-dk-bank, .zg-karte .zg-dk-bank { color: #ffffff; }
.zg-sheet .zg-dk-produkt, .zg-karte .zg-dk-produkt { color: rgba(255, 255, 255, 0.8); }
.zg-sheet .zg-dk-zins, .zg-karte .zg-dk-zins { color: #ffffff; }
.zg-sheet .zg-dk-zins small, .zg-karte .zg-dk-zins small { color: rgba(255, 255, 255, 0.72); }
.zg-sheet .zg-dk-zins.leer, .zg-karte .zg-dk-zins.leer { color: rgba(255, 255, 255, 0.72); }
.zg-sheet .zg-dk-rang b, .zg-karte .zg-dk-rang b { color: #ffffff; }
.zg-sheet .zg-dk-rang--leer, .zg-karte .zg-dk-rang--leer { color: rgba(255, 255, 255, 0.6); }
.zg-sheet .zg-dk-einordnung, .zg-karte .zg-dk-einordnung { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.92); }
.zg-sheet .zg-dk-einordnung .z, .zg-karte .zg-dk-einordnung .z { color: #A9F6DB; }
.zg-sheet .zg-dk-reihe, .zg-karte .zg-dk-reihe { border-top-color: rgba(255, 255, 255, 0.14); }
.zg-sheet .zg-dk-reihe .k, .zg-karte .zg-dk-reihe .k { color: rgba(255, 255, 255, 0.72); }
.zg-sheet .zg-dk-check .ok, .zg-karte .zg-dk-check .ok { color: #A9F6DB; }
.zg-sheet .zg-dk-check .no, .zg-sheet .zg-dk-check .neg, .zg-karte .zg-dk-check .no, .zg-karte .zg-dk-check .neg { color: #ffb0a8; }
.zg-sheet .zg-dk-aktion, .zg-karte .zg-dk-aktion { color: rgba(255, 255, 255, 0.72); }
/* Politur 23: Der Gruppen-Wechsler (.zg-dk-wechsler/-nav/-label) existiert nur in der Karte (der Sheet
   fuehrt seinen eigenen .zg-sheet-wechsler) -> eigenes Dunkel-Mapping, heller Nav-Button/Label auf dem
   Glas nach dem Muster .zg-sheet-nav. */
.zg-karte .zg-dk-wechsler { border-bottom-color: rgba(255, 255, 255, 0.14); }
.zg-karte .zg-dk-wechsler-label { color: rgba(255, 255, 255, 0.8); }
.zg-karte .zg-dk-wechsler-label b { color: #ffffff; }
.zg-karte .zg-dk-nav { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
.zg-karte .zg-dk-nav:hover { background: rgba(255, 255, 255, 0.30); }
.zg-karte .zg-dk-nav:focus-visible { outline-color: #ffffff; }
/* P20b: Mindestabstand zum unten geankerten CTA (margin-top:auto liefert im Scroll-Fall 0) —
   der jeweils LETZTE dieser optionalen Bloecke traegt den Abstand. */
.zg-sheet .zg-dk-checks,
.zg-sheet .zg-dk-badges,
.zg-sheet .zg-dk-aktion { margin-bottom: 0.9em; }

/* ---- Kontrast-Hell: JS spiegelt .zg-hell auf Sheet UND Backdrop -> weisses Panel (Politur 20) ----
   Ersetzt die frueheren toten #vergleich.kontrast-hell .zg-sheet*-Regeln (body-seitig ohne Wirkung).
   Mapping nach Brokerage-Hell; der Inhalt kehrt auf die hellen Bestandsfarben zurueck. */
.zg-sheet-backdrop.zg-hell { background: rgba(0, 26, 48, 0.35); }
.zg-sheet.zg-hell { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border-top-color: #00528D; color: #22303c; }
.zg-sheet.zg-hell .zg-sheet-handle { background: rgba(0, 82, 141, 0.35); }
.zg-sheet.zg-hell .zg-sheet-close { background: rgba(0, 82, 141, 0.12); color: #003A66; }
.zg-sheet.zg-hell .zg-sheet-close:hover { background: rgba(0, 82, 141, 0.22); }
.zg-sheet.zg-hell .zg-sheet-close:focus-visible { outline-color: #00528D; }
.zg-sheet.zg-hell .zg-sheet-nav { background: rgba(0, 82, 141, 0.12); color: #003A66; }
.zg-sheet.zg-hell .zg-sheet-nav:hover { background: rgba(0, 82, 141, 0.22); }
.zg-sheet.zg-hell .zg-sheet-nav:focus-visible { outline-color: #00528D; }
.zg-sheet.zg-hell .zg-sheet-linie { background: rgba(0, 82, 141, 0.12); color: #003A66; }
.zg-sheet.zg-hell .zg-sheet-linie:hover { background: rgba(0, 82, 141, 0.22); }
.zg-sheet.zg-hell .zg-sheet-linie:focus-visible { outline-color: #00528D; }
.zg-sheet.zg-hell .zg-sheet-wechsler-label { color: #00528D; }
.zg-sheet.zg-hell .zg-sheet-wechsler-label b { color: #00274d; }
.zg-sheet.zg-hell .zg-sheet-expand { color: #00528D; }
.zg-sheet.zg-hell .zg-sheet-expand b { color: #00274d; }
.zg-sheet.zg-hell .zg-sheet-expand .zg-sheet-expand-caret { color: #8a8a86; }
.zg-sheet.zg-hell .zg-sheet-inhalt { color: #22303c; }
.zg-sheet.zg-hell .zg-dk-bank { color: #0b2740; }
.zg-sheet.zg-hell .zg-dk-produkt { color: #52514e; }
.zg-sheet.zg-hell .zg-dk-zins { color: #00528D; }
.zg-sheet.zg-hell .zg-dk-zins small { color: #6b7a8a; }
.zg-sheet.zg-hell .zg-dk-zins.leer { color: #6b7a8a; }
.zg-sheet.zg-hell .zg-dk-rang b { color: #0b2740; }
.zg-sheet.zg-hell .zg-dk-rang--leer { color: #8a97a3; }
.zg-sheet.zg-hell .zg-dk-einordnung { background: #eef5fc; color: #2b3a47; }
.zg-sheet.zg-hell .zg-dk-einordnung .z { color: #00528D; }
.zg-sheet.zg-hell .zg-dk-reihe { border-top-color: #eef1f4; }
.zg-sheet.zg-hell .zg-dk-reihe .k { color: #6b7a8a; }
.zg-sheet.zg-hell .zg-dk-check .ok { color: #1baf7a; }
.zg-sheet.zg-hell .zg-dk-check .no, .zg-sheet.zg-hell .zg-dk-check .neg { color: #b1332f; }
.zg-sheet.zg-hell .zg-dk-aktion { color: #52514e; }

/* ---- Kontrast-Hell fuer das Desktop-Karten-Panel (Politur 23) ----
   Anders als der body-seitige Sheet liegt die Karte im #vergleich-Scope -> Hell-Umschaltung per
   Kaskade (kein JS-.zg-hell-Mirroring). Werte = der .zg-sheet.zg-hell-Block darueber (weisses Panel +
   helle Bestandsfarben); der fruehere CTA-Einzel-Hell-Block (Politur 13) ist hier aufgegangen.
   Spezifitaets-Treppe: Basis (0,1,0) < .zg-karte-Dunkelmapping (0,2,0) < dieser Block (1,2/3,0), kein !important. */
#vergleich.kontrast-hell .zg-karte { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border-left-color: #00528D; color: #22303c; }
/* P25: beim Links-Dock sitzt die Kante rechts. */
#vergleich.kontrast-hell .zg-karte.zg-links { border-right-color: #00528D; }
#vergleich.kontrast-hell .zg-karte .zg-dk-bank { color: #0b2740; }
#vergleich.kontrast-hell .zg-karte .zg-dk-produkt { color: #52514e; }
#vergleich.kontrast-hell .zg-karte .zg-dk-zins { color: #00528D; }
#vergleich.kontrast-hell .zg-karte .zg-dk-zins small { color: #6b7a8a; }
#vergleich.kontrast-hell .zg-karte .zg-dk-zins.leer { color: #6b7a8a; }
#vergleich.kontrast-hell .zg-karte .zg-dk-rang b { color: #0b2740; }
#vergleich.kontrast-hell .zg-karte .zg-dk-rang--leer { color: #8a97a3; }
#vergleich.kontrast-hell .zg-karte .zg-dk-einordnung { background: #eef5fc; color: #2b3a47; }
#vergleich.kontrast-hell .zg-karte .zg-dk-einordnung .z { color: #00528D; }
#vergleich.kontrast-hell .zg-karte .zg-dk-reihe { border-top-color: #eef1f4; }
#vergleich.kontrast-hell .zg-karte .zg-dk-reihe .k { color: #6b7a8a; }
#vergleich.kontrast-hell .zg-karte .zg-dk-check .ok { color: #1baf7a; }
#vergleich.kontrast-hell .zg-karte .zg-dk-check .no, #vergleich.kontrast-hell .zg-karte .zg-dk-check .neg { color: #b1332f; }
#vergleich.kontrast-hell .zg-karte .zg-dk-aktion { color: #52514e; }
#vergleich.kontrast-hell .zg-karte .zg-dk-wechsler { border-bottom-color: #dbe6f0; }
#vergleich.kontrast-hell .zg-karte .zg-dk-wechsler-label { color: #52514e; }
#vergleich.kontrast-hell .zg-karte .zg-dk-wechsler-label b { color: #22303c; }
#vergleich.kontrast-hell .zg-karte .zg-dk-nav { background: rgba(0, 82, 141, 0.10); color: #00528D; }
#vergleich.kontrast-hell .zg-karte .zg-dk-nav:hover { background: rgba(0, 82, 141, 0.20); }
#vergleich.kontrast-hell .zg-karte .zg-dk-nav:focus-visible { outline-color: #0070C0; }
/* CTA-Hell = Listen-Kontrast (festgeld-vergleich-core.inc.php Z.869-871): #0070C0/weiss + Chip weiss/#00528D
   (der var()-Weg ergaebe in kontrast-hell #00528D/#003A66; die Liste rendert dort #0070C0/weiss, gemessen). */
#vergleich.kontrast-hell .zg-karte .zg-dk-cta { background: #0070C0; color: #ffffff; }
#vergleich.kontrast-hell .zg-karte .zg-dk-cta:hover { background: #00528D; }
#vergleich.kontrast-hell .zg-karte .zg-dk-cta .link-arrow { background: #ffffff; color: #00528D; }

/* ---- Mobile-Feinschliff (Touch-Targets, Umbruch) ---- */
@media (max-width: 48em) {
    /* Steuerungszeile bricht um (Farb-Umschalter / Zoom / Legende untereinander).
       Politur 4: kompakter — Leiste, Buttons und Legende gestrafft, damit die Steuerung unter
       dem Chart weniger Hoehe frisst. Nichts wird ausgeblendet; die beiden Touch-Button-Reihen
       bleiben bei min-height 2.75em (~44px), nur Schrift/horizontale Paddings/Gaps schrumpfen.
       Untergrenze der Gesamthoehe = die zwei 44px-Reihen + die (umbrechende) Legende. */
    .zinsgebirge-steuerung { gap: 0.45em 0.8em; padding: 0.5em 0.7em; }
    .zg-farbmodus, .zg-zoom { gap: 0.4em; }
    /* Touch-Targets >= ~44px (2.75em @ 16px) BLEIBEN — nur horizontales Padding + Schrift schlanker.
       Vertikal-Padding bewusst klein (0.3em): einzeilige Buttons haelt die min-height auf Hoehe,
       zweizeilig umgebrochene ("Sitz der Einlagensicherung") wachsen nur noch um Text + 0.6em
       statt + 1.2em — sie wirken so nicht mehr wuchtig neben den einzeiligen. */
    .zg-farbmodus-btn { min-height: 2.75em; padding: 0.3em 0.72em; font-size: 0.85rem; }
    .zg-zoom-btn { min-height: 2.75em; padding: 0.3em 0.72em; font-size: 0.85rem; }
    .zg-legende { font-size: 0.85rem; gap: 0.25em 0.7em; }
    .zg-pin-chip { padding: 0.3em 0.4em 0.3em 0.7em; font-size: 0.9rem; }
    .zg-pin-chip-x { width: 2em; height: 2em; font-size: 1rem; }
    .zg-pin-chip-name { max-width: 9em; }
    /* Detail-Karte (Hover) ist auf Touch redundant zum Sheet — ausblenden. */
    .zg-karte { display: none !important; }
    /* P20b: konstante Kachel-Hoehe bis unter das Logo (Kurvenblick-Vorbild) — unabhaengig
       vom Informationsumfang des Anbieters; der freie Raum verteilt sich per Flex
       (Inhalt oben, CTA + Linie-Button unten). Peek-Ausnahme steht beim Peek-Block. */
    .zg-sheet { height: 85vh; }
}

/* ---- Fokus-Sichtbarkeit (A11y) fuer die Pin-Chip-Entfernen-Buttons ---- */
.zg-pin-chip-x:focus-visible { outline: 0.125em solid #0070C0; outline-offset: 0.125em; }

/* ---- reduced-motion: Sheet ohne Slide ---- */
@media (prefers-reduced-motion: reduce) {
    .zg-sheet, .zg-sheet-backdrop { transition: none !important; }
}

/* ---- AT-Nachzug DE-Politur 16 (E): Intro-Satz ueber dem Diagramm (Muster .skyline-intro) ----
   Markup rendert der Core (<p class="zg-intro"> in .results-container vor .results-header). Der Grund
   an dieser Stelle ist live gemessen BLAU (Body rgb(0,112,192) scheint durch das quasi-transparente
   .vergleich-dashboard) -> weisse Schrift wie die Skyline-Intro. Im kontrast-hell-Modus wird der
   Grund an dieser Stelle WEISS -> dunkle Schrift #003A66. */
#vergleich .zg-intro {
    margin: 0.24rem 0 0.96rem;
    max-width: 44em;
    font-size: 0.96rem;
    line-height: 1.4;
    color: #ffffff;
}
#vergleich.kontrast-hell .zg-intro { color: #003A66; }

/* ============================================================
   AT-NACHZUG DE-P15-20 (2026-07-19) — marktneutrale Bloecke aus DE css v32
   (Suchfeld P15/16, Rest-Toast P18, Lupen-Linien P19). Literalfarben, #vergleich-Scope.
   ============================================================ */
/* Politur 19: Lupen-Verbindungslinien Fensterkanten -> Plot-Ober-/Unterkante. Bewusst duenn,
   gestrichelt und halbtransparent (Kontext, keine Datenlinie); liegen unter dem Achsentext. */
.zg-kontext-linie { stroke: #0070C0; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.4; fill: none; }
#vergleich.kontrast-hell .zg-kontext-linie { stroke: #00528D; opacity: 0.45; }
/* Politur 18: Rest-Hinweis des Drittel-Zooms als Viewport-Toast (Vorbild skylineToast
   Tagesgeld DE). Bewusst KEIN kontrast-hell-Override — der Toast bleibt dunkel. */
.zg-toast {
    position: fixed; left: 50%; bottom: 1.6em; z-index: 1300;
    transform: translate(-50%, 1.25em);
    background: #10233b; color: #fff;
    padding: 0.7em 1.15em; border-radius: 0.6em; font-size: 0.83rem; line-height: 1.4;
    box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.3);
    opacity: 0; pointer-events: none; max-width: min(30em, 92vw);
    transition: opacity 200ms ease, transform 200ms ease;
}
.zg-toast.zg-toast-an { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .zg-toast { transition: opacity 200ms ease; } }
@media (max-width: 48em) {
    /* Toast ueber das Bottom-Sheet hinaus nach oben legen, sonst verschwindet er dahinter. */
    .zg-toast { bottom: auto; top: 1.2em; transform: translate(-50%, -1.25em); }
    .zg-toast.zg-toast-an { transform: translate(-50%, 0); }
}
/* ============================================================
   POLITUR 15 — BANKNAMEN-SUCHE (Combobox rechts ueber dem Diagramm)
   ============================================================ */
/* Selbsttragendes weisses Eingabefeld (Vorbild 1-zu-1-festgeld.min.css) in der WEISSEN
   .results-header (.vergleich-dashboard background:#fff), rechtsbuendig neben dem Treffer-
   Zaehler. Marken-Blau als Rahmen/Akzent bindet es an die blaue Buehne darunter an. */
.zg-suche {
    position: relative;
    margin-left: auto;      /* rechtsbuendig in der Flex-.results-header */
    flex: 0 1 32em;         /* Politur 16: breiter, wie das 1-zu-1-Feld (~507px live gemessen) */
    max-width: 32em;
    min-width: 0;
}
/* #vergleich-Scope: schlaegt generische Formular-Border-/Farbregeln der geteilten CSS
   (sonst faerbt eine breitere input-Regel den Rand um). */
#vergleich .zg-suche-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5em 0.7em;
    border: 0.125em solid #003A66;
    border-radius: 0.375rem;
    background: #ffffff;
    color: #1a2733;
    font-family: inherit;
    font-size: 16px;        /* gegen iOS-Auto-Zoom (>=16px am Input) */
    line-height: 1.3;
}
#vergleich .zg-suche-input::placeholder { color: #5b6b7a; }
#vergleich .zg-suche-input:focus-visible {
    /* Politur 16: Mint-Outline wie das 1-zu-1-Feld; der Rahmen bleibt blau (#003A66). */
    outline: 0.125em solid #00d4aa;
    outline-offset: 0.125em;
}
/* Popup-Liste: weiss, absolut, ueber der Buehne (z-index), max-height + Scroll. */
.zg-suche-liste {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.2em);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.25em 0;
    max-height: 18em;
    overflow-y: auto;
    list-style: none;
    background: #ffffff;
    color: #1a2733;
    border: 0.0625em solid #b9cfe2;
    border-radius: 0.375rem;
    box-shadow: 0 0.375em 1.125em rgba(0, 30, 60, 0.28);
    font-size: 0.9rem;
    text-align: left;
}
.zg-suche-liste[hidden] { display: none; }
#vergleich .zg-suche-option {
    display: block;
    padding: 0.4em 0.7em;
    cursor: pointer;
    color: #1a2733;
}
.zg-suche-option-bank { font-weight: 600; }
#vergleich .zg-suche-option-produkt { color: #3b4c5d; }
#vergleich .zg-suche-option-zw { color: #5b6b7a; font-size: 0.85em; }
/* is-active = aria-activedescendant-Proxy (kein DOM-Fokus); Hover gleichwertig. */
#vergleich .zg-suche-option:hover,
#vergleich .zg-suche-option.is-active { background: #0070C0; color: #ffffff; }
#vergleich .zg-suche-option:hover .zg-suche-option-produkt,
#vergleich .zg-suche-option.is-active .zg-suche-option-produkt,
#vergleich .zg-suche-option:hover .zg-suche-option-zw,
#vergleich .zg-suche-option.is-active .zg-suche-option-zw { color: rgba(255, 255, 255, 0.85); }
.zg-suche-liste mark {
    background: transparent;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}
#vergleich .zg-suche-option:hover mark,
#vergleich .zg-suche-option.is-active mark { color: #ffffff; }
.zg-suche-none { padding: 0.5em 0.7em; color: #666; font-style: italic; }
/* sr-only fuer die aria-live-Statusmeldung (Namespaced, kein Konflikt mit Bestand). */
.zg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* Mobil: volle Zeile unter dem Zaehler (results-header wird zur Spalte, align-items:stretch). */
@media (max-width: 48em) {
    .zg-suche { margin-left: 0; max-width: none; flex-basis: auto; width: 100%; }
}
/* kontrast-hell-Overrides fuer alle neuen Farbwerte (computed colors wechseln). */
#vergleich.kontrast-hell .zg-suche-input {
    border-color: #00528D;
    color: #00274d;
    background: #ffffff;
}
#vergleich.kontrast-hell .zg-suche-input::placeholder { color: #3b4c5d; }
#vergleich.kontrast-hell .zg-suche-input:focus-visible {
    outline-color: #00528D;
    border-color: #00528D;
}
#vergleich.kontrast-hell .zg-suche-option:hover,
#vergleich.kontrast-hell .zg-suche-option.is-active { background: #00528D; color: #ffffff; }
#vergleich.kontrast-hell .zg-suche-liste { border-color: #9fb0bf; }