/*
 * delegiert. · Number Ticker
 * Live-Punkt (Mars Orange) + rollende Ziffern (<number-flow>) + Label in ink-2.
 * Anpassbar über CSS-Variablen am .nt-Element oder höher:
 *   --ticker-font         Schrift der Zahl (display: Forum Serif, sonst inherit)
 *   --ticker-label-font   Schrift des Labels (Standard: wie Zahl)
 *   --ticker-ink          Zahl            (Standard: var(--ink, #1D1D1F))
 *   --ticker-ink-2        Label           (Standard: var(--ink-2, #5F5F5F))
 *   --ticker-brand        Live-Punkt      (Standard: var(--brand, #EB6942))
 *   --ticker-dot          Kerngröße Punkt
 *   --ticker-size         Schriftgröße Zahl
 */

@font-face {
  font-family: "Forum Serif";
  src: url("../../fonts/ForumSerif-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.nt {
  --_ink: var(--ticker-ink, var(--ink, #1D1D1F));
  --_ink-2: var(--ticker-ink-2, var(--ink-2, #5F5F5F));
  --_brand: var(--ticker-brand, var(--brand, #EB6942));
  --_ease: cubic-bezier(.23, 1, .32, 1);

  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--ticker-font, inherit);
  font-size: var(--ticker-size, 1em);
  line-height: 1;
  color: var(--_ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Größen ---------- */
.nt--display {
  --ticker-size: clamp(44px, 4.8vw, 72px);
  --ticker-dot: 10px;
  font-family: var(--ticker-font, "Forum Serif", Georgia, serif);
  letter-spacing: -.03em;
}
.nt--md {
  --ticker-size: 28px;
  --ticker-dot: 9px;
  letter-spacing: -.02em;
}
.nt--sm {
  --ticker-size: 15px;
  --ticker-dot: 8px;
}

/* ---------- Live-Punkt ----------
 * .nt__dot ist nur der Platzhalter (Slot). Punkt (::after) und Ping-Ring (::before) liegen absolut darin,
 * damit der Slot bei „Live aus“ auf 0 schrumpfen kann, während der Punkt weich ausblendet.
 * Das Nachrücken von Zahl und Label animiert number-ticker.js per FLIP (nur transform). */
.nt__dot {
  position: relative;
  align-self: center;
  flex: none;
  width: 0;
  height: var(--ticker-dot, 9px);
  margin-right: 0;
}
.nt.is-live .nt__dot {
  width: var(--ticker-dot, 9px);
  margin-right: max(.3em, calc(var(--ticker-dot, 9px) * 1.1));
}
.nt__dot::before,
.nt__dot::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ticker-dot, 9px);
  height: var(--ticker-dot, 9px);
  border-radius: 50%;
  background: var(--_brand);
}
.nt__dot::after {
  opacity: 0;
  transform: scale(.5);
  transition: opacity 180ms ease-out, transform 240ms var(--_ease);
}
.nt__dot::before { opacity: 0; }
.nt.is-live .nt__dot::after { opacity: 1; transform: scale(1); }
.nt.is-live .nt__dot::before { animation: nt-ping 1s cubic-bezier(0, 0, .2, 1) infinite; }

@keyframes nt-ping {
  0%        { transform: scale(1); opacity: .75; }
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* ---------- Zahl ---------- */
.nt__value {
  position: relative;
  display: inline-block;
  text-align: left;
}
.nt number-flow {
  --number-flow-mask-height: .2em;
  font-kerning: none;
}
/* Messlatte: identische Schrift, unsichtbar, ohne Einfluss aufs Layout */
.nt__probe {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: pre;
  font-kerning: none;
}
.nt__probe > span { display: inline-block; }
.nt__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Label ---------- */
.nt__label {
  margin-left: .3em;
  font-family: var(--ticker-label-font, inherit);
  font-size: .64em; /* rund 0,35 em kleiner als die Zahl */
  letter-spacing: 0;
  color: var(--_ink-2);
}
.nt--display .nt__label { letter-spacing: -.02em; }
.nt__label[hidden] { display: none; }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .nt.is-live .nt__dot::before { animation: none; }
  .nt__dot::after { transform: none; transition: opacity 150ms linear; }
}