diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css
index fa3030c1..a6cd31e0 100644
--- a/assets/css/webdesign.css
+++ b/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;
diff --git a/blickfang-ueber-handy.png b/blickfang-ueber-handy.png
index a47d229a..c301e1b4 100644
Binary files a/blickfang-ueber-handy.png and b/blickfang-ueber-handy.png differ
diff --git a/blickfang-ueber-pc.png b/blickfang-ueber-pc.png
index 76de3a55..8b3853c1 100644
Binary files a/blickfang-ueber-pc.png and b/blickfang-ueber-pc.png differ
diff --git a/pruef-bewegung.mjs b/pruef-bewegung.mjs
index 44bd17ef..f400f180 100644
--- a/pruef-bewegung.mjs
+++ b/pruef-bewegung.mjs
@@ -129,6 +129,49 @@ srv.listen(4405, async () => {
     einblendung ? `translate: ${einblendung.translate}` : "kein .wd-auf gefunden");
   await s2.close();
 
+  console.log("\n2b. DIE FARBIGE OBERKANTE DARF NICHT VERSCHWINDEN");
+  const s3 = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+  await s3.goto("http://127.0.0.1:4405/webdesign/index.html");
+  await s3.waitForTimeout(4500);
+  const kappen = await s3.evaluate(() =>
+    [...document.querySelectorAll(".wd-karte--kappe")].slice(0, 8).map((k) => {
+      const v = getComputedStyle(k, "::before");
+      return {
+        lila: k.classList.contains("wd-karte--lila"),
+        hoehe: parseFloat(v.height),
+        oben: parseFloat(v.top),
+        farbig: /gradient/.test(v.backgroundImage),
+      };
+    }));
+  pruefe("es gibt Kacheln mit Oberkante", kappen.length > 0, kappen.length + " Stueck");
+
+  /* Das ist der Kern: Ein Element hat nur ZWEI Pseudoelemente. Der
+     Glanzstreifen lag zuerst ebenfalls im ::before und hat die farbige
+     Oberkante stillschweigend geloescht -- sichtbar 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. Deshalb wird hier ausdruecklich BEIDES geprueft. */
+  pruefe("jede davon hat eine 5 Punkte hohe Kante ganz oben",
+    kappen.every((k) => k.hoehe === 5 && k.oben === 0),
+    kappen.map((k) => k.hoehe + "px").join(" "));
+  pruefe("und jede traegt Farbe", kappen.every((k) => k.farbig),
+    kappen.filter((k) => k.farbig).length + " von " + kappen.length);
+  pruefe("blaue UND lila Kacheln sind dabei",
+    kappen.some((k) => k.lila) && kappen.some((k) => !k.lila),
+    kappen.filter((k) => k.lila).length + " lila, " +
+    kappen.filter((k) => !k.lila).length + " blau");
+
+  /* Der Glanz muss trotzdem noch da sein -- er ist jetzt die erste von
+     zwei Hintergrundebenen im ::after. */
+  const glanz = await s3.evaluate(() => {
+    const k = document.querySelector(".wd-karte");
+    return getComputedStyle(k, "::after").backgroundImage;
+  });
+  pruefe("der Glanzstreifen liegt jetzt beim Lichtkegel",
+    /linear-gradient/.test(glanz) && /radial-gradient/.test(glanz),
+    (glanz.match(/gradient/g) || []).length + " Verlaeufe");
+  await s3.close();
+
   console.log("\n3. BEI REDUZIERTER BEWEGUNG IST ALLES AUS");
   const ruhig = await browser.newPage({
     viewport: { width: 1440, height: 900 }, reducedMotion: "reduce" });
diff --git a/pruef-vw-schmuck-computer.png b/pruef-vw-schmuck-computer.png
index ebd291ee..c0a5f7e9 100644
Binary files a/pruef-vw-schmuck-computer.png and b/pruef-vw-schmuck-computer.png differ
diff --git a/pruef-vw-schmuck-handy.png b/pruef-vw-schmuck-handy.png
index d57584b9..442aea55 100644
Binary files a/pruef-vw-schmuck-handy.png and b/pruef-vw-schmuck-handy.png differ
diff --git a/webdesign/sw.js b/webdesign/sw.js
index 45046bb9..6fafaeb1 100644
--- a/webdesign/sw.js
+++ b/webdesign/sw.js
@@ -34,7 +34,7 @@
    Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
    Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
    Stand fest. */
-const CACHE_NAME = "dogfather-webdesign-v44";
+const CACHE_NAME = "dogfather-webdesign-v45";
 
 /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
    HTML-Datei in dieser Liste. */