# Bauplan: Verein & Non-Profit: Wirkung zeigen

Rezept `verein-nonprofit-wirkung` · Verein / Non-Profit / Stiftung / Nachhaltigkeitsinitiative · Stimmung: engagiert, glaubwürdig, nahbar, kraftvoll · Stand 02.11.2026

Ein Satz Mission in einer kräftigen, schmalen Display-Schrift, echte Fotos aus den Projekten und große Wirkungszahlen – alle drei Referenzen arbeiten so. Ein tiefer Markenton trägt die Seite, ein Signal (Gelb) gehört nur dem Spenden-Button. Viele Wege zum Mitmachen statt nur 'Spenden'; Transparenz, wohin das Geld geht.

## Dateien

- `tokens.css` in diesem Ordner: Schriften, Farben, Kurven, Dauern, Button-Grundwerte. Zuerst einbinden, dann nur diese Variablen verwenden.
- Rezept im Detail: https://cecodesign.de/lab/fundus/rezepte.json (id `verein-nonprofit-wirkung`) und https://cecodesign.de/lab/fundus/rezepte/verein-nonprofit-wirkung/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `big-shoulders` · Text: `archivo`
- Größen: Kräftige, schmale Display-Headline wie Veneer/Gabriel Sans, ruhiger Text. h1 clamp(2.75rem, 1.6rem + 5vw, 6rem), Big Shoulders wght 800, Versal, Laufweite +0.005em, Zeilenhöhe 0.95; Wirkungszahlen clamp(3rem, 2rem + 4vw, 5.5rem) wght 800 mit Tabellenziffern; h2 clamp(1.75rem, 1.2rem + 2vw, 3rem) wght 700; Fließtext Archivo 1.0625rem, wght 400, Zeilenhöhe 1.6, max. 65ch; Buttons Archivo 600, 1rem. Bei Klima-/Umweltvereinen ist climate-crisis als Akzent für genau eine Jahreszahl oder ein Wort möglich.
- Techniken: [Kondensierte Versal-Headlines auf volle Breite (fit-to-width)](https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/demo) `versal-kondensiert-fit-to-width`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty](https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/demo) `lesesatz-text-wrap`

## Farbe

Ein tiefer Markenton (Navy/Petrol – Wasser, Natur) für Headlines, Header und dunkle Sektionen, helle Töne derselben Farbe als Flächen, warmes Grau für Ruhe. Ein Signalton ausschließlich für 'Spenden' – mit dunkler Schrift für ausreichenden Kontrast (Weiß auf Gelb wie bei charity: water ist zu schwach).

- `--farbe-grund` #FFFFFF (Grund)
- `--farbe-flaeche` #EDF5FA (helle Fläche (Viva con Agua))
- `--farbe-marke` #002E6D (Marke, Headlines, dunkle Sektion (Viva con Agua; Ocean Cleanup #003755))
- `--farbe-text` #222520 (Fließtext (charity: water))
- `--farbe-flaeche-2` #DFDFD7 (warme Grau-Fläche (charity: water))
- `--farbe-text-2` #FFCA0A (Spenden-Button, Text #222520 (charity: water))

## Bewegung

- Animationsstil: [Animationsstil „Kinetisch filmisch“ (inOut-Raumwechsel)](https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/demo) `token-kinetisch-inout`
- Für UI: [Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)](https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/demo) `token-toggle-asymmetrisch`
- Kurve: cubic-bezier(0.83, 0, 0.17, 1) (token-kinetisch-inout, nur große Zustandswechsel); Buttons und Spendenformular über animationsstil_ui
- Dauer: 150–200 (Buttons, Links, Formular), 600–1000 (Kampagnen-Slider, Bild-Übergänge, Medien-Expansion), Zahlen-Odometer 1200–1500 einmalig
- Regel: Symmetrische InOut-Kurve des Stils nur für große Zustandswechsel: Kampagnen-Slides, Foto-Übergänge, Wirkungszahlen. Alles Interaktive (Buttons, Menü, Spendenformular) läuft über animationsstil_ui token-toggle-asymmetrisch in 150–200 ms. Überschwinger höchstens beim Dank nach der Spende. Zahlen zählen nur einmal und nur, wenn sie im Bild sind; unter prefers-reduced-motion sofort Endwert.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 48, 64, 96, 144
- Sektionsabstand: clamp(64px, 9vw, 136px)
- Dichte: mittel
- Hinweis: Kräftig und klar: Wirkungszahlen mit viel Luft (höchstens 3 bis 4 in einer Reihe), Wege zum Mitmachen gleich groß mit 24 px Abstand.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 48px)
- Spaltenabstand: clamp(16px, 2vw, 32px)
- Maximale Breite: 1320px
- Raster: Hero mit randlosem Foto, Mission unten links über 8 Spalten. Mitmach-Wege als 4er-Raster, Transparenz 6/6.
- Radius klein: 4px
- Radius groß: 4px
- Pillenform für Buttons: False
- Linie: 1px #DFDFD7
- Schatten: keiner
- Form: Leicht gerundet und robust (button-zustaende und typo-maske-medien zeigen 4 px). Gelb #FFCA0A nur als Spenden-Fläche mit dunkler Schrift.

