Kasse: Schrittleiste als nummerierte Liste im Modus „neu“

Der aktuelle Schritt trägt aria-current, nur erledigte Schritte sind verlinkt (Punkt 8.9).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 10 insertions, 0 deletions

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index 5b732d0..ff18c1c 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -249,6 +249,16 @@
 .wpsg_progress :where(span.current > .dot), .wpsg_progress :where(span.done > .dot) { background-color:var(--wpsg-color-background); }
 .wpsg_progress :where(span.current)::after, .wpsg_progress :where(span.done)::after { content:" "; display:block; position:absolute; top:0; width:100%; height:10px; background-color:var(--wpsg-color-accent); opacity:0.5; }
 .wpsg_progress :where(span.current)::after { width:50%; }
+/* Schrittleiste im Modus „neu“ (Punkt 8.9): vier gleiche Felder, Linie oben, erledigt und aktuell in der Akzentfarbe */
+.wpsg-steps { margin:0 0 2em; }
+.wpsg-steps__list { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.5em; margin:0; padding:0; list-style:none; font-size:var(--wpsg-font-size-small); }
+.wpsg-steps__step { margin:0; padding-top:0.6em; border-top:4px solid var(--wpsg-color-line); overflow-wrap:break-word; hyphens:auto; }
+.wpsg-steps__step:not(.is-done):not(.is-current) { opacity:var(--wpsg-muted-opacity); }
+.wpsg-steps__step:where(.is-done, .is-current) { border-top-color:var(--wpsg-color-accent); }
+.wpsg-steps__step.is-current { font-weight:700; }
+.wpsg-steps__step a { color:inherit; }
+.wpsg-steps__number { margin-right:0.35em; }
+.wpsg-steps__number::after { content:"."; }
 
 /* Kundenkonto */
 .wpsg_profil :where(.wpsg_pwdvergessen_link) { line-height:30px; }