a.produkt-badge { text-decoration: none; cursor: pointer; } a.produkt-badge:hover { opacity: 0.8; background: transparent !important; } /* Inlandsanlage-Badge: nur ab mittlerer Breite einblenden */ a.produkt-badge.badge-inland { display: none; } @media (min-width: 38em) { a.produkt-badge.badge-inland { display: inline-block; } } .zugangsweg-filter-group .checkbox-group { display: flex; gap: 12px; } .filter-checkbox { display: flex; align-items: center; gap: 0.5em; padding: 0.375em 0; min-height: 2.25rem; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary, #aab); transition: color 150ms ease; line-height: 1.35; } .filter-checkbox:hover { color: var(--text-primary, #fff); } .filter-checkbox input[type="checkbox"] { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; accent-color: #00528d; cursor: pointer; } .filter-checkbox input[type="checkbox"]:checked + span { color: var(--text-primary, #fff); font-weight: 600; } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout): Overrides fuer Shared-Komponenten aus vergleich.min.css (darf nicht modifiziert werden -> Spezifitaets-Override hier in der View-CSS). Inaktive Betrags-Pills text-secondary -> 0.85; Filter-Beschriftungen ("Anlagebetrag" etc.) text-muted -> 0.85. Hover-Regel noetig, damit die Aufhellung aus der min.css nicht per Source-Order ueberstimmt wird. */ .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); } .vergleich-dashboard .filter-label { color: rgba(255,255,255,0.85); } .badge-zeile { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .merkmal-wert .iframe { display: block; text-align: right; margin-top: 4px; } .merkmal-wert .iframe .icon { position: relative; margin-left: 0; color: #A9F6DB; /* Kontrast-Politur 2026-06-12 (Schwester-Rollout): Akzent-Text #4cb5a0 -> #1FD99B */ } .merkmal-wert a.iframe:hover .icon { color: #DFFDF2; /* Kontrast-Politur 2026-06-12 (Schwester-Rollout): Hover-Ton der Akzentfamilie */ } .merkmal-wert a:hover, .merkmal-wert a:focus, .merkmal-wert a:visited { background: none; padding: 0; } .merkmal-wert img { display: block; margin-top: 2px; margin-left: auto; } .merkmal-wert a { display: block; text-align: right; line-height: 0; } .merkmal-row { overflow: hidden; } /* Accordion-Hoehen-Transition */ .js .produkt-details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; overflow: hidden; } .js .produkt-details > * { overflow: hidden; } .js .produkt-karte.expanded .produkt-details { grid-template-rows: 1fr; } .vergleich-dashboard .filter-section { position: relative; margin-top: -1.1em; margin-bottom: 5em; overflow: visible; } /* margin-bottom 5em: gewollter Abstand zwischen Einstellungsreihen und Ergebniszeile (Anwender-Weisung 2026-08-18) — stammt aus der Floating-Button-Aera, gilt aber unabhaengig vom (inzwischen umgezogenen) Filter-Button */ .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: var(--radius-md, 12px); 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); } .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: var(--radius-md, 12px); 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; } .filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; } .filter-column { padding: 4px 0; } .filter-column-separator { border-left: 1px solid rgba(255,255,255,0.1); padding-left: 1rem; } .filter-row-separator { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 0.75rem; margin-top: 0.25rem; } /* Ranking Race: Klicks während Animation blockieren */ .produkt-liste.animating .produkt-karte { pointer-events: none; } .checkbox-group-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; } /* Sitz-Zeile: nebeneinander ab 50em, untereinander darunter */ /* 50.01em statt 50em (Audit A-7.2 / Phase K6, Rollout Tagesgeld CT-0148 2026-08-26): zusammen mit dem `max-width: 50em`-Block darunter traf exakt 800px BEIDE Bloecke. Der Offset sitzt bewusst auf der min-width-Seite, damit 800px zur schmalen Variante gehoert; folgt dem Bestands-Vorbild `min-width: 72.01em`. `.01em` statt `.0625em`, weil letzteres exakt 801px waere und eine volle Pixel-Breite unversorgt liesse. Der `max-width: 50em`-Block bleibt unveraendert. */ @media (min-width: 50.01em) { .filter-row-separator[style] .filter-column-separator { border-top: none; padding-top: 0; margin-top: 0; border-left: 1px solid var(--border); padding-left: var(--space-lg); margin-left: var(--space-md); } } @media (max-width: 50em) { .filter-row-separator[style] { grid-template-columns: 1fr !important; } } .flag-emoji, .badge-flag-emoji { vertical-align: middle; } .flag-emoji { font-size: 1.15rem; margin-right: 2px; position: relative; top: -2px; } .badge-flag-emoji { font-size: 0.85rem; margin-left: 4px; position: relative; top: -2px; } /* Emoji-Flagge als Standard, Bild-Fallback versteckt */ .flag-img-variant { display: none; vertical-align: middle; } .flag-emoji-variant { vertical-align: middle; } /* Bei fehlendem Emoji-Flag-Support (z.B. Windows): Bild statt Emoji */ .no-emoji-flags .flag-emoji-variant { display: none; } .no-emoji-flags .flag-img-variant { display: inline; } .filter-panel-titel { display: block; font-size: 0.7rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 0.5em; margin-bottom: 0.75em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* Eingrenzungsfilter */ .eingrenzungsfilter { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; margin-top: 10px; } .eingrenzungsfilter-title { font-weight: 600; font-size: 0.85rem; color: var(--text-secondary, #aab); display: block; margin-bottom: 6px; } /* Aktive Filter Hinweis */ .aktive-filter-hinweis { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(0, 82, 141, 0.15); border-radius: 6px; margin-bottom: 8px; font-size: 0.82rem; color: var(--text-secondary, #aab); } .filter-hinweis-icon { font-size: 0.9rem; } .filter-hinweis-text { flex: 1; } .filter-reset-btn { cursor: pointer; border: none; background: transparent; text-decoration: underline; color: var(--link-color, #6cb4ee); font-size: 0.82rem; padding: 2px 4px; white-space: nowrap; } .filter-reset-btn:hover { color: var(--text-primary, #fff); } .vergleich-dashboard .results-header { flex-wrap: nowrap; } .vergleich-dashboard .sort-buttons { flex-shrink: 0; } /* Responsive: Nav-Scroll-Strip (Betragsstufen-Pills) auf Tablet-Hochformat (bis 832px, iPad Air 820px inkl.) */ @media (max-width: 52em) { .vergleich-dashboard .laufzeit-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; /* Zentrierung der Pills (Cross-View-Angleichung 2026-08-21, Muster aus der Schwester-Tabellenansicht / Audit A-7.1). Fallback-Deklaration zuerst: Engines ohne das `safe`-Keyword (WebKit/Safari, Chrome < 115) verwerfen die naechste Deklaration komplett und brauchen deshalb flex-start — sonst greift dort das zentrale `center` aus vergleich.min.css, und bei Overflow werden die linken Pills unerreichbar, weil scrollLeft nicht negativ werden kann. In Chromium gewinnt danach das gueltige `safe center`. Gehoert mit den Auto-Margins unten zusammen. */ justify-content: flex-start; justify-content: safe center; gap: 0.25em; padding: 0.2em; /* volle Breite, damit der Glasmorphismus-Hintergrund nicht rechts abgeschnitten wird */ width: 100%; max-width: 100%; } .vergleich-dashboard .laufzeit-nav::-webkit-scrollbar { display: none; } /* Auto-Margins als Zentrier-Fallback (Muster aus der Tabellenansicht, Audit A-7.1b). NICHT ENTFERNEN und nicht mit der Fallback-Zeile oben "aufraeumen" — die beiden gehoeren zusammen: wo oben flex-start gewinnt, stuende die Leiste sonst auch dann linksbuendig, wenn alle Pills in eine Zeile passen. Die Auto-Margins zentrieren genau diesen Fall und kollabieren bei Overflow auf 0, die linken Pills bleiben per scrollLeft erreichbar. `:first-child`/`:last-child` sind zwingend — `:first-of-type` traefe wegen des gemischten Markups (aktive Pill = , uebrige = ) ZWEI Elemente und risse die Leiste auseinander. */ .vergleich-dashboard .laufzeit-nav .laufzeit-pill:first-child { margin-inline-start: auto; } .vergleich-dashboard .laufzeit-nav .laufzeit-pill:last-child { margin-inline-end: auto; } .vergleich-dashboard .laufzeit-nav .laufzeit-pill { min-height: 2.75em; scroll-snap-align: center; flex-shrink: 0; padding-left: 0.75em; padding-right: 0.75em; } .nav-scroll-wrapper { -webkit-mask-image: linear-gradient(to right, transparent, black 1.5em, black calc(100% - 1.5em), transparent); mask-image: linear-gradient(to right, transparent, black 1.5em, black calc(100% - 1.5em), transparent); } .nav-scroll-wrapper.scroll-start { -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 1.5em), transparent); mask-image: linear-gradient(to right, black, black calc(100% - 1.5em), transparent); } .nav-scroll-wrapper.scroll-end { -webkit-mask-image: linear-gradient(to right, transparent, black 1.5em, black); mask-image: linear-gradient(to right, transparent, black 1.5em, black); } .nav-scroll-wrapper.scroll-start.scroll-end { -webkit-mask-image: none; mask-image: none; } } /* Drag-to-scroll (nur Maus, wenn Scroll-Strip aktiv) -- Touch-Geraete behalten natives Momentum-Scrolling */ @media (max-width: 52em) and (hover: hover) and (pointer: fine) { .vergleich-dashboard .laufzeit-nav { cursor: grab; } .vergleich-dashboard .laufzeit-nav.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } .vergleich-dashboard .laufzeit-nav.is-dragging .laufzeit-pill { pointer-events: none; } } /* Responsive: Tablet / schmaler Desktop (Touch-Targets bis inkl. iPad Air/Pro Hochformat 820/834px) */ @media (max-width: 52em) { .vergleich-dashboard { padding: 0.75em; } /* Cross-View-Paritaet 2026-08-21: .filter-section/.filter-group NICHT ab 52em stapeln — die Tabellenansicht kennt diese Regel nicht, dadurch standen die beiden Balken-Toggles (Sonderzinsen / Auslandsanlagen) zwischen 48em und 52em in der Liste untereinander und in der Tabelle nebeneinander. Der Mobile-Stapel (column + zentriert) kommt ab 48em ohnehin aus vergleich.min.css. */ .vergleich-dashboard .produkt-header { padding: 0.5rem; gap: 0.5rem; } /* rem statt em, damit Touch-Target-Groessen unabhaengig von lokaler font-size greifen */ .vergleich-dashboard .produkt-rang { width: 2rem; height: 2rem; font-size: 0.875rem; } .vergleich-dashboard .expand-btn { width: 2.75rem; height: 2.75rem; } .vergleich-dashboard .results-header { flex-direction: column; align-items: stretch; gap: 0.5rem; } .vergleich-dashboard .sort-buttons { justify-content: flex-end; } .vergleich-dashboard .zins-balken-container { width: 7.5em; } .vergleich-dashboard .zins-zahl { font-size: 1.25rem; } .vergleich-dashboard .details-tabs { display: flex; gap: 0.25em; } .vergleich-dashboard .details-tabs .details-tab { flex: 1 1 0; min-height: 2.75rem; padding: 0.5em 0.375em; font-size: 0.8125rem; line-height: 1.2; text-align: center; hyphens: auto; } /* Erweiterte Filter responsive */ .vergleich-dashboard .filter-row { grid-template-columns: 1fr; } .vergleich-dashboard .filter-column-separator { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 0.75rem; } .vergleich-dashboard .aktive-filter-hinweis { flex-wrap: wrap; font-size: 0.875rem; } } /* Zinsbalken im Tablet-Bereich breiter (steht nach 48em-Block, damit 9em im Bereich 38-48em den 7.5em-Default ueberschreibt) */ @media (min-width: 38em) and (max-width: 52em) { .vergleich-dashboard .zins-balken-container { width: 9em; } } #hilfe .icon { color: #A9F6DB; } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout) */ #hilfe a:hover .icon { color: #DFFDF2; } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout) */ /* Diagrammansicht-Icon (SVG statt Icon-Font): Reset gegen die unscopten .icon-Regeln aus style.css (font-size:3em, position:absolute), sonst reisst die Glyphe aus der #hilfe-Zeile. Farbe kommt ueber currentColor aus den #hilfe .icon-Regeln (auch im Hochkontrast-Hell-Modus). 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; } } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout): Die Footer-Link-Farben (Ruhe #1FD99B / Hover #8FF6D5) sind ZENTRAL in vergleich.min.css definiert (`.vergleich-dashboard .footer-line a` bzw. `a:hover`). Die frueheren Core-Overrides (.vergleich-footer a:link/:visited/:hover) sind entfernt. Bei min.css-Aenderungen den ?v=-Parameter am vergleich.min.css- im Core bumpen (derzeit v=20). */ .vergleich-dashboard .icon-chart-area, .vergleich-dashboard .icon-gift { color: #A9F6DB; } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout) */ .vergleich-dashboard a:hover > .icon-chart-area, .vergleich-dashboard a:hover > .icon-gift { color: #DFFDF2; } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout) */ .vergleich-dashboard a.cardgifta img { width: 2.97em; } /* +10% ggue. Site-Default 2.7em, Politur 2026-05-20 */ .vergleich-dashboard a.cardgifta:hover img { filter: brightness(1.12); } @media (max-width: 600px) { .vergleich-dashboard .produkt-info { position: relative; z-index: 2; } } .vergleich-dashboard .zins-label-kurz { display: none; } /* Mobile-Kurzlabel, sichtbar erst im 38em-Block */ /* Responsive: Mobile schmal */ @media (max-width: 38em) { .vergleich-dashboard { padding: 0.5em; } /* Pills umbrechen statt scrollen: alle Betragsstufen inkl. EUR 2.000 sichtbar */ /* laufzeit-nav: nowrap + scroll aus <=52em Block gilt weiter */ .vergleich-dashboard .produkt-anbieter { font-size: 0.875rem; } .vergleich-dashboard .produkt-name { font-size: 0.75rem; } .vergleich-dashboard .zins-zahl { font-size: 1.125rem; } .vergleich-dashboard .expand-btn { width: 2.25rem; height: 2.25rem; } .vergleich-dashboard .details-tabs .details-tab { white-space: normal; font-size: 0.8rem; padding: 0.625em 0.25em; line-height: 1.15; } .vergleich-dashboard .toggle-btn { font-size: 0.75rem; padding: 0.25rem 0.5rem; } /* laufzeit-pill: shared CSS Werte beibehalten (10px/8px 6px), keine Overrides */ /* .sort-btn-Touchgroesse jetzt im eigenen 48em-Block nach diesem @media (Cross-View 2026-06-26b) */ /* Zins-Balken: bleibt im Flow unter dem Label (kein absolute Positioning) */ /* Kurzlabel statt 44-Zeichen-Langlabel: die auto-Grid-Spalte (.produkt-zins) quetscht sonst die 1fr-Anbieterspalte auf ~2 Zeichen und schiebt das Badge ins Label. max-width sichert kuenftig laengere Labels ab (rechtsbuendiger Umbruch statt Quetschen). */ .vergleich-dashboard .zins-label { font-size: 0.625rem; max-width: 9em; text-align: right; } .vergleich-dashboard .zins-label-lang { display: none; } .vergleich-dashboard .zins-label-kurz { display: inline; } /* Politur 2026-05-21: Mobile Full-Bleed — Panel bricht aus `.vergleich-dashboard`-Site-Padding aus, damit lange Labels/Pills nicht ueber den Panel-Rand ragen (~9 px Luft je Seite auf 375 px). */ .anpassen-panel { width: 95vw; max-width: none; margin: -3em 0 1em calc(50% - 47.5vw); } } /* Sort-Button-Touchgroesse bis 48em (Cross-View 2026-06-26b): 0.75rem (12px) statt var(--text-xs) (11px) gilt jetzt bis 768px — gemeinsam mit der Tabelle (dort in der .sort-btn-Regel des 48em-Header-Blocks). Vorher nur <=38em. Auf engen Phones weiterhin Touch-Zweizeiler, auf Tablets groessere Touch- Flaeche. Liste<->Tabelle und AT<->DE synchron. Einheit `rem` (Referenz- Einheit dieser Pille). */ @media (max-width: 48em) { .vergleich-dashboard .sort-btn { font-size: 0.75rem; } } /* ── Focus-Visible-States fuer Tastatur-Navigation ── */ .vergleich-dashboard .expand-btn:focus-visible, .vergleich-dashboard .sort-btn:focus-visible, .vergleich-dashboard .details-tab:focus-visible, .vergleich-dashboard .laufzeit-pill:focus-visible, /* CTA-Link nachgezogen (A1, CT-0148 2026-08-26): als erbte er den globalen `a:focus-visible` mit var(--mint-400)=#4DE5B4, der im Kontrast-Hell-Modus auf 1,40:1 faellt (gemessen) — unter der 3:1-Schwelle von WCAG 1.4.11. `--accent` wird dagegen zentral auf #00528D umgeschrieben und erreicht dort 7,10:1. */ .vergleich-dashboard .anbieter-link:focus-visible { outline: 2px solid var(--accent, #A9F6DB); outline-offset: 0.125em; } .vergleich-dashboard .produkt-header:focus-visible { outline: 2px solid var(--accent, #A9F6DB); outline-offset: -2px; border-radius: 0.5em; } /* Tooltip am Zinsbalken — erlaeutert, dass der Balken den Zins relativ zum besten Zins beim gewaehlten Anlagebetrag zeigt. data-tooltip-Inhalt wird per ::after-Pseudo-Element angezeigt. Sichtbar auf :hover und :focus. */ .vergleich-dashboard .zins-balken-container { position: relative; cursor: help; overflow: visible; } .vergleich-dashboard .zins-balken-container::before { content: ''; position: absolute; top: -0.75em; bottom: -0.75em; left: -0.5em; right: -0.5em; } /* .produkt-karte hat in vergleich.min.css overflow:hidden; backdrop-filter:blur erzeugt zudem einen eigenen Stacking Context. Beides ueberschreiben, damit der Tooltip sichtbar wird und nicht von nachfolgenden Karten ueberlagert wird. */ .vergleich-dashboard .produkt-karte { overflow: visible; position: relative; } .vergleich-dashboard .produkt-karte:hover, .vergleich-dashboard .produkt-karte:focus-within { z-index: 1000; } .vergleich-dashboard .zins-balken-container::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 0.5em); right: 0; width: max-content; max-width: 18em; 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); 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 .zins-balken-container:hover::after, .vergleich-dashboard .zins-balken-container:focus::after, .vergleich-dashboard .zins-balken-container:focus-visible::after { opacity: 1; transform: translateY(0); } .vergleich-dashboard .zins-balken-container:focus, .vergleich-dashboard .zins-balken-container:focus-visible { outline: 2px solid var(--accent, #A9F6DB); outline-offset: 2px; } @media (max-width: 48em) { .vergleich-dashboard .zins-balken-container::after { max-width: 14em; font-size: 0.7em; } } /* ════════════════════════════════════════════════════════════ Bar-Indikator-Toggles (ersetzen die fruehere Slider-Switch- Darstellung). Sitzen direkt in der .filter-section-Glaskarte. Masse px->em (1em=16px); nur font-size, border-radius-Hairline und SVG-Dimensionen bleiben px. Fuellung/Hoehe laufen rein ueber data-state am Button -> CSS, der Klick schaltet optimistisch um. ──────────────────────────────────────────────────────────── */ .vergleich-dashboard .balken-toggle { position: relative; /* Anker fuer den Tooltip (::after) */ display: flex; align-items: center; gap: 1em; width: fit-content; /* Button auf Control-Breite schrumpfen (sonst dehnt align-items:stretch der filter-group ihn auf die Beschriftungsbreite). So schliesst der rechtsbuendige Tooltip mit dem Pfeil ab, nicht mit der Beschriftung. */ 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; /* dauerhaft hell: Umschalten ist jederzeit per Klick moeglich -> Pfeil bleibt als Klick-Affordanz sichtbar */ } .vergleich-dashboard .balken-toggle-arrow svg { display: block; } /* Auslandsanlagen — Dash-Indikator: Fuellstand (8/13 -> 13/13) */ .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; } /* Sonderzinsen — Balken-Indikator: Hoehe waechst (8px -> 13px) */ .vergleich-dashboard .balken-toggle-bars-grow { align-items: flex-end; height: 0.8125em; margin-bottom: 0.0625em; } .vergleich-dashboard .balken-toggle-bars-grow .balken-toggle-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-dashboard .balken-toggle[data-state="on"] .balken-toggle-bars-grow .balken-toggle-bar { height: 0.8125em; background: #DCEBF8; } /* Tooltip-Hinweis auf die Umschalt-Moeglichkeit — Stil wie der Zinsbalken-Tooltip (dunkle Glas-Sprechblase, Fade-in), rechtsbuendig (rechte Kante am Pfeil). */ .vergleich-dashboard .balken-toggle[data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 0.5em); right: 0; /* rechtsbuendig: rechte Kante schliesst mit dem Pfeil ab — einheitlich fuer beide Toggles */ 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); } /* Touch-Geraete (kein Hover): Umschalt-Hinweis nicht einblenden, damit die Sprechblase nach dem Antippen nicht stehen bleibt. Maus-Hover und Tastatur- Fokus (:focus-visible) zeigen den Hinweis weiterhin. */ @media (hover: none) { .vergleich-dashboard .balken-toggle[data-tooltip]:hover::after { opacity: 0; } } /* Mobile (gestapelt): groesserer Abstand ueber den Toggle-Baendern, optisch wie der Abstand zwischen Laufzeit- und Anlagebetrag-Band (ca. --space-lg). */ @media (max-width: 48em) { .vergleich-dashboard .filter-section .sonderzins-filter-group, .vergleich-dashboard .filter-section .ausland-filter-group { margin-top: var(--space-sm); } } @media (prefers-reduced-motion: reduce) { .vergleich-dashboard .balken-toggle-bar, .vergleich-dashboard .balken-toggle-arrow { transition: none; } } /* ── Europakarte (Länderfilter) ── */ /* display:flex (column) ueberschreibt das auto-fit-Grid der zentralen .filter-row — sonst laegen .ek-kopf und .ek-spalten als Grid-Items nebeneinander. */ /* Buehne: eine Nuance dunkler als das mittelblaue Panel (rgba(9,87,143)), aber bewusst NICHT navy-dunkel — der urspruengliche Handelsblatt-Ton war fuer die Seite zu dunkel (Anwender-Feedback 2026-07-07). min-height gibt der Karte (meet, zentriert) Raum, damit sie als Buehne wirkt. Full-Bleed (2026-07-09): margin -1.5em = horizontales Padding der .anpassen-panel — die Buehne laeuft bis an die Panelkante, nur der hell→dunkel→hell-Uebergang bleibt sichtbar; deshalb keine Rundung und keine Seiten-Border. Das horizontale Padding gleicht die 1.5em wieder aus, damit die Inhalte buendig zu den uebrigen Panel-Zeilen stehen. */ .vergleich-dashboard .ek-sektion { position: relative; overflow: hidden; margin-left: -1.5em; margin-right: -1.5em; padding: var(--space-md) calc(var(--space-md) + 1.5em); background: linear-gradient(160deg, rgba(10,48,82,0.88), rgba(14,64,108,0.78)); border: 1px solid var(--border); border-left: 0; border-right: 0; min-height: 27em; display: flex; flex-direction: column; justify-content: center; } .ek-kopf { flex: 0 0 auto; } /* Karte liegt hinter den Spalten; Wrapper faengt keine Klicks, aber die Landflaechen/Marker schon — so klicken freie Flaechen zu den Checkboxen durch. */ .ek-karte-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; } .ek-karte-wrap svg { width: 100%; height: 100%; } .ek-karte-wrap .ek-land, .ek-karte-wrap .ek-marker { pointer-events: auto; } .ek-kopf, .ek-spalten { position: relative; z-index: 1; } /* Die vollbreiten Container fangen sonst Klicks im freien Korridor ab — durchlassen, nur ihre Inhalte (Pills, Zaehler, Glas-Spalten) fangen. */ .ek-kopf, .ek-spalten { pointer-events: none; } .ek-kopf > *, .ek-spalten .filter-column { pointer-events: auto; } /* Karten-Zustaende (Land-Stroke = Buehnenfarbe, wirkt als Laendergrenze) */ .ek-silhouette path { fill: rgba(255,255,255,0.07); } .ek-land { fill: rgba(255,255,255,0.2); stroke: rgba(10,48,82,0.9); stroke-width: .5; cursor: pointer; transition: fill var(--transition-base), filter var(--transition-base); } .ek-land.ek-gewaehlt { fill: var(--primary); filter: drop-shadow(0 0 6px rgba(0,112,192,0.55)); } .ek-land:not(.ek-gesperrt):not(.ek-gewaehlt):hover { fill: rgba(0,112,192,0.45); } .ek-land.ek-gesperrt { fill: rgba(255,255,255,0.02); cursor: default; } .ek-marker { fill: rgba(255,255,255,0.14); stroke: rgba(255,255,255,0.55); stroke-width: .5; cursor: pointer; transition: fill var(--transition-base), filter var(--transition-base); } .ek-marker.ek-gewaehlt { fill: var(--primary); filter: drop-shadow(0 0 6px rgba(0,112,192,0.55)); } .ek-marker:not(.ek-gesperrt):not(.ek-gewaehlt):hover { fill: rgba(0,112,192,0.45); } .ek-marker.ek-gesperrt { fill: rgba(255,255,255,0.05); cursor: default; } /* Sanfter Puls beim Zustandswechsel (JS setzt .ek-pop kurz) */ @keyframes ekPop { 0% { opacity: .55; } 100% { opacity: 1; } } .ek-pop { animation: ekPop 250ms ease; } /* Kopf: nur noch Schnellauswahl + Zaehler. Der Gruppen-Umschalter liegt nicht mehr hier, sondern auf den Glas-Karten selbst (.ek-spalte) — die aktive Karte zeigt, was die Karte gerade darstellt. */ .ek-kopf { display: flex; flex-wrap: wrap; gap: .5em .75em; margin-bottom: .75em; align-items: center; } .ek-presets { display: inline-flex; flex-wrap: wrap; gap: .3em; align-items: center; } .ek-presets-label { color: var(--text-secondary); font-size: .75em; margin-right: .2em; } .ek-preset-btn { cursor: pointer; font: inherit; font-size: .75em; padding: .3em .85em; border-radius: 1.4em; color: rgba(255,255,255,0.85); background: transparent; border: 1px solid rgba(255,255,255,0.3); transition: background var(--transition-base), border-color var(--transition-base); } .ek-preset-btn:hover { background: rgba(169,246,219,0.25); border-color: rgba(169,246,219,0.5); } .ek-zaehler { color: var(--text-secondary); font-size: .85em; margin-left: auto; align-self: center; } /* Checkbox-Spalten als Glas ueber der Karte */ /* Mittel-Korridor zwischen den Spalten: die Karte (meet, zentriert) wird dort sichtbar — Kerneuropa liegt genau in der Mitte. */ .ek-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2em, 24%, 16em); row-gap: var(--space-md); } /* Bewusst duenn (Alpha .26, blur 1px), damit die Karte durchscheint. */ .ek-spalten .filter-column { background: rgba(10,48,82,0.26); backdrop-filter: blur(1px); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75em; } /* Die Karten SIND der Gruppen-Umschalter: ganze Flaeche aktivierbar. Aktiv-Markierung = dasselbe Muster wie die gewaehlte Laufzeit im "alle Zinsen"-Tab (.zins-item.highlight): Akzent-Border + transparente Akzentflaeche. */ .ek-spalte { cursor: pointer; transition: background var(--transition-base), border-color var(--transition-base); } .ek-spalte:not(.ek-spalte-aktiv):hover { border-color: rgba(255,255,255,0.35); } .ek-spalten .ek-spalte-aktiv { background: rgba(169,246,219,0.15); border-color: var(--accent); } /* Karten-Titel als echter Button (Tastatur-Zugang zum Umschalten), optisch unveraendert — der .filter-label-Span behaelt den zentralen Stil. */ .ek-spalte-kopf { display: block; width: 100%; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } /* Glas-Karten trennen sich selbst — zentrale Separator-Raender/-Margins neutralisieren (die frueheren .filter-row-separator[style]-Regeln greifen ohne Inline-style nicht mehr). */ .ek-spalten .filter-column-separator { margin: 0; } /* Tooltip */ .ek-tooltip { position: absolute; z-index: 2; pointer-events: none; background: rgba(10,37,64,0.92); color: #fff; padding: .3em .6em; border-radius: .4em; font-size: .8em; white-space: nowrap; opacity: 0; transition: opacity 150ms ease; } .ek-tooltip.ek-sichtbar { opacity: 1; } /* Tablet-Zwischenbereich (50–64em): die Tafeln sind wegen des Karten- Korridors schmal — Checkboxen einspaltig, sonst laeuft das zentrale repeat(2,1fr)-Grid ueber den Tafelrand (VRT-Befund 2026-07-07). */ /* Untere Kante 50.01em statt 50em (Audit A-7.2 / Phase K6, Rollout Tagesgeld CT-0148 2026-08-26): exakt 800px traf sonst diesen Block UND den `max-width: 50em`-Block darunter gleichzeitig. */ @media (min-width: 50.01em) and (max-width: 64em) { .ek-spalten .checkbox-group-wrap { grid-template-columns: 1fr; } } /* Schmale Viewports: Spalten untereinander, Karte wird dezente Textur. Gleicher Breakpoint wie die alte Sitz-Zeile (50em). */ @media (max-width: 50em) { .ek-spalten { grid-template-columns: 1fr; } .ek-karte-wrap { opacity: .18; } } /* === Hochkontrast-Hell-Modus ============================================ Aktiv nur bei #vergleich.kontrast-hell. ALLE Overrides per Spezifitaet ueber den ID+Klasse-Praefix (schlaegt vergleich.min.css und die Basisregeln weiter oben in dieser Datei) — NIE !important, em-Konvention (px nur border-width/box-shadow/outline/gradient/@media), keine Geometrie-/transform-Aenderung (FLIP unberuehrt), G1-Heatmap-Logik unveraendert (nur Farben). Akzente konsequent Blau statt Tuerkis/Gruen. Listen-Karten-DOM (produkt-karte / zins-balken / details-tab / Inland-Ausland-Badge) — anders als die Girokonto-Listen-Schwester (die vp-chip/Sterne nutzt). Bewusste dunkle Ausnahme: die Europakarte-Buehne im Filter-Panel (Overrides am Blockende setzen die durchschlagenden Hell-Werte lokal zurueck). --- Toggle-Button (in BEIDEN Modi sichtbar; Basis = Dunkel-Standardansicht). .kontrast-zeile = hoehenloser Anker (Markup AUSSERHALB der Partial-Swap-Zone). Politur 2026-08-18: Kontrast-Toggle und "weitere Filter"-Button bilden EINE Zeile auf der "Anlagebetrag"-Label-Zeile, ~0.5em ueber der frueheren Toggle-Position. Desktop (>72em): beide in Kachelgroesse der View-Switcher- Icons (2.51em x 2.09em = 34x28px) und buendig darunter — Kontrast unter der Seitenhilfe, Filter unter der kreativen Ansicht. Die calc()-%-Anteile sind gegen die Live-Geometrie der #hilfe-Leiste kalibriert (style.css v60: Leiste em-fest, Anker right 1.5% von #nonFooter; Buendigkeit per getBoundingClientRect bei 1280/1366/1920 verifiziert, Drift < 0.2px). --- */ #vergleich .kontrast-zeile { display: block; position: relative; height: 0; margin: 0; overflow: visible; z-index: 1; } #vergleich .kontrast-toggle { position: absolute; right: calc(0.405% + 1.43em); top: 0.98em; /* Anwender 2026-08-18: nochmals 0.5rem hoeher, mehr Luft zur Betrags-Pill-Reihe */ width: 2.51em; height: 2.09em; padding: 0; display: inline-flex; align-items: center; justify-content: center; 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; } #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; } /* "weitere Filter"-Button: aus der .filter-section auf die Kontrast-Zeile umgezogen (DOM: erstes Dashboard-Kind, bleibt in der Partial-Swap-Zone, damit der Badge serverseitig aktuell mitgerendert wird). Overrides schlagen die zentrale vergleich.min.css per #vergleich-Praefix — die min.css selbst bleibt unveraendert (gilt fuer alle Produkte). */ #vergleich .vergleich-dashboard { position: relative; } /* top koppelt an den Toggle-top (gleicher em-Wert) und kompensiert den Dashboard-margin-top per var(--space-md/-sm) — so bleibt die Zeile auch bei Text-Zoom und einer Aenderung der Space-Token deckungsgleich (Review-Hinweis H4 2026-08-18). */ #vergleich .anpassen-filter-btn { bottom: auto; top: calc(0.98em - var(--space-md)); right: calc(7.19em - 0.583%); width: 2.51em; height: 2.09em; font-size: 0.85rem; } #vergleich .anpassen-filter-btn .icon-wrap .icon-sliders { font-size: 1.05em; } #vergleich .anpassen-filter-btn .ecke { width: 0.7em; height: 0.7em; } #vergleich .anpassen-filter-btn .ecke-tl { top: 0.22em; left: 0.22em; } #vergleich .anpassen-filter-btn .ecke-tr { top: 0.22em; right: 0.22em; } #vergleich .anpassen-filter-btn .ecke-bl { bottom: 0.22em; left: 0.22em; } #vergleich .anpassen-filter-btn .ecke-br { bottom: 0.22em; right: 0.22em; } /* <=72em: #hilfe-Leiste sitzt im Seitenkopf, keine Icon-Buendigkeit moeglich — Zeile rechtsbuendig auf Label-Mitte wie fruehere Toggle-Position, Filter-Button mit Luecke links daneben (right so bemessen, dass auch der Aktiv-Badge samt 2px-Ring nicht an den Kontrast-Toggle stoesst — Review-Hinweis H1, gemessen 2026-08-18). */ @media (max-width: 72em) { #vergleich .kontrast-toggle { top: 0.97em; right: 0.85em; } /* Anwender 2026-08-18 (2. Korrektur): Luft zur Betrags-Pill-Reihe ans Desktop-Band angeglichen (~14.5px) — vorher hing das mittlere Band ~8px tiefer */ #vergleich .anpassen-filter-btn { top: calc(0.97em - var(--space-md)); right: 3.92em; } } @media (max-width: 38em) { #vergleich .kontrast-toggle { top: 0.4em; right: 0.6em; } #vergleich .anpassen-filter-btn { top: calc(0.4em - var(--space-sm)); right: 4.13em; } /* Anwender 2026-08-18: auch mobil 0.5rem mehr Luft zwischen Icon-Zeile und Betrags-Pills. Nach oben ist kein Raum (Kartenkante), deshalb entsteht die Luft im Fluss: mehr padding-top schiebt Label+Pills nach unten, die absolut verankerten Buttons bleiben oben stehen. */ #vergleich .vergleich-dashboard { padding-top: calc(var(--space-sm) + 0.5rem); } } /* ===== Ebene A — Flaeche (weisse Karte auf blauem Seitenhintergrund) ===== */ #vergleich.kontrast-hell { background: #F7F9FC; color: #111; padding: 0 0 0.9em; border-radius: 0.5em; box-shadow: 0 0 0 1px rgba(0,82,141,0.20), 0 0.5em 2em rgba(0,0,0,0.12); } #vergleich.kontrast-hell h1 { color: #00385f; border-top-color: transparent; } /* Ansichts-Icons der Kopfleiste (Listen-/Tabellen-/Diagramm-/Hilfe-Icon): dunkles Blau NUR oberhalb 72em, wo #hilfe auf der weissen Karte liegt. Ab 72em abwaerts zieht style.css #hilfe ins blaue Kopf-Band (#09578f) — dort waren die Icons blau auf blau und praktisch unsichtbar (live gemessen 11.08.2026: #00528D auf #09578f). Unterhalb 72em gelten deshalb wieder die Basis-Mintfarben; der 38em-Block weiter unten haelt sie zusaetzlich fest. */ @media only screen and (min-width: 72.01em) { #vergleich.kontrast-hell #hilfe .icon { color: #00528D; } #vergleich.kontrast-hell #hilfe .current .icon { color: #003A66; } #vergleich.kontrast-hell #hilfe a:hover .icon, #vergleich.kontrast-hell #hilfe a:focus .icon { color: #0070C0; } } #vergleich.kontrast-hell .kontrast-toggle { color: #00528D; 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: #003A66; } #vergleich.kontrast-hell .kontrast-toggle:focus-visible { outline-color: #0070C0; } #vergleich.kontrast-hell .kontrast-toggle[aria-pressed="true"] { background: #F7F9FC; color: #003A66; } #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; } /* ===== Ebene B — Variablen-Override (.vergleich-dashboard); AAA >= 7:1 Fliesstext. ===== */ #vergleich.kontrast-hell .vergleich-dashboard { --primary: #0070C0; --primary-dark: #00528D; --primary-darker: #003A66; --accent: #00528D; --accent-light: #0070C0; --bg-card: rgba(0,82,141,0.05); --bg-card-hover: rgba(0,82,141,0.10); --border: rgba(0,82,141,0.30); --border-light: rgba(0,82,141,0.14); --text-primary: #111; --text-secondary: rgba(0,0,0,0.88); --text-muted: #404040; --link-color: #00528D; background: #F7F9FC; } /* ===== Ebene C — hartkodierte Farben uebersteuern ===== */ /* -- Einstellungsleiste: Anlagebetrag-Pills (Basiswert rgba(255,255,255,0.85) weiter oben in dieser Datei) + Beschriftungen. Aktive Pill nutzt in min.css background:var(--text-primary) -> im Hell-Modus #111; darum explizit blaue Fuellung, weisse Schrift. -- */ #vergleich.kontrast-hell .vergleich-dashboard .laufzeit-nav { background: rgba(0,82,141,0.06); } #vergleich.kontrast-hell .vergleich-dashboard .laufzeit-pill { color: #003A66; } #vergleich.kontrast-hell .vergleich-dashboard .laufzeit-pill:hover { background: rgba(0,82,141,0.08); color: #003A66; } #vergleich.kontrast-hell .vergleich-dashboard .laufzeit-pill.active { background: #0070C0; color: #fff; } #vergleich.kontrast-hell .vergleich-dashboard .filter-label, #vergleich.kontrast-hell .vergleich-dashboard .filter-column-title { color: #003A66; } #vergleich.kontrast-hell .vergleich-dashboard .toggle-group, #vergleich.kontrast-hell .vergleich-dashboard .filter-group .toggle-group { background: rgba(0,82,141,0.06); } #vergleich.kontrast-hell .vergleich-dashboard .toggle-btn { color: #003A66; } #vergleich.kontrast-hell .vergleich-dashboard .toggle-btn:hover { background: rgba(0,82,141,0.08); color: #003A66; } #vergleich.kontrast-hell .vergleich-dashboard .toggle-btn.active { background: #0070C0; color: #fff; } /* -- Sonderzins-/Ausland-Balken-Toggles: near-white State (#F1F6FC) + Pfeil (#DCEBF8) -> Blau; leere Balken (dunkel) bleiben, gefuellte Balken (#DCEBF8) -> Blau. -- */ #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle-state { color: #003A66; } #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle-arrow { color: #00528D; } #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle[data-state="on"] .balken-toggle-bars-grow .balken-toggle-bar, #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle[data-state="on"] .balken-toggle-bars-dash .balken-toggle-bar, #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle[data-state="off"] .balken-toggle-bars-dash .balken-toggle-bar:nth-child(-n+8) { background: #0070C0; } /* -- "weitere Filter"-Button (Kontrast-Zeile): dunkelblau + Tuerkis-Ecken -> Weiss + Blau -- */ #vergleich.kontrast-hell .anpassen-filter-btn { background: #F7F9FC; box-shadow: 0 0.125em 0.5em rgba(0,82,141,0.25); } #vergleich.kontrast-hell .anpassen-filter-btn:hover, #vergleich.kontrast-hell .anpassen-filter-btn.open { background: rgba(0,112,192,0.14); } #vergleich.kontrast-hell .anpassen-filter-btn:focus-visible { outline-color: #0070C0; } #vergleich.kontrast-hell .anpassen-filter-btn .ecke-tl { border-top-color: #0070C0; border-left-color: #0070C0; } #vergleich.kontrast-hell .anpassen-filter-btn .ecke-tr { border-top-color: #0070C0; border-right-color: #0070C0; } #vergleich.kontrast-hell .anpassen-filter-btn .ecke-bl { border-bottom-color: #0070C0; border-left-color: #0070C0; } #vergleich.kontrast-hell .anpassen-filter-btn .ecke-br { border-bottom-color: #0070C0; border-right-color: #0070C0; } #vergleich.kontrast-hell .anpassen-filter-btn .icon-wrap .icon-sliders { color: #00528D; } #vergleich.kontrast-hell .anpassen-badge { background: #0070C0; color: #fff; } /* -- Filter-Overlay-Panel (Basiswert dunkelblau rgba(9,87,143,0.92) in dieser Datei) -> weiss -- */ #vergleich.kontrast-hell .anpassen-panel { background: #F7F9FC; border-color: rgba(0,82,141,0.35); box-shadow: 0 0.5em 2.5em rgba(0,0,0,0.25), 0 0.125em 0.5em rgba(0,0,0,0.15); } #vergleich.kontrast-hell .filter-panel-titel { color: #00528D; border-bottom-color: rgba(0,82,141,0.18); } #vergleich.kontrast-hell .eingrenzungsfilter { border-top-color: rgba(0,82,141,0.12); } #vergleich.kontrast-hell .filter-column-separator { border-left-color: rgba(0,82,141,0.12); } #vergleich.kontrast-hell .filter-row-separator { border-top-color: rgba(0,82,141,0.12); } #vergleich.kontrast-hell .aktive-filter-hinweis { background: rgba(0,82,141,0.08); } #vergleich.kontrast-hell .filter-reset-btn { color: #00528D; } #vergleich.kontrast-hell .filter-reset-btn:hover { color: #003A66; } #vergleich.kontrast-hell .filter-checkbox { color: #333; } #vergleich.kontrast-hell .filter-checkbox:hover { color: #003A66; } #vergleich.kontrast-hell .vergleich-dashboard .filter-checkbox input[type="checkbox"] { accent-color: #0070C0; } #vergleich.kontrast-hell .panel-close-btn { background: rgba(0,82,141,0.10); color: #00528D; } #vergleich.kontrast-hell .panel-close-btn:hover, #vergleich.kontrast-hell .panel-close-btn:focus { background: rgba(0,82,141,0.18); color: #003A66; } /* -- Ergebnis-Karten: Rang-Chip, Karten-Rahmen/Hover (hartkodierte Weiss-/Tuerkis- Werte in vergleich.min.css). Weitere karten-interne Flaechen (Zins-Balken-Fuellung, Zins-Zahl, Inland/Ausland-Badge, Detail-Tabs) laufen ueber Ebene-B-Variablen und werden im Weiss-auf-Weiss-VRT nach Upload nachkontrolliert (min.css lokal nicht einsehbar). -- */ #vergleich.kontrast-hell .vergleich-dashboard .produkt-rang { background: rgba(0,82,141,0.06); } #vergleich.kontrast-hell .vergleich-dashboard .produkt-karte.expanded .produkt-rang { background: #0070C0; color: #fff; } #vergleich.kontrast-hell .vergleich-dashboard .produkt-karte:hover { border-color: rgba(0,82,141,0.30); } #vergleich.kontrast-hell .vergleich-dashboard .produkt-karte.expanded { box-shadow: 0 0 20px rgba(0,112,192,0.15); } #vergleich.kontrast-hell .vergleich-dashboard a.produkt-anbieter:hover { text-decoration-color: #00528D; } /* -- Chart-/Geschenk-Glyphen in Merkmal-Zellen (Basis-Tuerkis in dieser Datei, .icon-chart-area/.icon-gift) -- */ #vergleich.kontrast-hell .merkmal-wert .iframe .icon { color: #00528D; } #vergleich.kontrast-hell .merkmal-wert a.iframe:hover .icon { color: #0070C0; } #vergleich.kontrast-hell .vergleich-dashboard .icon-chart-area, #vergleich.kontrast-hell .vergleich-dashboard .icon-gift { color: #00528D; } #vergleich.kontrast-hell .vergleich-dashboard a:hover > .icon-chart-area, #vergleich.kontrast-hell .vergleich-dashboard a:hover > .icon-gift { color: #0070C0; } /* -- Geschenk-Icon als (cardgift-g.svg): Tuerkis -> Marken-Hellblau via Filterkette; eigener Hell-Hover, weil der Basis-Hover (brightness/saturate) den Filter ersetzt. -- */ #vergleich.kontrast-hell .vergleich-dashboard a.cardgifta img { filter: brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(946%) hue-rotate(176deg) brightness(110%) contrast(113%); } #vergleich.kontrast-hell .vergleich-dashboard a.cardgifta:hover img { filter: brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(946%) hue-rotate(176deg) brightness(110%) contrast(113%) brightness(125%); } /* -- CTA "zum Anbieter" + Footer-Links -- */ #vergleich.kontrast-hell .vergleich-dashboard .anbieter-link { background: #0070C0; color: #fff; } #vergleich.kontrast-hell .vergleich-dashboard .anbieter-link:hover { background: #00528D; } #vergleich.kontrast-hell .vergleich-dashboard .anbieter-link .link-arrow { background: #F7F9FC; color: #00528D; } #vergleich.kontrast-hell .vergleich-dashboard .footer-line a { color: #00528D; } #vergleich.kontrast-hell .vergleich-dashboard .footer-line a:hover { color: #0070C0; } /* -- Europakarte-Buehne (Laenderfilter): bewusste dunkle Marken-Ausnahme (Anwender-Entscheidung 2026-07-09 — nicht umfaerben). Schrift-Variablen lokal auf Dunkelmodus zuruecksetzen + Beschriftungen wieder aufhellen; Land-/Marker-/Preset-/ Spalten-Farben bleiben unveraendert. -- */ #vergleich.kontrast-hell .ek-sektion { --text-primary: #fff; --text-secondary: rgba(255,255,255,0.85); --text-muted: rgba(255,255,255,0.6); --accent: #00d4aa; --accent-light: #00d4aa; } #vergleich.kontrast-hell .ek-sektion .filter-label, #vergleich.kontrast-hell .ek-sektion .filter-column-title { color: rgba(255,255,255,0.85); } /* -- Mobile (<=38em, synchron zur Tabelle) -- */ @media (max-width: 38em) { /* Vollbreites weisses Band statt abgegrenzter Karte (box-shadow-Kopien 50vw versetzt). */ #vergleich.kontrast-hell { border-radius: 0; box-shadow: 50vw 0 0 #F7F9FC, -50vw 0 0 #F7F9FC; } /* #hilfe (Basis-Tuerkis in dieser Datei) zieht style.css mobil ins blaue Kopf-Band (#09578f) -> Basis-Akzentfarben halten, sonst Blau-auf-Blau. */ #vergleich.kontrast-hell #hilfe .icon { color: var(--mint-500); } #vergleich.kontrast-hell #hilfe .current .icon { color: #104266; } #vergleich.kontrast-hell #hilfe a:hover .icon, #vergleich.kontrast-hell #hilfe a:focus .icon { color: var(--mint-100); } } /* === Ende Hochkontrast-Hell-Modus === */