/* AccelCura — css/tokens.css (V5.3·ND1, Design „Edles Dunkel“). Übernommen aus dem Skill edles-dunkel-design, vorlagen/tokens.css (Stand AccelNexus 063be7f) — der Code unten ist WORTGLEICH die Vorlage; nur die Kommentare nennen teils noch AccelNexus-Namen (Belegstellen dort). Für AccelCura angepasst: · Die Typo-Treppe stand bis ND1 allein im Kopf von app.css — sie steht dort weiter (gleiche Werte; app.css lädt danach und gewinnt bei Gleichstand). Diese Datei lädt JEDE Seite als ERSTES Stylesheet, auch die Handy-Seiten, die app.css nicht laden. · Bildmarke je Thema: img.marke-nacht = assets/AccelCura-zeichen.svg, img.marke-hell = assets/AccelCura-zeichen-hell.svg (Seitenleiste, Handy-Kopf). · Der Scrollbalken-Block der Vorlage (AccelNexus KR2 K9) entfällt: AccelCura behält seine eigene Regel aus V5.3·R5/R9 (app.css, pwa.css). · html.handy setzt js/theme.js auf pwa.html, pwa-fragen.html, pwa-sprache.html und cockpit.html. */ /* Die EINE Typo-Treppe (Herkunft 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 „AccelCura“ 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 (AccelCura: assets/AccelCura-zeichen.svg, keine Fläche). ND3.1: im hellen Thema DASSELBE Zeichen in der hellen Fassung (assets/AccelCura-zeichen-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 „Cura“, 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; --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; --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; }