/** * transforMATE Design Tokens — Richtung 2a v2 „Editorial x KI-Netzwerk". * * Quelle: handoff/project/Design System 2a v2.dc.html, Sektionen 01 (Farben) * und 02 (Typografie); die uebrigen Werte sind aus der Verwendung im gesamten * Prototyp abgeleitet. * * Diese Datei wird ins Dokument adoptiert (nicht in jeden Shadow Root): Custom * Properties vererben durch die Shadow-Grenze. Wuerde jede Komponente die * Tokens erneut auf :host setzen, koennten uebergeordnete tone-Umschaltungen * nicht mehr durchgreifen. * * Wer nur umfaerben will, tauscht ausschliesslich diese Datei — siehe * docs/THEMING.md, Ebene 1. */ :root { color-scheme: light; /* ---------------------------------------------------------------------- */ /* Palette — die benannten Farben aus Sektion 01 */ /* ---------------------------------------------------------------------- */ --ds-ink: #16213a; /* Tinte — Headlines, Primaer-Buttons */ --ds-ink-hover: #243157; /* Tinte Hover */ /* * Landingpage E setzt fuer die Fusszeile bewusst einen ZWEITEN, dunkleren Tintenton * (`#0E1526`) als fuer die dunklen Sektionen im Seitenkoerper (`--ds-ink`, `#16213A`) — die * Fusszeile ist die dunkelste Flaeche der Seite, kein Wiederholen der Sektionsfarbe. */ --ds-ink-deep: #0e1526; /* Tinte, dunkler — Fusszeile */ --ds-gold: #c08a14; /* Altgold — Akzente, Kursive, Links */ --ds-gold-hover: #96690a; /* Gold Hover */ --ds-graphite: #4a4f5c; /* Graphit — Fliesstext */ --ds-stone: #6e7280; /* Stein — Sekundaertext */ --ds-linen: #edebe3; /* Leinen — Flaechen, Hintergruende */ --ds-paper: #fcfcfa; /* Papier — Seitengrund */ --ds-rule: #e5e4de; /* Linien */ --ds-success: #2e6b4f; /* Erfolg */ --ds-error: #9a4a2e; /* Fehler — Terracotta, nie Rot-Alarm */ --ds-notice: #8a6a9a; /* Hinweis */ /* Ergaenzungen aus der Verwendung im Prototyp */ --ds-white: #ffffff; /* Kartenflaeche, klar heller als Papier */ --ds-shell: #f1f0eb; /* Seitenhintergrund der Design-Studie */ --ds-ash: #9a9a90; /* Tertiaertext, Bildunterschriften */ --ds-field-rule: #c9c6bb; /* Formular-Rahmen, deaktivierte Kanten */ --ds-hush: #d6d3c8; /* Sehr leise Kanten, Kalender-Fremdmonat */ --ds-raised: #faf9f5; /* Leicht gehobene Flaeche, Zeilen-Hover */ --ds-hatch: #f5f3ec; /* Zweiter Ton der Platzhalter-Schraffur */ /* Tonwerte fuer dunkle Flaechen (tone="ink") */ --ds-ink-rule: #2e3b5c; /* Trennlinien auf Tinte */ --ds-ink-text: #f3f1ea; /* Warmweisser Text auf Tinte */ --ds-ink-muted: #a9b2c6; /* Sekundaertext auf Tinte */ --ds-ink-faint: #8b96ad; /* Tertiaertext auf Tinte */ --ds-ink-whisper: #5e6b87; /* Kleinstschrift auf Tinte */ /* * FLIESSTEXT AUF TINTE — und der Wert ist eine Korrektur, keine Ergaenzung. * * `--ds-ink-code` stand auf `#e4e7ee`. Nachgezaehlt im Entwurf: dieser Wert * kommt dort KEIN EINZIGES MAL vor (`grep -c E4E7EE` ueber alle 21 Ansichten * und logik.js = 0). Er war frei erfunden. Was der Entwurf stattdessen setzt, * ist `#d8dce6` — an vier Stellen in zwei Ansichten: der Ergebniskasten der * Prompt-Werkstatt (`05-uebungsraum.html:48`, Mono, `white-space:pre-wrap`) * und die drei Merksatzzeilen des Lehrbuchs (`10-lehrbuch.html:38–40`). * * Zwei Namen fuer einen Wert, weil es zwei Rollen sind: der Codeblock und der * Fliesstext auf dunkler Flaeche. Sie duerfen spaeter auseinanderlaufen — * dieselbe Lehre wie bei `--ds-measure-lead`, das einmal fuer zwei Textsorten * herhalten musste und dabei neunzehn Ansichten verzogen hat. */ --ds-ink-body: #d8dce6; /* Fliesstext auf Tinte */ --ds-ink-code: #d8dce6; /* Codetext auf Tinte */ --ds-gold-bright: #d89e22; /* Gold-Hover auf Tinte */ /* Statusflaechen und -kanten (Quiz, Alerts, Badges) */ --ds-success-surface: #f2f7f4; --ds-success-rule: #b9d3c5; --ds-error-surface: #faf3f1; --ds-gold-surface: #f3e6c8; /* Gedaempfte Zustaende (gesperrte Kursmodule) */ --ds-dim-text: #8a8a80; --ds-dim-faint: #a8a89e; --ds-dim-surface: #f4f3ee; --ds-done-surface: #fdfdfb; /* ---------------------------------------------------------------------- */ /* Semantische Farbrollen — hierueber gehen alle Komponenten */ /* ---------------------------------------------------------------------- */ --ds-color-page: var(--ds-shell); --ds-color-surface: var(--ds-white); --ds-color-surface-raised: var(--ds-raised); --ds-color-surface-sunken: var(--ds-linen); --ds-color-surface-inverse: var(--ds-ink); --ds-color-heading: var(--ds-ink); --ds-color-text: var(--ds-graphite); --ds-color-text-muted: var(--ds-stone); --ds-color-text-faint: var(--ds-ash); --ds-color-text-inverse: var(--ds-ink-text); --ds-color-accent: var(--ds-gold); --ds-color-accent-hover: var(--ds-gold-hover); --ds-color-accent-surface: var(--ds-gold-surface); /* Auf dunklen Flaechen gilt ein eigener Akzentton: derselbe Wert wirkt dort ganz anders, und ein fuer helles Papier abgedunkeltes Gold verschwindet auf Tinte. Wird von shadow-base.css bei tone="ink" eingesetzt. */ --ds-color-accent-on-ink: var(--ds-gold); --ds-color-border: var(--ds-rule); --ds-color-border-strong: var(--ds-ink); --ds-color-border-field: var(--ds-field-rule); --ds-color-border-quiet: var(--ds-hush); /* * DREI LINIENSTAERKEN, NICHT EINE — der Entwurf unterscheidet sauber, wir * hatten nur `--ds-color-border` (`#e5e4de`) und haben damit jede innere * Trennung so laut gezogen wie eine Aussenkante. * * #e5e4de die AUSSENKANTE einer Flaeche und die Kante zwischen zwei * Baendern (Kopf/Rumpf, Schiene/Inhalt, Tafelrahmen) * #edebe3 die INNERE Trennung einer Flaeche — Zeile gegen Zeile in einer * Karte, Knopfleiste gegen Tafelkoerper. `border-top:1px solid * #EDEBE3` steht in zehn Ansichten (00, 05×3, 07×2, 08×2, 09, 11, * 13, 14, 15). * #f4f3ee die LEISESTE Linie: die Zeilen einer Verlaufs- oder Kapitelliste * in einer Seitenspalte (`exHistory` logik.js:869, `recChapters` * :732, `liveRecordings`, `toc` :965). * * Beide Werte lagen als FLAECHE schon im Blatt (`--ds-linen`, * `--ds-dim-surface`); was fehlte, war die Rolle als Kante. */ --ds-color-border-soft: var(--ds-linen); --ds-color-border-faint: var(--ds-dim-surface); --ds-color-link: var(--ds-ink); --ds-color-link-underline: var(--ds-gold); --ds-color-focus: var(--ds-ink); --ds-color-success: var(--ds-success); --ds-color-error: var(--ds-error); --ds-color-notice: var(--ds-notice); /* ---------------------------------------------------------------------- */ /* Typografie — Sektion 02 */ /* ---------------------------------------------------------------------- */ --ds-font-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; --ds-font-sans: 'Libre Franklin', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --ds-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700; /* Schriftgroessen. Display bis H2 stehen in Newsreader, ab H3 in Libre Franklin. */ /* Fliessend: 56 px sind die Zielgroesse, aber „transforMATE" in einer Zeile braucht am Smartphone schlicht mehr Platz, als da ist. */ --ds-text-display: clamp(2.25rem, 1.35rem + 4vw, 3.5rem); /* * 36 px, FEST — und nicht mehr fliessend. * * Erst war die Obergrenze falsch (42 statt 36), jetzt war es die Kurve * selbst: bei 390 px Fensterbreite lief sie auf 30,9 px herunter. Der Entwurf * kennt fuer den Seitentitel keinen mobilen Zweig — er steht in allen 21 * Ansichten und in beiden Breiten auf 36 px. Fliessend bleibt nur * `--ds-text-display`, wo es einen Grund gibt: die Wortmarke muss in eine * Zeile passen. Ein Seitentitel darf umbrechen. */ --ds-text-h1: 2.25rem; /* 36 */ /* * 34 px — der Titel im KOPF EINER DETAILANSICHT, nicht der Seitentitel. * Fuenf Stellen in drei Ansichten (`07-kurs`, `10-lehrbuch` 3×, `18-team`), * jedes Mal in Newsreader auf `--ds-leading-figure` (1.15). Eine andere Rolle * als die 36 px, die in zehn Ansichten oben auf der Seite stehen — deshalb * eine eigene Stufe und kein Verstellen von `--ds-text-h1`. */ --ds-text-h1-detail: 2.125rem; /* 34 */ --ds-text-h2: clamp(1.625rem, 1.3rem + 1.5vw, 2rem); --ds-text-h3: 1.375rem; /* 22 / 1.3 */ --ds-text-h4: 1.125rem; /* 18 */ --ds-text-h5: 1.25rem; /* 20 — Abschnittsueberschrift in Karten */ /* * 19 px — der Titel, wenn die Spalte schmal wird: Zeilen (Termin, Kapitel, * Folge) und die Weiterlernen-Karte am Smartphone. Der Entwurf setzt ihn dort * durchgehend eine Stufe unter H3 und NICHT auf H4; 18 px liest sich neben * 14 px Fliesstext nicht mehr als eigene Ebene. */ --ds-text-h6: 1.1875rem; /* 19 — Zeilen- und Kartentitel im Schmalen */ --ds-text-lead: 1.125rem; /* 18 / 1.6 */ --ds-text-body: 1rem; /* 16 / 1.65 */ --ds-text-ui: 0.9375rem; /* 15 — Buttons, Formularfelder */ --ds-text-sm: 0.875rem; /* 14 — Kartentext, Tabellen */ --ds-text-xs: 0.8125rem; /* 13 — Meta, Hinweise */ --ds-text-2xs: 0.75rem; /* 12 — Labels, Kolumnentitel */ --ds-text-3xs: 0.6875rem; /* 11 — Badges, Kleinstschrift */ --ds-text-4xs: 0.625rem; /* 10 — Zustandsmarken in Zeilen und Karten */ --ds-leading-tight: 1.05; --ds-leading-display: 1.1; /* * 1.15 — die grosse serife ZAHL in Tinte (28, 32, 34 px). Nachgezaehlt: * `line-height:1.15` steht sechs Mal in vier Ansichten * (`00-werkzeugleiste`, `07-kurs`, `10-lehrbuch` 3×, `19-monitor`) und jedes * Mal an genau dieser Stelle — Kennzahl, Kapitelnummer, Stufenwert. * * NICHT `--ds-leading-heading` auf 1.15 ziehen: daran haengt jede Ueberschrift * der Bibliothek. Eine Zahl ist keine Ueberschrift, sie steht enger. */ --ds-leading-figure: 1.15; --ds-leading-heading: 1.25; /* * 1.3 — der serife TITEL: Frage eines Quiz oder einer Umfrage, Kartentitel, * Zwischenueberschrift im Lehrbuch, Anschlussverweis im Fuss einer * Seitenspalte. Mit zwoelf Fundorten in neun Ansichten (04, 05, 08, 09, 11, * 14×3, 15, 16, 20) ist es der zweithaeufigste Wert des Entwurfs ueberhaupt. * * `--ds-leading-heading` (1.25) benutzt der Entwurf daneben ebenfalls * (logik.js:236, Kartentitel) — es braucht also den zweiten Token und nicht * ein Umbiegen des ersten. */ --ds-leading-title: 1.3; --ds-leading-snug: 1.4; /* * 1.45 — die AUSSAGE einer Listenzeile: 15- bis 16px-Text in Tinte, der auf * zwei bis drei Zeilen laeuft. Vier Ansichten setzen ihn * (`11-wissenscheck:26`, `12-selbsteinschaetzung:24`, `13-ergebnis:34`, * `19-monitor:54`), zwischen `--ds-leading-snug` (1.4) und * `--ds-leading-card` (1.55) klaffte genau diese Luecke. * * NICHT `--ds-leading-snug` verstellen: daran haengen Ueberschriften und * Zeilentitel der ganzen Bibliothek. */ --ds-leading-item: 1.45; /* * 1.55 — der Anrisstext IN einer Karte. Er steht enger als der Vorspann einer * Seite (1.6, `--ds-leading-normal`), weil er auf zwei bis drei Zeilen in ein * Kaestchen mit fester Hoehe passen muss. Der Entwurf setzt beide Werte * nebeneinander; wir hatten fuer beides 1.6, und damit standen alle * Kartenteaser eine halbe Zeile zu hoch. */ --ds-leading-card: 1.55; --ds-leading-normal: 1.6; --ds-leading-relaxed: 1.65; /* * 1.75 UND NICHT 1.85 — auch das ist eine Korrektur und keine Feinjustage. * * Nachgezaehlt ueber alle einundzwanzig Ansichten und `logik.js`: * `line-height:1.85` kommt NULL Mal vor, `1.75` sieben Mal an sieben Stellen * in zwei Ansichten (`10-lehrbuch` 6×, `05-uebungsraum` 1×) — und beide Male * dort, wo wir den Token benutzen: langer Fliesstext (`ds-prose`) und der * Codeblock (`ds-code-block`, `ds-prompt-workshop`). * * 1.85 war geraten; jede Lehrbuchseite stand damit eine halbe Zeile je Absatz * zu hoch. */ --ds-leading-loose: 1.75; --ds-tracking-label: 0.18em; /* Kolumnentitel, Eyebrow */ --ds-tracking-badge: 0.16em; /* * 0.14em IST DIE HAEUFIGSTE LAUFWEITE DES ENTWURFS und fehlte hier ganz — * gemessen in 12 von 21 Ansichten, 26 Mal in Verbindung mit 11px. Sie steht * am Kicker VON KARTEN UND ZEILEN, waehrend der Seitenkopf mit 0.16em eine * Spur weiter laeuft. Wir hatten fuer beides 0.16em; damit standen die * Kartenkicker durchgehend zu weit. */ --ds-tracking-kicker: 0.14em; --ds-tracking-meta: 0.1em; /* Beschriftung unter einer Kennzahl */ --ds-tracking-caps: 0.12em; --ds-tracking-wide: 0.08em; --ds-tracking-button: 0.03em; --ds-tracking-tight: -0.01em; /* Wortmarke */ /* Lesebreiten */ /* * 62 ch UND NICHT 66 ch. Nachgezaehlt: `max-width:62ch` steht 14 Mal in vier * Ansichten (`10-lehrbuch` 11×, `05-uebungsraum`, `08-kurs-rueckmeldung`, * `15-live-termine`), `66ch` genau ein Mal (`16-aufzeichnung`). Der Token trug * bisher den Ausreisser und nicht die Regel; jede Lehrbuchseite lief damit * vier Zeichen zu breit. */ --ds-measure-prose: 62ch; --ds-measure-lead: 56ch; /* * DIE ZWEITE VORSPANNBREITE, und sie ist ein exaktes Patt: ausgezaehlt ueber * alle Vorspannzeilen (`font-size:15px; color:#6E7280`) steht 56 ch sechs Mal * (06, 11, 14, 19, 20) und 62 ch sechs Mal (05, 08, 15). Wer * `--ds-measure-lead` verstellt, verschiebt genau so viele Ansichten, wie er * trifft — also eine zweite benannte Breite. * * Denselben Fehler hat die Bibliothek schon einmal gemacht: `--ds-measure-lead` * wurde fuer den Kapitel-Vorspann auf 52 ch gezogen und verengte damit den * Seiten-Vorspann. Richtig war, beide zu trennen. */ --ds-measure-lead-wide: 62ch; --ds-measure-narrow: 54ch; --ds-measure-headline: 22ch; /* ---------------------------------------------------------------------- */ /* Raster */ /* ---------------------------------------------------------------------- */ --ds-space-0: 0; --ds-space-1: 0.125rem; /* 2 */ --ds-space-2: 0.25rem; /* 4 */ --ds-space-3: 0.375rem; /* 6 */ --ds-space-4: 0.5rem; /* 8 */ --ds-space-5: 0.625rem; /* 10 */ --ds-space-6: 0.75rem; /* 12 */ --ds-space-7: 0.875rem; /* 14 */ --ds-space-8: 1rem; /* 16 */ --ds-space-9: 1.125rem; /* 18 */ --ds-space-10: 1.25rem; /* 20 */ --ds-space-11: 1.375rem; /* 22 */ --ds-space-12: 1.5rem; /* 24 */ /* 26 — der Fuss einer Seite und der untere Rand einer mobilen Ansicht. Stand schon als Rueckfall in app-shell.css (`var(--ds-space-13, …)`) und war nie definiert; die Fusszeile polsterte deshalb still 24 statt 26. */ --ds-space-13: 1.625rem; /* 26 */ --ds-space-14: 1.75rem; /* 28 */ --ds-space-16: 2rem; /* 32 */ --ds-space-18: 2.25rem; /* 36 */ --ds-space-20: 2.5rem; /* 40 */ --ds-space-22: 2.75rem; /* 44 */ --ds-space-24: 3rem; /* 48 */ --ds-space-28: 3.5rem; /* 56 */ --ds-space-32: 4rem; /* 64 */ --ds-space-36: 4.5rem; /* 72 */ --ds-space-48: 6rem; /* 96 */ --ds-space-60: 7.5rem; /* 120 */ /* Abstaende des Layout-Systems — ds-stack, ds-cluster, ds-grid, ds-section */ --ds-gap-3xs: var(--ds-space-2); --ds-gap-2xs: var(--ds-space-4); --ds-gap-xs: var(--ds-space-6); --ds-gap-sm: var(--ds-space-8); --ds-gap-md: var(--ds-space-10); --ds-gap-lg: var(--ds-space-14); --ds-gap-xl: var(--ds-space-20); --ds-gap-2xl: var(--ds-space-28); --ds-gap-3xl: var(--ds-space-36); /* Innenabstaende wiederkehrender Flaechen */ --ds-pad-card: var(--ds-space-14); /* 28 — Standardkarte */ /* * 22/24 — DIE HAEUFIGSTE TAFELPOLSTERUNG DES ENTWURFS und bisher gar keine * Stufe. `padding:22px 24px` steht elf Mal in fuenf Ansichten * (`04-willkommen` 3×, `05-uebungsraum` 3×, `06-meine-kurse`, * `17-fortschritt` 2×, `20-zertifikat` 2×) — haeufiger als die 28 px, die * `--ds-pad-card` traegt. * * Zwei Werte in einem Token, weil sie im Entwurf nie einzeln vorkommen: die * Tafel steht oben und unten enger als an den Seiten. */ --ds-pad-card-snug: var(--ds-space-11) var(--ds-space-12); /* 22 24 */ --ds-pad-panel: var(--ds-space-24); /* 48 — Sektionsflaeche */ --ds-pad-inline: var(--ds-space-8); --ds-pad-block: var(--ds-space-6); /* Seitenbreiten */ --ds-width-prose: 46rem; /* 736 — Lesespalte */ --ds-width-content: 68rem; /* 1088 */ --ds-width-wide: 77.5rem; /* 1240 — Breite der Design-Studie */ --ds-width-app: 120rem; /* 1920 — Full HD, Obergrenze des Rahmens */ --ds-page-gutter: var(--ds-space-24); --ds-page-gutter-mobile: var(--ds-space-10); /* ---------------------------------------------------------------------- */ /* Kanten, Schatten, Bewegung */ /* ---------------------------------------------------------------------- */ /* Scharfe Kanten sind Programm — Radius nur fuer Pillen und Kreise. */ --ds-radius-none: 0; --ds-radius-pill: 99px; --ds-radius-circle: 50%; --ds-border-hair: 1px; --ds-border-strong: 2px; --ds-border-double: 3px; /* Kein Weichzeichner: der versetzte Blockschatten aus Sektion 10. */ --ds-shadow-offset: 8px 8px 0 var(--ds-linen); --ds-focus-ring: 0 0 0 1px var(--ds-color-focus); --ds-focus-outline: var(--ds-border-strong) solid var(--ds-color-focus); --ds-focus-offset: 2px; --ds-duration-fast: 120ms; --ds-duration-base: 150ms; --ds-duration-slow: 400ms; --ds-ease: cubic-bezier(0.2, 0, 0.2, 1); /* Verdunkelung hinter modalen Flaechen */ --ds-color-overlay: rgb(22 33 58 / 0.45); /* Ebenen */ --ds-layer-sticky: 100; --ds-layer-drawer: 200; --ds-layer-overlay: 300; --ds-layer-dialog: 310; /* Platzhalter-Schraffur fuer fehlende Bilder */ --ds-hatch-pattern: repeating-linear-gradient( 45deg, var(--ds-linen), var(--ds-linen) 8px, var(--ds-hatch) 8px, var(--ds-hatch) 16px ); } @media (prefers-reduced-motion: reduce) { :root { --ds-duration-fast: 0ms; --ds-duration-base: 0ms; --ds-duration-slow: 0ms; } }