Initiative WALD LUFT ATMEN:
Von WordPress zu Next.js und Sanity.

Die Initiative WALD LUFT ATMEN wurde am 25. April 2025 von Patric P. Kutscher in Wiesenbach gegründet. Ziel: eine Million Bäume in Deutschland pflanzen, flächenbasiert, wissenschaftlich begleitet, ohne CO₂-Siegel und Greenwashing.

Die Initiative hat einen Schirmherrn (Heiko Schaffartzik, ehemaliger Kapitän der deutschen Basketball-Nationalmannschaft), fünf hochkarätige Testimonials aus Vorständen von Gerry Weber, 3M Deutschland, Tchibo und der Formel-1-Welt, einen wissenschaftlichen Beirat mit vier Experten und Partnerschaften mit dem Deutschen Allergie- und Asthmabund und dem Forum für Medizinische Fortbildung.

Die Zielgruppe: Entscheider ab 45 Jahren, Mittelstands-Unternehmer, Babyboomer 60 plus. Menschen, die in fünfzehn Sekunden ein Bauchgefühl-Urteil treffen. Wenn das Bauchgefühl "generisches WordPress" sagt, ist der Pitch beschädigt, auch wenn der Inhalt gut ist.

Die alte Seite lief auf WordPress 6.9.4 mit dem Inspiro-Theme von WPZOOM. Beim ersten Blick ordentlich, bei der technischen Analyse deutlich problematischer.

Open-Graph-Images auf vielen Seiten zeigten noch den Platzhalterpath-zu-deinem-standardbild.jpg, das Impressum lag unter/about/, es gab zwei parallele Shop-Systeme (WooCommerce plus Shopify), die Seite wurde ausgeliefert mit ISO-8859-1 Zeichensatz. Ein 301-Redirect auf die www-Domain kostete einen zusätzlichen Round-Trip.

Dazu: keine interaktive Karte der Pflanzflächen, kein Impact-Counter, FAQ-Seite fehlte komplett, Sie-Du-Inkonsistenz zwischen Hauptnavigation und Shop. Alles einzeln reparierbar, aber strategisch der falsche Hebel: die Initiative war bereit für Skalierung, die Website nicht.

Drei Optionen standen auf dem Tisch: (1) WordPress mit Custom-Theme behalten, (2) Headless WordPress mit neuem Frontend, (3) kompletter Neubau auf Next.js mit Sanity als Headless-CMS. Wir haben Option 3 gewählt: der Performance-Sprung war mit WordPress strukturell nicht zu haben, die Plugin-Abhängigkeit war ein permanenter Wartungsrisiko-Faktor, und Vercel liefert von Haus aus ein CDN plus Preview-Deployments pro Branch.

Statt langer Figma-Runden wurden drei Design-Varianten parallel deploybar ausgeliefert (Editorial, Lebendig, Poetisch). Patric konnte sie real auf dem eigenen Smartphone scrollen, nicht nur als Screenshot betrachten. Die Entscheidung für die lebendige Variante fiel innerhalb einer Kaffeepause.

Das Brand-System der Schweizer Agentur wurde direkt in Tailwind v4 Design-Tokens übersetzt (acht Farb-Properties plus die Schriftfamilie als CSS Custom Properties). Jede Sektion nutztbg-main,text-paper,border-light-green. In der gesamten Entwicklung gab es keine Diskussion darüber, welches Grün wo verwendet wird.

Die Startseite ist als Long-Form-Landingpage mit Anchor-Navigation gebaut, 13 Sektions-Komponenten, 1.754 Zeilen TypeScript. 45 Framer-Motion-Animationen, 18 Scroll-Hooks, fünf AnimatePresence-Blöcke. Dosiert, nicht dekorativ: Parallax bei Interlude-Bildern, Reveal beim Scroll-in, Hover-Expansion bei Cards.

Sanity-Content-Modell: drei Dokument-Typen (Author, Category, blogPost), Body als PortableText, Hotspot-Images mit Alt-Text und Bildunterschrift, optionale Gallery, Attachments, explizite SEO-Description. Sanity Studio ist unter/studioeingebettet, Patric bearbeitet Inhalte ohne Gutenberg-Ballast.

DSGVO-konform: Google-Maps als Opt-in-Embed, eigene CookieConsent-Komponente ohne Drittanbieter-SaaS. Be Vietnam Pro wird self-hosted via next/font ausgeliefert, keine Google-Fonts-Pings. Security-Header komplett auf Vercel: HSTS preload, Referrer-Policy, Permissions-Policy (mit expliziter Freigabe für shop.waldluft.green), X-Content-Type-Options.

• Performance-Baseline: HTML von 138 KB auf 71 KB, TTFB von 415 ms auf 92 ms, 22 Scripts auf eines, neun Stylesheets auf eines. Alles vor Image-Optimierung und Brotli gemessen.
• SEO repariert: Open-Graph-Platzhalter weg (File-based Convention mitopengraph-image.jpg), Metadata-Template mit Canonicals, Sitemap dynamisch aus Sanity-Content, robots explizit definiert, keine wp-login.php im Crawl-Index.
• UX konsolidiert: Ein Shop statt zwei, Impact-Counter auf der Startseite (60.000 von 100.000 Bäumen auf Rügen sichtbar), DSGVO-konformes Maps-Embed mit Opt-in, einheitliche Anrede.
• Redaktion befreit: Patric bearbeitet Inhalte in Sanity Studio, Änderungen binnen Sekunden live, kein Cache-Plugin zu pflegen, kein PHP-Update-Risiko.
• Skalierungs-ready: Eine zweite Projektfläche (Rügen 02, Eifel, Spessart) ist ein neues Sanity-Dokument plus eine dynamische Route, keine neue WordPress-Seite.