/* ============================================================ Typical Web – Design-Token, gespiegelt aus DesignLab/tokens.css ============================================================ **Die Werte stehen hier zum zweiten Mal – und nur deshalb, weil `Web/` allein ausgeliefert wird.** Ein `@import` auf `../DesignLab/tokens.css` bräche, sobald dieser Ordner ohne das übrige Repo auf einem Webspace liegt, und genau das ist sein Zweck. Damit die zweite Fassung nicht auseinanderläuft, vergleicht `DevTools/check-web.py` jede Variable Zeile für Zeile mit dem Original. Wer hier einen Wert ändert, ändert ihn dort und in `Typical/Theme/Theme.swift` mit – sonst wird der Prüflauf rot. Hell/Dunkel folgt derselben Bauweise wie in der App: **eine** Fassung je Design, und `haupt.js` entscheidet über die Klasse `hell` am `` – so wie `Theme.istHell` das `AppSettings` fragt. Ein zweiter heller Block hinter einer Medienabfrage wäre der Ort, an dem die Farben beim nächsten Mal auseinandergehen. ============================================================ */ /* Dunkles Design (Standard: Neon Night) */ :root, .dunkel { /* Theme.ground / groundLift */ --ground: #0b0a13; --ground-lift: #141122; /* Akzente */ --pink: #ff3e7e; /* Theme.pink – in beiden Designs gleich */ --cyan: #35ddd3; /* Theme.cyan (dunkel) */ --violet: #966fff; /* Theme.violet (dunkel) */ --amber: #ffb44d; /* Theme.amber (dunkel) */ --gut: var(--cyan); /* Theme.gut = cyan */ /* Schrift auf dem Grund */ --ink: #f6f3fe; --ink-soft: #b4adc9; --ink-faint: #7c7592; /* Theme.veil – Weiß im Dunkeln */ --veil-basis: 255, 255, 255; /* Theme.trefferVerlauf – abgedunkelt(0.85) für 4,5:1 auf Weiß */ --treffer-a: #d9356b; --treffer-b: #7f5ed9; /* Theme.playerColors (dunkel) */ --spieler-1: #ff1958; /* Rot */ --spieler-2: #ff9319; /* Orange */ --spieler-3: #fff219; /* Gelb */ --spieler-4: #19ff7e; /* Grün */ --spieler-5: #19feff; /* Petrol */ --spieler-6: #19afff; /* Blau */ --spieler-7: #6819ff; /* Violett */ --spieler-8: #ff19f5; /* Magenta */ --spieler-9: #a8113a; /* Rot, tief */ --spieler-10: #a86111; /* Orange, tief */ --spieler-11: #a89f11; /* Gelb, tief */ --spieler-12: #11a853; /* Grün, tief */ --spieler-13: #11a8a8; /* Petrol, tief */ --spieler-14: #1173a8; /* Blau, tief */ --spieler-15: #4511a8; /* Violett, tief */ --spieler-16: #a811a2; /* Magenta, tief */ } /* Helles Design */ .hell { --ground: #f2f1f8; --ground-lift: #fbfaff; --pink: #ff3e7e; --cyan: #009690; /* mehr Tiefe, sonst auf Weiß unlesbar */ --violet: #6f45dd; --amber: #cd7e00; --ink: #1a1628; --ink-soft: #56516b; --ink-faint: #8b86a0; --veil-basis: 0, 0, 0; /* Theme.veil – Schwarz im Hellen */ --treffer-a: #d9356b; --treffer-b: #7f5ed9; --spieler-1: #e00446; --spieler-2: #ab5d03; --spieler-3: #7a7302; --spieler-4: #03823c; --spieler-5: #037e7f; --spieler-6: #0478b2; --spieler-7: #6005ff; --spieler-8: #c904c0; --spieler-9: #94032e; --spieler-10: #713e02; --spieler-11: #514c02; --spieler-12: #025628; --spieler-13: #025354; --spieler-14: #024f76; --spieler-15: #3f03a8; --spieler-16: #85037f; } /* Theme.Radius – 12 / 16 / 22 / 26 */ :root { --radius-small: 12px; /* Chips, Marken */ --radius-medium: 16px; /* Zeilen, Felder, Knöpfe */ --radius-large: 22px; /* Karten */ --radius-hero: 26px; /* Hauptkarte eines Bildschirms */ /* Theme.neonViolett – in beiden Designs derselbe Ton, heute nur das rechte Ende der gefüllten Pille „Neue Runde" auf dem Start-Reiter. */ --neon-violett: #966fff; /* Theme.Space – 2 / 6 / 10 / 14 / 18 / 24, Seitenrand 20 */ --space-hairline: 2px; --space-tight: 6px; --space-small: 10px; --space-medium: 14px; --space-large: 18px; --space-section: 24px; --space-screen: 20px; } /* Schriftstufen – Roboto Slab für Großes, System für Kleinteiliges */ @font-face { font-family: "Roboto Slab"; src: url("fonts/RobotoSlab-400.ttf"); font-weight: 400; font-display: swap; } @font-face { font-family: "Roboto Slab"; src: url("fonts/RobotoSlab-700.ttf"); font-weight: 700; font-display: swap; } @font-face { font-family: "Roboto Slab"; src: url("fonts/RobotoSlab-800.ttf"); font-weight: 800; font-display: swap; } :root { --slab: "Roboto Slab", serif; --system: -apple-system, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif; /* Theme.display / title / headline / rowTitle (Slab) */ --font-display: 800 32px var(--slab); --font-title: 700 21px var(--slab); --font-headline: 700 17px var(--slab); --font-rowtitle: 700 15px var(--slab); /* Theme.label / body / support / micro (System) */ --font-label: 600 15px var(--system); --font-body: 400 15px var(--system); --font-support: 400 13px var(--system); --font-micro: 500 11px var(--system); } /* ============================================================ Zweite Staffel – die Töne, die bisher nur in Theme.swift standen ============================================================ `--ground` allein trägt keinen Bildschirm: Der Grund der App ist ein Verlauf (Theme.grundVerlauf), Kacheln haben eine eigene Fläche (Theme.kachelVerlauf) und Kanten sind violett getönt (Theme.Kante). Diese Werte standen bis zum 21.08.2026 nur im Swift-Quelltext; damit die Web-App dieselben Flächen bauen kann wie die App, stehen sie jetzt auch hier – und in beiden Fassungen dieser Datei gleich. ============================================================ */ :root, .dunkel { /* Theme.grundVerlauf (dunkel) – Pflaume oben, Petrol unten */ --grund-1: #2e0e25; --grund-2: #1d0c29; --grund-3: #0e1328; --grund-4: #081d1d; /* Theme.kachelVerlauf (dunkel) */ --kachel-oben: #241a33; --kachel-unten: #160f23; /* Theme.kachelFlanke – der harte Schatten unter der Kachel */ --kachel-flanke: #0b0713; /* Theme.siegfeldVerlauf – die Kachel, die eine Linie schließen würde */ --siegfeld-oben: #13413f; --siegfeld-unten: #0b2529; /* Theme.kartenGrund – im Dunkeln hat eine Karte bewusst keine Fläche */ --karten-grund: transparent; /* Theme.schwebeGrund – Grund einer Einblendung über dem Inhalt */ --schwebe-grund: #1c0e25; /* Theme.Kante – violett getönt, drei Stufen */ --kante-fein: color-mix(in srgb, var(--violet) 26%, transparent); --kante-klar: color-mix(in srgb, var(--violet) 42%, transparent); --kante-stark: color-mix(in srgb, var(--violet) 62%, transparent); } .hell { --grund-1: #e0cbdd; --grund-2: #dacbe5; --grund-3: #ced7e5; --grund-4: #c8e0da; --kachel-oben: #ffffff; --kachel-unten: #f2eff7; --kachel-flanke: #b4aac8; --siegfeld-oben: #e0f8f6; --siegfeld-unten: #cdf0ee; --karten-grund: rgba(255, 255, 255, 0.82); --schwebe-grund: #faf6fd; --kante-fein: color-mix(in srgb, var(--violet) 20%, transparent); --kante-klar: color-mix(in srgb, var(--violet) 32%, transparent); --kante-stark: color-mix(in srgb, var(--violet) 45%, transparent); /* Theme.startVerlauf (hell) – der Grund des Start-Reiters, fast weiß statt Flieder → Mint: Dort steht keine weiße Karte, siehe DESIGN.md. */ --start-hell-1: #fdf1f6; --start-hell-2: #f5effd; --start-hell-3: #eff3fc; --start-hell-4: #ecf7f5; }