/* Design-Tokens Ruck Lasertechnik – Farben/Schriften NUR hier ändern.
   Schrift: Barlow + Barlow Condensed (Jeremy Tribby, SIL Open Font License 1.1), lokal unter ../fonts/.
   Doku: design.md (Abschnitt „Design ändern“). */

/* ---------- Lokale Schriften ---------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/barlow-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/barlow-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-condensed-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/barlow-condensed-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("../fonts/barlow-condensed-700-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("../fonts/barlow-condensed-700-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ---------- Farbrollen ---------- */
  /* Laser-Orange: Buttons (Fläche), Kennzahlen + Akzentlinien auf Anthrazit, Deko-Linien.
     NICHT als Textfarbe auf hellem Grund (nur 2,9:1) – dafür --color-primary-ink. */
  --color-primary: #ff5a1f;
  --color-primary-hover: #ff7a45;     /* heller, damit dunkler Button-Text noch mehr Kontrast hat */
  --color-on-primary: #15181c;        /* Text auf Orange: dunkel, nicht weiß (weiß nur 3,1:1) */
  --color-primary-ink: #b93a0b;       /* Orange als Text auf hell: Links, Eyebrows, Fokus */
  --color-accent: var(--color-primary); /* bewusst KEIN zweiter Akzent – Orange ist die einzige Signalfarbe */

  /* Neutral hell (Stahl) */
  --color-bg: #f4f5f6;                /* Seitenhintergrund, kaltes Hellgrau */
  --color-surface: #eceef1;           /* Karten, Tabellen, Kontakt-Kacheln – dezent statt Weiß (Text 13.6:1, Nebentext 5.1:1) */
  --color-surface-alt: #e8eaed;       /* abgesetzte Abschnitte (Chips, Ablauf) */
  --color-text: #1e2329;              /* Anthrazit */
  --color-text-muted: #5b6570;        /* Stahlgrau: Nebentexte, Bildunterschriften */
  --color-border: #d5d9de;            /* Trennlinien (dekorativ) */
  --color-border-strong: #7a838d;     /* Formularfelder, Tabellenkopf-Linie (UI ≥ 3:1) */

  /* Neutral dunkel (Anthrazit-Flächen: Hero, Kennzahlen, CTA-Band, Footer) */
  --color-dark: #1e2329;
  --color-dark-alt: #2a3038;          /* Karten auf Anthrazit; Orange darauf nur groß/fett */
  --color-on-dark: #f4f5f6;
  --color-on-dark-muted: #aab2bb;
  --color-dark-border: #3a414a;
  --color-overlay: rgb(21 24 28 / 0.55); /* Abdunklung über Fotos (Hero, Bild-Kacheln) */
  --color-overlay-strong: rgb(21 24 28 / 0.82); /* Textplaketten über Fotos */

  --color-focus: var(--color-primary-ink);     /* Fokusrahmen auf hell */
  --color-focus-on-dark: var(--color-primary); /* Fokusrahmen auf dunkel */

  /* ---------- Schrift ---------- */
  --font-heading: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-xs: 0.8125rem;                                   /* 13px: Labels, Footer-Kleingedrucktes */
  --fs-sm: 0.9375rem;                                   /* 15px */
  --fs-base: 1.0625rem;                                 /* 17px Fließtext (Barlow läuft klein) */
  --fs-md: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);  /* Lead, Kartentitel */
  --fs-lg: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);         /* h3 */
  --fs-xl: clamp(2rem, 1.6rem + 1.8vw, 3rem);           /* h2 */
  --fs-2xl: clamp(2.75rem, 2rem + 3.5vw, 4.75rem);      /* h1 Unterseiten, Kennzahlen */
  --fs-3xl: clamp(3.5rem, 1.8rem + 9vw, 10rem);         /* Hero-Titel */
  --lh-tight: 0.95;
  --lh-heading: 1.08;
  --lh-body: 1.6;
  --tracking-label: 0.14em;                             /* Großbuchstaben-Labels */

  /* ---------- Abstände ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: clamp(3rem, 2rem + 4vw, 5rem);    /* Abschnitt innen */
  --space-8: clamp(4.5rem, 3rem + 6vw, 8rem);  /* Abschnitt groß */

  /* ---------- Form & Tiefe ---------- */
  --radius: 2px;                 /* fast eckig: Blech, kein Plastik */
  --radius-media: 10px;          /* Hero-Fenster */
  --cut: 12px;                   /* Fase an Buttons/Karten (abgeschrägte Ecke) */
  --line: 2px;                   /* Akzentlinien-Stärke */
  --shadow: 0 1px 2px rgb(21 24 28 / 0.08), 0 8px 24px -12px rgb(21 24 28 / 0.25);
  --shadow-lg: 0 24px 60px -20px rgb(21 24 28 / 0.55);
  --container: 76rem;            /* 1216px */
  --container-narrow: 46rem;     /* Fließtext, Impressum */
  --header-h: 4.25rem;
  --callbar-h: 3.75rem;          /* mobile Kontaktleiste unten */

  /* ---------- Bewegung ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 200ms;

  /* ---------- Hero „Scroll Expansion“ ---------- */
  --hero-scroll: 240svh;          /* Scrollstrecke der Sektion (Höhe), mehr = langsamer */
  --hero-start-w: min(300px, 72vw);
  --hero-start-h: min(400px, 52svh);
  --hero-end-w: 95vw;
  --hero-end-h: 85svh;
  --hero-spread: 16vw;            /* wie weit die Titelzeilen auseinanderfahren */

  /* ---------- Ebenen ---------- */
  --z-base: 1;
  --z-hero-text: 10;
  --z-header: 50;
  --z-callbar: 60;
  --z-lightbox: 100;
}

@media (max-width: 40rem) {
  :root {
    --hero-end-w: 100vw;
    --hero-end-h: calc(100svh - var(--header-h));
    --hero-spread: 6vw;
    --radius-media: 8px;
  }
}