Aus einer Vereinsseite wurde ein Hebel.

Die alte Site war eine klassische WordPress-Page, gewachsen über Jahre mit Plugin-Halden. Belegungsplan stand auf einem PDF, Aushang existierte nur an der Stalltür, Sponsoren waren ein Text-Marquee ohne Logos, Insta-Pflege parallel zur Site doppelt aufwändig. Beim 100-jährigen Jubiläum 2024 war klar: die Site soll dem Verein gerecht werden, nicht ihn ausbremsen.

Re-Build als statisch generierte Astro-Site mit eigenständigem Vereins-Brand (Petrol-Olive aus dem Logo, Sandgelb als Action-Farbe, Geist Variable). Acht Kernfeatures unter einem Dach:

• Belegungsplan als Wochen-Matrix mit 4 Ressourcen × 7 Tagen, Termin-Detail-Drawer von rechts, statischer iCal-Feed unter /kalender.ics für Outlook/Google-Calendar-Abo.
• Editorial-Stories als Astro Content Collection mit Markdown-Pflege, Schema.org BlogPosting, automatischem Sponsor-Mention-Block unter jeder Story (Logos der erwähnten Förderer ohne Penetranz).
• Sponsor-Pipeline mit 3 Tiers (Premium / Förderer / Partner), 27 Logos, davon 8 PDFs zur Build-Zeit konvertiert via pdfjs-dist + napi-rs/canvas, einheitlich auf 240px Höhe normalisiert via Sharp.
• Insta-Auto-Sync via Graph-API alle 4 Stunden mit Long-lived-Token-Refresh, Bilder lokal gespiegelt nach /public/instagram/, kein Live-Embed (DSGVO-sauber, kein Tracking beim Aufruf).
• Aushang-Modal-Drawer direkt unter dem Hero, HTML5 native <dialog> mit Slide-In von rechts, ESC + Click-Outside-Close, ohne JS-Library.
• Brand-Asset-Self-Service: Rechtsklick auf das Logo öffnet ein Download-Menü. Kooperationspartner, Sponsoren, Presse oder Medienportale können das Logo direkt aus der Site holen, als SVG kopieren, einzelne Varianten als Datei laden oder „Alle Brand-Assets" als Bundle. Kein Mail-Pingpong mehr mit dem Vorstand.
• Schema.org-Komplettabdeckung mit SportsClub + LocalBusiness, FAQPage, Service×4 für Sport-Bereiche, SportsActivityLocation, OfferCatalog (Sponsoring), BlogPosting pro Story, ContactPage. Plus llms.txt für GEO.
• CI/CD via GitHub Actions: zwei Workflows (Insta-Sync 4-h-Cron + SFTP-Deploy bei Push), workflow_run-Trigger nach Insta-Sync, IndexNow-Ping nach Deploy.

Das Vereinslogo existierte als 4-farbiges SVG aus dem WordPress-Bestand: Reiter-Wappen mit Schriftzug „Reiterverein St. Georg Salzkotten und Umgebung e.V." in einer ringförmigen Komposition. Statt es zu ersetzen, haben wir es zur Quelle der Brand-Tokens gemacht.

