diff --git a/app/EOF b/app/EOF
new file mode 100644
index 0000000..e69de29
diff --git a/app/fix_rooms.py b/app/fix_rooms.py
new file mode 100644
index 0000000..558a32f
--- /dev/null
+++ b/app/fix_rooms.py
@@ -0,0 +1,24 @@
+import re
+
+with open('/root/reservation-system/app/main.py', 'r') as f:
+    content = f.read()
+
+# Einfachere Modifikation - füge Admin-Check hinzu nachdem rooms geladen wurden
+# Suche nach der rooms Funktion und ergänze sie
+
+old_code = """@app.route('/api/rooms')
+def rooms():
+    is_admin = session.get('user_role') == 'admin'"""
+
+new_code = """@app.route('/api/rooms')
+def rooms():
+    is_admin = session.get('user_role') == 'admin'
+    
+    with get_db() as db:"""
+
+content = content.replace(old_code, new_code)
+
+with open('/root/reservation-system/app/main.py', 'w') as f:
+    f.write(content)
+
+print("Rooms endpoint updated")
diff --git a/app/login_routes.py b/app/login_routes.py
index 99bc49a..926415d 100644
--- a/app/login_routes.py
+++ b/app/login_routes.py
@@ -32,4 +32,3 @@ def check_session():
     role = session.get('user_role')
     if role:
         return jsonify({"role": role, "logged_in": True})
-    return jsonify({"role": None, "logged_in": False})
diff --git a/app/templates/index.html b/app/templates/index.html
index 60f467f..6c755fc 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -5,633 +5,489 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Reservierungssystem</title>
     <style>
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        
+        :root {
+            --primary: #3b82f6;
+            --primary-dark: #2563eb;
+            --secondary: #64748b;
+            --bg: #f8fafc;
+            --card: #ffffff;
+            --text: #1e293b;
+            --text-light: #64748b;
+            --border: #e2e8f0;
+            --success: #10b981;
+            --warning: #f59e0b;
+            --error: #ef4444;
         }
         
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #1a1a2e;
-            color: #fff;
+            background: var(--bg);
+            color: var(--text);
             min-height: 100vh;
+            line-height: 1.6;
         }
         
+        /* Header */
         .header {
-            background: #16213e;
-            padding: 15px 30px;
+            background: var(--card);
+            padding: 1rem 2rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            border-bottom: 1px solid #2d3a5c;
+            border-bottom: 1px solid var(--border);
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
         }
         
         .logo {
             font-size: 1.5rem;
-            font-weight: 700;
-            color: #00d4aa;
+            font-weight: 600;
+            color: var(--primary);
         }
         
