/*
  Theming layer. Swap the values in this file to reuse the template
  for a different client/brand — base.css, components.css and
  animations.css should never need to change.

  Aktuelles Theme: helles Apple-Design (weißer Grund, dunkler Text).
  Farbe wird bewusst zurückhaltend eingesetzt: Schwarz/Weiß/Grau tragen die
  Fläche, Apple-Blau markiert ausschließlich Interaktion (Links, Buttons,
  Fokus, aktiver Nav-Zustand) — genau wie auf apple.com.
*/
:root {
  /* Brand colors */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f7;
  --color-surface: #f5f5f7;
  --color-surface-hover: #ebebef;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.16);

  --color-text: #1d1d1f;
  --color-text-muted: #6e6e73;
  --color-text-faint: #86868b;

  /* Invertiertes Set für dunkle Sections (.section-dark) */
  --color-bg-invert: #1d1d1f;
  --color-surface-invert: #2c2c2e;
  --color-border-invert: rgba(255, 255, 255, 0.14);
  --color-text-invert: #f5f5f7;
  --color-text-invert-muted: #a1a1a6;

  /* Accent: Orange auf ausdrücklichen Kundenwunsch (#FF8559), unverändert
     eingesetzt trotz bekanntem Kontrastrisiko auf hellem Grund (~2,4:1,
     unter dem WCAG-AA-Richtwert von 4,5:1) — bewusst so entschieden. */
  --color-accent: #ff8559;
  --color-accent-hover: #ff9e7a;
  --color-accent-strong: #ff561a;
  --color-accent-contrast: #ffffff;
  /* RGB-Tripel für rgba()-Glows (Hover-/Auswahl-Leuchten auf Kacheln etc.) */
  --color-accent-rgb: 255, 133, 89;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* 10k-Ausbau (2026-07-02): Editorial-Display-Typografie im Awwwards-Stil.
     Die Hero-Headline wächst auf nahezu Viewport-Breite, H2 deutlich größer.
     Inter Variable trägt das dank optischer Größenkorrektur problemlos. */
  --fs-display: clamp(3rem, 10.5vw, 10rem);
  --fs-mega: clamp(3.5rem, 15.5vw, 15rem);
  --ls-display: -0.045em;
  --fs-hero: clamp(2.5rem, 6vw + 1rem, 5.5rem);
  --fs-h2: clamp(2.25rem, 3.6vw + 1rem, 4.25rem);
  --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --fs-body-lg: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-tight: 1.1;
  --lh-normal: 1.6;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout: Inhalt füllt die Seite, Innenabstand wächst mit dem Viewport */
  --max-width: 1760px;
  --container-padding: clamp(1.25rem, 4vw, 4rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  /* Höhe der fixierten Nav-Leiste (gescrollter Zustand) + Puffer, damit
     Anker-Sprünge nicht darunter verschwinden. */
  --header-offset: 90px;

  /* Motion: gestaffelte Timing-Tokens statt einer einzigen Dauer für alles.
     fast = Hover/Press, normal = Reveals, slow = großflächige Scroll-Effekte. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 180ms;
  --duration-normal: 550ms;
  --duration-slow: 900ms;
}