• Token-Extraktion direkt aus dem Logo: Petrol-Olive #495D5C (Reiter), Sandgelb #C9A050 (3. Akzent für Action/Achievement, ergänzt fürs CSS), Surface-Grau #DDDCDC (Ringfläche), Ink #1D1D1B (Schriftzug). Vier Tokens, sauber abgeleitet, keine Beliebigkeiten.
• Brand-Regel als CSS-Konvention: auf weißem Hintergrund ist Petrol der Akzent (gut lesbar, ruhig); auf grauem oder dunklem Hintergrund springt Sandgelb ein (warm, hervorgehoben). Eine Zeile Doku, die jede Komponente konsistent hält.
• WCAG-AA per Token-Tuning: Sandgelb-Button mit weißer Schrift schaffte nur 2,4:1 (Fail). Schrift auf dunkles Ink umgestellt → 6,9:1. Sub-Token highlight-deep und ink-muted nachgedunkelt, damit auf jedem Untergrund Kontrast 4,5+ rauskommt. Im Lighthouse-Audit blieb am Ende ein einziger Punkt offen, alles andere AA.
• Vier Logo-Varianten aus dem einen Master-SVG generiert: logo.svg (Standard), logo-footer.svg (Schriftzug auf Weiß invertiert für dunklen Footer), wappen.svg (nur Wappen), favicon.svg (Pferd-Detail isoliert für 32×32). Plus PNG-Set automatisch generiert (32/48/96/192/512 + apple-touch + .ico) als Build-Hook.
• Brand-Asset-Self-Service direkt am Logo: Rechtsklick öffnet ein Download-Menü. Kooperationspartner, Sponsoren und Medienportale ziehen sich das Logo selbst. SVG kopieren, einzelne Varianten herunterladen, „Alle Brand-Assets" als Bundle. Spart das klassische Hin und Her per Mail beim Sponsor-Onboarding.

