{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "galerie-shared-element-vollbild",
 "name": "Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)",
 "name_en": "Shared element lightbox / grid-to-fullscreen transition",
 "kurz": "Ein Projektbild wächst aus dem ruhigen Raster in die Detailansicht, die Nachbarn treten nach Abstand gestaffelt zurück; Schließen spielt alles zurück zur Kachel.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "editorial",
  "präzise",
  "luxuriös"
 ],
 "stimmung_roh": [
  "editorial",
  "luxuriös",
  "ruhig",
  "präzise"
 ],
 "technik": [
  "gsap",
  "flip",
  "view-transitions",
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Klick auf ein Rasterbild merkt sich Position und Größe. Dann wandert dasselbe Bild in die Detailebene und wächst dorthin (GSAP Flip oder View Transition). Die übrigen Kacheln schrumpfen und blenden aus, je weiter weg, desto später. Erst danach erscheinen Titel und Text per Masken-Reveal. Schließen (Esc, Knopf, Zurück) spielt die Bewegung zurück zur Kachel, die Nachbarn kehren gestaffelt zurück. Die URL kann pro Bild mitwechseln.",
  "warum_es_wirkt": "Objektpermanenz: Das Auge verliert das Bild nie, es gibt keinen Kontextbruch wie beim klassischen Modal. Der Versatz nach Abstand lässt das Raster wie eine zusammenhängende Fläche reagieren.",
  "wann_einsetzen": "Jede Bildergalerie mit Detailansicht: Portfolio, Architektur, Fotografie, Produktbilder im Shop, Projektliste zu Projektseite.",
  "wann_nicht": "Bei sehr großen Bildmengen mit Endlos-Laden ohne stabile Positionen. Wenn die Detailseite ein eigenes Dokument ohne gemeinsamen Zustand ist, Cross-Document View Transitions prüfen.",
  "varianten": [
   "GSAP Flip: Flip.getState, DOM ändern, Flip.from mit absolute und zIndex",
   "Native View Transition: gleicher view-transition-name auf Kachel- und Großbild, nur während des Übergangs gesetzt",
   "Bildkopien: 6 Kopien wandern gestaffelt mit clip-path vom Raster zum Ziel",
   "Panel an der dem Klick gegenüberliegenden Seite statt Vollbild",
   "Aus einem 3D-Karussell heraus: Karussell dreht weg, Detailraster blendet ein",
   "Produktgalerie: Hauptbild mit Daumenleiste, Klick öffnet das Vollbild mit Daumen, Schließen bringt das zuletzt gesehene Bild zurück ins Hauptbild",
   "Serie als Spalte (Lookbook): Leuchtkasten auf dunklem Grund, Blättern nur mit Deckkraft, beim Schließen springt die Seite zur aktuellen Stelle und das Bild fliegt dorthin zurück",
   "Zoom im Vollbild: Doppeltippen oder Pinch bis Faktor 3, Ziehen verschiebt, Knöpfe + und −, Pfeiltasten in 10-%-Schritten; am Desktop zusätzlich eine runde Lupe am Produktbild (nur hover: hover und pointer: fine, Faktor 2,5); das große Bild lädt erst beim Öffnen. Ersetzt das geplante Muster produktbild-lupe"
  ],
  "umsetzung": "Flip: state = Flip.getState(bild); Bild in die Detailebene verschieben; Flip.from(state, { duration, ease, absolute: true, zIndex }). Elemente ggf. per data-flip-id zuordnen, box-sizing border-box, Transforms nur über GSAP setzen. Der Rahmen der Kachel behält sein Seitenverhältnis, damit das Raster nicht springt. View Transitions: document.startViewTransition(update); den view-transition-name erst kurz vor dem Start setzen und danach entfernen. Bei Wechsel des Seitenverhältnisses ::view-transition-old mit object-fit contain und ::view-transition-new mit cover und height 100%. view-transition-class und Types: Chrome/Edge 125, Firefox 144, Safari 18/18.2. Fallstricke: Namen müssen eindeutig sein, sonst entfällt der Übergang; nur eine View Transition gleichzeitig; Flip kann keine 3D-Transforms. In der Demo ist der Seitenwechsel als Zustand simuliert; auf einer echten Seite wechselt die URL per History API oder als Cross-Document View Transition.",
  "mobil": "Vollbild statt Panel, Bild in voller Breite. Nach unten wischen schließt (Schwelle etwa 15 % der Höhe).",
  "reduzierte_bewegung": "Überblendung von 200 bis 500 ms ohne Positionsanimation (Codrops 3D Carousel: 0,5 s power1.inOut). View Transitions per Media Query auf Dauer 0 oder reinen Fade setzen.",
  "barrierefreiheit": "Detailansicht als Dialog mit Fokusfalle. Fokus beim Öffnen auf Schließen oder die Überschrift, beim Schließen zurück auf die auslösende Kachel. Esc schließt, Pfeiltasten blättern. Alt-Texte bleiben am Großbild erhalten."
 },
 "messwerte": {
  "easing": "Öffnen power2.inOut / sine.inOut; Text expo.out (≈ cubic-bezier(0.16,1,0.3,1)); Schließen expo",
  "dauer_ms": "Panel 700; Text 1000; Kopien je 350; Karussell-Vorschau 1500 auf, 1300 zu",
  "stagger_ms": "Kopien 50; Rasternachbarn distanzbasiert (normalisiert × 0,3 s)",
  "distanz": "Text y 25 px; Nachbarn scale 0,8",
  "sonstiges": "Panel öffnet auf der dem Klick gegenüberliegenden Seite",
  "herkunft": "beobachtet",
  "quelle": "https://raw.githubusercontent.com/codrops/RepeatingImageTransition/main/js/index.js"
 },
 "kurve": {
  "bezier": [
   0.65,
   0,
   0.35,
   1
  ],
  "css": "cubic-bezier(0.65, 0, 0.35, 1)",
  "name": "power2.inOut",
  "dauer_ms": 700
 },
 "gesehen_bei": [
  {
   "seite": "Codrops Demo – Repeating Image Transition",
   "url": "https://tympanus.net/Development/RepeatingImageTransition/",
   "auszeichnung": "",
   "beobachtung": "Quellcode: 6 Bildkopien (steps 6), stepDuration 0,35 s, stepInterval 0,05 s, clip-path inset(100% 0 0 0) → inset(0) → inset(0 0 100% 0); nicht geklickte Kacheln 0,3 s auf opacity 0 und scale 0,8 mit distanzbasiertem Stagger (Faktor 0,3); Panel 0,7 s sine.inOut; Text 1 s expo y 25 → 0; Esc schließt. Kein Reduced-Motion-Zweig.",
   "art": "demo"
  },
  {
   "seite": "Codrops – Infinite GSAP Scroll Gallery with Parallax and Flip Transitions (07/2026, Surya Aditya)",
   "url": "https://tympanus.net/codrops/2026/07/30/building-an-infinite-gsap-scroll-gallery-with-parallax-and-flip-transitions/",
   "auszeichnung": "",
   "beobachtung": "Laut Teaser: endlose Galerie mit Parallaxe, Reveals und FLIP-Übergängen ins Vollbild (Artikeltext nicht abrufbar).",
   "art": "artikel"
  },
  {
   "seite": "Codrops Demo – On-Scroll 3D Carousel (Vorschau)",
   "url": "https://tympanus.net/Development/3DCarousel/",
   "auszeichnung": "",
   "beobachtung": "Quellcode: Öffnen der Vorschau 1,5 s power2.inOut, Karussell fliegt mit z 1500 und rotationZ 270 in 2,5 s power3.inOut weg; Schließen 1,3 s expo; Reduced Motion = Crossfade 0,5 s power1.inOut.",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "GSAP Flip Plugin",
   "url": "https://gsap.com/docs/v3/Plugins/Flip/"
  },
  {
   "titel": "Chrome: Same-document View Transitions",
   "url": "https://developer.chrome.com/docs/web-platform/view-transitions/same-document"
  },
  {
   "titel": "Codrops: Infinite GSAP Scroll Gallery with Parallax and Flip Transitions",
   "url": "https://tympanus.net/codrops/2026/07/30/building-an-infinite-gsap-scroll-gallery-with-parallax-and-flip-transitions/"
  },
  {
   "titel": "GitHub: codrops/RepeatingImageTransition",
   "url": "https://github.com/codrops/RepeatingImageTransition"
  }
 ],
 "kombinierbar_mit": [
  "unendliche-leinwand-galerie",
  "flip-zustandswechsel",
  "drag-slider-traegheit-loop",
  "token-kinetisch-inout",
  "token-toggle-asymmetrisch"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Kein Produktionsbeleg verifiziert: View Transitions in Bundles nur als Seiten-/Root-Übergänge (cuberto.com, darkroom.engineering, kube.io), Flip.getState in keinem Bundle. Herabstufung bis zum Fund.",
   "02.11.2026: Priorität C → A (Lückenrecherche K2), weil steht in 10 Rezepten, Priorität C widersprach der tatsächlichen Nutzung."
  ],
  "prioritaet_hinweis": "31.10.2026: A → C laut patch-belege-2.json (Kein Produktionsbeleg verifiziert: View Transitions in Bundles nur als Seiten-/Root-Übergänge (cuberto.com, darkroom.engineering, kube.io), Flip.getState in keinem Bundle. Herabstufung bis zum Fund.) 02.11.2026: Priorität C → A (Lückenrecherche K2), weil steht in 10 Rezepten, Priorität C widersprach der tatsächlichen Nutzung."
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Projektbild wächst aus dem ruhigen Raster in die Detailansicht, die Nachbarn treten nach Abstand gestaffelt zurück; Schließen spielt alles zurück zur Kachel.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "Flip@3.15.0"
  ],
  "werte": {
   "easing": "power2.inOut = cubic-bezier(0.65, 0, 0.35, 1) für Bild, Panel, Nachbarn und Kopien; Text expo.out = cubic-bezier(0.16, 1, 0.3, 1)",
   "bild_ms": 700,
   "flip": "Flip.getState(bild) → Bild per appendChild in den Slot der Detailebene → Flip.from(state, { duration: 0.7, ease: 'power2.inOut', absolute: true, zIndex: 25 }); Schließen identisch zurück in den Rahmen der Kachel",
   "nachbarn": "opacity 1 → 0, scale 1 → 0,8, 300 ms power2.inOut; Verzögerung = Abstand der Kachelmitte zur geklickten Kachel / größter Abstand × 300 ms; Einleitung blendet ohne Verzögerung mit aus",
   "nachbarn_zurueck": "gleiche Werte rückwärts, Start 280 ms (0,4 × Bilddauer) nach Beginn der Rückfahrt plus Abstandsverzögerung",
   "text": "Masken-Reveal: y 25 px → 0, opacity 0 → 1, 1000 ms expo.out, Start 600 ms nach Klick, Versatz 60 ms je Zeile; beim Schließen opacity → 0 in 250 ms",
   "panel": "50 % Breite an der dem Klick gegenüberliegenden Seite, Fläche #E1E3E3, clip-path inset von der Außenseite → inset(0), 700 ms power2.inOut",
   "view_transition": "document.startViewTransition; view-transition-name 'projektbild' nur während des Übergangs; Gruppe 700 ms cubic-bezier(0.65, 0, 0.35, 1); Kacheln mit view-transition-class 'kachel', alt → opacity 0 / scale 0,8 in 300 ms mit animation-delay je Abstand; root ohne Crossfade",
   "kopien": "6 Bildkopien auf der Strecke Kachel → Slot (linear interpoliert, Position und Größe), je clip-path inset(100% 0 0 0) → inset(0) → inset(0 0 100% 0), je 350 ms, Abstand 50 ms, power2.inOut; die letzte bleibt stehen (gesamt 950 ms)",
   "blaettern": "Pfeiltasten oder Knöpfe: Bild und Text 250 ms aus, neues Bild 500 ms ein, Text-Reveal ab 100 ms",
   "raster": "4 Spalten (≤ 900 px: 3, ≤ 640 px: 2), Zeilen an der Unterkante ausgerichtet; Hochformat 4:5 auf 72 % Spaltenbreite, Quadrat 84 %, Querformat 3:2 voll; Bildunterschrift 'Titel • Ort • Jahr' 0,8rem",
   "ui_ms": 250,
   "wischen": "Telefon: Bild nach unten ziehen, ab 15 % der Fensterhöhe schließt die Ansicht, sonst 300 ms zurück",
   "reduziert": "Überblendung 500 ms power1.inOut, keine Positionsanimation"
  },
  "ausloeser": "klick",
  "touch": "Unter 640 px immer Vollbild: Bild in voller Breite oben, Text darunter scrollbar. Nach unten wischen schließt (Schwelle 15 % der Höhe), kurzer Zug federt in 300 ms zurück. Kein Hover-Unterstrich. Produkt und Serie: im Vollbild waagerecht wischen ab 50 px blättert, nach unten ziehen ab 15 % schließt. Zoom: Doppeltippen schaltet 1 ↔ 3 am Tippunkt, zwei Finger zoomen stufenlos bis 3, ein Finger verschiebt im Zoom; ungezoomt wischen ab 50 px blättert. touch-action none nur im Zoomfeld, die Produktseite behält das native Pinch. Keine Lupe auf Touch.",
  "reduziert": "Keine Flip-, View-Transition- oder Kopienbewegung: Detailebene und Raster blenden 500 ms power1.inOut über, Text steht sofort. Produkt und Serie ebenso: Vollbild bzw. Leuchtkasten blendet 500 ms über, Blättern ohne Überblendung. Zoom: kein FLIP beim Öffnen und Schließen (150 ms Einblenden), Zoomstufen und Verschieben springen ohne Übergang.",
  "korrekturen": {
   "beschreibung": "Ein Klick auf ein Rasterbild merkt sich Position und Größe. Dann wandert dasselbe Bild in die Detailebene und wächst dorthin (GSAP Flip oder View Transition). Die übrigen Kacheln schrumpfen und blenden aus, je weiter weg, desto später. Erst danach erscheinen Titel und Text per Masken-Reveal. Schließen (Esc, Knopf, Zurück) spielt die Bewegung zurück zur Kachel, die Nachbarn kehren gestaffelt zurück. Die URL kann pro Bild mitwechseln.",
   "warum_es_wirkt": "Objektpermanenz: Das Auge verliert das Bild nie, es gibt keinen Kontextbruch wie beim klassischen Modal. Der Versatz nach Abstand lässt das Raster wie eine zusammenhängende Fläche reagieren.",
   "wann_einsetzen": "Jede Bildergalerie mit Detailansicht: Portfolio, Architektur, Fotografie, Produktbilder im Shop, Projektliste zu Projektseite.",
   "wann_nicht": "Bei sehr großen Bildmengen mit Endlos-Laden ohne stabile Positionen. Wenn die Detailseite ein eigenes Dokument ohne gemeinsamen Zustand ist, Cross-Document View Transitions prüfen.",
   "varianten": [
    "GSAP Flip: Flip.getState, DOM ändern, Flip.from mit absolute und zIndex",
    "Native View Transition: gleicher view-transition-name auf Kachel- und Großbild, nur während des Übergangs gesetzt",
    "Bildkopien: 6 Kopien wandern gestaffelt mit clip-path vom Raster zum Ziel",
    "Panel an der dem Klick gegenüberliegenden Seite statt Vollbild",
    "Aus einem 3D-Karussell heraus: Karussell dreht weg, Detailraster blendet ein",
    "Produktgalerie: Hauptbild mit Daumenleiste, Klick öffnet das Vollbild mit Daumen, Schließen bringt das zuletzt gesehene Bild zurück ins Hauptbild",
    "Serie als Spalte (Lookbook): Leuchtkasten auf dunklem Grund, Blättern nur mit Deckkraft, beim Schließen springt die Seite zur aktuellen Stelle und das Bild fliegt dorthin zurück",
    "Zoom im Vollbild: Doppeltippen oder Pinch bis Faktor 3, Ziehen verschiebt, Knöpfe + und −, Pfeiltasten in 10-%-Schritten; am Desktop zusätzlich eine runde Lupe am Produktbild (nur hover: hover und pointer: fine, Faktor 2,5); das große Bild lädt erst beim Öffnen. Ersetzt das geplante Muster produktbild-lupe"
   ],
   "umsetzung": "Flip: state = Flip.getState(bild); Bild in die Detailebene verschieben; Flip.from(state, { duration, ease, absolute: true, zIndex }). Elemente ggf. per data-flip-id zuordnen, box-sizing border-box, Transforms nur über GSAP setzen. Der Rahmen der Kachel behält sein Seitenverhältnis, damit das Raster nicht springt. View Transitions: document.startViewTransition(update); den view-transition-name erst kurz vor dem Start setzen und danach entfernen. Bei Wechsel des Seitenverhältnisses ::view-transition-old mit object-fit contain und ::view-transition-new mit cover und height 100%. view-transition-class und Types: Chrome/Edge 125, Firefox 144, Safari 18/18.2. Fallstricke: Namen müssen eindeutig sein, sonst entfällt der Übergang; nur eine View Transition gleichzeitig; Flip kann keine 3D-Transforms. In der Demo ist der Seitenwechsel als Zustand simuliert; auf einer echten Seite wechselt die URL per History API oder als Cross-Document View Transition.",
   "mobil": "Vollbild statt Panel, Bild in voller Breite. Nach unten wischen schließt (Schwelle etwa 15 % der Höhe).",
   "reduzierte_bewegung": "Überblendung von 200 bis 500 ms ohne Positionsanimation (Codrops 3D Carousel: 0,5 s power1.inOut). View Transitions per Media Query auf Dauer 0 oder reinen Fade setzen.",
   "barrierefreiheit": "Detailansicht als Dialog mit Fokusfalle. Fokus beim Öffnen auf Schließen oder die Überschrift, beim Schließen zurück auf die auslösende Kachel. Esc schließt, Pfeiltasten blättern. Alt-Texte bleiben am Großbild erhalten."
  },
  "geprueft": "03.11.2026",
  "notiz": "Rezept architektur-ruhiges-raster: erfundenes Büro Kofler Ganster Architekten, Graz, acht Projekte aus der Steiermark als eigene SVG-Bilder, Hanken Grotesk in zwei Gewichten, Weiß/#E1E3E3/#231F20, Fokus #0022FF. Umschalter Übergang (Flip, View Transition, Kopien) und Ziel (Vollbild, Panel); Deep-Link per #slug, Fokusfalle, Blättern mit Pfeiltasten. Vorführung öffnet und schließt reihum in allen Kombinationen. Referenzen: tympanus.net, davidchipperfield.com, herzogdemeuron.com, big.dk. AD-Review 01.11.2026: Note 4. Varianten 01.11.2026: Umschalter „Variante“ im Pult (?v=basis|produkt|serie); ein Projekt im Raster umbenannt (jetzt „Uferdach an der Mur“). Produkt (Rezept mode-beauty-kollektion): erfundene Naturkosmetik Salbeigrund, Nachtöl No. 3, fünf eigene SVG-Produktbilder, Kaufbox mit Größe und Grundpreis. Serie (Rezept fotograf-film-bild-zuerst): erfundene Fotografin Wiebke Lorenzen, Serie „Moorlicht“ mit acht eigenen SVG-Bildern in vier Formaten. Beide mit Fokusfalle, Esc, Pfeiltasten, Wischen. Varianten 03.11.2026: zoom (?v=zoom, Rezept d2c-produkt-zuerst): erfundenes Webhaus Brede in Nordhorn, Plaid Fischgrat aus Schurwolle und Leinen, vier eigene Stoffbilder (Gesamtansicht mit Etikett, Webart, Fransen, Etikett) als Python-Rendering in zwei Größen. Lupe am Produktbild nur mit feinem Zeiger, Vollansicht als natives dialog mit Zoom bis 3, Doppeltippen, Pinch, Ziehen, +/−, Pfeiltasten in 10-%-Schritten, Esc und Fokus-Rückgabe. Das große Bild lädt erst beim Öffnen. Ersetzt das geplante Muster produktbild-lupe (Runde-1-Steckbrief 5). Selbsturteil 4.",
  "varianten": [
   {
    "id": "basis",
    "name": "Projektraster zu Vollbild oder Panel",
    "wann": "Architektur, Studios, Freelancer, Manufaktur: viele gleichrangige Projekte im Raster, Detail mit Daten und Text. Unterumschalter Übergang (Flip, View Transition, Kopien) und Ziel (Vollbild, Panel).",
    "werte": {
     "rezept": "architektur-ruhiges-raster",
     "kurve": "power2.inOut = cubic-bezier(0.65, 0, 0.35, 1)",
     "bild_ms": 700,
     "nachbarn": "opacity → 0, scale → 0,8, 300 ms, Versatz nach Abstand",
     "text": "y 25 px → 0, 1000 ms expo.out ab 600 ms"
    }
   },
   {
    "id": "produkt",
    "name": "Produktgalerie mit Daumen",
    "wann": "Produktdetailseiten in Mode, Beauty und D2C: Hauptbild mit Daumen und Kaufbox daneben, Vergrößern als Vollbild mit Daumenleiste, Grundpreis und Größe bleiben sichtbar.",
    "werte": {
     "rezept": "mode-beauty-kollektion (auch d2c-produkt-zuerst)",
     "flip": "Flip.getState(hauptbild) → in den Vollbild-Slot → Flip.from({ duration: 0.7, ease: 'power3.out', absolute: true, zIndex: 45 }); power3.out entspricht cubic-bezier(0.25, 1, 0.5, 1) aus dem Rezept",
     "grund": "Fläche #f6f3ee opacity 0 → 1 in 500 ms power1.inOut, Bedienelemente 300 ms ab 400 ms",
     "daumenwechsel": "nur Überblendung: neues Bild opacity 0 → 1 in 300 ms über dem alten, keine Bewegung",
     "schliessen": "Bedienelemente 200 ms aus, Grund 500 ms ab 150 ms, Bild per Flip 700 ms zurück ins Hauptbild; das Hauptbild zeigt danach das zuletzt angesehene Bild",
     "aufbau": "Daumen 76 px links (sticky), Hauptbild 4:5, Kaufbox sticky; unter 900 px Daumen als Reihe unter dem Bild",
     "vollbild": "Slot 4:5 in voller Höhe, Pfeile 48 px, Daumenleiste 44 px breit unten, Zähler „2 / 5“ in Fragment Mono",
     "touch": "waagerecht wischen ab 50 px blättert, nach unten ziehen ab 15 % der Höhe schließt, sonst 300 ms zurück",
     "schrift": "Zalando Sans (Titel font-stretch 125 %, 400), Fragment Mono 11 px versal für Labels",
     "pflicht": "Grundpreis je 100 ml und „inkl. MwSt.“ neben dem Preis"
    }
   },
   {
    "id": "serie",
    "name": "Serie als Spalte mit Leuchtkasten",
    "wann": "Fotografie, Film, Lookbooks: eine Serie wird von oben nach unten gelesen, Bilder in wechselnder Breite und im Originalformat. Der Leuchtkasten zeigt das Werk unbeschnitten, Blättern bewegt das Werk nicht.",
    "werte": {
     "rezept": "fotograf-film-bild-zuerst",
     "flip": "Flip 800 ms power1.inOut (= cubic-bezier(0.455, 0.03, 0.515, 0.955), easeInOutQuad), Seitenverhältnis bleibt, Bild unbeschnitten (contain)",
     "grund": "#141414 opacity 0 → 1 in 600 ms, Kopf und Fuß 500 ms ab 500 ms",
     "blaettern": "altes Bild opacity → 0 in 250 ms, neues 0 → 1 in 500 ms, gleiche Kurve; keine Positions- oder Größenänderung",
     "rueckweg": "beim Schließen springt die Seite ohne Animation so, dass der Rahmen des aktuellen Bildes mittig steht, dann fliegt das Bild per Flip in diesen Rahmen",
     "spalte": "max. 1100 px, Abstand clamp(64px, 12vh, 140px), Breiten 54 / 40 / 46 / 72 % im Wechsel links, rechts, Mitte; unter 900 px 86 % abwechselnd",
     "formate": "3:2, 4:5, 1:1, 16:9 gemischt",
     "schrift": "Instrument Serif für Name, Serientitel und Bildtitel, Instrument Sans, Fragment Mono 0.75rem für Zähler „03 / 08“",
     "farben": "#f4f4f2 Grund, #e6e6e6 Platzhalter, #141414 Leuchtkasten, #8a8a8a Zähler",
     "touch": "wischen blättert, nach unten ziehen schließt (15 %)"
    }
   },
   {
    "id": "zoom",
    "name": "Zoom im Vollbild mit Lupe",
    "knopf": "Zoom",
    "wann": "Produktseiten mit eigenen, hoch aufgelösten Fotos, bei denen Material zählt: Mode, Textil, Möbel, D2C, Industrie, Handwerk (Naht, Webart, Etikett, Gravur). Ersetzt das geplante Muster produktbild-lupe.",
    "werte": {
     "rezept": "d2c-produkt-zuerst",
     "welt": "Webhaus Brede, Nordhorn: Plaid Fischgrat; vier eigene Stoffbilder (Python-Rendering) je 800 × 1000 und 1280 × 1600 (medien/galerie-shared-element-vollbild-plaid-*-gross.webp, je ≤ 120 KB)",
     "stufen": "1 · 1,5 · 2 · 3 über + und − (Knöpfe 40 px in einer Pille, Tasten + − 0), Maximum 3 (Swiper Zoom maxRatio 3); Anzeige in Prozent (output, aria-live polite)",
     "doppeltippen": "zwei Tipps oder Klicks in 300 ms und 30 px: 1 ↔ 3 am Tippunkt (Swiper toggle)",
     "pinch": "zwei Zeiger, Faktor 1 bis 3, der Mittelpunkt bleibt unter den Fingern; Trackpad-Pinch als wheel mit ctrlKey",
     "ziehen": "ein Zeiger verschiebt ab Zoom > 1; Ausschnitt begrenzt auf ±(Bildbreite × Faktor − Feldbreite) / 2",
     "tastatur": "gezoomt verschieben Pfeiltasten um 10 % der Feldgröße, ungezoomt blättern ← →; Esc schließt (cancel abgefangen, damit die Rückfahrt spielt), Fokus zurück auf „Vergrößern“",
     "lupe": "nur (hover: hover) and (pointer: fine): Kreis 200 px am Zeiger, background-size Bild × 2,5, Einblenden opacity und scale .9 → 1 in 200 ms; lädt das große Bild beim ersten Überfahren",
     "laden": "großes Bild erst beim Öffnen bzw. ersten Überfahren (new Image, decode), bis dahin das kleine Bild mit dem Hinweis „Detailbild lädt …“",
     "oeffnen": "natives dialog (showModal), FLIP von Hand per Web Animations API 300 ms cubic-bezier(0.16, 1, 0.3, 1) aus dem Hauptbild; Grund 300 ms, Bedienung 200 ms ab 150 ms",
     "schliessen": "200 ms cubic-bezier(0.7, 0, 0.84, 0) zurück ins Hauptbild (das zuletzt gesehene Bild bleibt dort), Bedienung 120 ms",
     "zoom_uebergang": "transform 300 ms cubic-bezier(0.16, 1, 0.3, 1) bei Knopf, Taste und Doppeltippen; Pinch und Ziehen ohne Übergang",
     "aufbau": "Galerie 7/12 mit Daumen 72 px links, Hauptbild 4:5 mit Radius 12 px, Kaufbox 5/12 sticky mit Größe, Preis inkl. MwSt., Material, Pflege, Hersteller; Telefon: Daumen als Reihe",
     "beleg": "Swiper Zoom (maxRatio 3, toggle); Baymard: mobile-image-gestures (Pinch und Doppeltippen, höher aufgelöstes Bild nachladen), image resolution and zoom; IKEA STRANDMON (Zustand „Image zoomed out, normal view“, Bilder in mehreren Größen); Pipeline-Theme: scale 1.5, 200 ms"
    }
   }
  ]
 }
}