{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "nachbarn-reagieren-hover",
 "name": "Nachbarn reagieren auf Hover",
 "name_en": "Sibling-aware hover / proximity feedback / focus dimming",
 "kurz": "Fährt der Zeiger über eine Kachel, treten die Nachbarn zurück, machen Platz oder reagieren nach Nähe.",
 "kategorie": "Hover",
 "kategorie_slug": "hover",
 "kategorie_nr": 7,
 "bau_chat": "C4",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "editorial"
 ],
 "stimmung_roh": [
  "ruhig",
  "fokussiert",
  "editorial"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "gsap"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Fährt der Zeiger über ein Element einer Gruppe, reagieren auch die anderen: Sie dimmen ab, werden unscharf, weichen aus oder machen Platz. Mit :has() geht das rein in CSS. Näherungsvarianten reagieren schon auf den Abstand zum Zeiger und verändern sich stufenlos.",
  "warum_es_wirkt": "Lenkt den Blick, ohne ein neues Element einzuführen. Das gezeigte Element tritt hervor, weil die anderen zurücktreten, und die ganze Gruppe atmet mit. Seit :has() ist das eine Zeile CSS und deshalb in Indexlisten und Menüs weit verbreitet.",
  "wann_einsetzen": "Projektlisten, Navigationen und Menü-Overlays, Logo-Wände, Kartenreihen, Kategorie-Kacheln im Shop.",
  "wann_nicht": "Wenn die Nachbarn Inhalte tragen, die beim Lesen sichtbar bleiben müssen, etwa Preise im direkten Vergleich. Zu starkes Dimmen drückt den Kontrast unter WCAG. Platz machen passt nicht zu Produktlisten, deren Kacheln einheitlich bleiben sollen.",
  "varianten": [
   "Dimmen: Geschwister per :has() auf Deckkraft 0.4",
   "Unschärfe: Geschwister mit filter: blur(2px)",
   "Platz machen: Das gezeigte Element wächst, die Nachbarn werden schmaler (flex-grow oder Spalten mit fr-Werten)",
   "Wegschieben: Grid-Elemente weichen dem gezeigten Element aus",
   "Nähe: Die Wirkung nimmt mit dem Abstand zum Zeiger ab"
  ],
  "umsetzung": "Dimmen in CSS: .liste:has(> li:is(:hover, :focus-visible)) > li:not(:is(:hover, :focus-visible)) { opacity: .4 }. Die Hover-Regel gehört unter @media (hover: hover) and (pointer: fine). Platz machen: li { flex: 1 1 0; transition: flex-grow 400ms } und li:has(a:hover) { flex-grow: 2.4 }. Spalten mit fr-Werten lassen sich nicht über @property animieren, dafür JS oder Flip nehmen. Nähe: Bei pointermove für jedes Element den Abstand d zum Zeiger messen, p = clamp(1 − d / radius, 0, 1) als Custom Property --p setzen und in CSS mit calc() für opacity und scale nutzen.",
  "mobil": "Kein Hover. Erstes Tippen wählt ein Element aus und nutzt denselben Stil, zweites Tippen öffnet den Link. Auf dem Telefon wird die Reihe zur Spalte, flex-grow wirkt dann auf die Höhe.",
  "reduzierte_bewegung": "Deckkraftwechsel bleiben, sie sind unkritisch. Breitenänderung, Heben und Skalieren entfallen, Platz machen wird zu Dimmen.",
  "barrierefreiheit": ":focus-visible genauso behandeln wie :hover. Gedimmter Text muss lesbar bleiben, mindestens 3:1, für normale Schrift besser 4.5:1. Deshalb Bilder stärker dimmen als Text, in der Demo Bild 0.4 und Text 0.7."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Dimmen auf 0.4",
  "sonstiges": "Fokus-Variante über :has(a:focus-visible)",
  "herkunft": "beobachtet",
  "quelle": "https://www.wearecollins.com/"
 },
 "kurve": {
  "bezier": [
   0.0,
   0.0,
   0.2,
   1.0
  ],
  "css": "cubic-bezier(0, 0, 0.2, 1)",
  "name": "eigene Kurve",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Codrops ProximityFeedback (Repo)",
   "url": "https://github.com/codrops/ProximityFeedback",
   "auszeichnung": "",
   "beobachtung": "Ideen für progressives Hover-Feedback abhängig von der Nähe des Cursors.",
   "art": "demo"
  },
  {
   "seite": "Codrops PushGridItems (Repo)",
   "url": "https://github.com/codrops/PushGridItems",
   "auszeichnung": "",
   "beobachtung": "Grid-Item-Animationen nach einem Konzept von Rémi Clauss.",
   "art": "demo"
  },
  {
   "seite": "Codrops MakeWayGridEffect (Repo)",
   "url": "https://github.com/codrops/MakeWayGridEffect",
   "auszeichnung": "",
   "beobachtung": "Nachbarelemente machen einem wachsenden Element Platz.",
   "art": "demo"
  },
  {
   "seite": "Collins",
   "url": "https://www.wearecollins.com/",
   "auszeichnung": "",
   "beobachtung": "ul:has(a:hover) .program{opacity:.4} (nur any-pointer:fine) plus per Anchor Positioning platziertes Highlight-Pill (position-anchor --thumb); gleiches für :focus-visible.",
   "art": "website"
  },
  {
   "seite": "Osmo",
   "url": "https://www.osmo.supply/",
   "auszeichnung": "",
   "beobachtung": ".continent-row:has(.continent-col:hover) .continent-col:not(:hover): Spalten klappen zu (grid-template-columns 0fr), Basisbild wird sichtbar.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops ProximityFeedback (Repo)",
   "url": "https://github.com/codrops/ProximityFeedback"
  }
 ],
 "kombinierbar_mit": [
  "listen-hover-bildvorschau",
  "unterstreichung-varianten",
  "graustufen-zu-farbe"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hover/nachbarn-reagieren-hover/",
  "meta": "https://cecodesign.de/lab/fundus/hover/nachbarn-reagieren-hover/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hover/nachbarn-reagieren-hover/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 2 Produktionsbelege, beide rein CSS mit :has()."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Fährt der Zeiger über eine Kachel, treten die Nachbarn zurück, machen Platz oder reagieren nach Nähe.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0, 0, 0.2, 1) (Hover-Kurve des Rezepts d2c-produkt-zuerst)",
   "dimmen": {
    "selektor": ".reihe:has(.kachel:hover) .kachel:not(:hover), Hover nur unter @media (hover: hover) and (pointer: fine), dazu :focus-visible",
    "deckkraft_bild": 0.4,
    "deckkraft_text": 0.7,
    "dauer_an_ms": 200,
    "dauer_aus_ms": 150
   },
   "platz_machen": {
    "flex_grow": "1 → 2.4",
    "dauer_ms": 400,
    "zusatzinfo_ein": "opacity 200 ms, 120 ms Verzögerung",
    "zusatzinfo_aus": "opacity 100 ms",
    "bildausschnitt": "SVG viewBox 400×240, preserveAspectRatio xMidYMid slice; Nebenstücke blenden 200 ms (120 ms verzögert) ein"
   },
   "naehe": {
    "radius_px": 320,
    "formel": "p = clamp(1 − d / r, 0, 1), d = Abstand Zeiger zum nächsten Punkt der Kachel",
    "wirkzone_rand_px": 60,
    "deckkraft_bild": "0.4 + 0.6 p",
    "deckkraft_text": "0.7 + 0.3 p",
    "heben_px": "12 p",
    "scale": "1 + 0.06 p",
    "glaettung_ms": 200
   },
   "kontrast": "Produktname gedimmt 5,3:1, Preis (#595959) gedimmt 3:1 auf #ece9e2",
   "vorfuehrung": "7200 ms je Variante, Folge Dimmen → Platz machen → Nähe"
  },
  "ausloeser": "hover",
  "touch": "Reihe wird unter 640 px zur Spalte (flex-grow wirkt auf die Höhe). Erstes Tippen wählt eine Kachel aus und nutzt denselben Stil wie Hover, zweites Tippen würde öffnen; Tippen daneben hebt die Auswahl auf. Nähe wird auf Touch zur Auswahl (gewählte Kachel p = 1).",
  "reduziert": "Nur Deckkraft: Dimmen bleibt (150–200 ms), Platz machen ändert keine Breite und dimmt stattdessen die Nachbarn, Nähe ohne Heben und Skalieren.",
  "korrekturen": {
   "beschreibung": "Fährt der Zeiger über ein Element einer Gruppe, reagieren auch die anderen: Sie dimmen ab, werden unscharf, weichen aus oder machen Platz. Mit :has() geht das rein in CSS. Näherungsvarianten reagieren schon auf den Abstand zum Zeiger und verändern sich stufenlos.",
   "warum_es_wirkt": "Lenkt den Blick, ohne ein neues Element einzuführen. Das gezeigte Element tritt hervor, weil die anderen zurücktreten, und die ganze Gruppe atmet mit. Seit :has() ist das eine Zeile CSS und deshalb in Indexlisten und Menüs weit verbreitet.",
   "wann_einsetzen": "Projektlisten, Navigationen und Menü-Overlays, Logo-Wände, Kartenreihen, Kategorie-Kacheln im Shop.",
   "wann_nicht": "Wenn die Nachbarn Inhalte tragen, die beim Lesen sichtbar bleiben müssen, etwa Preise im direkten Vergleich. Zu starkes Dimmen drückt den Kontrast unter WCAG. Platz machen passt nicht zu Produktlisten, deren Kacheln einheitlich bleiben sollen.",
   "varianten": [
    "Dimmen: Geschwister per :has() auf Deckkraft 0.4",
    "Unschärfe: Geschwister mit filter: blur(2px)",
    "Platz machen: Das gezeigte Element wächst, die Nachbarn werden schmaler (flex-grow oder Spalten mit fr-Werten)",
    "Wegschieben: Grid-Elemente weichen dem gezeigten Element aus",
    "Nähe: Die Wirkung nimmt mit dem Abstand zum Zeiger ab"
   ],
   "umsetzung": "Dimmen in CSS: .liste:has(> li:is(:hover, :focus-visible)) > li:not(:is(:hover, :focus-visible)) { opacity: .4 }. Die Hover-Regel gehört unter @media (hover: hover) and (pointer: fine). Platz machen: li { flex: 1 1 0; transition: flex-grow 400ms } und li:has(a:hover) { flex-grow: 2.4 }. Spalten mit fr-Werten lassen sich nicht über @property animieren, dafür JS oder Flip nehmen. Nähe: Bei pointermove für jedes Element den Abstand d zum Zeiger messen, p = clamp(1 − d / radius, 0, 1) als Custom Property --p setzen und in CSS mit calc() für opacity und scale nutzen.",
   "mobil": "Kein Hover. Erstes Tippen wählt ein Element aus und nutzt denselben Stil, zweites Tippen öffnet den Link. Auf dem Telefon wird die Reihe zur Spalte, flex-grow wirkt dann auf die Höhe.",
   "reduzierte_bewegung": "Deckkraftwechsel bleiben, sie sind unkritisch. Breitenänderung, Heben und Skalieren entfallen, Platz machen wird zu Dimmen.",
   "barrierefreiheit": ":focus-visible genauso behandeln wie :hover. Gedimmter Text muss lesbar bleiben, mindestens 3:1, für normale Schrift besser 4.5:1. Deshalb Bilder stärker dimmen als Text, in der Demo Bild 0.4 und Text 0.7."
  },
  "geprueft": "01.11.2026",
  "notiz": "Kategorie-Kacheln eines erfundenen Steinzeug-Shops aus Lübeck (Hafenton) im Rezept d2c-produkt-zuerst: Young Serif für den Claim, Instrument Sans für UI und Preise, Kachelton #ece9e2, Backsteinrot als Markenakzent. Bildwelt komplett als SVG (Ton, getauchte Glasur mit Tropfen, Sprenkel, Glanz). Drei Varianten per Umschalter: Dimmen (reines CSS mit :has()), Platz machen (flex-grow, der SVG-Ausschnitt zeigt in der breiten Kachel Nebenstücke) und Nähe (JS setzt --p). Die Vorführung wechselt je Runde die Variante. Text wird schwächer gedimmt als Bild (0.7 statt 0.4), damit der Kontrast hält. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: --leise #6B6B6B auf #666666 (4,7:1 auf Kachel), Kopfzeile unter 360 px mit engeren Abständen (kein Querscrollen bei 320 px), Knopfrahmen im Kontrastmodus."
 }
}