{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "slideshow-innere-gegenparallaxe",
 "name": "Vollbild-Slideshow mit Masken-Schub und innerer Gegenbewegung",
 "name_en": "Fullscreen slideshow with inner parallax / mask slide transition",
 "kurz": "Der Rahmen schiebt sich aus dem Bild, sein Inhalt läuft um 30 % dagegen: Fünf Ansichten eines Hotels am See wechseln wie Filmschnitte.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "editorial",
  "luxuriös",
  "filmisch"
 ],
 "stimmung_roh": [
  "filmisch",
  "editorial",
  "luxuriös",
  "dramatisch"
 ],
 "technik": [
  "gsap",
  "observer",
  "css",
  "clip-path",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Jeder Slide besteht aus einem Rahmen mit overflow hidden und einem inneren Bild. Beim Wechsel schiebt sich der aktuelle Rahmen um −100 % hinaus, sein Bild bewegt sich gleichzeitig um +30 % in die Gegenrichtung. Der neue Rahmen kommt von +100 % herein, sein Bild von −30 % auf 0. Alle vier Tweens starten zusammen mit derselben Kurve (power4.inOut, 1,5 s). Rad, Wischen und Pfeile werden gebündelt: Eine Geste bewegt höchstens einen Slide.",
  "warum_es_wirkt": "Die Gegenbewegung erzeugt Tiefe ohne 3D: Rahmen und Bild scheinen auf zwei Ebenen zu liegen. Die symmetrische inOut-Kurve gibt dem Wechsel Gewicht wie ein Filmschnitt.",
  "wann_einsetzen": "Hero-Slideshows, Projekt- und Fallstudien im Vollbild, Kampagnen, Präsentationsmodus. Gut bei wenigen, starken Bildern.",
  "wann_nicht": "Für automatische Werbe-Rotatoren mit Text, der gelesen werden muss. Bei kurzer Aufmerksamkeit: 1,5 s pro Wechsel ist zu langsam zum schnellen Durchklicken.",
  "varianten": [
   "Vertikal (yPercent) oder horizontal (xPercent)",
   "Clip-Path-Wipe statt Schub: inset(0 0 100% 0) → inset(0), beide Bilder laufen in dieselbe Richtung",
   "Squeeze-Zoom: neuer Slide startet bei scale 0,1 und wächst in zwei Phasen, das innere Bild von scaleX 4 auf 1",
   "Textzeilen im Versatz zum Bild",
   "Reveal mit Unschärfe statt Deckkraft",
   "Foto-Hero auf einer normal scrollenden Seite: erstes Foto steht im HTML (LCP), Wechsel nur auf Klick, Wischen oder Pfeiltaste, kein Autoplay",
   "Ruhige Überblendung ohne Schub: 1000 ms, nur auf Klick, nativ per View Transition (nur das Bild trägt den Namen) oder gestapelt mit opacity",
   "Tageslauf: vier bis fünf Bilder nach Uhrzeit beschriftet, Fortschritt je Bild, Intervall 6 s, Pause-Knopf zuerst, auf dem Telefon kein Autostart"
  ],
  "umsetzung": "Struktur: .slide (position absolute, overflow hidden) > .slide__bild > img (object-fit cover). Eine Timeline mit Label 'start', alle Tweens an dieser Position. Ein Flag verhindert überlappende Wechsel, der Index läuft modulo Anzahl. GSAP Observer für Rad, Touch und Zeiger (wheelSpeed −1, tolerance 10). Eine neue Geste beginnt erst nach 200 ms Ruhe. Fallstrick: Beim Clip-Path-Wipe beide Bilder in dieselbe Richtung bewegen, sonst springt das Bild. Eingebettet in eine längere Seite das Rad erst nach einem Klick abfangen und auf Touch nur waagerecht wischen lassen, sonst bleibt die Seite hängen. Den ersten Slide (Bild mit alt, Titel, Text) fest ins HTML schreiben, damit er ohne JavaScript steht und als LCP-Bild sofort lädt; JavaScript ergänzt die übrigen Slides erst nach dem Laden der Seite.",
  "mobil": "Wischen per Observer (type touch, pointer). Auf Hochkant-Geräten die vertikale Variante nehmen und die Dauer auf 1,0 bis 1,2 s kürzen.",
  "reduzierte_bewegung": "Crossfade 300 bis 500 ms ohne Verschiebung.",
  "barrierefreiheit": "Sichtbare Knöpfe für Vor und Zurück, Pfeiltasten, aria-live polite für die Bildunterschrift. Keine automatische Rotation ohne Pause. Das Rad nur innerhalb einer klar abgegrenzten Vollbild-Sektion abfangen."
 },
 "messwerte": {
  "easing": "power4.inOut (≈ cubic-bezier(0.83,0,0.17,1)); Wipe power2.out (≈ cubic-bezier(0.33,1,0.68,1)); Squeeze-Phase expo.out",
  "dauer_ms": "Schub 1500; Wipe 800; Squeeze 700 + 1000 (Überlappung ab 600)",
  "stagger_ms": "0 (gleichzeitig)",
  "distanz": "Rahmen 100 %, inneres Bild 30 % gegenläufig",
  "sonstiges": "Gestenpause 200 ms; Observer tolerance 10",
  "herkunft": "beobachtet",
  "quelle": "https://raw.githubusercontent.com/codrops/SlideshowAnimations/main/js/demo1/slideshow.js"
 },
 "kurve": {
  "bezier": [
   0.83,
   0,
   0.17,
   1
  ],
  "css": "cubic-bezier(0.83, 0, 0.17, 1)",
  "name": "power4.inOut",
  "dauer_ms": 1500
 },
 "gesehen_bei": [
  {
   "seite": "Codrops Demo – Slideshow Animations (Demo 1)",
   "url": "http://tympanus.net/Development/SlideshowAnimations/",
   "auszeichnung": "",
   "beobachtung": "Quellcode demo1: Timeline-Defaults duration 1,5, ease power4.inOut; Rahmen yPercent ±100, inneres Bild ±30; Observer mit wheelSpeed −1, tolerance 10; neue Geste erst nach 200 ms Pause; Reduced Motion = Crossfade.",
   "art": "demo",
   "weitere_beobachtung": "Quellcode demo8: Phase 1 (0,7 s expo) neuer Slide von scale 0,1 und xPercent 100 auf scale 0,4; inneres Bild scaleX 4 → 1 mit transformOrigin 100% 50%; altes Bild contrast 120 % saturate 140 %. Phase 2 ab 0,6 s (1 s power4.inOut): neu scale 1, alt scale 0,98 und ausgeblendet."
  },
  {
   "seite": "Codrops – Design in Motion: The Animation Principles Behind Green Stack",
   "url": "https://tympanus.net/codrops/2025/03/26/design-in-motion-the-animation-principles-behind-green-stack/",
   "auszeichnung": "",
   "beobachtung": "Menü-Bildwechsel per vertikalem clip-path-Wipe, 0,8 s power2.out; bewusst ohne Fades, stattdessen Blur und overflow hidden; killTweensOf vor jedem Wechsel.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "GitHub: codrops/SlideshowAnimations (32 Demos)",
   "url": "https://github.com/codrops/SlideshowAnimations"
  },
  {
   "titel": "Codrops: Design in Motion – Green Stack",
   "url": "https://tympanus.net/codrops/2025/03/26/design-in-motion-the-animation-principles-behind-green-stack/"
  },
  {
   "titel": "Codrops (Archiv): Zoom Slider",
   "url": "https://tympanus.net/codrops/2015/07/06/zoom-slider/"
  }
 ],
 "kombinierbar_mit": [
  "shader-uebergang-dissolve",
  "token-kinetisch-inout",
  "token-editorial-langsam"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Kein Produktionsbeleg (kein Swiper-Parallax oder Gegenparallaxe in den Slider-Bundles von k72, by-kin, Locomotive, OFF+BRAND, htarchitecte). Herabstufung bis zum Fund."
  ],
  "prioritaet_hinweis": "31.10.2026: A → C laut patch-belege-2.json (Kein Produktionsbeleg (kein Swiper-Parallax oder Gegenparallaxe in den Slider-Bundles von k72, by-kin, Locomotive, OFF+BRAND, htarchitecte). Herabstufung bis zum Fund.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Rahmen schiebt sich aus dem Bild, sein Inhalt läuft um 30 % dagegen: Fünf Ansichten eines Hotels am See wechseln wie Filmschnitte.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "Observer@3.15.0"
  ],
  "werte": {
   "schub": "Timeline-Label 'start', vier Tweens gleichzeitig: alter Rahmen yPercent 0 → −100, sein Bild 0 → +30; neuer Rahmen +100 → 0, sein Bild −30 → 0 (horizontal mit xPercent)",
   "kurve": "power4.inOut (≈ cubic-bezier(0.83, 0, 0.17, 1))",
   "dauer_ms": "1500, Telefon und Touch 1100",
   "wipe": "clip-path inset(0 0 100% 0) → inset(0), 800 ms power2.out; neues Bild yPercent −12 → 0, altes Bild 0 → +6 (beide nach unten)",
   "textzeilen": "Zeilen in Masken, yPercent 105 → 0, Dauer 0,8 × Wechsel, Start 350 ms nach dem Bild, stagger 80 ms, gleiche Kurve; alte Zeilen −105 in 0,56 × Wechsel. Beim Wipe 800 ms power2.out, Start nach 150 ms",
   "zaehler": "Ziffer rollt in Maske: aus 350 ms power2.in, ein 450 ms power2.out",
   "eingabe": "Observer type touch,pointer und ein zweiter Observer type wheel (wheelSpeed −1), tolerance 10, preventDefault; onUp/onLeft vor, onDown/onRight zurück; Pfeiltasten, Bild auf/ab",
   "gesten_buendeln": "eine Geste bewegt höchstens einen Slide; neue Geste erst nach 200 ms Ruhe; während des Wechsels werden Eingaben ignoriert",
   "ui": "Knöpfe, Felder, Linien 200–250 ms cubic-bezier(0.4, 0, 0.2, 1)",
   "reduziert": "Crossfade 400 ms linear, ohne Weg",
   "eingebettet": "im iframe: Rad erst nach Klick in die Bühne (bis der Zeiger sie verlässt), Touch nur waagerecht mit touch-action pan-y, damit die umgebende Seite scrollt"
  },
  "ausloeser": "scroll",
  "touch": "Wischen nach oben oder links blättert vor (Observer touch), Wechsel in 1,1 s. Pfeile 44 px. Variantenpult eingeklappt. Das Bild wird im Hochformat mittig beschnitten, Löwe und Leuchtturm bleiben im Bild. Foto-Hero: nur waagerechtes Wischen ab 50 px und deutlich waagerecht (Touch und Stift), touch-action: pan-y, die Seite scrollt senkrecht normal weiter. Überblenden: Wischen ab 50 px (Touch, Stift) und Lagenliste; Bild 4:3 über der Liste. Tageslauf: kein Autostart auf dem Telefon, Abspielen per Knopf, Wischen ab 50 px blättert und hält an, unter den Bildern nur die Uhrzeiten.",
  "reduziert": "Kein Schub und keine Gegenbewegung: Das neue Bild blendet in 400 ms über, Textzeilen und Zähler wechseln ohne Weg. Die Vorführung blättert weiter, nur mit Blende. Foto-Hero ebenso: Überblendung 400 ms ohne Weg. Überblenden: Wechsel ohne Übergang. Tageslauf: kein Autostart, Bilder wechseln ohne Übergang, nach Abspielen läuft nur die Fortschrittslinie.",
  "korrekturen": {
   "beschreibung": "Jeder Slide besteht aus einem Rahmen mit overflow hidden und einem inneren Bild. Beim Wechsel schiebt sich der aktuelle Rahmen um −100 % hinaus, sein Bild bewegt sich gleichzeitig um +30 % in die Gegenrichtung. Der neue Rahmen kommt von +100 % herein, sein Bild von −30 % auf 0. Alle vier Tweens starten zusammen mit derselben Kurve (power4.inOut, 1,5 s). Rad, Wischen und Pfeile werden gebündelt: Eine Geste bewegt höchstens einen Slide.",
   "warum_es_wirkt": "Die Gegenbewegung erzeugt Tiefe ohne 3D: Rahmen und Bild scheinen auf zwei Ebenen zu liegen. Die symmetrische inOut-Kurve gibt dem Wechsel Gewicht wie ein Filmschnitt.",
   "wann_einsetzen": "Hero-Slideshows, Projekt- und Fallstudien im Vollbild, Kampagnen, Präsentationsmodus. Gut bei wenigen, starken Bildern.",
   "wann_nicht": "Für automatische Werbe-Rotatoren mit Text, der gelesen werden muss. Bei kurzer Aufmerksamkeit: 1,5 s pro Wechsel ist zu langsam zum schnellen Durchklicken.",
   "varianten": [
    "Vertikal (yPercent) oder horizontal (xPercent)",
    "Clip-Path-Wipe statt Schub: inset(0 0 100% 0) → inset(0), beide Bilder laufen in dieselbe Richtung",
    "Squeeze-Zoom: neuer Slide startet bei scale 0,1 und wächst in zwei Phasen, das innere Bild von scaleX 4 auf 1",
    "Textzeilen im Versatz zum Bild",
    "Reveal mit Unschärfe statt Deckkraft",
    "Foto-Hero auf einer normal scrollenden Seite: erstes Foto steht im HTML (LCP), Wechsel nur auf Klick, Wischen oder Pfeiltaste, kein Autoplay",
    "Ruhige Überblendung ohne Schub: 1000 ms, nur auf Klick, nativ per View Transition (nur das Bild trägt den Namen) oder gestapelt mit opacity",
    "Tageslauf: vier bis fünf Bilder nach Uhrzeit beschriftet, Fortschritt je Bild, Intervall 6 s, Pause-Knopf zuerst, auf dem Telefon kein Autostart"
   ],
   "umsetzung": "Struktur: .slide (position absolute, overflow hidden) > .slide__bild > img (object-fit cover). Eine Timeline mit Label 'start', alle Tweens an dieser Position. Ein Flag verhindert überlappende Wechsel, der Index läuft modulo Anzahl. GSAP Observer für Rad, Touch und Zeiger (wheelSpeed −1, tolerance 10). Eine neue Geste beginnt erst nach 200 ms Ruhe. Fallstrick: Beim Clip-Path-Wipe beide Bilder in dieselbe Richtung bewegen, sonst springt das Bild. Eingebettet in eine längere Seite das Rad erst nach einem Klick abfangen und auf Touch nur waagerecht wischen lassen, sonst bleibt die Seite hängen. Den ersten Slide (Bild mit alt, Titel, Text) fest ins HTML schreiben, damit er ohne JavaScript steht und als LCP-Bild sofort lädt; JavaScript ergänzt die übrigen Slides erst nach dem Laden der Seite.",
   "mobil": "Wischen per Observer (type touch, pointer). Auf Hochkant-Geräten die vertikale Variante nehmen und die Dauer auf 1,0 bis 1,2 s kürzen.",
   "reduzierte_bewegung": "Crossfade 300 bis 500 ms ohne Verschiebung.",
   "barrierefreiheit": "Sichtbare Knöpfe für Vor und Zurück, Pfeiltasten, aria-live polite für die Bildunterschrift. Keine automatische Rotation ohne Pause. Das Rad nur innerhalb einer klar abgegrenzten Vollbild-Sektion abfangen."
  },
  "geprueft": "03.11.2026",
  "notiz": "Welt: Rezept boutique-hotel-gastgeber, erfundenes Hotel Uferwind am Seehafen in Lindau. Fünf eigene SVG-Ansichten (Hafeneinfahrt mit Löwe und Leuchtturm, Seezimmer, Frühstück, Altstadt am Abend, Steg im Nebel), Newsreader und Mona Sans breit, Sand und Creme, Buchungsleiste direkt unter dem Bild. Drei Varianten (vertikal, horizontal, Wipe) im eingeklappten Pult. Werte aus dem Codrops-Quellcode (Demo 1) und dem Green-Stack-Artikel. Referenzen nur als Prinzip: das-stue.com, fogoislandinn.ca, aman.com, thehoxton.com. AD-Review 01.11.2026: Note 4 (Telefon: Pfeile rechts gebündelt, Zähler links). Zugang 02.11.2026: --meta #82847f → #646661 (5,3:1 auf Creme), Preiszeile im Buchen-Knopf opacity .75 → .88 (4,8:1); Knopf-Rahmen im Kontrastmodus. Varianten 02.11.2026: Erster Slide (SVG-Datei medien/slideshow-innere-gegenparallaxe-hafen.svg mit alt, Ort und Zeilen) steht jetzt fest im HTML, ohne JavaScript sichtbar; die fünf Zeichnungen liegen als Dateien in medien/, JS ergänzt Slide 2 bis 5 nach dem load-Ereignis. Neue Variante hero (?v=hero, Rezept boutique-hotel-gastgeber): erfundenes Gasthaus Reetwiese am Kellersee, fünf Renderings aus medien/ (hotel-haus-am-see mit Hochformat per picture, hotel-zimmer, hotel-sauna, atmosphaere-partikel-kamin, hotel-zimmer-fenster), feste h1 statt wechselnder Schlagzeilen, nur die Bildzeile rollt; Bühne min(88svh, 900px) auf einer scrollenden Seite mit Buchungsleiste und Text darunter; kein Rad-Fang, kein Autoplay, deshalb kein Pause-Knopf; Pfeiltasten nur mit Fokus in der Bühne. Richtungs-Umschalter (vertikal, horizontal, Wipe) gilt nur für die Grundvariante. Varianten 03.11.2026: ueberblenden (?v=ueberblenden, Rezept weingut-hofladen-herkunft): erfundenes Weingut Rothlauf in Winterhausen am Main, fünf Lagen als Geländemodelle, Lagenliste links, Bild 3:2 rechts, Überblendung 1000 ms nativ per View Transition, nur auf Klick (Beleg Terreno, live gemessen: Swiper effect fade, speed 1000). tageslauf (?v=tageslauf, Rezept boutique-hotel-gastgeber): erfundenes Gästehaus Kranichwiese am Fleesensee, fünf Bilder mit Uhrzeit, Foto mit Rand auf Sand, Fortschritt je Bild, 6 s, Pause-Knopf zuerst, Telefon ohne Autostart. Bei Terreno (CSSDA nominiert 06.10.2026) ist die Mechanik des Hero-Wechsels nicht eindeutig (Scroll oder Zeiger); belegt sind nur Bildzahl und Geschwindigkeit, der Tageslauf ist eigene Festlegung. Beide Varianten haben eigene Bühnen, das Pult wandert in die jeweilige Sektion; Rad und Wischen der Grundvariante sind dort aus. Selbsturteil 4.",
  "varianten": [
   {
    "id": "basis",
    "name": "Vollbild mit Rad (Hotel am Seehafen)",
    "knopf": "Vollbild",
    "wann": "Präsentations- und Kampagnenseiten, bei denen die Slideshow die ganze Seite ist: Rad, Wischen und Pfeile blättern, Richtung vertikal, horizontal oder Wipe.",
    "werte": {
     "welt": "Hotel Uferwind, Lindau (fünf gezeichnete SVG-Ansichten als Dateien)",
     "kurve": "power4.inOut",
     "dauer_ms": "1500, Telefon und Touch 1100",
     "eingabe": "Rad, Wischen in alle Richtungen, Pfeiltasten global",
     "erster_slide": "im HTML, fetchpriority high"
    }
   },
   {
    "id": "hero",
    "name": "Foto-Hero ohne Autoplay (Gasthaus am See)",
    "knopf": "Foto-Hero",
    "wann": "Hero oben auf einer normal scrollenden Hotel-, Gasthof- oder Ferienhaus-Seite: Foto zuerst, Wechsel nur auf Klick oder Wischen, kein Autoplay.",
    "werte": {
     "rezept": "boutique-hotel-gastgeber",
     "achse": "waagerecht (xPercent): Rahmen 100 %, Bild 30 % gegen",
     "kurve": "sine.inOut ≈ cubic-bezier(0.37, 0, 0.63, 1) (token-luxus-weich)",
     "dauer_ms": "1400, Telefon und Touch × 0,8 = 1120",
     "textzeile": "neue Bildzeile yPercent 105 → 0 in 1200 ms sine.out, Start 350 ms nach dem Bild, Stagger 120 ms; alte −105 in 500 ms",
     "buehne": "min(88svh, 900px), min. 520 px; h1 fest, darunter Bildzeile, Zähler und Pfeile 48 px (Touch 44 px)",
     "eingabe": "Pfeilknöpfe; Wischen nur Touch/Stift ab 50 px und |dx| > 1,5 × |dy|; ← → nur mit Fokus in der Bühne; kein Rad, kein Autoplay",
     "laden": "erstes Foto im HTML (auf der echten Seite fetchpriority high, ohne lazy), übrige Bilder per JS nach load, Hochformat per picture (orientation: portrait)"
    }
   },
   {
    "id": "ueberblenden",
    "name": "Ruhige Überblendung (Weingut, fünf Lagen)",
    "knopf": "Überblenden",
    "wann": "Praxis, Kanzlei, Weingut, Hotel: wo der Schub zu laut ist und jedes Bild für sich stehen soll. Wechsel nur auf Klick, Text und Liste stehen sofort.",
    "werte": {
     "rezept": "weingut-hofladen-herkunft",
     "welt": "Weingut Rothlauf, Winterhausen am Main; fünf Lagen als Geländemodelle (medien/lagen-steckbrief-karte-*.webp, 900 × 600)",
     "technik": "document.startViewTransition(() => Klassenwechsel); nur der Bildrahmen trägt view-transition-name ub-bild; ::view-transition-old/new(root) animation none, Text und Liste wechseln sofort; ohne View Transitions gestapelte img mit transition opacity",
     "dauer_ms": 1000,
     "kurve": "cubic-bezier(0.37, 0, 0.63, 1) (token-luxus-weich), Gruppe, alt und neu gleich",
     "ausloeser": "nur Klick: Lagenliste (aria-current) und Pfeile 44 px; ← → mit Fokus im Bildbereich; Wischen Touch/Stift ab 50 px und |dx| > 1,5 × |dy|; kein Autoplay, daher kein Pause-Knopf",
     "laden": "erstes Bild sofort, übrige loading lazy; vor dem Wechsel img.decode(), während des Wechsels keine zweite Eingabe",
     "aufbau": "Liste Spalte 1–4, Bild 3:2 Spalte 5–12, Bildunterschrift DM Mono 0.75rem „Abb. n · Geländemodell …“, Absatz EB Garamond 1.25rem; Telefon: Überschrift, Bild 4:3, Steuerung, Liste",
     "reduziert": "Wechsel ohne Übergang",
     "vorfuehrung": "Takt 2800 ms (1000 Blende + 1800 Ruhe)"
    }
   },
   {
    "id": "tageslauf",
    "name": "Tageslauf mit Uhrzeiten (Gästehaus am See)",
    "knopf": "Tageslauf",
    "wann": "Hotel, Pension, Ferienhaus: ein Tag im Haus in vier bis fünf Bildern, wenn ein Bild nicht reicht. Läuft am Desktop selbst, mit Pause; auf dem Telefon nur auf Wunsch.",
    "werte": {
     "rezept": "boutique-hotel-gastgeber",
     "welt": "Gästehaus Kranichwiese am Fleesensee; 08:30 Frühstück, 13:00 Mittagsruhe, 17:45 Blaue Stunde, 19:30 Abendessen, 22:30 Sauna (medien/hotel-*, atmosphaere-partikel-see)",
     "aufbau": "Foto mit Rand var(--rand) = clamp(18px, 3.4vw, 48px) auf Sand (inset-rahmen, Terreno 40 px), Bühne min(70svh, 760px); Uhrzeit Newsreader 300 clamp(3.5rem, 2rem + 6vw, 7rem) mit Satz im Bild unten links; darunter Pause-Knopf und fünf Segmente (Spur, Uhrzeit, Stichwort)",
     "blende": "gestapelte figure, opacity 1000 ms cubic-bezier(0.37, 0, 0.63, 1)",
     "intervall_ms": "6000 (NN/g mindestens 5 s; Splide-Standard 5000); Vorführung 4000",
     "fortschritt": "2-px-Spur je Bild, Füllung per Web Animations API scale 0 → 1 linear über das Intervall; vergangene Segmente voll; angehalten steht das aktive Segment voll",
     "pause": "button 44 px zuerst in der Tab-Reihenfolge, aria-pressed, Name „Bewegung anhalten“; Fokus im Karussell stoppt ohne Neustart (APG); Mauszeiger über dem Bild hält an, solange er dort ist; aria-live off während der Rotation, polite angehalten",
     "telefon": "(hover: none) oder ≤ 640 px: kein Autostart (NN/g), Abspielen per Knopf; Wischen ab 50 px blättert und hält an; nur Uhrzeiten unter dem Bild",
     "bilder": "höchstens 5 (NN/g), Hochformat per picture (orientation: portrait), Bilder 2 bis 5 lazy",
     "beleg": "Terreno (live 03.11.2026): Hero mit 9 Bildern, Swiper speed 500, ohne Autoplay; ob per Scroll oder Zeiger gewechselt wird, war nicht eindeutig. Uhrzeit-Beschriftung, Fortschritt und Intervall sind eigene Festlegung nach NN/g und Splide"
    }
   }
  ]
 }
}