/* ============================================================ 00 · TOKENS — Alias-Layer ------------------------------------------------------------ Diese Datei enthaelt AUSSCHLIESSLICH Aliase. Sie mappt die von WordPress aus theme.json generierten --wp--preset--*-Variablen auf die kurzen Namen, die im restlichen Stylesheet verwendet werden. HIER STEHT NIEMALS EIN WERT. Jeder Farbwert, jede Groesse, jede Dauer gehoert nach theme.json (ADR-003). Pruefung siehe CLAUDE.md. Selektor body, nicht :root: WordPress gibt die Preset- Variablen aktuell auf :root aus, in aelteren Versionen auf body. Auf body funktioniert der Alias in beiden Faellen -- liegen die Presets auf :root, erben sie nach body durch. Einzige Folge: In html{} stehen die Kurznamen nicht zur Verfuegung. Dort steht nur scroll-behavior. Breakpoints: 600 / 768 / 1024 / 1280, nur min-width. ============================================================ */ body { /* ---------- Farben ---------- */ --green: var(--wp--preset--color--green); --green-deep: var(--wp--preset--color--green-deep); --green-soft: var(--wp--preset--color--green-soft); --mint: var(--wp--preset--color--mint); --mint-dark: var(--wp--preset--color--mint-dark); /* Vier Amber-Stufen mit klar getrennten Aufgaben: --amber dekorative Flaechen, Striche, Unterlinien (3:1 genuegt) --amber-strong gefuellte Flaechen, die helle Schrift tragen --amber-deep Text auf hellem Grund, dazu der Hover gefuellter Flaechen --amber-soft Text und Akzente auf dunklem Grund */ --amber: var(--wp--preset--color--amber); --amber-strong: var(--wp--preset--color--amber-strong); --amber-deep: var(--wp--preset--color--amber-deep); --amber-soft: var(--wp--preset--color--amber-soft); --cream: var(--wp--preset--color--cream); --paper: var(--wp--preset--color--paper); --ink: var(--wp--preset--color--ink); --ink-60: var(--wp--preset--color--ink-60); --white: var(--wp--preset--color--white); /* Linien, Schleier und Flaechen auf dunklem Grund */ --line: var(--wp--custom--line); --line-strong: var(--wp--custom--line-strong); --line-strongest: var(--wp--custom--line-strongest); --line-light: var(--wp--custom--line-light); --line-green: var(--wp--custom--line-green); --watermark: var(--wp--custom--watermark); --header-bg: var(--wp--custom--header-bg); --header-bg-soft: var(--wp--custom--header-bg-soft); --surface-raised: var(--wp--custom--surface-raised); --aicredit-shadow: var(--wp--custom--aicredit-shadow); --shadow-card: var(--wp--custom--shadow-card); --shadow-float: var(--wp--custom--shadow-float); --scrim-hero: var(--wp--custom--scrim-hero); --scrim-card: var(--wp--custom--scrim-card); --scrim-page: var(--wp--custom--scrim-page); --on-dark: var(--wp--custom--on-dark); --on-dark-80: var(--wp--custom--on-dark-80); --on-dark-70: var(--wp--custom--on-dark-70); --on-dark-55: var(--wp--custom--on-dark-55); /* ---------- Schriftgroessen ---------- */ --fs-50: var(--wp--preset--font-size--50); --fs-100: var(--wp--preset--font-size--100); --fs-200: var(--wp--preset--font-size--200); --fs-300: var(--wp--preset--font-size--300); --fs-400: var(--wp--preset--font-size--400); --fs-500: var(--wp--preset--font-size--500); --fs-600: var(--wp--preset--font-size--600); --fs-700: var(--wp--preset--font-size--700); /* Slugs ohne Ziffer nach Buchstabe: WordPress wuerde "h2" zu "h-2" umschreiben und der Alias liefe ins Leere. */ --fs-h2: var(--wp--preset--font-size--section-title); --fs-h2-sm: var(--wp--preset--font-size--section-title-sm); --fs-h3: var(--wp--preset--font-size--card-title); --fs-h3-service: var(--wp--preset--font-size--service-title); --fs-h3-profile: var(--wp--preset--font-size--profile-title); --fs-h3-news: var(--wp--preset--font-size--news-title); --fs-fact: var(--wp--preset--font-size--fact); --fs-pagenav: var(--wp--preset--font-size--pagenav); --fs-lead: var(--wp--preset--font-size--lead); --fs-stat: var(--wp--preset--font-size--stat); --fs-display-hero: var(--wp--preset--font-size--display-hero); --fs-display-hero-sm: var(--wp--custom--fs-display-hero-sm); --fs-display-page: var(--wp--preset--font-size--display-page); --fs-display-claim: var(--wp--preset--font-size--display-claim); --fs-watermark: var(--wp--custom--fs-watermark); /* ---------- Abstaende ---------- */ --space-2xs: var(--wp--preset--spacing--20); --space-xs: var(--wp--preset--spacing--30); --space-s: var(--wp--preset--spacing--40); --space-m: var(--wp--preset--spacing--50); --space-l: var(--wp--preset--spacing--60); --space-xl: var(--wp--preset--spacing--70); --space-2xl: var(--wp--preset--spacing--80); --space-3xl: var(--wp--preset--spacing--90); --space-4xl: var(--wp--preset--spacing--95); --space-5xl: var(--wp--preset--spacing--99); --gutter: var(--wp--custom--gutter); --gutter-wide: var(--wp--custom--gutter-wide); --gap-grid: var(--wp--custom--gap-grid); --container-max: var(--wp--custom--container-max); /* ---------- Bewegung ---------- */ --ease: var(--wp--custom--ease); --dur-fast: var(--wp--custom--dur-fast); --dur-base: var(--wp--custom--dur-base); --dur-slow: var(--wp--custom--dur-slow); --dur-reveal: var(--wp--custom--dur-reveal); --delay-step: var(--wp--custom--delay-step); /* ---------- Medienformat ---------- Ein Seitenverhaeltnis fuer alle Flaechen, die ein Projektbild zeigen: Kopf, Mosaikkacheln, Archivkachel. Der Wert steht in theme.json unter settings.dimensions.aspectRatios; der Slug heisst bewusst "media" und nicht "3-2" -- WordPress trennt beim Umschreiben Ziffern von Buchstaben, ein Slug mit Ziffer faellt dabei still aus (siehe Dateikopf und CLAUDE.md). */ --ar-media: var(--wp--preset--aspect-ratio--media); /* ---------- Amber-Strich ---------- */ /* Der kurze Strich vor einer Zeile. Zwei Stellen zeichnen ihn -- der Eyebrow und die Kernpunkte einer Meldung --, seine Masse stehen deshalb hier und nicht in einer der beiden Regeln. */ --rule-w: var(--wp--custom--rule-w); --rule-h: var(--wp--custom--rule-h); --rule-gap: var(--wp--custom--rule-gap); /* ---------- Sonstige ---------- */ --nav-h: var(--wp--custom--nav-h); --z-tint: var(--wp--custom--z-tint); --z-content: var(--wp--custom--z-content); --z-overlay: var(--wp--custom--z-overlay); --z-dock: var(--wp--custom--z-dock); --z-mnav: var(--wp--custom--z-mnav); --z-header: var(--wp--custom--z-header); }