/* tabelle.min.css — geteiltes Tabellen-Stylesheet der AT-Tabellen (Festgeld/Tagesgeld/Brokerage/Girokonto AT). CSS-Reuse-Migration: Phase 1 (scroller-zellen) 2026-06-20 + Phase 2 (sticky-grid-geruest) 2026-06-21 + Phase 3 (pager) 2026-06-21 + Phase 4 (flaggen-filter) 2026-06-21 + Phase 4b (kontrast-harmonisierung + eingrenzungsfilter) 2026-06-21 + Phase 5 (header-reihen) 2026-06-21 + Phase 5b (paar-b datenzellen) 2026-06-21. Quelle: reuse-css-inventur-at-tabellen.md. Byte-identisch in Liste DE/AT + Upload DE/AT halten. NICHT direkt editieren, nur ueber den Reuse-Migrations-Workflow. v=8 */
.tabelle-scroller{display:flex;flex-direction:row;align-items:stretch;overflow-x:auto;padding-bottom:1.6em;overflow-y:visible;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-left:var(--vp-breite,14em);scroll-padding-top:0.5rem;background:transparent;scrollbar-color:rgba(255,255,255,0.6) rgba(255,255,255,0.08)}
.tabelle-scroller::-webkit-scrollbar{height:0.5em}
.tabelle-scroller::-webkit-scrollbar-track{background:rgba(255,255,255,0.08);border-radius:999px}
.tabelle-scroller::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.6);border-radius:999px}
.tabelle-scroller::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.75)}
.tabelle-scroller:focus-visible{outline:2px solid var(--accent,#00d4aa);outline-offset:0.125em}
.vp-zelle,.ab-zelle{padding:0.5em 0.625em;font-size:0.85rem;line-height:1.35;border-bottom:1px solid rgba(255,255,255,0.06);color:var(--text-secondary,#aab);display:flex;align-items:center}
.vp-zelle{font-weight:500;color:rgba(255,255,255,0.78);background:rgba(9,87,143,0.92);min-width:0;overflow-wrap:break-word}
.ab-zelle{justify-content:flex-end;text-align:right;min-width:0;overflow-wrap:break-word}
.ab-zelle.ab-merkmal{word-break:break-word;position:relative;color:var(--text-primary,#fff)}
.ab-merkmal.ab-leer{color:rgba(255,255,255,0.65)}
.ab-info-icon{display:none}
.ab-mini-label{display:none}
.tabelle-empty-state,.tabelle-keine-ergebnisse{padding:2.5em 1em;text-align:center;color:rgba(255,255,255,0.92)}
.tabelle-fussnoten{margin-top:4.5em;padding:1em 1.5em;background:var(--bg-card,rgba(0,0,0,0.04));border-radius:0.5em;color:rgba(255,255,255,0.92);font-size:0.85rem;line-height:1.5}
.tabelle-fussnoten.is-leer{display:none}
.tabelle-fussnoten li.is-out-of-view{display:none}
.tabelle-fussnoten ul{list-style:none;margin:0;padding:0}
.tabelle-fussnoten li{margin:0 0 0.65em;padding-left:1.5em;text-indent:-1.5em}
.tabelle-fussnoten li:last-child{margin-bottom:0}
.tabelle-fussnoten li strong{color:var(--text-primary,#fff);font-weight:600}
.tabelle-fussnoten a{color:#1FD99B;text-decoration:underline}
.tabelle-fussnoten a:hover{color:#8FF6D5;background:transparent}
/* === Phase 2 (sticky-grid-geruest) 2026-06-21. Inline bleiben (Header-Modell-/Varianten-abhaengig): Grid-Tracks (.vp-spalte/.tabelle-grid), Wrapper-Custom-Props, scrollbar-indikator-Basis, scrollbar-thumb, ab-mini-logo-Basis. button.vp-gruppentitel-Basis ueber alle 4 Cores byte-gleich (md5 e0d14735) -> zentralisiert. O8: Scroll-Timeline-Keyframes auf tabelle-mini-follow-x/tabelle-sticky-mini-follow-x + Token --tabelle-scroll vereinheitlicht. O9: cursor:grab zentral (GK erhaelt ihn neu). === */
@media(min-width:60em){.tabelle-dashboard .results-container{position:relative;width:var(--viewport-w,100vw);max-width:var(--viewport-w,100vw);margin-left:calc(50% - var(--viewport-w,100vw) / 2);margin-right:calc(50% - var(--viewport-w,100vw) / 2);padding-left:1.5em;padding-right:1.5em;box-sizing:border-box}}
@media(min-width:38.0625em){.tabelle-dashboard .tabelle-wrapper{--slot-breite:calc((var(--viewport-w,100vw) - 3em) / 4);--vp-breite:calc((var(--viewport-w,100vw) - 3em) / 4)}}
@media(min-width:76em){.tabelle-dashboard .tabelle-wrapper{--slot-breite:calc((var(--viewport-w,100vw) - 3em) / 6);--vp-breite:calc((var(--viewport-w,100vw) - 3em) / 6)}}
@media(min-width:124em){.tabelle-dashboard .tabelle-wrapper{--slot-breite:calc((var(--viewport-w,100vw) - 3em) / 9);--vp-breite:calc((var(--viewport-w,100vw) - 3em) / 9)}}
.tabelle-wrapper::after{content:'';position:absolute;top:0;right:0;bottom:0;width:2em;background:linear-gradient(to right,transparent 0%,rgba(255,255,255,0.20) 100%);pointer-events:none;z-index:5;opacity:1;transition:opacity 200ms ease}
.tabelle-wrapper.is-scroll-ende::after{opacity:0}
.tabelle-wrapper::before{content:'';position:absolute;top:0;left:0;bottom:0;width:2em;background:linear-gradient(to left,transparent 0%,rgba(255,255,255,0.20) 100%);pointer-events:none;z-index:5;opacity:0;transition:opacity 200ms ease}
.tabelle-wrapper.is-scroll-anfang::before{opacity:1}
.anbieter-spalte{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);scroll-snap-align:start;background:transparent}
.vp-zelle.vp-footer{background:rgba(9,87,143,0.96);border-top:1px solid rgba(255,255,255,0.14)}
.ab-zelle.ab-cta{background:var(--bg-card,rgba(0,0,0,0.04));border-top:1px solid rgba(255,255,255,0.14);padding:0.625em 0.5em;justify-content:flex-end}
.anbieter-link-icon,.anbieter-link-extern{display:none}
.vp-gruppentitel{grid-column:1}
.ab-gruppe-spacer{background-color:rgba(0,0,0,0.04);background-image:radial-gradient(circle,rgba(255,255,255,0.08) 0 0.7px,transparent 1.1px),radial-gradient(circle,rgba(4,36,64,0.14) 0 0.7px,transparent 1.1px);background-size:6px 6px,8px 8px;background-position:0 0,3px 4px;background-repeat:repeat,repeat;border-top:1px solid rgba(255,255,255,0.10);border-bottom:1px solid rgba(255,255,255,0.07);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);cursor:pointer}
.gruppe-toggle-form{display:contents}
button.vp-gruppentitel{grid-column:1;width:100%;appearance:none;background-color:rgba(0,0,0,0.04);background-image:radial-gradient(circle,rgba(255,255,255,0.08) 0 0.7px,transparent 1.1px),radial-gradient(circle,rgba(4,36,64,0.14) 0 0.7px,transparent 1.1px);background-size:6px 6px,8px 8px;background-position:0 0,3px 4px;background-repeat:repeat,repeat;border:none;border-top:1px solid rgba(255,255,255,0.10);border-bottom:1px solid rgba(255,255,255,0.07);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);color:var(--accent-light,#5fd4b8);font:inherit;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;font-weight:700;line-height:1.15;text-align:left;padding:1.125em 5% 1em 0.625em;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:0.5em}
button.vp-gruppentitel:hover .vp-gruppentitel-caret,button.vp-gruppentitel.is-row-hover .vp-gruppentitel-caret{color:#BFDBEF}
button.vp-gruppentitel:focus-visible{outline:2px solid var(--accent,#00d4aa);outline-offset:-2px}
.vp-gruppentitel-label{flex:0 1 auto;min-width:0;overflow-wrap:break-word}
.vp-gruppentitel-caret{flex:0 0 auto;display:inline-flex;align-items:center;color:#6699CC;line-height:0;transition:transform 200ms ease,color 150ms ease}
button.vp-gruppentitel[aria-expanded="true"] .vp-gruppentitel-caret{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.vp-gruppentitel-caret{transition:none}}
.ab-zelle.ab-gruppe-spacer .mb-gruppentitel{display:none}
.vp-zelle[data-gruppe],.ab-zelle[data-gruppe]:not(.ab-gruppe-spacer){transition:opacity 180ms ease}
.vp-zelle[data-gruppe].gruppe-zu,.ab-zelle[data-gruppe]:not(.ab-gruppe-spacer).gruppe-zu{opacity:0}
.vp-zelle.gruppe-zu-final,.ab-zelle.gruppe-zu-final{display:none}
.no-js .vp-zelle[data-gruppe].gruppe-zu,.no-js .ab-zelle[data-gruppe]:not(.ab-gruppe-spacer).gruppe-zu{display:none;opacity:0;transition:none}
.tabelle-scroller .tabelle-grid.gruppe-anim,.tabelle-scroller .vp-spalte.gruppe-anim{transition:grid-template-rows 200ms ease,opacity 180ms ease}
@keyframes band-puls-schein{0%{box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),inset 0 0 0 0 rgba(95,212,184,0)}35%{box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),inset 0 0 0 9999px rgba(95,212,184,0.10)}100%{box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),inset 0 0 0 9999px rgba(95,212,184,0)}}
button.vp-gruppentitel.band-puls,.ab-gruppe-spacer.band-puls{animation:band-puls-schein 300ms ease-out}
@media(prefers-reduced-motion:reduce){.tabelle-scroller .tabelle-grid.gruppe-anim,.tabelle-scroller .vp-spalte.gruppe-anim{transition:none}button.vp-gruppentitel.band-puls,.ab-gruppe-spacer.band-puls{animation:none}}
.tabelle-sticky-mini{position:fixed;top:0;left:0;right:0;z-index:30;transform:translateY(-100%);transition:transform 0.18s ease;pointer-events:none;overflow:hidden;background:#0070C0;box-shadow:0 0.25em 0.5em rgba(0,0,0,0.3)}
.tabelle-sticky-mini.is-active{transform:translateY(0);pointer-events:auto}
.tabelle-sticky-mini-track{display:grid;grid-template-columns:repeat(var(--anzahl-anbieter,8),var(--slot-breite,12em));padding-left:0;transform:translate3d(calc(-1 * var(--mini-label-x,0px)),0,0);will-change:transform}
.anbieter-spalte-mini{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:0.375em 0.625em;border-right:1px solid rgba(255,255,255,0.05);min-width:0}
.anbieter-spalte-mini:last-child{border-right:none}
.ab-mini-logo img{max-height:6em;max-width:100%;height:auto;width:auto;object-fit:contain}
@supports not (grid-template-rows:subgrid){.vp-spalte,.anbieter-spalte{display:block}.vp-zelle,.ab-zelle{display:block}}
.tabelle-scrollbar-indikator.is-not-scrollable{opacity:0;pointer-events:none}
@media(hover:hover) and (pointer:fine){.tabelle-scroller{cursor:grab}.tabelle-scroller.is-dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}}
@keyframes tabelle-mini-follow-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--scroll-max-x,0px),0,0)}}
@keyframes tabelle-sticky-mini-follow-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--scroll-max-x,0px)),0,0)}}
@supports (animation-timeline:scroll()){.tabelle-wrapper{timeline-scope:--tabelle-scroll}.tabelle-scroller{scroll-timeline-name:--tabelle-scroll;scroll-timeline-axis:x}.tabelle-sticky-mini-track{animation:tabelle-sticky-mini-follow-x linear;animation-timeline:--tabelle-scroll;animation-fill-mode:both}@media(max-width:38em){.tabelle-grid > .anbieter-spalte:first-child .ab-mini-label,.tabelle-grid > .anbieter-spalte:first-child .mb-gruppentitel{animation:tabelle-mini-follow-x linear;animation-timeline:--tabelle-scroll;animation-fill-mode:both}}}
/* === Phase 3 (pager) 2026-06-21. Pager-Block (18 Regeln + reduced-motion) + Doppelklassen-Dashboard-Regeln (.tabelle-dashboard .result-count/.sort-buttons), ueber alle 4 AT-Cores byte-gleich. O10 (Anwender 2026-06-21: vereinheitlichen): .results-header- und .sort-buttons-Basis-Override zentralisiert (render-relevant: row-gap 0.4em statt zentraler 8px; flex-shrink:0 fehlt zentral; laedt nach vergleich.min.css -> Source-Order erhalten). GK .sort-buttons (V20: display/flex-wrap/gap) bleibt inline. === */
.vergleich-dashboard .results-header{flex-wrap:wrap;row-gap:0.4em}
.vergleich-dashboard .sort-buttons{flex-shrink:0}
.vergleich-dashboard.tabelle-dashboard .result-count{padding-left:2.5%}
.vergleich-dashboard.tabelle-dashboard .sort-buttons{justify-content:flex-end;margin-right:2.5%}
.tabelle-pager{flex:1 1 auto;min-width:0;max-width:34rem;display:flex;align-items:center;gap:0.75em;font-size:0.875rem;margin-inline:1em}
.tabelle-pager[hidden]{display:none}
.tabelle-pager-range{font-weight:600;color:#fff;white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums}
.tabelle-pager-bereich,.tabelle-pager-bereich strong{font-weight:700;color:#1FD99B}
.tabelle-pager-rest{font-weight:500;color:rgba(255,255,255,0.9)}
.tabelle-pager-rest strong{font-weight:500;color:inherit}
.tabelle-pager-slash{display:none}
.tabelle-pager-range strong{display:inline-block;min-width:2.2ch;text-align:center}
.tabelle-pager-leiste{display:flex;align-items:center;gap:0.375em;flex:1 1 auto;min-width:0}
.tabelle-pager-btn{appearance:none;-webkit-appearance:none;flex-shrink:0;width:8.25em;height:2.75em;padding:0;margin:0;border:0;border-radius:999em;background:transparent;color:#1FD99B;display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;transition:color 200ms ease}
.tabelle-pager-btn:not(:disabled):hover,.tabelle-pager-btn:focus-visible{color:#8FF6D5;outline:none}
.tabelle-pager-btn:focus-visible{outline:2px solid #8FF6D5;outline-offset:2px}
.tabelle-pager-btn:disabled,.tabelle-pager-btn[disabled]{visibility:hidden}
.tabelle-pager-glyph{width:5.25em;height:1.75em;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tabelle-pager-track{position:relative;flex:1;min-width:4rem;height:1.5em;cursor:pointer;touch-action:none;border-radius:999em}
.tabelle-pager-track::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:0.375rem;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)}
.tabelle-pager-track:focus-visible{outline:2px solid #8FF6D5;outline-offset:2px}
.tabelle-pager-fenster{position:absolute;top:50%;transform:translateY(-50%);left:0;width:8%;height:0.875rem;background:rgba(76,181,160,0.20);border:1px solid #4cb5a0;border-radius:0.25rem;transition:left 150ms ease;pointer-events:none;box-sizing:border-box}
@media(prefers-reduced-motion:reduce){.tabelle-pager-fenster,.tabelle-pager-btn{transition:none}}
/* === Phase 4 (flaggen-filter) 2026-06-21. Anpassen-Overlay/Backdrop/Panel/Close-Button-Mechanik (alle 4 byte-gleich; O15: Panel border-radius 0.75em (alle 4; FG/TG 12->11.52px, unbeanstandet). Close-Button border-top-right-radius 0.5em=12px (v=5-Korrektur 2026-06-21: 0.75em ergab wegen font-size:1.5rem 18px = zu rund; BR/GK 18->12px, FG/TG bleiben 12px). O14: .filter-label/.filter-column-title-Override (alle 4 = rgba(255,255,255,0.85), render-neutral; GK-Sonderregel .vergleich-dashboard.tabelle-dashboard .filter-label entfaellt). Paar-B FG/TG: Flaggen-Variant-Umschalter + .checkbox-group-wrap. Inline bleiben (Render-Aenderung/divergent): laufzeit-pill-Override (GK-Basis 0.7), #hilfe .icon (GK ohne Override), eingrenzungsfilter (FG/TG-Element unstyled), aktive-filter-hinweis-Block BR, .filter-checkbox-Paradigmen, .laufzeit-nav, O12 [style]-@media. Tote Panel-Flaggen (a.produkt-badge/.flag-emoji/.badge-flag-emoji) in FG/TG geloescht. === */
.anpassen-overlay{display:none}
.anpassen-overlay.open{display:block}
.anpassen-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:100;opacity:0;transition:opacity 125ms ease}
.anpassen-overlay.open .anpassen-backdrop{opacity:1}
.anpassen-panel{position:relative;z-index:101;width:90%;max-width:60rem;margin:-3em auto 1em;background:rgba(9,87,143,0.92);backdrop-filter:blur(1.25em);-webkit-backdrop-filter:blur(1.25em);border-radius:0.75em;padding:1.75em 1.5em 1.25em;border:1px solid rgba(255,255,255,0.12);box-shadow:0 0.5em 2.5em rgba(0,0,0,0.35),0 0.125em 0.5em rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.08);opacity:0;transform:translateY(-0.75em);transition:opacity 125ms ease,transform 125ms ease}
.anpassen-overlay.open .anpassen-panel{opacity:1;transform:translateY(0)}
@media(max-width:38em){.anpassen-panel{width:95vw;max-width:none;margin:-3em 0 1em calc(50% - 47.5vw)}}
.panel-close-btn{position:absolute;top:0;right:0;width:1.85em;height:1.85em;padding:0;background:rgba(48,55,61,0.85);color:rgba(255,255,255,0.85);border:none;border-top-right-radius:0.5em;border-bottom-left-radius:0;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 125ms ease,color 125ms ease;z-index:102}
.panel-close-btn:hover,.panel-close-btn:focus{background:rgba(61,69,76,0.85);color:#fff;outline:none}
.vergleich-dashboard .filter-label,.vergleich-dashboard .filter-column-title{color:rgba(255,255,255,0.85)}
.flag-img-variant{display:none;vertical-align:middle}
.flag-emoji-variant{vertical-align:middle}
.no-emoji-flags .flag-emoji-variant{display:none}
.no-emoji-flags .flag-img-variant{display:inline}
.checkbox-group-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 12px}
/* === Phase 4b (kontrast-harmonisierung + eingrenzungsfilter) 2026-06-21. Zwei bewusste Render-Harmonisierungen per Zentralisierung (Ground-Truth-gemessen 2026-06-21). (A) laufzeit-pill-Kontrast + #hilfe-Link-Icon-Akzent: aus FG/TG/BR-Inline (byte-gleich) zentralisiert; GK erhaelt laufzeit-pill inaktiv 0.7->0.85 neu (sichtbar). #hilfe auf GK render-neutral (bereits #1FD99B via style.css .icon); FG/TG/BR byte-erhalten (Inline-Override == zentral, tabelle.min.css laedt nach vergleich.min.css, Source-Order erhalten). (B) eingrenzungsfilter-title/-hint: aus BR/GK-Inline (byte-gleich) zentralisiert; FG/TG erhalten effektiv font-weight:600 (Titel fett) + line-height:1.4 (Hint) neu; font-size/color/margin bleiben von vergleich.min.css (.vergleich-dashboard .eingrenzungsfilter-*, Spez. 0,2,0) bestimmt. === */
.vergleich-dashboard .laufzeit-pill{color:rgba(255,255,255,0.85)}
.vergleich-dashboard .laufzeit-pill:hover{color:var(--text-primary,#fff)}
.vergleich-dashboard .laufzeit-pill.active{color:var(--primary-darker,#004578)}
#hilfe .icon{color:#1FD99B}
#hilfe a:hover .icon{color:#8FF6D5}
.eingrenzungsfilter-title{display:block;font-size:0.7rem;font-weight:600;color:rgba(170,170,187,0.95);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.4em}
.eingrenzungsfilter-hint{display:block;font-size:0.7rem;color:rgba(170,170,187,0.7);margin-bottom:0.75em;line-height:1.4}
@media(max-width:38em){.eingrenzungsfilter-title{font-size:0.65rem}.eingrenzungsfilter-hint{font-size:0.65rem}}
/* === Phase 5 (header-reihen) 2026-06-21. Header-Zonen-Basis ueber alle 4 AT-Cores byte-gleich (17 Regeln + .ab-logo-wrap-Basis) -> zentralisiert. Inline bleiben (Header-Modell-/Varianten-abhaengig): V1-Selektorlisten (header-bg/sticky zins-badge vs bewertung), 2./3.-Track-top-Offsets, ab-zins-Block (FG/TG, V13), ab-bewertung-Block (BR/GK, V14 -> Paar-B Folge-Phase 5b), badge-pills/Flaggen (FG/TG), vp-header/vp-badge font-size (FG/TG), Heatmap (BR/GK, O19), sr-label/disclaimer/profil-beschreibung (BR/GK). GK behaelt .ab-logo-wrap{min-height:4em} inline (V19-Override). === */
.vp-zelle.vp-header{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:rgba(255,255,255,0.75)}
.ab-zelle.ab-logo,.vp-zelle.vp-header.vp-logo{top:0}
.ab-zelle.ab-logo{background:#0070C0;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:0.125em;padding-top:0.625em;padding-bottom:0.625em}
.vp-zelle.vp-header.vp-logo{background:#0070C0}
.ab-pos-badge{position:absolute;top:0;right:100%;margin-right:0.25em;color:rgba(255,255,255,0.92);font-size:0.85rem;font-weight:600;letter-spacing:0.02em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;z-index:1}
.ab-logo-wrap{position:relative;width:auto;max-width:100%;max-height:8em;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;overflow:visible}
.ab-logo-wrap img{max-height:8em;max-width:100%;height:auto;width:auto}
.ab-logo-link{display:inline-block}
.ab-logo-link,.ab-logo-link:hover,.ab-logo-link:active{background:transparent;border:none;outline:none;box-shadow:none;text-decoration:none}
.ab-logo-link img,.ab-logo-link:hover img{border:none;outline:none;box-shadow:none}
.ab-logo-link:focus-visible{outline:2px solid var(--accent,#00d4aa);outline-offset:2px}
.ab-anbieter{font-size:0.78rem;font-weight:600;color:var(--text-primary,#fff);line-height:1.2;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ab-produktname{font-size:0.7rem;color:rgba(255,255,255,0.92);line-height:1.15;word-break:break-word;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ab-zelle.ab-logo .ab-info-icon-logo{display:none;align-items:center;justify-content:center;position:relative;margin-left:0.35em;vertical-align:middle;width:1.4em;height:1.4em;padding:0;background:transparent;color:rgba(255,255,255,0.92);border:none;border-radius:50%;font-size:1em;line-height:1;cursor:pointer}
.ab-zelle.ab-logo .ab-info-icon-logo.is-truncated{display:inline-flex}
.ab-zelle.ab-logo .ab-info-icon-logo::before{content:'';position:absolute;top:-0.8em;bottom:-0.8em;left:-0.8em;right:-0.8em;z-index:1}
.ab-zelle.ab-logo .ab-info-icon-logo:hover,.ab-zelle.ab-logo .ab-info-icon-logo:focus-visible{color:#fff}
.ab-zelle.ab-logo .ab-info-icon-logo:focus-visible{outline:2px solid var(--accent,#00d4aa);outline-offset:2px}
/* === Phase 5b (paar-b datenzellen) 2026-06-21. Paar-B-Komponenten, je byte-identisch ueber ihr Paar (FG/TG bzw. BR/GK) + cascade-sauber (Komponenten-Properties disjunkt zu den inline bleibenden header-bg/sticky/offset-Listen): ab-zins-Block (FG/TG, V13, 15 Regeln), badge-pill-Komponente (FG/TG, 5), balken-toggle-Desktop (FG/TG, 11), ab-bewertung-Block (BR/GK, V14, 9 Regeln). Inline bleiben: V1-header-Selektorlisten, sticky/offset, ab-zins/ab-bewertung Mobile-@media-Tuning, badge-Zellregeln/Mobile (.ab-zelle.ab-badge), balken-toggle reduced-motion + TG-only -bars-grow, vp-logo/vp-badge font-size, Heatmap (O19). Regeln auf dem jeweils anderen Paar inert (kein Match). === */
.ab-zelle.ab-zins{font-size:1.5rem;font-weight:700;color:var(--text-primary,#fff);flex-direction:column;align-items:flex-end;justify-content:center;gap:0.375em;padding-top:0.25em;padding-bottom:0.25em}
.ab-zelle.ab-zins.ab-zins-staffel{font-size:0.85rem;line-height:1.2}
.ab-zelle.ab-zins.ab-zins-leer{color:rgba(255,255,255,0.65)}
.ab-zins-zahl-wrap{display:flex;align-items:baseline;line-height:1}
.ab-zins-zahl{display:inline-block;line-height:1}
.ab-zins-prozent{font-size:0.75em;margin-left:0.125em;opacity:0.85}
.ab-zelle.ab-zins:hover,.ab-zelle.ab-zins:focus-within{z-index:10}
.ab-zins-balken{position:relative;width:7em;max-width:100%;height:4px;background:rgba(255,255,255,0.28);border-radius:2px;overflow:visible;cursor:help}
.ab-zins-balken::before{content:'';position:absolute;top:-0.35em;bottom:-0.75em;left:-0.5em;right:-0.5em}
.ab-zins-balken-fill{height:100%;background:linear-gradient(90deg,var(--accent,#00d4aa),var(--accent-light,#5fd4b8));border-radius:inherit}
.ab-zins-balken:focus,.ab-zins-balken:focus-visible{outline:2px solid var(--accent,#00d4aa);outline-offset:2px}
.ab-zelle.ab-zins::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 0.5em);right:0;max-width:100%;width:max-content;transform:translateY(-0.25em);padding:0.5em 0.75em;background:rgba(15,20,30,0.95);color:#fff;font-size:0.75rem;font-weight:400;line-height:1.4;border-radius:0.375em;box-shadow:0 0.25em 0.75em rgba(0,0,0,0.3);white-space:normal;text-align:left;pointer-events:none;opacity:0;transition:opacity 0.15s ease,transform 0.15s ease;z-index:100;box-sizing:border-box}
.ab-zelle.ab-zins:not([data-tooltip])::after{content:none}
.ab-zelle.ab-zins:hover::after,.ab-zelle.ab-zins:focus-within::after,.ab-zelle.ab-zins.is-tooltip-open::after{opacity:1;transform:translateY(0)}
.vp-zelle.vp-header.vp-zins{font-size:0.7rem;text-transform:none;letter-spacing:normal}
.ab-badge-pill{display:inline-flex;align-items:center;gap:0.25em;padding:0.125em 0.5em;border-radius:999px;font-size:0.68rem;font-weight:600;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.92)}
.ab-badge-pill.badge-ausland{background:rgba(220,180,40,0.18);color:#ffe49a}
.ab-badge-pill.badge-inland{background:rgba(76,181,160,0.18);color:#b9f0e1}
.ab-badge-flag{display:inline-flex}
.ab-badge-pill.badge-inland .ab-badge-flag{display:none}
.vergleich-dashboard .balken-toggle{position:relative;display:flex;align-items:center;gap:1em;width:fit-content;border:none;background:transparent;cursor:pointer;padding:0.25em 0;margin:0;font-family:inherit;line-height:1}
.vergleich-dashboard .balken-toggle-state{font-size:14px;font-weight:700;width:2.125em;text-align:left;color:#F1F6FC;flex:none}
.vergleich-dashboard .balken-toggle-bars{display:flex;gap:0.25em}
.vergleich-dashboard .balken-toggle-arrow{display:inline-flex;flex:none;color:#DCEBF8}
.vergleich-dashboard .balken-toggle-arrow svg{display:block}
.vergleich-dashboard .balken-toggle-bars-dash{align-items:center}
.vergleich-dashboard .balken-toggle-bars-dash .balken-toggle-bar{flex:none;width:0.3125em;height:0.625em;border-radius:0.0625em;background:rgba(4,36,64,0.42);transition:background 0.18s ease}
.vergleich-dashboard .balken-toggle[data-state="off"] .balken-toggle-bars-dash .balken-toggle-bar:nth-child(-n+8){background:#DCEBF8}
.vergleich-dashboard .balken-toggle[data-state="on"] .balken-toggle-bars-dash .balken-toggle-bar{background:#DCEBF8}
.vergleich-dashboard .balken-toggle[data-tooltip]::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 0.5em);right:0;width:max-content;max-width:16em;padding:0.5em 0.75em;background:rgba(15,20,30,0.95);color:#fff;font-size:0.75em;line-height:1.4;border-radius:0.375em;box-shadow:0 4px 12px rgba(0,0,0,0.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:normal;text-align:left;pointer-events:none;opacity:0;transform:translateY(-0.25em);transition:opacity 0.15s ease,transform 0.15s ease;z-index:100}
.vergleich-dashboard .balken-toggle[data-tooltip]:hover::after,.vergleich-dashboard .balken-toggle[data-tooltip]:focus-visible::after{opacity:1;transform:translateY(0)}
.ab-zelle.ab-bewertung{flex-direction:column;align-items:flex-end;justify-content:center;padding-top:0.4em;padding-bottom:0.4em}
.ab-bewertung-stack{display:inline-flex;flex-direction:column;align-items:center;gap:0.2em}
.vp-zelle.vp-header.vp-bewertung{font-size:0.7rem;text-transform:none;letter-spacing:normal}
.sterne-zeile{display:inline-flex;gap:0.2em;align-items:center;line-height:1}
.stern-aktiv,.stern-inaktiv{display:inline-block;width:0.625em;height:0.625em;border-radius:50%;flex-shrink:0}
.stern-aktiv{background:var(--accent,#00d4aa);box-shadow:0 0 0.25em rgba(0,212,170,0.4)}
.stern-inaktiv{background:transparent;border:1px solid rgba(255,255,255,0.3)}
.ab-bewertung-wert{font-size:1.5rem;font-weight:700;color:var(--text-primary,#fff);line-height:1;display:inline-flex;align-items:baseline}
.ab-bewertung-max{font-size:0.55em;font-weight:600;opacity:0.65;margin-left:0.1em}