Gestaltung: Hoehensystem -- mehrschichtige Schatten und Lichtkante

Bis hierher trug jede Karte EINEN Schatten. Das ist solide und genau der
Grund, warum eine Oberflaeche "ordentlich" statt "teuer" wirkt.

Echtes Licht erzeugt zwei Dinge gleichzeitig: einen engen, dunklen
Kontaktschatten an der Kante -- er sagt dem Auge, dass etwas AUFLIEGT --
und einen weiten, weichen Umgebungsschatten, der sagt, wie HOCH es
darueber schwebt. Nur einen von beiden zu setzen sieht aus wie ein
Aufkleber; beide zusammen ergeben einen Gegenstand.

Dazu die LICHTKANTE: eine 1 Pixel hohe, sehr schwache weisse Linie an der
Oberkante. Sie tut so, als kaeme das Licht von oben und braeche sich an
der Kante. Das ist das meistuebersehene Detail in dunklen Oberflaechen
und dasjenige mit der groessten Wirkung -- ohne sie wirkt eine Karte wie
ein Loch im Hintergrund, mit ihr wie ein Stueck Material.

Drei Stufen, mehr braucht es nicht: ruhende Flaechen, hervorgehobene
Flaechen, Schwebendes. Dazu eine vierte, umgekehrte fuer Eingabefelder:
Die liegen nicht AUF der Flaeche, sie sind hineingeschnitten -- oben
dunkel, unten hell.

Weil es die gemeinsamen Bausteine sind, wirkt es sofort auf allen 13
Seiten: Hauptseite, Portal und Verwaltung.

Dazu Feinheiten, die einzeln niemand bemerkt und in Summe den
Unterschied machen: Uebergaenge auf 160-180 ms verkuerzt (alles darueber
wirkt beim Ueberfahren traege), eigene Rueckmeldung beim Druecken,
optische Laufweitenkorrektur fuer grosse Ueberschriften (-.028em bei h1;
das Auge sieht bei 48px mehr Weissraum zwischen Buchstaben als bei 16px),
text-wrap: balance gegen einzelne Woerter in der letzten Zeile.

EIN FEHLER BEIM EINBAU, GEMESSEN STATT UEBERSEHEN

Nach dem ersten Durchgang hatten die Karten ihre Lichtkante, der
Hauptknopf nicht. Grund: Die Grundregel lautet
".wd .wd-btn--haupt, .wd-btn--haupt" -- der erste Teil zaehlt ZWEI
Klassen. Mein Nachtrag zaehlte eine und verlor, obwohl er spaeter steht.
Dieselbe Falle wie am 22.08.2026 bei ".wd a" gegen ".wd-btn--haupt".
Aufgefallen nur, weil die Pruefung die Lichtkanten ZAEHLT.

PRUEFWERKZEUGE ANGEPASST

diagnose.html ist jetzt ausgenommen. Sie traegt bewusst alles fest in
sich -- eigene Farben, keine Uebersetzung -- weil sie funktionieren muss,
wenn genau das kaputt ist, was sie untersucht. Sie an den Regeln der
eigentlichen Seite zu messen erzeugte zwei Meldungen, die man auf Dauer
wegsieht. Und irgendwann sieht man dann auch eine echte weg.

ALLES GRUEN: Gestaltung 0 Befunde (12 Seiten x 5 Sprachen gegen
WCAG 2.2 AA), Designsystem 5, Verwaltung 69, Portal 32.

Versionsstempel und Cache auf v17.

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

assets/css/webdesign.css

