/* ========================================================================== ESD TOKEN-CSS - die eine Token-Quelle (v5-Stand) @esd-tokens-version: 1.0.0 @stand: 2026-09-04 @sot: knowledge/design-system.md v5.0 (§1.1, §1.6, §2.2, §2.7, §3, §4, §8, §9, §11, §13) @paket: Frontend-Fundament Paket 1, Welle W1 (knowledge/token-css-briefing.md §5) ZWECK Jede Farbe, Schrift, Größe, Abstand, Radius, Schatten und Bewegung lebt GENAU EINMAL. Ebenen: Rohwert -> Rolle -> (später) Komponente. Diese Datei ändert KEINEN Design-Wert - sie gießt die in der SoT entschiedenen Werte in eine Form. Fehlt ein Wert in der SoT, steht hier [MISSING: ...] und Tobias entscheidet. LAUFORT (Tobias-Entscheid 2026-09-04, Briefing §2, Variante A) Diese Datei wird EINMAL GLOBAL über den esd-core-/Child-Theme-Weg geladen (wp_enqueue_style, hohe Priorität, filemtime-Cache-Buster). Sie ist deshalb als eigenständiges globales Stylesheet geschrieben: nur :root, keine Seiten-Annahmen, kein @import auf fremde Hosts (Schriften sind self-hosted). Das Einhängen selbst ist NICHT Teil dieser Datei - das ist Welle W2. ACHTUNG SCOPE (gemessen 2026-09-04, gilt bis zur Migration W4) Die Bestandsseiten definieren ihre Tokens in ZWEI Scopes: 7 Dateien nur in :root, 13 nur in .esd-canvas{}, 16 in beiden. Ein .esd-canvas{}-Token-Block einer noch nicht migrierten Seite ÜBERSCHREIBT die Werte dieser Datei innerhalb des Canvas-Teilbaums - gleiche Spezifität, spätere Position gewinnt. Das ist so gewollt und wird hier NICHT bekämpft (kein !important, keine Spezifitäts-Tricks): das Abräumen der Seiten-Blöcke ist die Aufgabe von W4 (Pilot-Migration) und dem Rollout danach. KOMMENTAR-KONVENTION (fest - das Gate token-drift-check.py (W3) und ein möglicher DTCG-Export docken daran an; Muster nicht ändern) esd-section: - Abschnitts-Banner, genau einmal je Abschnitt sot: Quelle des Abschnitts regel: verbindliche Regel des Abschnitts (die echten Marker tragen ein at-Zeichen davor; hier steht es bewusst nicht, damit diese Legende von keinem Parser als Abschnitt gelesen wird) [MISSING: ...] Wert fehlt in der SoT, Tobias entscheidet [TOBIAS-ENTSCHEID OFFEN - ...] Wert steht, ist aber nicht zementiert [NEUER NAME] Name in W1 vergeben, Wert aus der SoT [ALIAS] Bestandsname, schrumpft mit dem Rollout PFLEGE Wer einen Wert dreht, dreht ihn ZUERST in knowledge/design-system.md und zieht ihn dann hier nach - nie umgekehrt. Diese Datei ist Output der SoT. ========================================================================== */ /* ========================================================================== @esd-section: 1 - ROHWERTE @sot: knowledge/design-system.md §1.1, §2.2, §3 @regel: NUR in diesem Abschnitt stehen Hex- und rgba-Literale. Jeder --raw-*-Name ist 1:1 der SoT-Token-Name mit Präfix - damit bleibt jede Zeile gegen die SoT nachschlagbar. @regel: Kein Rollen-Token trägt ein Literal; es referenziert von hier. ========================================================================== */ :root{ /* --- Dunkle Elevation-Treppe (v2 - Tiefe = Helligkeit, §2.1) --- */ --raw-anchor: #0A0A0B; /* tiefster Anker unter allem (Sunken-Kontext) */ --raw-bg-deep: #111113; /* fast schwarz - Hero-/Statement-Grund (v2) */ --raw-elev-0: #1A1A1A; /* Basis-Sektion */ --raw-elev-1: #232328; /* Strip / leicht erhöht */ --raw-elev-2: #2C2C2E; /* Karte im Glas-/Elevation-Vokabular */ --raw-elev-3: #34343A; /* Hover-Pop */ --raw-bg-light: #f5f5f7; /* heller Atem-Moment (helle Insel, §6.3) */ /* --- Materie-Nacht (v4.3, Kern-Panel-Grammatik, §2.7) --- */ /* Wert-Lock (a) GESETZT 2026-09-04 (Tobias: "welche der beiden Farben wurde oefter verwendet? bitte diese dann verwenden"). Gemessen ueber website/: #0d0d10 in 67 Dateien / 167 Vorkommen gegen #111113 in 43 / 121. Deckt sich mit dem bisherigen SoT-Arbeits-Default. --raw-bg-deep #111113 bleibt als eigene v2-Treppenstufe. */ --raw-machine: #0d0d10; /* Canvas-/Sektions-Grund */ --raw-machine-sunken: #08080B; /* versenkte Fläche (Terminal/Feed) */ /* Wert-Lock (b) GESETZT 2026-09-04 auf #17171c (Tobias-Entscheid "die oefter verwendete"). Gemessene DEFINITIONEN in website/html/: #17171c 8x (index, infrastruktur, ki-stack, kategorie-solutions, ki-kundenkommunikation, ki-leadgenerierung(+coming-soon), ki-marketinganalyst) gegen #131318 4x (onlineshop, ratgeber, zahlungsarten, infrastruktur_sammlung). Am Live-Staging /ki-leadgenerierung/ ebenfalls als #17171c ausgeliefert. Loest die [EINBAU-FRAGE] in design-system.md Z.125 (b) auf; der fruehere SoT-Tabellenwert #131318 ist damit abgeloest. */ --raw-machine-panel: #17171c; /* Karte/Node - 1 Stufe heller als Grund, opak */ --raw-machine-panel-hi: #1B1C22; /* Hover-Pop / höhere Ebene */ --raw-machine-line: rgba(235,235,245,.16); /* Hairline */ --raw-machine-line-2: rgba(235,235,245,.22); /* betonte Objekt-/Aktiv-Kante */ /* --- Text off-white (nie reines Weiß; Sekundär über Opazität) --- */ --raw-text-primary: #FAFAF7; /* wertgleich --machine-text */ --raw-text-secondary: rgba(235,235,245,0.60); /* wertgleich --machine-text-2 */ --raw-text-tertiary: rgba(235,235,245,0.32); /* Mikro/Meta - nicht tragend */ --raw-machine-text-3: rgba(235,235,245,.40); /* Tertiär/Mikro NUR - 3,39:1 */ --raw-text-on-light: #1a1a1a; /* Text auf heller Insel, vgl. --ink */ /* --- Marken-Anker, Themen-Leitfarben, Status (§1.1/§1.3) --- */ --raw-accent: #0066FF; /* ESD-Blau - primärer Marken-Anker */ --raw-accent-hover: #0052cc; --raw-accent-glow: rgba(0,102,255,0.15); --raw-accent-lit: #3D8BFF; /* Blau-Leuchtspitze auf Dunkel - 5,85:1 */ --raw-accent-tint-d: rgba(61,139,255,.14); /* getönte Blau-Fläche auf Dunkel */ --raw-accent-text: #0052CC; /* Text-Blau auf heller Insel - 6,14:1 */ /* [NEUER NAME] Der Wert steht in der SoT §1.6 Regel 2 ("eine Stufe heller #4D9BFF, 4,95:1") als Zahl im Fließtext, ohne Token-Namen. */ --raw-accent-on-card: #4D9BFF; /* Text-Blau auf der Karten-Stufe #2c2c2e */ --raw-accent-tint: rgba(0,102,255,.08); /* getönte Blau-Fläche auf Hell */ --raw-c-infra: #0066FF; /* Infrastruktur + Dachmarke */ --raw-c-shop: #30D158; /* Onlineshop/Digital */ --raw-c-ai: #BF5AF2; /* AI/Solutions - nur KI-Kontext */ --raw-c-eng: #FF9F0A; /* Engineering, warmer Gegenpol */ --raw-c-eng-2: #FF375F; /* warmer Pol (Engineering-Story) */ --raw-c-live: #30D158; --raw-c-error: #FF453A; --raw-c-warn: #FFD60A; --raw-c-live-ink: #177A38; /* Status-Text auf heller Insel */ --raw-c-eng-ink: #9E5400; /* Status-Text auf heller Insel */ --raw-c-error-ink: #D70015; /* Status-Text auf heller Insel */ --raw-border: rgba(250,250,247,0.10); --raw-border-hover: rgba(250,250,247,0.18); /* --- Glas/Vibrancy (§2.2 - NUR für Schwebendes, nie Flächen-Default) --- */ /* [NEUER NAME] Die Werte stehen in der SoT §2.2 als Literale in der .esd-glass-Regel, ohne Token-Namen. */ --raw-glass: rgba(250,250,247,0.05); --raw-glass-hover: rgba(250,250,247,0.07); --raw-glass-lightedge: rgba(255,255,255,0.06); /* inset-Top-Lichtkante */ /* --- Gradienten G1-G3 (bedeutungstragend - Regeln §1.5) --- */ --raw-g1-outcome: linear-gradient(100deg,#0066FF 0%,#30D158 100%); --raw-g2-eng: linear-gradient(100deg,#FFBE22 0%,#B85400 100%); --raw-g3-ki: linear-gradient(100deg,#4C8DFF 0%,#A94BDD 36%,#F45FB4 70%,#FF9F5A 100%); /* --- Schatten-Treppe DUNKEL (Default, "eine Lichtquelle", §1.1/§2.1) --- */ --raw-shadow-d-sm: 0 1px 2px rgba(0,0,0,.5); --raw-shadow-d-md: 0 2px 4px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.35); --raw-shadow-d-lg: 0 4px 8px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.5); /* --- Helle-Insel-Tokens (NUR dosierte helle Regel-Inseln, §6.3) --- */ --raw-paper: #F5F5F7; --raw-paper-deep: #F0F0F2; --raw-panel: #FFFFFF; --raw-panel-hover: #FFFFFF; --raw-ink: #16181D; --raw-ink-2: rgba(22,24,29,.64); --raw-ink-3: rgba(22,24,29,.40); --raw-hair: rgba(22,24,29,.12); --raw-grid-fine: rgba(22,24,29,.035); /* nur noch Alt-Bestand - Raster gestrichen (§2.4) */ --raw-grid-main: rgba(22,24,29,.07); /* nur noch Alt-Bestand - Raster gestrichen (§2.4) */ --raw-shadow-sm: 0 1px 2px rgba(22,24,29,.06); --raw-shadow-md: 0 2px 6px rgba(22,24,29,.07), 0 12px 32px rgba(22,24,29,.08); --raw-shadow-lg: 0 4px 10px rgba(22,24,29,.08), 0 24px 48px rgba(22,24,29,.12); /* --- Schriftfamilien (§3 - Inter durchgehend, self-hosted) --- */ --raw-font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --raw-font-jetbrains: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ========================================================================== @esd-section: 2 - ROLLEN @sot: knowledge/design-system.md §1.1, §1.3, §1.5, §2.7, §3 @regel: Rollen tragen die kanonischen SoT-Namen und referenzieren Abschnitt 1 (Rohwerte) bzw. Abschnitt 8 (Brand-Layer). @regel: Alles, was pro Kunde wechseln DARF, zeigt auf den Brand-Layer - nie direkt auf einen Rohwert. Die Reihenfolge im Dokument ist egal: CSS löst Custom Properties erst an der Verwendungsstelle auf. @regel: Ein Rohwert, mehrere Rollen-Namen (Token-Landkarte §1.1) - --machine-text ist derselbe Wert wie --text-primary, kein zweiter. ========================================================================== */ :root{ /* --- Grund + Fläche (dunkel = Default) --- */ --machine: var(--brand-ground); --machine-sunken: var(--raw-machine-sunken); --machine-panel: var(--raw-machine-panel); --machine-panel-hi: var(--raw-machine-panel-hi); --anchor: var(--raw-anchor); --bg-deep: var(--raw-bg-deep); --elev-0: var(--raw-elev-0); --elev-1: var(--raw-elev-1); --elev-2: var(--raw-elev-2); --elev-3: var(--raw-elev-3); --bg-light: var(--raw-bg-light); /* --- Glas-Material (§2.2 - nur schwebende Elemente) --- */ --glass-bg: var(--raw-glass); --glass-bg-hover: var(--raw-glass-hover); --glass-lightedge: var(--raw-glass-lightedge); /* --- Text (Dunkel-Default) --- */ --text-primary: var(--brand-ground-text); --text-secondary: var(--raw-text-secondary); --text-tertiary: var(--raw-text-tertiary); --text-on-light: var(--raw-text-on-light); --machine-text: var(--text-primary); /* wertgleiche Zweitrolle (§1.1) */ --machine-text-2: var(--text-secondary); /* wertgleiche Zweitrolle (§1.1) */ --machine-text-3: var(--raw-machine-text-3); /* --- Rahmen / Linien --- */ --border: var(--raw-border); --border-hover: var(--raw-border-hover); --machine-line: var(--raw-machine-line); --machine-line-2: var(--raw-machine-line-2); --hair: var(--raw-hair); /* --- Akzent (Interaktion - Blau-Disziplin §1.2) --- */ --accent: var(--brand-primary); --accent-hover: var(--brand-primary-hover); --accent-lit: var(--brand-primary-lit); --accent-text: var(--brand-primary-on-light); --accent-on-card: var(--raw-accent-on-card); --accent-glow: var(--raw-accent-glow); --accent-tint: var(--raw-accent-tint); --accent-tint-d: var(--raw-accent-tint-d); /* --- Themen-Leitfarben (§1.3 - 4 gleichrangige Bereichsfarben) --- */ --c-infra: var(--raw-c-infra); --c-shop: var(--raw-c-shop); --c-ai: var(--raw-c-ai); --c-eng: var(--raw-c-eng); --c-eng-2: var(--raw-c-eng-2); /* --- Signal / Status (Farbe nie allein als Informationsträger, §1.3) --- */ --c-live: var(--raw-c-live); --c-error: var(--raw-c-error); --c-warn: var(--raw-c-warn); --c-live-ink: var(--raw-c-live-ink); /* Status-Text auf heller Insel */ --c-eng-ink: var(--raw-c-eng-ink); --c-error-ink: var(--raw-c-error-ink); /* --- Gradienten (§1.5 - jeder kodiert einen Übergang) --- */ --g1-outcome: var(--raw-g1-outcome); --g2-eng: var(--raw-g2-eng); --g3-ki: var(--raw-g3-ki); /* --- Schatten --- */ --shadow-d-sm: var(--raw-shadow-d-sm); --shadow-d-md: var(--raw-shadow-d-md); --shadow-d-lg: var(--raw-shadow-d-lg); --shadow-sm: var(--raw-shadow-sm); --shadow-md: var(--raw-shadow-md); --shadow-lg: var(--raw-shadow-lg); /* --- Helle Insel (§6.3 - Geld/Garantie/Formular, dosiert) --- */ --paper: var(--raw-paper); --paper-deep: var(--raw-paper-deep); --panel: var(--raw-panel); --panel-hover: var(--raw-panel-hover); --ink: var(--raw-ink); --ink-2: var(--raw-ink-2); --ink-3: var(--raw-ink-3); --grid-fine: var(--raw-grid-fine); --grid-main: var(--raw-grid-main); /* --- Schrift-Rollen --- */ --font-heading: var(--brand-font-display); --font-body: var(--brand-font-body); --font-mono: var(--brand-font-mono); } /* ========================================================================== @esd-section: 3 - LAYER-MODELL @sot: knowledge/design-system.md §2.1, §2.7, §1.6, §6.3, §13 @regel: Eine Karte sitzt NIE auf demselben Ton wie ihr Grund (§2.1). Wer eine Fläche auf eine Fläche legt, geht EINE Layer-Stufe hoch und nimmt Text-, Linien- und Feld-Token DIESER Stufe mit. @regel: Feld-Regel (Vorbild IBM Carbon): das Eingabefeld auf Layer N trägt den Grund von Layer N+1 - sonst verschwindet es im Panel. @regel: Die dritte Bühne ist real (§1.6): auf Layer 3 (#2C2C2E) fallen Töne um rund 1,5 Stufen - deshalb hat Layer 3 ein eigenes Akzent-Token. Vor jeder Farbkorrektur die Bühne im DOM messen, nicht aus dem Klassennamen schließen. @regel: Sektions-Gründe wechseln NICHT (§2.7) - alle dunklen Sektionen einer Seite stehen auf Layer 0. Elevation kommt vom OBJEKT, nicht von der Fläche. ========================================================================== */ :root{ /* --- Layer -1: versenkt (Terminal/Feed/Live-Fenster, .esd-dsunken) --- */ --layer-sunken: var(--machine-sunken); --layer-sunken-text: var(--text-primary); --layer-sunken-text-2: var(--text-secondary); --layer-sunken-line: var(--machine-line); /* --- Layer 0: Bühne / Canvas-Grund (.esd-canvas, jede dunkle Sektion) --- */ --layer-0: var(--machine); --layer-0-text: var(--text-primary); --layer-0-text-2: var(--text-secondary); --layer-0-text-3: var(--machine-text-3); --layer-0-line: var(--machine-line); --layer-0-line-2: var(--machine-line-2); --layer-0-accent: var(--accent-lit); --layer-0-field: var(--layer-1); /* Carbon-Feldregel */ --layer-0-focus: var(--accent-lit); /* --- Layer 1: Karte/Panel auf der Bühne (.esd-dpanel) --- */ --layer-1: var(--machine-panel); --layer-1-text: var(--text-primary); --layer-1-text-2: var(--text-secondary); --layer-1-text-3: var(--machine-text-3); --layer-1-line: var(--machine-line); --layer-1-line-2: var(--machine-line-2); --layer-1-accent: var(--accent-lit); --layer-1-field: var(--layer-2); /* Carbon-Feldregel */ --layer-1-focus: var(--accent-lit); /* --- Layer 2: Karte in Karte / Hover-Pop --- */ --layer-2: var(--machine-panel-hi); --layer-2-text: var(--text-primary); --layer-2-text-2: var(--text-secondary); --layer-2-text-3: var(--machine-text-3); --layer-2-line: var(--machine-line); --layer-2-line-2: var(--machine-line-2); --layer-2-accent: var(--accent-lit); --layer-2-field: var(--layer-3); /* Carbon-Feldregel */ --layer-2-focus: var(--accent-lit); /* --- Layer 3: hellste Karten-Stufe (die "dritte Bühne", §1.6) --- */ --layer-3: var(--elev-2); --layer-3-text: var(--text-primary); --layer-3-text-2: var(--text-secondary); /* NICHT #8E8E93 - dort 4,27:1 (§1.6) */ --layer-3-text-3: var(--machine-text-3); /* 3,19:1 - nur Mikro-Signale */ --layer-3-line: var(--border); --layer-3-line-2: var(--border-hover); --layer-3-accent: var(--accent-on-card); /* #4D9BFF statt --accent-lit (§1.6 Regel 2) */ --layer-3-field: var(--elev-3); /* Carbon-Feldregel */ --layer-3-focus: var(--accent-on-card); /* --- Helle Insel als eigener Layer-Satz (§6.3 / §13 .esd-tone-light) --- */ --layer-light-0: var(--paper); --layer-light-0-text: var(--ink); --layer-light-0-text-2: var(--ink-2); --layer-light-0-text-3: var(--ink-3); --layer-light-0-line: var(--hair); --layer-light-0-accent: var(--accent-text); --layer-light-0-field: var(--layer-light-1); /* Carbon-Feldregel: Feld = weißes Panel */ --layer-light-0-focus: var(--accent); /* auf Hell #0066FF (§13.1) */ --layer-light-1: var(--panel); /* Karte auf der Papier-Insel */ --layer-light-1-text: var(--ink); --layer-light-1-text-2: var(--ink-2); --layer-light-1-text-3: var(--ink-3); --layer-light-1-line: var(--hair); --layer-light-1-accent: var(--accent-text); --layer-light-1-field: var(--paper-deep); /* Carbon-Feldregel: Feld dunkler als Karte */ --layer-light-1-focus: var(--accent); --layer-light-deep: var(--paper-deep); /* ruhigere Papier-Stufe */ } /* ========================================================================== @esd-section: 4 - TYPO-ROLLEN @sot: knowledge/design-system.md §3, §3.1, §3.2, §3.3, §3.5, §11 @regel: Headlines fluid (clamp), Body/Meta fix. Tracking ist eine Funktion der Größe: groß -> negativ, klein -> positiv; nie positives Tracking auf Headings über 28px. @regel: Inter durchgehend. JetBrains Mono NUR für echte Maschinen-Ausgabe (Terminal, Code, IDs) und technische Zeichnungsbeschriftung. @regel: Diese Skala gilt für .esd-canvas-Seiten. WP-native Flächen (Woo, Elementor-Widgets, Ratgeber) haben ihre EIGENE, dichtere Skala in §3.6 - sie ist hier bewusst nicht abgebildet. @hinweis: --text-display/-headline/-title/-body sind Bestandsnamen (21 Dateien); --text-lead, --text-meta, --text-label sowie alle alle --track- und --lh-Tokens sind in W1 vergeben. Werte unverändert SoT. ========================================================================== */ :root{ /* --- Größen (§3.1) --- */ --text-display: clamp(64px, 9vw, 120px); /* Hero-H1 */ --text-headline: clamp(40px, 6vw, 72px); /* H2 - nie unter 40px (§4) */ --text-title: clamp(24px, 4vw, 40px); /* H3 */ --text-lead: clamp(19px, 2.4vw, 24px); /* [NEUER NAME] Lead */ --text-body: 17px; /* fix */ --text-meta: 13px; /* [NEUER NAME] fix */ --text-label: 13px; /* [NEUER NAME] = Meta-Stufe (§3.1 Eyebrow) */ /* --- Statement-Typo auf großen Bildschirmen (§3.5, Wide-Stufe) --- */ /* [NEUER NAME] Werte aus der Tabelle §3.5; die SoT notiert das vw-Glied dort mit einer Tilde (~8.6vw / ~1.35vw) - Referenz-Implementierung ist der Hero von website/html/kategorie-solutions.html. Nur für Hero-/ Statement-Sektionen, nicht für dichte Content-Sektionen. */ --text-display-wide: clamp(44px, 8.6vw, 420px); --text-lead-wide: clamp(18px, 1.35vw, 54px); /* --- Gewichte (§3.2 - max. 3 Gewichte; 700 optional für Display) --- */ --fw-normal: 400; /* Body */ --fw-medium: 500; /* Label */ --fw-semibold: 600; /* Headlines/Buttons/Display */ --fw-bold: 700; /* optional Display/Hero-Signatur */ /* --- Tracking (§3.1) --- */ --track-display: -0.03em; --track-headline: -0.022em; --track-title: -0.015em; --track-lead: -0.01em; --track-body: 0; --track-meta: 0.005em; /* --- Zeilenhöhen (§3.1) --- */ /* [MISSING: --lh-display - die SoT §3.1 nennt für Display eine SPANNE 1.05-1.10, keinen Einzelwert. Kein Token, bis Tobias einen Wert festlegt; bis dahin setzt die Seite den Wert bewusst selbst.] */ --lh-headline: 1.09; --lh-title: 1.18; --lh-lead: 1.4; --lh-body: 1.55; --lh-meta: 1.45; /* --- Zeilenlänge (§3.3 / §11) --- */ --measure: 700px; /* Fließtext-

max-width - nie volle Breite */ --measure-lead: 800px; /* [NEUER NAME] Lead darf bis 800px (§3.3) */ /* @hinweis: §3.5 Falle 4 - --measure auf großen Schirmen in em denken (rund 32em entsprechen etwa 65 Zeichen), nicht als fixen px-Wert. */ } /* ========================================================================== @esd-section: 5 - SPACING, BREITEN, RADIUS, BREAKPOINTS @sot: knowledge/design-system.md §11, §11.1, §4, §2.7, §3.6 @regel: 8-Punkt-Raster hart. Erlaubte Stufen (§4): 4 8 12 16 24 32 40 48 64 80 96 120 160 200 px. clamp-Endwerte 8-rein, keine krummen Werte (13/27px). @regel: Seitenrand mindestens 22px mobil (Defense-Mobile-Padding einrechnen). @regel: Der Sektions-Abstand ist ein BODEN je Sektion, kein Rhythmus-Rezept - Abstände staffeln (§4: eng rund 160-170 / mittel rund 250 / groß rund 370-430 px Desktop); jede Floor-Unterschreitung wird im Page-Brief dokumentiert. ========================================================================== */ :root{ /* --- Abstände (§11) --- */ --space-section: clamp(120px, 15vw, 200px); --space-inner: clamp(48px, 8vw, 96px); --space-element: clamp(16px, 3vw, 32px); /* --- Breiten-Register, drei Stufen (§11.1) --- */ --max-width: 1200px; /* Content - Default: Fließtext, Grids, Formulare */ --content-width: 800px; /* schmale Content-Spalte */ --wide-pad: clamp(24px, 5vw, 88px); /* Wide - randnah statt max-width */ /* Full-Bleed = 100% ohne Padding; dafür braucht es kein Token (§11.1). */ /* --- Radius-Kanon (§11 #31, §4, §2.7, §3.6) --- */ /* [NEUER NAME] Der Kanon steht in der SoT als Prosa mit Spannen, ohne Token-Namen. Die Werte hier sind die in der SoT genannten Einzelwerte: Pill 100px (§11/§4) - Panel 22px (§2.7 .esd-dpanel) - Inset 16px (§2.7 .esd-dsunken) - Formularfeld 12px (§3.6) - Fokus-Ziel 8px (§9). Karte 24px liegt in beiden SoT-Spannen (§11: 20-24px, §4: 20-32px) und ist zugleich der Bestands-Default. @regel: keine weiteren Radius-Werte erfinden (§11 #31). */ --radius-pill: 100px; /* Buttons/Chips/Etiketten - nie eckig */ --radius-card: var(--brand-radius-character); --radius-panel: 22px; /* .esd-dpanel */ --radius-inset: 16px; /* Inset/Sunken/.esd-dsunken */ --radius-field: 12px; /* Formularfeld */ --radius-focus: 8px; /* Fokus-Ring an runden Zielen */ --radius-doc: 6px; /* Sonderfall Urkunde - dokumentationspflichtig */ --radius-none: 0; /* Sonderfall Zeichnungsfeld - dokumentationspflichtig */ /* --- Breakpoints als dokumentierte KONSTANTEN (§11) --- */ /* @regel: Custom Properties greifen in Media-Queries NICHT - @media (min-width: var(--bp-tablet)) ist ungültig und wird still verworfen. Diese Tokens sind Dokumentation und dienen JS-Abfragen (getComputedStyle); in der @media-Zeile steht die Zahl. Kanonische Skala: 480 (Mobile-Defense) - 768 (Tablet) - 1024 (Desktop schmal) - 1440 (Design-Referenz). Zwischenwerte nur begründet (zum Beispiel Rail ab 1360). */ --bp-mobile: 480px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-design: 1440px; } /* ========================================================================== @esd-section: 6 - MOTION @sot: knowledge/design-system.md §8.1, §8.2, §8.6, §9, §9.3 @regel: Compositor-only - nur transform/opacity/filter animieren, nie Layout-Properties. Kein transition: all. @regel: linear ist verboten - außer Endlos-Loops (Puls/Spur) und scroll-getriebenen Animationen. @regel: Jede Animation hat einen prefers-reduced-motion-Zweig. Ohne ist sie nicht fertig. Der globale Zweig unten ist die Basis, nicht der Ersatz für den Zweig an der einzelnen Animation. @regel: RUHE-Liste - Preise, Preisleiter, Trust/Garantie, Body und CTAs tragen KEINE Endlos-Loops im Ruhezustand. ========================================================================== */ :root{ /* --- Easing (§8.1, 2+1) --- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Entrances / Reveals / Hover */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Morph im Viewport */ --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* NUR spielerische Mikro-Akzente, NIE auf Preis/Trust/Text */ /* --- Dauern (§8.1 - "Dauer skaliert mit Distanz") --- */ /* [NEUER NAME] Die SoT führt die Dauern als Kommentar ohne Token-Namen. Werte unverändert: Hover 180ms (auch §9 Button-Hover) - Stroke-Draw rund 600ms (§8.6) - Reveal 650ms - großer Slide 850ms - Sticky-CTA rein 350ms / raus 120ms (§9.3, "Ausfahrt kürzer als Einfahrt"). @widerspruch: §8.1 sagt zugleich "Unter 200ms = Glitch" und "Hover 180ms". Beide Zahlen stehen so in der SoT; --dur-hover trägt 180ms, weil §9 diesen Wert für .btn:hover wiederholt. */ --dur-hover: 180ms; --dur-draw: 600ms; --dur-reveal: 650ms; --dur-slide: 850ms; --dur-sticky-in: 350ms; --dur-sticky-out: 120ms; /* --- Stagger (§8.1) --- */ --stagger-dense: 70ms; /* dichte Grids */ --stagger-block: 120ms; /* große Blöcke */ --motion-total-max: 1200ms; /* Dokumentations-Konstante: Gesamt-Choreografie unter 1,2s */ } /* @esd-subsection: 6b - reduced-motion (globaler Fallback) @sot: §8.2 ("jede Animation hat einen reduced-motion-Zweig") @regel: Abschalten allein reicht nicht - die Tokens tragen hier FALLBACK- WERTE, damit auf Zustände gebaute Logik (transitionend, .in-Klassen, Sticky-Ein-/Ausblendung) weiter feuert statt hängen zu bleiben. [MISSING: Die SoT nennt keine Zahl für die reduzierte Dauer. 1ms ist hier ein mechanischer Wert (praktisch sofort, aber größer als 0, damit transitionend zuverlässig auslöst), keine Design-Entscheidung. Will Tobias eine spürbare Rest-Dauer, wird sie hier gesetzt.] @regel: Easing bleibt unverändert - bei 1ms ohne Wirkung, und ein Wechsel auf linear wäre ein Verstoß gegen §8.1. */ @media (prefers-reduced-motion: reduce){ :root{ --dur-hover: 1ms; --dur-draw: 1ms; --dur-reveal: 1ms; --dur-slide: 1ms; --dur-sticky-in: 1ms; --dur-sticky-out: 1ms; --stagger-dense: 0ms; --stagger-block: 0ms; --motion-total-max: 1ms; } } /* ========================================================================== @esd-section: 7 - FOKUS + ZIELGRÖSSEN @sot: knowledge/design-system.md §9, §13.1, §4 (#27), §1.6 @regel: Der Fokus-Ring ist Pflicht auf JEDEM interaktiven Element. Nie outline: none ohne gleichwertigen Ersatz. @regel: Die Ring-Farbe folgt der BÜHNE, nicht dem Element: auf Dunkel --accent-lit, auf der hellen Insel --accent, auf der Karten-Stufe (Layer 3) --accent-on-card (§1.6 Regel 2). Die fertigen Werte je Ebene stehen als --layer-*-focus in Abschnitt 3. @regel: WCAG 2.2 SC 2.4.11 Focus Not Obscured - Sticky-/Fixed-Elemente dürfen den Tastatur-Fokus nie verdecken (scroll-margin einplanen). ========================================================================== */ :root{ --focus-width: 2px; /* §9 und §13.1 übereinstimmend */ /* @widerspruch (nicht selbst aufgelöst): §9 setzt outline-offset ausdrücklich auf 3px ("3px ist ab jetzt Kanon", 2026-08-28) und nennt die 2px-Fassung als Herkunft aus dem Defense-Block; §13.1 (2026-07-17) sagt weiter "offset 2px". Hier steht der jüngere, ausdrücklich kanonisierte Wert. Auflösung gehört in W5. */ --focus-offset: 3px; --focus-radius: var(--radius-focus); /* an runden/gerundeten Zielen */ /* Ring-Farben je Bühne - Kurznamen für den Defense-Block */ --focus-ring-dark: var(--accent-lit); /* 5,85:1 auf Layer 0 */ --focus-ring-card: var(--accent-on-card); /* 4,94:1 auf Layer 3 */ --focus-ring-light: var(--accent); /* 4,83:1 gegen Weiß */ /* --- Zielgrößen --- */ --target-min: 44px; /* ESD-Floor (§4 #27) - jedes klickbare Element */ --target-min-wcag: 24px; /* WCAG 2.2 SC 2.5.8 - Dokumentations-Konstante; der ESD-Floor ist strenger und gilt */ } /* ========================================================================== @esd-section: 8 - BRAND-LAYER @sot: knowledge/design-system.md §1.1, §1.3, §3, §11 + technik/handbuch/03-frontend-design.md §3a1/§3b @regel: DIES ist der einzige Block, den ein Kundenprojekt austauscht. Alles darüber bleibt unverändert. Ein Kunde bekommt denselben Block mit anderen Werten - kein zweites Token-System. @regel: Jede Rolle, die pro Kunde wechseln darf, referenziert NUR diesen Block (Abschnitt 2: --accent, --accent-hover, --accent-lit, --accent-text, --machine, --text-primary, --font-heading, --font-body, --font-mono, --radius-card). @regel: Bei ESD ist der Block mit den ESD-Werten gefüllt - für ESD ändert sich damit nichts. ========================================================================== */ :root{ /* 1 Primärfarbe (Interaktion, CTA, Link, aktiver Zustand) */ --brand-primary: var(--raw-accent); /* 2 Primär-Hover */ --brand-primary-hover: var(--raw-accent-hover); /* 3 Primär auf dunklem Grund (Linie/Fokus/UI-Blau) */ --brand-primary-lit: var(--raw-accent-lit); /* 4 Primär als Text auf hellem Grund */ --brand-primary-on-light: var(--raw-accent-text); /* 5 Sekundärfarbe der Marke [MISSING: --brand-secondary - die SoT kennt einen primären Anker (#0066FF) und VIER gleichrangige Themen-Leitfarben (§1.3), aber keine Marken-Sekundärfarbe. Für ESD wäre jede Wahl geraten; ein Kundenprojekt braucht den Platz. Die Zeile bleibt bewusst auskommentiert, bis Tobias entscheidet.] --brand-secondary: ; */ /* 6 Grund (Bühne) */ --brand-ground: var(--raw-machine); /* 7 Text auf dem Grund */ --brand-ground-text: var(--raw-text-primary); /* 8 Schrift Display/Headline */ --brand-font-display: var(--raw-font-inter); /* 9 Schrift Body/UI */ --brand-font-body: var(--raw-font-inter); /* 9b Schrift Maschine (Terminal/Code/IDs) */ --brand-font-mono: var(--raw-font-jetbrains); /* 10 Radius-Charakter (die eine Zahl, die eine Marke weich oder streng macht) */ --brand-radius-character: 24px; /* 11 Logo-Pfade [MISSING: Logo - ESD hat kein Logo (knowledge/company.md Z.18 führt einen Platzhalter). Es wird kein Pfad erfunden. Sobald das Logo existiert (Frontend-Fundament Paket 2), kommen hier die Fassungen hinein - hell, dunkel, Bildmarke, Favicon - jeweils als url(...) auf einen root-relativen Pfad unter /wp-content/.] --brand-logo-light: ; --brand-logo-dark: ; --brand-logo-mark: ; */ } /* ========================================================================== @esd-section: 9 - ALIAS (Bestandsschutz, schrumpft mit dem Rollout) @sot: Bestandsnamen aus dem W0-Inventar 2026-09-04 @regel: Hier steht NUR ein Alt-Name, der (a) in Bestandsseiten real benutzt wird UND (b) eine echte SoT-Rolle hat. Namen ohne SoT-Entsprechung stehen bewusst NICHT hier - sie sind Streichkandidaten (Liste im W1-Bericht). @regel: Der Alias zeigt auf die ROLLE, nicht auf den alten WERT. Wo der Bestandswert vom SoT-Wert abweicht, steht die Abweichung als Kommentar dahinter - das ist Absicht: Bestandsseiten sollen nicht brechen, die Drift soll aber nicht zementiert werden. @regel: Dieser Abschnitt ist auf Rückbau angelegt. Jede migrierte Seite (ab W4) nimmt Zeilen von hier weg. Ziel ist die leere Liste. ========================================================================== */ :root{ /* --- Flächen (v1-Namen -> Elevation-Treppe) --- */ --bg-primary: var(--elev-0); /* [ALIAS] wertgleich #1a1a1a - 23 Dateien */ --bg-secondary: var(--elev-1); /* [ALIAS] Wert-Delta: Bestand #1c1c1e -> SoT #232328 - 20 Dateien */ --bg-tertiary: var(--elev-2); /* [ALIAS] wertgleich #2c2c2e - 20 Dateien */ --bg-glass: var(--glass-bg); /* [ALIAS] Wert-Delta: Bestand rgba(255,255,255,.04) -> SoT §2.2 rgba(250,250,247,.05) - 22 Dateien */ /* --- Typo (Bestandsnamen ohne SoT-Entsprechung im Namen) --- */ --text-body-lg: var(--text-lead); /* [ALIAS] Wert-Delta: der Bestand führt drei Fassungen (clamp 18/2.5vw/24, 17/2.4vw/21, 18/2.5vw/22) -> SoT Lead clamp(19px,2.4vw,24px) - 21 Dateien */ --text-caption: var(--text-meta); /* [ALIAS] wertgleich 13px - 21 Dateien */ /* --- Radius --- */ --radius-btn: var(--radius-pill); /* [ALIAS] wertgleich 100px - 11 Dateien (Ausreißer 980px in design-system.css) */ --radius-md: var(--radius-field); /* [ALIAS] wertgleich 12px - 10 Dateien */ /* --- 8pt-Raster-Stufen (Bestandsnamen, alle Werte auf dem Raster §4) --- */ --space-xs: 0.5rem; /* [ALIAS] 8px - 8 Dateien */ --space-sm: 1rem; /* [ALIAS] 16px - 8 Dateien */ --space-md: 1.5rem; /* [ALIAS] 24px - 8 Dateien */ --space-lg: 2.5rem; /* [ALIAS] 40px - 8 Dateien */ --space-xl: 4rem; /* [ALIAS] 64px - 8 Dateien */ --space-2xl: 6rem; /* [ALIAS] 96px - 8 Dateien */ /* --- Farbnamen ohne Bedeutungsbindung (§1.3 bindet sie an Bereiche) --- */ /* @hinweis: Diese Namen sagen die Farbe, nicht den Zweck. Beim Rollout durch das bedeutungstragende Token ersetzen - Grün ist je nach Ort --c-shop (Bereich) ODER --c-live (Status), das kann ein Alias nicht unterscheiden. */ --color-green: var(--c-shop); /* [ALIAS] wertgleich #30D158 - 20 Dateien */ --color-orange: var(--c-eng); /* [ALIAS] wertgleich #FF9F0A - 18 Dateien */ --color-pink: var(--c-eng-2); /* [ALIAS] wertgleich #FF375F - 16 Dateien */ --color-yellow: var(--c-warn); /* [ALIAS] wertgleich #FFD60A - 16 Dateien */ --color-purple: var(--c-ai); /* [ALIAS] wertgleich #BF5AF2 - 9 Dateien */ --color-red: var(--c-error); /* [ALIAS] wertgleich #FF453A - 9 Dateien */ /* --- Gradienten --- */ --gradient-accent: var(--g1-outcome); /* [ALIAS] Winkel-Delta: Bestand 135deg -> SoT 100deg - 19 Dateien */ --gradient-cool: var(--g1-outcome); /* [ALIAS] Winkel-Delta: Bestand 135deg -> SoT 100deg - 9 Dateien */ --gradient-eng: var(--g2-eng); /* [ALIAS] wertgleich - 1 Datei (kategorie-engineering) */ /* @hinweis: Bewusst NICHT aliasiert, obwohl breit benutzt - Begründung im W1-Bericht: --accent-eyebrow (die blaue Eyebrow ist seit §3.1 verboten) - --gradient-warm und --gradient-hero (keine SoT-Gradienten; --gradient-hero ist außerdem Grau-Emphase, §1.4) - --transition/--transition-slow (Dauer und Easing in einem Wert, das Easing stammt nicht aus §8.1) - --radius-sm/-lg/-xl/-full (Größen-Skala statt Radius-Kanon, §11 #31 "keine weiteren Werte erfinden") - --color-blue #0A84FF und --color-cyan #64D2FF (beide nicht in der SoT). */ } /* ========================================================================== @esd-section: 10 - KONTRAST-MATRIX (gerechnet, nicht geschätzt) @sot: knowledge/design-system.md §1.6 (fortgeschrieben) @methode: WCAG-2.x-Relativluminanz (sRGB, Gamma 2.4) auf den Token-Werten dieser Datei; halbtransparente Töne VORHER auf ihren Layer gerechnet (Alpha-Komposit), nicht auf Weiß. Gerechnet 2026-09-04 mit einem Skript, nicht abgelesen. @schwelle: 4,50:1 tragender Text - 3,00:1 großer Text (ab 24px bzw. ab 18,66px mit Gewicht 600) sowie UI-Komponenten und Grafik-Objekte. @regel: Jede NEUE Text-/Grund-Kombination wird gemessen, bevor sie gebaut wird (§1.6 Regel 4, Skript kontrast-check.py). @regel: Die Korrektur ist richtungsabhängig - auf Dunkel nach HELLER, auf Papier nach DUNKLER. Der häufigste Fehler ist, den Dunkel-Wert auf eine helle Insel zu setzen (#3D8BFF auf Papier ergibt 3,04:1). --- DUNKLE BÜHNEN -------------------------------------------------------- Spalten: L0 --machine #0d0d10 | L1 --machine-panel #131318 | L2 --machine-panel-hi #1B1C22 | L3 --elev-2 #2C2C2E | SK --machine-sunken #08080B Vordergrund L0 L1 L2 L3 SK --text-primary #FAFAF7 18,56 17,71 16,25 13,33 19,13 ok --text-secondary rgba(...,.60) 6,30 6,20 5,95 5,27 6,32 ok (Floor tragender Text) --machine-text-3 rgba(...,.40) 3,39 3,42 3,39 3,19 3,34 REISST 4,50 auf ALLEN Ebenen -> nur Mikro-Signale, Information liegt dort nie exklusiv --text-tertiary rgba(...,.32) 2,58 2,63 2,65 2,56 2,52 REISST auch 3,00 auf ALLEN Ebenen -> für Text unzulässig --accent-lit #3D8BFF 5,85 5,59 5,13 4,20 6,03 L3 REISST 4,50 (4,20) -> auf L3 klein nicht zulässig, groß/UI ja; sonst --accent-on-card --accent-on-card #4D9BFF 6,88 6,57 6,03 4,94 7,09 ok (das L3-Blau) --accent #0066FF 4,01 3,83 3,52 2,88 4,14 REISST 4,50 auf ALLEN Ebenen -> nur Display-Wort/UI (>=3:1); auf L3 (2,88) REISST auch 3,00, dort gar nicht verwenden --c-live #30D158 9,60 9,16 8,40 6,89 9,89 ok --c-eng #FF9F0A 9,44 9,01 8,27 6,78 9,73 ok --c-warn #FFD60A 13,75 13,12 12,04 9,87 14,17 ok --c-error #FF453A 5,70 5,44 4,99 4,09 5,87 L3 REISST 4,50 (4,09), groß/UI ok --c-ai #BF5AF2 5,51 5,26 4,82 3,96 5,68 L3 REISST 4,50 (3,96), groß/UI ok Weitere dunkle Gründe (Elevation-Treppe, falls eine Seite sie statt der Materie-Nacht nutzt) - nur die Randfälle: --text-secondary auf --elev-3 #34343A 4,87 ok, aber die dünnste Reserve der Treppe --accent-lit auf --elev-1 #232328 4,72 ok --accent-lit auf --elev-3 #34343A 3,73 REISST 4,50 - groß/UI ok, klein nein --accent auf --elev-3 #34343A 2,56 REISST auch 3,00 - auch als UI unzulässig --anchor #0A0A0B verhält sich wie L0/SK (18,92 / 6,32 / 3,36 / 2,54). --bg-deep #111113 verhält sich wie L0 (18,04 / 6,24 / 3,41 / 2,61). --- HELLE INSEL ----------------------------------------------------------- Spalten: P --paper #F5F5F7 | PD --paper-deep #F0F0F2 | W --panel #FFFFFF Vordergrund P PD W --ink #16181D 16,31 15,60 17,76 ok --ink-2 rgba(22,24,29,.64) 5,15 5,06 5,32 ok (Body-Standard helle Insel) --ink-3 rgba(22,24,29,.40) 2,50 2,48 2,54 REISST auch 3,00 -> nur Mikro-Signale --accent-text #0052CC 6,26 5,99 6,82 ok (Links, blaue Inline-Wörter) --accent #0066FF 4,44 4,25 4,83 P und PD REISSEN 4,50 -> nur Display-Wort/UI; auf Weiß (Button-Grund) ok --accent-lit #3D8BFF 3,04 2,91 3,31 REISST 4,50 überall, PD auch 3,00 - das ist der Dunkel-Wert, auf Papier verboten (§1.6 Regel 2) --c-live-ink #177A38 4,97 4,76 5,42 ok --c-eng-ink #9E5400 5,18 4,96 5,64 ok --c-error-ink #D70015 4,94 4,73 5,38 ok --c-live #30D158 1,86 1,78 2,02 REISST weit -> auf Hell verboten, --c-live-ink nutzen --c-eng #FF9F0A 1,89 1,81 2,06 REISST weit -> --c-eng-ink nutzen --c-error #FF453A 3,13 2,99 3,41 REISST 4,50 (PD auch 3,00) -> --c-error-ink nutzen --- FLÄCHE AUF FLÄCHE (Buttons, Kauf-Weg) --------------------------------- Weiß #FFFFFF auf --accent #0066FF 4,83 ok (Primary-Button) Weiß #FFFFFF auf --accent-hover #0052cc 6,82 ok (Hover-Zustand) Weiß #FFFFFF auf Schwarz (Kauf-Primär, §3.6) 21,00 ok --- ABWEICHUNGEN ZUR SoT-TABELLE §1.6 (gemeldet, nicht korrigiert) -------- 1) Die Papier-Zeilen in §1.6 sind gegen #f4f3ef gerechnet, nicht gegen das Token --paper #F5F5F7 (§1.1). Nachgerechnet auf #f4f3ef reproduzieren sich die SoT-Zahlen exakt: --ink 15,99 - --ink-2 5,11 (SoT 5,10) - --accent-text 6,14 - #0066FF 4,35 - --c-live-ink 4,88 - --c-eng-ink 5,08. Gegen --paper liegen dieselben Paare 0,1 bis 0,2 Stufen höher. Es gibt also zwei Papier-Töne im Haus. 2) --c-error-ink #D70015 kommt weder auf #f4f3ef (4,85) noch auf --paper (4,94) auf die in §1.6 notierten 4,62 - der SoT-Wert reproduziert sich nicht. Über dem Floor liegt er in beiden Fällen. 3) §1.6 nennt 4,95:1 für #4D9BFF auf #2c2c2e; nachgerechnet 4,94:1 (Rundung, keine Abweichung in der Sache). ========================================================================== */