/** * DIE TOKEN-QUELLE — eine Datei, aus der alle Oberflächen ihre Werte beziehen. * * ============================================================================ * EINGEHÄNGT ALS ERSTES STYLESHEET (E1-0, Design-Update 14.10.2026) in den * Köpfen v2_head_assets, casino_doc_start, * team_orangebonus und team_wheel — und seit E7m (15.10.2026) im Kopf des * Mod-Centers (app/modCenterSeite.js). Themen und Rang-Stilregeln holen sie * nicht mehr per @import (tests/helfer/tokenQuelle.js). Ausnahme bis nach der * Saison: XMAS (themen/xmas.css). Die Grundwerte sind EINGEFROREN (XMAS und der * Tailwind-Abgleich in tests/themen.test.js hängen daran); Neues kommt als * Rolle oder Anker dazu, nie als geänderter Grundwert. * ============================================================================ * * WARUM ES SIE GIBT * * Gezählt am 10.08.2026 über alle Oberflächen: * * fünf verschiedene „Orange" #ff8000 · #ff8a1f · #F5901E · #ea580c · #ff7a00 * vier verschiedene „Gold" #fbbf24 · #ffd166 · #f0c26a · #f1c40f * drei „Rot", drei „Grün" * über 25 Eckenradien, zwei Pill-Konventionen (999px 121×, 99px 33×) * 103 @keyframes — davon 27 Varianten von „Pulsieren", 7× dasselbe `floatUp` * KEINE Schriftgrößen-Skala, nirgends * * Das ist nicht Nachlässigkeit, sondern Wachstum: rund zwanzig Token-Namensräume * (--tn-, --sd-, --cas-, --ob-, --xp-, --aq-, cz-, --om-…), jeder für sich * sinnvoll entstanden. Vier davon kodieren denselben Gold-Orange-Verlauf wörtlich * identisch unter vier verschiedenen Namen. * * WOHER DIE WERTE KOMMEN * * Nicht neu erfunden. `desktop/tailwind.config.js` hat als einzige Stelle im * Projekt bereits eine Höhenstufung (bg/elev/elev2), semantische Farben * (danger/success/warning) und JetBrains Mono als erklärte Mono-Familie. Die * Werte dort sind die Grundlage — die Token-Quelle geht von der Mod-Suite AUS, * sie kommt nicht dort an. * * DIE EINE ENTSCHEIDUNG, DIE ALLES TRÄGT * * Gold ist die Marke („**orange**morange"). Es wird hier zur VERDIENTEN Farbe: * nur für Zeit, Rang und Auszeichnung — nie für gewöhnliche Bedienelemente. * Ein Speichern-Knopf ist nicht golden. Ein erreichter Rang schon. * * Wer das aufweicht, nimmt der Rangleiter ihre Bedeutung: Wenn alles glänzt, * heißt Glanz nichts. */ :root { /* ═══════════════════════════════════════════════════════════════════════ 1 · GRUND — Flächen und Kanten ═══════════════════════════════════════════════════════════════════════ Die Basis ist bewusst KEIN Schwarz und kein Blaustich, sondern eine tiefe warme Tinte. Auf #07070a (der heutige Wert der Mod-Suite) liest Gold kühl und etwas grell; auf einem warmen Grund liest es wie Metall. Der Unterschied ist klein und wirkt trotzdem auf jeder Fläche — deshalb steht er an erster Stelle und nicht in einem Sonderfall. */ --jt-grund: #0a0806; --jt-grund-1: #131017; --jt-grund-2: #1c1822; --jt-linie: rgba(255, 255, 255, 0.08); --jt-linie-stark: rgba(255, 255, 255, 0.16); /* ═══════════════════════════════════════════════════════════════════════ 2 · MARKE — Gold und Orange, je EINMAL ═══════════════════════════════════════════════════════════════════════ Die beiden Werte, die sich im Bestand am häufigsten finden und in `public/style.css` als Leitfarben stehen. Alle anderen Fassungen (#ff8a1f, #F5901E, #ea580c, #ff7a00, #ffd166, #f0c26a, #f1c40f) sind Abweichungen und laufen künftig hierauf zusammen. */ --jt-gold: #fbbf24; --jt-orange: #ff8000; --jt-gold-gedaempft: #a87f12; --jt-verlauf: linear-gradient(135deg, var(--jt-gold), var(--jt-orange)); /* Schrift auf Gold. Nicht Weiß: Auf #fbbf24 hat Weiß ein Kontrastverhältnis von 1,8 : 1 und ist damit unlesbar. Diese warme Tinte kommt auf 11 : 1. */ --jt-auf-gold: #1a1206; /* Die Marke selbst (E1-0): Frucht und Blatt des Logos — bis dahin ohne Token, in den Logo-Dateien als #f27021 und #68bc4e. Dazu die Grundfarben als Kanäle, damit Transparenz ohne zweites Literal geht: rgba(var(--jt-gold-rgb), .35). Noch nicht benutzt — kein Bild ändert sich. */ --jt-frucht: #f27021; --jt-blatt: #68bc4e; --jt-blatt-rgb: 104, 188, 78; --jt-gold-rgb: 251, 191, 36; --jt-orange-rgb: 255, 128, 0; --jt-grund-rgb: 10, 8, 6; --jt-text-rgb: 246, 242, 234; /* ═══════════════════════════════════════════════════════════════════════ 3 · SEMANTIK — aus der Mod-Suite übernommen ═══════════════════════════════════════════════════════════════════════ */ --jt-fehler: #ef4444; --jt-fehler-rgb: 239, 68, 68; --jt-erfolg: #22c55e; --jt-warnung: #f59e0b; --jt-live: #ef4444; /* Als Kanal für die Leuchten um „live" (Kopfzeile, Profil-Rahmen) — E1-5: dieselbe Farbe nicht ein zweites Mal als rgba-Literal. */ --jt-live-rgb: 239, 68, 68; /* ═══════════════════════════════════════════════════════════════════════ 4 · TEXT ═══════════════════════════════════════════════════════════════════════ */ --jt-text: #f6f2ea; --jt-text-leise: rgba(246, 242, 234, 0.66); --jt-text-still: rgba(246, 242, 234, 0.42); /* ═══════════════════════════════════════════════════════════════════════ 5 · SCHRIFT — vier Familien, vier Aufgaben ═══════════════════════════════════════════════════════════════════════ Alle vier sind bereits installiert (public/fonts/) und werden über public/css/fonts.css geladen. Es kommt nichts Neues dazu; zwei davon liefen bisher praktisch ungenutzt mit. CINZEL für Rangnamen und Plaketten — eine römische Inschriftenschrift. Sie liest „graviert", nicht „Gaming". (Bis zum 15.10.2026 verband sie den Bildschirm auch mit der Medaille ab Rang 13 — der Medaillen-Shop ist gelöscht.) JETBRAINS MONO für ALLE Zeiten und Zahlen. Eine Rangliste ist eine Zahlentabelle; Ziffern gleicher Breite sind dort kein Stilmittel, sondern Lesbarkeit — und Voraussetzung für das Zählwerk (Abschnitt 9). INTER für Fließtext, unverändert. RAJDHANI wird zurückgestuft: die generische „Gaming"-Wahl. Sie bleibt verfügbar (Überschriften der Event-Welten benutzen sie heute), bekommt aber keine neue Aufgabe. */ --jt-schrift-rang: 'Cinzel', Georgia, serif; --jt-schrift-zahl: 'JetBrains Mono', 'JetBrains Mono Ersatz', ui-monospace, monospace; --jt-schrift-text: 'Inter', 'Inter Ersatz', system-ui, -apple-system, 'Segoe UI', sans-serif; --jt-schrift-alt: 'Rajdhani', 'Rajdhani Ersatz', 'Inter', 'Inter Ersatz', sans-serif; /* Die erste Schriftgrößen-Skala des Projekts. Verhältnis 1,25 (große Terz), Basis 16px. Vorher wurde jede Größe einzeln gesetzt — deshalb gibt es heute Fließtext in 0.9rem, 0.92rem, 0.95rem und 1.02rem nebeneinander. */ --jt-t-xs: 0.75rem; /* 12 px — die kleinste Schrift (Audit 26.10.2026; vorher 0.64rem = 10 px) */ --jt-t-s: 0.8rem; --jt-t-m: 1rem; --jt-t-l: 1.25rem; --jt-t-xl: 1.563rem; --jt-t-2xl: 1.953rem; --jt-t-3xl: 2.441rem; --jt-t-4xl: 3.052rem; /* ═══════════════════════════════════════════════════════════════════════ 6 · ABSTÄNDE — 4er-Raster ═══════════════════════════════════════════════════════════════════════ */ --jt-a-1: 4px; --jt-a-2: 8px; --jt-a-3: 12px; --jt-a-4: 16px; --jt-a-6: 24px; --jt-a-8: 32px; --jt-a-12: 48px; --jt-a-16: 64px; /* ═══════════════════════════════════════════════════════════════════════ 7 · RADIEN — vier Stufen statt fünfundzwanzig ═══════════════════════════════════════════════════════════════════════ `--jt-r-pille` ersetzt BEIDE bisherigen Konventionen (999px und 99px). Sie tun dasselbe; zwei Werte dafür sind nur eine Gelegenheit, dass irgendwo der falsche steht. */ --jt-r-s: 7px; --jt-r-m: 12px; --jt-r-l: 20px; --jt-r-pille: 999px; /* ═══════════════════════════════════════════════════════════════════════ 8 · METALL-STUFEN — die eigentliche Idee ═══════════════════════════════════════════════════════════════════════ Die 19 Ränge haben je eine eigene Farbe (config/constants.js). Auf der Oberfläche erscheinen sie heute als optisch IDENTISCHE kleine Pillen mit Mini-Symbol — der Aufstieg, also die eigentliche Geschichte des Produkts, ist unsichtbar. Statt die 19 Farben zu ersetzen (sie sind die Identität), bekommen sie ein MATERIAL. Die Stufe ist am Metall erkennbar, bevor man den Namen liest. DIE SCHWELLE STAMMT AUS DEM MEDAILLEN-SHOP: Ab „Vollbild Jäger" (7 500 Min, 125 Std) gab es dort die Medaille zum ANFASSEN. Der Shop ist seit dem 15.10.2026 gelöscht (Betreiberentscheidung); Schwelle und Stufenname bleiben. Ab dort beginnt auf dem Bildschirm das Edelmetall. Vorher ist die Plakette Stein, Patina, Stahl — Material, aber kein Edelmetall. Wer die Schwelle verschiebt, ändert, wer auf der Rangliste glänzt (tests/rangStufen.test.js hält die sieben Ränge fest). Zuordnung (Rang 1–19 aufsteigend): 1–5 Stein Casino Gast … Stammgast (0 – 5 Std) 6–9 Patina Bonus Magnet … Risiko Experte (8 – 30 Std) 10–12 Stahl Bonus Shopper … Multi König (42 – 83 Std) 13–18 Medaille Vollbild Jäger … Casino Imperator (125 – 750 Std) 19 Max Win GOD OF MAX WIN (1 000 Std) */ /* Stein: matt, keine Reflexion. */ --jt-metall-stein: linear-gradient(145deg, #3a3a3d, #2a2a2c 55%, #333336); --jt-metall-stein-kante: rgba(255, 255, 255, 0.10); --jt-metall-stein-glanz: none; /* Patina: gealtertes Metall, schwacher Schimmer. */ --jt-metall-patina: linear-gradient(145deg, #46514a, #2f3a34 55%, #3d4842); --jt-metall-patina-kante: rgba(255, 255, 255, 0.14); --jt-metall-patina-glanz: 0 0 0 rgba(0, 0, 0, 0); /* Stahl: gebürstet, gerichtetes Licht. */ --jt-metall-stahl: linear-gradient(145deg, #6b7a8c, #414d5c 52%, #5c6b7c); --jt-metall-stahl-kante: rgba(255, 255, 255, 0.22); --jt-metall-stahl-glanz: 0 0 14px rgba(160, 190, 220, 0.14); /* Medaille: warmes Edelmetall. Der Name stammt aus der Zeit, als es ab dieser Stufe die Medaille zum Anfassen gab (Shop gelöscht 15.10.2026). */ --jt-metall-medaille: linear-gradient(145deg, #f7d98a, #b8860b 48%, #e8c46a); --jt-metall-medaille-kante: rgba(255, 226, 150, 0.55); --jt-metall-medaille-glanz: 0 0 22px rgba(251, 191, 36, 0.30); /* Max Win: das Weiß aus config/constants.js, als Weißgold gelesen. */ --jt-metall-maxwin: linear-gradient(145deg, #ffffff, #d9d2c4 45%, #ffffff); --jt-metall-maxwin-kante: rgba(255, 255, 255, 0.85); --jt-metall-maxwin-glanz: 0 0 30px rgba(255, 255, 255, 0.38); /* ═══════════════════════════════════════════════════════════════════════ 9 · BEWEGUNG — sechs benannte Bewegungen statt 103 Keyframes ═══════════════════════════════════════════════════════════════════════ Gezählt: 103 @keyframes-Definitionen, davon 27 Varianten von „Pulsieren/Leuchten" (v2Pulse — seit dem 04.09.2026 entfallen —, whPuls, tnaPulse, sdaPulse, ob-pulse, aqpulse, multPulse, logoPulse, livePulse, lbPulse, dotPulse, winPulse, pulse-live dreimal, glowPulse, …) und siebenmal dasselbe `floatUp` in sieben Dateien. Die Antwort auf „gerne mit echten Animationen" ist deshalb nicht MEHR davon, sondern WENIGER und benannt — und die frei werdende Aufmerksamkeit bekommt EINE Signaturbewegung. Die Dauern sind eine Skala, keine Sammlung: heute existieren rund dreißig verschiedene Übergangszeiten. */ --jt-zeit-sofort: 90ms; --jt-zeit-kurz: 180ms; --jt-zeit-mittel: 320ms; --jt-zeit-lang: 640ms; --jt-kurve: cubic-bezier(0.22, 1, 0.36, 1); --jt-kurve-ein: cubic-bezier(0.4, 0, 1, 1); /* Aus dem Casino übernommen (--cas-ease-pop/-out), damit es die Kurven nicht ein sechstes Mal unter neuem Namen gibt. */ --jt-kurve-pop: cubic-bezier(0.2, 0.9, 0.3, 1.2); --jt-kurve-aus: cubic-bezier(0.2, 0.8, 0.2, 1); /* ═══════════════════════════════════════════════════════════════════════ 10 · ROLLEN — was ein Baustein meint, nicht welcher Ton (E1-3, 15.10.2026) ═══════════════════════════════════════════════════════════════════════ Die Bausteine (public/css/bausteine.css) fragen nach einer AUFGABE — „Grund des Hauptknopfs", „Schrift im Fuß" — und nie nach einem Ton. Neue Töne kommen als Anker dazu, nie als geänderter Grundwert (siehe Kopf dieser Datei). Die Anker sind die des gewählten Saals (Wahlzettel 3a, Mischung „Ein Saal, drei Lautstärken"): Lichtorange, Creme, Messing. */ --jt-orange-licht: #ffb454; --jt-creme: #fff4cd; --jt-messing: #c9a24a; --jt-messing-hell: #f3d79a; /* Kanäle für Kanten und Schleier aus Messing und Creme (E1-5). */ --jt-messing-rgb: 201, 162, 74; --jt-creme-rgb: 255, 244, 205; /* Der Hauptknopf: Orange mit dunkler Schrift. #1a1206 auf #ff8000 kommt auf 7,3 : 1, auf das helle Ende des Verlaufs auf 10 : 1 — Weiß auf Orange nur auf 2,5 : 1 (tests/bausteine.test.js rechnet nach). */ --jt-cta-grund: linear-gradient(180deg, var(--jt-orange-licht) 0%, #ff8c1a 46%, var(--jt-orange) 100%); --jt-cta-text: var(--jt-auf-gold); --jt-cta-kante: rgba(255, 222, 170, 0.6); --jt-cta-schatten: 0 0 0 1px rgba(110, 56, 0, 0.55), 0 14px 32px -12px rgba(255, 128, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5); /* Der Login IST der Hauptknopf (F3-A) — er bekommt bewusst keine eigene Farbrolle: Zwei Rollen mit demselben Wert sind die Gelegenheit, dass sie auseinanderlaufen. */ --jt-fokus: var(--jt-creme); /* Der neutrale Knopf (Abbrechen, Zurück): Rauchglas mit Messingkante. */ --jt-knopf-neutral-grund: rgba(255, 244, 205, 0.06); --jt-knopf-neutral-kante: rgba(233, 199, 125, 0.4); /* Der Seitenkopf (F6-A): Titel im Messingverlauf, Licht vom Kronleuchter des Hallenfotos, darunter eine Messinglinie. */ --jt-titel-verlauf: linear-gradient(180deg, var(--jt-creme) 0%, #f0c26a 52%, #b8861b 100%); --jt-luesterlicht: radial-gradient(46% 62% at 50% 0%, rgba(255, 214, 140, 0.2), rgba(255, 214, 140, 0.06) 45%, transparent 72%); --jt-messing-linie: linear-gradient(90deg, transparent, var(--jt-messing) 30%, var(--jt-messing-hell) 50%, var(--jt-messing) 70%, transparent); --jt-titel-schatten: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55)); /* Der Seitenwechsel (E1-4, F4N): das Leuchten der orangen Naht, und der Glanz, der beim ersten Besuch einmal über einen Messingtitel läuft (F4-B). */ --jt-naht-glanz: 0 0 10px 2px rgba(255, 128, 0, 0.75), 0 0 34px 4px rgba(251, 191, 36, 0.45); --jt-glanz-band: linear-gradient(105deg, transparent 42%, rgba(255, 252, 240, 0.85) 50%, transparent 58%); /* Die Samtfläche (Richtung A, E2): Tafeln und Karten im Saal, warm und dunkel — nie Glas in Glas (Bauregel 1). Dazu ihre Messingkante als Verlauf für eine 1-px-Maske (padding: 1px + mask-composite: exclude). */ --jt-samt: linear-gradient(180deg, rgba(28, 24, 34, 0.9), rgba(19, 16, 23, 0.94)); --jt-kante-verlauf: linear-gradient(170deg, rgba(240, 194, 106, 0.6), rgba(168, 127, 18, 0.16) 45%, rgba(240, 194, 106, 0.08)); /* Zahlen, die sich ändern — Zeiten, Plätze, Stände: Inter mit gleich breiten Ziffern (Wahlzettel F1-A, Bauregel 10), immer zusammen mit font-variant-numeric: tabular-nums. JetBrains Mono (--jt-schrift-zahl) bleibt den Prüfcodes. */ --jt-schrift-wert: var(--jt-schrift-text); /* Die Sendung (Richtung C) — spricht NUR bei Ereignissen (Mischung): die Bauchbinde als beleuchtete Rauchglas-Tafel mit Oberlicht, Zeile 2 im Grau des Servernamens (7,5 : 1), dazu die Schnittkurve der Wischblende. */ --jt-tafel: rgba(28, 24, 34, 0.92); --jt-oberlicht: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%); --jt-zeilen-grau: #aaaaac; --jt-binde-schatten: 0 22px 44px -20px rgba(0, 0, 0, 0.9); --jt-kurve-schnitt: cubic-bezier(0.77, 0, 0.18, 1); /* Die Signalkante der Binde: orange; `.jt-binde--live` setzt sie rot. */ --jt-binde-signal: var(--jt-orange); /* E5 (Design-Update): Spieltische und Spielhalle — Wahlzettel 3b. G1-A: Die Tische stehen im Saal (Rauchglas, Lüsterlicht, Messingkante), die Spielhalle behält ihr Violettglas mit Neon (Messing oben = das Gehäuse, Neon unten = das Brett). G5-A: Der Filz trägt die Visier-Tinte des Logos — nie Grün, Grün heißt im Spielfeld Auszahlung. */ --jt-gold-hell: #ffd166; --jt-filz-hi: #1d243e; --jt-filz: #14182a; --jt-filz-tief: #0e1018; --jt-tisch-rand: #1a1410; --jt-tisch-glas: linear-gradient(180deg, rgba(26, 20, 17, 0.95), rgba(10, 8, 7, 0.97)); --jt-tisch-licht: radial-gradient(ellipse 60% 42% at 50% -6%, rgba(255, 196, 128, 0.15), transparent 70%); --jt-messing-kante: linear-gradient(120deg, #6e5220, #e9c77d 28%, #8a6a2e 52%, #f3d79a 76%, #6e5220); --jt-halle-glas: linear-gradient(180deg, rgba(22, 13, 44, 0.94), rgba(8, 4, 16, 0.97)); --jt-halle-licht: radial-gradient(ellipse 34% 60% at 8% 30%, rgba(40, 215, 208, 0.12), rgba(40, 215, 208, 0) 70%), radial-gradient(ellipse 34% 60% at 92% 72%, rgba(255, 45, 120, 0.12), rgba(255, 45, 120, 0) 70%); --jt-halle-kante: linear-gradient(180deg, #e9c77d, rgba(201, 162, 74, 0.5) 30%, rgba(40, 215, 208, 0.55) 70%, rgba(255, 45, 120, 0.7)); /* Gedrückte Taste in Messing: gewählte Stufe, aktiver Bereich. */ --jt-knopf-aktiv: linear-gradient(180deg, #2b241c, #1a1612); /* Der Hauptknopf der Spiele: eine Orange in Messingfassung; Auszahlen ist dieselbe Kugel im Grün des Blatts (Bauregel 19). */ --jt-orange-kugel: radial-gradient(circle at 36% 30%, #ffe0b4, var(--jt-orange-licht) 26%, var(--jt-orange) 58%, #b85600 90%); --jt-blatt-kugel: radial-gradient(circle at 36% 30%, #d9f5cc, #9bd884 26%, var(--jt-blatt) 58%, #2f6b22 90%); --jt-auf-blatt: #0d2108; --jt-messing-fassung: 0 0 0 4px #0d0a08, 0 0 0 6px var(--jt-messing), 0 0 0 7px rgba(110, 82, 32, 0.85), 0 16px 36px rgba(255, 128, 0, 0.32), inset 0 -8px 16px rgba(0, 0, 0, 0.32), inset 0 3px 6px rgba(255, 255, 255, 0.42); --jt-messing-fassung-hover: 0 0 0 4px #0d0a08, 0 0 0 6px var(--jt-messing-hell), 0 0 0 7px rgba(110, 82, 32, 0.85), 0 18px 44px rgba(255, 128, 0, 0.45), inset 0 -8px 16px rgba(0, 0, 0, 0.32), inset 0 3px 6px rgba(255, 255, 255, 0.42); /* Der Fuß (Bauregel 7): halbdunkler Streifen, Texte in --jt-text-leise (4,5 : 1 und mehr — der alte Fuß lag mit 0,35 Deckkraft bei 3 : 1). */ --jt-fuss-grund: rgba(0, 0, 0, 0.25); --jt-fuss-kante: rgba(201, 162, 74, 0.22); /* E3b (Design-Update): Coins-Tor, Fehler- und Wartungsseite, übrige Seiten. Die Samtfläche (--jt-samt, --jt-kante-verlauf) bekommt ihren Schatten als Rolle — Plan 3.2, Richtung A: Tiefe 0 24px 60px -12px und das Innenlicht der Messingkante. Damit stehen Karten auf allen Seiten gleich tief im Saal, statt dass jede Seite ihren eigenen Schatten erfindet. */ --jt-samt-schatten: 0 24px 60px -12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 244, 205, 0.1); /* E7 (Design-Update): Werkzeug-Seiten und Mod-Center. Schrift in Fehlerfarbe auf dunklem Grund: Das Grund-Rot (--jt-fehler) erreicht auf Samt nur 4,4 : 1 — für Löschknöpfe und Fehlerzeilen zu wenig. Dieses Rot kommt auf 6 : 1. */ --jt-fehler-hell: #f87171; /* Kanäle für das Mod-Center: Tailwind baut daraus jede Farbe mit Deckkraft — rgba(var(--jt-grund-1-rgb), 0.4) —, die Werte kommen damit zur Laufzeit von HIER statt als fertiges rgb() aus dem Bau. Jeder Kanal ist derselbe Ton wie sein Grundwert (tests/themen.test.js rechnet nach). */ --jt-grund-1-rgb: 19, 16, 23; --jt-grund-2-rgb: 28, 24, 34; --jt-gold-gedaempft-rgb: 168, 127, 18; --jt-warnung-rgb: 245, 158, 11; --jt-messing-hell-rgb: 243, 215, 154; --jt-orange-licht-rgb: 255, 180, 84; /* Die Linie hat 8 % Deckung (--jt-linie). Die Deckung steht für sich, damit „Linie zu 60 %" im Mod-Center 60 % DER LINIE ist — Tailwind ersetzte bei einem rgba-Wert die Deckkraft und machte daraus 60 % Weiß. Den Ton gibt dort der warme Text (--jt-text-rgb); reines Weiß ist keine Hausfarbe und bekommt keinen Kanal. */ --jt-linie-deckkraft: 0.08; /* Die Grauleiter des Mod-Centers — warm statt Tailwinds kühlem zinc. Jede Stufe ist gemischt aus --jt-text und --jt-grund, so hell wie die zinc-Stufe, die sie ersetzt (tests/themen.test.js rechnet beides nach). Ausnahme seit E7m: 500 und 600 sind heller als zinc. Mit zinc-Helligkeit kamen sie auf den Karten des Centers auf 3,9 und 2,6 : 1 — dort steht aber Schrift (Hinweise, Zeiten, die Beschreibungen in der Leiste). Jetzt reichen beide auf --jt-grund-1 und --jt-grund-2 für 4,5 : 1. */ --jt-grau-100-rgb: 246, 242, 234; --jt-grau-200-rgb: 234, 230, 223; --jt-grau-300-rgb: 218, 214, 207; --jt-grau-400-rgb: 168, 165, 159; --jt-grau-500-rgb: 152, 149, 143; --jt-grau-600-rgb: 134, 131, 125; --jt-grau-700-rgb: 68, 66, 62; --jt-grau-800-rgb: 43, 40, 37; --jt-grau-900-rgb: 27, 25, 23; --jt-grau-950-rgb: 12, 10, 8; /* Die Gegenseite im Duell (Star-Duell: der Herausforderer). Blau ist keine Hausfarbe — es ist die zweite Partei, und Live-Seite und Star-Duell- Manager zeigen sie gleich (bis 25.10.2026 auch die Stream-Einblendung, das entfernte OBS-Overlay). Als Rolle, damit es EIN Blau gibt statt mehrerer Literale. */ --jt-gegenseite: #6ebeff; --jt-gegenseite-rgb: 110, 190, 255; /* E4 (Design-Update): das Podest (Bauregeln 4, 13, 24; Wahlzettel S2 Rauchglas). Startseite und Coin-Bestenliste stehen auf DEMSELBEN Sockel (bausteine.css, .jt-podest). Rang durch Licht und Höhe, nie durch Gold, Silber, Bronze. Die Werte sind die der Startseite (E2-1), 1:1 — ein Beweisbild hält fest, dass sie dort keinen Pixel geändert haben. */ --jt-podest-lichtkegel: conic-gradient(from 0deg at 50% 0%, transparent 0deg 158deg, rgba(255, 228, 170, 0.1) 166deg, rgba(255, 232, 180, 0.24) 175deg, rgba(255, 238, 196, 0.3) 180deg, rgba(255, 232, 180, 0.24) 185deg, rgba(255, 228, 170, 0.1) 194deg, transparent 202deg 360deg); --jt-podest-lichtkegel-maske: linear-gradient(180deg, transparent 0%, #000 34%, #000 70%, transparent 100%); --jt-podest-spiegelung: radial-gradient(ellipse at center, rgba(240, 194, 106, 0.2), rgba(240, 194, 106, 0.05) 45%, transparent 72%); --jt-podest-bild-schatten: 0 0 0 3px rgba(var(--jt-grund-rgb), 0.8), 0 14px 26px rgba(0, 0, 0, 0.6); --jt-podest-bild-schatten-1: 0 0 0 4px rgba(var(--jt-grund-rgb), 0.85), 0 0 0 5px rgba(240, 194, 106, 0.5), 0 0 54px rgba(255, 214, 140, 0.42), 0 20px 36px rgba(0, 0, 0, 0.6); --jt-podest-glas: linear-gradient(112deg, transparent 20%, rgba(255, 236, 200, 0.075) 31%, transparent 44%), linear-gradient(180deg, rgba(255, 220, 160, 0.16) 0, rgba(255, 220, 160, 0.04) 6px, transparent 20px), linear-gradient(180deg, rgba(30, 23, 18, 0.6), rgba(14, 11, 9, 0.76)); --jt-podest-glas-1: radial-gradient(85% 50% at 50% 0%, rgba(255, 226, 170, 0.18), transparent 72%), linear-gradient(112deg, transparent 20%, rgba(255, 236, 200, 0.09) 31%, transparent 44%), linear-gradient(180deg, rgba(255, 220, 160, 0.2) 0, rgba(255, 220, 160, 0.05) 6px, transparent 20px), linear-gradient(180deg, rgba(30, 23, 18, 0.56), rgba(14, 11, 9, 0.74)); --jt-podest-sockel-schatten: inset 0 1px 0 rgba(255, 228, 180, 0.72), inset 0 0 0 1px rgba(240, 194, 106, 0.24), inset 1px 0 0 rgba(255, 228, 180, 0.22), inset -1px 0 0 rgba(255, 228, 180, 0.08), inset 0 -10px 22px -12px rgba(var(--jt-orange-rgb), 0.3), 0 28px 42px -20px rgba(0, 0, 0, 0.85); --jt-podest-sockel-schatten-1: inset 0 1px 0 #fff0c9, inset 0 0 0 1px rgba(240, 194, 106, 0.34), inset 1px 0 0 rgba(255, 228, 180, 0.28), inset -1px 0 0 rgba(255, 228, 180, 0.1), inset 0 -12px 26px -12px rgba(var(--jt-orange-rgb), 0.38), 0 0 70px -20px rgba(255, 214, 140, 0.4), 0 34px 50px -18px rgba(0, 0, 0, 0.9); /* Die Platzzahl ist golden ins Glas eingelegt (Cinzel — die Inschrift der J-Münze). */ --jt-podest-ziffer-verlauf: linear-gradient(180deg, #fff0c9 0%, var(--jt-messing-hell) 40%, var(--jt-gold-gedaempft) 100%); --jt-podest-ziffer-schatten: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(255, 214, 140, 0.18)); /* Gold nur für Verdientes: der Wert von Platz 1. */ --jt-podest-wert-1: #ffd166; --jt-podest-wert-1-schein: 0 0 26px rgba(255, 209, 102, 0.35); /* E7m (Design-Update): Mod-Center. Das helle Rot als Kanal — Tailwind baut daraus Schrift und Kanten der Gefahr-Knöpfe und -Marken im Center (rgba(var(--jt-fehler-hell-rgb), …)). Derselbe Ton wie --jt-fehler-hell (tests/themen.test.js rechnet nach); die zwei Stellen der Kopfzeile, die ihn wörtlich trugen, verweisen jetzt darauf (tests/grundschichtTokens.test.js). */ --jt-fehler-hell-rgb: 248, 113, 113; /* Startseite (Design-Update): die LIVE-Marke auf den Live-Karten. Weiß auf dem Rotlicht (--jt-live) kam nur auf 3,8 : 1 — zu wenig für eine Marke von 9,6 px (Abschlussblatt 15.10.2026, schon live so). Dasselbe Rot, tiefer: 5,2 : 1. Punkte, Kanten und Leuchten bleiben im hellen Rotlicht; diese Rolle ist die FLÄCHE unter weißer Schrift. */ --jt-live-grund: #d02c2c; } /* Die sechs Bewegungen. Mehr braucht keine Oberfläche dieses Projekts. */ /** 1 · erscheinen — etwas kommt neu ins Bild. */ @keyframes jt-erscheinen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /** 2 · wechseln — derselbe Platz, anderer Inhalt. */ @keyframes jt-wechseln { 0% { opacity: 1; } 45% { opacity: 0; transform: translateY(-4px); } 55% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } } /** 3 · betonen — einmalig, nicht in Schleife. Für „das hier ist gerade passiert". */ @keyframes jt-betonen { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } } /** 4 · warten — das EINZIGE, was dauerhaft läuft. Deshalb bedeutet es etwas. */ @keyframes jt-warten { 0% { box-shadow: 0 0 0 0 var(--jt-puls, rgba(239, 68, 68, 0.55)); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /** 5 · fehlschlagen — kurz, waagerecht, unmissverständlich. */ @keyframes jt-fehlschlagen { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } /** 6 · feiern — für den Rangaufstieg. Einmal, dann still. */ @keyframes jt-feiern { 0% { transform: scale(0.82) rotate(-6deg); opacity: 0; filter: brightness(1); } 55% { transform: scale(1.10) rotate(2deg); opacity: 1; filter: brightness(1.5); } 100% { transform: scale(1) rotate(0); opacity: 1; filter: brightness(1); } } /** * DIE SIGNATUR — das Zählwerk. * * Zeitwerte und Rangwechsel laufen wie ein mechanisches Zählwerk: Ziffern * rollen senkrecht und rasten ein. Kein generisches Hochzählen, sondern der * WALZENSTOPP — die charakteristischste Bewegung im Gegenstandsbereich dieses * Produkts. * * Sie braucht Ziffern gleicher Breite, deshalb --jt-schrift-zahl. */ @keyframes jt-zaehlwerk { 0% { transform: translateY(-100%); } 70% { transform: translateY(6%); } /* leichtes Überschwingen */ 85% { transform: translateY(-2%); } 100% { transform: translateY(0); } } /** * BEWEGUNG IST NICHT FÜR JEDEN EIN GEWINN. * * `prefers-reduced-motion` fehlt heute ausgerechnet in der gemeinsamen * Basisschicht: v2-shell.css (seit dem 04.09.2026 ohne Keyframes — `v2Pulse` * ging mit dem Punkt in der Admin-Leiste; ein `transition` steht dort weiter), * jb-design-system.css, * v2-pages.css, juicer-topnav.css, die beiden Inline-Overlays und die komplette * Mod-Center-SPA haben keinen einzigen Reduce-Block. Vorhanden ist er dagegen * in 18 der gewachsenen Event-Welten. * * Die Abdeckung ist also genau dort lückenhaft, wo am meisten wiederverwendet * wird. Weil alle Bewegungen jetzt von hier kommen, reicht ein Block. */ @media (prefers-reduced-motion: reduce) { :root { --jt-zeit-sofort: 0ms; --jt-zeit-kurz: 0ms; --jt-zeit-mittel: 0ms; --jt-zeit-lang: 0ms; } }