@@ -1756,3 +1756,169 @@ button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgb(var(-
   font-size: .93rem;
 }
 .rl-formular p { margin: 0 0 .6rem; }
+
+/* =====================================================================
+   FEINSCHLIFF — das Höhensystem  (23.08.2026)
+
+   Bis hierher trug jede Karte EINEN Schatten: 0 24px 60px -28px. Das ist
+   solide, aber es ist auch der Grund, warum eine Oberfläche "ordentlich"
+   statt "teuer" wirkt.
+
+   Echtes Licht erzeugt zwei Dinge gleichzeitig:
+
+     1. einen engen, dunklen Kontaktschatten direkt an der Kante — er
+        sagt dem Auge, dass ein Gegenstand AUFLIEGT
+     2. einen weiten, weichen Umgebungsschatten — er sagt, wie HOCH er
+        darüber schwebt
+
+   Nur einen von beiden zu setzen, sieht aus wie ein Aufkleber. Beide
+   zusammen ergeben einen Gegenstand.
+
+   Dazu kommt die LICHTKANTE: eine 1 Pixel hohe, sehr schwache weisse
+   Linie an der Oberkante (inset 0 1px 0). Sie tut so, als käme das Licht
+   von oben und bräche sich an der Kante. Das ist das meistübersehene
+   Detail in dunklen Oberflächen — und dasjenige, das den grössten
+   Unterschied macht. Ohne sie wirkt eine Karte wie ein Loch im
+   Hintergrund; mit ihr wie ein Stück Material.
+
+   Drei Stufen, mehr braucht es nicht:
+     1  ruhende Flächen (Karten, Felder)
+     2  hervorgehobene Flächen (aktive Karte, Knopf)
+     3  Schwebendes (Fenster, Menü)
+   ===================================================================== */
+:root {
+  /* Kontaktschatten + Umgebungsschatten + Lichtkante, in dieser
+     Reihenfolge — die Lichtkante zuletzt, damit sie über allem liegt. */
+  --wd-hoehe-1:
+    0 1px 2px rgba(0, 0, 0, .40),
+    0 10px 28px -12px rgba(0, 0, 0, .70),
+    inset 0 1px 0 rgba(255, 255, 255, .055);
+  --wd-hoehe-2:
+    0 2px 4px rgba(0, 0, 0, .45),
+    0 18px 44px -16px rgba(0, 0, 0, .80),
+    inset 0 1px 0 rgba(255, 255, 255, .075);
+  --wd-hoehe-3:
+    0 4px 8px rgba(0, 0, 0, .50),
+    0 40px 90px -30px rgba(0, 0, 0, .92),
+    inset 0 1px 0 rgba(255, 255, 255, .09);
+
+  /* Vertiefte Flächen — Eingabefelder liegen NICHT auf der Oberfläche,
+     sie sind hineingeschnitten. Derselbe Lichteinfall, nur umgekehrt:
+     oben dunkel (Schattenkante), unten hell. */
+  --wd-tiefe:
+    inset 0 1px 2px rgba(0, 0, 0, .35),
+    inset 0 -1px 0 rgba(255, 255, 255, .03);
+}
+
+/* ---------- Karten ---------- */
+.wd-karte {
+  box-shadow: var(--wd-hoehe-1);
+  /* Etwas schneller als der bisherige Standard: Bei Flächen, die man
+     überfährt, wirkt alles über 200 ms träge. */
+  transition:
+    transform .18s cubic-bezier(.2, .8, .3, 1),
+    box-shadow .18s cubic-bezier(.2, .8, .3, 1),
+    border-color .18s ease;
+}
+a.wd-karte:hover, .wd-karte--klickbar:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--wd-hoehe-3), 0 0 40px -22px rgb(var(--wd-blau-rgb) / .5);
+}
+/* Beim Drücken zurück auf die Fläche — ohne das fehlt die Rückmeldung,
+   dass der Klick angekommen ist. */
+a.wd-karte:active, .wd-karte--klickbar:active {
+  transform: translateY(-1px);
+  box-shadow: var(--wd-hoehe-1);
+  transition-duration: .06s;
+}
+
+/* ---------- Knöpfe ---------- */
+.wd-btn {
+  transition:
+    transform .16s cubic-bezier(.2, .8, .3, 1),
+    box-shadow .16s cubic-bezier(.2, .8, .3, 1),
+    background .16s ease, border-color .16s ease, color .16s ease;
+}
+/* Der Hauptknopf ist hell auf dunklem Grund. Seine Lichtkante gehört
+   deshalb nach INNEN und heller — sie lässt die Fläche gewölbt wirken
+   statt flach aufgeklebt. */
+/* ⚠️ Die Gewichtung muss zur Grundregel passen.
+
+   Weiter oben steht ".wd .wd-btn--haupt, .wd-btn--haupt { ... }" -- der
+   erste Teil zaehlt ZWEI Klassen. Ein blosses ".wd-btn--haupt" hier
+   unten zaehlt eine und verliert, obwohl es spaeter steht. Beim ersten
+   Versuch blieb der Hauptknopf deshalb ohne Lichtkante, waehrend die
+   Karten sie schon hatten -- gemessen, nicht vermutet.
+
+   Dieselbe Falle wie am 22.08.2026 bei ".wd a" gegen ".wd-btn--haupt".
+   Wer in dieser Datei etwas nachtraegt, muss die Gewichtung der
+   Grundregel uebernehmen, nicht nur die Reihenfolge. */
+.wd .wd-btn--haupt, .wd-btn--haupt {
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, .35),
+    0 10px 26px -12px rgb(var(--wd-blau-rgb) / .55),
+    inset 0 1px 0 rgba(255, 255, 255, .45);
+}
+.wd .wd-btn--haupt:hover, .wd-btn--haupt:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, .4),
+    0 18px 40px -14px rgb(var(--wd-blau-rgb) / .8),
+    inset 0 1px 0 rgba(255, 255, 255, .55);
+}
+.wd .wd-btn--haupt:active, .wd-btn--haupt:active { transform: translateY(0); transition-duration: .06s; }
+
+.wd-btn--zweit, .wd-btn--still {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
+}
+.wd-btn--zweit:hover, .wd-btn--still:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    0 6px 18px -10px rgba(0, 0, 0, .8),
+    inset 0 1px 0 rgba(255, 255, 255, .07);
+}
+
+/* ---------- Eingabefelder: vertieft statt aufliegend ---------- */
+.wd-feld input[type="text"], .wd-feld input[type="email"], .wd-feld input[type="tel"],
+.wd-feld input[type="url"], .wd-feld input[type="number"], .wd-feld input[type="date"],
+.wd-feld input[type="password"], .wd-feld input[type="search"],
+.wd-feld select, .wd-feld textarea, .wd-eingabe {
+  box-shadow: var(--wd-tiefe);
+  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
+}
+/* Im Fokus bleibt die Vertiefung erhalten und der Ring kommt dazu —
+   sonst "springt" das Feld beim Anklicken aus der Fläche heraus. */
+.wd-eingabe:focus, .wd-feld input:focus, .wd-feld select:focus, .wd-feld textarea:focus {
+  box-shadow: var(--wd-tiefe), 0 0 0 4px rgb(var(--wd-blau-rgb) / .16);
+}
+
+/* ---------- Marken und Abzeichen ---------- */
+.wd-tag, .vw-status, .po-aufg-marke, .vw-aufg-wer, .vw-aufg-nicht {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
+}
+
+/* ---------- Schwebende Flächen ---------- */
+.vw-detail-blatt { box-shadow: var(--wd-hoehe-3), 0 0 0 1px rgb(var(--wd-blau-rgb) / .06) inset; }
+.wd-nav-panel, .wd-menue-flaeche { box-shadow: var(--wd-hoehe-3); }
+
+/* ---------- Schrift: optische Korrektur ----------
+   Grosse Schriftgrade wirken bei gleicher Laufweite zu locker gesetzt —
+   das Auge sieht bei 48px mehr Weissraum zwischen den Buchstaben als bei
+   16px. Professioneller Satz zieht deshalb mit wachsender Größe enger.
+   Bei kleinen Grössen genau umgekehrt: dort hilft etwas mehr Luft. */
+.wd h1 { letter-spacing: -.028em; }
+.wd h2 { letter-spacing: -.021em; }
+.wd h3 { letter-spacing: -.012em; }
+/* Verhindert Schusterjungen in Überschriften — ein einzelnes Wort in der
+   letzten Zeile sieht immer nach Versehen aus. */
+.wd h1, .wd h2, .wd-fuehrung { text-wrap: balance; }
+.wd p { text-wrap: pretty; }
+
+/* ---------- Ruhe bei Bewegungsempfindlichkeit ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .wd-karte, .wd-btn { transition: none !important; }
+  a.wd-karte:hover, .wd-karte--klickbar:hover,
+  .wd-btn:hover, .wd-btn--haupt:hover, .wd-btn--zweit:hover, .wd-btn--still:hover {
+    transform: none !important;
+  }
+}

pruef-design.mjs

@@ -38,7 +38,20 @@ const srv = createServer((q, r) => {
 });
 await new Promise((r) => srv.listen(4329, r));
 
-const SEITEN = readdirSync(join(W, "webdesign")).filter((f) => f.endsWith(".html"));
+/* diagnose.html ist bewusst ausgenommen.
+
+   Sie ist das Werkzeug fuer den Fall, dass die Seite NICHT laeuft, und
+   traegt deshalb alles fest in sich: eigene Farben, eigenes Layout,
+   keine externe CSS- oder JS-Datei, keine Uebersetzung. Genau das ist
+   ihr Zweck -- eine Diagnoseseite, die an derselben kaputten
+   Stilvorlage scheitert wie das Problem, das sie untersuchen soll,
+   waere wertlos.
+
+   Sie deshalb an den Regeln fuer die eigentliche Seite zu messen, wuerde
+   zwei Meldungen erzeugen, die man auf Dauer wegsieht -- und irgendwann
+   sieht man dann auch eine echte weg. */
+const SEITEN = readdirSync(join(W, "webdesign"))
+  .filter((f) => f.endsWith(".html") && f !== "diagnose.html");
 const SPRACHEN = ["de", "de-CH", "en", "fr", "pt"];
 
 const funde = [];

