/* ============ TYPO-SYSTEM — zentral für alle Seiten (12.10.) ============
   Abgeleitet vom Startseiten-System (Figma Soll-3 Desktop + M-1 v3 Mobil). Jede Rolle hat Größe (--fs-*), Zeilenhöhe (--lh-*)
   und Laufweite (--ls-*); Schriftfamilie und -stärke setzt die Regel, die die Rolle nutzt. Seiten legen KEINE eigenen Schriftgrößen
   mehr fest, sondern wählen eine Rolle.

   Stufen: Desktop ab 1101 px in Design-Pixeln var(--u) (styles.css: Figma 1440 = 1 px, wächst wie Skinn bis 1,3 × ab 2560 px);
   Tablet 761–1100 px mit --u = 1 px, Statement und Manifest dort fluide; Mobil bis 760 px eigene Werte (M-1 v3).
   Regeln: Archivo Medium −1 % bis 20 px, −2 % bei 22–36 px, −3 % ab 40 px; Überschriften kompakt (1,05–1,2), Fließtext 1,375–1,4;
   Labels/Meta Inter Semi Bold in Versalien +2 %. Versalien nur für Labels, Nav und kurze H2, immer einfarbig.
   Kleine Schrift hat Untergrenzen, damit sie unter 1440 px nicht zu klein wird. */
:root{
  /* Archivo Medium */
  --fs-manifest:calc(54 * var(--u));  --lh-manifest:calc(57 * var(--u));  --ls-manifest:-.03em;  /* Startseiten-Manifest */
  --fs-statement:calc(44 * var(--u)); --lh-statement:calc(46 * var(--u)); --ls-statement:-.03em; /* Statements, Seiten-H1 */
  --fs-display:calc(40 * var(--u));   --lh-display:calc(43 * var(--u));   --ls-display:-.03em;   /* H2-Optik (Versal), große Bereichstitel */
  --fs-titel-l:calc(36 * var(--u));   --lh-titel-l:calc(39 * var(--u));   --ls-titel-l:-.02em;   /* Listentitel groß */
  --fs-titel-m:calc(32 * var(--u));   --lh-titel-m:calc(35 * var(--u));   --ls-titel-m:-.02em;   /* Zwischentitel */
  --fs-titel-s:calc(24 * var(--u));   --lh-titel-s:calc(28 * var(--u));   --ls-titel-s:-.02em;   /* News-Zeilen, kleine Titel */
  --fs-zeile:calc(22 * var(--u));     --lh-zeile:calc(26 * var(--u));     --ls-zeile:-.02em;     /* Listenzeilen, FAQ-Fragen, Index */
  --fs-kachel:max(18px,calc(20 * var(--u))); --lh-kachel:1.2;            --ls-kachel:-.01em;    /* Case-/Produktions-Kacheln */
  --fs-link:max(18px,calc(20 * var(--u)));   --lh-link:calc(24 * var(--u)); --ls-link:-.01em;   /* Text-Links „Link L“ */
  --fs-teaser:calc(20 * var(--u));    --lh-teaser:calc(24 * var(--u));    --ls-teaser:-.02em;    /* Haltungssätze */
  --fs-klein-h:max(16px,calc(18 * var(--u))); --lh-klein-h:1.2222;        --ls-klein-h:-.01em;   /* Karten, Credits */
  --fs-klein:max(15px,calc(16 * var(--u)));   --lh-klein:1.375;            --ls-klein:-.01em;     /* Credits-Liste, Namen */
  --fs-kennzahl:calc(64 * var(--u)); --lh-kennzahl:calc(72 * var(--u)); --ls-kennzahl:.01em;  /* große Kennzahlen (About-KPIs) */
  /* EB Garamond Regular */
  --fs-zitat:calc(40 * var(--u));     --lh-zitat:calc(52 * var(--u));     --ls-zitat:0;          /* Kundenzitate */
  /* Inter */
  --fs-lead:calc(28 * var(--u));      --lh-lead:1.25;                     --ls-lead:-.01em;      /* Einstiegssatz (BI) */
  --fs-text-l:max(16px,calc(20 * var(--u))); --lh-text-l:1.4;            --ls-text-l:-.01em;
  --fs-text-m:max(16px,calc(18 * var(--u))); --lh-text-m:1.3889;         --ls-text-m:-.01em;
  --fs-text:max(15px,calc(16 * var(--u)));   --lh-text:1.375;            --ls-text:-.01em;      /* Fließtext */
  --fs-text-s:max(14px,calc(15 * var(--u))); --lh-text-s:1.4;            --ls-text-s:-.01em;
  --fs-text-xs:max(13px,calc(14 * var(--u))); --lh-text-xs:1.4286;       --ls-text-xs:-.01em;   /* Bios, Hinweise */
  --fs-mini:13px;                            --lh-mini:18px;             --ls-mini:-.01em;      /* Kachel-Meta unter 1101 px (Lieferzeit Produktfoto-Kacheln) */
  --fs-label:max(11px,calc(12 * var(--u)));  --lh-label:1.1667;          --ls-label:.02em;      /* Labels, Nav, Meta (Versal) */
  --fs-meta:max(11px,calc(11 * var(--u)));   --lh-meta:1.1818;           --ls-meta:.02em;       /* Datum */
}
@media (max-width:1100px){
  :root{
    --fs-manifest:clamp(32px,3.75vw,54px); --lh-manifest:1.05;
    --fs-statement:clamp(30px,3.05vw,44px); --lh-statement:1.0474;
    --fs-display:32px; --lh-display:35px;
    --fs-zitat:32px;   --lh-zitat:42px;
    --fs-titel-l:30px; --lh-titel-l:33px;
    --fs-titel-m:28px; --lh-titel-m:31px;
    --fs-zeile:20px;   --lh-zeile:24px;
  }
}
@media (max-width:760px){
  :root{
    --fs-manifest:30px;  --lh-manifest:31px;
    --fs-statement:30px; --lh-statement:31px;
    --fs-display:24px;   --lh-display:26px;
    --fs-titel-l:22px;   --lh-titel-l:24px;
    --fs-titel-m:22px;   --lh-titel-m:24px;
    --fs-titel-s:18px;   --lh-titel-s:21px;   --ls-titel-s:-.01em;
    --fs-zeile:18px;     --lh-zeile:22px;     --ls-zeile:-.01em;
    --fs-kachel:18px;    --lh-kachel:21px;
    --fs-link:18px;      --lh-link:22px;
    --fs-teaser:18px;    --lh-teaser:22px;
    --fs-klein-h:16px;   --lh-klein-h:20px;
    --fs-klein:15px;     --lh-klein:20px;
    --fs-lead:20px;      --lh-lead:26px;
    --fs-text-l:17px;    --lh-text-l:24px;
    --fs-text-m:16px;    --lh-text-m:22px;
    --fs-text:15px;      --lh-text:21px;
    --fs-text-s:14px;    --lh-text-s:20px;
    --fs-text-xs:14px;   --lh-text-xs:20px;
    --fs-kennzahl:40px;  --lh-kennzahl:44px;
    --fs-zitat:26px;     --lh-zitat:34px;
    --fs-label:11px;     --lh-label:13px;
    --fs-meta:11px;      --lh-meta:13px;
  }
}

