:root {
  /* Farben — Design-System "Die Unabhängigen Lüneburg" */
  --navy-900: #2d4a66;
  --navy-800: #385b7d;
  --navy-700: #496180;
  --teal-600: #5e8c98;
  --teal-400: #92abb4;
  --mist-200: #d9e2e6;
  --mist-100: #f3f7fa;
  --gray-600: #6f6f6e;
  --white: #ffffff;
  --red-600: #df0713;
  --ink: #1e2a35;

  --color-bg: var(--white);
  --color-bg-soft: var(--mist-100);
  --color-bg-panel: var(--mist-200);
  --color-surface-primary: var(--navy-800);
  --color-surface-secondary: var(--teal-600);
  --color-surface-tertiary: var(--teal-400);
  --color-text: var(--ink);
  --color-text-on-dark: var(--white);
  --color-text-muted: var(--gray-600);
  --color-accent: var(--red-600);
  --color-border: #c3cdd3;
  --color-link: var(--navy-800);
  --color-link-hover: var(--teal-600);

  /* Typografie */
  --font-display: 'DIN Alternate Bold', Impact, sans-serif;
  --font-body: 'Source Sans', -apple-system, sans-serif;
  --font-accent: 'Bradley Hand Bold', cursive;

  --text-display-xl: 700 clamp(2.4rem, 4vw, 4rem)/1.05 var(--font-display);
  --text-display-lg: 700 clamp(1.9rem, 2.6vw, 2.6rem)/1.1 var(--font-display);
  --text-display-md: 700 1.4rem/1.2 var(--font-display);
  --text-eyebrow: 700 0.85rem/1 var(--font-display);
  --text-body-lg: 400 1.2rem/1.6 var(--font-body);
  --text-body: 400 1rem/1.6 var(--font-body);
  --text-body-sm: 400 0.875rem/1.5 var(--font-body);
  --text-label: 700 1rem/1.3 var(--font-body);

  --letter-spacing-display: 0.01em;
  --letter-spacing-eyebrow: 0.08em;

  /* Abstände (8px-Raster) */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  /* Radien */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(30, 42, 53, 0.12);
  --shadow-md: 0 6px 18px rgba(30, 42, 53, 0.18);

  --content-max-width: 1200px;
}