a.produkt-badge { text-decoration: none; cursor: pointer; } a.produkt-badge:hover, a.produkt-badge:focus { 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; } } /* Emoji-Flaggen */ .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; } .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; } /* Ranking Race: Klicks während Animation blockieren */ .produkt-liste.animating .produkt-karte { pointer-events: none; } /* Sitz-Filter Grid */ .checkbox-group-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; } /* Sitz-Zeile: nebeneinander ab 50.01em, untereinander darunter */ /* 50.01em statt 50em (Audit A-7.2 / K6-Port DE 2026-08-12): zusammen mit dem `max-width: 50em`-Block darunter traf exakt 800px BEIDE Blocks — Panel gestapelt UND mit Desktop-Links-Border. Der Offset sitzt bewusst auf der min-width-Seite, damit 800px zur schmalen Variante gehoert. `.01em` statt `.0625em`, weil letzteres exakt 801px waere und damit eine volle Pixel-Breite unversorgt liesse; so bleibt die Luecke bei 0,16px und ist mit ganzzahligen Viewports nicht erreichbar. Aus AT/K6 portiert — das dort zitierte Bestands-Vorbild `min-width: 72.01em` gibt es in den DE-Cores nicht. */ @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; } } /* Filter-Checkbox Basis (Panel-Dichte-Kompromiss: 2.25rem statt 2.75rem wegen Laender-Filter) */ .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 im Core). Inaktive Laufzeit-Pills text-secondary (3,95:1) -> 0.85 (5,04:1); Filter-Beschriftungen ("ANLAGEBETRAG" etc.) text-muted (2,51:1) -> 0.85 (4,64:1). */ .vergleich-dashboard .laufzeit-pill { color: rgba(255,255,255,0.85); } .vergleich-dashboard .laufzeit-pill:hover { color: var(--text-primary, #fff); } /* Hover-Aufhellung aus min.css wuerde sonst per Source-Order ueberstimmt */ .vergleich-dashboard .laufzeit-pill.active { color: var(--primary-darker, #004578); } .vergleich-dashboard .filter-label, .vergleich-dashboard .filter-column-title { color: rgba(255,255,255,0.85); } .vergleich-dashboard .filter-section { position: relative; margin-top: -1.1em; margin-bottom: 5em; overflow: visible; } .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); } .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); } .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; } .vergleich-dashboard .results-header { flex-wrap: nowrap; } .vergleich-dashboard .sort-buttons { flex-shrink: 0; } /* Nav-Scroll-Strip (Laufzeit-Pills) — bei Festgeld durchgaengig aktiv (14 Pills passen nicht zuverlaessig in eine Desktop-Zeile). Nav nimmt volle Breite ein, damit der Glasmorphismus-Hintergrund aus vergleich.min.css vollbreit bleibt. Padding wird NICHT ueberschrieben — wir uebernehmen var(--space-sm) = 8px aus vergleich.min.css, damit die Laufzeit-Nav auf Desktop dieselbe Gesamthoehe wie bei Ratenkredit DE erreicht. */ .vergleich-dashboard .laufzeit-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; /* safe center: zentriert auf Desktop wenn alle Pills passen, Fallback auf flex-start bei Overflow (verhindert Center-Overflow-Clipping der ersten Pills) */ /* Fallback-Deklaration zuerst (Audit A-7.1 / K6-Port DE 2026-08-12): Engines ohne das `safe`-Keyword (WebKit/Safari, Chrome < 115) verwerfen die naechste Deklaration komplett und fielen sonst auf das zentrale `center` aus vergleich.min.css zurueck. ACHTUNG: Der Kommentar darueber beschreibt die CSS-Semantik von `safe` selbst — NICHT diesen Deklarations-Fallback fuer Engines ohne `safe`-Support. Beides wird gebraucht. */ justify-content: flex-start; justify-content: safe center; gap: 0.25em; } .vergleich-dashboard .laufzeit-nav::-webkit-scrollbar { display: none; } .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; } /* Auto-Margins als Zentrier-Fallback (Audit A-7.1b / A-7.1b-Port DE 2026-08-12). NICHT ENTFERNEN und nicht mit der Fallback-Zeile oben "aufraeumen" - die beiden gehoeren zusammen. Auf Engines ohne `safe`-Keyword (WebKit/Safari, Chrome < 115) gewinnt oben die `flex-start`-Fallbackzeile; dort stuende die Leiste auch dann linksbuendig, wenn alle Pills in eine Zeile passen. (Der Deklarationstext wird hier bewusst NICHT woertlich zitiert, damit Zaehl-Sweeps ueber die Fallbackzeile eindeutig bleiben.) Auto-Margins zentrieren genau in diesem Fall und kollabieren bei Overflow auf 0 - die K6-Wirkung (linke Pills per scrollLeft erreichbar) bleibt damit erhalten. Live gemessen 2026-08-12 (Chromium 151, dpr 1, Alt-Engine simuliert per erzwungenem flex-start): bei 1200px Offset der ersten Pill 8,00px -> 45,52px; bei Overflow (800/640/375px) computed margin exakt 0px und erste Pill erreichbar. Sweep 1260->1100px in 5px-Schritten: Kipppunkt bei ~1135px - oberhalb zentriert (margin > 0), unterhalb margin exakt 0, erste Pill in jeder Stufe erreichbar. In modernen Engines unveraendert bis auf 1/64px - und das nur in Chromium, Firefox und WebKit messen 0,000px: `center` legt die ungerade Rest-LayoutUnit rechts ab, die Auto-Margins links - sichtbar nur als Antialiasing-Nuance, `gap` und Snap-Punkte bleiben identisch. `: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; } /* Drag-to-scroll (nur Maus) -- Touch-Geraete behalten natives Momentum-Scrolling */ @media (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; } } .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; } /* Anlagebetrag-Toggle: interner Scroller analog Laufzeit-Nav. Verhindert horizontalen Dokument-Overflow auf schmalen Viewports (z.B. 390px): die drei nicht-umbrechenden Stufen-Buttons scrollen intern, statt das Dokument zu weiten. min-width:0 gibt dem Flex-Kind frei, unter die Inhaltsbreite zu schrumpfen (sonst erzwingen die nowrap-Buttons die volle Min-Content-Breite). */ .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-scroll-wrapper { min-width: 0; } /* "Anlagebetrag"-Label + Band durchgaengig linksbuendig (Label buendig zum Band-Anfang in ALLEN Groessen): align-items:stretch hebt die geteilte Mobile-Regel `.filter-group{align-items:center}` auf, sodass der Band-Wrapper die filter-group fuellt statt zentriert/eingerueckt zu werden, wenn die fg breiter als das Band ist (z.B. ~700px, Breakpoint mit umgebrochenem Ausland-Toggle). min-width:0 + interner Scroll des Wrappers bleibt erhalten (kein Dokument-Overflow auf sehr schmalen Viewports). text-align:left rueckt den Label-Text linksbuendig. Ausland-balken-toggle (.ausland-filter-group) ausgenommen (Label+Toggle zentriert gewollt). Cross-Produkt-Sync 2026-06-28 (Folge-Politur). */ .vergleich-dashboard .filter-group:not(.ausland-filter-group) { align-items: stretch; } .vergleich-dashboard .filter-group:not(.ausland-filter-group) .filter-label { text-align: left; } .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-group { flex-wrap: nowrap; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; } .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-group::-webkit-scrollbar { display: none; } .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-btn { flex-shrink: 0; scroll-snap-align: center; white-space: nowrap; /* Mehr horizontales Padding als die min.css-Basis (mobil nur 4-6px), damit die Stufen-Texte im Scroller nicht ineinanderlaufen. */ padding-left: var(--space-md); padding-right: var(--space-md); } @media (hover: hover) and (pointer: fine) { .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-group { cursor: grab; } .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-group.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-group.is-dragging .toggle-btn { pointer-events: none; } } .toggle-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); } .toggle-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); } .toggle-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); } .toggle-scroll-wrapper.scroll-start.scroll-end { -webkit-mask-image: none; mask-image: none; } /* Responsive: Tablet / schmaler Desktop (Touch-Targets bis inkl. iPad Air/Pro Hochformat 820/834px) */ @media (max-width: 52em) { .vergleich-dashboard .expand-btn { width: 2.75rem; height: 2.75rem; } .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; } .vergleich-dashboard .sort-buttons { justify-content: flex-end; } .vergleich-dashboard .filter-section .filter-group:not(.ausland-filter-group) { max-width: 34em; } .vergleich-dashboard .filter-section .filter-group:not(.ausland-filter-group) .toggle-btn { white-space: nowrap; } } /* ════════════════════════════════════════════════════════════ Bar-Indikator-Toggle (Auslandsanlagen) — ersetzt die fruehere Slider-Switch-Darstellung. Sitzt direkt in der .filter-section. Masse px->em (1em=16px); nur font-size, border-radius-Hairline und SVG-Dimensionen bleiben px. Fuellung laeuft 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; } /* 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 */ 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 dem Toggle-Band, optisch wie der Abstand zwischen Laufzeit- und Anlagebetrag-Band (ca. --space-lg). */ @media (max-width: 48em) { .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; } } /* Responsive: Mobile schmal (Touch-Targets + Umbruch-Strategie) */ @media (max-width: 38em) { /* Zweizeiliger Sort-Pill (Cross-View 2026-06-26): groessere Touch-Flaeche, einheitlich mit Tagesgeld/Girokonto. Richtung (`.sort-richtung`) bricht im Inline-Wrapper (.sort-kurz bzw. .sort-label) auf Zeile 2 um. */ .vergleich-dashboard .sort-btn .sort-richtung { display: block; } .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; } /* 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); } } /* Sortierbutton-Touchgroesse bis 48em (Cross-View 2026-06-26b): aus 38em-Block ausgelagert, Rollout des Tagesgeld-Patches */ @media (max-width: 48em) { .vergleich-dashboard .sort-btn { font-size: 0.75rem; line-height: 1.2; text-align: center; } } /* ── 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 { 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; } /* Chart-Icon in Detail-Tabs: Gruen statt globales Neongelb (Fancybox-Links via .iframe-Wrapper) */ .merkmal-wert .iframe { display: block; text-align: right; margin-top: 4px; } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout): Akzent-Texte #4cb5a0 (2,2:1 auf Seitenblau) -> Smaragdgruen #1FD99B (2,99:1); Hover-/Fokus- Stand der Akzentfamilie einheitlich #8FF6D5 (Politur 2026-06-12b). */ .merkmal-wert .iframe .icon { position: relative; margin-left: 0; color: #A9F6DB; /* Kontrast-Politur 2026-06-12 (Schwester-Rollout) */ } .merkmal-wert a.iframe:hover .icon { color: #DFFDF2; /* Kontrast-Politur 2026-06-12 (Schwester-Rollout) */ } /* Geschenk-Icon Neukundenaktion (cardgift-g.svg): wie Tagesgeld-Schwester — +10% ggue. Site-Default 2.7em, Hover haelt Tuerkis statt Site-Default-Gelb. */ .vergleich-dashboard a.cardgifta img { width: 2.97em; } .vergleich-dashboard a.cardgifta:hover img { filter: brightness(1.12); } #hilfe .icon { color: #A9F6DB; } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout) */ #hilfe a:hover .icon { color: #DFFDF2; } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout) */ /* --- Diagramm-Glyphe im #hilfe: eigenes Inline-SVG "Gebirgskette" (Verdrahtung 2026-07-18) --- Fontello-icon-chart-area rendert hier verschoben/uebergross (unscoped Fremd-Styles der zentralen .icon-Regel: font-size:3em, position:absolute, margin-left:-1.6em). Das SVG erbt currentColor, alle #hilfe-Farbregeln oben (Ruhe/Hover) greifen unveraendert. Live vermessen (Liste+Tabelle+Seitenhilfe, 1920/1280/1024/375): inline-block + vertical-align:middle richtet die Glyphe an der line-box-Mitte der Fontello-Nachbarn aus (Mittellinien-Abweichung <=1.9px ueber alle Regime; die Diagrammseiten-Referenz mit display:block versagte hier mit 5.2px bei 1280). Das gescopte a[href^='diagramm']{display:block;text-align:center} zentriert die in-flow- Glyphe im li, OHNE die absolut positionierten Fontello-Nachbarn zu verschieben. */ #hilfe li a[href^='diagramm'] { display: block; text-align: center; } /* position MUSS relative sein, nicht static: style.css vergroessert die Tap-Targets mit "a > .icon::after { position:absolute; inset:-5px }". Bei static faellt der Bezugsrahmen dieses ::after auf einen Vorfahren zurueck — die unsichtbare Trefferflaeche wird ~330px breit und verdeckt die Nachbar-Icons: oberhalb 72em sind Tabellen- und Listen-Icon dann nicht mehr klickbar, ohne dass man etwas sieht (live gemessen 18.07.2026 auf AT und DE). relative behaelt die Position im Fluss und stellt den Bezugsrahmen wieder her. Beim Portieren nicht auf static zuruecksetzen. */ /* Vertikal-Politur 2026-07-18: symmetrischer top-Nudge zieht den Link-Zustand (hier) UND den current-Zustand auf der Diagrammseite auf die Mitte ihrer frueheren Positionen (der Link lag ~1.5px @Basis / ~3.8px @<=88em zu tief, die Diagrammseite spiegelbildlich hoch — Gegenwert im Diagramm-Core +1.5px / +3.8px). <=72em: beide nativ schon deckungsgleich, top:0 ueberschreibt dort nur die geerbten 88em-Werte. Live gemessen |A-B| <= 1px ueber 1920/1280/1024/375 (max 0.92px; <=72em nativ), beide nahe der Alt-Mitte. */ #hilfe .zg-view-icon { display: inline-block; position: relative; margin: 0; width: 1.3em; line-height: inherit; vertical-align: middle; font-size: 1.85em; top: -1.5px; } #hilfe .zg-view-icon svg { width: 1.3em; height: 0.91em; vertical-align: middle; display: inline-block; } @media (max-width: 88em) { #hilfe .zg-view-icon { font-size: 1.3em; top: -3.8px; } } @media (max-width: 72em) { #hilfe .zg-view-icon { font-size: 1.2em; top: 0; } } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout): Die Footer-Link-Farben (Ruhe #1FD99B / Hover #8FF6D5) sind seit 2026-06-12b ZENTRAL in vergleich.min.css definiert (`.vergleich-dashboard .footer-line a` bzw. `a:hover`). Die frueheren Core-Overrides (.vergleich-footer a:link/ :visited/:hover mit #4cb5a0/accent-light) sind entfernt. Bei min.css-Aenderungen den ?v=-Parameter am oben bumpen (v=9). */ /* Tooltip am Zinsbalken — erlaeutert, dass der Balken den Zins relativ zum besten Zins der aktuellen Laufzeit zeigt. data-tooltip-Inhalt wird per ::after-Pseudo-Element angezeigt. Sichtbar auf :hover und :focus, damit sowohl Maus- als auch Tastaturnutzer den Hinweis bekommen. */ .vergleich-dashboard .zins-balken-container { position: relative; cursor: help; overflow: visible; /* ueberschreibt overflow:hidden aus vergleich.min.css, damit der Tooltip-::after sichtbar bleibt; .zins-balken behaelt eigenen border-radius, die abgerundete Optik bleibt erhalten */ } /* Unsichtbare Hover-Zone um den 4px hohen Balken — vergroessert die Trefferflaeche fuer Tooltip-Trigger, ohne den Balken visuell zu veraendern. */ .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, das den nach unten ragenden Tooltip-::after clippt. Live-Audit (18 Karten) ergab 0 Children, die ueber die Kartengrenzen ragen — overflow:visible ist kollateralfrei. Border und Background liegen auf der Karte selbst, border-radius bleibt intakt. FLIP-Animation und ranking-race.js-DOM-Tausch werden nicht beruehrt. position+z-index auf hover/focus-within: backdrop-filter:blur(20px) der Karte erzeugt einen eigenen Stacking Context — ohne hoeheren z-index der gehoverten Karte ueberlagert die nachfolgende Karte (DOM-Order) den nach unten ragenden Tooltip. */ .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; } } /* Nominalzins-Hinweis unter dem Zins-Display — nur im Vergleichswert-Modus gerendert. Die Zins-Spalte des .produkt-header-Grids ist `auto`-breit; ohne max-width wuerde die einzeilige Hinweiszeile die Spalte aufziehen und die Anbieter-Spalte zusammendruecken. Erbt text-align: right von .produkt-zins. */ /* VRT-Nacharbeit B (2026-07-31): font-size von 0.7em auf 0.6875rem. Die em-Kaskade rechnete gegen die Karten-Schrift und ergab auf 375px nur 8,96 px — zu klein fuer die Kernaussage der Zeile. rem macht daraus 11 px auf allen Breiten (Desktop vorher 10,5 px, also nahezu unveraendert). max-width wandert mit auf rem: em haette sich an die groessere font-size gekoppelt und die Spalte auf Mobile um ~18 px aufgezogen. Die neuen Werte halten die bisherige Spaltenbreite (Desktop 7.25rem = 116 px gegen vorher 115,5 px; Mobile 5.25rem = 84 px gegen vorher 80,6 px). Umbruch geprueft: das laengste Wort "Zinsgutschrift" misst bei 11 px rund 74 px und passt damit auch in die Mobile-Breite. */ .vergleich-dashboard .zins-nominal-hinweis { margin-top: 0.3em; max-width: 7.25rem; margin-left: auto; font-size: 0.6875rem; line-height: 1.35; color: var(--text-muted, rgba(255,255,255,0.5)); } @media (max-width: 48em) { .vergleich-dashboard .zins-nominal-hinweis { max-width: 5.25rem; } } #vergleich.kontrast-hell .vergleich-dashboard .zins-nominal-hinweis { color: #00528D; } /* Tooltip am Sortierbutton "Vergleichswert" — erklaert, was der Modus tut. Gleiches data-tooltip/::after-Muster wie der Zinsbalken-Tooltip oben (references/zinsbalken-tooltip.md): reines CSS, kein JS, kein natives title. Das Attribut kommt mit jedem Server-Render mit und uebersteht damit sowohl den Clone-and-Replace der Sort-Buttons (kloneUndBinde in festgeld-ranking-race.js) als auch den AJAX-DOM-Tausch. Attribut- Selektor statt eigener Klasse: nur der Vergleichswert-Button traegt data-tooltip, Anbieter und Zinssatz bleiben bewusst ohne. */ .vergleich-dashboard .sort-btn[data-tooltip], .vergleich-dashboard .sort-tooltip-btn { position: relative; } .vergleich-dashboard .sort-btn[data-tooltip]::after, .vergleich-dashboard .sort-tooltip-btn::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 0.5em); right: 0; width: max-content; max-width: 22em; padding: 0.5em 0.75em; background: rgba(15, 20, 30, 0.95); color: #fff; /* font-weight zuruecksetzen: .sort-btn.active erbt sonst 700 in den Tooltip. */ font-weight: 400; /* rem statt em (Angleichung 2026-07-31): em rechnete gegen die .sort-btn-Schrift (--text-xs = 11px) und ergab winzige 8.25px, waehrend die Tabellen-Schwester 0.75rem = 12px zeigt. Mit rem rendern beide Views identisch — und weil padding, max-width und border-radius em-basiert sind, skalieren sie automatisch mit und treffen dieselben Pixelwerte wie in der Tabelle (max-width 22em bei 12px = 264px). box-shadow ebenfalls auf die em-Schreibweise der Tabelle gebracht. */ font-size: 0.75rem; line-height: 1.4; border-radius: 0.375em; box-shadow: 0 0.25em 0.75em 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 .sort-btn[data-tooltip]:hover::after, .vergleich-dashboard .sort-btn[data-tooltip]:focus::after, .vergleich-dashboard .sort-btn[data-tooltip]:focus-visible::after { opacity: 1; transform: translateY(0); } /* Stacking-Fix analog zum Zinsbalken: die nachfolgenden .produkt-karte haben durch backdrop-filter einen eigenen Stacking Context und legen sich sonst ueber den nach unten ragenden Tooltip — die gehoverte Karte sogar mit z-index: 1000 (siehe Block oben). Der z-index sitzt am Button selbst (position: relative), nicht an .results-header; .produkt-karte und Button stapeln im selben Kontext. */ .vergleich-dashboard .sort-btn[data-tooltip]:hover, .vergleich-dashboard .sort-btn[data-tooltip]:focus, .vergleich-dashboard .sort-btn[data-tooltip]:focus-visible, .vergleich-dashboard .sort-tooltip-btn.is-tooltip-open, .vergleich-dashboard .sort-tooltip-btn:focus, .vergleich-dashboard .sort-tooltip-btn:focus-visible { z-index: 1001; } /* ⓘ-Trigger fuer Touch. Default unsichtbar — nur der (hover: none)-Block weiter unten blendet ihn ein, Desktop bleibt damit unveraendert. Sichtbar bleibt das Glyph klein; die Trefferflaeche vergroessert ein unsichtbares ::before (Bestandsmuster, siehe Zinsbalken-Hover-Zone) — padding wuerde das Glyph mitvergroessern. Der Slop waechst bewusst asymmetrisch nach oben/unten/rechts: nach links liegt der Vergleichswert-Button, dort wuerde eine breite Zone Sortier-Taps abfangen. */ .vergleich-dashboard .sort-tooltip-btn { display: none; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--text-secondary, rgba(255,255,255,0.7)); font-size: 1.5em; line-height: 1; cursor: pointer; } .vergleich-dashboard .sort-tooltip-btn::before { content: ''; position: absolute; top: -0.55em; bottom: -0.55em; left: -0.15em; right: -0.55em; } .vergleich-dashboard .sort-tooltip-btn.is-tooltip-open { color: var(--accent, #A9F6DB); } .vergleich-dashboard .sort-tooltip-btn.is-tooltip-open::after { opacity: 1; transform: translateY(0); } /* Geraete ohne :hover — ⓘ einblenden und den Hover-Tooltip des Sortierbuttons abschalten. Sonst zeigt "sticky hover" nach einem Sortier-Tap beide Tooltips gleichzeitig. Bewusst nur (hover: none) ohne pointer-Zusatz: die Bedingung "Hover funktioniert nicht" ist genau das Kriterium, an dem der Ersatz haengt. */ @media (hover: none) { .vergleich-dashboard .sort-tooltip-btn { display: inline-flex; } .vergleich-dashboard .sort-btn[data-tooltip]::after { content: none; } } @media (max-width: 48em) { .vergleich-dashboard .sort-btn[data-tooltip]::after, .vergleich-dashboard .sort-tooltip-btn::after { max-width: 16em; font-size: 0.7rem; } } /* ── 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 / K6-Port DE 2026-08-12): 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 — Ebene C (produkt-/komponentenspezifische Overrides) ========== Toggle-Basis, Ebene A (weisse Karte, h1, #hilfe-Kette Desktop+Mobile) und Ebene B (.vergleich-dashboard-Variablen-Remap) liegen ZENTRAL in vergleich.min.css?v=18 (kontrast-hell-kern) — hier NUR die hartkodierten Farben, die der zentrale Kern nicht erreicht. Port aus der Festgeld-AT-Listen-Schwester (2026-07-10). Aktiv nur bei #vergleich.kontrast-hell, alle Overrides per Spezifitaet (ID+Klasse) — NIE !important, em-Konvention, keine Geometrie-/transform-Aenderung (FLIP unberuehrt). Akzente konsequent Blau statt Tuerkis/Gruen. Bewusste Ausnahme: die Europakarte (.ek-*, dunkle Glas-Buehne) bleibt als Marken-Element dunkel. */ /* -- Einstellungsleiste: Laufzeit-Pills / Anlagebetrag-Toggle. Aktive Zustaende explizit blau fuellen (Schrift weiss), Beschriftungen nach #003A66. -- */ #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 .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; } #vergleich.kontrast-hell .vergleich-dashboard .filter-label, #vergleich.kontrast-hell .vergleich-dashboard .filter-column-title { color: #003A66; } /* -- Europakarte-Buehne (Laenderfilter): bewusste dunkle Marken-Ausnahme (Anwender-Entscheidung — nicht umfaerben). Schrift-Variablen lokal auf Dunkelmodus- Werte zuruecksetzen und die Beschriftungen wieder aufhellen (Quellreihenfolge schlaegt die gleichspezifische filter-label-Hell-Regel oben). -- */ #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); } /* -- Auslandsanlagen-Balken-Toggle (Festgeld-spezifisch, Core-Inline: helle Bars/State/Arrow -> auf Weiss unsichtbar). Blaue Umfaerbung; gefuellte Bars solide, Ruhe-Bars faint-blau (klare Fuell-Hierarchie auf Weiss). -- */ #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle-state { color: #00528D; } #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle-arrow { color: #00528D; } #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle-bars-dash .balken-toggle-bar { background: rgba(0,82,141,0.30); } #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle[data-state="off"] .balken-toggle-bars-dash .balken-toggle-bar:nth-child(-n+8), #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle[data-state="on"] .balken-toggle-bars-dash .balken-toggle-bar { background: #0070C0; } /* -- "weitere Filter"-Button (Floating): dunkelblau + Tuerkis-Ecken -> Weiss + Blau -- */ #vergleich.kontrast-hell .anpassen-filter-btn { background: #fff; 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 (Core-Inline: dunkelblau) -> weisses Panel, blauer Rahmen. Titel/Hints/Checkbox-Text nutzen var(--text-secondary) (Ebene B deckt sie ab); nur die hartkodierten Weiss-Werte brauchen Overrides. Checkbox accent-color:#00528d ist bereits blau (kein Override). -- */ #vergleich.kontrast-hell .anpassen-panel { background: #fff; 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 .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, Info-Button, Expanded-Rahmen -- */ #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 .info-btn { background: rgba(0,82,141,0.08); } #vergleich.kontrast-hell .vergleich-dashboard a.produkt-anbieter:hover { text-decoration-color: #00528D; } /* -- Zins-Balken: Fuellung ist var(--accent)->var(--accent-light) (Ebene B: blau). Nur die Track-Wanne (min.css: rgba(255,255,255,0.1)) auf Weiss faint-blau setzen. -- */ #vergleich.kontrast-hell .vergleich-dashboard .zins-balken-container { background: rgba(0,82,141,0.10); } /* -- Chart-/Info-Link-Icons in Merkmal-Zellen (Core-Inline: Tuerkis) -> Blau -- */ #vergleich.kontrast-hell .merkmal-wert .iframe .icon { color: #00528D; } #vergleich.kontrast-hell .merkmal-wert a.iframe:hover .icon { color: #0070C0; } /* -- Geschenk-Icon (cardgift-g.svg, Neukundenaktion): Tuerkis -> Marken-Hellblau (Filterkette wie AT-Schwester; Groesse 2.97em bleibt aus dem Basis-Stil). -- */ #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" (var(--accent) + var(--primary-darker) -> Dunkel-auf-Dunkel): explizit blaue Fuellung, weisse Schrift; Pfeil-Chip invertiert. -- */ #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: #fff; color: #00528D; } /* -- Footer-Links (vergleich.min.css: hartkodiert Tuerkis) -> Blau -- */ #vergleich.kontrast-hell .vergleich-dashboard .footer-line a { color: #00528D; } #vergleich.kontrast-hell .vergleich-dashboard .footer-line a:hover { color: #0070C0; } /* === Ende Hochkontrast-Hell-Modus Ebene C === */