/* ==============================================================
   passer.css  ·  Besitzer: P0 Fundament  ·  K03 Passer-Zahl
   Grosse Zahl in Tinte, Cyan- und Magenta-Platte als text-shadow
   versetzt (Fehlregister). Mit JS kommen die Platten beim Scrollen in
   Deckung: ein Vorfahre ODER das Element selbst traegt data-fortschritt,
   kern.js setzt dort --p (0..1). Ohne JS / reduzierte Bewegung: --p fehlt,
   der Versatz steht statisch.
   Kein doppeltes Markup noetig (text-shadow statt Kopien), also auch
   nichts, was aria-hidden braucht.

   MARKUP:  <span class="passer-zahl" data-fortschritt>2008</span>
            <span class="passer-zahl passer-zahl--gross">4,9</span>
   Stellschrauben: --passer-v (Cyan, Standard .05em), --passer-m
   (Magenta, .025em), --passer-rest (Restversatz bei --p = 1, Standard 0).

   KNOW HOW - nicht verwechseln: .passer (alt-signatur.css) ist das alte
   26-px-Passerkreuz vor den H2 und entfaellt laut Plan 8.8.
   ============================================================== */
.passer-zahl{
  --passer-v: .05em;
  --passer-m: .025em;
  --passer-rest: 0;
  --passer-f: max(var(--passer-rest), 1 - var(--p, 0));
  display:inline-block;margin:0;
  font-family:var(--schrift-titel);font-weight:800;font-stretch:88%;
  font-size:clamp(4.25rem, 2.4rem + 8.2vw, 10.5rem);line-height:.8;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--text);
  text-shadow:
    calc(var(--passer-v) * var(--passer-f)) calc(var(--passer-v) * .9 * var(--passer-f)) 0 var(--platte),
    calc(var(--passer-m) * -1 * var(--passer-f)) calc(var(--passer-m) * -.8 * var(--passer-f)) 0 var(--haar);
}
.passer-zahl--gross{
  font-weight:780;
  font-size:clamp(2.4rem, 1.6rem + 3.4vw, 4.75rem);line-height:.95;letter-spacing:-.02em;
}
.ohne-deko .passer-zahl{text-shadow:none}