/*
  Design-Tokens, Rescue Trade™ Website
  Alle Farb-, Schrift- und Abstandswerte der Seite laufen ausschließlich
  über diese Custom Properties. Kein Wert wird anderswo fest im Code
  wiederholt.

  Breakpoints sind hier nur dokumentiert (Custom Properties lassen sich in
  @media-Bedingungen nicht zuverlässig browserübergreifend einsetzen):
  1440px Desktop · 834px Tablet · 390px Mobil.
*/

:root {

  /* ---------------------------------------------------------------
     Farben – Marke, nicht verhandelbar

     Kein Blau mehr im Projekt (Kundenvorgabe, Wettbewerber besetzt
     Blau) – Palette seit der Farbumstellung: Rot, Weiß, Grau,
     Anthrazit, Schwarz (nur Überschriften). Rot ist Markenfarbe UND
     bleibt gleichzeitig exklusiv für Aktionen (Buttons, Hover,
     Formular-Fokus). Ruhige Akzente (Eyebrows, Links, Akzentlinien,
     allgemeiner Fokusring, Textmarkierung) laufen über Grau statt
     über einen zweiten, erfundenen Rotton – kein Token hier ist eine
     Eigenkreation ohne Vorgabe.
  --------------------------------------------------------------- */
  --color-red: #c80b0e;
  --color-red-hover: #a9090b;
  --color-white: #ffffff;
  --color-gray: #575756;
  --color-anthracite: #2b2b2a;
  --color-black: #000000;
  --color-gray-100: #f4f4f4;
  --color-line: #d8d8d8;

  /* Farben – Text (Aliase auf die Markenfarben oben, damit keine
     Rohwerte doppelt im Code stehen) */
  --color-text: var(--color-anthracite);
  --color-text-secondary: var(--color-gray);
  --color-heading: var(--color-black);

  /* Deckkraft als reine Zahl, für die CSS-Property opacity (die keine
     Farbwerte akzeptiert). */
  --opacity-medium: 0.5;

  /* Weiß auf Anthrazit, Deckkraft-Stufen. Dient auf dunklem Grund
     zusätzlich als "helle Graustufe" für ruhige Akzente (Eyebrows,
     Links) – eigens gemessen statt geschätzt: reines Grau (#575756)
     hat auf Anthrazit nur Kontrast 1,96 und fällt durch, white-a65
     kommt auf Anthrazit dagegen auf effektiv #b5b5b4 (Kontrast 6,91)
     und wird deshalb dafür wiederverwendet statt einen weiteren
     eigenen Hellgrau-Ton zu erfinden. */
  --white-a06: rgba(255, 255, 255, 0.06);
  --white-a15: rgba(255, 255, 255, 0.15);
  --white-a18: rgba(255, 255, 255, 0.18);
  --white-a20: rgba(255, 255, 255, 0.2);
  --white-a28: rgba(255, 255, 255, 0.28);
  --white-a35: rgba(255, 255, 255, 0.35);
  --white-a45: rgba(255, 255, 255, 0.45);
  --white-a50: rgba(255, 255, 255, 0.5);
  --white-a60: rgba(255, 255, 255, 0.6);
  --white-a65: rgba(255, 255, 255, 0.65);
  --white-a70: rgba(255, 255, 255, 0.7);
  --white-a75: rgba(255, 255, 255, 0.75);
  --white-a80: rgba(255, 255, 255, 0.8);
  --white-a85: rgba(255, 255, 255, 0.85);
  --white-a94: rgba(255, 255, 255, 0.94);

  /* Hero-Overlay auf Video (Anthrazit, abgestuft) */
  --overlay-hero-1: rgba(43, 43, 42, 0.94);
  --overlay-hero-2: rgba(43, 43, 42, 0.55);
  --overlay-hero-3: rgba(43, 43, 42, 0.35);

  /* Fokusring: Grau in Ruhe, Rot exklusiv für Aktionen (Buttons,
     Formularfelder), Hell auf dunklem Grund (siehe Messung oben) –
     als Custom Property, damit dunkle Sektionen sie einmal pro
     Bereich überschreiben können und jedes fokussierbare Kind darin
     automatisch erbt, siehe css/base.css und die Abschnitte mit
     dunklem Grund in components.css/den Seiten-CSS-Dateien. */
  --focus-ring-color: var(--color-gray);

  /* ---------------------------------------------------------------
     Typografie – Schriftfamilien und -schnitte
  --------------------------------------------------------------- */
  --font-sans: "Roboto", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Typografie – fluide Überschriften-Skala (Desktop, clamp) */
  --fs-hero: clamp(90px, 14.5vw, 208px);
  --fs-h2-xl: clamp(44px, 5.4vw, 84px);
  --fs-h2-lg: clamp(40px, 4.4vw, 66px);
  --fs-h2-costs: clamp(40px, 4.6vw, 70px);
  --fs-h2-table: clamp(36px, 4vw, 60px);
  --fs-problem-lead: clamp(24px, 2.4vw, 34px);
  --fs-problem-statement: clamp(48px, 6.6vw, 104px);
  --fs-counter: clamp(100px, 13.5vw, 230px);
  --fs-counter-sub: clamp(24px, 2.8vw, 40px);
  --fs-watermark: clamp(90px, 12.5vw, 190px);

  /* Typografie – statische Skala (px) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-25: 25px;
  --fs-36: 36px;
  --fs-38: 38px;
  --fs-44: 44px;
  --fs-60: 60px;
  --fs-64: 64px;

  /* Typografie – Größe des hochgestellten ™, relativ zur Elterngröße */
  --fs-tm-022: 0.22em;
  --fs-tm-040: 0.4em;
  --fs-tm-045: 0.45em;
  --fs-tm-055: 0.55em;
  --fs-tm-060: 0.6em;

  /* Typografie – Zeilenhöhen */
  --lh-1: 1;
  --lh-078: 0.78;
  --lh-084: 0.84;
  --lh-095: 0.95;
  --lh-098: 0.98;
  --lh-102: 1.02;
  --lh-155: 1.55;
  --lh-16: 1.6;
  --lh-165: 1.65;
  --lh-17: 1.7;

  /* Typografie – Laufweite */
  --ls-tight-04: -0.04em;
  --ls-tight-03: -0.03em;
  --ls-tight-025: -0.025em;
  --ls-tight-02: -0.02em;
  --ls-tight-015: -0.015em;
  --ls-tight-01: -0.01em;
  --ls-wide-002: 0.02em;
  --ls-wide-012: 0.12em;
  --ls-wide-014: 0.14em;
  --ls-wide-018: 0.18em;
  --ls-none: 0em;

  /* ---------------------------------------------------------------
     Abstände – ein Wert pro tatsächlich genutzter Größe
  --------------------------------------------------------------- */
  --space-0: 0px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-36: 36px;
  --space-38: 38px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-60: 60px;
  --space-64: 64px;
  --space-72: 72px;
  --space-88: 88px;
  --space-90: 90px;
  --space-96: 96px;
  --space-100: 100px;
  --space-110: 110px;
  --space-120: 120px;
  --space-128: 128px;
  --space-130: 130px;
  --space-140: 140px;
  --space-150: 150px;
  --space-160: 160px;
  --space-170: 170px;
  --space-210: 210px;
  --space-240: 240px;

  /* ---------------------------------------------------------------
     Größen – Icons, Logo, feste Höhen, Container-Breiten
  --------------------------------------------------------------- */
  --size-icon-18: 18px;
  --size-logo-header: 40px;
  --size-logo-table: 34px;
  --size-logo-footer: 44px;
  --size-logo-hero-product: 34px;
  --size-logo-row-product: 44px;
  --size-logo-hero-wordmark: 96px;
  --size-logo-hero-wordmark-mobile: 52px;
  --size-header-height: 64px;
  --size-sticky-cta-height: 52px;
  --size-sticky-cta-height-mobile: 48px;
  --size-progress-height: 3px;
  --size-footer-crest: clamp(320px, 42vw, 640px);
  --size-footer-crest-mobile: 260px;

  /* Höhen der Bildflächen (Produkte, Galerie, Lager, Firma) */
  --media-h-260: 260px;
  --media-h-300: 300px;
  --media-h-390: 390px;
  --media-h-400: 400px;
  --media-h-480: 480px;
  --media-h-520: 520px;
  --media-h-560: 560px;
  --media-h-580: 580px;

  /* Container- und Textbreiten */
  --container-max: 1440px;
  --container-max-wide: 1500px;
  --measure-380: 380px;
  --measure-520: 520px;
  --measure-560: 560px;
  --measure-620: 620px;
  /* Lesebreite reiner Textseiten (Impressum, Datenschutz), siehe
     css/pages/textseite.css: breit genug für die Label-/Wert-Spalten
     der .fact-list (210px Label), schmal genug für eine angenehme
     Zeilenlänge im Fließtext. */
  --measure-780: 780px;
  --measure-900: 900px;
  --measure-920: 920px;
  --measure-980: 980px;

  /* Mindestbreite einer Grid-Spalte bei repeat(auto-fit, minmax(…)),
     wenn die Anzahl der Einträge aus den Daten kommt und CSS sie nicht
     kennen darf. Eigene Gruppe, weil das kein Textmaß ist: --measure-*
     begrenzt Zeilenlängen, das hier bestimmt, ab wann eine weitere
     Spalte entsteht.

     Alle drei Werte sind gemessen, nicht geschätzt. Die Fotoreihe der
     Kategorien (.produkt-kategorien, css/pages/produkt.css) hat je
     Produktlinie 8, 4 oder 3 Einträge, die Spaltenzahl darf deshalb
     nicht fest verdrahtet sein.

     Obergrenze 260px: bei 1440px ergibt das genau vier Spalten, die
     acht Bedding-Kategorien stehen damit in zwei vollen Reihen und die
     vier Transfer-Kategorien in einer. Bei 180px wären es sechs
     Spalten mit nur zwei belegten Plätzen in der letzten Reihe.

     Untergrenze 200px: darunter sind die Kacheln nicht mehr lesbar.
     Die Produkte sind überwiegend weiß auf weißem Grund, ein 139px
     breites Foto zeigt davon nichts mehr. Die Untergrenze sorgt
     zugleich dafür, dass ab rund 745px drei Spalten greifen, also
     genau im Tablet-Bereich, der sonst eine über 1500px hohe Reihe
     ergibt.

     18vw dazwischen: wächst langsamer als der Viewport, sonst würden
     die Kacheln auf großen Schirmen zu wenige Spalten ergeben.

     Immer mit min(100%, …) kombinieren, sonst ist die Spalte bei 390px
     breiter als der Container und die Seite läuft horizontal über. */
  --grid-min-kategorien: clamp(200px, 18vw, 260px);

  /* Obergrenze für die Beschriftung eines Kategorie-Tabs im
     Produktbereich auf schmalen Schirmen (.produktbereich__tab, siehe
     css/pages/home.css). Gemessen, nicht geschätzt: Seit der Kunde die
     Rescue-Transfer-Gruppen benannt hat, ist der längste Tab
     („Umbettungslaken mit Saugkern und Griffen") einzeilig 332px breit
     – bei 390px Viewport ist die Tab-Reihe aber nur 294px breit
     sichtbar. Ein Tab, der breiter ist als sein Fenster, lässt sich
     nie ganz lesen. Mit 170px bricht die Beschriftung stattdessen auf
     zwei Zeilen um, die Reihe wird 49px höher und 351px kürzer. */
  --tab-max-schmal: 170px;

  /* ---------------------------------------------------------------
     Sonstiges
  --------------------------------------------------------------- */
  --radius-sm: 3px;
  --transition-base: 0.35s ease;
  --transition-accordion: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --z-header: 100;
  --z-sticky-cta: 90;
  --z-progress: 200;
}