/* ======================================================================== PADELCADEMY — THEME-TOKENS FUER ALLES AUSSERHALB DER APP ======================================================================== Startseite (index.html) und die vorgerenderten Seiten unter public/ (Coaching, Quiz, Prinzipien, Schlaeger-Finder, Rechtstexte) ziehen ihre Farben aus dieser einen Datei. ZWEI TEILE, IN DIESER REIHENFOLGE: TEIL A RESTBESTAND. Die alten Tokennamen (--court-*, --amber-*, --gold, --pearl-* …), die Seiten ausserhalb der App noch lesen und die src/tokens.css nicht neu belegt. Er steht ZUERST, damit Teil B ihn ueberall dort ueberschreibt, wo es einen neuen Wert gibt. TEIL B ZEICHENGLEICHE KOPIE VON src/tokens.css (Master-Designstand: Sand/Graphit, --ce-*, Schriften, Raster, Bewegung) zwischen den Markierungen BEGINN/ENDE. Die App liest dieselbe Datei; es gibt also EINE Wahrheit mit denselben Werten. Geschrieben wird der Teil von `node scripts/theme-css-sync.mjs`, geprueft von scripts/check-tokens.mjs (Waechter) und `node scripts/theme-css-sync.mjs --pruefen` (erzeugt:pruefen). Nie von Hand aendern — src/tokens.css aendern und neu erzeugen. OLD_REQUIREMENT „theme.css ist eine zeichengleiche Kopie des Token-Blocks aus src/style.css.“ NEW_REQUIREMENT Teil B ist eine zeichengleiche Kopie von src/tokens.css. WHY_CHANGED Die App steht seit dem Court-Editorial-Redesign und dem Master-Release auf den --ce-*-Werten aus src/tokens.css (die style.css-Werte werden dort ueberschrieben). Die Seiten ausserhalb der App standen weiter auf der alten Terrakotta-Palette — dieselbe Marke in zwei Farben. Die Zusage „eine Wahrheit, gleiche Werte“ gilt jetzt fuer die Werte, die die App wirklich zeigt. Umgeschaltet wird ueber data-theme am ; das setzt das Kopfskript (scripts/theme-bootstrap.mjs) und beim Klick theme.js. ======================================================================== */ /* ---- TEIL A · RESTBESTAND --------------------------------------------- */ :root, html[data-theme="sand"]{ --bg:#ded7cd; --surface:#f3eee7; --surface-1:#f3eee7; /* Alias */ --surface-2:#e7e0d6; --surface-2-hover:#ded5c9; --surface-hover:#ded5c9; /* Alias */ /* Deckendes Gegenstück zur Kachel: nötig überall dort, wo eine Fläche etwas abdecken muss (Verlaufsrand-Trick bei den Match-Day-Karten). */ --surface-solid:#e7e0d6; /* Zwei warme Schleier über dem Grund — machen aus der flächigen Farbe einen weichen Verlauf. */ --bg-sheen-1:rgba(255,251,244,0.8); --bg-sheen-2:rgba(255,248,238,0.55); --ink:#292524; --text-main:#292524; /* Alias */ /* DUNKLER ALS VORHER (#57534e), WEIL DER GRUND DUNKLER GEWORDEN IST. Seit das Stimmungsbild multiplizierend hinter der ganzen Seite liegt, ist der Sand unter dem Text nicht mehr der reine Token-Wert, sondern um bis zu ein Fuenftel abgedunkelt. Gemessen (Text durchsichtig geschaltet, echter Pixel dahinter): die gedaempften Zeilen der Startseite fielen damit von 4,8 auf 3,2 zu 1. Nicht das Bild wird zurueckgenommen — der Text kommt dem Grund entgegen. */ --ink-muted:#403b36; --text-muted:#403b36; /* Alias */ --ink-faint:#a8a29e; --tab-idle:#5c554e; /* ---- DER BELAG ---- */ --court-turf-1:#9a3e25; /* Mitte, heller */ --court-turf-2:#8c351e; /* Ränder, dunkler */ --court:#9a3e25; /* Alias = --court-turf-1 */ --court-surround:#6d2817; --court-strong:#2e0f06; --court-lines:rgba(255,248,240,0.9); --court-line:rgba(255,248,240,0.9); /* Alias */ --court-accent:#facc15; /* "DU"-Token */ --net-edge:#f5e6d8; --court-glass:#ffc9a8; --court-glass-hi:#fff5ec; --court-sheen:#ffd9c2; --court-label:#fff1e0; --court-faint:#e8d5c8; --court-danger:#ffb3b3; --court-zone-uebergang:#fdba74; --court-ok:#4ade80; --court-path:#fbbf24; --court-ball:#facc15; --court-anflug:#93c5fd; /* ankommender Ball (Quiz, Punkt 30) */ --court-chip:#2e0f06; --court-chip-edge:rgba(255,248,240,0.45); --court-badge-bg:rgba(46,15,6,0.8); --court-ok-bg:rgba(74,222,128,0.22); --court-err-bg:rgba(255,179,179,0.24); /* ---- AKZENTE DER OBERFLÄCHE ---- */ --court-bright:#c2410c; /* = --accent-primary */ --accent-primary:#c2410c; --accent-hover:#9a3412; --accent-primary-soft:rgba(194,65,12,0.35); --accent-streak:#ea580c; --accent-badge:#ea580c; /* Alias */ --accent-volt:#ea580c; /* Alias */ --accent-volt-bright:#ea580c; --accent-blue:#c2410c; /* Alias aus der Blau-Ära */ --accent-blue-soft:#9a3412; /* Alias */ --accent-line:#b0a495; --on-accent:#ffffff; /* Schrift auf GEFUELLTEM Gruen/Rot. Im Sand sind --ok-ink/--error dunkel, da traegt Weiss. Im Graphite sind beide hell — dort muss die Schrift kippen, sonst steht Weiss auf Hellgruen (1,7:1). */ --on-ok:#ffffff; --on-err:#ffffff; /* Rand interaktiver Flaechen. --line-strong ist die Zierlinie zwischen Bloecken und kommt gegen die Karte nur auf 1,4:1 — fuer einen Knopf, den man als Knopf erkennen soll, zu wenig. */ --border-interactive:#8a7f70; /* Schrift auf der GEHOVERTEN Akzentflaeche. Im Hellen wird der Button beim Hover dunkler, Weiss passt weiter. Im Graphite wird er heller (#ea580c) — dort kaeme Weiss nur noch auf 3,6:1, deshalb kippt die Schrift dann auf einen dunklen Ton. */ --on-accent-hover:#ffffff; /* Terrakotta als SCHRIFT: #c2410c kommt auf der Sandkachel nur auf 3,6-4,0:1. Als Fläche mit weißer Schrift ist es sauber (5,2:1), als Linktext nicht — dafür dieser dunklere Ton. Im Graphite dreht sich das um: dort ist der Schrift-Ton HELLER als die Fläche. */ --accent-ink:#9a3412; --accent-tint:#f6e4da; --accent-tint-edge:#e6c8b7; /* ---- SEMANTIK AUF DER KARTE ---- */ --ball:#15803d; --ball-ink:#ffffff; --neon-ball:#b45309; --error:#dc2626; --gold:#b45309; --ok-ink:#136b34; --ok-bg:#e0ebdc; --ok-edge:#a6cfae; --err-ink:#b3261e; --error-bg:#f7e2dc; --err-edge:#e0b6ac; /* Aus demselben Grund dunkler: die Kicker-Pille liegt auf einer hellen Tint-Flaeche, die das Bild ebenfalls abdunkelt. */ --amber-ink:#5f2c04; --amber-bg:#fbf1de; --amber-edge:#ddbe8a; --border-subtle: #d4cbbe; --line: #d4cbbe; /* = --border-subtle */ --line-strong: #d4cbbe; /* Schatten in warmem Braun — ein blauschwarzer Schatten wirkt auf Sandstein schmutzig. */ --card-shadow: 0 10px 25px -5px rgba(74,54,38,0.13); --shadow: 0 18px 40px -12px rgba(74,54,38,0.2), 0 2px 6px rgba(74,54,38,0.08); --shadow-card: 0 10px 25px -5px rgba(74,54,38,0.13); /* --- Hero-Buehne der Startseite --------------------------------- Der Schein hinter dem Telefon ist der Akzent auf ein Zehntel heruntergezogen: eine zweite Farbe waere ein zweiter Akzent, und der Hero hat schon einen. Der Rahmen ist bewusst fast schwarz und NICHT --ink: ein Geraet ist ein Gegenstand, kein Text. */ --hero-glow: rgba(194,65,12,0.16); --device-bezel: #26211d; --device-bezel-edge: rgba(255,248,240,0.14); --device-shadow: 0 32px 60px -24px rgba(74,54,38,0.5), 0 8px 20px -8px rgba(74,54,38,0.25); --stage-card-shadow: 0 20px 40px -18px rgba(74,54,38,0.38); /* --- Schwebendes Menue ------------------------------------------- Ballgelb, nicht Terrakotta: Terrakotta gehoert den Aktionen im Textfluss. Das Menue schwebt darueber und braucht eine eigene Stimme — und Gelb hat die Marke ohnehin (der "DU"-Token auf jedem Court). Schrift darauf fast schwarz; Gelb traegt kein Weiss. */ /* DARK GLASS STATT BALLGELB. Gelb war laut, und laut heisst hier auch: es zog den Blick vom Hauptknopf weg, der eine Stufe wichtiger ist. Milchglas in Dunkel steht ueber jedem Untergrund ruhig und bleibt trotzdem deutlich — der Terrakotta-Schein kommt erst beim Zeigen dazu. Der Ton ist derselbe wie der Grund des dunklen Designs (#16181D), damit die Pille auf beiden Seiten aus demselben Material ist. */ --insel-pille: rgba(22,24,29,0.85); --insel-pille-ink: #ffffff; --insel-pille-kante: rgba(255,255,255,0.15); --insel-pille-schein: rgba(194,65,12,0.45); /* Im hellen Design traegt die dunkle Pille von sich aus — hier genuegt ein weicher Schlagschatten ohne Leuchten. */ --insel-pille-schatten: 0 12px 30px rgba(74,54,38,0.34), 0 2px 8px rgba(74,54,38,0.2); --insel-dock: #26211d; --insel-dock-ink: #f7f1e8; --insel-dock-hover: rgba(247,241,232,0.10); --insel-dock-kante: rgba(247,241,232,0.14); --insel-schatten: 0 18px 38px -12px rgba(74,54,38,0.45), 0 4px 12px -4px rgba(74,54,38,0.25); /* Das Stimmungsbild liegt jetzt hinter der GANZEN Seite, nicht nur hinter dem Hero. Im hellen Design wurde es bei niedriger Deckkraft zu grauem Schleier — deshalb hier 22 % und multiply: die dunklen Konturen von Schlaeger, Netz und Rasen legen sich in den Sand, statt ihn zu entfaerben. Ohne multiply waere dasselbe Bild bei 22 % ein schmutziger Grauschleier. */ /* --- Obsidian-Pearl-Badges der Dashboard-Kacheln --------------- Im hellen Design ist die Perle hell (Weiss nach Schiefergrau), im dunklen dunkel. Das Symbol darin laeuft ueber currentColor und wechselt damit von selbst mit — dunkel auf hell, hell auf dunkel, ohne eine einzige Farbangabe im SVG. */ --pearl-flaeche: linear-gradient(180deg, #ED6F43 0%, #B84318 100%); --pearl-kante: rgba(184,67,24,0.4); --pearl-schatten: 0 8px 20px -6px rgba(184,67,24,0.6), inset 0 1px 1px 0 rgba(255,255,255,0.4); --pearl-spiegel: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.02) 100%); --pearl-linie: #FFFFFF; --pearl-fokus: #2E0F06; --pearl-fokus-schein: drop-shadow(0 1px 2px rgba(46,15,6,0.45)); --hero-bild-deckkraft: 0.22; /* KONTRAST-SCHLEIER UEBER DEM STIMMUNGSBILD. Das Foto liegt als body::before ueber der ganzen Seite. Im hellen Design mischt es sich multiplizierend ein — unter dem Schlaeger und dem Zaun wird der Sand dadurch fast schwarz, und die dunkle Schrift darauf verschwindet. Gemessen bei 390px: der Hero-Text stand dort unter 3:1. Der Schleier hebt den Grund wieder an, ohne dem Bild seine Zeichnung zu nehmen. Er ist ein eigener Token, weil hell und dunkel verschieden viel brauchen. */ --hero-bild-mischung: multiply; --hero-bild-schleier: rgba(244,241,235,0.46); --scrim:rgba(43,34,25,0.5); --scrim-strong:rgba(43,34,25,0.6); --scrim-full:rgba(227,222,216,0.96); --scroll-thumb:rgba(120,105,88,0.35); --scroll-thumb-hover:rgba(120,105,88,0.6); } /* -------------------------------------------------------------------- PROFIL B — "SMOKED GRAPHITE & CLAY" -------------------------------------------------------------------- Mattes Schiefer-Graphit statt Schwarz: ein reines #000 lässt das Terrakotta grell wirken und macht aus jedem Rand eine harte Kante. Überschrieben wird hier nur, was sich ändert — die Signalfarben des Belags stehen bewusst nicht drin, sie gelten in beiden Themes. */ html[data-theme="graphite"]{ /* MODERN SLATE STATT TIEFSCHWARZ. Der Grund war ein neutrales Fast-Schwarz (#18191b) und die Karten lagen nur vier Prozentpunkte darueber — bei Tageslicht auf dem Telefon war die Kante zwischen Karte und Seite kaum zu sehen. Der neue Grund ist etwas dunkler UND kuehler, die Karten deutlich heller: aus vier Prozentpunkten Abstand werden neun. Kuehl ist Absicht — Terrakotta ist eine warme Farbe, und sie leuchtet vor einem blaeulichen Grund staerker als vor einem braeunlichen. */ --bg:#16181D; --surface:#21252F; --surface-1:#21252F; --surface-2:#282D39; --surface-2-hover:#333949; --surface-hover:#333949; --surface-solid:#282D39; /* Im Dunklen heben zwei ganz schwache helle Schleier den Grund an, statt ihn wie im Hellen aufzuhellen. */ --bg-sheen-1:rgba(255,255,255,0.045); --bg-sheen-2:rgba(255,255,255,0.03); --ink:#f4f4f5; --text-main:#f4f4f5; /* HELLER ALS VORHER (#a1a1aa). Auf dem dunklen Grund liegt jetzt das Stimmungsbild und hebt ihn stellenweise an — die Unterzeile im Hero lag schon vorher bei 4,11 zu 1 und waere damit auf 3,87 gefallen. Hier geht der Text nach OBEN, weil der Grund heller geworden ist; im hellen Design ist es genau andersherum. */ --ink-muted:#b8b8c2; --text-muted:#b8b8c2; --ink-faint:#71717a; --tab-idle:#a1a1aa; /* Der Belag wird nachgedunkelt, nicht umgefärbt — sonst leuchtet er im dunklen Theme wie eine Lampe aus der Karte heraus. */ --court-turf-1:#8c3b23; --court-turf-2:#74301c; --court:#8c3b23; --court-surround:#1a1716; --court-lines:rgba(255,248,240,0.85); --court-line:rgba(255,248,240,0.85); --net-edge:#e6d5c6; --court-glass:#e0a98c; --court-glass-hi:#f6e6db; --court-chip-edge:rgba(255,248,240,0.35); /* Hover ist im Dunklen HELLER als der Ruhezustand, Schrift ebenso. */ --accent-hover:#ea580c; --accent-streak:#f59e0b; --accent-badge:#f59e0b; --accent-volt:#f59e0b; --accent-volt-bright:#f59e0b; --accent-blue-soft:#fb923c; --accent-ink:#fb923c; --on-ok:#0c2a14; --on-err:#3a0d0d; --border-interactive:#7b7d86; --on-accent-hover:#1c1207; --accent-line:#52545d; --accent-tint:#33241f; --accent-tint-edge:#5a3a2c; --ball:#4ade80; --ball-ink:#04140d; --neon-ball:#fbbf24; --error:#f87171; --gold:#fbbf24; --ok-ink:#4ade80; --ok-bg:rgba(74,222,128,0.14); --ok-edge:rgba(74,222,128,0.4); --err-ink:#fca5a5; --error-bg:rgba(248,113,113,0.14); --err-edge:rgba(248,113,113,0.4); --amber-ink:#fbbf24; --amber-bg:rgba(251,191,36,0.13); --amber-edge:rgba(251,191,36,0.38); /* Kartenkanten als Weiss mit sieben Prozent statt als fester Grauton: so sitzt die Linie immer im richtigen Abstand zu der Flaeche, auf der sie liegt — auf der Karte (#21252F) genauso wie auf der helleren Eingabeflaeche. Ein fester Wert war auf der einen zu schwach und auf der anderen zu hart. --line-strong bleibt kraeftiger: daran haengen gestrichelte Umrisse, die man sehen koennen muss. */ --border-subtle:rgba(255,255,255,0.07); --line:rgba(255,255,255,0.07); --line-strong:rgba(255,255,255,0.14); --card-shadow: 0 10px 25px -5px rgba(0,0,0,0.55); --shadow: 0 18px 40px -12px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.5); --shadow-card: 0 10px 25px -5px rgba(0,0,0,0.55); --scrim:rgba(0,0,0,0.62); --scrim-strong:rgba(0,0,0,0.72); --scrim-full:rgba(24,25,27,0.96); --scroll-thumb:rgba(161,161,170,0.32); --scroll-thumb-hover:rgba(161,161,170,0.55); /* Hero-Buehne, dunkle Fassung: der Schein darf hier etwas kraeftiger sein (er liegt auf dunklem Grund statt auf Sand), der Rahmen dunkler als jede Flaeche der Seite, damit das Geraet vor und nicht im Hintergrund steht. */ --hero-glow: rgba(234,88,12,0.22); --device-bezel: #0c0a09; --device-bezel-edge: rgba(255,248,240,0.10); --device-shadow: 0 32px 60px -24px rgba(0,0,0,0.75), 0 8px 20px -8px rgba(0,0,0,0.5); --stage-card-shadow: 0 20px 40px -18px rgba(0,0,0,0.6); /* Dunkle Fassung: das Dock muss sich vom dunklen Grund abheben, deshalb ist es hier HELLER als die Seite statt dunkler — sonst verschwindet es. Die Pille bleibt gelb, sie ist die Konstante. */ /* GEMESSEN, NICHT GESCHAETZT: die Pille lag vorher bei rgba(22,24,29), also fast auf dem Wert des Seitengrunds (#16181D) — und seit das Foto dahinter liegt, ist dieser Grund stellenweise HELLER als die Pille und stellenweise gleich dunkel. Ihre Silhouette schwankte damit je nachdem, was das Bild an der Stelle gerade zeigt. Deshalb: die Flaeche eine Stufe heller als der Grund, die Kante deutlich staerker (25 % statt 15 %) und ein eigener Schatten mit einem Hauch Terrakotta — der traegt, auch wenn der Grund zufaellig dieselbe Helligkeit hat wie die Pille. */ --insel-pille: rgba(30,34,42,0.85); --insel-pille-ink: #ffffff; --insel-pille-kante: rgba(255,255,255,0.25); --insel-pille-schein: rgba(234,88,12,0.55); --insel-pille-schatten: 0 12px 32px rgba(0,0,0,0.7), 0 0 20px rgba(224,86,36,0.2); /* DAS DOCK WAR DER SCHLIMMERE FALL: #2a2522 auf dem Foto ergab 1,24 zu 1 gegen die Umgebung — es verschwand schlicht. Es war ausserdem noch warm (braeunlich), waehrend der Rest des dunklen Designs auf kuehles Schiefer umgestellt wurde; auf dem kuehlen Grund sah das Braun nicht "warm" aus, sondern schmutzig. Jetzt eine Stufe heller als die Kartenflaeche und im selben kuehlen Ton, mit klarer Kante. */ --insel-dock: #2C313D; --insel-dock-ink: #f4f6fa; --insel-dock-hover: rgba(244,246,250,0.10); --insel-dock-kante: rgba(255,255,255,0.18); --insel-schatten: 0 18px 38px -12px rgba(0,0,0,0.7), 0 4px 12px -4px rgba(0,0,0,0.5); /* Auf dunklem Grund traegt das Bild von sich aus: es IST dunkel. Deshalb hier keine Mischung, sondern schlicht mehr Deckkraft. */ /* Dunkle Perle. Der Schatten darf hier kraeftiger sein und der Glanzsteg oben deutlich schwaecher — auf Dunkel liest sich ein heller Steg sonst als Leuchtstreifen statt als Glaskante. */ --pearl-flaeche: linear-gradient(180deg, #262B36 0%, #171A21 100%); --pearl-kante: rgba(255,255,255,0.14); --pearl-schatten: 0 10px 20px -4px rgba(0,0,0,0.6), inset 0 1px 1px 0 rgba(255,255,255,0.35); --pearl-spiegel: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.02) 100%); --pearl-linie: #FFFFFF; --pearl-fokus: #E05624; --pearl-fokus-schein: drop-shadow(0 0 4px rgba(224,86,36,0.6)); --hero-bild-deckkraft: 0.24; --hero-bild-mischung: normal; --hero-bild-schleier: rgba(16,18,23,0.55); } /* ==== BEGINN TEIL B · zeichengleiche Kopie von src/tokens.css (nicht von Hand aendern) ==== */ /* ===================================================================== COURT EDITORIAL — SEMANTISCHE TOKENS ===================================================================== „Warm editorial outside, tactical intelligence inside." DIESE DATEI STEHT NACH style.css UND GEWINNT DESHALB. Sie erfindet kein zweites System: sie setzt die GRUNDTOKEN von style.css auf die neuen Werte um (dadurch zieht jede bestehende Komponente mit) und legt darueber eine SEMANTISCHE SCHICHT, mit der die neuen Komponenten gebaut sind. WARUM NICHT DIREKT IN style.css: dort stehen 8.300 Zeilen gewachsene Komponenten. Eine eigene Datei macht sichtbar, was zum neuen System gehoert und was Bestand ist — und sie laesst sich in einem Schritt zurueckziehen, falls eine Entscheidung anders faellt. DREI REGELN 1. Kein Hexwert ausserhalb dieser Datei. Komponenten nehmen Tokens. 2. Jede Farbe hat eine BEDEUTUNG, nicht eine Nummer. `--brand` ist die Hauptaktion, nicht „orange". 3. Was im Hellen eine Bedeutung hat, hat sie im Dunklen auch. Dark Mode ist kein invertiertes Light. ===================================================================== */ /* --------------------------------------------------------------------- 1 · HELL (Standard, [data-theme="sand"]) --------------------------------------------------------------------- */ :root, html[data-theme="sand"]{ /* ---- Flaechen ---------------------------------------------------- */ --ce-canvas: #EBE6DE; /* der Grund, auf dem alles liegt */ --ce-surface: #F7F4EF; /* Karte, Liste, Eingabefeld */ --ce-surface-2: #EFEAE2; /* zurueckgenommene Flaeche, Fuellung */ --ce-papier: #FFFFFF; /* Druckblatt (Trainer-Export-Vorschau) */ --ce-elevated: #FCFAF6; /* schwebt: Sheet, Menue, Popover */ --ce-line: #D5CCBF; /* Haarlinie, Trennung */ --ce-line-strong: #B9AE9F; /* Kontur eines Bedienelements */ /* ---- Schrift ------------------------------------------------------ */ --ce-ink: #211F1C; /* Titel, Fliesstext */ --ce-ink-2: #544E46; /* Erklaerung, Metazeile */ /* NACHGEDUNKELT NACH DER MESSUNG (check-kontrast.mjs, 20.09.2026). #807D75 kam auf der Kartenflaeche auf 3,91:1 und auf der Leinwand auf 3,62:1 — unter den 4,5:1, die WCAG fuer Text unter 18,66px verlangt, und genau in dieser Groesse steht dieser Ton (Meta, Eyebrow, Navigationsbeschriftung). #706D64 haelt auf beiden Gruenden: 4,92:1 und 4,55:1. Die Toenung bleibt dieselbe, nur die Helligkeit sinkt. */ --ce-ink-3: #625B51; /* Label, Zeitstempel, Deaktiviertes */ /* ---- Marke und Rollen --------------------------------------------- */ /* VORSCHAU FARBVARIANTE B „PETROL“ (02.10.2026, nicht freigegeben): Hauptaktion und Paneele in Markenpetrol statt Graphit. */ --ce-brand: #1F5C63; /* Hauptaktion, Auswahl, eigene Rolle */ --ce-brand-hover: #184D53; --ce-brand-ink: #1A6F78; /* Markenfarbe ALS SCHRIFT auf hell */ --ce-brand-tint: #E3DDD3; /* getoente Flaeche der Marke */ --ce-brand-edge: #B9AE9F; --ce-on-brand: #F7F4EF; /* Schrift auf der Markenflaeche */ --ce-petrol: #1F4F55; /* taktische Tiefe, Court, Pro */ --ce-petrol-ink: #11666D; --ce-petrol-tint: #DEE6E2; --ce-on-petrol: #EFEAE2; /* ---- Sekundaerfarben mit Bedeutung -------------------------------- */ --ce-lime: #256A42; /* Leistung, erreicht, Fortschritt */ --ce-lime-tint: #DDE7DC; --ce-blue: #235E98; /* taktische Information, Gegner */ --ce-blue-tint: #DCE4EE; --ce-clay: #A8372A; /* Warnung, Fehlerbild, Risiko */ --ce-clay-tint: #F2DDD6; /* Uebergangszone im Quiz (3 m bis Aufschlaglinie): eigener Ton, im Text "orange" genannt. Werte = Master --mx-hebel (Flaeche: Grundton von --mx-hebel-weich), Schrift dunkel genug fuer die Beschriftung auf dem Belag (3,6:1 wie --ce-clay). */ --ce-zone-uebergang: #A95310; --ce-zone-uebergang-ink: #924A0C; /* ---- Master-Court (Release 2026-09, Paket Court und Bewegung) ----- Werte aus dem Master (--mx-court-*, --mx-glas*, --mx-plan-*): das Court-Objekt ist warmes Taupe mit Glaswaenden, der Bauplan eine Linienzeichnung. Ball und Schatten tragen eigene Tokens, damit src/master/court.css keinen Hexwert braucht. */ --ce-court-deckel: #D9D0C3; --ce-court-front: #B7AA98; --ce-court-seite: #A39684; --ce-court-belag: #CBBFAE; --ce-court-linie: #FBF8F2; --ce-glas: rgba(255,255,255,0.34); --ce-glas-nah: rgba(255,255,255,0.12); --ce-glas-kante: rgba(70,60,50,0.38); --ce-plan-grund: #F4F1EA; --ce-plan-linie: #5C6670; --ce-plan-raster: rgba(92,102,112,0.12); --ce-court-ball: #F3F0E6; --ce-court-ball-rand: #1B1917; --ce-court-schatten: rgba(30,24,18,0.22); --ce-court-licht: #FFFFFF; --ce-court-licht-tief: #1B1917; --ce-court-licht-oben: 0.34; --ce-court-licht-unten: 0.1; /* Taktikboard (Master spielen.css .mx-board__*): Draufsicht als Werkzeug. Belag = Taktik 12 % auf Grund; Schlag = Master „hebel"; Ball wie im Master; Schrift auf Team B und Trainer je nach Grund. */ --ce-board-belag: #D1D7D0; --ce-board-schlag: #924A0C; --ce-board-ball: #FACC15; --ce-board-ball-rand: #5A4410; --ce-board-b-text: #FFFFFF; --ce-board-c-text: #FFFFFF; /* ---- Zustandsflaechen --------------------------------------------- */ --ce-focus-ring: #1F5FA8; --ce-scrim: rgba(33,31,28,0.42); /* ---- Schatten: genau drei ------------------------------------------ */ --ce-shadow-1: 0 1px 1px rgba(40,30,20,0.05); --ce-shadow-2: 0 1px 1px rgba(40,30,20,0.05), 0 10px 30px -16px rgba(40,30,20,0.28); --ce-shadow-3: 0 2px 4px rgba(40,30,20,0.06), 0 22px 48px -22px rgba(40,30,20,0.40); /* ================================================================= RUECKUEBERSETZUNG IN DEN BESTAND Jede bestehende Komponente liest weiter ihre alten Tokennamen — sie bekommen hier nur neue Werte. Dadurch zieht die gesamte App mit, ohne dass 8.300 Zeilen CSS angefasst werden muessen. ================================================================= */ --bg: var(--ce-canvas); --surface: var(--ce-surface); --surface-1: var(--ce-surface); /* Bedienelemente auf Karten. Hell ist das die Flaeche selbst (weiss auf warmem Sand — war schon richtig). Dunkel lagen sie mit --surface-1 TIEFER als die Karte, auf der sie stehen, und sahen aus wie Loecher. Dort zeigt der Token auf die erhobene Flaeche. */ --ce-control: var(--ce-surface); --surface-2: var(--ce-surface-2); --surface-2-hover: #E3DDD3; --surface-hover: #E3DDD3; --surface-solid: var(--ce-surface-2); --bg-sheen-1: rgba(252,250,246,0.70); --bg-sheen-2: rgba(247,244,239,0.40); --ink: var(--ce-ink); --text-main: var(--ce-ink); --ink-muted: var(--ce-ink-2); --text-muted: var(--ce-ink-2); --ink-faint: var(--ce-ink-3); --tab-idle: var(--ce-ink-2); --accent-primary: var(--ce-brand); --accent-hover: var(--ce-brand-hover); --accent-ink: var(--ce-brand-ink); --accent-tint: var(--ce-brand-tint); --accent-tint-edge: var(--ce-brand-edge); --accent-primary-soft: rgba(33,31,28,0.28); --accent-streak: var(--ce-brand); --accent-badge: var(--ce-brand); --accent-volt: var(--ce-brand); --accent-volt-bright: var(--ce-brand); --accent-blue: var(--ce-blue); --accent-blue-soft: var(--ce-blue); --accent-line: var(--ce-line-strong); --on-accent: var(--ce-on-brand); --on-accent-hover: var(--ce-on-brand); --border-interactive: var(--ce-line-strong); --border-subtle: var(--ce-line); --line: var(--ce-line); --line-strong: var(--ce-line-strong); --ok-ink: #235E3B; --ok-bg: var(--ce-lime-tint); --ok-edge: #B7CFBC; --err-ink: #8F2F24; --error-bg: var(--ce-clay-tint); --err-edge: #E2B8AF; --card-shadow: var(--ce-shadow-2); --shadow-card: var(--ce-shadow-2); --shadow: var(--ce-shadow-3); --scrim: var(--ce-scrim); --scrim-strong: rgba(33,31,28,0.55); --scrim-full: rgba(235,230,222,0.97); } /* --------------------------------------------------------------------- 2 · DUNKEL ([data-theme="graphite"]) Tiefes Petrol statt Neutralgrau: dieselbe Marke, anderes Licht. --------------------------------------------------------------------- */ html[data-theme="graphite"]{ /* FLAECHENSTUFEN, NACHGEMESSEN (Finishing-Pass, 21.09.2026). Die erste Fassung hatte Leinwand, Flaeche, zweite Flaeche und erhobene Flaeche nur 1,12 · 1,09 · 1,05 Kontrastschritte auseinander — im Dunklen sah man Karten auf dem Grund kaum, und Bedienelemente auf Karten gar nicht. Jetzt 1,19 · 1,15 · 1,13: die Leinwand etwas tiefer, die erhobene Flaeche etwas heller, der Petrolton bleibt in jeder Stufe derselbe. Keine zusaetzlichen Rahmen — die Ordnung kommt aus der Flaeche. --ce-ink-3 steigt mit (#7F908D -> #95A6A3), weil er sonst auf der erhobenen Flaeche unter 4,5:1 fiele (gemessen 4,67:1 statt 3,55:1). */ /* VORSCHAU PETROL: Flaechenstufen petrolgetoent (gleiche Abstaende). */ --ce-canvas: #172022; --ce-surface: #1E2A2C; --ce-surface-2: #253335; --ce-papier: #FFFFFF; /* Papier bleibt Papier, auch im Dunkeln */ --ce-elevated: #2C3C3E; --ce-line: #33474A; --ce-line-strong: #4A6265; --ce-ink: #EFEAE2; --ce-ink-2: #C0B8AC; --ce-ink-3: #A39B8F; /* Im Dunklen braucht die Marke mehr Licht, sonst verschluckt der Grund sie. Derselbe Farbton, hoehere Helligkeit. */ --ce-brand: #EFEAE2; --ce-brand-hover: #FBF8F3; --ce-brand-ink: #5CC6CC; --ce-brand-tint: #2C3C3E; --ce-brand-edge: #544E46; --ce-on-brand: #1B1917; --ce-petrol: #1E2A2C; --ce-petrol-ink: #5CC6CC; --ce-petrol-tint: #1F2A29; --ce-on-petrol: #EFEAE2; --ce-lime: #6CC692; --ce-lime-tint: #22302A; --ce-blue: #7CB9EC; --ce-blue-tint: #1F2A36; --ce-clay: #F27B67; --ce-clay-tint: #3A2420; --ce-zone-uebergang: #F09A52; --ce-zone-uebergang-ink: #F09A52; /* Master-Court, dunkel (Werte aus dem Master-Dunkelmodus) */ --ce-court-deckel: #36322D; --ce-court-front: #282521; --ce-court-seite: #211F1B; --ce-court-belag: #48423B; --ce-court-linie: #D8D0C4; --ce-glas: rgba(255,255,255,0.07); --ce-glas-nah: rgba(255,255,255,0.035); --ce-glas-kante: rgba(255,245,230,0.26); --ce-plan-grund: #1F1D1A; --ce-plan-linie: #AAB4BD; --ce-plan-raster: rgba(170,180,189,0.1); --ce-court-ball: #F3F0E6; --ce-court-ball-rand: #1B1917; --ce-court-schatten: rgba(0,0,0,0.45); --ce-court-licht: #FFFFFF; --ce-court-licht-tief: #000000; --ce-court-licht-oben: 0.1; --ce-court-licht-unten: 0.3; --ce-board-belag: #2F403F; --ce-board-schlag: #F09A52; --ce-board-ball: #FACC15; --ce-board-ball-rand: #5A4410; --ce-board-b-text: #1B1917; --ce-board-c-text: #1B1917; --ce-focus-ring: #8CC4F2; --ce-scrim: rgba(0,0,0,0.62); --ce-shadow-1: 0 1px 1px rgba(0,0,0,0.30); --ce-shadow-2: 0 1px 1px rgba(0,0,0,0.30), 0 10px 30px -16px rgba(0,0,0,0.70); --ce-shadow-3: 0 2px 4px rgba(0,0,0,0.30), 0 22px 48px -22px rgba(0,0,0,0.80); --surface-2-hover: #36322D; --surface-hover: #36322D; --bg-sheen-1: rgba(37,35,32,0.55); --bg-sheen-2: rgba(37,35,32,0.35); --accent-primary-soft: rgba(239,234,226,0.28); --ok-ink: #6CC692; --ok-bg: var(--ce-lime-tint); --ok-edge: #2F4A3A; --err-ink: #F27B67; --error-bg: var(--ce-clay-tint); --err-edge: #5A302A; --scrim-full: rgba(27,25,23,0.97); /* ================================================================= RUECKUEBERSETZUNG — auch hier, und zwar VOLLSTAENDIG. style.css bringt einen eigenen graphite-Block mit; sein Selektor `html[data-theme="graphite"]` ist spezifischer als `:root`. Die Zuordnungen aus dem hellen Block greifen hier deshalb NICHT automatisch — sie muessen wiederholt werden, sonst bleibt das dunkle Theme auf den alten Werten stehen (gemessen: der Grund war weiter neutralgrau statt Petrol). ================================================================= */ --bg: var(--ce-canvas); --surface: var(--ce-surface); --surface-1: var(--ce-surface); --ce-control: var(--ce-elevated); --surface-2: var(--ce-surface-2); --surface-solid: var(--ce-surface-2); --ink: var(--ce-ink); --text-main: var(--ce-ink); --ink-muted: var(--ce-ink-2); --text-muted: var(--ce-ink-2); --ink-faint: var(--ce-ink-3); --tab-idle: var(--ce-ink-2); --accent-primary: var(--ce-brand); --accent-hover: var(--ce-brand-hover); --accent-ink: var(--ce-brand-ink); --accent-tint: var(--ce-brand-tint); --accent-tint-edge: var(--ce-brand-edge); --accent-streak: var(--ce-brand); --accent-badge: var(--ce-brand); --accent-volt: var(--ce-brand); --accent-volt-bright: var(--ce-brand); --accent-blue: var(--ce-blue); --accent-blue-soft: var(--ce-blue); --accent-line: var(--ce-line-strong); --on-accent: var(--ce-on-brand); --on-accent-hover: var(--ce-on-brand); --border-interactive: var(--ce-line-strong); --border-subtle: var(--ce-line); --line: var(--ce-line); --line-strong: var(--ce-line-strong); --card-shadow: var(--ce-shadow-2); --shadow-card: var(--ce-shadow-2); --shadow: var(--ce-shadow-3); --scrim: var(--ce-scrim); --scrim-strong: rgba(0,0,0,0.72); } /* --------------------------------------------------------------------- 3 · SYSTEMEINSTELLUNG Steht das Attribut auf "system" (oder fehlt es ganz), entscheidet das Betriebssystem. Das Kopfskript in app.html loest "system" schon vor dem ersten Bild auf; diese Regel ist der Fallback fuer den Fall, dass kein Skript laeuft. --------------------------------------------------------------------- */ @media (prefers-color-scheme: dark){ html[data-theme="system"]{ --ce-canvas: #172022; --ce-surface: #1E2A2C; --ce-surface-2: #253335; --ce-elevated: #2C3C3E; --ce-line: #33474A; --ce-line-strong: #4A6265; --ce-ink: #EFEAE2; --ce-ink-2: #C0B8AC; --ce-ink-3: #A39B8F; --ce-brand: #EFEAE2; --ce-brand-hover: #FBF8F3; --ce-brand-ink: #5CC6CC; --ce-brand-tint: #2C3C3E; --ce-brand-edge: #544E46; --ce-on-brand: #1B1917; --ce-petrol: #1E2A2C; --ce-petrol-ink: #5CC6CC; --ce-petrol-tint: #1F2A29; --ce-lime: #6CC692; --ce-lime-tint: #22302A; --ce-blue: #7CB9EC; --ce-blue-tint: #1F2A36; --ce-clay: #F27B67; --ce-clay-tint: #3A2420; --ce-zone-uebergang: #F09A52; --ce-zone-uebergang-ink: #F09A52; --ce-court-deckel: #36322D; --ce-court-front: #282521; --ce-court-seite: #211F1B; --ce-court-belag: #48423B; --ce-court-linie: #D8D0C4; --ce-glas: rgba(255,255,255,0.07); --ce-glas-nah: rgba(255,255,255,0.035); --ce-glas-kante: rgba(255,245,230,0.26); --ce-plan-grund: #1F1D1A; --ce-plan-linie: #AAB4BD; --ce-plan-raster: rgba(170,180,189,0.1); --ce-court-schatten: rgba(0,0,0,0.45); --ce-court-licht-tief: #000000; --ce-court-licht-oben: 0.1; --ce-court-licht-unten: 0.3; --ce-board-belag: #2F403F; --ce-board-schlag: #F09A52; --ce-board-b-text: #1B1917; --ce-board-c-text: #1B1917; --ce-focus-ring: #8CC4F2; --ce-scrim: rgba(0,0,0,0.62); --surface-2-hover: #36322D; --surface-hover: #36322D; --scrim-full: rgba(27,25,23,0.97); --ok-ink:#6CC692; --ok-edge:#2F4A3A; --err-ink:#F27B67; --err-edge:#5A302A; --bg: var(--ce-canvas); --surface: var(--ce-surface); --surface-1: var(--ce-surface); --ce-control: var(--ce-elevated); --surface-2: var(--ce-surface-2); --surface-solid: var(--ce-surface-2); --ink: var(--ce-ink); --text-main: var(--ce-ink); --ink-muted: var(--ce-ink-2); --text-muted: var(--ce-ink-2); --ink-faint: var(--ce-ink-3); --tab-idle: var(--ce-ink-2); --accent-primary: var(--ce-brand); --accent-hover: var(--ce-brand-hover); --accent-ink: var(--ce-brand-ink); --accent-tint: var(--ce-brand-tint); --accent-tint-edge: var(--ce-brand-edge); --on-accent: var(--ce-on-brand); --line: var(--ce-line); --line-strong: var(--ce-line-strong); --border-subtle: var(--ce-line); --border-interactive: var(--ce-line-strong); } } /* --------------------------------------------------------------------- 4 · TYPOGRAFIE — acht Stufen, nicht fuenfundsechzig --------------------------------------------------------------------- */ :root{ /* MASTER-SCHRIFTEN (Release 2026-09, Richtung B des Master-Labs): Instrument Sans halbschmal fuer Anzeige und Kennzahlen, Geist fuer Bedienung und Text, Geist Mono fuer Instrument-Beschriftungen. */ --ce-font-display: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --ce-font-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ce-font-text: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ce-font-num: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Anzeige, h1 und h2 wie im Master: Instrument Sans 600, halbschmal (semi-condensed = 87,5 %, Master: wdth 88). h3 bleibt Bedienschrift. */ --ce-display: 600 semi-condensed clamp(30px, 8vw, 44px)/1.04 var(--ce-font-display); --ce-h1: 600 semi-condensed clamp(24px, 6vw, 30px)/1.12 var(--ce-font-display); --ce-h2: 600 semi-condensed 20px/1.2 var(--ce-font-display); --ce-h3: 650 16px/1.3 var(--ce-font-ui); --ce-body: 400 15px/1.55 var(--ce-font-text); --ce-body-sm: 400 13.5px/1.5 var(--ce-font-text); --ce-label: 600 12px/1.25 var(--ce-font-ui); --ce-caption: 400 12px/1.4 var(--ce-font-text); /* ---- Raster: eine 4-px-Basis ------------------------------------- */ --ce-1: 4px; --ce-2: 8px; --ce-3: 12px; --ce-4: 16px; --ce-5: 20px; --ce-6: 24px; --ce-8: 32px; --ce-10: 40px; --ce-12: 48px; /* ---- Diagramm-Court auf dem Instrument-Paneel (Paket Seiten) ------ Die flachen Court-Diagramme ausserhalb der App (Startseite: Live- Situation; vorgerenderte Coaching-, Quiz- und Prinzipien-Seiten) stehen im Master-Stil auf einem DUNKLEN Paneel — in beiden Farbprofilen, wie die Instrument-Paneele des Masters (Analyse, Raetsel-Karte). Werte = Master-Court im Dunkelmodus (--ce-court-* graphite), Ball und „DU" in Padelball-Gelb, Wege in Taktik-Cyan. Deshalb hier und nicht je Farbprofil: sie wechseln nicht. */ --ce-diagramm-grund: #282521; /* Rand um den Belag */ --ce-diagramm-belag: #48423B; --ce-diagramm-belag-2:#3F3A34; /* Verlauf zum Rand */ --ce-diagramm-linie: #D8D0C4; --ce-diagramm-netz: #EFEAE2; --ce-diagramm-glas: #A39B8F; --ce-diagramm-figur: #131210; /* Gegner-Marke, Chips */ --ce-diagramm-schrift:#EFEAE2; --ce-diagramm-weg: #5CC6CC; --ce-diagramm-ball: #FACC15; --ce-diagramm-gut: #6CC692; /* Staerke/richtig auf dem Paneel */ --ce-diagramm-fehler: #F27B67; /* Huerde/falsch auf dem Paneel */ --ce-diagramm-uebergang: #F09A52; /* Uebergangszone ("orange") */ /* ---- Radien: vier Werte ------------------------------------------ */ --ce-r-sm: 8px; --ce-r-md: 12px; /* Master --mx-r-m */ --ce-r-lg: 18px; /* Master --mx-r-l */ --ce-r-pill: 999px; /* ---- Inhaltsbreiten ----------------------------------------------- */ --ce-read: 62ch; /* Fliesstext */ --ce-col: 720px; /* eine Spalte auf grossen Schirmen */ --ce-wide: 1160px; /* zwei Spalten */ /* ---- Bewegung ------------------------------------------------------ */ --ce-t-fast: 140ms; --ce-t-base: 220ms; --ce-ease: cubic-bezier(.2,.7,.3,1); /* MASTER-BEWEGUNG (Paket „Court und Bewegung"): dieselben drei Dauern und dieselbe Kurve wie der Master (--mx-kurz/mittel/lang, --mx-kurve). kurz = Hover/Druck, mittel = Einblenden, Farbwechsel, Blaetter, lang = der gleitende Navigationszeiger. Gestaffelte Einblendungen ruecken je Schritt um --ce-t-staffel weiter. */ --ce-t-kurz: 160ms; --ce-t-mittel: 260ms; --ce-t-lang: 560ms; --ce-t-staffel: 40ms; --ce-kurve: cubic-bezier(.2,.7,.2,1); } /* Wer Bewegung abbestellt hat, bekommt sofortige Zustaende: alle Dauern auf null. Die Einblend-Regeln in redesign.css (Abschnitt 17) schalten ihre Animationen zusaetzlich ausdruecklich ab. */ @media (prefers-reduced-motion: reduce){ :root{ --ce-t-fast: 0ms; --ce-t-base: 0ms; --ce-t-kurz: 0ms; --ce-t-mittel: 0ms; --ce-t-lang: 0ms; --ce-t-staffel: 0ms; } } /* ==== ENDE TEIL B ==== */