/* =================================================================== KONSISTENZ-ABSCHNITT - kopierte Inline-Style-Bloecke aus dem Listen-Core (festgeld-vergleich-core.inc.php) fuer gerenderte Paritaet der Einstellungsleiste / des "weitere Filter"-Panels / des #hilfe-Umschalters / des Hochkontrast-Hell-Modus. Herkunft je Block als Z.-Bereich vermerkt. Bewusst NICHT uebernommen: listen-spezifische Bloecke (Produktkarten, Zins-Balken, Detail-Tabs, Expand-/Sort-Buttons, Neukunden-Icon, CTA-Karte). Drift-Risiko dokumentiert; gerenderte Paritaet sichert der cross-view-konsistenz-pruefer. em/rem, kein px (wie Quelle). =================================================================== */ /* --- aus Z.184-315: Checkbox-/Filter-Basis, Overlay/Panel, Panel-Close, Laufzeit-Pill-/Filter-Kontrastpolitur, results-header --- */ /* Sitz-Filter Grid */ .checkbox-group-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; } /* Sitz-Zeile: nebeneinander ab 50.01em, untereinander darunter */ /* 50.01em statt 50em (Audit A-7.2 / K6-Port DE 2026-08-12): zusammen mit dem `max-width: 50em`-Block darunter traf exakt 800px BEIDE Blocks — Panel gestapelt UND mit Desktop-Links-Border. Der Offset sitzt bewusst auf der min-width-Seite, damit 800px zur schmalen Variante gehoert. `.01em` statt `.0625em`, weil letzteres exakt 801px waere und damit eine volle Pixel-Breite unversorgt liesse; so bleibt die Luecke bei 0,16px und ist mit ganzzahligen Viewports nicht erreichbar. Aus AT/K6 portiert — das dort zitierte Bestands-Vorbild `min-width: 72.01em` gibt es in den DE-Cores nicht. */ @media (min-width: 50.01em) { .filter-row-separator[style] .filter-column-separator { border-top: none; padding-top: 0; margin-top: 0; border-left: 1px solid var(--border); padding-left: var(--space-lg); margin-left: var(--space-md); } } @media (max-width: 50em) { .filter-row-separator[style] { grid-template-columns: 1fr !important; } } /* Filter-Checkbox Basis (Panel-Dichte-Kompromiss: 2.25rem statt 2.75rem wegen Laender-Filter) */ .filter-checkbox { display: flex; align-items: center; gap: 0.5em; padding: 0.375em 0; min-height: 2.25rem; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary, #aab); transition: color 150ms ease; line-height: 1.35; } .filter-checkbox:hover { color: var(--text-primary, #fff); } .filter-checkbox input[type="checkbox"] { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; accent-color: #00528d; cursor: pointer; } .filter-checkbox input[type="checkbox"]:checked + span { color: var(--text-primary, #fff); font-weight: 600; } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout): Overrides fuer Shared- Komponenten aus vergleich.min.css (darf nicht modifiziert werden -> Spezifitaets-Override hier im Core). Inaktive Laufzeit-Pills text-secondary (3,95:1) -> 0.85 (5,04:1); Filter-Beschriftungen ("ANLAGEBETRAG" etc.) text-muted (2,51:1) -> 0.85 (4,64:1). */ .vergleich-dashboard .laufzeit-pill { color: rgba(255,255,255,0.85); } .vergleich-dashboard .laufzeit-pill:hover { color: var(--text-primary, #fff); } /* Hover-Aufhellung aus min.css wuerde sonst per Source-Order ueberstimmt */ .vergleich-dashboard .laufzeit-pill.active { color: var(--primary-darker, #004578); } .vergleich-dashboard .filter-label, .vergleich-dashboard .filter-column-title { color: rgba(255,255,255,0.85); } .vergleich-dashboard .filter-section { position: relative; margin-top: -1.1em; margin-bottom: 5em; overflow: visible; } .anpassen-overlay { display: none; } .anpassen-overlay.open { display: block; } .anpassen-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 100; opacity: 0; transition: opacity 125ms ease; } .anpassen-overlay.open .anpassen-backdrop { opacity: 1; } .anpassen-panel { position: relative; z-index: 101; width: 90%; max-width: 60rem; margin: -3em auto 1em; background: rgba(9, 87, 143, 0.92); backdrop-filter: blur(1.25em); -webkit-backdrop-filter: blur(1.25em); border-radius: var(--radius-md, 12px); padding: 1.75em 1.5em 1.25em; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 0.5em 2.5em rgba(0, 0, 0, 0.35), 0 0.125em 0.5em rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255,255,255,0.08); opacity: 0; transform: translateY(-0.75em); transition: opacity 125ms ease, transform 125ms ease; } .anpassen-overlay.open .anpassen-panel { opacity: 1; transform: translateY(0); } .filter-panel-titel { display: block; font-size: 0.7rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 0.5em; margin-bottom: 0.75em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .panel-close-btn { position: absolute; top: 0; right: 0; width: 1.85em; height: 1.85em; padding: 0; background: rgba(48, 55, 61, 0.85); color: rgba(255, 255, 255, 0.85); border: none; border-top-right-radius: var(--radius-md, 12px); border-bottom-left-radius: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 125ms ease, color 125ms ease; z-index: 102; } .panel-close-btn:hover, .panel-close-btn:focus { background: rgba(61, 69, 76, 0.85); color: #fff; outline: none; } .vergleich-dashboard .results-header { flex-wrap: nowrap; } /* --- aus Z.317-419: Laufzeit-Nav-Scroll-Strip + Masken, Anlagebetrag-Toggle-Scroller + Masken --- */ /* Nav-Scroll-Strip (Laufzeit-Pills) — bei Festgeld durchgaengig aktiv (14 Pills passen nicht zuverlaessig in eine Desktop-Zeile). Nav nimmt volle Breite ein, damit der Glasmorphismus-Hintergrund aus vergleich.min.css vollbreit bleibt. Padding wird NICHT ueberschrieben — wir uebernehmen var(--space-sm) = 8px aus vergleich.min.css, damit die Laufzeit-Nav auf Desktop dieselbe Gesamthoehe wie bei Ratenkredit DE erreicht. */ .vergleich-dashboard .laufzeit-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; /* safe center: zentriert auf Desktop wenn alle Pills passen, Fallback auf flex-start bei Overflow (verhindert Center-Overflow-Clipping der ersten Pills) */ /* Fallback-Deklaration zuerst (Audit A-7.1 / K6-Port DE 2026-08-12): Engines ohne das `safe`-Keyword (WebKit/Safari, Chrome < 115) verwerfen die naechste Deklaration komplett und fielen sonst auf das zentrale `center` aus vergleich.min.css zurueck. ACHTUNG: Der Kommentar darueber beschreibt die CSS-Semantik von `safe` selbst — NICHT diesen Deklarations-Fallback fuer Engines ohne `safe`-Support. Beides wird gebraucht. */ justify-content: flex-start; justify-content: safe center; gap: 0.25em; } .vergleich-dashboard .laufzeit-nav::-webkit-scrollbar { display: none; } .vergleich-dashboard .laufzeit-nav .laufzeit-pill { min-height: 2.75em; scroll-snap-align: center; flex-shrink: 0; padding-left: 0.75em; padding-right: 0.75em; } /* Auto-Margins als Zentrier-Fallback (Audit A-7.1b / A-7.1b-Port DE 2026-08-12). NICHT ENTFERNEN und nicht mit der Fallback-Zeile oben "aufraeumen" - die beiden gehoeren zusammen. Auf Engines ohne `safe`-Keyword (WebKit/Safari, Chrome < 115) gewinnt oben die `flex-start`-Fallbackzeile; dort stuende die Leiste auch dann linksbuendig, wenn alle Pills in eine Zeile passen. (Der Deklarationstext wird hier bewusst NICHT woertlich zitiert, damit Zaehl-Sweeps ueber die Fallbackzeile eindeutig bleiben.) Auto-Margins zentrieren genau in diesem Fall und kollabieren bei Overflow auf 0 - die K6-Wirkung (linke Pills per scrollLeft erreichbar) bleibt damit erhalten. Live gemessen 2026-08-12 (Chromium 151, dpr 1, Alt-Engine simuliert per erzwungenem flex-start): bei 1200px Offset der ersten Pill 8,00px -> 45,52px; bei Overflow (800/640/375px) computed margin exakt 0px und erste Pill erreichbar. Sweep 1260->1100px in 5px-Schritten: Kipppunkt bei ~1135px - oberhalb zentriert (margin > 0), unterhalb margin exakt 0, erste Pill in jeder Stufe erreichbar. In modernen Engines unveraendert bis auf 1/64px - und das nur in Chromium, Firefox und WebKit messen 0,000px: `center` legt die ungerade Rest-LayoutUnit rechts ab, die Auto-Margins links - sichtbar nur als Antialiasing-Nuance, `gap` und Snap-Punkte bleiben identisch. `:first-child`/`:last-child` sind zwingend - `:first-of-type` traefe wegen des gemischten Markups (aktive Pill = , uebrige = ) ZWEI Elemente und risse die Leiste auseinander. */ .vergleich-dashboard .laufzeit-nav .laufzeit-pill:first-child { margin-inline-start: auto; } .vergleich-dashboard .laufzeit-nav .laufzeit-pill:last-child { margin-inline-end: auto; } /* Drag-to-scroll (nur Maus) -- Touch-Geraete behalten natives Momentum-Scrolling */ @media (hover: hover) and (pointer: fine) { .vergleich-dashboard .laufzeit-nav { cursor: grab; } .vergleich-dashboard .laufzeit-nav.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } .vergleich-dashboard .laufzeit-nav.is-dragging .laufzeit-pill { pointer-events: none; } } .nav-scroll-wrapper { -webkit-mask-image: linear-gradient(to right, transparent, black 1.5em, black calc(100% - 1.5em), transparent); mask-image: linear-gradient(to right, transparent, black 1.5em, black calc(100% - 1.5em), transparent); } .nav-scroll-wrapper.scroll-start { -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 1.5em), transparent); mask-image: linear-gradient(to right, black, black calc(100% - 1.5em), transparent); } .nav-scroll-wrapper.scroll-end { -webkit-mask-image: linear-gradient(to right, transparent, black 1.5em, black); mask-image: linear-gradient(to right, transparent, black 1.5em, black); } .nav-scroll-wrapper.scroll-start.scroll-end { -webkit-mask-image: none; mask-image: none; } /* Anlagebetrag-Toggle: interner Scroller analog Laufzeit-Nav. Verhindert horizontalen Dokument-Overflow auf schmalen Viewports (z.B. 390px): die drei nicht-umbrechenden Stufen-Buttons scrollen intern, statt das Dokument zu weiten. min-width:0 gibt dem Flex-Kind frei, unter die Inhaltsbreite zu schrumpfen (sonst erzwingen die nowrap-Buttons die volle Min-Content-Breite). */ .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-scroll-wrapper { min-width: 0; } /* "Anlagebetrag"-Label + Band durchgaengig linksbuendig (Label buendig zum Band-Anfang in ALLEN Groessen): align-items:stretch hebt die geteilte Mobile-Regel `.filter-group{align-items:center}` auf, sodass der Band-Wrapper die filter-group fuellt statt zentriert/eingerueckt zu werden, wenn die fg breiter als das Band ist (z.B. ~700px, Breakpoint mit umgebrochenem Ausland-Toggle). min-width:0 + interner Scroll des Wrappers bleibt erhalten (kein Dokument-Overflow auf sehr schmalen Viewports). text-align:left rueckt den Label-Text linksbuendig. Ausland-balken-toggle (.ausland-filter-group) ausgenommen (Label+Toggle zentriert gewollt). Cross-Produkt-Sync 2026-06-28 (Folge-Politur). */ .vergleich-dashboard .filter-group:not(.ausland-filter-group) { align-items: stretch; } .vergleich-dashboard .filter-group:not(.ausland-filter-group) .filter-label { text-align: left; } .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-group { flex-wrap: nowrap; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; } .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-group::-webkit-scrollbar { display: none; } .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-btn { flex-shrink: 0; scroll-snap-align: center; white-space: nowrap; /* Mehr horizontales Padding als die min.css-Basis (mobil nur 4-6px), damit die Stufen-Texte im Scroller nicht ineinanderlaufen. */ padding-left: var(--space-md); padding-right: var(--space-md); } @media (hover: hover) and (pointer: fine) { .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-group { cursor: grab; } .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-group.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } .vergleich-dashboard .filter-group:not(.ausland-filter-group) .toggle-group.is-dragging .toggle-btn { pointer-events: none; } } .toggle-scroll-wrapper { -webkit-mask-image: linear-gradient(to right, transparent, black 1.5em, black calc(100% - 1.5em), transparent); mask-image: linear-gradient(to right, transparent, black 1.5em, black calc(100% - 1.5em), transparent); } .toggle-scroll-wrapper.scroll-start { -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 1.5em), transparent); mask-image: linear-gradient(to right, black, black calc(100% - 1.5em), transparent); } .toggle-scroll-wrapper.scroll-end { -webkit-mask-image: linear-gradient(to right, transparent, black 1.5em, black); mask-image: linear-gradient(to right, transparent, black 1.5em, black); } .toggle-scroll-wrapper.scroll-start.scroll-end { -webkit-mask-image: none; mask-image: none; } /* --- aus Z.437-522: Auslandsanlagen-Balken-Toggle (Zustand, Bars, Pfeil, Tooltip, Responsive, reduced-motion) --- */ /* ════════════════════════════════════════════════════════════ 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; } } /* --- aus Z.583-584: #hilfe-Icon-Farben (Ruhe/Hover) --- */ #hilfe .icon { color: #A9F6DB; } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout) */ #hilfe a:hover .icon { color: #DFFDF2; } /* Kontrast-Politur 2026-06-12 (Schwester-Rollout) */ /* --- Diagramm-Glyphe: eigenes Inline-SVG "Gebirgskette" (Politur 3a 2026-07-17) --- icon-chart-area rendert im #hilfe verschoben/uebergross (unscoped Fremd-Styles in style.css: font-size 2.8em, position:absolute, negative Margins — Zinschart-Einsatz). Das SVG erbt currentColor, alle bestehenden #hilfe-Farbregeln (Ruhe/Hover/current) greifen unveraendert. WICHTIG (Politur 3, Nachbesserung): die generische zentrale Regel `.icon { font-size:3em; position:absolute; margin-left:-1.6em }` (+ left-Offsets in Media-Bloecken) trifft auch unser i.icon — deshalb neutralisiert die Basis-Regel position/margin/left KOMPLETT (position:static ignoriert left) und spiegelt die Groessen-Kaskade der Fontello-Pendants (Basis 1.85em, <=88em 1.3em, <=72em 1.2em). display:block + margin:0 auto + width zentriert die Glyphe in der Zelle (im <=72em-Flex-Regime zentriert die current-Zelle selbst); live vermessen bei 1920/1280/1024/375: Zell-Sitz und Hoehe deckungsgleich mit den Fontello-Nachbarn. */ /* Vertikal-Politur 2026-07-18: symmetrischer top-Nudge (Gegenstueck zum Link-Zustand in den Bestands-Cores) zieht diesen current-Zustand auf die Mitte der frueheren Positionen — +0.5px @Basis / +2.8px @<=88em (der current-Zustand lag spiegelbildlich zu hoch; urspruenglich +1.5/+3.8 auf Mittellinie gemessen, 2026-07-18 auf Franks Sichtkorrektur je 1px hoeher gesetzt), dafuer position:static -> relative. <=72em bleibt nativ (Flex-Regime zentriert selbst, position:static dort neutralisiert das top). */ #hilfe .zg-view-icon { display: block; position: relative; margin: 0 auto; width: 1.3em; line-height: 1; font-size: 1.85em; top: 0.5px; } #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; top: 2.8px; } } @media only screen and (max-width: 72em) { #hilfe .zg-view-icon { font-size: 1.2em; position: static; margin: 0; } } /* --- aus Z.667-751: Europakarte-Sektion (Buehne, Land-/Marker-Zustaende, Presets, Glas-Spalten, Tooltip, Responsive) --- */ /* ── Europakarte (Länderfilter) ── */ /* display:flex (column) ueberschreibt das auto-fit-Grid der zentralen .filter-row — sonst laegen .ek-kopf und .ek-spalten als Grid-Items nebeneinander. */ /* Buehne: eine Nuance dunkler als das mittelblaue Panel (rgba(9,87,143)), aber bewusst NICHT navy-dunkel — der urspruengliche Handelsblatt-Ton war fuer die Seite zu dunkel (Anwender-Feedback 2026-07-07). min-height gibt der Karte (meet, zentriert) Raum, damit sie als Buehne wirkt. Full-Bleed (2026-07-09): margin -1.5em = horizontales Padding der .anpassen-panel — die Buehne laeuft bis an die Panelkante, nur der hell→dunkel→hell-Uebergang bleibt sichtbar; deshalb keine Rundung und keine Seiten-Border. Das horizontale Padding gleicht die 1.5em wieder aus, damit die Inhalte buendig zu den uebrigen Panel-Zeilen stehen. */ .vergleich-dashboard .ek-sektion { position: relative; overflow: hidden; margin-left: -1.5em; margin-right: -1.5em; padding: var(--space-md) calc(var(--space-md) + 1.5em); background: linear-gradient(160deg, rgba(10,48,82,0.88), rgba(14,64,108,0.78)); border: 1px solid var(--border); border-left: 0; border-right: 0; min-height: 27em; display: flex; flex-direction: column; justify-content: center; } .ek-kopf { flex: 0 0 auto; } /* Karte liegt hinter den Spalten; Wrapper faengt keine Klicks, aber die Landflaechen/Marker schon — so klicken freie Flaechen zu den Checkboxen durch. */ .ek-karte-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; } .ek-karte-wrap svg { width: 100%; height: 100%; } .ek-karte-wrap .ek-land, .ek-karte-wrap .ek-marker { pointer-events: auto; } .ek-kopf, .ek-spalten { position: relative; z-index: 1; } /* Die vollbreiten Container fangen sonst Klicks im freien Korridor ab — durchlassen, nur ihre Inhalte (Pills, Zaehler, Glas-Spalten) fangen. */ .ek-kopf, .ek-spalten { pointer-events: none; } .ek-kopf > *, .ek-spalten .filter-column { pointer-events: auto; } /* Karten-Zustaende (Land-Stroke = Buehnenfarbe, wirkt als Laendergrenze) */ .ek-silhouette path { fill: rgba(255,255,255,0.07); } .ek-land { fill: rgba(255,255,255,0.2); stroke: rgba(10,48,82,0.9); stroke-width: .5; cursor: pointer; transition: fill var(--transition-base), filter var(--transition-base); } .ek-land.ek-gewaehlt { fill: var(--primary); filter: drop-shadow(0 0 6px rgba(0,112,192,0.55)); } .ek-land:not(.ek-gesperrt):not(.ek-gewaehlt):hover { fill: rgba(0,112,192,0.45); } .ek-land.ek-gesperrt { fill: rgba(255,255,255,0.02); cursor: default; } .ek-marker { fill: rgba(255,255,255,0.14); stroke: rgba(255,255,255,0.55); stroke-width: .5; cursor: pointer; transition: fill var(--transition-base), filter var(--transition-base); } .ek-marker.ek-gewaehlt { fill: var(--primary); filter: drop-shadow(0 0 6px rgba(0,112,192,0.55)); } .ek-marker:not(.ek-gesperrt):not(.ek-gewaehlt):hover { fill: rgba(0,112,192,0.45); } .ek-marker.ek-gesperrt { fill: rgba(255,255,255,0.05); cursor: default; } /* Sanfter Puls beim Zustandswechsel (JS setzt .ek-pop kurz) */ @keyframes ekPop { 0% { opacity: .55; } 100% { opacity: 1; } } .ek-pop { animation: ekPop 250ms ease; } /* Kopf: nur noch Schnellauswahl + Zaehler. Der Gruppen-Umschalter liegt nicht mehr hier, sondern auf den Glas-Karten selbst (.ek-spalte) — die aktive Karte zeigt, was die Karte gerade darstellt. */ .ek-kopf { display: flex; flex-wrap: wrap; gap: .5em .75em; margin-bottom: .75em; align-items: center; } .ek-presets { display: inline-flex; flex-wrap: wrap; gap: .3em; align-items: center; } .ek-presets-label { color: var(--text-secondary); font-size: .75em; margin-right: .2em; } .ek-preset-btn { cursor: pointer; font: inherit; font-size: .75em; padding: .3em .85em; border-radius: 1.4em; color: rgba(255,255,255,0.85); background: transparent; border: 1px solid rgba(255,255,255,0.3); transition: background var(--transition-base), border-color var(--transition-base); } .ek-preset-btn:hover { background: rgba(169,246,219,0.25); border-color: rgba(169,246,219,0.5); } .ek-zaehler { color: var(--text-secondary); font-size: .85em; margin-left: auto; align-self: center; } /* Checkbox-Spalten als Glas ueber der Karte */ /* Mittel-Korridor zwischen den Spalten: die Karte (meet, zentriert) wird dort sichtbar — Kerneuropa liegt genau in der Mitte. */ .ek-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2em, 24%, 16em); row-gap: var(--space-md); } /* Bewusst duenn (Alpha .26, blur 1px), damit die Karte durchscheint. */ .ek-spalten .filter-column { background: rgba(10,48,82,0.26); backdrop-filter: blur(1px); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75em; } /* Die Karten SIND der Gruppen-Umschalter: ganze Flaeche aktivierbar. Aktiv-Markierung = dasselbe Muster wie die gewaehlte Laufzeit im "alle Zinsen"-Tab (.zins-item.highlight): Akzent-Border + transparente Akzentflaeche. */ .ek-spalte { cursor: pointer; transition: background var(--transition-base), border-color var(--transition-base); } .ek-spalte:not(.ek-spalte-aktiv):hover { border-color: rgba(255,255,255,0.35); } .ek-spalten .ek-spalte-aktiv { background: rgba(169,246,219,0.15); border-color: var(--accent); } /* Karten-Titel als echter Button (Tastatur-Zugang zum Umschalten), optisch unveraendert — der .filter-label-Span behaelt den zentralen Stil. */ .ek-spalte-kopf { display: block; width: 100%; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } /* Glas-Karten trennen sich selbst — zentrale Separator-Raender/-Margins neutralisieren (die frueheren .filter-row-separator[style]-Regeln greifen ohne Inline-style nicht mehr). */ .ek-spalten .filter-column-separator { margin: 0; } /* Tooltip */ .ek-tooltip { position: absolute; z-index: 2; pointer-events: none; background: rgba(10,37,64,0.92); color: #fff; padding: .3em .6em; border-radius: .4em; font-size: .8em; white-space: nowrap; opacity: 0; transition: opacity 150ms ease; } .ek-tooltip.ek-sichtbar { opacity: 1; } /* Tablet-Zwischenbereich (50–64em): die Tafeln sind wegen des Karten- Korridors schmal — Checkboxen einspaltig, sonst laeuft das zentrale repeat(2,1fr)-Grid ueber den Tafelrand (VRT-Befund 2026-07-07). */ /* Untere Kante 50.01em statt 50em (Audit A-7.2 / K6-Port DE 2026-08-12): exakt 800px traf sonst diesen Block UND den `max-width: 50em`-Block darunter gleichzeitig. */ @media (min-width: 50.01em) and (max-width: 64em) { .ek-spalten .checkbox-group-wrap { grid-template-columns: 1fr; } } /* Schmale Viewports: Spalten untereinander, Karte wird dezente Textur. Gleicher Breakpoint wie die alte Sitz-Zeile (50em). */ @media (max-width: 50em) { .ek-spalten { grid-template-columns: 1fr; } .ek-karte-wrap { opacity: .18; } } /* --- aus Z.763-818: Hochkontrast-Hell Ebene C - Leiste/Europakarte/Balken-Toggle/weitere-Filter-Button/Panel --- */ /* -- Einstellungsleiste: Laufzeit-Pills / Anlagebetrag-Toggle. Aktive Zustaende explizit blau fuellen (Schrift weiss), Beschriftungen nach #003A66. -- */ #vergleich.kontrast-hell .vergleich-dashboard .laufzeit-nav { background: rgba(0,82,141,0.06); } #vergleich.kontrast-hell .vergleich-dashboard .laufzeit-pill { color: #003A66; } #vergleich.kontrast-hell .vergleich-dashboard .laufzeit-pill:hover { background: rgba(0,82,141,0.08); color: #003A66; } #vergleich.kontrast-hell .vergleich-dashboard .laufzeit-pill.active { background: #0070C0; color: #fff; } #vergleich.kontrast-hell .vergleich-dashboard .toggle-group, #vergleich.kontrast-hell .vergleich-dashboard .filter-group .toggle-group { background: rgba(0,82,141,0.06); } #vergleich.kontrast-hell .vergleich-dashboard .toggle-btn { color: #003A66; } #vergleich.kontrast-hell .vergleich-dashboard .toggle-btn:hover { background: rgba(0,82,141,0.08); color: #003A66; } #vergleich.kontrast-hell .vergleich-dashboard .toggle-btn.active { background: #0070C0; color: #fff; } #vergleich.kontrast-hell .vergleich-dashboard .filter-label, #vergleich.kontrast-hell .vergleich-dashboard .filter-column-title { color: #003A66; } /* -- Europakarte-Buehne (Laenderfilter): bewusste dunkle Marken-Ausnahme (Anwender-Entscheidung — nicht umfaerben). Schrift-Variablen lokal auf Dunkelmodus- Werte zuruecksetzen und die Beschriftungen wieder aufhellen (Quellreihenfolge schlaegt die gleichspezifische filter-label-Hell-Regel oben). -- */ #vergleich.kontrast-hell .ek-sektion { --text-primary: #fff; --text-secondary: rgba(255,255,255,0.85); --text-muted: rgba(255,255,255,0.6); --accent: #00d4aa; --accent-light: #00d4aa; } #vergleich.kontrast-hell .ek-sektion .filter-label, #vergleich.kontrast-hell .ek-sektion .filter-column-title { color: rgba(255,255,255,0.85); } /* -- Auslandsanlagen-Balken-Toggle (Festgeld-spezifisch, Core-Inline: helle Bars/State/Arrow -> auf Weiss unsichtbar). Blaue Umfaerbung; gefuellte Bars solide, Ruhe-Bars faint-blau (klare Fuell-Hierarchie auf Weiss). -- */ #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle-state { color: #00528D; } #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle-arrow { color: #00528D; } #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle-bars-dash .balken-toggle-bar { background: rgba(0,82,141,0.30); } #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle[data-state="off"] .balken-toggle-bars-dash .balken-toggle-bar:nth-child(-n+8), #vergleich.kontrast-hell .vergleich-dashboard .balken-toggle[data-state="on"] .balken-toggle-bars-dash .balken-toggle-bar { background: #0070C0; } /* -- "weitere Filter"-Button (Floating): dunkelblau + Tuerkis-Ecken -> Weiss + Blau -- */ #vergleich.kontrast-hell .anpassen-filter-btn { background: #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 (Core-Inline: dunkelblau) -> weisses Panel, blauer Rahmen. Titel/Hints/Checkbox-Text nutzen var(--text-secondary) (Ebene B deckt sie ab); nur die hartkodierten Weiss-Werte brauchen Overrides. Checkbox accent-color:#00528d ist bereits blau (kein Override). -- */ #vergleich.kontrast-hell .anpassen-panel { background: #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 .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; } /* --- aus Z.851-853: Hochkontrast-Hell Ebene C - Footer-Links --- */ /* -- 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; } /* --- Schlanke Ergaenzungen aus gemischten Media-Bloecken der Quelle (nur die leisten-/panel-relevanten Regeln herausgeloest) --- */ .vergleich-dashboard .laufzeit-pill:focus-visible { /* aus Z.553 */ outline: 2px solid var(--accent, #A9F6DB); outline-offset: 0.125em; } @media (max-width: 52em) { /* aus Z.434-435 */ .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; } } @media (max-width: 38em) { /* aus Z.536-544: Panel Mobile Full-Bleed */ .anpassen-panel { width: 95vw; max-width: none; margin: -3em 0 1em calc(50% - 47.5vw); } } /* ===================== Ende Konsistenz-Abschnitt ===================== */ /* === 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. Der Block liegt in dieser produkteigenen Datei statt im Core, weil der Zinsgebirge-Core kein Inline-