From cab64028f61badd0ce44797610c5755584750c13 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Mon, 10 Aug 2026 23:50:22 +0200
Subject: [PATCH] style: add sidebar step indicator to step 3

---
 shop/components/order-wizard.tsx | 33 ++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index 8ca45f0..4909089 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -939,6 +939,39 @@ export function OrderWizard({
                   </p>
                 </div>
 
+                {/* Left Sidebar Status Stepper */}
+                <div className="space-y-4 py-4 border-t border-b border-white/5">
+                  <p className="text-xs font-bold uppercase tracking-wider text-slate-500">
+                    Schritt 3 von 4 — Software konfigurieren
+                  </p>
+                  <div className="flex flex-col gap-3 pl-1">
+                    <div className="flex items-center gap-3">
+                      <div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
+                        <Check className="w-3.5 h-3.5" />
+                      </div>
+                      <span className="text-sm text-slate-400 font-medium">Kunde</span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
+                        <Check className="w-3.5 h-3.5" />
+                      </div>
+                      <span className="text-sm text-slate-400 font-medium">Modell</span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <div className="w-6 h-6 rounded-full bg-primary/20 border border-primary text-primary flex items-center justify-center text-xs font-bold shadow-[0_0_10px_rgba(59,130,246,0.2)]">
+                        3
+                      </div>
+                      <span className="text-sm text-white font-bold">Software</span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <div className="w-6 h-6 rounded-full bg-white/5 border border-white/10 text-slate-500 flex items-center justify-center text-xs">
+                        4
+                      </div>
+                      <span className="text-sm text-slate-600 font-medium">Abschluss</span>
+                    </div>
+                  </div>
+                </div>
+
                 <div className="flex flex-col gap-2">
                   {visibleCategories.map((cat) => {
                     const sel = selections[cat.id]