/* ═══════════════════════════════════════════════════════════════ ALMAS Doku-Plattform — Dunkle Ansicht (2026-09-08) Additive Override-Schicht, gebaut nach demselben Muster wie almas-doku-theme.css: zuerst die --almas-*-Tokens umdrehen, danach die Stellen nachziehen, die ihre Farbe hart im Regelwerk stehen haben und vom Token-Wechsel deshalb nicht erreicht werden. Greift NUR unter . Ohne das Attribut ist diese Datei wirkungslos — der helle Stand bleibt unangetastet. MUSS ZULETZT geladen werden, nach theme.css und mobile.css. ZWEI FLAECHEN BLEIBEN ABSICHTLICH WEISS, siehe unten: das Unterschriftenfeld und die Dokument-Vorschau. ═══════════════════════════════════════════════════════════════ */ /* color-scheme erledigt auf einen Schlag, was sonst einzeln nachzuziehen waere: Formularfelder ohne eigenes background/color, Scrollbalken, Datums- und Auswahl-Dialoge des Browsers. Ohne diese Zeile bleiben z.B. die Felder in .form-section weiss, weil sie nie eine eigene Hintergrundfarbe bekommen haben. */ html[data-theme="dark"] { color-scheme: dark; /* Rot bleibt die Marke, wird aber angehoben: #D81020 ist auf hellem Grund WCAG-AA, auf #101114 waere es zu dunkel zum Lesen. */ --almas-red: #FF3B3D; --almas-red-hover: #FF6062; --almas-bg: #101114; --almas-bg-alt: #191A1F; --almas-surface: #1B1D22; --almas-surface-glass: rgba(27, 29, 34, .78); --almas-text: #E9EAEE; --almas-text-secondary: #A2A6AE; --almas-text-muted: #7C8089; --almas-border: #2A2D34; --almas-border-strong: #3A3E47; /* Diese drei Namen gibt es im Projekt eigentlich nicht — die Tokens heissen ueberall --almas-*. Mehrere Inline-Styles in almas-doku.js greifen aber nach var(--border,#eee), var(--text-secondary,#666) und var(--bg-subtle,#f6f6f7), und weil die Namen nirgends definiert sind, gilt dort IMMER der helle Ersatzwert — auch dunkel. Betroffen sind unter anderem die Karten der lokalen Entwurfs-Sicherung und die Info-Kaesten. Statt sechzehn Inline-Styles im JS anzufassen, werden die erwarteten Namen hier bedient. Sie gelten NUR dunkel; hell bleibt der Ersatzwert stehen und damit alles so, wie es war. Die eigentliche Aufraeumarbeit — die Inline-Styles auf --almas-* umstellen — steht getrennt aus. */ --border: #2A2D34; --text-secondary: #A2A6AE; --bg-subtle: #191A1F; /* Auf dunklem Grund traegt ein Schatten kaum. Die Tiefe kommt hier aus der Flaechenhelligkeit (bg → surface), der Schatten setzt nur noch die Kante ab. */ --almas-shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .30); --almas-shadow-lg: 0 12px 30px rgba(0, 0, 0, .48), 0 26px 60px rgba(0, 0, 0, .40); } /* ─── Grundflaechen ─────────────────────────────────────────────── */ html[data-theme="dark"] body { background: var(--almas-bg); color: var(--almas-text); } /* ─── Sidebar ─────────────────────────────────────────────────────── theme.css hat sie von dunkel auf hell gedreht. Hier zurueck auf dunkel — aber auf die eigene Flaeche, nicht auf den Seitengrund, damit die Kante zum Inhalt sichtbar bleibt. */ html[data-theme="dark"] .sidebar { background: #16181D; color: var(--almas-text); border-right: 1px solid var(--almas-border); } html[data-theme="dark"] .sidebar-brand { border-bottom: 1px solid var(--almas-border); } html[data-theme="dark"] .sidebar-title { color: var(--almas-text); } html[data-theme="dark"] .sidebar-logo { filter: brightness(0) invert(1); } html[data-theme="dark"] .nav-item { color: var(--almas-text-secondary); } html[data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, .06); color: var(--almas-text); } html[data-theme="dark"] .nav-item.active { background: rgba(255, 59, 61, .16); color: var(--almas-red); } html[data-theme="dark"] .sidebar-footer { border-top: 1px solid var(--almas-border); } html[data-theme="dark"] .sidebar-footer .btn-ghost { color: var(--almas-text-secondary); } html[data-theme="dark"] .sidebar-footer .btn-ghost:hover { background: rgba(255, 255, 255, .06); color: var(--almas-text); } html[data-theme="dark"] .user-avatar { background: var(--almas-red); color: #fff; } html[data-theme="dark"] .user-name { color: var(--almas-text); } html[data-theme="dark"] .user-role { color: var(--almas-text-muted); } /* ─── Landing und Login (oeffentlich, vor der Anmeldung) ────────── */ html[data-theme="dark"] .view-landing { background: var(--almas-bg); } html[data-theme="dark"] .lp-title { color: var(--almas-text); } html[data-theme="dark"] .lp-glass-line { background: var(--almas-border); } html[data-theme="dark"] .lp-section-alt { background: var(--almas-bg-alt); } html[data-theme="dark"] .lp-footer { background: #08090B; } html[data-theme="dark"] .step-number { background: var(--almas-red); color: #fff; } html[data-theme="dark"] .view-login { background: #08090B; } /* ─── Karten, Tabellen, Listen ──────────────────────────────────── */ html[data-theme="dark"] .card, html[data-theme="dark"] .card-section, html[data-theme="dark"] .modal-card, html[data-theme="dark"] .merge-bar, html[data-theme="dark"] .sb-back { background: var(--almas-surface); color: var(--almas-text); } /* ─── Eingabefelder ───────────────────────────────────────────────── Die Suchleiste hatte `background:#fff` hart stehen. Zusammen mit `color-scheme: dark` ergab das weisse Schrift auf weissem Grund: der Browser faerbt die Schrift eines Feldes ohne eigene color-Angabe nach dem Farbschema, den Hintergrund gab das Stylesheet vor. Deshalb hier beides ausdruecklich, und lieber eine Regel zu breit als noch ein uebersehenes Feld. */ html[data-theme="dark"] .search-bar input[type=search], html[data-theme="dark"] .search-bar select, html[data-theme="dark"] .field input, html[data-theme="dark"] .field textarea, html[data-theme="dark"] .field select, html[data-theme="dark"] .form-section input, html[data-theme="dark"] .form-section textarea, html[data-theme="dark"] .form-section select { background: var(--almas-surface); color: var(--almas-text); border-color: var(--almas-border-strong); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--almas-text-muted); } /* ─── Alles, was `background: white` hart stehen hat ───────────────── Nachtrag 08.09.2026, aus dem Feld gemeldet: die Kaesten unter „Welche Alarme sollen aktiv sein?" blieben weiss, die geerbte helle Schrift darin war kaum zu lesen — und beim Ueberfahren wurde der Kasten dunkel und die Schrift plötzlich gut. Genau das Bild, das eine harte Hintergrundfarbe mit einem Hover ueber Tokens erzeugt. Die erste Fassung hat nur die Regeln gefasst, die mir beim Lesen auffielen. Diese hier ist aus dem Stylesheet erhoben: jede Regel, in der `background: white` oder `#fff` steht, ausser den drei bewusst hellen Flaechen weiter unten. Ein Nachziehen einzelner Meldungen haette die naechste Luecke nur verschoben. */ html[data-theme="dark"] .alarm-check-row, html[data-theme="dark"] .contract-row, html[data-theme="dark"] .contract-row.current:hover, html[data-theme="dark"] .contract-card, html[data-theme="dark"] .device-pill, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .badge-light, html[data-theme="dark"] .cust-result-row, html[data-theme="dark"] .wizard-progress-card, html[data-theme="dark"] .repeat-row > input, html[data-theme="dark"] .repeat-row > select, html[data-theme="dark"] .vp-row > input, html[data-theme="dark"] .alarm-matrix tr, html[data-theme="dark"] .alarm-matrix .am-op-select { background: var(--almas-surface); color: var(--almas-text); } html[data-theme="dark"] .contract-row:hover { background: var(--almas-bg-alt); } html[data-theme="dark"] .device-pill.current { background: var(--almas-red); color: #fff; } /* Ausgegraut heisst dunkel etwas anderes als hell. Auf weissem Grund zieht `opacity: .5` die Schrift Richtung Weiss und sie wird zart; auf #101114 zieht sie dieselbe Schrift Richtung Schwarz und sie verschwindet. Deshalb hier zurueckhaltender ausblenden — der Unterschied zum aktiven Eintrag bleibt erkennbar, der Inhalt lesbar. Gemeldet an „Vertraege & Geraete", wo bei einem archivierten Vertrag weder die Nummer noch „noch keine Geraete" zu sehen war. Der eigene Hintergrund von .inactive muss mit, sonst gewinnt die breite Kartenregel oben und der Unterschied zum aktiven Eintrag geht verloren. */ html[data-theme="dark"] .contract-card.inactive { opacity: .78; background: var(--almas-bg-alt); } html[data-theme="dark"] .data-table tbody tr.inactive { opacity: .78; background: var(--almas-bg-alt); } html[data-theme="dark"] .device-row.inactive { opacity: .78; } /* ─── Unterschriften-Miniaturen ───────────────────────────────────── Ebenfalls aus dem Feld: im Wizard war unter „unterschrieben" nichts mehr zu sehen. Die Unterschrift ist ein PNG mit schwarzer Linie auf durchsichtigem Grund — vorher lag darunter Weiss, jetzt lag meine gruene Erfolgsfarbe darunter, und schwarz auf dunkelgruen ist nichts. .sig-img-saved (die grosse Vorschau) hatte laengst ein eigenes `background: white` und war deshalb nie betroffen. Der Miniatur fehlte es. Sie bekommt es hier — dieselbe Ueberlegung wie beim Unterschriftenfeld: das ist Dokument, nicht Oberflaeche. */ html[data-theme="dark"] .sig-img-mini { background: #fff; padding: 2px 4px; border-radius: 4px; } html[data-theme="dark"] .modal-card { border-color: var(--almas-border); } html[data-theme="dark"] .doc-item:hover, html[data-theme="dark"] .contract-row:hover { background: var(--almas-bg-alt); } html[data-theme="dark"] .info-table th, html[data-theme="dark"] .info-table td { border-color: var(--almas-border); } html[data-theme="dark"] .alarm-matrix .am-op { background: var(--almas-bg-alt); } html[data-theme="dark"] .wizard-device-row { background: var(--almas-bg-alt); } html[data-theme="dark"] table th { background: var(--almas-bg-alt); color: var(--almas-text-secondary); } /* Die Grautoene im Audit-Log standen hart auf #999 — auf dunklem Grund ist das grenzwertig, deshalb auf den Muted-Token. */ html[data-theme="dark"] .audit-ts, html[data-theme="dark"] .audit-action, html[data-theme="dark"] .audit-entity, html[data-theme="dark"] .audit-details, html[data-theme="dark"] .audit-details-modal h4 { color: var(--almas-text-muted); } html[data-theme="dark"] .version-badge { background: var(--almas-bg-alt); color: var(--almas-text-secondary); } html[data-theme="dark"] .version-badge:hover { background: var(--almas-border); color: var(--almas-text); } html[data-theme="dark"] .doc-preview-note { color: var(--almas-text-secondary); } /* ─── Statusfarben ────────────────────────────────────────────────── Jeweils als Paar gedacht: gedaempfte Flaeche, heller Schriftzug. Die hellen Paare aus theme.css waeren hier weisse Klekse. */ html[data-theme="dark"] .assignment-status.status-open, html[data-theme="dark"] .doc-status.status-draft { background: #3A2E10; color: #FFC94D; } html[data-theme="dark"] .assignment-status.status-in_progress, html[data-theme="dark"] .doc-status.status-signed { background: #14243E; color: #7FB4FF; } html[data-theme="dark"] .assignment-status.status-completed, html[data-theme="dark"] .doc-status.status-sent { background: #10301F; color: #6FD79B; } html[data-theme="dark"] .assignment-status.status-unparsed { background: #3A1416; color: #FF8A8C; } html[data-theme="dark"] .pill-ok { background: #10301F; color: #6FD79B; } html[data-theme="dark"] .pill-warn { background: #3A2E10; color: #FFC94D; } html[data-theme="dark"] .text-warn { color: #FFC94D; } html[data-theme="dark"] .cust-selected { background: #10301F; border-color: #2F7A4F; } html[data-theme="dark"] .lager-status-offen { color: #FFC94D; } html[data-theme="dark"] .lager-status-ok { color: #6FD79B; } html[data-theme="dark"] .lager-status-fehler { color: #FF8A8C; } html[data-theme="dark"] .lager-input-offen { border-color: #C79200; } html[data-theme="dark"] .info-box { background: #14243E; border-color: #2A4470; } html[data-theme="dark"] .info-box-title { color: #A8CCFF; } html[data-theme="dark"] .info-box-list, html[data-theme="dark"] .info-box p { color: #7FB4FF; } html[data-theme="dark"] .toast { background: var(--almas-surface); color: var(--almas-text); border: 1px solid var(--almas-border); } html[data-theme="dark"] .toast-success { color: #6FD79B; } html[data-theme="dark"] .toast-info { color: #7FB4FF; } html[data-theme="dark"] .sig-saved-meta { color: #6FD79B; } html[data-theme="dark"] .sig-saved-mini { background: #10301F; color: #6FD79B; } /* ─── Wizard ──────────────────────────────────────────────────────── Die roten und gelben Aufmacher-Karten sind auf hellem Grund als zarte Toenung gedacht. Dunkel muessen sie andersherum gedacht werden: Flaeche knapp ueber dem Untergrund, Farbe im Rand. */ html[data-theme="dark"] .wizard-launch { background: #24181A; border-color: #4A2326; } html[data-theme="dark"] .wizard-launch h3 { color: var(--almas-red); } html[data-theme="dark"] .wizard-resume { background: #241E12; border-color: #5A4415; } html[data-theme="dark"] .wizard-resume h3 { color: #FFC94D; } html[data-theme="dark"] .wizard-final { background: #24181A; } html[data-theme="dark"] .wizard-sig-block { border-color: var(--almas-border); } html[data-theme="dark"] .wizard-doc-check { background: var(--almas-surface); border-color: var(--almas-border); } html[data-theme="dark"] .wizard-doc-check:hover { background: var(--almas-bg-alt); border-color: var(--almas-red); } html[data-theme="dark"] .wizard-doc-check:has(input:checked) { background: #24181A; border-color: var(--almas-red); } html[data-theme="dark"] .wizard-doc-tag { background: #24181A; color: var(--almas-red); } html[data-theme="dark"] .wizard-doc-remove { color: var(--almas-red); } html[data-theme="dark"] .wizard-doc-remove:hover, html[data-theme="dark"] .wizard-doc-remove:focus-visible { background: var(--almas-red); color: #fff; } html[data-theme="dark"] .wizard-tip { color: var(--almas-text-muted); } html[data-theme="dark"] .wp-doc-row.done { background: #10301F; } html[data-theme="dark"] .wp-doc-row.done .wp-state { color: #6FD79B; } html[data-theme="dark"] .wp-doc-row.failed { background: #3A1416; } html[data-theme="dark"] .wp-doc-row.failed .wp-state { color: #FF8A8C; } html[data-theme="dark"] .wp-bar-fill { background: var(--almas-red); } /* ═══ ABSICHTLICH HELL ═══════════════════════════════════════════════ Beides zeigt das Dokument, nicht die Oberflaeche. #sigCanvas: Was hier gezeichnet wird, geht als PNG nach R2 und von dort in ein weisses PDF. Ein dunkles Feld wuerde den Kunden auf einem Untergrund unterschreiben lassen, den sein Dokument nie hat — und eine helle Linie auf dunklem Grund verschwindet dort spurlos. .doc-preview-frame: Im iframe liegt vom Server geliefertes Dokument-HTML. Faerbte man es dunkel, saehe der Kunde beim Pruefen etwas anderes als das, was er anschliessend per Mail bekommt. */ html[data-theme="dark"] #sigCanvas { background: #fff; border-color: var(--almas-border-strong); } html[data-theme="dark"] .doc-preview-frame { background: #fff; border-color: var(--almas-border); } /* Der ganze Vorschau-Dialog bleibt hell, nicht nur das Fensterchen darin. Nachtrag 08.09.2026 auf Ansage von Lars: der Renderer im Worker setzt die Tabellen des Bogens nicht alle gleich breit. Auf weissem Grund faellt das nicht auf, weil weiss an weiss grenzt — auf dunklem Grund zeichnete jeder Absatz seine eigene Kante nach, und der Bogen sah aus wie loses Mauerwerk. Der Dialog zeigt ohnehin ein Dokument; ihn hell zu lassen ist ehrlicher als ein dunkler Rahmen um eine weisse Seite. :has() traegt hier, weil almas-doku.css denselben Selektor schon fuer die Breite dieses Dialogs benutzt — wo das fehlt, greift die Regel nicht und es bleibt beim dunklen Dialog mit hellem Bogen. */ html[data-theme="dark"] .modal-card:has(.doc-preview-wrap) { background: #FFFFFF; color: #15161A; border-color: #E6E7EC; } html[data-theme="dark"] .modal-card:has(.doc-preview-wrap) h2 { color: #15161A; } html[data-theme="dark"] .modal-card:has(.doc-preview-wrap) .doc-preview-note, html[data-theme="dark"] .modal-card:has(.doc-preview-wrap) .text-secondary { color: #5C5F66; } html[data-theme="dark"] .modal-card:has(.doc-preview-wrap) .btn-ghost { color: #15161A; } html[data-theme="dark"] .modal-card:has(.doc-preview-wrap) .btn-ghost:hover { background: #F1F1F4; } html[data-theme="dark"] .modal-card:has(.doc-preview-wrap) .btn-secondary { background: #FFFFFF; color: #15161A; border-color: #D6D7DD; } /* ─── Der Umschalter selbst ───────────────────────────────────────── Sitzt als letzter Eintrag in .sidebar-nav und erbt damit alles, was fuer .nav-item gilt: die Ausrichtung, den Hover, und vor allem das display:none unter 767px sowie das Verschwinden der ganzen Sidebar, solange der Wizard offen ist. Deshalb braucht er keine eigene Sichtbarkeitsregel. Die Regel raeumt nur weg, was das Browser-Stylesheet einem