{
 "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": "fotograf-film-bild-zuerst",
 "name": "Fotografie und Film: Bild zuerst",
 "branche": "Fotografie, Bewegtbild, Regie, Produktionsfirma",
 "stimmung": [
  "zurückhaltend",
  "filmisch",
  "kuratiert",
  "ruhig"
 ],
 "kurz": "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.",
 "referenzen": [
  {
   "seite": "Nadav Kander",
   "url": "https://www.nadavkander.com/",
   "art": "website",
   "herkunft": "beobachtet",
   "abgerufen": "2026-10-31",
   "quelle": "/assets/css/style.css?v=1.46, /assets/js/main.min.js",
   "beobachtung": "@font-face: Univers Next W01, sonst nichts. Startseite ist eine kuratierte Vollbild-Slideshow (Swiper: .swiper-curated mit __caption, __count, __info; 44 Bilder als .swiper-lazy). Übergänge fast nur Opazität: opacity 200ms (12×), 500ms, opacity 350ms cubic-bezier(0.455,0.03,0.515,0.955) (5×, easeInOutQuad). Fläche #e6e6e6 (36×) als Platzhalter-Grau. Header mit Fade (site-header--fade), schlichte site-nav."
  },
  {
   "seite": "Tim Walker",
   "url": "https://www.timwalkerphotography.com/",
   "art": "website",
   "herkunft": "beobachtet",
   "abgerufen": "2026-10-31",
   "quelle": "HTML-Inline-CSS (Nuxt-SSR), /_nuxt/*.js",
   "beobachtung": "Nuxt. Inline-@font-face: cardinal (Cardinal Classic Mid Regular und Italic) und Fann Grotesque Light Pro. Header in Serif (header type--serif), Navigation in Abschnitten (header__nav__section, --current-title zeigt den aktuellen Titel). Übergänge nur Opazität: .5s, .75s mit .5s Verzögerung, 1s; Farbe .5s. Laufweite -.025em bis .1em. Startseite: Bio (landing__bio) und portfolio--selectedwork."
  },
  {
   "seite": "Partizan",
   "url": "https://partizan.com/",
   "art": "website",
   "herkunft": "beobachtet",
   "abgerufen": "2026-10-31",
   "quelle": "https://partizan.com/wp-content/themes/beaucoup/public/css/app.a215b9.css, /public/js/app.6a6f75.js",
   "beobachtung": "WordPress-Theme „beaucoup“ mit Taxi.js-Seitenübergängen (data-taxi, data-taxi-view), GSAP und Lenis (data-lenis-prevent). @font-face: GT America Standard und Teodor (Serif). Raster grid-template-columns repeat(24,minmax(0,1fr)). Arbeitskarten: video.card-work-video data-src mit 800px-MP4, Klassen opacity-0 scale-105, sichtbar bei Hover; .duration-smooth = 0,6 s, .ease-out = cubic-bezier(.23,1,.32,1); Titel blendet bei group-hover ein. Im Bundle: ease \"expo.out\" 34×, eigene Kurve \"beaucoup.alpha\" 67×, Dauern .3/.4/.8 s. Regionswahl im Header (header-regions)."
  }
 ],
 "schrift": {
  "paarung_basis": "",
  "abweichung": "instrument-serif hat im Katalog die Rolle „Akzent“; hier bewusst als Headline gesetzt – aber nur für Namen und Projekttitel, nie für längere Überschriften.",
  "headline": "instrument-serif",
  "text": "instrument-sans",
  "akzent": "fragment-mono",
  "techniken": [
   "mono-labels-versal",
   "tabellenziffern",
   "text-box-trim",
   "eine-familie-wenig-gewichte"
  ],
  "groessen": "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.",
  "alternative_eigenprojekt": "editorial-boska (Boska + Satoshi); für Film-Produktionen Switzer als GT-America-Ersatz"
 },
 "farbe": {
  "prinzip": "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.",
  "beispiel": [
   "#f4f4f2 Grund Fotografie",
   "#141414 Text",
   "#e6e6e6 Bild-Platzhalter vor dem Laden",
   "#8a8a8a Bildunterschrift, Zähler",
   "#0e0e0e Grund Film-Variante",
   "#f2f2f2 Text auf Film-Grund",
   "#6D6D6D Meta-Text barrierefrei (4.7 : 1 auf #f4f4f2; #8a8a8a nur für Linien oder Schrift ab 24 px)"
  ]
 },
 "animationsstil": "token-kinetisch-inout",
 "animationsstil_ui": "token-toggle-asymmetrisch",
 "animationsstil_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.",
 "bewegung": {
  "easing": "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",
  "beobachtet": "easeInOutQuad cubic-bezier(0.455, 0.03, 0.515, 0.955) 350 ms (Nadav Kander); nur Opazität .5–1 s (Tim Walker); Film-Karten scale 1.05 → 1 in 0,6 s cubic-bezier(.23,1,.32,1) (Partizan scale-105)",
  "dauer_ms": "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."
 },
 "hero_beschreibung": "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.",
 "muster": {
  "seitenuebergang": [
   "vt-shared-element-morph"
  ],
  "preloader": [
   "intro-ohne-wartezeit"
  ],
  "navigation": [
   "seitenrand-und-ecken-navigation",
   "hide-on-scroll-header"
  ],
  "hero": [
   "cinematic-video-hero"
  ],
  "hero_variante": [],
  "sektionen": [
   {
    "zweck": "Kuratierte Auswahl (Startseite Fotograf)",
    "muster": [
     "css-native-karussell"
    ],
    "varianten": {
     "css-native-karussell": "variable-breiten"
    }
   },
   {
    "zweck": "Arbeiten / Regie-Roster (Film)",
    "muster": [
     "video-vorschau-hover-viewport",
     "projektindex-hover-vorschau",
     "eigener-videoplayer"
    ],
    "varianten": {
     "eigener-videoplayer": "showreel"
    }
   },
   {
    "zweck": "Serien / Projekte",
    "muster": [
     "masonry-grid-lanes-galerie",
     "galerie-shared-element-vollbild",
     "skeleton-shimmer"
    ],
    "varianten": {
     "galerie-shared-element-vollbild": "serie",
     "skeleton-shimmer": "bild-platzhalter"
    }
   },
   {
    "zweck": "Archiv / alle Serien (endlose Scroll-Galerie, Footer fest erreichbar)",
    "muster": [
     "endlos-scroll-galerie"
    ]
   },
   {
    "zweck": "Bio",
    "muster": [
     "split-screen-sticky-seiten"
    ],
    "varianten": {
     "split-screen-sticky-seiten": "bild"
    }
   },
   {
    "zweck": "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)",
    "muster": [
     "kontakt-anfrage-formular",
     "akkordeon-hoehe-auto",
     "vergleichstabelle-sticky",
     "karte-zwei-klick"
    ],
    "varianten": {
     "vergleichstabelle-sticky": "pakete",
     "akkordeon-hoehe-auto": "basis",
     "karte-zwei-klick": "bild"
    }
   }
  ],
  "scroll": [],
  "schrift_animation": [],
  "hover": [
   "bild-zoom-in-maske",
   "hover-absicht-timing"
  ],
  "cursor": [],
  "mikro": [
   "einblenden-starting-style"
  ],
  "material": [],
  "galerie": [
   "css-native-karussell",
   "galerie-shared-element-vollbild",
   "video-vorschau-hover-viewport",
   "masonry-grid-lanes-galerie"
  ],
  "footer": [
   "studio-visitenkarte-footer",
   "kolophon-footer"
  ],
  "button": [
   "kontur-button-zeichnen",
   "pfeil-icon-button"
  ]
 },
 "signatur": [
  "endlos-scroll-galerie",
  "seitenrand-und-ecken-navigation"
 ],
 "varianten_demo": {
  "studio-visitenkarte-footer": "buehne",
  "kontur-button-zeichnen": "zeichnen",
  "pfeil-icon-button": "linie",
  "bild-zoom-in-maske": "basis",
  "css-native-karussell": "buehne",
  "galerie-shared-element-vollbild": "serie"
 },
 "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."
 ],
 "template_tauglich": true,
 "aufwand": "mittel",
 "leistung": "Bilder als AVIF/WebP mit srcset und sizes, das erste Slide mit fetchpriority=high, alle weiteren lazy (Nadav: .swiper-lazy). Vorschau-Videos 800px, unter 2 MB, preload=none, Laden erst bei Hover/Intersection. Auf Touch statt Hover-Video ein Poster mit Play-Symbol. Natives Scroll-Snap-Karussell statt Slider-Bibliothek spart rund 40 KB JS.",
 "offen": [
  "4. Referenz aus dem deutschen KMU-Segment fehlt: eine/n deutsche/n Hochzeits- oder Businessfotograf:in (die Referenzen sind Starfotografen) (AD-Prüfung Runde 3; Referenzen bisher international/Premium-lastig)."
 ],
 "stimmung_tags": [
  "filmisch",
  "ruhig"
 ],
 "raum": {
  "basis_px": 4,
  "skala_px": [
   4,
   8,
   12,
   16,
   24,
   32,
   48,
   64,
   96,
   128
  ],
  "sektion": "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ß."
 },
 "raster": {
  "spalten": 24,
  "rand": "clamp(12px, 2vw, 24px)",
  "spalt": "clamp(8px, 1vw, 16px)",
  "max_breite": "none",
  "hinweis": "24-Spalten-Raster wie Partizan; UI in Ränder und Ecken (seitenrand-und-ecken-navigation). Platzhalter in Bildgröße per aspect-ratio."
 },
 "form": {
  "radius_klein": "0",
  "radius_gross": "0",
  "pille": false,
  "linie": "keine; Platzhalter-Grau #e6e6e6 statt Rahmen",
  "schatten": "keiner",
  "hinweis": "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": {
  "anrede": "Sie",
  "saetze": "Fast keine Sätze: Titel, Kunde, Jahr. Bio in drei Sätzen, Kontakt als Zeile.",
  "haltung": "Kuratiert und zurückhaltend; das Werk spricht.",
  "beispiele": [
   "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_aufbau": {
  "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.",
  "h1": "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."
 },
 "url": "https://cecodesign.de/lab/fundus/rezepte/fotograf-film-bild-zuerst/",
 "tokens_css": "https://cecodesign.de/lab/fundus/rezepte/fotograf-film-bild-zuerst/tokens.css",
 "bauplan": "https://cecodesign.de/lab/fundus/rezepte/fotograf-film-bild-zuerst/bauplan.txt",
 "rezept_json": "https://cecodesign.de/lab/fundus/rezepte/fotograf-film-bild-zuerst/rezept.json",
 "nicht_verwenden_ids": [
  {
   "ids": [
    "graustufen-zu-farbe"
   ],
   "grund": "Farbe ist Teil des Werks; Bilder nie entsättigen"
  },
  {
   "ids": [
    "webgl-bildverzerrung"
   ],
   "grund": "und svg-filter-verzerrung – verändern das Foto, das der Kunde verkauft"
  },
  {
   "ids": [
    "bild-trail-cursor"
   ],
   "grund": "macht Werke zu Konfetti"
  },
  {
   "ids": [
    "grain-noise-overlay"
   ],
   "grund": "und halbton-raster – legen eine fremde Textur über fertige Bilder"
  },
  {
   "ids": [
    "split-mask-reveal"
   ],
   "grund": ", scroll-char-choreo, marquee-laufband – Typo-Inszenierung lenkt vom Bild ab"
  },
  {
   "ids": [
    "mehrschicht-parallax"
   ],
   "grund": "und zoom-parallax auf Werkbildern – verschiebt den Bildausschnitt, den der Fotograf gewählt hat"
  }
 ],
 "alle_muster": [
  {
   "id": "endlos-scroll-galerie",
   "rolle": "Signatur",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/endlos-scroll-galerie/meta.json"
  },
  {
   "id": "seitenrand-und-ecken-navigation",
   "rolle": "Signatur",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/seitenrand-und-ecken-navigation/meta.json"
  },
  {
   "id": "cinematic-video-hero",
   "rolle": "Hero",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json"
  },
  {
   "id": "css-native-karussell",
   "rolle": "Sektion: Kuratierte Auswahl (Startseite Fotograf)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json",
   "variante": "buehne",
   "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne"
  },
  {
   "id": "video-vorschau-hover-viewport",
   "rolle": "Sektion: Arbeiten / Regie-Roster (Film)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/meta.json"
  },
  {
   "id": "projektindex-hover-vorschau",
   "rolle": "Sektion: Arbeiten / Regie-Roster (Film)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/projektindex-hover-vorschau/meta.json"
  },
  {
   "id": "eigener-videoplayer",
   "rolle": "Sektion: Arbeiten / Regie-Roster (Film)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/meta.json",
   "variante": "showreel",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=showreel"
  },
  {
   "id": "masonry-grid-lanes-galerie",
   "rolle": "Sektion: Serien / Projekte",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/meta.json"
  },
  {
   "id": "galerie-shared-element-vollbild",
   "rolle": "Sektion: Serien / Projekte",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
   "variante": "serie",
   "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=serie"
  },
  {
   "id": "skeleton-shimmer",
   "rolle": "Sektion: Serien / Projekte",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/meta.json",
   "variante": "bild-platzhalter",
   "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/demo?v=bild-platzhalter"
  },
  {
   "id": "split-screen-sticky-seiten",
   "rolle": "Sektion: Bio",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
   "variante": "bild",
   "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild"
  },
  {
   "id": "kontakt-anfrage-formular",
   "rolle": "Sektion: 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)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json"
  },
  {
   "id": "akkordeon-hoehe-auto",
   "rolle": "Sektion: 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)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
   "variante": "basis",
   "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis"
  },
  {
   "id": "vergleichstabelle-sticky",
   "rolle": "Sektion: 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)",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/meta.json",
   "variante": "pakete",
   "demo_url": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete"
  },
  {
   "id": "karte-zwei-klick",
   "rolle": "Sektion: 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)",
   "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": "vt-shared-element-morph",
   "rolle": "Seitenwechsel",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/meta.json"
  },
  {
   "id": "intro-ohne-wartezeit",
   "rolle": "Intro",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/preloader-intro/intro-ohne-wartezeit/meta.json"
  },
  {
   "id": "hide-on-scroll-header",
   "rolle": "Navigation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/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": "hover-absicht-timing",
   "rolle": "Hover",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/meta.json"
  },
  {
   "id": "einblenden-starting-style",
   "rolle": "Mikroanimation",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json"
  },
  {
   "id": "studio-visitenkarte-footer",
   "rolle": "Footer",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
   "variante": "buehne",
   "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=buehne"
  },
  {
   "id": "kolophon-footer",
   "rolle": "Footer",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/footer/kolophon-footer/meta.json"
  },
  {
   "id": "kontur-button-zeichnen",
   "rolle": "Buttons",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/meta.json",
   "variante": "zeichnen",
   "demo_url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=zeichnen"
  },
  {
   "id": "pfeil-icon-button",
   "rolle": "Buttons",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
   "variante": "linie",
   "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie"
  },
  {
   "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": "mono-labels-versal",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json"
  },
  {
   "id": "tabellenziffern",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json"
  },
  {
   "id": "text-box-trim",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/meta.json"
  },
  {
   "id": "eine-familie-wenig-gewichte",
   "rolle": "Schrift-Technik",
   "demo": true,
   "meta": "https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/meta.json"
  }
 ]
}