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]>

webdesign/ablauf.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 <style>
   /* Zeitstrahl: die Linie verbindet die Nummernkreise. Sie liegt hinter
      den Kreisen (z-index) und endet beim letzten Schritt, damit sie nicht
@@ -183,7 +183,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-ablauf.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
+<script src="/assets/js/i18n-wd-ablauf.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
 </body>
 </html>

webdesign/anfrage.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 <style>
   /* ---------- Schrittanzeige ----------
      Zeigt alle vier Schritte gleichzeitig statt nur "3 von 4". Man sieht
@@ -418,8 +418,8 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-anfrage.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-anfrage.js?v=20260823wd18"></script>
+<script src="/assets/js/i18n-wd-anfrage.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-anfrage.js?v=20260823wd19"></script>
 </body>
 </html>

webdesign/faq.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 <style>
   .fq-thema { scroll-margin-top: 90px; }
   .fq-thema + .fq-thema { margin-top: clamp(2rem, 4vw, 3rem); }
@@ -195,7 +195,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-faq.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
+<script src="/assets/js/i18n-wd-faq.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
 </body>
 </html>

webdesign/index.html

@@ -16,8 +16,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 <style>
   /* ---------- Nur auf der Startseite gebraucht ---------- */
 
@@ -407,8 +407,8 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-index.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
+<script src="/assets/js/i18n-wd-index.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
 <script>
 /* ---------------------------------------------------------------------
    Marken-Intro (Masterplan S.3, Schritt 02: "Nach erfolgreichem Code

webdesign/leistungen.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 <style>
   /* Sprungmarken.
      Frueher eine waagerecht wischbare Leiste. Rueckmeldung 22.08.2026:
@@ -331,7 +331,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-leistungen.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
+<script src="/assets/js/i18n-wd-leistungen.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
 </body>
 </html>

webdesign/portal.html

@@ -12,8 +12,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 <style>
   .po-login { max-width: 440px; margin: clamp(1.5rem,6vh,4rem) auto; }
 
@@ -134,8 +134,8 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-portal.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-portal.js?v=20260823wd18"></script>
+<script src="/assets/js/i18n-wd-portal.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-portal.js?v=20260823wd19"></script>
 </body>
 </html>

webdesign/portfolio.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 <style>
   .pfo-projekt { overflow: hidden; padding: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
   .pfo-bild {
@@ -192,7 +192,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-portfolio.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
+<script src="/assets/js/i18n-wd-portfolio.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
 </body>
 </html>

webdesign/preise.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 <style>
   .pr-preis-gross { font-family: var(--font-head); font-weight: 800; color: var(--wd-blau); white-space: nowrap; }
 
@@ -196,7 +196,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-preise.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
+<script src="/assets/js/i18n-wd-preise.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
 </body>
 </html>

webdesign/rechtliches.html

@@ -8,8 +8,8 @@
 <link rel="icon" type="image/png" href="/assets/img/favicon.png" />
 <link rel="manifest" href="/webdesign/app.webmanifest" />
 <meta name="theme-color" content="#05070b" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 </head>
 <body class="wd">
 <div id="wd-kopf"></div>
@@ -400,6 +400,6 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
 </body>
 </html>

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-v18";
+const CACHE_NAME = "dogfather-webdesign-v19";
 
 /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
    HTML-Datei in dieser Liste. */

webdesign/ueber.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 <style>
   .ue-kopf { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
   /* Auf dem Handy zuerst der Text, dann das Bild: sonst schiebt ein
@@ -127,7 +127,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-ueber.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
+<script src="/assets/js/i18n-wd-ueber.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
 </body>
 </html>

webdesign/verwaltung.html

@@ -11,8 +11,8 @@
 <link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-title" content="DF Verwaltung" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 <style>
   /* =====================================================================
      Verwaltungsbereich — bewusst NUR AUF DEUTSCH.
@@ -761,7 +761,7 @@
   <div class="vw-detail-blatt" id="vw-detail-blatt"></div>
 </div>
 
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
 <script>
 /* =====================================================================
    Verwaltung: Anfragen ansehen, Status ändern, Notizen, Archivieren.

webdesign/widerruf.html

@@ -9,8 +9,8 @@
 <link rel="icon" type="image/png" href="/assets/img/favicon.png" />
 <link rel="manifest" href="/webdesign/app.webmanifest" />
 <meta name="theme-color" content="#05070b" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 </head>
 <body class="wd">
 <div id="wd-kopf"></div>
@@ -137,8 +137,8 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-widerruf.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-widerruf.js?v=20260823wd18"></script>
+<script src="/assets/js/i18n-wd-widerruf.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-widerruf.js?v=20260823wd19"></script>
 </body>
 </html>

webdesign/zugang.html

@@ -21,8 +21,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd18" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd18" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
 <style>
   /* =====================================================================
      Zugangswand — nur hier gebraucht, deshalb bewusst NICHT in
@@ -177,8 +177,8 @@
   </div>
 </main>
 
-<script src="/assets/js/i18n-wd-zugang.js?v=20260823wd18"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd18"></script>
+<script src="/assets/js/i18n-wd-zugang.js?v=20260823wd19"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
 <script>
 (function () {
   "use strict";