/* ────────────────────────────────────────────────────────────────────── PAUSCHENWEIN DESIGN SYSTEM · tokens.css Brand-Variablen, Reset, Typografie-Primitive, Buttons, Reveal-Motion. Wird auf JEDER Pauschenwein-Seite geladen — Single Source of Truth. Theme: → Standard (helle Schrift auf Ink) → Inverted (dunkle Schrift auf Paper) ────────────────────────────────────────────────────────────────────── */ :root, [data-pw-theme='dark'] { --ink: #0e1213; --ink-2: #161d1e; --ink-3: #1d2627; --paper: #ffffff; --paper-2: #f4f4f2; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.22); --muted: rgba(255, 255, 255, 0.52); --muted-2: rgba(255, 255, 255, 0.34); --bg: var(--ink); --fg: var(--paper); --font: 'Poppins', system-ui, -apple-system, sans-serif; --nav-h: 84px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --pad-x: clamp(20px, 5vw, 80px); --gut: clamp(60px, 12vh, 160px); } [data-pw-theme='light'] { --ink: #ffffff; --ink-2: #f4f4f2; --ink-3: #e9e9e6; --paper: #0e1213; --paper-2: #161d1e; --line: rgba(14, 18, 19, 0.10); --line-strong: rgba(14, 18, 19, 0.22); --muted: rgba(14, 18, 19, 0.62); --muted-2: rgba(14, 18, 19, 0.40); --bg: var(--ink); --fg: var(--paper); } /* ───────── RESET ───────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ::selection { background: rgba(255, 255, 255, 0.85); color: var(--ink); } [data-pw-theme='light'] ::selection { background: rgba(14, 18, 19, 0.85); color: var(--paper); } /* ───────── TYPE PRIMITIVES ───────── */ .display { font-weight: 300; line-height: 0.96; letter-spacing: -0.035em; font-size: clamp(2.6rem, 8.5vw, 8rem); } .display em { font-style: normal; font-weight: 300; color: var(--muted); } .h2 { font-weight: 300; line-height: 1.02; letter-spacing: -0.03em; font-size: clamp(2rem, 5.2vw, 4.4rem); } .h2 em { font-style: normal; font-weight: 300; color: var(--muted); } .h3 { font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; font-size: clamp(1.4rem, 2.4vw, 2rem); } .h3 em { font-style: normal; font-weight: 300; color: var(--muted); } .kicker { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-2); display: inline-flex; align-items: center; gap: 12px; } .kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.6; } .lede { font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7; color: var(--muted); font-weight: 300; } .small { font-size: 0.92rem; line-height: 1.7; color: var(--muted); font-weight: 300; } /* ───────── BUTTONS ───────── */ .btn { display: inline-flex; align-items: center; gap: 12px; position: relative; padding: 1rem 1.9rem; font-family: var(--font); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--paper); background: var(--paper); color: var(--ink); cursor: pointer; overflow: hidden; transition: color 0.5s var(--ease), border-color 0.5s var(--ease); } .btn span { position: relative; z-index: 2; } .btn::after { content: ''; position: absolute; inset: 0; background: var(--ink); z-index: 1; transform: translateY(101%); transition: transform 0.5s var(--ease); } .btn:hover { color: var(--paper); border-color: var(--paper); } .btn:hover::after { transform: translateY(0); } .btn .arr { transition: transform 0.5s var(--ease); } .btn:hover .arr { transform: translate(4px, -4px); } .btn.ghost { background: transparent; color: var(--paper); border-color: var(--line-strong); } .btn.ghost::after { background: var(--paper); } .btn.ghost:hover { color: var(--ink); border-color: var(--paper); } .arr { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; } /* ───────── REVEAL MOTION ───────── */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; } .clip { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); } .clip.in { clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce) { .reveal, .clip { opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* ───────── SECTION SHELL HELPERS ───────── */ .wrap { padding: 0 var(--pad-x); } .pad { padding-top: var(--gut); padding-bottom: var(--gut); } .rule { height: 1px; background: var(--line); }