/* =============================================================
   ELCINO DESIGN — Design-Tokens (Corporate Identity)
   Der EINZIGE Ort, den du pro Marke/Anpassung anfasst.
   CI: Primär Weiss · Akzent Schwarz & helles Grau · 1 Knallfarbe.
   ============================================================= */
:root{

  /* ---- Farben ---------------------------------------------- */
  --c-bg:        #ffffff;   /* Primär: Weiss              */
  --c-bg-soft:   #f5f5f5;   /* heller Grau-Block          */
  --c-bg-sink:   #efefef;   /* etwas tiefere Fläche       */
  --c-ink:       #111111;   /* Schwarz: Text / Akzent     */
  --c-ink-soft:  #2b2b2b;   /* weiches Schwarz            */
  --c-grey:      #6b6b6b;   /* Sekundärtext (helles Grau) */
  --c-grey-2:    #9a9a9a;   /* noch leiser                */
  --c-line:      #e6e6e6;   /* Linien / Rahmen            */

  /* Knallfarbe für Spezial-Überschriften & Highlights.
     >>> NUR HIER ändern, wirkt überall (Headlines, Akzente). <<< */
  --c-pop:       #1b45ff;   /* Electric Blue              */
  --c-pop-ink:   #ffffff;   /* Text auf Knallfarbe        */

  /* Hero-Überlagerung über dem Video */
  --hero-overlay: rgba(10,10,12,.55);

  /* ---- Typografie ------------------------------------------ */
  /* Display = Jost (geometrisch, passt zum Wortmarken-Look)
     Body    = Inter (klar, gut lesbar) */
  --ff-display: 'Jost', system-ui, sans-serif;
  --ff-body:    'Inter', system-ui, sans-serif;

  --fw-light:   300;
  --fw-reg:     400;
  --fw-med:     500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* fluide Typo-Skala */
  --fs-hero:   clamp(2.6rem, 6vw, 5rem);
  --fs-h1:     clamp(2.4rem, 5vw, 3.9rem);
  --fs-h2:     clamp(2rem, 4vw, 3rem);
  --fs-h3:     clamp(1.35rem, 2.1vw, 1.7rem);
  --fs-body:   1.1875rem;     /* 19px (vergrößert) */
  --fs-small:  .95rem;
  --fs-eyebrow:.86rem;

  --lh-tight:  1.08;
  --lh-snug:   1.3;
  --lh-body:   1.65;

  /* ---- Layout ---------------------------------------------- */
  --maxw:      1240px;
  --maxw-text: 760px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --header-h:  112px;         /* Höhe sticky Header (Scroll-Offset) */

  --radius:    14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,.10);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.16);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --dur:       .35s;
}