a.produkt-badge { /* A4 (Audit 2026-08, F9): Kasten des

selbst, weil <style> dort nur als Kind von <head> HTML-konform waere; im Body meldet der Validator es an (ohne Rendering-Folge). Sie kostet nichts, wenn JS laeuft — dann rendert der Browser den <noscript>-Inhalt gar nicht erst. Die Farb-Variablen sind im Kontrast-Hell-Modus umdefiniert und serverseitig gesetzt, der Kasten passt sich also auch ohne JS beiden Modi an. Fallbacks fuer den Fall, dass der Block je ausserhalb des Dashboard-Scopes landet. rem statt em: die em-Kaskade rechnete gegen die Container-Schrift. */ .vergleich-noscript-hinweis { margin: 0 0 1em; padding: 0.75em 1em; border: 1px solid var(--border, rgba(0,0,0,0.2)); border-radius: 0.4em; background: var(--bg-card, rgba(0,0,0,0.04)); color: var(--text-secondary, inherit); font-size: 0.875rem; line-height: 1.5; } 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 / Phase K6 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; folgt dem einzigen Bestands-Vorbild `min-width: 72.01em` weiter unten. `.01em` statt `.0625em`, weil letzteres exakt 801px waere und damit eine volle Pixel-Breite unversorgt liesse. */ @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; } /* 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 .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 / Phase K6 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 / Phase A-7.1b 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 = <span>, uebrige = <a>) 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; } } /* 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, .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; } /* 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) */ /* 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 <link> oben bumpen. */ /* Anpassungs-Overlay (weitere Filter) — Floating-Icon-Button. Politur 2026-05-20: Frueherer zentrierter Text-Link "weitere Filter ▼" durch einen Floating-Icon-Button am rechten unteren Rand der `.filter-section` ersetzt — konsistent zur Schwester-Tabellenansicht (Politur 2026-05-18) und zur Listenansicht Brokerage AT (Politur 2026-05-18d). Badge zaehlt `count($aktiveFilterHinweise)`, wird nur bei > 0 gerendert. Die alten `.anpassen-toggle/.anpassen-link/.arrow`-Regeln sind damit obsolet und entfernt. */ .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.045em; padding-bottom: 0.5em; margin-bottom: 0.75em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* Politur 2026-05-21: Mobile Full-Bleed gehoert NACH der Basis-Definition, sonst wird der Override per CSS-Source-Order von der Basis ueberschrieben (gilt nur fuer dieses File — Basis-Def sitzt hier untypisch spaet bei Z. ~392). */ @media (max-width: 38em) { .anpassen-panel { width: 95vw; max-width: none; margin: -3em 0 1em calc(50% - 47.5vw); } } .panel-close-btn { position: absolute; top: 0; right: 0; width: 1.85em; height: 1.85em; padding: 0; background: rgba(48, 55, 61, 0.85); color: rgba(255, 255, 255, 0.85); border: none; border-top-right-radius: 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; } /* 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. font-size bewusst in rem, nicht em: die em-Kaskade rechnet gegen die Karten-Schrift und ergaebe auf 375px nur rund 9 px (DE-VRT-Befund B). 0.6875rem = 11 px auf allen Breiten. max-width wandert mit auf rem, damit sie sich nicht an die groessere font-size koppelt und die Spalte auf Mobile aufzieht. */ .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: em rechnet gegen die .sort-btn-Schrift (--text-xs = 11px) und ergaebe winzige 8.25px. Mit rem rendert der Tooltip identisch zur Tabellen-Schwester (0.75rem = 12px); padding, max-width und border-radius bleiben em-basiert und skalieren automatisch mit. */ 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 / Phase K6 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 ============================================ Port aus den Girokonto-AT-Cores (2026-07-09), an das Festgeld-Listen-DOM angepasst. Aktiv nur bei #vergleich.kontrast-hell. ALLE Overrides per Spezifitaet ueber den ID+Klasse-Praefix (schlaegt vergleich.min.css und den Core-Inline-Block) — NIE !important, em-Konvention, keine Geometrie-/transform-Aenderung (FLIP unberuehrt). Akzente konsequent Blau statt Tuerkis/Gruen. Anders als in der Tabelle gibt es KEIN blaues Logo-Band: der Anbietername steht als dunkle Schrift auf der weissen Karte (var(--text-primary) -> #111). Bewusste Ausnahme: die Europakarte (.ek-*, dunkle Glas-Buehne) bleibt als Marken-Element unangetastet. --- Toggle-Button (in BEIDEN Modi sichtbar; Basis = Dunkel-Standardansicht). Die .kontrast-zeile ist ein hoehenloser Anker AUSSERHALB der Partial-Swap-Zone zwischen #hilfe und Dashboard; der Button liegt absolut auf der "Laufzeit"- Label-Zeile (rechtsbuendig). Positionswerte 1:1 aus Girokonto — VRT-Nachmessung. --- */ #vergleich .kontrast-zeile { display: block; position: relative; height: 0; margin: 0; overflow: visible; z-index: 1; } #vergleich .kontrast-toggle { position: absolute; right: 0.85em; top: 2.17em; /* VRT 2026-07-09: +3px, Button-Mitte exakt auf Label-Mitte */ display: inline-flex; align-items: center; padding: 0.5em 0.95em; font-size: 0.85rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; color: #e8f2fb; background: rgba(9,87,143,0.62); box-shadow: 0 0.125em 0.5em rgba(0,0,0,0.25); border: 0; border-radius: 0; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background 150ms ease, color 150ms ease; } #vergleich .kontrast-toggle:hover { background: rgba(13,110,175,0.96); color: #fff; } #vergleich .kontrast-toggle:focus-visible { outline: 2px solid #DFFDF2; outline-offset: 0.125em; } #vergleich .kontrast-toggle[aria-pressed="true"] { background: rgba(9,87,143,0.62); color: #fff; } #vergleich .kontrast-toggle .kontrast-icon { font-size: 1.05em; line-height: 1; } #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; } @media (max-width: 38em) { #vergleich .kontrast-toggle { top: 0.4em; right: 0.6em; } } /* ===== Ebene A — Flaeche (weisse Karte auf blauem Seitenhintergrund) ===== */ #vergleich.kontrast-hell { background: #fff; 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; } } /* Toggle-Button im Hell-Modus */ #vergleich.kontrast-hell .kontrast-toggle { color: #00528D; background: #fff; 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: #fff; 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. Deckt .merkmal-label/.merkmal-wert, .eingrenzungsfilter-title/-hint, .filter-checkbox, den .zins-balken-Gradient u.a. automatisch ab (alle var(--*)-basiert). ===== */ #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; background: #fff; } /* ===== Ebene C — hartkodierte Farben uebersteuern ===== */ /* -- Einstellungsleiste: Laufzeit-Pills / Anlagebetrag-Toggle. Aktive Zustaende nutzen background:var(--text-primary) -> im Hell-Modus #111 (dunkel) -> explizit blau fuellen, Schrift weiss. Beschriftungen (Core-Inline hart rgba(255,255,255,0.85)) 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 2026-07-09 — nicht umfaerben). Die Buehne ist ein dunkles Navy-Gradient-Panel; Ebene-B-Variablen + die generische filter-label- Hell-Regel oben wuerden die hellen Karten-Beschriftungen darauf ins Dunkle kippen. Darum die Schrift-Variablen lokal auf Dunkelmodus-Werte zuruecksetzen und die Beschriftungen wieder aufhellen (Quellreihenfolge schlaegt die gleichspezifische Regel oben). Land-/Marker-/Preset-/Spalten-Farben bleiben komplett 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); } /* -- Auslandsanlagen-Balken-Toggle (Festgeld-spezifisch, Core-Inline: helle Bars #DCEBF8, State/Arrow #F1F6FC/#DCEBF8 -> auf Weiss unsichtbar). Blaue Umfaerbung. -- */ #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; } /* Fokus-Ring der Laufzeit-Pills und des CTA-Links im Hell-Modus: der Akzent #A9F6DB faellt auf den hellen Leisten auf 1,13:1 (Pill) bzw. 1,14:1 (CTA-Umgebung), Blau #0070C0 erreicht 4,67:1 bzw. 4,71:1 (live gemessen 2026-08-06). Schwester-Regel der Tabellenansicht. */ #vergleich.kontrast-hell .vergleich-dashboard .laufzeit-pill:focus-visible, #vergleich.kontrast-hell .vergleich-dashboard .anbieter-link: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 (.filter-panel-titel Farbe+Border, .panel-close-btn Grau) brauchen Overrides. Checkboxen: native accent-color:#00528d. -- */ #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 (hartkodierte Weiss-/ Tuerkis-Werte in vergleich.min.css). Expanded-Rang nutzt var(--accent)+var(--primary-darker) -> Dunkel-auf-Dunkel -> explizit blau/weiss. -- */ #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 (relativer Zins je Karte): 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, damit sie sichtbar bleibt. -- */ #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. -- */ #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; } /* -- Mobile (<=38em, synchron zur Tabelle) -- */ @media (max-width: 38em) { /* Vollbreites weisses Band statt abgegrenzter Karte (box-shadow-Kopien 50vw versetzt, layout-neutral). */ #vergleich.kontrast-hell { border-radius: 0; box-shadow: 50vw 0 0 #fff, -50vw 0 0 #fff; } /* #hilfe zieht style.css mobil in das blaue Kopf-Band (#09578f) -> Basis-Akzentfarben. */ #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 === */ /* Diagramm-Ansichts-Icon (Zinsgebirge-Verdrahtung, AT-Portierung 2026-07-18): eigenes Inline-SVG "Gebirgskette" statt Fontello-icon-chart-area (das traegt unscoped Fremd-Styles der zentralen .icon-Regel: font-size:3em, position:absolute, margin-left:-1.6em). Das SVG erbt currentColor, die #hilfe-Farbregeln (Ruhe/Hover) greifen unveraendert. Gemessene DE-Verdrahtungsloesung: inline-block + vertical-align:middle richtet die Glyphe an der line-box-Mitte der Fontello-Nachbarn aus (Mittellinien-Abweichung <=2px; die Diagrammseiten-Referenz mit display:block/margin:0 auto versagte im Link-Kontext 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 auf einen Vorfahren zurueck — die unsichtbare Trefferflaeche wird ~330px breit und verdeckt die Nachbar-Icons (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 setzen. */ /* 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; } }