/* Caps & Collars: aus tokens.json erzeugt mit werkzeuge/tokens_css.py, nicht von Hand bearbeiten */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a08;
  --bg2: #131210;
  --bg3: #1c1a17;
  --text: #f0ede6;
  --text-light: #c8c3bb;
  --text-dim: #8a857e;
  --gold: #e8c840;
  --gold-light: #ffde59;
  --gold-dim: #e8c8401a;
  --line: #f0ede61f;
  --line-control: var(--text-light);
  --focus: var(--gold);
  --action: #e8c840;
  --action-hover: #ffde59;
  --on-action: #0a0a08;
  --action-deep: #d4ae2c;
  --action-glint: #fff8dc;
  --spectrum-base: #00000000;
  --error: #e3a59c;
  --glass-fill: #13121073;
  --glass-fill-strong: #131210c7;
  --glass-sheen-top: #f0ede614;
  --glass-sheen-bottom: #f0ede605;
  --glass-rim: #f0ede673;
  --glass-rim-low: #f0ede61a;
  --specular: #f0ede6b3;
  --field-fill: #0a0a0899;
  --light-gold: #e8c8403d;
  --light-lavender: #a281ad6b;
  --light-teal: #7faeba5c;
  --light-coral: #b1848052;
  --cursor-light: #e8c8401f;
  --pastel-lavender: #a281ad;
  --pastel-blue: #7777aa;
  --pastel-teal: #7faeba;
  --pastel-sage: #a4bf9e;
  --pastel-sand: #cec7ab;
  --pastel-coral: #b18480;
  --pastel-purple: #a281ae;
  --glass-shadow: inset 0 1px 0 0 #f0ede633, inset 0 -1px 0 0 #0a0a0880, inset 0 20px 40px -28px #f0ede626, 0 1px 2px 0 #0a0a0866, 0 22px 44px -24px #000000cc;
  --glass-shadow-raised: inset 0 1px 0 0 #f0ede640, inset 0 -1px 0 0 #0a0a0880, inset 0 22px 44px -28px #f0ede633, 0 2px 4px 0 #0a0a0866, 0 30px 60px -26px #000000e6;
  --control-shadow: inset 0 1px 0 0 #f0ede659, inset 0 -1px 0 0 #0a0a0880, inset 0 0 0 1px #f0ede61a, 0 8px 24px -10px #000000b3;
  --action-shadow: inset 0 1px 0 0 #fff4c4, inset 0 -1px 0 0 #a8860f, inset 0 0 0 1px #846c0759, 0 1px 2px 0 #0a0a0899, 0 10px 24px -12px #000000cc;
  --field-shadow: inset 0 1px 2px 0 #0a0a08b3, inset 0 0 0 1px #f0ede61f;
  --focus-ring: 0 0 0 2px #0a0a08, 0 0 0 4px #e8c840;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #fefcf4;
  --bg2: #f5f1e3;
  --bg3: #eceadc;
  --text: #1a1815;
  --text-light: #4a4540;
  --text-dim: #6a6560;
  --gold: #846c07;
  --gold-light: #6b5705;
  --gold-dim: #846c0712;
  --line: #1a18151f;
  --action: #e8c840;
  --action-hover: #ffde59;
  --on-action: #0a0a08;
  --action-deep: #d4ae2c;
  --action-glint: #fff8dc;
  --spectrum-base: #ffffff;
  --error: #8f453d;
  --glass-fill: #fefcf466;
  --glass-fill-strong: #fefcf4d9;
  --glass-sheen-top: #fefcf480;
  --glass-sheen-bottom: #fefcf41f;
  --glass-rim: #ffffff;
  --glass-rim-low: #1a181524;
  --specular: #fefcf4;
  --field-fill: #eceadcb3;
  --light-gold: #e8c84070;
  --light-lavender: #a281ad66;
  --light-teal: #7faeba73;
  --light-coral: #b1848066;
  --cursor-light: #e8c84029;
  --glass-shadow: 0 0 0 1px #1a181512, inset 0 1px 0 0 #ffffff, inset 0 -1px 0 0 #1a181514, inset 0 18px 36px -24px #ffffffb3, 0 1px 2px 0 #1a181514, 0 22px 44px -26px #1a18154d;
  --glass-shadow-raised: 0 0 0 1px #1a181514, inset 0 1px 0 0 #ffffff, inset 0 -1px 0 0 #1a181514, inset 0 20px 40px -24px #ffffffcc, 0 2px 4px 0 #1a18151a, 0 30px 60px -28px #1a181566;
  --control-shadow: inset 0 1px 0 0 #fefcf4, inset 0 -1px 0 0 #1a18151a, inset 0 0 0 1px #1a181514, 0 8px 22px -12px #1a181540;
  --action-shadow: inset 0 1px 0 0 #fff4c4, inset 0 -1px 0 0 #a8860f, inset 0 0 0 1px #846c0759, 0 1px 2px 0 #1a18151f, 0 10px 22px -12px #846c0773;
  --field-shadow: inset 0 1px 2px 0 #1a18151f, inset 0 0 0 1px #1a18151f;
  --focus-ring: 0 0 0 2px #fefcf4, 0 0 0 4px #846c07;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #fefcf4;
    --bg2: #f5f1e3;
    --bg3: #eceadc;
    --text: #1a1815;
    --text-light: #4a4540;
    --text-dim: #6a6560;
    --gold: #846c07;
    --gold-light: #6b5705;
    --gold-dim: #846c0712;
    --line: #1a18151f;
    --action: #e8c840;
    --action-hover: #ffde59;
    --on-action: #0a0a08;
    --action-deep: #d4ae2c;
    --action-glint: #fff8dc;
    --spectrum-base: #ffffff;
    --error: #8f453d;
    --glass-fill: #fefcf466;
    --glass-fill-strong: #fefcf4d9;
    --glass-sheen-top: #fefcf480;
    --glass-sheen-bottom: #fefcf41f;
    --glass-rim: #ffffff;
    --glass-rim-low: #1a181524;
    --specular: #fefcf4;
    --field-fill: #eceadcb3;
    --light-gold: #e8c84070;
    --light-lavender: #a281ad66;
    --light-teal: #7faeba73;
    --light-coral: #b1848066;
    --cursor-light: #e8c84029;
    --glass-shadow: 0 0 0 1px #1a181512, inset 0 1px 0 0 #ffffff, inset 0 -1px 0 0 #1a181514, inset 0 18px 36px -24px #ffffffb3, 0 1px 2px 0 #1a181514, 0 22px 44px -26px #1a18154d;
    --glass-shadow-raised: 0 0 0 1px #1a181514, inset 0 1px 0 0 #ffffff, inset 0 -1px 0 0 #1a181514, inset 0 20px 40px -24px #ffffffcc, 0 2px 4px 0 #1a18151a, 0 30px 60px -28px #1a181566;
    --control-shadow: inset 0 1px 0 0 #fefcf4, inset 0 -1px 0 0 #1a18151a, inset 0 0 0 1px #1a181514, 0 8px 22px -12px #1a181540;
    --action-shadow: inset 0 1px 0 0 #fff4c4, inset 0 -1px 0 0 #a8860f, inset 0 0 0 1px #846c0759, 0 1px 2px 0 #1a18151f, 0 10px 22px -12px #846c0773;
    --field-shadow: inset 0 1px 2px 0 #1a18151f, inset 0 0 0 1px #1a18151f;
    --focus-ring: 0 0 0 2px #fefcf4, 0 0 0 4px #846c07;
  }
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-none: 0px;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --glass-blur: 24px;
  --glass-blur-control: 16px;
  --glass-blur-mobile: 14px;
  --glass-saturate: 180%;
  --lens-scale: 28;
  --lens-band: 22px;
  --page-max: 1240px;
  --page-margin: clamp(20px, 5vw, 64px);
  --grid-columns: 12;
  --grid-gap: 32px;
  --measure-text: 52ch;
  --measure-lead: 40ch;
  --measure-headline: 30ch;
  --band-height: 4px;
  --nav-height: 64px;
  --nav-offset: 16px;
  --menu-width: 24rem;
  --target-min: 44px;
  --stufe-schmal: 320px;
  --stufe-klein: 480px;
  --stufe-telefon: 660px;
  --stufe-tafel: 900px;
  --stufe-tafel-quer: 1040px;
  --stufe-nav: 1100px;
  --stufe-laptop: 1150px;
  --line-hair: 1px;
  --line-strong: 2px;
  --duration-ui: 160ms;
  --duration-open: 240ms;
  --duration-lift: 300ms;
  --drift-1: 28s;
  --drift-2: 34s;
  --drift-3: 40s;
  --drift-4: 36s;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-lift: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-drift: ease-in-out;
  --glass-max-desktop: 30;
  --glass-max-mobile: 15;
  --glass-max-view: 6;
  --lens-max: 4;
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.display { font-family: var(--font-display); font-size: 96px; line-height: 96px; font-weight: 400; letter-spacing: 0.02em; }
.headline { font-family: var(--font-display); font-size: 48px; line-height: 56px; font-weight: 400; letter-spacing: 0.01em; }
.title { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: 0.02em; }
.numeral { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: 0.03em; }
.lead { font-family: var(--font-text); font-size: 22px; line-height: 34px; font-weight: 300; letter-spacing: -0.005em; }
.title-s { font-family: var(--font-text); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.005em; }
.question { font-family: var(--font-text); font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: -0.005em; }
.body { font-family: var(--font-text); font-size: 17px; line-height: 28px; font-weight: 400; }
.body-s { font-family: var(--font-text); font-size: 15px; line-height: 24px; font-weight: 400; }
.ui { font-family: var(--font-text); font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0.01em; }
.label { font-family: var(--font-text); font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; }