:root {
  --bg: #f5f5f2;
  --surface: #ffffff;
  --surface-alt: #ece9e2;
  --text: #181818;
  --muted: #5b5d60;
  --line: rgba(24,24,24,.12);
  --accent: #1f3b58;
  --accent-2: #a98554;
  --shadow: 0 12px 36px rgba(0, 0, 0, .08);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --container: 1200px;
  --section-column-gap: 1rem;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  --gradient: linear-gradient(135deg, #2e9bee, #295ce7);
  --gradient: linear-gradient(135deg, #2585cf, #1d4ed8);

  --c-glass-bg: rgba(255, 255, 255, 0.75);
  --c-glass-border: rgba(255, 255, 255, 0.5);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --r-card: 24px;
}

html {
  scroll-padding-top: 88px; 
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #fbfbf8 0%, #f0eee9 100%);
  color: var(--text);
  line-height: 1.6;
}

main { overflow-x: clip; }

h1, h2, h3, h4 {
  line-height: 1.1;
  letter-spacing: -.02em;
}

h1 { font-size: clamp(2.75rem, 6vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
h4 { font-size: 1rem; }

p, li {
  color: var(--muted);
}

body.menu-open { overflow: hidden; }

/* Variante 4 als führende Referenz: Farb- und Flächenwerte */
:root {
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-alt: #dce7f8;
  --text: #111827;
  --muted: #4b5563;
  --line: rgba(17,24,39,.12);
  --accent: #1d4ed8;
  --accent-2: #7c3aed;
  --shadow: 0 18px 44px rgba(17, 24, 39, .12);
}

body {
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.10), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}