Section-Background     →  Akzentfarbe        Beispiel
─────────────────         ───────────────     ─────────────────
weiß (#FFFFFF)            Petrol  #495D5C    Hauptseiten, Hero
grau (#DDDCDC)            Sandgelb #C9A050    Cards, Hervorhebungen
dunkel (Footer/Hero-Bg)   Sandgelb #C9A050    Akzent-Highlight

27 Sponsoren, drei Tiers, vier Sichtbarkeitskanäle. Statt einer flachen Sponsor-Wand am Seitenende (klassisch, ignoriert) wird jeder Sponsor mehrfach im Vereinskontext sichtbar, und Sponsoren-Onboarding läuft über eine simple TypeScript-Datei.

• Drei Tiers mit klaren Rollen: Premium (3, eigene Sektion mit großen Logos), Förderer (13, mittlere Wand), Partner (11, kompakte Wand). Tier wird als Property im Sponsor-Eintrag gepflegt, der Rest leitet sich automatisch ab.
• Vier Sichtbarkeitskanäle pro Sponsor: Marquee auf der Startseite (Premium-First), eigene 3-Tier-Wand auf /sponsoren, kontextuelle Mention unter passenden Stories („Mit Unterstützung von …"), und Indirekt-Verlinkung im Footer. Ein Sponsor wird beim normalen Site-Besuch 3-4× sichtbar.
• Story-Mention statt Penetranz: jede Story trägt im Frontmatter eine mentionedSponsors[]-Liste. Beispiel: „Neuer Boden in den Hallen" mentions RWM (Plane), Behn Projekte (Bau), Hüser, Krinke. Eine SponsorMentions-Component zeigt diese Logos als dezente Reihe unter der Story. Sponsor wird im Erfolgs-Kontext sichtbar, nicht als Werbe-Block.
• Logo-Pipeline mit zwei Phasen: für PNG/JPG/TIF läuft Sharp (resize auf 240px Höhe, Padding auf weiß, WebP-Export, Quality 88). Für PDF-Logos (8 von 27, klassisch von Druckereien) erst pdfjs-dist + @napi-rs/canvas → PNG (300 DPI), dann Sharp-Pass. Pure JavaScript, läuft auf Windows ohne ImageMagick/Ghostscript.
• Onboarding in 60 Sekunden: neuer Sponsor → Logo (PNG/JPG/PDF) in Source-Ordner ablegen, Eintrag mit Slug + Tier + Filename in scripts/process-sponsors.mjs, npm run sponsors, commit. Keine manuelle Bildbearbeitung, kein Photoshop, alles reproduzierbar.
• Schema.org OfferCatalog für die Sponsoring-Pakete (Partner / Förderer / Premium): drei Offer-Einträge mit priceSpecification: "auf Anfrage", machen die Konditionen für LLMs & Suchmaschinen strukturiert auffindbar, ohne konkrete Preisvorgabe (entscheidet der Vorstand pro Anfrage).
• Placeholder-Modus für fehlende Logos: wenn ein Sponsor zugesagt hat aber das Logo noch nicht da ist, rendert die Wand einen Schriftzug-Block (Display-Font) im Brand-Style, keine kaputten Bilder, kein leerer Slot. Beim nächsten Logo-Lieferung einfach Datei + ein Property-Wechsel im Script.

TIER          MARQUEE  /SPONSOREN  STORY-MENTIONS  FOOTER
─────         ───────  ──────────  ──────────────  ──────
Premium       2-spaltig groß  ✓ eigene Wand   bei passend     verlinkt
Förderer      4-spaltig       ✓ eigene Wand   bei passend     verlinkt
Partner       5-spaltig klein ✓ eigene Wand   bei passend     verlinkt

Aus „Vereinsseite" wurde „Sponsoring-Plattform".

Während des Projekts ist klargeworden: das wirtschaftliche Problem des Vereins ist nicht die Website-Optik, sondern die Sponsoringgewinnung. Sponsoren kommen, weil sie Logos im Verein hängen wollen, und gehen, weil sie nicht messen können, was sie dafür bekommen. Daraus ist eine drei-stufige Plattform entstanden:

Setup-Aufwand drei Tage. Wartung null Minuten pro Woche, weil alles aus den vorhandenen Datenquellen (Insta-Sync, Story-Collection, Sponsor-Liste) automatisch zusammenfließt. Wert für den Sponsor pro Saison: vielfaches eines „Logo am Hindernis"-Sponsorings.

QUELLE                  BUILD / SITE              EXTERN
(Vereins-Pflege)        (Astro · 1&1 SFTP)       (Subscriber)
──────────────          ───────────────────       ──────────────

Insta Graph     ───►    Sync-Job (4h cron)
(Vorstand postet)        │
                         └──► Posts-Cache (12)
                                ▼
Markdown        ───►    Content Collection
(Stories)                 │
                          └──► /aktuelles/stories/[slug]
                                ▼
TS-Datei        ───►    Belegungs-Matrix
(Termine)                 │
                          ├──► /belegungsplan (UI)
                          └──► /kalender.ics    ───►  Outlook/Google
                                                       (Cal-Abo)
                                ▼
Logo-Files      ───►    Sharp + pdfjs
(8 PDFs +                 (Tier-Mapping)
 19 PNGs/JPGs)            │
                          └──► /sponsoren-web/*.webp
                                ▼
                              Static Build
                                ▼
                              SFTP Deploy
                                ▼
                              IndexNow Ping       ───►  Bing/Yandex
        

• 22 Pages, Build < 6 Sekunden, ~100 Bilder als WebP optimiert, LCP-Preload für Hero
• Pitch-Page mit acht Stationen, Sticky-Sub-Nav, KI-Hebel-Argumentation und Kontinuitäts-Wording, das Mehrjahresverträge zur logischen Folge macht
• Eigene Profil-Seite pro Premium-Sponsor mit Insta- und Story-Auto-Match. Sponsor bekommt URL für eigene Kampagnen, Verein muss nichts pflegen
• Insta-Posts und Story-Mentions aktualisieren Sponsor-Profile automatisch, alle 4 Stunden über CI/CD
• 27 Sponsor-Logos in 3 Tiers, davon 8 PDFs zur Build-Zeit konvertiert via pure JS (pdfjs-dist + napi-rs/canvas), kein ImageMagick/Ghostscript nötig
• KI-Discoverability-Layer über strukturierte Daten und per-Sponsor-llms.txt, moderne KI-Suchen finden Profile als Quelle
• DSGVO-sauber: keine Cookies, keine Tracking-Pixel, kein Consent-Banner. Insta-Embed durch lokale Spiegelung umgangen, Schema.org statt Live-Embed