/* Kundengewinnungslabor Design System — generated from tokens.json */
:root, [data-theme="dark"] {
  --kgl-orange: #f8a51b;
  --kgl-orange-300: #fbc45e;
  --kgl-orange-600: #e08e08;
  --kgl-orange-700: #b87206;
  --kgl-navy-950: #001b28;
  --kgl-navy-900: #092d45;
  --kgl-blue-700: #024272;
  --kgl-blue-600: #0a538a;
  --kgl-blue-500: #1a6aa6;
  --kgl-white: #ffffff;
  --kgl-gray-50: #f4f7f9;
  --kgl-gray-100: #e6ecf1;
  --kgl-gray-300: #b9c8d4;
  --kgl-gray-500: #7d93a5;
  --kgl-gray-700: #3e5466;
  --kgl-success: #3fb37f;
  --kgl-error: #e5534b;
  --kgl-info: #4fa3e0;
  --bg-page: var(--kgl-navy-950);
  --bg-section: var(--kgl-navy-900);
  --bg-light: var(--kgl-gray-50);
  --surface-card: var(--kgl-blue-700);
  --surface-card-accent: var(--kgl-orange);
  --surface-raised: var(--kgl-navy-900);
  --text-headline: var(--kgl-orange);
  --text-body: var(--kgl-white);
  --text-muted: #b9c8d4;
  --text-on-accent: var(--kgl-navy-950);
  --text-ink: var(--kgl-navy-950);
  --text-ink-muted: var(--kgl-gray-700);
  --accent: var(--kgl-orange);
  --accent-hover: var(--kgl-orange-300);
  --accent-press: var(--kgl-orange-600);
  --border-subtle: rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.28);
  --border-accent: var(--kgl-orange);
  --shadow-card: 0 12px 32px rgba(0,10,18,.35);
  --shadow-cta: 0 8px 24px rgba(248,165,27,.28);
  --shadow-pop: 0 24px 60px rgba(0,10,18,.55);
  --focus-ring: 0 0 0 3px rgba(248,165,27,.45);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --container: 1180px;
  --container-narrow: 820px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
  --fs-display: 72px;
  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-lead: 21px;
  --fs-body: 18px;
  --fs-small: 15px;
  --fs-caption: 13px;
  --fs-eyebrow: 15px;
  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --ls-tight: -0.01em;
  --ls-eyebrow: 0.04em;
  --font-display: 'Montserrat',system-ui,sans-serif;
  --font-body: 'Open Sans',system-ui,sans-serif;
}
.display { font-family: var(--font-display); font-size: 72px; line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-display); font-size: 56px; line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-display); font-size: 40px; line-height: 1.2; font-weight: 800; }
.h3 { font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 800; }
.h4 { font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 700; }
.lead { font-family: var(--font-body); font-size: 21px; line-height: 1.55; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 18px; line-height: 1.6; font-weight: 400; }
.small { font-family: var(--font-body); font-size: 15px; font-weight: 400; }
.eyebrow { font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.label { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.caption { font-family: var(--font-body); font-size: 13px; font-weight: 400; }
.annotation { font-family: var(--font-body); font-size: 12px; font-weight: 400; }