/* Grundlagen. Besitzer: UI Designer. Kaskadenposition 1 von 6 (grund vor bausteine vor buehne vor einfuehrung vor rueckmeldung vor bewegung — Reihenfolge ist Vertrag, siehe stoerungsannahme.html und stil-schnitt.test.js). Tokens, Reset, Typo-Skala, Ebenen, Rollenmechanik. Von hier duerfen alle sechs Dateien lesen; neue Klassen nur mit den bestehenden, unpraefigierten deutschen Namen (Spec §5.2). */ /* Stoerungsannahme. Die Gestaltungswerte sind zeichengleich aus index.html uebernommen — dieselben Namen, dieselben Zahlen. Wer dort etwas aendert, muss es hier nachziehen; ein Spiel in leicht anderem Grau faellt sofort als Fremdkoerper auf. */ :root{ --bg:#0A0B0D; --surface:#111318; --surface-2:#171A20; --surface-3:#1E222A; --line:rgba(255,255,255,.055); --line-2:rgba(255,255,255,.085); --line-3:rgba(255,255,255,.14); --edge:inset 0 1px 0 rgba(255,255,255,.07); --sh-1:0 1px 2px rgba(0,0,0,.45); --sh-2:0 2px 4px rgba(0,0,0,.4),0 14px 30px -16px rgba(0,0,0,.7); --text:#F4F5F7; --text-2:#A3A9B4; --text-3:#79808D; --accent:#FF6B2C; --accent-2:#FF8A4C; --accent-ink:#190800; --ok:#3ED598; --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --ui:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:ui-monospace,'SF Mono','JetBrains Mono','Cascadia Mono',Consolas,monospace; --ease-ui:cubic-bezier(.2,.7,.3,1); --t-hover:200ms; --r:14px; --r-s:10px; --r-btn:9px; /* Nur hier neu: die beiden Rollenfarben. Kalt fuer das Handbuch, warm fuer das Geraet — die Trennung soll man sehen, bevor man sie liest. */ --handbuch:#7FA8FF; --geraet:#D8B23C; /* Fehler-/Negativfarbe: taucht spaeter mehrfach als derselbe Wert auf (Bewertung falsch, Zeile "aufgelegt", Warnkennzahl) — hier einmal benannt, damit sie nicht an vier Stellen als Literal auseinanderlaeuft. */ --schlecht:#E8799B; /* --- Ergaenzung 2026-08-02, Spec §2 -------------------------------- Die bestehenden Werte oben bleiben zeichengleich. Was hier dazukommt, ist der eingefrorene Vertrag zwischen UI Designer, Frontend Developer und Whimsy Injector: drei Leute arbeiten parallel, und diese Namen sind die einzige Stelle, an der sie sich treffen. */ /* Fehlender Radius. Wurde bisher zweimal als var(--r-xs,6px) benutzt, ohne je definiert zu sein. */ --r-xs:6px; /* Typo-Skala. Die Display-Schrift Archivo laedt auf dieser Seite NIE (Spec §0.1: gemessen, faellt auf system-ui zurueck), und externe Fonts sind ausgeschlossen. Die Hierarchie kommt deshalb aus Gewicht, Laufweite und Grad — und aus --mono als eigener Stimme fuer alles, was dem Handbuch gehoert. */ --tx-2xs:.69rem; --tx-xs:.78rem; --tx-s:.88rem; --tx-m:1rem; --tx-l:1.15rem; --tx-xl:clamp(1.3rem,2.4vw,1.6rem); --tx-2xl:clamp(1.6rem,4vw,2.3rem); --tx-uhr:clamp(1.5rem,3vw,2rem); /* Erweiterung, benannter Grund: .codekasten/.code sind absichtlich NICHT Teil der Lesefluss-Skala oben — sie werden von zwei Personen gleichzeitig vom Bildschirm abgelesen (Raum-Code diktieren), nicht in Ruhe gelesen, und sollen deshalb NICHT mit vw mitskalieren wie --tx-xl/2xl. Eigene, fixe Tokens statt Literale, damit "kein font-size ausser --tx-*" auch hier ohne Bedeutungsverlust stimmt. */ --tx-kasten:2.4rem; --tx-code:1.6rem; /* Ebenen mit Bedeutung, nicht mit Geschmack (Spec §2.3): 0 versenkt = hier tust du etwas · 1 liegend = das liegt hier 2 gehoben = deins, jetzt */ --eben-1:none; --eben-2:var(--edge),var(--sh-2); /* Zeiten und Kurven. Stehen hier (Besitzer: UI Designer), werden aber fast nur in bewegung.css benutzt (Besitzer: Whimsy Injector) — die engste Kopplung im Projekt, deshalb vorab festgelegt statt unterwegs erfunden. --t-hover:200ms und --ease-ui existieren schon oben. */ --t-schnell:120ms; --t-ruhig:420ms; --t-szene:700ms; --ease-rein:cubic-bezier(.16,.84,.44,1); --ease-aus:cubic-bezier(.5,0,.75,0); /* Flaechen, auf denen die beiden Welten liegen (Spec §2.1). */ --papier:#0D0F13; --metall:#14140F; } /* --- Rollenmechanik --------------------------------------------------- Der Keystone des visuellen Systems. Ohne ihn sind die beiden Welten zwei Aufkleber; mit ihm wird jede Komponente warm oder kalt, ohne zweimal geschrieben zu werden. leiste.js setzt data-rolle aus S.ROLLE. color-mix braucht keinen Build-Schritt. Faellt es in einem alten Schulbrowser aus, wird die Deklaration verworfen und der Erbwert bleibt stehen — deshalb sind die Erbwerte so gewaehlt, dass der Ausfall den heutigen grauen Zustand ergibt und nie eine unlesbare Kombination. */ #spiel{ --rolle:var(--text-2); --rolle-flaeche:var(--surface); --rolle-kante:var(--line-2); --rolle-schimmer:transparent; --rolle-grund:var(--bg); } #spiel[data-rolle="anrufer"]{ --rolle:var(--geraet); --rolle-flaeche:color-mix(in srgb,var(--geraet) 7%,var(--surface)); --rolle-kante:color-mix(in srgb,var(--geraet) 26%,var(--line-3)); --rolle-schimmer:color-mix(in srgb,var(--geraet) 14%,transparent); --rolle-grund:var(--metall); } #spiel[data-rolle="support"]{ --rolle:var(--handbuch); --rolle-flaeche:color-mix(in srgb,var(--handbuch) 7%,var(--surface)); --rolle-kante:color-mix(in srgb,var(--handbuch) 26%,var(--line-3)); --rolle-schimmer:color-mix(in srgb,var(--handbuch) 14%,transparent); --rolle-grund:var(--papier); } *,*::before,*::after{box-sizing:border-box;} [hidden]{display:none!important;} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui); font-size:var(--tx-m);line-height:1.55;font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;} h1,h2,h3{font-family:var(--display);margin:0;font-stretch:106%; letter-spacing:-.035em;line-height:1.02;} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;} /* Der Code ist das, was am Telefon durchgegeben wird — er darf nicht klein und nicht eng sein. Weite Sperrung, damit man ihn buchstabieren kann. */ .codekasten{font-family:var(--mono);font-size:var(--tx-kasten);letter-spacing:.34em; text-align:center;padding:.9rem 0 .9rem .34em;background:#08090C; border-radius:var(--r-s);box-shadow:inset 0 1px 2px rgba(0,0,0,.55); color:var(--accent-2);margin:1.2rem 0;} .code{font-family:var(--mono);font-size:var(--tx-code);letter-spacing:.3em;text-align:center; text-transform:uppercase;}