/* AUTOGENERIERT von scripts/design.mjs (npm run design) — NICHT bearbeiten. Quelle der Wahrheit: wk-design/tokens.css im Workspace-Root. */ /* ============================================================ wk-design · tokens.css Corporate Design Waggon-Komödianten e.V. — Version 3.4 Single source of truth. NUR diese Datei bearbeiten — `npm run design` verteilt sie in ALLE DREI Anwendungen (Archiv, Hauptseite, Mitgliederbereich). Was hier steht, gilt überall. Deshalb steht hier auch nichts, was nur an einer Stelle stimmt: eine Zahl, die nur die Hauptseite braucht, gehört in die Hauptseite. Umgekehrt hat KEINE Anwendung eine eigene Fassung dieser Werte mehr — bis zum 31.08.2026 führte der Mitgliederbereich seine eigene Kopie, und genau so laufen zwei Häuser auseinander, ohne dass jemand etwas ändert. Neu in 3.4 (12.09.2026): die Marken-Töne (§ unten) und die abgeleiteten Flächen. Beide standen vorher als rohe Hex- und rgba-Werte in `wk-app.css` — 47 Hex-Literale und 62 rgba(), von denen die Status-Paare bis zu VIERMAL kopiert waren. Der README behauptete währenddessen, dort stünden „nur noch zwei Linienfarben". Jetzt stimmt der Satz wieder. ============================================================ */ :root { /* ── Primär: Bordeaux (Theater-Vorhang) ── */ --bx: #6E2433; /* Bordeaux */ --bx-d: #531B27; /* Bordeaux tief */ --bx-h: #8A3346; /* Bordeaux hell/hover */ --bx-t: #3E1720; /* Bordeaux tiefer — Verlaufsende im Kopf und im Mobil-Menü. Stand bis 12.09.2026 zweimal roh im Stylesheet des Mitgliederbereichs und hatte deshalb keinen Namen. */ /* ── Akzent: Laternengold (NUR Detail — nie Text auf Hell) ── */ --gold: #C9982E; /* Laternengold */ --gold-h: #E0B752; /* Gold hell */ --gold-d: #A37C1F; /* Gold dunkel */ /* ── Reserve (Notausgang — NUR Status/intern, keine Marke) ── */ --gruen: #1F4A3A; /* ── Neutrale (hell) ── */ --creme: #F4EEDF; /* Hauptgrund hell / Text auf Dunkel */ --weiss: #FBF8F0; /* heller Alt-Grund */ --sand: #ECE3CC; /* Panels / Karten */ --tinte: #2A2018; /* Headlines / Text auf Hell */ --braun: #5A4124; /* Fließtext */ --sepia: #B7A079; /* gedämpft / Text auf Dunkel */ /* ── Web-Atmosphäre (nur Bildschirm, theatralisch-dunkel) ── */ --buehne: #0a0a0a; /* Saal-Schwarz (Sektions-Hintergrund) */ --buehne-2: #120d0d; /* leicht warmes Schwarz für Verläufe */ /* ── MARKEN-TÖNE ──────────────────────────────────────────── Kleine Flächen mit Schrift darauf: Statusmarken, Gruppen-Marken, Zustandschips. IMMER als PAAR benutzen — Fläche und Schrift gehören zusammen, sie sind aufeinander auf Kontrast geprüft. Wer nur die Fläche nimmt und die Schrift selbst wählt, baut den nächsten unlesbaren Chip. DAS SIND KEINE MARKETINGFARBEN. Sie sind die Erweiterung derselben Ausnahme, unter der auch Grün hier steht: Funktionsfarben, fast immer intern, nie auf einem Flyer. Für Werbung gelten Bordeaux, Gold und die Neutralen — und was künftig als Akzent je Produktion dazukommt, kommt als eigene Familie, nicht als Griff in diese. Warum Blau und Petrol: eine Mitgliedschaft läuft `wartend → eingeladen → schnuppernd → aktiv/passiv → ausgetreten`. Die drei mittleren Schritte brauchen unterscheidbare Farben, sonst sagt die Marke nichts mehr aus. Bis zum 12.09.2026 standen sie roh im Mitgliederbereich und waren damit Fremdfarben ohne Abstimmung — verboten nach cd.md. Jetzt sind sie abgestimmt und stehen an EINER Stelle. */ /* liegt vor · aktiv · verfügbar · gespielt · öffentlich · dabei · fertig · Jugend-Gruppe */ --ton-gut-flaeche: #E3EDE6; --ton-gut-schrift: var(--gruen); /* Achtung, aber nicht schlimm: wenige Karten · Kinder-Gruppe */ --ton-achtung-flaeche: #F6E8CF; --ton-achtung-schrift: var(--gold-d); /* wartet auf jemanden: wartend · Entwurf · Probe */ --ton-wartet-flaeche: #F3E6C8; --ton-wartet-schrift: var(--braun); /* offen, entschieden oder zu: nein · ausverkauft · Erwachsenen-Gruppe */ --ton-offen-flaeche: #F0E0E4; --ton-offen-schrift: var(--bx); /* unterwegs, noch nicht angekommen: eingeladen · gegenlesen · intern */ --ton-unterwegs-flaeche: #E7ECF3; --ton-unterwegs-schrift: #3A4A63; /* schnuppert — der eine Schritt dazwischen, der eine eigene Farbe braucht */ --ton-schnuppert-flaeche: #E0EFE9; --ton-schnuppert-schrift: #2B6F77; /* ruht: ausgetreten · Archiv · abgesagt */ --ton-ruht-flaeche: #EAE7E2; --ton-ruht-schrift: #8A8178; /* passiv — ruht, aber gehört dazu; deshalb Sand statt Grau */ --ton-passiv-flaeche: #EAE4D6; --ton-passiv-schrift: var(--braun); /* fehlt: unbesetzter Song · Absage. Blass, nicht laut — es ist eine Nachfassliste, keine Verfehlung. */ --ton-fehlt-flaeche: #FBEFF1; --ton-fehlt-schrift: var(--bx); /* ── Abgeleitete Flächen und Linien ───────────────────────── Alles, was eine Markenfarbe mit Durchsichtigkeit ist, wird HIER gemischt und nicht in der Anwendung ausgerechnet. Sonst steht dieselbe Farbe als `rgba(90,65,36,.3)` irgendwo im Stylesheet und ändert sich nicht mit, wenn `--braun` sich ändert. Wer eine Abstufung braucht, die hier fehlt, schreibt sie als `color-mix(in srgb, var(--braun) 30%, transparent)` — nie als Zahlen. */ --line: color-mix(in srgb, var(--braun) 20%, transparent); --line-stark: color-mix(in srgb, var(--braun) 30%, transparent); --gold-line: color-mix(in srgb, var(--gold) 35%, transparent); /* Schatten. Zwei warme Töne statt reinem Schwarz — ein Schatten unter einer Bordeaux-Fläche, der ins Blaue geht, sieht schmutzig aus. Reines `rgba(0,0,0,…)` bleibt erlaubt und steht weiter in den Anwendungen: das ist keine Markenfarbe, sondern Abwesenheit von Licht. */ --schatten-warm: #2A0C14; /* Karten, Kacheln, erhobene Flächen */ --schatten-tief: #14080C; /* der Schleier hinter einem Fenster */ /* ── Eingabefelder ────────────────────────────────────────── Damit ein Feld im Mitgliederbereich und ein Feld auf der Website dasselbe Feld sind. Das Aussehen dazu steht in `felder.css`, hier stehen nur die Zahlen — wer sie ändert, ändert sie für alle drei Anwendungen. */ --feld-grund: var(--weiss); --feld-rand: var(--line-stark); --feld-rand-an: var(--gold); /* Rand im Fokus */ --feld-ring: color-mix(in srgb, var(--bx) 12%, transparent); --feld-polster: 11px 12px; --feld-schrift: 15px; /* ── Schriften ── */ --f-display: 'Fraunces Variable', Fraunces, Georgia, serif; --f-body: 'DM Sans Variable', 'DM Sans', system-ui, sans-serif; --f-script: 'Great Vibes', cursive; /* nur Print/Urkunden, nicht Web-Body */ /* ── Fraunces Variation Settings (Display) ── */ --fd-soft: 44; /* CD: 40–50 */ --fd-wonk: 0; /* CD: 0–1 */ /* ── Layout-Rhythmus ── */ --maxw: 1180px; --gutter: clamp(20px, 5vw, 80px); /* ── Ecken ────────────────────────────────────────────────── EINE Zahl für jede Ecke im ganzen Verein: Karten, Kacheln, Knöpfe, Eingabefelder, Marken, Fokusrahmen. Seit 31.08.2026 steht sie auf 0 — das Corporate Design ist eckig. Die Regel dazu ist wichtiger als der Wert: In den Anwendungen wird `border-radius` NICHT mehr mit einer Zahl geschrieben, sondern immer als `var(--radius)`. Wer ein neues Werkzeug baut, entscheidet damit nur noch, OB etwas eine Ecke hat — WIE sie aussieht, steht hier. Aus rund wird überall rund, indem man diese eine Zeile ändert und `npm run design` laufen lässt. Am 12.09.2026 kam die andere Hälfte der Regel dazu: ein Bedienelement, das GAR KEIN `border-radius` setzt, hängt genauso wenig am Token wie eines mit einer Zahl. Sechzehn Regeln im Mitgliederbereich — die ganze Knopf-Familie — taten genau das und wären bei einer Umstellung auf rund eckig geblieben. Eine Prüfung in `test-frontend.mjs` sieht das jetzt. Genau EINE Ausnahme, und die ist keine Ecke, sondern eine Form: ein Kreis (`border-radius: 50%`) — das Logo im Kopf, der Punkt an „Entwurf gesichert". Kreise bleiben Kreise. */ --radius: 0; /* ── Easing ── */ --ease-curtain: cubic-bezier(.76, 0, .24, 1); --ease-soft: cubic-bezier(.22, .61, .36, 1); }