/* ================================================================ [kru:]nest — Marken-Tokens ================================================================ EINE Wahrheit fuer Palette und Schrift des Turniermoduls. Warum diese Datei existiert: die Tokens standen am 26.08. an DREI Stellen — in tournament.css (fuer die angemeldete Oberflaeche), in live.html und in aushang.html (beide bewusst ohne tournament.css, damit ein Unangemeldeter den grossen Client gar nicht erst laedt). Drei Kopien derselben Hex-Werte sind drei Gelegenheiten, sie auseinanderlaufen zu lassen — genau die Doppel-Wahrheit, die in diesem Modul schon fuenf Kaskadenkollisionen verursacht hat. ANWENDUNG Angemeldete Oberflaeche : index.html laedt tokens.css VOR tournament.css; die Tokens haengen an .t-mod. Eigenstaendige Seiten : auf tokens.css und . WARUM NICHT AUF :root main.css fuehrt eigene Tokens gleichen Namens (--muted, --surface, --line). Auf :root gesetzt wuerden diese Werte die GANZE App umfaerben — das ist ein eigenes Vorhaben und von Jonas bewusst zurueckgestellt. Deshalb an eine Klasse gebunden: das Turniermodul traegt die Marke, der Rest der App vorerst nicht. Quelle der Werte: Artefakt "[kru:]nest Markenuebernahme". Einzige Abweichung ist --muted, nachgerechnet — Begruendung steht unten an der Stelle. ================================================================ */ /* Dritter Traeger, ergaenzt 2026-08-26 (Entscheid Jonas: "außer du musst die appfarben anpassen um diese im modul anzupassen"). Warum das noetig ist: #content hat 30px/28px Polster, und der Grund darunter kommt aus main.css — body { background: var(--bg) }, hell #f8f5f1. Das Modul sass also in einem cremefarbenen Rahmen, den KEIN grep in tournament.css findet, weil der Wert dort gar nicht steht. Genau der Fall, vor dem die Uebergabe warnt: "die sieht kein grep, nur ein Screenshot". Der Geltungsbereich ist bewusst eng: nur wenn das Modul das DIREKTE Kind von #content ist, also wenn es DER Inhalt ist. Ist ein anderes Modul offen, bleibt alles wie es war — das ist Jonas' "nur das Modul". :has() wird in main.css bereits benutzt, das ist hier keine neue Technik. Nebenwirkung, bewusst in Kauf genommen: innerhalb dieses Bereichs tragen auch App-Elemente die Marken-Palette. Wenn ein Turnier offen ist, steht dort aber nichts anderes als das Modul — der Radius ist genau der, den Jonas freigegeben hat. */ .t-mod, .t-brand, #content:has(> .t-detail-host), /* Bei der LISTE sitzt der Host eine Ebene tiefer: #content > #grid > section.t-list-host. Mit `>` traf der Selektor deshalb nie, und die ganze Uebersicht blieb cremefarben — samt braunem Knopf, weil auch der Alias --accent nur auf einem Traeger gilt. Hier ohne `>`. Der Geltungsbereich bleibt trotzdem eng: .t-list-host gibt es nur in dieser einen Ansicht. */ #content:has(.t-list-host) { /* ---- Flaechen ---- Dritte Fassung des Artefakts, 2026-08-26 („Turniermodul ohne Kaestchen"). Das Blatt ist kein reines Weiss mehr, sondern ein Papierton — reines Weiss liegt in CIE L* bei 100, dem oberen Ende der Skala, und liest sich als Flaeche, die nicht gewaehlt wurde, sondern uebrig blieb. Gerechnet, nicht geschaetzt (Werte aus dem Artefakt): Blatt #F1F0EB auf Grund #D7D6D0 -> 1,276 : 1 · dL* 9,19 vorher #FFFFFF auf #E4E4E2 -> 1,273 : 1 · dL* 9,46 Der Grund wandert also dieselbe Strecke mit; der Abstand bleibt erhalten. --raised ist ab jetzt der Ton der SPIELKARTE (dL* 3,18 ueber dem Blatt) und nicht mehr arbeitslos. Reihenfolge in beiden Themen gleich: Grund < Blatt < Karte. */ --ground: #d7d6d0; /* Seitengrund */ --panel: #f1f0eb; /* Blatt */ --raised: #faf9f6; /* Spielkarte */ --sunk: #e1e0da; /* eingesenkt, Pillen, Eingabefelder */ --line: #c6c5be; --line-soft: #dad9d3; /* ---- Tinte ---- */ --ink: #0b0b0c; --ink-2: #3a3a3c; /* Die zweite Fassung des Artefakts setzte hier #75757A; nachgerechnet fiel der Ton auf jeder Flaeche ausser reinem Weiss unter 4,5 : 1 durch, und genau dort steht er selten. #65656A besteht ueberall. Die DRITTE Fassung fuehrt denselben Wert — die Abweichung von damals ist zur Vorlage geworden und ist keine mehr. Der Nachtmodus zieht mit dem Artefakt auf #9A9A9F. */ --muted: #65656a; /* ---- Marke: der Weg zum Titel, sonst nichts ---- Die Signalfarben selbst sind unveraendert. Ihre Toenungen wandern mit dem Blatt mit — auf dem Papierton waeren die alten Baender sonst kaum noch vom Grundton zu unterscheiden. */ --flare: #bf4413; --flare-soft: #f2e1d8; --flare-line: #e4ae97; /* Druckfarben der Wortmarke — in BEIDEN Themen unveraendert, das ist Druckfarbe und kein UI-Ton. */ --brand-orange: #de5426; --brand-black: #0b0b0c; /* ---- Zustaende, strikt getrennt vom Akzent ---- */ --live: #00708f; /* laeuft gerade */ /* ABWEICHUNG VOM ARTEFAKT, nachgerechnet — die zweite. Das Artefakt setzt --live-soft #D3E7ED. Gemessen traegt --live darauf 4,43 : 1 und faellt damit durch (WCAG 1.4.3, 4,5 fuer Text unter 18,66px). Betroffen sind zwei Stellen, an denen genau diese Paarung steht: das Fussband des laufenden Spiels (10,5px Mono) und die Status-Pille „Laeuft" in der Turnierliste (11px). #D8EAEF hebt die Flaeche um 0,0124 in der relativen Leuchtdichte — gerechnet 4,56 : 1, bestanden. Gegen das Blatt (#F1F0EB) bleibt der Ton klar unterscheidbar; die Toenung wird eine Spur heller, nicht eine andere Farbe. Der Dunkelmodus bleibt beim Artefakt-Wert: dort ist --live-soft ein rgba-Schleier, und --live steht darauf bei 6,15 : 1. */ --live-soft: #d8eaef; --qual: #1e6e45; /* qualifiziert */ --qual-soft: #d8e7dd; --danger: #b4123f; /* Karmin */ /* Nachgetragen mit der dritten Fassung: die Gefahrenzone hatte bisher keine eigene Toenung und musste sich mit einem Rahmen behelfen. */ --danger-soft: #f3dce3; /* Schrift AUF den Signalfarben. Im Dunkeln hellen Orange und Karmin auf, weiss faellt dort auf 2,6 : 1 zurueck — deshalb ein eigener Token statt eines festen #fff an der Komponente. */ --on-flare: #ffffff; --on-danger: #ffffff; --shadow: 0 1px 2px rgba(11, 11, 12, 0.07), 0 20px 48px rgba(11, 11, 12, 0.13); --shadow-s: 0 1px 2px rgba(11, 11, 12, 0.06); /* ---- Hebung: EIN Wert, weit gestreut, flach ---- Dritte Fassung: nur noch, was wirklich ueber dem Grund liegt, traegt einen Schatten — das Modul-Blatt, der Dialog, der Druckbogen. Alles darin liegt darauf und bekommt keinen eigenen. --shadow/--shadow-s bleiben als Bruecke stehen, solange Altregeln sie fuehren; wer eine Regel anfasst, zieht sie auf --lift um. */ --lift: 0 1px 2px rgba(11, 11, 12, 0.03), 0 12px 26px rgba(11, 11, 12, 0.055), 0 40px 84px rgba(11, 11, 12, 0.07); --lift-hi: 0 2px 4px rgba(11, 11, 12, 0.05), 0 18px 40px rgba(11, 11, 12, 0.1), 0 56px 110px rgba(11, 11, 12, 0.1); --paper-shadow: 0 2px 4px rgba(11, 11, 12, 0.08), 0 26px 62px rgba(11, 11, 12, 0.15); /* ---- Schrift ---- */ --f-disp: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --f-cond: 'Archivo Narrow', 'Arial Narrow', 'Helvetica Neue', sans-serif; --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ================================================================ ALTE NAMEN, NEUE WERTE — Bruecke fuer den Bestand ---------------------------------------------------------------- Diese Aliase existieren, damit die bestehenden Komponenten die neue Palette sofort tragen. Sie sind NICHT das Zielvokabular: wer neu schreibt, nimmt die Namen oben. Wer eine alte Regel anfasst, zieht sie beim Vorbeigehen mit um. Wenn die letzte Nutzung eines Alias verschwunden ist, kann er ersatzlos raus — grep -c "var(--surface-alt" tournament.css main.css sagt, wie weit das ist. */ --paper: var(--ground); --surface: var(--panel); --surface-alt: var(--raised); --ink-soft: var(--muted); /* Nachgetragen 2026-08-26: --border ist der Rand-Token der App (main.css: #ede7df, creme). Er fehlte in dieser Bruecke, und deshalb behielt jeder App-Knopf im Modulbereich seinen cremefarbenen Rand — sichtbar am "Aktualisieren"-Knopf, dessen eigene Regel nur Geometrie setzt und keine einzige Farbe. */ --border: var(--line); /* Nachgetragen 2026-08-28: --text/--text2 sind die Tinten-Tokens der APP (main.css: #1a1410 / #3a2e26 hell, #ede8e2 / #c8c0b8 dunkel). Sie fehlten in dieser Bruecke — und genau daran hing die Ueberschrift „Turniere". Die steht in der App-Kopfzeile (index.html: h2#gal-title.gal-title in .gal-hdr), also INNERHALB von #content und damit innerhalb dieses Traegers, holt ihre Farbe aber aus `color: var(--text)` in main.css (.gal-title). Im Nachtmodus des Moduls stand sie deshalb in der HELLMODUS-Tinte der App auf dem dunklen Modulgrund. Gemessen im Browser bei 375px (Edge, getComputedStyle): #1a1410 auf #0b0b0c = 1,08 : 1 — praktisch unsichtbar. Nach der Bruecke 17,26 : 1. Ein zweiter Grund fuer die Bruecke: die App-Tinte ist ein warmes Braunschwarz, die Modul-Tinte ein neutrales Schwarz. Auch dort, wo der Kontrast reichte, stand die Ueberschrift in einem anderen Farbton als der Rest des Moduls. Ueber die Bruecke traegt sie dieselbe Tinte wie „Noch kein Turnier angelegt." daneben. Keine eigenen Hex-Werte hier: die Aliase zeigen auf --ink/--ink-2, und weil Custom Properties spaet aufgeloest werden, wandern sie im Nachtmodus-Block von allein mit. */ --text: var(--ink); --text2: var(--ink-2); --accent: var(--flare); --accent-soft: var(--flare-soft); --qualified: var(--qual); --done: var(--qual); --out: var(--muted); --open: var(--flare); --warn: var(--flare); --warn-soft: var(--flare-soft); /* Die Anzeigetafel (dunkles Feld, helle Ziffer) faellt mit der Markenuebernahme weg — Ergebnisse stehen jetzt als Mono-Ziffer direkt auf der Karte, der Sieger in Orange. Die Tokens bleiben vorerst, weil .t-board-Regeln noch existieren; sie zeigen auf die neue Tinte, damit nichts beige durchschlaegt. */ --board: var(--ink); --board-ink: var(--panel); --board-dim: var(--muted); /* ---- Radien ---- 4px für Score-Felder: bewusst kantiger als der Rest. Der kleine Bruch ist Absicht — er macht das Score-Feld zum Fremdkörper im guten Sinn. */ /* Artefakt-Aenderungsliste: 14px -> 10px in der App. Das Zeichen selbst hat harte Ecken, die Flaechen duerfen deshalb nicht ausfransen. --r-board bleibt 4px, wird aber mit dem Wegfall der Anzeigetafel gegenstandslos. */ /* Dritte Fassung: aus elf Radien werden vier. --r-dev 30px das Geraet / das Modul-Blatt --r-plane 18px jede Flaeche darauf (Dialog, Karte, Schale) --r-pill 999px alles, was gedrueckt wird --r-focus 6px der Fokusring Zwei erklaerte Ausnahmen bleiben: 24 % relativ am Turnierlogo (fremdes Bild, relativer Radius traegt von 26 bis 54 px) und 3 px auf dem Druckbogen. Eine dritte kommt aus Jonas' Abnahme dazu: die Spielkarte im Spielplan behaelt ihre 12 px, siehe .t-match. */ --r-dev: 30px; --r-plane: 18px; --r-pill: 999px; --r-focus: 6px; /* Alte Namen, neue Werte — dieselbe Bruecke wie oben bei den Farben. --r-card zeigt auf die Flaeche, --r-btn bleibt vorerst stehen, weil er auch an Eingabefeldern haengt; wer eine Knopf-Regel anfasst, zieht sie auf --r-pill um. */ --r-card: var(--r-plane); --r-btn: 10px; --r-board: 4px; /* ---- Spacing ---- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; /* --s5 nachgetragen 2026-08-25: die Skala ist sN = N x 4px, die 5 war eine echte Luecke — zwei Regeln nutzten var(--s5) bereits, eine davon mit hartem 20px-Fallback. Definiert statt Fallback, damit es EINE Wahrheit gibt. */ --s5: 20px; --s6: 24px; --s8: 32px; } /* ---------------------------------------------------------------- NACHTMODUS — drei Zustaende, nicht zwei ACHTUNG (26.08.): Die Traeger-Liste unten muss dieselbe sein wie oben im Hell-Block. Beim Ergaenzen von #content war sie es kurz nicht — Ergebnis: der Rahmen um das Modul blieb im Nachtmodus hellgrau (#E4E4E2), gemessen, waehrend das Modul selbst dunkel war. Wer oben einen Traeger ergaenzt, ergaenzt ihn hier ZWEIMAL: im prefers-color-scheme-Block und im [data-theme]-Block. ---------------------------------------------------------------- Ein Betrachter hat DREI moegliche Einstellungen, nicht zwei: 1. ausdruecklich hell [data-theme='light'] am 2. ausdruecklich dunkel [data-theme='dark'] am 3. "wie das System" GAR KEIN Attribut — der Normalfall Bis zum 26.08. stand hier nur Fall 2. In der angemeldeten App faellt das nicht auf, weil main.js das Attribut immer setzt. Auf den eigenstaendigen Seiten (live.html, aushang.html) laeuft aber kein main.js — dort gibt es Fall 3 und sonst nichts, und ein Zuschauer haette abends ein grellweisses Blatt bekommen. Gemeldet hat es die Session, die diese Seiten gebaut hat; sie wollte es bei sich mit drei eigenen Zeilen umgehen. Das waere die vierte Kopie derselben Palette gewesen — genau das, wogegen diese Datei angelegt wurde. Also hier reparieren, wo die Wahrheit steht. Die Reihenfolge ist Absicht: erst die Systemabfrage, dann das Attribut. So gewinnt eine ausdrueckliche Wahl immer, und das `:not([data-theme='light'])` sorgt dafuer, dass ein Nutzer, der ausdruecklich HELL will, es auch auf einem dunklen System bekommt. ---------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) :is(.t-mod, .t-brand, #content:has(> .t-detail-host), #content:has(.t-list-host)), :root:not([data-theme='light']):is(.t-brand) { /* Dunkelmodus der Markenuebernahme — Werte woertlich aus dem Artefakt. Der Grund wird zur Tinte, das Papier zum Panel. Das Orange hellt auf (#BF4413 -> #F0794D), damit es auf dunklem Grund nicht absaeuft; die weichen Toene werden zu rgba-Schleiern statt zu eigenen Hex-Werten, weil sie ueber wechselnden Flaechen liegen. --brand-orange/--brand-black bleiben BEWUSST unveraendert: das ist die Druckfarbe der Wortmarke, kein UI-Ton, und sie darf im Nachtmodus nicht kippen. */ --ground: #0b0b0c; --panel: #161618; --raised: #202024; --sunk: #0f0f11; --line: #2f2f35; --line-soft: #26262b; --ink: #f1f0ed; --ink-2: #c5c4c0; --muted: #9a9a9f; --flare: #f0794d; --flare-soft: rgba(240, 121, 77, 0.16); --flare-line: rgba(240, 121, 77, 0.42); --live: #4fc5e8; --live-soft: rgba(79, 197, 232, 0.14); --qual: #5fbe8c; --qual-soft: rgba(95, 190, 140, 0.13); --danger: #ff7091; --danger-soft: rgba(255, 112, 145, 0.13); /* Textfarbe AUF den Signalfarben: im Dunkeln ist die Fuellung HELLER als der Text darauf sein darf, also kippt er auf die Tinte. */ --on-flare: #160a04; --on-danger: #2a0512; --shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 32px 72px rgba(0, 0, 0, 0.66); --shadow-s: 0 1px 0 rgba(255, 255, 255, 0.04); --lift: 0 1px 0 rgba(255, 255, 255, 0.035), 0 24px 60px rgba(0, 0, 0, 0.55); --lift-hi: 0 1px 0 rgba(255, 255, 255, 0.05), 0 34px 84px rgba(0, 0, 0, 0.68); --paper-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 76px rgba(0, 0, 0, 0.7); /* Schrift auf dunkler Flaeche: bei --flare #F0794D und --live #4FC5E8 ist die Fuellung HELLER als der Text darauf sein duerfte, also kippt der Text auf die Tinte. Dieselbe Mechanik wie im alten Set, nur mit den neuen Werten. */ --accent-ink: #0b0b0c; --danger-ink: #0b0b0c; --accent-soft-ink: var(--flare); } } [data-theme='dark'] :is(.t-mod, .t-brand, #content:has(> .t-detail-host), #content:has(.t-list-host)), [data-theme='dark'].t-brand { /* Dunkelmodus der Markenuebernahme — Werte woertlich aus dem Artefakt. Der Grund wird zur Tinte, das Papier zum Panel. Das Orange hellt auf (#BF4413 -> #F0794D), damit es auf dunklem Grund nicht absaeuft; die weichen Toene werden zu rgba-Schleiern statt zu eigenen Hex-Werten, weil sie ueber wechselnden Flaechen liegen. --brand-orange/--brand-black bleiben BEWUSST unveraendert: das ist die Druckfarbe der Wortmarke, kein UI-Ton, und sie darf im Nachtmodus nicht kippen. */ --ground: #0b0b0c; --panel: #161618; --raised: #202024; --sunk: #0f0f11; --line: #2f2f35; --line-soft: #26262b; --ink: #f1f0ed; --ink-2: #c5c4c0; --muted: #9a9a9f; --flare: #f0794d; --flare-soft: rgba(240, 121, 77, 0.16); --flare-line: rgba(240, 121, 77, 0.42); --live: #4fc5e8; --live-soft: rgba(79, 197, 232, 0.14); --qual: #5fbe8c; --qual-soft: rgba(95, 190, 140, 0.13); --danger: #ff7091; --danger-soft: rgba(255, 112, 145, 0.13); /* Textfarbe AUF den Signalfarben: im Dunkeln ist die Fuellung HELLER als der Text darauf sein darf, also kippt er auf die Tinte. */ --on-flare: #160a04; --on-danger: #2a0512; --shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 32px 72px rgba(0, 0, 0, 0.66); --shadow-s: 0 1px 0 rgba(255, 255, 255, 0.04); --lift: 0 1px 0 rgba(255, 255, 255, 0.035), 0 24px 60px rgba(0, 0, 0, 0.55); --lift-hi: 0 1px 0 rgba(255, 255, 255, 0.05), 0 34px 84px rgba(0, 0, 0, 0.68); --paper-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 76px rgba(0, 0, 0, 0.7); /* Schrift auf dunkler Flaeche: bei --flare #F0794D und --live #4FC5E8 ist die Fuellung HELLER als der Text darauf sein duerfte, also kippt der Text auf die Tinte. Dieselbe Mechanik wie im alten Set, nur mit den neuen Werten. */ --accent-ink: #0b0b0c; --danger-ink: #0b0b0c; --accent-soft-ink: var(--flare); }