/*
 * Design-Tokens: die EINZIGE Stelle für Farben, Schrift, Radien, Abstände, Glas-Effekt und Motion.
 * Stil (Leons Vorgabe, 2026-11-06): clean, minimalistisch, Apple-artig. Priorität 1 Conversion, 2 Design.
 * Komponenten verwenden ausschließlich diese Variablen. Pro Betrieb überschreibbar: accent, accentInk
 * (content.json -> theme).
 */
:root {
  /* Farben */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f7; /* Sections wechseln automatisch zwischen bg und bg-alt */
  --color-surface: #ffffff; /* Karten auf bg-alt */
  --color-surface-on-white: #f5f5f7; /* Karten auf bg */
  --color-ink: #1d1d1f;
  --color-ink-muted: #6e6e73;
  --color-line: #d2d2d7;
  --color-line-soft: #e8e8ed;
  --color-accent: #0071e3;
  --color-accent-hover: #0077ed;
  --color-accent-ink: #ffffff;
  --color-accent-soft: #e8f1fc;
  --color-link: #0066cc; /* Text-Links und Outline-Buttons (Kontrast >= 4.5:1 auch auf #f5f5f7) */
  --color-success: #1d7d3f;
  --color-danger: #c9302c;
  --color-emergency: #c9302c;
  --color-emergency-ink: #ffffff;
  --color-placeholder-bg: #ececf0;
  --color-placeholder-ink: #5c5c61;
  --color-banner-bg: #1d1d1f;
  --color-banner-ink: #f5f5f7;
  --color-focus: #0071e3;

  /* Glas-Navigation */
  --nav-bg: rgb(255 255 255 / 0.72);
  --nav-blur: saturate(180%) blur(20px);
  --nav-height: 3.25rem;

  /* Schrift: Inter Variable, lokal (OFL). Kein SF Pro (Lizenz). */
  --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);
  --font-weight-body: 400;
  --font-weight-strong: 600;
  --font-weight-heading: 600;
  --letter-spacing-heading: -0.02em;
  --letter-spacing-display: -0.028em;
  --letter-spacing-body: -0.01em;

  /* Typo-Skala: Fließtext 17px/1.5, große enge Headlines */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem; /* 17px */
  --text-lg: 1.1875rem; /* 19px */
  --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --text-3xl: clamp(2.125rem, 1.25rem + 3.6vw, 4.5rem); /* mobil 34–36 px, Desktop bis 72 px */
  --line-height-tight: 1.07;
  --line-height-snug: 1.25;
  --line-height-body: 1.5;

  /* Abstände: viel Weißraum, großes vertikales Section-Padding */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --section-padding: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2.75rem);
  --container: 70rem;
  --container-narrow: 44rem;

  /* Radien */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 980px;

  /* Keine harten Schatten; nur sehr weiche Tiefe für Overlays */
  --shadow-soft: 0 4px 24px rgb(0 0 0 / 0.06);
  --border: 1px solid var(--color-line-soft);

  /* Motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 200ms;
  --reveal-distance: 24px;

  /* Sticky-Call-Leiste (mobil) */
  --callbar-height: 4.5rem;
}