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")) + "" + "
" + "" +