Kacheln: Licht folgt dem Zeiger, Rand glueht mit

"ich will das die kacheln richtig speziell sind und modern ... dass viel
mehr auffaellt und doch modern und profissionell"

Die Kacheln hatten Verlaufsrand, Verlaufsflaeche, Schatten und
Lichtkante -- alles richtig, alles STATISCH. Was fehlte, war das Gefuehl
von Material: eine Flaeche, die auf Licht reagiert.

ZWEI EBENEN

Ein weicher Lichtfleck folgt dem Zeiger ueber die Flaeche. Und -- der
Teil, der wirklich auffaellt -- der RAND glueht an derselben Stelle auf
und verlaeuft nach beiden Seiten aus.

Das geht ohne zusaetzliches Element: Die Kachel hat bereits zwei
Hintergrundebenen (Flaeche padding-box, Verlaufsrand border-box). Beim
Ueberfahren bekommt die Randebene einen Lichtpunkt an der Zeigerstelle.
Der Rand ist nur einen Pixel breit -- genau dort laesst sich Licht am
staerksten zeigen, ohne kitschig zu werden. Ein Lichtfleck OHNE
mitleuchtende Kante wirkt wie ein Fleck AUF der Kachel; mit ihr wirkt
die ganze Kachel beleuchtet.

Die Flaeche selbst bleibt beim Ueberfahren unveraendert -- sonst wuerde
der Text flackern.

VIER ENTSCHEIDUNGEN GEGEN BILLIGE OPTIK

Die Farbe folgt der Kachel: blaue leuchten blau, lila lila. Sonst braeche
der Effekt die Farbordnung, die ueberall sonst Bedeutung traegt.

Nur bei echtem Zeiger (hover: hover, pointer: fine). Auf dem Handy gibt
es keinen; dort bliebe der Lichtfleck an einer zufaelligen Stelle kleben.

Aus bei prefers-reduced-motion. Auch wenn sich nichts bewegt: Etwas, das
dem Zeiger folgt, ist Bewegung.

Erste Fassung war mit 13 % zu zurueckhaltend -- am Screenshot geprueft
und auf 22 % angehoben. "Man soll es spueren" ist richtig, aber es muss
auch ankommen.

SPARSAM GEBAUT

EIN Zuhoerer am Dokument statt einem je Kachel -- sonst muesste jede
nachgeladene Kachel einzeln nachgeruestet werden. Geschrieben wird erst
im naechsten Bildaufbau: Der Zeiger meldet sich bis zu tausendmal je
Sekunde, der Bildschirm zeichnet sechzigmal; ohne Drosselung rechnet der
Browser neunhundertmal umsonst.

Der Inhalt bekommt z-index 1. Ohne das legt sich der absolut gesetzte
Lichtfleck ueber den Text -- absolut positionierte Elemente malen ueber
Fluss-Inhalt, auch wenn sie im Quelltext davor stehen. Das Ergebnis waere
ein Schleier auf der Schrift, den man erst beim Vergleich zweier Kacheln
bemerkt. Eigens geprueft.

GEPRUEFT: 7 Pruefungen fuer den Effekt selbst -- unsichtbar im
Ruhezustand, erscheint beim Ueberfahren, folgt dem Zeiger auf 6 Pixel
genau, Inhalt liegt darueber, lila Kacheln leuchten lila, bei
Bewegungsempfindlichkeit vollstaendig abgeschaltet.

Gestaltung 0 Befunde, Designsystem 5, Verwaltung 69, Portal 32.

Versionsstempel und Cache auf v19.

Co-Authored-By: Claude Opus 5 <[email protected]>

assets/js/wd-core.js

@@ -871,6 +871,53 @@
   } else {
     start();
   }
+  lichtStarten();
+
+  /* ===================================================================
+     LICHT UNTER DEM ZEIGER
+
+     Setzt zwei Variablen auf der überfahrenen Kachel; die eigentliche
+     Darstellung macht das CSS. So bleibt hier nur Rechnen, kein Malen.
+
+     DREI DINGE, DIE ES SPARSAM HALTEN
+
+     1. EIN Zuhörer am Dokument statt einem je Kachel. Bei zwanzig
+        Kacheln wären das zwanzig — und jede müsste beim Nachladen neuer
+        Inhalte einzeln nachgerüstet werden.
+
+     2. Geschrieben wird erst im nächsten Bildaufbau
+        (requestAnimationFrame). Der Zeiger meldet sich bis zu tausendmal
+        je Sekunde; der Bildschirm zeichnet sechzigmal. Ohne diese
+        Drosselung rechnet der Browser neunhundert Mal umsonst.
+
+     3. Gar nicht erst starten, wenn es keinen echten Zeiger gibt oder
+        Bewegung unerwünscht ist. Auf dem Handy bliebe der Lichtfleck an
+        einer zufälligen Stelle kleben.
+     =================================================================== */
+  function lichtStarten() {
+    if (!window.matchMedia) return;
+    if (!window.matchMedia("(hover: hover) and (pointer: fine)").matches) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    var offen = false;
+    var letzte = null;
+
+    document.addEventListener("pointermove", function (e) {
+      var karte = e.target && e.target.closest ? e.target.closest(".wd-karte") : null;
+      if (!karte) return;
+      letzte = { karte: karte, x: e.clientX, y: e.clientY };
+      if (offen) return;
+      offen = true;
+      requestAnimationFrame(function () {
+        offen = false;
+        if (!letzte) return;
+        var k = letzte.karte;
+        var r = k.getBoundingClientRect();
+        k.style.setProperty("--wd-lichtx", (letzte.x - r.left) + "px");
+        k.style.setProperty("--wd-lichty", (letzte.y - r.top) + "px");
+      });
+    }, { passive: true });
+  }
 
   /* Nach außen sichtbare Schnittstelle für seiteneigene Skripte. */
   window.WD = {