# Bauplan: Fotografie und Film: Bild zuerst

Rezept `fotograf-film-bild-zuerst` · Fotografie, Bewegtbild, Regie, Produktionsfirma · Stimmung: zurückhaltend, filmisch, kuratiert, ruhig · Stand 02.11.2026

Die Oberfläche tritt fast vollständig zurück: kleine Typo, neutrale Fläche, Bildwechsel per Crossfade, Zähler und Bildunterschrift. Fotografen wie Nadav Kander und Tim Walker animieren praktisch nur die Opazität. Produktionsfirmen wie Partizan setzen auf Video-Vorschau beim Hover und ein 24-Spalten-Raster. Bewegung gibt es nur beim Wechsel zwischen Bildern, nie auf dem Bild selbst.

## Dateien

- `tokens.css` in diesem Ordner: Schriften, Farben, Kurven, Dauern, Button-Grundwerte. Zuerst einbinden, dann nur diese Variablen verwenden.
- Rezept im Detail: https://cecodesign.de/lab/fundus/rezepte.json (id `fotograf-film-bild-zuerst`) und https://cecodesign.de/lab/fundus/rezepte/fotograf-film-bild-zuerst/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `instrument-serif` · Text: `instrument-sans` · Akzent: `fragment-mono`
- Größen: Typo bleibt klein und dient dem Bild. Name/Logo 1.25–1.5rem Instrument Serif, Projekttitel clamp(1.5rem, 3vw, 2.75rem) Instrument Serif 400, line-height 1.1, -0.01em. UI und Text Instrument Sans 0.875–1rem/1.5, wdth 90–100. Bildunterschrift und Zähler („12 / 44“) Fragment Mono 0.75rem, tabular-nums, +0.02em. Kein Text über dem Bild außer im Film-Hero.
- Techniken: [Mono als Label- und Metaschrift (kleine Versalien)](https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/demo) `mono-labels-versal`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Optisch exakte Textabstände mit text-box-trim / text-box-edge](https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/demo) `text-box-trim`, [Eine Familie, wenige Gewichte (Hierarchie über Größe)](https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/demo) `eine-familie-wenig-gewichte`

## Farbe

Neutrale Fläche, die keine Farbe ins Bild wirft. Hell für Fotografie (warmes Hellgrau wie Nadav #e6e6e6 als Platzhalter), dunkel für Film. Text in einem Ton, Akzentfarbe nur, wenn die Marke sie verlangt.

- `--farbe-grund` #f4f4f2 (Grund Fotografie)
- `--farbe-text` #141414 (Text)
- `--farbe-bildplatzhalter` #e6e6e6 (Bild-Platzhalter vor dem Laden)
- `--farbe-text-2` #8a8a8a (Bildunterschrift, Zähler)
- `--farbe-grund-2` #0e0e0e (Grund Film-Variante)
- `--farbe-grund-3` #f2f2f2 (Text auf Film-Grund)
- `--farbe-text-3` #6D6D6D (Meta-Text barrierefrei (4.7 : 1 auf #f4f4f2; #8a8a8a nur für Linien oder Schrift ab 24 px))

## Bewegung

- Animationsstil: [Animationsstil „Kinetisch filmisch“ (inOut-Raumwechsel)](https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/demo) `token-kinetisch-inout`
- Für UI: [Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)](https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/demo) `token-toggle-asymmetrisch`
- Kurve: cubic-bezier(0.76, 0, 0.24, 1) (token-kinetisch-inout, weiche Kurve --ease-cinematic-soft) für Bild- und Seitenwechsel; UI über animationsstil_ui
- Dauer: Bildwechsel 350–800, Hover-Video-Einblendung 600, UI 200, Seitenwechsel 500–800
- Regel: Weiche inOut-Kurve des Stils für Bildwechsel (Crossfade). Bewegt wird die Opazität, nie Position oder Maßstab des Werks. Ausnahme Film-Karten: Video skaliert beim Einblenden einmal von 1.05 auf 1 (0,6 s). Menü, Anfrage und Pakete über animationsstil_ui token-toggle-asymmetrisch.
- Hinweis: Nur die weiche Kurve des Stils (--ease-cinematic-soft, cubic-bezier(0.76, 0, 0.24, 1)) und die Dauern 350–800 ms übernehmen (gemessen: symmetrisches inOut, Nadav Kander easeInOutQuad 350 ms); keine Mehr-Ebenen-Bewegung auf Werkbildern, bewegt wird nur die Opazität.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 4
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 48, 64, 96, 128
- Sektionsabstand: clamp(48px, 8vw, 128px)
- Dichte: dicht
- Hinweis: Die Oberfläche ist dicht und klein, das Bild bekommt alles andere. Abstände zwischen Bildern einer Serie klein (8 bis 16 px), zwischen Serien groß.
- Spalten: 24
- Seitenrand: clamp(12px, 2vw, 24px)
- Spaltenabstand: clamp(8px, 1vw, 16px)
- Maximale Breite: none
- Raster: 24-Spalten-Raster wie Partizan; UI in Ränder und Ecken (seitenrand-und-ecken-navigation). Platzhalter in Bildgröße per aspect-ratio.
- Radius klein: 0
- Radius groß: 0
- Pillenform für Buttons: False
- Linie: keine; Platzhalter-Grau #e6e6e6 statt Rahmen
- Schatten: keiner
- Form: Nichts konkurriert mit dem Bild. Knöpfe als gezeichnete Kontur (kontur-button-zeichnen, Variante zeichnen) oder Textlink (pfeil-icon-button, Variante linie).

