feat(wizard): add order notes field and scroll container

shop/components/order-wizard.tsx

@@ -166,6 +166,7 @@ export function OrderWizard({
     return ''
   })
   const [editingIdx, setEditingIdx] = useState<number | null>(null)
+  const [orderNotes, setOrderNotes] = useState<string>('')
   const [toast, setToast] = useState<{ message: string; type: 'error' | 'success' } | null>(null)
 
   useEffect(() => {
@@ -687,6 +688,7 @@ export function OrderWizard({
           endCustomerId: selectedEndCustomerId,
           endCustomer: selectedEndCustomer,
           lastLicenseDate: lastLicenseDate || null,
+          notes: orderNotes || null,
         })
       })
 
@@ -859,40 +861,42 @@ export function OrderWizard({
               </div>
 
               {/* CENTER: Sticky stepper + scrollable categories */}
-              <div className="lg:col-span-2 space-y-0">
+              <div className="lg:col-span-2 flex flex-col max-h-[calc(100vh-4rem)] overflow-hidden">
                 {/* Sticky stepper header — only covers center column */}
-                <div className="sticky top-0 z-20 bg-slate-950/80 backdrop-blur-md pb-4 pt-6 border-b border-white/5 mb-6">
+                <div className="shrink-0 bg-slate-950/80 backdrop-blur-md pb-4 pt-2 border-b border-white/5 mb-4">
                   <p className="text-center text-slate-400 text-sm mb-4">Schritt 3 von 4 — Software konfigurieren</p>
                   <ProgressStepper step={step} basketItemsCount={basketItems.length} />
                 </div>
 
-                {/* 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">
-                    <span className="text-primary mt-0.5">⚡</span>
-                    <div>
-                      <p className="font-semibold">Upgrade-Modus: {lockedDeviceId}</p>
-                      <p className="text-primary/70 mt-0.5">Bereits lizenzierte Module sind ausgegraut und können nicht doppelt gebucht werden.</p>
+                {/* Scrollable category content area */}
+                <div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 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">
+                      <span className="text-primary mt-0.5">⚡</span>
+                      <div>
+                        <p className="font-semibold">Upgrade-Modus: {lockedDeviceId}</p>
+                        <p className="text-primary/70 mt-0.5">Bereits lizenzierte Module sind ausgegraut und können nicht doppelt gebucht werden.</p>
+                      </div>
                     </div>
-                  </div>
-                )}
+                  )}
 
-                {/* Scrollable category content */}
-                <StepSoftware
-                  visibleCategories={visibleCategories}
-                  products={products}
-                  selections={selections}
-                  selectProduct={selectProduct}
-                  isProductDisabled={isProductDisabled}
-                  isModuleDisabled={isModuleDisabled}
-                  toggleModule={toggleModule}
-                  moduleQuantities={moduleQuantities}
-                  setModuleQuantities={setModuleQuantities}
-                  selectedBillingInterval={selectedBillingInterval}
-                  billingLabel={billingLabel}
-                  billingBadgeClass={billingBadgeClass}
-                  existingModuleIds={existingModuleIds}
-                />
+                  <StepSoftware
+                    visibleCategories={visibleCategories}
+                    products={products}
+                    selections={selections}
+                    selectProduct={selectProduct}
+                    isProductDisabled={isProductDisabled}
+                    isModuleDisabled={isModuleDisabled}
+                    toggleModule={toggleModule}
+                    moduleQuantities={moduleQuantities}
+                    setModuleQuantities={setModuleQuantities}
+                    selectedBillingInterval={selectedBillingInterval}
+                    billingLabel={billingLabel}
+                    billingBadgeClass={billingBadgeClass}
+                    existingModuleIds={existingModuleIds}
+                  />
+                </div>
               </div>
 
               {/* RIGHT: Summary sidebar (sticky) */}
@@ -961,6 +965,8 @@ export function OrderWizard({
               initialOrder={initialOrder}
               prevStep={prevStep}
               linkedFeeProducts={linkedFeeProducts}
+              orderNotes={orderNotes}
+              setOrderNotes={setOrderNotes}
             />
           </motion.div>
         )}

shop/components/wizard/step-summary.tsx

@@ -29,6 +29,8 @@ interface StepSummaryProps {
   initialOrder: any
   prevStep: () => void
   linkedFeeProducts?: Product[]
+  orderNotes: string
+  setOrderNotes: (notes: string) => void
 }
 
 function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
@@ -58,6 +60,8 @@ export function StepSummary({
   initialOrder,
   prevStep,
   linkedFeeProducts = [],
+  orderNotes,
+  setOrderNotes,
 }: StepSummaryProps) {
   return (
     <Card className="glass-dark border-primary/30 max-w-2xl mx-auto shadow-primary/10 shadow-2xl">
@@ -263,6 +267,21 @@ export function StepSummary({
             </div>
           </div>
         )}
+        {/* Anmerkungen / Notizfeld */}
+        <div className="space-y-2 border-t border-white/10 pt-4">
+          <label htmlFor="order-notes" className="block text-sm font-semibold text-white flex items-center gap-2">
+            <span>Anmerkungen / Hinweise zur Bestellung (optional)</span>
+          </label>
+          <textarea
+            id="order-notes"
+            rows={3}
+            value={orderNotes}
+            onChange={e => setOrderNotes(e.target.value)}
+            placeholder="Besondere Hinweise, Ansprechpartner oder Terminwünsche hier eintragen..."
+            className="w-full p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-sm text-white placeholder-slate-500 focus:border-sky-400 focus:outline-none transition-colors duration-200 resize-none"
+          />
+        </div>
+
         <p className="text-xs text-slate-500 italic">
           Mit dem Klick auf „Kostenpflichtig bestellen" akzeptieren Sie unsere AGB und die{' '}
           <a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-400">