/* ==========================================================================
   BAYLEX CONSULTING – DESIGN TOKENS
   --------------------------------------------------------------------------
   Hier ändern Sie das komplette Branding an EINER Stelle:
   Farben, Schrift, Rundungen, Animationstempo.
   Alles andere (styles.css) greift auf diese Variablen zu.
   ========================================================================== */

/* ---------- Schrift (lokal gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Markenfarben: Deep Navy + Weiß ---------- */
  --navy-950: #071322;   /* Footer, tiefste Fläche */
  --navy-900: #0b192c;   /* Haupt-Navy (Hero, dunkle Sektionen, Text) */
  --navy-800: #10243f;   /* Karten auf Navy */
  --navy-700: #17335a;
  --navy-600: #394792;   /* Logo-Blau: Fokus-Ring, Hover-Akzente auf Hell */

  /* ---------- Neutrale Töne ---------- */
  --slate-50:  #f4f6f8;  /* Seitenhintergrund (hell) */
  --slate-100: #eaeef2;
  --slate-200: #d9dfe6;
  --slate-300: #bcc6d2;
  --slate-400: #8c99aa;
  --slate-500: #647286;
  --slate-600: #465468;
  --slate-700: #2e3b4e;

  /* ---------- Semantische Farben ---------- */
  --bg:            var(--slate-50);   /* Seitenhintergrund */
  --surface:       #ffffff;           /* Karten / weiße Sektionen */
  --ink:           var(--navy-900);   /* Haupttext auf hell */
  --ink-muted:     var(--slate-600);  /* Nebentext auf hell */
  --line:          rgba(11, 25, 44, 0.14);
  --line-strong:   rgba(11, 25, 44, 0.28);

  --on-dark:       #ffffff;           /* Haupttext auf Navy */
  --on-dark-muted: #a9b8cc;           /* Nebentext auf Navy */
  --line-dark:     rgba(255, 255, 255, 0.14);
  --line-dark-strong: rgba(255, 255, 255, 0.28);

  --whatsapp:      #25d366;           /* nur das WhatsApp-Symbol */

  --danger:        #b3261e;
  --danger-soft:   #fbeeed;
  --success:       #1a7f55;
  --success-soft:  #e7f5ee;

  /* ---------- Typografie ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-hero:  clamp(2.5rem, 1rem + 4.2vw, 5.25rem);
  --fs-h1:    clamp(2.3rem, 1rem + 3.5vw, 4.4rem);
  --fs-h2:    clamp(1.85rem, 1.05rem + 2.6vw, 3.25rem);
  --fs-h3:    clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  --fs-lead:  clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;

  /* ---------- Layout ---------- */
  --container: 85rem;                       /* max. Inhaltsbreite (skaliert auf 4K mit) */
  --gutter:    clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --section-y: clamp(4rem, 2.6rem + 6vw, 8.5rem);
  --header-h:  4.5rem;

  /* ---------- Rundungen: bewusst minimal ---------- */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 4px;

  /* ---------- Bewegung (Easing & Dauer) ---------- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press:   140ms;
  --dur-fast:    180ms;
  --dur-base:    240ms;
  --dur-reveal:  600ms;
  --stagger:     60ms;
}

/* Größere Bildschirme (Full-HD, 2K, 4K): alles skaliert proportional mit */
@media (min-width: 1920px) { html { font-size: 112.5%; } }
@media (min-width: 2400px) { html { font-size: 125%; } }
@media (min-width: 3200px) { html { font-size: 150%; } }

@media (max-width: 480px) {
  :root { --header-h: 4rem; }
}