{
 "schema": "fundus-rezept/1",
 "stand": "02.11.2026",
 "basis": {
  "stand": "02.11.2026 (Runde 5: Redaktion nach KI-Audit und Lückenrecherche)",
  "muster": [
   "vt-cross-document-mpa",
   "css-view-reveal-nativ",
   "unterstreichung-varianten",
   "button-zustaende",
   "validierung-nach-interaktion",
   "consent-banner-gestaltet",
   "fokus-stil-system",
   "sprunglinks-landmarken",
   "bewegung-pausieren-schalter",
   "fehlerseite-leerzustand",
   "dialog-modal-nativ",
   "zoom-und-textabstand-robust",
   "kontrastmodus-forced-colors",
   "firmendaten-strukturiert",
   "sofort-navigation-vorladen"
  ],
  "beschreibung": "Grundausstattung, die jedes Rezept ohne Nennung bekommt: native Seitenübergänge zwischen echten Seiten (vt-cross-document-mpa) und Vorladen der Hauptwege (sofort-navigation-vorladen), beides nicht bei Onepagern; native Scroll-Reveals nur wo sinnvoll, Link-Unterstreichung, vollständige Button-Zustände, Validierung erst nach Interaktion, ein gestaltetes Consent-Banner, Fehlerseite und Leerzustand, natives Dialog-Modal und eine einzige Datenquelle für Firmendaten, aus der Kontaktblock, Öffnungszeiten und JSON-LD entstehen (firmendaten-strukturiert). Dazu die Barrierefreiheit der Kategorie zugang: sichtbarer Fokus, Sprunglinks und Landmarken, Pause für Bewegung, 200 % Zoom und Textabstände ohne Abschneiden (zoom-und-textabstand-robust), Kontrastmodus (kontrastmodus-forced-colors). In Sektionen dürfen Basis-Muster genannt werden, wenn sie dort besonders wichtig sind (z. B. Formular-Validierung); in den Kategorie-Listen der Rezepte stehen sie nicht.",
  "regeln": [
   "Keine Schrift kommt in mehr als 3 Rezepten vor (headline, text und akzent zusammen gezählt, alternative_eigenprojekt ausgenommen).",
   "Ein Rezept darf Headline- und Textschrift nicht 1:1 mit einem anderen Rezept teilen.",
   "Pflichtfeld signatur: 1–2 Muster, die kein anderes Rezept nutzt (Basis ausgenommen); jedes Signatur-Muster steht auch in den Muster-Listen des Rezepts.",
   "cinematic-video-hero nur mit eigenem, hochwertigem Footage. Für typische KMU-Kunden (Gastro, Mode/Concept Store) ist ein Foto-Hero Standard, Video steht unter hero_variante.",
   "Kontakt/Anfrage, Online-Termin und Anfahrt sind eigene Sektionen (kontakt-anfrage-formular bzw. mehrschritt-anfrage, termin-buchung-zwei-klick, karte-zwei-klick, oeffnungszeiten-status), auch wenn ein Rezept sie nicht nennt; die Adresse steht immer auch als Text da; studio-visitenkarte-footer steht nur im Footer.",
   "Drittanbieter-Inhalte (Video, Karte, Buchung, Social Feeds) erst nach Einwilligung bzw. Klick laden.",
   "Höchstens ein Material-Effekt (Glow, Verlaufsrahmen, Raster, Textur) pro Ansicht.",
   "Automatisch bewegte Inhalte (Laufband, Wortwechsel, Autoplay) nie für wichtige Information; immer pausierbar und unter prefers-reduced-motion statisch.",
   "Barrierefreiheit gehört zur Grundausstattung (BFSG seit 28.06.2025): sichtbarer Fokus (fokus-stil-system), Sprunglinks und Landmarken, Pause für alles, was sich länger als 5 s bewegt (bewegung-pausieren-schalter), native Dialoge, 200 % Zoom und 320 px Breite ohne Abschneiden (zoom-und-textabstand-robust), Kontrastmodus prüfen (kontrastmodus-forced-colors). Rechtliches (Erklärung zur Barrierefreiheit) vom Kunden prüfen lassen.",
   "Firmendaten (Name, Adresse, Telefon, Zeiten samt Sonderzeiten, Leistungen, Profil-Links) aus einer Quelle; JSON-LD nur für sichtbare Inhalte, keine eigenen Bewertungssterne im Markup (firmendaten-strukturiert).",
   "Wer online Verträge mit Verbrauchern schließt (Shop, Kurs, Abo, Mitgliedschaft, Online-Anmeldung), braucht im Footer ohne Login „Vertrag widerrufen“ und bei Dauerverträgen „Verträge hier kündigen“ (widerruf-und-kuendigung-schaltflaeche, seit 19.06.2026) – vom Kunden prüfen lassen.",
   "Bewertungen von Google oder anderen Plattformen nur mit Echtheitshinweis direkt an den gezeigten Bewertungen (bewertungsprofil-mit-echtheitshinweis); bewertungen-verteilung nur für eigene, geprüfte Bewertungen.",
   "Pflichtangaben (Impressum, Datenschutzerklärung, Branchenpflichten aus Leitfaden 8a und den Rezept-regeln) als Seiten, Links oder markierte Platzhalter; keine Rechtstexte erfinden, alles vom Kunden prüfen lassen. Chatbots und KI-Funktionen direkt beim Start kennzeichnen (Art. 50 KI-VO), keine pauschalen Umweltaussagen ohne Nachweis.",
   "consent-banner-gestaltet nur, wenn beim Laden einwilligungspflichtige Dienste laufen. Laden alle Dritten erst per 2-Klick, genügt ein Einstellungs-Dialog im Footer („Datenschutz-Einstellungen“) zum Widerrufen.",
   "Starter- und Beispielseiten ohne echte Daten: Bewertungen, Preise, Allergene und Kennzahlen als markierte Platzhalter, nie erfundene Kundenstimmen als echt.",
   "Werbung mit Rate, Zins, „0 %“, Ratenzahlung, Leasing oder „später bezahlen“ braucht ab 20.11.2026 finanzierung-pflichtangaben: effektiver Jahreszins mindestens so groß wie die Rate, Warnhinweis „Achtung! Kreditaufnahme kostet Geld.“ direkt dabei (vom Kunden prüfen lassen).",
   "Verkauf von Waren an Verbraucher braucht seit 27.09.2026 den EU-Hinweis zur gesetzlichen Gewährleistung (eu-gewaehrleistungshinweis), mindestens als Footer-Link, sicherer an Produktseite und Checkout; nur die amtliche Vorlage der EU-Kommission."
  ],
  "herkunft": "Art-Director-Prüfung der 18 Rezepte, Runde 3 (Basis-Block, Signatur-Pflichtfeld, Schriftverteilung, 2-Klick-Muster). Runde 5 (02.11.2026): zugang-Muster, Firmendaten und Vorladen in die Grundausstattung, Regeln zu Kontakt, Verträgen, Bewertungen und Pflichtangaben (KI-Audit Befund 3, Lückenrecherche N1–N3, N6, K5)."
 },
 "id": "verein-nonprofit-wirkung",
 "name": "Verein & Non-Profit: Wirkung zeigen",
 "branche": "Verein / Non-Profit / Stiftung / Nachhaltigkeitsinitiative",
 "stimmung": [
  "engagiert",
  "glaubwürdig",
  "nahbar",
  "kraftvoll"
 ],
 "kurz": "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.",
 "referenzen": [
  {
   "seite": "charity: water",
   "url": "https://www.charitywater.org/",
   "art": "website",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Vite. @font-face 'Gabriel Sans' (12 Schnitte, Thin bis Black) für Headlines, 'Proxima Nova' für Text, 'Kazimir Text' (Serif), 'Founders Grotesk', 'Anonymous Pro'. Kurven cubic-bezier(.5,.01,.51,1) (6×, symmetrisch) und (.37,.01,0,.98) (4×); Dauern .15s (42×), .2s, 1.5s, 1s. Spenden-Button .button--cw-yellow: Höhe 48px, Hintergrund #ffca0a, transition background-color .15s linear. Farben warmes Grau #DFDFD7 / #C1C1BA / #9B9B94, Tinte #222520, Blau #003366, Gelb #FFCA0A. Sektionen: H1 'Bring clean and safe water to every person on the planet', 'Other Ways to Give', 'Because clean water changes everything', 'Know that your donation is making a difference', drei große Zahlen als eigene h1 (209,241 / 29 / 21,641,908), 'Ready to take action?'.",
   "herkunft": "beobachtet",
   "quelle": "https://www.charitywater.org/vite/assets/builder-styles-Brb_ClVc.css"
  },
  {
   "seite": "The Ocean Cleanup",
   "url": "https://theoceancleanup.com/",
   "art": "website",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): WordPress-Theme 'toc'. @font-face 'Proxima Nova' und 'Roboto Mono'. Kurve easeInOutCubic cubic-bezier(.645,.045,.355,1) (24×), Überschwinger (.68,-.55,.265,1.55) und (.34,1.56,.64,1) je 4× als Akzent; Dauern .2s (83×), .1s (32×), .3s, 1s (27×). Farben Navy #003755 (335×) / #01283C, Cyan #01CBE1 (219×), Hellgrau #F2F5F6 / #EAEAEA, Blaugrau #B3C3CB, Rot #D0001B. Sektionen: H1 'Join the largest cleanup in history', Kennzahlen als h3 (65M+ / 2-5% / 100+), 'We develop and scale solutions…', 'A planet-sized problem', Ziel '90% … by 2040', '30 cities program', 'Addressing ocean gyres', Newsletter 'Stay in the loop', 'Other ways to help'.",
   "herkunft": "beobachtet",
   "quelle": "https://theoceancleanup.com/app/themes/toc/assets/build/styles/base-6ecaa69b6f.css"
  },
  {
   "seite": "Viva con Agua de Sankt Pauli e.V.",
   "url": "https://www.vivaconagua.org/",
   "art": "website",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/CSS per curl abgerufen): Framer-Seite. Fonts per @font-face im HTML: 'Veneer Regular' (92 font-family-Verwendungen; kräftige Holzletter-Display-Schrift für Headlines), 'Inter' (66), 'Museo Sans' 500/700/900, 'Source Sans 3', 'Fragment Mono', 'Finlek'. Häufigste Größen 16 / 32 / 40 / 24 / 45px. Farben Navy #002E6D (104×) / #003D6B, Blau #008FC3 / #00A3CC, helle Blauflächen #DBEBF5 / #B8D8EA / #EDF5FA. Sektionen: H1 'All in for Water.', Kampagnen-Teaser ('ALL4WASH Viva con Agua in Uganda'), Zahlen als h1 (696 Mio. / 2006 / 6 Länder / 400+), Aktuelle Kampagnen, Unsere Vision, 'SPENDE JETZT FÜR SAUBERES TRINKWASSER' (Versal), Verschenke Wirkung, Spendenaktion starten, Werde selbst aktiv, Crews in deiner Stadt.",
   "herkunft": "beobachtet",
   "quelle": "https://www.vivaconagua.org/"
  }
 ],
 "schrift": {
  "paarung_basis": "plakat-condensed",
  "abweichung": "",
  "headline": "big-shoulders",
  "text": "archivo",
  "akzent": "",
  "groessen": "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": [
   "versal-kondensiert-fit-to-width",
   "tabellenziffern",
   "lesesatz-text-wrap"
  ],
  "alternative_eigenprojekt": "Headline tanker (ITF, schwere Display-Schrift nah an Veneer), Text satoshi – nicht für Templates."
 },
 "farbe": {
  "prinzip": "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).",
  "beispiel": [
   "#FFFFFF Grund",
   "#EDF5FA helle Fläche (Viva con Agua)",
   "#002E6D Marke, Headlines, dunkle Sektion (Viva con Agua; Ocean Cleanup #003755)",
   "#222520 Fließtext (charity: water)",
   "#DFDFD7 warme Grau-Fläche (charity: water)",
   "#FFCA0A Spenden-Button, Text #222520 (charity: water)"
  ]
 },
 "animationsstil": "token-kinetisch-inout",
 "animationsstil_ui": "token-toggle-asymmetrisch",
 "bewegung": {
  "easing": "cubic-bezier(0.83, 0, 0.17, 1) (token-kinetisch-inout, nur große Zustandswechsel); Buttons und Spendenformular über animationsstil_ui",
  "beobachtet": "easeInOutCubic cubic-bezier(0.645, 0.045, 0.355, 1) 24×, .2s 83× / 1s 27× (Ocean Cleanup); .15s 42× und cubic-bezier(.5,.01,.51,1) (charity: water)",
  "dauer_ms": "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.",
  "herkunft": "beobachtet (Ocean Cleanup easeInOutCubic 24×, .2s 83× / 1s 27×; charity: water .15s 42× + cubic-bezier(.5,.01,.51,1))"
 },
 "hero_beschreibung": "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.",
 "muster": {
  "seitenuebergang": [],
  "preloader": [],
  "navigation": [
   "sticky-shrink-header",
   "native-popover-dropdowns"
  ],
  "hero": [
   "typo-maske-medien"
  ],
  "hero_variante": [],
  "sektionen": [
   {
    "zweck": "Wirkung in Zahlen (3–4 Zahlen mit Quelle und Stand)",
    "muster": [
     "zahlen-fakten-section",
     "zahlen-odometer"
    ],
    "varianten": {
     "zahlen-fakten-section": "diagramm"
    }
   },
   {
    "zweck": "Aktuelle Projekte / Kampagnen",
    "muster": [
     "css-native-karussell",
     "editorial-magazin-layout"
    ],
    "varianten": {
     "css-native-karussell": "peek",
     "editorial-magazin-layout": "zeitung"
    }
   },
   {
    "zweck": "Spenden (einmalig/monatlich, Betragsvorschläge mit Wirkung, freies Feld)",
    "muster": [
     "spendenmodul-wirkung",
     "formular-fehlerzusammenfassung"
    ],
    "varianten": {
     "spendenmodul-wirkung": "formular",
     "formular-fehlerzusammenfassung": "liste"
    }
   },
   {
    "zweck": "So wirkt deine Spende (Mittelverwendung als Diagramm hinter dem Spendenmodul; ausführlich auf der Unterseite Transparenz bzw. Jahresbericht)",
    "muster": [
     "zahlen-fakten-section"
    ],
    "varianten": {
     "zahlen-fakten-section": "diagramm"
    }
   },
   {
    "zweck": "Mitmachen: Spenden, Spendenaktion, Ehrenamt, Gruppen vor Ort (Bento nur mit echtem Foto und Text je Weg, sonst gleichwertige Karten)",
    "muster": [
     "bento-grid-interaktiv"
    ]
   },
   {
    "zweck": "Geschichten aus den Projekten",
    "muster": [
     "editorial-magazin-layout",
     "testimonials-neu-gedacht"
    ],
    "varianten": {
     "editorial-magazin-layout": "magazin",
     "testimonials-neu-gedacht": "wand"
    }
   },
   {
    "zweck": "Termine & Aktionen vor Ort",
    "muster": [
     "programm-kalender"
    ],
    "varianten": {
     "programm-kalender": "programm"
    }
   },
   {
    "zweck": "Kontakt / Ansprechperson / Anfahrt (Geschäftsstelle, Vereinsheim oder Gelände: Adresse als Text, Karte per 2-Klick)",
    "muster": [
     "kontakt-anfrage-formular",
     "karte-zwei-klick"
    ],
    "varianten": {
     "karte-zwei-klick": "bild"
    }
   },
   {
    "zweck": "Partner / Förderer",
    "muster": [
     "logo-wand-social-proof"
    ],
    "varianten": {
     "logo-wand-social-proof": "raster"
    }
   },
   {
    "zweck": "Jahresbericht / FAQ / Spendenquittung",
    "muster": [
     "akkordeon-hoehe-auto"
    ],
    "varianten": {
     "akkordeon-hoehe-auto": "faq"
    }
   }
  ],
  "scroll": [
   "medien-expansion-scroll"
  ],
  "schrift_animation": [
   "zahlen-odometer",
   "highlight-marker-underline"
  ],
  "hover": [
   "bild-zoom-in-maske"
  ],
  "cursor": [],
  "mikro": [
   "checkbox-radio-animiert",
   "fortschrittsring",
   "konfetti-erfolg"
  ],
  "material": [],
  "galerie": [
   "css-native-karussell",
   "masonry-grid-lanes-galerie"
  ],
  "footer": [
   "footer-newsletter-mit-persoenlichkeit",
   "mega-footer-sitemap"
  ],
  "button": [
   "button-zustaende",
   "fuellung-vom-eintrittspunkt"
  ]
 },
 "signatur": [
  "typo-maske-medien"
 ],
 "optional": [
  "daten-scrollytelling",
  "css-diagramm-attr"
 ],
 "varianten_demo": {
  "daten-scrollytelling": "mittel",
  "fuellung-vom-eintrittspunkt": "basis",
  "bild-zoom-in-maske": "basis",
  "css-native-karussell": "peek",
  "footer-newsletter-mit-persoenlichkeit": "basis"
 },
 "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."
 ],
 "template_tauglich": true,
 "aufwand": "mittel",
 "leistung": "Vereine haben oft schwaches Hosting und mobile Zielgruppen: Hero-Video max. ~2 MB mit Poster und preload=none auf Mobil (oder nur Foto), Medien-Expansion per CSS Scroll-Driven Animations mit statischem Fallback. Spenden-Widgets externer Anbieter erst bei Interaktion laden. Display-Font als Subset (nur Versalien + Ziffern).",
 "offen": [
  "4. Referenz aus dem deutschen KMU-Segment fehlt (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
 ],
 "varianten": [
  {
   "name": "Sportverein (Mitgliedschaft statt Spende)",
   "sektionen": [
    "Hero: Foto aus dem Training oder Spiel, ein Satz zum Verein, „Probetraining“ und „Mitglied werden“ (kein Spenden-Button)",
    "Abteilungen / Sportarten mit Ansprechperson",
    "Trainingszeiten als Wochenplan (wochen-kursplan)",
    "Spielplan, Ergebnisse und Termine (programm-kalender)",
    "Beiträge (vergleichstabelle-sticky)",
    "Mitglied werden (mehrschritt-anfrage Variante leiste, formular-fehlerzusammenfassung Variante liste; Satzung, Beitragsordnung, SEPA-Mandat)",
    "Ansprechpersonen / Vorstand (team-ueber-mich-layout)",
    "Sponsoren (logo-wand-social-proof Variante raster)",
    "Sportstätten / Anfahrt (karte-zwei-klick)"
   ],
   "weglassen": [
    "Spenden als Hauptziel (höchstens Link zum Förderverein)",
    "So wirkt deine Spende",
    "konfetti-erfolg"
   ],
   "muster_zusatz": [
    "wochen-kursplan",
    "vergleichstabelle-sticky",
    "mehrschritt-anfrage",
    "team-ueber-mich-layout"
   ],
   "hinweis": "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“."
  }
 ],
 "stimmung_tags": [
  "laut",
  "warm"
 ],
 "raum": {
  "basis_px": 8,
  "skala_px": [
   4,
   8,
   12,
   16,
   24,
   32,
   48,
   64,
   96,
   144
  ],
  "sektion": "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."
 },
 "raster": {
  "spalten": 12,
  "rand": "clamp(16px, 4vw, 48px)",
  "spalt": "clamp(16px, 2vw, 32px)",
  "max_breite": "1320px",
  "hinweis": "Hero mit randlosem Foto, Mission unten links über 8 Spalten. Mitmach-Wege als 4er-Raster, Transparenz 6/6."
 },
 "form": {
  "radius_klein": "4px",
  "radius_gross": "4px",
  "pille": false,
  "linie": "1px #DFDFD7",
  "schatten": "keiner",
  "hinweis": "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": {
  "anrede": "du",
  "saetze": "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.",
  "beispiele": [
   "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_aufbau": {
  "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.",
  "h1": "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."
 },
 "url": "https://cecodesign.de/lab/fundus/rezepte/verein-nonprofit-wirkung/",
 "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/verein-nonprofit-wirkung/tokens.css",
 "bauplan": "https://cecodesign.de/lab/fundus/rezepte/verein-nonprofit-wirkung/bauplan.txt",
 "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/verein-nonprofit-wirkung/rezept.json",
 "nicht_verwenden_ids": [
  {
   "ids": [
    "mesh-gradient-shader",
    "holo-irisierende-folie"
   ],
   "grund": "Hochglanz-Effekte widersprechen dem sparsamen Umgang mit Spendengeld"
  },
  {
   "ids": [
    "interaktives-3d-hero",
    "partikel-punktwolke"
   ],
   "grund": "teuer, langsam auf älteren Handys, kein Bezug zur Wirkung"
  },
  {
   "ids": [
    "fullpage-snap-slides",
    "pinned-scrub-scrollytelling"
   ],
   "grund": "als Startseite – zwingt Besucher durch eine Inszenierung, bevor sie spenden können"
  },
  {
   "ids": [],
   "grund": "jeder Preloader – Spendenwillige brechen ab"
  },
  {
   "ids": [
    "mehrschicht-parallax"
   ],
   "grund": "wirkt wie Kampagnen-Microsite, nicht wie seriöse Organisation"
  },
  {
   "ids": [
    "cursor-follower-lerp",
    "blend-difference-cursor"
   ],
   "grund": "Custom-Cursor (cursor-follower-lerp, blend-difference-cursor) – keine Agentur-Gesten"
  }
 ],
 "alle_muster": [
  {
   "id": "typo-maske-medien",
   "rolle": "Signatur",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/typo-maske-medien/meta.json"
  },
  {
   "id": "zahlen-fakten-section",
   "rolle": "Sektion: Wirkung in Zahlen (3–4 Zahlen mit Quelle und Stand)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/meta.json",
   "variante": "diagramm",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=diagramm"
  },
  {
   "id": "zahlen-odometer",
   "rolle": "Sektion: Wirkung in Zahlen (3–4 Zahlen mit Quelle und Stand)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/zahlen-odometer/meta.json"
  },
  {
   "id": "css-native-karussell",
   "rolle": "Sektion: Aktuelle Projekte / Kampagnen",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
   "variante": "peek",
   "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek"
  },
  {
   "id": "editorial-magazin-layout",
   "rolle": "Sektion: Aktuelle Projekte / Kampagnen",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json",
   "varianten_je_rolle": [
    {
     "rolle": "Sektion: Aktuelle Projekte / Kampagnen",
     "variante": "zeitung",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung"
    },
    {
     "rolle": "Sektion: Geschichten aus den Projekten",
     "variante": "magazin",
     "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin"
    }
   ]
  },
  {
   "id": "spendenmodul-wirkung",
   "rolle": "Sektion: Spenden (einmalig/monatlich, Betragsvorschläge mit Wirkung, freies Feld)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/meta.json",
   "variante": "formular",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/demo?v=formular"
  },
  {
   "id": "formular-fehlerzusammenfassung",
   "rolle": "Sektion: Spenden (einmalig/monatlich, Betragsvorschläge mit Wirkung, freies Feld)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json",
   "variante": "liste",
   "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste"
  },
  {
   "id": "bento-grid-interaktiv",
   "rolle": "Sektion: Mitmachen: Spenden, Spendenaktion, Ehrenamt, Gruppen vor Ort (Bento nur mit echtem Foto und Text je Weg, sonst gleichwertige Karten)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/meta.json"
  },
  {
   "id": "testimonials-neu-gedacht",
   "rolle": "Sektion: Geschichten aus den Projekten",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
   "variante": "wand",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=wand"
  },
  {
   "id": "programm-kalender",
   "rolle": "Sektion: Termine & Aktionen vor Ort",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/meta.json",
   "variante": "programm",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm"
  },
  {
   "id": "kontakt-anfrage-formular",
   "rolle": "Sektion: Kontakt / Ansprechperson / Anfahrt (Geschäftsstelle, Vereinsheim oder Gelände: Adresse als Text, Karte per 2-Klick)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
  },
  {
   "id": "karte-zwei-klick",
   "rolle": "Sektion: Kontakt / Ansprechperson / Anfahrt (Geschäftsstelle, Vereinsheim oder Gelände: Adresse als Text, Karte per 2-Klick)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/meta.json",
   "variante": "bild",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild"
  },
  {
   "id": "logo-wand-social-proof",
   "rolle": "Sektion: Partner / Förderer",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json",
   "variante": "raster",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=raster"
  },
  {
   "id": "akkordeon-hoehe-auto",
   "rolle": "Sektion: Jahresbericht / FAQ / Spendenquittung",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
   "variante": "faq",
   "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq"
  },
  {
   "id": "sticky-shrink-header",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/meta.json"
  },
  {
   "id": "native-popover-dropdowns",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json"
  },
  {
   "id": "medien-expansion-scroll",
   "rolle": "Scroll",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/meta.json"
  },
  {
   "id": "highlight-marker-underline",
   "rolle": "Schrift",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/meta.json"
  },
  {
   "id": "bild-zoom-in-maske",
   "rolle": "Hover",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/meta.json",
   "variante": "basis",
   "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=basis"
  },
  {
   "id": "checkbox-radio-animiert",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json"
  },
  {
   "id": "fortschrittsring",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/fortschrittsring/meta.json"
  },
  {
   "id": "konfetti-erfolg",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/konfetti-erfolg/meta.json"
  },
  {
   "id": "masonry-grid-lanes-galerie",
   "rolle": "Galerie",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/meta.json"
  },
  {
   "id": "footer-newsletter-mit-persoenlichkeit",
   "rolle": "Footer",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json",
   "variante": "basis",
   "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis"
  },
  {
   "id": "mega-footer-sitemap",
   "rolle": "Footer",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json"
  },
  {
   "id": "button-zustaende",
   "rolle": "Buttons",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/meta.json"
  },
  {
   "id": "fuellung-vom-eintrittspunkt",
   "rolle": "Buttons",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/meta.json",
   "variante": "basis",
   "demo_url": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis"
  },
  {
   "id": "token-kinetisch-inout",
   "rolle": "Animationsstil",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/meta.json"
  },
  {
   "id": "token-toggle-asymmetrisch",
   "rolle": "Animationsstil für UI",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/meta.json"
  },
  {
   "id": "versal-kondensiert-fit-to-width",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/meta.json"
  },
  {
   "id": "tabellenziffern",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
  },
  {
   "id": "lesesatz-text-wrap",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json"
  },
  {
   "id": "daten-scrollytelling",
   "rolle": "Optional",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/meta.json",
   "variante": "mittel",
   "demo_url": "https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/demo?v=mittel"
  },
  {
   "id": "css-diagramm-attr",
   "rolle": "Optional",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/meta.json"
  }
 ]
}