/* ============================================================
   SECTIONS LAB · Stats & figures (ST) — .fig-* / .stats--x
   BDG page view, 2026-09-11. Tokens only; anything else is a knob
   declared on its root. No section paints its own background.
   ============================================================ */

/* kit .stats (kit:stats): no top rule above the figures (the user, 2026-09-13);
   overrides assets/components.css until the manager graduates it */
.stats { border-top: 0; }

/* ------------------------------------------------------------
   ST01 · The proof counts, the offer is drawn
   <section class="fig-drawn">
     <div class="wrap fig-drawn__grid">
       <div class="fig-drawn__proof">
         .eyebrow <p class="fig-drawn__n"><span class="odometer">500</span><span class="fig-drawn__suf">+</span></p>
         <p class="fig-drawn__l">…</p> <p class="fig-drawn__src"><span>Stand …</span> <a class="link">…</a></p>
       </div>
       <div class="fig-drawn__offer fig-drawn__offer--equal|loop|units|years">
         .eyebrow <div class="fig-drawn__head"><p class="fig-drawn__n fig-drawn__n--offer">3</p><p class="fig-drawn__l">…</p></div>
         <div class="fig-drawn__draw"><ol class="fig-drawn__bars fig-drawn__bars--named" style="--n:3"><li style="--i:0"><span>…</span></li> …</ol></div>
       </div> ×2
     </div>
   </section>
   Without .is-armed (no JS, reduced motion) every member is drawn.
   ------------------------------------------------------------ */
.fig-drawn {
  --fig-proof: calc(var(--fs-display) * 1.5);
  --fig-offer: calc(var(--fs-display) * .92);
  --fig-bar: 3px;
  --fig-ink: color-mix(in srgb, var(--fg) 72%, transparent);
  padding-block: var(--sp-8);
}
.fig-drawn__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr);
  gap: var(--sp-6) var(--sp-7); align-items: start;
}
/* no top rules on the columns (the user, 2026-09-13) */
.fig-drawn .eyebrow { margin-bottom: var(--sp-3); }
.fig-drawn__n {
  display: flex; align-items: baseline; max-width: none; color: var(--fg);
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--fig-proof); line-height: 1; letter-spacing: var(--ls-head, -.02em);
  font-variant-numeric: tabular-nums;
}
.fig-drawn__suf { color: var(--fg-dim); }
.fig-drawn__proof .fig-drawn__l { margin-top: var(--sp-3); font-size: var(--fs-lead); color: var(--fg); max-width: 22ch; text-wrap: balance; }
.fig-drawn__src {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--fg-dim);
}
.fig-drawn__head { display: flex; align-items: baseline; gap: var(--sp-3); }
.fig-drawn__n--offer { font-size: var(--fig-offer); }
.fig-drawn__head .fig-drawn__l { max-width: 21ch; font-size: var(--fs-body); line-height: 1.35; color: var(--fg-muted); text-wrap: balance; }
.fig-drawn__draw { margin-top: var(--sp-5); }

/* the members: one bar each */
.fig-drawn__bars {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--sp-1);
}
.fig-drawn__bars li { position: relative; padding-top: calc(var(--fig-bar) + var(--sp-2)); min-width: 0; }
.fig-drawn__bars li::before,
.fig-drawn__units li::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--fig-bar);
  background: var(--fig-ink); transform-origin: left center;
}
.fig-drawn__bars b { display: block; font-size: var(--fs-eyebrow); font-weight: 600; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.fig-drawn__bars span { display: block; font-size: var(--fs-small); line-height: 1.35; color: var(--fg-muted); text-wrap: balance; }
.fig-drawn__bars--years span { display: none; }
.fig-drawn__bars--years li { padding-top: var(--fig-bar); }
.fig-drawn__sr { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.fig-drawn__units {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 5px; max-width: calc(var(--n) * 18px);
}
.fig-drawn__units li { position: relative; aspect-ratio: 1; }
.fig-drawn__units li::before { height: auto; bottom: 0; }
.fig-drawn__ends {
  display: flex; justify-content: space-between; gap: var(--sp-3); max-width: none;
  margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--fg-muted);
}
.fig-drawn__ends .ico { width: 1em; height: 1em; vertical-align: -.125em; color: var(--fg-dim); }

/* armed: members fill in one after another, once */
.fig-drawn.is-armed .fig-drawn__draw li::before { transform: scaleX(0); }
.fig-drawn.is-armed .fig-drawn__units li::before { transform: scale(0); }
.fig-drawn.is-armed .fig-drawn__draw.is-in li::before {
  transform: none;
  transition: transform .8s var(--ease-out) calc(var(--i, 0) * 90ms + 150ms);
}
.fig-drawn.is-armed .fig-drawn__draw.is-in .fig-drawn__units li::before { transition-delay: calc(var(--i, 0) * 35ms + 150ms); }

@media (max-width: 900px) {
  .fig-drawn__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7) var(--sp-6); }
  .fig-drawn__proof { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .fig-drawn { --fig-proof: calc(var(--fs-display) * 1.6); padding-block: var(--sp-7); }
  .fig-drawn__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .fig-drawn__head .fig-drawn__l { max-width: 22ch; }
}
@media (prefers-reduced-motion: reduce) {
  .fig-drawn.is-armed .fig-drawn__draw li::before, .fig-drawn.is-armed .fig-drawn__units li::before { transform: none; transition: none; }
}

