{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "zahlen-fakten-section",
 "name": "Zahlen-/Fakten-Sektion als Typo-Ereignis",
 "name_en": "Stats / numbers section",
 "kurz": "Wenige echte Kennzahlen als Riesenziffern: Beim Scrollen rollen sie wie ein Zählwerk auf ihren Wert, zählen hoch oder kippen auf.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise",
  "laut"
 ],
 "stimmung_roh": [
  "sachlich",
  "überzeugend",
  "technisch"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "gsap",
  "scrolltrigger",
  "css-property"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Statt drei Icon-Kärtchen mit „100+ Kunden“ stehen zwei bis vier Kennzahlen als riesige Ziffern im Raster, oft in einer sehr schmalen oder sehr fetten Display-Schrift. Jede Zahl hat eine kurze, präzise Beschriftung, dazu klein Quelle und Zeitraum. Beim Einscrollen zählen die Zahlen hoch, rollen wie ein mechanisches Zählwerk oder kippen auf. Varianten koppeln die Zahlen an Sticky-Seiten (Zahl steht, Erklärung scrollt), an Mini-Diagramme oder als Jahreszahl an die Scroll-Timeline einer Firmengeschichte.",
  "warum_es_wirkt": "Zahlen sind konkrete Beweise. Groß gesetzt werden sie zum grafischen Element, das die Sektion trägt. Das Zählen erzeugt einen kurzen Moment der Spannung, bis der Wert steht.",
  "wann_einsetzen": "Wenn es echte, belastbare Zahlen gibt: Jahre, Projekte, Bewertungen, Garantie- und Rückgabefristen, Ergebnisse aus Fallstudien. Im Shop als Vertrauens-Sektion, bei Firmen als Fakten-Block.",
  "wann_nicht": "Bei Eitelkeitszahlen ohne Aussage („1000 Tassen Kaffee“) und bei nur einer Zahl. Wo Zurückhaltung gefragt ist (Kanzlei, Medizin), stehen die Zahlen besser einfach da, ohne Hochzählen.",
  "varianten": [
   "Ziffern-Walze (Odometer): jede Stelle rollt als Streifen auf ihre Ziffer",
   "Hochzählen beim Eintritt oder an den Scroll gekoppelt",
   "Aufkippen: Zahl oder Karte dreht von rotateX -92° auf 0",
   "Jahreszahl-Zähler an der Scroll-Timeline",
   "Zahlen im Bento-Raster",
   "Produktvergleichs-Statistik",
   "Ruhige Tabelle: Zahlen stehen ohne Zählen in einer echten Tabelle, nur die Haarlinien zeichnen sich (Kanzlei, Medizin)",
   "Mit Mini-Diagramm: Zahl zählt einmal, Balken, Linie oder Punkte bauen sich im selben Takt auf (Verein, Marktzahlen)"
  ],
  "umsetzung": "Der Endwert steht als Text im DOM (visuell versteckt), die Animation läuft nur in einem aria-hidden-Duplikat. Ziffern mit font-variant-numeric: tabular-nums, bei Schriften mit Mediävalziffern zusätzlich lining-nums. Walze: jede Stelle ist ein Fenster (overflow: hidden, 1em hoch) mit einem Streifen 0–9; translateY bringt die Zielziffer ins Fenster, von rechts gestaffelt. Hochzählen: Wert × Fortschritt runden, mit führenden Nullen in fester Stellenzahl, damit nichts springt. Scroll-Kopplung: Fortschritt aus der Position der Kachel, linear, mit kurzer Glättung (GSAP: scrollTrigger { scrub: 0.6 }). CSS-only geht mit @property --n { syntax: '<integer>'; inherits: false; initial-value: 0 } plus counter-reset: n var(--n) und content: counter(n); der Wert steht dann aber nicht im DOM.",
  "mobil": "Zahlen untereinander, die Größe bleibt dominant (etwa 26–28vw). Jede Kachel bekommt ihren eigenen Scroll-Bereich statt eines gemeinsamen Staggers.",
  "reduzierte_bewegung": "Endwert sofort anzeigen, ohne Walze, Zählen oder Kippen.",
  "barrierefreiheit": "Der Endwert muss als Text im DOM stehen, nicht nur per CSS-Counter. Die animierte Kopie ist aria-hidden. Während des Zählens kein aria-live, sonst liest der Screenreader jeden Zwischenwert vor."
 },
 "messwerte": {
  "easing": "none (scrub)",
  "dauer_ms": "scrollgekoppelt",
  "stagger_ms": "each .6 (Trionn)",
  "distanz": "rotateX -92° → 0",
  "sonstiges": "Ziffern 30vw (Webflow)",
  "herkunft": "beobachtet",
  "quelle": "https://trionn.com/_next/static/chunks/13xgo04nefn8q.js"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Webflow",
   "url": "https://webflow.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (…opt.min.css): .stat_number{font-size:30vw}, .is-small-mobile 20vw – Kennzahlen als Riesenziffern.",
   "art": "website"
  },
  {
   "seite": "TRIONN",
   "url": "https://trionn.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Chunk 13xgo04nefn8q.js): Keyfacts-Sektion gepinnt (+=200 %, scrub .6), Fakt-Karten kippen von rotateX -92 auf 0 (Stagger each .6, scrub 2).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Green Stack (Zajno)",
   "url": "https://greenstack.zajno.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): count-numbers-list, counter-wrap und counter-value für hochzählende Kennzahlen.",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "bento-grid-interaktiv",
  "split-screen-sticky-seiten",
  "case-study-geruest",
  "blueprint-raster-sichtbar",
  "zahlen-odometer"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo"
 },
 "herkunft": {
  "quelldateien": [
   "layouts.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Drei Produktionsbelege; Awwwards-Inspirationen entfernt."
  ],
  "kategorie_alt": "Section-Layout"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Wenige echte Kennzahlen als Riesenziffern: Beim Scrollen rollen sie wie ein Zählwerk auf ihren Wert, zählen hoch oder kippen auf.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "ausloeser": "Scroll, scrub ohne Pinnen: Fortschritt je Kachel, wenn ihre Oberkante von 100 % auf 40 % der Viewport-Höhe wandert. Ist die Kachel beim Laden schon sichtbar, beginnt der Bereich an ihrer Startposition; reicht die Seite nicht bis 40 %, endet er beim letzten möglichen Scroll, damit jede Zahl ihren Endwert erreicht",
   "easing": "linear (Scroll ist die Zeit), Messwert Trionn",
   "glaettung": "scrub 0.6: exponentielles Aufholen, ~95 % nach 0,6 s (Zeitkonstante 0,2 s)",
   "stagger": "0,6 je Kachel (Anteil der Kacheldauer, Trionn „each .6“); nur innerhalb einer Reihe, am Telefon je Kachel eigener Bereich",
   "walze": "Stelle als Streifen 0–9 0–9 (20 Zellen, je 1em); Weg = Zielziffer + 10; Stellen von rechts gestaffelt um 0,08 des Kachelfortschritts",
   "zaehlen": "Wert × Fortschritt, gerundet auf ganze Einheiten; führende Nullen 18 % Deckkraft (keine Breitensprünge)",
   "kippen": "rotateX -92° → 0, transform-origin 50% 100%, perspective 900px, backface-visibility hidden (Messwert Trionn)",
   "ziffern": "Young Serif 400, font-variant-numeric: lining-nums tabular-nums (Schrift setzt sonst Mediävalziffern); Stelle .63em breit, 1em hoch; Trennzeichen .34em",
   "groessen": "Hauptzahl clamp(96px, min(23vw, 40svh), 340px), Telefon 28vw; weitere Zahlen clamp(72px, 8.4vw, 136px), Telefon 26vw; Einheit .26em (Webflow: 30vw, mobil 20vw)",
   "fortschrittslinie": "1px unter dem Kachelkopf, scaleX = Kachelfortschritt",
   "vorfuehrung": "1100 ms je Kachel, Stagger 0,6, 2200 ms halten, dann nächste Variante (Walze → Zählen → Kippen)",
   "ui": "Umschalter 150 ms cubic-bezier(0, 0, 0.2, 1) (Rezept)",
   "farben": "Grund #F5F4F1, Kachel #ECE9E2, dunkle Kachel #03143B, Tinte #212121, Akzent #D8432B (auf Dunkel #FF8A6B)"
  },
  "ausloeser": "scroll",
  "touch": "Gleiches Verhalten per Scroll. Kacheln stehen untereinander, jede hat ihren eigenen Scroll-Bereich (kein Reihen-Stagger). Zahlen bleiben dominant (28vw bzw. 26vw), Umschalter mit 36px hohen Flächen. Varianten: Tabelle stapelt auf dem Telefon Kennzahl und Wert in eine Zeile, Erläuterung darunter; Diagramm-Kacheln stehen untereinander. Varianten-Pult unten links (36px hohe Flächen), auf dem Telefon eingeklappt.",
  "reduziert": "Keine Walze, kein Zählen, kein Kippen: alle Endwerte stehen sofort da. Der Varianten-Umschalter wechselt nur die Darstellung. Tabelle: Linien und Werte stehen sofort. Diagramm: Endwerte und fertige Diagramme sofort.",
  "korrekturen": {
   "beschreibung": "Statt drei Icon-Kärtchen mit „100+ Kunden“ stehen zwei bis vier Kennzahlen als riesige Ziffern im Raster, oft in einer sehr schmalen oder sehr fetten Display-Schrift. Jede Zahl hat eine kurze, präzise Beschriftung, dazu klein Quelle und Zeitraum. Beim Einscrollen zählen die Zahlen hoch, rollen wie ein mechanisches Zählwerk oder kippen auf. Varianten koppeln die Zahlen an Sticky-Seiten (Zahl steht, Erklärung scrollt), an Mini-Diagramme oder als Jahreszahl an die Scroll-Timeline einer Firmengeschichte.",
   "warum_es_wirkt": "Zahlen sind konkrete Beweise. Groß gesetzt werden sie zum grafischen Element, das die Sektion trägt. Das Zählen erzeugt einen kurzen Moment der Spannung, bis der Wert steht.",
   "wann_einsetzen": "Wenn es echte, belastbare Zahlen gibt: Jahre, Projekte, Bewertungen, Garantie- und Rückgabefristen, Ergebnisse aus Fallstudien. Im Shop als Vertrauens-Sektion, bei Firmen als Fakten-Block.",
   "wann_nicht": "Bei Eitelkeitszahlen ohne Aussage („1000 Tassen Kaffee“) und bei nur einer Zahl. Wo Zurückhaltung gefragt ist (Kanzlei, Medizin), stehen die Zahlen besser einfach da, ohne Hochzählen.",
   "varianten": [
    "Ziffern-Walze (Odometer): jede Stelle rollt als Streifen auf ihre Ziffer",
    "Hochzählen beim Eintritt oder an den Scroll gekoppelt",
    "Aufkippen: Zahl oder Karte dreht von rotateX -92° auf 0",
    "Jahreszahl-Zähler an der Scroll-Timeline",
    "Zahlen im Bento-Raster",
    "Produktvergleichs-Statistik",
    "Ruhige Tabelle: Zahlen stehen ohne Zählen in einer echten Tabelle, nur die Haarlinien zeichnen sich (Kanzlei, Medizin)",
    "Mit Mini-Diagramm: Zahl zählt einmal, Balken, Linie oder Punkte bauen sich im selben Takt auf (Verein, Marktzahlen)"
   ],
   "umsetzung": "Der Endwert steht als Text im DOM (visuell versteckt), die Animation läuft nur in einem aria-hidden-Duplikat. Ziffern mit font-variant-numeric: tabular-nums, bei Schriften mit Mediävalziffern zusätzlich lining-nums. Walze: jede Stelle ist ein Fenster (overflow: hidden, 1em hoch) mit einem Streifen 0–9; translateY bringt die Zielziffer ins Fenster, von rechts gestaffelt. Hochzählen: Wert × Fortschritt runden, mit führenden Nullen in fester Stellenzahl, damit nichts springt. Scroll-Kopplung: Fortschritt aus der Position der Kachel, linear, mit kurzer Glättung (GSAP: scrollTrigger { scrub: 0.6 }). CSS-only geht mit @property --n { syntax: '<integer>'; inherits: false; initial-value: 0 } plus counter-reset: n var(--n) und content: counter(n); der Wert steht dann aber nicht im DOM.",
   "mobil": "Zahlen untereinander, die Größe bleibt dominant (etwa 26–28vw). Jede Kachel bekommt ihren eigenen Scroll-Bereich statt eines gemeinsamen Staggers.",
   "reduzierte_bewegung": "Endwert sofort anzeigen, ohne Walze, Zählen oder Kippen.",
   "barrierefreiheit": "Der Endwert muss als Text im DOM stehen, nicht nur per CSS-Counter. Die animierte Kopie ist aria-hidden. Während des Zählens kein aria-live, sonst liest der Screenreader jeden Zwischenwert vor."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept d2c-produkt-zuerst (Vertrauens-Sektion „Warum wir“), erfundene Marke Klüver, Taschen aus alten Segeln aus Flensburg. Young Serif für die Riesenziffern, Instrument Sans für alles andere. Drei Varianten per Umschalter (Walze, Zählen, Kippen), alle scroll-gekoppelt ohne Pinnen, weil das Rezept Scroll-Inszenierung mit Pinnen ausschließt. Ein Klick auf eine Variante spielt sie einmal zeitgesteuert ab, danach übernimmt wieder der Scroll. Young Serif hat Mediävalziffern als Standard; erst lnum + tnum machen die Walze sauber. AD-Review 01.11.2026: Note 4. Scroll-Bereich an die Seitenlänge gekoppelt: vorher blieb die letzte Kachel am Seitenende halb gerollt (5|6 statt 10) und die Hauptzahl stand beim Laden auf einem Zwischenwert. Varianten 01.11.2026: Umschalter unten links (?v=typo|tabelle|diagramm). „Ruhige Tabelle“ in der Welt Kanzlei (Hollmann & Ritter, Hannover; Newsreader + Schibsted, kein Zählen, nur Haarlinien). „Mit Mini-Diagramm“ in der Welt Verein (Uferpaten e. V.; Big Shoulders + Archivo, einmal zählen, Diagramme im selben Takt). Die alte Umschaltung Walze/Zählen/Kippen bleibt in der Grundvariante als „Bewegung“. Fallstrick: tnum auf der ganzen Tabelle setzt bei Schibsted Komma und Punkt tabellarisch breit, darum nur in der Wertspalte. Zugang 02.11.2026: --leise #6b6b6b → #686868, Badge „Neu“ #d43f27 (weiß 4,6:1); Variante tabelle --k-meta #8e7c6d → #7e6e61; Variante diagramm h3-Zusatz opacity .62 → .7, Quelle Alpha .62 → .68; Einstieg unter 900 px minmax(0, 1fr) (320 px ohne Querscrollen); Kontrastmodus-Rahmen für Knöpfe.",
  "varianten": [
   {
    "id": "typo",
    "name": "Typo-Ereignis",
    "wann": "Shop und Marke mit wenigen starken Zahlen, die Sektion darf laut sein (d2c, Handwerk): Riesenziffern mit Walze, Zählen oder Kippen am Scroll.",
    "werte": {
     "aufbau": "Raster aus Kacheln, Hauptzahl über die volle Breite",
     "bewegung": "scrollgekoppelt (scrub 0.6), Walze / Zählen / Kippen umschaltbar",
     "ziffern": "Young Serif 400, lnum tnum, Hauptzahl clamp(96px, min(23vw, 40svh), 340px)",
     "rezept": "d2c-produkt-zuerst",
     "details": "siehe bau.werte"
    }
   },
   {
    "id": "tabelle",
    "name": "Ruhige Tabelle",
    "wann": "Kanzlei, Praxis, Beratung und Immobilien: Zahlen sollen sachlich belegen, nicht inszeniert werden (Rezept kanzlei-beratung-souveraen: kein Hochzählen).",
    "werte": {
     "aufbau": "echte <table> mit caption, Zeilen Kennzahl / Wert / Erläuterung, links sticky Intro (4fr / 8fr)",
     "zaehlen": "keines, Werte stehen als Text",
     "bewegung": "nur Haarlinie je Zeile scaleX 0 → 1, 500 ms cubic-bezier(0.4, 0, 0.22, 1), Versatz 80 ms; Wert opacity 0 → 1, 250 ms, +160 ms; einmal beim Eintritt (IntersectionObserver 25 %)",
     "ziffern": "Newsreader 400, clamp(44px, 4.4vw, 72px), lnum tnum nur in der Wertspalte (Schibsted setzt sonst Satzzeichen tabellarisch)",
     "schrift": "Newsreader (Titel, Werte), Schibsted Grotesk (Text, Labels)",
     "farben": "Grund #F9F8F8, Marke #1E1E50, Text #212529, Meta #8E7C6D, Linie #D2CDC7, Fokus #00BEE6",
     "telefon": "Zeile als Raster: Kennzahl links, Wert rechts 44px, Erläuterung darunter",
     "rezept": "kanzlei-beratung-souveraen"
    }
   },
   {
    "id": "diagramm",
    "name": "Mit Mini-Diagramm",
    "wann": "Verein, Stiftung, Nachhaltigkeitsbericht und Marktzahlen: wenn der Verlauf oder die Verteilung hinter der Zahl die eigentliche Aussage ist.",
    "werte": {
     "aufbau": "Raster 1.25fr / 1fr / 1fr, große dunkle Kachel über 2 Reihen, breite Kachel über 2 Spalten; je Kachel Zahl plus SVG-Diagramm (Balken je Jahr, Linie kumuliert, gestapelter Balken, Punkte je Kilometer)",
     "zaehlen": "einmal, sobald die Kachel zu 45 % im Bild ist, 1400 ms, gleiche Kurve wie das Diagramm (Rezept: Odometer 1200–1500 einmalig)",
     "kurve": "cubic-bezier(0.645, 0.045, 0.355, 1)",
     "diagramm": "Balken scaleY 0 → 1, +60 ms je Balken; Linie stroke-dashoffset 1 → 0 (pathLength 1); Stapel scaleX, +120 ms; Punkte fill-opacity, +24 ms",
     "ziffern": "Big Shoulders 800, tnum, clamp(3rem, 2rem + 4vw, 5.5rem), groß clamp(6rem, 3rem + 9vw, 11rem)",
     "schrift": "Big Shoulders (Titel, Zahlen), Archivo (Text)",
     "farben": "Grund #FFFFFF, Fläche #EDF5FA, Marke #002E6D, Text #222520, Spenden #FFCA0A",
     "a11y": "Endwert als Text im DOM, Zähl-Kopie aria-hidden, jedes Diagramm role=img mit allen Werten im aria-label",
     "rezept": "verein-nonprofit-wirkung"
    }
   }
  ]
 }
}