/* ═══════════════════════════════════════════════════════════════════════ 00 — TOKEN Nur Variablen. Keine einzige Regel, die etwas gestaltet. Wer eine Farbe, einen Abstand oder eine Schrift ändern will, ändert sie hier — und nirgends sonst. Ein Wert, der in einer Komponente hart steht, ist ein Wert, den niemand mehr findet. ── DIE EBENEN ──────────────────────────────────────────────────────── Die Zeile unten ist das wichtigste am ganzen Umbau. Sie legt fest, in welcher Reihenfolge die fünf Stilebenen gewinnen — **unabhängig davon, wie viele Klassen ein Selektor hat**. Warum das nötig war: In der alten `hub.css` standen 1400 Zeilen in einer Datei, und zweimal hat sich darin eine Regel selbst überschrieben. Beim Suchfeld lag die Lupe auf dem Text, weil eine allgemeine Eingaberegel weiter unten stand — bei gleicher Spezifität gewinnt die spätere. ⚠ `bruecke` steht zwischen Baukasten und Gerüst: Dort übersetzt eine eigene Datei das Markup der verbliebenen CRM-Seiten in diesen Baukasten (`05-bruecke.css`). Sie ist Übersetzung für Bestand, nicht Sprache für Neues — deshalb darf sie den Baukasten ergänzen, aber nichts überschreiben, was das Gerüst über seinen eigenen Ort sagt. ⚠ Und warum `geruest` NACH `bausteine` kommt: Beim ersten Versuch stand es davor — und prompt lag die Lupe wieder auf dem Text, weil die allgemeine Eingaberegel aus `bausteine` das Suchfeld des Gerüsts schlug. Das Gerüst ist eine **Sonderfassung** des Baukastens für seinen eigenen Ort; es muss ihn überschreiben dürfen, ohne spezifischer zu sein. Die Reihenfolge liest sich damit als Satz: Werte, Grundlage, Baukasten, der Rahmen der ihn anordnet, und zuletzt die Einzelfälle. ═════════════════════════════════════════════════════════════════════ */ @layer token, basis, bausteine, bruecke, geruest, besonderes, contentarea; /* ── Schriften ──────────────────────────────────────────────────────── Selbst gehostet. Keine fremde Adresse im Spiel — das ist auch der Grund, warum die Content-Security-Policy `font-src 'self'` sagen darf. */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/anton-400.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-400.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-500.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/poppins-700.woff2') format('woff2'); } /* Flaggen-Emoji: Windows kann sie sonst nicht darstellen. */ @font-face { font-family: 'TwemojiFlags'; font-display: swap; src: url('/assets/fonts/TwemojiCountryFlags.woff2') format('woff2'); } @layer token { :root { /* ── Marke ────────────────────────────────────────────────────────── Rot heisst im Hub genau EINE Sache: „das betrifft dich, du bist dran". Fehler, Hinweise und Verlauf haben eigene Farben (siehe Zustände) — wenn alles rot ist, heisst Rot nichts mehr. */ --marke: #e0093c; --marke-hell: #ff2d5a; --marke-dunkel:#b6002b; --marke-weich: rgba(224, 9, 60, .12); --marke-linie: rgba(224, 9, 60, .42); /* Alte Namen, damit ausserhalb des Hubs nichts bricht. */ --brand-500: var(--marke); --brand-600: var(--marke-dunkel); --brand-400: var(--marke-hell); --brand-050: var(--marke-weich); /* ── Neutrale Töne ────────────────────────────────────────────────── Kein reines Schwarz: In allen steckt ein Hauch Violett. Dadurch wirkt das Rot zugehörig statt aufgeklebt. */ --n-00: #ffffff; --n-05: #f3f1f5; --n-10: #dedbe3; --n-20: #c3bfcc; --n-30: #a29daf; --n-40: #857f92; --n-50: #6b6577; --n-60: #4b4655; --n-70: #2c2935; --n-80: #1c1a23; --n-90: #131218; --n-99: #0a090c; /* ── Zustände — ausdrücklich NICHT die Markenfarbe ────────────────── Gefahr ist heller und kühler als die Marke und kommt nie allein: immer mit Symbol und Kante. Farbe für sich ist keine Aussage, wenn jemand sie nicht unterscheiden kann. */ --ok-500: #3ecf8e; --ok-bg: rgba(62, 207, 142, .12); --warn-500: #f0a742; --warn-bg: rgba(240, 167, 66, .12); --err-500: #ff5f6d; --err-bg: rgba(255, 95, 109, .12); --info-500: #5b9dff; --info-bg: rgba(91, 157, 255, .12); /* Bereichsfarben — je Hub eine, für den Punkt in der Kopfzeile. */ --c-match: #e0093c; --c-event: #a78bfa; --c-stream: #b07cff; --c-content: #38bdf8; --c-verein: #3ecf8e; --c-frist: #f0a742; /* ── Schriftrollen ────────────────────────────────────────────────── Anton trägt Überschriften UND Zahlen — sie ist als Anzeigetafel-Schrift gebaut. Poppins die Oberfläche. Für Gezähltes eine Systemschrift mit gleicher Zeichenbreite: Spalten stehen dann untereinander, ohne dass man sie ausrichten muss. */ --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif; --font-body: 'Poppins', 'TwemojiFlags', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace; /* ── Schriftgrößen ─────────────────────────────────────────────────── */ --t-display: 34px; --t-h1: 26px; --t-h2: 19px; --t-h3: 15px; --t-body: 14.5px; --t-klein: 13px; --t-mikro: 11px; --t-winzig: 10px; /* ── Abstände ─────────────────────────────────────────────────────── Eine Reihe, keine krummen Zwischenwerte. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ── Kanten und Radien ───────────────────────────────────────────── Die Kante links an jedem Modul trägt den Zustand — deshalb hat sie eine eigene Variable, nicht nur eine Zahl im Baustein. */ --r-s: 3px; --r-m: 6px; --r-l: 10px; --r-full: 999px; --kante: 3px; /* ── Flächen und Linien ───────────────────────────────────────────── */ --chrome: var(--n-99); --bg: var(--n-99); --bg-weich: #0f0e12; --flaeche: var(--n-90); --flaeche-2: var(--n-80); --flaeche-3: #262430; --linie: rgba(255, 255, 255, .075); --linie-stark: rgba(255, 255, 255, .14); --linie-licht: rgba(255, 255, 255, .06); /* ── Text ──────────────────────────────────────────────────────────── */ --text: var(--n-05); --text-leise: var(--n-30); /* ⚠ NICHT `var(--n-50)` (#6b6577). `--text-still` traegt im Hub die Metazeilen: Mailadressen, Zeitstempel, Spaltenkoepfe, Statuschips — und die sind 11 bis 13 px gross, wo 4,5:1 gilt. #6b6577 kam auf 3,33:1 gegen die Kartenflaeche; auf der Accounts-Liste allein waren das 180 Verstoesse. #8B8698 ist der Wert des Hub-Design-Guides fuer `--text-3` und schafft 5,29:1. Die Neutralen-Reihe `--n-50` bleibt unveraendert — sie traegt auch Raender, und die duerfen leise bleiben. */ --text-still: #8B8698; /* ── Akzent (Alias auf die Marke, für den Bestand) ─────────────────── */ --akzent: var(--marke); --akzent-hover: var(--marke-dunkel); --akzent-weich: var(--marke-weich); --akzent-linie: var(--marke-linie); /* ── Erhebung ─────────────────────────────────────────────────────── Sparsam. Auf dunklem Grund trägt eher die Fläche als der Schatten. */ --heben-1: 0 1px 2px rgba(0, 0, 0, .4); --heben-2: 0 2px 8px rgba(0, 0, 0, .45); --heben-3: 0 12px 34px rgba(0, 0, 0, .5); --schatten-1: var(--heben-1); --schatten-2: var(--heben-2); --schatten-3: var(--heben-3); --focus: var(--marke-hell); --focus-dark: var(--marke-hell); /* ── Bewegung ────────────────────────────────────────────────────── Alles unter 200 ms. Was länger dauert, fühlt sich nach Warten an. */ --dauer-schnell: .14s; --dauer-normal: .19s; --kurve: cubic-bezier(.22, 1, .36, 1); } /* ═══════════════════════════════════════════════════════════════════════ DAS HELLE THEME DES HUBS (31.10.2026) ⚠ Es hat vorher GEFEHLT. Der Theme-Knopf setzte `th-light` am `` und merkte sich die Wahl — und die Palette reagierte nicht darauf, weil diese Datei nur eine einzige kannte. Geprueft worden war der Mechanismus (Klasse gesetzt? gespeichert?), nicht das Ergebnis (sieht es hell aus?). Aufgefallen ist es erst, als der Kontrastpruefer in beiden Themes exakt dieselben Zahlen meldete. ⚠ Die ABGELEITETEN Werte stehen hier ausgeschrieben, nicht als `var(--n-05)`. Ein Alias, der in `:root` steht, wird DORT aufgeloest — wer nur `--n-05` ueberschreibt, aendert `--text` nicht mit. Genau diese Falle hat beim Website-Rebranding schon einmal zugeschlagen. Die Werte sind die helle Spalte des Hub-Design-Guides. ═════════════════════════════════════════════════════════════════════ */ .th-light { --n-00: #ffffff; --n-05: #1A1822; --n-10: #2B2834; --n-20: #46434F; --n-30: #55525E; --n-40: #6E6B77; --n-50: #8A8794; --n-60: #B5B2BA; --n-70: #D5D4D1; --n-80: #ECEBE9; --n-90: #FAFAF9; --n-99: #F2F2F1; /* Flächen und Linien */ --chrome: #F2F2F1; --bg: #F2F2F1; --bg-weich: #FFFFFF; --flaeche: #FFFFFF; --flaeche-2: #FAFAF9; --flaeche-3: #F0EFED; --linie: #E2E1DF; --linie-stark: #D5D4D1; --linie-licht: #ECEBE9; /* Text — ausgeschrieben, siehe Hinweis oben */ --text: #1A1822; --text-leise: #55525E; --text-still: #6E6B77; /* ⚠ Rot als SCHRIFT braucht im hellen Theme einen anderen Ton: #ff2d5a kommt auf Weiss auf 3,0:1. #B30730 schafft 5,63:1. Die Flaechenfarbe `--marke` bleibt unveraendert — sie traegt keine Schrift. */ --marke-hell: #B30730; --marke-weich: rgba(224, 9, 60, .08); --marke-linie: rgba(224, 9, 60, .30); /* Auf hellem Grund trägt der Schatten wieder etwas. */ --heben-1: 0 1px 2px rgba(26, 24, 34, .08); --heben-2: 0 2px 8px rgba(26, 24, 34, .10); --heben-3: 0 12px 34px rgba(26, 24, 34, .14); --schatten-1: var(--heben-1); --schatten-2: var(--heben-2); --schatten-3: var(--heben-3); } }