diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css
index 97c5792f..45e0861d 100644
--- a/assets/css/webdesign.css
+++ b/assets/css/webdesign.css
@@ -40,29 +40,64 @@
   --wd-dunkelblau-2: #0e1826;   /* leicht angehoben, für Abschnittswechsel */
   --wd-flaeche: #101a29;        /* Kartengrund (deckend, für Formularfelder) */
 
-  --wd-blau: #7fd0e8;           /* Babyblau — Hauptaktionen, Linien, Leuchten */
+  /* ---------- Markenfarben als KANÄLE ----------
+     Zusätzlich zu den fertigen Farben stehen die Rot-, Grün- und
+     Blauanteile einzeln bereit. Das ist kein Selbstzweck.
+
+     Halbdurchsichtige Töne — Ränder, Leuchten, sanfte Flächen — brauchen
+     einen Alphawert. Mit einer fertigen Farbvariablen geht das nicht,
+     also stand die Farbe in solchen Regeln ausgeschrieben da:
+     "rgb(var(--wd-blau-rgb) / .16)". Eine Zählung am 23.08.2026 ergab
+     155 solcher Stellen, allein 74 für Blau.
+
+     Die Folge: Wer den Markenton ändern will, muss 155 Stellen finden.
+     Man übersieht welche, und die Seite hat danach zwei Blautöne, die
+     sich um eine Nuance unterscheiden — der Unterschied zwischen
+     gewachsener und gestalteter Oberfläche.
+
+     Mit den Kanälen schreibt man rgb(var(--wd-blau-rgb) / .16). Eine
+     Änderung hier wirkt überall. Die fertigen Farben bleiben daneben
+     erhalten, weil sie kürzer zu lesen sind, wo kein Alpha gebraucht
+     wird — sie werden aus denselben Kanälen gebildet, können also nicht
+     auseinanderlaufen. */
+  --wd-blau-rgb:  127 208 232;
+  --wd-lila-rgb:  183 157 255;
+  --wd-gold-rgb:  232 200 119;
+  --wd-ok-rgb:    111 214 163;
+  --wd-fehler-rgb: 255 157 157;
+  --wd-glas-rgb:   16  26  41;
+
+  --wd-blau: rgb(var(--wd-blau-rgb));  /* Babyblau — Hauptaktionen, Linien, Leuchten */
   --wd-blau-hell: #a9e2f2;      /* Eisblau — Lesbarkeit auf dunklem Grund */
   --wd-blau-tief: #3d9dbd;      /* für Ränder/Verläufe, nicht für Text */
-  --wd-lila: #b79dff;           /* sekundäre Bereiche, Kontrast */
+  --wd-lila: rgb(var(--wd-lila-rgb));   /* sekundäre Bereiche, Kontrast */
   --wd-lila-tief: #7c5cd6;
-  --wd-gold: #e8c877;           /* NUR Hinweise & Zahlungsinformationen */
+  --wd-gold: rgb(var(--wd-gold-rgb));   /* NUR Hinweise & Zahlungsinformationen */
   --wd-gold-tief: #a8873a;
 
   --wd-text: #eef4fb;
   --wd-text-mid: #b3c2d4;
   --wd-text-soft: #8f9fb4;
 
-  --wd-rand: rgba(127, 208, 232, .16);
-  --wd-rand-stark: rgba(127, 208, 232, .34);
-  --wd-glas: rgba(16, 26, 41, .62);
+  --wd-rand: rgb(var(--wd-blau-rgb) / .16);
+  --wd-rand-stark: rgb(var(--wd-blau-rgb) / .34);
+  --wd-glas: rgb(var(--wd-glas-rgb) / .62);
   --wd-glas-tief: rgba(10, 18, 32, .82);
 
-  --wd-ok: #6fd6a3;
-  --wd-fehler: #ff9d9d;
+  --wd-ok: rgb(var(--wd-ok-rgb));
+  --wd-fehler: rgb(var(--wd-fehler-rgb));
   --wd-warnung: var(--wd-gold);
 
-  --wd-r: 16px;                 /* Standardradius */
-  --wd-r-gross: 22px;
+  /* Eine Skala mit vier Stufen: 6 / 10 / 14 / 20 -- plus 999px fuer die
+     Pillenform, die keine Stufe ist, sondern eine eigene Form.
+     Vorher waren 12 verschiedene Werte im Umlauf, darunter 5, 7, 9 und
+     11px. Solche Zwischenwerte entstehen nicht aus Absicht, sondern
+     weil man beim Bauen einer neuen Kachel nicht nachschaut, was
+     nebenan schon gilt. Auffallen tut es niemandem einzeln -- in Summe
+     ist es der Unterschied zwischen gewachsener und gestalteter
+     Oberflaeche. */
+  --wd-r: 14px;                 /* Standardradius */
+  --wd-r-gross: 20px;
   --wd-schatten: 0 24px 60px -28px rgba(0, 0, 0, .9);
   --wd-schatten-tief: 0 40px 90px -34px rgba(0, 0, 0, .95);
 
@@ -135,7 +170,7 @@ body.wd::-webkit-scrollbar-track,
 
 body.wd::-webkit-scrollbar-thumb,
 .wd ::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, rgba(127,208,232,.44), rgba(183,157,255,.36));
+  background: linear-gradient(180deg, rgb(var(--wd-blau-rgb) / .44), rgb(var(--wd-lila-rgb) / .36));
   border-radius: 999px;
   /* Der durchsichtige Rand lässt die Spur seitlich durchscheinen — der
      Griff wirkt dadurch schmaler als die Trefferfläche. Bedienbar bleibt
@@ -145,12 +180,12 @@ body.wd::-webkit-scrollbar-thumb,
 }
 body.wd::-webkit-scrollbar-thumb:hover,
 .wd ::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(180deg, rgba(127,208,232,.6), rgba(183,157,255,.5));
+  background: linear-gradient(180deg, rgb(var(--wd-blau-rgb) / .6), rgb(var(--wd-lila-rgb) / .5));
   background-clip: content-box;
 }
 body.wd::-webkit-scrollbar-thumb:active,
 .wd ::-webkit-scrollbar-thumb:active {
-  background: linear-gradient(180deg, rgba(127,208,232,.8), rgba(183,157,255,.7));
+  background: linear-gradient(180deg, rgb(var(--wd-blau-rgb) / .8), rgb(var(--wd-lila-rgb) / .7));
   background-clip: content-box;
 }
 /* Die Ecke zwischen waagerechter und senkrechter Leiste — ohne diese
@@ -198,8 +233,8 @@ body.wd::after {
   pointer-events: none;
   opacity: .5;
   background-image:
-    linear-gradient(rgba(127, 208, 232, .03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(127, 208, 232, .03) 1px, transparent 1px);
+    linear-gradient(rgb(var(--wd-blau-rgb) / .03) 1px, transparent 1px),
+    linear-gradient(90deg, rgb(var(--wd-blau-rgb) / .03) 1px, transparent 1px);
   background-size: 64px 64px;
   -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
   mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
@@ -346,7 +381,7 @@ body.wd::after {
   padding: clamp(1.3rem, 2.6vw, 1.9rem);
   background:
     linear-gradient(180deg, rgba(20, 32, 50, .72), rgba(9, 15, 26, .86)) padding-box,
-    linear-gradient(140deg, rgba(127, 208, 232, .40), rgba(127, 208, 232, .07) 45%, rgba(183, 157, 255, .30)) border-box;
+    linear-gradient(140deg, rgb(var(--wd-blau-rgb) / .40), rgb(var(--wd-blau-rgb) / .07) 45%, rgb(var(--wd-lila-rgb) / .30)) border-box;
   border: 1px solid transparent;
   box-shadow: var(--wd-schatten);
   backdrop-filter: blur(10px);
@@ -356,14 +391,14 @@ body.wd::after {
 .wd-karte--lila {
   background:
     linear-gradient(180deg, rgba(26, 22, 48, .72), rgba(12, 10, 24, .88)) padding-box,
-    linear-gradient(140deg, rgba(183, 157, 255, .42), rgba(183, 157, 255, .07) 45%, rgba(127, 208, 232, .26)) border-box;
+    linear-gradient(140deg, rgb(var(--wd-lila-rgb) / .42), rgb(var(--wd-lila-rgb) / .07) 45%, rgb(var(--wd-blau-rgb) / .26)) border-box;
 }
 /* Nur für Karten, die wirklich klickbar sind — eine Karte, die sich hebt,
    ohne dass man sie anklicken kann, verspricht eine Aktion, die es nicht
    gibt. */
 a.wd-karte:hover, .wd-karte--klickbar:hover {
   transform: translateY(-4px);
-  box-shadow: var(--wd-schatten-tief), 0 0 44px -20px rgba(127, 208, 232, .55);
+  box-shadow: var(--wd-schatten-tief), 0 0 44px -20px rgb(var(--wd-blau-rgb) / .55);
 }
 
 /* Farbige Kappe oben — übernimmt die Optik der Masterplan-PDF, in der jede
@@ -394,9 +429,9 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   position: absolute; left: 0; top: .62em;
   width: 7px; height: 7px; border-radius: 50%;
   background: var(--wd-blau);
-  box-shadow: 0 0 10px rgba(127, 208, 232, .7);
+  box-shadow: 0 0 10px rgb(var(--wd-blau-rgb) / .7);
 }
-.wd-karte--lila .wd-liste li::before { background: var(--wd-lila); box-shadow: 0 0 10px rgba(183, 157, 255, .7); }
+.wd-karte--lila .wd-liste li::before { background: var(--wd-lila); box-shadow: 0 0 10px rgb(var(--wd-lila-rgb) / .7); }
 .wd-liste li:last-child { margin-bottom: 0; }
 
 /* ---------- Raster ---------- */
@@ -445,16 +480,16 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
      leuchtenden Knopf zu bauen, ohne die Lesbarkeit zu opfern. */
   background: linear-gradient(135deg, var(--wd-blau-hell), var(--wd-blau) 55%, #63bcd8);
   color: #04070c;
-  box-shadow: 0 12px 34px -14px rgba(127, 208, 232, .8);
+  box-shadow: 0 12px 34px -14px rgb(var(--wd-blau-rgb) / .8);
 }
-.wd-btn--haupt:hover { box-shadow: 0 16px 44px -14px rgba(127, 208, 232, .95); transform: translateY(-2px); }
+.wd-btn--haupt:hover { box-shadow: 0 16px 44px -14px rgb(var(--wd-blau-rgb) / .95); transform: translateY(-2px); }
 
 .wd .wd-btn--zweit, .wd-btn--zweit {
-  background: rgba(127, 208, 232, .07);
+  background: rgb(var(--wd-blau-rgb) / .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--zweit:hover { background: rgb(var(--wd-blau-rgb) / .14); border-color: var(--wd-blau); }
 
 .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); }
@@ -479,8 +514,8 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   position: relative;
   border-radius: var(--wd-r);
   padding: 1.15rem 1.35rem 1.15rem 1.6rem;