## Bildsprache

- Licht: Dokumentarisch, natürliches Licht vor Ort.
- Ausschnitt: Menschen bei der Arbeit im Projekt, Nahaufnahme mit Umgebung; Bildunterschrift mit Ort und Jahr.
- Personen: Ja, mit Einwilligung und in würdiger Lage; Namen in der Bildunterschrift.
- Formate: 3:2, 4:5, 16:9
- Nicht: Keine Mitleidsbilder, keine weinenden Kinder als Spendenhebel, keine Stockfotos, keine Hände um einen Globus.

## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen)

- Anrede: du
- Sätze: Kurz und aktiv, Wirkung mit Zahl und Quelle.
- Haltung: Glaubwürdig und nahbar: Wirkung statt Mitleid, viele Wege zum Mitmachen. Stiftungen mit älterer Zielgruppe siezen, dann durchgehend.
- Tonproben: 30 € = [Wirkung laut Jahresbericht]., Mach mit: Starte deine eigene Spendenaktion.
- Nicht: „Gemeinsam können wir die Welt verändern“, Schuldgefühle, Zahlen ohne Quelle, „klimaneutral“ ohne Nachweis.

## Hero

Mission in einem Satz (Big Shoulders, Versal) + echtes Projektfoto + Spenden-Button. Typo-Maske nur für ein kurzes, fettes Schlüsselwort (z. B. „WASSER“) über echtem Projektmaterial, einmalig, kein Dauereffekt. Template-Standard ohne Effekt: schlichter Foto-Hero mit Mission.

- Raster: Foto randlos über die volle Breite, Mission unten links über Spalte 1 bis 8.
- Bild: Echtes Projektfoto, 16:9 Desktop, 4:5 mobil; Typo-Maske (typo-maske-medien) nur für ein kurzes Schlüsselwort, einmalig.
- Überschrift: clamp(2.75rem, 1.6rem + 5vw, 6rem), Big Shoulders 800 Versal, unten links.
- Handlung: „Jetzt spenden“ (#FFCA0A, Text #222520) und „Mitmachen“ (Kontur), nebeneinander unter der Mission.
- Zusatz: Spenden-Knopf zusätzlich im Kopf; Wirkungszahlen mit „Stand: …“ als eigene Leiste direkt darunter.

- Hero: [Bild/Video in Schrift (Typo-Maske)](https://cecodesign.de/lab/fundus/schrift-animationen/typo-maske-medien/demo) `typo-maske-medien`

## Sektionen in dieser Reihenfolge

1. **Wirkung in Zahlen (3–4 Zahlen mit Quelle und Stand)**: [Zahlen-/Fakten-Sektion als Typo-Ereignis](https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=diagramm) `zahlen-fakten-section` · Variante „Mit Mini-Diagramm“, [Rollende Ziffern (Zahlen-Ticker / Odometer)](https://cecodesign.de/lab/fundus/schrift-animationen/zahlen-odometer/demo) `zahlen-odometer`
2. **Aktuelle Projekte / Kampagnen**: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“, [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung) `editorial-magazin-layout` · Variante „Zeitung mit Spalten“
3. **Spenden (einmalig/monatlich, Betragsvorschläge mit Wirkung, freies Feld)**: [Spendenmodul mit Wirkungssatz](https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/demo?v=formular) `spendenmodul-wirkung` · Variante „Einmalig oder monatlich“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste) `formular-fehlerzusammenfassung` · Variante „Liste mit Sprunglinks“
4. **So wirkt deine Spende (Mittelverwendung als Diagramm hinter dem Spendenmodul; ausführlich auf der Unterseite Transparenz bzw. Jahresbericht)**: [Zahlen-/Fakten-Sektion als Typo-Ereignis](https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=diagramm) `zahlen-fakten-section` · Variante „Mit Mini-Diagramm“
5. **Mitmachen: Spenden, Spendenaktion, Ehrenamt, Gruppen vor Ort (Bento nur mit echtem Foto und Text je Weg, sonst gleichwertige Karten)**: [Bento-Grid mit lebenden Zellen](https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/demo) `bento-grid-interaktiv`
6. **Geschichten aus den Projekten**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin) `editorial-magazin-layout` · Variante „Magazin“, [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=wand) `testimonials-neu-gedacht` · Variante „Masonry-Wand“
7. **Termine & Aktionen vor Ort**: [Programm-Kalender mit Liste und Monat](https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm) `programm-kalender` · Variante „Liste und Monat“
8. **Kontakt / Ansprechperson / Anfahrt (Geschäftsstelle, Vereinsheim oder Gelände: Adresse als Text, Karte per 2-Klick)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild) `karte-zwei-klick` · Variante „Kartenbild mit 2-Klick“
9. **Partner / Förderer**: [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=raster) `logo-wand-social-proof` · Variante „Ruhiges Raster“
10. **Jahresbericht / FAQ / Spendenquittung**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq) `akkordeon-hoehe-auto` · Variante „FAQ mit Suche und Sprunglinks“

