/** * CAT-Trainer — Anwendungsschicht ueber Werkbund Deco. * * Diese Datei ist die EINZIGE Stelle, an der der Trainer vom Designsystem abweicht. * `tokens.css` und `werkbund.css` daneben sind byte-identische Kopien aus * `packages/design-tokens` der Suite und werden NIE von Hand angefasst — ein * Waechter vergleicht sie bytewise (tests/drift/design-tokens.test.ts). * * Es gibt hier genau zwei Aufgaben: * 1. Die Schriftnamen auf den npm-Konsumweg korrigieren. * 2. Die beiden Modi als Semantik-Overlay definieren. * * ══ 1. SCHRIFTNAMEN ══════════════════════════════════════════════════════════════════ * * `tokens.css` fuehrt `'Public Sans'` und `'IBM Plex Sans'`. Das ist richtig fuer den * statischen Konsumweg (woff2 neben dem CSS, `fonts.css`). Der Trainer geht den * npm-Weg — und die Pakete registrieren ANDERE Familiennamen. Aus der Quelle gelesen, * nicht aus dem Paketnamen abgeleitet (ES-SUITE-131): * * node_modules/@fontsource-variable/public-sans/index.css 'Public Sans Variable' * node_modules/@fontsource-variable/ibm-plex-sans/index.css 'IBM Plex Sans Variable' * node_modules/@fontsource/ibm-plex-mono/index.css 'IBM Plex Mono' * * Zwei von drei Namen traefen sich nie. Genau das ist ProAudit passiert: jede * Ueberschrift und jede Zeile Fliesstext lief in Helvetica/Arial, der Commit meldete * "Schriftkanon gelandet", und der Waechter blieb gruen — weil er das VORKOMMEN des * Namens prueft, nicht seine WIRKSAMKEIT. * * Beide Namen stehen deshalb nebeneinander. Damit kann diese Zeile nicht dadurch * falsch werden, dass jemand den Konsumweg wechselt (§ 56 — by-construction statt * by-convention). * * ══ 2. DIE BEIDEN MODI ═══════════════════════════════════════════════════════════════ * * Spezifikation Kap. 8.1 nennt sie "Register". Der Goldstandard nennt "Register" etwas * anderes (die Tonalitaetsachse BRAND/PRODUKT, DESIGN.md § 1). Zwei Achsen, ein Wort. * Aufloesung, die im ganzen Projekt gilt: * * Goldstandard-Register: durchgehend PRODUKT. Es gibt keine BRAND-Flaeche. * Spezifikations-Achse: heisst ab hier MODUS. * * Das Attribut heisst weiter `data-register`, weil die Spezifikation es so schreibt — * benannt wird es als Modus. * * :root Werkstatt (Lernen, Ergebnis, Fortschritt) * [data-register="exam"] Pruefstand (Briefing, Instruktion, Testrunner) * * Der Pruefstand ueberschreibt AUSSCHLIESSLICH semantische Token, nie Primitive. * * ── Drei harte Regeln, die hier real Schaden angerichtet haben (ES-SUITE-132) ──────── * * (a) KEIN Token ist eine CSS-Kurzform. Nicht `--linie: 1px solid #ccc`, sondern * drei Token, am Verwendungsort zusammengesetzt. Eine Namenskollision mit * Typwechsel loeschte in ProAudit 29 Regeln lautlos: kein Build-Fehler, keine * Konsolenmeldung, kein Test. * (b) Ein Token behaelt seinen TYP ueber beide Modi. Farbe bleibt Farbe, Zahl Zahl. * (c) Alpha-Varianten sind EIGENE Token, nie ein Alpha-Anhang an einen Farbtoken. */ /* ═══ Werkstatt — der Grundzustand ══════════════════════════════════════════════════ */ :root { /* Schriftnamen fuer den npm-Konsumweg (siehe Kopf). */ --font-display: "Public Sans Variable", "Public Sans", Helvetica, Arial, sans-serif; --font-body: "IBM Plex Sans Variable", "IBM Plex Sans", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* ── Zeitanzeige ────────────────────────────────────────────────────────────────── Drei Zustaende, drei Token. Die Schwellen selbst (25 % / 10 %) liegen im Code, nicht im CSS — sie sind Fachregel (Spezifikation 6.3), nicht Gestaltung. Flaeche und Text sind GETRENNTE Token. Das verbotene Muster waere ein getoenter Grund mit gleichfarbigem Text (rgba(R,G,B,.1) + color rgb(R,G,B)) — der ergibt rechnerisch nie AA und ist als Anti-Pattern ausdruecklich untersagt. */ --zeit-ruhig-text: var(--text-primary); --zeit-warnung-text: #7D5A0C; /* 5,76:1 auf --surface-page, gemessen */ --zeit-warnung-flaeche: #F6EFDD; --zeit-alarm-text: #9B2C1F; /* 5,94:1 auf --surface-page, gemessen */ --zeit-alarm-flaeche: #F8E7E3; /* ── Auswertung ─────────────────────────────────────────────────────────────────── Bewusst NICHT rot/gruen allein: Farbe traegt die Aussage nie (WCAG 1.4.1). Richtig/falsch tragen zusaetzlich ein Zeichen und eine Beschriftung. */ --bewertung-richtig-text: var(--status-erfuellt); --bewertung-falsch-text: var(--status-offen); --bewertung-unbearbeitet-text: var(--text-muted); /* ── Linien: drei Token statt einer Kurzform (Regel a) ────────────────────────────── */ --linie-breite: 1px; --linie-stil: solid; --linie-farbe: var(--border-hairline); /** * Zielkorridor im Kategorienprofil und im Verlauf — eine Flaeche, kein Rand. * * ABGELEITET, nicht abgeschrieben. Bis M6 stand hier `rgba(46, 93, 138, …)` — * das ist ziffernweise `--steel-500` (#2E5D8A, tokens.css:44), nur eben als Kopie. * Wer den Stahlton je verschoebe, verschoebe den Korridor nicht mit, und niemand * faende den Grund. Die Regel dagegen steht oben unter (c): im Code steht die * Rolle, nie der Wert. * * Der Bezug ist `--accent`, nicht `--steel-500`: Im Pruefstand zieht das Overlay * `--accent` auf `var(--text-secondary)`. Damit entfaerbt sich das Korridorband im * Testmodus VON SELBST, ohne Sonderfall — genau das, was die Saettigungsgrenze * 0,15 dort verlangt. Wer die Rolle benutzt statt des Werts, bekommt die * Entfaerbung geschenkt. */ --korridor-flaeche: color-mix(in srgb, var(--accent) 12%, transparent); --korridor-linie: color-mix(in srgb, var(--accent) 42%, transparent); /** * Der Balken des Abdeckungsgrades — bewusst NEUTRAL aus `--text-primary`. * * Nicht aus `--accent`: Der blaue Ton ist auf der Fortschrittsseite bereits mit * „Zielkorridor" belegt, und zwei Bedeutungen fuer denselben Ton auf einer Seite * waeren eine zweite Wahrheit. Abdeckung ist ausserdem kein Urteil — „12 von 63 * gesehen" lobt nicht und mahnt nicht, es zaehlt. */ --abdeckung-balken: color-mix(in srgb, var(--text-primary) 20%, transparent); /** * Flaechen zu den drei Bewertungsmarken. * * Die `--bewertung-*-text`-Marken sind fuer TEXT gemessen. Sie als Balkenfuellung zu * nehmen waere ein Kontrastfehler mit gutem Gewissen: Ein als Text geprueftes * Verhaeltnis sagt fuer den Fall „Flaeche mit Text darauf" nichts. */ --bewertung-richtig-flaeche: #DCE9DC; --bewertung-falsch-flaeche: #F3DEDA; --bewertung-unbearbeitet-flaeche: #E8E8E6; /* Die Achse und das Gitter des Profils. Neutral — das Profil ist kein Kunstwerk. */ --profil-achse: var(--border-strong); --profil-gitter: var(--border-hairline); --profil-balken-hoehe: 1.05rem; } /* ═══ Pruefstand — reduziert bis zur Haerte ═════════════════════════════════════════ * * Spezifikation 8.1: "Der Bildschirm zeigt genau vier Dinge: Fortschritt, Restzeit, * Aufgabe, Antwortoptionen. Das einzige farbige Element im gesamten Testmodus ist die * Restzeitanzeige, und sie wird erst ab 25 % Restzeit farbig. Diese Zurueckhaltung ist * die Gestaltung." * * Das ist hier keine Absichtserklaerung: `tests/design/pruefstand-haerte.spec.ts` misst * am laufenden Dokument, dass kein sichtbares Element eine Farbsaettigung ueber 0,15 * traegt, solange mehr als 25 % Restzeit uebrig sind — mit Positivkontrolle, damit ein * "0 Funde" nicht von einem kaputten Messweg zu unterscheiden waere. */ [data-register="exam"] { /* Der Akzent wird neutral. Keine Marke, kein Blau, kein Messing. */ --accent: var(--ink-soft); --accent-hover: var(--ink-strong); --accent-brass: var(--ink-soft); /* Bedienelemente: Kontrast statt Farbe. */ --btn-bg: var(--ink-strong); --btn-fg: #ffffff; --btn-bg-hover: #000000; --btn-ring: rgba(23, 25, 28, 0.28); /* Der Fokusring bleibt sichtbar — er ist Bedienbarkeit, keine Dekoration (WCAG 2.4.7, und der Durchlauf ohne Maus ist Abnahmekriterium). */ --focus-ring: var(--ink-strong); /* Kuehle, ruhige Flaeche. Kein getoenter Grund, keine erhobene Karte. */ --surface-page: #FAFAF9; --surface-raised: #FAFAF9; --surface-tint: #F1F1EF; /* Die Display-Schrift ist im Pruefstand strukturell unerreichbar — sie zeigt auf dieselbe Familie wie der Fliesstext. Wer sie hier benutzt, bekommt sie nicht (§ 56: die Eigenschaft gilt durch Konstruktion, nicht durch Disziplin). */ --font-display: var(--font-body); /* Kein Ereignis rechtfertigt im Testmodus eine Animation ausser dem Countdown. */ --dur-fast: 0s; --dur-mid: 0s; --dur-reveal: 0s; --dur-img: 0s; } [data-theme="dark"][data-register="exam"], [data-theme="dark"] [data-register="exam"] { --accent: var(--text-secondary); --accent-hover: var(--text-primary); --accent-brass: var(--text-secondary); --btn-bg: #EDEEF0; --btn-fg: #101214; --btn-bg-hover: #ffffff; --btn-ring: rgba(237, 238, 240, 0.3); --focus-ring: #EDEEF0; --surface-page: #121315; --surface-raised: #121315; --surface-tint: #1A1B1E; --zeit-warnung-text: #DCB05A; --zeit-warnung-flaeche: #2A2313; --zeit-alarm-text: #E08C74; --zeit-alarm-flaeche: #2E1A16; /** * Der Korridor braucht hier KEINEN Eintrag mehr. * * Bis M6 standen an dieser Stelle `rgba(120, 165, 210, …)` — ein dritter Blauton, * der weder `--steel-300` (#96BCE2) noch das dunkle `--accent` (#93B7DD) war und * nirgends belegt wurde. Seit die Korridortoken aus `--accent` ableiten, folgen sie * dem Overlay von selbst: Der Pruefstand zieht `--accent` oben auf * `var(--text-secondary)`, dunkel wie hell. */ --bewertung-richtig-flaeche: #1B2A1B; --bewertung-falsch-flaeche: #2E1A16; --bewertung-unbearbeitet-flaeche: #232426; } /* ═══ Werkstatt, dunkel ══════════════════════════════════════════════════════════════ * * DIESER BLOCK IST DIE KORREKTUR EINES ZUORDNUNGSFEHLERS, nicht ein Zuwachs. * * Bis M6 standen die dunklen Zwillinge der eigenen Farbtoken AUSSCHLIESSLICH unter * `[data-theme="dark"][data-register="exam"]` — waehrend ihre Verbraucher samtlich * `.wk-`Bauteile der WERKSTATT sind (`.wk-option[data-marke]`, `.wk-profil-korridor`). * Die Zuordnung war exakt invertiert: Der Pruefstand, der diese Bauteile gar nicht * kennt, bekam ihre dunklen Fassungen; die Werkstatt, die sie zeichnet, bekam keine. * * Aufgefallen ist es nicht, weil `data-theme` bisher nirgends gesetzt wird — der * gesamte Dunkelsatz ist heute tote Regelmasse. Genau das ist der Fall, vor dem § 56 * warnt: Die Regel „hielt", weil der brechende Code noch fehlte. Haette jemand zuerst * den Themenschalter gebaut, stuende weisser Text (#EDEEF0) auf `#DCE9DC` — 1,1:1. * * Der Schalter kommt deshalb NACH diesem Block und nach einer eigenen Messung. Eine * uebernommene Messung ist keine Messung. */ [data-theme="dark"] { /* Gemessen gegen `--surface-page` dunkel (#101214), Textfarbe `--text-primary` (#EDEEF0). Die Flaechen sind Traeger von Text und deshalb als Paarung geprueft, nicht als Flaeche allein. */ --bewertung-richtig-flaeche: #1B2A1B; --bewertung-falsch-flaeche: #2E1A16; --bewertung-unbearbeitet-flaeche: #232426; /* Etwas mehr Deckung als hell: Auf dunklem Grund traegt dieselbe Prozentzahl weniger. `--accent` springt dabei ueber tokens.css auf #93B7DD. */ --korridor-flaeche: color-mix(in srgb, var(--accent) 18%, transparent); --korridor-linie: color-mix(in srgb, var(--accent) 48%, transparent); --abdeckung-balken: color-mix(in srgb, var(--text-primary) 26%, transparent); } /* ═══ Hilfsklassen ═══════════════════════════════════════════════════════════════════ */ /** * Tabellenziffern. Nicht kosmetisch: ein springender Countdown ist im Testmodus eine * echte Ablenkung (Spezifikation 8.1). Gilt fuer den Timer, "Aufgabe 7 von 24", alle * Kennwerte und alle Tabellenspalten. * * Gemessen statt betrachtet: tests/design/tabellenziffern.spec.ts vergleicht die Breite * desselben Elements mit "11:11" und mit "00:00" — sie muss gleich sein. */ .ziffern { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /** * Fuer Bildschirmleser sichtbar, fuer das Auge nicht. Traegt die Textalternative * figuraler Aufgaben, die aus derselben Szenenbeschreibung erzeugt wird wie das SVG * und damit garantiert konsistent ist (Spezifikation 8.4). */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } /* Reduzierte Bewegung wird respektiert — ueberall, nicht nur im Pruefstand. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══ Bauteile des Pruefstands ═══════════════════════════════════════════════════════ * * Warum hier und nicht als CSS-Modul neben der Komponente: `tokens.css` und * `werkbund.css` sind bytegleiche Kopien aus dem Referenzrepo und werden nie von Hand * angefasst. Diese Datei ist die dafuer vorgesehene Anwendungsschicht — eine vierte * Ablage waere eine vierte Stelle, an der jemand nach einer Farbe sucht. * * Inline-Stile stehen weiter in den Komponenten, wo sie Layout beschreiben. Hier steht, * was Inline-Stil nicht kann: Zustaende (:focus-visible, :checked, :hover) und die * Medienabfragen. */ /* Der Rahmen: Kopf fix, Aufgabe im Fluss, Fuss fix. Kein Scrollen der Seite selbst — die Aufgabe scrollt in ihrem eigenen Feld, falls sie ueberlaeuft (Spezifikation 8.3). */ .pf-rahmen { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; max-height: 100dvh; } .pf-kopf, .pf-fuss { display: flex; align-items: center; gap: clamp(1rem, 4vw, 2.5rem); padding: 0.85rem clamp(1rem, 4vw, 3rem); border-color: var(--border-hairline); border-style: solid; } .pf-kopf { border-width: 0 0 1px 0; } .pf-fuss { border-width: 1px 0 0 0; justify-content: space-between; flex-wrap: wrap; row-gap: 0.6rem; } .pf-buehne { overflow-y: auto; padding: clamp(1.5rem, 5vh, 3rem) clamp(1rem, 4vw, 3rem); } .pf-blatt { max-width: 54rem; margin: 0 auto; } /* ── Der Fortschrittsbalken ──────────────────────────────────────────────────────── * * Er zeigt POSITION, nicht Bewertung (Spezifikation 8.3). Deshalb traegt er genau eine * Farbe — die Vordergrundfarbe — und keine Abstufung nach richtig/falsch. Waere er * bewertend, verriete er waehrend des Laufs die Loesung der schon bearbeiteten * Aufgaben, und das aendert das Verhalten bei den folgenden. */ .pf-balken { flex: 1 1 auto; height: 6px; min-width: 4rem; background: var(--surface-tint); border: 1px solid var(--border-hairline); overflow: hidden; } .pf-balken-fuell { height: 100%; background: var(--ink-soft, var(--text-secondary)); /* Keine Ueberblendung: Im Pruefstand ist jede Animation ausser dem Countdown abgeschaltet (--dur-* stehen dort auf 0s). */ transition: width var(--dur-fast) linear; } /* ── Die Restzeit: das einzige farbige Element ─────────────────────────────────────── */ .pf-zeit { font-family: var(--font-mono); font-size: clamp(1.05rem, 2.4vw, 1.4rem); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: 0.06em; padding: 0.2rem 0.55rem; white-space: nowrap; color: var(--zeit-ruhig-text); background: transparent; } .pf-zeit[data-warnstufe="achtung"] { color: var(--zeit-warnung-text); background: var(--zeit-warnung-flaeche); } .pf-zeit[data-warnstufe="kritisch"] { color: var(--zeit-alarm-text); background: var(--zeit-alarm-flaeche); } /* ── Antwortoptionen ─────────────────────────────────────────────────────────────── * * Ein `