-  background: linear-gradient(180deg, rgba(232, 200, 119, .09), rgba(232, 200, 119, .04));
-  border: 1px solid rgba(232, 200, 119, .32);
+  background: linear-gradient(180deg, rgb(var(--wd-gold-rgb) / .09), rgb(var(--wd-gold-rgb) / .04));
+  border: 1px solid rgb(var(--wd-gold-rgb) / .32);
   border-left: 4px solid var(--wd-gold);
 }
 .wd-hinweis-titel {
@@ -500,7 +535,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .wd-notiz {
   border-radius: var(--wd-r);
   padding: 1rem 1.25rem;
-  background: rgba(127, 208, 232, .05);
+  background: rgb(var(--wd-blau-rgb) / .05);
   border: 1px solid var(--wd-rand);
 }
 .wd-notiz p { margin: 0; font-size: .96rem; }
@@ -513,13 +548,13 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   padding: .3rem .7rem;
   border-radius: 999px;
   font-size: .78rem; font-weight: 700; letter-spacing: .04em;
-  background: rgba(127, 208, 232, .12);
+  background: rgb(var(--wd-blau-rgb) / .12);
   border: 1px solid var(--wd-rand-stark);
   color: var(--wd-blau-hell);
 }
-.wd-tag--lila { background: rgba(183, 157, 255, .12); border-color: rgba(183, 157, 255, .34); color: var(--wd-lila); }
-.wd-tag--gold { background: rgba(232, 200, 119, .12); border-color: rgba(232, 200, 119, .34); color: var(--wd-gold); }
-.wd-tag--ok { background: rgba(111, 214, 163, .12); border-color: rgba(111, 214, 163, .34); color: var(--wd-ok); }
+.wd-tag--lila { background: rgb(var(--wd-lila-rgb) / .12); border-color: rgb(var(--wd-lila-rgb) / .34); color: var(--wd-lila); }
+.wd-tag--gold { background: rgb(var(--wd-gold-rgb) / .12); border-color: rgb(var(--wd-gold-rgb) / .34); color: var(--wd-gold); }
+.wd-tag--ok { background: rgb(var(--wd-ok-rgb) / .12); border-color: rgb(var(--wd-ok-rgb) / .34); color: var(--wd-ok); }
 .wd-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
 
 /* ---------------------------------------------------------------------
@@ -574,7 +609,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   color: var(--wd-blau);
   font-variant-numeric: tabular-nums;
 }
-.wd-schritt:nth-child(even) { border-color: rgba(183, 157, 255, .18); }
+.wd-schritt:nth-child(even) { border-color: rgb(var(--wd-lila-rgb) / .18); }
 .wd-schritt:nth-child(even) .wd-schritt-nr { color: var(--wd-lila); }
 .wd-schritt h3 { margin: 0 0 .3em; font-size: 1.12rem; }
 .wd-schritt p { margin: 0; font-size: 1rem; }
@@ -586,7 +621,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
    9. FAQ — natives <details>, damit es ohne JavaScript funktioniert
    und die Tastaturbedienung vom Browser kommt statt nachgebaut zu werden.
    --------------------------------------------------------------------- */
-.wd-faq { border-radius: var(--wd-r); border: 1px solid var(--wd-rand); background: rgba(16, 26, 41, .5); margin-bottom: .7rem; overflow: hidden; }
+.wd-faq { border-radius: var(--wd-r); border: 1px solid var(--wd-rand); background: rgb(var(--wd-glas-rgb) / .5); margin-bottom: .7rem; overflow: hidden; }
 .wd-faq > summary {
   cursor: pointer;
   list-style: none;
@@ -599,7 +634,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   transition: background var(--wd-zeit-schnell) ease;
 }
 .wd-faq > summary::-webkit-details-marker { display: none; }
-.wd-faq > summary:hover { background: rgba(127, 208, 232, .05); }
+.wd-faq > summary:hover { background: rgb(var(--wd-blau-rgb) / .05); }
 .wd-faq > summary::after {
   content: "+";
   position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
@@ -638,7 +673,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   box-sizing: border-box;
   padding: .82rem 1rem;
   min-height: 48px;
-  border-radius: 12px;
+  border-radius: 10px;
   background: var(--wd-flaeche);
   border: 1.5px solid var(--wd-rand);
   color: var(--wd-text);
@@ -664,14 +699,14 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   outline: none;
   border-color: var(--wd-blau);
   background: #12203180;
-  box-shadow: 0 0 0 4px rgba(127, 208, 232, .16);
+  box-shadow: 0 0 0 4px rgb(var(--wd-blau-rgb) / .16);
 }
 
 /* Fehlerzustand */
 .wd-feld--fehler .wd-eingabe,
 .wd-feld--fehler input, .wd-feld--fehler select, .wd-feld--fehler textarea {
   border-color: var(--wd-fehler);
-  box-shadow: 0 0 0 4px rgba(255, 157, 157, .12);
+  box-shadow: 0 0 0 4px rgb(var(--wd-fehler-rgb) / .12);
 }
 .wd-feld-fehler {
   display: none;
@@ -695,7 +730,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   display: block;
   padding: 1rem 1.15rem 1rem 2.9rem;
   border-radius: 14px;
-  background: rgba(16, 26, 41, .6);
+  background: rgb(var(--wd-glas-rgb) / .6);
   border: 1.5px solid var(--wd-rand);
   transition: border-color var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease;
 }
