feat: Equipment-System, Buchungsbearbeitung, Kundenadresse, LexOffice-Fix

- Vintage Modell hinzugefuegt
- Equipment Multi-Select (Neue Buchung + Bearbeitung)
- Kundenadresse in Formularen
- Bearbeiten-Seite fuer Buchungen
- Abbau-Zeiten in Formularen und Uebersicht
- Vertrag PDF nur bei Privatkunden
- LexOffice Kontakt-Erstellung Fix (BUSINESS)
- Zurueck-Pfeil auf Touren-Seite

components/BookingAutomationPanel.tsx

@@ -0,0 +1,448 @@
+'use client';
+
+import { useState } from 'react';
+import { FiMail, FiCalendar, FiFileText, FiCheckCircle, FiAlertCircle, FiPlay, FiCheck, FiDownload, FiClock } from 'react-icons/fi';
+
+interface BookingAutomationPanelProps {
+  booking: {
+    id: string;
+    bookingNumber: string;
+    status: string;
+    contractSigned: boolean;
+    contractSignedAt: string | null;
+    contractGenerated: boolean;
+    contractSentAt: string | null;
+    calendarSynced: boolean;
+    calendarSyncedAt: string | null;
+    lexofficeContactId: string | null;
+    lexofficeOfferId: string | null;
+    lexofficeConfirmationId: string | null;
+    lexofficeInvoiceId: string | null;
+  };
+  invoiceType?: string;
+}
+
+export default function BookingAutomationPanel({ booking, invoiceType }: BookingAutomationPanelProps) {
+  const [isRunning, setIsRunning] = useState(false);
+  const [isConfirming, setIsConfirming] = useState(false);
+  const [result, setResult] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const runAutomation = async () => {
+    setIsRunning(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const response = await fetch('/api/admin/test-automation', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ bookingId: booking.id }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setResult(data);
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      } else {
+        setError(data.error || 'Fehler bei der Automation');
+      }
+    } catch (err: any) {
+      setError(err.message || 'Netzwerkfehler');
+    } finally {
+      setIsRunning(false);
+    }
+  };
+
+  const confirmBooking = async () => {
+    setIsConfirming(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`/api/bookings/${booking.id}/confirm`, {
+        method: 'POST',
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        alert('✅ Buchung erfolgreich bestätigt!');
+        window.location.reload();
+      } else {
+        setError(data.error || 'Fehler bei der Bestätigung');
+      }
+    } catch (err: any) {
+      setError(err.message || 'Netzwerkfehler');
+    } finally {
+      setIsConfirming(false);
+    }
+  };
+
+  const hasRunAutomation = Boolean(booking.lexofficeOfferId);
+  const canConfirm = booking.contractSigned && booking.status !== 'CONFIRMED';
+
+  const downloadPDF = async (type: 'quotation' | 'contract' | 'confirmation') => {
+    try {
+      const response = await fetch(`/api/bookings/${booking.id}/${type}-pdf`);
+      
+      if (!response.ok) {
+        const data = await response.json();
+        alert(`Fehler: ${data.error}`);
+        return;
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      
+      let filename = '';
+      if (type === 'quotation') filename = `Angebot_${booking.bookingNumber}.pdf`;
+      if (type === 'contract') filename = `Mietvertrag_${booking.bookingNumber}.pdf`;
+      if (type === 'confirmation') filename = `Auftragsbestaetigung_${booking.bookingNumber}.pdf`;
+      
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (err: any) {
+      alert(`Fehler beim Download: ${err.message}`);
+    }
+  };
+
+  return (
+    <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl p-6 shadow-lg">
+      <h3 className="text-xl font-bold text-white mb-6 flex items-center gap-2">
+        <FiPlay className="text-pink-500" />
+        Automation & Status
+      </h3>
+
+      {/* Status Grid */}
+      <div className={`grid grid-cols-2 ${invoiceType !== 'BUSINESS' ? 'md:grid-cols-4' : 'md:grid-cols-3'} gap-4 mb-6`}>
+        {/* Contract Generated - nur bei Privatkunden */}
+        {invoiceType !== 'BUSINESS' && (
+        <div className={`p-4 rounded-lg border ${booking.contractGenerated ? 'bg-green-500/10 border-green-500/50' : 'bg-gray-700/50 border-gray-600'}`}>
+          <div className="flex items-center gap-2 mb-2">
+            <FiFileText className={booking.contractGenerated ? 'text-green-400' : 'text-gray-500'} />
+            <span className={`text-sm font-medium ${booking.contractGenerated ? 'text-green-400' : 'text-gray-400'}`}>
+              Vertrag PDF
+            </span>
+          </div>
+          {booking.contractGenerated ? (
+            <div className="space-y-2">
+              <div className="flex items-center gap-1 text-xs text-green-400">
+                <FiCheckCircle size={12} />
+                Generiert
+              </div>
+              <button
+                onClick={() => downloadPDF('contract')}
+                className="w-full flex items-center justify-center gap-1 px-2 py-1 bg-green-600/20 hover:bg-green-600/30 text-green-400 text-xs rounded transition-colors"
+              >
+                <FiDownload size={12} />
+                Download
+              </button>
+            </div>
+          ) : (
+            <div className="text-xs text-gray-500">Nicht generiert</div>
+          )}
+        </div>
+        )}
+
+        {/* LexOffice Created */}
+        <div className={`p-4 rounded-lg border ${booking.lexofficeOfferId ? 'bg-green-500/10 border-green-500/50' : 'bg-gray-700/50 border-gray-600'}`}>
+          <div className="flex items-center gap-2 mb-2">
+            <FiFileText className={booking.lexofficeOfferId ? 'text-green-400' : 'text-gray-500'} />
+            <span className={`text-sm font-medium ${booking.lexofficeOfferId ? 'text-green-400' : 'text-gray-400'}`}>
+              LexOffice
+            </span>
+          </div>
+          {booking.lexofficeOfferId ? (
+            <div className="space-y-2">
+              <div className="flex items-center gap-1 text-xs text-green-400">
+                <FiCheckCircle size={12} />
+                Angebot erstellt
+              </div>
+              <div className="text-xs text-yellow-400 bg-yellow-500/10 border border-yellow-500/30 rounded px-2 py-1">
+                ⚠️ Angebot wurde als Entwurf erstellt.<br/>
+                Bitte in LexOffice suchen und freigeben, um PDF herunterzuladen.
+              </div>
+              <button
+                onClick={() => downloadPDF('quotation')}
+                className="w-full flex items-center justify-center gap-1 px-2 py-1 bg-green-600/20 hover:bg-green-600/30 text-green-400 text-xs rounded transition-colors"
+              >
+                <FiDownload size={12} />
+                PDF Download
+              </button>
+              <a
+                href="https://app.lexoffice.de/#!sales/quotations"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-full flex items-center justify-center gap-1 px-2 py-1 bg-blue-600/20 hover:bg-blue-600/30 text-blue-400 text-xs rounded transition-colors"
+              >
+                <FiFileText size={12} />
+                Angebot in LexOffice suchen
+              </a>
+            </div>
+          ) : (
+            <div className="text-xs text-gray-500">Nicht erstellt</div>
+          )}
+        </div>
+
+        {/* Email Sent */}
+        <div className={`p-4 rounded-lg border ${booking.contractSentAt ? 'bg-green-500/10 border-green-500/50' : 'bg-gray-700/50 border-gray-600'}`}>
+          <div className="flex items-center gap-2 mb-2">
+            <FiMail className={booking.contractSentAt ? 'text-green-400' : 'text-gray-500'} />
+            <span className={`text-sm font-medium ${booking.contractSentAt ? 'text-green-400' : 'text-gray-400'}`}>
+              E-Mail
+            </span>
+          </div>
+          {booking.contractSentAt ? (
+            <div className="flex items-center gap-1 text-xs text-green-400">
+              <FiCheckCircle size={12} />
+              Versendet
+            </div>
+          ) : (
+            <div className="text-xs text-gray-500">Nicht versendet</div>
+          )}
+        </div>
+
+        {/* Calendar Synced */}
+        <div className={`p-4 rounded-lg border ${booking.calendarSynced ? 'bg-green-500/10 border-green-500/50' : 'bg-gray-700/50 border-gray-600'}`}>
+          <div className="flex items-center gap-2 mb-2">
+            <FiCalendar className={booking.calendarSynced ? 'text-green-400' : 'text-gray-500'} />
+            <span className={`text-sm font-medium ${booking.calendarSynced ? 'text-green-400' : 'text-gray-400'}`}>
+              Kalender
+            </span>
+          </div>
+          {booking.calendarSynced ? (
+            <div className="flex items-center gap-1 text-xs text-green-400">
+              <FiCheckCircle size={12} />
+              Synchronisiert
+            </div>
+          ) : (
+            <div className="text-xs text-gray-500">Nicht synchronisiert</div>
+          )}
+        </div>
+      </div>
+
+      {/* LexOffice Workflow Timeline */}
+      <div className="mb-6 bg-gray-800/50 border border-gray-700 rounded-lg p-6">
+        <h4 className="text-sm font-bold text-gray-300 mb-4">LexOffice Workflow</h4>
+        <div className="flex items-center justify-between">
+          {/* Step 1: Angebot */}
+          <div className="flex flex-col items-center flex-1">
+            <div className={`w-16 h-16 rounded-full flex items-center justify-center mb-2 ${
+              booking.lexofficeOfferId 
+                ? 'bg-green-500/20 border-2 border-green-500' 
+                : 'bg-gray-700 border-2 border-gray-600'
+            }`}>
+              {booking.lexofficeOfferId ? (
+                <FiCheckCircle className="text-green-400 text-2xl" />
+              ) : (
+                <FiClock className="text-gray-400 text-2xl" />
+              )}
+            </div>
+            <span className={`text-xs font-medium mb-1 ${booking.lexofficeOfferId ? 'text-green-400' : 'text-gray-400'}`}>
+              Angebot
+            </span>
+            {booking.lexofficeOfferId && (
+              <div className="flex flex-col gap-1">
+                <button
+                  onClick={() => downloadPDF('quotation')}
+                  className="flex items-center gap-1 px-2 py-1 bg-green-600/20 hover:bg-green-600/30 text-green-400 text-xs rounded transition-colors"
+                >
+                  <FiDownload size={10} />
+                  PDF
+                </button>
+                <a
+                  href="https://app.lexoffice.de/#!sales/quotations"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-1 px-2 py-1 bg-blue-600/20 hover:bg-blue-600/30 text-blue-400 text-xs rounded transition-colors justify-center"
+                >
+                  <FiFileText size={10} />
+                  Angebot in LexOffice suchen
+                </a>
+              </div>
+            )}
+          </div>
+
+          {/* Connector Line */}
+          <div className={`h-0.5 flex-1 mx-2 ${booking.lexofficeOfferId ? 'bg-green-500' : 'bg-gray-600'}`}></div>
+
+          {/* Step 2: Auftragsbestätigung */}
+          <div className="flex flex-col items-center flex-1">
+            <div className={`w-16 h-16 rounded-full flex items-center justify-center mb-2 ${
+              booking.lexofficeConfirmationId 
+                ? 'bg-green-500/20 border-2 border-green-500' 
+                : booking.lexofficeOfferId
+                ? 'bg-yellow-500/20 border-2 border-yellow-500'
+                : 'bg-gray-700 border-2 border-gray-600'
+            }`}>
+              {booking.lexofficeConfirmationId ? (
+                <FiCheckCircle className="text-green-400 text-2xl" />
+              ) : booking.lexofficeOfferId ? (
+                <FiClock className="text-yellow-400 text-2xl" />
+              ) : (
+                <FiClock className="text-gray-400 text-2xl" />
+              )}
+            </div>
+            <span className={`text-xs font-medium mb-1 ${
+              booking.lexofficeConfirmationId 
+                ? 'text-green-400' 
+                : booking.lexofficeOfferId 
+                ? 'text-yellow-400'
+                : 'text-gray-400'
+            }`}>
+              Auftragsbestätigung
+            </span>
+            {booking.lexofficeConfirmationId && (
+              <button
+                onClick={() => downloadPDF('confirmation')}
+                className="mt-1 flex items-center gap-1 px-2 py-1 bg-green-600/20 hover:bg-green-600/30 text-green-400 text-xs rounded transition-colors"
+              >
+                <FiDownload size={10} />
+                PDF
+              </button>
+            )}
+          </div>
+
+          {/* Connector Line */}
+          <div className={`h-0.5 flex-1 mx-2 ${booking.lexofficeConfirmationId ? 'bg-green-500' : 'bg-gray-600'}`}></div>
+
+          {/* Step 3: Rechnung */}
+          <div className="flex flex-col items-center flex-1">
+            <div className={`w-16 h-16 rounded-full flex items-center justify-center mb-2 ${
+              booking.lexofficeInvoiceId 
+                ? 'bg-green-500/20 border-2 border-green-500' 
+                : booking.lexofficeConfirmationId
+                ? 'bg-yellow-500/20 border-2 border-yellow-500'
+                : 'bg-gray-700 border-2 border-gray-600'
+            }`}>
+              {booking.lexofficeInvoiceId ? (
+                <FiCheckCircle className="text-green-400 text-2xl" />
+              ) : booking.lexofficeConfirmationId ? (
+                <FiClock className="text-yellow-400 text-2xl" />
+              ) : (
+                <FiClock className="text-gray-400 text-2xl" />
+              )}
+            </div>
+            <span className={`text-xs font-medium mb-1 ${
+              booking.lexofficeInvoiceId 
+                ? 'text-green-400' 
+                : booking.lexofficeConfirmationId 
+                ? 'text-yellow-400'
+                : 'text-gray-400'
+            }`}>
+              Rechnung
+            </span>
+            {booking.lexofficeInvoiceId && (
+              <button
+                className="mt-1 flex items-center gap-1 px-2 py-1 bg-green-600/20 hover:bg-green-600/30 text-green-400 text-xs rounded transition-colors"
+              >
+                <FiDownload size={10} />
+                PDF
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="space-y-4">
+        {/* Run Automation Button */}
+        {!hasRunAutomation && (
+          <button
+            onClick={runAutomation}
+            disabled={isRunning}
+            className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-pink-600 to-red-600 text-white rounded-lg hover:from-pink-700 hover:to-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg"
+          >
+            {isRunning ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                Automation läuft...
+              </>
+            ) : (
+              <>
+                <FiPlay />
+                Automation starten
+              </>
+            )}
+          </button>
+        )}
+
+        {/* Confirm Booking Button */}
+        {canConfirm && (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-sm text-green-400 bg-green-500/10 border border-green-500/50 rounded-lg p-3">
+              <FiCheckCircle />
+              <span>Vertrag wurde unterschrieben am {new Date(booking.contractSignedAt!).toLocaleDateString('de-DE')}</span>
+            </div>
+            <button
+              onClick={confirmBooking}
+              disabled={isConfirming}
+              className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-lg hover:from-green-700 hover:to-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg"
+            >
+              {isConfirming ? (
+                <>
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                  Bestätige Buchung...
+                </>
+              ) : (
+                <>
+                  <FiCheck />
+                  Buchung bestätigen (RESERVED → CONFIRMED)
+                </>
+              )}
+            </button>
+          </div>
+        )}
+
+        {booking.status === 'CONFIRMED' && (
+          <div className="flex items-center gap-2 text-sm text-blue-400 bg-blue-500/10 border border-blue-500/50 rounded-lg p-3">
+            <FiCheckCircle />
+            <span>Buchung ist bestätigt</span>
+            {booking.lexofficeConfirmationId && (
+              <span className="ml-auto text-xs text-gray-400">
+                LexOffice AB: {booking.lexofficeConfirmationId.slice(0, 8)}...
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Result Display */}
+      {result && (
+        <div className="mt-6 p-4 bg-green-500/10 border border-green-500/50 rounded-lg">
+          <h4 className="text-sm font-bold text-green-400 mb-2">✅ Automation erfolgreich!</h4>
+          <div className="space-y-1 text-xs text-gray-300">
+            <div>Contract PDF: {result.contractGenerated ? '✅' : '❌'}</div>
+            <div>LexOffice: {result.lexofficeCreated ? '✅' : '❌'}</div>
+            <div>E-Mail: {result.emailSent ? '✅' : '❌'}</div>
+            <div>Kalender: {result.calendarSynced ? '✅' : '❌'}</div>
+            {result.errors?.length > 0 && (
+              <div className="mt-2 text-red-400">
+                Fehler: {result.errors.join(', ')}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Error Display */}
+      {error && (
+        <div className="mt-6 p-4 bg-red-500/10 border border-red-500/50 rounded-lg flex items-start gap-2">
+          <FiAlertCircle className="text-red-400 flex-shrink-0 mt-0.5" />
+          <div>
+            <h4 className="text-sm font-bold text-red-400 mb-1">Fehler</h4>
+            <p className="text-xs text-gray-300">{error}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

components/DashboardSidebar.tsx

@@ -42,7 +42,7 @@ export default function DashboardSidebar({ user }: DashboardSidebarProps) {
   ];
 
   return (
-    <aside className="w-64 bg-gradient-to-br from-gray-800 to-gray-900 border-r border-gray-700 shadow-lg min-h-screen">
+    <aside className="w-64 bg-gradient-to-br from-gray-800 to-gray-900 border-r border-gray-700 shadow-lg min-h-screen flex flex-col">
       <div className="p-6 border-b border-gray-700">
         <h1 className="text-xl font-bold text-white">
           SaveTheMoment <span className="text-red-400">Atlas</span>
@@ -50,7 +50,7 @@ export default function DashboardSidebar({ user }: DashboardSidebarProps) {
         <p className="text-sm text-gray-400 mt-1">{user?.name || 'Benutzer'}</p>
       </div>
 
-      <nav className="p-4 space-y-2">
+      <nav className="p-4 space-y-2 flex-1 overflow-y-auto">
         {navItems.map((item) => {
           const Icon = item.icon;
           const active = isActive(item.href);
@@ -104,12 +104,12 @@ export default function DashboardSidebar({ user }: DashboardSidebarProps) {
         </div>
       </nav>
 
-      <div className="absolute bottom-4 left-4 right-4">
+      <div className="p-4 border-t border-gray-700">
         <button
           onClick={() => signOut({ callbackUrl: '/' })}
-          className="flex items-center gap-3 px-4 py-3 text-gray-300 hover:bg-red-500/20 hover:text-red-400 rounded-lg w-full transition-colors"
+          className="flex items-center justify-center gap-2 px-4 py-2 text-sm text-gray-300 hover:bg-red-500/20 hover:text-red-400 rounded-lg transition-colors border border-gray-700 hover:border-red-500/50 w-full"
         >
-          <FiLogOut /> Abmelden
+          <FiLogOut size={16} /> Abmelden
         </button>
       </div>
     </aside>

components/NewBookingForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { FiCalendar, FiMapPin } from "react-icons/fi";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -17,6 +17,21 @@ export default function NewBookingForm({
   const router = useRouter();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const [equipmentList, setEquipmentList] = useState<any[]>([]);
+  const [selectedEquipment, setSelectedEquipment] = useState<string[]>([]);
+
+  useEffect(() => {
+    fetch("/api/equipment")
+      .then((res) => res.json())
+      .then((data) => setEquipmentList(data.equipment || []))
+      .catch(() => {});
+  }, []);
+
+  const toggleEquipment = (id: string) => {
+    setSelectedEquipment((prev) =>
+      prev.includes(id) ? prev.filter((e) => e !== id) : [...prev, id]
+    );
+  };
 
   const [formData, setFormData] = useState({
     locationId: "",
@@ -51,7 +66,7 @@ export default function NewBookingForm({
       const res = await fetch("/api/bookings/create", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(formData),
+        body: JSON.stringify({ ...formData, equipmentIds: selectedEquipment }),
       });
 
       const data = await res.json();
@@ -125,6 +140,7 @@ export default function NewBookingForm({
                 required
                 className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
               >
+                <option value="VINTAGE">Vintage</option>
                 <option value="VINTAGE_SMILE">Vintage Smile</option>
                 <option value="VINTAGE_PHOTOS">Vintage Photos</option>
                 <option value="NOSTALGIE">Nostalgie</option>
@@ -132,6 +148,34 @@ export default function NewBookingForm({
               </select>
             </div>
           </div>
+
+          {equipmentList.length > 0 && (
+            <div className="mt-4">
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Zusatzausstattung
+              </label>
+              <div className="grid grid-cols-2 gap-2">
+                {equipmentList.map((eq) => (
+                  <label
+                    key={eq.id}
+                    className={`flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors ${
+                      selectedEquipment.includes(eq.id)
+                        ? "bg-red-500/10 border-red-500/50 text-white"
+                        : "bg-gray-700/50 border-gray-600 text-gray-300 hover:border-gray-500"
+                    }`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedEquipment.includes(eq.id)}
+                      onChange={() => toggleEquipment(eq.id)}
+                      className="accent-red-500"
+                    />
+                    {eq.name}
+                  </label>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
 
         <div>
@@ -229,6 +273,49 @@ export default function NewBookingForm({
                 className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
               />
             </div>
+
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Adresse
+              </label>
+              <input
+                type="text"
+                value={formData.customerAddress}
+                onChange={(e) =>
+                  setFormData({ ...formData, customerAddress: e.target.value })
+                }
+                placeholder="Straße und Hausnummer"
+                className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent placeholder-gray-500"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                PLZ
+              </label>
+              <input
+                type="text"
+                value={formData.customerZip}
+                onChange={(e) =>
+                  setFormData({ ...formData, customerZip: e.target.value })
+                }
+                className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Stadt
+              </label>
+              <input
+                type="text"
+                value={formData.customerCity}
+                onChange={(e) =>
+                  setFormData({ ...formData, customerCity: e.target.value })
+                }
+                className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
+              />
+            </div>
           </div>
         </div>
 
@@ -362,6 +449,34 @@ export default function NewBookingForm({
               />
             </div>
 
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Abbau ab
+              </label>
+              <input
+                type="datetime-local"
+                value={formData.dismantleTimeEarliest}
+                onChange={(e) =>
+                  setFormData({ ...formData, dismantleTimeEarliest: e.target.value })
+                }
+                className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Abbau spätestens
+              </label>
+              <input
+                type="datetime-local"
+                value={formData.dismantleTimeLatest}
+                onChange={(e) =>
+                  setFormData({ ...formData, dismantleTimeLatest: e.target.value })
+                }
+                className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
+              />
+            </div>
+
             <div className="col-span-2">
               <label className="block text-sm font-medium text-gray-300 mb-2">
                 Notizen (optional)