/* ========================================================================== commu Tool — Design-Tokens ========================================================================== EINZIGE Quelle für Farben, Abstände, Radien, Schatten und Übergänge. Muss auf jeder Seite als ERSTES Stylesheet eingebunden sein, vor base.css und components.css. 21.09.2026 aus dashboard.css herausgelöst. Vorher standen die Tokens am Anfang derselben Datei, die auch das gesamte Layout enthielt — und fleet.css hat einen Teil davon für die fünf Drupal-Seiten still überschrieben (--bg-primary #18191c statt #18191a, --text-primary #d6d8dc statt #f0f0ef). Die Drupal-Seiten liefen deshalb im Dark Mode auf einer eigenen, minimal abweichenden Palette. Diese Überschreibungen sind ersatzlos entfallen; wer eine Farbe ändern will, ändert sie hier und nirgends sonst. Regel für neue Tokens: Dark Mode hängt AUSSCHLIESSLICH an :root[data-theme="dark"], nie an @media (prefers-color-scheme) — theme-init.js löst die Systemvorgabe im auf und schreibt das Attribut vor dem ersten Paint. ========================================================================== */ /* ═══════════════════════════════════════════════════════════════════ * COMMUNICAZIUN 2026 THEME (aktiv) * Rollback: diesen :root-Block durch den PASTEL-Block unten ersetzen * (siehe Kommentar /* PASTEL FALLBACK ... am Ende der Datei). * Logo: cp public/commu-classic.svg public/commu.svg * ═══════════════════════════════════════════════════════════════════ */ :root { /* Brand Tokens */ --c-weiss: #f7f8f6; --c-schwarz: #1c1d1d; --c-lila: #dfd5e8; --c-orange: #e95129; --c-braun: #98643c; --c-beige: #ecd3b4; --c-grau: #EBEBEB; /* Base */ --bg-primary: var(--c-weiss); --bg-secondary: #FFFFFF; --bg-sidebar: var(--c-schwarz); --bg-sidebar-hover: #2a2a2b; --bg-sidebar-active: var(--c-lila); --text-primary: var(--c-schwarz); --text-secondary: #3d3d3d; --text-muted: #5a5a5a; /* 18.09.2026: mehrere Seiten hatten var(--text-tertiary, #9ca3af) verwendet ohne dass diese Variable je definiert war (immer nur der Fallback griff) — hier nachgezogen als echtes, drittes Text-Abstufungs-Niveau (heller/blasser als --text-muted), damit der Fallback tatsächlich themefähig wird statt Dark Mode fest zu ignorieren. */ /* 22.09.2026 von #9ca3af auf #666f7c. Der Token heisst "tertiary", wird aber an über dreissig Stellen als SCHRIFTFARBE benutzt (Statuszeichen ✕ in Tabellen, "Noch keine Änderungen erfasst", Zeitstempel, .muted und .section-title in fleet.css). Mit #9ca3af ergab das 2,54:1 auf weisser Karte und 2,38:1 auf dem Seitengrund — weit unter den 4,5:1, die WCAG AA für Text verlangt, und unter den 3:1 selbst für Bedienelemente. #666f7c liegt bei 5,09:1 bzw. 4,77:1 und bleibt dabei deutlich heller als --text-muted (6,9:1), die Abstufung bleibt also erhalten. */ --text-tertiary: #666f7c; --text-sidebar: #a0a0a0; --text-sidebar-active: var(--c-schwarz); /* Die Sidebar ist in beiden Themes dunkel (--bg-sidebar), ihre Textstufen sind deshalb bewusst NICHT im Dark-Block nochmal definiert — sie gelten unveraendert. Bis 21.09.2026 standen sie als #ddd/#888/#777777/#aaaaaa/#fff direkt in den Regeln von base.css. */ --text-sidebar-strong: #ffffff; --text-sidebar-name: #dddddd; --text-sidebar-dim: #888888; /* 22.09.2026 von #777777 auf #8a8a8a: die Rubriküberschriften der Seitenleiste ("Web", "Dev", "Finanzen" …) lagen bei 3,77:1 gegen den dunklen Seitenleisten-Grund #1c1d1d und damit unter den 4,5:1, die WCAG AA für Text dieser Grösse verlangt. #8a8a8a ergibt 4,89:1 — messbar über der Schwelle und optisch kaum verändert. Gilt für beide Themes, die Seitenleiste ist immer dunkel. */ --text-sidebar-section: #8a8a8a; --text-sidebar-section-hover: #aaaaaa; /* Die Sidebar ist in beiden Themes dunkel — ihr Greifer ist deshalb immer der helle. */ --scroll-thumb-sidebar: rgba(255, 255, 255, 0.14); --scroll-thumb-sidebar-hover: rgba(255, 255, 255, 0.28); --border-color: var(--c-grau); --border-light: #f0f0f0; /* Brand Primary (Buttons, Active States) */ --primary: var(--c-orange); /* * Dasselbe Orange, nur für SCHRIFT — nicht für Flächen. * * 22.09.2026. --c-orange (#e95129) ist die Markenfarbe und bleibt als Fläche unangetastet. * Als Schriftfarbe reicht sie aber nicht: 3,7:1 auf weisser Karte und 3,47:1 auf dem * Seitengrund, gegen 4,5:1 nach WCAG AA. Betroffen waren unter anderem der aktive Reiter, * die sortierte Spaltenüberschrift und der Sortierpfeil — also genau die Stellen, an denen * das Orange etwas BEDEUTET und nicht bloss schmückt. * * #ca3b15 ist derselbe Farbton (13°) und dieselbe Sättigung, nur 10% dunkler: 5,06:1 auf * der Karte, 4,75:1 auf dem Seitengrund. Im Dunkelmodus umgekehrt 4% heller. * * Flächen behalten --primary. Wer eine orange FLÄCHE braucht, nimmt --primary; wer orange * SCHRIFT braucht, --primary-text. */ --primary-text: #ca3b15; --primary-hover: #c43e1a; /* --primary selbst (weiss auf Orange) liegt bei 3.7:1 Kontrast — unter WCAG AA (4.5:1) für Text. Nicht neu gemischt: --primary bleibt die Markenfarbe für Icons/Ränder/aktive Tabs (dort ist der Hintergrund nicht weiss, das Problem betrifft nur volltonige Buttons mit weisser Schrift). --primary-active ist eigens für diesen Fall: gefunden beim Design-Review 16.09.2026, live gegen .btn-primary gemessen. */ --primary-active: #a73516; /* Accent Colors */ --accent-blue: #a8c5d9; --accent-blue-light: #e8f1f6; --accent-green: #5fa873; --accent-green-light: #d4e8da; --accent-red: #d44820; --accent-red-light: #fad7cb; --accent-yellow: var(--c-beige); --accent-yellow-light: #f7eede; --accent-purple: var(--c-lila); --accent-purple-light: #f2edf6; --accent-brown: var(--c-braun); --accent-brown-light: #ead7c4; /* Spacing */ --sidebar-width: 260px; --header-height: 72px; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; /* Border Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; /* Badge/Icon-Kachel-Paare — eigene Tokens statt fester Hex-Werte in den einzelnen Regeln fuer Badges und Kachel-Symbole, damit der Dark-Mode-Block unten nur EINMAL pro Farbe umdefiniert werden muss statt jede Komponentenregel einzeln zu duplizieren. 23.09.2026: Hier standen zwei Selektornamen mit Sternchen, durch einen Schraegstrich getrennt. Stern und Schraegstrich schliessen einen CSS-Kommentar — er endete also mitten im Satz, der Rest wurde als Deklaration gelesen und verschluckte alles bis zum naechsten Semikolon. Das traf genau --badge-success-bg: das Token fehlte dadurch flottenweit, .badge-success und .verdict-clean standen ohne Hintergrund. Deshalb hier keine Sternchen neben Schraegstrichen, auch nicht in Selektornamen. */ --badge-success-bg: #d4e8da; --badge-success-fg: #2a5235; --badge-warning-bg: #f0e4c8; --badge-warning-fg: #6b4f0a; --badge-danger-bg: #f5d0d0; --badge-danger-fg: #7a2828; --badge-info-bg: #d0e4f0; --badge-info-fg: #2a5570; --badge-neutral-bg: #e8e8e6; --badge-neutral-fg: var(--text-primary); --badge-purple-bg: #e0d8eb; --badge-purple-fg: #4a3d6b; --icon-blue-bg: #d0e4f0; --icon-blue-fg: #2a5570; --icon-green-bg: #d4e8da; --icon-green-fg: #2a5235; --icon-yellow-bg: #f0e4c8; --icon-yellow-fg: #6b4f0a; --icon-purple-bg: #e0d8eb; --icon-purple-fg: #4a3d6b; --icon-red-bg: #f5d0d0; --icon-red-fg: #7a2828; --icon-teal-bg: #d8efef; --icon-teal-fg: #0e5e66; --avatar-bg: var(--accent-green-light); --avatar-fg: #3D6B4A; /* Pastell-Paare für Badges, Pillen und Statuszellen. Dieselbe Tailwind-Skala lag bis 17.09.2026 als feste Hex-Werte in fleet.css, wordpress.html, backups.html, envato.html, freemius.html, admin/* und den Sitzplan-Seiten verstreut — im Dark Mode blieben sie deshalb alle hell. Ein Paar pro Farbe, hier und im Dark-Block unten je einmal definiert; neue Badges greifen bitte hierauf zu statt eigene Hex-Werte mitzubringen. */ --tone-red-bg: #fee2e2; --tone-red-fg: #b91c1c; --tone-orange-bg: #ffedd5; --tone-orange-fg: #c2410c; --tone-amber-bg: #fef3c7; --tone-amber-fg: #b45309; /* Heller Bernstein für ALLE Warn-Markierungen im System (Punkt, Rand, Balken, Toast-Kante) — klar unterscheidbar von Rot. Vereinheitlicht 30.09.2026. NIE als Textfarbe: auf Weiss nur 2,1:1. Text in Bernstein (auch grosse Zahlen, seit 01.10.2026) nimmt --tone-amber-fg. */ --tone-amber-mark: #f59e0b; --tone-yellow-bg: #fef9c3; --tone-yellow-fg: #a16207; --tone-green-bg: #d1fae5; --tone-green-fg: #047857; --tone-blue-bg: #dbeafe; --tone-blue-fg: #1d4ed8; --tone-indigo-bg: #e0e7ff; --tone-indigo-fg: #4338ca; --tone-purple-bg: #f3e5f5; --tone-purple-fg: #6b21a8; --tone-teal-bg: #d8efef; --tone-teal-fg: #0e5e66; --tone-lime-bg: #d9f99d; --tone-lime-fg: #3f6212; /* 22.09.2026 von #6b7280 nachgedunkelt: auf --tone-grey-bg gemessen ergab das 4.39:1 und verfehlte AA damit knapp. Jetzt 4.72:1. Betrifft jeden .crit-grey-Chip, also auch die Drupal-Flotte — dort stand "nie"/"offen" bisher gleichermassen unter der Schwelle. */ --tone-grey-bg: #f3f4f6; --tone-grey-fg: #666d79; /* Rinne hinter Segmented Controls und Fortschrittsbalken */ --track-bg: var(--c-grau); /* ── Kategoriale Skala ──────────────────────────────────────────────────────── Für Farben, die aus den DATEN kommen und keine Bedeutung tragen: Abteilung, Standort, Kategorie. Die Reihenfolge ist die Zuteilungsreihenfolge — Abteilung 1 bekommt cat-1, Abteilung 2 cat-2 usw. 21.09.2026: lag als zwei JS-Arrays (CLRS, LOC_CLR/_ADM_LOC_CLR) doppelt in seating.html und admin/seating.html, mit fest eingetragenen Hexwerten, die als `style="background:${c.b};color:${c.f}"` ins Markup geschrieben wurden. Ein Attribut-Style ist spezifischer als jede Stylesheet-Regel — der Dark-Mode-Block konnte diese Badges deshalb strukturell nicht erreichen, sie blieben pastellhell mit hellem Text darauf. Die Arrays zeigen jetzt auf diese Tokens; der Wert, der ins Attribut geschrieben wird, ist ein var()-Verweis und löst je Theme auf. */ --cat-1-bg: #f5e7d4; --cat-1-fg: #98643c; /* braun */ --cat-2-bg: #e6f1fb; --cat-2-fg: #185fa5; /* blau */ --cat-3-bg: #faece7; --cat-3-fg: #993c1d; /* terrakotta */ --cat-4-bg: #faeeda; --cat-4-fg: #854f0b; /* bernstein */ --cat-5-bg: #eeedfe; --cat-5-fg: #534ab7; /* indigo */ --cat-6-bg: #fbeaf0; --cat-6-fg: #993556; /* beere */ --cat-7-bg: #d8efef; --cat-7-fg: #0e5e66; /* petrol */ --cat-8-bg: #f1efe8; --cat-8-fg: #5f5e5a; /* grau */ --cat-9-bg: #dcefea; --cat-9-fg: #1f7a6a; /* salbei */ /* Abstufung „wie weit hinterher" (Drupal-Modulversionen): 1 = eine Version zurueck, 4 = hoffnungslos. Lag als MODUL_ALT_FARBEN in drupal-shared.js. */ --ramp-1: #f59e0b; --ramp-2: #ea8c00; --ramp-3: #d97706; --ramp-4: #b45309; /* Bildlaufleisten. Der Greifer ist bewusst nur ein abgesetzter Grauton und kein Markenakzent: eine Scrollbar ist Navigation, kein Inhalt. --scroll-thumb-hover greift bei Hover über dem scrollenden Bereich. */ --scroll-thumb: rgba(28, 29, 29, 0.18); --scroll-thumb-hover: rgba(28, 29, 29, 0.34); --scroll-track: transparent; /* Overlay hinter Modalen und der Drupal-Detailschublade. Lag vorher als rgba(0,0,0,.4) bis rgba(0,0,0,.5) in zwölf Kopien — im Dark Mode ist ein schwarzer Schleier über ohnehin dunklem Grund kaum wahrnehmbar, deshalb dort deutlich kräftiger. */ --overlay-bg: rgba(28, 29, 29, 0.45); /* Tastaturfokus. Die Markenfarbe selbst ist als Ring zu unruhig und auf orangefarbenen Flächen unsichtbar — ein kräftiges Blau ist hier die verlässlichere Wahl und wird von Nutzenden ohnehin als „Fokus" gelesen. */ --focus-ring: #2563eb; --focus-ring-soft: rgba(37, 99, 235, 0.22); color-scheme: light; } /* ═══════════════════════════════════════════════════════════════════ * DARK MODE — 18.09.2026, auf Nutzerwunsch app-weit eingeführt. * Ausgelöst ausschliesslich über data-theme="dark" am . Eine explizite Wahl (Toggle in * sidebar.js, in localStorage gemerkt) und die Systemvorgabe landen beide dort: theme-init.js * löst prefers-color-scheme im auf und schreibt das Attribut vor dem ersten Paint. * Bewusst KEINE zusätzliche @media-(prefers-color-scheme)-Regel hier — die hat bis 17.09.2026 * bei dunkler Systemeinstellung ohne gespeicherte Wahl nur diese Variablen umgestellt, während * jede Komponentenregel (fleet.css, assets.css, Inline-Styles) am Attribut hängt: dunkler * Hintergrund mit hellen Karten und weisser Schrift auf weissem Grund. Neue Dark-Regeln daher * immer an :root[data-theme="dark"] hängen, nie an die Media Query. * ═══════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { /* Siehe --primary-text oben: im Dunkelmodus 4% heller statt dunkler (4,58:1 auf der Karte, 5,26:1 auf dem Seitengrund). */ --primary-text: #eb603b; --bg-primary: #18191a; --bg-secondary: #242526; --text-primary: #f0f0ef; --text-secondary: #c2c4c2; /* 22.09.2026 nachgeschärft von #8f918f: auf den helleren Flächen der Drupal-Seite (Reiterleiste #2f3031, Leitkarte #23392a) lag der Wert bei 4,17:1 bzw. 3,91:1. #a0a3a0 schafft alle vier dunklen Untergründe (Seite 6,91 / Karte 6,03 / Reiterleiste 5,19 / Leitkarte 4,88). */ --text-muted: #a0a3a0; /* Dasselbe im Dunkelmodus: #7c7f7d ergab 3,79:1 auf der Karte. #8a8d8b liegt bei 4,58:1 bzw. 5,25:1 auf dem Seitengrund. */ --text-tertiary: #9ca09d; --border-color: #3a3b3c; --border-light: #2f3031; --accent-blue-light: #1f3542; --accent-green-light: #23392a; --accent-red-light: #3d241d; --accent-yellow-light: #3a301e; --accent-purple-light: #2c2636; --accent-brown-light: #362a1f; --badge-success-bg: #23392a; --badge-success-fg: #8fd4a3; --badge-warning-bg: #3a301e; --badge-warning-fg: #e0bd72; --badge-danger-bg: #3d241d; --badge-danger-fg: #e59a8a; --badge-info-bg: #1f3542; --badge-info-fg: #8ec2e0; --badge-neutral-bg: #333435; --badge-neutral-fg: var(--text-primary); --badge-purple-bg: #2c2636; --badge-purple-fg: #c4b3e0; --icon-blue-bg: #1f3542; --icon-blue-fg: #8ec2e0; --icon-green-bg: #23392a; --icon-green-fg: #8fd4a3; --icon-yellow-bg: #3a301e; --icon-yellow-fg: #e0bd72; --icon-purple-bg: #2c2636; --icon-purple-fg: #c4b3e0; --icon-red-bg: #3d241d; --icon-red-fg: #e59a8a; --icon-teal-bg: #1a3638; --icon-teal-fg: #7dd4d4; --avatar-bg: #23392a; --avatar-fg: #8fd4a3; --tone-red-bg: #3d241d; --tone-red-fg: #e59a8a; --tone-orange-bg: #402a1c; --tone-orange-fg: #eda87e; --tone-amber-bg: #3a301e; --tone-amber-fg: #e0bd72; --tone-amber-mark: #f0b54a; --tone-yellow-bg: #3a3720; --tone-yellow-fg: #ddd07a; --tone-green-bg: #23392a; --tone-green-fg: #8fd4a3; --tone-blue-bg: #1f3542; --tone-blue-fg: #8ec2e0; --tone-indigo-bg: #262a40; --tone-indigo-fg: #a5b0e8; --tone-purple-bg: #2c2636; --tone-purple-fg: #c4b3e0; --tone-teal-bg: #1a3638; --tone-teal-fg: #7dd4d4; --tone-lime-bg: #2c3a1e; --tone-lime-fg: #b7d97a; --tone-grey-bg: #333435; --tone-grey-fg: #a8abb2; --track-bg: #2f3031; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.3); --cat-1-bg: #362a1f; --cat-1-fg: #d9b28c; --cat-2-bg: #1f3542; --cat-2-fg: #8ec2e0; --cat-3-bg: #3d241d; --cat-3-fg: #e59a8a; --cat-4-bg: #3a301e; --cat-4-fg: #e0bd72; --cat-5-bg: #262a40; --cat-5-fg: #a5b0e8; --cat-6-bg: #3a2430; --cat-6-fg: #e5a0bb; --cat-7-bg: #1a3638; --cat-7-fg: #7dd4d4; --cat-8-bg: #333435; --cat-8-fg: #a8abb2; --cat-9-bg: #1c3a34; --cat-9-fg: #7bc9b5; --ramp-1: #e0a83c; --ramp-2: #d18f2c; --ramp-3: #bd7a22; --ramp-4: #a06418; --scroll-thumb: rgba(255, 255, 255, 0.16); --scroll-thumb-hover: rgba(255, 255, 255, 0.30); --overlay-bg: rgba(0, 0, 0, 0.66); --focus-ring: #6ba6ff; --focus-ring-soft: rgba(107, 166, 255, 0.26); color-scheme: dark; } * PASTEL FALLBACK – altes Theme zum Rollback * Aktivieren: oberen :root-Block durch diesen ersetzen. * ═══════════════════════════════════════════════════════════════════ :root { --bg-primary: #F5F4F2; --bg-secondary: #FFFFFF; --bg-sidebar: #1a1a1a; --bg-sidebar-hover: #2a2a2a; --bg-sidebar-active: #bed5c5; --text-primary: #1a2420; --text-secondary: #3d4a44; --text-muted: #5a6660; --text-sidebar: #a0a0a0; --text-sidebar-active: #1a1a1a; --border-color: #D8DDD9; --border-light: #E8EBE9; --primary: #5A8C6A; --primary-hover: #4A7A5A; --accent-blue: #a8c5d9; --accent-blue-light: #e8f1f6; --accent-green: #bed5c5; --accent-green-light: #e5f0e8; --accent-red: #e5a5a5; --accent-red-light: #f9cccc; --accent-yellow: #e8d4a8; --accent-yellow-light: #f7f0e0; --accent-purple: #c5b8d9; --accent-purple-light: #ebe5f2; } */