/* ST04 · ST01 compact (the user, 2026-09-13): half the vertical room, a smaller proof figure */
.fig-drawn--compact { --fig-proof: calc(var(--fs-display) * 1.1); --fig-offer: calc(var(--fs-display) * .72); padding-block: var(--sp-6); }
.fig-drawn--compact .fig-drawn__grid { row-gap: var(--sp-5); }
.fig-drawn--compact .eyebrow { margin-bottom: var(--sp-2); }
.fig-drawn--compact .fig-drawn__proof .fig-drawn__l { margin-top: var(--sp-2); }
.fig-drawn--compact .fig-drawn__src { margin-top: var(--sp-2); }
.fig-drawn--compact .fig-drawn__draw { margin-top: var(--sp-3); }
@media (max-width: 640px) { .fig-drawn--compact { --fig-proof: calc(var(--fs-display) * 1.2); padding-block: var(--sp-5); } }

/* ------------------------------------------------------------
   ST02 · One figure proves, the ledger leads on
   <section class="fig-ledger">
     <div class="wrap fig-ledger__grid">
       <div class="fig-ledger__proof">
         <p class="fig-ledger__n"><span class="odometer">500</span><span>+</span></p>
         <div class="fig-ledger__cap"><p class="fig-ledger__l">…</p><p class="fig-ledger__src">…<a class="link">…</a></p></div>
       </div>
       <ul class="fig-ledger__rows">
         <li><a class="fig-ledger__row" href="#phasen">
           <span class="fig-ledger__rn">6</span>
           <span class="fig-ledger__rt"><b>Phasen …</b><span>sentence</span></span>
           <span class="fig-ledger__go">Zu den Phasen<span class="arrow"></span></span>
         </a></li> ×2–3
       </ul>
     </div>
   </section>
   ------------------------------------------------------------ */
.fig-ledger {
  --fig-proof: calc(var(--fs-display) * 1.85);
  --fig-row-n: calc(var(--fs-h2) * .82);
  padding-block: var(--sp-8);
}
.fig-ledger__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-6) var(--sp-9); align-items: end;
}
.fig-ledger__n {
  display: flex; align-items: baseline; max-width: none; color: var(--fg);
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--fig-proof); line-height: .9; letter-spacing: var(--ls-head, -.02em);
  font-variant-numeric: tabular-nums;
}
.fig-ledger__n > span:last-child { color: var(--fg-dim); }
.fig-ledger__cap { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid color-mix(in srgb, var(--fg) 45%, transparent); }
.fig-ledger__l { font-size: var(--fs-lead); color: var(--fg); max-width: 26ch; }
.fig-ledger__src {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--fg-dim);
}
.fig-ledger__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.fig-ledger__row {
  display: grid; grid-template-columns: calc(var(--fig-row-n) * 1.4) minmax(0, 1fr) auto; align-items: baseline;
  gap: var(--sp-2) var(--sp-5); padding-block: var(--sp-5);
  border-bottom: 1px solid var(--hairline); color: inherit; text-decoration: none;
}
.fig-ledger__rn {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--fig-row-n); line-height: 1; letter-spacing: var(--ls-head, -.02em);
  color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fig-ledger__rt b { display: block; font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; color: var(--fg); }
