Die farbige Oberkante der Kacheln ist zurueck

Aufgefallen an einem Screenshot: Bei einer Kachel lag oben ein lila
Streifen, bei den anderen fehlte jede Farbe.

Die Ursache war meine eigene Aenderung von gerade eben. Der
Glanzstreifen kam ins ::before -- dort wohnt aber schon die farbige
Oberkante (.wd-karte--kappe), und zwar seit dem urspruenglichen Bau der
Seite.

Ein Element hat nur ZWEI Pseudoelemente, und beide waren belegt: ::after
traegt den Lichtkegel, ::before die Kante. Der Glanz hat sich das
::before genommen und die Kante damit still ueberschrieben.

Warum es nur teilweise auffiel: ".wd-karte--lila.wd-karte--kappe::before"
hat zwei Klassen und damit mehr Gewicht als mein
".wd-karte::before" -- die lila Farbe blieb also stehen, die blaue
verschwand. Deshalb sah es aus wie ein Zufall statt wie ein Fehler.

DIE LOESUNG

Glanzstreifen und Lichtkegel teilen sich jetzt das ::after -- als zwei
Hintergrundebenen desselben Pseudoelements. Das ::before ist wieder
frei fuer die Oberkante.

Beides funktioniert unveraendert: Der Glanz wandert weiterhin mit der
Neigung (er nimmt --wd-nx in seinen Winkel auf), der Lichtkegel
weiterhin mit dem Zeiger.

DIE PRUEFUNG DAZU

Ein neuer Abschnitt in pruef-bewegung.mjs misst alle acht Kacheln mit
Oberkante: 5 Punkte Hoehe, ganz oben sitzend, Farbe vorhanden -- und
ausdruecklich BLAUE UND LILA zusammen. Haette der Test nur eine Sorte
angesehen, waere genau dieser Fehler wieder durchgerutscht, denn die
lila Fassung war ja nie kaputt.

Dazu die Gegenprobe, dass der Glanz nicht einfach verlorengegangen ist:
Das ::after muss beide Verlaeufe tragen.

Geprueft: 296 Pruefungen gruen (Bewegung 32, Portfolio 19, Verwaltung 62,
CRYONOVA 53, Blickfang 13, System 5, Abmelden 16, Abbruch 42,
Angebot 54).

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

assets/css/webdesign.css

@@ -687,32 +687,14 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   .wd-karte h2, .wd-karte h3 { transform: translateZ(28px); }
 
 
-  /* Ein schmales Licht, das ueber die Platte laeuft und mit der Neigung
-     wandert. */
-  .wd-karte::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    border-radius: inherit;
-    pointer-events: none;
-    background: linear-gradient(
-      calc(112deg + var(--wd-nx, 0) * 26deg),
-      transparent 34%,
-      rgb(255 255 255 / .06) 46%,
-      rgb(var(--wd-lumen) / .14) 50%,
-      rgb(255 255 255 / .06) 54%,
-      transparent 66%);
-    opacity: 0;
-    transition: opacity .3s ease;
-  }
-  .wd-karte:hover::before { opacity: 1; }
+  /* Der Glanzstreifen sitzt beim Lichtkegel im ::after -- siehe dort.
+     Das ::before bleibt frei fuer die farbige Oberkante
+     (.wd-karte--kappe), die es schon vor allen Lichteffekten gab. */
 }
 
 @media (prefers-reduced-motion: reduce) {
   .wd-karte, .wd-karte:hover { transform: none; transition: none; }
   .wd-karte > *, .wd-karte h2, .wd-karte h3 { transform: none; }
-  .wd-karte::before { display: none; }
 }
 
 /* =====================================================================
@@ -2346,12 +2328,31 @@ a.wd-karte:active, .wd-karte--klickbar:active {
        Grund, warum sich Licht wie Licht anfuehlt und nicht wie ein
        Schalter. */
     transition: opacity .30s ease;
-    background: radial-gradient(
-      220px circle at var(--wd-lichtx) var(--wd-lichty),
-      rgb(var(--wd-lumen) / .28),
-      rgb(var(--wd-lumen) / .10) 40%,
-      transparent 70%
-    );
+    /* ZWEI Ebenen: oben der Glanzstreifen, darunter der Lichtkegel.
+
+       Der Glanz lag zuerst im ::before -- und hat damit die farbige
+       Oberkante geloescht, die dort schon wohnt (.wd-karte--kappe).
+       Sichtbar war das als "bei einer Kachel Farbe oben, bei den
+       anderen keine": Die Lila-Fassung hat eine Klasse mehr und damit
+       mehr Gewicht, ihre Farbe blieb; die blaue verschwand.
+
+       Ein Element hat nur zwei Pseudoelemente. Beide waren belegt, also
+       teilen sich Glanz und Lichtkegel jetzt eines -- als zwei
+       Hintergrundebenen desselben ::after. */
+    background:
+      linear-gradient(
+        calc(112deg + var(--wd-nx, 0) * 26deg),
+        transparent 34%,
+        rgb(255 255 255 / .07) 46%,
+        rgb(var(--wd-lumen) / .16) 50%,
+        rgb(255 255 255 / .07) 54%,
+        transparent 66%),
+      radial-gradient(
+        220px circle at var(--wd-lichtx) var(--wd-lichty),
+        rgb(var(--wd-lumen) / .28),
+        rgb(var(--wd-lumen) / .10) 40%,
+        transparent 70%
+      );
   }
   .wd-karte:hover::after {
     opacity: 1;