/* === Seitenhilfe Tagesgeld AT — 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;
        /* CT-0193: eigener Token nur fuer den Tastatur-Fokusring. --sh-mint-100
           traegt auch Fliesstext-Links, Rahmen und Flaechen — im Hell-Modus
           darf ausschliesslich der Ring die Farbe wechseln, nicht die anderen. */
        --sh-fokus: var(--sh-mint-100);
        --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;
    }

    /* -- #hilfe: Diagrammansicht-Glyphe (Zins-Skyline, AT-Rollout 18.07.2026) --
       Fuer die Skyline gibt es keine Fontello-Glyphe, der vierte Eintrag traegt
       daher ein Inline-SVG. Ohne diesen Reset schlagen die unscopten .icon-Regeln
       aus der globalen style.css durch (font-size:3em, position:absolute) und
       machen die Glyphe riesig bzw. unsichtbar.
       Die ZWEI AT-Stufen sind Pflicht und muessen zu Liste/Tabelle passen: gleiche
       em-Basis heisst NICHT gleiche Groesse (Seitenhilfe-Lehre DE, live messen).
       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 (live gemessen 18.07.2026: Tabellen- und Listen-Icon
       oberhalb 72em nicht mehr klickbar). relative behaelt die Position im
       Fluss und stellt den Bezugsrahmen wieder her. */
    #hilfe .zg-view-icon { display: block; position: relative; margin: 0 auto; width: 1.3em; line-height: 1; font-size: 1.85em; }
    #hilfe .zg-view-icon svg { width: 1.3em; height: 0.91em; vertical-align: -0.08em; display: inline-block; }
    /* AT hat NUR EINE Stufe (Umschaltpunkt exakt 72em, live gemessen 18.07.2026):
       vergleich.min.css v16 schaltet die #hilfe-Icons dort von 28.416px auf 18.432px.
       Die DE-Fassung (v18) hat zusaetzlich eine 88em-Stufe — die ist hier bewusst
       NICHT portiert: sie wuerde im Band 1153-1408px feuern, wo die Fontello-Nachbarn
       noch gross sind, und unser Icon dort sichtbar zu klein machen. Nicht ergaenzen. */
    @media only screen and (max-width: 72em) {
        #hilfe .zg-view-icon { font-size: 1.2em; position: relative; margin: 0; }
    }

    /* -- 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).
       Marken-Mint #A9F6DB (Anwender 15.07.2026: nicht das sattere mint-500).
       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 {
        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; }
    /* Anwender-Feedback 12.07.2026: FAQ ist ein eigenstaendiger Seitenteil — deutlich mehr
       Abstand davor. Anwender 15.07.2026: alle Sektionen auf dasselbe Mass. */
    #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-fokus); 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; }
    }
    /* Anwender-Feedback 12.07.2026: transparentes Hellblau wie .nl-card (newsletter.php) statt Dunkelblau. */
    #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 (Fundort: tabelle.min.css /
       vergleich.min.css / Core-Inline). Alles auf #vergleich, em-Einheiten,
       kein !important. --primary-darker des Dashboards = #004578 (bewusst
       nicht --sh-primary-darker=#003A66) fuer die aktive Pille, damit die
       Demo-Pille exakt der Vergleichspille gleicht.
       =================================================================== */

    /* -- gemeinsame Demo-Bausteine (Sektion A) -- */
    #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; }

    /* Anlagebetrag-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; }
    /* Hover nur auf echten Buttons (JS-Swap) — tote No-JS-Spans reagieren nicht. */
    #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-fokus); outline-offset: 0.125em; }

    /* Balken-Toggle — Replik (tabelle.min.css + Core Z. 2152-2158, grow-Variante) */
    #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-fokus); 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; }

    /* Demo-Ranking (<ol>) + Rang-Badge + Inland-/Ausland-Badge */
    #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; }
    #vergleich .sh-demo-versteckt { display: none; }
    #vergleich .sh-ausland-zusatz { font-size: 0.82em; color: var(--sh-ink-dim); margin-top: 0.2em; }

    #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); }
    /* Flaggen-Replik (laenderFlagge-Vertrag): Emoji-Variante Standard, PNG-Fallback via html.no-emoji-flags. */
    #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; }

    /* Pager-Skala — 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-fokus); 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; 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; }
    /* px-Original (bei 11px Schrift): padding 4px 8px, gap 4px, radius 8px,
       border rgba(255,255,255,0.12) — neutral-weiss, nicht das Mint von --sh-line. */
    #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-fokus); outline-offset: 0.125em; }
    #vergleich .sh-sort-richtung { font-size: 0.9em; }

    /* Mini-Zeile Ausland-Kopplung (D3-12): eigene Klasse, kollisionsfrei zu .sh-zu */
    #vergleich .sh-mini-zeile.sh-ausland-zu-anim { opacity: 0; transition: opacity 200ms ease; }
    #vergleich .sh-mini-zeile.sh-ausland-zu { display: none; }

    /* -- Sektion B: Europakarten-Demo (Include bringt KEIN CSS mit) -- */
    /* Animierte Filter-Button-Demo (Anwender-Feedback 12.07.2026): zeigt CSS-only, wo der
       "weitere Filter"-Button sitzt und dass er den Filterbereich oeffnet. Button-Optik kommt
       komplett aus vergleich.min.css (.anpassen-filter-btn, nicht dashboard-gescoped); hier nur
       Leisten-Container, Puls-Ring (::after, kollidiert nicht mit Button-Schatten) und das
       aufklappende Mini-Panel. reduced-motion: statischer Endzustand (Panel offen). */
    #vergleich .sh-fbtn-demo { max-width: 30em; margin: 0 0 1.6em; }
    /* Abstand zwischen Demo-Hinweis und der ersten Filter-Erklaerung (Anwender 15.07.2026). */
    #vergleich .sh-fbtn-demo + .sh-ek-hinweis { margin-bottom: 2em; }
    /* Loop-Animation nur im Viewport abspielen (Anwender 15.07.2026): das auf- und
       zuklappende Mini-Panel verschiebt sonst beim Lesen die Zeilen darunter. Die
       Demo-Infrastruktur-IIFE beobachtet die .sh-fbtn-leiste per IntersectionObserver
       und pausiert ausserhalb; ohne JS/IO laeuft der Loop wie bisher. Hoehenstabil ist
       die Leiste waehrend des Loops, nicht ueber alle Breiten: sie umbricht, sobald der
       Inhalt nicht mehr in eine Zeile passt (flex-wrap: wrap). */
    #vergleich .sh-fbtn-demo.sh-anim-pause .sh-fbtn-btn::after,
    #vergleich .sh-fbtn-demo.sh-anim-pause .sh-fbtn-panel { animation-play-state: paused; }
    #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 (Anwender-Feedback 12.07.2026): CSS-only-Loop — Puls auf dem
       Button-Replikat (Masse wie der echte .kontrast-toggle dieser Seite), dann wechselt die
       Mini-Karte dunkel -> hell und zurueck. HARTE Farben in beiden Seiten-Modi (die Demo
       zeigt ja gerade beide Zustaende, kein Hell-Override); Puls-Timing teilt shFbtnPuls
       (pulst 0-36%, der Farbwechsel folgt bei 38-46%). 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); }
    }
    #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-fokus); 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-fokus); outline-offset: 0.1em; }

    /* Rendite-Rechner-Mini (k-jahresrendite) — JS-erzeugt */
    #vergleich .sh-rechner { margin-top: 0.7em; display: flex; flex-direction: column; gap: 0.5em; }
    #vergleich .sh-rechner-zeile { display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap; }
    #vergleich .sh-rechner-slider { flex: 1 1 12em; min-width: 10em; accent-color: var(--sh-mint-500); }
    #vergleich .sh-rechner-betrag { font-size: 0.9em; color: var(--sh-ink); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 6.5em; }
    #vergleich .sh-rechner-out { font-size: 0.9em; color: var(--sh-ink); font-variant-numeric: tabular-nums; }
    #vergleich .sh-rechner-out strong { color: var(--sh-mint-500); }
    #vergleich .sh-rechner-hinweis { font-size: 0.8em; color: var(--sh-ink-mute); }

    /* Zinsstaffel klappbar (k-standardzins) — eigene .sh-staffel-zu-Mechanik */
    #vergleich .sh-staffel { margin-top: 0.7em; border: 1px solid var(--sh-line); border-radius: var(--sh-radius-sm); background: var(--sh-glass-strong); padding: 0.6em 0.8em; }
    #vergleich .sh-staffel-titel { font-size: 0.8em; font-weight: 700; color: var(--sh-mint-500); text-transform: uppercase; letter-spacing: 0.04em; }
    #vergleich .sh-staffel-body { margin-top: 0.5em; }
    #vergleich .sh-staffel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3em; }
    #vergleich .sh-staffel-liste li { display: flex; justify-content: space-between; gap: 0.8em; font-size: 0.88em; color: var(--sh-ink); font-variant-numeric: tabular-nums; }
    #vergleich .sh-staffel-hinweis { margin: 0.5em 0 0; font-size: 0.82em; color: var(--sh-ink-mute); }
    #vergleich .sh-staffel-body.sh-staffel-zu-anim { opacity: 0; transition: opacity 200ms ease; }
    #vergleich .sh-staffel-body.sh-staffel-zu { display: none; }

    /* Zinschart, stets sichtbar (k-gilt-seit) — statisches Inline-SVG */
    #vergleich .sh-chart { margin-top: 0.7em; }
    #vergleich .sh-chart-titel { font-size: 0.82em; color: var(--sh-ink-mute); margin-bottom: 0.3em; }
    #vergleich .sh-chart svg { display: block; width: 100%; height: auto; max-width: 28em; }
    #vergleich .sh-chart-flaeche { fill: rgba(31,217,155,0.12); }
    #vergleich .sh-chart-linie { fill: none; stroke: var(--sh-mint-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    #vergleich .sh-chart-achse { stroke: var(--sh-line); stroke-width: 1; }
    #vergleich .sh-chart-text { fill: var(--sh-ink-mute); font-size: 22px; }

    /* Zinseszins-Segment (k-zinsgutschrift) — JS-erzeugte Radiogroup */
    #vergleich .sh-zinseszins { margin-top: 0.7em; display: flex; flex-direction: column; gap: 0.5em; }
    #vergleich .sh-seg { 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; }
    #vergleich .sh-seg-btn { border: 0; background: transparent; color: var(--sh-ink-dim); font-family: inherit; font-size: 0.82em; padding: 0.3em 0.9em; border-radius: 999px; cursor: pointer; 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-fokus); outline-offset: 0.1em; }
    #vergleich .sh-zinseszins-out { font-size: 0.9em; color: var(--sh-ink); transition: opacity 130ms ease; }
    #vergleich .sh-zinseszins-wert { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sh-mint-500); }
    #vergleich .sh-zinseszins-diff { display: block; font-size: 0.82em; color: var(--sh-ink-mute); margin-top: 0.2em; }

    /* Referenzkonto-Diagramm (k-rueckueberweisung) — CSS-only Geldfluss */
    #vergleich .sh-refkonto { margin-top: 0.7em; }
    #vergleich .sh-rk-diagramm { display: flex; align-items: center; gap: 0.3em; flex-wrap: wrap; }
    #vergleich .sh-rk-karte { flex: 1 1 6em; min-width: 5em; text-align: center; padding: 0.5em 0.4em; border-radius: 0.4em; background: var(--sh-glass-strong); border: 1px solid var(--sh-line); font-size: 0.8em; color: var(--sh-ink); }
    #vergleich .sh-rk-karte--gesperrt { opacity: 0.45; }
    #vergleich .sh-rk-fluss { position: relative; flex: 0 0 2.5em; height: 0.4em; border-radius: 999px; background: rgba(169,246,219,0.18); }
    #vergleich .sh-rk-fluss--gesperrt { background: rgba(255,255,255,0.08); }
    #vergleich .sh-rk-punkt { position: absolute; top: 50%; left: 0; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--sh-mint-500); transform: translate(-50%, -50%); animation: shRkFluss 2.4s ease-in-out infinite; }
    @keyframes shRkFluss { 0%, 100% { left: 0; } 50% { 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 -- */
    #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);
        /* filter mit weich schalten, damit der Aktiv-Glow (Phase 2) ein-/ausblendet */
        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-fokus); 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 Zeile (nur Ausland): dezent markiert — Festgeld-Muster (Anwender 15.07.2026). */
    #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,
       wie Festgeld). 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); }
    /* Bedingungs-Pill auf der Erklaerkarte (nur Ausland) — Festgeld-Muster (Anwender 15.07.2026). */
    #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). Ohne JS
       oder ohne IntersectionObserver bleibt der statische Phase-1-Zustand:
       alle Gruppen offen, keine Mobil-Karte, kein Glow.
       Alles auf #vergleich gescopet, em-Einheiten, keine !important.
       =================================================================== */

    /* Aktive Mini-Zeile — Glow in Europakarten-Optik: background ist das
       HTML-Analogon zum SVG-fill des aktiven Bundeslandes, drop-shadow wie
       dessen Leucht-Kontur. Der Wert-Text zieht auf Weiß mit. */
    #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-
       Grid-/Körnungs-Styles nach). Button erbt Font/Farbe/Transform der
       Überschrift, damit die Optik der statischen h3 bzw. .sh-mini-gruppe
       erhalten bleibt; 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-fokus); outline-offset: 0.15em; border-radius: 0.2em; }
    /* Caret-Geometrie wie die Tabelle (Chevron), Dreh-Fakten live verifiziert:
       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. .sh-zu-anim blendet aus, .sh-zu nimmt aus dem Fluss.
       Das Verstecken hängt NICHT an transitionend (feuert bei reduced-motion
       nie); die JS-Sequenz setzt .sh-zu per Timeout in Transition-Dauer. */
    #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; }

    /* Mobile-Mini-Karte (≤38em): sticky Spiegel der aktiven Zeile. Reine
       Deko-Spiegelung → aria-hidden, kein aria-live (Screenreader lesen die
       Karten selbst). Sichtbar NUR nach erfolgreichem JS-Init (html.sh-spy) —
       nie an html.js hängen, sonst leere Sektion auf Browsern ohne IO. */
    #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);
        justify-content: space-between; align-items: baseline; gap: 0.8em;
        /* 130ms passend zum JS-Swap (aus + Text tauschen + ein = ~260ms gesamt) */
        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; }
    @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 messen).
           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: 4em; }
    }

    /* -- Sektion E: FAQ (native <details>) -- */
    #vergleich .sh-faq-gruppe > h3 { font-size: 1.05em; color: var(--sh-ink); margin: 1.4em 0 0.5em; }
    /* Anwender-Feedback 12.07.2026: Optik der Aktionskarte (style.css .aktion2 .aktionskarte) statt Dunkelblau. */
    #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-fokus); outline-offset: -2px; }
    #vergleich .sh-faq-antwort { padding: 0 1em 0.9em; color: var(--sh-ink-dim); }
    #vergleich .sh-faq-antwort ul { margin: 0.6em 0; padding-left: 1.4em; }
    #vergleich .sh-faq-antwort li { line-height: 1.6; margin-bottom: 0.25em; }

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

    /* -- 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-Paritaet 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.
       =================================================================== */
    #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);
        /* CT-0193: Mint-Ring erreicht auf heller Flaeche keine 3:1 (WCAG 1.4.11).
           Markenblau — dieselbe Fokusfarbe, die Kontrast-Toggle und Klapp-Button
           hier schon einzeln setzen; ueber den Token gilt sie fuer alle Ringe. */
        --sh-fokus: var(--sh-primary);
    }
    #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); }
    /* Filter-Button-Demo hell: Kacheln hell, Button-Hell-Optik wie Core (weisser Grund, blaue Ecken/Icon), 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); }

    /* -- 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 (Core Z. 2386-2390) */
    #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 */
    #vergleich.kontrast-hell .sh-rang { color: #00528D; }
    #vergleich.kontrast-hell .sh-rang-zeile { background: #F7F9FC; border-color: rgba(0,82,141,0.15); }
    /* Inland-/Ausland-Badge (dunklere Schrift auf Weiss) */
    #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 (Core Z. 2468-2476) */
    #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; }
    /* Europakarte-Demo (helle Buehne, Land-Blau-Tints) */
    #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-Prefix noetig, sonst gewinnt die gated Dunkel-Hover-Regel per Spezifitaet. */
    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 (Panel adaptiert ueber Tokens) */
    #vergleich.kontrast-hell .sh-info-btn { color: #0070C0; }
    #vergleich.kontrast-hell .sh-info-btn:hover { background: rgba(0,112,192,0.14); color: #003A66; }
    /* Rendite-Slider */
    #vergleich.kontrast-hell .sh-rechner-slider { accent-color: #0070C0; }
    #vergleich.kontrast-hell .sh-rechner-out strong { color: #00528D; }
    /* Staffel */
    #vergleich.kontrast-hell .sh-staffel-titel { color: #00528D; }
    /* Zinschart */
    #vergleich.kontrast-hell .sh-chart-flaeche { fill: rgba(0,112,192,0.10); }
    #vergleich.kontrast-hell .sh-chart-linie { stroke: #0070C0; }
    #vergleich.kontrast-hell .sh-chart-achse { stroke: rgba(0,82,141,0.25); }
    #vergleich.kontrast-hell .sh-chart-text { fill: #4a6076; }
    /* Zinseszins-Segment */
    #vergleich.kontrast-hell .sh-zinseszins-wert { color: #00528D; }
    /* Referenzkonto */
    #vergleich.kontrast-hell .sh-rk-fluss { background: rgba(0,112,192,0.14); }
    #vergleich.kontrast-hell .sh-rk-punkt { background: #0070C0; }
    /* Ident */
    #vergleich.kontrast-hell .sh-ident-titel { color: #00528D; }
    #vergleich.kontrast-hell .sh-ident-icon { color: #0070C0; }
    #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-Zustände im Hell-Modus. Markenblau-Fläche + weiße Schrift trägt
       auf Weiß; drop-shadow-Alpha gesenkt, damit der Glow nicht ausfranst.
       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; }
    /* Bedingungs-Pill (Karte) im Hell-Modus — Festgeld-Muster. */
    #vergleich.kontrast-hell .sh-krit-bedingung { background: rgba(0,82,141,0.06); border-color: rgba(0,82,141,0.30); color: #4a6076; }
    #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); }

    /* -- Bewegung nur bei Bedarf (Phase 2/3 baut hier auf) -- */
    @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,
        #vergleich .sh-krit-karte.sh-zu-anim, #vergleich .sh-mini-zeile.sh-zu-anim { transition: none; }
        /* Glow-ZUSTAND bleibt (statisches Highlight), nur der Puls entfällt. */
        #vergleich .sh-mini-zeile.sh-pop { 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-zinseszins-out,
        #vergleich .sh-staffel-body.sh-staffel-zu-anim, #vergleich .sh-mini-zeile.sh-ausland-zu-anim,
        #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; }
        /* Geldfluss-Punkt steht am Ausgangspunkt. */
        #vergleich .sh-rk-punkt { animation: none; left: 0; }
    }