/* Design-Tokens „Ideen. Code. Produkte.“ Quelle: Handoff design-system/tokens.css, dunkle Werte aus dem Prototyp (die Werte in tokens.json sind laut Handoff veraltet). Theme: , gesetzt vor dem ersten Paint durch /js/mw/theme-init.js. */ @font-face { font-family: Archivo; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url('/assets/fonts/archivo-latin-wdth-v5.3.0.woff2') format('woff2'); } @font-face { font-family: Figtree; font-style: normal; font-display: swap; font-weight: 400; src: url('/assets/fonts/figtree-latin-400-v5.3.0.woff2') format('woff2'); } @font-face { font-family: Figtree; font-style: normal; font-display: swap; font-weight: 500; src: url('/assets/fonts/figtree-latin-500-v5.3.0.woff2') format('woff2'); } @font-face { font-family: Figtree; font-style: normal; font-display: swap; font-weight: 600; src: url('/assets/fonts/figtree-latin-600-v5.3.0.woff2') format('woff2'); } :root { --ground: #faf8f6; --ground-0: rgba(250, 248, 246, 0); --surface: #ffffff; --ink: #0d0d0d; --ink2: #111111; --ink-hover: #2a2a2a; --on-ink: #ffffff; --ink-body: #4a4744; --ink-muted: #55524f; --ink-subtle: #6b6865; --ink-link: #2b2926; --face-meta: #3d3a37; --chip-ink: #2f2c6e; --chip-bg: rgba(255, 255, 255, 0.8); --accent: #4f3fd1; --hair: #e4e0db; --line: #cfcac4; /* Formularfeldrand: mindestens 3:1 gegen --surface und --ground (WCAG 1.4.11) */ --field-border: #8a857f; --pulse: rgba(17, 17, 17, 0.35); --pulse-0: rgba(17, 17, 17, 0); --glow-violet: #b9a4ff; --glow-blue: #7fb2ff; --glow-ice: #bfe8ff; /* Würfelglas: klar und leicht frostig, kühl-neutral statt violett leuchtend */ --glass-fill: rgba(244, 247, 251, 0.62); --glass-clear: rgba(222, 230, 242, 0.24); --glass-edge: rgba(255, 255, 255, 0.92); --glass-rim: rgba(40, 52, 72, 0.26); --glass-shade: rgba(13, 13, 13, 0.12); --glass-inner: rgba(140, 164, 208, 0.2); --glass-depth: rgba(120, 140, 180, 0.12); --glass-tint-a: rgba(186, 198, 232, 0.18); --glass-tint-b: rgba(206, 228, 250, 0.26); --glass-text-halo: rgba(250, 251, 253, 0.7); --core-line: rgba(96, 124, 196, 0.3); --core-line-soft: rgba(96, 124, 196, 0.06); --core-glow: rgba(110, 140, 214, 0.16); --core-inner: rgba(110, 140, 214, 0.2); --face-side-opacity: 0.4; --sheen: rgba(255, 255, 255, 0.55); --halo-a: rgba(150, 130, 255, 0.24); --halo-b: rgba(120, 170, 255, 0.1); --floor-a: rgba(90, 80, 160, 0.22); --floor-b: rgba(120, 140, 255, 0.12); --hero-img-filter: none; --space-1: 6px; --space-2: 10px; --space-3: 16px; --space-4: 26px; --space-5: 40px; --space-6: 72px; --gutter: var(--space-6); --radius-sm: 10px; --radius-field: 14px; --radius-glass: 22px; --radius-pill: 999px; --font-display: Archivo, 'Arial Narrow', sans-serif; --font-sans: Figtree, system-ui, sans-serif; --ease-move: cubic-bezier(0.65, 0, 0.35, 1); --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); color-scheme: light; } :root[data-theme='dark'] { --ground: #05070a; --ground-0: rgba(5, 7, 10, 0); --surface: #121319; --ink: #f4f3f1; --ink2: #ecebe8; --ink-hover: #d6d4d0; --on-ink: #0d0d0d; --ink-body: #bdbab6; --ink-muted: #a9a6a2; --ink-subtle: #8f8c89; --ink-link: #dcd9d4; --face-meta: #cfccdf; --chip-ink: #d9d5ff; --chip-bg: rgba(255, 255, 255, 0.1); --accent: #a99bff; --hair: #1f2027; --line: #3a3842; --field-border: #6a6772; --pulse: rgba(244, 243, 241, 0.35); --pulse-0: rgba(244, 243, 241, 0); --glass-fill: rgba(34, 40, 54, 0.52); --glass-clear: rgba(70, 82, 110, 0.14); --glass-edge: rgba(255, 255, 255, 0.36); --glass-rim: rgba(0, 0, 0, 0.5); --glass-shade: rgba(0, 0, 0, 0.35); --glass-inner: rgba(150, 170, 220, 0.1); --glass-depth: rgba(120, 140, 200, 0.08); --glass-tint-a: rgba(140, 150, 210, 0.12); --glass-tint-b: rgba(150, 190, 240, 0.12); --glass-text-halo: rgba(6, 8, 12, 0.55); --core-line: rgba(130, 160, 232, 0.34); --core-line-soft: rgba(130, 160, 232, 0.06); --core-glow: rgba(110, 140, 230, 0.2); --core-inner: rgba(100, 130, 230, 0.24); --face-side-opacity: 0.3; --sheen: rgba(255, 255, 255, 0.08); --halo-a: rgba(150, 130, 255, 0.2); --halo-b: rgba(120, 170, 255, 0.08); --floor-a: rgba(140, 120, 255, 0.2); --floor-b: rgba(120, 140, 255, 0.08); --hero-img-filter: invert(1) hue-rotate(180deg) saturate(1.15); color-scheme: dark; } @media (max-width: 900px) { :root { --gutter: 24px; } }