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/css/webdesign.css

@@ -2016,3 +2016,117 @@ a.wd-karte:active, .wd-karte--klickbar:active {
 .wd .vw-paar dd, .wd .wr-pruef dd, .wd .wr-beleg dd {
   max-width: none;
 }
+
+/* =====================================================================
+   KACHELN: LICHT UNTER DEM ZEIGER  (23.08.2026)
+
+   Die Kacheln hatten Verlaufsrand, Verlaufsfläche, Schatten und
+   Lichtkante — alles richtig, alles statisch. Was fehlte, war das
+   Gefühl von MATERIAL: eine Oberfläche, die auf Licht reagiert.
+
+   Der Effekt: Ein weicher Lichtfleck folgt dem Zeiger über die Kachel.
+   Das ist kein Zierrat, sondern die Fortsetzung derselben Erzählung wie
+   bei der Lichtkante oben — es gibt eine Lichtquelle, und die Fläche
+   verhält sich, als wäre sie aus etwas.
+
+   VIER ENTSCHEIDUNGEN, DAMIT ES HOCHWERTIG UND NICHT BILLIG WIRKT
+
+   1. Sehr schwach. 13 % Deckkraft. Man soll es SPÜREN, nicht ANSEHEN.
+      Ein greller Fleck sieht nach Spielerei aus; ein kaum sichtbarer
+      nach teurem Material. Passt zugleich zur Dauervorgabe
+      "augenschonend" — nichts blitzt, nichts blendet.
+
+   2. Nur bei echtem Zeiger (hover: hover). Auf einem Handy gibt es
+      keinen Zeiger; dort bliebe ein Lichtfleck an einer zufälligen
+      Stelle kleben.
+
+   3. Die Farbe folgt der Kachel. Blaue Kacheln leuchten blau, lila
+      lila — sonst bräche der Effekt die Farbordnung, die überall sonst
+      Bedeutung trägt.
+
+   4. Aus bei prefers-reduced-motion. Auch wenn sich nichts bewegt:
+      Etwas, das dem Zeiger folgt, ist Bewegung.
+   ===================================================================== */
+@media (hover: hover) and (pointer: fine) {
+  .wd-karte {
+    /* Startwert oben mittig — falls die Kachel vor der ersten
+       Zeigerbewegung schon überfahren wird. */
+    --wd-lichtx: 50%;
+    --wd-lichty: 0%;
+    isolation: isolate;
+  }
+
+  .wd-karte::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    z-index: 0;
+    opacity: 0;
+    transition: opacity .28s ease;
+    background: radial-gradient(
+      380px circle at var(--wd-lichtx) var(--wd-lichty),
+      rgb(var(--wd-blau-rgb) / .22),
+      rgb(var(--wd-blau-rgb) / .08) 38%,
+      transparent 70%
+    );
+  }
+  .wd-karte--lila::after {
+    background: radial-gradient(
+      380px circle at var(--wd-lichtx) var(--wd-lichty),
+      rgb(var(--wd-lila-rgb) / .24),
+      rgb(var(--wd-lila-rgb) / .08) 38%,
+      transparent 70%
+    );
+  }
+  .wd-karte:hover::after { opacity: 1; }
+
+  /* DER RAND LEUCHTET MIT — und das ist der Teil, der auffällt.
+
+     Die Kachel hat schon zwei Hintergrundebenen: die Fläche
+     (padding-box) und den Verlaufsrand (border-box). Der Rand ist nur
+     einen Pixel breit, aber genau dort lässt sich Licht am stärksten
+     zeigen, ohne dass es kitschig wird.
+
+     Beim Überfahren bekommt die Randebene einen Lichtpunkt an derselben
+     Stelle wie die Fläche. Ergebnis: Die Kante glüht dort auf, wo der
+     Zeiger steht, und verläuft nach beiden Seiten aus. Ein Lichtfleck
+     OHNE mitleuchtende Kante wirkt wie ein Fleck AUF der Kachel; mit ihr
+     wirkt die ganze Kachel beleuchtet.
+
+     Die Fläche bleibt unverändert — sonst würde der Text flackern. */
+  .wd-karte:hover {
+    background:
+      linear-gradient(180deg, rgba(20, 32, 50, .72), rgba(9, 15, 26, .86)) padding-box,
+      radial-gradient(240px circle at var(--wd-lichtx) var(--wd-lichty),
+        rgb(var(--wd-blau-rgb) / .95),
+        rgb(var(--wd-blau-rgb) / .30) 42%,
+        rgb(var(--wd-lila-rgb) / .28) 100%) border-box;
+  }
+  .wd-karte--lila:hover {
+    background:
+      linear-gradient(180deg, rgba(26, 22, 48, .72), rgba(12, 10, 24, .88)) padding-box,
+      radial-gradient(240px circle at var(--wd-lichtx) var(--wd-lichty),
+        rgb(var(--wd-lila-rgb) / .95),
+        rgb(var(--wd-lila-rgb) / .30) 42%,
+        rgb(var(--wd-blau-rgb) / .26) 100%) border-box;
+  }
+
+  /* Der Inhalt muss ÜBER dem Lichtfleck liegen.
+
+     Ohne das legt sich der absolut gesetzte Lichtfleck über den Text —
+     absolut positionierte Elemente malen über normalen Fluss-Inhalt,
+     auch wenn sie im Quelltext davor stehen. Das Ergebnis wäre ein
+     leichter Schleier auf der Schrift, den man erst bemerkt, wenn man
+     zwei Kacheln nebeneinander vergleicht. */
+  .wd-karte > * { position: relative; z-index: 1; }
+
+  /* Der Rand zieht mit. Ein Lichtfleck ohne mitleuchtende Kante wirkt
+     wie ein Fleck AUF der Kachel statt wie Licht darauf. */
+  .wd-karte { transition: border-color .28s ease, box-shadow .18s cubic-bezier(.2,.8,.3,1), transform .18s cubic-bezier(.2,.8,.3,1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wd-karte::after { display: none; }
+}