:root {
  /* Primary */
  --primary-50:  #F0F7FB;
  --primary-100: #E0EFF6;
  --primary-200: #B3D5E8;
  --primary-300: #7BB4D3;
  --primary-400: #4A94BD;
  --primary-500: #2878A8;
  --primary-600: #1F628C;
  --primary-700: #1A5478;
  --primary-800: #14415E;
  --primary-900: #0D2E44;

  /* Neutral */
  --neutral-50:  #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D1D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;
  --white: #FFFFFF;

  /* Akzent */
  --success: #059669;
  --warning: #D97706;
  --error:   #DC2626;

  /* Spacing (8px Grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;
  --space-12: 80px;
  --space-16: 120px;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 80px;
  --header-height: 80px;

  /* Typografie */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.10);

  /* Border-Radius — komplette Website nutzt scharfe Kanten */
  --radius: 0;
}

@media (max-width: 1024px) {
  :root { --container-pad: 40px; }
}
@media (max-width: 600px) {
  :root { --container-pad: 20px; --header-height: 64px; }
}