-        .nav {
-            display: flex;
-            gap: 10px;
-        }
-        
-        .nav-btn {
-            background: transparent;
-            border: 1px solid #00d4aa;
-            color: #00d4aa;
-            padding: 8px 20px;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        
-        .nav-btn:hover, .nav-btn.active {
-            background: #00d4aa;
-            color: #000;
-        }
-        
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 30px;
-        }
-        
-        .dashboard-grid {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-        
-        .stat-card {
-            background: #16213e;
-            border: 1px solid #2d3a5c;
-            border-radius: 12px;
-            padding: 25px;
-        }
-        
-        .stat-card h3 {
-            color: #888;
-            font-size: 0.9rem;
-            font-weight: 500;
-            margin-bottom: 10px;
-            text-transform: uppercase;
-        }
-        
-        .stat-value {
-            font-size: 2.5rem;
-            font-weight: 700;
-            color: #00d4aa;
-        }
-        
-        .alert-card {
-            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
-            cursor: pointer;
-            transition: transform 0.2s;
-        }
-        
-        .alert-card:hover {
-            transform: translateY(-3px);
-        }
-        
-        .alert-card h3 {
-            color: rgba(255,255,255,0.9);
-        }
-        
-        .alert-card .stat-value {
-            color: #fff;
-        }
-        
-        .section {
-            background: #16213e;
-            border: 1px solid #2d3a5c;
-            border-radius: 12px;
-            margin-bottom: 20px;
-        }
-        
-        .section-header {
-            padding: 20px 25px;
-            border-bottom: 1px solid #2d3a5c;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .section-header h2 {
-            font-size: 1.2rem;
-        }
+        .nav { display: flex; gap: 1rem; align-items: center; }
         
         .btn {
-            background: #00d4aa;
-            color: #000;
-            border: none;
-            padding: 10px 20px;
+            padding: 0.5rem 1.25rem;
             border-radius: 6px;
+            border: none;
             cursor: pointer;
-            font-weight: 600;
-        }
-        
-        .btn:hover {
-            background: #00b894;
-        }
-        
-        table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-        
-        th, td {
-            padding: 15px;
-            text-align: left;
-            border-bottom: 1px solid #2d3a5c;
-        }
-        
-        th {
-            color: #888;
-            font-weight: 500;
-            font-size: 0.85rem;
-            text-transform: uppercase;
-        }
-        
-        tr:hover {
-            background: rgba(0,212,170,0.05);
-        }
-        
-        .badge {
+            font-size: 0.9rem;
+            transition: all 0.2s;
+            text-decoration: none;
             display: inline-block;
-            padding: 4px 12px;
-            border-radius: 20px;
-            font-size: 0.8rem;
-            font-weight: 500;
         }
         
-        .badge-confirmed {
-            background: rgba(0,212,170,0.2);
-            color: #00d4aa;
+        .btn-primary {
+            background: var(--primary);
+            color: white;
         }
         
-        .badge-pending {
-            background: rgba(241,196,15,0.2);
-            color: #f1c40f;
+        .btn-primary:hover { background: var(--primary-dark); }
+        
+        .btn-secondary {
+            background: transparent;
+            border: 1px solid var(--border);
+            color: var(--text);
         }
         
-        .badge-cancelled {
-            background: rgba(231,76,60,0.2);
-            color: #e74c3c;
-        }
+        .btn-secondary:hover { background: var(--bg); }
         
-        .booking-number {
-            font-family: monospace;
-            background: rgba(0,212,170,0.1);
-            padding: 4px 8px;
-            border-radius: 4px;
-            color: #00d4aa;
-        }
-        
-        .hidden {
-            display: none !important;
-        }
-        
-        /* Modal */
-        .modal-overlay {
+        /* Login Modal */
+        .modal {
+            display: none;
             position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0,0,0,0.7);
-            display: flex;
+            top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.5);
+            z-index: 1000;
             align-items: center;
             justify-content: center;
-            z-index: 1000;
         }
         
-        .modal {
-            background: #16213e;
-            border: 1px solid #2d3a5c;
+        .modal.active { display: flex; }
+        
+        .modal-content {
+            background: var(--card);
+            padding: 2rem;
             border-radius: 12px;
-            padding: 30px;
             width: 90%;
-            max-width: 600px;
-            max-height: 90vh;
-            overflow-y: auto;
+            max-width: 400px;
+            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
         }
         
-        .modal h2 {
-            margin-bottom: 20px;
+        .modal-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 1.5rem;
+            color: var(--text);
         }
         
-        .form-group {
-            margin-bottom: 20px;
-        }
+        .form-group { margin-bottom: 1rem; }
         
         .form-group label {
             display: block;
-            margin-bottom: 8px;
-            color: #888;
+            margin-bottom: 0.5rem;
+            font-size: 0.875rem;
+            color: var(--text-light);
         }
         
-        .form-group input, .form-group select, .form-group textarea {
+        .form-group input {
             width: 100%;
-            padding: 12px;
-            border: 1px solid #2d3a5c;
-            background: #1a1a2e;
-            color: #fff;
+            padding: 0.75rem;
+            border: 1px solid var(--border);
             border-radius: 6px;
+            font-size: 1rem;
         }
         
-        .form-row {
+        .form-group input:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+        
+        /* Main Content */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        
+        .page-title {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+            color: var(--text);
+        }
+        
+        .page-subtitle {
+            color: var(--text-light);
+            margin-bottom: 2rem;
+        }
+        
+        /* Room Cards */
+        .rooms-grid {
             display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
         }
         
-        .modal-actions {
+        .room-card {
+            background: var(--card);
+            border-radius: 12px;
+            padding: 1.5rem;
+            border: 1px solid var(--border);
+            transition: all 0.2s;
+            cursor: pointer;
+        }
+        
+        .room-card:hover {
+            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
+            transform: translateY(-2px);
+        }
+        
+        .room-header {
             display: flex;
-            gap: 10px;
-            justify-content: flex-end;
-            margin-top: 25px;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
         }
         
-        .btn-secondary {
-            background: #333;
-            color: #fff;
+        .room-name {
+            font-size: 1.25rem;
+            font-weight: 600;
         }
         
-        .btn-secondary:hover {
-            background: #444;
+        .room-badge {
+            padding: 0.25rem 0.75rem;
+            border-radius: 20px;
+            font-size: 0.75rem;
+            font-weight: 500;
         }
         
-        @media (max-width: 1024px) {
-            .dashboard-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
+        .room-capacity {
+            color: var(--text-light);
+            font-size: 0.9rem;
+            margin-bottom: 1rem;
         }
         
-        @media (max-width: 768px) {
-            .dashboard-grid {
-                grid-template-columns: 1fr;
-            }
-            
-            .header {
-                flex-direction: column;
-                gap: 15px;
-            }
-            
-            .nav {
-                flex-wrap: wrap;
-                justify-content: center;
-            }
-            
-            .form-row {
-                grid-template-columns: 1fr;
-            }
+        .room-stats {
+            display: flex;
+            gap: 1rem;
+            font-size: 0.875rem;
+            color: var(--text-light);
+        }
+        
+        /* Captcha */
+        .captcha-box {
+            background: var(--bg);
+            padding: 1rem;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+            text-align: center;
+        }
+        
+        .captcha-question {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: var(--primary);
+            margin-bottom: 0.5rem;
+        }
+        
+        .captcha-input {
+            width: 120px;
+            text-align: center;
+            font-size: 1.25rem;
+        }
+        
+        /* Guest View Restrictions */
+        .guest-notice {
+            background: #fef3c7;
+            border: 1px solid #fcd34d;
+            padding: 1rem;
+            border-radius: 8px;
+            margin-bottom: 1.5rem;
+            font-size: 0.9rem;
+            color: #92400e;
+        }
+        
+        .admin-only { display: none; }
+        .admin-visible .admin-only { display: block; }
+        
+        /* Loading */
+        .loading {
+            text-align: center;
+            padding: 3rem;
+            color: var(--text-light);
+        }
+        
+        .error {
+            background: #fef2f2;
+            border: 1px solid #fecaca;
+            color: var(--error);
+            padding: 1rem;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+        }
+        
+        .success {
+            background: #f0fdf4;
+            border: 1px solid #bbf7d0;
+            color: var(--success);
+            padding: 1rem;
+            border-radius: 8px;
+            margin-bottom: 1rem;
         }
     </style>
 </head>
 <body>
-    <div class="header">
-        <div class="logo">🍽️ Reservierungssystem</div>
-        <div class="nav">
-            <button class="nav-btn active" onclick="showView('dashboard')">Dashboard</button>
-            <button class="nav-btn" onclick="showView('reservations')">Reservierungen</button>
-            <button class="nav-btn" onclick="showView('floorplan')">Tischplan</button>
-            <button class="nav-btn" onclick="showView('guests')">Gäste</button>
-            <button class="nav-btn" onclick="showView('emails')">E-Mails</button>
-        </div>
-    </div>
-    
-    <div class="container">
-        <!-- Dashboard View -->
-        <div id="view-dashboard">
-            <div class="dashboard-grid">
-                <div class="stat-card">
-                    <h3>Heute Reserviert</h3>
-                    <div class="stat-value" id="stat-today">0</div>
-                </div>
-                <div class="stat-card">
-                    <h3>Gäste Heute</h3>
-                    <div class="stat-value" id="stat-guests">0</div>
-                </div>
-                <div class="stat-card">
-                    <h3>Freie Tische</h3>
-                    <div class="stat-value" id="stat-available">0</div>
-                </div>
-                <div class="stat-card alert-card" onclick="showView('emails')" id="alert-card">
-                    <h3>⚠️ Klärung Erforderlich</h3>
-                    <div class="stat-value" id="stat-pending">0</div>
-                </div>
-            </div>
-            
-            <div class="section">
-                <div class="section-header">
-                    <h2>Heutige Reservierungen</h2>
-                    <button class="btn" onclick="openNewReservation()">+ Neue Reservierung</button>
-                </div>
-                <div id="today-reservations">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Buchungsnr.</th>
-                                <th>Zeit</th>
-                                <th>Name</th>
-                                <th>Personen</th>
-                                <th>Status</th>
-                                <th>Aktion</th>
-                            </tr>
-                        </thead>
-                        <tbody id="today-table-body">
-                            <!-- Dynamisch gefüllt -->
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-        
-        <!-- Weitere Views (hidden by default) -->
-        <div id="view-reservations" class="hidden">
-            <div class="section">
-                <div class="section-header">
-                    <h2>Alle Reservierungen</h2>
-                    <div>
-                        <input type="date" id="filter-date" onchange="loadReservations()">
-                        <button class="btn" onclick="openNewReservation()">+ Neu</button>
-                    </div>
-                </div>
-                <div id="all-reservations">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Buchungsnr.</th>
-                                <th>Datum</th>
-                                <th>Zeit</th>
-                                <th>Name</th>
-                                <th>Pers.</th>
-                                <th>Status</th>
-                            </tr>
-                        </thead>
-                        <tbody id="reservations-table-body">
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-        
-        <div id="view-floorplan" class="hidden">
-            <div class="section">
-                <div class="section-header">
-                    <h2>Tischplan</h2>
-                    <select id="floorplan-date" onchange="loadFloorplan()">
-                        <option>Heute</option>
-                    </select>
-                </div>
-                <div id="floorplan-container" style="min-height: 500px; position: relative;"
-003e
-                    <!-- Dynamisch rendern -->
-                </div>
-            </div>
-        </div>
-        
-        <div id="view-guests" class="hidden">
-            <div class="section">
-                <div class="section-header">
-                    <h2>Gäste-Adressbuch</h2>
-                    <div>
-                        <input type="text" placeholder="Suchen..." id="guest-search" onkeyup="searchGuests()">
-                        <button class="btn" onclick="openNewGuest()">+ Neuer Gast</button>
-                    </div>
-                </div>
-                <div id="guests-list"></div>
-            </div>
-        </div>
-        
-        <div id="view-emails" class="hidden">
-            <div class="section">
-                <div class="section-header">
-                    <h2>E-Mail-Verarbeitung</h2>
-                    <div class="nav">
-                        <button class="nav-btn active" onclick="filterEmails('needs_review')">Klärung</button>
-                        <button class="nav-btn" onclick="filterEmails('auto_processed')">Automatisch</button>
-                        <button class="nav-btn" onclick="filterEmails('confirmed')">Bestätigt</button>
-                    </div>
-                </div>
-                <div id="emails-list"></div>
-            </div>
-        </div>
-    </div>
-    
-    <!-- Modal: Neue Reservierung -->
-    <div id="modal-reservation" class="modal-overlay hidden">
-        <div class="modal">
-            <h2>Neue Reservierung</h2>
-            
-            <form id="reservation-form">
-                <div class="form-row">
-                    <div class="form-group">
-                        <label>Datum *</label>
-                        <input type="date" id="res-date" required>
-                    </div>
-                    <div class="form-group">
-                        <label>Uhrzeit *</label>
-                        <input type="time" id="res-time" required>
-                    </div>
-                </div>
-                
-                <div class="form-row">
-                    <div class="form-group">
-                        <label>Name *</label>
-                        <input type="text" id="res-name" placeholder="Name suchen..." onkeyup="searchGuestForReservation()" required>
-                    </div>
-                    <div class="form-group">
-                        <label>Personen *</label>
-                        <input type="number" id="res-guests" min="1" max="50" value="2" required>
-                    </div>
-                </div>
-                
-                <div class="form-row">
-                    <div class="form-group">
-                        <label>Telefon</label>
-                        <input type="tel" id="res-phone">
-                    </div>
-                    <div class="form-group">
-                        <label>E-Mail</label>
-                        <input type="email" id="res-email">
-                    </div>
-                </div>
-                
+    <header class="header">
+        <div class="logo">🍽️ Reservierung</div>
+        <nav class="nav">
+            <span id="userStatus"></span>
+            <button class="btn btn-secondary" id="loginBtn" onclick="showLogin()">Admin Login</button>
+            <button class="btn btn-primary admin-only" onclick="showNewBooking()">+ Buchung</button>
+        </nav>
+    </header>
+
+    <!-- Login Modal -->
+    <div class="modal" id="loginModal">
+        <div class="modal-content">
+            <h2 class="modal-title">Admin Login</h2>
+            <form id="loginForm" onsubmit="handleLogin(event)">
                 <div class="form-group">
-                    <label>Quelle</label>
-                    <select id="res-source">
-                        <option value="phone">Telefon</option>
-                        <option value="email">E-Mail</option>
-                        <option value="web">Web</option>
-                        <option value="walk-in">Walk-in</option>
-                    </select>
-                </div>
-                
-                <div class="form-group" id="phone-caller-group">
-                    <label>Anrufer (bei Telefon-Buchung)</label>
-                    <input type="text" id="res-caller">
-                </div>
-                
-                <div class="form-group">
-                    <label>Notizen</label>
-                    <textarea id="res-notes" rows="3"></textarea>
+                    <label>Passwort</label>
+                    <input type="password" id="loginPassword" required placeholder="••••••••">
                 </div>
+                <button type="submit" class="btn btn-primary" style="width: 100%">Anmelden</button>
+                <button type="button" class="btn btn-secondary" style="width: 100%; margin-top: 0.5rem" onclick="hideLogin()">Abbrechen</button>
             </form>
-            
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="closeModal()">Abbrechen</button>
-                <button class="btn" onclick="saveReservation()">Speichern</button>
-            </div>
         </div>
     </div>
-    
+
+    <main class="container">
+        <div class="guest-notice" id="guestNotice">
+            👋 Willkommen! Als Gast können Sie Tische reservieren. Für Veranstaltungen (ganzer Raum) kontaktieren Sie uns bitte telefonisch.
+        </div>
+
+        <h1 class="page-title">Unsere Räume</h1>
+        <p class="page-subtitle">Wählen Sie einen Raum für Ihre Reservierung</p>
+
+        <div class="loading" id="loading">Lade Räume...</div>
+        <div class="rooms-grid" id="roomsGrid" style="display: none;"></div>
+
+        <div id="bookingSection" style="display: none;">
+            <h2 style="margin: 2rem 0 1rem;">Tisch reservieren</h2>
+            
+            <div class="captcha-box">
+                <div class="captcha-question" id="captchaQuestion">Lade Captcha...</div>
+                <input type="number" class="captcha-input" id="captchaAnswer" placeholder="?" required>
+                <input type="hidden" id="captchaToken">
+            </div>
+
+            <form id="bookingForm" onsubmit="handleBooking(event)">
+                <div class="form-group">
+                    <label>Name</label>
+                    <input type="text" id="bookingName" required placeholder="Max Mustermann">
+                </div>
+                <div class="form-group">
+                    <label>Telefon</label>
+                    <input type="tel" id="bookingPhone" placeholder="+49 123 456789">
+                </div>
+                <div class="form-group">
+                    <label>Datum</label>
+                    <input type="date" id="bookingDate" required>
+                </div>
+                <div class="form-group">
+                    <label>Zeit</label>
+                    <input type="time" id="bookingTime" required>
+                </div>
+                <div class="form-group">
+                    <label>Personen</label>
+                    <input type="number" id="bookingGuests" min="1" max="20" value="2" required>
+                </div>
+                <button type="submit" class="btn btn-primary" style="width: 100%">Reservierung anfragen</button>
+            </form>
+        </div>
+    </main>
+
     <script>
-        // Global state
-        let currentView = 'dashboard';
-        
-        // Init
-        document.addEventListener('DOMContentLoaded', () => {
-            loadDashboard();
-            document.getElementById('res-date').valueAsDate = new Date();
-            
-            // Source change handler
-            document.getElementById('res-source').addEventListener('change', (e) => {
-                const callerGroup = document.getElementById('phone-caller-group');
-                callerGroup.style.display = e.target.value === 'phone' ? 'block' : 'none';
-            });
-        });
-        
-        // View switching
-        function showView(view) {
-            // Hide all views
-            document.querySelectorAll('[id^="view-"]').forEach(el => {
-                el.classList.add('hidden');
-            });
-            
-            // Show selected view
-            document.getElementById(`view-${view}`).classList.remove('hidden');
-            
-            // Update nav buttons
-            document.querySelectorAll('.nav-btn').forEach(btn => {
-                btn.classList.remove('active');
-            });
-            event.target.classList.add('active');
-            
-            // Load data for view
-            if (view === 'dashboard') loadDashboard();
-            if (view === 'reservations') loadReservations();
-            if (view === 'floorplan') loadFloorplan();
-            if (view === 'guests') loadGuests();
-            if (view === 'emails') loadEmails();
-            
-            currentView = view;
-        }
-        
-        // API calls
-        async function api(endpoint, options = {}) {
-            const res = await fetch(`/api${endpoint}`, {
-                ...options,
-                headers: {
-                    'Content-Type': 'application/json',
-                    ...options.headers
+        let currentUser = null;
+        let selectedRoom = null;
+        let selectedTable = null;
+
+        // Check session on load
+        async function checkSession() {
+            try {
+                const res = await fetch('/api/session');
+                const data = await res.json();
+                if (data.logged_in) {
+                    currentUser = data;
+                    document.body.classList.add('admin-visible');
+                    document.getElementById('loginBtn').textContent = 'Abmelden';
+                    document.getElementById('loginBtn').onclick = logout;
+                    document.getElementById('guestNotice').style.display = 'none';
                 }
-            });
-            return res.json();
+            } catch (e) {
+                console.log('Not logged in');
+            }
+            loadRooms();
+            loadCaptcha();
         }
-        
-        // Dashboard
-        async function loadDashboard() {
-            const data = await api('/dashboard');
-            
-            document.getElementById('stat-today').textContent = data.today_count;
-            document.getElementById('stat-guests').textContent = data.guests_today;
-            document.getElementById('stat-available').textContent = data.total_tables - data.today_count;
-            document.getElementById('stat-pending').textContent = data.pending_emails;
-            
-            // Today's reservations
-            const tbody = document.getElementById('today-table-body');
-            tbody.innerHTML = data.today_reservations.map(r => `
-                <tr>
-                    <td><span class="booking-number">${r.booking_number}</span></td>
-                    <td>${r.time_from}</td>
-                    <td>${r.guest_name || r.phone || 'Unbekannt'}</td>
-                    <td>${r.guests}</td>
-                    <td><span class="badge badge-${r.status}">${r.status}</span></td>
-                    <td><button class="btn btn-secondary" onclick="viewReservation(${r.id})">Details</button></td>
-                </tr>
-            `).join('');
-        }
-        
-        // Reservations
-        async function loadReservations() {
-            const date = document.getElementById('filter-date').value;
-            const params = date ? `?date=${date}` : '';
-            const data = await api(`/reservations${params}`);
-            
-            const tbody = document.getElementById('reservations-table-body');
-            tbody.innerHTML = data.map(r => `
-                <tr>
-                    <td><span class="booking-number">${r.booking_number}</span></td>
-                    <td>${r.date}</td>
-                    <td>${r.time_from}</td>
-                    <td>${r.guest_name || 'Unbekannt'}</td>
-                    <td>${r.guests}</td>
-                    <td><span class="badge badge-${r.status}">${r.status}</span></td>
-                </tr>
-            `).join('');
-        }
-        
-        // Modal functions
-        function openNewReservation() {
-            document.getElementById('modal-reservation').classList.remove('hidden');
-        }
-        
-        function closeModal() {
-            document.getElementById('modal-reservation').classList.add('hidden');
-            document.getElementById('reservation-form').reset();
-        }
-        
-        async function saveReservation() {
-            const data = {
-                date: document.getElementById('res-date').value,
-                time_from: document.getElementById('res-time').value,
-                guests: parseInt(document.getElementById('res-guests').value),
-                name: document.getElementById('res-name').value,
-                phone: document.getElementById('res-phone').value,
-                email: document.getElementById('res-email').value,
-                source: document.getElementById('res-source').value,
-                phone_caller_name: document.getElementById('res-caller').value,
-                notes: document.getElementById('res-notes').value
-            };
-            
-            const result = await api('/reservations', {
-                method: 'POST',
-                body: JSON.stringify(data)
-            });
-            
-            if (result.booking_number) {
-                alert(`Reservierung erstellt: ${result.booking_number}`);
-                closeModal();
-                loadDashboard();
-            } else {
-                alert('Fehler: ' + (result.error || 'Unbekannter Fehler'));
+
+        // Load rooms
+        async function loadRooms() {
+            try {
+                const res = await fetch('/api/rooms');
+                const rooms = await res.json();
+                displayRooms(rooms);
+            } catch (e) {
+                document.getElementById('loading').textContent = 'Fehler beim Laden der Räume';
             }
         }
-        
-        // Placeholder functions
-        function loadFloorplan() { console.log('Floorplan loading...'); }
-        function loadGuests() { console.log('Guests loading...'); }
-        function loadEmails() { console.log('Emails loading...'); }
-        function filterEmails(status) { console.log('Filter:', status); }
-        function searchGuests() { console.log('Search guests...'); }
-        function openNewGuest() { console.log('New guest...'); }
-        function searchGuestForReservation() { console.log('Search guest...'); }
-        function viewReservation(id) { console.log('View:', id); }
+
+        function displayRooms(rooms) {
+            const grid = document.getElementById('roomsGrid');
+            const loading = document.getElementById('loading');
+            
+            loading.style.display = 'none';
+            grid.style.display = 'grid';
+            
+            grid.innerHTML = rooms.map(room => `
+                <div class="room-card" onclick="selectRoom(${room.id}, '${room.name}')" style="border-left: 4px solid ${room.color}">
+                    <div class="room-header">
+                        <span class="room-name">${room.name}</span>
+                        <span class="room-badge" style="background: ${room.color}20; color: ${room.color}">
+                            ${room.capacity} Plätze
+                        </span>
+                    </div>
+                    <div class="room-capacity">
+                        ${room.areas ? room.areas.length : 0} Bereiche · 
+                        ${room.areas ? room.areas.reduce((sum, a) => sum + (a.tables ? a.tables.length : 0), 0) : 0} Tische
+                    </div>
+                    <div class="room-stats">
+                        <span>🕐 ${room.areas && room.areas[0] ? room.areas[0].available_from + '-' + room.areas[0].available_to : '10:00-23:00'}</span>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        function selectRoom(roomId, roomName) {
+            selectedRoom = roomId;
+            document.getElementById('bookingSection').style.display = 'block';
+            document.getElementById('bookingSection').scrollIntoView({ behavior: 'smooth' });
+        }
+
+        // Captcha
+        async function loadCaptcha() {
+            try {
+                const res = await fetch('/api/captcha');
+                const data = await res.json();
+                document.getElementById('captchaQuestion').textContent = data.question;
+                document.getElementById('captchaToken').value = data.token;
+            } catch (e) {
+                document.getElementById('captchaQuestion').textContent = 'Captcha nicht verfügbar';
+            }
+        }
+
+        // Login
+        function showLogin() {
+            document.getElementById('loginModal').classList.add('active');
+        }
+
+        function hideLogin() {
+            document.getElementById('loginModal').classList.remove('active');
+        }
+
+        async function handleLogin(e) {
+            e.preventDefault();
+            const password = document.getElementById('loginPassword').value;
+            
+            try {
+                const res = await fetch('/api/admin/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ password })
+                });
+                
+                if (res.ok) {
+                    hideLogin();
+                    location.reload();
+                } else {
+                    alert('Falsches Passwort');
+                }
+            } catch (e) {
+                alert('Fehler beim Login');
+            }
+        }
+
+        async function logout() {
+            await fetch('/api/admin/logout', { method: 'POST' });
+            location.reload();
+        }
+
+        // Booking
+        async function handleBooking(e) {
+            e.preventDefault();
+            
+            const captchaAnswer = document.getElementById('captchaAnswer').value;
+            const captchaToken = document.getElementById('captchaToken').value;
+            
+            const data = {
+                name: document.getElementById('bookingName').value,
+                phone: document.getElementById('bookingPhone').value,
+                date: document.getElementById('bookingDate').value,
+                time_from: document.getElementById('bookingTime').value,
+                guests: parseInt(document.getElementById('bookingGuests').value),
+                captcha_token: captchaToken,
+                captcha_answer: captchaAnswer
+            };
+
+            try {
+                const res = await fetch('/api/reservations', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(data)
+                });
+                
+                if (res.ok) {
+                    alert('Reservierung erfolgreich! Wir melden uns bei Ihnen.');
+                    document.getElementById('bookingForm').reset();
+                    loadCaptcha();
+                } else {
+                    const err = await res.json();
+                    alert(err.error || 'Fehler bei der Reservierung');
+                }
+            } catch (e) {
+                alert('Netzwerkfehler');
+            }
+        }
+
+        // Set today's date as default
+        document.getElementById('bookingDate').valueAsDate = new Date();
+
+        // Initialize
+        checkSession();
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>