/* ============================================================================= CheckPoint Ehrenamt · tokens.css Mandantenfähiges Token-System mit Hell- und Dunkelmodus. ZWEI ROLLEN-THEMES IN EINER DATEI: User (Mobile, Bottom-Nav) und Admin (Desktop-Sidebar, mobil per Off-Canvas). Jedes Theme ist für sich mandantenfähig — ein neues Team tauscht beide Brand-Blöcke. AUFBAU (pro Theme dieselben drei Schichten): 1) BRAND – pro Team austauschbar. Ein zweites Team ändert NUR diese Werte. 2) BASE – theme-unabhängig: Abstände, Radien, Schrift, Transitions. 3) SEMANTIK – hell + dunkel in einem, gelöst über die CSS-Funktion light-dark(). NAMENSRAUM: --cp-user-* → Token für die Ehrenamtlichen-Oberfläche (Bottom-Nav-Shell) --cp-admin-* → Token für die Admin-Oberfläche (Sidebar-Shell) Komponenten-CSS wählt je Shell den passenden Namensraum. Es gibt keine gemeinsamen Farb-Tokens mehr ohne Präfix — das verhindert versehentliches Mischen der beiden Looks. THEME-STEUERUNG (kein JavaScript nötig): - Standard folgt der Systemeinstellung (prefers-color-scheme) automatisch. - Optionaler manueller Override später: bzw. "light". Hinweis: Diese Datei definiert nur Variablen. Komponenten-CSS muss diese Tokens verwenden (z. B. background: var(--cp-user-surface)), damit der Dunkelmodus wirklich greift – nirgends feste Weiß-/Schwarzwerte verdrahten. ============================================================================= */ /* Schriften selbst gehostet (DSGVO: kein externer Request an Google). @font-face-Regeln in fonts.css, Dateien unter static/fonts/. */ @import url("fonts.css"); /* ############################################################################# TEIL A · USER-THEME (Ehrenamtliche, Mobile, Bottom-Nav) ############################################################################# */ /* ============================================================================= A.1 · BRAND (pro Mandant überschreiben — User-Theme) ---------------------------------------------------------------------------- Für ein weiteres Team genügt es, diesen Block zu ersetzen – am besten serverseitig pro Team eingespielt, z. B.: Alle getönten Flächen, Fokus-Ringe und Status-Farben werden aus diesen wenigen Werten abgeleitet – das Team muss nichts weiter pflegen. ============================================================================= */ :root { --cp-user-brand-primary: #21a8ad; /* Türkis – Hauptfarbe */ --cp-user-brand-primary-strong: #147f84; /* Türkis dunkel – Links, starke Akzente */ --cp-user-brand-accent: #ef1823; /* Rot – dringende Aktionen, Warnungen */ --cp-user-brand-accent-strong: #bd0f18; /* Rot dunkel – Hover, starke Akzente */ --cp-user-brand-font: "Roboto Condensed", Arial, Helvetica, sans-serif; --cp-user-on-brand: #fff; /* Schrift auf Voll-Marken-Flächen, themeunabhängig (Türkis/Rot in beiden Modi gleich). Pro Team überschreibbar. */ } /* ============================================================================= A.2 · BASE (theme-unabhängig — User-Theme) ============================================================================= */ :root { --cp-user-font: var(--cp-user-brand-font); --cp-user-radius-sm: 6px; --cp-user-radius-md: 8px; --cp-user-radius-lg: 12px; --cp-user-radius-xl: 16px; --cp-user-radius-pill: 999px; --cp-user-space-1: 0.25rem; --cp-user-space-2: 0.5rem; --cp-user-space-3: 0.75rem; --cp-user-space-4: 1rem; --cp-user-space-5: 1.25rem; --cp-user-space-6: 1.5rem; --cp-user-space-8: 2rem; --cp-user-transition: 160ms ease; } /* ============================================================================= A.3 · SEMANTIK (hell + dunkel via light-dark — User-Theme) ---------------------------------------------------------------------------- light-dark(HELL, DUNKEL) liefert automatisch den passenden Wert, sobald color-scheme aktiv ist. Reihenfolge der Argumente: immer HELL zuerst. ============================================================================= */ :root { /* --- Flächen & Hintergründe ------------------------------------------- */ --cp-user-bg: light-dark(#f5f7f8, #0f1518); /* Seitenhintergrund */ --cp-user-surface: light-dark(#ffffff, #161f22); /* Karten, Header, Formulare */ --cp-user-surface-alt: light-dark(#f0f5f6, #1d272b); /* neutrale Chips, abgesetzt */ /* --- Text -------------------------------------------------------------- */ --cp-user-text: light-dark(#253033, #e8eef0); /* Haupttext */ --cp-user-muted: light-dark(#66777c, #9fb1b5); /* Zusatz-/Meta-Text */ --cp-user-faint: light-dark(#9aabad, #6b7c80); /* inaktiv, sehr leise */ /* --- Linien ------------------------------------------------------------ */ --cp-user-line: light-dark(rgba(37, 48, 51, 0.13), rgba(232, 238, 240, 0.14)); /* --- Markenfarben (Buttons, aktive Zustände) -------------------------- */ --cp-user-teal: var(--cp-user-brand-primary); --cp-user-red: var(--cp-user-brand-accent); /* "dark"-Varianten = starke Akzent-/Textfarbe. Im Dunkelmodus heller, damit sie auf dunklem Grund lesbar bleibt. */ --cp-user-teal-dark: light-dark(var(--cp-user-brand-primary-strong), #5fd0d4); --cp-user-red-dark: light-dark(var(--cp-user-brand-accent-strong), #ff6b73); /* --- Getönte Flächen (aus der Markenfarbe abgeleitet) ----------------- */ --cp-user-teal-soft: light-dark( color-mix(in srgb, var(--cp-user-brand-primary) 14%, white), color-mix(in srgb, var(--cp-user-brand-primary) 26%, transparent) ); --cp-user-red-soft: light-dark( color-mix(in srgb, var(--cp-user-brand-accent) 12%, white), color-mix(in srgb, var(--cp-user-brand-accent) 26%, transparent) ); /* --- Info (sekundäre Infoflächen) -------------------------------------- */ --cp-user-info: light-dark(#2b86c5, #6fb7e6); --cp-user-blue-soft: light-dark(#dff4fb, color-mix(in srgb, #4aa3dd 22%, transparent)); /* --- Fokus-Ring (aus der Markenfarbe abgeleitet) ---------------------- */ --cp-user-focus: light-dark( color-mix(in srgb, var(--cp-user-brand-primary) 34%, transparent), color-mix(in srgb, var(--cp-user-brand-primary) 55%, transparent) ); /* --- Schatten --------------------------------------------------------- */ --cp-user-shadow-color: light-dark(rgba(20, 52, 58, 0.12), rgba(0, 0, 0, 0.55)); --cp-user-shadow-sm: 0 1px 3px var(--cp-user-shadow-color); --cp-user-shadow-md: 0 10px 28px var(--cp-user-shadow-color); /* --- Status-Mapping (semantisch, für Badges/Hinweise) ----------------- */ /* Türkis = offen/bestätigt/verfügbar · Rot = dringend/Vertretung · Neutral = Info/intern/erledigt. */ --cp-user-status-ok-bg: var(--cp-user-teal-soft); --cp-user-status-ok-text: var(--cp-user-teal-dark); --cp-user-status-urgent-bg: var(--cp-user-red-soft); --cp-user-status-urgent-text: var(--cp-user-red-dark); --cp-user-status-neutral-bg: var(--cp-user-surface-alt); --cp-user-status-neutral-text: var(--cp-user-muted); } /* ############################################################################# TEIL B · ADMIN-THEME (Sidebar-Verwaltungsoberfläche, Desktop + mobiles Off-Canvas-Menü). Eigener, vollständig getrennter Tokensatz — bewusst kein Vermischen mit den User-Tokens, damit ein Team beide Looks unabhängig pflegen oder austauschen kann. ############################################################################# */ /* ============================================================================= B.1 · BRAND (pro Mandant überschreiben — Admin-Theme) ---------------------------------------------------------------------------- Quelle: "Checkpoint Koeln UI Corporate Design". Ein zweites Team ersetzt nur diesen Block plus die Schrift-Imports oben in der Datei. ============================================================================= */ :root { --cp-admin-brand-navy: #1b1f30; /* Sidebar, Tabellenkopf */ --cp-admin-brand-navy-soft: #252a3d; /* Sidebar-Trenner, dunkler Hover */ --cp-admin-brand-teal: #01b2bb; /* Hauptmarkenfarbe, aktive Nav */ --cp-admin-brand-teal-ui: #11b6c9; /* Primärbuttons, Floating Actions */ --cp-admin-brand-teal-dark: #139ead; /* Hover, aktive Buttons */ --cp-admin-brand-yellow: #fbef1f; /* Sidebar-Icons, Markenhighlight */ --cp-admin-brand-pink: #e6037f; /* Logo-/Markenakzent */ --cp-admin-brand-red: #e62143; /* Fehler, Abbruch, Warnung */ --cp-admin-brand-red-dark: #c80f3d; /* Danger-Buttons, Hover */ --cp-admin-brand-orange: #f59e18; /* sekundäre Hinweise */ --cp-admin-brand-green: #168a2d; /* Erfolg, verfügbar, bestätigt */ --cp-admin-brand-font-display: "Alfa Slab One", "Roboto Slab", Georgia, serif; --cp-admin-brand-font-ui: "Roboto Condensed", "Arial Narrow", Arial, sans-serif; --cp-admin-on-brand: #fff; /* Schrift auf Volltonflächen (Buttons, Tabellenkopf, Sidebar-Brand) */ } /* ============================================================================= B.2 · BASE (theme-unabhängig — Admin-Theme) ============================================================================= */ :root { --cp-admin-font-display: var(--cp-admin-brand-font-display); --cp-admin-font-ui: var(--cp-admin-brand-font-ui); --cp-admin-font-mono: "Roboto Mono", Consolas, monospace; --cp-admin-radius-sm: 6px; --cp-admin-radius-md: 10px; --cp-admin-radius-lg: 14px; --cp-admin-space-1: 4px; --cp-admin-space-2: 8px; --cp-admin-space-3: 12px; --cp-admin-space-4: 16px; --cp-admin-space-5: 24px; --cp-admin-space-6: 32px; --cp-admin-sidebar-width: 260px; --cp-admin-transition: 160ms ease; } /* ============================================================================= B.3 · SEMANTIK (hell + dunkel via light-dark — Admin-Theme) ---------------------------------------------------------------------------- Das Quelldokument beschreibt nur einen hellen Look (helle Arbeitsfläche + dunkle Sidebar). Die Sidebar bleibt darum in BEIDEN Modi dunkel (Navy) — das ist so gewollt, sie ist ja schon das "dunkle Element" im Hellmodus. Im Dunkelmodus wird nur die Arbeitsfläche dunkler, die Sidebar bleibt das immer gleiche Marken-Navy. So muss am Logo/Sidebar-Look nichts wechseln. ============================================================================= */ :root { /* --- Sidebar (in beiden Themes gleich dunkel = Markenelement) ---------- */ --cp-admin-sidebar-bg: var(--cp-admin-brand-navy); --cp-admin-sidebar-hover: var(--cp-admin-brand-navy-soft); --cp-admin-sidebar-text: light-dark(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)); --cp-admin-sidebar-text-muted: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); --cp-admin-sidebar-icon: var(--cp-admin-brand-yellow); --cp-admin-sidebar-active-bg: var(--cp-admin-brand-teal); --cp-admin-sidebar-active-text: #ffffff; /* --- Arbeitsfläche & Flächen -------------------------------------------- */ --cp-admin-bg: light-dark(#f5f7fa, #0e1320); /* Seitenhintergrund */ --cp-admin-bg-cool: light-dark(#f5fafb, #0c1722); /* kühlerer Arbeitsbereich */ --cp-admin-surface: light-dark(#ffffff, #161c2b); /* Karten, Panels, Formulare */ --cp-admin-surface-soft: light-dark(#eef9fb, #16242c); /* Panel-Header, Akkordeons */ /* --- Text ---------------------------------------------------------------- */ --cp-admin-text: light-dark(#1f2b37, #e6ecf1); /* Haupttext */ --cp-admin-heading: light-dark(#090b10, #f5f8fa); /* Seitentitel, starke Headlines */ --cp-admin-muted: light-dark(#6e8190, #93a3b0); /* Labels, Meta-Informationen */ --cp-admin-muted-2: light-dark(#9ba7b1, #6b7a85); /* inaktive Icons, sehr leise */ /* --- Linien --------------------------------------------------------------- */ --cp-admin-line: light-dark(#d6e6ec, rgba(214, 230, 236, 0.18)); /* Rahmen, Input-Borders */ --cp-admin-line-soft: light-dark(#e8eef2, rgba(214, 230, 236, 0.1)); /* Tabellenlinien */ /* --- Markenfarben (Buttons, aktive Zustände, in beiden Themes gleich) --- */ --cp-admin-teal: var(--cp-admin-brand-teal); --cp-admin-teal-ui: var(--cp-admin-brand-teal-ui); --cp-admin-teal-dark: light-dark(var(--cp-admin-brand-teal-dark), #5fd6e0); --cp-admin-teal-soft: light-dark( color-mix(in srgb, var(--cp-admin-brand-teal) 10%, white), color-mix(in srgb, var(--cp-admin-brand-teal) 24%, transparent) ); --cp-admin-pink: var(--cp-admin-brand-pink); --cp-admin-red: var(--cp-admin-brand-red); --cp-admin-red-dark: light-dark(var(--cp-admin-brand-red-dark), #ff7a93); --cp-admin-red-soft: light-dark( color-mix(in srgb, var(--cp-admin-brand-red) 10%, white), color-mix(in srgb, var(--cp-admin-brand-red) 24%, transparent) ); --cp-admin-orange: var(--cp-admin-brand-orange); --cp-admin-orange-soft: light-dark( color-mix(in srgb, var(--cp-admin-brand-orange) 12%, white), color-mix(in srgb, var(--cp-admin-brand-orange) 24%, transparent) ); --cp-admin-green: var(--cp-admin-brand-green); --cp-admin-green-soft: light-dark(#e5f5e6, color-mix(in srgb, var(--cp-admin-brand-green) 24%, transparent)); /* --- Fokus-Ring ------------------------------------------------------------ */ --cp-admin-focus: light-dark( color-mix(in srgb, var(--cp-admin-brand-teal) 34%, transparent), color-mix(in srgb, var(--cp-admin-brand-teal) 55%, transparent) ); /* --- Schatten ---------------------------------------------------------- */ --cp-admin-shadow-color: light-dark(rgba(27, 31, 48, 0.06), rgba(0, 0, 0, 0.5)); --cp-admin-shadow-soft: 0 2px 8px var(--cp-admin-shadow-color); --cp-admin-shadow-action: light-dark(0 4px 10px rgba(1, 178, 187, 0.25), 0 4px 10px rgba(1, 178, 187, 0.35)); /* --- Chip/Badge-Status (Text immer mitgeben, nie nur Farbe) ------------- */ --cp-admin-status-neutral-bg: light-dark(#e9eef2, color-mix(in srgb, var(--cp-admin-muted-2) 22%, transparent)); --cp-admin-status-neutral-text: var(--cp-admin-text); --cp-admin-status-success-bg: var(--cp-admin-green-soft); --cp-admin-status-success-text: var(--cp-admin-green); --cp-admin-status-info-bg: var(--cp-admin-teal-soft); --cp-admin-status-info-text: var(--cp-admin-teal-dark); --cp-admin-status-warning-bg: var(--cp-admin-orange-soft); --cp-admin-status-warning-text: light-dark(#8a5a0a, #ffc169); --cp-admin-status-error-bg: var(--cp-admin-red-soft); --cp-admin-status-error-text: var(--cp-admin-red-dark); } /* ############################################################################# TEIL C · GLOBALE STEUERUNG (gilt für beide Themes) ############################################################################# */ /* ============================================================================= C.1 · Hell/Dunkel aktivieren + manueller Override ---------------------------------------------------------------------------- Setzt das Attribut data-theme die color-scheme fest, "gewinnt" diese gegen die Systemeinstellung – ganz ohne doppelte Token-Definitionen. Der Topbar-Umschalter setzt data-theme serverseitig (theme-Cookie → ), also ohne JavaScript; "System" entfernt das Attribut wieder. ============================================================================= */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ============================================================================= C.2 · Shell-Auswahl ---------------------------------------------------------------------------- Jede Shell-Vorlage setzt auf ihrem Wurzelelement eine der beiden Klassen. So lesen Komponenten in jeder Shell automatisch die richtigen Tokens, ohne dass irgendwo "user" oder "admin" hartkodiert werden muss: → in base_user.html → in base_admin.html Innerhalb von components.css kann dadurch z. B. .cp-shell-user .cp-card bzw. .cp-shell-admin .cp-card jeweils ihre eigenen Tokens nutzen, falls geteilte Klassennamen je Shell unterschiedlich aussehen sollen. ============================================================================= */ .cp-shell-user { background: var(--cp-user-bg); color: var(--cp-user-text); font-family: var(--cp-user-font); } .cp-shell-admin { background: var(--cp-admin-bg); color: var(--cp-admin-text); font-family: var(--cp-admin-font-ui); } html { color-scheme: inherit; }