/* === Seitenhilfe Festgeld DE — eigene Styles, gescopet auf #vergleich === */
    /* Design-Tokens der Tabellen-Konvention (Markenblau/Türkis). Eigene --sh-*-
       Variablen, damit die Seite unabhängig von undokumentierten vergleich.min.css-
       Interna bleibt; Werte laut KONZEPT.md §3 / ENTSCHEIDUNGEN.md. */
    #vergleich {
        --sh-primary: #0070C0;
        --sh-primary-dark: #00528D;
        --sh-primary-darker: #003A66;
        --sh-mint-100: #A9F6DB;
        --sh-mint-500: #1FD99B;
        --sh-ink: #E6F1F9;
        --sh-ink-dim: rgba(230,241,249,0.72);
        --sh-ink-mute: rgba(230,241,249,0.55);
        --sh-glass: rgba(10,48,82,0.35);
        --sh-glass-strong: rgba(10,48,82,0.55);
        --sh-line: rgba(169,246,219,0.16);
        --sh-radius-sm: 0.5em;
        --sh-transition-base: 0.25s ease;
    }

    /* -- Grundlayout / Typografie -- */
    #vergleich .sh-wrap { max-width: 62em; margin: 0 auto; color: var(--sh-ink); }
    #vergleich .sh-intro { color: var(--sh-ink-dim); font-size: 1.02em; line-height: 1.6; margin: 0.5em 0 1.5em; }
    /* Oberhalb des 38em-Breakpoints schwebt der absolute Kontrast-Button auf
       Hoehe der ersten Intro-Zeile; der Absatz reserviert ihm rechts Platz
       (Buttonbreite + Abstand), sonst kollidiert langer Text ab mittleren
       Breiten mit dem Button (VRT-Befund 640px, 17.07.2026, alle Seitenhilfen). */
    @media (min-width: 38.0625em) {
        #vergleich .sh-intro { padding-right: 3.4em; }
    }
    /* Fliesstext-Links: mint UND unterstrichen — der Unterstrich ist unsere
       Link-Kennzeichnung (die globale style.css setzt text-decoration:none).
       Gilt NICHT fuer Chips, Mini-Zeilen und Buttons (eigene Optik). */
    #vergleich .sh-intro a,
    #vergleich .sh-card a,
    #vergleich .sh-krit-karte a,
    #vergleich .sh-faq-antwort a,
    #vergleich .sh-ranking a {
        /* Marken-Mint #A9F6DB (Anwender 15.07.2026: nicht das sattere mint-500). */
        color: var(--sh-mint-100); text-decoration: underline; text-underline-offset: 0.15em;
    }
    #vergleich .sh-section { margin: 2.5em 0; scroll-margin-top: 1.5em; }
    /* Eigenstaendige Seitenteile — deutlich mehr Abstand davor (Feedback-Katalog;
       Anwender 15.07.2026: alle Sektionen auf das FAQ-Mass angehoben). */
    #vergleich .sh-section--bedienung,
    #vergleich .sh-section--filter,
    #vergleich .sh-section--kriterien,
    #vergleich .sh-section--ranking,
    #vergleich .sh-section--faq { margin-top: 8em; }
    #vergleich .sh-section > h2 {
        font-size: 1.5em; color: var(--sh-ink); margin: 0 0 0.35em;
        padding-bottom: 0.3em; border-bottom: 1px solid var(--sh-line);
    }
    #vergleich .sh-section-intro { color: var(--sh-ink-dim); line-height: 1.6; margin: 0 0 1.2em; }
    #vergleich .sh-card p, #vergleich .sh-krit-karte p, #vergleich .sh-faq-antwort p { line-height: 1.6; }

    /* -- Sprung-Chips (Pill-Optik) -- */
    #vergleich .sh-chipnav { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 1.2em 0 2em; padding: 0; list-style: none; }
    #vergleich .sh-chip {
        display: inline-block; padding: 0.4em 0.9em; border-radius: 0.25em;
        background: rgba(0,82,141,0.4); border: 1px solid var(--sh-line);
        color: var(--sh-ink-dim); text-decoration: none; font-size: 0.9em;
        transition: background var(--sh-transition-base), color var(--sh-transition-base), border-color var(--sh-transition-base);
    }
    #vergleich .sh-chip:hover, #vergleich .sh-chip:focus-visible {
        background: rgba(0,112,192,0.28); color: #fff; border-color: var(--sh-mint-100); outline: none;
    }
    #vergleich .sh-chip:focus-visible { outline: 2px solid var(--sh-mint-100); outline-offset: 0.125em; }

    /* -- Glas-Karten -- */
    #vergleich .sh-card {
        background: var(--sh-glass); border: 1px solid var(--sh-line);
        border-radius: var(--sh-radius-sm); padding: 1.1em 1.2em; margin: 0 0 1em;
        backdrop-filter: blur(6px);
    }
    #vergleich .sh-card > h3 { margin: 0 0 0.5em; font-size: 1.12em; color: var(--sh-ink); }

    /* -- Sektion A: Bedienungs-Demos (Phase-1-Platzhalter) -- */
    /* minmax(0,1fr): der Grid-Track darf nie ueber die min-content-Breite seiner
       Kinder wachsen - nowrap-Flexleisten und Selects druecken ihn sonst auf und
       schieben die Seite in den Dokument-Overflow. */
    #vergleich .sh-demo-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1em; margin: 0 0 1.2em; }
    @media (min-width: 52em) {
        #vergleich .sh-demo-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    }
    /* Rechte Demo-Kachel in nl-card-Optik (transparentes Hellblau, Feedback-Katalog). */
    #vergleich .sh-demo {
        position: relative; background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.18); border-radius: var(--sh-radius-sm);
        padding: 1.1em 1.2em 1.2em; min-height: 5em;
        display: flex; flex-direction: column; gap: 0.7em; justify-content: flex-start;
    }
    /* ===================================================================
       PHASE 3 — Demo-Optiken (.sh-*-Repliken der Tabellen-Optik).
       Keine der zwei geladenen CSS liefert diese Optiken nutzbar (auf
       .vergleich-dashboard gescoped bzw. Hintergrund-Ebene), darum eigene
       Repliken mit live verifizierten Parametern. Festgeld zeigt den
       Zinssatz p. a. (kein Rendite-Rechenwert). Alles auf #vergleich, em,
       kein !important. --primary-darker des Dashboards = #004578 (bewusst
       nicht --sh-primary-darker=#003A66) fuer die aktive Pille.
       =================================================================== */
    #vergleich .sh-demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.6em; }
    #vergleich .sh-demo-hinweis { font-size: 0.85em; color: var(--sh-ink-dim); }
    #vergleich .sh-demo-fuss { font-size: 0.8em; color: var(--sh-ink-mute); margin-top: 0.1em; }
    /* Ein einziger Disclaimer am Ende der Bedienungs-Demos (statt je Kachel). */
    #vergleich .sh-demo-fuss-alle { margin: 0.4em 0 0; text-align: right; }

    /* Laufzeit-/Betrags-Pills — Replik der .laufzeit-pill (vergleich.min.css) */
    #vergleich .sh-pill-group { display: flex; flex-wrap: wrap; gap: 0.4em; }
    #vergleich .sh-pill {
        /* px-Original (bei 13px Schrift): padding 8px 16px, radius 10px, 150ms */
        padding: 0.615em 1.231em; border-radius: 0.769em; font-size: 0.8125em; font-weight: 500;
        color: rgba(255,255,255,0.85); background: transparent; border: 1px solid transparent;
        cursor: pointer; font-family: inherit; white-space: nowrap;
        transition: color 150ms ease, background 150ms ease;
    }
    #vergleich span.sh-pill { cursor: default; }
    #vergleich button.sh-pill:not(.is-active):hover { color: #fff; background: rgba(255,255,255,0.1); }
    #vergleich .sh-pill.is-active { color: #004578; background: #fff; font-weight: 700; }
    #vergleich .sh-pill:focus-visible { outline: 2px solid var(--sh-mint-100); outline-offset: 0.125em; }

    /* Demo-Ranking (<ol>) + Rang-Badge — Festgeld zeigt den Zinssatz p. a. */
    #vergleich .sh-demo-rang { list-style: none; margin: 0.2em 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35em; width: 100%; }
    #vergleich .sh-rang-zeile { display: flex; align-items: center; gap: 0.6em; padding: 0.45em 0.6em; border-radius: 0.35em; background: rgba(255,255,255,0.05); border: 1px solid var(--sh-line); }
    #vergleich .sh-rang { color: rgba(255,255,255,0.92); font-size: 0.85em; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; flex: none; min-width: 2.2em; }
    #vergleich .sh-rang-bank { color: var(--sh-ink); font-size: 0.9em; flex: 1 1 auto; display: inline-flex; align-items: center; gap: 0.4em; flex-wrap: wrap; }
    #vergleich .sh-rang-wert { color: var(--sh-ink); font-size: 0.85em; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
    /* Zusatz-Mini-Zeile (Laufzeit-Demo: Kapitalisierung; Ausland-Demo: Quellensteuer)
       — kompakte Replik einer Mini-Spalten-Zeile, nicht interaktiv. */
    #vergleich .sh-demo-zusatz { display: flex; justify-content: space-between; gap: 0.8em; margin-top: 0.4em; padding: 0.4em 0.6em; border-radius: 0.35em; background: rgba(255,255,255,0.05); border: 1px solid var(--sh-line); cursor: default; }
    #vergleich .sh-demo-zusatz-label { font-size: 0.82em; color: var(--sh-ink-dim); }
    #vergleich .sh-demo-zusatz-wert { font-size: 0.82em; color: var(--sh-ink-mute); font-style: italic; text-align: right; flex: none; }
    /* NACH den display-setzenden Regeln (.sh-rang-zeile flex, .sh-demo-zusatz flex),
       damit das Verstecken bei gleicher Spezifitaet per Quellreihenfolge gewinnt. */
    #vergleich .sh-demo-versteckt { display: none; }

    /* Inland-/Ausland-Badge + Flaggen-Replik (laenderFlagge-Vertrag) */
    #vergleich .sh-badge-pill { display: inline-flex; align-items: center; gap: 0.25em; padding: 0.125em 0.5em; border-radius: 999px; font-size: 0.68em; font-weight: 600; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.92); }
    #vergleich .sh-badge-flag { display: inline-flex; align-items: center; line-height: 1; }
    #vergleich .flag-emoji-variant { vertical-align: middle; }
    #vergleich .flag-img-variant { display: none; vertical-align: middle; }
    html.no-emoji-flags #vergleich .flag-emoji-variant { display: none; }
    html.no-emoji-flags #vergleich .flag-img-variant { display: inline; }
    #vergleich .sh-badge-inland { background: rgba(169,246,219,0.18); color: #b9f0e1; }
    #vergleich .sh-badge-ausland { background: rgba(220,180,40,0.18); color: #ffe49a; }

    /* Balken-Toggle — Replik (tabelle.min.css + Core, grow-Variante), Ausland-Demo */
    #vergleich .sh-balken-toggle {
        position: relative; display: inline-flex; align-items: center; gap: 1em;
        border: none; background: transparent; cursor: pointer; padding: 0.25em 0; margin: 0;
        font-family: inherit; line-height: 1; width: fit-content;
    }
    #vergleich .sh-balken-toggle:focus-visible { outline: 2px solid var(--sh-mint-100); outline-offset: 0.2em; border-radius: 0.2em; }
    #vergleich span.sh-balken-toggle { cursor: default; }
    #vergleich .sh-bt-state { font-size: 0.875em; font-weight: 700; width: 2.125em; text-align: left; color: #F1F6FC; flex: none; }
    #vergleich .sh-bt-bars { display: flex; gap: 0.25em; align-items: flex-end; height: 0.8125em; }
    #vergleich .sh-bt-bar { flex: none; width: 0.3125em; height: 0.5em; border-radius: 0.0625em; background: rgba(4,36,64,0.42); transition: height 0.2s ease, background 0.2s ease; }
    #vergleich .sh-balken-toggle[aria-pressed="true"] .sh-bt-bar { height: 0.8125em; background: #DCEBF8; }
    #vergleich .sh-bt-arrow { display: inline-flex; flex: none; color: #DCEBF8; }
    #vergleich .sh-bt-arrow svg { display: block; }

    /* Pager-Skala (statische Replik, tabelle.min.css .tabelle-pager-*) */
    #vergleich .sh-pager { display: flex; flex-direction: column; gap: 0.5em; width: 100%; }
    #vergleich .sh-pager-range { font-weight: 600; color: var(--sh-ink); font-size: 0.9em; font-variant-numeric: tabular-nums; }
    #vergleich .sh-pager-bereich, #vergleich .sh-pager-bereich strong { font-weight: 700; color: var(--sh-mint-100); }
    #vergleich .sh-pager-leiste { display: flex; align-items: center; gap: 0.5em; }
    #vergleich .sh-pager-btn { appearance: none; -webkit-appearance: none; flex: none; width: 3.2em; height: 2em; padding: 0; margin: 0; border: 0; border-radius: 999em; background: transparent; color: var(--sh-mint-100); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 200ms ease; }
    #vergleich .sh-pager-btn:not(:disabled):hover, #vergleich .sh-pager-btn:focus-visible { color: var(--sh-mint-500); outline: none; }
    #vergleich .sh-pager-btn:focus-visible { outline: 2px solid var(--sh-mint-100); outline-offset: 0.125em; }
    #vergleich .sh-pager-btn:disabled { opacity: 0.35; cursor: default; }
    #vergleich span.sh-pager-btn { cursor: default; }
    #vergleich .sh-pager-glyph { width: 3em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    #vergleich .sh-pager-track { position: relative; flex: 1 1 auto; min-width: 4em; height: 1.5em; border-radius: 999em; }
    #vergleich .sh-pager-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 0.375em; border-radius: 999em; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.24) 0 1px, transparent 1px 11px), rgba(4,36,64,0.32); }
    #vergleich .sh-pager-fenster { position: absolute; top: 50%; transform: translateY(-50%); left: 0; height: 0.875em; background: rgba(169,246,219,0.20); border: 1px solid var(--sh-mint-100); border-radius: 0.25em; transition: left 150ms ease, width 150ms ease; pointer-events: none; box-sizing: border-box; }

    /* Sortier-Buttons — Replik (.sort-btn aus vergleich.min.css) */
    #vergleich .sh-sort-group { display: flex; flex-wrap: wrap; gap: 0.4em; }
    #vergleich .sh-sort-btn { display: inline-flex; align-items: center; gap: 0.364em; padding: 0.364em 0.727em; border: 1px solid rgba(255,255,255,0.12); background: transparent; color: var(--sh-ink-dim); font-size: 0.6875em; font-family: inherit; cursor: pointer; border-radius: 0.727em; transition: color 150ms ease, border-color 150ms ease; }
    #vergleich span.sh-sort-btn { cursor: default; }
    #vergleich button.sh-sort-btn:not(.is-active):hover { border-color: var(--sh-ink-dim); color: #fff; }
    #vergleich .sh-sort-btn.is-active { border-color: var(--sh-mint-100); color: var(--sh-mint-100); font-weight: 700; }
    #vergleich .sh-sort-btn:focus-visible { outline: 2px solid var(--sh-mint-100); outline-offset: 0.125em; }
    #vergleich .sh-sort-richtung { font-size: 0.9em; }

    /* Filter-Button-Demo (animiert, CSS-only): zeigt, wo der "weitere Filter"-Button
       sitzt und dass er den Filterbereich oeffnet. Button-Optik komplett aus
       vergleich.min.css (.anpassen-filter-btn); hier Leisten-Container, Puls-Ring
       (::after) und das aufklappende Mini-Panel. reduced-motion: statischer
       Endzustand (Panel offen). */
    #vergleich .sh-fbtn-demo { max-width: 30em; margin: 0.3em 0 0; }
    #vergleich .sh-fbtn-leiste { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.8em; padding: 0.75em 6em 0.75em 0.9em; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--sh-radius-sm); }
    #vergleich .sh-fbtn-label { color: var(--sh-ink-dim); font-size: 0.85em; }
    #vergleich .sh-fbtn-demo .sh-pill { font-size: 0.8em; }
    /* Umgepinnt: die Vergleichs-CSS haengt den Button unter die Leiste (bottom: -1.5em).
       Mit top: 50% sind top, height und bottom alle drei gesetzt - die Box ist damit
       ueberbestimmt und bottom wird verworfen. Tragend ist das height: 3em derselben
       Vergleichs-CSS: ohne feste Hoehe wuerden top und bottom den Button strecken statt
       ihn zu zentrieren (gemessen 46,08 px mit, 73,05 px ohne). Wer dort die Hoehe
       entfernt, zerlegt die Zentrierung in allen neun Seitenhilfen zugleich. Das rechte
       6em-Polster der Leiste haelt den Button frei. */
    #vergleich .sh-fbtn-btn { cursor: default; position: absolute; top: 50%; right: 0.75em; transform: translateY(-50%); }
    #vergleich .sh-fbtn-btn::after { content: ''; position: absolute; inset: 0; pointer-events: none; animation: shFbtnPuls 8s infinite; }
    #vergleich .sh-fbtn-panel { overflow: hidden; max-height: 0; opacity: 0; margin: 2em 0 0; padding: 0 0.9em; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--sh-radius-sm); animation: shFbtnPanel 8s infinite; }
    #vergleich .sh-fbtn-panel-titel { display: block; margin: 0.7em 0 0.5em; font-weight: 600; color: var(--sh-ink); font-size: 0.9em; }
    #vergleich .sh-fbtn-zeile { display: block; height: 0.7em; margin: 0 0 0.5em; border-radius: 999px; background: rgba(255,255,255,0.14); }
    #vergleich .sh-fbtn-zeile:nth-child(3) { width: 72%; }
    #vergleich .sh-fbtn-zeile:last-child { width: 55%; margin-bottom: 0.8em; }
    @keyframes shFbtnPuls {
        0%, 42%, 100% { box-shadow: 0 0 0 0 rgba(169,246,219,0); }
        8% { box-shadow: 0 0 0 0 rgba(169,246,219,0.65); }
        20% { box-shadow: 0 0 0 0.55em rgba(169,246,219,0); }
        24% { box-shadow: 0 0 0 0 rgba(169,246,219,0.65); }
        36% { box-shadow: 0 0 0 0.55em rgba(169,246,219,0); }
    }
    @keyframes shFbtnPulsHell {
        0%, 42%, 100% { box-shadow: 0 0 0 0 rgba(0,112,192,0); }
        8% { box-shadow: 0 0 0 0 rgba(0,112,192,0.55); }
        20% { box-shadow: 0 0 0 0.55em rgba(0,112,192,0); }
        24% { box-shadow: 0 0 0 0 rgba(0,112,192,0.55); }
        36% { box-shadow: 0 0 0 0.55em rgba(0,112,192,0); }
    }
    @keyframes shFbtnPanel {
        0%, 34% { max-height: 0; opacity: 0; }
        46%, 82% { max-height: 7em; opacity: 1; }
        94%, 100% { max-height: 0; opacity: 0; }
    }

    /* Kontrast-Toggle-Demo (CSS-only-Loop): Puls auf dem Button-Replikat, dann
       wechselt die Mini-Karte dunkel -> hell und zurueck. HARTE Farben in beiden
       Seiten-Modi (die Demo zeigt beide Zustaende, kein Hell-Override);
       Puls-Timing teilt shFbtnPuls. reduced-motion: statisch hell. */
    #vergleich .sh-ktr-buehne { position: relative; border-radius: var(--sh-radius-sm); padding: 0.9em 4em 1em 1em; min-height: 4.5em; background: rgba(10,48,82,0.55); border: 1px solid rgba(255,255,255,0.18); animation: shKtrFlaeche 8s infinite; }
    #vergleich .sh-ktr-btn { position: absolute; top: 0.6em; right: 0.6em; display: inline-flex; align-items: center; justify-content: center; padding: 0.5em 0.95em; font-size: 0.85rem; line-height: 1.2; box-shadow: 0 0.125em 0.5em rgba(0,0,0,0.25); background: rgba(9,87,143,0.62); animation: shKtrBtn 8s infinite; }
    #vergleich .sh-ktr-btn::after { content: ''; position: absolute; inset: 0; pointer-events: none; animation: shFbtnPuls 8s infinite; }
    #vergleich .sh-ktr-icon { font-size: 1.05em; line-height: 1; color: #fff; animation: shKtrIcon 8s infinite; }
    #vergleich .sh-ktr-ecke { position: absolute; width: 0.7em; height: 0.7em; pointer-events: none; border-color: #A9F6DB; animation: shKtrEcke 8s infinite; }
    #vergleich .sh-ktr-ecke-tl { top: 0.22em; left: 0.22em; border-top: 2px solid; border-left: 2px solid; }
    #vergleich .sh-ktr-ecke-tr { top: 0.22em; right: 0.22em; border-top: 2px solid; border-right: 2px solid; }
    #vergleich .sh-ktr-ecke-bl { bottom: 0.22em; left: 0.22em; border-bottom: 2px solid; border-left: 2px solid; }
    #vergleich .sh-ktr-ecke-br { bottom: 0.22em; right: 0.22em; border-bottom: 2px solid; border-right: 2px solid; }
    #vergleich .sh-ktr-titel { display: block; font-weight: 600; margin: 0 0 0.6em; color: #E6F1F9; animation: shKtrTitel 8s infinite; }
    #vergleich .sh-ktr-zeile { display: block; height: 0.7em; margin: 0 0 0.5em; border-radius: 999px; background: rgba(255,255,255,0.14); animation: shKtrZeile 8s infinite; }
    #vergleich .sh-ktr-zeile--kurz { width: 62%; margin-bottom: 0; }
    @keyframes shKtrFlaeche {
        0%, 38%, 96%, 100% { background: rgba(10,48,82,0.55); border-color: rgba(255,255,255,0.18); }
        46%, 88% { background: #F7F9FC; border-color: rgba(0,82,141,0.35); }
    }
    @keyframes shKtrBtn {
        0%, 38%, 96%, 100% { background: rgba(9,87,143,0.62); }
        46%, 88% { background: #F7F9FC; }
    }
    @keyframes shKtrIcon {
        0%, 38%, 96%, 100% { color: #e8f2fb; }
        46%, 88% { color: #00528D; }
    }
    @keyframes shKtrEcke {
        0%, 38%, 96%, 100% { border-color: #A9F6DB; }
        46%, 88% { border-color: #0070C0; }
    }
    @keyframes shKtrTitel {
        0%, 38%, 96%, 100% { color: #E6F1F9; }
        46%, 88% { color: #003A66; }
    }
    @keyframes shKtrZeile {
        0%, 38%, 96%, 100% { background: rgba(255,255,255,0.14); }
        46%, 88% { background: rgba(0,82,141,0.14); }
    }

    /* -- Sektion B: Europakarten-Demo (Include bringt KEIN CSS mit) -- */
    #vergleich .sh-ek-demo { max-width: 26em; margin: 1em auto 0; padding: 0.6em; border-radius: var(--sh-radius-sm); background: var(--sh-glass); border: 1px solid var(--sh-line); }
    #vergleich .sh-ek-demo .ek-karte { display: block; width: 100%; height: auto; }
    #vergleich .sh-ek-demo .ek-silhouette path { fill: rgba(255,255,255,0.07); }
    #vergleich .sh-ek-demo .ek-land { fill: rgba(255,255,255,0.2); stroke: rgba(10,48,82,0.9); stroke-width: .5; transition: fill var(--sh-transition-base), filter var(--sh-transition-base); }
    #vergleich .sh-ek-demo .ek-land.ek-gewaehlt { fill: var(--sh-primary); filter: drop-shadow(0 0 6px rgba(0,112,192,0.55)); }
    #vergleich .sh-ek-demo .ek-marker { fill: rgba(255,255,255,0.14); stroke: rgba(255,255,255,0.55); stroke-width: .5; transition: fill var(--sh-transition-base), filter var(--sh-transition-base); }
    #vergleich .sh-ek-demo .ek-marker.ek-gewaehlt { fill: var(--sh-primary); filter: drop-shadow(0 0 6px rgba(0,112,192,0.55)); }
    /* Anfass-Feedback (Cursor/Hover) NUR nach erfolgreichem Demo-Init — ohne JS
       ist die Karte ein statisches Bild und darf nicht klickbar wirken. */
    html.sh-demo #vergleich .sh-ek-demo .ek-land, html.sh-demo #vergleich .sh-ek-demo .ek-marker { cursor: pointer; }
    html.sh-demo #vergleich .sh-ek-demo .ek-land:not(.ek-gewaehlt):hover,
    html.sh-demo #vergleich .sh-ek-demo .ek-marker:not(.ek-gewaehlt):hover { fill: rgba(0,112,192,0.45); }
    @keyframes shEkPop { 0% { opacity: .55; } 100% { opacity: 1; } }
    #vergleich .sh-ek-demo .ek-pop { animation: shEkPop 250ms ease; }
    #vergleich .sh-ek-hinweis { margin: 0.6em 0 0; font-size: 0.85em; color: var(--sh-ink-dim); text-align: center; }

    /* -- Sektion C: Mikro-Interaktionen -- */
    #vergleich .sh-mikro { margin-top: 0.7em; }
    #vergleich .sh-mikro-zeile { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
    #vergleich .sh-mikro-anbietername { font-size: 0.9em; color: var(--sh-ink); font-weight: 600; }
    #vergleich .sh-info-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1px solid var(--sh-line); background: rgba(255,255,255,0.06); color: var(--sh-mint-500); font-size: 0.9em; line-height: 1; cursor: pointer; font-family: inherit; padding: 0; transition: background var(--sh-transition-base), color var(--sh-transition-base); }
    #vergleich .sh-info-btn:hover { background: rgba(0,112,192,0.28); color: #fff; }
    #vergleich .sh-info-btn:focus-visible { outline: 2px solid var(--sh-mint-100); outline-offset: 0.125em; }
    #vergleich .sh-info-panel { margin-top: 0.5em; padding: 0.6em 0.8em; border-radius: 0.375em; background: var(--sh-glass-strong); border: 1px solid var(--sh-line); color: var(--sh-ink-dim); font-size: 0.85em; line-height: 1.5; max-width: 34em; }
    #vergleich .sh-info-panel[hidden] { display: none; }
    #vergleich .sh-info-panel p { margin: 0.3em 0; }
    #vergleich .sh-info-panel p:first-child { margin-top: 0; }
    #vergleich .sh-info-panel p:last-child { margin-bottom: 0; }

    /* Badge-Hover-Demo (k-badge) — CSS-only, ohne JS voll da */
    #vergleich .sh-badge-demo { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; }
    #vergleich .sh-badge-demo .sh-badge-pill { cursor: default; font-size: 0.8em; transition: background var(--sh-transition-base); }
    #vergleich .sh-badge-demo .sh-badge-inland:hover, #vergleich .sh-badge-demo .sh-badge-inland:focus-visible { background: rgba(169,246,219,0.34); outline: none; }
    #vergleich .sh-badge-demo .sh-badge-ausland:hover, #vergleich .sh-badge-demo .sh-badge-ausland:focus-visible { background: rgba(220,180,40,0.34); outline: none; }
    #vergleich .sh-badge-demo .sh-badge-pill:focus-visible { outline: 2px solid var(--sh-mint-100); outline-offset: 0.1em; }

    /* Segment-Steuerung (k-zinssatz-Mini-Demo + k-kapitalisierung-Zinseszins-Toggle) */
    #vergleich .sh-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--sh-line); border-radius: 999px; padding: 0.15em; background: rgba(255,255,255,0.05); width: fit-content; max-width: 100%; gap: 0.1em; }
    #vergleich .sh-seg-btn { border: 0; background: transparent; color: var(--sh-ink-dim); font-family: inherit; font-size: 0.8em; padding: 0.3em 0.85em; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background var(--sh-transition-base), color var(--sh-transition-base); }
    #vergleich .sh-seg-btn.is-active { background: var(--sh-primary); color: #fff; font-weight: 600; }
    #vergleich .sh-seg-btn:focus-visible { outline: 2px solid var(--sh-mint-100); outline-offset: 0.1em; }

    /* Zinssatz-Mini-Demo (k-zinssatz) — zwei Segmente + grosse Prozent-Ausgabe */
    #vergleich .sh-zinssatz-demo { margin-top: 0.7em; display: flex; flex-direction: column; gap: 0.55em; }
    #vergleich .sh-zs-zeile { display: flex; flex-direction: column; gap: 0.25em; }
    #vergleich .sh-zs-label { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sh-ink-mute); }
    #vergleich .sh-zs-out { margin-top: 0.2em; }
    #vergleich .sh-zs-wert { font-size: 1.5em; font-weight: 700; color: var(--sh-mint-500); font-variant-numeric: tabular-nums; }
    #vergleich .sh-zs-hinweis { display: block; font-size: 0.8em; color: var(--sh-ink-mute); margin-top: 0.15em; }

    /* Zinseszins-Toggle (k-kapitalisierung) — Auszahlung vs. Kapitalisierung */
    #vergleich .sh-kapital { margin-top: 0.7em; display: flex; flex-direction: column; gap: 0.5em; }
    #vergleich .sh-kapital-out { font-size: 0.9em; color: var(--sh-ink); transition: opacity 130ms ease; line-height: 1.5; }
    #vergleich .sh-kapital-wert { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sh-mint-500); }
    #vergleich .sh-kapital-diff { display: block; font-size: 0.82em; color: var(--sh-ink-mute); margin-top: 0.2em; }

    /* Laufzeitende-Animation (k-laufzeitende) — CSS-only Zeitstrahl + Weiche */
    #vergleich .sh-lze { margin-top: 0.7em; }
    #vergleich .sh-lze-strahl { position: relative; height: 1.6em; margin-bottom: 0.6em; }
    #vergleich .sh-lze-strahl::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.25em; transform: translateY(-50%); border-radius: 999px; background: rgba(255,255,255,0.14); }
    #vergleich .sh-lze-punkt { position: absolute; top: 50%; left: 0; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--sh-mint-500); transform: translate(-50%, -50%); animation: shLzePunkt 3.6s ease-in-out infinite; }
    #vergleich .sh-lze-ende { position: absolute; right: 0; top: 0; font-size: 0.72em; color: var(--sh-ink-mute); }
    #vergleich .sh-lze-weiche { display: flex; gap: 0.5em; }
    #vergleich .sh-lze-weg { flex: 1 1 0; text-align: center; padding: 0.5em 0.4em; border-radius: 0.4em; font-size: 0.82em; }
    #vergleich .sh-lze-weg--auszahlung { border: 1px solid var(--sh-mint-100); background: rgba(169,246,219,0.12); color: var(--sh-ink); }
    #vergleich .sh-lze-weg--verlaengerung { border: 1px dashed var(--sh-line); color: var(--sh-ink-mute); }
    #vergleich .sh-lze-empf { display: inline-block; margin-left: 0.3em; padding: 0.05em 0.5em; border-radius: 999px; background: rgba(31,217,155,0.20); color: var(--sh-mint-100); font-size: 0.85em; }
    @keyframes shLzePunkt { 0% { left: 0; } 55%, 100% { left: 100%; } }

    /* Ident-2-Schritte-Grafik (k-ident) — statisch, keine Animation */
    #vergleich .sh-ident { margin-top: 0.7em; display: grid; gap: 0.6em; }
    @media (min-width: 30em) { #vergleich .sh-ident { grid-template-columns: 1fr 1fr; } }
    #vergleich .sh-ident-flow { border: 1px solid var(--sh-line); border-radius: var(--sh-radius-sm); background: var(--sh-glass-strong); padding: 0.6em 0.7em; }
    #vergleich .sh-ident-titel { font-size: 0.8em; font-weight: 700; color: var(--sh-mint-500); margin-bottom: 0.4em; }
    #vergleich .sh-ident-schritte { display: flex; align-items: center; gap: 0.4em; }
    #vergleich .sh-ident-schritt { display: flex; flex-direction: column; align-items: center; gap: 0.25em; text-align: center; font-size: 0.75em; color: var(--sh-ink-dim); flex: 1 1 auto; }
    #vergleich .sh-ident-icon { width: 1.6em; height: 1.6em; color: var(--sh-mint-500); }
    #vergleich .sh-ident-icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    #vergleich .sh-ident-pfeil { flex: none; color: var(--sh-ink-mute); }

    /* -- Sektion C: Kriterien-Explorer (statisch) -- */
    #vergleich .sh-explorer { display: block; }
    #vergleich .sh-mini {
        background: var(--sh-glass-strong); border: 1px solid var(--sh-line);
        border-radius: var(--sh-radius-sm); padding: 0.9em; margin: 0 0 1.5em;
    }
    #vergleich .sh-mini-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5em; margin: 0 0 0.6em; }
    #vergleich .sh-mini-titel { font-weight: 600; color: var(--sh-ink); font-size: 0.98em; }
    #vergleich .sh-mini-gruppe {
        font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--sh-mint-500); margin: 0.9em 0 0.3em; padding-bottom: 0.2em;
        border-bottom: 1px solid var(--sh-line);
    }
    #vergleich .sh-mini-gruppe:first-of-type { margin-top: 0; }
    #vergleich .sh-mini-zeile {
        display: flex; justify-content: space-between; gap: 0.8em;
        padding: 0.4em 0.5em; border-radius: 0.35em; text-decoration: none;
        color: var(--sh-ink-dim);
        transition: background var(--sh-transition-base), color var(--sh-transition-base), filter var(--sh-transition-base);
    }
    #vergleich .sh-mini-zeile:hover, #vergleich .sh-mini-zeile:focus-visible {
        background: rgba(0,112,192,0.22); color: #fff; outline: none;
    }
    #vergleich .sh-mini-zeile:focus-visible { outline: 2px solid var(--sh-mint-100); outline-offset: 0.1em; }
    #vergleich .sh-mini-label { font-size: 0.86em; }
    #vergleich .sh-mini-wert { font-size: 0.86em; color: var(--sh-ink); text-align: right; font-variant-numeric: tabular-nums; }
    /* Umbruch in der Mini-Tabelle (Nacharbeit 21.08.2026, N3). Ohne diese Regeln lief der
       Wert in der nur 253px breiten Spalte ueber seine Zeile auf die Nachbarkarte — live
       gemessen in 5 der 9 Seitenhilfen ab 1200px Viewport, bis 53px Ueberstand.
       min-width:0 allein reicht nicht: Labels wie "Inlandsanlage/Auslandsanlage" und Werte
       wie "Entschaedigungseinrichtung" haben keine natuerliche Umbruchstelle, deshalb die
       Silbentrennung (lang="de" ist gesetzt).
       Die Aufteilung auf drei Regeln ist Absicht und nach dem ersten Upload nachgemessen:
       Traegt das Label dieselbe Freigabe wie der Wert, senkt die Silbentrennung seine
       Mindestbreite, und Flexbox verteilt den Platz zugunsten des laengeren Wertes — dann
       stand "Anbieter" dreizeilig auf 33px. Der Wert darf deshalb beliebig schrumpfen, das
       Label nur bis 6em, und harte Wortbrueche (overflow-wrap: anywhere) bleiben dem Wert
       vorbehalten; das Label bricht ausschliesslich an Silben- und Wortgrenzen. */
    #vergleich .sh-mini-label, #vergleich .sh-mini-wert { -webkit-hyphens: auto; hyphens: auto; }
    #vergleich .sh-mini-wert { min-width: 0; overflow-wrap: anywhere; }
    #vergleich .sh-mini-label { min-width: 6em; }
    /* bedingte Zeilen (nur mehrjährig / nur Ausland): dezent markiert, in Phase 1 statisch sichtbar. */
    #vergleich .sh-mini-zeile.sh-mini-bedingt .sh-mini-label { color: var(--sh-ink-mute); }

    #vergleich .sh-krit-gruppe { margin: 0 0 1.4em; scroll-margin-top: 1.5em; }
    #vergleich .sh-krit-gruppe > h3 {
        font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--sh-mint-500); margin: 1.4em 0 0.6em;
    }
    /* Erklaerkarten in der hellen Kachel-Optik der Demo-Buehne (.sh-demo),
       nicht in der dunklen .sh-glass-Optik der Textkarten (Anwender 15.07.2026).
       Hell-Pendant siehe Hochkontrast-Block — --sh-glass ist dort #fff, eine
       transparente Weissflaeche wuerde im Hell-Modus verschwinden. */
    #vergleich .sh-krit-karte {
        background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
        border-radius: var(--sh-radius-sm); padding: 1em 1.1em; margin: 0 0 0.8em;
        scroll-margin-top: 1.5em;
    }
    #vergleich .sh-krit-karte > h4 { margin: 0 0 0.4em; font-size: 1.05em; color: var(--sh-ink); }
    #vergleich .sh-krit-bedingung {
        display: inline-block; margin: 0 0 0.5em; padding: 0.1em 0.55em; border-radius: 999px;
        background: rgba(169,246,219,0.10); border: 1px solid var(--sh-line);
        color: var(--sh-ink-mute); font-size: 0.74em;
    }

    /* Ab 76em: zweispaltig, Mini-Spalte sticky links */
    @media (min-width: 76em) {
        #vergleich .sh-explorer { display: grid; grid-template-columns: 20em 1fr; gap: 2em; align-items: start; }
        #vergleich .sh-mini { position: sticky; top: 1.5em; margin: 0; max-height: calc(100vh - 3em); overflow-y: auto; }
    }

    /* ===================================================================
       Sektion C — Kriterien-Explorer INTERAKTIV (Phase 2).
       Alle Zustände werden per JS gesetzt (Scroll-Spy / Klappen / B6-Schalter).
       Ohne JS oder ohne IntersectionObserver bleibt der statische Phase-1-
       Zustand: alle Gruppen offen, alle bedingten Zeilen sichtbar, Slash-Label,
       keine Mobil-Karte, kein Glow. Alles auf #vergleich gescopet, em, kein !important.
       =================================================================== */

    /* Aktive Mini-Zeile — Glow in Europakarten-Optik (HTML-Analogon zum SVG-fill
       des aktiven Landes, drop-shadow wie dessen Leucht-Kontur). */
    #vergleich .sh-mini-zeile.is-aktiv {
        background: var(--sh-primary); color: #fff;
        filter: drop-shadow(0 0 6px rgba(0,112,192,0.55));
    }
    #vergleich .sh-mini-zeile.is-aktiv .sh-mini-wert { color: #fff; }
    /* im Aktiv-Zustand tritt auch das dezente Bedingt-Label auf Weiß zurück */
    #vergleich .sh-mini-zeile.is-aktiv.sh-mini-bedingt .sh-mini-label { color: #fff; }

    /* Puls beim Zeilenwechsel (analog ekPop der Europakarte). */
    @keyframes shPop { 0% { opacity: .55; } 100% { opacity: 1; } }
    #vergleich .sh-mini-zeile.sh-pop { animation: shPop 250ms ease; }

    /* Aktiver Sprung-Chip. */
    #vergleich .sh-chip.is-aktiv { background: var(--sh-primary); color: #fff; border-color: var(--sh-mint-100); }

    /* Klapp-Button — EIGENE Klasse (nicht .vp-gruppentitel; die zöge Core-Styles
       nach). Erbt Font/Farbe/Transform der Überschrift; nur der Caret hat eigene Farben. */
    #vergleich .sh-klapp-btn {
        display: flex; align-items: center; justify-content: space-between; gap: 0.6em;
        width: 100%; margin: 0; padding: 0; border: 0; background: none;
        font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
        text-align: left; cursor: pointer;
    }
    #vergleich .sh-klapp-btn:focus-visible { outline: 2px solid var(--sh-mint-100); outline-offset: 0.15em; border-radius: 0.2em; }
    /* Caret: offen = rotate(180deg) → Chevron zeigt nach oben; zu = ungedreht (unten). */
    #vergleich .sh-caret { flex: none; color: #6699CC; transition: transform 200ms ease, color 150ms ease; }
    #vergleich .sh-klapp-btn[aria-expanded="true"] .sh-caret { transform: rotate(180deg); }
    #vergleich .sh-klapp-btn:hover .sh-caret { color: #BFDBEF; }

    /* Zuklappen: kurzer Opacity-Fade, danach display:none — kein FLIP, kein
       max-height-Raten. Das Verstecken hängt NICHT an transitionend (feuert bei
       reduced-motion nie); die JS-Sequenz setzt .sh-zu per Timeout. */
    #vergleich .sh-krit-karte.sh-zu-anim, #vergleich .sh-mini-zeile.sh-zu-anim { opacity: 0; transition: opacity 200ms ease; }
    #vergleich .sh-krit-karte.sh-zu, #vergleich .sh-mini-zeile.sh-zu { display: none; }

    /* B6: bedingte Mini-Zeilen (Kapitalisierung nach Laufzeit, Quellensteuer nach
       Ausland) — per JS ein-/ausgeblendet. Eigene Klasse, kollisionsfrei zu .sh-zu
       (Gruppen-Klappen), damit beide Mechaniken sich nicht überschreiben. */
    #vergleich .sh-mini-zeile.sh-bedingt-zu-anim { opacity: 0; transition: opacity 200ms ease; }
    #vergleich .sh-mini-zeile.sh-bedingt-zu { display: none; }

    /* B6: zwei Zustands-Schalter in der Mini-Spalte (JS-erzeugt; ohne JS nicht da).
       EIGENER Block NACH dem Flex-Kopf, sonst rutschen die Segmente neben den Titel. */
    #vergleich .sh-mini-schalter { display: flex; flex-direction: column; gap: 0.5em; margin: 0 0 0.7em; padding: 0.55em 0.5em 0.65em; border-radius: 0.4em; background: rgba(255,255,255,0.04); border: 1px solid var(--sh-line); }
    #vergleich .sh-schalter-zeile { display: flex; flex-direction: column; gap: 0.25em; }
    #vergleich .sh-schalter-label { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sh-ink-mute); }
    #vergleich .sh-seg2 { display: inline-flex; border: 1px solid var(--sh-line); border-radius: 999px; padding: 0.15em; background: rgba(255,255,255,0.05); width: fit-content; max-width: 100%; }
    #vergleich .sh-seg2-btn { border: 0; background: transparent; color: var(--sh-ink-dim); font-family: inherit; font-size: 0.8em; padding: 0.3em 0.85em; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background var(--sh-transition-base), color var(--sh-transition-base); }
    #vergleich .sh-seg2-btn.is-active { background: var(--sh-primary); color: #fff; font-weight: 600; }
    #vergleich .sh-seg2-btn:focus-visible { outline: 2px solid var(--sh-mint-100); outline-offset: 0.1em; }
    /* Anstups-Puls: eine bereits manuell getroffene Nutzerwahl wird nie überschrieben —
       der Schalter meldet sich nur kurz (shPop-Analogon). */
    @keyframes shStups { 0%, 100% { transform: translateX(0); } 22% { transform: translateX(-0.22em); } 66% { transform: translateX(0.22em); } }
    #vergleich .sh-seg2.sh-anstups { animation: shStups 320ms ease; }

    /* B4 + B6: Mobile-Mini-Karte (≤38em) — Spiegel der aktiven Zeile plus die
       zwei B6-Segmente. NUR der Kopf (Label/Wert) ist Deko (aria-hidden); die
       Schalter bleiben bedienbar (sonst wären sie auf dem Smartphone unerreichbar).
       Sichtbar erst nach erfolgreichem JS-Init (html.sh-spy), nie an html.js. */
    #vergleich .sh-mini-mobil {
        display: none; position: sticky; top: 0; z-index: 5;
        margin: 0 0 1em; padding: 0.6em 0.9em; border-radius: var(--sh-radius-sm);
        background: var(--sh-glass-strong); border: 1px solid var(--sh-line);
        backdrop-filter: blur(6px); flex-direction: column; gap: 0.5em;
    }
    #vergleich .sh-mini-mobil-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8em; transition: opacity 130ms ease; }
    #vergleich .sh-mini-mobil .sh-mini-mobil-label { font-size: 0.82em; color: var(--sh-ink-dim); }
    #vergleich .sh-mini-mobil .sh-mini-mobil-wert { font-size: 0.86em; color: var(--sh-ink); text-align: right; font-variant-numeric: tabular-nums; }
    #vergleich .sh-mini-mobil-schalter { display: flex; flex-wrap: wrap; gap: 0.35em 0.9em; }
    #vergleich .sh-mini-mobil-schalter .sh-schalter-zeile { flex-direction: row; align-items: center; gap: 0.45em; }
    #vergleich .sh-mini-mobil-schalter .sh-schalter-label { font-size: 0.7em; }
    #vergleich .sh-mini-mobil-schalter .sh-seg2-btn { font-size: 0.75em; padding: 0.25em 0.7em; }
    @media (max-width: 38em) {
        html.sh-spy #vergleich .sh-mini { display: none; }
        html.sh-spy #vergleich .sh-mini-mobil { display: flex; }
        /* Sticky-Karte verdeckt sonst das Anker-Ziel — scroll-margin anheben
           (Richtwert; final per Playwright gegen die echte Kartenhöhe gemessen).
           Gilt auch für die Gruppen-Container: Chips springen auf #g-… . */
        html.sh-spy #vergleich .sh-krit-karte,
        html.sh-spy #vergleich .sh-krit-gruppe { scroll-margin-top: 8em; }
    }

    /* -- Sektion E: FAQ (native <details>) -- */
    #vergleich .sh-faq-gruppe > h3 { font-size: 1.05em; color: var(--sh-ink); margin: 1.4em 0 0.5em; }
    /* Optik der Aktionskarte (style.css .aktion2 .aktionskarte), Feedback-Katalog. */
    #vergleich .sh-faq-item {
        background: rgba(0,0,0,0.07); border: 1px solid rgba(102,153,204,0.3);
        border-radius: var(--sh-radius-sm); margin: 0 0 0.6em; overflow: hidden;
    }
    #vergleich .sh-faq-item > summary {
        cursor: pointer; padding: 0.8em 1em; font-weight: 600; color: var(--sh-ink);
        list-style: none; position: relative; padding-right: 2.2em;
    }
    #vergleich .sh-faq-item > summary::-webkit-details-marker { display: none; }
    #vergleich .sh-faq-item > summary::after {
        content: '+'; position: absolute; right: 1em; top: 50%; transform: translateY(-50%);
        color: var(--sh-mint-500); font-size: 1.2em; transition: transform var(--sh-transition-base);
    }
    #vergleich .sh-faq-item[open] > summary::after { content: '\2013'; }
    #vergleich .sh-faq-item > summary:focus-visible { outline: 2px solid var(--sh-mint-100); outline-offset: -2px; }
    #vergleich .sh-faq-antwort { padding: 0 1em 0.9em; color: var(--sh-ink-dim); }

    /* -- Sektion D: Ranking & Aktualität -- */
    #vergleich .sh-ranking-meta { margin: 1em 0 0; color: var(--sh-ink-mute); font-size: 0.92em; }

    /* -- Kontrast-Umschalter — Form/Position 1:1 aus Tabellen- und Listen-Core.
       Die .kontrast-zeile ist ein hoehenloser Anker; der Button liegt absolut
       rechtsbuendig auf der Ueberschriften-Zeile. Das <form> bleibt static, damit
       der Button die .kontrast-zeile als Bezugspunkt behaelt. -- */
    #vergleich .kontrast-zeile {
        display: block; position: relative;
        height: 0; margin: 0; overflow: visible;
        z-index: 1;
    }
    #vergleich .kontrast-form { margin: 0; }
    #vergleich .kontrast-toggle {
        position: absolute; right: 0.85em; top: 2.17em;
        display: inline-flex; align-items: center;
        padding: 0.5em 0.95em; font-size: 0.85rem; font-weight: 600; line-height: 1.2;
        letter-spacing: 0.02em; color: #e8f2fb;
        background: rgba(9,87,143,0.62); box-shadow: 0 0.125em 0.5em rgba(0,0,0,0.25);
        border: 0; border-radius: 0; cursor: pointer;
        white-space: nowrap; -webkit-tap-highlight-color: transparent;
        transition: background 150ms ease, color 150ms ease;
    }
    #vergleich .kontrast-toggle:hover { background: rgba(13,110,175,0.96); color: #fff; }
    #vergleich .kontrast-toggle:focus-visible { outline: 2px solid #DFFDF2; outline-offset: 0.125em; }
    #vergleich .kontrast-toggle[aria-pressed="true"] { background: rgba(9,87,143,0.62); color: #fff; }
    #vergleich .kontrast-toggle .kontrast-icon { font-size: 1.05em; line-height: 1; }
    /* Eck-Winkel (Markup-Spans) — Core-Parität zum Tabellen-Kontrast-Button. */
    #vergleich .kontrast-toggle .ecke { position: absolute; width: 0.7em; height: 0.7em; pointer-events: none; }
    #vergleich .kontrast-toggle .ecke-tl { top: 0.22em; left: 0.22em; border-top: 2px solid #A9F6DB; border-left: 2px solid #A9F6DB; }
    #vergleich .kontrast-toggle .ecke-tr { top: 0.22em; right: 0.22em; border-top: 2px solid #A9F6DB; border-right: 2px solid #A9F6DB; }
    #vergleich .kontrast-toggle .ecke-bl { bottom: 0.22em; left: 0.22em; border-bottom: 2px solid #A9F6DB; border-left: 2px solid #A9F6DB; }
    #vergleich .kontrast-toggle .ecke-br { bottom: 0.22em; right: 0.22em; border-bottom: 2px solid #A9F6DB; border-right: 2px solid #A9F6DB; }
    /* Mobil (h1 via style.css ab 38em ausgeblendet -> Anker rutscht an den Kartenanfang):
       nur die Position justieren; Groesse/Gestalt kommen aus der Basis-Regel. */
    @media (max-width: 38em) {
        #vergleich .kontrast-toggle { top: 0.4em; right: 0.6em; }
    }

    /* ===================================================================
       HOCHKONTRAST-HELL-MODUS — Overrides der Seitenhilfe-Komponenten.
       Aktiv nur bei #vergleich.kontrast-hell (serverseitig gerendert).
       Spezifität über ID+Klasse, NIE !important. Jede Phase-1-Komponente
       bekommt sofort ihr Hell-Pendant (Tagesgeld-Lehre).
       =================================================================== */
    #vergleich.kontrast-hell {
        --sh-ink: #003A66;
        --sh-ink-dim: #244f70;
        --sh-ink-mute: #4a6076;
        --sh-glass: #F7F9FC;
        --sh-glass-strong: #EDF3FA;
        --sh-line: rgba(0,82,141,0.20);
    }
    #vergleich.kontrast-hell .sh-intro a,
    #vergleich.kontrast-hell .sh-card a,
    #vergleich.kontrast-hell .sh-krit-karte a,
    #vergleich.kontrast-hell .sh-faq-antwort a,
    #vergleich.kontrast-hell .sh-ranking a { color: var(--sh-primary-dark); }
    #vergleich.kontrast-hell .sh-chip { background: rgba(0,82,141,0.06); color: var(--sh-primary-dark); }
    #vergleich.kontrast-hell .sh-chip:hover, #vergleich.kontrast-hell .sh-chip:focus-visible { background: rgba(0,112,192,0.14); color: var(--sh-primary-darker); border-color: var(--sh-primary); }
    #vergleich.kontrast-hell .sh-card, #vergleich.kontrast-hell .sh-krit-karte, #vergleich.kontrast-hell .sh-faq-item { box-shadow: 0 0.125em 0.5em rgba(0,82,141,0.10); }
    #vergleich.kontrast-hell .sh-mini-gruppe, #vergleich.kontrast-hell .sh-krit-gruppe > h3 { color: var(--sh-primary-dark); }
    #vergleich.kontrast-hell .sh-mini-zeile { color: var(--sh-primary-dark); }
    #vergleich.kontrast-hell .sh-mini-zeile:hover, #vergleich.kontrast-hell .sh-mini-zeile:focus-visible { background: rgba(0,112,192,0.14); color: var(--sh-primary-darker); }
    #vergleich.kontrast-hell .sh-demo { border-color: rgba(0,82,141,0.30); background: #EDF3FA; }
    /* Erklaerkarten teilen die Demo-Buehnen-Optik — auch im Hell-Modus. */
    #vergleich.kontrast-hell .sh-krit-karte { border-color: rgba(0,82,141,0.30); background: #EDF3FA; }
    #vergleich.kontrast-hell .sh-faq-item > summary::after { color: var(--sh-primary); }
    /* -- Phase-3-Demo-Zustaende im Hell-Modus (jeder neue Zustand; kein Tuerkis-auf-Weiss) -- */
    /* Pills */
    #vergleich.kontrast-hell .sh-pill { color: #003A66; }
    #vergleich.kontrast-hell button.sh-pill:not(.is-active):hover { background: rgba(0,82,141,0.08); color: #003A66; }
    #vergleich.kontrast-hell .sh-pill.is-active { background: #0070C0; color: #fff; }
    /* Balken-Toggle */
    #vergleich.kontrast-hell .sh-bt-state { color: #003A66; }
    #vergleich.kontrast-hell .sh-bt-arrow { color: #00528D; }
    #vergleich.kontrast-hell .sh-balken-toggle[aria-pressed="true"] .sh-bt-bar { background: #0070C0; }
    /* Rang-Badge + Ranking-Zeile + Zusatz-Zeile */
    #vergleich.kontrast-hell .sh-rang { color: #00528D; }
    #vergleich.kontrast-hell .sh-rang-zeile { background: #F7F9FC; border-color: rgba(0,82,141,0.15); }
    #vergleich.kontrast-hell .sh-demo-zusatz { background: #F7F9FC; border-color: rgba(0,82,141,0.15); }
    /* Inland-/Ausland-Badge (dunklere Schrift auf Weiß) */
    #vergleich.kontrast-hell .sh-badge-pill { background: rgba(0,82,141,0.08); color: #00528D; }
    #vergleich.kontrast-hell .sh-badge-inland { background: rgba(31,217,155,0.18); color: #04724f; }
    #vergleich.kontrast-hell .sh-badge-ausland { background: rgba(200,150,0,0.20); color: #7a5c00; }
    #vergleich.kontrast-hell .sh-badge-demo .sh-badge-inland:hover, #vergleich.kontrast-hell .sh-badge-demo .sh-badge-inland:focus-visible { background: rgba(31,217,155,0.34); }
    #vergleich.kontrast-hell .sh-badge-demo .sh-badge-ausland:hover, #vergleich.kontrast-hell .sh-badge-demo .sh-badge-ausland:focus-visible { background: rgba(200,150,0,0.34); }
    /* Pager */
    #vergleich.kontrast-hell .sh-pager-range { color: #111; }
    #vergleich.kontrast-hell .sh-pager-bereich, #vergleich.kontrast-hell .sh-pager-bereich strong { color: #00528D; }
    #vergleich.kontrast-hell .sh-pager-btn { color: #0070C0; }
    #vergleich.kontrast-hell .sh-pager-btn:not(:disabled):hover, #vergleich.kontrast-hell .sh-pager-btn:focus-visible { color: #00528D; }
    #vergleich.kontrast-hell .sh-pager-track::before { background: repeating-linear-gradient(90deg, rgba(0,82,141,0.20) 0 1px, transparent 1px 11px), rgba(0,82,141,0.08); }
    #vergleich.kontrast-hell .sh-pager-fenster { background: rgba(0,112,192,0.18); border-color: #0070C0; }
    /* Sortier-Buttons */
    #vergleich.kontrast-hell .sh-sort-btn { color: #244f70; border-color: rgba(0,82,141,0.20); }
    #vergleich.kontrast-hell button.sh-sort-btn:not(.is-active):hover { color: #003A66; border-color: #0070C0; }
    #vergleich.kontrast-hell .sh-sort-btn.is-active { color: #0070C0; border-color: #0070C0; }
    /* Filter-Button-Demo hell: Kacheln hell, Button-Hell-Optik wie Core, blauer Puls. */
    #vergleich.kontrast-hell .sh-fbtn-leiste, #vergleich.kontrast-hell .sh-fbtn-panel { background: #EDF3FA; border-color: rgba(0,82,141,0.30); }
    #vergleich.kontrast-hell .sh-fbtn-btn { background: #F7F9FC; box-shadow: 0 0.125em 0.5em rgba(0,82,141,0.25); }
    #vergleich.kontrast-hell .sh-fbtn-btn::after { animation-name: shFbtnPulsHell; }
    #vergleich.kontrast-hell .sh-fbtn-btn .ecke-tl { border-top-color: #0070C0; border-left-color: #0070C0; }
    #vergleich.kontrast-hell .sh-fbtn-btn .ecke-tr { border-top-color: #0070C0; border-right-color: #0070C0; }
    #vergleich.kontrast-hell .sh-fbtn-btn .ecke-bl { border-bottom-color: #0070C0; border-left-color: #0070C0; }
    #vergleich.kontrast-hell .sh-fbtn-btn .ecke-br { border-bottom-color: #0070C0; border-right-color: #0070C0; }
    #vergleich.kontrast-hell .sh-fbtn-btn .icon-wrap .icon-sliders { color: #00528D; }
    #vergleich.kontrast-hell .sh-fbtn-zeile { background: rgba(0,82,141,0.14); }
    /* Kontrast-Toggle-Demo: haelt eigene harte Farben (zeigt beide Modi) — kein Hell-Override. */
    /* Europakarte-Demo hell */
    #vergleich.kontrast-hell .sh-ek-demo { background: #EDF3FA; border-color: rgba(0,82,141,0.30); }
    #vergleich.kontrast-hell .sh-ek-demo .ek-silhouette path { fill: rgba(0,82,141,0.05); }
    #vergleich.kontrast-hell .sh-ek-demo .ek-land { fill: rgba(0,82,141,0.12); stroke: rgba(0,82,141,0.45); }
    #vergleich.kontrast-hell .sh-ek-demo .ek-land.ek-gewaehlt { fill: var(--sh-primary); filter: drop-shadow(0 0 5px rgba(0,112,192,0.32)); }
    #vergleich.kontrast-hell .sh-ek-demo .ek-marker { fill: rgba(0,82,141,0.14); stroke: rgba(0,82,141,0.5); }
    #vergleich.kontrast-hell .sh-ek-demo .ek-marker.ek-gewaehlt { fill: var(--sh-primary); filter: drop-shadow(0 0 5px rgba(0,112,192,0.32)); }
    html.sh-demo #vergleich.kontrast-hell .sh-ek-demo .ek-land:not(.ek-gewaehlt):hover,
    html.sh-demo #vergleich.kontrast-hell .sh-ek-demo .ek-marker:not(.ek-gewaehlt):hover { fill: rgba(0,112,192,0.30); }
    /* Disclosure-Button */
    #vergleich.kontrast-hell .sh-info-btn { color: #0070C0; }
    #vergleich.kontrast-hell .sh-info-btn:hover { background: rgba(0,112,192,0.14); color: #003A66; }
    /* Segmente + Zinssatz-/Kapitalisierungs-Ausgabe */
    #vergleich.kontrast-hell .sh-seg-btn.is-active { background: #0070C0; color: #fff; }
    #vergleich.kontrast-hell .sh-zs-wert { color: #00528D; }
    #vergleich.kontrast-hell .sh-kapital-wert { color: #00528D; }
    /* Sicherungs-Balken: leere Spur waehrend der Fuellanimation sonst weiss-auf-weiss */
    /* Laufzeitende-Animation */
    #vergleich.kontrast-hell .sh-lze-strahl::before { background: rgba(0,82,141,0.14); }
    #vergleich.kontrast-hell .sh-lze-punkt { background: #0070C0; }
    #vergleich.kontrast-hell .sh-lze-weg--auszahlung { border-color: #0070C0; background: rgba(0,112,192,0.10); }
    #vergleich.kontrast-hell .sh-lze-empf { background: rgba(0,112,192,0.18); color: #00528D; }
    /* Ident */
    #vergleich.kontrast-hell .sh-ident-titel { color: #00528D; }
    #vergleich.kontrast-hell .sh-ident-icon { color: #0070C0; }
    /* Bedingungs-Vermerk (Mini + Karte) */
    #vergleich.kontrast-hell .sh-krit-bedingung { background: rgba(0,82,141,0.06); border-color: rgba(0,82,141,0.30); color: #4a6076; }
    /* Kontrast-Toggle selbst */
    #vergleich.kontrast-hell .kontrast-toggle { color: var(--sh-primary-dark); background: #F7F9FC; box-shadow: 0 0.125em 0.5em rgba(0,82,141,0.25); }
    #vergleich.kontrast-hell .kontrast-toggle:hover { background: rgba(0,112,192,0.14); color: var(--sh-primary-darker); }
    #vergleich.kontrast-hell .kontrast-toggle:focus-visible { outline-color: #0070C0; }
    #vergleich.kontrast-hell .kontrast-toggle[aria-pressed="true"] { background: #F7F9FC; color: var(--sh-primary-darker); }
    #vergleich.kontrast-hell .kontrast-toggle .ecke-tl { border-top-color: #0070C0; border-left-color: #0070C0; }
    #vergleich.kontrast-hell .kontrast-toggle .ecke-tr { border-top-color: #0070C0; border-right-color: #0070C0; }
    #vergleich.kontrast-hell .kontrast-toggle .ecke-bl { border-bottom-color: #0070C0; border-left-color: #0070C0; }
    #vergleich.kontrast-hell .kontrast-toggle .ecke-br { border-bottom-color: #0070C0; border-right-color: #0070C0; }

    /* -- Phase-2- + B6-Zustände im Hell-Modus (jeder neue Zustand; kein Türkis-auf-Weiß) -- */
    #vergleich.kontrast-hell .sh-mini-zeile.is-aktiv { background: var(--sh-primary); color: #fff; filter: drop-shadow(0 0 5px rgba(0,112,192,0.32)); }
    #vergleich.kontrast-hell .sh-mini-zeile.is-aktiv .sh-mini-wert { color: #fff; }
    #vergleich.kontrast-hell .sh-mini-zeile.is-aktiv.sh-mini-bedingt .sh-mini-label { color: #fff; }
    #vergleich.kontrast-hell .sh-chip.is-aktiv { background: var(--sh-primary); color: #fff; border-color: var(--sh-primary); }
    #vergleich.kontrast-hell .sh-caret { color: var(--sh-primary-dark); }
    #vergleich.kontrast-hell .sh-klapp-btn:hover .sh-caret { color: var(--sh-primary); }
    /* Mint-Fokusring hat auf Weiß zu wenig Kontrast — Markenblau. */
    #vergleich.kontrast-hell .sh-klapp-btn:focus-visible { outline-color: var(--sh-primary); }
    #vergleich.kontrast-hell .sh-mini-mobil { box-shadow: 0 0.125em 0.5em rgba(0,82,141,0.10); }
    /* B6-Schalter hell */
    #vergleich.kontrast-hell .sh-mini-schalter { background: #EDF3FA; border-color: rgba(0,82,141,0.20); }
    #vergleich.kontrast-hell .sh-schalter-label { color: #4a6076; }
    #vergleich.kontrast-hell .sh-seg2 { background: rgba(0,82,141,0.06); border-color: rgba(0,82,141,0.20); }
    #vergleich.kontrast-hell .sh-seg2-btn { color: #244f70; }
    #vergleich.kontrast-hell .sh-seg2-btn.is-active { background: #0070C0; color: #fff; }
    #vergleich.kontrast-hell .sh-seg2-btn:focus-visible { outline-color: #0070C0; }

    /* -- Bewegung nur bei Bedarf (Phase 2/3) -- */
    @media (prefers-reduced-motion: reduce) {
        #vergleich .sh-chip, #vergleich .sh-mini-zeile, #vergleich .kontrast-toggle,
        #vergleich .sh-faq-item > summary::after,
        #vergleich .sh-caret, #vergleich .sh-mini-mobil-kopf, #vergleich .sh-seg2-btn,
        #vergleich .sh-krit-karte.sh-zu-anim, #vergleich .sh-mini-zeile.sh-zu-anim,
        #vergleich .sh-mini-zeile.sh-bedingt-zu-anim { transition: none; }
        /* Glow-ZUSTAND bleibt (statisches Highlight), nur Puls/Anstups entfallen. */
        #vergleich .sh-mini-zeile.sh-pop { animation: none; }
        #vergleich .sh-seg2.sh-anstups { animation: none; }
        /* Filter-Button-Demo: keine Loop-Animation, statisch der Endzustand (Panel offen). */
        #vergleich .sh-fbtn-btn::after { animation: none; }
        #vergleich .sh-fbtn-panel { animation: none; max-height: none; opacity: 1; }
        /* Kontrast-Toggle-Demo: statisch der helle Zustand (das Umschalt-Ergebnis). */
        #vergleich .sh-ktr-buehne, #vergleich .sh-ktr-btn, #vergleich .sh-ktr-btn::after,
        #vergleich .sh-ktr-icon, #vergleich .sh-ktr-ecke, #vergleich .sh-ktr-titel,
        #vergleich .sh-ktr-zeile { animation: none; }
        #vergleich .sh-ktr-buehne { background: #F7F9FC; border-color: rgba(0,82,141,0.35); }
        #vergleich .sh-ktr-btn { background: #F7F9FC; }
        #vergleich .sh-ktr-icon { color: #00528D; }
        #vergleich .sh-ktr-ecke { border-color: #0070C0; }
        #vergleich .sh-ktr-titel { color: #003A66; }
        #vergleich .sh-ktr-zeile { background: rgba(0,82,141,0.14); }
        /* Phase-3-Demos: Transitions/Animationen aus, ALLE Zustände bleiben erreichbar. */
        #vergleich .sh-pill, #vergleich .sh-bt-bar, #vergleich .sh-pager-fenster,
        #vergleich .sh-sort-btn, #vergleich .sh-info-btn, #vergleich .sh-seg-btn,
        #vergleich .sh-kapital-out,
        #vergleich .sh-ek-demo .ek-land, #vergleich .sh-ek-demo .ek-marker,
        #vergleich .sh-badge-demo .sh-badge-pill { transition: none; }
        #vergleich .sh-ek-demo .ek-pop { animation: none; }
        /* Laufzeitende-Punkt steht am Ausgangspunkt. */
        #vergleich .sh-lze-punkt { animation: none; left: 0; }
    }
    /* --- Diagramm-Glyphe im #hilfe: eigenes Inline-SVG "Gebirgskette" (Verdrahtung 2026-07-18) ---
       Fontello-icon-chart-area rendert hier verschoben/uebergross (unscoped Fremd-Styles der
       zentralen .icon-Regel: font-size:3em, position:absolute, margin-left:-1.6em). Das SVG erbt
       currentColor, die zentralen #hilfe-Farbregeln (Ruhe/Hover) greifen unveraendert. Live vermessen
       (Liste+Tabelle+Seitenhilfe, 1920/1280/1024/375): inline-block + vertical-align:middle richtet
       die Glyphe an der line-box-Mitte der Fontello-Nachbarn aus (Mittellinien-Abweichung <=1.9px
       ueber alle Regime; die Diagrammseiten-Referenz mit display:block versagte hier mit 5.2px bei
       1280). Das gescopte a[href^='diagramm']{display:block;text-align:center} zentriert die in-flow-
       Glyphe im li, OHNE die absolut positionierten Fontello-Nachbarn zu verschieben. */
    #hilfe li a[href^='diagramm'] { display: block; text-align: center; }
    /* position MUSS relative sein, nicht static: style.css vergroessert die
       Tap-Targets mit "a > .icon::after { position:absolute; inset:-5px }".
       Bei static faellt der Bezugsrahmen dieses ::after auf einen Vorfahren
       zurueck — die unsichtbare Trefferflaeche wird ~330px breit und verdeckt
       die Nachbar-Icons: oberhalb 72em sind Tabellen- und Listen-Icon dann
       nicht mehr klickbar, ohne dass man etwas sieht (live gemessen 18.07.2026
       auf AT und DE). relative behaelt die Position im Fluss und stellt den
       Bezugsrahmen wieder her. Beim Portieren nicht auf static zuruecksetzen. */
    /* Vertikal-Politur 2026-07-18: symmetrischer top-Nudge zieht den Link-Zustand (hier)
       UND den current-Zustand auf der Diagrammseite auf die Mitte ihrer frueheren Positionen
       (der Link lag ~1.5px @Basis / ~3.8px @<=88em zu tief, die Diagrammseite spiegelbildlich
       hoch — Gegenwert im Diagramm-Core +1.5px / +3.8px). <=72em: beide nativ schon
       deckungsgleich, top:0 ueberschreibt dort nur die geerbten 88em-Werte. Live gemessen
       |A-B| <= 1px ueber 1920/1280/1024/375 (max 0.92px; <=72em nativ), beide nahe der Alt-Mitte. */
    #hilfe .zg-view-icon { display: inline-block; position: relative; margin: 0; width: 1.3em; line-height: inherit; vertical-align: middle; font-size: 1.85em; top: -1.5px; }
    #hilfe .zg-view-icon svg { width: 1.3em; height: 0.91em; vertical-align: middle; display: inline-block; }
    @media (max-width: 88em) { #hilfe .zg-view-icon { font-size: 1.3em; top: -3.8px; } }
    @media (max-width: 72em) { #hilfe .zg-view-icon { font-size: 1.2em; top: 0; } }