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;
+  }
+}