:root{
  /* Layout */
  --container-max: 1120px;
  --gutter: 1rem;
  --header-height: 170px; /* passt zu deinem fixed Header + Logo */

  /* Spacing scale */
  --s-1: .25rem;
  --s0: .5rem;
  --s1: .75rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-size: 16px;
  --line: 1.6;

  --h1: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  --h2: clamp(1.25rem, 1.0rem + 1.0vw, 1.8rem);
  --h3: clamp(1.1rem, 0.95rem + 0.6vw, 1.35rem);

  /* Colors (neutral-modern) */
  --bg: #ffffff;
  --text: #0f172a;     /* slate-900 */
  --muted: #475569;    /* slate-600 */
  --border: rgba(15,23,42,.14);
  --surface: #ffffff;
  --surface-2: #f8fafc; /* slate-50 */

  /* Accent (dezent, handwerk-tauglich) */
  --accent: #1d4ed8;   /* blue-700 */
  --accent-2: #0ea5e9; /* sky-500 */
  --accent-ink: #ffffff;

  /* Focus */
  --focus: #111827;

  /* Radius + shadow */
  --r1: .5rem;
  --r2: .9rem;
  --shadow: 0 10px 30px rgba(2,6,23,.08);

  /* Motion */
  --t-fast: 120ms;
  --t: 220ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}