55
Kommunen
Styleguide · Phase C
Prävention, die wirkt.
Visuelle Abnahme der Phase-C-Primitives. Basis ist design/theme-preview.html – jede Komponente ist aus dem Prototyp portiert.
72
Schulen
1:12,88
Nutzen-Kosten
18
Mitarbeitende
01 · Shared
Atome: Bracket, Dot, Eyebrow, SectionHead
Signatur-Atome, die sich in Hero, Sections und Navigation wiederholen.
BracketMark
TerminalDot
Eyebrow · brackets Scaffold · Phase A
Eyebrow · accentLine Theme-Vorschau · Iteration 02
02 · Dot-Grid
Akzent am Hero-Rand
Vier Spalten · drei Reihen · 3-px-Cyan-Dots. Positioniert absolut im Eltern-Container.
Der Dot-Grid wird hier demo-positioniert; im Hero läuft er rechts außen mit.
04 · Stimme & Beleg
Menschlich im Detail –
wissenschaftlich im Beleg.
Links Porträt mit Corner-Marks und Zitat. Rechts Fließtext mit Sup-Refs und einer Fußnoten-Liste.
Evidenzbasiert heißt für uns: wir wissen, was wir nicht wissen – und schreiben es öffentlich dazu.
Auszug · Magazin-Beitrag
Kontrollierte Studien zu schulbasierten Lebenskompetenzprogrammen belegen im Mittel eine Reduktion jugendlicher Substanzprobleme um 13 – 18 %¹ gegenüber Kontrollgruppen – abhängig von Implementierungstreue und Setting-Dauer². Die europäische Fachaufsicht hat diese Befunde im EUPC-Quality-Framework³ in übertragbare Qualitätsstandards übersetzt.
- 01 Beelmann, A., & Lutterbach, M. (2023). Prävention in der frühen Adoleszenz: Eine Meta-Analyse schulbasierter Programme. Journal of Prevention Research, 44(3), 123–145. doi.org/10.1007/s…
- 02 Durlak, J. A., & DuPre, E. P. (2008). Implementation matters: A review of research on the influence of implementation on program outcomes. American Journal of Community Psychology, 41, 327–350.
- 03 EUDA (2024). European Prevention Curriculum: Quality Standards for Drug Prevention. European Union Drugs Agency, Lissabon.
03 · Navigation
Mega-Menüs · Hover zum Öffnen
Pure-CSS-Hover öffnet die Panels, Inline-Script tauscht die Kategorien.
Hover oder Fokus auf „Angebote" / „Über uns" öffnet das Mega-Panel. In den Panel-Kategorien schaltet mouseenter/focus/click zwischen den Item-Gruppen um.
05 · Marketing (Phase D)
Marketing-Primitives für die Startseite
Light-first Komposition nach claude.com-Muster, in FINDER-Papier-Warm + Cyan. Die kanonische Showcase-Seite ist / (DE) bzw. /en (EN).
MarketingHero · 60/40-Grid mit H1 in --text-display,
Cyan-italic-Accent via <em>, optionalem GSAP-Island für das Bracket-Visual.
Tier-Rhythmus · .bg-tier-1 (Papier-Warm),
.bg-tier-2 (leicht getönt), .bg-tier-3 (Cyan-Tint, nur für die Schluss-CTA).
Section-Spacing über .section-y / .section-y-compact.
FeatureGrid · Container-Query-basiertes Grid mit cols={2|3|4},
optionalem dimOthers-Hover-Pattern. Wrappt bestehende ProgramCard, ProjectCard, ArticleCard.
SectionHeader
Angebote
Programme, die im Feld funktionieren.
Beispiel-Komposition aus Eyebrow, H2 mit Cyan-italic-Accent und Lede. Rechts ein optionaler Action-Slot.
PillarGrid (3 Säulen)
LogoStrip · Stats-Variante
FINDER in Zahlen
- seit 2013 gemeinnützig tätig
- 9 aktive Programme
- 6 laufende Projekte
- BMG · BMJ · EU · PKV Förderpartner
CTASection · Brand-Variant
Kontakt
Sprechen Sie uns an.
Tier-3 Cyan-Tint als Schlussakzent. Einziger Farbton-Bruch der Homepage.
07 · Rework-Kit
claude.com-Architektur, light-first FINDER
Sieben Primitives. Jede Seite wird aus diesen gebaut. Das ist der verbindliche Contract für die Rework-Phase.
PageHero · tone="hero" (Startseite)
FINDER e. V. – Evidenzbasierte Prävention
Prävention, die belegt wirkt.
Gemeinnütziger Verein seit 2013. Programme, Projekte und Fortbildungen für Schule, Kommune und Jugendhilfe – mit Förderung von BMG, BMJ, EU-Kommission, PKV-Verband und Stiftungen.
PageHero · tone="page" (Inner-Page mit Meta)
Angebote
Neun Programme. Drei Säulen.
Evidenzbasierte Programme für Schule, Kommune und Jugendhilfe – eigene, adaptierte und verbreitete. § 20a SGB V, Grüne Liste, EUDA-Standards.
ToastBanner · dismissible
ChipCluster · variant="tabs" + DemoPanel (Hauptmuster)
Die Haupt-Architektur aus claude.com: Chips schalten ein inset rounded Panel darunter um. Genau dieses Muster ersetzt das flache Programme-/Projekte-/Magazin-Grid auf der Startseite und den Listing-Entries.
- Weitblick · PKV-finanziert · 72 Schulen bundesweit
- Schools That Care · CTC adaptiert · Pilot 2026
- Unplugged · EU-DAP · Klasse 6–8
- REBOUND · Lebenskompetenz · Klasse 9+
- Communities That Care · 55 Kommunen · Nutzen-Kosten 1 : 12,88
- PULSAR · Jugendhilfe · mit mudra Nürnberg
- EUPC · Fachkräfte-Fortbildung · EUDA-zertifiziert
- PROXI · Extremismus-Prävention · Beelmann-Modell
- Einfach Wirksam · niedrigschwellig · 1 Tag inhouse
DemoPanel · tone="dark" mit Chrome (für Code/Tool-Demos)
{
"programme": "EUPC",
"duration_days": 3,
"target_group": "prevention_workforce",
"certification": "EUDA",
"modules": [
"Implementation Science",
"Grüne-Liste-Systematik",
"Setting-Analyse"
]
} FeatureRow · side="left" (Text links)
Unser Ansatz
Evidenz ist kein Label – sondern eine Praxis.
Wir arbeiten mit kontrollierten Studien, europäischen Qualitätsstandards und langjähriger Praxis-Erfahrung. Transparenz über Wirkung, Grenzen und Kosten ist Teil jeder Maßnahme.
FeatureRow · side="right" (Text rechts, alterniert)
Drittmittel-Projekte
Substanzielle Arbeit braucht verlässliche Förderer.
BMG, BMJ, Europäische Kommission, PKV-Verband, Stiftungen. Laufende Evaluations- und Entwicklungsprojekte mit Universitäten und Fachverbänden.
LinkGrid · 5 Verweise (textlastig, keine Icons)
ChipCluster · variant="links" (reine Filter-Toolbar)
CloserCTA · variant="brand" (einmal pro Seite, am Ende)
Kontakt
Sprechen Sie uns an.
Für Anfragen zu Programmen, Projekten und Kooperationen – ohne Umwege, ohne Marketing-Sprech.