/* ========================================================================== token.css – Die eine Quelle der Wahrheit /css/ | MoAktor Nur, was in den aktiven Dateien tatsächlich verwendet wird: a11y.css v1.1.0 · kompass.css v2.1.0 · main.css v3.1.0 · rykkfluss.css v4.3.2 · datenschutz.css v1.0.0 · tarot-viewer.js v2.3.0 · buehne.css v1.0.1 · seelenzeichnung/main.css v2.1.0 · seelenzeichnung/lindenbaum.css v1.1.0 LADEREIHENFOLGE: Diese Datei MUSS vor allen anderen geladen werden. Sonst schlägt jedes var() fehl. Löst drei reale Konflikte: • --dim: #aaa (main) vs #8a8a9a (rykkfluss) → #aaa kanonisch, #8a8a9a wird --dim-tief • --font: drei Namen (--font, --schrift, --schrift-ui) für zwei Konzepte → zwei kanonisch, drei Aliase zeigen jetzt auf die kanonischen Stacks (nicht auf dritte Werte) • z-index: 200/250/300/1000/99999 → semantische Ebenen, Werte folgen den Bändern aus ADR-css.1.0 ── Changelog ─────────────────────────────────────────────────────── v1.0.6 | 13.10.2026 | Welle-6C — A11y-Token-Vervollständigung. | | Anlass: a11y.css v1.1.0 (Welle-6C) konsumiert vier | A11y-Variablen, aber token.css v1.0.5 deklarierte nur | zwei davon (--a11y-font-scale, --a11y-focus-ring). | --a11y-line-height und --a11y-letter-spacing waren | weder in :root noch als @property typisiert. Der | Konsument fiel bislang auf var()-Fallbacks zurück — | funktional korrekt, aber strukturell eine Lücke, die | den nächsten Audit an derselben Stelle vorbeirutschen | ließe. | | Ergänzungen (rein additiv, keine bestehenden Werte | geändert, rückwirkungsfrei): | | - :root · --a11y-line-height: 1.6 (Zahl) | - :root · --a11y-letter-spacing: 0em (Länge) | - @property --a11y-line-height syntax: "" | - @property --a11y-letter-spacing syntax: "" | | Warum --a11y-letter-spacing als und nicht als | : aura-preferences.js v1.2.0 schreibt den Wert | als `state.letterSpacing + 'em'` auf . Das ist | eine Länge. Bei syntax: "" würde der Browser | die Zuweisung stumm verwerfen (kein Konsolenfehler, | kein Fallback) — die Präferenz wäre wirkungslos. | | Warum --a11y-line-height als : der Wert ist | einheitenlos (1.4–2.0) und multipliziert die font-size | des jeweiligen Elements. Genau das ist die Semantik | eines unitless line-height in CSS. | | Kopfzeile: Konsumentenliste aktualisiert. | - a11y.css v1.1.0 ergänzt (war seit dem a11y.css- | Vorfall nicht mehr in der Liste; Welle-6C hat die | Datei rekonstruiert). | - rykkfluss.css v2.0.0 → v4.3.2 (die Datei wurde in | den Wellen 6.1.x mehrfach angehoben; der Eintrag | war seit dem letzten Audit nicht mitgezogen). | | Keine Änderungen an: Farben, Typografie-Stacks, | Radius-Skala, Transition-Skala, Ebenen-Bändern, | bestehenden @property-Blöcken, Layer-Statement. | | IDX: TBD | V: 1.0.6 v1.0.5 | 11.10.2026 | Ergänzungen aus dem Seelenzeichnung-Audit: | - Neu: --gold-25, --gold-35 (in seelenzeichnung/main.css | bisher hartcodiert), --radius-md (20px), --radius-lg | (28px), --radius-pill (999px). | - Neu: --farbe-erfolg, --farbe-fehler (Statusfarben, vorher | hartcodiert in .message.success/.error), --fokus-farbe. | - --panel-bg zeigt jetzt als Alias auf --nacht-92 (war ein | identischer Zweitwert). | - Kopfzeile: Dateiliste um die beiden Seelenzeichnung-Dateien | ergänzt. | - Keine bestehenden Werte geändert, rückwirkungsfrei. v1.0.4 | 01.10.2026 | Z-Index-Audit, Stufe A (E1): | - --ebene-toast 600 → 750: Toasts liegen über Modals, aber | unter dem Curtain (800). Grund: Rückmeldungen wie | „Gespeichert“ entstehen oft, während ein Modal offen ist. | Mit 600 (unter Modal 700) wären sie hinter dem Backdrop | verschwunden. Die vier Toasts im Bestand (.toast ×3, | .dw-toast) lagen bisher bei 1000–9999 und damit über | allen Modals; das bleibt so erhalten. | - Band-Kommentar angepasst (Modal 700–749, Toast 750–799, | 600–699 reserviert). Kein Konsument von --ebene-toast im | Bestand, die Änderung ist rückwirkungsfrei. | - Kopfzeile: Dateiname tokens.css → token.css. | - ADR-css.1.0 (Band-Tabelle) muss entsprechend nachgezogen | werden; der Text liegt nicht in dieser Datei. v1.0.3 | 14.09.2026 | Nach buehne.css v1.0.0: | - --font-mono ergänzt. Wurde von buehne.css konsumiert, | war aber nie definiert – der Fallback griff immer. | - Alpha-Varianten ergänzt, wo buehne.css hartcodierte | rgba()-Werte nutzte: --gold-05/10/15/20/30, | --pfau-20/30, --nacht-40/50/70/85/92, | --schwarz-30/50/70. Auswahl an tatsächlichem Bedarf | orientiert – keine spekulative Reserve. v1.0.2 | 14.09.2026 | Nach ADR-css.2.0-Inserts: | - Transition-Familie ergänzt (fast/base/slow/smooth/ | bounce). --transition bleibt als Alias auf | --transition-smooth. | - A11Y-Präferenzen als Tokens (--a11y-font-scale, | --a11y-focus-ring). @property-Typisierung. | - --ebene-notfall auf 9999 (außerhalb der Bänder). | - 100er-Band-Kommentar präzisiert. v1.0.1 | 14.09.2026 | Nach Review mit der Architektur: | - Font-Aliase zeigen auf --font-sans / --font-serif. | - Ebenen-Werte an die Bänder aus ADR-css.1.0 angeglichen. | - --ebene-chrome aufgeteilt in --ebene-crosscut und | --ebene-transient. | - --ebene-notfall (999) ergänzt für die historischen | 9999er-Fälle (dw-toast). v1.0.0 | 14.09.2026 | Erste Fassung. IDX: TBD | V: 1.0.6 | L: 0 CHK: idx-marker, a11y-typen-vollstaendig, property-typen-konsistent, konsumentenliste-aktuell Teil des MoAktor-Ökosystems | Lizenz: Lichtarchitekt-Lizenz #7 ========================================================================== */ @charset "UTF-8"; /* Die Layer-Ordnung. Statement-Regel. Keine Regeln darin. Gilt ab jetzt für alle nachfolgenden Dateien, die @layer nutzen. WICHTIG: Damit @layer tatsächlich wirkt, müssen auch die bestehenden CSS-Dateien ihre Regeln in einen Layer packen (z. B. `@layer base { … }`). Unlayered Styles gewinnen sonst gegen alle Layer. Das ist die Voraussetzung für die Kaskaden-Konsolidierung. */ @layer tokens, reset, base, komponenten, utilities, overrides; :root { /* ═══════════════════════════════════════════════════════════════════ FARBEN ═══════════════════════════════════════════════════════════════════ */ /* Die fünf Grundfarben · in allen aktiven Dateien identisch */ --nacht: #0b1a2f; --gold: #d4af37; --schwan: #f5f0e8; --pfau: #1a8a8a; --kraehe: #1a1a2e; /* Text-Abstufungen */ --text: #e0e0e0; /* Standardtext · main.css */ --dim: #aaa; /* gedämpft · main.css. KANONISCH. */ --dim-tief: #8a8a9a; /* für rykkfluss.css, wo vorher --dim war */ /* Erweiterungen · je in genau einer Datei verwendet */ --gold-hell: #f0d060; /* rykkfluss.css */ /* Status- und Fokusfarben · NEU v1.0.5 Kontrast auf --kraehe: Erfolg 7,0:1 · Fehler 5,9:1 · Fokus 8,1:1 */ --farbe-erfolg: #c9a132; --farbe-fehler: #e07b7b; --fokus-farbe: var(--gold); /* Hintergründe */ --panel-bg: var(--nacht-92); /* kompass.css · Alias, gleicher Wert */ --nacht-glas: rgba(11, 26, 47, 0.88); /* rykkfluss.css */ /* ── Alpha-Varianten · für Hintergründe, Border, Schatten ──────── Neu in v1.0.3. Diese Werte wurden in buehne.css v1.0.0 hartcodiert genutzt; sie gehören hierher, weil sie zum Erscheinungsbild der Farbwelt gehören und in vielen Dateien in ähnlicher Form auftauchen. Auswahl am tatsächlichen Bedarf orientiert – keine spekulative Reserve. */ /* Gold-Transparenzen */ --gold-05: rgba(212, 175, 55, 0.05); --gold-10: rgba(212, 175, 55, 0.10); --gold-15: rgba(212, 175, 55, 0.15); --gold-20: rgba(212, 175, 55, 0.20); --gold-25: rgba(212, 175, 55, 0.25); /* NEU v1.0.5 */ --gold-30: rgba(212, 175, 55, 0.30); --gold-35: rgba(212, 175, 55, 0.35); /* NEU v1.0.5 */ /* Pfau-Transparenzen */ --pfau-20: rgba(26, 138, 138, 0.20); --pfau-30: rgba(26, 138, 138, 0.30); /* Nacht-Transparenzen · die häufigsten Hintergründe */ --nacht-40: rgba(11, 26, 47, 0.40); --nacht-50: rgba(11, 26, 47, 0.50); --nacht-70: rgba(11, 26, 47, 0.70); --nacht-85: rgba(11, 26, 47, 0.85); --nacht-92: rgba(11, 26, 47, 0.92); /* Neutral-Schwarz-Transparenzen */ --schwarz-30: rgba(0, 0, 0, 0.30); --schwarz-50: rgba(0, 0, 0, 0.50); --schwarz-70: rgba(0, 0, 0, 0.70); /* ═══════════════════════════════════════════════════════════════════ TYPOGRAFIE ═══════════════════════════════════════════════════════════════════ */ /* Drei kanonische Stacks – die einzige Quelle für Schrift-Familien. */ --font-serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', 'Courier New', monospace; /* NEU v1.0.3 */ /* Drei Aliase – zeigen auf die kanonischen Stacks, damit bestehende Dateien ohne Änderung weiterlaufen. Kein dritter Font-Stack. Warum Aliase und nicht Löschen: Die Namen --font/--schrift/ --schrift-ui werden in den aktiven Dateien (kompass.css v2.1.0, rykkfluss.css v2.0.0) referenziert. Wenn sie plötzlich fehlen, fällt der Font auf den Browser-Default zurück – sichtbarer Bruch. */ --font: var(--font-sans); --schrift: var(--font-serif); --schrift-ui: var(--font-sans); /* ═══════════════════════════════════════════════════════════════════ RADIUS ═══════════════════════════════════════════════════════════════════ */ --radius: 18px; /* kompass.css · rykkfluss.css */ --radius-sm: 12px; /* rykkfluss.css */ --radius-md: 20px; /* NEU v1.0.5 · Karten, Zitate */ --radius-lg: 28px; /* NEU v1.0.5 · Modals */ --radius-pill: 999px; /* NEU v1.0.5 · Buttons, Pills */ /* ═══════════════════════════════════════════════════════════════════ TRANSITION Die Skala ist aktuell pragmatisch gewählt (150/250/300/400ms), nicht mathematisch abgeleitet. Wenn in Zukunft ein zusätzlicher Wert gebraucht wird (z. B. --transition-xslow), wird die Skala in einem Schritt harmonisiert (Vorschlag: 100 / 200 / 300 / 400 / 500ms als feste Stufen). Bis dahin: Werte wie definiert nutzen. ═══════════════════════════════════════════════════════════════════ */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-smooth: 300ms cubic-bezier(0.22, 0.61, 0.36, 1); --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Alias für Bestandsdateien. Zeigt auf den Standard-Smooth-Wert, der in kompass.css und rykkfluss.css identisch definiert war. */ --transition: var(--transition-smooth); /* ═══════════════════════════════════════════════════════════════════ A11Y-PRÄFERENZEN Werden von a11y.css v1.1.0, modal-base.css, dem Focus-Guard und allen a11y-relevanten Komponenten konsumiert. Defaults identisch zu aura-preferences.js v1.2.0. Zur Laufzeit vom Preferences-Modul überschrieben, wenn der Nutzer etwas anderes eingestellt hat. Typisiert via @property (siehe unten), damit sie interpoliert werden können und der Browser Werte validiert. ── Vollständigkeit (v1.0.6) ──────────────────────────────────── Vier Tokens, vier @property-Blöcke, vier :root-Defaults. Die beiden unteren waren bis v1.0.5 nicht deklariert — a11y.css v1.1.0 überbrückte die Lücke mit var()-Fallbacks. Seit v1.0.6 ist das Fundament vollständig, die Fallbacks bleiben als defensive zweite Ebene bestehen. ── Einheiten-Konsistenz mit aura-preferences.js v1.2.0 ───────── applyToDom() schreibt: --a11y-font-scale = String(state.fontScale) → "" --a11y-line-height = String(state.lineHeight) → "" --a11y-letter-spacing = state.letterSpacing + 'em' → "" --a11y-focus-ring = state.focusRing + 'px' → "" Jedes @property-syntax muss dazu passen. Falsche Syntax führt zu stillem Verwerfen der Zuweisung — kein Konsolenfehler, kein Fallback, nur wirkungslose Präferenz. ═══════════════════════════════════════════════════════════════════ */ --a11y-font-scale: 1; /* Bereich 0.9 – 1.4 · */ --a11y-line-height: 1.6; /* Bereich 1.4 – 2.0 · · NEU v1.0.6 */ --a11y-letter-spacing: 0em; /* Bereich 0 – 0.06em · · NEU v1.0.6 */ --a11y-focus-ring: 2px; /* Bereich 2 – 5 px · */ /* ═══════════════════════════════════════════════════════════════════ EBENEN · z-index als semantische Ordnung Die rohe Zahl lebt hier. Nirgends sonst. Werte folgen den Bändern aus ADR-css.1.0 (100er-Schritte): 100-199 Normaler Seiteninhalt 200-299 Sticky page-elements 300-399 Floating page-elements 400-499 Cross-cutting UI 500-599 Transient overlays 600-699 reserviert (bis v1.0.3: Toast) 700-749 Modals 750-799 Toast / Notifications (über Modals, Entscheidung E1) 800-899 Curtain 900-999 DevTools / Debug Die 100er-Bänder sind bewusst grob: innerhalb eines Bandes wird relativ gerechnet (calc(var(--ebene-modal) + 1)), nicht mit rohen Zahlen. Wer eine neue Ebene braucht, wählt die passende Band-Position. ═══════════════════════════════════════════════════════════════════ */ --ebene-deko: -1; /* Hintergrund-Dekorationen */ --ebene-base: 0; /* Dokumentenfluss */ /* 100-199: reserviert für zukünftige erhöhte Seiteninhalte. Aktuell unbenutzt. */ --ebene-sticky: 200; /* Sticky page-elements (Header, Tabs) */ --ebene-floating: 300; /* Floating page-elements (Lesefort- schritt, Back-to-Top) */ --ebene-crosscut: 400; /* Cross-cutting UI (Button-Stack, Skip-Link) */ --ebene-transient: 500; /* Transient overlays (Cookie-Banner, Lightbox) */ --ebene-modal: 700; /* Alle Dialoge (Modal, Tarot, A11y) */ --ebene-toast: 750; /* Toast / Notifications: über Modals */ --ebene-curtain: 800; /* Übergangs-Overlays (aura-curtains) */ --ebene-dev: 900; /* DevTools / Debug */ /* Letzter Ausweg außerhalb der Bänder. Nur historische Fälle. Neue Ebenen sollen innerhalb der Bänder bleiben. */ --ebene-notfall: 9999; } /* ═════════════════════════════════════════════════════════════════════ @PROPERTY · Typisierung und Interpolation Ohne @property kann der Browser Custom Properties nicht interpolieren und nicht validieren. Mit @property: · animierbare Werte (z. B. Fokus-Ring beim Öffnen wachsen lassen) · automatische Wertebereichs-Prüfung · korrekte Vererbung (inherits: false für lokale Werte) ACHTUNG: @property ist eine At-Regel, keine Deklaration. Sie darf auf Stylesheet-Ebene stehen, in @layer, @media oder @supports — aber nicht verschachtelt in einer Selektor-Regel (also nicht .foo { @property ... }) und nicht innerhalb von :root. Die aktuelle Platzierung ist Stylesheet-Ebene: funktioniert in jeder Kaskadenschicht. ═════════════════════════════════════════════════════════════════════ */ @property --a11y-font-scale { syntax: ""; inherits: true; initial-value: 1; } /* NEU v1.0.6 — line-height als einheitenlose Zahl. Semantik identisch zu einer CSS-Regel `line-height: 1.6` auf dem Element selbst: multipliziert die font-size des jeweiligen Elements. Der Wert erbt sich, wird aber auf jedem Nachfahren mit dessen font-size neu berechnet. */ @property --a11y-line-height { syntax: ""; inherits: true; initial-value: 1.6; } /* NEU v1.0.6 — letter-spacing als Länge. aura-preferences.js schreibt `state.letterSpacing + 'em'` → der Wert kommt als "0.02em", "0em" etc. an. syntax: "" akzeptiert em, px, rem und alle anderen Längen-Einheiten. syntax: "" würde die Zuweisung stumm verwerfen. */ @property --a11y-letter-spacing { syntax: ""; inherits: true; initial-value: 0em; } @property --a11y-focus-ring { syntax: ""; inherits: true; initial-value: 2px; }