ES Eventsanitäter — Asset-Checkliste

Ein fokussiertes, klar priorisiertes Briefing für die Fotografin / den Verantwortlichen für die Asset-Beschaffung. Zuerst alles aus Abschnitt 2 (Pflicht-Assets) abdecken; die Abschnitte 3—​5 heben das Ergebnis auf das nächste Level.

0. Markenrichtung (vor dem Shooting lesen)

Die Website positioniert ES als die hochwertige, ruhige, belegbasierte Wahl — nicht als die günstige Option und auch nicht als die mit dem Heldenpathos. Die Bildsprache soll vermitteln:

  • Kompetenz statt Drama — Sanitäter, die Material aufbauen, briefen, dokumentieren; keine Bilder von Menschen, die mit einer Trage rennen.

  • Vor- und Zwischenmomente — Vorbereitung, Planung, Materialcheck. Weniger „Action-Shot", mehr „Profis bei der Arbeit".

  • Zurückhaltung — klare Kompositionen, viel Negativraum, keine unruhigen Hintergründe.

  • Authentisch statt gestellt — echtes Team, echte Fahrzeuge, echte Veranstaltungsorte (mit Genehmigung). Keine Stockfotografie.

Zu vermeiden:

  • Blutende Patienten, leidende Gesichter, Krankenhausklischees.

  • Identifizierbare Patienten oder Besucher (DSGVO — schriftliche Einwilligung oder nicht erkennbarer Bildausschnitt).

  • „In-die-Kamera-lächeln"-Teamfoto-Energie. Seitenansicht, mitten in der Tätigkeit, Blick auf das Material — das wirkt stärker.

  • Sichtbares Branding von Wettbewerbern im Hintergrund.

  • Starke Filter; die Farbpalette der Website setzt eine neutrale, sauber belichtete Fotografie voraus.

1. Technische Vorgaben (gelten für alles)

Eigenschaft Vorgabe

Quellformat

RAW-Aufnahme, Lieferung als TIFF in voller Auflösung oder hochauflösendes JPG

Web-Export — Hero

2400×1500 (16:10) und 1920×1080 (16:9), AVIF + WebP + JPG als Fallback

Web-Export — Portrait

1200×1600 (3:4), AVIF + WebP + JPG als Fallback

Web-Export — Card

1600×1000 (16:10), AVIF + WebP + JPG als Fallback

Dateigrößen-Zielwerte

Hero ≤200 KB AVIF / ≤350 KB WebP; Cards ≤120 KB / ≤200 KB

Farbprofil

sRGB, eingebettet

Dateinamen

exakt wie unten aufgeführt; Kleinbuchstaben, mit Bindestrichen, keine Leerzeichen

Die Website ist DSGVO-streng ausgelegt (kein Google Fonts CDN, keine Drittanbieter-Tracker). Fotos werden selbst gehostet aus /public/img/... — es gibt also kein CDN als Puffer, deshalb zählt jedes Kilobyte. Bitte AVIF/WebP/JPG-Tripel erzeugen, damit der Browser das jeweils kleinste Format wählt, das er darstellen kann.

2. Pflicht-Assets (ohne diese rendert die Seite kaputte Platzhalter)

Diese Pfade werden heute schon referenziert und zeigen graue Kästen, bis die Bilder geliefert sind.

2.1 Team-Porträts — 3 Fotos, 3:4 hochkant

Gleiches Licht, gleicher neutraler Hintergrund, gleicher Bildausschnitt (Kopf bis Brustmitte). Person blickt leicht an der Kamera vorbei, ruhiger Ausdruck. Weiße Kittel / klinischer Look vermeiden — gebrandetes Polo oder Half-Zip funktioniert besser.

  • public/img/team/christian-schmitz.jpg — Christian Schmitz (Gründer)

  • public/img/team/anna-mueller.jpg — Anna Müller

  • public/img/team/markus-weber.jpg — Markus Weber

2.2 Hero-Bilder Leistungsbereiche — 4 Fotos, 16:10 quer