pruef-system.mjs

@@ -43,7 +43,20 @@ const srv = createServer((q, r) => {
 });
 await new Promise((r) => srv.listen(4332, r));
 
-const SEITEN = readdirSync(join(W, "webdesign")).filter((f) => f.endsWith(".html"));
+/* diagnose.html ist bewusst ausgenommen.
+
+   Sie ist das Werkzeug fuer den Fall, dass die Seite NICHT laeuft, und
+   traegt deshalb alles fest in sich: eigene Farben, eigenes Layout,
+   keine externe CSS- oder JS-Datei, keine Uebersetzung. Genau das ist
+   ihr Zweck -- eine Diagnoseseite, die an derselben kaputten
+   Stilvorlage scheitert wie das Problem, das sie untersuchen soll,
+   waere wertlos.
+
+   Sie deshalb an den Regeln fuer die eigentliche Seite zu messen, wuerde
+   zwei Meldungen erzeugen, die man auf Dauer wegsieht -- und irgendwann
+   sieht man dann auch eine echte weg. */
+const SEITEN = readdirSync(join(W, "webdesign"))
+  .filter((f) => f.endsWith(".html") && f !== "diagnose.html");
 const ALT = "127, 208, 232";       // der bisherige Markenton
 const NEU = "255 120 40";          // drastisch anders, damit nichts untergeht
 

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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 <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=20260823wd16"></script>
+<script src="/assets/js/i18n-wd-ablauf.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 <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=20260823wd16"></script>
+<script src="/assets/js/i18n-wd-anfrage.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-anfrage.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-anfrage.js?v=20260823wd17"></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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 <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=20260823wd16"></script>
+<script src="/assets/js/i18n-wd-faq.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 <style>
   /* ---------- Nur auf der Startseite gebraucht ---------- */
 