## Signatur (Pflicht)

- [Bild/Video in Schrift (Typo-Maske)](https://cecodesign.de/lab/fundus/schrift-animationen/typo-maske-medien/demo) `typo-maske-medien`

## Buttons

- Haupthandlung: [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- Nebenhandlung: [Füllung vom Eintrittspunkt](https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis) `fuellung-vom-eintrittspunkt` · Variante „Clip-Path-Formen (Tischlerei)“

## Weitere Bausteine

- Navigation: [Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt](https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/demo) `sticky-shrink-header`, [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`
- Scroll: [Medien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)](https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/demo) `medien-expansion-scroll`
- Schrift: [Rollende Ziffern (Zahlen-Ticker / Odometer)](https://cecodesign.de/lab/fundus/schrift-animationen/zahlen-odometer/demo) `zahlen-odometer`, [Gezeichnete Markierung und Unterstreichung](https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/demo) `highlight-marker-underline`
- Hover: [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=basis) `bild-zoom-in-maske` · Variante „Basis: nur das Bild zoomt“
- Mikroanimation: [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`, [Fortschrittsring](https://cecodesign.de/lab/fundus/mikroanimationen/fortschrittsring/demo) `fortschrittsring`, [Konfetti / Erfolgs-Feier](https://cecodesign.de/lab/fundus/mikroanimationen/konfetti-erfolg/demo) `konfetti-erfolg`
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“, [Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)](https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/demo) `masonry-grid-lanes-galerie`
- Footer: [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis) `footer-newsletter-mit-persoenlichkeit` · Variante „Shop mit Markenstimme“, [Mega-Footer mit Sitemap und Utility-Leiste](https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/demo) `mega-footer-sitemap`

## Grundausstattung (jede Seite)

- [Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo) `vt-cross-document-mpa`
- [Native CSS-Scroll-Reveals mit view()](https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo) `css-view-reveal-nativ`
- [Unterstreichungs-Varianten](https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo) `unterstreichung-varianten`
- [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
- [Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)](https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo) `consent-banner-gestaltet`
- [Fokus-Stil als Gestaltungssystem](https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo) `fokus-stil-system`
- [Sprunglinks und Landmarken](https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo) `sprunglinks-landmarken`
- [Schalter „Bewegung reduzieren“ mit Pause-Knöpfen](https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo) `bewegung-pausieren-schalter`
- [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo) `fehlerseite-leerzustand`
- [Natives Modal mit <dialog>](https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo) `dialog-modal-nativ`
- [Zoom- und textabstandfestes Layout](https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo) `zoom-und-textabstand-robust`
- [Kontrastmodus und contrast-color()](https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo) `kontrastmodus-forced-colors`
- [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo) `firmendaten-strukturiert`
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`

## Optional (nur als Zusatz)

- [Daten-Scrollytelling](https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/demo?v=mittel) `daten-scrollytelling` · Variante „Mittelverwendung“
- [Balkendiagramm aus Datenattributen](https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/demo) `css-diagramm-attr`

## Nicht verwenden

- mesh-gradient-shader / holo-irisierende-folie – Hochglanz-Effekte widersprechen dem sparsamen Umgang mit Spendengeld
- interaktives-3d-hero / partikel-punktwolke – teuer, langsam auf älteren Handys, kein Bezug zur Wirkung
- fullpage-snap-slides / pinned-scrub-scrollytelling als Startseite – zwingt Besucher durch eine Inszenierung, bevor sie spenden können
- jeder Preloader – Spendenwillige brechen ab
- mehrschicht-parallax – wirkt wie Kampagnen-Microsite, nicht wie seriöse Organisation
- Custom-Cursor (cursor-follower-lerp, blend-difference-cursor) – keine Agentur-Gesten

## Regeln

- Hero = Mission in einem Satz (Versal, Display-Schrift) + echtes Projektfoto/-video + Spenden-Button; wenn Video, dann eigenes Material, stumm, mit Pause-Knopf.
- Spenden-Button in Signalfarbe im Header immer sichtbar; Signalfarbe sonst nirgends.
- Wirkungszahlen nur mit Quelle/Stand (z. B. 'Stand: Jahresbericht 2025'); höchstens 3–4 Zahlen in einer Reihe.
- Spendenformular: einmalig/monatlich als Segment-Umschalter (wie in spendenmodul-wirkung), 3 Betragsvorschläge mit konkreter Wirkung ('30 € = …'), freies Feld; Spendenziel als ehrlicher Fortschrittsbalken.
- Mehrere Wege zum Mitmachen gleichwertig zeigen (Spendenaktion starten, Ehrenamt, Gruppe vor Ort, Fördermitglied) wie Viva con Agua und charity: water.
- Transparenz: Mittelverwendung, Jahresbericht, Gemeinnützigkeit/Spendensiegel, Ansprechperson mit Foto.
- Konfetti höchstens einmal als Dank nach abgeschlossener Spende, sonst nie.
- Footer mit Newsletter, Bankverbindung für Überweisung, Vereinsregister, Impressum, Satzung.
- daten-scrollytelling nur als Zusatz (optional, Priorität F) auf der Unterseite Transparenz bzw. Jahresbericht (Variante mittel), nie auf der Startseite vor dem Spendenknopf (wann_nicht des Musters); auf der Startseite zahlen-fakten-section Variante diagramm.
- mega-footer-sitemap nur bei mehreren Seiten; kleine Vereine und Onepager bekommen einen einfachen Footer.
- Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Vereinsregister (Registergericht, Nummer) und vertretungsberechtigtem Vorstand; Gemeinnützigkeit und Zuwendungsbestätigung nur mit gültigem Freistellungsbescheid; Fotos von Mitgliedern und besonders von Kindern und Jugendlichen nur mit Einwilligung (bei Minderjährigen der Eltern), widerrufbar; Mitgliedsantrag mit Satzung, Beitragsordnung, SEPA-Mandat und Einwilligungen; Spendensiegel nur echt; Förderer-Logos nur mit Erlaubnis; keine pauschalen Umweltaussagen ohne Nachweis – vom Kunden prüfen lassen.

## Rezept-Varianten

- **Sportverein (Mitgliedschaft statt Spende)**: Signalfarbe für „Mitglied werden“ statt für Spenden; Schrift, Farbe, Stil und Signatur bleiben. Kündigung der Mitgliedschaft online nur, wenn sie online abgeschlossen wird: dann widerruf-und-kuendigung-schaltflaeche – vom Kunden prüfen lassen. Für Vereine mit festem Kursbetrieb passt auch fitness-studio-rhythmus, Variante „Sportverein mit Kursbetrieb“.

## Vor der Abgabe

Checkliste in https://cecodesign.de/lab/fundus/leitfaden.txt, Abschnitt 12. Rechtliches immer „vom Kunden prüfen lassen“.