## Bildsprache

- Licht: Wie im Werk, nie korrigiert oder getönt.
- Ausschnitt: Das Werk unbeschnitten im Original-Seitenverhältnis; nie für Kacheln gecroppt.
- Personen: Wie im Werk; keine Making-of-Selfies auf der Startseite.
- Formate: 3:2, 2:3, 16:9, Original
- Nicht: Kein Zoom, keine Parallaxe, kein Tönen, kein Verschieben des Werks, kein Text über dem Bild außer im Film-Hero.

## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen)

- Anrede: Sie
- Sätze: Fast keine Sätze: Titel, Kunde, Jahr. Bio in drei Sätzen, Kontakt als Zeile.
- Haltung: Kuratiert und zurückhaltend; das Werk spricht.
- Tonproben: Küste im Winter, 2025. 24 Bilder., Anfragen für Aufträge und Lizenzen per E-Mail.
- Nicht: „Momente für die Ewigkeit“, „Emotionen einfangen“, „Leidenschaft für Fotografie“, Preispakete auf der Startseite.

## Hero

Bild zuerst: ein Werk randlos (Foto oder Standbild), Name und Disziplin in den Ecken (seitenrand-und-ecken-navigation). cinematic-video-hero nur bei Bewegtbild mit eigenem Showreel (stumm, Poster, Pause-Knopf); Fotograf:innen starten mit einem Foto bzw. der kuratierten Auswahl.

- Raster: Bild randlos über die volle Fläche (100svh), UI in den vier Ecken.
- Bild: Ein Werk oder Standbild; Foto im Originalformat auf neutraler Fläche, Film-Standbild 16:9 formatfüllend. cinematic-video-hero nur mit eigenem Showreel.
- Überschrift: Name 1.25–1.5rem Instrument Serif oben links; Projekttitel clamp(1.5rem, 3vw, 2.75rem) unten links.
- Handlung: Kein CTA-Paar; Ecken: Index oben rechts, Info und Kontakt unten rechts; Pfeiltasten blättern.
- Zusatz: Zähler „12 / 44“ und Bildunterschrift in Fragment Mono 0.75rem in der unteren Ecke.

- Hero: [Kinoreifer Vollbild-Video-Hero](https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/demo) `cinematic-video-hero`

## Sektionen in dieser Reihenfolge

1. **Kuratierte Auswahl (Startseite Fotograf)**: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=variable-breiten) `css-native-karussell` · Variante „Variable Breiten“
2. **Arbeiten / Regie-Roster (Film)**: [Video-Vorschau bei Hover / im Viewport](https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/demo) `video-vorschau-hover-viewport`, [Projektindex als Liste mit Hover-Bildvorschau](https://cecodesign.de/lab/fundus/hero-layouts/projektindex-hover-vorschau/demo) `projektindex-hover-vorschau`, [Eigener Videoplayer](https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=showreel) `eigener-videoplayer` · Variante „Showreel auf dunkler Bühne“
3. **Serien / Projekte**: [Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)](https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/demo) `masonry-grid-lanes-galerie`, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=serie) `galerie-shared-element-vollbild` · Variante „Serie als Spalte mit Leuchtkasten“, [Skeleton mit Schimmer](https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/demo?v=bild-platzhalter) `skeleton-shimmer` · Variante „Bild-Platzhalter aus Farbe oder Mini-Vorschau“
4. **Archiv / alle Serien (endlose Scroll-Galerie, Footer fest erreichbar)**: [Endlose Scroll-Galerie mit Tiefenparallaxe](https://cecodesign.de/lab/fundus/galerien-slider/endlos-scroll-galerie/demo) `endlos-scroll-galerie`
5. **Bio**: [Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)](https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild) `split-screen-sticky-seiten` · Variante „Sticky-Medium mit Clip-Reveal“
6. **Leistungen, Pakete & Anfrage (z. B. Hochzeit/Business: Pakete mit ab-Preis, Verfügbarkeit, Formular; Agenturen bei Film; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis) `akkordeon-hoehe-auto` · Variante „FAQ Fahrschule, natives details“, [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild) `karte-zwei-klick` · Variante „Kartenbild mit 2-Klick“

## Signatur (Pflicht)

- [Endlose Scroll-Galerie mit Tiefenparallaxe](https://cecodesign.de/lab/fundus/galerien-slider/endlos-scroll-galerie/demo) `endlos-scroll-galerie`
- [Seitenrand- und Vier-Ecken-Navigation](https://cecodesign.de/lab/fundus/navigation/seitenrand-und-ecken-navigation/demo) `seitenrand-und-ecken-navigation`

## Buttons

- Haupthandlung: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=zeichnen) `kontur-button-zeichnen` · Variante „Linie zeichnet sich“
- Nebenhandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie) `pfeil-icon-button` · Variante „Linie (Stripe)“

