From d37a6b43489192a404b32a20378215876d48710f Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Fri, 10 Jul 2026 15:58:14 +0200
Subject: [PATCH] feat: sticky header with stepper for step 3, sidebar aligns
 under header

---
 shop/components/order-wizard.tsx           | 18 +++++++++++++-----
 shop/components/wizard/summary-sidebar.tsx |  2 +-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index 42c79cf..2f01dea 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -663,10 +663,19 @@ export function OrderWizard({
   }
 
   return (
-    <div className="max-w-5xl mx-auto py-12 px-4">
-      {/* Progress Stepper */}
-      {step !== 3 && (
-        <ProgressStepper step={step} basketItemsCount={basketItems.length} />
+    <div className="max-w-5xl mx-auto px-4">
+      {/* Sticky Header — Stepper für Step 3, normaler Stepper für andere Steps */}
+      {step === 3 ? (
+        <div className="sticky top-0 z-30 w-full bg-slate-950/80 backdrop-blur-md pt-6 pb-4 border-b border-white/5 mb-6">
+          <div className="text-center mb-4">
+            <p className="text-slate-400 text-sm">Schritt 3 von 4 — Software konfigurieren</p>
+          </div>
+          <ProgressStepper step={step} basketItemsCount={basketItems.length} />
+        </div>
+      ) : (
+        <div className="pt-12">
+          <ProgressStepper step={step} basketItemsCount={basketItems.length} />
+        </div>
       )}
 
       <AnimatePresence mode="wait">
@@ -732,7 +741,6 @@ export function OrderWizard({
             exit={{ opacity: 0, x: -20 }}
             className="space-y-6"
           >
-            <ProgressStepper step={step} basketItemsCount={basketItems.length} />
             <StepSoftware
               visibleCategories={visibleCategories}
               products={products}
diff --git a/shop/components/wizard/summary-sidebar.tsx b/shop/components/wizard/summary-sidebar.tsx
index 4216c0f..671afcf 100644
--- a/shop/components/wizard/summary-sidebar.tsx
+++ b/shop/components/wizard/summary-sidebar.tsx
@@ -69,7 +69,7 @@ export function SummarySidebar({
   prevStep,
 }: SummarySidebarProps) {
   return (
-    <div className="sticky top-[24vh] max-h-[70vh] flex flex-col">
+    <div className="sticky top-32 max-h-[70vh] flex flex-col">
       <Card className="glass-dark border-primary/20 backdrop-blur-lg bg-slate-950/75 flex flex-col max-h-[70vh]">
         <CardHeader className="shrink-0">
           <CardTitle className="text-white">Zusammenfassung</CardTitle>