From 2539fdea8db0eac60ac950167df430535334847b Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sat, 22 Aug 2026 22:26:04 +0200 Subject: [PATCH] Zahlenkreise repariert und vier Prozessfarben durchgaengig "wieso sehen die zahlen immer noch so scheisse aus?" -- zu Recht, und die Ursache war nicht Geschmack, sondern ein Fehler. Nachgemessen sass die Ziffer 15px NEBEN der Kreismitte. Ursache: ".po-leer-punkt span" (fuer den Beschreibungstext) trifft auch den Zahlen-Span und ist spezifischer (Klasse + Element) als ".po-leer-nr" (nur Klasse). Sie erzwang display:block, 14,4px Schrift und 23px Zeilenhoehe -- exakt die gemessenen Werte. Meine eigene "line-height: 1"-Regel kam gar nicht zum Zug. Das ist derselbe Spezifitaets-Fehler wie zuvor beim Hauptknopf (blaue Schrift auf blauem Grund) und bei den Namen auf der Zugangswand. Dreimal dieselbe Falle, deshalb steht die Begruendung jetzt ausfuehrlich im Code. Behoben ueber :not(.po-leer-nr) an beiden Textregeln. Nachgemessen: Versatz waagerecht -15px -> 0px Versatz senkrecht -8px -> -1,3px display block -> grid Schrift/Zeile 14,4/23px -> 18,4/18,4px Zweite Rueckmeldung: "es soll 4 farben geben wie 4 kategorien zum prozess". Sehr gute Idee -- sie macht das System erst schluessig. Die sieben Phasen sind in Wahrheit vier Abschnitte, und die vier Merkmalskacheln trugen ohnehin schon vier Farben. Jetzt bedeuten diese Farben ueberall dasselbe: 1 Blau Start Briefing, Angebot 2 Lila Gestaltung Design 3 Gruen Umsetzung Entwicklung, Tests 4 Gold Abschluss Abnahme, Uebergabe Die Phasenleiste faerbt erledigte Abschnitte in IHRER Farbe statt pauschal gruen -- man sieht dadurch, wie weit man ist, nicht nur DASS etwas fertig ist. Die Vorschau laeuft in denselben Farben durch. Die Legende nennt die vier Abschnitte beim Namen, damit Farbe nicht geraten werden muss: Farbe allein ist nie Information. 45/45 Handy-Abnahme, i18n vollstaendig. Co-Authored-By: Claude Opus 5 --- assets/css/webdesign.css | 124 +++++++++++++++++++++++++++++++++++- assets/js/i18n-wd-portal.js | 8 +++ assets/js/wd-portal.js | 10 ++- 3 files changed, 137 insertions(+), 5 deletions(-) diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css index f94aeaad..25002a68 100644 --- a/assets/css/webdesign.css +++ b/assets/css/webdesign.css @@ -958,7 +958,17 @@ a.wd-karte:hover, .wd-karte--klickbar:hover { border: 1px solid var(--wd-rand-stark); } .po-leer-punkt strong { display: block; color: var(--wd-text); font-size: .98rem; margin-bottom: .15rem; } -.po-leer-punkt span { display: block; font-size: .88rem; color: var(--wd-text-soft); line-height: 1.5; } +/* :not(.po-leer-nr) ist hier PFLICHT, kein Feinschliff. + Der Zahlenkreis ist ebenfalls ein in dieser Kachel. Ohne den + Ausschluss trifft ihn diese Regel mit -- und sie ist spezifischer + (Klasse + Element) als ".po-leer-nr" (nur Klasse). Sie erzwang dadurch + display:block, Schriftgroesse 14,4px und Zeilenhoehe 23px; die Ziffer + sass 15px neben der Kreismitte, statt darin. + Gemeldet am 22.08.2026 ("wieso sehen die zahlen immer noch so + scheisse aus?") und per Messung bestaetigt. Derselbe Spezifitaets- + Fehler wie zuvor beim Hauptknopf (blau auf blau) und bei den Namen auf + der Zugangswand -- deshalb steht die Begruendung hier so ausfuehrlich. */ +.po-leer-punkt span:not(.po-leer-nr) { display: block; font-size: .88rem; color: var(--wd-text-soft); line-height: 1.5; } .po-leer-fuss { margin: 0; } /* --------------------------------------------------------------------- @@ -1136,7 +1146,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover { letter-spacing: -.015em; line-height: 1.25; margin-bottom: .3rem; } -.po-leer-punkt span { font-size: .9rem; line-height: 1.6; } +.po-leer-punkt span:not(.po-leer-nr) { font-size: .9rem; line-height: 1.6; } .po-leer h3 { font-size: clamp(1.5rem, 3.6vw, 2rem); @@ -1187,3 +1197,113 @@ 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); } + +/* --------------------------------------------------------------------- + 21. ZAHLENKREISE REPARIERT + VIER PROZESSFARBEN + + a) "wieso sehen die zahlen immer noch so scheisse aus?" + Zu Recht. Die Ziffer sass nicht mittig im Kreis. Ursache war die + geerbte Zeilenhoehe: body.wd setzt line-height 1.7, und in einem + 40px hohen Kreis erzeugt das einen Textkasten von rund 28px, der + die Ziffer nach unten drueckt. Zusaetzlich hing die Zentrierung an + einer weiter oben stehenden Regel — verlaesst man sich darauf, ist + man beim naechsten Umbau wieder verlassen. + Deshalb hier ALLES explizit: eigenes Raster, place-items, und vor + allem line-height: 1. Eine Ziffer in einem Kreis braucht genau die + Hoehe ihrer selbst, nichts sonst. + + b) "es soll 4 farben geben wie 4 kategorien zum prozess" + Sehr gute Idee — und sie macht das System erst schluessig. Die + sieben Phasen sind in Wahrheit vier Abschnitte, und die vier + Merkmalskacheln tragen ohnehin schon vier Farben. Jetzt bedeuten + diese Farben ueberall dasselbe: + + 1 Blau Start Briefing, Angebot + 2 Lila Gestaltung Design + 3 Gruen Umsetzung Entwicklung, Tests + 4 Gold Abschluss Abnahme, Uebergabe + + Damit ist die Farbe nicht mehr Dekoration, sondern Sprache: Wer + Gold sieht, weiss, dass es auf die Zielgerade geht. + --------------------------------------------------------------------- */ + +/* ---------- a) Der Kreis ---------- */ +.po-leer-nr { + display: grid; + place-items: center; + width: 42px; height: 42px; + padding: 0; + border-radius: 50%; + /* Der entscheidende Wert: ohne ihn erbt die Ziffer 1.7 und rutscht. */ + line-height: 1; + font-family: var(--font-head); + font-size: 1.15rem; + font-weight: 800; + letter-spacing: 0; + font-variant-numeric: tabular-nums; + flex-shrink: 0; + border: 2px solid transparent; + background: + linear-gradient(#0d1624, #0d1624) padding-box, + linear-gradient(140deg, var(--wd-blau), var(--wd-lila)) border-box; +} +/* Die Ziffer selbst noch einmal optisch ausrichten: Zahlen haben oben + mehr Luft als unten, rein geometrisch zentriert wirken sie deshalb + leicht zu tief. Ein Hauch nach oben gleicht das aus. */ +.po-leer-nr { padding-bottom: .06em; } + +/* ---------- 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 */ +} + +.po-leer-punkt:nth-child(1)::before { background: linear-gradient(90deg, #3d9dbd, var(--wd-p1)); } +.po-leer-punkt:nth-child(2)::before { background: linear-gradient(90deg, #7c5cd6, var(--wd-p2)); } +.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, #2e8f6b, var(--wd-p3)); } +.po-leer-punkt:nth-child(4)::before { background: linear-gradient(90deg, #a8873a, var(--wd-p4)); } + +.po-leer-punkt:nth-child(1) .po-leer-nr { color: var(--wd-p1); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p1), #3d9dbd) border-box; box-shadow: 0 0 20px -7px var(--wd-p1); } +.po-leer-punkt:nth-child(2) .po-leer-nr { color: var(--wd-p2); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p2), #7c5cd6) border-box; box-shadow: 0 0 20px -7px var(--wd-p2); } +.po-leer-punkt:nth-child(3) .po-leer-nr { color: var(--wd-p3); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p3), #2e8f6b) border-box; box-shadow: 0 0 20px -7px var(--wd-p3); } +.po-leer-punkt:nth-child(4) .po-leer-nr { color: var(--wd-p4); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p4), #a8873a) border-box; box-shadow: 0 0 20px -7px var(--wd-p4); } + +/* ---------- Die Phasenleiste spricht dieselbe Sprache ---------- + 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: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); } +.po-phase:nth-child(6).po-erledigt, .po-phase:nth-child(7).po-erledigt { background: var(--wd-p4); box-shadow: 0 0 9px -3px var(--wd-p4); } + +.po-phase:nth-child(1).po-jetzt, .po-phase:nth-child(2).po-jetzt { background: var(--wd-p1); box-shadow: 0 0 16px -2px var(--wd-p1); } +.po-phase:nth-child(3).po-jetzt { background: var(--wd-p2); box-shadow: 0 0 16px -2px var(--wd-p2); } +.po-phase:nth-child(4).po-jetzt, .po-phase:nth-child(5).po-jetzt { background: var(--wd-p3); box-shadow: 0 0 16px -2px var(--wd-p3); } +.po-phase:nth-child(6).po-jetzt, .po-phase:nth-child(7).po-jetzt { background: var(--wd-p4); box-shadow: 0 0 16px -2px var(--wd-p4); } + +/* Die Vorschau zeigt denselben Verlauf: jede Phase leuchtet in der Farbe + ihres Abschnitts auf, wenn sie an der Reihe ist. */ +.po-vorschau-phasen span:nth-child(1), .po-vorschau-phasen span:nth-child(2) { --po-f: var(--wd-p1); } +.po-vorschau-phasen span:nth-child(3) { --po-f: var(--wd-p2); } +.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; } + 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; } +} + +/* ---------- Legende: vier Abschnitte statt drei Zustände ---------- + Die alte Legende erklärte den Zustand (erledigt / läuft / offen). Der + ist aus der Position ohnehin ablesbar. Wertvoller ist, WAS gerade + passiert — deshalb erklärt sie jetzt die vier Abschnitte. */ +.po-legende { gap: .45rem .9rem; font-size: .76rem; } +.po-legende i { width: 14px; height: 7px; } +.po-legende .po-l-1 { background: var(--wd-p1); } +.po-legende .po-l-2 { background: var(--wd-p2); } +.po-legende .po-l-3 { background: var(--wd-p3); } +.po-legende .po-l-4 { background: var(--wd-p4); } diff --git a/assets/js/i18n-wd-portal.js b/assets/js/i18n-wd-portal.js index df2684cd..0c41dd93 100644 --- a/assets/js/i18n-wd-portal.js +++ b/assets/js/i18n-wd-portal.js @@ -94,6 +94,14 @@ window.I18N_WD = { pt: "Ver o esboço e dar feedback", }, + /* Die vier Abschnitte des Prozesses. Dieselben vier Farben tragen die + Merkmalskacheln, die Phasenleiste und diese Legende — Farbe ist damit + Sprache, nicht Dekoration. */ + po_k1: { de: "Start", "de-CH": "Start", en: "Start", fr: "Départ", pt: "Início" }, + po_k2: { de: "Gestaltung", "de-CH": "Gstaltig", en: "Design", fr: "Conception", pt: "Design" }, + po_k3: { de: "Umsetzung", "de-CH": "Umsetzig", en: "Build", fr: "Réalisation", pt: "Execução" }, + po_k4: { de: "Abschluss", "de-CH": "Abschluss", en: "Completion", fr: "Finalisation", pt: "Conclusão" }, + po_l_fertig: { de: "erledigt", "de-CH": "erledigt", en: "done", fr: "terminé", pt: "concluído" }, po_l_jetzt: { de: "läuft gerade", "de-CH": "lauft grad", en: "in progress", fr: "en cours", pt: "em curso" }, po_l_offen: { de: "kommt noch", "de-CH": "chunnt no", en: "still to come", fr: "à venir", pt: "ainda por vir" }, diff --git a/assets/js/wd-portal.js b/assets/js/wd-portal.js index 491fb3d8..499fe259 100644 --- a/assets/js/wd-portal.js +++ b/assets/js/wd-portal.js @@ -198,10 +198,14 @@ ": " + s(window.WD.t("po_vorschau_schritt")) + "

" + /* Legende: Farbe allein ist nie Information. Wer sie nicht unterscheiden kann, liest hier trotzdem, was sie bedeutet. */ + /* Vier Abschnitte statt drei Zustaende: Ob eine Phase + erledigt ist, sieht man an der Position. Wertvoller ist, + WAS gerade passiert. */ '
' + - '' + s(window.WD.t("po_l_fertig")) + "" + - '' + s(window.WD.t("po_l_jetzt")) + "" + - '' + s(window.WD.t("po_l_offen")) + "" + + '' + s(window.WD.t("po_k1")) + "" + + '' + s(window.WD.t("po_k2")) + "" + + '' + s(window.WD.t("po_k3")) + "" + + '' + s(window.WD.t("po_k4")) + "" + "
" + "" +