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