/* diagramm.min.css — v40 — "Das Zinsgebirge" (Festgeld DE).
   Politur 25 (2026-07-20): Seiten-Dock des Desktop-Panels — liegt die aktive Laufzeit-Station
   in der rechten Viewport-Haelfte (lange Laufzeiten), dockt das Panel links an (.zg-links,
   Spiegel-Geometrie: Slide von links, Mint-Kante rechts, Hell-Pendant), damit die gewaehlte
   Laufzeit nicht verdeckt wird; die Seite setzt zeigeKarte() (JS v41) per Halbraum-Logik wie
   bei der frueheren Hover-Karte. Zusaetzlich P24-B1-Fix (Review #19): CTA-Anker margin-top:auto
   + CTA-Groesse in den spaeter stehenden P13-CTA-Block konsolidiert (gleiche Spezifitaet,
   Source-Order hatte die P24-Regel ausgehebelt). CTA zudem nicht mehr ueber die volle
   Panel-Breite, sondern inhaltsbreit + rechtsbuendig wie der Kurvenblick-CTA
   (align-self:flex-end; Anwender-Wunsch).
   Politur 24 (2026-07-20): Panel-Layout grosszuegig (Anwender-Wunsch "Freiraum einbauen, Hoehe besser
   nutzen") — die vom 19em-Kaertchen geerbte kompakte Typo/Abstands-Dichte weicht einem luftigen
   Panel-Layout, alles .zg-karte-scoped (das mobile Sheet bleibt unberuehrt): Grundschrift 0.9rem,
   Breite von em auf 30rem entkoppelt (Schriftaenderung skaliert die Panelbreite nicht mehr mit;
   bewusst schmaler als das 34em-Kurvenblick-Vorbild - mehr Sicht auf das Diagramm), Padding 2.25em/2em,
   Produktname in eigener Zeile (display:block), Zins 2.4rem, Einordnungs-Box/Reihen/Checks mit
   grosszuegigen Abstaenden, CTA per Flex-Spalte + margin-top:auto ans untere Panel-Ende geankert
   (P20b-Muster; Kinder flex:0 0 auto gegen Scroll-Stauchung, Mindestabstand im Scroll-Fall traegt
   der margin-bottom des letzten Inhaltsblocks). JS bleibt v40.
   Politur 23 (2026-07-20): Desktop-Seitenpanel — die Hover-Karte (.zg-karte) wird am Desktop (>48em) vom
   frueheren schwebenden weissen Kaertchen zum rechts einfahrenden Kurvenblick-Panel (position:fixed am
   Viewport-Rand, dunkles Glas rgba(9,87,143,0.92) + blur + Mint-Kante, weisse Typo, X-Achsen-Slide via
   .sichtbar mit visibility-Delay wie das Bottom-Sheet). Nicht-modal (kein Backdrop, kein Fokus-Trap);
   Ausloese-/Pin-/Such-Logik unveraendert. Die .zg-dk-*-Dunkelfaerbung teilt sich die Karte jetzt mit dem
   Sheet (Selektorlisten erweitert, Werte nicht dupliziert), plus eigenes Wechsler-/Nav-Dunkelmapping;
   Kontrast-Hell per #vergleich.kontrast-hell-Kaskade (die Karte haengt in #vergleich; der fruehere
   CTA-Einzel-Hell-Block ist darin aufgegangen). Mobil (<=48em) bleibt die Karte display:none (Bottom-Sheet).
   Passt zur JS-Aenderung v40.
   Politur 20b (2026-07-20): konstante Sheet-Hoehe mobil (<=48em: height 85vh, bis unter das Logo)
   statt inhaltsgetriebener — Sheet + Inhalt als Flex-Spalte, Inhalt flex:1 0 auto (kein Shrink,
   der Scroll-Container scrollt weiter), CTA per margin-top:auto ans Ende geankert (Mindestabstand
   0.9em via margin-bottom der checks/badges/aktion-Bloecke), flex-shrink:0 fuer Handle/Wechsler/
   Linie-Button. Peek-Ausnahme .zg-sheet.zg-peek { height:auto } (kollabiert weiter auf Kopfzeile).
   Politur 20 (2026-07-20): Sheet-Optik auf Kurvenblick-Panel-Duktus (dunkles Glas, .zg-hell-Spiegelung
   per JS). Das mobile Bottom-Sheet + Backdrop uebernehmen den Brokerage-Panel-Look: rgba(9,87,143,0.92)-
   Glas mit blur, Mint-Kante, weisse Typo, Mint-Akzente (Einordnung/Haekchen), Schliessen-Button als
   abgerundetes Quadrat, heller Griff. Die frueheren toten #vergleich.kontrast-hell .zg-sheet*-Regeln
   (der Sheet haengt an document.body, ausserhalb #vergleich -> Selektor griff nie) durch .zg-hell-Regeln
   ersetzt, die das JS auf Sheet UND Backdrop spiegelt (Kontrast-Hell = weisses Panel, Inhalt auf den
   hellen Bestandsfarben). Alle Sheet-Werte konkret (kein var(), body-seitig loesen Variablen nicht auf).
   Passt zur JS-Aenderung v39.
   Politur 19 (2026-07-19): Lupen-Verbindungslinien der Kontextachse (.zg-kontext-linie,
   Fensterkanten -> Plot-Ober-/Unterkante): 1uu, gestrichelt 3/3, #0070C0 mit 0.4 Deckkraft,
   kontrast-hell #00528D/0.45. Passt zur JS-Aenderung v30 (gKontext vor gAxis, Linien in
   buildAxes im Zoom-Zweig).
   Politur 18 (2026-07-19): Rest-Hinweis des Drittel-Zooms vom SVG-Text auf Viewport-Toast
   umgestellt (.zg-toast/#zgToast, Optik 1:1 vom skylineToast Tagesgeld DE: fixed unten mittig,
   Grund #10233b, weiss, 0.6em-Radius, Fade+Slide 200ms; mobil <=48em oben statt unten, dort
   saesse er hinterm Bottom-Sheet; prefers-reduced-motion nur Fade). .zg-zoom-rest-text entfernt.
   Kein kontrast-hell-Override (Toast bleibt bewusst dunkel, wie das Vorbild). Passt zur
   JS-Aenderung v29 (Suche holt verdeckte Angebote ins Fenster; Toast-Trigger).
   Politur 17 (2026-07-19): Rest-Hinweis des Drittel-Zooms ("+ N weitere Angebote unterhalb
   des Ausschnitts") als SVG-Text am unteren Plot-Rand — in v31 durch den Toast ersetzt.
   Passt zur JS-Aenderung v28 (Zoom rahmt oberes Drittel).
   Politur 16 (2026-07-18): (A) Suchfeld breiter — .zg-suche flex-basis + max-width 20em -> 32em
   (wie das 1-zu-1-Feld, ~507px live gemessen; Shrink bleibt, Mobile-MQ volle Zeile unveraendert).
   (B) Aktives Suchfeld: Fokus-Outline mint (#00d4aa) wie 1-zu-1, Rahmen bleibt blau (#003A66) —
   die fruehere border-color:#0070C0-Zeile im Fokus-Block entfernt. Bewusste Abweichung: der
   kontrast-hell-Fokus-Override bleibt #00528D (Mint waere auf der Hell-Flaeche kontrastschwach).
   (E) Intro-Satz ueber dem Diagramm (.zg-intro, Muster .skyline-intro Tagesgeld DE): Grund an der
   Stelle ist live gemessen BLAU (festzins/#0070C0) -> weisse Schrift; kontrast-hell macht den Grund
   weiss -> #003A66. Markup rendert der Core. (P15-Report-Korrektur: nicht weisses Dashboard.)
   Passt zur JS-Aenderung v27 (Pins in Serienfarbe, Bindestrich im Suchfeld — nur JS).
   Politur 15 (2026-07-18): Banknamen-Suche (Combobox) rechts in der .results-header ueber dem
   Diagramm. Selbsttragendes weisses Eingabefeld (Vorbild 1-zu-1-festgeld.min.css) — die
   .results-header sitzt auf dem WEISSEN .vergleich-dashboard (background:#fff; Zaehler in
   --text-secondary/dunkel), nicht auf der blauen Buehne; Marken-Blau (--primary-darker/--primary)
   traegt Rahmen + Akzent und bindet das Feld optisch an die Buehne darunter an. Wrapper
   rechtsbuendig (margin-left:auto), Dropdown weiss + absolut + z-index ueber der Buehne,
   max-height 18em + Scroll; Options-Hover/aktiv in Marken-Blau, <mark> transparent+fett+unterstrichen.
   Mobil (max-width:48em): volle Zeile unter dem Zaehler, font-size:16px am Input (iOS-Zoom-Schutz).
   kontrast-hell-Overrides fuer alle neuen Farbwerte (#00528D/#00274d). Passt zur JS-Aenderung v26.
   Politur 14 (2026-07-18): Pin-Leisten-Label "Angeheftet:" in rgba(255,255,255,0.85) (auf
   blauer Buehne, .zg-pin-label; kontrast-hell-Override #003A66 unveraendert). Passt zur
   JS-Aenderung dieser Politur (Betragsformat der Detail-Karte). Lehre P13: die Kopf-Historie
   dieser Datei lief den ausgelieferten v=-Refs hinterher — hier zeitgleich mit dem Bump gepflegt.
   Politur 13 (2026-07-18): CTA "zum Anbieter" in Listen-/Tabellen-Optik — Hover-Karte via
   var()-Tokens (.zg-karte .zg-dk-cta, auto-synchron zur Liste), Pfeil-Chip .link-arrow als
   eigene Regel, globales a::after unterdrueckt, kontrast-hell-Override wie die Liste; Sheet-CTA
   mit konkreten Token-Werten (body-montiert, ausserhalb der var()-/kontrast-Scopes).
   Politur 11 (2026-07-18): A2 — die AKTIVE Marke wird nicht mehr mitgedimmt
   (.zg-bienen.zg-gedimmt .zg-biene.zg-aktiv { opacity:1 }, Spezifitaets-Pendant zur Kurven-Regel).
   Die Auswahl-Kennzeichnung selbst (zg-auswahl-marke/-ring/-zahl) wird per SVG-Attribut gesetzt,
   kein CSS. (Hinweis: Kopf-Historie war seit v22/Politur 6 nicht fortgeschrieben, die Asset-Ref
   lief unterdessen bis v24 — Inhalt enthaelt die P9-Regel .zg-gruppe-zahl und die P10-Wechsler-Klassen.)
   Politur 6 (2026-07-17): Peek-Modus fuers Bottom-Sheet. Neuer Linie-Button (.zg-sheet-linie,
   volle Breite, Sekundaer-Optik im Sheet-Duktus #eef1f4/hover #d8dee4, nur im vollen Sheet) und
   Expand-Element in der Wechsler-Zeile (.zg-sheet-expand, traegt im Peek Bankname + ˄-Indiz, im
   Voll ausgeblendet). Peek-Zustand (.zg-sheet.zg-peek): Inhalt + Linie-Button aus, Wechsler-Zeile
   immer sichtbar, Voll-Label aus/Expand ein; .zg-solo blendet im Peek nur die ‹/›-Buttons aus.
   kontrast-hell-Overrides fuer beide neuen Bausteine. Kein Hoehen-Uebergang (instant); die
   transform-Slide beim Oeffnen/Schliessen bleibt die einzige Sheet-Animation. Keine Aenderung an
   Desktop-Geometrie/Bestandsregeln.
   Politur 5 (2026-07-17): Buendel-Wechsler-Zeile im Bottom-Sheet (.zg-sheet-wechsler / .zg-sheet-nav /
   .zg-sheet-wechsler-label + kontrast-hell-Overrides): standardmaessig versteckt, nur bei Cluster >= 2
   sichtbar (flex, zentriert), runde ‹/›-Buttons im .zg-sheet-close-Duktus (>= 2.75em Touch-Target,
   Flaeche #eef1f4/hover #d8dee4, :focus-visible-Outline), rechter Freiraum fuer den Close-Button.
   Keine Aenderung an Desktop-Geometrie/Bestandsregeln (JS-Auftraege B/C sind reine SVG-Attribut-Werte).
   Politur 4 (2026-07-17): pinch-zoom freigegeben (touch-action: pan-y pinch-zoom auf der Buehne
   — nativer Browser-Zoom mit zwei Fingern auf dem SVG jetzt erlaubt); Mobile-Steuerungsleiste
   kompakter (schlankere Buttons/Legende, weniger Gaps/Padding). Touch-Targets bleiben >= 2.75em,
   nichts wird ausgeblendet.
   Politur 3 (2026-07-17): (3a) Diagramm-Glyphe im #hilfe jetzt eigenes Inline-SVG (Sizing im
   Core-Inline-CSS, Klasse .zg-view-icon). (3b) Farbmodus-Umschalter + Fokus-Zoom-Button in der
   Steuerungsleiste auf Betrag-Toggle-Optik umgestellt: dunkelblaue Gruppenflaeche #0060A5
   (effektive Farbe der zentralen .toggle-group rgba(0,82,141,.4) ueber dem Seitenblau),
   inaktive Option transparent mit Weiss 70%, AKTIVE Option = weisse Pill mit #004578 (fett) —
   Weiss als Systemfarbe "aktiv" (wie Betrag-Toggle und Laufzeit-Band). kontrast-hell analog
   zur dortigen Betrag-Optik (Gruppe rgba(0,82,141,.06), aktiv #0070C0 + weiss).
   Politur 2d (2026-07-17): Legende (.zg-legende) beginnt in beiden Farbmodi in eigener Zeile
   (flex-basis:100% in der umbrechenden Steuerungsleiste) — Farb-Umschalter/Zoom oben, Legende
   darunter; im Mobile-Breakpoint bricht die Leiste ohnehin um (kein doppelter Leerraum).
   Politur 2c (2026-07-17): gehoverte Kurve bleibt beim Dimmen voll sichtbar (durchgezogene
   Linie in Serienfarbe) — Spezifitaets-Ausnahme analog zur Pin-Regel, inkl. Halo + kontrast-hell.
   Politur 2b (2026-07-17): Ruhezustand der Kurven EINFARBIG (entsaettigtes Mittelblau #6f9dc9) —
   nicht ausgewaehlte Linien bilden ein feines, gleichmaessiges Gewebe (Referenz: Parallel-
   Koordinaten-Chart), aus dem Band + Bienen + gehoverte/gepinnte Linien farbig hervortreten.
   Serienfarbe traegt im Ruhezustand nur noch die Punkt-/Bienen-/Legenden-/Spotlight-Ebene.
   Umsetzung CSS-only: neue Regel ueberschreibt das JS-Praesentationsattribut (stroke) genau fuer
   nicht-aktive/nicht-gepinnte Kurven UND deren Ein-Stationen-Pendant (Halo-Einzelstrich); Hover
   (zg-aktiv), Pins und der komplette kontrast-hell-Modus fallen automatisch auf die Serienfarbe
   zurueck (kein JS-Eingriff an der Farblogik).
   Politur 2 (2026-07-17): Buehne im Normalmodus flach blau (#dcebf8) statt Off-White-Gradient,
   aktives Band als weissliche Spalte (Systemfarbe "aktiv"), Achsentext/-titel/Gitter auf Blau
   lesbar getrimmt, Buehnen-Rundung 0.375rem; Steuerungszeile als gestaltete Leiste (blaue
   Flaeche + Rundung + abgestimmte Textfarben), kontrast-hell-Overrides fuer Buehne+Leiste ergaenzt.
   Politur 1: Ein-Laufzeit-Anbieter als Einzelstrich, Ring nur im Fokus.
   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 v41 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 (politur24-entwurf1-*.png):
   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; }
/* 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); }
}
#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 (Z.411-449) 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; }
}

/* ---- Politur 16 (E): Intro-Satz ueber dem Diagramm (Muster .skyline-intro Tagesgeld DE) ----
   Markup rendert der Core (<p class="zg-intro"> in .results-container vor .results-header). Der Grund
   an dieser Stelle ist live gemessen BLAU (festzins-Verlauf/#0070C0-Body scheint durch das quasi-
   transparente .vergleich-dashboard) -> weisse Schrift wie die Skyline-Intro. Im kontrast-hell-Modus
   wird der Grund an dieser Stelle WEISS (gemessen rgb(255,255,255)) -> 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; }

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