{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "spendenmodul-wirkung", "name": "Spendenmodul mit Wirkungssatz", "name_en": "Donation module with impact statements, one-time/monthly toggle and custom amount", "kurz": "Spenden mit Umschalter einmalig/monatlich, vier Beträgen mit Wirkungssatz, geprüftem freiem Feld, Odometer, wechselnder Strichzeichnung und Vertrauenszeile.", "kategorie": "Sektionen & Funktionen", "kategorie_slug": "sektionen", "kategorie_nr": 16, "bau_chat": "D", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "website_belege": 2, "stimmung": [ "präzise", "laut", "warm" ], "stimmung_roh": [ "vertrauenswürdig", "menschlich", "kraftvoll" ], "technik": [ "css", "vanilla-js", "form", "svg", "intl" ], "technik_gruppen": [ "css", "js", "canvas" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Ein Spendenformular als eigene Sektion. Ein Umschalter wählt einmalig oder monatlich, ein gleitender Indikator zeigt die Wahl. Vier Betragsvorschläge stehen als Segmente nebeneinander, jeder mit einem kurzen Wirkungssatz. Ein freies Feld nimmt eigene Beträge an und prüft sie erst nach der Eingabe. Der gewählte Betrag zählt als Odometer zum neuen Wert, Wirkungssatz und Zeichnung wechseln mit, der Absende-Knopf nennt den Betrag. Darunter eine Vertrauenszeile mit Gemeinnützigkeit, Spendenquittung, Mittelverwendung und Kontakt.", "warum_es_wirkt": "Ein Betrag allein ist abstrakt. Ein Satz, was er bewirkt, macht ihn greifbar und erleichtert die Entscheidung. Der Umschalter macht die monatliche Spende sichtbar, ohne die einmalige zu verstecken. Die Vertrauenszeile beantwortet die Fragen, die kurz vor dem Klick kommen.", "wann_einsetzen": "Vereine, Stiftungen, Initiativen, Fördervereine von Schulen, Tierheimen oder Kulturhäusern. Auf der Spendenseite und als Sektion auf der Startseite. Die Variante „Aktion mit Ziel“ für befristete Kampagnen mit festem Betrag.", "wann_nicht": "Wenn ein externer Spendendienst das Formular liefert und sich nicht gestalten lässt: dann nur die Betragswahl mit Wirkung bauen und den Betrag an den Dienst übergeben. Wenn der Verein die Wirkung nicht seriös beziffern kann: keine erfundenen Gleichungen, sondern Beispiele aus dem Jahresbericht.", "varianten": [ "Einmalig oder monatlich mit vier Beträgen und freiem Feld", "Aktion mit Spendenziel: ehrlicher Fortschrittsbalken, der eigene Betrag als Vorschau im Balken, Beträge auf das Ziel bezogen", "Fördermitgliedschaft: monatlich oder jährlich, monatliche Option zuerst", "Kompakt auf der Startseite mit Übergabe an die Spendenseite" ], "umsetzung": "
mit fieldset „Wie oft?“ (Radios einmalig/monatlich) und fieldset „Betrag wählen“ (Radios, Betrag und Wirkung im Label). Indikator als ::before der Spur, .rhythmus:has(input[value=monatlich]:checked)::before { translate: 100% 0 }. Je Rhythmus eigene Beträge; beim Wechsel bleibt die Position des Vorschlags erhalten.\n\nFreies Feld type=text inputmode=decimal (nicht type=number: deutsche Kommas, keine Pfeile). Eigene Prüfung: Ziffern, Komma oder Tausenderpunkt, höchstens 2 Nachkommastellen, Mindest- und Höchstbetrag. Fehler erst nach blur oder submit, aria-invalid und aria-describedby. Solange der Betrag ungültig ist, zeigen Wirkung und Knopf das an.\n\nOdometer: je Ziffer eine Zelle mit overflow: hidden und einem Streifen 0–9, translateY(−Ziffer × Zellenhöhe), transition-delay je Stelle. Der Betrag steht zusätzlich als Text in einer aria-live-Region.\n\nWirkung für freie Beträge aus dem Jahresbetrag in die größte passende Einheit rechnen (Meter Lahnung, Zähltage, Schulklassen, Setzlinge). Zahlen dafür aus dem Jahresbericht des Vereins nehmen.\n\nAbsenden übergibt Betrag und Rhythmus an den Zahlungsdienst (Parameter oder Formularfelder). Steuerliche Hinweise (Zuwendungsbestätigung, vereinfachter Nachweis bis 300 €) und Siegel vom Kunden prüfen lassen; ein Siegel nur zeigen, wenn der Verein es führt.", "mobil": "Beträge zweispaltig mit großen Zielen, numerische Tastatur im freien Feld, Absende-Knopf in voller Breite. Wirkung und Zeichnung stehen über dem Formular.", "reduzierte_bewegung": "Odometer springt auf den Endwert, Indikator springt, Wirkungssatz und Zeichnung wechseln nur mit kurzer Deckkraft.", "barrierefreiheit": "Radiogruppen mit fieldset und legend, Wirkung im Label des Betrags. Ziffernstreifen aria-hidden, Betrag als Text in aria-live. Fehler erst nach Interaktion, mit aria-invalid und aria-describedby; Fehlertext #b3261e mit Schriftstärke 600. Gelber Knopf mit dunkler Schrift (#222520 auf #ffca0a). Fokus mit 3px-Kontur in Markenfarbe. Fortschritt und Mittelverwendung als role=img mit Text." }, "messwerte": { "easing": "cubic-bezier(0.645, 0.045, 0.355, 1)", "dauer_ms": "150–200 UI, Odometer 700", "stagger_ms": "45 je Ziffer", "distanz": "1 Zeilenhöhe je Ziffer", "sonstiges": "Kurve aus dem Rezept verein-nonprofit-wirkung (Ocean Cleanup easeInOutCubic). Odometer-Versatz wie im Muster zahlen-odometer.", "herkunft": "eigene Festlegung", "quelle": "Rezept verein-nonprofit-wirkung" }, "kurve": { "bezier": [ 0.645, 0.045, 0.355, 1.0 ], "css": "cubic-bezier(0.645, 0.045, 0.355, 1)", "name": "eigene Kurve", "dauer_ms": 180 }, "gesehen_bei": [ { "seite": "charity: water, Spendenseite", "url": "https://www.charitywater.org/donate/default", "auszeichnung": "", "beobachtung": "Vertrauenszeilen „you can trust 100% of your donation will go directly to water solutions“ und „100% of public donations go directly to fund clean water projects“, Hinweis auf den Status als 501(c)(3), Siegel und Bewertungen von Candid, Charity Navigator, Charity Watch und BBB (am 01.11.2026 abgerufen).", "art": "website" }, { "seite": "Verbandsbüro: Monatsspende im Antwortformular", "url": "https://www.verbandsbuero.de/monatsspende-optimierst-dein-antwortformular/", "auszeichnung": "", "beobachtung": "Monatliche Spende prominent, einmalige als zweite Option. Drei oder vier Betragsvorschläge plus freies Feld, je Betrag ein kurzes Beispiel der Wirkung. Mindestbetrag neutral nennen („ab 5 €/Monat möglich“). SEPA-Mandat „jederzeit widerrufbar“ und ein kurzer Datenschutzsatz.", "art": "artikel" }, { "seite": "WPForms: Beispiele für Spendenseiten", "url": "https://wpforms.com/de/donation-page-examples-to-inspire-your-online-fundraising/", "auszeichnung": "", "beobachtung": "Zwölf Spendenseiten im Vergleich: Umschalter einmalig/monatlich (UNFPA), monatlich als Standard (Future in Sight), vorausgewählter Betrag (Special Olympics), Wirkungssätze, die Beträge in Ergebnisse übersetzen (Code for America), Hinweise auf Steuerabzug und Kontakt.", "art": "artikel" }, { "seite": "Viva con Agua de Sankt Pauli e.V.", "url": "https://www.vivaconagua.org/", "auszeichnung": "", "beobachtung": "Versal-Aufruf „SPENDE JETZT FÜR SAUBERES TRINKWASSER“, Wirkungszahlen als große Überschriften, mehrere Wege zum Mitmachen (Rezept-Recherche 31.10.2026).", "art": "website" } ], "tutorials": [ { "titel": "Verbandsbüro: So optimierst du dein Antwortformular für die Monatsspende", "url": "https://www.verbandsbuero.de/monatsspende-optimierst-dein-antwortformular/" } ], "kombinierbar_mit": [ "gleitender-indikator", "zahlen-odometer", "validierung-nach-interaktion", "checkbox-radio-animiert", "konfetti-erfolg" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/", "meta": "https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/meta.json", "demo": "https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/demo" }, "herkunft": { "quelldateien": [ "DEF-Recherche 01.11.2026" ], "pruefnotizen": [ "charity: water und Verbandsbüro am 01.11.2026 per WebFetch abgerufen; Viva con Agua aus der Rezept-Recherche.", "Steuerliche Hinweise vom Kunden prüfen lassen. Geprüft 02.11.2026 (§ 50 Abs. 4 EStDV, gesetze-im-internet.de/estdv_1955/__50.html): Bis 300 € ersetzt die Buchungsbestätigung der Bank die Zuwendungsbestätigung nur zusammen mit einem vom Verein erstellten Beleg (steuerbegünstigter Zweck, Angaben zur Freistellung, Spende oder Mitgliedsbeitrag). Der Demo-Satz wurde entsprechend präzisiert; „Kontoauszug genügt“ allein wäre zu knapp." ] }, "bau": { "status": "fertig", "kurz": "Spenden mit Umschalter einmalig/monatlich, vier Beträgen mit Wirkungssatz, geprüftem freiem Feld, Odometer, wechselnder Strichzeichnung und Vertrauenszeile.", "demo": true, "abhaengigkeiten": [], "werte": { "easing": "cubic-bezier(0.645, 0.045, 0.355, 1) (easeInOutCubic aus dem Rezept verein-nonprofit-wirkung)", "dauer_ms": { "ui": 180, "indikator": 600, "odometer": 700, "wirkungssatz_wechsel": 260, "betraege_einblenden": 600, "knopf_druck": 150 }, "stagger_ms": "Odometer 45 je Ziffer (Einer zuerst); Beträge nach Rhythmuswechsel 40 je Karte", "distanz": "Odometer 1 Zelle = 1.1em je Ziffer; Wirkungssatz und Bild translateY 6–8px", "odometer": "je Ziffer ein Streifen 0–9, translateY(−n × 1.1em), Maske linear-gradient(transparent, #000 7 %, #000 93 %, transparent); ändert sich die Stellenzahl, starten alle Stellen bei 0", "betraege": "einmalig 15 / 35 / 70 / 150 €, monatlich 5 / 10 / 20 / 40 €, Aktion 20 / 50 / 75 / 150 €; Start 35 € bzw. 10 € bzw. 50 €", "frei": "type=text inputmode=decimal, deutsche Schreibweise (25,50 und 1.250), höchstens 2 Nachkommastellen, 5 € bis 10.000 €; Fehler erst nach Verlassen oder Absenden, aria-invalid + aria-describedby; Feld geleert → zurück zum letzten Vorschlag", "ungueltig": "Odometer Deckkraft .45, Wirkungssatz „Bitte prüfe den Betrag“, Knopf „Betrag prüfen“", "segment": "Spur #edf5fa, 4px Innenabstand, Pille #002e6d Radius 4px, Schatten 0 4px 14px rgba(0,46,109,.22), translate 0 → 100 %", "farben": "Weiß, helle Fläche #edf5fa, Marke #002e6d, Wasser #8fc3e8, Text #222520, Signal #ffca0a nur für Spenden-Knöpfe (dunkle Schrift), Fehler #b3261e", "schriften": "Big Shoulders 800 versal (h1 clamp(2.75rem, 1.6rem + 3.6vw, 5rem)/.95, Betrag clamp(4.5rem, 3rem + 4.4vw, 7.25rem)), Archivo 400–750 (Text 1.0625rem, Knopf 1.1875rem)", "kampagne": "Balken 12px, Ist #fff, eigener Betrag als Schraffur #8fc3e8/#b9daf1 hinter dem Ist-Wert, Breite 600 ms gleiche Kurve", "vorfuehrung": "Zeiger 620 ms; 70 €, monatlich, 20 €, einmalig, „3“ (Fehler nach Verlassen), „120“, Absenden; Schleife" }, "ausloeser": "klick", "touch": "Beträge zweispaltig, freies Feld mit numerischer Tastatur (inputmode=decimal), Knopf in voller Breite. Umschalter zeigt „wirkt dauerhaft“ unter „Monatlich“. Wirkung und Bild stehen über dem Formular. Hover-Farben entfallen.", "reduziert": "Odometer springt auf den Endwert, Indikator und Spendenziel-Vorschau springen, Wirkungssatz und Bild wechseln nur mit 120 ms Deckkraft, Beträge erscheinen ohne Einblenden.", "korrekturen": { "beschreibung": "Ein Spendenformular als eigene Sektion. Ein Umschalter wählt einmalig oder monatlich, ein gleitender Indikator zeigt die Wahl. Vier Betragsvorschläge stehen als Segmente nebeneinander, jeder mit einem kurzen Wirkungssatz. Ein freies Feld nimmt eigene Beträge an und prüft sie erst nach der Eingabe. Der gewählte Betrag zählt als Odometer zum neuen Wert, Wirkungssatz und Zeichnung wechseln mit, der Absende-Knopf nennt den Betrag. Darunter eine Vertrauenszeile mit Gemeinnützigkeit, Spendenquittung, Mittelverwendung und Kontakt.", "warum_es_wirkt": "Ein Betrag allein ist abstrakt. Ein Satz, was er bewirkt, macht ihn greifbar und erleichtert die Entscheidung. Der Umschalter macht die monatliche Spende sichtbar, ohne die einmalige zu verstecken. Die Vertrauenszeile beantwortet die Fragen, die kurz vor dem Klick kommen.", "wann_einsetzen": "Vereine, Stiftungen, Initiativen, Fördervereine von Schulen, Tierheimen oder Kulturhäusern. Auf der Spendenseite und als Sektion auf der Startseite. Die Variante „Aktion mit Ziel“ für befristete Kampagnen mit festem Betrag.", "wann_nicht": "Wenn ein externer Spendendienst das Formular liefert und sich nicht gestalten lässt: dann nur die Betragswahl mit Wirkung bauen und den Betrag an den Dienst übergeben. Wenn der Verein die Wirkung nicht seriös beziffern kann: keine erfundenen Gleichungen, sondern Beispiele aus dem Jahresbericht.", "varianten": [ "Einmalig oder monatlich mit vier Beträgen und freiem Feld", "Aktion mit Spendenziel: ehrlicher Fortschrittsbalken, der eigene Betrag als Vorschau im Balken, Beträge auf das Ziel bezogen", "Fördermitgliedschaft: monatlich oder jährlich, monatliche Option zuerst", "Kompakt auf der Startseite mit Übergabe an die Spendenseite" ], "umsetzung": " mit fieldset „Wie oft?“ (Radios einmalig/monatlich) und fieldset „Betrag wählen“ (Radios, Betrag und Wirkung im Label). Indikator als ::before der Spur, .rhythmus:has(input[value=monatlich]:checked)::before { translate: 100% 0 }. Je Rhythmus eigene Beträge; beim Wechsel bleibt die Position des Vorschlags erhalten.\n\nFreies Feld type=text inputmode=decimal (nicht type=number: deutsche Kommas, keine Pfeile). Eigene Prüfung: Ziffern, Komma oder Tausenderpunkt, höchstens 2 Nachkommastellen, Mindest- und Höchstbetrag. Fehler erst nach blur oder submit, aria-invalid und aria-describedby. Solange der Betrag ungültig ist, zeigen Wirkung und Knopf das an.\n\nOdometer: je Ziffer eine Zelle mit overflow: hidden und einem Streifen 0–9, translateY(−Ziffer × Zellenhöhe), transition-delay je Stelle. Der Betrag steht zusätzlich als Text in einer aria-live-Region.\n\nWirkung für freie Beträge aus dem Jahresbetrag in die größte passende Einheit rechnen (Meter Lahnung, Zähltage, Schulklassen, Setzlinge). Zahlen dafür aus dem Jahresbericht des Vereins nehmen.\n\nAbsenden übergibt Betrag und Rhythmus an den Zahlungsdienst (Parameter oder Formularfelder). Steuerliche Hinweise (Zuwendungsbestätigung, vereinfachter Nachweis bis 300 €) und Siegel vom Kunden prüfen lassen; ein Siegel nur zeigen, wenn der Verein es führt.", "mobil": "Beträge zweispaltig mit großen Zielen, numerische Tastatur im freien Feld, Absende-Knopf in voller Breite. Wirkung und Zeichnung stehen über dem Formular.", "reduzierte_bewegung": "Odometer springt auf den Endwert, Indikator springt, Wirkungssatz und Zeichnung wechseln nur mit kurzer Deckkraft.", "barrierefreiheit": "Radiogruppen mit fieldset und legend, Wirkung im Label des Betrags. Ziffernstreifen aria-hidden, Betrag als Text in aria-live. Fehler erst nach Interaktion, mit aria-invalid und aria-describedby; Fehlertext #b3261e mit Schriftstärke 600. Gelber Knopf mit dunkler Schrift (#222520 auf #ffca0a). Fokus mit 3px-Kontur in Markenfarbe. Fortschritt und Mittelverwendung als role=img mit Text." }, "geprueft": "02.11.2026", "notiz": "Welt: Rezept verein-nonprofit-wirkung, erfundener Verein Priel e.V. (Watt und Salzwiese, Husum; Mail-Domain priel.example). Big Shoulders und Archivo, Navy #002e6d, Gelb nur für Spenden. Vier eigene Strichzeichnungen (Düne mit Strandhafer, Schulklasse mit Keschern, Zähltag mit Fernrohr und Warft, Lahnung) wechseln mit dem Betrag. Wirkungszahlen sind für die Demo erfunden und im Code als „aus dem Jahresbericht übernehmen“ markiert. Zustände: Vorschlag, frei gültig, frei ungültig (Fehler nach Verlassen), leer (zurück zum Vorschlag), gesendet (Dank; Zahlung nicht verbunden). Siegel ist ein gekennzeichnetes Muster. Variante „Aktion mit Ziel“ mit Spendenziel-Balken und Beträgen für die Lahnung. Referenzen: charitywater.org, verbandsbuero.de, wpforms.com, vivaconagua.org. AD-Review 02.11.2026: Note 5. Pult nach rechts unten verlegt, damit es den Wirkungssatz links nicht verdeckt; Fehlerzustand (3 €) geprüft.", "varianten": [ { "id": "formular", "name": "Einmalig oder monatlich", "wann": "Spendenseite eines Vereins oder einer Stiftung mit laufender Arbeit.", "werte": { "rhythmus": "einmalig | monatlich, Start einmalig", "betraege": "15 / 35 / 70 / 150 € bzw. 5 / 10 / 20 / 40 €/Monat" } }, { "id": "kampagne", "name": "Aktion mit Spendenziel", "wann": "Befristete Kampagne mit festem Ziel (Bauprojekt, Nothilfe, Anschaffung).", "werte": { "rhythmus": "nur einmalig, Umschalter entfällt", "betraege": "20 / 50 / 75 / 150 €, Start 50 €", "ziel": "18.420 € von 25.000 €, 214 Spenden, noch 23 Tage; eigener Betrag als Schraffur im Balken, 600 ms" } } ] } }