@@ -407,8 +407,8 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-index.js?v=20260823wd16"></script>
+<script src="/assets/js/i18n-wd-index.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 <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=20260823wd16"></script>
+<script src="/assets/js/i18n-wd-leistungen.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 <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=20260823wd16"></script>
+<script src="/assets/js/i18n-wd-portal.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-portal.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-portal.js?v=20260823wd17"></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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 <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=20260823wd16"></script>
+<script src="/assets/js/i18n-wd-portfolio.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 <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=20260823wd16"></script>
+<script src="/assets/js/i18n-wd-preise.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 </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=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></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-v16";
+const CACHE_NAME = "dogfather-webdesign-v17";
 
 /* 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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 <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=20260823wd16"></script>
+<script src="/assets/js/i18n-wd-ueber.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 <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=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 </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=20260823wd16"></script>
+<script src="/assets/js/i18n-wd-widerruf.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-widerruf.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-widerruf.js?v=20260823wd17"></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=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd16" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
 <style>
   /* =====================================================================
      Zugangswand — nur hier gebraucht, deshalb bewusst NICHT in
@@ -177,8 +177,8 @@
   </div>
 </main>
 
-<script src="/assets/js/i18n-wd-zugang.js?v=20260823wd16"></script>
+<script src="/assets/js/i18n-wd-zugang.js?v=20260823wd17"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd16"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd17"></script>
 <script>
 (function () {
   "use strict";