/* .back-link und .project-topline sind am 27.08.2026 entfallen -- der Zurueck-Weg steht jetzt in der Kopfleiste (shared/kopfleiste.css), auf jeder Seite an derselben Stelle. Die Regeln hier trafen nach dem Entfernen des Markups kein Element mehr: totes CSS, das beim naechsten Lesen wie eine gueltige Vorgabe aussieht. */ /* AssetNest (Hub) — Komponenten-CSS. Grundwerte kommen aus ../shared/tokens.css (im HTML davor verlinkt). Frame-Regeln 1:1 nach der Suite-Referenz (DepotCashNest), siehe README. */ * { box-sizing: border-box; } body { margin: 0; background-color:var(--bg); background-image: var(--bg-verlauf); background-attachment: fixed; min-height: 100vh; color: var(--ink); font-family: var(--font-body); } /* Hauptdashboard ohne Verlauf (01.08.2026): der diagonale --bg-verlauf (warmer Braun-Schleier, siehe shared/tokens.css) existiert im Referenz- Mockup (asset-nest-clean-v3-board.html) NICHT -- dort ist die Seite hinter allem flach weiss. Das war der "Hinterhintergrund", der trotz korrigierter Zonenfarben noch sichtbar blieb: nicht die Zonen-Boxen selbst, sondern die Seite DAHINTER trug noch einen Ton. Bewusst NUR auf index.html beschraenkt (body.seite-dashboard), nicht im gemeinsamen body{}-Grundstil: entwicklung.html/steuer.html/farben.html laden dieselbe styles.css, waren aber nie Teil dieses Vergleichs und behalten den Verlauf unveraendert. */ body.seite-dashboard { background-image: none; background-attachment: initial; } button, input, select { font: inherit; } button { cursor: pointer; } /* position: relative, damit das Band-SVG sich daran ausrichtet — es wird von js/baender.js als erstes Kind eingehängt. */ /* .dashboard-shell: shared/modulseite.css (09.09.2026) */ .dashboard-header { margin-bottom: var(--sp-3); } /* Seitentitel (Standardfall: entwicklung.html, steuer.html, farben.html — hier IST die H1 die eigentliche Überschrift, nicht nur eine Marke). Board-Untergrund-Rollout (01.08.2026): Georgia/serif raus, Inter/800 wie überall sonst; Größe bewusst über section-heading h2 (2rem), damit die H1 weiter die größte Überschrift der Seite bleibt. */ .dashboard-header h1 { font-family: var(--font-body); font-weight: var(--fw-fett); font-size: var(--fs-titel); line-height: var(--lh-titel); letter-spacing: var(--ls-titel); margin: var(--sp-2) 0 var(--sp-3); } /* Sonderfall Hub (index.html): H1 ist hier "Asset_Nest", eine Marke über dem eigentlichen Seiteninhalt (Gesamtvermögen steht als eigene section-heading h2 weiter unten) -- deshalb bewusst klein, nicht die generische H1-Regel oben. Eigene Modifier-Klasse statt die Basisregel zu verbiegen, sonst reißt jede künftige Änderung hier wieder die drei anderen Seiten mit. */ .dashboard-header h1.marke { font-size: var(--fs-marke); line-height: 1.1; margin: var(--sp-2) 0 var(--sp-3); } /* Logo-Test 01.08.2026: erste Fassung (height:1.3em, an font-size von h1.marke gebunden) rendersierte viel größer als der vorherige Text, Ursache ungeklärt -- auf festen rem-Wert umgestellt. 1.2rem (≈19px) war danach zu klein (Wunsch Martin: "ca. 55px"). Fester px-Wert, weil Martin in Pixel gemessen hat -- keine Umrechnung nötig, kein Bezug mehr zu h1.marke, der ohnehin nichts brachte. */ .marke-logo { display: block; height: 55px; width: auto; } .dashboard-header p { max-width: 680px; color: var(--muted); font-size: var(--fs-sm); margin: 0; } /* .brand-glyph (Logo anstelle des "A" in der H1) — Experiment vom 28.07.2026, auf Wunsch MWM wieder zurückgenommen: brachte zu viel Unruhe in die Seite. Regel entfernt statt nur ungenutzt liegengelassen, damit kein totes CSS für ein Markup übrigbleibt, das es nicht mehr gibt. Die Bildmarke steht weiter im Browser-Tab (favicon.ico/.svg im Repo-Root). */ /* .brand-kicker steht seit 26.08.2026 in shared/modulseite.css -- eine Regel fuer die Suite statt vier Kopien mit einer Abweichung. */ /* ─── Frames (Referenzwerte der Suite) ──────────────────────────────────── */ /* Board-Untergrund (01.08.2026, MWM-Wunsch): master-frame trägt keinen Rahmen + Akzent-Oberkante mehr, sondern einen deckenden Zonen-Boden (--zone-boden-a). Die Inhalte darin (hero-value, portfolio-strip, teaser-paar) waren schon vorher freistehende weiße Karten mit Schatten — die änderen sich hier NICHT, nur ihr Untergrund wechselt von "Seite" zu "Zonen-Boden". Kein :hover-Effekt mehr auf dem Frame selbst: eine ganze Fläche soll nicht wie ein Button wirken, das war vorher nur ein Nebeneffekt der Rahmen-Grammatik. */ /* .master-frame: eine Definition in shared/modulseite.css (02.09.2026) */ /* Board-Untergrund (01.08.2026): kein Rahmen + Akzent-Oberkante mehr, sondern dieselbe Grammatik wie hero-value/portfolio-strip/module-card -- weiße Fläche mit Schatten. canvas-frame ist auf entwicklung.html, steuer.html und farben.html der Standard-Wrapper für so gut wie jeden Inhaltsblock (Charts, Rechenweg, Postenlisten, Annahmen, Farbcode- Sektionen) -- diese eine Regel zieht die Board-Optik automatisch über alle drei Seiten, weil sie css/styles.css teilen. Kein Hover-Effekt: das sind Inhaltsblöcke, keine anklickbaren Kacheln. */ /* Die Aussenkante steht seit dem 26.08.2026 in shared/modulseite.css -- hier stand `border:1px solid transparent` und hat sie unsichtbar gemacht, weil diese Datei spaeter geladen wird. Gate 22 findet das jetzt; es hat diese siebte Stelle gefunden, die ich beim Aufraeumen der ersten sechs uebersehen hatte. Genau dafuer sind Gates da. */ /* .canvas-frame: eine Definition in shared/modulseite.css (02.09.2026) */ /* .section-heading steht seit 02.09.2026 einmal in shared/modulseite.css. Hier stand dieselbe Regel mit den Rohwerten 18px und 20px. */ /* .section-heading h2: shared/modulseite.css (09.09.2026) */ /* ─── Hero: die eine große Zahl ─────────────────────────────────────────── */ .hero-value { background:var(--innenkarte-flaeche); border:1px solid var(--karten-linie); border-radius:var(--r-gross); /* --sp-4 rundum, nicht --sp-4/--sp-5 (09.09.2026, #130). Hier stand das Zweiwert-Polster, wurde aber 860 Zeilen weiter unten von einem zweiten `.hero-value { padding: var(--sp-4) }` ueberschrieben. Zu sehen war also immer schon --sp-4; die Angabe hier war seit ihrer Entstehung wirkungslos. Der spaetere Block ist weg, der wirksame Wert steht jetzt dort, wo man ihn sucht -- so wie es diese Datei bei .split-dot am 01.09.2026 schon einmal aufgeloest hat. */ padding: var(--sp-4); box-shadow: var(--shadow); /* KEIN margin-bottom mehr (25.08.2026). Der Abstand stammte aus der Zeit, als unter dieser Karte die Kachelreihe stand. Seit sie im Panel-Raster sitzt, addierte er sich zum Rasterabstand UND zum Kartenrand — gemessen 54 px Luft unter dem Inhalt, die niemand gesetzt hatte. Ein Abstand, der an einem Element klebt statt an seiner Umgebung, überlebt jeden Umbau und niemand sucht ihn dort. */ } .hero-value > span { display: block; color: var(--muted); font-size: var(--fs-fuss); text-transform: uppercase; letter-spacing: var(--ls-versal); font-weight: var(--fw-fett); margin-bottom: var(--sp-3); } /* Hier stand eine ZWEITE, vollstaendige Definition von .hero-value strong — dieselbe Datei, 900 Zeilen weiter oben (04.09.2026 gefunden). Gemessen, was davon ueberhaupt ankam: font-family aus DIESEM Block → bleibt, siehe unten font-size ueberschrieben, gleich letter-spacing ueberschrieben, gleich line-height ueberschrieben, gleich font-variant-numeric ueberschrieben, gleich font-weight: 700 ueberschrieben mit 600 → war seit je wirkungslos Fuenf Angaben waren Wiederholung, eine war eine tote Behauptung. Wer die Leitzahl fetter machen wollte, haette hier eine 700 gefunden, sie geaendert und nichts gesehen. check-drift fand es nicht: es vergleicht denselben Selektor in ZWEI Dateien, nicht zweimal in derselben. Aufgeloest — nur das font-family bleibt, weil der zweite Block es nicht setzt und die Leitzahl sonst die Grundschrift der Seite naehme. */ .hero-value strong { font-family: var(--font-body); } /* Nur die eine Zahl im Hub, nicht jede .hero-value der Suite (02.09.2026). Die Projektseite in Estate benutzt dieselbe Klasse fuer DREI Werte nebeneinander -- Kaufpreis, Restschuld, Rate. Dort waeren 48 px keine Hierarchie, sondern drei Plakate. Deshalb haengt die Groesse an der Sektion und nicht an der Klasse. */ #gesamtSection .hero-value strong { font-size: var(--fs-leitzahl-hub); } /* Aufschlüsselung als Balken: zeigt sofort, woraus sich das Vermögen speist. Der Balken steht in einer Zeile mit dem Zufluss-Streifen. */ /* KEINE Lücke (Korrektur 26.07.2026): mit Abstand und eigener Rundung sah der 11-px-Streifen wie ein hingesetzter Punkt aus, nicht wie Teil der Grafik. Jetzt schließt er unmittelbar an und ist nur RECHTS gerundet — dadurch liest er sich als letztes Segment des Balkens. Die inhaltliche Trennung, die vorher die Lücke geleistet hat, macht nun die Farbe: Violett gehört keiner Vermögensart. Wichtig bleibt, dass er technisch AUSSERHALB von #splitBar steht — die Prozentangaben der Segmente dort ergeben weiterhin 100 %, der Zufluss verfälscht die Aufteilung nicht. */ /* ═══ MODULFARBEN AN KICKER UND KLICKPFEIL (25.08.2026, Wunsch MWM) ═══════ Jede Modulkarte traegt ihre Rolle als data-farbe. Kicker und Pfeil holen sich die Farbe daraus — dieselbe, die das Modul auch im Balken und in seinem Ring hat. Die Werte kommen aus --serie-, die shared/palette.js beim Laden ins Dokument schreibt (setzePalette → setProperty). Dadurch wandert ein Palettenwechsel automatisch mit; als fester Hexwert im CSS waere er eingebrannt und die Karten wuerden bei jedem Wechsel ausbrechen. estate → immobilien (Orange) · depot → depot (Mint) · inout → plan (Indigo). Die Zuordnung der drei Modulschluessel zu den Farbrollen steht hier und nur hier. */ .module-card[data-farbe="estate"] { --modulfarbe: var(--serie-immobilien); } .module-card[data-farbe="depot"] { --modulfarbe: var(--serie-depot); } .module-card[data-farbe="inout"] { --modulfarbe: var(--serie-plan); } /* Vorbild (ModuleCard in entwurf-6.tsx): background:C[k].soft farbige Flaeche color: var(--v6-ink) SCHWARZE Schrift Ich hatte die Modulfarbe auf die Schrift gelegt statt auf die Flaeche — dadurch stand farbiger Text auf blassem Grund, zweimal dieselbe Farbe, und die Pille schrie lauter als der Kartentitel darunter. Die Flaeche traegt die Zugehoerigkeit, die Schrift traegt das Wort. FLAECHE, RAHMEN UND SCHRIFT stehen seit dem 26.08.2026 NICHT mehr hier, sondern in shared/modulseite.css unter `.brand-kicker.thema` — dieselbe Regel, die auch die Modulseiten benutzen. Vorher gab es zwei Rechnungen fuer denselben Farbton an zwei Orten; sie waren gleich gemeint und verschieden geschrieben (hier gegen transparent, dort zweischichtig). Seit dem 26.08.2026 traegt `.brand-kicker.thema` auch Groesse, Polster und Radius selbst — hier bleibt nichts mehr uebrig. Die Modulkarte im Hub und die Kopfzeile einer Modulseite zeigen damit buchstaeblich dieselbe Pille, aus derselben Regel, in derselben Datei. */ /* Der Pfeil sagt "hier geht es weiter" — er traegt dieselbe Farbe wie der Kicker, damit Ziel und Zugehoerigkeit dasselbe Signal haben. */ .module-card[data-farbe] .oeffnen-pfeil { color: var(--modulfarbe); } .split-legend b { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; } .split-legend .legend-pct { font-variant-numeric: tabular-nums; text-align: right; min-width: 3.4em; } .split-legend .legend-name { display: flex; align-items: center; gap: 7px; } /* ─── Perspektive: mit oder ohne selbstgenutzt (14.09.2026) ───────────────── Der Schalter sitzt im BLOCKKOPF, in dessen zweiter Rasterspalte -- dort, wo auch die Marke "Ist" steht. Beide sagen dasselbe: welchen Ausschnitt dieser Block zeigt. ER SASS ZUERST AN DER LEGENDE UND WAR DORT UNBEDIENBAR. Der Grund steht seit Juli 40 Zeilen weiter unten in dieser Datei: [data-baender="an"] .split-legend { opacity: .12 } Sobald der Zeiger die Hero-Karte betritt, legen sich die Herkunftsbaender darueber, und die Legende blendet auf 12 Prozent ab, damit sie lesbar bleiben. Ein Knopf darin war auf dem Weg dorthin weder zu sehen noch zu treffen (MWM: "dadurch kann ich nicht an die Button ran"). MERKSATZ: Ein Bedienelement gehoert nicht in eine Flaeche, die beim Ueberfahren zur Grafik wird. */ /* Leitzahl links, Schalter rechts, auf einer Zeile. align-items: end setzt den Schalter auf die Grundlinie der Zahl statt in ihre Mitte -- eine 39-px-Zahl hat viel Oberlaenge und wenig Unterlaenge, zentriert saesse der Knopf sichtbar zu hoch. */ .hero-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .perspektive-schalter { display: flex; justify-content: flex-end; } .perspektive-schalter .gruppe { display: inline-flex; border: 1px solid var(--karten-linie); border-radius: var(--r-bedien); overflow: hidden; background: var(--paper); } .perspektive-schalter button { font: inherit; font-size: var(--fs-xs); height: var(--knopfhoehe-tabelle); padding: 0 var(--sp-3); border: 0; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; transition: background var(--hover-dauer) var(--hover-kurve), color var(--hover-dauer) var(--hover-kurve); } .perspektive-schalter button + button { border-left: 1px solid var(--karten-linie); } .perspektive-schalter button:hover { background: var(--hover-flaeche); } .perspektive-schalter button[aria-pressed="true"] { background: var(--flaeche-invers); color: var(--flaeche-invers-text); font-weight: var(--fw-halbfett); } /* Was in der gewaehlten Perspektive HERAUSFAELLT, bleibt sichtbar -- gedaempft und mit "draussen" statt einem Prozentwert. Eine Zeile verschwinden zu lassen waere bequemer und falsch: die Weglassung IST die Aussage dieser Perspektive, und wer sie nicht sieht, haelt die Summe fuer das Ganze. */ .split-legend > span.aus .legend-name, .split-legend > span.aus b { opacity: .38; } .split-legend > span.aus .legend-pct { opacity: .38; font-style: italic; } /* Summenzeile der Ertragssicht (14.09.2026). Die Linie darueber ist dieselbe wie unter jeder Legendenzeile -- der Strich trennt nicht neu, er schliesst ab. Deshalb --karten-linie statt einer staerkeren Kante: eine Summe ist das Ende einer Liste, kein neuer Abschnitt. Sie steht direkt unter den Posten, die sie summiert, und VOR der ausgegrauten "draussen"-Zeile (siehe js/dashboard.js). */ .split-legend > span.summe > * { padding-top: var(--sp-2); border-top: 1px solid var(--karten-linie); border-bottom: 0; font-weight: var(--fw-halbfett); } .split-legend > span.summe .legend-pct { font-weight: var(--fw-normal); } /* ─── Bilanzzeile: brutto, Schulden, netto (14.09.2026) ───────────────────── Bis heute stand auf dem Hub keine einzige Verbindlichkeit -- eine Vermoegensuebersicht, auf der die Schulden fehlten. Sie stehen jetzt hier, als RECHNUNG und nicht als zweite grosse Zahl: brutto ist eine Zwischengroesse. Eine eigene Leitzahl daneben wuerde behaupten, man besaesse 1,39 Mio., wenn eine halbe Million davon der Bank gehoert. */ .bilanzzeile { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--karten-linie); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; } .bilanzzeile b { color: var(--ink); font-weight: var(--fw-halbfett); } .bilanzzeile .op { opacity: .6; } /* .monatsband und .band-kicker standen hier am 14.09.2026 fuer wenige Stunden und sind am selben Tag mit dem Bauteil entfallen. Kein Rest: eine Regel ohne Selektor im Markup ist eine Karteileiche, die beim Lesen wie eine gueltige Bauform aussieht -- genau der Fall, den check-drift Pruefung 3 meldet. */ .split-dot { width: 8px; height: 8px; border-radius:var(--r-kreis); display: inline-block; margin-right: var(--sp-2); } /* KPI-Kacheln. align-items:start + grid statt Flex-Höhenausgleich, damit Kacheln mit und ohne Info-Symbol exakt gleich hoch bleiben. Die Label-Zeile ist ein eigenes Flex mit fester Mindesthöhe: vorher rutschte das Info-Symbol in eine zweite Zeile, sobald der Text lang war, und schob die Zahl darunter nach unten — die vier Beträge standen dann nicht mehr auf einer Linie (Wunsch 26.07.2026: Symbol in die Label-Zeile, Zahlen bündig). */ /* ═══ PANEL-RASTER (25.08.2026) ═══════════════════════════════════════════ Links das Ganze (Zahl, Balken, Legende), rechts der Fluss und die Einstiege. 260 px feste Breite rechts, links der Rest — dieselbe Aufteilung wie im Entwurf, den MWM als Vorbild gewählt hat. Feste Breite und nicht 1fr 1fr: rechts stehen drei kleine Kacheln, deren Inhalt kaum wächst. Bekämen sie die halbe Karte, wäre die Legende links gequetscht, obwohl sie den Platz braucht. */ /* Quelle: src/routes/entwurf-6.tsx, der Block "Gesamtvermögen":
…
…
Zwei Dinge, die ich am 25.08.2026 falsch hatte: 1. gap ist 8px (gap-2), nicht 12 oder 14. 2. Die rechte Spalte hat KEINE Zeilenhöhen. Die drei Karten sind so hoch wie ihr Inhalt und stehen oben. Ich hatte sie auf 1fr gestreckt, damit die Spalte unten bündig abschließt — das blies die zwei Wegweiser auf Kachelgröße auf und zwang die linke Karte in eine Höhe, die ihr Inhalt nicht braucht. Ergebnis: eine hohe, leere Fläche. Die Luft unter der rechten Spalte ist gewollt. Der Bestand links ist die Aussage des Blocks; die drei Verweise rechts sind Randspalte, und eine Randspalte, die sich auf die Höhe des Haupttextes streckt, ist keine Randspalte mehr. */ .panel-raster { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-3); align-items: stretch; } /* ABWEICHUNG vom Vorbild (25.08.2026, Entscheidung MWM). In entwurf-6.tsx sind alle drei Karten inhaltshoch und die Spalte endet oberhalb der linken Karte. Martin will stattdessen einen bündigen unteren Abschluss — aber NICHT auf Kosten der beiden oberen Elemente: Zeile 1 auto Überschuss-Kachel — bleibt exakt so hoch wie ihr Inhalt Zeile 2 1fr Wertentwicklung ┐ teilen sich den Rest zu gleichen Zeile 3 1fr Steuerlich absetzbar ┘ Teilen, sind also gleich hoch Der Unterschied zu meinem ersten Versuch: dort stand repeat(3, 1fr) — das hat die Überschuss-Kachel mitgestreckt und den ganzen Block aufgeblasen. Gestreckt werden darf nur, was keine eigene Höhe zu verteidigen hat. GEMESSEN am 25.08.2026, beide Seiten im Browser (tools/mess-schnipsel.js): Vorlage wir (vorher) Zeilenhöhe 182,75 px 171,1 px linke Karte 183 159 ← blieb zurück rechte Spalte 183 171 ← ragte 12 px heraus Wegweiser je 44 37,6 Die Vorlage ist bündig, weil BEIDE Spalten auf die Zeilenhöhe strecken (align-self: auto). Ich hatte der linken Karte align-self: start gegeben — mit der Absicht, ihre Höhe zu schützen. Genau das hat den bündigen Abschluss verhindert: die Zeile war 171 hoch, die Karte blieb bei 159. Eine Karte, die sich weigert mitzuwachsen, kann nicht bündig abschließen. Beides zugleich geht nicht, und die Vorlage entscheidet sich fürs Bündige. 33 → 44 px Mindesthöhe der Wegweiser: ebenfalls gemessen, nicht geschätzt. Damit ergibt die rechte Spalte 80 + 8 + 44 + 8 + 44 = 184 px und liegt auf der Höhe der Vorlage (183). */ .panel-seite { display: grid; grid-template-rows: auto minmax(44px, 1fr) minmax(44px, 1fr); gap: var(--sp-3); } /* Die Überschuss-Kachel trägt dieselbe Bauform wie die drei Bestände darunter — nur ohne die dunkle Fläche, die sie vorher hatte. Das Hervorheben lag auf der falschen Zahl: der Überschuss ist kein Bestand, aber auch nicht wichtiger als einer. Seine Sonderstellung sagt jetzt der Ort, nicht die Farbe. */ /* .seite-kachel steht seit dem 26.08.2026 in shared/modulseite.css, gemeinsam mit .modul-kennzahl -- es ist dieselbe Kachel. Hier stand eine Kopie, die in vier Werten abwich; sichtbar wurde es an der Ueberschuss-Kachel im Hub, die groesser und enger sass als dieselbe Kachel auf den Modulseiten. Der OFFENE PUNKT im Kopf von modulseite.css ist damit zur Haelfte erledigt: .seite-kachel ist eingesammelt, .panel-raster/.panel-seite/.hero-value stehen noch aus. */ /* Die zwei Wegweiser sind EINZEILIG. Im Vorbild: {Titel} {Zusatz} Kein min-height, kein Blockpolster. Sie sind Zeilen, keine Kacheln — deshalb duerfen sie flacher sein als die Kachel darueber. */ .panel-seite .teaser { min-height: 0; padding: var(--sp-zelle) var(--sp-3); gap: var(--sp-2); border-radius: var(--r-bedien); box-shadow: none; } .panel-seite .teaser h3 { font-weight: var(--fw-mittel); padding-right: var(--sp-6); } @media (max-width: 900px) { .panel-raster { grid-template-columns: 1fr; } } /* .portfolio-strip: EINE Definition in shared/modulseite.css (09.09.2026, DRY-Audit #4). Hier stand die Hub-Fassung mit der Messung vom 04.09. (Label-zu-Zahl 17 -> 11 px, align-items flex-end, Reserve ueber --label-zeile) -- die drei Module hatten sie nie bekommen und standen auf dem Stand vom 26.07. Die Messung und ihre Begruendung stehen jetzt dort, wo die Regel gilt: fuer alle vier. */ /* DIE DUNKLE KACHEL HAENGT NICHT MEHR AN DER POSITION (04.09.2026, MWM: "ich bin son bisschen irritiert, wo die herkommt oder was sie macht"). Hier stand `.portfolio-strip > div:last-child`. Die Regel kam 1:1 aus dem Referenz-Mockup (asset-nest-clean-v3-board.html, .kpi-cell.accent) und war fuer EINE Kachel gedacht: "Ueberschuss / Monat" auf dem Hub, das Ergebnis der Rechnung. Ueber :last-child, weil sie damals immer die letzte war. Was daraus geworden ist, gemessen am 04.09.2026: Hub hat gar keine .portfolio-strip mehr — die Kachel, fuer die die Regel geschrieben wurde, gibt es nicht entwicklung.html faerbte "Effektiv p. a." (3,0 %) steuer.html faerbte "Grenzsteuersatz" (30,0 %) — eine ANNAHME, waehrend das Ergebnis "Das spart" weiss danebenstand estate/depot/inout gar nicht, weil die Regel nur in dieser Datei stand und die Modulseiten ihre eigene styles.css laden Die Betonung sass also auf der falschen Zahl, und wo sie richtig sass, war es Zufall der Reihenfolge. ARCHITEKTUR.md, Grundsatz 3, sagt es fuer Diagrammfarben: "Eine Farbe steht fuer eine Sache, nie fuer eine Position in einer Liste -- sonst wechselt eine Kategorie die Farbe, sobald sie groesser wird." Genau das war hier gebaut. Jetzt: .kachel-ergebnis in shared/modulseite.css, gesetzt an der Kachel, die das Ergebnis IST. Eine fuenfte Kachel verschiebt nichts mehr, und die Modulseiten kennen die Bauform ebenfalls. */ /* ─── Modul-Karten ────────────────────────────────────────────────────────── Jede Karte ist ein eigenständiger Frame im Suite-Look (gleiche Border-, Radius- und Hover-Werte wie .canvas-frame), nicht mehr eine weiße Kachel in einem gemeinsamen Rahmen. Das macht ohne Erklärtext deutlich, dass es drei getrennte, anklickbare Ziele sind. Der Pfeil unten rechts wandert beim Überfahren nach rechts — die zweite Klickbarkeits-Andeutung. */ /* Board-Untergrund (01.08.2026): #moduleSection bekommt denselben Zonen-Boden-Gedanken wie master-frame, aber als eigener, neutraler Ton (--zone-boden-b) statt Akzentfarbe — auf dem Hub gibt's damit zwei klar unterscheidbare Flächen (Vermögen warm, Module neutral), nicht "mehr vom selben Braun". Die Karten selbst lösen sich vom Rahmen+Akzent-Oberkante- Look und werden freistehende weiße Karten mit Schatten, wie die Kacheln im master-frame auch. WICHTIG: das ist bewusst weiterhin KEIN gemeinsamer canvas-frame um die drei Karten (siehe Kommentar am #moduleSection-Markup in index.html, Wunsch 26.07.2026) — die Karten bleiben einzeln sichtbar und einzeln anklickbar, der Zonen-Boden ist nur eine Fläche dahinter, kein umschließender Rahmen um alle drei. Test 01.08.2026 (Wunsch MWM): Zonen-Boden sitzt jetzt auf #moduleSection selbst statt nur auf .module-grid -- dieselbe Grammatik wie master-frame, wo .section-heading auch INNERHALB des Zonen-Bodens steht ("Da steht die Beschreibung ja auch im Wort mit drin"). Vorher lag der Kicker "MODULE" + Überschrift "Zu den Bereichen" auf dem nackten Seitenhintergrund, oberhalb der blauen Fläche -- jetzt trägt die Fläche beides, dieselben Randwerte wie master-frame (32px 30px 36px), macht sie sichtbar größer. */ /* Beschreibungssatz unter "Assets" (01.08.2026, Wunsch MWM) -- dieselbe Größenordnung wie .steuer-teaser p, eine Zeile Erklärung unter einem Karten-Kicker. Die Stand-Zeilen darunter (id="standEstateModule" etc.) brauchen keine eigene Regel: .stand-zeile/.stand-mehrfach aus shared/ui-icons.css gelten seitenweit, exakt die "gleiche Typo und Schriftgröße wie oben" (Wunsch MWM) -- dieselben Klassen wie bei den Stand-Zeilen im master-frame, nur mit eigenen IDs. */ #moduleSection .section-heading p { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-kicker); max-width: 520px; } #moduleSection { background:var(--zone-boden-b); border-radius: var(--r-gross); padding: var(--zone-polster); margin-bottom: var(--frame-gap); } .module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-3); } .module-card { display: block; text-decoration: none; color: inherit; cursor: pointer; /* War: Rahmen + 6px Akzent-Oberkante. Jetzt: wie im Referenz-Mockup (asset-nest-clean-v3-board.html) randlos, nur Weiß + Schatten. Der `border:1px solid transparent` bleibt trotzdem stehen (nicht ganz entfernt!) — sonst hat border-style den Wert "none" und die border-color-Übergänge beim Hover/Bänder-Highlight (weiter unten) greifen ins Leere: eine Farbe auf einem nicht existierenden Rahmen bleibt unsichtbar. */ background: var(--innenkarte-flaeche); box-shadow: var(--shadow); border-radius: var(--r-gross, 14px); padding: var(--sp-4) var(--sp-4) var(--sp-3); border:1px solid transparent; /* Dauer und Kurve aus den Tokens (09.09.2026, #131). Hier stand viermal `.18s ease`, waehrend shared/global.css fuer genau diesen Selektor --hover-dauer (.16s) setzt. Weil `transition` eine Kurzschreibweise ist und diese Datei spaeter laedt, gewann die rohe Fassung -- die geteilte Regel war fuer .module-card wirkungslos. Die Zeile bleibt trotzdem stehen, statt geloescht zu werden: sie animiert VIER Eigenschaften, die geteilte nur drei. `background` ist hier zusaetzlich. Ein spaeterer Kurzschreibweisen-Eintrag ersetzt den frueheren ganz, man kann also nicht eine Eigenschaft ergaenzen -- die vollstaendige Liste muss hier stehen. Nur eben mit den Tokens. */ transition: transform var(--hover-dauer) var(--hover-kurve), box-shadow var(--hover-dauer) var(--hover-kurve), background var(--hover-dauer) var(--hover-kurve), border-color var(--hover-dauer) var(--hover-kurve); transform-origin: center; } /* Deutliches Anfassen beim Überfahren: die Karte wächst, hebt ab und färbt sich stärker ein. scale() verändert das Layout NICHT — die Nachbarkarten bleiben stehen, die Karte legt sich einfach darüber. Deshalb braucht es auch das erhöhte z-index. 1.035 statt der gewünschten 1.1: bei 10 % würde eine Karte bei 20 px Abstand rund 20–40 px in die Nachbarn ragen und beim Drüberfahren sichtbar springen. Wer es kräftiger will, ändert nur diese eine Zahl. */ /* Hover: SYMMETRISCHER Glow rundum statt des alten asymmetrischen Schattens (26.07.2026). Vorher wurde nur die Oberkante weich (negativer y-Offset im box-shadow), Unter- und Seitenkanten blieben hart — je nachdem, wo man die Maus ansetzte, wirkte der Effekt wie zwei verschiedene. Jetzt ein Glow ohne Richtung (0 0 28px) plus ein leichter Bodenschatten fürs Abheben. OBERKANTE LÖST SICH AUF (Korrektur 26.07.2026, zweite Runde). Diese Karte war der einzige Ausreißer der ganzen Suite: alle acht anderen Rahmen — Hub, Estate, Depot, InOut, jeweils master und canvas — ziehen ihre farbige Oberkante beim Überfahren von .55 auf .28 herunter, sie hier blieb auf .55 stehen. Ergebnis: die Karte hob ab und leuchtete, aber der farbige Block oben blieb hart stehen und wirkte wie angeklebt, während die Portfolio-Übersicht in Estate_Nest an derselben Stelle weich wird. Zwei Dinge zusammen erzeugen das Auflösen, eines allein reicht nicht: die Kante wird DURCHSICHTIGER (.28), und ein nach OBEN gerichteter Schein (0 -5px 10px -3px) legt sich darüber. Nur blasser wäre bloß eine hellere harte Linie; nur der Schein ließe die Linie darunter stehen. Der richtungslose Glow bleibt zusätzlich — der Wunsch nach einem rundum gleichmäßigen Hover gilt weiter, das hier ist eine Ergänzung, kein Ersatz. */ /* Hover ohne Akzent-Oberkante: statt der Kante, die sich von .55 auf .28 auflöst (alte Rahmen-Grammatik), trägt jetzt allein der Glow + die Randfarbe den Effekt — dieselbe Bewegung (Karte hebt ab, färbt sich ein), nur ohne das Element, das es nicht mehr gibt. */ /* Beim Ueberfahren passiert fast nichts (25.08.2026, MWM: "kein orangener Schatten hinter der Karte, in Lovable vergroessern die Karten gar nicht"). Vorher: translateY(-4px) scale(1.035) plus ein 28px-Glow in der Akzentfarbe — auf einer tuerkisen oder blauen Karte ergab das einen orangefarbenen Hof, weil --accent-rgb die SEITENfarbe ist und nicht die der Karte. Zwei Farbwelten uebereinander, deshalb der schmutzige Eindruck. Jetzt nur die Linie: sie nimmt die Farbe des Moduls an, auf dem man steht. Kein Versatz, keine Skalierung — eine Karte, die beim Zeigen die Groesse wechselt, verschiebt ihre Nachbarn im Blick des Lesers mit. */ /* Antwort auf den Zeiger: shared/global.css, Abschnitt "WIE ETWAS AUF DEN ZEIGER ANTWORTET". Bewusst NICHT hier — sonst haette jede Karte wieder ihre eigene Staerke. */ /* position:relative, damit z-index beim Überfahren überhaupt greift */ .module-grid > .module-card { position: relative; } /* Kartentitel deutlich größer (Wunsch 26.07.2026): vorher 1.5rem gegen eine Zahl in 1.9rem — man sah zuerst den Betrag und erst danach, um welche Karte es überhaupt geht. Jetzt näher an der Sektionsüberschrift (2rem). */ /* Werte aus ModuleCard() in entwurf-6.tsx, Tailwind-Klasse jeweils daneben. */ .mk-kopf { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); } .mk-kopf .oeffnen-pfeil { margin-left: auto; } /* ─── Kartentitel: --fs-body → --fs-h4 (14.09.2026, MWM: "die Typo sieht zu klein aus") ──────────────────────────────────────────────────────────── GEMESSEN: der Titel stand auf --fs-body, also 13 px — derselbe Grad wie Fliesstext und Tabellenzelle. Von allem anderen auf der Karte unterschied er sich nur durch den Fettgrad. Das ist wenig fuer die Zeile, die das Modul BENENNT; sie ist der Einstieg in die Karte, nicht eine Angabe darin. Der Kommentar daneben sagte "text-[13.5px]" und verwies auf entwurf-6.tsx. Die Vorlage hat aber eine 16-px-Basis: 13,5 px sind dort 0,84 rem, bei unseren 13 px waeren das 10,9 px. Uebernommen wurde die ZAHL, nicht das VERHAELTNIS — derselbe Fehler wie beim Figma-Export am 05.09., der 16 px als rem-Basis annahm und alle Grade 23 Prozent zu gross auswarf. --fs-h4 (1.15rem = 15 px) ist die naechste Stufe nach oben und im Vertrag als "blocktitel" belegt — genau die Rolle, die diese Zeile hat. Die naechste Stufe darueber (--fs-sektion, 17 px) kaeme der Leitzahl der Karte (--fs-kpi, 19,5 px) zu nah; zwischen Titel und Zahl soll ein Abstand bleiben, sonst konkurrieren sie. */ .module-card h3 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: var(--fw-halbfett); line-height: 1.15; letter-spacing: var(--ls-titel); margin: 0 0 2px; } .module-card .module-sub { color: var(--muted); font-size: var(--fs-kicker); /* text-[11px] */ line-height: var(--lh-eng); margin: 0; } /* Zahl links, Ring rechts — in EINER Zeile (mt-2.5 flex items-center gap-3). Der Ring stand darunter und war doppelt so groß; die Karte war dadurch rund 170 px höher, ohne mehr zu sagen. */ .mk-zeile { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); } .mk-zahl { min-width: 0; } .module-card .module-figure { display: block; font-size: var(--fs-kpi); /* text-[19px] */ font-weight: var(--fw-halbfett); line-height: var(--lh-zahl); letter-spacing: var(--ls-titel); font-variant-numeric: tabular-nums; margin-top: var(--sp-1); } .module-card .module-figure-label { display: block; color: var(--muted); font-size: var(--fs-kicker); text-transform: uppercase; letter-spacing: var(--ls-versal); font-weight: var(--fw-halbfett); } .module-card footer { margin-top: var(--sp-2); padding-top: var(--sp-innen); border-top: 1px solid var(--line-soft); color: var(--muted); font-size: var(--fs-fuss); display: flex; justify-content: space-between; align-items: center; } /* Einheitlicher "Öffnen"-Pfeil (01.08.2026) — EINE Stelle für alle klickbaren Karten/Links der Suite, statt wie vorher pro Kontext dupliziert (.teaser-go mit Text "Öffnen →", .module-card footer .go mit Text "Öffnen →"). Nur noch der schräge Pfeil (↗ im HTML), kein Wort mehr. Position immer oben rechts in der Ecke, unabhängig davon, wo der Span im Markup steht — das Elternelement braucht dafür position:relative, das .teaser und .module-card bereits mitbringen. Künftige Kacheln/Links sollen dieselbe Klasse verwenden statt eine neue zu erfinden. */ /* .oeffnen-pfeil: Form UND Geste stehen jetzt zusammen in shared/global.css (09.09.2026, #131). Sie stand hier und in estate/css/styles.css byteidentisch — zwei Kopien, die sich nie auf derselben Seite begegnen. */ /* Antwort auf den Zeiger: shared/global.css, Abschnitt "WIE ETWAS AUF DEN ZEIGER ANTWORTET". Bewusst NICHT hier — sonst haette jede Karte wieder ihre eigene Staerke. */ /* Ring je Modul-Karte — feste Höhe, damit alle drei Karten gleich hoch bleiben */ /* 96 statt 76 px (25.08.2026, MWM: "den Ring etwas größer ziehen"). Bewusste Abweichung vom Vorbild, das bei 76 bleibt — unsere Mittelzahlen sind zweistellig mit Nachkomma ("28,3 %"), die des Vorbilds einstellig ("2,4 %"). Dieselbe Ringgröße trägt nicht dieselbe Textmenge. drawRing() misst die Lochbreite und verkleinert die Schrift, bis sie hineinpasst — die Zahl hier darf sich also ändern, ohne dass in charts.js jemand nachrechnen muss. */ .ring-wrap { margin-left: auto; flex-shrink: 0; } .ring-wrap canvas { width: 96px; height: 96px; display: block; } /* Legende als Zeilen, nicht als Fließtext: drei Beträge, die man vergleichen soll, gehören untereinander in eine Spalte. (space-y-1 border-t px-3.5 py-2) */ .ring-legend { display: flex; flex-direction: column; gap: 3px; margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--muted); min-height: 18px; } .ring-legend > span { display: flex; align-items: center; gap: var(--sp-2); } .ring-legend .ring-name { min-width: 0; } .ring-legend b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: var(--fw-mittel); } .ring-dot { width: 8px; height: 8px; border-radius:var(--r-kreis); display: inline-block; margin-right: 5px; } /* Zustands-Kennzeichnung (Ist / Soll / Ist + Soll) */ .scope-badge { font-family: var(--font-body); font-size: var(--fs-pille); font-weight: var(--fw-fett); letter-spacing: var(--ls-versal); text-transform: uppercase; padding: 5px 11px; border-radius:var(--r-pill); vertical-align: middle; background:rgba(var(--accent-rgb), var(--wash-mittel)); color: var(--accent); /* Dieselbe dezente Kante wie die grauen Kicker und die gelbe Statuspille: auf hellem Grund franst eine helle Flaeche ohne Linie aus (17.09.2026, MWM). */ border: 1px solid var(--pille-linie); margin-left: var(--sp-2); position: relative; top: -1px; } /* .scope-inline ist am 25.08.2026 entfallen — sie gestaltete das "· Ist" in der Unterzeile des Blockkopfs, und die Unterzeile gibt es nicht mehr. Eine Regel für ein Element, das niemand mehr erzeugt, macht die nächste Suche länger. Der Zustand steht weiterhin in .scope-badge neben der Überschrift. */ /* Einstiegskarte zur Steuer-Übersicht (innerhalb der Gesamtvermögens-Karte) */ .steuer-teaser { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); text-decoration: none; color: inherit; cursor: pointer; background:var(--innenkarte-flaeche); border:1px solid rgba(var(--accent-rgb), var(--wash-kraeftig)); border-radius:var(--r-gross); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow); } /* Antwort auf den Zeiger: shared/global.css, Abschnitt "WIE ETWAS AUF DEN ZEIGER ANTWORTET". Bewusst NICHT hier — sonst haette jede Karte wieder ihre eigene Staerke. SEIT 09.09.2026 STIMMT DAS AUCH (#131). Bis dahin stand zwei Zeilen darueber `transition: transform .18s ease, …` — genau die Staerke, die dieser Kommentar ausschliesst. Weil diese Datei nach shared/global.css laedt und `transition` eine Kurzschreibweise ist, gewann die lokale Fassung: die geteilte Regel war fuer .steuer-teaser wirkungslos, und der Kommentar beschrieb einen Zustand, den es nicht gab. Jetzt gelten die Tokens --hover-dauer/--hover-kurve wie ueberall (.16s statt .18s). */ .steuer-teaser h3 { font-family: Georgia, serif; font-size: var(--fs-sektion); font-weight: var(--fw-mittel); margin: var(--sp-3) 0 var(--sp-1); } .steuer-teaser p { margin: 0; color: var(--muted); font-size: var(--fs-kicker); max-width: 620px; } .steuer-teaser .go { color: var(--accent); font-weight: var(--fw-fett); white-space: nowrap; transition: transform .18s; } /* ─── Steuer-Seite ──────────────────────────────────────────────────────── */ .block-title { font-family: Georgia, serif; font-size: var(--fs-h4); font-weight: var(--fw-mittel); margin: 26px 0 var(--sp-3); } .block-title:first-of-type { margin-top: 0; } /* Rechenweg: Label links, Betrag rechts, Zwischensummen abgesetzt */ .calc-list { display: flex; flex-direction: column; } .calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: 11px var(--sp-4); border-bottom: 1px solid var(--hover-flaeche); font-size: var(--fs-xs); } .calc-row:last-child { border-bottom: none; } .calc-row.strong { background:var(--paper); border-radius:var(--r-bedien); margin: var(--sp-2) 0; border-bottom: none; font-weight: var(--fw-fett); font-size: var(--fs-body); box-shadow: var(--shadow); } .calc-label { display: flex; flex-direction: column; gap: 2px; } .calc-label small { color: var(--muted); font-size: var(--fs-pille); font-weight: var(--fw-mittel); } .calc-val { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--fw-halbfett); } .calc-val.neg, .pos-val.neg { color: var(--bad); } /* Positionslisten auf der Steuerseite */ .pos-list { display: flex; flex-direction: column; gap: 3px; } .pos-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-zelle) var(--sp-4); border-radius:var(--r-bild); background:var(--paper); font-size: var(--fs-xs); } .pos-row .pos-name { flex: 1; font-weight: var(--fw-mittel); } .pos-row .pos-meta { color: var(--muted); font-size: var(--fs-pille); text-align: right; } .pos-row .pos-val { font-variant-numeric: tabular-nums; font-weight: var(--fw-halbfett); white-space: nowrap; min-width: 96px; text-align: right; } .pos-row.pos-total { background:rgba(var(--accent-rgb), var(--wash-leicht)); font-weight: var(--fw-fett); margin-top: var(--sp-2); } /* Eingabefelder für die Annahmen */ .annahmen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); } .annahmen-grid label { display: flex; flex-direction: column; gap: var(--sp-innen); font-size: var(--fs-fuss); font-weight: var(--fw-fett); color: var(--muted); text-transform: uppercase; letter-spacing: var(--ls-versal-eng); } .annahmen-grid input[type="number"] { border:1px solid var(--karten-linie); border-radius:var(--r-bedien); padding: 11px 13px; background:var(--paper); font-size: var(--fs-body); font-weight: var(--fw-halbfett); color: var(--ink); font-variant-numeric: tabular-nums; } .annahmen-grid input:focus { outline: none; border-color:var(--accent); } .annahmen-grid small { font-size: var(--fs-pille); font-weight: var(--fw-mittel); text-transform: none; letter-spacing: var(--ls-null); color: var(--muted); } .check-label { justify-content: flex-start; } .check-label span { text-transform: none; letter-spacing: var(--ls-null); color: var(--ink); font-size: var(--fs-sm); } .check-label input { width: 18px; height: 18px; } .notice-warn { border-style: solid; border-color:rgba(var(--accent-rgb), var(--wash-kraeftig)); } /* ─── Hinweise ──────────────────────────────────────────────────────────── */ .notice { border:1px dashed rgba(var(--accent-rgb), var(--wash-voll)); background:var(--frame-bg-canvas); /* 22px stand hier bis 03.09.2026 -- ein Wert, den die Abstandsleiter nicht kennt (12/16/20/24). Auf --sp-5 gebracht: zwei Pixel, die niemand sieht, aber ein Wert, der beim naechsten Engerstellen der Leiter mitgeht. */ border-radius:var(--r-gross); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); font-size: var(--fs-xs); color: var(--ink); } .notice b { font-weight: var(--fw-fett); } .notice a { color: var(--accent); } /* .version-tag: shared/global.css (09.09.2026) */ /* .portfolio-strip- und .dashboard-shell-Umbrueche: shared/modulseite.css (09.09.2026) */ /* ─── Einstiegs-Kacheln (Wertentwicklung, Steuer) ──────────────────────────── Nebeneinander, ohne Erklärsatz, ohne farbige Oberkante (Wunsch 26.07.2026). Vorbild sind bewusst die PROJEKTKARTEN aus Estate_Nest, nicht die Frames: eine schlichte Umrandung, die beim Überfahren aufleuchtet. Die 4-px-Kante oben gehört zu den großen Karten und markiert dort eine Ebene der Hierarchie — auf einem Einstieg wirkt sie wie ein Reiter und macht die Kachel präsenter als das, wozu sie führt. Schrift auf 1.05rem statt 1.45rem: das ist ein Knopf, keine Überschrift. Er soll auffindbar sein, nicht mit der großen Zahl darüber konkurrieren. */ /* .teaser-paar ist am 25.08.2026 entfallen: die zwei Einstiege sitzen jetzt in der rechten Panel-Spalte (.panel-seite), untereinander statt nebeneinander. Die .teaser-Regel darunter gilt unveraendert weiter — sie beschreibt die Kachel selbst, nicht ihre Anordnung. */ /* .teaser steht seit dem 26.08.2026 in shared/modulseite.css. Sie war hier und damit nur im Hub verfuegbar -- auf der InOut-Seite fiel derselbe Wegweiser auf einen nackten Link zurueck, blau und unterstrichen. Dritter Fall desselben Musters an einem Tag (nach .io-verlauf-btn und .zeile-griffe): eine Klasse, die eine geteilte Bauform beschreibt, lebt in einem Modul. Sie sieht dort richtig aus, solange niemand sie anderswo benutzt -- und beim ersten Versuch sieht man nicht, dass sie fehlt, sondern nur, dass es haesslich ist. */ /* Eine Zeile, kein Fettdruck (25.08.2026, MWM). Vorher 1.05rem/700 — auf 13px-Basis derselbe optische Fettgrad wie die Leitzahl daneben, obwohl das hier nur ein Wegweiser ist. Ein Link, der so laut ruft wie das Ergebnis, verwischt die Rangfolge der Seite. nowrap erzwingt die eine Zeile; wenn ein künftiger Titel nicht mehr passt, ist das ein Textproblem, kein Layoutfall. */ /* .teaser h3 und .teaser-zusatz STANDEN HIER ZWEIMAL (entfernt 03.09.2026). Wortgleich mit shared/modulseite.css:348 und :353 -- bis auf die font-family, die dort ohnehin von body geerbt wird. Nicht kaputt, aber die Vorstufe: css/styles.css laedt NACH modulseite.css und gewann damit still. Wer die Bauform in modulseite.css aendert, sieht die Aenderung auf dem Hub nicht -- und sucht sie dort, wo sie steht. Genau der .master-frame-Fall vom 02.09.2026, eine Etage tiefer. Der Kommentar oben ueber den Fettgrad ist mitgewandert; er begruendet die Regel, und Begruendungen gehoeren zu ihrer Regel. */ /* Antwort auf den Zeiger: shared/global.css, Abschnitt "WIE ETWAS AUF DEN ZEIGER ANTWORTET". Bewusst NICHT hier — sonst haette jede Karte wieder ihre eigene Staerke. */ @media (max-width: 700px) { .teaser-paar { grid-template-columns: 1fr; } } /* Seitenmenü: alle Regeln liegen seit 26.07.2026 in shared/seitenmenu.css. Sie standen hier viermal fast gleich — siehe tools/menuversuch/zuruecksetzen.md. */ /* ─── Diagramme dürfen aus ihrem Rahmen nicht ausbrechen ────────────────────── Dieselbe Vorsorge wie in den drei Modulen (Bug 26.07.2026, DepotCash_Nest). Chart.js schreibt bei responsive:true eine feste Pixelbreite ins canvas-Attribut; ohne diese Überschreibung wächst der Canvas mit dem Fenster, schrumpft aber nie wieder, weil sein Elternelement als Grid-Kind eine min-width von auto hat und damit nicht unter die Canvasbreite kann. Hier steht die Regel VORSORGLICH: die Wertentwicklungsseite hat ihre .chart-tall-Blöcke heute untereinander, nicht im Raster. Sobald jemand sie zweispaltig stellt, greift die Falle sofort — und dann sucht man den Fehler im Layout, nicht bei Chart.js. */ .chart-tall { position: relative; height: var(--diagramm-hoehe); min-width: 0; } .chart-tall canvas { width: 100% !important; height: 100% !important; display: block; } /* ═══ Herkunftsbänder (js/baender.js) ═══════════════════════════════════════ Beim Überfahren der großen Zahl gehen Bänder von der Unterkante der Karte "Netto über alle Module" hinunter zu den Modulkarten. Z-INDEX 20 — ÜBER ALLEM. Zwei Fehlversuche davor: · unter den Frames: der weiße Kartengrund deckte sie ab, sie tauchten erst unter dem Frame wieder auf und schienen aus dem Nichts zu kommen; · am Frame-Fuß statt an der Karte: nicht mehr verdeckt, aber ohne sichtbaren Bezug zur Zahl — zwischen beiden lagen vier Kacheln. Unkritisch, weil pointer-events: none: das SVG fängt keinen Klick ab, alles darunter bleibt anfassbar. DAS ABBLENDEN IST KEIN SCHMUCK, sondern die Bedingung dafür. Die Bänder laufen über die KPI-Kacheln und die beiden Einstiege hinweg. Bleiben die auf voller Deckkraft, liest man Farbe über Text — unlesbar beides. Deshalb ist das ein MOMENT und nie ein Dauerzustand. */ .herkunft-svg { position: absolute; inset: 0; pointer-events: none; /* 15: über allem im Inhaltsbereich, aber unter dem Seitenmenü (49) und weit unter dem Tooltip (9999 in shared/ui-icons.css). Die Versionsangabe unten links liegt ebenfalls auf 20 — die Bänder sollen sie nicht überdecken. */ z-index: var(--z-schweben); overflow: visible; } [data-baender="an"] .split-legend, [data-baender="an"] .portfolio-strip, [data-baender="an"] .panel-seite, [data-baender="an"] #moduleSection .section-heading { opacity: .12; } .split-legend, .portfolio-strip, .panel-seite, #moduleSection .section-heading { transition: opacity .2s ease; } /* Die Zielkarten treten hervor, damit die Bänder erkennbar auf sie zeigen. Sie bleiben dabei voll deckend — sie sind das Ziel, nicht der Weg. */ /* Die Karten bleiben UNTER dem SVG (Korrektur 26.07.2026, zweite Runde). Kurzzeitig lagen sie darüber (z-index 25), damit die Bänder sich unter ihnen verstecken konnten — das schloss die Ecken-Lücke, nahm aber den Eindruck, dass Band und Karte zusammengehören. Jetzt läuft das Band 14 px auf die Karte HINAUF und ist dort sichtbar. Deshalb kein z-index hier: das SVG (15) muss gewinnen. Die 14 px sind so bemessen, dass der Kicker-Badge frei bleibt — siehe UEBER_KARTE in js/baender.js. Wer den einen Wert ändert, muss den anderen mitdenken. */ /* Solange die Bänder liegen, zeigen die Zielkarten ihre Zugehörigkeit — über die MODULFARBE, nicht über --accent (25.08.2026). Der Akzent ist die Farbe der SEITE; auf einer türkisen Karte ergab er einen orangefarbenen Hof. Grauer Schatten wie überall, die Farbe trägt allein die Linie. */ /* Antwort auf den Zeiger: shared/global.css, Abschnitt "WIE ETWAS AUF DEN ZEIGER ANTWORTET". Bewusst NICHT hier — sonst haette jede Karte wieder ihre eigene Staerke. */ /* Die große Zahl geht beim Überfahren leicht auf (Wunsch 26.07.2026). 1.012 auf rund 1.300 px Breite sind bereits 16 px Zuwachs; bei 3 % würde die Karte sichtbar über ihren Frame hinausragen. Die Skalierung ist unschädlich für die Bänder, weil deren Startkante über offsetTop gemessen wird — offsetTop kennt Transformationen nicht. Genau deshalb wird hier offsetTop und nicht getBoundingClientRect benutzt. NUR MIT .reagiert (Korrektur MWM 26.07.2026). Vorher galt die Regel für JEDE .hero-value — und die Klasse sitzt auf neun Kacheln in vier Dateien: Entwicklung, Estate-Projektseite (siebenmal), Hub. Dort ist die Bewegung sinnlos bis irreführend: sie verspricht eine Reaktion, die es nicht gibt. Auf dem Hub verspricht sie eine, die es gibt — dort hängen die Bänder daran. Deshalb wird sie angefordert statt vererbt. */ .hero-value { cursor: default; outline: none; transform-origin: center top; } .hero-value.reagiert { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } /* NICHT :hover, sondern eine Klasse (Korrektur MWM 26.07.2026). :hover endet an der Elementkante — die Kachel schrumpfte also in dem Moment, in dem der Zeiger nach unten den Bändern folgte, während die Bänder liegen blieben. Ergebnis: die Grafik sprang, weil sich ihr Startpunkt bewegte, obwohl der Vorgang weiterlief. Jetzt setzt js/baender.js die Klasse `haelt` — dieselbe Quelle, die auch über die Bänder entscheidet. Zwei Dinge, die zusammengehören, können damit nicht mehr auseinanderlaufen. :focus-visible bleibt für den Tastaturweg. */ /* Antwort auf den Zeiger: shared/global.css, Abschnitt "WIE ETWAS AUF DEN ZEIGER ANTWORTET". Bewusst NICHT hier — sonst haette jede Karte wieder ihre eigene Staerke. */ .split-bar div { cursor: default; } /* Art-Angabe unter dem Namen in der Tabelle "Was ausserhalb der App laeuft". Kleiner und gedaempft, weil sie einordnet statt zu benennen. */ .dt-klein { font-size: var(--fs-pille); color: var(--muted); } /* Fussnote unter einem Diagramm — was die Kurve NICHT zeigt. Bis 24.08.2026 stand diese Regel nur in depot/css/styles.css; InOut hatte keine und brauchte auch keine. Jetzt braucht der Ausgaben-Ring eine, und eine zweite gleichlautende Definition waere genau die Drift, vor der check-tokens warnt. Deshalb hier, fuer alle vier Apps. */ /* Auf Depots Fassung gebracht (09.09.2026, #131). Dort steht die Begruendung fuer den Schriftgrad: "--fs-fuss ist die Stufe 'Fusszeile, Hinweis'" -- eine Rollenentscheidung vom 26.08.2026, die hier nie ankam. Diese Kopie blieb auf --fs-pille und einem anderen Abstand. Drei Typografiewerte auseinander sind genau das, was die Schriftskala verhindern soll. SICHTWECHSEL: die Fussnoten des Hubs werden eine Stufe groesser. */ .chart-footnote { margin: var(--sp-2) 0 0; font-size: var(--fs-fuss); color: var(--muted); line-height: 1.45; } /* ═══════════════════════════════════════════════════════════════════════════ ZAHLENFELDER OHNE PFEILCHEN (Wunsch MWM 24.08.2026) ═══════════════════════════════════════════════════════════════════════════ Die kleinen Auf-/Ab-Pfeile, die Browser an haengen, sind hier ueberall raus. Nicht nur Geschmack: sie sitzen genau dort, wo der Betrag rechtsbuendig endet, und schieben ihn beim Darueberfahren um ein paar Pixel nach links. In einer Spalte mit zwanzig Betraegen sieht man das sofort. Dazu die Schrittweite: bei step="0.01" bewegt ein Klick den Betrag um einen Cent — niemand klickt sich von 40 auf 92. `appearance: textfield` allein reicht nicht: Chrome und Safari brauchen zusaetzlich die -webkit-Pseudoelemente, Firefox nur die Standard-Angabe. Deshalb beide. Die Tastatur-Pfeile funktionieren weiterhin — das ist eine andere Bedienung und stoert niemanden. */ /* Die Regel steht seit 25.08.2026 in shared/global.css und gilt damit fuer alle dreizehn Seiten. Hier stand sie allein -- Depot, Estate und InOut zeigten die Pfeile weiter. Dasselbe Muster wie bei hidpiContext(): eine Loesung, die nur an einem von vier Orten steht, ist keine. */ /* ═══════════════════════════════════════════════════════════════════════════ SPRUNGZIEL HERVORHEBEN (shared/anker.js) ═══════════════════════════════════════════════════════════════════════════ Wer aus InOut auf den Quell-Pfeil klickt, landet auf einer langen Seite mit dreissig Feldern. Ohne Markierung weiss er nicht, welches gemeint war — der Sprung waere dann nur ein Seitenwechsel. Kurz und ohne Farbwechsel des Feldes selbst: ein Rahmen, der aufleuchtet und wieder vergeht. Eine dauerhafte Einfaerbung wuerde als Zustand missverstanden ("dieses Feld ist besonders"), und das ist es nicht — es war nur eben das Ziel. */ @keyframes ziel-blitz { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.55); } 35% { box-shadow: var(--fokus-ring); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); } } .ziel-blitz { animation: ziel-blitz 2.2s ease-out; border-radius: var(--r-bedien); } /* Wer Bewegung abgestellt hat, bekommt die Markierung trotzdem — nur stehend statt pulsierend. Die Information darf nicht an der Animation haengen. */ @media (prefers-reduced-motion: reduce) { .ziel-blitz { animation: none; box-shadow: var(--fokus-ring); } } /* ─── Datenstand als Fußzeile (25.08.2026, MWM) ────────────────────────────── Stand jeweils zweimal auf der Seite: einmal unter "Assets · Gesamtvermögen", einmal unter "Assets". Dieselben drei Zeitpunkte, aus derselben Funktion, nur mit anderen IDs — eine Verdopplung ohne Zusatznutzen, die zweimal Platz im wichtigsten Bereich der Seite kostete. Jetzt einmal, ganz unten, unter dem letzten Frame. Ein Datenstand ist eine Randnotiz zur ganzen Seite, keine Eigenschaft eines einzelnen Blocks — und Randnotizen gehören an den Rand. */ .stand-fuss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); color: var(--muted); opacity: .7; } .stand-fuss .stand-zeile { font-size: var(--fs-fuss); } /* Trennpunkt ZWISCHEN den Angaben, nicht hinter jeder — sonst endet die Zeile auf einem Punkt, der nichts mehr trennt. */ .stand-fuss .stand-zeile + .stand-zeile::before { content: "·"; margin-right: var(--sp-3); opacity: .55; } /* ═══ GESAMTVERMÖGENS-BLOCK — nachgebaut aus src/routes/entwurf-6.tsx ══════ 25.08.2026. Jede Zahl hier steht in der Vorlage; die Tailwind-Klasse ist jeweils danebengeschrieben, damit beim nächsten Abgleich niemand wieder messen muss, was man lesen kann. Vorgeschichte: drei Runden lang habe ich Werte geschätzt und nachjustiert, was Martin am Bildschirm auffiel. Das wurde von Runde zu Runde schlechter, weil jede Korrektur eine andere Stelle verzog. Ursache war nicht ein falscher Wert, sondern die Methode. */ /* Block():
*/ /* ═══ DIE ZWEI HUB-UEBERSCHRIFTEN AUSGEMESSEN (17.09.2026) ═══════════════ MWM: "messe hier nochmal die Abstaende von Ueberschrift und Frame und setze die Ueberschriften Assets · Gesamtvermoegen und Assets etwas groesser" NACHGEMESSEN — die beiden standen in drei Werten auseinander: Assets · Gesamtvermoegen Assets Huelle .block-kopf .section-heading Schriftgrad --fs-kpi 19,5 px --fs-sektion 17 px Pille → Ueberschrift --sp-2 8 px 7 px (Rohwert!) Ueberschrift → Frame --sp-3 12 px --sp-5 20 px Beide sind Ueberschriften derselben Ordnung: sie benennen einen Bereich der Hub-Seite und stehen VOR dem Rahmen, nicht darin. Dass sie verschieden gross sind und verschieden weit vom Rahmen abstehen, war kein Entwurf, sondern zwei Bauformen, die nie nebeneinander gemessen wurden. Jetzt: gleicher Grad --fs-h1 (22 px, eine Stufe ueber dem bisherigen groesseren der beiden), gleiche 8 px darueber, gleiche 16 px darunter. OFFEN, NICHT HIER GELOEST: `.section-heading h2` traegt in shared/modulseite.css `margin: 7px 0 0` — ein Rohwert neben der Skala, auf ALLEN Modulseiten. Ihn zu korrigieren waere ein Sichtwechsel auf einem Dutzend Seiten, nicht Teil dieser Bitte. Hier wird er nur fuer den Hub ueberschrieben. NACHTRAG 17.09.2026: die Groesse ist inzwischen keine Hub-Sache mehr. MWM hat sie zur festen Regel fuer alle Modul-, Analyse- und Steuerseiten gemacht -- sie kommt jetzt aus --fs-abschnittstitel und steht fuer .section-heading h2 in shared/modulseite.css. Hier bleibt nur, was wirklich Hub-eigen ist: die ABSTAENDE der beiden Bereichskoepfe, die vorher 12 px und 20 px auseinanderlagen. */ .block-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-3); /* 17.09.2026: derselbe Abstand wie jede andere Ueberschrift, jetzt aus --titel-abstand. Der Hub war das Vorbild fuer den Faktor 0,75 -- er braucht deshalb keine eigene Zahl mehr. */ margin-bottom: var(--titel-abstand); } /* ═══ GEWICHT WAR VERTAUSCHT (17.09.2026) ════════════════════════════════ MWM: "in den beigefarbenen Karten hast du eine regulaere Schrift genommen und unten in den blauen Modulen eine fette — genau andersrum. Beigefarben steht oben drueber, ist der Head, der muss akzentuiert werden." NACHGEMESSEN, und er hat recht: beige oben .block-kopf h2 --fw-halbfett 600 blau unten #moduleSection .section-heading h2 --fw-fett 700 Die obere Ueberschrift benennt den Hauptblock der Seite, die untere eine Gruppe von Verweisen darunter. Das Gewicht sagte das Gegenteil. Getauscht: 700 oben, 600 unten. Der Grad bleibt bei beiden 22 px -- die Rangfolge traegt das Gewicht, nicht die Groesse; zwei Unterschiede fuer eine Aussage waeren einer zu viel. NUR HUB: auf den Modulseiten bleibt .section-heading h2 bei --fw-fett. Dort steht die Ueberschrift nicht unter einer zweiten, staerkeren. */ .block-kopf h2 { font-size: var(--fs-abschnittstitel); font-weight: var(--fw-fett); letter-spacing: var(--ls-titel); margin: var(--sp-2) 0 0; line-height: 1.2; } /* Die eigene margin-bottom-Zeile fuer #moduleSection ist am 17.09.2026 entfallen: sie sagte dasselbe wie .section-heading, nur an einer zweiten Stelle. Zwei gleiche Werte an zwei Orten sind keine Regel, sondern ein Zufall, der beim naechsten Mal nicht mehr zutrifft. */ #moduleSection > .section-heading h2 { margin: var(--sp-2) 0 0; font-weight: var(--fw-halbfett); } .block-sub { font-size: var(--fs-xs); /* text-[11.5px] */ color: var(--muted); margin: 2px 0 0; } /* Card p-4 — die Karte trägt keine eigene Überschrift mehr, nur Inhalt. */ /* .hero-value padding: steht jetzt oben in der Grunddefinition (#130). */ .hero-value strong { display: block; font-size: var(--fs-leitzahl); /* text-[26px] */ font-weight: var(--fw-halbfett); /* font-semibold, NICHT 700 */ line-height: var(--lh-zahl); /* leading-none */ letter-spacing: var(--ls-titel); font-variant-numeric: tabular-nums; } /* ═══ ABSTAND UNTER DER LEITZAHL (04.09.2026, MWM: "stimmt der abstand zwischen 1.595.020 € und balken, erscheint mir etwas dicht") ════════════ Gemessen an der laufenden Seite: Unterkante der Zahl 384,2 px, Oberkante des Balkens 384,2 px. NULL. Mit line-height 1 ragen die Unterlaengen von "€" und Punkt sogar 1,9 px IN den Balken hinein. Es fehlte aber keine Entscheidung — die stand schon da, eine Zeile tiefer: `.split-zeile { margin-top: var(--sp-3) }`, also 12 px. Nur haengt sie an einer HUELLE. index.html wickelt den Balken in .split-zeile und bekommt die 12; entwicklung.html setzt .split-bar direkt unter die Zahl und bekommt nichts. Zwei Seiten, dieselbe Bauform, ein Abstand — weil er an einem Element haengt statt an einer Beziehung. Dieselbe Bauart wie .modul-panel (02.09.) und .teaser-zusatz (04.09.): nicht falsch entschieden, sondern die Entscheidung reicht nicht hin. Der Zusatz unten faengt den direkten Fall. Ergebnis nachgemessen, beide Leisten: kicker → Zahl 12, Zahl → Balken 12, Balken → Legende 8. */ .split-zeile, .hero-value > strong + .split-bar { margin-top: var(--sp-3); } /* mt-3 */ /* .split-legend margin-top: steht jetzt oben in der Grunddefinition (#130). */ /* Legendenzeile: py-1.5 flex items-center gap-2, Trennung nur ZWISCHEN den Zeilen (divide-y), nicht unter der letzten. */ .split-legend > span { padding: var(--sp-innen) 0; } .split-legend > span:first-child { padding-top: 0; } .split-legend > span:last-child { padding-bottom: 0; } .split-legend .legend-name { font-size: var(--fs-sm); } /* 12.5px */ .split-legend b { font-size: var(--fs-sm); font-weight: var(--fw-halbfett); } .split-legend .legend-pct { font-size: var(--fs-kicker); color: var(--muted); } /* 11px */ /* .split-dot war hier ein ZWEITES Mal definiert (01.09.2026, gefunden vom neuen Rollen-Gate). Zeile 263 setzt 9x9 px mit --r-kreis, diese Regel ueberschrieb sie 700 Zeilen spaeter auf 8x8 mit --r-bild -- der Punkt war damit kein Punkt mehr, sondern ein Quadrat mit 6 px Rundung. Zwei Regeln fuer denselben Selektor in derselben Datei: die spaetere gewinnt, ohne dass es jemand beim Lesen der ersten sieht. Die Groesse 8x8 uebernimmt jetzt die Regel oben. */ /* ═══ UMGEZOGEN AM 16.09.2026 ══════════════════════════════════════════════ Die Bauformen .split-bar / .split-legend und der gesamte METRICS-Block (leitzeile, zielband, ertrag-liste, objekt-zeile, frame-paar, quelle, kachel-fuss, stellschrauben) stehen jetzt in shared/modulseite.css. Grund: sie waren fuer entwicklung.html gebaut und lagen deshalb hier -- aber css/styles.css laedt nur der Wurzel-Bereich. inout/analyse.html, depot/ und estate/ laden shared/modulseite.css. Solange die Klassen hier standen, war jede weitere Metrics-Seite auf Kopieren angewiesen, und kopiertes CSS ist die Art von Doppelung, die erst beim dritten Mal auffaellt. Was hier bleibt: nur, was WIRKLICH nur die Wurzelseiten brauchen. */