/* * Exostruct – Kaskadenschichten und ergänzende Tokens * * Werte, die der Block-Editor auswählbar machen muss, stehen in theme.json und * erscheinen von dort als --wp--preset--*. Diese Datei ergänzt nur, was der * Editor nicht anbietet, und benennt die Presets semantisch. * * Bewusst ohne @layer: WordPress liefert die Element-Styles aus theme.json * ungeschichtet aus, und ungeschichtete Regeln schlagen jede Kaskadenschicht – * unabhängig von der Spezifität. Mit Schichten wäre keine dieser Regeln * überschreibbar. Steuerung erfolgt deshalb über Spezifität. */ :root { /* --- Semantische Farbrollen ------------------------------------------ * Komponenten verwenden diese Namen, nicht die Preset-Namen. Ein Wechsel * der Palette bleibt damit eine Änderung an dieser Stelle. */ --color-text: var(--wp--preset--color--ink-950); --color-text-secondary: var(--wp--preset--color--ink-600); --color-text-muted: var(--wp--preset--color--ink-500); --color-text-on-brand: var(--wp--preset--color--ink-950); --color-text-on-dark: var(--wp--preset--color--white); --color-surface: var(--wp--preset--color--white); --color-surface-subtle: var(--wp--preset--color--ink-50); /* * Die Einstiegszone aus Kopfbereich und Hero ist die tiefste Fläche der * Seite. Sie liegt bewusst unter `surface-dark`: Erst dadurch liest sich * das anschließende Faktenband als eigene Ebene, ohne dass eine Trennlinie * nötig wäre, und Orange gewinnt an Leuchtkraft. */ --color-surface-stage: var(--wp--preset--color--ink-950); --color-surface-dark: var(--wp--preset--color--ink-900); --color-surface-dark-raised: var(--wp--preset--color--ink-800); --color-surface-brand: var(--wp--preset--color--brand-50); --color-border: var(--wp--preset--color--ink-200); --color-border-strong: var(--wp--preset--color--ink-300); --color-border-dark: var(--wp--preset--color--ink-700); --color-brand: var(--wp--preset--color--brand-500); --color-brand-hover: var(--wp--preset--color--brand-600); /* * Textlinks auf hellen Flächen tragen die Marke, nicht Linkblau. * * Brand Identity §10.5 lässt Orange als Textfarbe auf Weiß bei * nachgewiesenem Kontrast ausdrücklich zu. Der Nachweis entscheidet die * Tonwahl: `brand-500` erreicht auf Weiß nur 1,9:1 und `brand-700` nur * 3,2:1 - beide sind als Fließtextfarbe unzulässig. `brand-800` (#B45309) * misst 5,0:1 und erfüllt damit WCAG AA für normalen Text. * * Auf dunklen Flächen bleibt es bei `brand-500` (9,4:1 auf `ink-950`); * die Umschaltung erfolgt in `.exo-section--dark`. */ --color-link: var(--wp--preset--color--brand-800); --color-success: var(--wp--preset--color--success-600); --color-warning: var(--wp--preset--color--warning-600); --color-danger: var(--wp--preset--color--danger-600); /* * Fokus ist bewusst kein Preset: Redakteure sollen ihn nicht wählen. * * FESTLEGUNG DES AUFTRAGGEBERS AM 2026-08-12: Der Fokusrahmen trägt die * Marke statt des früheren Systemblaus (#4e8deb). * * Gesetzt ist `brand-700` (#D97706) und nicht das hellere `brand-500`: * Ein Fokusrahmen muss sich nach WCAG 2.2 mit mindestens 3:1 von seiner * Umgebung abheben. `brand-500` erreicht auf Weiß 1,9:1 und wäre auf den * hellen Formularflächen kaum zu sehen; `brand-700` liegt bei 3,6:1. * * Auf dunklen Flächen kehrt sich das um - dort ist `brand-700` zu dunkel. * Die Umschaltung steht bei `.exo-section--dark` und im Kopfbereich. */ --color-focus: var(--wp--preset--color--brand-700); /* --- Maße ------------------------------------------------------------ */ --container-wide: var(--wp--custom--container--wide); --container-default: var(--wp--custom--container--default); --container-content: var(--wp--custom--container--content); --container-text: var(--wp--custom--container--text); --radius-sm: var(--wp--custom--radius--sm); --radius-md: var(--wp--custom--radius--md); --radius-lg: var(--wp--custom--radius--lg); --radius-pill: var(--wp--custom--radius--pill); --shadow-sm: var(--wp--preset--shadow--sm); --shadow-md: var(--wp--preset--shadow--md); --shadow-lg: var(--wp--preset--shadow--lg); /* Mindestgröße für alles Bedienbare. WCAG 2.5.8 fordert 24 px; die Brand Identity §17.1 fordert mehr, deshalb 2,75rem. */ --touch-target: var(--wp--custom--touch-target); --gutter-page: var(--wp--custom--gutter--mobile); --control-compact: var(--wp--custom--control--compact); --control-standard: var(--wp--custom--control--standard); --control-dominant: var(--wp--custom--control--dominant); --section-compact: var(--wp--custom--section--compact-mobile); --section-default: var(--wp--custom--section--default-mobile); --section-showcase: var(--wp--custom--section--default-mobile); --component-gap-lg: var(--wp--custom--component-gap--large-mobile); --component-gap-md: var(--wp--custom--component-gap--medium-mobile); --component-gap-sm: var(--wp--custom--component-gap--small); --hero-min-height: var(--wp--custom--hero-min-height); --hero-padding: var(--wp--custom--hero-padding--mobile); /* --- Zustandsebenen (Regel R8) ---------------------------------------- * Zeiger, Aktiv und Deaktiviert werden nicht je Komponente neu gemischt, * sondern als Deckkraft einer Überlagerung angegeben. Dieselbe Zahl gilt * auf heller und dunkler Fläche; nur die Farbe der Ebene wechselt. */ --state-hover: var(--wp--custom--state--hover); --state-pressed: var(--wp--custom--state--pressed); --state-disabled: var(--wp--custom--state--disabled); --state-layer-on-light: var(--wp--preset--color--ink-950); --state-layer-on-dark: var(--wp--preset--color--white); /* Lead-Größe wächst mit dem Viewport, ohne eigenes Preset im Editor. */ --font-size-lead: clamp(1.125rem, 1rem + 0.4vw, 1.25rem); --line-height-tight: var(--wp--custom--line-height--tight); --line-height-heading: var(--wp--custom--line-height--heading); --line-height-body: var(--wp--custom--line-height--body); --line-height-ui: var(--wp--custom--line-height--ui); /* --- Bewegung -------------------------------------------------------- */ --duration-fast: var(--wp--custom--duration--fast); --duration-normal: var(--wp--custom--duration--normal); --duration-slow: var(--wp--custom--duration--slow); --easing-standard: var(--wp--custom--easing--standard); /* Browser-eigene Oberflächen an die Marke koppeln. */ accent-color: var(--color-brand); color-scheme: light; } @media (width >= 48rem) { :root { --gutter-page: var(--wp--custom--gutter--tablet); --section-compact: var(--wp--custom--section--compact-desktop); --section-default: var(--wp--custom--section--default-desktop); --component-gap-lg: var(--wp--custom--component-gap--large-desktop); --component-gap-md: var(--wp--custom--component-gap--medium-desktop); } } @media (width >= 64rem) { :root { --gutter-page: var(--wp--custom--gutter--desktop); --section-showcase: var(--wp--custom--section--showcase-desktop); --hero-padding: var(--wp--custom--hero-padding--desktop); } } /* * Bewegung wird vollständig zurückgenommen, wenn das System es verlangt. * Kein globales `*` – die Regel zielt auf Elemente, die tatsächlich animiert * werden könnten, damit Web Components sie überschreiben können. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-normal: 1ms; --duration-slow: 1ms; } :where(a, button, summary, details, dialog, input, select, textarea, .wp-block-button__link) { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } :where(html) { scroll-behavior: auto !important; } }