/* ============================================================================= HdKD · Das Fundament · v6.60.0 ----------------------------------------------------------------------------- EINE Quelle für Farben, Formen, Schriften und Bewegung. Vorher hatte jedes Modul seinen eigenen Satz Variablen; jeder war eine Kopie des vorigen, und eine Farbkorrektur traf deshalb immer nur eine Welt. Alle Module behalten IHRE Namen — sie holen die Werte nur noch von hier. `--p-accent: var(--h-accent)`. Es verschwindet kein einziger Name, also kann keine bestehende Regel brechen. ── ZWEI SCHALTER ───────────────────────────────────────────────────────── 1. WELCHE PALETTE? warm (Standard) oder kühl. Eine Hauseinstellung — Einstellungen › Design › Backend-Design. Gestellt über `data-hdkd-palette="kuehl"` auf . Betrifft NUR die Neutralen (Flächen, Schrift, Linien, Schatten). Rot bleibt rot, grün bleibt grün: Marke und Bedeutung hängen nicht an der Palette. 2. HELL ODER DUNKEL? hell (Standard), dunkel, oder dem System folgen. Eine PERSÖNLICHE Einstellung — jede Person für sich, so wie es das Portal für die Vereine längst kann. Gestellt über `data-hdkd-scheme="dark"` / `="light"` auf ; kein Attribut = dem System folgen. Die beiden sind unabhängig: vier Zustände, alle geprüft. ── DREI EBENEN ─────────────────────────────────────────────────────────── --h-warm-… / --h-kuehl-… die rohen Werte. Bewegen sich NIE. --h-hell-… / --h-dunkel-… Schalter 1. Zeigen auf warm oder kühl. --h-… Schalter 2. Zeigt auf hell oder dunkel. Wer den Dunkelmodus selbst regelt (Portal, öffentliche Formulare), leitet von `--h-hell-…` ab: folgt der Palette, bleibt aber hell. Wer mitwechseln soll (das Büro), leitet von `--h-…` ab. REGEL FÜR NEUE MODULE: kein eigener Variablen-Satz mehr. Entweder direkt `var(--h-…)` benutzen oder die eigenen Namen hier ableiten. Farbwerte gehören ausschließlich in diese Datei. ========================================================================== */ :root { /* ═══════════════════════════════════════════════════════════════════════ DIE WERTE — hier und nirgends sonst. ═══════════════════════════════════════════════════════════════════════ */ /* ── Marke ────────────────────────────────────────────────────────────── HdKD-Rot. Gilt in beiden Paletten; eine Hausfarbe ist keine Frage des Geschmacks. Bis v6.59.0 setzte der Graphit-Look hier ab Werk Petrol — auf derselben Seite, auf der die Grundschicht Rot führte. */ --h-hell-accent: #e2001a; --h-hell-accent-ink: #ffffff; /* Schrift AUF der Akzentfläche */ --h-hell-accent-strong: #b30015; /* Akzent als SCHRIFT auf hellem Grund (7.2:1) */ --h-hell-accent-soft: #fbeaea; /* zarte Akzentfläche */ --h-hell-accent-line: #f3c9cb; --h-dunkel-accent: #ff5a47; --h-dunkel-accent-ink: #1a1310; --h-dunkel-accent-strong: #ff8f7f; --h-dunkel-accent-soft: rgba(255,90,71,.15); --h-dunkel-accent-line: rgba(255,90,71,.36); /* ── Bedeutung ────────────────────────────────────────────────────────── grün/blau/gelb/rot. Auch das ist keine Frage der Palette: „bestätigt" ist grün, egal ob die Seite warm oder kühl läuft. */ --h-hell-ok-bg: #e4f1e6; --h-hell-ok-ink: #1f6b39; --h-hell-ok-line: #3a9d54; --h-hell-info-bg: #e2ecf8; --h-hell-info-ink: #1a5694; --h-hell-info-line: #3580cf; --h-hell-warn-bg: #faeccd; --h-hell-warn-ink: #856217; --h-hell-warn-line: #e0a82c; --h-hell-danger-bg: #f7dcdc; --h-hell-danger-ink: #8c2220; --h-hell-danger-line: #d4423a; --h-dunkel-ok-bg: rgba(58,157,84,.20); --h-dunkel-ok-ink: #7fd394; --h-dunkel-ok-line: #3a9d54; --h-dunkel-info-bg: rgba(53,128,207,.22); --h-dunkel-info-ink: #82b6ef; --h-dunkel-info-line: #3580cf; --h-dunkel-warn-bg: rgba(224,168,44,.20); --h-dunkel-warn-ink: #e6c069; --h-dunkel-warn-line: #e0a82c; --h-dunkel-danger-bg: rgba(212,66,58,.22); --h-dunkel-danger-ink: #ef938b; --h-dunkel-danger-line: #d4423a; /* ── Palette WARM (Werkseinstellung) ──────────────────────────────────── Die Hausfarben. Portal, Evaluations-Bogen und das Raumanfrage-Formular laufen darauf; im Büro war es die Grundschicht unter dem Graphit-Look. */ --h-warm-hell-bg: #faf5ee; /* warmes Off-White, Leinwand hinter Karten */ --h-warm-hell-surface: #ffffff; /* Karten, Container */ --h-warm-hell-surface-2: #f6efe4; /* warmer Sand, sanfte Füllung */ --h-warm-hell-field: #ffffff; --h-warm-hell-hover: #f6efe4; --h-warm-hell-ink: #2a2320; /* warmes Fast-Schwarz */ --h-warm-hell-ink-2: #6f6358; /* warmes Grau */ /* Das Büro führte hier #9a8d80 — auf dem Sand-Grund nur 2.98:1, damit durch jede Kontrastprüfung gefallen. Das Portal führte längst diesen dunkleren Wert; gemessen 4.75:1 auf weißer Karte. */ --h-warm-hell-ink-3: #7d7164; --h-warm-hell-line: #e8ddce; --h-warm-hell-line-strong: #d8cab6; --h-warm-hell-th-bg: #f3eadc; --h-warm-hell-th-ink: #6f6358; --h-warm-hell-th-line: #e2d4bf; --h-warm-hell-shadow: 0 1px 2px rgba(42,35,32,.04), 0 18px 44px -30px rgba(42,35,32,.34); --h-warm-hell-shadow-sm: 0 1px 2px rgba(42,35,32,.05), 0 10px 22px -18px rgba(42,35,32,.30); --h-warm-dunkel-bg: #161310; --h-warm-dunkel-surface: #211c17; --h-warm-dunkel-surface-2: #2a221b; --h-warm-dunkel-field: #1d1814; --h-warm-dunkel-hover: #2a221b; --h-warm-dunkel-ink: #f3ece3; --h-warm-dunkel-ink-2: #b3a496; --h-warm-dunkel-ink-3: #a2937f; /* v6.60.0: von #8a7c6e angehoben, war 4.17:1 */ --h-warm-dunkel-line: #352c23; --h-warm-dunkel-line-strong: #483b2e; --h-warm-dunkel-th-bg: #120e0b; --h-warm-dunkel-th-ink: #e9ddcf; --h-warm-dunkel-th-line: #352c23; --h-warm-dunkel-shadow: 0 1px 2px rgba(0,0,0,.34), 0 18px 44px -30px rgba(0,0,0,.72); --h-warm-dunkel-shadow-sm: 0 1px 2px rgba(0,0,0,.36), 0 10px 22px -18px rgba(0,0,0,.66); /* ── Palette KÜHL ─────────────────────────────────────────────────────── Kühle Neutrale statt warmem Sand. Der Graphit-Look benutzte sie bis v6.59.0 fest im Büro, während der Rest des Hauses warm lief — genau hier klaffte es auseinander. Jetzt ist es eine bewusste Wahl. */ --h-kuehl-hell-bg: #f6f6f4; --h-kuehl-hell-surface: #ffffff; --h-kuehl-hell-surface-2: #f4f5f4; --h-kuehl-hell-field: #fbfbfa; --h-kuehl-hell-hover: #f4f5f4; --h-kuehl-hell-ink: #232a33; --h-kuehl-hell-ink-2: #5f6b76; /* v6.60.0: war #9aa2ac und ergab gemessene 2.58:1 auf weißer Karte — die kühle Palette fiel damit deutlich durch. Auf #6b7580 abgedunkelt: 4.83:1. Ohne diesen Schritt wäre „kühl" keine Wahl gewesen, die man anbieten darf. */ --h-kuehl-hell-ink-3: #6b7580; --h-kuehl-hell-line: #eef0f2; --h-kuehl-hell-line-strong: #e4e7eb; --h-kuehl-hell-th-bg: #fafbfa; --h-kuehl-hell-th-ink: #5f6b76; --h-kuehl-hell-th-line: #eef0f2; --h-kuehl-hell-shadow: 0 1px 2px rgba(30,40,54,.05), 0 16px 40px -30px rgba(30,40,54,.30); --h-kuehl-hell-shadow-sm: 0 1px 2px rgba(30,40,54,.05), 0 10px 22px -18px rgba(30,40,54,.26); --h-kuehl-dunkel-bg: #0f1115; --h-kuehl-dunkel-surface: #181b21; --h-kuehl-dunkel-surface-2: #1d212a; --h-kuehl-dunkel-field: #13161b; --h-kuehl-dunkel-hover: #1d212a; --h-kuehl-dunkel-ink: #eef1f5; --h-kuehl-dunkel-ink-2: #97a1ae; --h-kuehl-dunkel-ink-3: #808b98; /* v6.60.0: von #6c7682 angehoben, war 3.74:1 */ --h-kuehl-dunkel-line: #272b33; --h-kuehl-dunkel-line-strong: #353b46; --h-kuehl-dunkel-th-bg: #07090c; --h-kuehl-dunkel-th-ink: #eef1f5; --h-kuehl-dunkel-th-line: #272b33; --h-kuehl-dunkel-shadow: 0 1px 2px rgba(0,0,0,.34), 0 16px 40px -30px rgba(0,0,0,.70); --h-kuehl-dunkel-shadow-sm: 0 1px 2px rgba(0,0,0,.36), 0 10px 22px -18px rgba(0,0,0,.64); /* ═══════════════════════════════════════════════════════════════════════ SCHALTER 1 · WELCHE PALETTE — Standard: warm Nur die Neutralen. Der Block unter :root[data-hdkd-palette="kuehl"] legt genau diese Zeilen um. ═══════════════════════════════════════════════════════════════════════ */ --h-hell-bg: var(--h-warm-hell-bg); --h-hell-surface: var(--h-warm-hell-surface); --h-hell-surface-2: var(--h-warm-hell-surface-2); --h-hell-field: var(--h-warm-hell-field); --h-hell-hover: var(--h-warm-hell-hover); --h-hell-ink: var(--h-warm-hell-ink); --h-hell-ink-2: var(--h-warm-hell-ink-2); --h-hell-ink-3: var(--h-warm-hell-ink-3); --h-hell-line: var(--h-warm-hell-line); --h-hell-line-strong: var(--h-warm-hell-line-strong); --h-hell-th-bg: var(--h-warm-hell-th-bg); --h-hell-th-ink: var(--h-warm-hell-th-ink); --h-hell-th-line: var(--h-warm-hell-th-line); --h-hell-shadow: var(--h-warm-hell-shadow); --h-hell-shadow-sm: var(--h-warm-hell-shadow-sm); --h-dunkel-bg: var(--h-warm-dunkel-bg); --h-dunkel-surface: var(--h-warm-dunkel-surface); --h-dunkel-surface-2: var(--h-warm-dunkel-surface-2); --h-dunkel-field: var(--h-warm-dunkel-field); --h-dunkel-hover: var(--h-warm-dunkel-hover); --h-dunkel-ink: var(--h-warm-dunkel-ink); --h-dunkel-ink-2: var(--h-warm-dunkel-ink-2); --h-dunkel-ink-3: var(--h-warm-dunkel-ink-3); --h-dunkel-line: var(--h-warm-dunkel-line); --h-dunkel-line-strong: var(--h-warm-dunkel-line-strong); --h-dunkel-th-bg: var(--h-warm-dunkel-th-bg); --h-dunkel-th-ink: var(--h-warm-dunkel-th-ink); --h-dunkel-th-line: var(--h-warm-dunkel-th-line); --h-dunkel-shadow: var(--h-warm-dunkel-shadow); --h-dunkel-shadow-sm: var(--h-warm-dunkel-shadow-sm); /* ═══════════════════════════════════════════════════════════════════════ SCHALTER 2 · HELL ODER DUNKEL — Standard: hell Die beiden Blöcke ganz unten legen genau diese Zeilen um. ═══════════════════════════════════════════════════════════════════════ */ --h-accent: var(--h-hell-accent); --h-accent-ink: var(--h-hell-accent-ink); --h-accent-strong: var(--h-hell-accent-strong); --h-accent-soft: var(--h-hell-accent-soft); --h-accent-line: var(--h-hell-accent-line); --h-bg: var(--h-hell-bg); --h-surface: var(--h-hell-surface); --h-surface-2: var(--h-hell-surface-2); --h-field: var(--h-hell-field); --h-hover: var(--h-hell-hover); --h-ink: var(--h-hell-ink); --h-ink-2: var(--h-hell-ink-2); --h-ink-3: var(--h-hell-ink-3); --h-line: var(--h-hell-line); --h-line-strong: var(--h-hell-line-strong); --h-th-bg: var(--h-hell-th-bg); --h-th-ink: var(--h-hell-th-ink); --h-th-line: var(--h-hell-th-line); --h-ok-bg: var(--h-hell-ok-bg); --h-ok-ink: var(--h-hell-ok-ink); --h-ok-line: var(--h-hell-ok-line); --h-info-bg: var(--h-hell-info-bg); --h-info-ink: var(--h-hell-info-ink); --h-info-line: var(--h-hell-info-line); --h-warn-bg: var(--h-hell-warn-bg); --h-warn-ink: var(--h-hell-warn-ink); --h-warn-line: var(--h-hell-warn-line); --h-danger-bg: var(--h-hell-danger-bg); --h-danger-ink: var(--h-hell-danger-ink); --h-danger-line: var(--h-hell-danger-line); --h-shadow: var(--h-hell-shadow); --h-shadow-sm: var(--h-hell-shadow-sm); /* ═══════════════════════════════════════════════════════════════════════ WECHSELT NIE ═══════════════════════════════════════════════════════════════════════ */ /* Logo-Spektrum — die sieben Farben des Hauszeichens. Marke, kein Thema. */ --h-s1:#e2241a; --h-s2:#ef7d1a; --h-s3:#f5c518; --h-s4:#4fa836; --h-s5:#11a89c; --h-s6:#1f74b8; --h-s7:#58b6e8; /* Namenskreise — Identitaetsfarben, aus dem Namen abgeleitet. Marke, kein Thema: sie bleiben in Hell und Dunkel gleich, denn eine Person wechselt nicht die Farbe, wenn man das Licht ausmacht. Weisse Schrift darauf. Bis v6.68.0 lag diese Liste SECHSMAL im Code, und ihr erster Wert war das Petrol des ausgemusterten Looks — deshalb trugen die Namenskreise als einzige Stelle im Buero noch die alte Akzentfarbe. */ --h-av1:#9c3b52; --h-av2:#b5791d; --h-av3:#3f4ea3; --h-av4:#8e63ac; --h-av5:#2f6fb0; --h-av6:#2f7d43; --h-av7:#a5542f; --h-av8:#4a5b70; /* Form — vier Stufen statt vierundzwanzig. klein = Chips, Marken, kleine Felder (war 2 3 4 5) mittel = Knöpfe, Eingabefelder (war 6 7 8 9 10) gross = Karten, Container, Overlays (war 11 12 13 14 15 16 20) pille = runde Enden (war 99 100 999) Runde Punkte bleiben 50%. */ --h-r-klein: 5px; --h-r-mittel: 9px; --h-r-gross: 14px; --h-r-pille: 999px; /* Fokusring — die einzige Stelle, an der Tastatur-Bedienung sichtbar wird. */ --h-ring: 0 0 0 4px color-mix(in oklab, var(--h-accent) 18%, transparent); /* Schrift. Beide Familien liegen selbst gehostet bei (DSGVO), siehe assets/fonts/ und admin-fonts.css. Archivo und Space Mono benutzt nur die Projektion — sie stehen dort, wo sie hingehören. */ --h-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --h-font-head: "Bricolage Grotesque", var(--h-font-body); --h-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Schriftgrößen-Leiter. Vorher liefen im Haus zwanzig zufällige Größen. */ --h-t-12: 12px; --h-t-14: 14px; --h-t-16: 16px; --h-t-18: 18px; --h-t-22: 22px; --h-t-28: 28px; --h-t-34: 34px; /* Zeilenhöhen */ --h-lh-eng: 1.15; /* Überschriften */ --h-lh-dicht: 1.35; /* Listen, Kachelköpfe */ --h-lh-text: 1.55; /* Fließtext */ /* Bewegung. Eigene Kurven (Material 3) statt des Browser-Standards 'ease' — der war der Hauptgrund, warum nichts gebaut wirkte (v6.49.0). */ --h-dur-fast: 90ms; --h-dur: 200ms; --h-dur-slow: 320ms; --h-ease: cubic-bezier(.2,0,0,1); --h-ease-out: cubic-bezier(.05,.7,.1,1); } /* ══ SCHALTER 1 · Palette kühl ══════════════════════════════════════════════ Eine Hauseinstellung, kein persönlicher Geschmack: das Haus sieht in jedem Moment gleich aus. Umzulegen unter Einstellungen › Design › Backend-Design. Legt nur die Neutralen um — Marke und Bedeutung bleiben, wo sie sind. */ :root[data-hdkd-palette="kuehl"] { --h-hell-bg: var(--h-kuehl-hell-bg); --h-hell-surface: var(--h-kuehl-hell-surface); --h-hell-surface-2: var(--h-kuehl-hell-surface-2); --h-hell-field: var(--h-kuehl-hell-field); --h-hell-hover: var(--h-kuehl-hell-hover); --h-hell-ink: var(--h-kuehl-hell-ink); --h-hell-ink-2: var(--h-kuehl-hell-ink-2); --h-hell-ink-3: var(--h-kuehl-hell-ink-3); --h-hell-line: var(--h-kuehl-hell-line); --h-hell-line-strong: var(--h-kuehl-hell-line-strong); --h-hell-th-bg: var(--h-kuehl-hell-th-bg); --h-hell-th-ink: var(--h-kuehl-hell-th-ink); --h-hell-th-line: var(--h-kuehl-hell-th-line); --h-hell-shadow: var(--h-kuehl-hell-shadow); --h-hell-shadow-sm: var(--h-kuehl-hell-shadow-sm); --h-dunkel-bg: var(--h-kuehl-dunkel-bg); --h-dunkel-surface: var(--h-kuehl-dunkel-surface); --h-dunkel-surface-2: var(--h-kuehl-dunkel-surface-2); --h-dunkel-field: var(--h-kuehl-dunkel-field); --h-dunkel-hover: var(--h-kuehl-dunkel-hover); --h-dunkel-ink: var(--h-kuehl-dunkel-ink); --h-dunkel-ink-2: var(--h-kuehl-dunkel-ink-2); --h-dunkel-ink-3: var(--h-kuehl-dunkel-ink-3); --h-dunkel-line: var(--h-kuehl-dunkel-line); --h-dunkel-line-strong: var(--h-kuehl-dunkel-line-strong); --h-dunkel-th-bg: var(--h-kuehl-dunkel-th-bg); --h-dunkel-th-ink: var(--h-kuehl-dunkel-th-ink); --h-dunkel-th-line: var(--h-kuehl-dunkel-th-line); --h-dunkel-shadow: var(--h-kuehl-dunkel-shadow); --h-dunkel-shadow-sm: var(--h-kuehl-dunkel-shadow-sm); } /* ══ SCHALTER 2 · dunkel, automatisch ═══════════════════════════════════════ Kein Attribut auf = dem System folgen. `="light"` sperrt hell. Persönliche Einstellung, siehe hdkd_admin_design_head(). */ @media (prefers-color-scheme: dark) { :root:not([data-hdkd-scheme="light"]) { --h-accent: var(--h-dunkel-accent); --h-accent-ink: var(--h-dunkel-accent-ink); --h-accent-strong: var(--h-dunkel-accent-strong); --h-accent-soft: var(--h-dunkel-accent-soft); --h-accent-line: var(--h-dunkel-accent-line); --h-bg: var(--h-dunkel-bg); --h-surface: var(--h-dunkel-surface); --h-surface-2: var(--h-dunkel-surface-2); --h-field: var(--h-dunkel-field); --h-hover: var(--h-dunkel-hover); --h-ink: var(--h-dunkel-ink); --h-ink-2: var(--h-dunkel-ink-2); --h-ink-3: var(--h-dunkel-ink-3); --h-line: var(--h-dunkel-line); --h-line-strong: var(--h-dunkel-line-strong); --h-th-bg: var(--h-dunkel-th-bg); --h-th-ink: var(--h-dunkel-th-ink); --h-th-line: var(--h-dunkel-th-line); --h-ok-bg: var(--h-dunkel-ok-bg); --h-ok-ink: var(--h-dunkel-ok-ink); --h-ok-line: var(--h-dunkel-ok-line); --h-info-bg: var(--h-dunkel-info-bg); --h-info-ink: var(--h-dunkel-info-ink); --h-info-line: var(--h-dunkel-info-line); --h-warn-bg: var(--h-dunkel-warn-bg); --h-warn-ink: var(--h-dunkel-warn-ink); --h-warn-line: var(--h-dunkel-warn-line); --h-danger-bg: var(--h-dunkel-danger-bg); --h-danger-ink: var(--h-dunkel-danger-ink); --h-danger-line: var(--h-dunkel-danger-line); --h-shadow: var(--h-dunkel-shadow); --h-shadow-sm: var(--h-dunkel-shadow-sm); } } /* ══ SCHALTER 2 · dunkel, ausdrücklich gewählt ═════════════════════════════ */ :root[data-hdkd-scheme="dark"] { --h-accent: var(--h-dunkel-accent); --h-accent-ink: var(--h-dunkel-accent-ink); --h-accent-strong: var(--h-dunkel-accent-strong); --h-accent-soft: var(--h-dunkel-accent-soft); --h-accent-line: var(--h-dunkel-accent-line); --h-bg: var(--h-dunkel-bg); --h-surface: var(--h-dunkel-surface); --h-surface-2: var(--h-dunkel-surface-2); --h-field: var(--h-dunkel-field); --h-hover: var(--h-dunkel-hover); --h-ink: var(--h-dunkel-ink); --h-ink-2: var(--h-dunkel-ink-2); --h-ink-3: var(--h-dunkel-ink-3); --h-line: var(--h-dunkel-line); --h-line-strong: var(--h-dunkel-line-strong); --h-th-bg: var(--h-dunkel-th-bg); --h-th-ink: var(--h-dunkel-th-ink); --h-th-line: var(--h-dunkel-th-line); --h-ok-bg: var(--h-dunkel-ok-bg); --h-ok-ink: var(--h-dunkel-ok-ink); --h-ok-line: var(--h-dunkel-ok-line); --h-info-bg: var(--h-dunkel-info-bg); --h-info-ink: var(--h-dunkel-info-ink); --h-info-line: var(--h-dunkel-info-line); --h-warn-bg: var(--h-dunkel-warn-bg); --h-warn-ink: var(--h-dunkel-warn-ink); --h-warn-line: var(--h-dunkel-warn-line); --h-danger-bg: var(--h-dunkel-danger-bg); --h-danger-ink: var(--h-dunkel-danger-ink); --h-danger-line: var(--h-dunkel-danger-line); --h-shadow: var(--h-dunkel-shadow); --h-shadow-sm: var(--h-dunkel-shadow-sm); } /* ══ Weniger Bewegung ═══════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --h-dur-fast: 0ms; --h-dur: 0ms; --h-dur-slow: 0ms; } }