@@ -711,7 +746,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .wd-wahl-kachel:hover .wd-wahl-inhalt { border-color: var(--wd-rand-stark); }
 .wd-wahl-kachel input:checked + .wd-wahl-inhalt {
   border-color: var(--wd-blau);
-  background: rgba(127, 208, 232, .09);
+  background: rgb(var(--wd-blau-rgb) / .09);
 }
 .wd-wahl-kachel input:checked + .wd-wahl-inhalt::before {
   border-color: var(--wd-blau);
@@ -725,15 +760,15 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 
 /* Erfolgs-/Fehlermeldung eines ganzen Formulars */
 .wd-meldung { border-radius: var(--wd-r); padding: 1rem 1.2rem; margin-bottom: 1.2rem; font-weight: 600; }
-.wd-meldung--ok { background: rgba(111, 214, 163, .1); border: 1px solid rgba(111, 214, 163, .38); color: var(--wd-ok); }
-.wd-meldung--fehler { background: rgba(255, 157, 157, .1); border: 1px solid rgba(255, 157, 157, .38); color: var(--wd-fehler); }
+.wd-meldung--ok { background: rgb(var(--wd-ok-rgb) / .1); border: 1px solid rgb(var(--wd-ok-rgb) / .38); color: var(--wd-ok); }
+.wd-meldung--fehler { background: rgb(var(--wd-fehler-rgb) / .1); border: 1px solid rgb(var(--wd-fehler-rgb) / .38); color: var(--wd-fehler); }
 .wd-meldung[hidden] { display: none; }
 
 /* ---------------------------------------------------------------------
    11. FORTSCHRITT (mehrstufiges Formular)
    --------------------------------------------------------------------- */
 .wd-fortschritt { margin-bottom: 1.8rem; }
-.wd-fortschritt-schiene { height: 6px; border-radius: 999px; background: rgba(127, 208, 232, .12); overflow: hidden; }
+.wd-fortschritt-schiene { height: 6px; border-radius: 999px; background: rgb(var(--wd-blau-rgb) / .12); overflow: hidden; }
 .wd-fortschritt-balken {
   height: 100%; width: 0%;
   border-radius: 999px;
@@ -753,11 +788,11 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .wd-tabelle th {
   font-family: var(--font-head); font-size: .78rem; font-weight: 800;
   letter-spacing: .1em; text-transform: uppercase; color: var(--wd-blau);
-  background: rgba(127, 208, 232, .05);
+  background: rgb(var(--wd-blau-rgb) / .05);
   position: sticky; top: 0;
 }
 .wd-tabelle tbody tr:last-child td { border-bottom: none; }
-.wd-tabelle tbody tr:hover { background: rgba(127, 208, 232, .04); }
+.wd-tabelle tbody tr:hover { background: rgb(var(--wd-blau-rgb) / .04); }
 .wd-tabelle td { color: var(--wd-text-mid); }
 
 /* ---------------------------------------------------------------------
@@ -811,8 +846,8 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   font-size: .95rem; font-weight: 600; color: var(--wd-text-mid);
   transition: color var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease;
 }
-.wd-nav a:hover { color: var(--wd-text); background: rgba(127, 208, 232, .07); }
-.wd-nav a.wd-aktiv { color: var(--wd-blau); background: rgba(127, 208, 232, .11); }
+.wd-nav a:hover { color: var(--wd-text); background: rgb(var(--wd-blau-rgb) / .07); }
+.wd-nav a.wd-aktiv { color: var(--wd-blau); background: rgb(var(--wd-blau-rgb) / .11); }
 .wd-nav .wd-btn { margin-left: .5rem; }
 
 .wd-menue-knopf {
@@ -839,7 +874,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .wd-sprache-liste {
   position: absolute; right: 0; top: calc(100% + .4rem);
   min-width: 190px; padding: .35rem;
-  border-radius: 12px;
+  border-radius: 10px;
   background: #0b1320;
   border: 1px solid var(--wd-rand-stark);
   box-shadow: var(--wd-schatten);
@@ -850,10 +885,10 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .wd-sprache-liste button {
   display: flex; align-items: center; gap: .6rem;
   width: 100%; min-height: 42px; padding: .5rem .7rem;
-  border: none; border-radius: 8px; background: transparent;
+  border: none; border-radius: 10px; background: transparent;
   color: var(--wd-text-mid); cursor: pointer; text-align: left; font-size: .95rem;
 }
-.wd-sprache-liste button:hover { background: rgba(127, 208, 232, .09); color: var(--wd-text); }
+.wd-sprache-liste button:hover { background: rgb(var(--wd-blau-rgb) / .09); color: var(--wd-text); }
 .wd-sprache-liste button[aria-current="true"] { color: var(--wd-blau); font-weight: 700; }
 .wd-sprache-punkt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
 
@@ -978,7 +1013,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 }
 @keyframes wd-install-auf { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
 .wd-install-text { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0; }
-.wd-install-text img { border-radius: 9px; flex-shrink: 0; }
+.wd-install-text img { border-radius: 10px; flex-shrink: 0; }
 .wd-install-text strong { display: block; font-size: .95rem; color: var(--wd-text); }
 .wd-install-text span { display: block; font-size: .84rem; color: var(--wd-text-soft); line-height: 1.45; }
 .wd-install-knoepfe { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
@@ -1033,7 +1068,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .po-leer-symbol img { width: 100%; height: auto; opacity: .9; }
 .po-leer-symbol::before {
   content: ""; position: absolute; inset: -24%; z-index: -1; border-radius: 50%;
-  background: radial-gradient(circle, rgba(127,208,232,.26), transparent 70%);
+  background: radial-gradient(circle, rgb(var(--wd-blau-rgb) / .26), transparent 70%);
   filter: blur(20px);
 }
 .po-leer h3 { margin-bottom: .3em; }
@@ -1047,13 +1082,13 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .po-leer-punkt {
   display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
   padding: .9rem 1rem; border-radius: 14px;
-  background: rgba(127,208,232,.05); border: 1px solid var(--wd-rand);
+  background: rgb(var(--wd-blau-rgb) / .05); border: 1px solid var(--wd-rand);
 }
 .po-leer-nr {
   width: 28px; height: 28px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   font-family: var(--font-head); font-weight: 800; font-size: .85rem;
-  color: var(--wd-blau); background: rgba(127,208,232,.12);
+  color: var(--wd-blau); background: rgb(var(--wd-blau-rgb) / .12);
   border: 1px solid var(--wd-rand-stark);
 }
 .po-leer-punkt strong { display: block; color: var(--wd-text); font-size: .98rem; margin-bottom: .15rem; }
@@ -1099,7 +1134,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
      Worte "hier passiert gleich etwas", ohne zu blinken oder zu zappeln. */
   content: "";
   position: absolute; inset: 0;
-  background: linear-gradient(105deg, transparent 35%, rgba(127,208,232,.07) 50%, transparent 65%);
+  background: linear-gradient(105deg, transparent 35%, rgb(var(--wd-blau-rgb) / .07) 50%, transparent 65%);
   background-size: 260% 100%;
   animation: po-schimmer 5.5s ease-in-out infinite;
   pointer-events: none;
@@ -1120,7 +1155,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .po-vorschau-phasen { display: flex; gap: 3px; margin-bottom: .5rem; }
 .po-vorschau-phasen span {
   flex: 1; height: 6px; border-radius: 999px;
-  background: rgba(127,208,232,.13);
+  background: rgb(var(--wd-blau-rgb) / .13);
   animation: po-phase-lauf 7s ease-in-out infinite;
 }
 .po-vorschau-phasen span:nth-child(1) { animation-delay: 0s; }
@@ -1131,16 +1166,16 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .po-vorschau-phasen span:nth-child(6) { animation-delay: 2.75s; }
 .po-vorschau-phasen span:nth-child(7) { animation-delay: 3.3s; }
 @keyframes po-phase-lauf {
-  0%, 8%   { background: rgba(127,208,232,.13); }
+  0%, 8%   { background: rgb(var(--wd-blau-rgb) / .13); }
   14%, 55% { background: var(--wd-blau-tief); }
-  100%     { background: rgba(127,208,232,.13); }
+  100%     { background: rgb(var(--wd-blau-rgb) / .13); }
 }
 
 .po-vorschau-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; color: var(--wd-text-soft); }
 .po-vorschau-marke {
   display: inline-flex; align-items: center; gap: .3rem;
   padding: .18rem .55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
-  background: rgba(127,208,232,.12); color: var(--wd-blau);
+  background: rgb(var(--wd-blau-rgb) / .12); color: var(--wd-blau);
 }
 .po-vorschau-schritt { margin: .7rem 0 0; font-size: .88rem; color: var(--wd-text-mid); opacity: .8; }
 
@@ -1154,9 +1189,9 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 
 /* Die vier Merkmale kompakter und mit farbigem Akzent statt nur Nummer. */
 .po-leer-punkt { transition: border-color var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease; }
-.po-leer-punkt:hover { border-color: var(--wd-rand-stark); background: rgba(127,208,232,.08); }
+.po-leer-punkt:hover { border-color: var(--wd-rand-stark); background: rgb(var(--wd-blau-rgb) / .08); }
 .po-leer-nr {
-  background: linear-gradient(135deg, rgba(127,208,232,.22), rgba(183,157,255,.18));
+  background: linear-gradient(135deg, rgb(var(--wd-blau-rgb) / .22), rgb(var(--wd-lila-rgb) / .18));
   color: var(--wd-blau-hell); border-color: var(--wd-rand-stark);
 }
 
@@ -1189,7 +1224,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   background:
     linear-gradient(#0c1523, #0c1523) padding-box,
     linear-gradient(140deg, var(--wd-blau), var(--wd-lila)) border-box;
-  box-shadow: 0 0 18px -6px rgba(127, 208, 232, .55);
+  box-shadow: 0 0 18px -6px rgb(var(--wd-blau-rgb) / .55);
   flex-shrink: 0;
   font-variant-numeric: tabular-nums;
   letter-spacing: -.02em;
@@ -1202,7 +1237,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   position: relative;
   overflow: hidden;
   padding: 1.1rem 1.15rem 1.15rem;
-  border-radius: 16px;
+  border-radius: 14px;
   gap: 1rem;
   background: linear-gradient(180deg, rgba(20, 32, 50, .58), rgba(9, 15, 26, .74));
 }
@@ -1219,19 +1254,19 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   color: var(--wd-lila);
   background: linear-gradient(#0c1523, #0c1523) padding-box,
               linear-gradient(140deg, var(--wd-lila), var(--wd-blau)) border-box;
-  box-shadow: 0 0 18px -6px rgba(183, 157, 255, .55);
+  box-shadow: 0 0 18px -6px rgb(var(--wd-lila-rgb) / .55);
 }
 .po-leer-punkt:nth-child(3) .po-leer-nr {
   color: var(--wd-ok);
   background: linear-gradient(#0c1523, #0c1523) padding-box,
               linear-gradient(140deg, var(--wd-ok), var(--wd-blau)) border-box;
-  box-shadow: 0 0 18px -6px rgba(111, 214, 163, .5);
+  box-shadow: 0 0 18px -6px rgb(var(--wd-ok-rgb) / .5);
 }
 .po-leer-punkt:nth-child(4) .po-leer-nr {
   color: var(--wd-gold);
   background: linear-gradient(#0c1523, #0c1523) padding-box,
               linear-gradient(140deg, var(--wd-gold), var(--wd-lila)) border-box;
-  box-shadow: 0 0 18px -6px rgba(232, 200, 119, .5);
+  box-shadow: 0 0 18px -6px rgb(var(--wd-gold-rgb) / .5);
 }
 
 /* ---------- Typografie ----------
@@ -1261,11 +1296,11 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .po-phase, .po-vorschau-phasen span { height: 7px; }
 .po-phase.po-erledigt {
   background: linear-gradient(90deg, #2e8f6b, var(--wd-ok));
-  box-shadow: 0 0 8px -2px rgba(111, 214, 163, .5);
+  box-shadow: 0 0 8px -2px rgb(var(--wd-ok-rgb) / .5);
 }
 .po-phase.po-jetzt {
   background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
-  box-shadow: 0 0 14px -2px rgba(127, 208, 232, .85);
+  box-shadow: 0 0 14px -2px rgb(var(--wd-blau-rgb) / .85);
   animation: po-jetzt-puls 2.4s ease-in-out infinite;
 }
 @keyframes po-jetzt-puls { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@@ -1275,12 +1310,12 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
    "gerade dran" (blau) nach "erledigt" (grün), statt einfach nur an- und
    auszugehen. Damit erklärt die Vorschau die Farblogik gleich mit. */
 @keyframes po-phase-lauf {
-  0%, 8%    { background: rgba(127, 208, 232, .13); box-shadow: none; }
+  0%, 8%    { background: rgb(var(--wd-blau-rgb) / .13); box-shadow: none; }
   14%, 30%  { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
-              box-shadow: 0 0 12px -2px rgba(127, 208, 232, .8); }
+              box-shadow: 0 0 12px -2px rgb(var(--wd-blau-rgb) / .8); }
   38%, 62%  { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok));
-              box-shadow: 0 0 8px -2px rgba(111, 214, 163, .45); }
-  100%      { background: rgba(127, 208, 232, .13); box-shadow: none; }
+              box-shadow: 0 0 8px -2px rgb(var(--wd-ok-rgb) / .45); }
+  100%      { background: rgb(var(--wd-blau-rgb) / .13); box-shadow: none; }
 }
 
 /* Kleine Legende unter der Vorschau, damit die Farben nicht geraten
@@ -1295,7 +1330,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 }
 .po-legende .po-l-fertig { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok)); }
 .po-legende .po-l-jetzt { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau)); }
-.po-legende .po-l-offen { background: rgba(127, 208, 232, .18); }
+.po-legende .po-l-offen { background: rgb(var(--wd-blau-rgb) / .18); }
 
 /* ---------------------------------------------------------------------
    21. ZAHLENKREISE REPARIERT + VIER PROZESSFARBEN
@@ -1353,10 +1388,15 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 
 /* ---------- b) Die vier Prozessfarben ---------- */
 :root {
-  --wd-p1: #7fd0e8;   /* Start      — Briefing, Angebot */
-  --wd-p2: #b79dff;   /* Gestaltung — Design */
-  --wd-p3: #6fd6a3;   /* Umsetzung  — Entwicklung, Tests */
-  --wd-p4: #e8c877;   /* Abschluss  — Abnahme, Übergabe */
+  /* Die vier Prozessfarben sind KEINE eigenen Farben, sondern Rollen.
+     Sie zeigen auf die Markenfarben, statt deren Werte zu wiederholen --
+     sonst haette man vier weitere Stellen, die beim naechsten
+     Farbwechsel stillschweigend zurueckbleiben und die Seite in zwei
+     Blautoene zerfallen lassen. */
+  --wd-p1: var(--wd-blau);   /* Start      — Briefing, Angebot */
+  --wd-p2: var(--wd-lila);   /* Gestaltung — Design */
+  --wd-p3: var(--wd-ok);     /* Umsetzung  — Entwicklung, Tests */
+  --wd-p4: var(--wd-gold);   /* Abschluss  — Abnahme, Übergabe */
 }
 
 .po-leer-punkt:nth-child(1)::before { background: linear-gradient(90deg, #3d9dbd, var(--wd-p1)); }
@@ -1373,7 +1413,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
    Erledigte Phasen tragen die Farbe IHRES Abschnitts, nicht pauschal
    Gruen. So sieht man auf einen Blick, wie weit man im Prozess ist —
    und nicht nur, dass etwas erledigt wurde. */
-.po-phase { background: rgba(127, 208, 232, .12); }
+.po-phase { background: rgb(var(--wd-blau-rgb) / .12); }
 .po-phase:nth-child(1).po-erledigt, .po-phase:nth-child(2).po-erledigt { background: var(--wd-p1); box-shadow: 0 0 9px -3px var(--wd-p1); }
 .po-phase:nth-child(3).po-erledigt { background: var(--wd-p2); box-shadow: 0 0 9px -3px var(--wd-p2); }
 .po-phase:nth-child(4).po-erledigt, .po-phase:nth-child(5).po-erledigt { background: var(--wd-p3); box-shadow: 0 0 9px -3px var(--wd-p3); }
@@ -1391,9 +1431,9 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .po-vorschau-phasen span:nth-child(4), .po-vorschau-phasen span:nth-child(5) { --po-f: var(--wd-p3); }
 .po-vorschau-phasen span:nth-child(6), .po-vorschau-phasen span:nth-child(7) { --po-f: var(--wd-p4); }
 @keyframes po-phase-lauf {
-  0%, 8%    { background: rgba(127,208,232,.12); box-shadow: none; }
+  0%, 8%    { background: rgb(var(--wd-blau-rgb) / .12); box-shadow: none; }
   14%, 60%  { background: var(--po-f); box-shadow: 0 0 12px -3px var(--po-f); }
-  100%      { background: rgba(127,208,232,.12); box-shadow: none; }
+  100%      { background: rgb(var(--wd-blau-rgb) / .12); box-shadow: none; }
 }
 
 /* ---------- Legende: vier Abschnitte statt drei Zustände ----------
@@ -1446,8 +1486,8 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   margin: 0 0 1.3rem;
   padding: .9rem 1rem 1rem;
   border-radius: 14px;
-  background: rgba(232,200,119,.07);
-  border: 1px solid rgba(232,200,119,.32);
+  background: rgb(var(--wd-gold-rgb) / .07);
+  border: 1px solid rgb(var(--wd-gold-rgb) / .32);
 }
 .po-dubist h4 {
   margin: 0; font-size: 1rem; color: var(--wd-gold);
@@ -1459,9 +1499,9 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
    darf ruhig ausgesprochen werden. */
 .po-allesgut {
   margin: 0 0 1.3rem; padding: .75rem .95rem;
-  border-radius: 12px; font-size: .9rem;
-  background: rgba(111,214,163,.08);
-  border: 1px solid rgba(111,214,163,.28);
+  border-radius: 10px; font-size: .9rem;
+  background: rgb(var(--wd-ok-rgb) / .08);
+  border: 1px solid rgb(var(--wd-ok-rgb) / .28);
   color: var(--wd-ok);
 }
 
@@ -1501,7 +1541,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 
 .po-aufg--fertig .po-aufg-titel { color: var(--wd-text-soft); text-decoration: line-through; text-decoration-thickness: 1px; }
 .po-aufg--weg    .po-aufg-titel { color: var(--wd-text-soft); text-decoration: line-through; opacity: .55; }
-.po-aufg--du { background: rgba(232,200,119,.06); }
+.po-aufg--du { background: rgb(var(--wd-gold-rgb) / .06); }
 
 /* Im oberen Kasten stehen dieselben Punkte noch einmal. Dort brauchen
    sie den eigenen Hintergrund nicht — der Kasten ist schon golden, ein
@@ -1513,35 +1553,35 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
    Ein Knopf, der nichts tut, lässt die Seite kaputt wirken. */
 .po-aufg-haken {
   width: 26px; height: 26px; margin-top: .05rem; padding: 0;
-  border-radius: 8px; border: 2px solid var(--wd-rand-stark);
+  border-radius: 10px; border: 2px solid var(--wd-rand-stark);
   background: transparent; color: transparent;
   display: grid; place-items: center;
   font-size: .95rem; line-height: 1;
   transition: all var(--wd-zeit-schnell) ease;
 }
 button.po-aufg-haken { cursor: pointer; }
-button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgba(232,200,119,.1); }
+button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgb(var(--wd-gold-rgb) / .1); }
 .po-aufg-haken--fest { cursor: default; }
 .po-aufg--fertig .po-aufg-haken { background: var(--wd-ok); border-color: var(--wd-ok); color: #06120c; }
 .po-aufg--jetzt  .po-aufg-haken { border-color: var(--wd-p2); color: var(--wd-p2); }
 .po-aufg--weg    .po-aufg-haken { border-style: dashed; color: var(--wd-text-soft); }
 /* Offene EIGENE Punkte: der Rand ist golden, damit klar ist, dass hier
    geklickt werden kann und soll. */
-.po-aufg--du button.po-aufg-haken { border-color: rgba(232,200,119,.55); }
+.po-aufg--du button.po-aufg-haken { border-color: rgb(var(--wd-gold-rgb) / .55); }
 
 .po-aufg-marke {
   display: inline-block; white-space: nowrap;
   font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase;
   padding: .14rem .45rem; border-radius: 999px;
 }
-.po-aufg-marke--ok    { background: rgba(111,214,163,.13); color: var(--wd-ok); }
-.po-aufg-marke--jetzt { background: rgba(183,157,255,.15); color: var(--wd-p2); }
-.po-aufg-marke--du    { background: rgba(232,200,119,.16); color: var(--wd-gold); }
+.po-aufg-marke--ok    { background: rgb(var(--wd-ok-rgb) / .13); color: var(--wd-ok); }
+.po-aufg-marke--jetzt { background: rgb(var(--wd-lila-rgb) / .15); color: var(--wd-p2); }
+.po-aufg-marke--du    { background: rgb(var(--wd-gold-rgb) / .16); color: var(--wd-gold); }
 .po-aufg-nicht {
   display: inline-block; margin-left: .4rem;
   font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase;
   padding: .12rem .4rem; border-radius: 999px;
-  background: rgba(255,157,157,.12); color: var(--wd-fehler);
+  background: rgb(var(--wd-fehler-rgb) / .12); color: var(--wd-fehler);
 }
 
 /* Auf dem Handy rutscht die Marke unter den Titel — nebeneinander bliebe
@@ -1578,8 +1618,8 @@ button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgba(232,
 .wr-pruef {
   display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,1fr);
   gap: .45rem .9rem; margin: .9rem 0 1.1rem;
-  padding: .9rem 1rem; border-radius: 12px;
-  background: rgba(127,208,232,.05); border: 1px solid var(--wd-rand);
+  padding: .9rem 1rem; border-radius: 10px;
+  background: rgb(var(--wd-blau-rgb) / .05); border: 1px solid var(--wd-rand);
 }
 @media (max-width: 520px) { .wr-pruef { grid-template-columns: 1fr; gap: .1rem; } }
 .wr-pruef dt { color: var(--wd-text-soft); font-size: .88rem; }
@@ -1593,13 +1633,13 @@ button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgba(232,
    erklärt, das ist aus Sicht des Kunden eine gute Nachricht. Gold ist im
    Bereich für "das betrifft dich, tu was" reserviert — hier ist nichts
    mehr zu tun. */
-.wr-fertig { border-color: rgba(111,214,163,.42); }
+.wr-fertig { border-color: rgb(var(--wd-ok-rgb) / .42); }
 .wr-haken {
   width: 46px; height: 46px; border-radius: 50%;
   display: grid; place-items: center; line-height: 1;
   font-size: 1.5rem; margin-bottom: .7rem;
-  background: rgba(111,214,163,.14); color: var(--wd-ok);
-  border: 1px solid rgba(111,214,163,.4);
+  background: rgb(var(--wd-ok-rgb) / .14); color: var(--wd-ok);
+  border: 1px solid rgb(var(--wd-ok-rgb) / .4);
 }
 
 .wr-beleg {
@@ -1695,8 +1735,8 @@ button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgba(232,
 .rl-text code {
   /* min() statt eines reinen em-Werts: In einem ohnehin kleineren Absatz
      rutschte der Code sonst auf 11,2px -- unter die Lesbarkeitsgrenze. */
-  font-size: max(.78rem, .86em); padding: .1rem .35rem; border-radius: 5px;
-  background: rgba(127,208,232,.09); color: var(--wd-blau);
+  font-size: max(.78rem, .86em); padding: .1rem .35rem; border-radius: 6px;
+  background: rgb(var(--wd-blau-rgb) / .09); color: var(--wd-blau);
 }
 
 /* Die Belehrung hebt sich ab: Sie ist der Teil, auf den es rechtlich
@@ -1704,14 +1744,14 @@ button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgba(232,
 .rl-widerruf { border-left: 3px solid var(--wd-gold); }
 .rl-adresse {
   padding: .7rem .9rem; border-radius: 10px;
-  background: rgba(127,208,232,.05); border: 1px solid var(--wd-rand);
+  background: rgb(var(--wd-blau-rgb) / .05); border: 1px solid var(--wd-rand);
 }
 
 /* Das Muster-Formular sieht bewusst wie ein Formular aus — man soll
    sehen, dass man es ausdrucken und ausfüllen kann. */
 .rl-formular {
   margin-top: .6rem; padding: 1rem 1.1rem;
-  border-radius: 12px; border: 1px dashed var(--wd-rand-stark);
+  border-radius: 10px; border: 1px dashed var(--wd-rand-stark);
   background: rgba(8,14,24,.4);
   font-size: .93rem;
 }
diff --git a/pruef-aufgaben-computer.png b/pruef-aufgaben-computer.png
index a2b58cc1..99e23776 100644
Binary files a/pruef-aufgaben-computer.png and b/pruef-aufgaben-computer.png differ
diff --git a/pruef-aufgaben-handy.png b/pruef-aufgaben-handy.png
index c4a7f6b5..9b3163e5 100644
Binary files a/pruef-aufgaben-handy.png and b/pruef-aufgaben-handy.png differ
diff --git a/pruef-detail-computer.png b/pruef-detail-computer.png
index f50d112d..7008dc0e 100644
Binary files a/pruef-detail-computer.png and b/pruef-detail-computer.png differ
diff --git a/pruef-detail-handy.png b/pruef-detail-handy.png
index 87e6b34a..a40fa04d 100644
Binary files a/pruef-detail-handy.png and b/pruef-detail-handy.png differ
diff --git a/pruef-portal-aufgaben-computer.png b/pruef-portal-aufgaben-computer.png
index 42f9e199..93ebe0ea 100644
Binary files a/pruef-portal-aufgaben-computer.png and b/pruef-portal-aufgaben-computer.png differ
diff --git a/pruef-portal-aufgaben-handy.png b/pruef-portal-aufgaben-handy.png
index 3f5e9a15..9507de01 100644
Binary files a/pruef-portal-aufgaben-handy.png and b/pruef-portal-aufgaben-handy.png differ
diff --git a/pruef-portal-postfach-computer.png b/pruef-portal-postfach-computer.png
index ca23ae39..2045276d 100644
Binary files a/pruef-portal-postfach-computer.png and b/pruef-portal-postfach-computer.png differ
diff --git a/pruef-portal-postfach-handy.png b/pruef-portal-postfach-handy.png
index a4706738..1a5a42e5 100644
Binary files a/pruef-portal-postfach-handy.png and b/pruef-portal-postfach-handy.png differ
diff --git a/pruef-postfach-computer.png b/pruef-postfach-computer.png
index 9105e209..dca4a755 100644
Binary files a/pruef-postfach-computer.png and b/pruef-postfach-computer.png differ
diff --git a/pruef-postfach-handy.png b/pruef-postfach-handy.png
index a3fe6e23..01af6c54 100644
Binary files a/pruef-postfach-handy.png and b/pruef-postfach-handy.png differ
diff --git a/pruef-rechtliches.png b/pruef-rechtliches.png
index d9c23ed9..71850637 100644
Binary files a/pruef-rechtliches.png and b/pruef-rechtliches.png differ
diff --git a/pruef-system.mjs b/pruef-system.mjs
new file mode 100644
index 00000000..a41bcb70
--- /dev/null
+++ b/pruef-system.mjs
@@ -0,0 +1,164 @@
+/* =====================================================================
+   pruef-system.mjs — Beweist, dass das Farbsystem eines IST
+
+   Ein Designsystem ist erst dann eines, wenn eine Änderung an EINER
+   Stelle überall ankommt. Steht die Markenfarbe an 155 Stellen
+   ausgeschrieben, hat man kein System, sondern eine Sammlung von
+   Zufällen, die sich zufällig ähneln.
+
+   WIE gemessen wird — und warum nicht anders.
+
+   Der naheliegende Weg wäre, die Variable im laufenden Browser
+   umzustellen und zu schauen, was mitgeht. Er liefert FALSCHE
+   Ergebnisse: Chromium erneuert Teilbäume, die per innerHTML eingefügt
+   wurden — Kopf- und Fusszeile stammen aus wd-core.js — nicht
+   zuverlässig, wenn man eine Variable nachträglich ändert. Auch ein
+   erzwungener Neuberechnungsstoss half nicht.
+
+   Nachgewiesen am 23.08.2026: Bei Laufzeitänderung blieben 110 Elemente
+   scheinbar "hängen". Lädt man dieselbe Seite dagegen mit bereits
+   geänderter Variable, sind sie orange. Der Fehler lag im
+   Messverfahren, nicht im Farbsystem.
+
+   Deshalb wird die Variable VOR dem Laden überschrieben. Das entspricht
+   genau dem, was eine Änderung in der CSS-Datei bewirkt — also dem
+   Fall, um den es wirklich geht.
+   ===================================================================== */
+import { chromium } from "playwright";
+import { createServer } from "node:http";
+import { readFileSync, existsSync, readdirSync } from "node:fs";
+import { join, extname } from "node:path";
+
+const W = process.cwd();
+const T = { ".html": "text/html", ".css": "text/css", ".js": "text/javascript",
+  ".png": "image/png", ".jpg": "image/jpeg", ".svg": "image/svg+xml",
+  ".webp": "image/webp", ".ico": "image/x-icon", ".json": "application/json" };
+const srv = createServer((q, r) => {
+  const p = join(W, decodeURIComponent(q.url.split("?")[0]));
+  if (existsSync(p) && !p.endsWith("/")) {
+    r.writeHead(200, { "content-type": T[extname(p)] || "text/plain" });
+    return r.end(readFileSync(p));
+  }
+  r.writeHead(404).end("");
+});
+await new Promise((r) => srv.listen(4332, r));
+
+const SEITEN = readdirSync(join(W, "webdesign")).filter((f) => f.endsWith(".html"));
+const ALT = "127, 208, 232";       // der bisherige Markenton
+const NEU = "255 120 40";          // drastisch anders, damit nichts untergeht
+
+const ergebnisse = [];
+function pruefe(name, ok, zusatz) {
+  ergebnisse.push({ name, ok });
+  console.log((ok ? "  ok   " : "  FEHL ") + name + (zusatz ? "  -> " + zusatz : ""));
+}
+
+const browser = await chromium.launch();
+
+async function seiteMitFarbe(datei, umstellen) {
+  const s = await browser.newPage({ viewport: { width: 1280, height: 900 } });
+  await s.route("**/webdesign/admin/**", (r) => r.fulfill({ json: { ok: true, anfragen: [], kunden: [], projekte: [], verlaeufe: [] } }));
+  await s.route("**/webdesign/portal/**", (r) => r.fulfill({ json: { ok: true } }));
+  await s.route("**/webdesign/api-ausweis", (r) => r.fulfill({ json: {} }));
+  await s.addInitScript(({ um, neu }) => {
+    sessionStorage.setItem("wd-sitzung-aktiv", "1");
+    if (!um) return;
+    const st = document.createElement("style");
+    st.textContent = ":root{--wd-blau-rgb: " + neu + " !important;}";
+    document.addEventListener("DOMContentLoaded", () => document.head.appendChild(st));
+  }, { um: umstellen, neu: NEU });
+  await s.goto("http://127.0.0.1:4332/webdesign/" + datei);
+  await s.waitForTimeout(420);
+  return s;
+}
+
+console.log("=== Kommt eine Farbänderung überall an? ===\n");
+
+let haengen = 0;
+let betroffen = 0;
+let sichtbarGesamt = 0;
+
+for (const datei of SEITEN) {
+  /* Erst zählen, wie viele Elemente den Markenton ÜBERHAUPT tragen —
+     sonst wäre "0 hängen geblieben" auch dann erfüllt, wenn die Farbe
+     auf der Seite gar nicht vorkommt. */
+  const vorher = await seiteMitFarbe(datei, false);
+  const wieviele = await vorher.evaluate((alt) => {
+    let n = 0;
+    for (const el of document.querySelectorAll("*")) {
+      const r = el.getBoundingClientRect();
+      if (r.width < 1 || r.height < 1) continue;
+      const st = getComputedStyle(el);
+      if ([st.color, st.backgroundColor, st.borderTopColor, st.boxShadow, st.backgroundImage]
+        .join("|").includes(alt)) n++;
+    }
+    return n;
+  }, ALT);
+  await vorher.close();
+  betroffen += wieviele;
+
+  const nachher = await seiteMitFarbe(datei, true);
+  const rest = await nachher.evaluate((alt) => {
+    const raus = [];
+    let sichtbar = 0;
+    for (const el of document.querySelectorAll("*")) {
+      const r = el.getBoundingClientRect();
+      if (r.width < 1 || r.height < 1) continue;
+      sichtbar++;
+      const st = getComputedStyle(el);
+      if ([st.color, st.backgroundColor, st.borderTopColor, st.boxShadow, st.backgroundImage]
+        .join("|").includes(alt)) {
+        raus.push(el.tagName.toLowerCase() + "." + (el.className || "").toString().slice(0, 34));
+      }
+    }
+    return { raus, sichtbar };
+  }, ALT);
+  await nachher.close();
+
+  sichtbarGesamt += rest.sichtbar;
+  haengen += rest.raus.length;
+  if (rest.raus.length) {
+    console.log(`  FEHL ${datei}: ${rest.raus.length} Elemente zeigen weiter den alten Ton`);
+    for (const h of [...new Set(rest.raus)].slice(0, 6)) console.log("         " + h);
+  }
+}
+
+pruefe("die Markenfarbe kommt auf vielen Elementen vor", betroffen > 200,
+  betroffen + " von " + sichtbarGesamt + " sichtbaren Elementen");
+pruefe("nach der Umstellung bleibt KEINE Stelle beim alten Ton", haengen === 0,
+  haengen + " hängen geblieben");
+
+/* ---- Die vier Prozessfarben müssen an den Markenfarben hängen ---- */
+const s3 = await seiteMitFarbe("ablauf.html", false);
+const prozess = await s3.evaluate(() => {
+  const w = getComputedStyle(document.documentElement);
+  const vor = ["--wd-p1", "--wd-p2", "--wd-p3", "--wd-p4"].map((v) => w.getPropertyValue(v).trim());
+  document.documentElement.style.setProperty("--wd-blau-rgb", "255 120 40");
+  document.documentElement.style.setProperty("--wd-gold-rgb", "40 255 120");
+  const w2 = getComputedStyle(document.documentElement);
+  const nach = ["--wd-p1", "--wd-p2", "--wd-p3", "--wd-p4"].map((v) => w2.getPropertyValue(v).trim());
+  return { vor, nach };
+});
+pruefe("Prozessfarbe 1 (Start) hängt an der Markenfarbe Blau",
+  prozess.vor[0] !== prozess.nach[0], prozess.vor[0] + " -> " + prozess.nach[0]);
+pruefe("Prozessfarbe 4 (Abschluss) hängt an der Markenfarbe Gold",
+  prozess.vor[3] !== prozess.nach[3], prozess.vor[3] + " -> " + prozess.nach[3]);
+
+/* ---- Radien: eine knappe Skala statt Zufallswerten ---- */
+const radien = await s3.evaluate(() => {
+  const werte = new Set();
+  for (const el of document.querySelectorAll("*")) {
+    if (el.getBoundingClientRect().width < 1) continue;
+    const v = getComputedStyle(el).borderTopLeftRadius;
+    if (v && v !== "0px" && v.endsWith("px") && parseFloat(v) < 100) werte.add(v);
+  }
+  return Array.from(werte).sort((a, b) => parseFloat(a) - parseFloat(b));
+});
+pruefe("Eckenradien folgen einer knappen Skala", radien.length <= 5, radien.join(", "));
+await s3.close();
+
+await browser.close();
+srv.close();
+const f = ergebnisse.filter((e) => !e.ok).length;
+console.log(`\n===== ${ergebnisse.length - f} bestanden, ${f} fehlgeschlagen =====`);
+process.exitCode = f ? 1 : 0;
diff --git a/pruef-widerruf-computer.png b/pruef-widerruf-computer.png
index d5a44e51..8c2376af 100644
Binary files a/pruef-widerruf-computer.png and b/pruef-widerruf-computer.png differ
diff --git a/pruef-widerruf-handy.png b/pruef-widerruf-handy.png
index be574d54..5a6072f2 100644
Binary files a/pruef-widerruf-handy.png and b/pruef-widerruf-handy.png differ
diff --git a/webdesign/ablauf.html b/webdesign/ablauf.html
index 33090fa9..369d263e 100644
--- a/webdesign/ablauf.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 <style>
   /* Zeitstrahl: die Linie verbindet die Nummernkreise. Sie liegt hinter
      den Kreisen (z-index) und endet beim letzten Schritt, damit sie nicht
@@ -40,7 +40,7 @@
     border: 2px solid var(--wd-rand-stark);
     font-variant-numeric: tabular-nums;
   }
-  .abl-schritt--lila .abl-nr { color: var(--wd-lila); border-color: rgba(183,157,255,.4); }
+  .abl-schritt--lila .abl-nr { color: var(--wd-lila); border-color: rgb(var(--wd-lila-rgb) / .4); }
   @media (max-width: 640px) { .abl-nr { width: 40px; height: 40px; font-size: 1rem; } }
 
   .abl-karte h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-bottom: .9em; }
@@ -51,8 +51,8 @@
   /* Die dritte Spalte ist das Ergebnis — bekommt einen leichten Rahmen,
      damit sie sich von "wer macht was" abhebt. */
   .abl-rolle--erg {
-    background: rgba(127,208,232,.05); border: 1px solid var(--wd-rand);
-    border-radius: 12px; padding: .8rem .9rem; margin: -.8rem -.9rem;
+    background: rgb(var(--wd-blau-rgb) / .05); border: 1px solid var(--wd-rand);
+    border-radius: 10px; padding: .8rem .9rem; margin: -.8rem -.9rem;
   }
   .abl-rolle p { margin: 0; font-size: .98rem; }
 </style>
@@ -183,7 +183,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-ablauf.js?v=20260823wd8"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
+<script src="/assets/js/i18n-wd-ablauf.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
 </body>
 </html>
diff --git a/webdesign/anfrage.html b/webdesign/anfrage.html
index 124d3d7a..7f18268b 100644
--- a/webdesign/anfrage.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 <style>
   /* ---------- Schrittanzeige ----------
      Zeigt alle vier Schritte gleichzeitig statt nur "3 von 4". Man sieht
@@ -23,7 +23,7 @@
   .af-schritte { display: flex; gap: .4rem; margin-bottom: .8rem; }
   .af-schritt-marke { flex: 1; text-align: center; }
   .af-schritt-balken {
-    height: 5px; border-radius: 999px; background: rgba(127,208,232,.14);
+    height: 5px; border-radius: 999px; background: rgb(var(--wd-blau-rgb) / .14);
     margin-bottom: .45rem; overflow: hidden;
   }
   .af-schritt-balken span {
@@ -97,7 +97,7 @@
   .af-danke-haken {
     width: 74px; height: 74px; margin: 0 auto 1.2rem;
     border-radius: 50%; display: flex; align-items: center; justify-content: center;
-    background: rgba(111,214,163,.12); border: 2px solid var(--wd-ok);
+    background: rgb(var(--wd-ok-rgb) / .12); border: 2px solid var(--wd-ok);
     font-size: 2.1rem; color: var(--wd-ok);
   }
   .af-nummer {
@@ -105,8 +105,8 @@
     font-family: var(--font-head); font-weight: 800;
     font-size: clamp(1.5rem,4vw,2rem); letter-spacing: .06em;
     color: var(--wd-gold);
-    padding: .5rem 1.2rem; border-radius: 12px;
-    background: rgba(232,200,119,.08); border: 1px solid rgba(232,200,119,.32);
+    padding: .5rem 1.2rem; border-radius: 10px;
+    background: rgb(var(--wd-gold-rgb) / .08); border: 1px solid rgb(var(--wd-gold-rgb) / .32);
   }
 
   .af-wieder {
@@ -418,8 +418,8 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-anfrage.js?v=20260823wd8"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
-<script src="/assets/js/wd-anfrage.js?v=20260823wd8"></script>
+<script src="/assets/js/i18n-wd-anfrage.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-anfrage.js?v=20260823wd9"></script>
 </body>
 </html>
diff --git a/webdesign/faq.html b/webdesign/faq.html
index d052222e..7f13b79f 100644
--- a/webdesign/faq.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 <style>
   .fq-thema { scroll-margin-top: 90px; }
   .fq-thema + .fq-thema { margin-top: clamp(2rem, 4vw, 3rem); }
@@ -43,11 +43,11 @@
     flex: 0 1 auto;
     padding: .55rem 1rem; min-height: 44px;
     display: inline-flex; align-items: center; justify-content: center;
-    border-radius: 12px; border: 1px solid var(--wd-rand);
+    border-radius: 10px; border: 1px solid var(--wd-rand);
     font-size: .92rem; font-weight: 600; color: var(--wd-text-mid);
     white-space: normal; text-align: center; line-height: 1.25;
   }
-  .fq-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); }
+  .fq-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgb(var(--wd-blau-rgb) / .06); }
 
   /* Ab 700px alle nebeneinander in EINER Reihe.
      Rueckmeldung 22.08.2026: "alle neben einander bitte". Vorher passten
@@ -195,7 +195,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-faq.js?v=20260823wd8"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
+<script src="/assets/js/i18n-wd-faq.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
 </body>
 </html>
diff --git a/webdesign/index.html b/webdesign/index.html
index d29d6f56..2b21ef01 100644
--- a/webdesign/index.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 <style>
   /* ---------- Nur auf der Startseite gebraucht ---------- */
 
@@ -88,7 +88,7 @@
     padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.2rem, 4vw, 3rem);
     background:
       linear-gradient(180deg, rgba(20,32,50,.8), rgba(9,15,26,.9)) padding-box,
-      linear-gradient(120deg, rgba(127,208,232,.5), rgba(183,157,255,.4)) border-box;
+      linear-gradient(120deg, rgb(var(--wd-blau-rgb) / .5), rgb(var(--wd-lila-rgb) / .4)) border-box;
     border: 1px solid transparent;
     box-shadow: var(--wd-schatten-tief);
   }
@@ -407,8 +407,8 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-index.js?v=20260823wd8"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
+<script src="/assets/js/i18n-wd-index.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
 <script>
 /* ---------------------------------------------------------------------
    Marken-Intro (Masterplan S.3, Schritt 02: "Nach erfolgreichem Code
diff --git a/webdesign/leistungen.html b/webdesign/leistungen.html
index dd12759b..17d7ef7c 100644
--- a/webdesign/leistungen.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 <style>
   /* Sprungmarken.
      Frueher eine waagerecht wischbare Leiste. Rueckmeldung 22.08.2026:
@@ -36,11 +36,11 @@
     flex: 0 1 auto;
     padding: .55rem 1rem; min-height: 44px;
     display: inline-flex; align-items: center; justify-content: center;
-    border-radius: 12px; border: 1px solid var(--wd-rand);
+    border-radius: 10px; border: 1px solid var(--wd-rand);
     font-size: .92rem; font-weight: 600; color: var(--wd-text-mid);
     white-space: normal; text-align: center; line-height: 1.25;
   }
-  .ls-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); }
+  .ls-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgb(var(--wd-blau-rgb) / .06); }
 
   /* Ab 700px alle nebeneinander in EINER Reihe.
      Rueckmeldung 22.08.2026: "alle neben einander bitte". Vorher passten
@@ -331,7 +331,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-leistungen.js?v=20260823wd8"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
+<script src="/assets/js/i18n-wd-leistungen.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
 </body>
 </html>
diff --git a/webdesign/portal.html b/webdesign/portal.html
index 2ff7f8e3..d2aebd31 100644
--- a/webdesign/portal.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 <style>
   .po-login { max-width: 440px; margin: clamp(1.5rem,6vh,4rem) auto; }
 
@@ -31,17 +31,17 @@
      Zeigt auf einen Blick, wo das Projekt steht — die häufigste Frage
      überhaupt, und der Grund, warum Kunden anrufen. */
   .po-phasen { display: flex; gap: 3px; margin: .8rem 0 .6rem; }
-  .po-phase { flex: 1; height: 6px; border-radius: 999px; background: rgba(127,208,232,.13); }
+  .po-phase { flex: 1; height: 6px; border-radius: 999px; background: rgb(var(--wd-blau-rgb) / .13); }
   .po-phase.po-erledigt { background: var(--wd-blau-tief); }
-  .po-phase.po-jetzt { background: var(--wd-blau); box-shadow: 0 0 10px rgba(127,208,232,.6); }
+  .po-phase.po-jetzt { background: var(--wd-blau); box-shadow: 0 0 10px rgb(var(--wd-blau-rgb) / .6); }
   .po-phasen-text { font-size: .82rem; color: var(--wd-text-soft); }
 
   .po-wartet {
     display: inline-flex; align-items: center; gap: .35rem;
     padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
   }
-  .po-wartet--kunde { background: rgba(232,200,119,.16); color: var(--wd-gold); }
-  .po-wartet--dogfather { background: rgba(127,208,232,.14); color: var(--wd-blau); }
+  .po-wartet--kunde { background: rgb(var(--wd-gold-rgb) / .16); color: var(--wd-gold); }
+  .po-wartet--dogfather { background: rgb(var(--wd-blau-rgb) / .14); color: var(--wd-blau); }
 
   .po-liste { list-style: none; margin: 0; padding: 0; }
   .po-eintrag {
@@ -54,15 +54,15 @@
   .po-eintrag-neben { font-size: .84rem; color: var(--wd-text-soft); }
 
   .po-nachricht { padding: .8rem 1rem; border-radius: 14px; margin-bottom: .6rem; max-width: 88%; }
-  .po-nachricht--ich { background: rgba(127,208,232,.1); border: 1px solid var(--wd-rand-stark); margin-left: auto; }
-  .po-nachricht--du { background: rgba(16,26,41,.7); border: 1px solid var(--wd-rand); }
+  .po-nachricht--ich { background: rgb(var(--wd-blau-rgb) / .1); border: 1px solid var(--wd-rand-stark); margin-left: auto; }
+  .po-nachricht--du { background: rgb(var(--wd-glas-rgb) / .7); border: 1px solid var(--wd-rand); }
   .po-nachricht-kopf { font-size: 0.8rem; color: var(--wd-text-soft); margin-bottom: .25rem; }
   .po-nachricht p { margin: 0; font-size: .95rem; white-space: pre-wrap; color: var(--wd-text); }
 
-  .po-idee { padding: 1rem; border-radius: 14px; border: 1px solid var(--wd-rand); background: rgba(16,26,41,.5); margin-bottom: .7rem; }
+  .po-idee { padding: 1rem; border-radius: 14px; border: 1px solid var(--wd-rand); background: rgb(var(--wd-glas-rgb) / .5); margin-bottom: .7rem; }
   .po-idee-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
   .po-idee-kopf h4 { margin: 0; flex: 1; min-width: 0; }
-  .po-idee--offen { border-color: rgba(232,200,119,.4); background: rgba(232,200,119,.05); }
+  .po-idee--offen { border-color: rgb(var(--wd-gold-rgb) / .4); background: rgb(var(--wd-gold-rgb) / .05); }
 
   .po-laedt { text-align: center; padding: 2.5rem 1rem; color: var(--wd-text-soft); }
 </style>
@@ -134,8 +134,8 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-portal.js?v=20260823wd8"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
-<script src="/assets/js/wd-portal.js?v=20260823wd8"></script>
+<script src="/assets/js/i18n-wd-portal.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-portal.js?v=20260823wd9"></script>
 </body>
 </html>
diff --git a/webdesign/portfolio.html b/webdesign/portfolio.html
index 8f9373b0..810222a8 100644
--- a/webdesign/portfolio.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 <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=20260823wd8"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
+<script src="/assets/js/i18n-wd-portfolio.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
 </body>
 </html>
diff --git a/webdesign/preise.html b/webdesign/preise.html
index f9e2a6cf..d84d4a33 100644
--- a/webdesign/preise.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 <style>
   .pr-preis-gross { font-family: var(--font-head); font-weight: 800; color: var(--wd-blau); white-space: nowrap; }
 
@@ -29,7 +29,7 @@
     .pr-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
     .pr-tabelle tr {
       border: 1px solid var(--wd-rand); border-radius: var(--wd-r);
-      margin-bottom: .8rem; padding: .3rem .2rem; background: rgba(16,26,41,.5);
+      margin-bottom: .8rem; padding: .3rem .2rem; background: rgb(var(--wd-glas-rgb) / .5);
     }
     .pr-tabelle td { border: none; padding: .45rem 1rem; }
     .pr-tabelle td::before {
@@ -196,7 +196,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-preise.js?v=20260823wd8"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
+<script src="/assets/js/i18n-wd-preise.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
 </body>
 </html>
diff --git a/webdesign/rechtliches.html b/webdesign/rechtliches.html
index 8782ac13..4c3a7fa9 100644
--- a/webdesign/rechtliches.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 </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=20260823wd8"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
 </body>
 </html>
diff --git a/webdesign/sw.js b/webdesign/sw.js
index 88336983..b603bf08 100644
--- a/webdesign/sw.js
+++ b/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-v8";
+const CACHE_NAME = "dogfather-webdesign-v9";
 
 /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
    HTML-Datei in dieser Liste. */
diff --git a/webdesign/ueber.html b/webdesign/ueber.html
index 3384e262..e6bc9a89 100644
--- a/webdesign/ueber.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 <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=20260823wd8"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
+<script src="/assets/js/i18n-wd-ueber.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
 </body>
 </html>
diff --git a/webdesign/verwaltung.html b/webdesign/verwaltung.html
index de713e4e..05eefa0e 100644
--- a/webdesign/verwaltung.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 <style>
   /* =====================================================================
      Verwaltungsbereich — bewusst NUR AUF DEUTSCH.
@@ -53,7 +53,7 @@
     position: relative; overflow: hidden;
     display: block; width: 100%; text-align: left; cursor: pointer;
     padding: .95rem 1.05rem;
-    border-radius: 16px;
+    border-radius: 14px;
     background: linear-gradient(180deg, rgba(20,32,50,.62), rgba(9,15,26,.8));
     border: 1px solid var(--wd-rand);
     transition: border-color var(--wd-zeit-schnell) ease,
@@ -63,7 +63,7 @@
   .vw-zahl:hover { border-color: var(--wd-rand-stark); transform: translateY(-2px); }
   .vw-zahl.vw-an {
     border-color: var(--wd-blau);
-    box-shadow: 0 0 0 1px var(--wd-blau) inset, 0 14px 34px -20px rgba(127,208,232,.7);
+    box-shadow: 0 0 0 1px var(--wd-blau) inset, 0 14px 34px -20px rgb(var(--wd-blau-rgb) / .7);
   }
   .vw-zahl-kopf { display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; }
   .vw-zahl-symbol { font-size: 1rem; line-height: 1; opacity: .85; }
@@ -80,12 +80,12 @@
   .vw-zahl--null .vw-zahl-wert { color: var(--wd-text-soft); }
 
   /* Handlungsbedarf: Gold, und nur hier. */
-  .vw-zahl--achtung { border-color: rgba(232,200,119,.34); background: linear-gradient(180deg, rgba(232,200,119,.07), rgba(9,15,26,.8)); }
+  .vw-zahl--achtung { border-color: rgb(var(--wd-gold-rgb) / .34); background: linear-gradient(180deg, rgb(var(--wd-gold-rgb) / .07), rgba(9,15,26,.8)); }
   .vw-zahl--achtung .vw-zahl-wert { color: var(--wd-gold); }
   .vw-zahl--achtung .vw-zahl-zusatz { color: var(--wd-gold); }
 
   /* Dringend: etwas liegt zu lange. */
-  .vw-zahl--dringend { border-color: rgba(255,157,157,.4); background: linear-gradient(180deg, rgba(255,157,157,.07), rgba(9,15,26,.8)); }
+  .vw-zahl--dringend { border-color: rgb(var(--wd-fehler-rgb) / .4); background: linear-gradient(180deg, rgb(var(--wd-fehler-rgb) / .07), rgba(9,15,26,.8)); }
   .vw-zahl--dringend .vw-zahl-wert,
   .vw-zahl--dringend .vw-zahl-zusatz { color: var(--wd-fehler); }
 
@@ -93,16 +93,16 @@
   /* ---------- Filter ---------- */
   .vw-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }
   .vw-filter-knopf {
-    min-height: 44px; padding: .5rem .95rem; border-radius: 11px;
+    min-height: 44px; padding: .5rem .95rem; border-radius: 10px;
     border: 1px solid var(--wd-rand); background: transparent;
     color: var(--wd-text-mid); font-weight: 600; font-size: .9rem; cursor: pointer;
     display: inline-flex; align-items: center; gap: .4rem;
   }
   .vw-filter-knopf:hover { border-color: var(--wd-rand-stark); color: var(--wd-text); }
-  .vw-filter-knopf.vw-an { background: rgba(127,208,232,.13); border-color: var(--wd-blau); color: var(--wd-blau); }
+  .vw-filter-knopf.vw-an { background: rgb(var(--wd-blau-rgb) / .13); border-color: var(--wd-blau); color: var(--wd-blau); }
   .vw-filter-zahl {
     font-size: 0.8rem; padding: .1rem .4rem; border-radius: 6px;
-    background: rgba(127,208,232,.14); color: var(--wd-blau-hell);
+    background: rgb(var(--wd-blau-rgb) / .14); color: var(--wd-blau-hell);
   }
   .vw-suche { margin-left: auto; min-width: 200px; flex: 0 1 260px; }
 
@@ -112,11 +112,11 @@
     align-items: center;
     padding: 1rem 1.1rem; margin-bottom: .6rem;
     border-radius: 14px; border: 1px solid var(--wd-rand);
-    background: rgba(16,26,41,.5);
+    background: rgb(var(--wd-glas-rgb) / .5);
     cursor: pointer; width: 100%; text-align: left;
     transition: border-color var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease;
   }
-  .vw-karte:hover { border-color: var(--wd-rand-stark); background: rgba(127,208,232,.05); }
+  .vw-karte:hover { border-color: var(--wd-rand-stark); background: rgb(var(--wd-blau-rgb) / .05); }
   .vw-karte-nr { font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: var(--wd-blau); white-space: nowrap; }
   .vw-karte-mitte { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
   .vw-karte-name { font-weight: 700; color: var(--wd-text); }
@@ -130,13 +130,13 @@
 
   /* Statusfarben — Gold nur da, wo wirklich etwas zu tun ist. */
   .vw-status { display: inline-block; padding: .22rem .6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
-  .vw-status--neu { background: rgba(232,200,119,.16); color: var(--wd-gold); }
-  .vw-status--pruefung { background: rgba(127,208,232,.14); color: var(--wd-blau); }
-  .vw-status--rueckfrage { background: rgba(183,157,255,.16); color: var(--wd-lila); }
-  .vw-status--angebot { background: rgba(183,157,255,.16); color: var(--wd-lila); }
-  .vw-status--angenommen { background: rgba(111,214,163,.16); color: var(--wd-ok); }
-  .vw-status--abgeschlossen { background: rgba(111,214,163,.1); color: var(--wd-ok); }
-  .vw-status--abgelehnt { background: rgba(255,157,157,.12); color: var(--wd-fehler); }
+  .vw-status--neu { background: rgb(var(--wd-gold-rgb) / .16); color: var(--wd-gold); }
+  .vw-status--pruefung { background: rgb(var(--wd-blau-rgb) / .14); color: var(--wd-blau); }
+  .vw-status--rueckfrage { background: rgb(var(--wd-lila-rgb) / .16); color: var(--wd-lila); }
+  .vw-status--angebot { background: rgb(var(--wd-lila-rgb) / .16); color: var(--wd-lila); }
+  .vw-status--angenommen { background: rgb(var(--wd-ok-rgb) / .16); color: var(--wd-ok); }
+  .vw-status--abgeschlossen { background: rgb(var(--wd-ok-rgb) / .1); color: var(--wd-ok); }
+  .vw-status--abgelehnt { background: rgb(var(--wd-fehler-rgb) / .12); color: var(--wd-fehler); }
 
   /* ---------- Detailansicht ---------- */
   .vw-detail { position: fixed; inset: 0; z-index: 100; display: none; }
@@ -160,7 +160,7 @@
     background: linear-gradient(180deg, #0b1523, #070c15);
     border: 1px solid var(--wd-rand-stark);
     border-radius: 20px;
-    box-shadow: 0 50px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(127,208,232,.06) inset;
+    box-shadow: 0 50px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgb(var(--wd-blau-rgb) / .06) inset;
     overflow-y: auto;
     padding: clamp(1.2rem, 3vw, 1.9rem) clamp(1rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem);
     animation: vw-rein .26s cubic-bezier(.22,1,.36,1) both;
@@ -241,8 +241,8 @@
   }
   .vw-blick-feld {
     padding: .7rem .8rem;
-    border-radius: 12px;
-    background: rgba(127,208,232,.055);
+    border-radius: 10px;
+    background: rgb(var(--wd-blau-rgb) / .055);
     border: 1px solid var(--wd-rand);
     min-width: 0;
   }
@@ -285,7 +285,7 @@
   .vw-detail-spalten .vw-abschnitt {
     padding: .95rem 1.1rem 1rem;
     border-radius: 14px;
-    background: rgba(16, 26, 41, .5);
+    background: rgb(var(--wd-glas-rgb) / .5);
     border: 1px solid var(--wd-rand);
     margin-bottom: 1.1rem;
   }
@@ -317,8 +317,8 @@
 
   .vw-status-wahl { display: flex; flex-wrap: wrap; gap: .4rem; }
   .vw-notiz {
-    padding: .8rem .95rem; border-radius: 12px; margin-bottom: .5rem;
-    background: rgba(127,208,232,.05); border: 1px solid var(--wd-rand);
+    padding: .8rem .95rem; border-radius: 10px; margin-bottom: .5rem;
+    background: rgb(var(--wd-blau-rgb) / .05); border: 1px solid var(--wd-rand);
   }
   .vw-notiz-kopf { font-size: .76rem; color: var(--wd-text-soft); margin-bottom: .3rem; }
   .vw-notiz p { margin: 0; font-size: .93rem; white-space: pre-wrap; }
@@ -326,7 +326,7 @@
   .vw-tabs { display: flex; gap: .4rem; }
   .vw-link-anzeige {
     padding: 1rem; border-radius: 14px;
-    background: rgba(232,200,119,.08); border: 1px solid rgba(232,200,119,.35);
+    background: rgb(var(--wd-gold-rgb) / .08); border: 1px solid rgb(var(--wd-gold-rgb) / .35);
   }
   .vw-link-anzeige code {
     display: block; word-break: break-all; margin: .6rem 0;
@@ -362,12 +362,12 @@
   .vw-karte-marken { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
   .vw-mini {
     font-size: 0.8rem; font-weight: 600; padding: .15rem .5rem;
-    border-radius: 6px; background: rgba(127,208,232,.09);
+    border-radius: 6px; background: rgb(var(--wd-blau-rgb) / .09);
     color: var(--wd-text-mid); border: 1px solid var(--wd-rand);
     white-space: nowrap;
   }
-  .vw-mini--geld { color: var(--wd-gold); border-color: rgba(232,200,119,.3); background: rgba(232,200,119,.07); }
-  .vw-mini--alt { color: var(--wd-fehler); border-color: rgba(255,157,157,.3); background: rgba(255,157,157,.06); }
+  .vw-mini--geld { color: var(--wd-gold); border-color: rgb(var(--wd-gold-rgb) / .3); background: rgb(var(--wd-gold-rgb) / .07); }
+  .vw-mini--alt { color: var(--wd-fehler); border-color: rgb(var(--wd-fehler-rgb) / .3); background: rgb(var(--wd-fehler-rgb) / .06); }
 
   /* Leerer Zustand — auch hier fuehren statt nur feststellen. */
   .vw-leer-gross { text-align: center; padding: clamp(2rem,6vw,3.5rem) 1.5rem; }
@@ -385,7 +385,7 @@
   .vw-uebernahme {
     border-radius: var(--wd-r);
     padding: 1.1rem 1.2rem;
-    background: linear-gradient(180deg, rgba(127,208,232,.09), rgba(9,15,26,.6));
+    background: linear-gradient(180deg, rgb(var(--wd-blau-rgb) / .09), rgba(9,15,26,.6));
     border: 1px solid var(--wd-rand-stark);
   }
   .vw-uebernahme h4 { margin: 0 0 .3rem; font-size: 1rem; color: var(--wd-text); }
@@ -451,7 +451,7 @@
   .vw-wartet {
     display: inline-flex; align-items: center; gap: .3rem;
     padding: .1rem .5rem; border-radius: 999px;
-    background: rgba(232,200,119,.13); border: 1px solid rgba(232,200,119,.3);
+    background: rgb(var(--wd-gold-rgb) / .13); border: 1px solid rgb(var(--wd-gold-rgb) / .3);
     color: var(--wd-gold); font-size: .76rem; font-weight: 600;
   }
 
@@ -475,7 +475,7 @@
     padding: .55rem .7rem; margin-bottom: .3rem;
     border-radius: 10px; border: 1px solid transparent;
   }
-  .vw-aufg:hover { background: rgba(127,208,232,.045); border-color: var(--wd-rand); }
+  .vw-aufg:hover { background: rgb(var(--wd-blau-rgb) / .045); border-color: var(--wd-rand); }
 
   /* Das Kaestchen ist ein echter Knopf, kein Symbol mit Klickfläche
      drumherum: Es muss ueber die Tastatur erreichbar sein und beim
@@ -492,7 +492,7 @@
   .vw-aufg-haken {
     grid-row: 1 / span 2; grid-column: 1;
     width: 24px; height: 24px; margin-top: .1rem; padding: 0;
-    border-radius: 7px; border: 2px solid var(--wd-rand-stark);
+    border-radius: 6px; border: 2px solid var(--wd-rand-stark);
     background: transparent; color: transparent;
     cursor: pointer; font-size: .9rem; line-height: 1;
     display: grid; place-items: center;
@@ -512,23 +512,23 @@
   /* Punkte, die auf den KUNDEN warten, muessen sich unterscheiden --
      sonst liest man die Liste als reine Fortschrittsanzeige und
      uebersieht, dass man selbst gar nicht am Zug ist. */
-  .vw-aufg--kunde { background: rgba(232,200,119,.055); }
-  .vw-aufg--kunde:hover { background: rgba(232,200,119,.1); }
+  .vw-aufg--kunde { background: rgb(var(--wd-gold-rgb) / .055); }
+  .vw-aufg--kunde:hover { background: rgb(var(--wd-gold-rgb) / .1); }
   .vw-aufg-wer {
     font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase;
     padding: .12rem .4rem; border-radius: 999px; white-space: nowrap;
-    background: rgba(232,200,119,.15); color: var(--wd-gold);
+    background: rgb(var(--wd-gold-rgb) / .15); color: var(--wd-gold);
   }
 
   .vw-aufg-nicht {
     display: inline-block; margin-left: .35rem;
     font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase;
     padding: .12rem .4rem; border-radius: 999px;
-    background: rgba(255,157,157,.12); color: var(--wd-fehler);
+    background: rgb(var(--wd-fehler-rgb) / .12); color: var(--wd-fehler);
   }
 
   .vw-mini {
-    padding: .2rem .45rem; border-radius: 7px; font-size: .82rem;
+    padding: .2rem .45rem; border-radius: 6px; font-size: .82rem;
     border: 1px solid var(--wd-rand); background: transparent;
     color: var(--wd-text-soft); cursor: pointer; line-height: 1;
     min-width: 30px; min-height: 30px;
@@ -544,11 +544,11 @@
   .vw-pf-eintrag {
     display: block; width: 100%; text-align: left; cursor: pointer;
     padding: .8rem .9rem; margin-bottom: .4rem;
-    border-radius: 12px; border: 1px solid var(--wd-rand);
+    border-radius: 10px; border: 1px solid var(--wd-rand);
     background: var(--wd-glas); color: inherit;
   }
-  .vw-pf-eintrag:hover { border-color: var(--wd-rand-stark); background: rgba(127,208,232,.05); }
-  .vw-pf-eintrag.vw-an { border-color: var(--wd-blau); background: rgba(127,208,232,.09); }
+  .vw-pf-eintrag:hover { border-color: var(--wd-rand-stark); background: rgb(var(--wd-blau-rgb) / .05); }
+  .vw-pf-eintrag.vw-an { border-color: var(--wd-blau); background: rgb(var(--wd-blau-rgb) / .09); }
   .vw-pf-eintrag--neu { border-left: 3px solid var(--wd-gold); }
   .vw-pf-name { font-weight: 700; display: flex; align-items: center; gap: .4rem; }
   .vw-pf-vorschau {
@@ -578,7 +578,7 @@
   }
   .vw-blase--wir {
     align-self: flex-end;
-    background: rgba(127,208,232,.12); border: 1px solid var(--wd-rand-stark);
+    background: rgb(var(--wd-blau-rgb) / .12); border: 1px solid var(--wd-rand-stark);
     border-bottom-right-radius: 5px;
   }
   /* Interne Notiz: deutlich anders. Sie darf keinesfalls wie eine
@@ -586,8 +586,8 @@
      oder, schlimmer, tippt Vertrauliches ins falsche Feld. */
   .vw-blase--intern {
     align-self: flex-end;
-    background: rgba(232,200,119,.08);
-    border: 1px dashed rgba(232,200,119,.45);
+    background: rgb(var(--wd-gold-rgb) / .08);
+    border: 1px dashed rgb(var(--wd-gold-rgb) / .45);
     border-bottom-right-radius: 5px;
   }
   .vw-blase-kopf { font-size: .7rem; color: var(--wd-text-soft); margin-bottom: .25rem; }
@@ -597,7 +597,7 @@
      Ein Haekchen allein uebersieht man -- die Umgebung muss sich sichtbar
      aendern, sonst landet irgendwann eine interne Bemerkung beim Kunden. */
   .vw-pf-schreiben { margin-top: .8rem; padding: .8rem; border-radius: 14px; border: 1px solid var(--wd-rand); }
-  .vw-pf-schreiben--intern { border-color: rgba(232,200,119,.45); background: rgba(232,200,119,.05); }
+  .vw-pf-schreiben--intern { border-color: rgb(var(--wd-gold-rgb) / .45); background: rgb(var(--wd-gold-rgb) / .05); }
   .vw-pf-schalter { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--wd-text-soft); cursor: pointer; }
   .vw-pf-schalter input { width: 18px; height: 18px; accent-color: var(--wd-gold); }
 </style>
@@ -753,7 +753,7 @@
   <div class="vw-detail-blatt" id="vw-detail-blatt"></div>
 </div>
 
-<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
 <script>
 /* =====================================================================
    Verwaltung: Anfragen ansehen, Status ändern, Notizen, Archivieren.
diff --git a/webdesign/widerruf.html b/webdesign/widerruf.html
index 96225f2a..4b953948 100644
--- a/webdesign/widerruf.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 </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=20260823wd8"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
-<script src="/assets/js/wd-widerruf.js?v=20260823wd8"></script>
+<script src="/assets/js/i18n-wd-widerruf.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-widerruf.js?v=20260823wd9"></script>
 </body>
 </html>
diff --git a/webdesign/zugang.html b/webdesign/zugang.html
index 45fcbf3b..3f43c552 100644
--- a/webdesign/zugang.html
+++ b/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=20260823wd8" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
 <style>
   /* =====================================================================
      Zugangswand — nur hier gebraucht, deshalb bewusst NICHT in
@@ -43,7 +43,7 @@
      (dokumentierte Lektion aus gate.html). */
   .zg-logo::before {
     content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%;
-    background: radial-gradient(circle, rgba(127,208,232,.34) 0%, rgba(183,157,255,.18) 46%, transparent 72%);
+    background: radial-gradient(circle, rgb(var(--wd-blau-rgb) / .34) 0%, rgb(var(--wd-lila-rgb) / .18) 46%, transparent 72%);
     filter: blur(30px);
   }
 
@@ -68,9 +68,9 @@
     width: 76px; height: 76px; flex-shrink: 0;
     border-radius: 50%; object-fit: cover;
     border: 2px solid var(--wd-rand-stark);
-    box-shadow: 0 0 22px -6px rgba(127,208,232,.5);
+    box-shadow: 0 0 22px -6px rgb(var(--wd-blau-rgb) / .5);
   }
-  .zg-karte--vanvan .zg-foto { border-color: rgba(183,157,255,.55); box-shadow: 0 0 22px -6px rgba(183,157,255,.55); }
+  .zg-karte--vanvan .zg-foto { border-color: rgb(var(--wd-lila-rgb) / .55); box-shadow: 0 0 22px -6px rgb(var(--wd-lila-rgb) / .55); }
   /* ".wd h2" (webdesign.css) ist spezifischer als eine reine Klasse und
      würde eine Angabe an ".zg-name" allein schlicht überstimmen — der Name
      stand dadurch in voller Überschriftengröße da. Deshalb hier bewusst
@@ -86,10 +86,10 @@
     text-align: center; letter-spacing: .16em; font-weight: 700; font-size: 1.05rem;
   }
   .zg-karte input::placeholder { letter-spacing: normal; font-weight: 400; }
-  .zg-karte--vanvan input:focus { border-color: var(--wd-lila); box-shadow: 0 0 0 4px rgba(183,157,255,.16); }
+  .zg-karte--vanvan input:focus { border-color: var(--wd-lila); box-shadow: 0 0 0 4px rgb(var(--wd-lila-rgb) / .16); }
   .zg-karte--vanvan .wd-btn--haupt {
     background: linear-gradient(135deg, #cdbcff, var(--wd-lila) 55%, #9b7ef0);
-    box-shadow: 0 12px 34px -14px rgba(183,157,255,.8);
+    box-shadow: 0 12px 34px -14px rgb(var(--wd-lila-rgb) / .8);
   }
   .zg-karte .wd-btn { margin-top: auto; }
 
@@ -177,8 +177,8 @@
   </div>
 </main>
 
-<script src="/assets/js/i18n-wd-zugang.js?v=20260823wd8"></script>
-<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
+<script src="/assets/js/i18n-wd-zugang.js?v=20260823wd9"></script>
+<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
 <script>
 (function () {
   "use strict";