.fig-ledger__rt span { display: block; margin-top: var(--sp-1); max-width: 52ch; color: var(--fg-muted); text-wrap: pretty; }
.fig-ledger__go {
  display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap;
  font-size: var(--fs-small); font-weight: 600; color: var(--fg);
}
.fig-ledger__row:focus-visible .arrow::before { transform: translateX(170%); }
.fig-ledger__row:focus-visible .arrow::after { transform: none; }
@media (hover: hover) {
  .fig-ledger__row:hover .arrow::before { transform: translateX(170%); }
  .fig-ledger__row:hover .arrow::after { transform: none; }
  .fig-ledger__row:hover .fig-ledger__rt b { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
}
@media (max-width: 900px) {
  .fig-ledger__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
}
@media (max-width: 640px) {
  .fig-ledger { --fig-proof: calc(var(--fs-display) * 1.8); padding-block: var(--sp-7); }
  .fig-ledger__row { grid-template-columns: calc(var(--fig-row-n) * 1.4) minmax(0, 1fr); }
  .fig-ledger__go { grid-column: 2; margin-top: var(--sp-2); }
}

/* ------------------------------------------------------------
   ST03 · The 500+, with the names behind it
   <section class="fig-names">
     <div class="wrap fig-names__top"><p class="fig-names__n"><span class="odometer">500</span><span>+</span></p><p class="fig-names__l">…</p></div>
     <div class="marquee fig-names__strip" aria-label="A, B, …"><div class="marquee__track" aria-hidden="true"><span>A</span> …</div></div>
     <div class="wrap fig-names__foot"><dl class="fig-names__spec"><div><dt>3</dt><dd>…</dd></div> …</dl><p class="fig-names__src">…</p></div>
   </section>
   The strip runs edge to edge (it is the page's one marquee).
   ------------------------------------------------------------ */
.fig-names {
  --fig-proof: calc(var(--fs-display) * 1.5);
  --fig-name: calc(var(--fs-h3) * 1.45);
  padding-block: var(--sp-8);
}
.fig-names__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-5); }
.fig-names__n {
  display: flex; align-items: baseline; max-width: none; color: var(--fg);
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--fig-proof); line-height: 1; letter-spacing: var(--ls-head, -.02em);
  font-variant-numeric: tabular-nums;
}
.fig-names__n > span:last-child { color: var(--fg-dim); }
.fig-names__l { font-size: var(--fs-lead); color: var(--fg); max-width: 44ch; text-wrap: balance; }
.fig-names__strip { margin-top: var(--sp-6); padding-block: var(--sp-4); border-block: 1px solid var(--hairline); }
.fig-names .marquee__track > span,
.fig-names .marquee__track > span:nth-child(even) {
  font-family: var(--font-head); font-weight: 500; font-stretch: var(--head-stretch, normal);
  font-size: var(--fig-name); line-height: 1.2; letter-spacing: -.01em;
  color: var(--fg-muted); -webkit-text-stroke: 0; padding-right: 0;
}
.fig-names .marquee__track > span::after { content: "·"; margin-inline: .7em; color: var(--fg-dim); }
.fig-names__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--sp-4) var(--sp-7); margin-top: var(--sp-6);
}
.fig-names__spec { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7); margin: 0; }
.fig-names__spec div { display: flex; align-items: baseline; gap: var(--sp-2); }
.fig-names__spec dt {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: calc(var(--fs-h3) * 1.35); line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums;
}
.fig-names__spec dd { margin: 0; color: var(--fg-muted); }
.fig-names__src {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4);
  font-size: var(--fs-small); color: var(--fg-dim);
}
@media (max-width: 900px) {
  .fig-names__foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .fig-names { --fig-name: var(--fs-h3); padding-block: var(--sp-7); }
  .fig-names__spec { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .fig-names .marquee__track { width: auto; flex-wrap: wrap; row-gap: var(--sp-1); padding-inline: var(--gutter); }
  .fig-names .marquee__track > span, .fig-names .marquee__track > span:nth-child(even) { font-size: var(--fs-lead); }
}