/* * Autismus-Stiftung — Design Tokens * Single source of truth. Imported by WordPress theme + Snippet 58 + Newsletter templates. * Mirror at: https://autismusstiftung.de/design-system/assets/tokens/tokens.css * Version 1.0 — 2026-04-29 (Header v2.3 locked baseline) */ :root { /* ============================================================ * COLOR — Primary / Brand * ============================================================ */ --color-magenta: #d92d68; /* Primärfarbe — CTAs, Highlights */ --color-magenta-dark: #b01f52; /* Hover-Zustand auf Magenta */ --color-magenta-darker: #B01F52; /* Component-Lib Variante */ --color-magenta-light: #fdeef4; /* Akzent-Hintergrund */ --color-magenta-xlight: #fef6f9; /* Section-HG hell-magenta */ --color-magenta-tint: rgba(217, 45, 104, .18); --color-navy-deep: #060C2D; /* Primärer dunkler HG, Headlines auf dunkel */ --color-navy-mid: #0C1648; /* Karten, sekundärer dunkler HG */ --color-navy-light: #E8ECF8; /* Helle Akzentfläche, Tabs */ --color-creme: #F5F0E8; /* AKZENT-FARBE (Persona-Peter-Tint, Cards). NICHT als primäre Section-BG verwenden. */ --color-white: #FFFFFF; --color-black: #000000; /* ============================================================ * COLOR — Neutrals * ============================================================ */ --color-text: #515151; /* Fließtext auf hell */ --color-heading: #1A1A1A; /* Headlines auf hell */ --color-gray-bg: #F8F8F8; /* Section-HG neutral */ --color-gray-line: #EBEBEB; /* Trennlinien */ --color-gray-muted: #7C7C7C; /* Captions, Meta */ /* ============================================================ * COLOR — Semantic / Persona-Tints * ============================================================ */ --color-trust: var(--color-navy-deep); /* Vertrauen, Seriosität (Johanna) */ --color-action: var(--color-magenta); /* Aktion, CTA */ --color-warmth: var(--color-creme); /* Wärme, Menschlichkeit — als Akzent, NICHT als BG */ /* Erlaubte Section-BG: --color-white | --color-gray-bg | --color-navy-deep | --color-navy-mid */ --persona-johanna-tint: rgba(6, 12, 45, .04); /* Navy-Anflug, älter, ruhiger */ --persona-lisa-tint: rgba(217, 45, 104, .06); /* Magenta-Anflug, jünger, digital */ --persona-peter-tint: rgba(245, 240, 232, .8); /* Creme-Anflug, klassisch */ --color-success: #2E7D32; --color-warning: #F9A825; --color-error: #C62828; --color-info: #1565C0; /* ============================================================ * TYPOGRAPHY — Font Families * ============================================================ */ --font-display: "Posterama 2001", "Posterama", "Inter", system-ui, sans-serif; --font-body: "Roboto", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", "Consolas", "Monaco", monospace; /* ============================================================ * TYPOGRAPHY — Weights * ============================================================ */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; --fw-display: 950; /* Posterama UltraBlack */ /* ============================================================ * TYPOGRAPHY — Sizes (clamp = fluid) * ============================================================ */ --fs-hero: clamp(2.5rem, 6vw, 4.5rem); /* 40-72px */ --fs-h1: clamp(2rem, 4.2vw, 3.2rem); /* 32-51px */ --fs-h2: clamp(1.6rem, 2.8vw, 2.3rem); /* 26-37px */ --fs-h3: 1.25rem; /* 20px */ --fs-h4: 1.1rem; /* 18px */ --fs-body-lg: 1.125rem; /* 18px */ --fs-body: 1rem; /* 16px */ --fs-body-sm: 0.875rem; /* 14px */ --fs-caption: 0.75rem; /* 12px */ --fs-label: 0.72rem; /* 11.5px Section-Label */ --fs-tiny: 0.6875rem; /* 11px */ /* ============================================================ * TYPOGRAPHY — Line Heights * ============================================================ */ --lh-tight: 1.05; /* Hero */ --lh-snug: 1.22; /* Headlines */ --lh-normal: 1.4; /* H3/H4 */ --lh-relaxed: 1.6; /* Lead */ --lh-body: 1.75; /* Fließtext */ /* ============================================================ * TYPOGRAPHY — Letter Spacing * ============================================================ */ --ls-tight: -0.025em; --ls-snug: -0.015em; --ls-normal: 0; --ls-wide: 0.05em; --ls-wider: 0.08em; --ls-widest: 0.12em; /* Section-Label */ /* ============================================================ * SPACING (4px-Skala) * ============================================================ */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-14: 3.5rem; /* 56 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* Section Padding (vertikal) */ --section-py: 90px; /* Standard */ --section-py-sm: 64px; /* Kompakt */ --section-py-lg: 120px; /* Hero */ /* Container */ --container-max: 1200px; --container-px: 40px; /* Desktop */ --container-px-sm: 24px; /* Mobile */ /* ============================================================ * RADIUS * ============================================================ */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-xl: 32px; --radius-2xl: 40px; --radius-pill: 999px; --radius-full: 50%; /* ============================================================ * SHADOWS * ============================================================ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, .04); --shadow-sm: 0 2px 12px rgba(0, 0, 0, .07); --shadow-md: 0 6px 28px rgba(0, 0, 0, .10); --shadow-lg: 0 12px 48px rgba(0, 0, 0, .14); --shadow-magenta: 0 8px 28px rgba(217, 45, 104, .28); --shadow-navy: 0 8px 28px rgba(6, 12, 45, .22); --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, .06); /* ============================================================ * BORDERS * ============================================================ */ --border-width-1: 1px; --border-width-2: 2px; --border-width-4: 4px; --border-color: var(--color-gray-line); --border-color-strong: rgba(0, 0, 0, .12); --border-color-on-dark: rgba(255, 255, 255, .14); /* ============================================================ * TRANSITIONS / MOTION * ============================================================ */ --duration-fast: 0.15s; --duration-base: 0.25s; --duration-slow: 0.45s; --duration-reveal: 0.65s; /* Granular durations */ --duration-75: 75ms; --duration-150: 150ms; --duration-300: 300ms; --duration-500: 500ms; --duration-700: 700ms; /* Easing-Funktionen */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1); /* ICON TOKENS (Lucide-Set, brand-context §15b) */ --icon-stroke: 1.75px; --icon-stroke-bold: 2.25px; --icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 28px; --icon-xl: 40px; /* ============================================================ * Z-INDEX * ============================================================ */ --z-below: -1; --z-base: 0; --z-content: 1; --z-tooltip: 50; --z-header: 300; --z-modal: 500; --z-overlay: 800; --z-toast: 900; /* ============================================================ * BREAKPOINTS (für Reference; clamp() ist preferred) * ============================================================ */ --bp-mobile: 480px; --bp-tablet: 768px; --bp-laptop: 1024px; --bp-desktop: 1200px; --bp-wide: 1440px; /* ============================================================ * SHORT-ALIASES (Legacy für Snippet 58 + Component Library v1) * ============================================================ */ --pk: var(--color-magenta); --pkd: var(--color-magenta-dark); --pka: var(--color-magenta-tint); --nv: var(--color-navy-deep); --nv2: var(--color-navy-mid); --nvx: var(--color-navy-light); --cr: var(--color-creme); --wh: var(--color-white); --bd: var(--color-text); --pink: var(--color-magenta); --pink-dark: var(--color-magenta-darker); --pink-light: var(--color-magenta-light); --pink-xlight: var(--color-magenta-xlight); --blue: var(--color-navy-deep); --blue-mid: var(--color-navy-mid); --blue-xlight: var(--color-navy-light); --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-xl: var(--radius-2xl); --shadow-pink: var(--shadow-magenta); /* ============================================================ * LIVE-SITE ALIASES (für Theme-Kompatibilität, autismusstiftung.de) * Diese werden vom Theme-CSS und Snippet 58 referenziert * ============================================================ */ --brand: var(--color-magenta); /* #d92d68 */ --brand-dark: var(--color-magenta-dark); /* #b01f52 */ --brand-soft: var(--color-magenta-light); /* #fdeef4 */ --brand-softer: var(--color-magenta-xlight); /* #fef6f9 */ --ink: #231f20; /* Live-Heading (nicht #1A1A1A!) */ --body: var(--color-text); /* #515151 */ --bg: #f9fafb; /* Live-Section-BG (leicht heller als #F8F8F8) */ --border: #e5e7eb; /* Live-Border (leicht heller als #EBEBEB) */ --text-muted: var(--color-gray-muted); /* #7C7C7C */ --footer-bg: #f3f4f6; /* Footer-Background */ --accent: #0080d7; /* Live-Akzent-Blau (selten verwendet) */ --shadow-sm-live: 0 1px 2px rgba(0,0,0,.05); /* Live-Variante */ --shadow-md-live: 0 4px 12px rgba(0,0,0,.08); /* Live-Variante */ --shadow-lg-live: 0 16px 48px rgba(217,45,104,.15); /* Live-Brand-Glow */ } /* ============================================================ * FONT FACE — Posterama 2001 (Headlines, lokal eingebunden) * Fallback: Inter / system-ui * ============================================================ */ @font-face { font-family: "Posterama 2001"; src: url("../fonts/Posterama-2001-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Posterama 2001"; src: url("../fonts/Posterama-2001-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Posterama 2001"; src: url("../fonts/Pos