{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "bild-hotspots",
 "name": "Bild mit Markierungspunkten",
 "name_en": "Image hotspots (shop the look, annotated product image)",
 "kurz": "Raumbild mit vier Punkten: Jeder Punkt ist ein Popover-Invoker, die Karte mit Name, Preis und „Zum Produkt“ hängt per Anchor Positioning am Punkt und weicht am Rand aus.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise",
  "warm"
 ],
 "stimmung_roh": [
  "ruhig",
  "präzise",
  "warm"
 ],
 "technik": [
  "css",
  "popover",
  "anchor-positioning",
  "starting-style"
 ],
 "technik_gruppen": [
  "css",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Auf einem großen Raum-, Produkt- oder Maschinenbild sitzen wenige kleine Punkte. Ein Klick oder Tippen öffnet neben dem Punkt eine Karte mit Name, kurzer Angabe und Weg weiter, etwa Preis und „Zum Produkt“ oder Bauteil und Datenblatt. Die Karte weicht am Bildrand selbst aus. Auf dem Telefon tragen die Punkte Nummern und die Inhalte stehen zusätzlich als Liste unter dem Bild.",
  "warum_es_wirkt": "Das Bild bleibt ein Bild und wird trotzdem lesbar: Man entdeckt im Zusammenhang, statt Bild und Liste getrennt abzugleichen. Für Shops verkauft das Raumbild die einzelnen Stücke, für Industrie und Hotel erklärt es Ausstattung, ohne Pfeile ins Foto zu malen.",
  "wann_einsetzen": "Raum- und Lookbilder im Shop, Zimmerausstattung im Hotel, Bauteile einer Maschine oder eines Fahrzeugs, Ausstattung eines Objekts im Exposé. Bilder ab etwa 2000 px Breite mit klar erkennbaren Gegenständen.",
  "wann_nicht": "Wenn die Information wichtig ist und nur im Punkt stünde. Bei kleinen Bildern oder mehr als etwa sechs Punkten. Bei Porträts. Generik-Gefahr: pulsierende Plus-Punkte auf jedem Bild der Seite. Höchstens ein Hotspot-Bild pro Ansicht, Punkte ohne Dauerpuls.",
  "varianten": [
   "shop: Karte mit Name, Preis inkl. MwSt. und Link zur Produktseite",
   "bauteil: nummerierte Punkte, Karte mit Kurzangabe und Link auf technische Daten",
   "zimmer: Ausstattung ohne Preis, Liste unter dem Bild als Hauptweg"
  ],
  "umsetzung": "1. figure mit img (feste aspect-ratio) und einer ol der Punkte; jeder Punkt ist ein button popovertarget mit style=\"--x: 42%; --y: 63%\" und position: absolute. 2. Karte als div popover; der Invoker stellt den Anker-Bezug her, Platzierung mit position-area und position-try-fallbacks (flip-block, flip-inline). 3. Ein- und Ausblenden per @starting-style und allow-discrete wie einblenden-starting-style; Schließen schneller als Öffnen. 4. Liste der Inhalte als echte ol unter dem Bild (figcaption oder nachfolgend), auf dem Telefon sichtbar, am Desktop optional visuell versteckt. 5. Punkte nur bei @media (hover: hover) zusätzlich mit Hover-Hervorhebung; kein Dauerpuls. 6. Fallback ohne Anchor Positioning: Popover erscheint mittig über dem Bild (Standard), Inhalt bleibt nutzbar.",
  "mobil": "Nummerierte Punkte, Karte als Bottom-Sheet oder unter dem Bild, Liste als Hauptweg.",
  "reduzierte_bewegung": "Karte erscheint ohne Weg, nur Deckkraft unter 200 ms.",
  "barrierefreiheit": "Jeder Punkt hat einen sprechenden Namen (aria-label „Stehleuchte Lio, 249 €“). DOM-Reihenfolge gleich Lesereihenfolge. Esc und Klick außerhalb schließen, Fokus kehrt zum Punkt zurück. Trefferfläche 44 px. Kontrast der Punkte 3:1 gegen jeden Bildbereich (Ring in zwei Tönen). 320 px und 200 % Zoom: Liste statt Punkte. Keine Bewegung über 5 s."
 },
 "messwerte": {
  "easing": "Token des Rezepts (--ui-ease-ein / --ui-ease-aus)",
  "dauer_ms": "Öffnen 200–300, Schließen etwa zwei Drittel davon",
  "stagger_ms": "",
  "distanz": "Karte 8 px vom Punkt; Punkt sichtbar 24 px, Trefferfläche 44 px",
  "sonstiges": "CSS-IRL-Beispiel nutzt 500 ms für opacity und display; für UI zu lang",
  "herkunft": "eigene Festlegung",
  "quelle": "eigene Festlegung nach Leitfaden B5 und C9; Vergleichswert css-irl.info 14.05.2024"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Siemens Healthineers Designsystem: Hotspots",
   "url": "https://ux.siemens-healthineers.com/ui-marcom/version/3.1/components/hotspots/usage/index.html",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026: Desktop öffnet per Klick ein Popup; auf dem Telefon nummerierte Punkte und die Inhalte als geordnete Liste unter dem Bild.",
   "art": "artikel"
  },
  {
   "seite": "Fluorescent Theme: Shoppable image",
   "url": "https://help.fluorescent.co/lorenza/sections/theme-sections/shoppable-image",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026: Punkt öffnet Popup mit Name und Preis und führt zur Produktseite; Lage per Regler waagerecht und senkrecht; empfohlen mindestens 2050 px Bildbreite.",
   "art": "artikel"
  },
  {
   "seite": "pageflow: Hotspots-Funktion",
   "url": "https://www.pageflow.io/en/blog/from-static-to-interactive-boost-engagement-with-the-new-hotspots-feature/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026: Flächen als Rechteck oder Polygon, Tooltip bei Hover oder Tippen, Schwenken und Zoomen nur auf dem Telefon. Kein Wort zur Barrierefreiheit.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: Using CSS anchor positioning",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning/Using"
  },
  {
   "titel": "CSS IRL: Anchor positioning and the Popover API",
   "url": "https://css-irl.info/anchor-positioning-and-the-popover-api/"
  }
 ],
 "kombinierbar_mit": [
  "native-popover-dropdowns",
  "einblenden-starting-style",
  "produkt-kaufbox-varianten",
  "galerie-shared-element-vollbild",
  "technische-daten-produktseite"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Techniken-Recherche 03.11.2026"
  ],
  "pruefnotizen": [
   "Kein Website-Beleg prüfbar: Bei IKEA (Raumgalerie), Westwing (/looks/), Höffner (Shop the Look) und END. war die Technik im Text nicht erkennbar. Im Browser nachholen.",
   "Firefox-Version für Anchor Positioning widersprüchlich (web.dev Januar 2026: 147 im Text, 151 in der Tabelle).",
   "Fallback mittig aus Wissen, nicht am 03.11.2026 geprüft."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Raumbild mit vier Punkten: Jeder Punkt ist ein Popover-Invoker, die Karte mit Name, Preis und „Zum Produkt“ hängt per Anchor Positioning am Punkt und weicht am Rand aus.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "Öffnen cubic-bezier(0.16, 1, 0.3, 1), Schließen cubic-bezier(0.7, 0, 0.84, 0) (token-toggle-asymmetrisch)",
   "dauer_ms": "Karte 250 auf, 165 zu; Punkte erscheinen einmal mit 250 je Punkt; Hover 150",
   "stagger_ms": "60 beim ersten Erscheinen der Punkte",
   "distanz": "Karte y 6 px → 0, auf dem Telefon 24 px; Punkte scale .6 → 1 beim Erscheinen, Hover scale 1.18",
   "punkt": "button popovertarget, Trefferfläche 44 × 44 px, sichtbar 24 px: dunkler Kern rgba(20,20,20,.72), weißer Ring 2 px, dunkler Saum 1 px; offen: weiß mit dunklem Ring; Bauteil quadratisch in #0E518D mit Nummer",
   "karte": "popover=auto, 290 px breit, Radius aus dem Rezept, Schatten 0 12px 32px -8px rgba(0,0,0,.28); Schließen-Knopf 44 px",
   "anker": "anchor-name --p-<name> am Punkt, position-anchor an der Karte; position-area: right; align-self: anchor-center; margin-left -2 px (8 px zum sichtbaren Punkt); position-try-fallbacks: flip-inline, --unten (position-area: bottom; justify-self: anchor-center), --oben",
   "fallback": "ohne position-area bleibt das Popover in der Standardlage mittig im Fenster",
   "telefon": "≤ 640 px: Karte als Blatt unten (inset auto 0 0 0, Radius 16 px oben), Hintergrund rgba(0,0,0,.28), Punkte mit Nummern wie die Liste",
   "liste_statt_punkte": "@media (max-width: 22.4rem), (max-height: 30rem): Punkte ausgeblendet, die Liste trägt alles",
   "liste": "Hover oder Fokus auf einem Listeneintrag hebt den Punkt hervor; offene Karte markiert den Eintrag bzw. die Tabellenzeile"
  },
  "ausloeser": "klick",
  "touch": "Tippen auf einen Punkt öffnet die Karte als Blatt am unteren Rand, Tippen daneben oder auf × schließt. Punkte tragen Nummern, die Liste unter dem Bild ist der zweite Weg. Bei 320 px nur die Liste.",
  "reduziert": "Punkte und Karten erscheinen nur per Deckkraft in 120 ms linear, ohne Weg und Skalierung.",
  "korrekturen": {},
  "geprueft": "03.11.2026",
  "notiz": "Drei Welten in einer Demo. shop: Rezept d2c-produkt-zuerst, erfundene Marke Ruhwerk (Möbel, Objekte, Kalkfarben) aus Rastatt, Bild fenster-licht.jpg, vier Punkte mit Preis inkl. MwSt. und Grundpreis bei der Farbe, Liste „Im Bild“ links. bauteil: Rezept industrie-b2b-mittelstand, erfundener Fallstrom Pumpenbau aus Remscheid, Normpumpe FN 80-250 als eigenes three.js-Rendering (medien/bild-hotspots-pumpe.webp, 1860 × 1085, 43 KB), sechs nummerierte Punkte aus der Kameraprojektion, Karte mit Sprung zur Zeile der technischen Daten. zimmer: Rezept boutique-hotel-gastgeber, erfundenes Hotel Strandvogt auf Fehmarn, Bild hotel-zimmer.webp, Liste neben dem Bild als Hauptweg, Karten ohne Preis. Kein Dauerpuls, die Punkte erscheinen einmal gestaffelt. Vorführung öffnet die Punkte der Reihe nach per click(). Geprüft in Chromium 153. Selbsturteil 4.",
  "varianten": [
   {
    "id": "shop",
    "name": "Shop the Look",
    "wann": "Onlineshops und Manufakturen mit Raumbildern: Möbel, Wohnen, Mode, Kosmetik.",
    "werte": {
     "rezept": "d2c-produkt-zuerst",
     "punkte": "4, ohne Nummer am Desktop, mit Nummer auf dem Telefon",
     "karte": "Name, Satz, Preis inkl. MwSt. zzgl. Versand, Grundpreis, Knopf „Zum Produkt“ als Pille #212121"
    }
   },
   {
    "id": "bauteil",
    "name": "Bauteile mit Nummern",
    "wann": "Maschinen, Fahrzeuge, Anlagen und Geräte, deren Baugruppen erklärt werden sollen.",
    "werte": {
     "rezept": "industrie-b2b-mittelstand",
     "punkte": "6, quadratisch, nummeriert",
     "karte": "Kante oben 3 px #0E518D, Link „Technische Daten“ springt zur Tabellenzeile (:target)"
    }
   },
   {
    "id": "zimmer",
    "name": "Zimmerausstattung",
    "wann": "Hotels, Ferienwohnungen, Eventräume und Exposés: Ausstattung zeigen, ohne zu verkaufen.",
    "werte": {
     "rezept": "boutique-hotel-gastgeber",
     "punkte": "5, nummeriert",
     "liste": "Hauptweg rechts neben dem Bild (7/5), Eintrag hervorgehoben in #FEF2E3, wenn seine Karte offen ist"
    }
   }
  ]
 }
}