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;
}
pruef-aufgaben-computer.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 157 KiB

After

Width:  |  Height:  |  Size: 131 KiB

pruef-aufgaben-handy.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

pruef-detail-computer.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 162 KiB

pruef-detail-handy.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 41 KiB

pruef-portal-aufgaben-computer.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

pruef-portal-aufgaben-handy.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 525 KiB

After

Width:  |  Height:  |  Size: 526 KiB

pruef-portal-postfach-computer.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 494 KiB

After

Width:  |  Height:  |  Size: 493 KiB

pruef-portal-postfach-handy.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 235 KiB

After

Width:  |  Height:  |  Size: 235 KiB

pruef-postfach-computer.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 462 KiB

After

Width:  |  Height:  |  Size: 463 KiB

pruef-postfach-handy.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 169 KiB

After

Width:  |  Height:  |  Size: 169 KiB

pruef-rechtliches.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 457 KiB

After

Width:  |  Height:  |  Size: 458 KiB

pruef-system.mjs
+164
View File
@@ -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;
pruef-widerruf-computer.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 719 KiB

After

Width:  |  Height:  |  Size: 720 KiB

pruef-widerruf-handy.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 385 KiB

After

Width:  |  Height:  |  Size: 385 KiB

webdesign/ablauf.html
+7 -7
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=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>
webdesign/anfrage.html
+9 -9
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=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>
webdesign/faq.html
+6 -6
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=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>
webdesign/index.html
+5 -5
View File
@@ -16,8 +16,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=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
webdesign/leistungen.html
+6 -6
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=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>
webdesign/portal.html
+13 -13
View File
@@ -12,8 +12,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=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>
webdesign/portfolio.html
+4 -4
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=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>
webdesign/preise.html
+5 -5
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=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>
webdesign/rechtliches.html
+3 -3
View File
@@ -8,8 +8,8 @@
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<link rel="manifest" href="/webdesign/app.webmanifest" />
<meta name="theme-color" content="#05070b" />
<link rel="stylesheet" href="/assets/css/main.css?v=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>
webdesign/sw.js
+1 -1
View File
@@ -34,7 +34,7 @@
Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
Stand fest. */
const CACHE_NAME = "dogfather-webdesign-v8";
const CACHE_NAME = "dogfather-webdesign-v9";
/* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
HTML-Datei in dieser Liste. */
webdesign/ueber.html
+4 -4
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=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>
webdesign/verwaltung.html
+45 -45
View File
@@ -11,8 +11,8 @@
<link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="DF Verwaltung" />
<link rel="stylesheet" href="/assets/css/main.css?v=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.
webdesign/widerruf.html
+5 -5
View File
@@ -9,8 +9,8 @@
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<link rel="manifest" href="/webdesign/app.webmanifest" />
<meta name="theme-color" content="#05070b" />
<link rel="stylesheet" href="/assets/css/main.css?v=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>
webdesign/zugang.html
+9 -9
View File
@@ -21,8 +21,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=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";