/* ══════════════════════════════════════════════════════════════════════════ core/theme.css — Farbschema (Hell / Dunkel) Lädt DIREKT NACH shell.css und VOR allen Modul-CSS. Zweck: 1. Ergänzt die Token-Palette um semantische Rollen, die in shell.css fehlen (Flächen-Staffel, Status-Paare, Text-auf-Farbe). 2. Definiert den kompletten Dunkel-Satz. Warum eine eigene Datei und nicht der :root-Block in shell.css? Weil parallel an shell.css gearbeitet wird (Mobile-Lane). Eine additive Datei kollidiert beim Merge nicht — der :root-Block dort bleibt unangetastet, hier stehen nur Ergänzungen und Überschreibungen. ── Wie das Umschalten funktioniert ────────────────────────────────────── `` → dunkel, egal was das System sagt `` → hell, egal was das System sagt kein Attribut → System entscheidet (prefers-color-scheme) Gesetzt wird das Attribut vom Bootstrap-Schnipsel in index.php, BEVOR diese Datei greift — sonst blitzt beim Laden kurz die helle Fassung auf. ── Regel für Modul-CSS ────────────────────────────────────────────────── Keine Hex-Werte für Flächen, Text oder Ränder mehr. Immer ein Token. Wer hier einen Hex-Wert hartkodiert, baut eine Stelle, die im Dunkel- Modus falsch aussieht — und niemand merkt es, bis ein Nutzer umschaltet. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ 1. HELL — Ergänzungen zur Palette aus shell.css ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Flächen-Staffel ──────────────────────────────────────────────────── Vier Stufen statt zweier. Im Hell-Modus entsteht Tiefe durch Schatten, im Dunkel-Modus NUR durch diese Staffel (Schatten sind auf dunklem Grund praktisch unsichtbar). Darum muss jede Fläche wissen, auf welcher Ebene sie liegt — sonst verschmilzt im Dunkeln alles. --bg = der Grund, auf dem alles liegt --surface = Karten, Modals, Tabellen — das „Papier" --surface-2 = abgesetzte Zonen darin (Tabellenkopf, Seitenspalte) --surface-3 = Hover, Eingabefelder, eingelassene Bereiche */ --surface-3: #eceff3; /* Ränder in zwei Stärken: die leise Standardlinie und eine sichtbare für Stellen, wo eine echte Trennung nötig ist (Tabellenkopf, Modal). */ --border-strong: #ccd2da; /* ── Text auf farbigem Grund ──────────────────────────────────────────── Das ist der Grund, warum ein naiver Dunkel-Modus scheitert: `color:#fff` auf einem goldenen Button ist KEINE Flächenfarbe, die mitkippen darf — der Text muss weiss bleiben, sonst steht Dunkelgrau auf Gold. Diese Tokens bleiben in beiden Modi (nahezu) gleich. */ --on-accent: #ffffff; /* Text auf --accent */ --on-brand: #ffffff; /* Text auf --brand-surface */ --on-status: #ffffff; /* Text auf --success/--danger/--warning */ /* ── Gedämpfte Signal-Linien ──────────────────────────────────────────── Ein Rand um eine Hinweisfläche soll die Fläche einfassen, nicht mit ihr konkurrieren. Die volle Signalfarbe ist dafür zu laut: Ein blasses Creme (#f1e6c2) durch --warning (#e67e22) zu ersetzen, machte aus einer dezenten Einfassung einen grellen orangen Rahmen. Die Mischung mit der Flächenfarbe löst das für BEIDE Modi mit einer einzigen Definition: Im Hellen mischt sich die Signalfarbe gegen Weiss (ergibt den blassen Pastellton wie zuvor), im Dunkeln gegen den dunklen Grund (ergibt eine gedämpfte, aber sichtbare Linie). Kein zweiter Wertesatz nötig — die Token darin kippen ja bereits. */ --success-line: color-mix(in srgb, var(--success) 35%, var(--surface)); --warning-line: color-mix(in srgb, var(--warning) 35%, var(--surface)); --danger-line: color-mix(in srgb, var(--danger) 35%, var(--surface)); --info-line: color-mix(in srgb, var(--info-ink) 35%, var(--surface)); /* ── Kontrastring ─────────────────────────────────────────────────────── Ein Ring, der ein farbiges Element (Buchungsbalken, aktiver Kanal-Reiter) gegen den Untergrund absetzt — der Fokusrahmen liegt separat darüber. Er muss GEGEN den Untergrund arbeiten, nicht gegen das Element: im Hellen also weiss, im Dunkeln schwarz. Fest auf Weiss verdrahtet ergab er im Dunkel-Modus einen grellen Leuchtrand um jeden angeklickten Balken im Kalender. */ --ring-contrast: rgba(255,255,255,0.80); /* Der Knubbel im Schiebeschalter. Liegt auf der Schiene, nicht auf dem Grund — bleibt darum in beiden Modi hell. */ --switch-knob: #ffffff; /* Zeilen-Hover im Kalender. War fest als fast deckendes Cremeweiss hinterlegt und blieb dadurch im Dunkel-Modus eine grelle weisse Bahn quer durch das Raster. */ --kal-row-hover: rgba(253,250,245,.92); /* ── Tages-Spaltenlinien im Kalender ─────────────────────────────────── NUR die senkrechten Linien des Gantt-Rasters — die Spalten, an denen man ein Datum abliest. Waagrechte Trenner (Zeilen, Standort-Baender) bleiben bei `--border`/`--border-light`; sie brauchen keine Betonung, die Einheit steht ja links daneben. Im Hell-Modus ist der Wert genau das bisherige `--border-light`, dort aendert sich nichts. Im Dunkel- Modus muss die Linie HELLER sein als ein gewoehnlicher Rahmen: 1px ueber hunderte Spalten verschwindet auf dunklem Grund schon bei einem Kontrast, bei dem ein Kasten-Rahmen noch klar wirkt. */ --kal-grid-line: #eceff3; /* Spalten-Zebra: jede zweite Tagesspalte bekommt eine Andeutung von Toenung. Bewusst unter der Wahrnehmungsschwelle, solange man nicht hinsieht — sucht man aber eine bestimmte Spalte ueber 30 Zeilen hinweg, haelt sie das Auge auf der Spur. Deshalb rgba und nicht Hex: die Toenung liegt UEBER der Zeilenfarbe (auch ueber Hover-Bahn und Wochenend-Lasur) und darf sie nicht ersetzen. */ --kal-grid-band: rgba(0,0,0,0.018); /* ── Marken-Fläche vs. Marken-Text ────────────────────────────────────── `--brand` wird an 74 Stellen als Textfarbe und an 31 als Fläche benutzt. Im Dunkel-Modus schliesst sich das gegenseitig aus: als Text muss es hell werden, als Fläche dunkel bleiben. Deshalb die Trennung — Flächen nutzen ab jetzt `--brand-surface`, Text weiterhin `--brand`. Im Hell-Modus sind beide identisch, das Aussehen ändert sich nicht. */ --brand-surface: #1a1a2e; /* ── Nachrichten-Blase „von mir" ──────────────────────────────────────── Werte direkt aus dem Entwurf (Blatt D2): Fläche #f3e6cd, Rand #e8d5ab. Der Rand ist bewusst NICHT --accent2 (#b08d52) — mit der vollen Akzentfarbe umrandet, liest sich die Blase als Warnkasten statt als Sprechblase. Ein eigenes Token, weil der Dunkel-Modus hier nicht der Akzent-Lasur folgen darf (Begründung im Dunkel-Block). */ --bubble-eigen: #f3e6cd; --bubble-eigen-line: #e8d5ab; /* Kopfleiste eigenständig: im Hellen ist sie das dunkle Marken-Band, im Dunklen darf sie NICHT dieselbe Farbe wie der Grund haben, sonst verliert die Seite ihre obere Kante. */ --topnav-bg: #1a1a2e; /* Endfarbe des Verlaufs im Mobile-Schubfach. Eigenes Token, weil --brand2 dafür nicht taugt: das ist im Dunkel-Modus hell (Text/Akzentstreifen). */ --drawer-end: #16213e; /* ── Eingabefelder ────────────────────────────────────────────────────── Eigenes Token, weil Felder im Dunkeln nicht wie Karten aussehen dürfen: eingelassen (dunkler als die Karte), nicht erhaben. */ --input-bg: #ffffff; --input-border: #d5d9de; /* ── Overlays ─────────────────────────────────────────────────────────── Der Modal-Schleier muss im Dunkeln dichter sein: über einem ohnehin dunklen Hintergrund trennt ein 50-%-Schwarz zu wenig vom Modal. */ --overlay: rgba(0,0,0,0.5); /* ── Status-Paare, Schatten, Aliase: stehen in shell.css ──────────────── Diese Token (--success-soft/-ink, --danger-*, --warning-*, --info-*, --neutral-*, --accent-tint, --shadow-card/-float, --bg-subtle, --primary, --muted) definiert inzwischen core/shell.css im :root — sie kamen mit der Mobile-Ueberarbeitung dazu. Hier standen sie vorher wertgleich doppelt; entfernt, damit es eine Quelle gibt. Ihre DUNKEL-Werte stehen weiter unten in den Dunkel-Bloecken. */ /* Diese drei fehlen in shell.css und bleiben hier definiert. */ --bg-surface: #ffffff; --border-light: #eceff3; --hover: #f1f5f9; /* Farbschema an den Browser melden: färbt Scrollbalken, native Menüs und die Innenseite von passend ein. */ color-scheme: light; } /* ══════════════════════════════════════════════════════════════════════════ 2. DUNKEL — der komplette Gegensatz Gestalterische Leitlinien, damit es nicht nach „Farben invertiert" aussieht: • Kein reines Schwarz. Der Grund ist ein sehr dunkles Navy (#0f0f17) aus der Markenfamilie. Reines Schwarz lässt Gold billig wirken und erzeugt bei OLED-Displays harte Kanten. • Kein reines Weiss als Schrift. #e8e6e2 ist minimal warm — auf dunklem Grund blendet reines Weiss und lässt Text flimmern. • Das Gold wird AUFGEHELLT (#d9bd88 statt #c8a96e). Der Originalton hat auf dunklem Grund zu wenig Leuchtkraft und fällt unter die Lesbarkeitsschwelle — die Marke bliebe erkennbar, aber stumpf. • Tiefe entsteht über die Flächen-Staffel: je näher am Nutzer, desto heller. Genau umgekehrt zum Hell-Modus, wo Schatten diese Arbeit tun. ══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { color-scheme: dark; /* ── Grundfarben ─────────────────────────────────────────────────────── */ --bg: #0f0f17; --surface: #181822; --surface-2: #20202c; --surface-3: #292935; --bg-soft: #14141d; --border: #2d2d3b; --border-strong: #3e3e50; --text: #e8e6e2; --text-muted: #9a9aab; /* Marke: als Text hell, als Fläche dunkel — siehe Erklärung oben. */ --brand: #e8e6e2; --brand2: #c9c7d2; --brand-surface: #15151e; --topnav-bg: #15151e; --drawer-end: #232333; /* Gold, aufgehellt. --accent-soft war im Hellen eine cremige Lasur; im Dunkeln muss dieselbe Rolle eine dunkle Gold-Tönung sein, sonst entsteht ein leuchtender Block mitten in der dunklen Fläche. */ --accent: #d9bd88; --accent2: #c2a570; --accent-hover: #e6cd9e; --accent-soft: #262015; --accent-tint: #332b1c; /* Signalfarben: entsättigt und aufgehellt. Die Hell-Werte (#27ae60, #c0392b) sind auf dunklem Grund zu dunkel und zu satt — sie wirken wie Löcher in der Fläche statt wie Signale. */ --success: #56c98a; --danger: #ef6a5e; --warning: #e0a355; --success-soft: #1c3327; --success-ink: #7fdca6; --danger-soft: #3d2220; --danger-ink: #f3968d; --warning-soft: #362b1b; --warning-ink: #e5ba7d; --info-soft: #1d2a3b; --info-ink: #8fb6e8; --neutral-soft: #2a2a36; --neutral-ink: #a8a8b8; /* Text auf farbigem Grund: das aufgehellte Gold und die hellen Signalfarben tragen KEINE weisse Schrift mehr (Kontrast zu gering) — dort gehört jetzt dunkler Text drauf. */ --on-accent: #1a1508; --on-brand: #e8e6e2; --on-status: #10100c; --kal-row-hover: rgba(255,255,255,0.055); /* Spaltenlinie: bewusst heller als `--border-light` (#2d2d3b). Darin verschwand die duenne Tageslinie komplett — man sah nicht mehr, unter welchem Datum ein Balken beginnt. */ --kal-grid-line: #45455a; --kal-grid-band: rgba(255,255,255,0.026); --input-bg: #14141d; --input-border: #333343; --ring-contrast: rgba(0,0,0,0.55); --overlay: rgba(0,0,0,0.72); /* Schatten im Dunkeln: tiefer und dichter. Sie tragen die Tiefe zwar nicht mehr allein, helfen aber schwebenden Elementen (Dropdown, Modal) sich von der Fläche darunter zu lösen. */ /* Nachgezogene Aliase, dunkle Entsprechung (siehe Hell-Block). */ --bg-subtle: #20202c; --primary: #e8e6e2; --muted: #9a9aab; --bg-surface: #181822; --border-light: #2d2d3b; --hover: #292935; --shadow: 0 2px 18px rgba(0,0,0,0.55); --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35); --shadow-float: 0 2px 8px rgba(0,0,0,0.5), 0 12px 34px rgba(0,0,0,0.55); /* ── Nachrichten-Blase „von mir" ────────────────────────────────────── NICHT --accent-tint: das ist im Dunkeln #332b1c und damit ein schlammiges Oliv, sobald es eine ganze Sprechblase füllt (als 4px Kalenderspalte oder Filter-Pille ist derselbe Ton richtig). Hier ein entsättigtes warmes Grau: hell genug, um sich vom Grund abzuheben, warm genug, um „meine Nachricht" zu heißen, ohne gelb zu wirken. */ --bubble-eigen: #35302a; --bubble-eigen-line: #524a3d; } /* System-Einstellung, solange der Nutzer nicht ausdrücklich gewählt hat. Die Regeln sind identisch zum Block darüber — dieselbe Liste, anderer Auslöser. `:root:not([data-theme="light"])` sorgt dafür, dass eine ausdrückliche Hell-Wahl das System überstimmt und nicht umgekehrt. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0f0f17; --surface: #181822; --surface-2: #20202c; --surface-3: #292935; --bg-soft: #14141d; --border: #2d2d3b; --border-strong: #3e3e50; --text: #e8e6e2; --text-muted: #9a9aab; --brand: #e8e6e2; --brand2: #c9c7d2; --brand-surface: #15151e; --topnav-bg: #15151e; --drawer-end: #232333; --accent: #d9bd88; --accent2: #c2a570; --accent-hover: #e6cd9e; --accent-soft: #262015; --accent-tint: #332b1c; --success: #56c98a; --danger: #ef6a5e; --warning: #e0a355; --success-soft: #1c3327; --success-ink: #7fdca6; --danger-soft: #3d2220; --danger-ink: #f3968d; --warning-soft: #362b1b; --warning-ink: #e5ba7d; --info-soft: #1d2a3b; --info-ink: #8fb6e8; --neutral-soft: #2a2a36; --neutral-ink: #a8a8b8; --on-accent: #1a1508; --on-brand: #e8e6e2; --on-status: #10100c; --kal-row-hover: rgba(255,255,255,0.055); /* Spaltenlinie: bewusst heller als `--border-light` (#2d2d3b). Darin verschwand die duenne Tageslinie komplett — man sah nicht mehr, unter welchem Datum ein Balken beginnt. */ --kal-grid-line: #45455a; --kal-grid-band: rgba(255,255,255,0.026); --input-bg: #14141d; --input-border: #333343; --ring-contrast: rgba(0,0,0,0.55); --overlay: rgba(0,0,0,0.72); /* Nachgezogene Aliase, dunkle Entsprechung (siehe Hell-Block). */ --bg-subtle: #20202c; --primary: #e8e6e2; --muted: #9a9aab; --bg-surface: #181822; --border-light: #2d2d3b; --hover: #292935; --shadow: 0 2px 18px rgba(0,0,0,0.55); --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35); --shadow-float: 0 2px 8px rgba(0,0,0,0.5), 0 12px 34px rgba(0,0,0,0.55); /* Siehe Begründung im Attribut-Block oben. */ --bubble-eigen: #35302a; --bubble-eigen-line: #524a3d; } } /* ══════════════════════════════════════════════════════════════════════════ 3. Korrekturen am Chrome, die sich nicht über Token lösen lassen Alles hier gilt NUR im Dunkel-Modus. Es sind Stellen, an denen shell.css eine feste Farbe setzt, die im Dunkeln falsch liegt — und die sich nicht durch Umdefinieren eines Tokens beheben lässt, weil dieselbe Regel im Hellen richtig ist. ══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] body, :root[data-theme="dark"] { } /* Die Selektoren werden doppelt geführt (Attribut + Media-Query), damit sowohl die ausdrückliche Wahl als auch die System-Einstellung greifen. Zusammengefasst über eine gemeinsame Liste ist das nicht möglich, weil @media und Attribut-Selektor sich nicht kombinieren lassen ohne dass die System-Variante die ausdrückliche Hell-Wahl überschreibt. */ /* ── Kopfleiste ────────────────────────────────────────────────────────── Im Hellen trennt der Farbsprung dunkles Band / heller Grund. Im Dunkeln liegen beide nah beieinander — ohne Linie verliert die Seite oben die Kante und wirkt „ausgefranst". */ :root[data-theme="dark"] #topnav { background: var(--topnav-bg); border-bottom: 1px solid var(--border); box-shadow: none; } /* ── Weisse Flächen, die in shell.css hart gesetzt sind ─────────────────── */ :root[data-theme="dark"] .nav-group-menu, :root[data-theme="dark"] .modal, :root[data-theme="dark"] .kommentar-item, :root[data-theme="dark"] .kommentar-form, :root[data-theme="dark"] .detail-footer { background: var(--surface); border-color: var(--border); } :root[data-theme="dark"] .nav-group-menu { border: 1px solid var(--border); box-shadow: var(--shadow-float); } :root[data-theme="dark"] .nav-group-item { color: var(--text); } :root[data-theme="dark"] .nav-group-item:hover { background: rgba(255,255,255,0.06); } :root[data-theme="dark"] .detail-right, :root[data-theme="dark"] .detail-status-row select { background: var(--surface-2); } :root[data-theme="dark"] .btn-outline, :root[data-theme="dark"] .pill, :root[data-theme="dark"] .field input, :root[data-theme="dark"] .field select, :root[data-theme="dark"] .field textarea, :root[data-theme="dark"] .filter-bar input[type=text], :root[data-theme="dark"] .kommentar-form input, :root[data-theme="dark"] .kommentar-form textarea { background: var(--input-bg); color: var(--text); border-color: var(--input-border); } /* Gedämpfte Varianten der Aktions-Buttons: die Hell-Werte (#fdf0ef, #eafaf1) sind Pastellflächen, die im Dunkeln als grelle Blöcke stehen. */ :root[data-theme="dark"] .btn-danger { background: var(--danger-soft); color: var(--danger-ink); border-color: rgba(239,106,94,0.35); } :root[data-theme="dark"] .btn-danger:hover { background: var(--danger); color: var(--on-status); } :root[data-theme="dark"] .btn-success { background: var(--success-soft); color: var(--success-ink); border-color: rgba(86,201,138,0.35); } :root[data-theme="dark"] .btn-success:hover { background: var(--success); color: var(--on-status); } /* Der Gold-Button trägt im Dunkeln dunkle Schrift (siehe --on-accent). */ :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .nav-tab.active, :root[data-theme="dark"] .nav-group.has-active > .nav-group-toggle, :root[data-theme="dark"] .nav-group-item.active { color: var(--on-accent); } /* Aktive Pille: im Hellen dunkles Navy mit weisser Schrift. Im Dunkeln wäre das unsichtbar — dort wird sie zur hellen Fläche mit dunkler Schrift, damit „aktiv" weiterhin das Auffälligste in der Reihe ist. */ :root[data-theme="dark"] .pill.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* Modal-Schleier + Feld im Fehlerzustand */ :root[data-theme="dark"] .modal-overlay { background: var(--overlay); } :root[data-theme="dark"] .field-invalid input, :root[data-theme="dark"] .field-invalid select, :root[data-theme="dark"] .field-invalid textarea { background: var(--danger-soft); } /* Kopfbereich von Detail-Ansichten + Summenzeile: beide nutzen die Marken-Fläche und tragen weisse Schrift — im Dunkeln bleibt das so, nur die Fläche wird flacher. */ :root[data-theme="dark"] .detail-header, :root[data-theme="dark"] .detail-total-row { background: var(--brand-surface); color: var(--on-brand); } /* ── Weisse Schrift auf aufgehellten Signalfarben ──────────────────────── Im Hellen sind --danger/--success satt genug, dass weisse Schrift darauf trägt. Im Dunkeln sind sie aufgehellt (sonst wirkten sie wie Löcher in der Fläche) — und dann reicht Weiss nicht mehr: #ef6a5e mit Weiss liegt bei etwa 3:1, deutlich unter den 4,5:1, die Fliesstext braucht. Auf den hellen Flächen steht darum dunkle Schrift. */ :root[data-theme="dark"] .btn-warn, :root[data-theme="dark"] .btn-warn:hover, :root[data-theme="dark"] #toast.success, :root[data-theme="dark"] #toast.error, :root[data-theme="dark"] .toast-item.success, :root[data-theme="dark"] .toast-item.error, :root[data-theme="dark"] .toast-item.warning, :root[data-theme="dark"] .toast-item.info { color: var(--on-status); } /* Die neutrale Meldung nutzt die Marken-Fläche — die ist im Dunkeln dunkel, dort bleibt die Schrift hell. */ :root[data-theme="dark"] .toast-item, :root[data-theme="dark"] #toast { color: var(--on-brand); } :root[data-theme="dark"] .toast-item.warning { background: var(--warning); } :root[data-theme="dark"] .toast-item.info { background: var(--info-ink); color: var(--on-brand); } :root[data-theme="dark"] .toast-item .toast-copy { border-color: rgba(0,0,0,0.3); color: inherit; } /* Statuspunkt der DB-Verbindung */ :root[data-theme="dark"] .db-dot { background: #4a4a5c; } :root[data-theme="dark"] .db-dot.ok { background: var(--success); } :root[data-theme="dark"] .db-dot.err { background: var(--danger); } /* Bilder/Logos, die für hellen Grund gezeichnet sind, im Dunkeln leicht zurücknehmen — hartes Weiss auf dunklem Grund sticht sonst heraus. */ :root[data-theme="dark"] #topnav img { filter: brightness(0.95); } /* ── Logo auf der Anmeldeseite ─────────────────────────────────────────── Die Anmeldeseite lädt `dark-logo.png` — das ist das DUNKLE Logo, gedacht für hellen Grund, nicht das Logo für den Dunkel-Modus. Auf dunklem Grund verschwindet es fast. Im Dunkeln gehört dort dieselbe helle Fassung hin, die auch die Kopfleiste benutzt. `content` auf einem tauscht die Bildquelle, ohne das Markup anzufassen — die Anmeldeseite bleibt damit frei von Theme-Logik. */ :root[data-theme="dark"] .user-login-logo img { content: url("https://feworld.de/logo-light.png"); } /* ── Dieselben Korrekturen für die System-Einstellung ──────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #topnav { background: var(--topnav-bg); border-bottom: 1px solid var(--border); box-shadow: none; } :root:not([data-theme="light"]) .nav-group-menu, :root:not([data-theme="light"]) .modal, :root:not([data-theme="light"]) .kommentar-item, :root:not([data-theme="light"]) .kommentar-form, :root:not([data-theme="light"]) .detail-footer { background: var(--surface); border-color: var(--border); } :root:not([data-theme="light"]) .nav-group-menu { border: 1px solid var(--border); box-shadow: var(--shadow-float); } :root:not([data-theme="light"]) .nav-group-item { color: var(--text); } :root:not([data-theme="light"]) .nav-group-item:hover { background: rgba(255,255,255,0.06); } :root:not([data-theme="light"]) .detail-right, :root:not([data-theme="light"]) .detail-status-row select { background: var(--surface-2); } :root:not([data-theme="light"]) .btn-outline, :root:not([data-theme="light"]) .pill, :root:not([data-theme="light"]) .field input, :root:not([data-theme="light"]) .field select, :root:not([data-theme="light"]) .field textarea, :root:not([data-theme="light"]) .filter-bar input[type=text], :root:not([data-theme="light"]) .kommentar-form input, :root:not([data-theme="light"]) .kommentar-form textarea { background: var(--input-bg); color: var(--text); border-color: var(--input-border); } :root:not([data-theme="light"]) .btn-danger { background: var(--danger-soft); color: var(--danger-ink); border-color: rgba(239,106,94,0.35); } :root:not([data-theme="light"]) .btn-danger:hover { background: var(--danger); color: var(--on-status); } :root:not([data-theme="light"]) .btn-success { background: var(--success-soft); color: var(--success-ink); border-color: rgba(86,201,138,0.35); } :root:not([data-theme="light"]) .btn-success:hover { background: var(--success); color: var(--on-status); } :root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .nav-tab.active, :root:not([data-theme="light"]) .nav-group.has-active > .nav-group-toggle, :root:not([data-theme="light"]) .nav-group-item.active { color: var(--on-accent); } :root:not([data-theme="light"]) .pill.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } :root:not([data-theme="light"]) .modal-overlay { background: var(--overlay); } :root:not([data-theme="light"]) .field-invalid input, :root:not([data-theme="light"]) .field-invalid select, :root:not([data-theme="light"]) .field-invalid textarea { background: var(--danger-soft); } :root:not([data-theme="light"]) .detail-header, :root:not([data-theme="light"]) .detail-total-row { background: var(--brand-surface); color: var(--on-brand); } :root:not([data-theme="light"]) .btn-warn, :root:not([data-theme="light"]) .btn-warn:hover, :root:not([data-theme="light"]) #toast.success, :root:not([data-theme="light"]) #toast.error, :root:not([data-theme="light"]) .toast-item.success, :root:not([data-theme="light"]) .toast-item.error, :root:not([data-theme="light"]) .toast-item.warning, :root:not([data-theme="light"]) .toast-item.info { color: var(--on-status); } :root:not([data-theme="light"]) .toast-item, :root:not([data-theme="light"]) #toast { color: var(--on-brand); } :root:not([data-theme="light"]) .toast-item.warning { background: var(--warning); } :root:not([data-theme="light"]) .toast-item.info { background: var(--info-ink); color: var(--on-brand); } :root:not([data-theme="light"]) .toast-item .toast-copy { border-color: rgba(0,0,0,0.3); color: inherit; } :root:not([data-theme="light"]) .db-dot { background: #4a4a5c; } :root:not([data-theme="light"]) .db-dot.ok { background: var(--success); } :root:not([data-theme="light"]) .db-dot.err { background: var(--danger); } :root:not([data-theme="light"]) #topnav img { filter: brightness(0.95); } /* Logo der Anmeldeseite, siehe Erklaerung im Attribut-Block oben. */ :root:not([data-theme="light"]) .user-login-logo img { content: url("https://feworld.de/logo-light.png"); } } /* ══════════════════════════════════════════════════════════════════════════ 4. Umschalter im Profil-Menü ══════════════════════════════════════════════════════════════════════════ */ .theme-switch { display: flex; gap: 3px; padding: 4px; margin: 4px 6px 2px; background: var(--surface-2); border-radius: 8px; } .theme-switch button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 4px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; } .theme-switch button:hover { color: var(--text); } .theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); } .theme-switch button svg { width: 13px; height: 13px; flex-shrink: 0; } /* Trennlinie über dem Umschalter, damit er sich von den Menüpunkten darüber absetzt. */ .theme-switch-sep { height: 1px; background: var(--border); margin: 6px 0 2px; } /* ══════════════════════════════════════════════════════════════════════════ 5. Weiche Übergänge beim Umschalten Ohne das springt die Oberfläche hart um. Bewusst NUR auf Farben und nur auf den grossen Flächen — eine globale Transition auf `all` würde jede Animation im System verlangsamen. Die Klasse setzt das JS für ~250 ms um den Wechsel herum und entfernt sie danach wieder: dauerhaft aktiv würde sie jeden Hover-Effekt träge machen. ══════════════════════════════════════════════════════════════════════════ */ .theme-transition, .theme-transition body, .theme-transition #topnav, .theme-transition .panel, .theme-transition [data-module-view] { transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease; } @media (prefers-reduced-motion: reduce) { .theme-transition, .theme-transition body, .theme-transition #topnav, .theme-transition .panel, .theme-transition [data-module-view] { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ 6. DOKUMENT-VORSCHAU — bleibt IMMER hell ══════════════════════════════════════════════════════════════════════════ Die Vertrags-/Angebotsvorschau ist kein Bedienelement, sondern die Vorschau auf ein PAPIER: exakt das, was gleich als PDF beim Gast landet. Ein Dokument, das je nach Bildschirmeinstellung anders aussieht, ist wertlos — man könnte nicht mehr beurteilen, was man verschickt. Darum wird hier die komplette Farb-Palette auf die HELL-Werte zurückgesetzt, statt einzelne Regeln zu überschreiben. Vorteil: Alles darin — auch Bausteine, die es heute noch gar nicht gibt — ist automatisch richtig, solange es Token benutzt. Es gibt keinen Weg, hier versehentlich eine dunkle Fläche hineinzubekommen. Der Rahmen DRUMHERUM (Werkzeugleiste, Formularspalte) bleibt dunkel — nur das Blatt selbst ist hell, so wie ein Blatt Papier auf einem dunklen Schreibtisch. ══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] .contract-wrapper, :root:not([data-theme="light"]) .contract-wrapper { color-scheme: light; --accent: #c8a96e; --accent-hover: #b08d52; --accent-soft: #fdf3e3; --accent-tint: #f3e6cd; --accent2: #b08d52; --bg: #f4f6f9; --bg-soft: #f4f6f9; --bg-subtle: #f4f6f9; --bg-surface: #ffffff; --border: #e2e6ea; --border-light: #eceff3; --border-strong: #ccd2da; --brand: #1a1a2e; --brand-surface: #1a1a2e; --brand2: #16213e; --danger: #c0392b; --danger-ink: #98301f; --danger-soft: #f8e9e7; --hover: #f1f5f9; --info-ink: #2b4a75; --info-soft: #e9eff7; --input-bg: #ffffff; --input-border: #d5d9de; --muted: #6b7280; --neutral-ink: #4b5563; --neutral-soft: #eef1f5; --on-accent: #ffffff; --on-brand: #ffffff; --on-status: #ffffff; --overlay: rgba(0,0,0,0.5); --primary: #1a1a2e; --shadow: 0 2px 16px rgba(0,0,0,0.08); --shadow-card: 0 1px 2px rgba(26,26,46,0.05), 0 4px 14px rgba(26,26,46,0.05); --shadow-float: 0 2px 6px rgba(26,26,46,0.07), 0 10px 30px rgba(26,26,46,0.16); --success: #27ae60; --success-ink: #1b6b43; --success-soft: #e6f4ec; --surface: #ffffff; --surface-2: #f4f6f9; --surface-3: #eceff3; --switch-knob: #ffffff; --text: #1a1a2e; --text-muted: #6b7280; --topnav-bg: #1a1a2e; --warning: #e67e22; --warning-ink: #8f5510; --warning-soft: #fbf0df; /* Grundfarben für alles, was im Dokument nicht selbst gesetzt ist. */ background: var(--surface); color: var(--text); } /* Das Blatt vom dunklen Untergrund abheben: im Hellen trägt es einen dezenten Schatten, im Dunkeln braucht es einen deutlicheren, sonst franst die weisse Fläche am dunklen Rand aus. */ :root[data-theme="dark"] .contract-wrapper, :root:not([data-theme="light"]) .contract-wrapper { box-shadow: 0 4px 28px rgba(0,0,0,0.55); border-radius: 4px; } /* ══════════════════════════════════════════════════════════════════════════ 7. Umschalter in der Profilseite ("Mein Konto") ══════════════════════════════════════════════════════════════════════════ Denselben Schalter gibt es im Profil-Menü der Kopfleiste. Doppelt ist hier Absicht: Das Menü ist der kurze Weg, die Profilseite der Ort, an dem man eine Einstellung sucht. Beide bedienen dieselbe Logik in core/theme.js und halten sich über Theme.sync() gegenseitig aktuell. ══════════════════════════════════════════════════════════════════════════ */ .profile-theme { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .profile-theme-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .profile-theme-sub { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin-bottom: 12px; } /* Im Profil trägt der Abschnitt bereits eine eigene Trennlinie und Überschrift — die Linie aus switchHtml() wäre eine zweite direkt darunter. */ .profile-theme .theme-switch-sep { display: none; } .profile-theme .theme-switch { margin: 0; max-width: 320px; padding: 5px; } .profile-theme .theme-switch button { padding: 8px 6px; font-size: 12px; }