Wald Luft Atmen: ein neuer Auftritt für die Aufforstungsinitiative.

Wald Luft Atmen wurde am 25.04.2025 von Patric P. Kutscher in Wiesenbach gegründet. Das Ziel der Initiative ist, eine Million Bäume in Deutschland zu pflanzen: auf dokumentierten Flächen und wissenschaftlich begleitet. Sie positioniert sich dabei ausdrücklich ohne CO₂-Siegel und gegen Greenwashing.

Zum dokumentierten Projektstand gehörten Schirmherr Heiko Schaffartzik, ehemaliger Kapitän der deutschen Basketball-Nationalmannschaft, fünf Unterstützerstimmen aus den Bereichen Gerry Weber, 3M Deutschland, Tchibo und Formel 1 sowie ein wissenschaftlicher Beirat mit vier Experten. Hinzu kamen Partnerschaften mit dem Deutschen Allergie- und Asthmabund und dem Forum für Medizinische Fortbildung.

Die Website richtete sich unter anderem an Entscheider ab 45 Jahren, mittelständische Unternehmer und Menschen ab 60. Sie sollte diesen Besuchern einen schnellen, glaubwürdigen Überblick über Initiative, Projekte und Beteiligungsmöglichkeiten geben.

Die bisherige Seite nutzte WordPress 6.9.4 und das Inspiro-Theme von WPZOOM. In der Analyse wurden mehrere konkrete Baustellen dokumentiert:

• Auf vielen Seiten verwiesen Open-Graph-Bilder noch auf den Platzhalterpath-zu-deinem-standardbild.jpg.
• Das Impressum war unter/about/erreichbar.
• WooCommerce und Shopify wurden parallel eingesetzt.
• Als Zeichensatz wurde ISO-8859-1 ausgeliefert.
• Eine 301-Weiterleitung zur www-Domain erforderte einen zusätzlichen Abruf.
• Eine interaktive Karte der Pflanzflächen, ein Fortschrittszähler und eine FAQ-Seite fehlten.
• Zwischen Hauptseite und Shop wechselte die Ansprache zwischen Sie und Du.

Diese Punkte waren einzeln behebbar. Für die geplante Weiterentwicklung wurde dennoch ein vollständiger Neubau gewählt.

Zur Auswahl standen drei Wege: WordPress mit individueller Gestaltung weiterführen, WordPress als Headless-CMS mit einem neuen Frontend einsetzen oder die Website auf Next.js mit Sanity neu aufbauen. Für dieses Projekt fiel die Wahl auf Next.js und Sanity.

Die neue Basis passte zu den Anforderungen an Gestaltung, Redaktion und technische Weiterentwicklung. Vercel ergänzte die Umsetzung um ein CDN und getrennte Vorschau-Deployments.

Für die gestalterische Entscheidung entstanden drei im Browser nutzbare Varianten: „Editorial“, „Lebendig“ und „Poetisch“. Patric P. Kutscher konnte sie auf seinem Smartphone öffnen, scrollen und vergleichen. Im gemeinsamen Gespräch fiel die Wahl auf die lebendige Variante.

Eingesetzt wurden Next.js 16, Sanity 5, Tailwind 4 und die Schrift Be Vietnam Pro. Das vorhandene Gestaltungssystem einer Schweizer Agentur wurde übernommen. Acht Farbwerte und die Schriftfamilie wurden als CSS Custom Properties beziehungsweise Design-Tokens hinterlegt, darunterbg-main,text-paperundborder-light-green.

Die Startseite wurde als längere, über Anker navigierbare Seite aufgebaut. Der dokumentierte Entwicklungsstand umfasst 13 Abschnittskomponenten und 1.754 Zeilen TypeScript. Für Bewegung wurden 45 Framer-Motion-Animationen, 18 Scroll-Hooks und fünf AnimatePresence-Blöcke eingesetzt: unter anderem Parallax-Effekte bei Zwischenbildern, das Einblenden von Abschnitten und das Vergrößern von Karten beim Darüberfahren.

Das Sanity-Modell umfasst die Dokumenttypen Author, Category und blogPost. Die Artikelinhalte werden als PortableText gepflegt. Bilder unterstützen Hotspots, Alternativtexte und Bildunterschriften; Galerien, Anhänge und eine eigene SEO-Beschreibung sind vorgesehen. Sanity Studio ist unter/studioeingebunden, damit das Team den Blog selbst bearbeiten kann.

Für die technische Berücksichtigung des Datenschutzes wurden Google Maps erst nach aktiver Freigabe eingebunden und eine eigene CookieConsent-Komponente eingesetzt. Die Schrift wird übernext/fontselbst gehostet, ohne Abruf bei Google Fonts. Auf Vercel wurden HSTS preload, Referrer-Policy, Permissions-Policy und X-Content-Type-Options konfiguriert; die Permissions-Policy enthält eine Freigabe fürshop.waldluft.green. Diese Maßnahmen ersetzen keine umfassende rechtliche Prüfung.

• Technische Ausgangsmessung: HTML von 138 auf 71 KB, TTFB von 415 auf 92 ms, Scripts im Head von 22 auf 1, Stylesheets von 9 auf 1. Die Messung erfolgte vor weiterer Bildoptimierung und Brotli.
• Metadaten und Auffindbarkeit: Open-Graph-Platzhalter durchopengraph-image.jpgersetzt, Metadatenvorlage mit Canonicals eingerichtet, Sitemap aus Sanity-Inhalten erzeugt und robots-Regeln ausdrücklich definiert. Die altewp-login.phpgehörte nicht mehr zur neuen Website.
• Besucherführung: Ein Shop statt zweier Systeme, ein Fortschrittszähler mit dem damaligen Projektstand von 60.000 der geplanten 100.000 Bäume auf Rügen, eine Karte mit aktiver Freigabe und einheitliche Ansprache.
• Redaktion: Das Team kann Blogbeiträge in Sanity Studio bearbeiten. Änderungen konnten im beschriebenen Projektablauf kurzfristig veröffentlicht werden. WordPress-spezifische Cache-Plugins und PHP-Updates entfielen; die neue Software und ihre Dienste benötigen weiterhin Pflege.
• Weitere Projektflächen: Die Architektur ist darauf ausgelegt, zusätzliche Flächen wie Rügen 02, Eifel oder Spessart über neue Sanity-Dokumente und dynamische Routen abzubilden. Die Beispiele bezeichnen Erweiterungsmöglichkeiten, keine hier belegten weiteren Pflanzprojekte.