/* ============================================================ shared/tokens.css — Cross-Site Design-Tokens (W1) Quelle: shared/plan/MASTER-PLAN.md TEIL A.2 – A.6 Stand: 2026-06-10 (Subagent W1) Eigenstaendiger Token-Layer fuer alle 3 Sites (bsh / nhpn / kosmetik). Wirkt ADDITIV zu bestehenden site/main-CSS, ueberschreibt nichts destruktiv. Bestehende Custom-Properties (--c-*, --s-*, --ts-*) in bsh/theme/assets/tokens.css koexistieren — Praefix-Trennung (--text-*, --s-N, --leading-*, --sh-*, --t-*, --ease*). Klassen-Praefixe: keine — nur :root + [data-site="..."] Override. Site-spezifischer Akzent wird per gesetzt (siehe MASTER-PLAN A.9). ============================================================ */ /* ============================================================ A.2 — Farb-Tokens ============================================================ */ :root { /* Ink (Text auf hellem Grund) */ --ink-900: #1f1b29; --ink-700: #3b3548; --ink-500: #5a5468; --ink-300: #8e889e; /* Paper (Hintergrundfarben) */ --paper-50: #fdfcfa; --paper-100: #f5f2eb; --paper-200: #eae3d5; /* Linien */ --line-100: rgba(31, 27, 41, 0.08); --line-300: rgba(31, 27, 41, 0.18); /* Semantic */ --success: #4a7a4a; --warn: #b07a1f; --error: #a74545; /* Default-Akzent: bsh-Flieder (wird per data-site ueberschrieben) */ --accent: #A594C8; --accent-ink: #ffffff; --accent-soft: #E9E3F3; } /* CI-Override per data-site Attribute (auf oder ) */ [data-site="bsh"] { --accent: #A594C8; --accent-ink: #ffffff; --accent-soft: #E9E3F3; } [data-site="nhpn"] { --accent: #6FA86E; --accent-ink: #ffffff; --accent-soft: #E3EFE2; } [data-site="kosmetik"] { --accent: #C97B83; --accent-ink: #ffffff; --accent-soft: #F5E0E3; } /* ============================================================ A.3 — Typo-Tokens (clamp-Fluid) ============================================================ */ :root { --text-3xs: clamp(.65rem, .60rem + .25vw, .75rem); --text-2xs: clamp(.75rem, .70rem + .25vw, .812rem); --text-xs: clamp(.812rem, .78rem + .30vw, .875rem); --text-sm: clamp(.875rem, .85rem + .30vw, .937rem); --text-base:clamp(1rem, .96rem + .35vw, 1.125rem); --text-lg: clamp(1.125rem,1.05rem + .55vw, 1.333rem); --text-xl: clamp(1.333rem,1.20rem + .85vw, 1.777rem); --text-2xl: clamp(1.777rem,1.55rem + 1.4vw, 2.369rem); --text-3xl: clamp(2.369rem,1.95rem + 2.4vw, 3.157rem); --text-4xl: clamp(3.157rem,2.40rem + 4vw, 4.209rem); --leading-tight: 1.15; --leading-normal: 1.6; --leading-loose: 1.75; --tracking-tight: -.02em; --tracking-normal: 0; --tracking-wide: .06em; --serif: 'Newsreader', Georgia, serif; --sans: 'Inter', system-ui, -apple-system, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; } /* nhpn nutzt DM Serif Display als Display-Serif */ [data-site="nhpn"] { --serif: 'DM Serif Display', Georgia, serif; } /* ============================================================ A.4 — Spacing-Tokens ============================================================ */ :root { --s-0: 0; --s-1: 4px; --s-2: 6px; --s-3: 10px; --s-4: 16px; --s-5: 26px; --s-6: 42px; --s-7: 68px; --s-8: 110px; --s-9: 178px; --section-py: clamp(var(--s-7), 8vw, var(--s-9)); --section-px: clamp(var(--s-4), 5vw, var(--s-6)); --content-narrow: 760px; --content-wide: 1280px; --radius-1: 6px; --radius-2: 12px; --radius-full: 9999px; } /* ============================================================ A.5 — Motion-Tokens ============================================================ */ :root { --t-fast: 160ms; --t-mid: 280ms; --t-slow: 480ms; --ease: cubic-bezier(.16, 1, .30, 1); --ease-in: cubic-bezier(.40, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .20, 1); } /* Defensive: prefers-reduced-motion deaktiviert alle Bewegung */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================ A.6 — Elevation ============================================================ */ :root { --sh-1: 0 1px 2px rgba(31, 27, 41, .06), 0 1px 3px rgba(31, 27, 41, .08); --sh-2: 0 4px 8px rgba(31, 27, 41, .08), 0 2px 4px rgba(31, 27, 41, .06); --sh-3: 0 10px 20px rgba(31, 27, 41, .10), 0 4px 8px rgba(31, 27, 41, .06); --sh-4: 0 20px 40px rgba(31, 27, 41, .12), 0 8px 16px rgba(31, 27, 41, .08); } /* ============================================================ Font-Face — Newsreader, Inter, DM Serif Display font-display:swap + size-adjust:90% Fallback gegen CLS Pfad-Konvention: /wp-content/themes//assets/fonts/ Wenn Fonts pro Site woanders liegen — der einzelne style.css ueberschreibt src:. ============================================================ */ /* Newsreader (default --serif fuer bsh + kosmetik) */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/newsreader-variable.woff2') format('woff2-variations'), url('assets/fonts/newsreader-400.woff2') format('woff2'); size-adjust: 90%; } /* DM Serif Display (nhpn-Override) */ @font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/dm-serif-display-400.woff2') format('woff2'); size-adjust: 90%; } /* Inter (universeller Sans) */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/inter-variable.woff2') format('woff2-variations'), url('assets/fonts/inter-400.woff2') format('woff2'); size-adjust: 90%; } /* ============================================================ Mikro-Interaktionen — Pflicht aus A.5 Additiv (Opt-In via Data-Attribute / Klassen). ============================================================ */ /* Scroll-Fade-in: data-fade-in via IntersectionObserver gesetzt */ [data-fade-in] { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); will-change: opacity, transform; } [data-fade-in].is-visible { opacity: 1; transform: translateY(0); } /* Card-Hover (translateY -3px + sh-2) */ .card-hover, [data-card-hover] { transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); will-change: transform; } @media (hover: hover) and (pointer: fine) { .card-hover:hover, [data-card-hover]:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } } /* Universal Focus-Ring (3px outline accent, offset 4px) */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-1); } /* Button-Press: scale .98 in 160ms */ .btn, [data-btn] { transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .btn:active, [data-btn]:active { transform: scale(.98); } /* ============================================================ Sticky-CTA-Mobile (S12 aus MASTER-PLAN) Touch-Targets 56px Hoehe, ab 768px ausgeblendet. ============================================================ */ .sticky-cta-mobile { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--paper-50); border-top: 1px solid var(--line-300); box-shadow: 0 -4px 12px rgba(31, 27, 41, .08); } .sticky-cta-mobile .sticky-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: var(--s-3) var(--s-4); border-radius: var(--radius-1); font-family: var(--sans); font-size: var(--text-base); font-weight: 600; text-decoration: none; color: var(--ink-900); background: var(--paper-100); border: 1px solid var(--line-300); } .sticky-cta-mobile .sticky-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } @media (min-width: 768px) { .sticky-cta-mobile { display: none; } } /* Body-Padding wenn Sticky aktiv (Mobile) */ @media (max-width: 767px) { body:has(.sticky-cta-mobile) { padding-bottom: 80px; } } /* ============================================================ Skip-Link (A.9 Pflicht-Page-Element) ============================================================ */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--ink-900); color: var(--paper-50); padding: var(--s-3) var(--s-4); z-index: 999; text-decoration: none; font-family: var(--sans); font-size: var(--text-sm); } .skip-link:focus { top: 0; }