From 0b268881a12a850da4133b79ecadef6b5c66e262 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Fri, 10 Jul 2026 10:52:07 +0200
Subject: [PATCH] style(wizard): dock stepper in step 3 and make summary card
 sticky top-[20vh]

---
 shop/components/order-wizard.tsx | 62 ++++++++++++++++++++++----------
 1 file changed, 43 insertions(+), 19 deletions(-)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index 3a8b0d8..41b7252 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -703,26 +703,28 @@ export function OrderWizard({
   return (
     <div className="max-w-5xl mx-auto py-12 px-4">
       {/* Progress Stepper */}
-      <div className="max-w-md mx-auto mb-12">
-        <div className="flex justify-between relative">
-          <div className="absolute top-1/2 left-0 w-full h-0.5 bg-white/10 -translate-y-1/2 z-0" />
-          {[1, 2, 3, 4].map(s => (
-            <div key={s} className="relative z-10 flex flex-col items-center gap-2">
-              <div
-                className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500 ${step >= s
-                  ? 'bg-primary text-white scale-110 shadow-[0_0_15px_rgba(59,130,246,0.5)]'
-                  : 'bg-slate-800 text-slate-400'
-                  }`}
-              >
-                {step > s ? <Check className="w-6 h-6" /> : s}
+      {step !== 3 && (
+        <div className="max-w-md mx-auto mb-12">
+          <div className="flex justify-between relative">
+            <div className="absolute top-1/2 left-0 w-full h-0.5 bg-white/10 -translate-y-1/2 z-0" />
+            {[1, 2, 3, 4].map(s => (
+              <div key={s} className="relative z-10 flex flex-col items-center gap-2">
+                <div
+                  className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500 ${step >= s
+                    ? 'bg-primary text-white scale-110 shadow-[0_0_15px_rgba(59,130,246,0.5)]'
+                    : 'bg-slate-800 text-slate-400'
+                    }`}
+                >
+                  {step > s ? <Check className="w-6 h-6" /> : s}
+                </div>
+                <span className={`text-xs font-semibold ${step >= s ? 'text-primary' : 'text-slate-500'}`}>
+                  {s === 1 ? 'Kunde' : s === 2 ? 'Modell' : s === 3 ? 'Software' : 'Abschluss'}
+                </span>
               </div>
-              <span className={`text-xs font-semibold ${step >= s ? 'text-primary' : 'text-slate-500'}`}>
-                {s === 1 ? 'Kunde' : s === 2 ? 'Modell' : s === 3 ? 'Software' : 'Abschluss'}
-              </span>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
-      </div>
+      )}
 
       <AnimatePresence mode="wait">
         {/* ───── Schritt 1: Endkunde wählen / anlegen ───── */}
@@ -1025,6 +1027,28 @@ export function OrderWizard({
             <div className="grid md:grid-cols-3 gap-6">
               {/* Left: Category sections */}
               <div className="md:col-span-2 space-y-8">
+                {/* Progress Stepper docked above Software wählen */}
+                <div className="max-w-md mx-auto mb-6">
+                  <div className="flex justify-between relative">
+                    <div className="absolute top-1/2 left-0 w-full h-0.5 bg-white/10 -translate-y-1/2 z-0" />
+                    {[1, 2, 3, 4].map(s => (
+                      <div key={s} className="relative z-10 flex flex-col items-center gap-2">
+                        <div
+                          className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500 ${step >= s
+                            ? 'bg-primary text-white scale-110 shadow-[0_0_15px_rgba(59,130,246,0.5)]'
+                            : 'bg-slate-800 text-slate-400'
+                            }`}
+                        >
+                          {step > s ? <Check className="w-6 h-6" /> : s}
+                        </div>
+                        <span className={`text-xs font-semibold ${step >= s ? 'text-primary' : 'text-slate-500'}`}>
+                          {s === 1 ? 'Kunde' : s === 2 ? 'Modell' : s === 3 ? 'Software' : 'Abschluss'}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
                 <Card className="glass-dark border-white/10">
                   <CardHeader>
                     <CardTitle className="text-2xl flex items-center gap-2 text-white">
@@ -1280,7 +1304,7 @@ export function OrderWizard({
 
               {/* Right: Summary */}
               <div className="space-y-6">
-                <Card className="glass-dark border-primary/20 sticky top-6">
+                <Card className="glass-dark border-primary/20 sticky top-[20vh]">
                   <CardHeader>
                     <CardTitle className="text-white">Zusammenfassung</CardTitle>
                   </CardHeader>