From 05cf32591f3777725e6b0755a7b36a4b0245b6a0 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Tue, 8 Sep 2026 00:20:46 +0200
Subject: [PATCH] style(wizard): unify and minimize top spacing across steps
 1-4

---
 shop/components/order-wizard.tsx           | 42 ++++++++++------------
 shop/components/wizard/step-summary.tsx    | 20 +++++------
 shop/components/wizard/summary-sidebar.tsx |  2 +-
 3 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index 707151c..68e91b0 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -923,16 +923,16 @@ export function OrderWizard({
   }
 
   return (
-    <div className="max-w-7xl mx-auto px-4 pt-2 pb-6">
+    <div className="max-w-7xl mx-auto px-4 pt-1 pb-2">
 
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 items-start">
         {/* Left Side Status Stepper & Categories for ALL steps */}
-        <div className="lg:col-span-3 bg-slate-900/50 backdrop-blur-md border border-white/10 rounded-2xl p-5 space-y-5 sticky top-2">
+        <div className="lg:col-span-3 bg-slate-900/50 backdrop-blur-md border border-white/10 rounded-2xl p-4 space-y-4 sticky top-1">
           <div>
-            <h2 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-1">
+            <h2 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-0.5">
               Fortschritt
             </h2>
-            <p className="text-lg font-extrabold text-white">
+            <p className="text-base font-extrabold text-white">
               Bestell-Wizard
             </p>
           </div>
@@ -940,11 +940,11 @@ export function OrderWizard({
 
           {/* Step 3 Categories inside left sidebar */}
           {step === 3 && (
-            <div className="pt-3 border-t border-white/10 flex flex-col min-h-0 max-h-[calc(100vh-22rem)] overflow-hidden">
-              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-2 shrink-0">
+            <div className="pt-2.5 border-t border-white/10 flex flex-col min-h-0 max-h-[calc(100vh-22rem)] overflow-hidden">
+              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5 shrink-0">
                 Kategorien
               </h3>
-              <div className="flex flex-col gap-1.5 flex-1 min-h-0 overflow-y-auto pr-1 pb-2 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
+              <div className="flex flex-col gap-1 flex-1 min-h-0 overflow-y-auto pr-1 pb-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                 {visibleCategories.map((cat) => {
                   const sel = selections[cat.id]
                   const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
@@ -956,7 +956,7 @@ export function OrderWizard({
                     <button
                       key={cat.id}
                       onClick={() => setActiveCategoryId(cat.id)}
-                      className={`flex items-center gap-2 p-2 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group shrink-0 ${
+                      className={`flex items-center gap-2 p-1.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group shrink-0 ${
                         isMissingRequired
                           ? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
                           : isActive
@@ -968,7 +968,7 @@ export function OrderWizard({
                         <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
                       )}
 
-                      <div className={`p-1.5 rounded-lg transition-colors shrink-0 ${
+                      <div className={`p-1 rounded-lg transition-colors shrink-0 ${
                         isMissingRequired
                           ? 'bg-red-500/20 text-red-400'
                           : isActive
@@ -1008,7 +1008,7 @@ export function OrderWizard({
         </div>
 
         {/* Right Main Content Column */}
-        <div className="lg:col-span-9 space-y-6">
+        <div className="lg:col-span-9 space-y-0">
 
           <AnimatePresence mode="wait">
             {/* Step 1: Customer */}
@@ -1018,7 +1018,7 @@ export function OrderWizard({
                 initial={{ opacity: 0, y: direction * 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: direction * -20 }}
-                className="space-y-6"
+                className="space-y-0"
               >
                 <StepCustomer
                   isAdmin={isAdmin}
@@ -1049,7 +1049,7 @@ export function OrderWizard({
                 initial={{ opacity: 0, y: direction * 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: direction * -20 }}
-                className="space-y-6"
+                className="space-y-0"
               >
                 <StepBilling
                   selectedBillingInterval={selectedBillingInterval}
@@ -1069,16 +1069,16 @@ export function OrderWizard({
             initial={{ opacity: 0, y: direction * 20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: direction * -20 }}
-            className="h-[calc(100vh-160px)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2"
+            className="h-[calc(100vh-8.5rem)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2"
           >
-            <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 h-full items-stretch">
+            <div className="grid grid-cols-1 lg:grid-cols-5 gap-3 h-full items-stretch">
 
               {/* LEFT: Scrollable Category Selection */}
-              <div className="lg:col-span-3 flex flex-col h-full overflow-hidden p-2 px-3">
+              <div className="lg:col-span-3 flex flex-col h-full overflow-hidden p-1 px-2">
                 <div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                   {/* Upgrade-Modus Hinweis-Banner */}
                   {upgradeMode && lockedDeviceId && (
-                    <div className="mb-4 p-3 rounded-xl bg-primary/10 border border-primary/20 text-xs text-primary/90 flex items-start gap-2">
+                    <div className="mb-3 p-2.5 rounded-xl bg-primary/10 border border-primary/20 text-xs text-primary/90 flex items-start gap-2">
                       <Zap className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                       <div>
                         <p className="font-semibold">Upgrade-Modus: {lockedDeviceId}</p>
@@ -1110,7 +1110,7 @@ export function OrderWizard({
               </div>
 
               {/* RIGHT: Summary sidebar */}
-              <div className="lg:col-span-2 flex flex-col h-full overflow-hidden p-2 pl-2">
+              <div className="lg:col-span-2 flex flex-col h-full overflow-hidden p-1 pl-1">
                 <div className="flex-1 overflow-hidden">
                   <SummarySidebar
                     visibleCategories={visibleCategories}
@@ -1146,10 +1146,6 @@ export function OrderWizard({
           </motion.div>
         )}
 
-
-
-
-
         {/* Step 4: Verification & Submit */}
         {step === 4 && (
           <motion.div
@@ -1157,7 +1153,7 @@ export function OrderWizard({
             initial={{ opacity: 0, y: direction * 20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: direction * -20 }}
-            className="h-[calc(100vh-140px)] overflow-hidden w-full"
+            className="h-[calc(100vh-8.5rem)] overflow-hidden w-full"
           >
             <StepSummary
               finalItemsToShow={finalItemsToShow}
diff --git a/shop/components/wizard/step-summary.tsx b/shop/components/wizard/step-summary.tsx
index 151c3f4..c0a56e6 100644
--- a/shop/components/wizard/step-summary.tsx
+++ b/shop/components/wizard/step-summary.tsx
@@ -103,32 +103,32 @@ export function StepSummary({
   return (
     <Card className="glass-dark border-white/10 h-[calc(100vh-8.5rem)] flex flex-col justify-between overflow-hidden relative">
       {/* ─── 1. FIXED HEADER (shrink-0) ─── */}
-      <CardHeader className="pb-3 pt-4 px-6 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0">
+      <CardHeader className="py-2.5 px-4 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0">
         <div className="flex items-center justify-between gap-3">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/40 shrink-0 text-primary">
-              <ShieldCheck className="w-5 h-5" />
+          <div className="flex items-center gap-2.5">
+            <div className="w-8 h-8 bg-primary/20 rounded-lg flex items-center justify-center border border-primary/40 shrink-0 text-primary">
+              <ShieldCheck className="w-4 h-4" />
             </div>
             <div>
-              <CardTitle className="text-xl font-bold text-white flex items-center gap-2">
+              <CardTitle className="text-lg font-bold text-white flex items-center gap-2">
                 Anfrage prüfen & absenden
               </CardTitle>
-              <CardDescription className="text-xs text-slate-300 mt-0.5">
+              <CardDescription className="text-[11px] text-slate-300 mt-0.5">
                 Überprüfen Sie alle konfigurierten Kassen, Positionen und Konditionen vor der Freigabe.
               </CardDescription>
             </div>
           </div>
-          <Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-xs px-3 py-1">
+          <Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-xs px-2.5 py-0.5">
             Schritt 4 von 4
           </Badge>
         </div>
       </CardHeader>
 
       {/* ─── 2. SCROLLABLE MIDDLE (flex-1 min-h-0 overflow-y-auto) ─── */}
-      <div className="flex-1 min-h-0 overflow-y-auto p-6 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 max-w-7xl mx-auto w-full items-start">
+      <div className="flex-1 min-h-0 overflow-y-auto p-4 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 max-w-7xl mx-auto w-full items-start">
           {/* ─── LINKES RASTER (lg:col-span-7) – Auftragsübersicht & Kassen ─── */}
-          <div className="lg:col-span-7 space-y-5">
+          <div className="lg:col-span-7 space-y-4">
             {/* Kopf-Card: Endkunde & Abrechnungsmodell */}
             <div className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3">
               <div className="flex items-center justify-between gap-2 border-b border-white/5 pb-2.5 flex-wrap">
diff --git a/shop/components/wizard/summary-sidebar.tsx b/shop/components/wizard/summary-sidebar.tsx
index bcdd00b..0a3dffb 100644
--- a/shop/components/wizard/summary-sidebar.tsx
+++ b/shop/components/wizard/summary-sidebar.tsx
@@ -84,7 +84,7 @@ export function SummarySidebar({
   return (
     <Card className="glass-dark border-white/10 shadow-2xl rounded-2xl overflow-hidden flex flex-col h-full bg-slate-900/90 backdrop-blur-xl">
       {/* ─── 1. TOP HEADER (shrink-0) ─── */}
-      <CardHeader className="shrink-0 pb-3 pt-4 px-4 border-b border-white/10 bg-slate-950/60">
+      <CardHeader className="shrink-0 py-2.5 px-4 border-b border-white/10 bg-slate-950/60">
         <div className="flex items-center justify-between gap-2">
           <CardTitle className="text-white text-sm font-bold flex items-center gap-2">
             <ShoppingCart className="w-4 h-4 text-primary" />