Ein Hero pro Leistungsbereich. Den Moment wählen, der den Charakter des Bereichs zeigt — nicht den größten Moment.

  • public/img/leistungen/festivals/hero.jpg — Open-Air-Festivalgelände bei Dämmerung / Morgenrot, mit Sanitäterstation im Mittelbereich des Bildes. Kein Bild voller Menschenmenge.

  • public/img/leistungen/sport/hero.jpg — Crew am Spielfeld- oder Streckenrand mit einsatzbereiter Ausrüstung. Trailrun, Marathon oder Stadionevent.

  • public/img/leistungen/unternehmen/hero.jpg — Firmenlocation (Konferenzhalle, Messefläche) mit dezent positioniertem Sanitäter / Station. Anzüge im Hintergrund sind okay.

  • public/img/leistungen/clubs/hero.jpg — Indoor-Location, warmes Low-Light, ein einzelner Sanitäter sichtbar. Tendenz zu stimmungsvoll-kontrolliert, nicht Partyshot.

2.3 Artikel-Hero-Bilder — 2 Fotos, 16:9 quer

Diese dürfen redaktioneller wirken, gern auch etwas abstrakter.

  • public/img/wissen/sanitaetsdienst-pflicht/hero.jpg — „Wann ist ein Sanitätsdienst Pflicht?" — Unterlagen, Vorschriften, Planungsmaterial. Ein Klemmbrett mit Geländeplan oder ein Gesetzbuch auf einem Schreibtisch neben einem Funkgerät. Dokumentarischer Ton.

  • public/img/wissen/sicherheitskonzept/hero.jpg — „Grundlagen Sicherheitskonzept" — Flatlay eines Planungstisches: Geländeplan, Marker, ID-Lanyard, Funkgerät. Aufsicht oder 3/4-Perspektive.

3. Stark empfohlen (wir haben Seitenlayouts gebaut, die diese Assets voraussetzen)

3.1 Equipment-Fotografie — 8—​10 Fotos, 16:10 quer

/leistungen/equipment zeigt vier Fahrzeug-Cards und zwei Stations-Cards. Aktuell sind dort keine Bildpfade hinterlegt; die Seite rendert nur Text. Mit Fotografie wird daraus die Equipment-Vitrine, die die Spec vorsieht.

  • 4× Fahrzeugfotos: KTW Mercedes Sprinter, KTW VW Crafter, Einsatzleitwagen, First-Response VW T6. 3/4-Frontansicht, ruhiger Hintergrund (kühles graues Beton- oder Asphalt-Setting), Morgenlicht.

  • 2× Stationsfotos: 6×3 m mobile Station aufgebaut; 3×3 m Zelt aufgebaut. Jeweils die Seite mit Kreuz / Beschilderung zeigen.

  • 2—​4× Detailaufnahmen: geöffnetes Fahrzeugheck mit Material, Ausrüstung im Flatlay, Stations-Innenraum. Die füllen entweder diese Seite oder dienen später als Grundlage für einen „Equipment-Streifen" auf der Startseite.

Diese Bilder dann in content/equipment/equipment.md als image:-Feld an den jeweiligen Fahrzeug- / Stationseintrag hängen, sobald sie geshootet sind.

3.2 Startseiten-Hero — 1 Foto, ~21:9 ultrabreit

Der Hero der Startseite rendert aktuell den tiefen Navy-Verlauf mit KPI-Stats. Die Spec sieht ein Hero-Bild vor. Ein einziges ultrabreites Foto ganz oben würde den ersten Eindruck deutlich aufwerten.

  • public/img/home/hero.jpg — Weite Umgebungsaufnahme: Silhouette einer aufgebauten Station bei Dämmerung mit Veranstaltungslichtern im Hintergrund, oder ein als Sanitäter beschriftetes Fahrzeug auf einem Festivalgelände zur goldenen Stunde. Starke Horizontlinie, sodass der tiefe Navy-Verlauf darunter sitzen / verschmelzen kann.

Komposition-Tipp: das linke Drittel negativ lassen, damit Headline und KPI-Stats darüber lesbar sind. Bitte zusätzlich eine etwas dunklere Version für Desktop sowie einen engeren Crop für Mobile (~16:10) liefern.

