/* ==========================================================================
   variables.css — Zentrale Design-Tokens
   Skibi IT GmbH — www.skibi-it.com

   Alle Farben, Schriftgrößen, Abstände, Radien und Schatten werden hier
   zentral gepflegt. Anpassungen am Design erfolgen zuerst in dieser Datei.
   ========================================================================== */

:root {
  /* ---- Farben -------------------------------------------------------- */
  --color-bg: #ffffff;
  --color-surface: #f6f6f4;          /* dezente Flächen, Karten-Hintergrund */
  --color-ink: #0a0a0a;              /* Primärtext, Überschriften */
  --color-ink-soft: #3c3c3c;         /* Fließtext */
  --color-ink-muted: #636363;        /* Sekundärtext, Meta-Angaben */
  --color-line: #e4e4e0;             /* Rahmen und Trennlinien */
  --color-line-strong: #0a0a0a;      /* betonte Linien */

  --color-inverse-bg: #0c0c0c;       /* schwarze Karten (Footer, CTA) */
  --color-inverse-ink: #ffffff;
  --color-inverse-muted: #b5b5b5;
  --color-inverse-line: #2c2c2c;

  --color-error: #b3261e;            /* Formular-Fehlermeldungen */
  --color-focus: #0a0a0a;            /* Fokus-Ring */

  /* ---- Typografie ----------------------------------------------------- */
  --font-sans: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --text-xs: 0.8125rem;                              /* 13px — Meta, Eyebrow */
  --text-sm: 0.9375rem;                              /* 15px — Kleintext */
  --text-base: 1.0625rem;                            /* 17px — Fließtext */
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);   /* Lead-Absätze */
  --text-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --text-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
  /* Der Deckel von 4.125rem (66px) ist gemessen: Er ist der größte Grad, bei dem
     die Startseiten-H1 ab 1200px Fensterbreite zweizeilig bleibt. Wird er erhöht,
     wird sie dreizeilig, der Hero wächst um rund 98px und verlässt bei 1024x768
     und 1366x768 den ersten Bildschirm. */
  --text-h1: clamp(2.25rem, 1.5rem + 3.8vw, 4.125rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.7;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* ---- Abstände -------------------------------------------------------- */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: clamp(3rem, 2rem + 4vw, 5rem);
  --space-section: clamp(4.5rem, 3rem + 7vw, 8.5rem);

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 75rem;                            /* 1200px */
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --content-narrow: 46rem;                           /* Lesebreite */

  /* ---- Radien ---------------------------------------------------------- */
  --radius-s: 0.5rem;
  --radius-m: 1rem;
  --radius-l: 1.75rem;                               /* große Karten, Footer */
  --radius-pill: 999px;                              /* Buttons */

  /* ---- Schatten -------------------------------------------------------- */
  --shadow-s: 0 1px 2px rgba(10, 10, 10, 0.05);
  --shadow-m: 0 10px 30px rgba(10, 10, 10, 0.08);

  /* ---- Übergänge ------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;

  /* ---- Header ---------------------------------------------------------- */
  --header-height: 5rem;
}