(Anwender-Entscheid) — Abstaende/Typo kommen aus der style.css (p{margin:2em 0 0} + #vergleich p). Die frueheren .einszueins-intro-/.einszueins-hinweis-Regeln sind entfallen (Hinweis "Bitte oben bis zu drei ..." ersatzlos gestrichen). */ /* Anwender-Entscheid 2026-07-06 (Politur-Runde 2): ~2em Luft UNTER dem Intro-Satz vor den Auswahlfeldern (style.css p{margin:2em 0 0} setzt nur den TOP-Abstand, bottom bleibt 0). Eng gescopt aufs direkte

(Diff-Status) sind position:absolute -> die margin ist dort layout-neutral. (AP3a) */ .einszueins-tool > p { margin-bottom: 2em; } /* -------------------------------------------------------------------------- * * 2. Auswahl-Formular (native Baseline, Phase 2 — Combobox folgt Phase 3) * -------------------------------------------------------------------------- */ /* Phase 6.5/D4: Panel entblaut — kein Kasten mehr, der Kopf wird "leicht"; alleiniger Blickfang sind die 2px-umrahmten Eingabefelder (Alt-Tool-Anmutung "Ihre Auswahl"). padding:0 -> die Felder fluchten mit der Dashboard-Kante. */ .ab-auswahl { /* Anwender-Entscheid 2026-07-06 (Politur-Runde 2): Bottom-Margin 1.3em -> 0.4em -> der "+ drittes Produkt gegenueberstellen"-Slot (Reihe 2 des Formular-Grids) rueckt naeher an die Produktdaten (mit .einszueins-dashboard{padding-top:0.25em} ergibt sich ~0.65em Gesamtabstand statt ~1.55em). (AP3b) */ margin: 0 0 0.4em; padding: 0; background: transparent; border: 0; border-radius: 0; } .ab-auswahl-reihe { display: flex; flex-wrap: wrap; gap: 0.9em; } .ab-auswahl-label { display: flex; flex-direction: column; flex: 1 1 15em; min-width: 12em; font-size: 0.8rem; } .ab-auswahl-labeltext { margin-bottom: 0.35em; font-weight: 600; color: #F1F6FC; letter-spacing: 0.02em; } .ab-auswahl-select { padding: 0.5em 0.6em; /* Phase 6.5/D4: 2px-Umrahmung als Blickfang (statt 1px #b9bec7) — dunkler Ring um das weisse Feld definiert es klar auf dem blauen Seiten-Grund. Bewusst NICHT accent-farbig, damit der :focus-visible-Ring (accent) unterscheidbar bleibt. Gilt auch fuer die No-JS-Baseline (gleiche Klasse). */ border: 2px solid var(--primary-darker, #004578); border-radius: 6px; background: #fff; color: #222; font-size: 0.95rem; font-family: inherit; } .ab-auswahl-select:focus-visible { outline: 2px solid var(--accent, #00d4aa); /* Ring bei offset:2px auf blauem Panel -> ~3,4:1 (WCAG 1.4.11) */ outline-offset: 2px; } .ab-auswahl-btn { margin-top: 1em; padding: 0.6em 1.4em; border: 0; border-radius: 6px; background: var(--accent, #00d4aa); color: var(--primary-darker, #004578); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 150ms ease; } .ab-auswahl-btn:hover { background: var(--accent-light, #00ffcc); } .ab-auswahl-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* -------------------------------------------------------------------------- * * 2b. Such-/Auswahl-Combobox (Phase 3, Progressive Enhancement) * Das JS setzt .fg-enhanced auf das Formular -> native Reihe + Button * werden ausgeblendet (bleiben im DOM als No-JS-Baseline + Wert-Speicher), * die .fg-combo-Instanzen treten an ihre Stelle. Mobil (<=600px) enhanct * das JS nicht -> die native Reihe bleibt sichtbar (Section 10). * -------------------------------------------------------------------------- */ .ab-auswahl.fg-enhanced .ab-auswahl-reihe { display: none; } .ab-auswahl.fg-enhanced .ab-auswahl-btn { display: none; } .fg-combo-wrap { display: flex; flex-wrap: wrap; gap: 0.9em; align-items: flex-start; } /* Phase 6.5/D4: Felder an Spaltenposition (Alt-Tool-Zeile "Ihre Auswahl"). Gleiche Spaltenlogik wie das Geruest: 1. Track = vp-Breite (leerer Offset, Feld A startet via grid-column:2), dann je sichtbarem Feld eine Spalte (--fg-felder setzt das JS: 2 default, 3 nach Zuschalten). minmax(0,1fr) statt minmax(11em,1fr): das Formular scrollt nicht — bei genug Platz (kein H-Scroll im Geruest) sind beide 1fr und fluchten; bei H-Scroll-Engstellen schrumpfen die Felder statt ueberzulaufen (bewusste Naeherung). */ .ab-auswahl.fg-enhanced .fg-combo-wrap { display: grid; grid-template-columns: var(--e1-vp-breite, 13em) repeat(var(--fg-felder, 2), minmax(0, 1fr)); gap: 0.5em 0; align-items: start; /* Gleiche horizontale Einrueckung wie .vergleich-dashboard{margin:.. 1%} (vergleich.min.css) — sonst sitzen die Felder ~1% links vom Geruest (live gemessen: 16px Versatz). Beide sind Kinder von .einszueins-tool -> 1% derselben Bezugsbreite = exakte Fluchtung. */ margin: 0 1%; } .ab-auswahl.fg-enhanced .fg-combo-wrap > .fg-combo { min-width: 0; padding-right: 1em; /* Luft zur Nachbarspalte; Feld-Start fluchtet mit Spaltenkante */ } .ab-auswahl.fg-enhanced .fg-combo-wrap > .fg-combo[data-slot="a"] { grid-column: 2; } /* Anwender-Entscheid 2026-07-06 (Politur-Runde 3 / AP2): Entfernen-Links sind jetzt DIREKTE Grid-Kinder der .fg-combo-wrap (nicht mehr in der .fg-combo) — die DOM-Reihenfolge (buildComboWrap) ist Felder-zuerst, dann alle Clears -> Tab-Fluss erst durch alle Auswahlfelder, dann durch die Entfernen-Links. Optisch sitzt jeder Clear in Grid-Zeile 2 unter seiner Feld-Spalte (Spuren: 1=vp-Track, 2=Slot A, 3=Slot B, 4=Slot C). Da die Wrap auf ALLEN sichtbaren Breiten ein Grid ist (601px+; <601px komplett display:none, native Reihe), fluchtet Zeile 2 automatisch — es gibt KEIN gestapeltes Layout, daher auch kein CSS-order-Interleave noetig. */ .ab-auswahl.fg-enhanced .fg-combo-wrap > .fg-combo-clear { grid-row: 2; align-self: start; justify-self: start; margin-top: 0.15em; /* dezent unter dem Feld (statt der Innen-Combo-Luft 0.4em) */ } .ab-auswahl.fg-enhanced .fg-combo-wrap > .fg-combo-clear[data-slot="a"] { grid-column: 2; } .ab-auswahl.fg-enhanced .fg-combo-wrap > .fg-combo-clear[data-slot="b"] { grid-column: 3; } .ab-auswahl.fg-enhanced .fg-combo-wrap > .fg-combo-clear[data-slot="c"] { grid-column: 4; } /* [hidden] muss die .fg-combo-clear{display:inline-flex}-Basis schlagen (gleiche Spezifitaet -> das UA-[hidden]{display:none} verloere sonst per Quellreihenfolge). Betrifft v.a. den immer angelegten, aber bis zum Reveal versteckten Slot-C-Clear. */ .fg-combo-clear[hidden] { display: none; } /* "+ drittes Produkt gegenueberstellen": Anwender-Entscheid 2026-07-06 (Runde 3 / AP2): in Grid-Zeile 3 (UNTER den Clears), NICHT mehr Zeile 2 — sonst kollidierte der Button bei gefuelltem Slot B mit Clear-B (beide row 2, Spalte 3, wenn Slot C leer ist -> --fg-felder=2, grid-column:-2 == Spalte 3). Spannt die Feldbreite (Spalte 2..-1), links ausgerichtet. Bei sichtbarem Slot C ist der Reveal hidden (display:none) -> Zeile 3 existiert nicht, die Clears sind letzte Reihe. */ .ab-auswahl.fg-enhanced .fg-combo-wrap > .fg-add-slot { grid-row: 3; grid-column: 2 / -1; justify-self: start; align-self: start; margin-top: 0; } /* Fluchtung im 601-640px-Fenster: das Dashboard verschmaelert --e1-vp-breite auf 8.5em (Section 10) — die Var lebt auf .einszueins-dashboard und erreicht das Formular nicht, daher hier der gleiche Wert explizit. */ @media (max-width: 40em) { .ab-auswahl.fg-enhanced .fg-combo-wrap { grid-template-columns: 8.5em repeat(var(--fg-felder, 2), minmax(0, 1fr)); } } /* Anwender-Entscheid 2026-07-06: auf groesseren Displays schliesst die Kriterienspalte BUENDIG mit dem ersten Navigations-Feld (Logo) ab, das 1/6 von 100% breit ist (style.css: #nav li{width:16.66%}; unterhalb 72em schaltet die Nav auf 33% -> gleicher Breakpoint hier). Herleitung der Prozentkette (Bezug = Seitenbreite): #vergleich margin .9% + width 98% (style.css), Dashboard/Formular margin 1% davon -> Scroller-/Formular-Linke bei 1.88%, Breite 96.04%. Track = (100%/6 - 1.88%) / 0.9604 der eigenen Breite -> rechte Kante exakt bei 16.667%. Gilt fuer Dashboard UND Formular-Grid (D4-Spaltenfluchtung, identische Bezugsbreite, s. Kommentar oben). Ab 140em kappt style.css nur die Nav (max-width) — dort wandert die Kante minimal weiter (akzeptierter Extremfall). */ @media (min-width: 72.0625em) { /* Anwender-Entscheid 2026-07-06 (Politur-Runde 2 / AP2): --e1-vp-breite (der Dashboard-Track) wird hier NICHT mehr gesetzt. Diese Deklaration stand VOR der unbedingten Basis .einszueins-dashboard{--e1-vp-breite:13em} (Section 3, weiter unten) — gleiche Spezifitaet (0,1,0), Media-Queries geben keinen Spezifitaets-Bonus -> die spaetere 13em-Basis gewann per Quellreihenfolge, sodass die vp-Spur im Dashboard-Grid trotz calc auf 13em haengenblieb (der calc kam nie am Scroller-var(--e1-vp-breite) an). Der Track wird jetzt in Section 17 NACH der Basis gesetzt und gewinnt. Das Formular-Grid unten nutzt den calc DIREKT (kein var -> keine Cascade-Kollision) und bleibt daher hier. */ .ab-auswahl.fg-enhanced .fg-combo-wrap { grid-template-columns: calc((100% / 6 - 1.88%) / 0.9604) repeat(var(--fg-felder, 2), minmax(0, 1fr)); } } .fg-combo { display: flex; flex-direction: column; flex: 1 1 15em; min-width: 12em; font-size: 0.8rem; position: relative; } .fg-combo[hidden] { display: none; } .fg-combo-label { margin-bottom: 0.35em; } .fg-combo-field { position: relative; } /* Selektor mit .ab-auswahl-Praefix (0,2,0): die globale style.css-Regel input[type="text"],...{border-width:1px} hat (0,1,1) und schluege die blosse Klasse — live gemessen (AP3-Smoke-Check). Der Select braucht das nicht (Element-Selektor verliert gegen .ab-auswahl-select). */ .ab-auswahl .fg-combo-input { width: 100%; box-sizing: border-box; padding: 0.5em 2.1em 0.5em 0.6em; /* rechts Platz fuer den Toggle */ border: 2px solid var(--primary-darker, #004578); /* Phase 6.5/D4, wie .ab-auswahl-select */ border-radius: 6px; background: #fff; color: #222; font-size: 0.95rem; font-family: inherit; } .fg-combo-input::placeholder { color: #6b7280; } .fg-combo-input:focus-visible { outline: 2px solid var(--accent, #00d4aa); /* Ring bei offset:2px auf blauem Panel -> ~3,4:1 (WCAG 1.4.11) */ outline-offset: 2px; } .fg-combo-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 2em; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #4a5568; font-size: 0.85rem; cursor: pointer; } .fg-combo-toggle:focus-visible { outline: 2px solid #0a6353; /* inset (offset:-2px) auf weissem Toggle-Grund -> ~7:1 (WCAG 1.4.11) */ outline-offset: -2px; } .fg-combo-clear { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; /* WCAG 2.5.8 AA Zielgroesse (Combobox = Desktop) */ min-height: 24px; margin-top: 0.4em; padding: 0.15em 0.3em; border: 0; background: transparent; color: #F1F6FC; font-size: 0.78rem; text-decoration: underline; cursor: pointer; opacity: 0.85; } .fg-combo-clear:hover { opacity: 1; } .fg-combo-clear:focus-visible { outline: 2px solid var(--accent, #00d4aa); outline-offset: 2px; opacity: 1; } /* Popup-Liste */ .fg-combo-list { position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; right: 0; margin: 0; padding: 0.25em 0; max-height: 18em; overflow-y: auto; list-style: none; background: #fff; color: #222; border: 1px solid #b9bec7; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); font-size: 0.9rem; } .fg-combo-list[hidden] { display: none; } .fg-combo-group { padding: 0.45em 0.7em 0.2em; font-weight: 700; font-size: 0.78rem; color: #09578f; text-transform: none; } .fg-combo-option { padding: 0.4em 0.7em 0.4em 1.1em; /* leicht eingerueckt unter dem Bank-Header */ cursor: pointer; color: #222; } /* is-active = aria-activedescendant-Proxy (kein DOM-Fokus); Hover gleichwertig. Farbwechsel statt transparenter Raender (High-Contrast-sicher, APG). */ .fg-combo-option:hover, .fg-combo-option.is-active { background: var(--accent, #00d4aa); color: var(--primary-darker, #004578); } /* Highlight sowohl in Optionen ALS AUCH im Bank-Gruppenkopf (sonst Browser- Default-Gelb im Header). Kein Hintergrund -> High-Contrast-sicher. */ .fg-combo-list mark { background: transparent; color: inherit; font-weight: 700; text-decoration: underline; } .fg-combo-none { padding: 0.5em 0.7em; color: #666; font-style: italic; } /* Reveal-Buttons ("+ Produkt gegenueberstellen" / "+ drittes Produkt") */ .fg-add-slot { align-self: center; margin-top: 1.4em; /* auf Hoehe der Input-Reihe (Label-Hoehe kompensiert) */ padding: 0.55em 0.9em; border: 1px dashed rgba(255, 255, 255, 0.5); border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #F1F6FC; font-size: 0.85rem; cursor: pointer; white-space: nowrap; } .fg-add-slot:hover { background: rgba(255, 255, 255, 0.16); } .fg-add-slot:focus-visible { outline: 2px solid var(--accent, #00d4aa); outline-offset: 2px; } .fg-add-slot[hidden] { display: none; } /* Screenreader-only (Live-Region) — clip-Technik, NICHT display:none. */ .fg-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .fg-combo-option { scroll-behavior: auto; } } /* -------------------------------------------------------------------------- * * 3. Dashboard-Panel + Grid-Geruest * (.tabelle-scroller/.vp-spalte/.tabelle-grid-Grundmechanik liegt in der * Tabelle inline, NICHT in shared CSS -> hier nachgebaut. .anbieter-spalte * [Subgrid] kommt aus tabelle.min.css.) * -------------------------------------------------------------------------- */ .einszueins-dashboard { /* Zeilenhoehen — als minmax-Fallbacks in den --e1-rows-Tracks referenziert (der Core setzt die Track-Liste je nach Slotzahl per Inline-style). */ --e1-hdr-logo-h: 6.5rem; --e1-hdr-badge-h: 2rem; /* Phase 6.5/P4: Titel-Zeilen-Track leicht erhoeht (2.6rem -> 2.9rem) -> die Gruppen-/Sektionsbaender bekommen mehr Luft, verstaerkt die Segmentierung. Zentrale Var (Subgrid-Fluchtung bleibt: Core referenziert sie im --e1-rows). */ --e1-row-titel-h: 2.9rem; --e1-row-data-h: 2.75rem; --e1-row-cta-h: 2.4rem; --e1-vp-breite: 13em; /* Anwender-Entscheid 2026-07-06 (Politur-Runde 3 / AP6): der Rest-Abstand nach "+ drittes Produkt" bis zur ersten Dashboard-Zeile kam zu ~8px aus der Shared-Regel .vergleich-dashboard{margin:var(--space-sm) 0} (vergleich.min.css) — deren margin-top hier gekillt (eigenes CSS laedt zuletzt, gleiche Spezifitaet -> gewinnt). Rest: Formular-Bottom 0.4em (.ab-auswahl) + padding-top 0.25em = ~0.65em wie gewuenscht. margin-bottom der Shared-Regel bleibt (unter den Fussnoten, AP6-irrelevant). */ margin-top: 0; padding-top: 0.25em; } /* Scroller wird zum AEUSSEREN Grid (ueberschreibt das shared .tabelle-scroller- Flex per Ladereihenfolge): 1 Label-Spalte + Anbieter-Bereich; traegt die Row-Tracks. vp-Spalte und Anbieter-Grid uebernehmen die Rows per SUBGRID, die .anbieter-spalte (shared) verschachtelt ihrerseits per Subgrid. So werden die auto-Zeilenhoehen EINMAL zentral (ueber Label + alle Werte einer Zeile) berechnet -> perfekte Fluchtung, auch bei mehrzeiligen Merkmal-Werten. (Getrennte Grids mit minmax(...,auto) wuerden ihre Hoehen unabhaengig berechnen und die Labels aus der Fluchtung schieben.) */ .einszueins-scroller { display: grid; grid-template-columns: var(--e1-vp-breite, 13em) minmax(0, 1fr); grid-template-rows: var(--e1-rows); align-items: stretch; /* Scroll-Container fuer den HORIZONTALEN Ueberlauf (Sticky-Kriterienspalte, Section 12). Anwender-Entscheid 2026-07-06: KEINE Innen-Hoehe mehr (frueher max-height:82vh + scroll-padding-top) — der Vergleich scrollt normal mit der Seite, nicht zusaetzlich in sich selbst. Konsequenz: das vertikale top-Sticking der Kopfzellen (Section 11) ist inert, weil position:sticky nur im eigenen Scrollport klebt und der Kasten vertikal nicht mehr scrollt. position:sticky aendert WEDER Box-Groesse NOCH Track-Teilnahme -> die Subgrid-Fluchtung bleibt unberuehrt (§3). */ overflow: auto; padding-bottom: 0.5em; } /* Vergleichspunkt-Spalte (Kriterien-Labels links). Phase 4: Sticky-Kriterienspalte (Desktop) — klebt beim HORIZONTALEN Scroll am linken Rand des Scrollers (z-4, ueber den Kopf-Zellen z-3, damit die Ecke beim Diagonal-Scroll obenauf liegt). Solider Hintergrund (nicht 0.92), sonst scheinen gescrollte Spalten durch. Auf Mobile ausgeblendet (Section 13, Mini-Labels ersetzen sie). */ .einszueins-dashboard .vp-spalte { grid-column: 1; grid-row: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; position: sticky; left: 0; z-index: 4; /* Anwender-Entscheid 2026-07-06: Kriterienspalte OHNE eigene Hinterlegung — optisch der normale Seiten-Grund. Technisch trotzdem der Seiten-Grundton #0070C0 (body, style.css) statt transparent: ZWINGEND deckend (sticky- left!), sonst schienen beim H-Scroll die Datenspalten durch. */ background: #0070C0; border-right: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px 0 0 6px; box-shadow: 0.25em 0 0.5em rgba(0, 0, 0, 0.2); } /* Anbieter-Grid: fuellt den Rest neben der vp-Spalte (1-3 Slots gleichbreit). Subgrid-Rows vom Scroller; die .anbieter-spalte (shared) verschachtelt weiter. Phase 4: minmax(11em,1fr) statt minmax(0,1fr) -> Spalten schrumpfen nicht mehr unlesbar; bei drei Produkten auf mittlerer Breite laeuft der Scroller horizontal ueber -> die Sticky-Kriterienspalte wird wirksam. Weit genug fuellt 1fr. */ .einszueins-dashboard .tabelle-grid { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-columns: repeat(var(--anzahl-anbieter, 1), minmax(11em, 1fr)); grid-template-rows: subgrid; min-width: 0; } /* Fallback fuer Browser OHNE CSS-Subgrid (~vor 2023): die verschachtelte Subgrid-Fluchtung greift nicht. Konsistent auf ein gestapeltes Block-Layout degradieren, statt halb-grid/halb-block zu brechen (der shared @supports-Fallback in tabelle.min.css setzt nur vp-spalte/anbieter-spalte/ zellen auf block, nicht den hier neu eingefuehrten Grid-Scroller). Lesbar, wenn auch ohne zeilenweise Label/Wert-Fluchtung. Moderne Zielbrowser (Baseline 2023+) betreten diesen Pfad nicht. Voller Mobile/Fluchtungs-Ersatz = Phase 4. */ @supports not (grid-template-rows: subgrid) { .einszueins-scroller { display: block; overflow: visible; max-height: none; } .einszueins-dashboard .vp-spalte, .einszueins-dashboard .tabelle-grid, .einszueins-dashboard .anbieter-spalte { display: block; width: auto; grid-template-rows: none; } /* Ohne Scrollport wuerde Sticky am Viewport kleben -> im Block-Fallback aus. */ .einszueins-dashboard .vp-spalte, .einszueins-dashboard .vp-spalte .vp-header, .einszueins-dashboard .anbieter-spalte .ab-zelle.ab-logo, .einszueins-dashboard .anbieter-spalte .ab-zelle.ab-badge { position: static; } .einszueins-dashboard .vp-spalte { border-right: none; border-radius: 6px 6px 0 0; box-shadow: none; } } /* -------------------------------------------------------------------------- * * 4. Zell-Einfaerbungen — in der Tabelle inline (Z.1022/1061), hier nachgezogen * -------------------------------------------------------------------------- */ /* Anwender-Entscheid 2026-07-06: Logo-Zeile ("Anbieter") und Badge-Zeile (Inlands-/Auslandsanlage) OHNE Hinterlegung in ALLEN Spalten — das Banklogo soll auf dem normalen Seiten-Grund stehen und nie umrahmt wirken. Technisch der Seiten-Grundton #0070C0 statt transparent: die Kopfzellen sind sticky (Section 11) und muessen die darunterlaufenden Zeilen deckend verbergen; zugleich deckt er die Spalten-Tinte (Section 14) hinter den Kopfzeilen ab. Die frueheren Kopf-Toene (Logo #0070C0/Badge #09578f) und der Pos.1/3- Override sind damit entfallen; einziger Badge-Setzer ist Section 11. (border-top-right-radius der Logo-Zelle entfernt: im Seiten-Grundton ist die Rundung unsichtbar, liesse aber in Pos.1/3 die Spalten-Tinte als Eck-Keil durchblitzen.) */ /* Anwender-Entscheid 2026-07-06 (Politur-Runde 3 / AP3): Logo-Zeile jetzt auf ALLEN Breiten transparent (frueher #0070C0, dann Desktop-transparent in Section 17). Die Logo-Zelle ist NIE sticky-left; ihr top-Sticking ist inert (Innen-Scrollport entfallen) -> die Deckungs-Invariante ist nicht betroffen (vp-Spalte + fg-sticky-mini bleiben deckend). In Pos.1+3 scheint die Spalten-Tinte #0061A6 (Section 14) durch, in Pos.2 der Seiten-Verlauf — kohaerent mit der Spalte darunter, wie die Tabelle. */ .einszueins-dashboard .ab-zelle.ab-logo { background: transparent; } /* -------------------------------------------------------------------------- * * 5. "Alle Zinssaetze" — 3-Spalten-Zins-Matrix (1:1-Differenzierer, eigen) * -------------------------------------------------------------------------- */ .einszueins-dashboard .ab-zelle.ab-matrix-titel, .einszueins-dashboard .ab-zelle.ab-matrix-zeile { justify-content: stretch; align-items: center; padding: 0.3em 0.625em; } .einszueins-dashboard .ab-zins-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; width: 100%; } .einszueins-dashboard .ab-zins-matrix > span { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary, #fff); font-size: 0.85rem; min-width: 0; overflow-wrap: anywhere; } /* Anwender-Entscheid 2026-07-06 (Politur-Runde 4 / AP3): Bestwert-Toenung fuellt die Zellhoehe (Girokonto-Anmutung "ganze Zelle"). Hoehenmodell: die Matrix-Datenzelle streckt (statt zentriert) ihre .ab-zins-matrix auf die volle Zellhoehe, die Matrix streckt ihre einzige Grid-Reihe (align-content:stretch), die Spans fuellen die Reihe und zentrieren den Text INNEN per Flex -> die Textposition bleibt exakt (war schon zentriert), nur die Span-/Toenungsflaeche waechst. Zellhoehe unveraendert (Track minmax(2.75rem,auto); Inhalt <=44px -> kein Wachstum -> Klapp-Tween/--e1-rows unberuehrt). NUR die Daten-Reihe (.ab-matrix-zeile), NICHT die Legende (.ab-matrix-titel). Die Zell-Umstellung (vertikales Padding 0 + stretch) nur >=601px (Tabellen-Layout); <601px bleibt die Karten-Matrix (flex-column, eigenes Padding) unangetastet — dort ist die Matrix ohnehin inhaltshoch (kein Full-Height-Effekt). */ @media (min-width: 601px) { .einszueins-dashboard .ab-zelle.ab-matrix-zeile { align-items: stretch; padding-top: 0; padding-bottom: 0; } } .einszueins-dashboard .ab-matrix-zeile .ab-zins-matrix { align-content: stretch; } .einszueins-dashboard .ab-matrix-zeile .ab-zins-matrix > span { display: flex; align-items: center; /* Text vertikal zentriert -> Position wie zuvor */ justify-content: flex-end; /* rechtsbuendig (Flex-Ersatz fuer text-align:right) */ } .einszueins-dashboard .ab-matrix-legende > span { font-size: 0.62rem; line-height: 1.15; /* AA-Kontrast auf #0070C0/#0061A6: 0.55 lag bei ~2,6:1 (Verstoss bei echtem Inhalts-Text); 0.92 ~4,9:1 auf #0070C0, auf dem dunkleren #0061A6 besser. */ color: rgba(255, 255, 255, 0.92); text-align: right; text-transform: none; } /* "Anbieter"-Label (Kriterien-Kopf): shared .75 laege bei ~3,6:1 auf dem hellen Grund -> hier auf .92 (~4,6:1). Nur diese Text-Farbe, gescoped. */ .einszueins-dashboard .vp-header.vp-logo { color: rgba(255, 255, 255, 0.92); /* ~4,6:1 auf #0070C0 */ } /* Anwender-Entscheid 2026-07-06 (Politur-Runde 4 / AP2): Kriterien-Dunkelblau der Merkmal-Labels entfernen. Quelle ist die SHARED Basis-Regel .vp-zelle{background: rgba(9,87,143,0.92)} (tabelle.min.css) — sie faerbt ALLE vp-Zellen; hier fuer die Merkmal-Labels neutralisiert (eigenes CSS laedt zuletzt, Selektor 0,3,0 schlaegt die 0,1,0-Basis zusaetzlich). Wirkung je Breite: Desktop (vp-Spalte transparent, Section 17) zeigt den Seiten-Verlauf (Plateau ~#0070C0); 601-72em zeigt die deckende, sticky-left vp-Spalte #0070C0 (Deckungs-Invariante ueber den CONTAINER gewahrt, nicht angefasst); <601px ist die vp-Spalte display:none (Mini-Labels). AA: der SHARED Kriterien-Text ist rgba(255,255,255,0.78) — auf dem nun HELLEN #0070C0 nur ~3,8:1 (auf dem dunklen alten Grund war er ok). Darum hier auf VOLL #fff angehoben -> ~5,1:1 auf #0070C0 (bzw. ~5,5:1 auf dem etwas dunkleren Verlaufs-Tief #0067B0) -> AA ok. NUR vp-merkmal (Merkmal- + Laufzeit-Labels); Sektions-/Gruppen-Baender unberuehrt. HINWEIS (Bericht): vp-matrix-legende ("Anlagebetrag"), vp-footer, vp-print tragen dieselbe Basis-Faerbung + 0.78-Text weiter — bewusst NICHT in AP2-Scope. */ .einszueins-dashboard .vp-zelle.vp-merkmal { background: transparent; color: #fff; } /* Anwender-Entscheid 2026-07-06 (Politur-Runde 4 / AP2b): die restlichen dunkelblauen Kriterien-Zellen konsequent mitziehen — vp-matrix-legende ("Anlagebetrag"), vp-footer ("Zum Anbieter") und vp-print ("Druck"). Diese drei sind LEERE vp-Zellen (nur aria-label, kein sichtbarer Text -> keine Textkontrast-Anhebung noetig): sie tragen bisher denselben Shared-.vp-zelle-Grund rgba(9,87,143,0.92) bzw. (vp-footer) die Shared-Override rgba(9,87,143,0.96) und standen als dunkelblaue Streifen zwischen den nun transparenten Merkmal-Reihen. Jetzt transparent wie vp-merkmal. NUR die Baender (vp-gruppentitel) behalten ihre Band-Optik. Deckung bei H-Scroll (601-72em) kommt vom deckenden vp-Spalte-Container #0070C0 (nicht angefasst); <601px vp-Spalte display:none. */ .einszueins-dashboard .vp-zelle.vp-matrix-legende, .einszueins-dashboard .vp-zelle.vp-footer, .einszueins-dashboard .vp-zelle.vp-print { background: transparent; } /* Anwender-Entscheid 2026-07-06 (Politur-Runde 3 / AP3): der fruehere 1:1-Badge- Override (rgba(0,77,64,0.5)/#d8f8ee, rgba(90,62,0,0.5)/#ffeab0) ist ENTFALLEN — er stammte aus der Zeit des hellen #0070C0-Badge-Zeilen-Grunds; seit die Badge- Zelle transparent ist (Section 11/AP3), greift wieder die Shared-Basis aus tabelle.min.css (badge-inland rgba(76,181,160,0.18)/#b9f0e1, badge-ausland rgba(220,180,40,0.18)/#ffe49a) -> volle Tabellen-Parität (leichte Tints). AA (bewusste Paritaets-Ausnahme): die Inland-Pill ueber #0061A6 (Pos.1+3) liegt bei ~4,3:1 (knapp unter AA 4,5:1); ueber #0070C0 (Pos.2) etwas besser. Nicht rein farb-codiert (die Pill traegt Klartext "Inlandsanlage"/"Auslandsanlage"). */ /* -------------------------------------------------------------------------- * * 6. Gruppentitel-Baender (inkl. "Alle Zinssaetze") * Die Titel bleiben statische

(No-JS-Baseline). Phase 6.5/P9: das JS * ruestet den vp-Gruppentitel (Desktop) bzw. den Gruppentitel-Spacer der 1. * Anbieter-Spalte (Mobile) zu einem Klapp-Button auf (Chevron + aria-expanded) * -> Sektion 6b. Seit 2026-07-06 ist auch "Alle Zinssaetze" eine klappbare * Gruppe in identischer Reihen-Struktur (vp-gruppentitel + Spacer-Zellen); * der fruehere inerte .vp-sektiontitel ist aus dem Markup entfallen. * -------------------------------------------------------------------------- */ /* Gestreifte Band-Optik — EINE Regel fuer Titel-Label (vp) UND Spacer-Zellen (anbieter), damit Label + Wert einer Titel-Reihe identisch aussehen und nicht auseinanderdriften. Alpha 0.04 = Paritaet zu tabelle.min.css Z.39/41 (.ab-gruppe-spacer / button.vp-gruppentitel). */ .einszueins-dashboard .vp-zelle.vp-gruppentitel, .einszueins-dashboard .ab-zelle.ab-gruppe-spacer { /* AP1b (Politur-Runde 4): der 0.04-Ueberzug ist jetzt ein IMAGE-Layer (letzte Ebene, direkt ueber der Farbe) statt background-color -> er kompositioniert ueber der Zell-Tinte (Section 14), ohne von deren hoeherer Spezifitaet geschlagen zu werden. background-color explizit transparent: in Pos.1/3 setzt die Zell-Tinte #0061A6, sonst scheint der Backdrop durch (Optik unveraendert). */ background-color: transparent; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0 0.7px, transparent 1.1px), radial-gradient(circle, rgba(4, 36, 64, 0.14) 0 0.7px, transparent 1.1px), linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)); background-size: 6px 6px, 8px 8px, auto; background-position: 0 0, 3px 4px, 0 0; background-repeat: repeat, repeat, no-repeat; /* Phase 6.5/P4: kraeftigere Trennlinie (1px/.10 -> 1.5px/.16) zwischen den Kriterien-Gruppen -> die Segmentierung wird deutlicher lesbar. */ border-top: 1.5px solid rgba(255, 255, 255, 0.16); border-bottom: 1px solid rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Textliche Titel-Optik nur fuer die Label-Zellen. Phase 6.5/D6: Textfarbe von var(--accent-light,#5fd4b8) auf helleres Mint gehoben — auf hellem Panel-Grund laege #5fd4b8 weit unter 4,5:1 (12px bold = normaler Text, AA verlangt 4,5:1). Seit dem Seiten-Grundton #0070C0 der Kriterienspalte (2026-07-06) nochmals leicht aufgehellt: #c9f2e6 laege auf dem Band ueber #0070C0 nur noch bei ~4,5:1, #d9f7ee ~4,9:1. */ .einszueins-dashboard .vp-zelle.vp-gruppentitel { color: #d9f7ee; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; /* Phase 6.5/P4: leicht geweitet, betont die Gruppen-Titel */ line-height: 1.15; } /* Spacer-Zelle selbst bleibt inert (die shared .ab-gruppe-spacer{cursor:pointer} zuruecksetzen) — geklappt wird ueber den eingebetteten Button (P9, Sektion 6b), nicht die ganze Zelle; der Button traegt seinen eigenen cursor:pointer. */ .einszueins-dashboard .ab-zelle.ab-gruppe-spacer { cursor: default; } /* -------------------------------------------------------------------------- * * 6b. PHASE 6.5 / P9 — Klapp-Button der Kriterien-Gruppen (JS-Aufwertung) * Das JS zieht den statischen Titel-Text in einen transparenten