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

Designsystem: eine Quelle je Farbe, Radien auf eine Skala

Browse Source 
Diese Runde ging eine Ebene tiefer als "sieht es gut aus": Ist das
System, aus dem das Aussehen entsteht, ueberhaupt eines?

DIE MESSUNG VORWEG

  Markenfarben ausgeschrieben im Quelltext:  155 Stellen
    davon Blau 74, Gold 33, Lila 22, Gruen 16, Rot 10
  verschiedene Eckenradien:                   12
    darunter 5px, 7px, 9px, 11px

Die Farben gab es laengst als Variablen. Sie standen trotzdem ueberall
ausgeschrieben da, weil halbdurchsichtige Toene -- Raender, Leuchten,
sanfte Flaechen -- einen Alphawert brauchen, und das mit einer fertigen
Farbvariablen nicht geht: rgba(127, 208, 232, .16).

Die Folge waere beim ersten Farbwechsel sichtbar geworden: Man findet
150 Stellen, uebersieht fuenf, und die Seite hat danach zwei Blautoene,
die sich um eine Nuance unterscheiden. Genau das ist der Unterschied
zwischen einer gewachsenen und einer gestalteten Oberflaeche.

WAS GEAENDERT WURDE

Kanalvariablen (--wd-blau-rgb: 127 208 232) neben den fertigen Farben.
Damit schreibt man rgb(var(--wd-blau-rgb) / .16), und eine Aenderung
wirkt ueberall. 164 Stellen umgestellt, verteilt ueber CSS und neun
Seiten.

Auch die abgeleiteten Farben zeigen jetzt auf die Kanaele statt eigene
Werte zu fuehren -- und die vier Prozessfarben (--wd-p1 bis p4) sind
keine eigenen Farben mehr, sondern Rollen: --wd-p1: var(--wd-blau).
Sonst haette man vier weitere Stellen, die beim naechsten Farbwechsel
stillschweigend zurueckbleiben.

Ergebnis: Jede Markenfarbe hat genau EINE Quelle. Ausgeschriebene
Markenfarben im Quelltext: 0.

Radien auf vier Stufen plus Pillenform: 6 / 10 / 14 / 20 / 999. Kein
Wert wurde um mehr als 2px verschoben, optisch aendert sich also nichts
Spuerbares -- 12 verschiedene Werte sind auf 3 tatsaechlich verwendete
zusammengeschmolzen. Zwischenwerte wie 7px oder 11px entstehen nicht aus
Absicht, sondern weil man beim Bauen einer neuen Kachel nicht nachschaut,
was nebenan schon gilt.

DER BEWEIS, DASS ES EIN SYSTEM IST

Neue Pruefung pruef-system.mjs. Sie behauptet nicht, sie STELLT UM: Die
Markenfarbe wird von Babyblau auf kraeftiges Orange gesetzt und dann
nachgezaehlt, ob irgendwo der alte Ton stehen bleibt.

  658 von 1975 sichtbaren Elementen tragen die Markenfarbe
  0 bleiben nach der Umstellung beim alten Ton
  Prozessfarben folgen nachweislich mit
  Radien: 3 Stufen

UND DIE WICHTIGSTE ERKENNTNIS -- ueber das Messen selbst

Der erste Anlauf meldete 110 haengengebliebene Elemente, alle in Kopf-
und Fusszeile. Die naheliegende Erklaerung waere gewesen: "da steht die
Farbe noch ausgeschrieben". Sie war falsch.

Nachgewiesen ueber die DevTools-Schnittstelle: Auf diese Elemente wirkt
die Regel ".wd a:not(.wd-btn) -> var(--wd-blau)", und --wd-blau
resolviert an genau dieser Stelle korrekt zum neuen Orange. Trotzdem
blieb die berechnete Textfarbe alt -- auch nach erzwungener
Neuberechnung.

Der Unterschied: Kopf- und Fusszeile werden von wd-core.js per innerHTML
eingefuegt. Chromium erneuert solche Teilbaeume nicht zuverlaessig, wenn
man eine Variable NACHTRAEGLICH umstellt. Laedt man dieselbe Seite mit
bereits geaenderter Variable, sind sie orange -- gegengeprueft mit einem
Minimalbeispiel, in dem derselbe Mechanismus einwandfrei funktioniert.

Das Pruefverfahren wurde deshalb umgestellt: Die Variable wird VOR dem
Laden ueberschrieben. Das entspricht genau dem, was eine Aenderung in der
CSS-Datei bewirkt -- also dem Fall, um den es wirklich geht.

Haette ich der ersten Messung geglaubt, haette ich 110 einwandfreie
Stellen "repariert" und dabei das gerade aufgebaute System wieder
zerlegt. Es ist der siebte Fehlalarm in eigener Messtechnik innerhalb
von zwei Runden -- und der subtilste.

ALLE PRUEFUNGEN GRUEN: Gestaltung 0 Befunde (13 Seiten x 5 Sprachen
gegen WCAG 2.2 AA), Anfragedetail 20, Verwaltung 69, Portal 32,
Widerruf 58, Textkodierung 55 Kombinationen, Designsystem 5.

Versionsstempel und Cache-Name auf v9.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-08-23 13:05:12 +02:00
co-authored by Claude Opus 5
parent 3ca9f0b0cd
commit be3599239d
29 changed files with 427 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/webdesign.css
+141 -101
View File
@@ -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;
}