/* ---------- gemeinsame Klassen ---------- */
.label{font-family:var(--font-b);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase}
.nav-links a,.lang{font-size:var(--fs-label);letter-spacing:var(--ls-label)}
.h2{font-family:var(--font-h);font-weight:500;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase}
.statement,.seitenkopf h1{font-family:var(--font-h);font-weight:500;font-size:var(--fs-statement);line-height:var(--lh-statement);letter-spacing:var(--ls-statement)}
.body{font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text)}
.teaser{font-family:var(--font-h);font-weight:500;font-size:var(--fs-teaser);line-height:var(--lh-teaser);letter-spacing:var(--ls-teaser)}
.link-l{font-family:var(--font-h);font-weight:500;font-size:var(--fs-link);line-height:var(--lh-link);letter-spacing:var(--ls-link)}
/* Unterstrich der Link-L: Abstand zur Grundlinie wie im Design (Zeilenhöhe + 2) */
.link-l.primary::after,.link-l:not(.primary)::after{top:calc(var(--lh-link) + 2 * var(--u));height:calc(1.5 * var(--u))}
.link-l.primary{padding-bottom:calc(7 * var(--u))}
/* Kontext-Link im Fließtext (src/components/Text.astro): wie der Link im News-Artikel (news/news.css .n-arttext a) — volle Textfarbe statt
   Textgrau, unterstrichen, Linie knapp 0,18 em unter der Grundlinie. Auf Dunkel in Creme (Case-Kapitel, dunkle Seiten wie AI content),
   auf der BI-Seite in deren Vordergrundfarbe (wechselt beim Scrollen zwischen dunkel und hell) */
.textlink{color:var(--ink);text-decoration:underline;text-underline-offset:.18em}
.cs-dunkel .textlink,.dunkel .textlink{color:var(--creme)}
.bi-seite .textlink{color:var(--vg);transition:color .45s ease}