/* Die EINE Typo-Treppe von AccelNexus (N9.3, Design-Fund D7). Vorgeschichte: Es gab vier Token — und daneben 86 hart kodierte Größen in px und rem. Der normale Fließtext der Büro-Oberfläche rendete 16 px, obwohl `--fs-body` 14 px sagt, weil `body` gar keine `font-size` setzte und alles die Dokument-Basis erbte. Die Handy-App führte in `pwa.css` eine ZWEITE `:root`-Liste ohne Typo-Token; ihre rem-Werte (0,85–1,3 rem) landeten auf keiner Stufe der Treppe. Gemessen wurden bis zu acht verschiedene Größen auf einem Bildschirm. ENTSCHEIDUNG (N9.3): Die 16 px bleiben. Sie werden als fünfte Stufe `--fs-ui` AUFGESCHRIEBEN, statt die ganze Oberfläche auf 14 px zu schrumpfen — das wäre eine Neugestaltung, keine Reparatur, und hätte jede Knopfhöhe mitgenommen. `--fs-body` bleibt die Stufe für dichte Flächen (Tabellenzellen, Listenzeilen), `--fs-ui` ist der Fließtext und alles Bedienbare. --fs-small 12,5 px Abzeichen, Hilfstexte, Meta-Zeilen (Untergrenze!) --fs-body 14 px Tabellen, Listenzeilen, dichte Flächen --fs-ui 16 px Fließtext, Knöpfe, Felder — die Basis von `body` --fs-card 17 px Karten- und Abschnitts-Überschriften --fs-page 22 px Seitentitel (h1) --fs-display 30 px die EINE große Zahl (Handy-Kachel) — Ausnahme, und genau deshalb benannt ND1: --fs-leiste 13 · --fs-handy-zahl 26 · --fs-marke 46 (nur „Edles Dunkel“, siehe unten); ND2.1: --fs-tabelle-kopf 14,5 Unter 12 px gibt es nichts. Ein Abzeichen wird über Innenabstand und `line-height` kompakt, nicht über die Schriftgröße (Fund D13). Diese Datei wird von JEDER Seite als ERSTES Stylesheet geladen — Büro, Login, Recht, Buchungsseite und Handy-App. Damit gibt es eine Quelle statt zweier, die auseinanderlaufen können. */ :root { --fs-small: 12.5px; --fs-body: 14px; --fs-ui: 16px; --fs-card: 17px; --fs-page: 22px; --fs-display: 30px; /* ND1 (U38, Design „Edles Dunkel“, docs/DESIGN-NACHTGLAS.md): drei Stufen, die nur das neue Design benutzt — weiter EINE Quelle, kein px daneben. --fs-leiste 13 px Seitenleiste, Kachel-Name (Konzept §3, §5); ND1.1: Gruppentitel der Leiste (Einträge --fs-body) --fs-handy-zahl 26 px große Zahl der Handy-Kachel (Konzept §9) --fs-marke 46 px Schriftzug „AccelNexus“ der Anmeldung (Konzept §8) */ --fs-leiste: 13px; --fs-handy-zahl: 26px; --fs-marke: 46px; /* ND2.1 (Konzept §7, Freigabe Vahid 03.10.2026): die Kopfzeile einer Tabelle steht einen Tick größer als ihre Zeilen (14,5 zu 14 px) — eine eigene, benannte Stufe statt eines px-Werts in der Modul-Datei. */ --fs-tabelle-kopf: 14.5px; /* ND2.1.1 (H2, Handy-Sichtung Vahid 04.10.2026): die große Zahl der Handy-Kachel wächst mit, wenn Wort und Zeilen eine Stufe steigen (16 → 17 px, Verhältnis gleich: 30 → 32 px). */ --fs-handy-gross: 32px; } /* ND2.2a Baustein 0 (Entscheidung Vahid 06.10.2026): am HANDY steht die Schrift eine Stufe größer — der PC bleibt unverändert. Kein zweiter Satz Token und keine zweite Treppe in pwa.css: dieselben Namen bekommen im Handy-Geltungsbereich `html.handy` einen größeren Wert. Die Klasse setzt js/theme.js (erstes Skript im , vor dem ersten Rendern) auf pwa.html und jeder pwa-.html — in beiden Themen, denn die Schrift ist keine Farbe. Stufe PC Handy --fs-small 12,5 13,5 --fs-leiste 13 14 --fs-body 14 15 --fs-tabelle-kopf 14,5 15,5 --fs-ui 16 17 --fs-card 17 18 --fs-page 22 23 Die große Kachelzahl (--fs-handy-gross 32, --fs-display 30) und der Schriftzug der Anmeldung bleiben — sie sind schon groß, die Verhältnisse der Kachel bleiben damit gewahrt. Wächter: selftest.py Z4 D7 und selftest_nd22a.py. */ html.handy { --fs-small: 13.5px; --fs-leiste: 14px; --fs-body: 15px; --fs-tabelle-kopf: 15.5px; --fs-ui: 17px; --fs-card: 18px; --fs-page: 23px; } /* ND1.1 (U38) — kleine Bildmarke je Thema. Seitenleiste, Handy-Kopf (pwa*.html) und passwort-neu tragen zwei Bilder: im dunklen Thema das AI-Zeichen der Webseite mit den sieben App-Punkten (assets/AccelNexus-ai.svg, keine Kugel, keine Fläche). ND3.1: im hellen Thema DASSELBE Zeichen in der hellen Fassung (assets/AccelNexus-ai-hell.svg — die weißen Striche dunkel, sonst wortgleich), nicht mehr die alte Kugel. Die Regel steht HIER, weil tokens.css das eine Stylesheet ist, das jede dieser Seiten lädt (die Handy-Modulseiten und passwort-neu laden nachtglas.css nicht). Höhe wie bisher aus der jeweiligen Seite; die Breite folgt dem Seitenverhältnis. */ html:not(.nacht) img.marke-nacht, html.nacht img.marke-hell { display: none; } html.edel img.marke-nacht, html.edel img.marke-hell { width: auto; border-radius: 0; } /* --------------------------------------------------------------------- ND3.1 — Token „Edles Dunkel“ für BEIDE Themen (Hell-Modus „Tag“). Das Design gilt jetzt hell und dunkel (html.edel, js/theme.js); nur die Werte wechseln. Diese Token waren bis ND2.3 feste Werte in den Regeln von css/nachtglas.css und css/nachtglas-handy.css (Weiß in Linien und Schrift, Schwarz in Schatten und Abdunklung) — hier stehen sie EINMAL, weil tokens.css die eine Datei ist, die jede Seite lädt. Die dunklen Werte sind wortgleich die alten (Dunkel bleibt Pixel für Pixel, Wächter selftest_nd3.py), die hellen sind schwächer: Schatten und Abdunklung leise, Linien dunkel statt weiß. --text-stark Zahlen, aktive Einträge (dunkel Weiß, hell fast Schwarz) --linie-leiste Trennlinien an Leiste, Kopf, Sperrfenster --kopf-grund Kopfzeile (Glas über dem Inhalt) --kopf-trenner senkrechter Trenner der Kopfzeile --glas-hauch(-2/-3) Darüberfahren an Kachelkopf, Griff, Blattzeilen --schimmer-a/-b Lade-Schimmer --schatten-* Schatten unter Kachel, Fenster, Blatt, Meldung --abdunkeln(-blatt) Abdunklung hinter Dialog bzw. Menüblatt --sperre-abdunkeln / --sperre-karte Sperrfenster am PC --schrift-auf-bernstein Schrift auf „Entsperren“ --marke-blau „Nexus“, Fokus und Sprachwahl der Anmeldung --marke-scheibe / --marke-strich große Bildmarke der Anmeldung --m-misch mit ihr wird eine Modulfarbe „lesbarer“ gemischt (dunkel aufhellen mit Weiß, hell abdunkeln mit Schwarz) --licht-oben der Hauch Licht von oben im Grund --fuss-grund / --knopf-tief Handy: Fußleiste, Haus und Modul-Knopf --handy-knopf-* Handy-Startseite: „Abhaken“ in „Meine Aufgaben“ (dunkel wortgleich die alten Werte aus pwa.css) Kontraste gerechnet in selftest_nd3.py (hell ≥ 4,5:1 für Text). */ html.nacht { --text-stark: #ffffff; --linie-leiste: rgba(255, 255, 255, 0.06); --kopf-grund: rgba(10, 12, 17, 0.82); --kopf-trenner: rgba(255, 255, 255, 0.12); --glas-hauch: rgba(255, 255, 255, 0.03); --glas-hauch-2: rgba(255, 255, 255, 0.06); --glas-hauch-3: rgba(255, 255, 255, 0.05); --schimmer-a: rgba(255, 255, 255, 0.04); --schimmer-b: rgba(255, 255, 255, 0.11); --schatten-kachel: rgba(0, 0, 0, 0.28); --schatten-fenster: rgba(0, 0, 0, 0.45); --schatten-tief: rgba(0, 0, 0, 0.55); --schatten-toast: rgba(0, 0, 0, 0.5); --abdunkeln: rgba(0, 0, 0, 0.55); --abdunkeln-blatt: rgba(0, 0, 0, 0.5); --sperre-abdunkeln: rgba(3, 4, 5, 0.72); --sperre-karte: rgba(13, 15, 21, 0.86); --schrift-auf-bernstein: #1a1205; --marke-blau: #3f9fff; --marke-scheibe: #0d1322; --marke-strich: #eaf2fb; --m-misch: #ffffff; --m-tief: #000000; /* ND3.2: gefüllte Modulfarbe --m-voll (beide Themen mit Schwarz) */ --glas-hauch-1: rgba(255, 255, 255, 0.025); --orange-marke: #ff9a3d; /* Zustand „Zur Prüfung“ (Posteingang) */ /* themenfest (beide Themen gleich): Teile auf Fotos und fremden Inhalten */ --foto-knopf-grund: rgba(16, 35, 60, 0.72); /* Knopf auf einem Belegfoto */ --qr-grund: #ffffff; /* QR-Code braucht Weiß zum Scannen */ --bericht-grund: #0d0d0d; /* Rahmen um den (dunklen) Bericht der Buchhaltung */ --balken-leise-deckkraft: 0.55; /* leiser Diagramm-Balken (Ausgaben) in --glas-leise, 4,3:1 */ --licht-oben: rgba(255, 255, 255, 0.05); --fuss-grund: rgba(3, 4, 5, 0.86); --knopf-tief: rgba(3, 4, 5, 0.85); --handy-knopf-grund: #0b1626; --handy-knopf-rand: #1d3050; --handy-knopf-text: #e8f0fa; } /* Hell „Tag“, Variante Kühl (Wahl Vahid 07.10.2026): Linien, Schatten und Abdunklung in einem Blauschwarz rgb(15 35 70) bzw. rgb(15 30 60). */ html:not(.nacht) { --text-stark: #0a1220; --linie-leiste: rgba(15, 35, 70, 0.09); --kopf-grund: rgba(247, 249, 252, 0.85); --kopf-trenner: rgba(15, 35, 70, 0.14); --glas-hauch: rgba(15, 35, 70, 0.03); --glas-hauch-2: rgba(15, 35, 70, 0.06); --glas-hauch-3: rgba(15, 35, 70, 0.05); --schimmer-a: rgba(15, 35, 70, 0.05); --schimmer-b: rgba(15, 35, 70, 0.11); --schatten-kachel: rgba(15, 30, 60, 0.06); --schatten-fenster: rgba(15, 30, 60, 0.12); --schatten-tief: rgba(15, 30, 60, 0.16); --schatten-toast: rgba(15, 30, 60, 0.14); --abdunkeln: rgba(15, 30, 60, 0.32); --abdunkeln-blatt: rgba(15, 30, 60, 0.28); --sperre-abdunkeln: rgba(227, 232, 239, 0.72); --sperre-karte: rgba(255, 255, 255, 0.88); --schrift-auf-bernstein: #ffffff; --marke-blau: #0057b1; --marke-scheibe: #ffffff; --marke-strich: #16213a; --m-misch: #000000; --m-tief: #000000; --glas-hauch-1: rgba(15, 35, 70, 0.025); --orange-marke: #a84200; /* 5,1:1 auf Glas, Farbwinkel 15° wärmer als dunkel */ --foto-knopf-grund: rgba(16, 35, 60, 0.72); --qr-grund: #ffffff; --bericht-grund: #0d0d0d; --balken-leise-deckkraft: 0.75; /* hell 3,75:1 auf Glas (bei 0,55 nur 2,5:1) */ --licht-oben: rgba(255, 255, 255, 0.7); --fuss-grund: rgba(255, 255, 255, 0.86); --knopf-tief: rgba(255, 255, 255, 0.85); --handy-knopf-grund: rgba(15, 35, 70, 0.035); --handy-knopf-rand: rgba(15, 35, 70, 0.1); --handy-knopf-text: #0f1726; } /* --------------------------------------------------------------------- KR2 K9 — die EINE Scrollbalken-Regel der ganzen App (Struktur wie im Struktur-Vorbild V5.3·R5 N2, Farben Nexus). Sie steht HIER und nicht in app.css, weil app.css nur das Büro lädt, die Handy-Seiten aber dieselben Balken brauchen (Dialog-Blatt, Sprach-Verlauf, Assistent) — tokens.css ist das eine Stylesheet, das JEDE Seite lädt (Abweichung vom Prompt KR2, begründet im Sitzungslog). · 8 px breit/hoch, Schiene unsichtbar, Daumen dezent in --leiste-balken; in Ruhe schmal (2 px durchsichtiger Rand, background-clip: padding-box), beim Überfahren der jeweiligen Fläche voll und kräftiger (--leiste-balken-hover). Hell und dunkel je ein Wert. · Firefox kennt ::-webkit-scrollbar nicht und bekommt die Standard- Eigenschaften — NUR dort: setzte man scrollbar-color auch für Chrome, schaltete Chrome seine Webkit-Regeln ab. · Wo der Balken liegt (Seitenleiste und Dialoge links, alles andere rechts/unten), entscheidet die jeweilige Fläche in app.css über direction — nicht diese Regel. */ :root { --leiste-balken: rgba(16, 35, 60, 0.30); --leiste-balken-hover: rgba(16, 35, 60, 0.55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --leiste-balken: rgba(232, 240, 250, 0.24); --leiste-balken-hover: rgba(232, 240, 250, 0.45); } } :root[data-theme="dark"] { --leiste-balken: rgba(232, 240, 250, 0.24); --leiste-balken-hover: rgba(232, 240, 250, 0.45); } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-corner { background: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--leiste-balken); border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; } *:hover::-webkit-scrollbar-thumb { background-color: var(--leiste-balken-hover); border-width: 1px; } @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--leiste-balken) transparent; } *:hover { scrollbar-color: var(--leiste-balken-hover) transparent; } }