3.3 Logo + Favicon — Vektor-Quelldatei + Raster-Exporte

Die Website hat aktuell kein Logo-Asset; in der Navigation steht <span>ES <span>Eventsanitäter</span></span> als Schrift. Als Fallback akzeptabel, schwächt aber die Markenpräsenz.

Benötigt:

  • public/img/brand/logo.svg — Primärmarke, einfarbige Version (Deep-Navy) UND Variante in Signal-Rot.

  • public/img/brand/logo-wordmark.svg — horizontale Wortmarke „ES Eventsanitäter".

  • public/favicon.ico (Multi-Res 16/32/48), public/icon-192.png, public/icon-512.png, public/apple-touch-icon.png (180×180).

  • public/img/brand/og-default.jpg — OG-Bild 1200×630 mit Logo + Claim für Seiten, die kein eigenes OG-Bild setzen.

4. Schön zu haben (nächste Iteration)

Diese Punkte blockieren den Launch nicht, heben aber die Qualität, wenn ohnehin ein Shoot-Tag gebucht ist:

  • Hero-Bilder pro Artikel für künftige Artikel (jede neue content/wissen/*.md sollte mit einem solchen Bild ausgeliefert werden).

  • Hero-Streifen für die Prozessseite für jeden der 5 Schritte auf /so-arbeiten-wir — könnte die Sidebar von einem Inhaltsverzeichnis in eine visuelle Sequenz verwandeln.

  • Filter-Chips auf der Team-Seite — sobald ≥6 Porträts vorliegen, wird ein Filter nach Qualifikation sinnvoll.

  • CTA-Bildsprache pro Vertikale — aktuell ist jeder CTA ein dunkler Block; ein einzelnes, kontextuelles Foto rechts hebt jeden CTA hörbar an.

5. Bezugsquellen, wenn das Budget knapp ist

Ehrliche Reihenfolge:

  1. Lokale Fotografin / lokaler Fotograf für 1—​2 Shoot-Tage auf einer Veranstaltung, die ihr ohnehin betreut. €1,5—​3k. Beste Rendite für eine authentische Website; alles aus Abschnitt 2 + 3 in einem Aufwasch. Empfehlung: jemand aus Aachen / Köln; lokales NRW-Fotografen-Netzwerk oder regionaler Berufsfotografen-Verband. Dieses Dokument als Briefing mitgeben.

  2. Stock nur als Übergangslösung, und ausschließlich für redaktionelle Artikel-Heros (Abschnitt 2.3). Unsplash für kostenfrei, Stocksy für lizenziert. Suchbegriffe: „emergency planning", „site plan paperwork", „two-way radio desk". Generisches „paramedic"-Stock meiden — das schreit nach Stockfoto.

  3. Nicht verwenden: KI-generierte Fotos vom eigenen Personal oder Equipment. Das fällt früher oder später auf, und das Markenversprechen hier ist Authentizität.

6. Übergabe-Checkliste

Wenn die Assets eingehen, ist die Einbindung mechanisch:

# 1. AVIF/WebP/JPG-Tripel unter public/img/<bereich>/... ablegen
public/img/team/christian-schmitz.jpg
public/img/team/christian-schmitz.webp
public/img/team/christian-schmitz.avif

# 2. Das Markdown-Frontmatter referenziert bereits den .jpg-Pfad —
#    für die Pflicht-Assets aus Abschnitt 2 ist keine Code-Änderung nötig.

# 3. Für Equipment (Abschnitt 3.1): `image:`-Felder in
#    content/equipment/equipment.md ergänzen und in
#    src/pages/leistungen_equipment.rs in jeder Card rendern.

# 4. Für den Startseiten-Hero (Abschnitt 3.2): in
#    src/pages/home.rs die Hero-Verwendung um `image=` und
#    `image_alt=` als Props erweitern.

# 5. Für Favicon + OG (Abschnitt 3.3): in src/lib.rs `shell()`
#    `<link rel="icon" ...>` und ein Standard-`<meta property="og:image" ...>`
#    ergänzen.

Die Codebasis ist bereit. Es fehlt nur noch die Fotoschicht.