Daten-Scrollytelling
Ein Wirkungsbericht, dessen Diagramm sich beim Scrollen Schritt für Schritt aufbaut: Text links, klebende SVG-Grafik rechts, auf dem Telefon Grafik oben.
Vereine, Stiftungen, Initiativen und Kulturhäuser, die eine Entwicklung über Jahre mit Ausgangslage und Ziel zeigen wollen.
Ein Diagramm baut sich beim Scrollen Schritt für Schritt auf. Links laufen kurze Textschritte durch, rechts bleibt die Grafik per position: sticky stehen. Jeder Schritt schaltet einen Zustand der Grafik: erst die Achse und die Ausgangslage, dann die ersten Balken, dann eine Markierung, am Ende das Ziel. Der Scroll löst die Schritte nur aus, er steuert keine Animation Bild für Bild. Auf dem Telefon steht die Grafik oben, die Schritte laufen als Karten darunter durch.
Eine Zahl allein bleibt abstrakt. Wenn der Leser selbst weiterscrollt und dabei sieht, wie die Balken wachsen, versteht er die Entwicklung und merkt sie sich. Text und Grafik erklären sich gegenseitig, ohne dass er zwischen ihnen springen muss. Weil der Leser das Tempo bestimmt, wirkt es nicht wie eine Präsentation, die abläuft.
Wann einsetzen
Wirkungsberichte von Vereinen und Stiftungen, Jahresberichte, Mittelverwendung, Kampagnen mit einer klaren Zahl, Kultur-Statistiken, SaaS-Seiten mit einem Vorher-Nachher. Eine Geschichte mit 3 bis 6 Schritten und echten Daten.
Wann nicht
Auf der Startseite vor dem Spenden- oder Kaufknopf (zwingt durch eine Inszenierung). Bei Daten, die man nachschlagen will (Tabelle, Preisliste). Mehr als zwei oder drei solcher Strecken pro Seite. Wenn es keine echten, belegbaren Zahlen gibt.
Varianten
- Balken über die Zeit: Ausgangslage, Wachstum, heute, Ziel
- Mittelverwendung: 100 Felder für 100 €, jeder Schritt füllt einen Bereich
- Linie mit Markierungen (Ereignisse auf der Zeitachse)
- Karte statt Diagramm: Flächen färben sich Schritt für Schritt
- Scroll-gekoppelt: Fortschritt innerhalb eines Schritts per animation-timeline: view() statt fester Zustände
Umsetzung
Zwei Spalten in einem Grid, Schritte und Grafik in derselben Zeile, damit position: sticky die ganze Strecke über greift (liegt die Grafik in einer eigenen Zeile, klebt sie nicht). Ein IntersectionObserver mit rootMargin '-50% 0px -49% 0px' meldet, welcher Schritt die Mitte kreuzt; auf dem Telefon liegt die Linie bei 70 %. Elemente im SVG tragen data-ab="n" und bekommen ab Schritt n die Klasse .an. Die Klasse .lebt an der Grafik setzt JS nur, wenn Bewegung erlaubt ist; erst sie blendet die noch nicht erreichten Teile aus. Ohne JS und bei reduzierter Bewegung steht damit das vollständige Endbild. Balken wachsen per transform: scaleY mit transform-box: fill-box von der Grundlinie. Das SVG hat role=img mit title und desc; die Daten stehen als echte Tabelle nach den Schritten (für Screenreader immer, für alle per Knopf sichtbar). Schritthöhen in svh statt vh. Ein dünner Fortschrittsbalken nutzt animation-timeline mit view-timeline-name auf der Sektion, nur unter @supports.
Robust umsetzen
Telefon. Grafik klebt oben mit etwa halber Bildschirmhöhe, die Schritte laufen als Karten darunter durch und lösen bei 70 % der Höhe aus. Größere Schrift im SVG, nur jede zweite Jahreszahl. Tippen auf einen Balken zeigt den Wert.
Ohne Bewegung. Statisches, vollständiges Endbild: alle Balken, Linien, Felder und Beschriftungen sind von Anfang an da. Die Textschritte bleiben lesbar und voll sichtbar, nichts animiert.
Barrierefrei. SVG mit role=img, title und desc mit der Kernaussage; die Daten als echte Tabelle mit caption und th scope (für Screenreader immer im Dokument, per Knopf mit aria-expanded für alle sichtbar). Die Geschichte steht vollständig im Text der Schritte. Werte nie nur über Farbe: Beschriftung an den wichtigen Balken, Legende mit Beträgen, 2px Lücken zwischen den Feldern. Datenfarben mit 3 : 1 gegen Weiß. Keine Scroll-Kaperung, kein Einrasten, normales Scrollen bleibt. Beispieldaten sichtbar gekennzeichnet.
Code
<!DOCTYPE html>
<!--
Daten-Scrollytelling
Fundus · Scroll & Section-Animationen · https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/
Eigenständige Datei. Bilder liegen hier unter bilder/ – eigene einsetzen.
-->
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Daten-Scrollytelling · Fundus-Demo</title>
<script>document.documentElement.classList.add('js');if(matchMedia('(prefers-reduced-motion: reduce)').matches)document.documentElement.classList.add('reduziert')</script>
<style>
@font-face { font-family: 'Big Shoulders'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/big-shoulders:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/archivo:vf@latest/latin-full-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
:root {
/* Rezept verein-nonprofit-wirkung: ein tiefer Markenton, helle Töne derselben Farbe, Gelb nur für Spenden */
--grund: #ffffff; --hell: #edf4f3; --grau: #dfdfd7; --marke: #0b3c49; --text: #222520; --leise: #5b625f;
--signal: #ffca0a; --linie: #e1e6e4;
/* Diagramm: Fläche = Petrol-Türkis, in beiden Varianten dieselbe Farbe für dieselbe Sache (geprüft mit dem Palettentest) */
--k-flaeche: #008a9e; --k-messung: #d06a2c; --k-bildung: #4a7fd6; --k-verwaltung: #5f9e2f; --k-werbung: #b05aa0; --leer: #e4ebe9;
--kurve: cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic: große Zustandswechsel */
--balken: 900ms; --notiz: 600ms; --ui: 180ms; --versatz: 70ms;
--rand: clamp(20px, 4vw, 56px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--grund); color: var(--text); font: 400 1.0625rem/1.6 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--marke); outline-offset: 3px; }
.nur-sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tabelle.nur-sr :is(caption, th, td) { clip-path: inset(50%); } /* Tabellen werden trotz 1 px so breit wie ihr Inhalt: Zellen selbst mit ausblenden */
.versal { font-family: 'Big Shoulders', 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .95; }
.ziffern { font-variant-numeric: tabular-nums; }
/* ── Kopf ─────────────────────────────────────────────────────────────── */
.kopf { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 14px var(--rand); background: var(--marke); color: #fff; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.45rem/1 'Big Shoulders', sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.logo svg { width: 28px; height: 28px; }
.kopf nav { margin-left: auto; }
.kopf nav ul { display: flex; gap: clamp(14px, 2vw, 28px); list-style: none; font-size: .95rem; }
.kopf nav a { text-decoration: none; opacity: .82; transition: opacity var(--ui) linear; }
.kopf nav a:hover { opacity: 1; }
.spenden { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--signal); color: var(--text); font-weight: 600; font-size: 1rem; text-decoration: none; transition: background-color 150ms linear; white-space: nowrap; }
.spenden:hover { background: #ffd84a; }
.kopf :focus-visible { outline-color: var(--signal); }
/* ── Einstieg ─────────────────────────────────────────────────────────── */
.einstieg { padding: clamp(40px, 9vh, 104px) var(--rand) clamp(36px, 7vh, 80px); background: var(--hell); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 22px; align-items: end; }
.einstieg .dachzeile { grid-column: 1 / -1; font-weight: 600; font-size: .9rem; color: var(--marke); letter-spacing: .02em; }
.einstieg h1 { grid-column: 1 / 9; font-size: clamp(2.75rem, 1.6rem + 5vw, 6rem); color: var(--marke); text-wrap: balance; }
.einstieg .lead { grid-column: 9 / 13; max-width: 40ch; }
.hinweis { grid-column: 1 / -1; display: inline-flex; justify-self: start; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--grau); font-size: .85rem; color: var(--leise); }
.hinweis b { color: var(--text); font-weight: 600; }
/* ── Strecke: Schritte links, klebende Grafik rechts ─────────────────── */
.strecke { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 72px); padding: 0 var(--rand); view-timeline-name: --strecke; }
.strecke[hidden] { display: none; }
.grafik { grid-column: 2; grid-row: 1; position: sticky; top: 72px; align-self: start; height: calc(100svh - 72px); display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 4svh 0 3svh; }
.tabellen-block { grid-column: 1 / -1; grid-row: 2; max-width: 46rem; padding-bottom: 8px; }
.tabellen-block:has(.nur-sr) { padding: 0; position: relative; overflow: clip; }
.grafik-kopf { display: grid; gap: 4px; }
.grafik-kopf h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); color: var(--marke); }
.grafik-kopf p { font-size: .9rem; color: var(--leise); }
.fortschritt { height: 2px; background: var(--linie); margin-top: 10px; overflow: hidden; display: none; }
.fortschritt i { display: block; height: 100%; background: var(--marke); transform-origin: 0 50%; }
@supports (animation-timeline: view()) {
.fortschritt { display: block; }
.fortschritt i { animation: fortschritt linear both; animation-timeline: --strecke; animation-range: contain 0% contain 100%; }
@keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.buehne { position: relative; min-height: 0; display: grid; align-items: center; }
.grafik-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--leise); border-top: 1px solid var(--linie); padding-top: 12px; }
.grafik-fuss button { font: inherit; font-weight: 600; color: var(--marke); background: none; border: 0; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; padding: 6px 0; }
.schritte { grid-column: 1; grid-row: 1; list-style: none; padding: 30svh 0 40svh; }
.schritt { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; max-width: 34rem; opacity: .32; transition: opacity var(--ui) linear; }
.schritt.aktiv, .reduziert .schritt, html:not(.js) .schritt { opacity: 1; }
.schritt .nr { font: 600 .85rem/1 'Archivo', sans-serif; color: var(--marke); letter-spacing: .04em; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.schritt .nr::after { content: ''; width: 40px; height: 2px; background: var(--k-flaeche); }
.schritt h3 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); color: var(--marke); text-wrap: balance; }
.schritt p { margin-top: 16px; max-width: 46ch; text-wrap: pretty; }
.schritt .spenden { align-self: flex-start; margin-top: 24px; }
/* Diagramm (SVG): ohne JS und bei reduzierter Bewegung das vollständige Endbild */
.diagramm, .waffel { display: block; width: 100%; height: auto; max-height: 100%; overflow: visible; font-family: 'Archivo', sans-serif; }
.diagramm text { font-size: 12px; fill: var(--leise); font-variant-numeric: tabular-nums; }
.diagramm .achsentitel { font-weight: 600; fill: var(--text); }
.diagramm .raster path { stroke: var(--linie); stroke-width: 1; }
.diagramm .grundlinie { stroke: var(--text); stroke-width: 1; }
.diagramm .balken { fill: var(--k-flaeche); }
.diagramm .plan { fill: none; stroke: var(--k-flaeche); stroke-width: 1.25; stroke-dasharray: 3 3; }
.diagramm .ref path { stroke: var(--marke); stroke-width: 1; }
.diagramm .ref text { fill: var(--marke); font-weight: 600; }
.diagramm .ziel path { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 6 4; }
.diagramm .ziel text { fill: var(--text); font-weight: 600; }
.diagramm .wert { fill: var(--text); font-weight: 600; }
.diagramm .wert.stark { font: 800 22px/1 'Big Shoulders', sans-serif; fill: var(--marke); }
.diagramm .notiz path { stroke: var(--text); stroke-width: 1; }
.diagramm .notiz text { fill: var(--text); }
.diagramm .treffer { fill: transparent; cursor: default; }
.diagramm .treffer:hover { fill: rgba(11, 60, 73, .05); }
.waffel rect { fill: var(--leer); }
.waffel [data-kat='flaeche'] { --f: var(--k-flaeche); } .waffel [data-kat='messung'] { --f: var(--k-messung); }
.waffel [data-kat='bildung'] { --f: var(--k-bildung); } .waffel [data-kat='verwaltung'] { --f: var(--k-verwaltung); }
.waffel [data-kat='werbung'] { --f: var(--k-werbung); }
.waffel rect[data-kat] { fill: var(--f); }
.mittel-buehne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: clamp(20px, 3vw, 40px); align-items: center; height: 100%; }
.mittel-buehne .waffel { max-height: calc(100svh - 330px); max-width: 100%; justify-self: center; }
.legende { list-style: none; display: grid; gap: 12px; }
.legende li { display: grid; grid-template-columns: 14px 1fr auto; gap: 4px 10px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--linie); font-size: .92rem; line-height: 1.3; }
.legende li::before { content: ''; width: 14px; height: 14px; border-radius: 3px; background: var(--f); align-self: center; }
.legende b { font: 800 1.5rem/1 'Big Shoulders', sans-serif; color: var(--text); }
.legende [data-kat='flaeche'] { --f: var(--k-flaeche); } .legende [data-kat='messung'] { --f: var(--k-messung); }
.legende [data-kat='bildung'] { --f: var(--k-bildung); } .legende [data-kat='verwaltung'] { --f: var(--k-verwaltung); }
.legende [data-kat='werbung'] { --f: var(--k-werbung); }
/* Zustände per Schritt: .lebt (JS aktiv, Bewegung erlaubt) blendet alles aus, was noch nicht dran ist */
.lebt .balken, .lebt .plan { transform-box: fill-box; transform-origin: 50% 100%; transition: transform var(--balken) var(--kurve) calc(var(--n, 0) * var(--versatz)); }
.lebt :is(.balken, .plan):not(.an) { transform: scaleY(0); }
.lebt :is(.ref, .ziel, .wert, .notiz, .legende li) { transition: opacity var(--notiz) var(--kurve) calc(var(--n, 0) * var(--versatz)); }
.lebt :is(.ref, .ziel, .wert, .notiz, .legende li):not(.an) { opacity: 0; }
.lebt .wert, .lebt .notiz { transition-delay: calc(var(--balken) * .6); }
.lebt .waffel rect { transition: fill 420ms var(--kurve) calc(var(--i) * 9ms); }
.lebt .waffel rect:not(.an) { fill: var(--leer); }
/* Tabelle (für Screenreader immer da, per Knopf für alle sichtbar) */
.tabelle { margin-top: 12px; border-collapse: collapse; width: 100%; font-size: .88rem; font-variant-numeric: tabular-nums; }
.tabelle caption { text-align: left; font-weight: 600; padding-bottom: 6px; }
.tabelle th, .tabelle td { text-align: left; padding: 5px 8px 5px 0; border-bottom: 1px solid var(--linie); }
.tabelle td:not(:first-child), .tabelle th:not(:first-child) { text-align: right; }
.tipp { position: absolute; z-index: 3; pointer-events: none; background: var(--marke); color: #fff; font-size: .82rem; font-weight: 500; padding: 6px 10px; border-radius: 6px; white-space: nowrap; translate: -50% -100%; opacity: 0; transition: opacity 120ms linear; }
.tipp.an { opacity: 1; }
/* ── Abschluss ─────────────────────────────────────────────────────────── */
.abschluss { background: var(--marke); color: #fff; padding: clamp(56px, 12vh, 140px) var(--rand); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 24px; align-items: end; }
.abschluss h2 { grid-column: 1 / 8; font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); text-wrap: balance; }
.abschluss div { grid-column: 8 / 13; display: grid; gap: 18px; justify-items: start; }
.abschluss p { max-width: 42ch; opacity: .86; }
.abschluss .klein { font-size: .82rem; opacity: .62; }
.abschluss :focus-visible { outline-color: var(--signal); }
/* ── Pult ──────────────────────────────────────────────────────────────── */
.pult { position: fixed; z-index: 30; left: 16px; bottom: 16px; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(11, 60, 73, .14); box-shadow: 0 10px 30px rgba(11, 60, 73, .12);
font: 500 10.5px/1.35 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.pult .zeile { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pult button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--leise); background: transparent; border: 1px solid rgba(11, 60, 73, .2); border-radius: 999px; height: 28px; padding: 0 11px; cursor: pointer; }
.pult button[aria-pressed='true'] { background: var(--marke); border-color: var(--marke); color: #fff; }
.pult .werte { letter-spacing: .05em; text-transform: none; }
/* ── Telefon: Grafik oben, Schritte als Karten darunter ────────────────── */
@media (max-width: 800px) {
.kopf nav { display: none; }
.spenden { height: 40px; padding: 0 16px; margin-left: auto; }
.einstieg { grid-template-columns: 1fr; }
.einstieg h1, .einstieg .lead { grid-column: 1; }
.strecke { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
.grafik { grid-column: 1; grid-row: 1; top: 68px; z-index: 2; height: auto; padding: 12px 0 10px; background: var(--grund); box-shadow: 0 14px 18px -14px rgba(11, 60, 73, .18); gap: 8px; }
.grafik-kopf h2 { font-size: 1.3rem; }
.grafik-kopf p { font-size: .8rem; }
.grafik-fuss { padding-top: 8px; }
.diagramm { max-height: 34svh; }
.diagramm text { font-size: 19px; }
.diagramm .wert.stark { font-size: 32px; }
.diagramm .ungerade { display: none; }
.diagramm .notiz text { font-size: 17px; }
.mittel-buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.mittel-buehne .waffel { max-height: 30svh; }
.legende { gap: 4px; }
.legende li { grid-template-columns: 10px 1fr auto; gap: 2px 7px; padding-bottom: 4px; font-size: .74rem; }
.legende li::before { width: 10px; height: 10px; }
.legende b { font-size: 1.05rem; }
.schritte { grid-column: 1; grid-row: 1; padding: 54svh 0 30svh; }
.schritt { min-height: 64svh; justify-content: flex-start; padding-top: 4svh; opacity: 1; }
.schritt > * { position: relative; }
.schritt-karte { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 18px 18px 20px; box-shadow: 0 8px 24px rgba(11, 60, 73, .08); transition: border-color var(--ui) linear; }
.schritt.aktiv .schritt-karte { border-color: var(--k-flaeche); }
.schritt h3 { font-size: 2rem; }
.abschluss { grid-template-columns: 1fr; }
.abschluss h2, .abschluss div { grid-column: 1; }
}
/* ── Reduzierte Bewegung: statisches Endbild, nichts bewegt sich ────────── */
.reduziert *, .reduziert *::before, .reduziert *::after { transition: none !important; animation: none !important; }
.reduziert .fortschritt { display: none; }
/* ── Touch: kein Hover; Tippen auf einen Balken zeigt den Wert ─────────── */
@media (hover: none) { .diagramm .treffer:hover { fill: transparent; } }
.vorschau body { overflow: hidden; }
.vorschau .einstieg { padding-top: 40px; padding-bottom: 36px; }
@media (forced-colors: active) { .waffel rect, .diagramm .balken { stroke: CanvasText; } }
@media (forced-colors: active) { button, [role=button], [role=tab], [role=switch] { border: 1px solid ButtonText !important; } }
</style>
</head>
<body>
<header class="kopf">
<a class="logo" href="#" aria-label="Ryckmoor e.V., Startseite">
<svg viewBox="0 0 28 28" aria-hidden="true"><circle cx="14" cy="14" r="13" fill="none" stroke="currentColor" stroke-width="2"/><path d="M4 16c3-2 5-2 8 0s5 2 8 0 4-2 5-1M5 20c3-2 5-2 8 0s5 2 8 0" fill="none" stroke="#7fd3dd" stroke-width="2" stroke-linecap="round"/><path d="M14 4v9M14 8l-3-3M14 10l3-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/></svg>
Ryckmoor e.V.
</a>
<nav aria-label="Hauptnavigation">
<ul><li><a href="#">Projekte</a></li><li><a href="#">Mitmachen</a></li><li><a href="#" aria-current="page">Wirkung</a></li><li><a href="#">Über uns</a></li></ul>
</nav>
<a class="spenden" href="#spenden">Spenden</a>
</header>
<main>
<section class="einstieg" aria-labelledby="titel">
<p class="dachzeile" data-dachzeile>Wirkungsbericht 2025</p>
<h1 class="versal" id="titel" data-titel>Wie das Rycktal wieder nass wird</h1>
<p class="lead" data-lead>Seit 2018 verschließen wir Gräben und kaufen trockene Moorflächen westlich von Greifswald. Scrollen Sie durch acht Jahre Arbeit.</p>
<p class="hinweis"><b>Beispieldaten</b> Alle Zahlen sind für diese Demo erfunden.</p>
</section>
<!-- Variante 1: Wirkung über die Jahre (Balken) -->
<section class="strecke" data-variante="wirkung" aria-label="Wirkung über die Jahre">
<figure class="grafik" data-grafik>
<div class="grafik-kopf">
<h2 class="versal">Wiedervernässte Moorfläche</h2>
<p>Hektar, kumuliert, 2018 bis 2025 und Ziel 2030</p>
<div class="fortschritt" aria-hidden="true"><i></i></div>
</div>
<div class="buehne">
<svg class="diagramm" viewBox="0 0 640 412" role="img" aria-labelledby="wirkung-svg-titel wirkung-svg-text"><title id="wirkung-svg-titel">Wiedervernässte Moorfläche im Rycktal, Hektar, kumuliert (Beispieldaten)</title><desc id="wirkung-svg-text">Von 35 Hektar im Jahr 2018 auf 712 Hektar im Jahr 2025. Insgesamt sind im Projektgebiet 1 240 Hektar entwässert, Ziel für 2030 sind 1 000 Hektar. Die Werte stehen in der Tabelle unter der Grafik.</desc><g class="raster"><path d="M58 277.1H626"/><path d="M58 182.3H626"/><path d="M58 87.4H626"/></g><g class="achse-text"><text x="46" y="376.0" text-anchor="end">0</text><text x="46" y="281.1" text-anchor="end">400</text><text x="46" y="186.3" text-anchor="end">800</text><text x="46" y="91.4" text-anchor="end">1 200</text><text x="0" y="18" class="achsentitel">Hektar</text><text x="79.8" y="396" text-anchor="middle">2018</text><text x="123.5" y="396" text-anchor="middle" class="ungerade">2019</text><text x="167.2" y="396" text-anchor="middle">2020</text><text x="210.9" y="396" text-anchor="middle" class="ungerade">2021</text><text x="254.6" y="396" text-anchor="middle">2022</text><text x="298.3" y="396" text-anchor="middle" class="ungerade">2023</text><text x="342.0" y="396" text-anchor="middle">2024</text><text x="385.7" y="396" text-anchor="middle" class="ungerade">2025</text><text x="429.4" y="396" text-anchor="middle">2026</text><text x="473.1" y="396" text-anchor="middle" class="ungerade">2027</text><text x="516.8" y="396" text-anchor="middle">2028</text><text x="560.5" y="396" text-anchor="middle" class="ungerade">2029</text><text x="604.2" y="396" text-anchor="middle">2030</text></g><g class="ref" data-ab="1"><path d="M58 77.9H626"/><text x="58" y="68.9">1 240 ha entwässert im Projektgebiet</text></g><path class="plan" data-ab="5" d="M418.4 372.0V193.4Q418.4 189.4 422.4 189.4H436.4Q440.4 189.4 440.4 193.4V372.0Z"/><path class="plan" data-ab="5" d="M462.1 372.0V179.2Q462.1 175.2 466.1 175.2H480.1Q484.1 175.2 484.1 179.2V372.0Z"/><path class="plan" data-ab="5" d="M505.8 372.0V164.9Q505.8 160.9 509.8 160.9H523.8Q527.8 160.9 527.8 164.9V372.0Z"/><path class="plan" data-ab="5" d="M549.5 372.0V151.9Q549.5 147.9 553.5 147.9H567.5Q571.5 147.9 571.5 151.9V372.0Z"/><path class="plan" data-ab="5" d="M593.2 372.0V138.9Q593.2 134.9 597.2 134.9H611.2Q615.2 134.9 615.2 138.9V372.0Z"/><g class="ziel" data-ab="5"><path d="M411.5 134.9H626"/><text x="626" y="125.9" text-anchor="end">Ziel 2030: 1 000 ha</text></g><path class="balken" data-ab="2" d="M68.8 372.0V367.7Q68.8 363.7 72.8 363.7H86.8Q90.8 363.7 90.8 367.7V372.0Z"/><path class="balken" data-ab="2" d="M112.5 372.0V357.0Q112.5 353.0 116.5 353.0H130.5Q134.5 353.0 134.5 357.0V372.0Z"/><path class="balken" data-ab="2" d="M156.2 372.0V341.6Q156.2 337.6 160.2 337.6H174.2Q178.2 337.6 178.2 341.6V372.0Z"/><path class="balken" data-ab="3" d="M199.9 372.0V321.5Q199.9 317.5 203.9 317.5H217.9Q221.9 317.5 221.9 321.5V372.0Z"/><path class="balken" data-ab="3" d="M243.6 372.0V295.4Q243.6 291.4 247.6 291.4H261.6Q265.6 291.4 265.6 295.4V372.0Z"/><path class="balken" data-ab="3" d="M287.3 372.0V264.5Q287.3 260.5 291.3 260.5H305.3Q309.3 260.5 309.3 264.5V372.0Z"/><path class="balken" data-ab="4" d="M331.0 372.0V236.1Q331.0 232.1 335.0 232.1H349.0Q353.0 232.1 353.0 236.1V372.0Z"/><path class="balken" data-ab="4" d="M374.7 372.0V207.2Q374.7 203.2 378.7 203.2H392.7Q396.7 203.2 396.7 207.2V372.0Z"/><path class="grundlinie" d="M58 372H626"/><text class="wert" data-ab="2" x="167.2" y="328.6" text-anchor="middle">145</text><text class="wert" data-ab="3" x="298.3" y="251.5" text-anchor="middle">470</text><text class="wert stark" data-ab="4" x="385.7" y="194.2" text-anchor="middle">712 ha</text><g class="notiz" data-ab="3"><path d="M210.9 309.5V259.5"/><text x="204.9" y="251.5" text-anchor="end">2021: erste eigene Flächen</text></g><rect class="treffer" x="58.0" y="40" width="43.7" height="332" data-tipp="2018: 35 ha wiedervernässt"/><rect class="treffer" x="101.7" y="40" width="43.7" height="332" data-tipp="2019: 80 ha wiedervernässt"/><rect class="treffer" x="145.4" y="40" width="43.7" height="332" data-tipp="2020: 145 ha wiedervernässt"/><rect class="treffer" x="189.1" y="40" width="43.7" height="332" data-tipp="2021: 230 ha wiedervernässt"/><rect class="treffer" x="232.8" y="40" width="43.7" height="332" data-tipp="2022: 340 ha wiedervernässt"/><rect class="treffer" x="276.5" y="40" width="43.7" height="332" data-tipp="2023: 470 ha wiedervernässt"/><rect class="treffer" x="320.2" y="40" width="43.7" height="332" data-tipp="2024: 590 ha wiedervernässt"/><rect class="treffer" x="363.8" y="40" width="43.7" height="332" data-tipp="2025: 712 ha wiedervernässt"/><rect class="treffer" x="407.5" y="40" width="43.7" height="332" data-tipp="2026: geplant 770 ha"/><rect class="treffer" x="451.2" y="40" width="43.7" height="332" data-tipp="2027: geplant 830 ha"/><rect class="treffer" x="494.9" y="40" width="43.7" height="332" data-tipp="2028: geplant 890 ha"/><rect class="treffer" x="538.6" y="40" width="43.7" height="332" data-tipp="2029: geplant 945 ha"/><rect class="treffer" x="582.3" y="40" width="43.7" height="332" data-tipp="2030: geplant 1 000 ha"/></svg>
<div class="tipp" data-tipp-feld aria-hidden="true"></div>
</div>
<figcaption class="grafik-fuss">
<span>Beispieldaten · Stand: Jahresbericht 2025</span>
<button type="button" data-tabelle-knopf aria-expanded="false" aria-controls="tab-wirkung">Als Tabelle zeigen</button>
</figcaption>
</figure>
<ol class="schritte">
<li class="schritt" data-schritt="1"><div class="schritt-karte">
<p class="nr">01 · Ausgangslage</p>
<h3 class="versal">1 240 Hektar Moor liegen trocken</h3>
<p>Seit den Siebzigerjahren leiten Gräben das Wasser aus den Niedermooren im Rycktal. Trockener Torf zersetzt sich und gibt Kohlendioxid ab, Jahr für Jahr.</p>
</div></li>
<li class="schritt" data-schritt="2"><div class="schritt-karte">
<p class="nr">02 · 2018 bis 2020</p>
<h3 class="versal">Die ersten 35 Hektar</h3>
<p>Mit zwei Landwirtsfamilien haben wir 2018 die ersten Gräben verschlossen. Drei Jahre später standen 145 Hektar wieder unter Wasser.</p>
</div></li>
<li class="schritt" data-schritt="3"><div class="schritt-karte">
<p class="nr">03 · 2021 bis 2023</p>
<h3 class="versal">Seit 2021 geht es schneller</h3>
<p>Seit wir Flächen selbst kaufen, kommen fast jedes Jahr über 100 Hektar dazu. Ende 2023 waren es 470 Hektar.</p>
</div></li>
<li class="schritt" data-schritt="4"><div class="schritt-karte">
<p class="nr">04 · Heute</p>
<h3 class="versal">712 Hektar sind wieder nass</h3>
<p>Das ist mehr als die Hälfte der trockenen Fläche. Nach unserer Schätzung bleiben so jedes Jahr rund 14 000 Tonnen CO<sub>2</sub>-Äquivalente im Boden.</p>
</div></li>
<li class="schritt" data-schritt="5"><div class="schritt-karte">
<p class="nr">05 · Ziel 2030</p>
<h3 class="versal">Noch 288 Hektar bis zum Ziel</h3>
<p>Ein Quadratmeter kostet uns im Schnitt 2 €, Kauf und Vernässung zusammen. Mit 50 € sichern Sie 25 Quadratmeter Moor auf Dauer.</p>
<a class="spenden" href="#spenden">Moor spenden</a>
</div></li>
</ol>
<div class="tabellen-block">
<table class="tabelle nur-sr" id="tab-wirkung">
<caption>Wiedervernässte Moorfläche im Rycktal (Beispieldaten)</caption>
<thead><tr><th scope="col">Jahr</th><th scope="col">Wiedervernässt, kumuliert</th><th scope="col">Neu im Jahr</th></tr></thead>
<tbody>
<tr><th scope="row">2018</th><td>35 ha</td><td>35 ha</td></tr>
<tr><th scope="row">2019</th><td>80 ha</td><td>45 ha</td></tr>
<tr><th scope="row">2020</th><td>145 ha</td><td>65 ha</td></tr>
<tr><th scope="row">2021</th><td>230 ha</td><td>85 ha</td></tr>
<tr><th scope="row">2022</th><td>340 ha</td><td>110 ha</td></tr>
<tr><th scope="row">2023</th><td>470 ha</td><td>130 ha</td></tr>
<tr><th scope="row">2024</th><td>590 ha</td><td>120 ha</td></tr>
<tr><th scope="row">2025</th><td>712 ha</td><td>122 ha</td></tr>
<tr><th scope="row">Ziel 2030</th><td>1 000 ha</td><td>geplant</td></tr>
<tr><th scope="row">Entwässert im Projektgebiet</th><td>1 240 ha</td><td></td></tr>
</tbody>
</table>
</div>
</section>
<!-- Variante 2: Mittelverwendung (100 Felder = 100 €) -->
<section class="strecke" data-variante="mittel" aria-label="Mittelverwendung" hidden>
<figure class="grafik" data-grafik>
<div class="grafik-kopf">
<h2 class="versal">So wirken 100 € Spende</h2>
<p>Mittelverwendung 2025, ein Feld steht für einen Euro</p>
<div class="fortschritt" aria-hidden="true"><i></i></div>
</div>
<div class="buehne mittel-buehne">
<svg class="waffel" viewBox="0 0 342 342" role="img" aria-labelledby="mittel-svg-titel mittel-svg-text"><title id="mittel-svg-titel">So verteilen sich 100 € Spende (Beispieldaten 2025)</title><desc id="mittel-svg-text">100 Felder, jedes steht für einen Euro: 61 € für Kauf und Vernässung von Moorflächen, 12 € für Messung und Forschung, 11 € für Umweltbildung, 9 € für Verwaltung, 7 € für Spendenwerbung.</desc><rect data-ab="2" data-kat="flaeche" style="--i:0" x="1" y="307" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:1" x="35" y="307" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:2" x="69" y="307" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:3" x="103" y="307" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:4" x="137" y="307" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:5" x="171" y="307" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:6" x="205" y="307" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:7" x="239" y="307" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:8" x="273" y="307" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:9" x="307" y="307" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:10" x="1" y="273" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:11" x="35" y="273" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:12" x="69" y="273" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:13" x="103" y="273" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:14" x="137" y="273" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:15" x="171" y="273" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:16" x="205" y="273" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:17" x="239" y="273" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:18" x="273" y="273" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:19" x="307" y="273" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:20" x="1" y="239" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:21" x="35" y="239" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:22" x="69" y="239" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:23" x="103" y="239" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:24" x="137" y="239" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:25" x="171" y="239" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:26" x="205" y="239" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:27" x="239" y="239" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:28" x="273" y="239" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:29" x="307" y="239" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:30" x="1" y="205" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:31" x="35" y="205" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:32" x="69" y="205" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:33" x="103" y="205" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:34" x="137" y="205" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:35" x="171" y="205" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:36" x="205" y="205" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:37" x="239" y="205" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:38" x="273" y="205" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:39" x="307" y="205" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:40" x="1" y="171" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:41" x="35" y="171" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:42" x="69" y="171" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:43" x="103" y="171" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:44" x="137" y="171" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:45" x="171" y="171" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:46" x="205" y="171" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:47" x="239" y="171" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:48" x="273" y="171" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:49" x="307" y="171" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:50" x="1" y="137" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:51" x="35" y="137" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:52" x="69" y="137" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:53" x="103" y="137" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:54" x="137" y="137" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:55" x="171" y="137" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:56" x="205" y="137" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:57" x="239" y="137" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:58" x="273" y="137" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:59" x="307" y="137" width="32" height="32" rx="3"/><rect data-ab="2" data-kat="flaeche" style="--i:60" x="1" y="103" width="32" height="32" rx="3"/><rect data-ab="3" data-kat="messung" style="--i:0" x="35" y="103" width="32" height="32" rx="3"/><rect data-ab="3" data-kat="messung" style="--i:1" x="69" y="103" width="32" height="32" rx="3"/><rect data-ab="3" data-kat="messung" style="--i:2" x="103" y="103" width="32" height="32" rx="3"/><rect data-ab="3" data-kat="messung" style="--i:3" x="137" y="103" width="32" height="32" rx="3"/><rect data-ab="3" data-kat="messung" style="--i:4" x="171" y="103" width="32" height="32" rx="3"/><rect data-ab="3" data-kat="messung" style="--i:5" x="205" y="103" width="32" height="32" rx="3"/><rect data-ab="3" data-kat="messung" style="--i:6" x="239" y="103" width="32" height="32" rx="3"/><rect data-ab="3" data-kat="messung" style="--i:7" x="273" y="103" width="32" height="32" rx="3"/><rect data-ab="3" data-kat="messung" style="--i:8" x="307" y="103" width="32" height="32" rx="3"/><rect data-ab="3" data-kat="messung" style="--i:9" x="1" y="69" width="32" height="32" rx="3"/><rect data-ab="3" data-kat="messung" style="--i:10" x="35" y="69" width="32" height="32" rx="3"/><rect data-ab="3" data-kat="messung" style="--i:11" x="69" y="69" width="32" height="32" rx="3"/><rect data-ab="4" data-kat="bildung" style="--i:0" x="103" y="69" width="32" height="32" rx="3"/><rect data-ab="4" data-kat="bildung" style="--i:1" x="137" y="69" width="32" height="32" rx="3"/><rect data-ab="4" data-kat="bildung" style="--i:2" x="171" y="69" width="32" height="32" rx="3"/><rect data-ab="4" data-kat="bildung" style="--i:3" x="205" y="69" width="32" height="32" rx="3"/><rect data-ab="4" data-kat="bildung" style="--i:4" x="239" y="69" width="32" height="32" rx="3"/><rect data-ab="4" data-kat="bildung" style="--i:5" x="273" y="69" width="32" height="32" rx="3"/><rect data-ab="4" data-kat="bildung" style="--i:6" x="307" y="69" width="32" height="32" rx="3"/><rect data-ab="4" data-kat="bildung" style="--i:7" x="1" y="35" width="32" height="32" rx="3"/><rect data-ab="4" data-kat="bildung" style="--i:8" x="35" y="35" width="32" height="32" rx="3"/><rect data-ab="4" data-kat="bildung" style="--i:9" x="69" y="35" width="32" height="32" rx="3"/><rect data-ab="4" data-kat="bildung" style="--i:10" x="103" y="35" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="verwaltung" style="--i:0" x="137" y="35" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="verwaltung" style="--i:1" x="171" y="35" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="verwaltung" style="--i:2" x="205" y="35" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="verwaltung" style="--i:3" x="239" y="35" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="verwaltung" style="--i:4" x="273" y="35" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="verwaltung" style="--i:5" x="307" y="35" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="verwaltung" style="--i:6" x="1" y="1" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="verwaltung" style="--i:7" x="35" y="1" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="verwaltung" style="--i:8" x="69" y="1" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="werbung" style="--i:0" x="103" y="1" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="werbung" style="--i:1" x="137" y="1" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="werbung" style="--i:2" x="171" y="1" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="werbung" style="--i:3" x="205" y="1" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="werbung" style="--i:4" x="239" y="1" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="werbung" style="--i:5" x="273" y="1" width="32" height="32" rx="3"/><rect data-ab="5" data-kat="werbung" style="--i:6" x="307" y="1" width="32" height="32" rx="3"/></svg>
<ol class="legende" aria-hidden="true">
<li data-ab="2" data-kat="flaeche"><span>Flächen kaufen und vernässen</span><b>61 €</b></li>
<li data-ab="3" data-kat="messung"><span>Wasserstand messen, Forschung</span><b>12 €</b></li>
<li data-ab="4" data-kat="bildung"><span>Führungen und Schulen</span><b>11 €</b></li>
<li data-ab="5" data-kat="verwaltung"><span>Verwaltung</span><b>9 €</b></li>
<li data-ab="5" data-kat="werbung" style="--n:1"><span>Spendenwerbung</span><b>7 €</b></li>
</ol>
<div class="tabellen-block">
<table class="tabelle nur-sr" id="tab-mittel">
<caption>Mittelverwendung 2025 je 100 € Spende (Beispieldaten)</caption>
<thead><tr><th scope="col">Bereich</th><th scope="col">Betrag</th></tr></thead>
<tbody>
<tr><th scope="row">Flächen kaufen und vernässen</th><td>61 €</td></tr>
<tr><th scope="row">Wasserstand messen, Forschung</th><td>12 €</td></tr>
<tr><th scope="row">Führungen und Schulen</th><td>11 €</td></tr>
<tr><th scope="row">Verwaltung</th><td>9 €</td></tr>
<tr><th scope="row">Spendenwerbung</th><td>7 €</td></tr>
</tbody>
</table>
</div>
</div>
<figcaption class="grafik-fuss">
<span>Beispieldaten · Stand: Jahresbericht 2025</span>
<button type="button" data-tabelle-knopf aria-expanded="false" aria-controls="tab-mittel">Als Tabelle zeigen</button>
</figcaption>
</figure>
<ol class="schritte">
<li class="schritt" data-schritt="1"><div class="schritt-karte">
<p class="nr">01 · Transparenz</p>
<h3 class="versal">Wohin gehen 100 € Spende?</h3>
<p>Jedes Feld rechts steht für einen Euro. So haben wir die Spenden im Jahr 2025 verteilt, geprüft und im Jahresbericht veröffentlicht.</p>
</div></li>
<li class="schritt" data-schritt="2"><div class="schritt-karte">
<p class="nr">02 · Flächen</p>
<h3 class="versal">61 € machen Moor wieder nass</h3>
<p>Flächen kaufen, Gräben verschließen, kleine Wehre bauen. Das ist der größte Posten und der Grund, warum es uns gibt.</p>
</div></li>
<li class="schritt" data-schritt="3"><div class="schritt-karte">
<p class="nr">03 · Messen</p>
<h3 class="versal">12 € messen, ob es wirkt</h3>
<p>Pegel auf jeder Fläche zeigen, ob das Wasser bleibt. Die Messreihen werten wir mit Forschenden aus der Region aus.</p>
</div></li>
<li class="schritt" data-schritt="4"><div class="schritt-karte">
<p class="nr">04 · Bildung</p>
<h3 class="versal">11 € für Führungen und Schulen</h3>
<p>Moorführungen am Wochenende und Projekttage mit Schulklassen aus Greifswald und dem Umland.</p>
</div></li>
<li class="schritt" data-schritt="5"><div class="schritt-karte">
<p class="nr">05 · Verein</p>
<h3 class="versal">16 € halten den Verein am Laufen</h3>
<p>9 € für Verwaltung, 7 € für Spendenwerbung. Wir halten diesen Anteil unter 20 % und legen jede Zahl offen.</p>
<a class="spenden" href="#spenden">Jetzt spenden</a>
</div></li>
</ol>
</section>
<section class="abschluss" id="spenden" aria-labelledby="abschluss-titel">
<h2 class="versal" id="abschluss-titel">Jeder Quadratmeter zählt</h2>
<div>
<p>Ryckmoor e.V. ist als gemeinnützig anerkannt. Ihre Spende ist steuerlich absetzbar, die Zuwendungsbestätigung kommt im Februar.</p>
<a class="spenden" href="#">Jetzt spenden</a>
<p class="klein">Ryckmoor e.V., Greifswald · eingetragener, gemeinnütziger Verein · <a href="#">Jahresbericht 2025</a></p>
</div>
</section>
</main>
<div class="pult" role="region" aria-label="Steuerung der Demo">
<div class="zeile" role="group" aria-label="Variante">
<button type="button" data-v="wirkung" aria-pressed="true">Wirkung über Jahre</button>
<button type="button" data-v="mittel" aria-pressed="false">Mittelverwendung</button>
</div>
<p class="werte" data-werte aria-live="polite"></p>
</div>
<script>
(() => {
const html = document.documentElement;
const reduziert = () => html.classList.contains('reduziert');
const $ = (s, w = document) => w.querySelector(s), $$ = (s, w = document) => [...w.querySelectorAll(s)];
const VARIANTEN = ['wirkung', 'mittel'];
const TEXTE = {
wirkung: { dach: 'Wirkungsbericht 2025', titel: 'Wie das Rycktal wieder nass wird', lead: 'Seit 2018 verschließen wir Gräben und kaufen trockene Moorflächen westlich von Greifswald. Scrollen Sie durch acht Jahre Arbeit.',
werte: 'Balken scaleY 0 → 1, 900 ms, Versatz 70 ms · Beschriftung 600 ms · cubic-bezier(0.645, 0.045, 0.355, 1) · Auslöser: IntersectionObserver, Linie bei 50 % (Telefon 70 %)' },
mittel: { dach: 'Transparenz 2025', titel: 'Wohin Ihre Spende fließt', lead: 'Wir zeigen jeden Euro. Scrollen Sie durch die Mittelverwendung des letzten Jahres, Feld für Feld.',
werte: '100 Felder = 100 € · Füllung 420 ms, Versatz 9 ms je Feld, von unten wie ein Wasserglas · Legende 600 ms · Auslöser: IntersectionObserver' }
};
let v = new URLSearchParams(location.search).get('v');
if (!VARIANTEN.includes(v)) v = VARIANTEN[0];
let strecke, schritte = [], aktuell = 0, beobachter = null;
/* Zustand der Grafik: alles mit data-ab <= n ist sichtbar */
function zeige(n) {
aktuell = n;
const g = $('[data-grafik]', strecke);
g.classList.toggle('lebt', !reduziert());
const stufen = {};
$$('[data-ab]', g).forEach(el => {
const ab = +el.dataset.ab, an = reduziert() || ab <= n;
if (an && !el.classList.contains('an')) { // Versatz nur innerhalb einer Stufe
if (!el.style.getPropertyValue('--i')) { stufen[ab] = (stufen[ab] || 0); el.style.setProperty('--n', stufen[ab]++); }
}
el.classList.toggle('an', an);
});
schritte.forEach(s => s.classList.toggle('aktiv', +s.dataset.schritt === n));
}
/* Auslöser: welcher Schritt kreuzt die Linie (Desktop Mitte, Telefon 70 %) */
const schmal = matchMedia('(max-width: 800px)');
function beobachten() {
if (beobachter) beobachter.disconnect();
const rand = schmal.matches ? '-70% 0px -29% 0px' : '-50% 0px -49% 0px';
beobachter = new IntersectionObserver(eintraege => {
eintraege.forEach(e => { if (e.isIntersecting) zeige(+e.target.dataset.schritt); });
}, { rootMargin: rand });
schritte.forEach(s => beobachter.observe(s));
}
schmal.addEventListener('change', beobachten);
function setzeVariante(neu, url = true) {
v = neu;
$$('[data-variante]').forEach(s => { s.hidden = s.dataset.variante !== v; });
strecke = $(`[data-variante="${v}"]`);
schritte = $$('.schritt', strecke);
const t = TEXTE[v];
$('[data-dachzeile]').textContent = t.dach; $('[data-titel]').textContent = t.titel; $('[data-lead]').textContent = t.lead;
$('[data-werte]').textContent = t.werte;
$$('[data-v]').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.v === v)));
if (url) {
const q = new URLSearchParams(location.search); q.set('v', v);
history.replaceState(null, '', location.pathname + '?' + q.toString().replace(/=(?=&|$)/g, '') + location.hash);
}
$$('[data-ab]', strecke).forEach(el => { el.classList.remove('an'); el.style.removeProperty('--n'); });
zeige(0);
beobachten();
}
$$('[data-v]').forEach(b => b.addEventListener('click', () => { pause(); scrollTo(0, 0); setzeVariante(b.dataset.v); }));
/* Tabelle zeigen / verbergen (für Screenreader ist sie immer da) */
$$('[data-tabelle-knopf]').forEach(b => b.addEventListener('click', () => {
const t = document.getElementById(b.getAttribute('aria-controls')), auf = t.classList.toggle('nur-sr');
b.setAttribute('aria-expanded', String(!auf)); b.textContent = auf ? 'Als Tabelle zeigen' : 'Tabelle ausblenden';
if (!auf) t.scrollIntoView({ behavior: reduziert() ? 'auto' : 'smooth', block: 'center' });
}));
/* Werte am Balken: Hover oder Tippen */
$$('.diagramm').forEach(svg => {
const feld = $('[data-tipp-feld]', svg.parentNode);
const zeigen = e => {
const r = e.target.closest('.treffer'); if (!r) return feld.classList.remove('an');
const b = svg.parentNode.getBoundingClientRect(), k = r.getBoundingClientRect();
feld.textContent = r.dataset.tipp; feld.style.left = (k.left - b.left + k.width / 2) + 'px'; feld.style.top = (e.clientY - b.top - 12) + 'px'; feld.classList.add('an');
};
svg.addEventListener('pointermove', zeigen); svg.addEventListener('pointerdown', zeigen);
svg.addEventListener('pointerleave', () => feld.classList.remove('an'));
});
/* Vorführung: die Seite scrollt Schritt für Schritt von selbst */
let uhr = null, rahmen = null;
function gleite(ziel, ms, fertig) {
const start = scrollY, t0 = performance.now();
if (reduziert()) { scrollTo(0, ziel); return fertig && fertig(); }
const schritt = t => {
const p = Math.min(1, (t - t0) / ms), k = p < .5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
scrollTo(0, start + (ziel - start) * k);
if (p < 1) rahmen = requestAnimationFrame(schritt); else if (fertig) fertig();
};
rahmen = requestAnimationFrame(schritt);
}
function zielVon(s) {
const r = s.getBoundingClientRect(), linie = innerHeight * (schmal.matches ? .7 : .5);
return scrollY + r.top + Math.min(r.height * .4, 160) - linie;
}
function vorfuehren() {
pause(); scrollTo(0, 0); zeige(0);
let i = 0;
const naechster = () => {
if (i >= schritte.length) { uhr = setTimeout(vorfuehren, 2200); return; }
gleite(zielVon(schritte[i++]), i === 1 ? 1100 : 900, () => { uhr = setTimeout(naechster, 1500); });
};
uhr = setTimeout(naechster, 700);
}
function pause() { clearTimeout(uhr); cancelAnimationFrame(rahmen); }
function neustart() { pause(); scrollTo(0, 0); setzeVariante(v, false); }
function weiter() { vorfuehren(); }
setzeVariante(v, false);
})();
</script>
</body>
</html>