:root {
  /* Klinische Klarheit — Farbsystem (oklch, gedämpft, branchenpassend) */
  --primary: oklch(38% 0.08 235);
  --primary-dark: oklch(30% 0.08 235);
  --bg: oklch(99% 0.002 240);
  --bg-alt: oklch(96% 0.006 230);
  --accent: oklch(72% 0.06 165);
  --accent-dark: oklch(56% 0.07 165);
  --text: oklch(22% 0.01 235);
  --text-muted: oklch(42% 0.015 235);
  --border: oklch(88% 0.01 235);
  --white: oklch(100% 0 0);

  --radius: 4px;
  --radius-feature: 28px; /* der eine bewusst gesetzte Ausreißer */

  --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.08);
  --shadow-md: 0 8px 24px oklch(20% 0.02 235 / 0.12);

  --transition-fast: 200ms ease-out;
  --transition-med: 320ms ease-out;

  /* Typo-Skala: Verhältnis 1.333 (Perfect Fourth), Basis 18px */
  --font-size-base: 18px;
  --step--1: 0.875rem;   /* 14px */
  --step-0: 1.125rem;    /* 18px */
  --step-1: 1.5rem;      /* 24px */
  --step-2: 2rem;        /* 32px */
  --step-3: 2.66rem;     /* ~42px */
  --step-4: clamp(2.4rem, 4.5vw, 3.6rem); /* H1 */

  --font-display: "Fraunces", "Iowan Old Style", "Source Serif 4", Georgia, serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", sans-serif;

  --container-max: 1280px;
  --gap-fluid: clamp(1rem, 3vw, 2.5rem);

  /* Sektions-Abstände variieren bewusst */
  --space-s: 64px;
  --space-m: 96px;
  --space-l: 128px;
  --space-xl: 160px;
}

@media (max-width: 600px) {
  :root {
    --space-s: 48px;
    --space-m: 64px;
    --space-l: 80px;
    --space-xl: 96px;
  }
}