From ddc7a03a0bb2ed8a440a726a596d4ccee78aae5c Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Tue, 11 Aug 2026 00:50:19 +0200
Subject: [PATCH] style: display step 3 status stepper horizontally

---
 shop/components/order-wizard.tsx | 37 +++++++++++++++++---------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index ed79ad2..6fc2d7b 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -940,34 +940,37 @@ export function OrderWizard({
                 </div>
 
                 {/* Left Sidebar Status Stepper */}
-                <div className="space-y-4 py-4 border-t border-b border-white/5">
+                <div className="space-y-2 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
+                    Status
                   </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 className="flex flex-row flex-wrap items-center gap-x-3 gap-y-2 pl-1">
+                    <div className="flex items-center gap-1.5">
+                      <div className="w-5 h-5 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-[10px]">
+                        <Check className="w-3 h-3" />
                       </div>
-                      <span className="text-sm text-slate-400 font-medium">Kunde</span>
+                      <span className="text-xs 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" />
+                    <span className="text-slate-700 text-xs">/</span>
+                    <div className="flex items-center gap-1.5">
+                      <div className="w-5 h-5 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-[10px]">
+                        <Check className="w-3 h-3" />
                       </div>
-                      <span className="text-sm text-slate-400 font-medium">Modell</span>
+                      <span className="text-xs 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)]">
+                    <span className="text-slate-700 text-xs">/</span>
+                    <div className="flex items-center gap-1.5">
+                      <div className="w-5 h-5 rounded-full bg-primary/20 border border-primary text-primary flex items-center justify-center text-[10px] font-bold shadow-[0_0_10px_rgba(59,130,246,0.2)]">
                         3
                       </div>
-                      <span className="text-sm text-white font-bold">Software</span>
+                      <span className="text-xs 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">
+                    <span className="text-slate-700 text-xs">/</span>
+                    <div className="flex items-center gap-1.5">
+                      <div className="w-5 h-5 rounded-full bg-white/5 border border-white/10 text-slate-500 flex items-center justify-center text-[10px]">
                         4
                       </div>
-                      <span className="text-sm text-slate-600 font-medium">Abschluss</span>
+                      <span className="text-xs text-slate-600 font-medium">Abschluss</span>
                     </div>
                   </div>
                 </div>