Knopf war unlesbar, und der Code wird jetzt bei jedem Schliessen neu verlangt

Zwei Rueckmeldungen vom 22.08.2026, beide behoben und mit Tests abgesichert.

1) "das sieht nicht gut aus" (Bildschirmfoto des Hauptknopfs)
   Ursache: ".wd a" ist Klasse+Element und damit spezifischer als die reine
   Knopfklasse ".wd-btn--haupt". Die Textfarbe des Knopfs wurde dadurch
   ueberstimmt -- hellblaue Schrift auf hellblauem Grund, praktisch
   unlesbar. Derselbe Spezifitaetsfehler wie zuvor bei den Namen auf der
   Zugangswand. Fix: ".wd a:not(.wd-btn)" plus zweistufig geschriebene
   Knopfregeln, damit das nicht wieder passieren kann.

2) "das sieht lang gezogen aus"
   Die Pillenform (border-radius 999px) laesst breite Knoepfe
   auseinandergezogen wirken, weil der Radius optisch mit der Breite
   mitwaechst. Jetzt fester Radius von 14px -- gleiche Form bei jeder
   Breite, ruhiger und hochwertiger.

3) "ich will das ich jedes mal den code gefragt werde wenn man die seite
   zu macht"
   Das Sitzungs-Cookie allein reicht dafuer nicht: Browser stellen genau
   solche Cookies beim Wiederherstellen von Tabs zurueck ("Dort
   fortfahren, wo du aufgehoert hast"), man landet dann ohne Codeabfrage
   wieder mitten in der Seite. Zusaetzlich jetzt eine Sitzungsmarke im
   sessionStorage, die beim echten Schliessen verschwindet. Fehlt sie bei
   vorhandenem Cookie, wird die Sitzung serverseitig beendet und zur
   Zugangswand geleitet. Token-Notbremse von 24 auf 8 Stunden gesenkt.
   13/13 Tests im echten Browser, inklusive Schutz vor Endlosschleife.

DEPLOY.md: zwei Checkouts auf dem Server dokumentiert (/home/dogiweb und
/home/dogiintern) und der Vorfall, dass /webdesign nach dem Pull kurz ohne
Zugangsschutz erreichbar war, weil der Dienstneustart fehlte.

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

assets/css/webdesign.css

@@ -153,8 +153,14 @@ body.wd::after {
 .wd .wd-lead { font-size: clamp(1.08rem, 2vw, 1.32rem); color: var(--wd-text); line-height: 1.65; }
 .wd .wd-klein { font-size: .92rem; }
 .wd .wd-leise { color: var(--wd-text-soft); }
-.wd a { color: var(--wd-blau); text-decoration: none; }
-.wd a:hover { color: var(--wd-blau-hell); }
+/* :not(.wd-btn) ist hier PFLICHT, kein Feinschliff.
+   Ohne das gewinnt ".wd a" (Klasse + Element = spezifischer als die reine
+   Knopf-Klasse ".wd-btn--haupt") und faerbt die Schrift auf dem hellblauen
+   Hauptknopf ebenfalls hellblau -- blau auf blau, praktisch unlesbar.
+   Genau so live gemeldet am 22.08.2026 per Bildschirmfoto. */
+.wd a:not(.wd-btn) { color: var(--wd-blau); text-decoration: none; }
+.wd a:not(.wd-btn):hover { color: var(--wd-blau-hell); }
+.wd a.wd-btn { text-decoration: none; }
 .wd strong { color: var(--wd-text); font-weight: 700; }
 
 .wd-eyebrow {
@@ -272,8 +278,14 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
   /* min-height 48px = Touch-Ziel-Mindestmaß (Masterplan S.15). */
   min-height: 48px;
-  padding: .85rem 1.6rem;
-  border-radius: 999px;
+  padding: .85rem 1.7rem;
+  /* Abgerundetes Rechteck statt Pillenform (999px).
+     Rueckmeldung 22.08.2026: "das sieht lang gezogen aus". Stimmt — bei
+     einer Pille waechst der Radius optisch mit der Breite mit, ein breiter
+     Knopf wirkt dadurch auseinandergezogen wie eine Tablette. Ein fester
+     Radius haelt die Form bei jeder Breite gleich und wirkt ruhiger und
+     hochwertiger. */
+  border-radius: 14px;
   border: 1px solid transparent;
   font-family: var(--font-head);
   font-weight: 700;
@@ -289,7 +301,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .wd-btn:active { transform: translateY(1px) scale(.985); }
 .wd-btn[disabled], .wd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
 
-.wd-btn--haupt {
+.wd .wd-btn--haupt, .wd-btn--haupt {
   /* Dunkler Text auf hellem Babyblau: 11.7:1 — der einzige Weg, einen
      leuchtenden Knopf zu bauen, ohne die Lesbarkeit zu opfern. */
   background: linear-gradient(135deg, var(--wd-blau-hell), var(--wd-blau) 55%, #63bcd8);
@@ -298,14 +310,14 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 }
 .wd-btn--haupt:hover { box-shadow: 0 16px 44px -14px rgba(127, 208, 232, .95); transform: translateY(-2px); }
 
-.wd-btn--zweit {
+.wd .wd-btn--zweit, .wd-btn--zweit {
   background: rgba(127, 208, 232, .07);
   border-color: var(--wd-rand-stark);
   color: var(--wd-blau-hell);
 }
 .wd-btn--zweit:hover { background: rgba(127, 208, 232, .14); border-color: var(--wd-blau); }
 
-.wd-btn--still { background: transparent; border-color: var(--wd-rand); color: var(--wd-text-mid); }
+.wd .wd-btn--still, .wd-btn--still { background: transparent; border-color: var(--wd-rand); color: var(--wd-text-mid); }
 .wd-btn--still:hover { border-color: var(--wd-rand-stark); color: var(--wd-text); }
 
 .wd-btn--breit { width: 100%; }