DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gestaltung: Hoehensystem -- mehrschichtige Schatten und Lichtkante

Browse Source 
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]>
This commit is contained in:
DogFatherGit
2026-08-23 18:37:17 +02:00
co-authored by Claude Opus 5
parent a964a078f0
commit 10a075cc33
25 changed files with 248 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webdesign/ablauf.html
+4 -4
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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/wd-core.js?v=20260823wd16"></script>
<script src="/assets/js/i18n-wd-ablauf.js?v=20260823wd17"></script>
<script src="/assets/js/wd-core.js?v=20260823wd17"></script>
</body>
</html>
webdesign/anfrage.html
+5 -5
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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/wd-core.js?v=20260823wd16"></script>
<script src="/assets/js/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=20260823wd17"></script>
<script src="/assets/js/wd-anfrage.js?v=20260823wd17"></script>
</body>
</html>
webdesign/faq.html
+4 -4
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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/wd-core.js?v=20260823wd16"></script>
<script src="/assets/js/i18n-wd-faq.js?v=20260823wd17"></script>
<script src="/assets/js/wd-core.js?v=20260823wd17"></script>
</body>
</html>
webdesign/index.html
+4 -4
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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/wd-core.js?v=20260823wd16"></script>
<script src="/assets/js/i18n-wd-index.js?v=20260823wd17"></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
+4 -4
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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/wd-core.js?v=20260823wd16"></script>
<script src="/assets/js/i18n-wd-leistungen.js?v=20260823wd17"></script>
<script src="/assets/js/wd-core.js?v=20260823wd17"></script>
</body>
</html>
webdesign/portal.html
+5 -5
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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/wd-core.js?v=20260823wd16"></script>
<script src="/assets/js/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=20260823wd17"></script>
<script src="/assets/js/wd-portal.js?v=20260823wd17"></script>
</body>
</html>
webdesign/portfolio.html
+4 -4
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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/wd-core.js?v=20260823wd16"></script>
<script src="/assets/js/i18n-wd-portfolio.js?v=20260823wd17"></script>
<script src="/assets/js/wd-core.js?v=20260823wd17"></script>
</body>
</html>
webdesign/preise.html
+4 -4
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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/wd-core.js?v=20260823wd16"></script>
<script src="/assets/js/i18n-wd-preise.js?v=20260823wd17"></script>
<script src="/assets/js/wd-core.js?v=20260823wd17"></script>
</body>
</html>
webdesign/rechtliches.html
+3 -3
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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
+1 -1
View File
@@ -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
+4 -4
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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/wd-core.js?v=20260823wd16"></script>
<script src="/assets/js/i18n-wd-ueber.js?v=20260823wd17"></script>
<script src="/assets/js/wd-core.js?v=20260823wd17"></script>
</body>
</html>
webdesign/verwaltung.html
+3 -3
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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
+5 -5
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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/wd-core.js?v=20260823wd16"></script>
<script src="/assets/js/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=20260823wd17"></script>
<script src="/assets/js/wd-widerruf.js?v=20260823wd17"></script>
</body>
</html>
webdesign/zugang.html
+4 -4
View File
@@ -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/webdesign.css?v=20260823wd16" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
<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/wd-core.js?v=20260823wd16"></script>
<script src="/assets/js/i18n-wd-zugang.js?v=20260823wd17"></script>
<script src="/assets/js/wd-core.js?v=20260823wd17"></script>
<script>
(function () {
"use strict";