/* ============================================================================ Lichtdeck — einschaltbares, reversibles Theme für admin.rofan.team ---------------------------------------------------------------------------- REGEL: ALLES hängt hinter :root[data-theme="lichtdeck"] (= ). Fehlt das Attribut, greift KEINE einzige Regel dieser Datei → heutiger Look, unverändert. AUS = byte-genau Status quo. DIESE DATEI IST DIE EINZIGE QUELLE — FÜR BEIDE APPS (24.09.2026). Sie liegt bewusst in public/ und nicht in app/: Caddy liefert sie unter admin.rofan.team/theme-lichtdeck.css direkt von der Platte aus. Beide Oberflächen laden sie über genau diese Adresse — die Postbearbeitung (localhost:3000) und die Buchführung unter /buchfuehrung (localhost:3100, eigenes Repo ~/dev/rofan-automation/cockpit). Vorher hatte jede App ihre eigene Kopie. Beide stammten aus demselben Paket vom 25.08.2026 und liefen auseinander: Die Postbearbeitung bekam am 23.09. die Apple-Palette, die Buchführung blieb auf der alten. Der Inhaber sah unter /buchfuehrung deshalb einen anderen Stil — derselbe Fehlertyp, der am 22.09. den Fehlversand verursacht hat: dieselbe Festlegung an zwei Orten. Eine Kopie anzulegen ist deshalb ein Rückschritt, kein Zwischenschritt. Der Test tests/themeEineQuelle.test.ts hält das fest: Kein --ld-Token darf irgendwo sonst im Repo definiert werden. App-eigene Ergänzungen gehören in eine eigene Datei je App (die Buchführung hat dafür app/theme-lichtdeck-cockpit.css), niemals in diese. Bewusst UNLAYERED (kein @layer): schlägt dadurch Tailwind-v4-Utilities (die in @layer utilities liegen) zuverlässig, zusätzlich zur höheren Spezifität durch den [data-theme]-Präfix. Zwei Hebel: 1) --rk-* neu belegen → Cockpit + Vorgang-Karte (CSS-Module konsumieren diese Tokens) werden komplett umgefärbt, OHNE Markup-Änderung. 2) Die real verwendeten Tailwind-Utility-Klassen (bg-white, border-neutral-200, emerald-Buttons, rounded-2xl, …) scoped überschreiben → Home + Buchführung. Farbe NUR für Status. Blau = Akzent. Grün = OK. Bernstein = Frist. Rot = überfällig. ============================================================================ */ /* ---- 1. Lichtdeck-Token-Palette („Neu" aus der Design-Referenz) ------------ */ :root[data-theme="lichtdeck"] { /* ---- Apple-Palette (23.09.2026) ---------------------------------------- Auftrag nach vier Screenshots von apple.com: das ganze Tool in diesem Stil, ohne dass Funktionen verloren gehen. Jeder Wert ist gerechnet, nicht abgelesen. Apples eigenes Grau #86868b liegt auf Weiß bei 3,62 zu 1 und auf der Fläche bei 3,33 — es fällt durch den Mindestwert und kommt deshalb nicht vor, so hübsch es ist. Genommen ist #6E6E73 (5,07 bzw. 4,66), wie im Entwicklungsleitstand. */ --ld-canvas:#F5F5F7; --ld-panel:#FFFFFF; --ld-panel-2:#FAFAFC; --ld-inset:#F5F5F7; --ld-line:#D2D2D7; --ld-line-2:#E8E8ED; /* --ld-faint war #8590A2 und traf auf Weiß nur 3,23 zu 1 — 78 Stellen der App lagen damit unter dem Mindestwert der WCAG (4,5 zu 1). Gemessen am 17.09.2026 mit scripts/optik-pruefen.mjs. Am 22.09.2026 weiter auf den Wert von --ld-dim gezogen: Auf dem grauen Grund (--ld-canvas) blieben 4,41 zu 1 übrig, und genau dort steht der Hochladen-Kasten. */ --ld-ink:#1D1D1F; --ld-ink-2:#424245; --ld-dim:#6E6E73; --ld-faint:#6E6E73; --ld-brand:#0066CC; --ld-brand-2:#0055AA; --ld-brand-deep:#003D7A; --ld-brand-soft:#E8F1FC; /* Die Seitenleiste war dunkelblau. Apple hält solche Flächen hell und überlässt die Farbe dem Inhalt — die Leiste soll führen, nicht auffallen. */ --ld-rail-1:#F5F5F7; --ld-rail-2:#F2F2F5; --ld-rail-3:#EDEDF0; --ld-on-navy:#1D1D1F; --ld-on-navy-dim:#6E6E73; /* Auf ihrem eigenen weichen Grund lagen beide unter 4,5 zu 1 (4,19 bzw. 4,10). */ --ld-ok:#136B45; --ld-ok-soft:#DCFAE6; --ld-warn:#7A5B00; --ld-warn-soft:#FBF1CD; --ld-alert:#C9372C; --ld-alert-soft:#FFECEB; --ld-info:#1868DB; --ld-info-soft:#E9F2FE; /* Apple rundet Karten weich und Knöpfe voll — ein Knopf ist dort eine Pille. */ --ld-radius:18px; --ld-radius-s:12px; --ld-radius-pill:980px; /* Getrennt wird über Fläche und Abstand, nicht über Schatten. Er bleibt sehr leise: ganz ohne ihn verlieren aufgeklappte Ebenen ihre Kante. */ --ld-shadow-card:0 1px 3px rgba(0,0,0,.04); --ld-shadow-pop:0 8px 30px rgba(0,0,0,.12); --ld-rail-w:246px; /* App-Basisvariablen (globals.css) auf Licht fixieren — auch bei dunklem OS. */ --background: var(--ld-canvas); --foreground: var(--ld-ink); /* Cockpit + Vorgang-Karte laufen vollständig über diese Tokens → hier umbiegen. Höhere Spezifität als :root{} UND als der Dark-Media-Block in globals.css, daher gewinnt Lichtdeck immer und erzwingt den hellen Look. */ --rk-paper: var(--ld-canvas); --rk-surface: var(--ld-panel); --rk-raised: var(--ld-panel); --rk-ink: var(--ld-ink); --rk-ink2: var(--ld-ink-2); --rk-muted: var(--ld-dim); --rk-faint: var(--ld-faint); --rk-line: var(--ld-line); --rk-line2: var(--ld-line-2); --rk-accent: var(--ld-brand); --rk-accent-ink: var(--ld-brand-2); --rk-accent-soft: var(--ld-brand-soft); --rk-overdue: var(--ld-alert); --rk-overdue-soft: var(--ld-alert-soft); --rk-due: var(--ld-warn); --rk-due-soft: var(--ld-warn-soft); --rk-info: var(--ld-info); --rk-shadow: var(--ld-shadow-card); --rk-shadow-pop: var(--ld-shadow-pop); } /* ---- 2. Grundflächen ------------------------------------------------------- */ :root[data-theme="lichtdeck"] body { background: var(--ld-canvas); color: var(--ld-ink); /* Text ohne eigene Größenklasse folgt der Stufe „lauf" — die Buchführung setzt html auf 17px. */ font-size: var(--fs-lauf, 16px); line-height: var(--lh-lauf, 1.5); letter-spacing: -0.01em; /* Die Systemschrift zuerst — auf diesem Mac ist das SF Pro, die Schrift der Vorlage. */ font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; /* Platz für die fixe Navy-Rail. Ausgeschaltet = kein Attribut = kein Padding. */ padding-left: var(--ld-rail-w); } /* ---- 2b. Schriftskala für beide Apps (13.10.2026) ------------------------ Christoph: „die Änderungen an der Schriftgröße sollten dann sich auf das Theme beziehen, sodass dann auch die Buchführungs-App davon profitiert." Die Postbearbeitung nutzt nur noch text-beiwerk/-lauf/-abschnitt/-titel (Gate scripts/schrift-pruefen.mjs); die Buchführung (Tailwind 3, html 17px) schreibt text-xs/sm/base/lg/xl. Diese Regeln ordnen deren Klassen denselben vier Stufen zu. Besitzer der Werte ist app/globals.css der Postbearbeitung; die Buchführung hat die Variablen nicht, deshalb stehen dieselben Werte als Rückfall da — ein Test (tests/schriftskala.test.ts) hält Rückfall und Besitzer gleich. Kein !important nötig: [data-theme]-Präfix ist spezifischer als die Einzelklasse. */ :root[data-theme="lichtdeck"] .text-xs { font-size: var(--fs-beiwerk, 14px); line-height: var(--lh-beiwerk, 1.4); } :root[data-theme="lichtdeck"] .text-sm, :root[data-theme="lichtdeck"] .text-base { font-size: var(--fs-lauf, 16px); line-height: var(--lh-lauf, 1.5); } :root[data-theme="lichtdeck"] .text-lg { font-size: var(--fs-abschnitt, 18px); line-height: var(--lh-abschnitt, 1.35); } :root[data-theme="lichtdeck"] .text-xl, :root[data-theme="lichtdeck"] .text-2xl, :root[data-theme="lichtdeck"] .text-3xl { font-size: var(--fs-titel, 24px); line-height: var(--lh-titel, 1.25); } /* ---- 3. Tailwind-Utility-Overrides (Home + Buchführung + Topbar) ----------- Es werden ausschließlich die im Repo real vorkommenden Utilities umgefärbt. Der [data-theme]-Präfix hebt die Spezifität über die Einzelklasse UND über die zugehörige dark:-Variante (auf dunklem OS), sodass Lichtdeck hell bleibt. */ /* Flächen */ :root[data-theme="lichtdeck"] .bg-white { background-color: var(--ld-panel) !important; } :root[data-theme="lichtdeck"] .bg-neutral-50, :root[data-theme="lichtdeck"] .bg-neutral-50\/60, :root[data-theme="lichtdeck"] .bg-neutral-50\/40 { background-color: var(--ld-canvas) !important; } :root[data-theme="lichtdeck"] .bg-neutral-100 { background-color: var(--ld-inset) !important; } :root[data-theme="lichtdeck"] .bg-neutral-200 { background-color: var(--ld-line) !important; } /* Dunkle Flächen (greifen nur auf dunklem OS) auf Licht ziehen */ :root[data-theme="lichtdeck"] .dark\:bg-neutral-900, :root[data-theme="lichtdeck"] .dark\:bg-neutral-900\/40, :root[data-theme="lichtdeck"] .dark\:bg-neutral-950, :root[data-theme="lichtdeck"] .dark\:bg-neutral-950\/85, :root[data-theme="lichtdeck"] .dark\:bg-neutral-950\/40, :root[data-theme="lichtdeck"] .dark\:bg-neutral-800 { background-color: var(--ld-panel) !important; } /* Ränder */ :root[data-theme="lichtdeck"] .border-neutral-200, :root[data-theme="lichtdeck"] .dark\:border-neutral-800, :root[data-theme="lichtdeck"] .dark\:border-neutral-700 { border-color: var(--ld-line) !important; } :root[data-theme="lichtdeck"] .border-neutral-100 { border-color: var(--ld-line-2) !important; } :root[data-theme="lichtdeck"] .border-neutral-300, :root[data-theme="lichtdeck"] .hover\:border-neutral-300:hover { border-color: var(--ld-line) !important; } /* Text */ /* Die hellen Dunkelmodus-Stufen fangen, sonst steht fast weiße Schrift auf hellem Grund. Zwei davon fehlten bis zum 23.09.2026 (`-200` und `-50`) — derselbe Fehlertyp wie am 17.09., als die Fortbildungsliste bei dunkler Systemeinstellung mit 1,14 zu 1 unsichtbar war. Gefunden hat sie Codex; die Kontrastmessung nicht, weil die Klassen im Prüfstand nicht vorkommen. */ :root[data-theme="lichtdeck"] .text-neutral-900, :root[data-theme="lichtdeck"] .dark\:text-neutral-50, :root[data-theme="lichtdeck"] .dark\:text-neutral-100, :root[data-theme="lichtdeck"] .dark\:text-neutral-200, :root[data-theme="lichtdeck"] .dark\:text-neutral-300 { color: var(--ld-ink) !important; } :root[data-theme="lichtdeck"] .text-neutral-600, :root[data-theme="lichtdeck"] .dark\:text-neutral-400 { color: var(--ld-ink-2) !important; } :root[data-theme="lichtdeck"] .text-neutral-500 { color: var(--ld-dim) !important; } :root[data-theme="lichtdeck"] .text-neutral-400 { color: var(--ld-faint) !important; } /* Gemessen am 17.09.2026: Diese fünf lagen im Bestand unter 4,5 zu 1 und fehlten in der Zuordnung — das Theme kannte nur die emerald-/amber-Varianten, nicht die green-/amber-600er. */ :root[data-theme="lichtdeck"] .text-neutral-300 { color: var(--ld-faint) !important; } :root[data-theme="lichtdeck"] .text-green-700, :root[data-theme="lichtdeck"] .text-green-600 { color: var(--ld-ok) !important; } :root[data-theme="lichtdeck"] .bg-green-100 { background-color: var(--ld-ok-soft) !important; } :root[data-theme="lichtdeck"] .text-amber-600 { color: var(--ld-warn) !important; } /* Radien flacher (Design „Neu" = 10 / 7 statt 16 / 12) */ :root[data-theme="lichtdeck"] .rounded-2xl { border-radius: var(--ld-radius) !important; } :root[data-theme="lichtdeck"] .rounded-xl { border-radius: var(--ld-radius) !important; } :root[data-theme="lichtdeck"] .rounded-lg { border-radius: var(--ld-radius-s) !important; } /* Schatten ruhiger */ :root[data-theme="lichtdeck"] .shadow-sm { box-shadow: var(--ld-shadow-card) !important; } :root[data-theme="lichtdeck"] .shadow-md, :root[data-theme="lichtdeck"] .hover\:shadow-md:hover { box-shadow: var(--ld-shadow-pop) !important; } /* Primär-Buttons: emerald → Blau (Akzent). Text bleibt weiß. Nur auf button und a, nicht auf jede Fläche mit dieser Klasse (24.09.2026). Ohne die Einschränkung traf die Regel auch Statusanzeigen: Die Buchführung kennzeichnet ihre Stufen mit grün/blau/grau — erledigt, jetzt dran, später —, und grün wäre hier zu demselben Blau geworden wie „jetzt dran". Die Farbe trägt dort eine Bedeutung, kein Aussehen. Gemeldet von der Booking-Sitzung, bevor es passieren konnte. Das ist zugleich das Beispiel für die Grenze aus F-040: Eine Regel, die an einer Farbklasse hängt statt an einer Rolle, trifft alles, was zufällig dieselbe Klasse trägt. */ :root[data-theme="lichtdeck"] button.bg-emerald-600, :root[data-theme="lichtdeck"] a.bg-emerald-600, :root[data-theme="lichtdeck"] button.bg-emerald-700, :root[data-theme="lichtdeck"] a.bg-emerald-700 { background-color: var(--ld-brand) !important; } :root[data-theme="lichtdeck"] button.hover\:bg-emerald-700:hover, :root[data-theme="lichtdeck"] a.hover\:bg-emerald-700:hover, :root[data-theme="lichtdeck"] button.hover\:bg-emerald-800:hover, :root[data-theme="lichtdeck"] a.hover\:bg-emerald-800:hover { background-color: var(--ld-brand-2) !important; } /* Login-Button (bg-neutral-900) ebenfalls auf Marken-Blau */ :root[data-theme="lichtdeck"] .bg-neutral-900 { background-color: var(--ld-brand) !important; } :root[data-theme="lichtdeck"] .bg-neutral-900.text-white:hover { background-color: var(--ld-brand-2) !important; } /* Status-Farben cohärent zur Referenz (bleiben Status, nur Ton angeglichen) */ :root[data-theme="lichtdeck"] .bg-emerald-50 { background-color: var(--ld-ok-soft) !important; } :root[data-theme="lichtdeck"] .text-emerald-700, :root[data-theme="lichtdeck"] .text-emerald-400 { color: var(--ld-ok) !important; } :root[data-theme="lichtdeck"] .bg-amber-50 { background-color: var(--ld-warn-soft) !important; } :root[data-theme="lichtdeck"] .text-amber-800, :root[data-theme="lichtdeck"] .text-amber-300 { color: var(--ld-warn) !important; } :root[data-theme="lichtdeck"] .bg-red-50 { background-color: var(--ld-alert-soft) !important; } :root[data-theme="lichtdeck"] .text-red-700, :root[data-theme="lichtdeck"] .text-red-300 { color: var(--ld-alert) !important; } /* Akzent-Links (hover:text-blue-600) auf Marken-Blau vereinheitlichen */ :root[data-theme="lichtdeck"] .hover\:text-blue-600:hover, :root[data-theme="lichtdeck"] .text-blue-600 { color: var(--ld-brand) !important; } /* Sichtbarer Fokus überall (A11y) */ :root[data-theme="lichtdeck"] a:focus-visible, :root[data-theme="lichtdeck"] button:focus-visible, :root[data-theme="lichtdeck"] [role="button"]:focus-visible, :root[data-theme="lichtdeck"] select:focus-visible, :root[data-theme="lichtdeck"] input:focus-visible { outline: 2px solid var(--ld-brand); outline-offset: 2px; border-radius: 4px; } /* ---- 4. Navy-Rail (Komponente RofanRail.tsx) ------------------------------ */ .ld-rail { position: fixed; top: 0; left: 0; z-index: 40; width: var(--ld-rail-w); height: 100vh; overflow-y: auto; background: var(--ld-rail-1); border-right: 1px solid var(--ld-line-2); padding: 20px 14px; display: flex; flex-direction: column; gap: 2px; /* Die Systemschrift zuerst — auf diesem Mac ist das SF Pro, die Schrift der Vorlage. */ font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .ld-rail__mark { display: flex; align-items: center; gap: 11px; padding: 2px 8px 18px; text-decoration: none; } .ld-rail__glyph { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: rgba(0,0,0,.05); } .ld-rail__glyph b { font-weight: 600; color: var(--ld-ink); font-size: var(--fs-lauf, 16px); line-height: var(--lh-lauf, 1.5); } .ld-rail__nm { color: var(--ld-ink); font-weight: 600; font-size: var(--fs-lauf, 16px); line-height: 1.1; } .ld-rail__nm small { display: block; color: var(--ld-dim); font-weight: 400; font-size: var(--fs-beiwerk, 14px); line-height: var(--lh-beiwerk, 1.4); margin-top: 3px; } /* Kein Versalien-Label mehr: Apple beschriftet Gruppen in gewöhnlicher Schreibweise, und Großbuchstaben lesen sich schlechter. */ .ld-rail__grp { font-size: var(--fs-beiwerk, 14px); line-height: var(--lh-beiwerk, 1.4); font-weight: 600; color: var(--ld-dim); padding: 16px 9px 6px; } .ld-navitem { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 7px; color: var(--ld-ink-2); text-decoration: none; font-size: var(--fs-lauf, 16px); line-height: var(--lh-lauf, 1.5); font-weight: 400; transition: background .15s; } .ld-navitem .ico { width: 18px; text-align: center; font-size: var(--fs-lauf, 16px); line-height: var(--lh-lauf, 1.5); opacity: .9; } .ld-navitem .lbl { flex: 1; } .ld-navitem:hover { background: rgba(0,0,0,.04); color: var(--ld-ink); } .ld-navitem.on { background: rgba(0,0,0,.06); color: var(--ld-ink); font-weight: 600; } .ld-rail__foot { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--ld-line-2); color: var(--ld-dim); font-size: var(--fs-beiwerk, 14px); line-height: var(--lh-beiwerk, 1.4); } /* ---- 5. Responsiv: Rail unter 860px ausblenden, Offset entfernen ---------- */ @media (max-width: 860px) { :root[data-theme="lichtdeck"] body { padding-left: 0; } .ld-rail { display: none; } } /* ---- 6. Reduzierte Bewegung ----------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root[data-theme="lichtdeck"] * { animation: none !important; transition: none !important; } } /* ── Rail einklappbar ───────────────────────────────────────────────────────── Vorgabe des Inhabers (27.08.2026): einklappbar, standardmäßig eingeklappt. Der Zustand steht als data-rail am ; die Breite ist eine Variable, die auch der Seiteninhalt liest (padding-left) — Rail und Inhalt bleiben dadurch immer bündig. Ohne Attribut (erster Aufruf, Server-Rendering) gilt „zu“. */ :root[data-theme="lichtdeck"] { --ld-rail-w: 62px; } :root[data-theme="lichtdeck"][data-rail="auf"] { --ld-rail-w: 246px; } :root[data-theme="lichtdeck"] .ld-rail { transition: width .16s ease; } :root[data-theme="lichtdeck"] .ld-rail__toggle { position: absolute; top: 10px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 6px; cursor: pointer; background: rgba(0,0,0,.05); color: var(--ld-ink-2); font-size: var(--fs-beiwerk, 14px); line-height: 1; } :root[data-theme="lichtdeck"] .ld-rail__toggle:hover { background: rgba(0,0,0,.09); } /* Eingeklappt: nur die Zeichen. Beschriftungen, Gruppentitel und Fußzeile treten zurück — sie sind ohne Breite ohnehin nicht lesbar, und abgeschnittener Text sieht aus wie ein Fehler. */ :root[data-theme="lichtdeck"]:not([data-rail="auf"]) .ld-rail { padding-left: 8px; padding-right: 8px; } :root[data-theme="lichtdeck"]:not([data-rail="auf"]) .ld-navitem .lbl, :root[data-theme="lichtdeck"]:not([data-rail="auf"]) .ld-rail__nm, :root[data-theme="lichtdeck"]:not([data-rail="auf"]) .ld-rail__grp, :root[data-theme="lichtdeck"]:not([data-rail="auf"]) .ld-rail__foot { display: none; } :root[data-theme="lichtdeck"]:not([data-rail="auf"]) .ld-navitem { justify-content: center; padding-left: 0; padding-right: 0; } :root[data-theme="lichtdeck"]:not([data-rail="auf"]) .ld-rail__mark { padding: 34px 0 14px; justify-content: center; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- 7. Karten: Fläche statt Rahmen (Apple-Stil, 23.09.2026) -------------- Die Vorlage trennt Karten durch ihre Fläche und den Abstand, nicht durch eine Linie. Ganz ohne Abgrenzung verschwimmen sie aber auf hellem Grund — deshalb ein sehr leiser Schatten statt des Rahmens. Der Marker steht im Markup (`ui-karte`), damit die Regel nicht an einer Farbklasse hängt und versehentlich auch Tabellen trifft. */ :root[data-theme="lichtdeck"] .ui-karte { border: 0; box-shadow: var(--ld-shadow-card); border-radius: var(--ld-radius); } :root[data-theme="lichtdeck"] .ui-karte:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); }