/* ============================================================
   FEMOtech Design-Tokens · einzige Farb- und Skalenquelle
   Quelle: design/DESIGN-SYSTEM.md · Rot/Schwarz aus Logo gesampelt
   ============================================================ */
:root {
  /* Farben */
  --c-red: #C31528;
  --c-red-deep: #9E0F20;
  --c-ink: #1A1A18;
  --c-ink-soft: #2E2E2B;
  --c-steel-900: #3D3F41;
  --c-steel-600: #9EA2A5;   /* Sekundärtext (Dark-Theme-tauglich) */
  --c-steel-300: #C9CCCE;
  --c-steel-150: #E4E6E7;
  --c-paper: #F6F5F2;              /* helle Text-/Plattenfarbe (Logo-Plakette, Produkt-Platten) */
  --c-white: #FFFFFF;

  /* Dark-Theme-Oberflächen (die gesamte Site läuft im Darkmode) */
  --bg: #151514;                   /* Seitengrund, warmes Anthrazit */
  --surface: #1E1E1C;             /* Karten/gehobene Sektionen */
  --surface-2: #262624;           /* Chips, Inputs, zweite Ebene */
  --text: #F2F1ED;                 /* Fließtext auf dunkel */
  --text-soft: #A8ABAD;           /* Sekundärtext auf dunkel */
  --line: rgba(246,245,242,.15);   /* Haarlinien auf dunkel */
  --scrim: linear-gradient(12deg, rgba(26,26,24,.82) 0%, rgba(26,26,24,.45) 45%, rgba(26,26,24,.18) 100%);
  --hairline: 1px solid var(--line);
  --hairline-dark: 1px solid rgba(255,255,255,.16);

  /* Typografie */
  --font-sans: "Saira", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: var(--font-sans);  /* Kundenvorgabe: keine Mono-Akzentschrift, Fließtext-Font überall */
  --fs-display: clamp(2.4rem, 5.5vw, 5.2rem);
  --fs-huge-num: clamp(3rem, 8vw, 7rem);
  --fs-h1: clamp(2.4rem, 5.5vw, 4.5rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3: clamp(1.35rem, 2.2vw, 1.75rem);
  --fs-body: clamp(1.0625rem, 1.2vw, 1.1875rem);
  --fs-small: .9375rem;
  --fs-label: .8125rem;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 192px;
  --sect-y: clamp(4rem, 9vw, 8.5rem);

  /* Layout */
  --wrap-max: 1240px;
  --wrap-wide: 1520px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Radien & Schatten */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 12px;
  --shadow-1: 0 1px 2px rgba(26,26,24,.06);
  --shadow-2: 0 12px 32px -12px rgba(26,26,24,.28);

  /* Motion */
  --ease-out: cubic-bezier(.22,.8,.32,1);
  --dur-1: .18s;
  --dur-2: .45s;
  --dur-3: .7s;

  /* Header */
  --header-h: 76px;
}