/* ========================================================================== RIVALZ — EINE FARBE UND EINE KULISSE JE SPORTART (16.09.2026) Auf Ansage des Eigentuemers: "Bringt ja nix, wenn ich bei Basketball bin, das Tab oeffne und dann ein Fussballstadion sehe und Gruen die Hauptfarbe ist." Wer einen Sport oeffnet, sieht den Sport. WIE. app.js setzt data-sport auf . Jede Sportart ausser Fussball bekommt hier vier Werte — die helle Flaeche, die tiefe Marke, dieselbe Farbe als RGB-Tripel und ihre zwei Kulissen —, und EIN gemeinsamer Block verteilt sie auf die Token, die Huelle und Spiele schon lesen: --color-primary, --color-primary-text, --violet, --violet-text, --violet-rgb, --marke-rgb, --hero-bild und die Farbwaesche des Glasgrunds. Fussball bleibt, wie er war; seine Werte stehen in rivalz-tokens.css. DIE ZWEI ROLLEN jeder Farbe sind dieselben wie beim Lime (siehe "The rebuild: light mode has its own colours now" in CLAUDE.md): die FLAECHE bleibt in beiden Themen hell und traegt dunkle Schrift, die MARKE (Schrift, Linie, Punkt) ist im Dunkeln hell und im Hellen tief. GEMESSEN, nicht geschaetzt — Kontrast jeder Marke im hellen Thema auf Karte / Papier / Vertiefung, und jede Flaeche mit dunkler Schrift: tief auf Karte Papier Fond hell mit Schrift Fussball #026639 7.09 6.18 5.49 11.70 (zum Vergleich) Basketball #9A3F00 6.81 5.93 5.27 8.36 Tennis #5A5800 7.42 6.47 5.75 15.27 Formel 1 #A8140E 7.58 6.60 5.87 5.77 Darts #5A2DB0 8.62 7.51 6.68 7.63 NFL #1A4DAE 7.73 6.74 5.99 6.62 Golf #0A675A 6.77 5.90 5.25 10.81 Kampfsport #A3173F 7.63 6.65 5.91 6.62 Olympia #6B4F00 7.65 6.67 5.93 11.04 Und die helle Marke im dunklen Thema auf der Karte #111815: Formel 1 ist mit 5.29 die knappste, alle anderen liegen ueber 6 (Kampfsport 6.06). Kampfsport ist ein Pink-Rot und kein reines Rot, damit es neben Formel 1 nicht dieselbe Farbe ist. Die Pfade sind ABSOLUT (/assets/…). Ein relatives url() in einer eigenen Eigenschaft wird nicht dort aufgeloest, wo es steht, sondern dort, wo var() es einsetzt — in rivalz-layout.css, styles.css, rivalz-glass.css. Absolut ist es an allen drei Stellen dieselbe Datei. DIE DATEI LAEDT ALS LETZTES STYLESHEET DER HUELLE, und das traegt: die Themen- und Glasbloecke haben (0,2,0) bis (0,3,0), dieselbe Spezifitaet wie der gemeinsame Block hier. Bei Gleichstand entscheidet die Reihenfolge — die Falle aus dem Kopf von rivalz-glass.css. tools/tests/shell-test.js prueft es. DIE KULISSEN SIND BILDER, WO ES SCHON EINES GIBT (16.09.2026, abends). Basketball, Tennis, Formel 1 und NFL tragen ein gerendertes Abendbild (-hero.jpg) im Blick des Fussball-Hero-Bilds, vom Eigentuemer erstellt; die helle Variante (-hero-dawn.jpg) macht tools/bauen/hero-sonnenaufgang.py mit dem gemessenen Horizont des Bilds. Darts, Golf, Olympia und Kampfsport folgten am 17.09.2026 (Horizont 0.328, 0.26, 0.218 und 0.259). Olympia zeigt bewusst KEINE Ringe: Sie sind durch das Olympia-Schutzgesetz geschuetzt. Damit traegt jede Sportart ein Bild; die gezeichneten -nacht/-tag.svg sind nur noch Vorlage. Die Kacheln im Katalog behalten die gezeichneten -kachel.svg. Die Farben stehen auch in tools/bauen/sport-kulissen.py, das die Kulissen zeichnet. CSS kann keine Datei lesen und ein Bild kein Token — wer eine Farbe aendert, aendert beide Stellen und laesst das Werkzeug laufen. ========================================================================== */ /* Das Markentripel fuer alle rgba()-Toenungen, die bis heute als rgba(0, 229, 122, …) von Hand im Blatt standen. Fussball-Lime als Vorgabe. */ :root { --marke-rgb: 0, 229, 122; } :root[data-sport="basketball"] { --sport-hell: #FF8A2A; --sport-tief: #9A3F00; --sport-rgb: 255, 138, 42; --sport-grund-rgb: 92, 38, 0; --kulisse-nacht: url('/assets/sport/basketball-hero.jpg'); --kulisse-tag: url('/assets/sport/basketball-hero-dawn.jpg'); --kulisse-kachel: url('/assets/sport/basketball-kachel.svg'); } :root[data-sport="tennis"] { --sport-hell: #E2EC3C; --sport-tief: #5A5800; --sport-rgb: 226, 236, 60; --sport-grund-rgb: 58, 60, 0; --kulisse-nacht: url('/assets/sport/tennis-hero.jpg'); --kulisse-tag: url('/assets/sport/tennis-hero-dawn.jpg'); --kulisse-kachel: url('/assets/sport/tennis-kachel.svg'); } :root[data-sport="formel1"] { --sport-hell: #FF4538; --sport-tief: #A8140E; --sport-rgb: 255, 69, 56; --sport-grund-rgb: 96, 10, 6; --kulisse-nacht: url('/assets/sport/formel1-hero.jpg'); --kulisse-tag: url('/assets/sport/formel1-hero-dawn.jpg'); --kulisse-kachel: url('/assets/sport/formel1-kachel.svg'); } :root[data-sport="darts"] { --sport-hell: #B98AFF; --sport-tief: #5A2DB0; --sport-rgb: 185, 138, 255; --sport-grund-rgb: 52, 22, 110; --kulisse-nacht: url('/assets/sport/darts-hero.jpg'); --kulisse-tag: url('/assets/sport/darts-hero-dawn.jpg'); --kulisse-kachel: url('/assets/sport/darts-kachel.svg'); } :root[data-sport="nfl"] { --sport-hell: #4E95FF; --sport-tief: #1A4DAE; --sport-rgb: 78, 149, 255; --sport-grund-rgb: 10, 40, 110; --kulisse-nacht: url('/assets/sport/nfl-hero.jpg'); --kulisse-tag: url('/assets/sport/nfl-hero-dawn.jpg'); --kulisse-kachel: url('/assets/sport/nfl-kachel.svg'); } :root[data-sport="kampfsport"] { --sport-hell: #FF5C7A; --sport-tief: #A3173F; --sport-rgb: 255, 92, 122; --sport-grund-rgb: 98, 10, 36; --kulisse-nacht: url('/assets/sport/kampfsport-hero.jpg'); --kulisse-tag: url('/assets/sport/kampfsport-hero-dawn.jpg'); --kulisse-kachel: url('/assets/sport/kampfsport-kachel.svg'); } :root[data-sport="olympia"] { --sport-hell: #F2B93B; --sport-tief: #6B4F00; --sport-rgb: 242, 185, 59; --sport-grund-rgb: 80, 58, 0; --kulisse-nacht: url('/assets/sport/olympia-hero.jpg'); --kulisse-tag: url('/assets/sport/olympia-hero-dawn.jpg'); --kulisse-kachel: url('/assets/sport/olympia-kachel.svg'); } :root[data-sport="golf"] { --sport-hell: #3CD6BC; --sport-tief: #0A675A; --sport-rgb: 60, 214, 188; --sport-grund-rgb: 4, 70, 58; --kulisse-nacht: url('/assets/sport/golf-hero.jpg'); --kulisse-tag: url('/assets/sport/golf-hero-dawn.jpg'); --kulisse-kachel: url('/assets/sport/golf-kachel.svg'); } /* ---- Der gemeinsame Block: helles Thema als Grundstellung --------------- */ :root[data-sport]:not([data-sport="fussball"]) { --marke-rgb: var(--sport-rgb); --color-primary: var(--sport-hell); --color-primary-hover: var(--sport-hell); --color-primary-soft: rgba(var(--sport-rgb), 0.16); --color-primary-text: var(--sport-tief); --color-ring: var(--sport-tief); --violet: var(--sport-hell); --violet-deep: var(--sport-hell); --violet-rgb: var(--sport-rgb); --violet-deep-rgb: var(--sport-rgb); --violet-text: var(--sport-tief); --shadow-glow: 0 10px 34px rgba(var(--sport-rgb), 0.30); --grad-brand: linear-gradient(112deg, var(--sport-hell) 0%, var(--sport-hell) 45%, var(--sport-tief) 130%); --hero-bild: var(--kulisse-tag); /* Die Waesche des Glasgrunds, hell: die Sportfarbe traegt oben links, wo beim Fussball das Lime stand. Die zwei anderen Toene bleiben — sie sind Himmel und Licht, nicht Marke. */ --glas-wash: radial-gradient(62% 48% at 12% 8%, rgba(var(--sport-rgb), 0.16), transparent 70%), radial-gradient(54% 46% at 88% 14%, rgba(2, 132, 199, 0.12), transparent 70%), radial-gradient(66% 56% at 50% 96%, rgba(var(--sport-rgb), 0.10), transparent 72%); } /* ---- Dunkles Thema: die Marke wird hell, die Kulisse Nacht -------------- Zweimal geschrieben, ausdruecklich und ueber die Systemeinstellung, wie jeder Themenblock in diesem Haus. */ :root[data-sport]:not([data-sport="fussball"])[data-theme="dark"] { --color-primary-text: var(--sport-hell); --color-ring: var(--sport-hell); --violet-text: var(--sport-hell); --color-primary-soft: rgba(var(--sport-rgb), 0.14); --hero-bild: var(--kulisse-nacht); /* TIEFE Toene, nicht die hellen — derselbe Befund wie beim Lime: eine gesaettigte Farbe ueber fast schwarzem Schleier hebt den Grund zu sehr, und die gedaempfte Schrift faellt unter AA. */ --glas-wash: radial-gradient(62% 48% at 12% 8%, rgba(var(--sport-grund-rgb), 0.42), transparent 70%), radial-gradient(54% 46% at 88% 14%, rgba(7, 89, 133, 0.34), transparent 70%), radial-gradient(66% 56% at 50% 96%, rgba(var(--sport-grund-rgb), 0.36), transparent 72%); } @media (prefers-color-scheme: dark) { :root[data-sport]:not([data-sport="fussball"]):not([data-theme="light"]) { --color-primary-text: var(--sport-hell); --color-ring: var(--sport-hell); --violet-text: var(--sport-hell); --color-primary-soft: rgba(var(--sport-rgb), 0.14); --hero-bild: var(--kulisse-nacht); --glas-wash: radial-gradient(62% 48% at 12% 8%, rgba(var(--sport-grund-rgb), 0.42), transparent 70%), radial-gradient(54% 46% at 88% 14%, rgba(7, 89, 133, 0.34), transparent 70%), radial-gradient(66% 56% at 50% 96%, rgba(var(--sport-grund-rgb), 0.36), transparent 72%); } } /* ---- Kulisse bei Tag: der Schleier ueber der Buehne ----------------------- Die gezeichnete Kulisse ist bei Tag heller als das Morgenfoto. Nichts zu tun: der Schleier fuer das helle Thema steht in rivalz-layout.css und gilt hier genauso. */ /* ---- Die Spielkacheln der Sportart -------------------------------------- Grund ist der Boden der Kulisse, unten rechts das Zeichen des Sports (sportKachelKunst in app.js). Die Mitte bleibt frei — siehe dort. */ /* So spezifisch, weil rivalz-glass.css den Grund jeder .cover mit der Kurzschreibweise `background:` setzt, bei (0,3,0) — und die setzt das Bild mit zurueck. Gemessen: background-image "none", die Kachel war schwarz. */ :root[data-sport] .cover.cover--sport { background-color: #06070B; background-image: var(--kulisse-kachel); background-repeat: no-repeat; background-size: cover; background-position: center; } .cover__sportmarke { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: rgba(6, 7, 11, 0.62); color: var(--sport-hell, var(--color-primary)); pointer-events: none; } .cover__sportmarke svg:not(.sprite) { width: 18px; height: 18px; }