feat: sticky header with stepper for step 3, sidebar aligns under header

shop/components/order-wizard.tsx

@@ -663,10 +663,19 @@ export function OrderWizard({
   }
 
   return (
-    <div className="max-w-5xl mx-auto py-12 px-4">
+    <div className="max-w-5xl mx-auto px-4">
-      {/* Progress Stepper */}
+      {/* Sticky Header — Stepper für Step 3, normaler Stepper für andere Steps */}
-      {step !== 3 && (
+      {step === 3 ? (
-        <ProgressStepper step={step} basketItemsCount={basketItems.length} />
+        <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}

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>