KKS-18 — Counter

Below is Figma node 299-17624 rebuilt: a container_1_columns with the navy primary background, the fancy eyebrow badge centred above it, and one Mask countergroups element holding the four statcounter children. The content is the design’s own — 28 Mitgliedszentren, rund 1000 Expertinnen und Experten, mehr als 20 Jahre Zusammenarbeit, 1 deutschlandweites Netzwerk.

The columns come from the existing container_4_columns grid, not bespoke CSS: Figma places them 254px wide at Left 100 / 375 / 650 / 925, and 254×4 + 21×3 = 1079 on the 1080px content box — the KKS-25 multi-column gutter.

Per counter: the number is Figtree 900 at 80px, line-height 100 %, mint #54C9BE; both labels are Figtree 500 at 12px, line-height 120 %, letter-spacing 25 %, uppercase, taking the frame’s --frame-color. The 11px gaps above and below the number are measured.

Scrolling the band into view counts each number up from zero over 1.6s and rises the columns 16px into place, staggered 90ms apart left to right. prefers-reduced-motion skips both and shows the final figures immediately.

var v = document.querySelector('.agr-statcounter--style-1 .agr-statcounter__value'), s = getComputedStyle(v);
[s.fontSize, s.fontWeight, s.lineHeight, s.color].join(' | ');
// expect "80px | 900 | 80px | rgb(84, 201, 190)" at lg+