## Weitere Bausteine

- Seitenwechsel: [Vorschaubild wird zur Hero (Shared-Element-Morph)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/demo) `vt-shared-element-morph`
- Intro: [Intro ohne Wartezeit (LCP-sicheres Eröffnungsballett)](https://cecodesign.de/lab/fundus/preloader-intro/intro-ohne-wartezeit/demo) `intro-ohne-wartezeit`
- Navigation: [Seitenrand- und Vier-Ecken-Navigation](https://cecodesign.de/lab/fundus/navigation/seitenrand-und-ecken-navigation/demo) `seitenrand-und-ecken-navigation`, [Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück](https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/demo) `hide-on-scroll-header`
- Hover: [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=basis) `bild-zoom-in-maske` · Variante „Basis: nur das Bild zoomt“, [Hover-Absicht und Zeitlogik](https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/demo) `hover-absicht-timing`
- Mikroanimation: [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne) `css-native-karussell` · Variante „Vollbild-Bühne“, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=serie) `galerie-shared-element-vollbild` · Variante „Serie als Spalte mit Leuchtkasten“, [Video-Vorschau bei Hover / im Viewport](https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/demo) `video-vorschau-hover-viewport`, [Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)](https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/demo) `masonry-grid-lanes-galerie`
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=buehne) `studio-visitenkarte-footer` · Variante „Studio-Bühne mit Riesen-Wortmarke“, [Kolophon: Schriften, Bildnachweis, Stand, Gewicht](https://cecodesign.de/lab/fundus/footer/kolophon-footer/demo) `kolophon-footer`

## Grundausstattung (jede Seite)

- [Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo) `vt-cross-document-mpa`
- [Native CSS-Scroll-Reveals mit view()](https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo) `css-view-reveal-nativ`
- [Unterstreichungs-Varianten](https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo) `unterstreichung-varianten`
- [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
- [Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)](https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo) `consent-banner-gestaltet`
- [Fokus-Stil als Gestaltungssystem](https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo) `fokus-stil-system`
- [Sprunglinks und Landmarken](https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo) `sprunglinks-landmarken`
- [Schalter „Bewegung reduzieren“ mit Pause-Knöpfen](https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo) `bewegung-pausieren-schalter`
- [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo) `fehlerseite-leerzustand`
- [Natives Modal mit <dialog>](https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo) `dialog-modal-nativ`
- [Zoom- und textabstandfestes Layout](https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo) `zoom-und-textabstand-robust`
- [Kontrastmodus und contrast-color()](https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo) `kontrastmodus-forced-colors`
- [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo) `firmendaten-strukturiert`
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`

## Nicht verwenden

- graustufen-zu-farbe – Farbe ist Teil des Werks; Bilder nie entsättigen
- webgl-bildverzerrung und svg-filter-verzerrung – verändern das Foto, das der Kunde verkauft
- bild-trail-cursor – macht Werke zu Konfetti
- grain-noise-overlay und halbton-raster – legen eine fremde Textur über fertige Bilder
- split-mask-reveal, scroll-char-choreo, marquee-laufband – Typo-Inszenierung lenkt vom Bild ab
- mehrschicht-parallax und zoom-parallax auf Werkbildern – verschiebt den Bildausschnitt, den der Fotograf gewählt hat

## Regeln

- Das Bild bekommt die größte Fläche; Interface-Elemente an den Rand oder in die Ecken.
- Bildwechsel als Crossfade 350–800 ms; das Werk selbst wird nie verschoben, verzerrt oder getönt.
- Jede Slideshow zeigt Zähler und Bildunterschrift in Mono (Nadav: __count, __caption).
- Film: Vorschau-Videos stumm, max. 800px breit, erst bei Hover oder im Viewport laden (Partizan: data-src).
- Platzhalter-Grau in Bildgröße (aspect-ratio) reserviert den Raum, damit nichts springt.
- Höchstens zwei Schriften; die Serif nur für Namen und Projekttitel.
- Tastatur: Pfeiltasten blättern, Esc schließt das Vollbild.
- Endlose Scroll-Galerie nur auf der Archivseite; Footer mit Impressum und Kontakt bleibt fest erreichbar, jede Serie hat eine eigene indexierbare Seite.
- Pflichtangaben und Recht (Leitfaden 8a): Personenfotos nur mit Einwilligung der Abgebildeten (KUG, DSGVO), Hochzeits- und Kinderbilder nur mit Freigabe; Paketpreise inkl. MwSt.; Musik in Filmen lizenziert; Impressum und Kontakt bleiben auch neben der endlosen Galerie erreichbar – vom Kunden prüfen lassen.

## Vor der Abgabe

Checkliste in https://cecodesign.de/lab/fundus/leitfaden.txt, Abschnitt 12. Rechtliches immer „vom Kunden prüfen lassen“.