:root {
  /* Farben */
  --color-primary: #007fbe;
  --color-primary-hover: #0757ac;
  --color-royal: #0757ac;
  --color-navy: #102d51;

  --color-background: #fafbfc;
  --color-surface: #ffffff;
  --color-soft-blue: #edf5fa;

  --color-text: #252c34;
  --color-text-muted: #626e79;
  --color-border: #dce5eb;

  --color-on-navy: #ffffff;
  --color-on-navy-muted: #c7d7e8;

  /* Typografie */
  --font-heading: "Manrope", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, Segoe UI, sans-serif;

  --size-h1: clamp(2.5rem, 1.95rem + 2.2vw, 4rem);
  --size-h2: clamp(1.9375rem, 1.6rem + 1.3vw, 2.75rem);
  --size-h3: clamp(1.4375rem, 1.25rem + 0.7vw, 1.75rem);
  --size-h4: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
  --size-body: clamp(1rem, 0.96rem + 0.1vw, 1.125rem);
  --size-small: 0.875rem;
  --size-nav: 0.9375rem;
  --size-button: 1rem;

  /* Layout */
  --container-max: 1280px;
  --content-max: 1160px;
  --text-max: 720px;

  --edge-desktop: 64px;
  --edge-tablet: 32px;
  --edge-mobile: 20px;

  --radius-button: 5px;
  --radius-card: 6px;

  /* Abstaende */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 88px;
  --space-8: 112px;

  --section-gap: clamp(56px, 48px + 2.5vw, 112px);
  --section-gap-tight: clamp(48px, 40px + 2vw, 88px);

  --header-height: 86px;

  --shadow-card: 0 1px 2px rgba(16, 45, 81, 0.06), 0 2px 8px rgba(16, 45, 81, 0.05);
  --shadow-card-hover: 0 4px 16px rgba(16, 45, 81, 0.1);

  --transition-base: 180ms ease;
}