/* ============================================================================ * TOWNCRYER · DESIGN TOKENS * ---------------------------------------------------------------------------- * Single Source of Truth fuer alle Design-Variablen. * * LADE-REIHENFOLGE: * 1. tokens.css ← diese Datei (theme-unabhaengige Basis) * 2. themes/_default.css ← Mordheim-Akzente (oder via .theme-mordheim) * 3. themes/_pathfinder.css ← per .theme-pathfinder * 4. themes/_bloodbowl.css ← per .theme-bloodbowl * 5. themes/_aos.css ← per .theme-aos * 6. themes/_community.css ← per .theme-community * 7. components/*.css ← Komponenten-Bibliothek (Phase 2) * 8. pages/*.css ← Page-Specific (Phase 3+) * * NAMING: * --tc-{kategorie}-{name}-{variant} * Praefix "tc-" steht fuer TownCryer-Komponente, unterscheidbar von * Legacy-Variablen wie --color-gold (die als Aliase erhalten bleiben). * * BACKWARD-COMPAT: * Am Ende dieser Datei werden alte Variable-Namen (--color-gold, * --bg-card, --spacing-*, --radius-*, --shadow-*, --modal-*) auf * die neuen tc-* Tokens gemappt. Dadurch funktioniert ALLES bestehende * weiter, OHNE dass eine Datei angefasst werden muss. * * Version: 1.0 (28. Mai 2026, Phase 1 der Design-System-Initiative) * ============================================================================ */ /* ============================================================================ * BOX-SIZING — plattformweite Grundlage (03.09.2026, Taskwerk #537) * ---------------------------------------------------------------------------- * Vorher setzten das nur css/library.css, css/mordheim-theme.css und * css/mordheim.css. Keine davon liegt auf allen Seiten: 13 App-Seiten * rechneten content-box, die uebrigen 20 border-box. Dieselbe Komponente war * damit je nach Seite verschieden breit, obwohl ihre Regel identisch ist. * * Gemessen auf spieluhr.html: .uhr-einrichten deklariert width 520px und * rendert unter content-box 552px — Padding und Rahmen kommen dazu. Wer 520 * schreibt, meint 520. 19 von 35 sichtbaren Elementen lagen dort daneben, * darunter tc-input, tc-form-group und tc-callout: Library-Komponenten, die * unter der Annahme border-box gebaut sind. * * Diese Datei ist die einzige, die wirklich auf allen App-Seiten liegt — * deshalb steht die Regel hier und nicht in einem Seiten-Stilblatt. * ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } /* ============================================================================ * A. SPACING — 4px-Basis-Skala * ============================================================================ */ :root { --tc-space-0: 0; --tc-space-1: 4px; /* xs — Innen-Pills, Mini-Gaps */ --tc-space-2: 8px; /* sm — Tight-Padding */ --tc-space-3: 12px; /* md — Standard-Padding */ --tc-space-4: 16px; /* lg — Card-Padding */ --tc-space-5: 24px; /* xl — Section-Padding */ --tc-space-6: 32px; /* 2xl — Page-Section-Gap */ --tc-space-7: 48px; /* 3xl — Hero-Padding */ --tc-space-8: 64px; /* 4xl — Top-Level-Spacing */ } /* ============================================================================ * B. RADII — Borderradius-Skala * ============================================================================ */ :root { --tc-radius-xs: 2px; /* Mini-Tags */ --tc-radius-sm: 4px; /* Pills, kleine Badges */ --tc-radius-md: 8px; /* Inputs, kleine Cards, Buttons */ --tc-radius-lg: 12px; /* Cards, Standard-Modals */ --tc-radius-xl: 16px; /* Hero-Sections, grosse Cards */ --tc-radius-2xl: 24px; /* Premium-Cards */ --tc-radius-full: 9999px;/* Avatare, runde Pills */ /* Page-Breiten (tc-page / tc-container) * * ⚠️ --tc-page-max IST DIE BREITE DER GANZEN PLATTFORM, auch die der * Navigationsleiste (nav.css). Wer sie aendert, verschiebt beides zugleich — * und das ist der Zweck: Stand die Leiste breiter als der Inhalt, hing das * Logo sichtbar ueber der Seite (am 01.09.2026 mit 95px gemessen, #188). * * Tims Entscheidung vom 02.09.2026: 1600px. Der Wert stand bis dahin auf * 1400 und war damit die dokumentierte Absicht — faktisch liefen aber die * meisten Seiten laengst auf 1600, weil `.container` in mordheim-theme.css * (26 Seiten) es hart so setzte. Jetzt stimmen Absicht und Wirklichkeit * ueberein. * * --tc-page-wide ist seitdem wertgleich mit dem Standard. Es bleibt als * eigener Name stehen: `.tc-page--wide` sagt "diese Seite ist absichtlich * breit", und das ist eine andere Aussage als "diese Seite ist normal". Wer * den Standard einmal wieder senkt, will die breiten Seiten meist nicht * mitsenken — dann trennt genau dieser Name die beiden Faelle. */ --tc-page-max: 1600px; /* Standard-Seitenbreite UND Breite der Navigation */ --tc-page-narrow: 900px; /* schmale Lese-/Formular-Seiten */ --tc-page-wide: 1600px; /* ausdruecklich breit (derzeit = Standard) */ } /* ============================================================================ * C. TYPOGRAPHY — Font-Families, Sizes, Weights, Leading * ============================================================================ */ :root { /* Font Families */ --tc-font-display: 'Cinzel', 'Times New Roman', serif; --tc-font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif; --tc-font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Font Sizes (rem-basiert, ~16px Base) */ --tc-text-2xs: 0.625rem; /* 10px — Mini-Labels, Tags */ --tc-text-xs: 0.72rem; /* ~11.5px — Captions, Meta */ --tc-text-sm: 0.82rem; /* ~13px — Sekundaer-Text */ --tc-text-base: 0.95rem; /* ~15px — Body */ --tc-text-lg: 1.1rem; /* ~17.5px — Sub-Headlines */ --tc-text-xl: 1.3rem; /* ~21px — Card-Headlines */ --tc-text-2xl: 1.6rem; /* ~25.5px — Page-Headlines */ --tc-text-3xl: 2.2rem; /* ~35px — Hero-Titles */ --tc-text-4xl: 3rem; /* 48px — Display */ /* Font Weights */ --tc-weight-normal: 400; --tc-weight-medium: 500; --tc-weight-semibold: 600; --tc-weight-bold: 700; /* Line Heights */ --tc-leading-tight: 1.25; --tc-leading-snug: 1.4; --tc-leading-normal: 1.5; --tc-leading-relaxed: 1.75; /* Letter Spacing — fuer Display + Cinzel-Headlines */ --tc-tracking-tight: -0.01em; --tc-tracking-normal: 0; --tc-tracking-wide: 0.03em; --tc-tracking-widest: 0.1em; } /* ============================================================================ * D. SHADOWS + GLOWS — Tiefe + Akzent-Effekte * ============================================================================ */ :root { --tc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --tc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --tc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --tc-shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.6); --tc-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.7); /* Glow-Tokens — werden pro Theme mit --tc-accent-glow gefuettert */ --tc-glow-intensity: 0.3; /* Theme kann das override (z.B. PF 0.4) */ } /* ============================================================================ * D2. BREAKPOINTS — die verbindliche Skala (22.08.2026, Taskwerk #357) * ---------------------------------------------------------------------------- * ⚠️ DAS SIND KEINE TOKENS, UND SIE KOENNEN AUCH KEINE WERDEN. * Media Queries koennen CSS-Variablen NICHT auswerten: * `@media (max-width: var(--tc-bp-md))` funktioniert schlicht nicht, und * `@custom-media` braeuchte einen Build-Schritt, den dieses Projekt bewusst * nicht hat (reines Vanilla-CSS, kein package.json). Wer hier „Breakpoints als * Tokens" plant, plant etwas, das der Browser nicht kann. * * Machbar — und das steht hier — ist eine verbindliche LISTE. Vier Stufen, * mehr nicht: * * | Grenze | Was dort passiert | * |------------|---------------------------------------------------------| * | <= 480px | Handy hochkant. Alles einspaltig, Knoepfe volle Breite. | * | <= 600px | Grosses Handy. Zweispaltiges wird einspaltig. | * | <= 900px | Tablet UND Burger-Menue. Desktop-Layout endet hier. | * | >= 901px | Desktop. Volle Navigationsleiste, mehrspaltig. | * * ⚠️ 900 IST DIE WICHTIGSTE GRENZE, WEIL DIE NAVIGATION DORT SCHALTET * (components/nav.css). Bis zum 22.08.2026 brachen die Inhalte erst bei 768 * um — zwischen 769 und 900 war der Burger also da und das Layout noch * Desktop. 132 Pixel breit, und genau dort liegt ein Tablet im Hochformat. * Tim am 18.08.2026: „mir ist schon aufgefallen, dass unsere Navigation noch * nicht sauber umbricht auf manchen Breakpoints." * * ⚠️ KRUMME WERTE NICHT NEU EINFUEHREN. Am 18.08.2026 standen 89 Fundstellen * auf 500/520/560/640/700/720px — jede davon ist eine Grenze, an der etwas * anderes passiert als woanders, und niemand kann sie sich merken. Wer einen * neuen Umbruch braucht, nimmt die naechste Stufe von oben. * * STAND 22.08.2026 (Schritt 2 von #357): 46 Bedingungen angeglichen — * 460/500/520 -> 480, 540/560/620/640 -> 600, und admin-styles 899/900 auf * 900/901. Die Richtung ist immer die NAECHSTGELEGENE Stufe; bei Gleichstand * nach oben. Belegt statt behauptet: Regelanzahl und Selektorenmengen sind * vorher wie nachher identisch (5797), es ist genau EINE Doppelung entstanden * (.cards-grid mit demselben Wert) und die ist entfernt. * * ⚠️ ZWEI SORTEN BLEIBEN BEWUSST STEHEN — wer sie „aufraeumt", macht es * schlechter: * * 1. 700px und 720px. Das sind LAYOUT-UMBRUECHE (Tabellenkoepfe, Grids, * Toolbars: aos-dashboard, mordheim, bloodbowl-Roster, bb-match-screen), * und ihr richtiges Ziel waere 900 — dieselbe Ueberlegung wie bei der * Navigation. Dort kollidieren sie aber mit vorhandenen * `min-width: 900px`-Regeln, das braucht eine eigene Runde mit Abnahme. * Sie auf 600 zu senken hiesse, zwischen 601 und 720px das * Desktop-Layout zurueckzuholen — genau die Luecke, die Schritt 1 * geschlossen hat. * * 2. Dateien mit MOBILE-FIRST-Stufen (coin-moment, dashboard-page, * mordheim-unified, ruhmeshalle, untergrund). Dort ist ein krummer Wert * kein Ausreisser, sondern der Partner einer min-width-Leiter — ein * verschobener max-width erzeugt dort erst die Luecke. * * ⚠️ EINE `max-width: 500px`-ANGABE IST NICHT IMMER EIN BREAKPOINT. In * battle-styles, conditional-stats, dashboard und mordheim steht derselbe * Wert als LAYOUTBREITE an einem Modal. Nur innerhalb von `@media` ersetzen, * nie per Textsuche ueber die Datei. * * ⚠️ ZWISCHEN max-width UND min-width DARF KEINE LUECKE KLAFFEN. Die Paare * heissen `max-width: 900px` / `min-width: 901px` — nicht beide 900, sonst * greifen bei exakt 900px beide. * * ============================================================================ * E. MOTION — Transitions + Easings * ============================================================================ */ :root { --tc-motion-instant: 0ms; --tc-motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --tc-motion-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1); --tc-motion-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --tc-motion-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Nur die Kurve, ohne Dauer (17.08.2026, #337). accordion.css braucht sie an einer Stelle, die die Dauer selbst setzt (`transform 0.25s `) — dort wuerde --tc-motion-bounce die Regel zerlegen, weil es ein Shorthand MIT Dauer ist. Beide Namen zeigen bewusst auf dieselbe Kurve; wer sie aendert, aendert sie hier zweimal. */ --tc-motion-bounce-ease: cubic-bezier(0.34, 1.56, 0.64, 1); --tc-motion-elegant: 250ms cubic-bezier(0.34, 1.56, 0.64, 1); /* PF Default */ /* Easings einzeln verfuegbar — falls Komponenten eigene Durations brauchen */ --tc-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --tc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --tc-ease-in: cubic-bezier(0.4, 0, 1, 1); --tc-ease-out: cubic-bezier(0, 0, 0.2, 1); } /* ============================================================================ * E2. BEWEGUNGS-GRUNDMUSTER (01.09.2026, #293) * * Drei Keyframes, die die ganze Plattform benutzen kann. Sie stehen HIER und * nicht in einer Komponentendatei, weil tokens.css die einzige Datei ist, die * auf allen Seiten liegt (39 von 41; die beiden anderen sind eine Weiterleitung * und eine Seite ohne jede Bewegung). * * ⚠️ DER ANLASS WAR EIN GEMESSENER AUSFALL, KEIN AUFRAEUMWUNSCH. * `gf-fadeIn` und `gf-scaleIn` waren in css/gamification-styles.css definiert * — einer Datei, die auf 16 Seiten liegt. Die Module, die sie benutzen * (gamification-ui, achievement-ui, whats-new, shadow-market, pathfinder-trade), * laufen aber auf SIEBEN Seiten mehr: untergrund.html, changelog.html und die * fuenf Pathfinder-Raeume. Dort zeigte sich Level-Up, Achievement-Freischaltung * und Muenzmoment OHNE Einblendung — hart aufpoppend, ausgerechnet an den * Belohnungsmomenten. * * Eine `animation:` auf einen unbekannten Namen wirft nicht. Sie tut nichts. * Deshalb hat es niemand gemeldet, und deshalb faellt so etwas nur beim * seitenweisen Abgleich "wer ruft welchen Keyframe, und ist er dort definiert?" * auf — nicht beim Lesen des Codes. * * Warum nur diese drei: Es sind die Muster, die im Baum am haeufigsten * nachgebaut wurden (Einblenden 8x, Einblenden-mit-Versatz 8x, Ruetteln 3x). * Alles Charaktervolle bleibt bei seiner Komponente — Heuristik 3 sagt * Konsistenz ist nicht Monotonie, und ein gemeinsames Fundament ist etwas * anderes als eine Einheitsbewegung. * ========================================================================== */ @keyframes tc-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes tc-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /* Ruetteln als Rueckmeldung auf eine abgelehnte Eingabe. Werte aus `shakeError` (mordheim-unified.css) uebernommen — das ist der Ruettler, der auf dieser Plattform seit jeher an Formularfeldern laeuft. */ @keyframes tc-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); } 20%, 40%, 60%, 80% { transform: translateX(6px); } } /* Die Umdrehung des Lade-Indikators. Am 03.09.2026 aus components/atoms-extra.css hierher geholt (Taskwerk #536): Sie stand dort auf 10 Seiten zur Verfuegung, und die fuenf Anmelde-Seiten (activate, forgot-password, index, login, reset-password) trugen deshalb je eine eigene, identische Kopie inline. tokens.css liegt auf 56 Seiten — hier braucht sie niemand mehr nachzubauen. ⚠️ Sie wird bei prefers-reduced-motion bewusst nur LANGSAMER, nicht angehalten (siehe die Regel weiter unten in dieser Datei): Ein Ladeindikator IST die Bewegung; steht er still, ist er ein Kreis und sagt nichts mehr. */ @keyframes tc-spin { to { transform: rotate(360deg); } } /* Respektiere prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { :root { --tc-motion-fast: 0ms; --tc-motion-normal: 0ms; --tc-motion-slow: 0ms; --tc-motion-bounce: 0ms; --tc-motion-elegant: 0ms; } } /* ============================================================================ * F. Z-INDEX-SKALA * ============================================================================ */ :root { --tc-z-base: 1; --tc-z-dropdown: 1000; --tc-z-sticky: 1100; --tc-z-fixed: 1200; /* ⚠️ DAS DIALOG-BAND LIEGT BEI 52000, NICHT BEI 1400 (26.08.2026). ------------------------------------------------------------------ Tim: „Das Auswahlmodal öffnet sich hinter dem Terminmodal." Er hat recht, und es war nie nur dieses eine Fenster: `tc-modal` stand mit 1400 GANZ UNTEN in einer Anwendung, deren handgebaute Overlays alle vierstellig darüber liegen. Am 26.08.2026 im ganzen Baum gemessen: 10 000 .modal-overlay Dashboard-Dialoge (css/dashboard.css) 50 000 #pf-modal-overlay alle sieben Pathfinder-Räume 50 100 #pf-cal-modal-overlay der Kalender --------- ------------------------------------------------------ 55 000 SG-Meldung, Rehabilitation ← Feiern, gehören DARÜBER 60 000 Trophäen, Handelsposten 62 000 Level-Up („das größere Ereignis, es verlangt eine Handlung") 99 999 Versionskonflikt-Banner 100 000 Toasts (css-fixes.css, mit !important) 999 999 Auth-Sperrschirm Ein Dialog der Library ist ein SEITEN-DIALOG. Er gehört an das obere Ende dieses Bandes — über jedes Overlay, das er ersetzen soll, und unter die Feiern, die ihn ihrerseits überdecken dürfen. Der Platz zwischen 50 100 und 55 000 ist genau dieser Ort. ⚠️ POPOVER, TOOLTIP UND TOAST MUSSTEN MIT. Ihr Sinn ist die REIHENFOLGE zueinander: ein Menü in einem Dialog, ein Tooltip über dem Menü, eine Rückmeldung über allem. Nur das Modal anzuheben hätte diese Ordnung umgedreht — genau deshalb steht in css/trading-post.css ein Tooltip mit handgesetzten 100 000 und dem Kommentar „works inside modals". Blast-Radius vor der Änderung gemessen: --tc-z-modal 6 Verwendungen (modal, gallery, media-viewer, nav-drawer, bloodbowl, pathfinder-ui), popover 2, tooltip 1, toast 1. `tc-nav-drawer` kommt in keinem Produktiv-Markup vor, nur in der Legacy-Library. ⚠️ Und damit ist die Produktfrage aus dem Block darunter beantwortet: Ein Modal deckt jetzt das Nav-Sheet (10 000) zu. Das ist die richtige Richtung — wer ein Fenster öffnet, will es sehen, nicht das Menü. */ --tc-z-modal-bg: 51900; --tc-z-modal: 52000; --tc-z-popover: 52100; --tc-z-tooltip: 52200; --tc-z-toast: 52300; /* DIE BUEHNE liegt ueber allem, was man bedienen kann (02.09.2026, #417). Der Block darueber sagt es selbst: „Feiern, gehoeren DARUEBER" — 55 000 SG-Meldung, 60 000 Trophaeen, 62 000 Level-Up. `tc-buehne` ist genau so ein Moment: Sie verschwindet nach drei Sekunden von selbst und hat nichts zu bedienen, also darf sie einen Dialog verdecken, aus dem sie ausgeloest wurde. 60 000, weil dort schon `.drama-overlay` in js/post-battle-drama.js liegt — dasselbe Ding mit hartgeschriebener Zahl. Wenn der Mordheim-Teil eines Tages auf die Komponente umzieht, aendert sich keine Ebene. */ --tc-z-buehne: 60000; /* Die Mobil-Navigation liegt bewusst ÜBER allem (17.08.2026, #337). Beide Werte standen bisher nur als Fallback in nav.css — und zwar mit EINEM Namen (--tc-z-overlay) fuer ZWEI Zahlen, 9999 und 10000. Die Reihenfolge ist der Sinn der Sache: Das Sheet muss ueber seinem eigenen Abdunkler liegen, sonst verschluckt der Schatten die Bedienelemente. Ein einzelnes Token konnte das nie abbilden. Die Werte bleiben, wo sie waren: Sie funktionieren, und sie in die Skala (1000-1700) einzuordnen hiesse zu entscheiden, ob das Nav-Sheet unter Modals rutscht. Das ist eine Produktfrage, keine Aufraeumarbeit. */ --tc-z-nav-backdrop: 9999; --tc-z-nav-sheet: 10000; --tc-z-debug: 9999; } /* ============================================================================ * G. TOUCH-TARGETS * ============================================================================ */ :root { --tc-touch-min: 36px; /* Web-Standard */ --tc-touch-rec: 44px; /* Apple HIG Empfehlung */ } /* ============================================================================ * G2. SAFE AREA — Notch, Rundungen, Home-Indicator (Taskwerk #235, 11.08.2026) * ---------------------------------------------------------------------------- * Auf randlosen Geraeten (iPhone ab X, viele Androids) ragt die Anzeige unter * Kamera-Ausschnitt und Home-Balken. `env(safe-area-inset-*)` sagt, wie viel * Platz an welcher Kante freizuhalten ist. * * WICHTIG — die Haelfte, die bisher fehlte: `env()` liefert nur dann echte * Werte, wenn die Seite im Viewport-Tag `viewport-fit=cover` setzt. Ohne das * ist jeder Wert 0, und jede noch so korrekte safe-area-Regel bleibt * wirkungslos. Am 11.08.2026 gemessen: 3 von 112 CSS-Dateien nutzten * safe-area-inset, aber nur 2 von 52 Seiten hatten viewport-fit=cover — von * neun betroffenen Seiten wirkte es also auf zweien. * * Genau deshalb sind diese Tokens gefahrlos: Wo viewport-fit fehlt, sind sie * 0 und aendern nichts. Erst mit dem Meta-Tag werden sie scharf. * * Verwendung: * padding-bottom: calc(16px + var(--tc-safe-bottom)); * padding-left: max(20px, var(--tc-safe-left)); * ========================================================================== */ :root { --tc-safe-top: env(safe-area-inset-top, 0px); --tc-safe-right: env(safe-area-inset-right, 0px); --tc-safe-bottom: env(safe-area-inset-bottom, 0px); --tc-safe-left: env(safe-area-inset-left, 0px); } /* ============================================================================ * H. BASE COLORS — Theme-unabhaengig * Hintergrund-Stack, Text-Stack, Border-Stack * ============================================================================ */ :root { /* Hintergrund-Stack — von dunkel zu hell */ /* Die Ebene UNTER der Seite (17.08.2026, #337). Sie wurde an sieben Stellen benutzt, ohne dass es sie gab — mit Fallback, also nicht kaputt, aber vom Theme abgekoppelt: nav.css (Rahmen), tabs.css (Verlaufsende) und btn-compat.css (Schrift auf Akzentflaechen). Dunkler als --tc-bg-base, weil sie sich gegen die Seite absetzen soll, nicht gegen eine Karte. */ --tc-bg-canvas: #0d0b0a; /* unter der Seite: Rahmen, Verlaufsenden */ --tc-bg-base: #1a1a1a; /* Page-Background */ --tc-bg-surface-1: #242424; /* Card-Background */ --tc-bg-surface-2: #2d2d2d; /* Modal-Background */ --tc-bg-surface-3: #3a3a3a; /* Hover/Active */ --tc-bg-input: #1f1f1f; /* Input-Felder */ --tc-bg-overlay: rgba(0, 0, 0, 0.85); /* Text-Stack */ --tc-text-strong: #e0e0e0; /* Headlines, wichtige Werte */ --tc-text-default: #b0b0b0; /* Body */ /* Geaendert am 12.08.2026 (#269) von #888888 auf #9e9e9e. * Nachgerechnet gegen den eigenen Hintergrund-Stack darueber: * #888888 auf #1a1a1a = 4,91:1 · auf #242424 = 4,38 · auf #2d2d2d = 3,89 * · auf #3a3a3a = 3,3 * WCAG AA verlangt 4,5:1. Der Wert bestand also nur auf der Seitenflaeche — * und ausgerechnet auf Karten und in Modals, wo Meta-Text meistens steht, * fiel er durch. #9e9e9e schafft alle vier Flaechen (4,72 im schlechtesten * Fall) und bleibt sichtbar dunkler als --tc-text-default. */ --tc-text-muted: #9e9e9e; /* Captions, Meta */ --tc-text-disabled: #555555; /* Disabled */ --tc-text-on-accent: #1a1a1a; /* Text auf Accent-Background (Buttons) */ /* Text auf der GLANZ-Flaeche (Taskwerk #163, Tims Freigabe 01.09.2026). * * ⚠️ NICHT dasselbe wie --tc-text-on-accent, und der Unterschied hat * gekostet: Wer eine goldene Flaeche baute, griff mangels eigenem Token * zum Accent-Wert — und der steht in fuenf Themes auf #ffffff, weil ihre * Accent-Flaeche dunkel ist. Gemessen (01.09.2026): Weiss auf dem * jeweiligen Glanz ergab Blood Bowl 1,11 · The Old World 1,40 · * Community 1,53 · Pathfinder 1,57 · Age of Sigmar 1,64. WCAG AA * verlangt 4,5. Nur Mordheim (10,11) und Untergrund (12,25) bestanden — * ausgerechnet die zwei, die NICHTS gesetzt hatten und auf diesen * :root-Wert fielen. Wer sein Theme gepflegt hatte, hatte den Fehler. * * Ein einziger Wert genuegt: #1a1a1a liegt auf allen sieben Glanzfarben * zwischen 10,11 und 15,75. Deshalb steht hier bewusst KEINE * Theme-Ueberschreibung — ein Theme, das sie doch braucht, setzt sie * einzeln und begruendet sie dort. */ --tc-text-on-highlight: #1a1a1a; /* Border-Stack */ --tc-border-subtle: rgba(255, 255, 255, 0.06); --tc-border-default: rgba(255, 255, 255, 0.12); --tc-border-strong: rgba(255, 255, 255, 0.25); /* Border-Color als Hex-Fallback (fuer Themes die solid Borders wollen) */ --tc-border-color: #444444; } /* ============================================================================ * I. SEMANTIC COLORS — Status-Farben * ============================================================================ */ :root { --tc-success: #4ade80; --tc-warning: #fbbf24; --tc-danger: #f87171; --tc-info: #60a5fa; --tc-attention: #f97316; /* Alpha-Variants — fuer Backgrounds + Borders */ --tc-success-bg: rgba(74, 222, 128, 0.08); --tc-success-border: rgba(74, 222, 128, 0.30); --tc-warning-bg: rgba(251, 191, 36, 0.08); --tc-warning-border: rgba(251, 191, 36, 0.30); --tc-danger-bg: rgba(248, 113, 113, 0.10); --tc-danger-border: rgba(248, 113, 113, 0.40); --tc-info-bg: rgba(96, 165, 250, 0.08); --tc-info-border: rgba(96, 165, 250, 0.30); --tc-attention-bg: rgba(249, 115, 22, 0.08); --tc-attention-border:rgba(249, 115, 22, 0.30); } /* ============================================================================ * J. ACCENT COLORS — Default (= Mordheim) * Wird von Theme-Files (siehe themes/_*.css) ueberschrieben. * ============================================================================ */ :root { --tc-accent: #a1917a; /* Stein-Taupe (Mordheim-Default) */ --tc-accent-light: #b8a892; --tc-accent-dark: #7d6f5c; --tc-accent-glow: rgba(161, 145, 122, 0.30); --tc-accent-rgb: 161, 145, 122; /* RGB-Tripel fuer rgba(var(--tc-accent-rgb), a) */ --tc-secondary: #7a3b2c; /* Oxblood (Mordheim-Default) */ --tc-secondary-light:#99513e; --tc-secondary-dark: #5a2a1e; --tc-secondary-glow: rgba(122, 59, 44, 0.30); --tc-secondary-rgb: 122, 59, 44; /* RGB-Tripel fuer rgba(var(--tc-secondary-rgb), a) */ /* AUSZEICHNUNG (Tertiary) — der „TownCryer-Glanz“: Headlines, aktive/gewaehlte Zustaende, echte Akzentmomente. Sparsam einsetzen (M3-Tertiary-Logik). Default = helles Gold; jedes Theme ueberschreibt es passend (siehe Matrix). */ --tc-highlight: #d4c4a0; /* Pergament (Default-Glanz) */ --tc-highlight-rgb: 212, 196, 160; --tc-highlight-glow: rgba(212, 196, 160, 0.30); /* ========================================================================== * SYSTEM-PALETTE (--tc-sys-*) — VERBINDLICHE GRUNDLAGE (07.06.2026, Tim) * -------------------------------------------------------------------------- * System-NEUTRALE Farben: gelten unabhaengig vom aktiven .theme-*. Gedacht * fuer das gemischte Dashboard, wo Karten/Badges/Tiles MEHRERER Systeme * nebeneinander stehen (eine BB-Karte bleibt blau, auch ohne theme-bloodbowl). * Pro System: -primary / -secondary / -highlight + -rgb (Primaer, fuer rgba()). * Dies ist die EINE Quelle — Komponenten ziehen hier, kein verstreutes Hex. * ======================================================================== */ /* Mordheim - Muted City: Stein-Taupe + Oxblood */ --tc-sys-mordheim: #a1917a; --tc-sys-mordheim-rgb: 161, 145, 122; --tc-sys-mordheim-secondary: #7a3b2c; --tc-sys-mordheim-highlight: #d4c4a0; /* Pathfinder: Royal-Amethyst + Dragon-Rot */ --tc-sys-pathfinder: #785b88; --tc-sys-pathfinder-rgb: 120, 91, 136; --tc-sys-pathfinder-secondary: #7c3626; --tc-sys-pathfinder-highlight: #f0c987; /* Blood Bowl — Rot/Blau/Weiss: Stahlblau primaer, Rot sekundaer */ --tc-sys-bloodbowl: #2f6fb0; --tc-sys-bloodbowl-rgb: 47, 111, 176; --tc-sys-bloodbowl-secondary: #c0392b; --tc-sys-bloodbowl-highlight: #d4a93f; /* Age of Sigmar: Rot primaer, Gold sekundaer + Auszeichnung (kein Teal) */ --tc-sys-aos: #9e2b25; --tc-sys-aos-rgb: 158, 43, 37; --tc-sys-aos-secondary: #c8993f; --tc-sys-aos-highlight: #e8c766; /* Community / Social: Magenta + Gold */ --tc-sys-community: #b83d8f; --tc-sys-community-rgb: 184, 61, 143; --tc-sys-community-secondary: #e0a92e; --tc-sys-community-highlight: #f2cd63; /* Social = Alias auf Community (gleiche Identitaet) */ /* Old World — fehlte bis zum 01.09.2026 ganz (Taskwerk #273). Werte aus * GameSystems.oldworld: accentColor/color/bgColor. Ohne dieses Token fiel * jede system-gefaerbte Komponente bei ToW auf den neutralen Rand zurueck. */ --tc-sys-oldworld: #0c8093; --tc-sys-oldworld-rgb: 12, 128, 147; --tc-sys-oldworld-secondary: #aa1d3f; --tc-sys-oldworld-highlight: #5fd0e0; --tc-sys-social: var(--tc-sys-community); --tc-sys-social-secondary: var(--tc-sys-community-secondary); --tc-sys-social-highlight: var(--tc-sys-community-highlight); /* Banner-Text — Farbe fuer Titel AUF einem akzentfarbigen Banner/Hero. NICHT --tc-accent verwenden (sonst Akzent-auf-Akzent, z.B. AoS rot/rot). Default Mordheim: Gold liegt auf dunklem/blutigem Banner gut lesbar. */ --tc-on-banner: #e8dcc0; /* Pergament, Default */ } /* ============================================================================ * K. DECORATIVE LAYER — Theme-spezifische Stimmungs-Tokens * ---------------------------------------------------------------------------- * HIER lebt die Anti-Bland-Strategie (Option C aus dem Audit): * * Jedes Theme definiert eigene "Decorative-Tokens" fuer atmosphaerische * Surfaces wie z.B. den Champagner-Block im PF Item-Configurator. * Eine Komponente wie tc-card--ornate nutzt diese Tokens, OHNE selbst * theme-spezifisch zu sein. So sieht eine ornate-Card im Pathfinder-Theme * champagner-warm aus, im Mordheim-Theme sepia, im AoS-Theme mondsilber. * * Default-Werte hier (= Mordheim-Sepia-Vibe). Pro Theme override-bar. * ============================================================================ */ :root { /* Warm-Surface — fuer ornate Cards, Material-Bloecke */ --tc-deco-warm-bg: rgba(161, 145, 122, 0.05); /* Mordheim: Taupe-Light */ --tc-deco-warm-border: rgba(161, 145, 122, 0.18); --tc-deco-warm-text: var(--tc-accent-light); /* Blood-Pill — fuer Trait/Rune-Pills, dramatische Akzente */ --tc-deco-blood-pill-bg: rgba(122, 59, 44, 0.18); --tc-deco-blood-pill-border: rgba(122, 59, 44, 0.40); --tc-deco-blood-pill-text: #d8b8a4; /* Ornament — fuer feine Dekor-Borders (z.B. um Hero-Sections) */ --tc-deco-ornament-border: rgba(161, 145, 122, 0.12); --tc-deco-ornament-glow: rgba(161, 145, 122, 0.06); /* Banner-Overlay — Gradient-Overlay fuer Background-Images */ --tc-deco-banner-overlay: linear-gradient( 180deg, rgba(26, 18, 8, 0.15) 0%, rgba(26, 18, 8, 0.55) 55%, rgba(26, 18, 8, 0.75) 100% ); } /* ============================================================================ * L. BACKWARD-COMPAT — Alte Variable-Namen als Aliase * ---------------------------------------------------------------------------- * Damit ALLE bestehenden CSS-Files (mordheim-unified.css, mordheim-theme.css, * pathfinder.css, dashboard.css, gamification-styles.css, ...) ohne * Aenderung weiter funktionieren, mappen wir hier die historischen * Variable-Namen auf die neuen tc-* Tokens. * * WICHTIG: Diese Aliase sind temporaer. Geplant fuer Phase 6 (Konsolidierung) * ist die schrittweise Entfernung, sobald alle CSS-Files migriert sind. * * Hinweis: mordheim-unified.css definiert dieselben Variablen NOCHMALS * mit Hex-Werten. Die zweite Definition gewinnt (later wins), d.h. solange * mordheim-unified.css geladen wird, gelten dort die Werte. Das ist OK — * die Werte sind identisch zu hier. Ziel ist, dass beide irgendwann auf * tc-* zeigen. * ============================================================================ */ :root { /* Akzent-Farben (Mordheim-Default) */ --color-gold: var(--tc-accent); --color-gold-light: var(--tc-accent-light); --color-gold-dark: var(--tc-accent-dark); --color-blood: var(--tc-secondary); --color-blood-light: var(--tc-secondary-light); --color-blood-dark: var(--tc-secondary-dark); --gold: var(--tc-accent); --blood: var(--tc-secondary); /* Funktionale Farben */ --color-success: var(--tc-success); --color-success-light: var(--tc-success); --color-warning: var(--tc-warning); --color-warning-light: var(--tc-warning); --color-error: var(--tc-danger); --color-error-light: var(--tc-danger); --color-info: var(--tc-info); --color-info-light: var(--tc-info); /* Hintergruende */ --bg-body: var(--tc-bg-base); --bg-primary: var(--tc-bg-base); --bg-secondary: var(--tc-bg-surface-1); --bg-card: var(--tc-bg-surface-2); --bg-card-hover: var(--tc-bg-surface-3); --bg-card-header: var(--tc-bg-surface-2); --bg-input: var(--tc-bg-input); --bg-overlay: var(--tc-bg-overlay); --bg-dark: var(--tc-bg-base); /* Text */ --text-primary: var(--tc-text-strong); --text-secondary: var(--tc-text-default); --text-muted: var(--tc-text-muted); --text-dark: var(--tc-text-on-accent); --text: var(--tc-text-strong); /* Borders */ --border-color: var(--tc-border-color); --border-light: #555555; --border-dark: #333333; --border: var(--tc-border-color); --border-accent: var(--tc-secondary); /* Schatten */ --shadow-sm: var(--tc-shadow-sm); --shadow-md: var(--tc-shadow-md); --shadow-lg: var(--tc-shadow-lg); --shadow-xl: var(--tc-shadow-xl); --shadow-glow-gold: 0 0 15px var(--tc-accent-glow); --shadow-glow-blood: 0 0 15px var(--tc-secondary-glow); --shadow-glow-success: 0 0 15px rgba(74, 222, 128, 0.4); /* Typografie */ --font-display: var(--tc-font-display); --font-body: var(--tc-font-body); --font-gothic: var(--tc-font-display); /* Radii */ --radius-xs: var(--tc-radius-xs); --radius-sm: var(--tc-radius-sm); --radius-md: var(--tc-radius-md); --radius-lg: var(--tc-radius-lg); --radius-xl: var(--tc-radius-xl); --radius-full: var(--tc-radius-full); --radius: var(--tc-radius-md); /* Spacing */ --spacing-xs: var(--tc-space-1); --spacing-sm: var(--tc-space-2); --spacing-md: var(--tc-space-4); /* Hinweis: --spacing-md war historisch 16px = tc-space-4 */ --spacing-lg: var(--tc-space-5); /* Historisch 24-30px */ --spacing-xl: var(--tc-space-6); /* Historisch 32-50px */ --spacing-2xl: var(--tc-space-7); /* Transitions */ --transition-fast: var(--tc-motion-fast); --transition-normal: var(--tc-motion-normal); --transition-slow: var(--tc-motion-slow); --transition-bounce: var(--tc-motion-bounce); /* Modal Sizes — bleiben gleich, sind in mordheim-unified.css definiert. Hier nur als Fallback falls jemand tokens.css ohne unified.css laedt. */ --modal-xs: 320px; --modal-sm: 420px; --modal-md: 600px; --modal-lg: 800px; --modal-xl: 1000px; --modal-2xl: 1200px; --modal-full: 95vw; /* Z-Index — Aliase fuer historische Namen */ --z-dropdown: var(--tc-z-dropdown); --z-sticky: var(--tc-z-sticky); --z-fixed: var(--tc-z-fixed); --z-modal-backdrop: var(--tc-z-modal-bg); --z-modal: var(--tc-z-modal); --z-popover: var(--tc-z-popover); --z-tooltip: var(--tc-z-tooltip); --z-toast: var(--tc-z-toast); /* Pathfinder-Aliase — bleiben funktionsfaehig, koennen spaeter migriert werden */ --pf-color-accent: var(--tc-accent); --pf-color-primary: #7c3626; } /* ============================================================================ * REDUCED MOTION — der plattformweite Rueckfall * ---------------------------------------------------------------------------- * Nachgemessen am 18.08.2026 beim Joy-of-Use-Audit (#341): Von 237 @keyframes * im Projekt standen **162 (68 %) in Dateien ohne jeden * `@media (prefers-reduced-motion: reduce)`-Block**. Auf mordheim.html waren * es 111 von 131 geladenen, auf bloodbowl.html 90 von 117. Viele davon laufen * `infinite`, hoeren also nie von selbst auf. Wer im Betriebssystem * "Bewegung reduzieren" gesetzt hat, bekam trotzdem alles. * * ⚠️ DER TOKEN-KOLLAPS WEITER OBEN REICHT NICHT — und das ist der Grund, * warum die Luecke so lange unbemerkt blieb. Er setzt --tc-motion-* auf 0ms, * aber die betroffenen Dateien schreiben ihre Dauern hart aus (`0.3s ease`) * und bringen eigene Keyframes mit. Wer nur nachsieht, ob es "eine * Reduced-Motion-Regel gibt", bekommt ein Ja — und misst damit am Problem * vorbei. (Dieselbe Fehlerklasse wie die 15,2px-Regel gegen den iOS-Zoom: * vorhanden, aber wirkungslos.) * * WARUM HIER: tokens.css liegt auf 46 der 56 Seiten und wird frueh geladen. * Der Block je Datei nachzuruesten hiesse 28 Dateien anzufassen und bei jeder * neuen wieder daran zu denken — eine Regel, die man pro Datei anmelden muss, * wird irgendwann vergessen. Die Vorlage stammt aus css/dashboard.css (#269), * wo sie seit dem 12.08.2026 nachweislich wirkt; sie bleibt dort zusaetzlich * stehen, damit der Schutz nicht an einer einzelnen Einbindung haengt. * * NICHT ERFASST sind die fuenf Seiten ohne tokens.css, die eigene inline- * Keyframes mitbringen (activate, forgot-password, index, login, * reset-password) — die tragen je genau eine Animation und sind einzeln * versorgt. * * WARUM 0.01ms UND NICHT `animation: none`: Bei `none` faellt auch der * ENDZUSTAND weg. Eine Animation, die etwas einblendet, laesst das Element * dann unsichtbar zurueck — aus "weniger Bewegung" wuerde "Inhalt fehlt". * Ohne `iteration-count: 1` liefe eine unendliche Animation weiter, nur * schneller. Der negative Delay setzt sie auf "bereits gelaufen", damit ein * langer animation-delay das Element nicht doch im Anfangszustand haelt. * ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: -1ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* ------------------------------------------------------------------ * AUSNAHME: Lade-Anzeigen drehen weiter, nur langsamer. * * Ein Spinner ist FUNKTIONALE Bewegung, keine Dekoration — er sagt * "es passiert etwas". Die Regel oben wuerde ihn nach einer * Umdrehung einfrieren, und ein stehender Spinner sagt das * Gegenteil: "es haengt". Wer Bewegung reduziert hat, bekaeme * ausgerechnet die Auskunft, die er am dringendsten braucht, als * Fehlmeldung. * * WCAG 2.3.3 zielt auf nicht-essenzielle Bewegung; eine * Ladeanzeige faellt nicht darunter. Zwei Sekunden statt 0,7–1 * nehmen die Unruhe raus und lassen die Aussage stehen. * * Gefunden am 18.08.2026: Die Vorlage in css/dashboard.css (#269) * hat diese Ausnahme NICHT und friert seit dem 12.08. jeden * Spinner auf ihren fuenf Seiten ein. Dort nachgezogen. * ------------------------------------------------------------------ */ .spinner, .loading-spinner, .tc-spinner, .spb-waiting-icon, .tc-button.is-loading::after { animation-duration: 2s !important; animation-iteration-count: infinite !important; animation-delay: 0ms !important; } } /* =================================================================== TERMIN- UND SYSTEMFARBEN --tc-evt-* Am 03.09.2026 aus css/dashboard.css hierher verschoben (Taskwerk #541). ⚠️ Sie standen dort auf :root und waren trotzdem nicht global: Von den 28 Seiten, die ueber js/game-systems.js einen System-Badge erzeugen, laden nur 3 die dashboard.css. Ein Token auf :root ist nicht global, wenn die Datei es nicht ist. ⚠️ OFFEN UND BEWUSST NICHT HIER ENTSCHIEDEN: Diese Palette hat mit --tc-sys-* weiter oben nichts zu tun. Kein einziger Wert stimmt ueberein — Pathfinder ist hier gruen und dort violett, Blood Bowl hat projektweit drei Farben. Ob die Termine auf die Systemfarben umschwenken, ist eine sichtbare Entscheidung und gehoert zu #495. Die Punktreihe im Kalender traegt bewusst HELLERE Toene: ein 6px-Punkt auf dunklem Grund braucht mehr Leuchtkraft als ein 4px-Rand. =================================================================== */ :root { --tc-evt-mordheim: #8b0000; --tc-evt-mordheim-accent: #c9a959; --tc-evt-aos: #1a5276; --tc-evt-aos-accent: #85c1e9; --tc-evt-pathfinder: #1e6b35; --tc-evt-pathfinder-accent: #6fcf7c; --tc-evt-bloodbowl: #8b6914; --tc-evt-bloodbowl-accent: #c9a959; --tc-evt-social: #6c3483; --tc-evt-social-accent: #d9a9f5; --tc-evt-hobby: #6c3483; --tc-evt-hobby-accent: #d9a9f5; --tc-evt-community: #e67e22; --tc-evt-community-accent: #f5cba7; --tc-evt-oldworld: #0c8093; --tc-evt-oldworld-accent: #5fd0e0; /* Neu am 01.09.2026 — beide Typen stehen seit jeher im Kalenderfilter und * fielen ohne eigene Farbe auf den neutralen Rand zurueck. Discord traegt * seine Markenfarbe (Blurple), damit der Termintyp auf einen Blick * erkennbar ist; "special" ein dunkles Gold, weil es die Ausnahme meint. */ --tc-evt-discord: #5865f2; --tc-evt-discord-accent: #a5b0f7; --tc-evt-special: #b8860b; --tc-evt-special-accent: #e8c766; /* Punktreihe im Kalendergitter — hellere Zweitstufe, siehe oben */ --tc-evt-dot-mordheim: #c0392b; --tc-evt-dot-mordheim-rgb: 192, 57, 43; --tc-evt-dot-aos: #3498db; --tc-evt-dot-aos-rgb: 52, 152, 219; --tc-evt-dot-pathfinder: #27ae60; --tc-evt-dot-pathfinder-rgb: 39, 174, 96; --tc-evt-dot-bloodbowl: #c9a959; --tc-evt-dot-bloodbowl-rgb: 201, 169, 89; --tc-evt-dot-social: #9b59b6; --tc-evt-dot-social-rgb: 155, 89, 182; --tc-evt-dot-hobby: #9b59b6; --tc-evt-dot-hobby-rgb: 155, 89, 182; --tc-evt-dot-community: #e67e22; --tc-evt-dot-community-rgb: 230, 126, 34; --tc-evt-dot-oldworld: #0c8093; --tc-evt-dot-oldworld-rgb: 12, 128, 147; --tc-evt-dot-discord: #7983f5; --tc-evt-dot-discord-rgb: 121, 131, 245; --tc-evt-dot-special: #e8c766; --tc-evt-dot-special-rgb: 232, 199, 102; }