Files
casa-daenzo-web/dist/trattoria-admin/index.html
T

79 lines
46 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="de" class="scroll-smooth bg-[#1A1816] text-[#E6D5C3]"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><!-- SEO Meta Tags --><title>Trattoria Management WebApp | Casa da Enzo Goslar</title><meta name="description" content="Interne Verwaltung der Trattoria da Enzo: Tischreservierungen mit KI-Antwortgenerator, Öffnungszeiten &#38; Schichten, Speisekarten-Manager mit Versionierung und Gutschein-Tracking."><meta name="robots" content="index, follow"><!-- Open Graph / Facebook / WhatsApp --><meta property="og:type" content="website"><meta property="og:url" content="https://casa-daenzo.de/trattoria-admin/"><meta property="og:title" content="Trattoria Management WebApp | Casa da Enzo Goslar"><meta property="og:description" content="Interne Verwaltung der Trattoria da Enzo: Tischreservierungen mit KI-Antwortgenerator, Öffnungszeiten &#38; Schichten, Speisekarten-Manager mit Versionierung und Gutschein-Tracking."><meta property="og:image" content="https://casa-daenzo.de/og-image.jpg"><!-- Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:title" content="Trattoria Management WebApp | Casa da Enzo Goslar"><meta property="twitter:description" content="Interne Verwaltung der Trattoria da Enzo: Tischreservierungen mit KI-Antwortgenerator, Öffnungszeiten &#38; Schichten, Speisekarten-Manager mit Versionierung und Gutschein-Tracking."><meta property="twitter:image" content="https://casa-daenzo.de/og-image.jpg"><!-- Schema.org JSON-LD --><script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"LodgingBusiness","@id":"https://casa-daenzo.de/#lodging","name":"Casa da Enzo Boutique Apartments","url":"https://casa-daenzo.de","telephone":"+4915207483196","email":"booking@casa-daenzo.de","address":{"@type":"PostalAddress","streetAddress":"Bäckerstraße 18","addressLocality":"Goslar","postalCode":"38640","addressCountry":"DE"},"geo":{"@type":"GeoCoordinates","latitude":51.906,"longitude":10.428},"checkinTime":"15:00","checkoutTime":"11:00","numberOfRooms":7},{"@type":"Restaurant","@id":"https://casa-daenzo.de/#restaurant","name":"Trattoria da Enzo","url":"https://casa-daenzo.de/#trattoria","telephone":"+49532123456","servesCuisine":"Italian","address":{"@type":"PostalAddress","streetAddress":"Bäckerstraße 18","addressLocality":"Goslar","postalCode":"38640","addressCountry":"DE"}}]}</script><!-- Google Analytics (GA4) Snippet --><script async src="https://www.googletagmanager.com/gtag/js?id=G-CASADAENZO1"></script><script>(function(){const GA_MEASUREMENT_ID = "G-CASADAENZO1";
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', GA_MEASUREMENT_ID, {
anonymize_ip: true,
cookie_flags: 'SameSite=None;Secure'
});
})();</script><link rel="stylesheet" href="/_astro/_slug_.B_TTBYoh.css"><script type="module" src="/_astro/hoisted.T3ji74Vi.js"></script></head> <body class="bg-[#1A1816] text-[#E6D5C3] antialiased min-h-screen flex flex-col selection:bg-[#D4A373] selection:text-[#1A1816]"> <header class="sticky top-0 z-40 w-full bg-stone-900/95 backdrop-blur-md border-b border-stone-800 transition-all"> <!-- Top Utility Contact Bar --> <div class="bg-stone-950 border-b border-stone-800/80 py-1.5 px-4 text-[11px] sm:text-xs"> <div class="max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-2 text-stone-400"> <!-- Dual Contacts --> <div class="flex flex-wrap items-center gap-4 sm:gap-6"> <!-- Apartments Phone --> <a href="https://wa.me/4915207483196" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 text-emerald-400 hover:text-emerald-300 font-medium transition-colors" title="Apartment Anfragen & Concierge Alja"> <span class="w-2 h-2 rounded-full bg-emerald-500"></span> <span class="text-stone-300">Apartments (WhatsApp):</span> <span class="underline font-semibold">+49 1520 7483196</span> </a> <!-- Trattoria Phone --> <a href="tel:+4915207483196" class="inline-flex items-center gap-1.5 text-[#C85A32] hover:text-[#e2724a] font-medium transition-colors" title="Trattoria Tischreservierung"> <span class="w-2 h-2 rounded-full bg-[#C85A32]"></span> <span class="text-stone-300">Trattoria:</span> <span class="underline font-semibold">+49 1520 7483196</span> </a> </div> <!-- Right Utility Links: Eviivo & Language Switch --> <div class="flex items-center gap-4"> <a href="https://guest.eviivo.com/casa-daenzo" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-amber-400 hover:text-white transition-colors font-medium cursor-pointer" title="Digital Guest Directory"> <span>📖</span> <span class="underline">Eviivo Guest Directory</span> </a> <div class="flex items-center bg-stone-900 border border-stone-800 rounded-full px-2 py-0.5 text-[11px] font-bold"> <span class="px-1.5 py-0.5 rounded-full bg-amber-500 text-stone-950">DE</span> </div> </div> </div> </div> <!-- Main Navigation Bar --> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between"> <!-- Brand Logo --> <a href="/" class="flex items-center gap-3 group"> <div class="w-11 h-11 rounded-2xl bg-gradient-to-br from-[#2D5A43] via-[#D4A373] to-[#C85A32] p-0.5 shadow-lg group-hover:scale-105 transition-transform"> <div class="w-full h-full bg-stone-950 rounded-[14px] flex items-center justify-center font-serif text-xl font-bold text-amber-400">
E
</div> </div> <div class="flex flex-col"> <span class="font-serif text-xl tracking-wide font-bold text-white group-hover:text-amber-400 transition-colors">
Casa da Enzo
</span> <div class="flex items-center gap-1.5 text-[10px] tracking-widest uppercase font-sans -mt-0.5"> <span class="text-emerald-400 font-semibold">Apartments</span> <span class="text-stone-400">•</span> <span class="text-[#C85A32] font-semibold">Trattoria</span> </div> </div> </a> <!-- Desktop Navigation --> <nav class="hidden md:flex items-center gap-6 lg:gap-8 text-sm font-medium"> <a href="/apartments" class="text-stone-200 hover:text-emerald-400 transition-colors flex items-center gap-1.5"> <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> <span>Apartments & Suiten</span> </a> <a href="/trattoria" class="text-stone-200 hover:text-[#C85A32] transition-colors flex items-center gap-1.5"> <span class="w-1.5 h-1.5 rounded-full bg-[#C85A32]"></span> <span>Trattoria da Enzo</span> </a> <a href="/blog" class="text-stone-200 hover:text-amber-400 transition-colors">
Blog & Magazin
</a> <a href="/#geschichte" class="text-stone-200 hover:text-amber-400 transition-colors">
Unsere Geschichte
</a> <a href="/#faq" class="text-stone-200 hover:text-amber-400 transition-colors">
FAQ
</a> </nav> <!-- CTAs --> <div class="flex items-center gap-3"> <a href="/apartments#booking" class="hidden sm:inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#C85A32] text-white font-medium text-xs lg:text-sm hover:bg-[#b04d2a] shadow-md transition-all hover:scale-105"> <span>Direkt buchen (Bestpreis)</span> </a> <!-- Mobile Menu Button --> <button id="mobile-menu-btn" class="md:hidden p-2 text-stone-200 hover:text-amber-400 rounded-xl bg-stone-800 border border-stone-700" aria-label="Menü öffnen"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </div> <!-- Mobile Navigation Dropdown --> <div id="mobile-menu" class="hidden md:hidden bg-stone-950 border-b border-stone-800 px-4 py-6 space-y-4"> <a href="/apartments" class="block py-2 text-stone-200 font-medium hover:text-emerald-400 flex items-center gap-2"> <span class="w-2 h-2 rounded-full bg-emerald-500"></span> <span>Apartments & Suiten</span> </a> <a href="/trattoria" class="block py-2 text-stone-200 font-medium hover:text-[#C85A32] flex items-center gap-2"> <span class="w-2 h-2 rounded-full bg-[#C85A32]"></span> <span>Trattoria da Enzo</span> </a> <a href="/blog" class="block py-2 text-stone-200 font-medium hover:text-amber-400">
Blog & Magazin
</a> <a href="/#geschichte" class="block py-2 text-stone-200 font-medium hover:text-amber-400">
Unsere Geschichte
</a> <a href="/#faq" class="block py-2 text-stone-200 font-medium hover:text-amber-400">
FAQ
</a> <div class="pt-2 border-t border-stone-800 space-y-2"> <a href="https://wa.me/4915207483196" target="_blank" class="block py-1.5 text-xs text-emerald-400 font-semibold">
💬 Apartments WhatsApp: +49 1520 7483196
</a> <a href="https://guest.eviivo.com/casa-daenzo" target="_blank" class="block py-1.5 text-xs text-amber-400 font-semibold">
📖 Eviivo Guest Directory
</a> </div> <a href="/apartments#booking" class="block text-center py-3 rounded-2xl bg-[#C85A32] text-white font-bold text-sm">
Jetzt Direkt buchen
</a> </div> </header> <main class="flex-1"> <div class="bg-stone-900 text-white border-b border-stone-800 sticky top-20 z-40"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex flex-col md:flex-row items-center justify-between gap-4"> <div class="flex items-center gap-3"> <span class="p-2 rounded-xl bg-[#C85A32] text-white text-lg font-bold">🇮🇹</span> <div> <h1 class="font-serif text-xl font-bold">Trattoria da Enzo • Management App</h1> <p class="text-xs text-stone-400">Angemeldet als: <span class="text-amber-400 font-medium">Alessandra Campisi (ID: ENZO-STAFF-01)</span></p> </div> </div> <!-- Quick Status Indicators --> <div class="flex items-center gap-4 text-xs"> <div class="flex items-center gap-2 bg-stone-800 px-3 py-1.5 rounded-lg border border-stone-700"> <span id="vacation-status-dot" class="w-2.5 h-2.5 rounded-full bg-emerald-400"></span> <span id="vacation-status-text" class="text-stone-300">Website Status: <strong>Normalbetrieb</strong></span> </div> <div class="hidden sm:block text-stone-400">
Systemzeit: <span id="clock" class="font-mono text-stone-200">16.09.2026, 18:45</span> </div> </div> </div> </div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <!-- App Navigation Tabs --> <div class="flex flex-wrap items-center gap-2 border-b border-stone-200 pb-4 mb-8"> <button data-tab="reservations" class="admin-tab active px-5 py-2.5 rounded-xl text-sm font-bold bg-[#C85A32] text-white shadow-sm transition-all flex items-center gap-2"> <span>🍽️ Tisch-Reservierungen</span> <span id="pending-badge" class="px-2 py-0.5 rounded-full bg-amber-400 text-stone-950 text-xs font-black">2 Neu</span> </button> <button data-tab="hours" class="admin-tab px-5 py-2.5 rounded-xl text-sm font-semibold bg-white text-stone-700 border border-stone-300 hover:bg-stone-50 transition-all flex items-center gap-2"> <span>🕒 Öffnungszeiten & Schichten</span> </button> <button data-tab="menu" class="admin-tab px-5 py-2.5 rounded-xl text-sm font-semibold bg-white text-stone-700 border border-stone-300 hover:bg-stone-50 transition-all flex items-center gap-2"> <span>📜 Speisekarte & KI</span> </button> <button data-tab="vouchers" class="admin-tab px-5 py-2.5 rounded-xl text-sm font-semibold bg-white text-stone-700 border border-stone-300 hover:bg-stone-50 transition-all flex items-center gap-2"> <span>🎟️ Gutschein-Verwaltung</span> </button> <button data-tab="history" class="admin-tab px-5 py-2.5 rounded-xl text-sm font-semibold bg-white text-stone-700 border border-stone-300 hover:bg-stone-50 transition-all flex items-center gap-2"> <span>📜 Aktivitäts-Log</span> </button> </div> <!-- TAB 1: TISCH-RESERVIERUNGEN --> <div id="tab-reservations" class="tab-content space-y-8"> <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> <div> <h2 class="font-serif text-2xl font-bold text-stone-900">Anstehende Tischreservierungen</h2> <p class="text-stone-600 text-sm">Prüfen und bestätigen Sie Anfragen mit KI-unterstützter persönlicher Gast-Ansprache.</p> </div> </div> <!-- Pending Reservations Cards/Table --> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6" id="reservations-list"> <!-- Reservation Item 1 --> <div class="bg-white p-6 rounded-3xl border border-stone-200 shadow-sm space-y-4 hover:border-amber-400 transition-all" id="res-card-101"> <div class="flex items-start justify-between"> <div> <span class="px-2.5 py-1 rounded-full bg-amber-100 text-amber-800 text-xs font-bold uppercase tracking-wider">Ausstehend</span> <h3 class="font-serif text-xl font-bold text-stone-900 mt-1">Marco & Julia Schmidt</h3> <p class="text-xs text-stone-500">Angefragt am 16.09.2026 um 14:20 Uhr</p> </div> <div class="text-right"> <span class="text-2xl font-bold text-[#C85A32]">4 Personen</span> <p class="text-xs text-stone-600 font-medium">18.09.2026 • 19:30 Uhr</p> </div> </div> <div class="p-3 bg-stone-50 rounded-2xl border border-stone-200 text-xs text-stone-700 space-y-1"> <p><strong>Bereich:</strong> Gastraum (Fensterplatz gewünscht)</p> <p><strong>Besonderer Wunsch:</strong> "Feiern unseren Jahrestag! Ein schöner Tisch wäre wunderbar."</p> <p><strong>Kontakt:</strong> +49 171 9876543 • julia.schmidt@example.de</p> </div> <div class="flex flex-wrap items-center gap-3 pt-2"> <button onclick="openAiDraftModal('101', 'Marco & Julia Schmidt', 'Confirm', '18.09.2026 um 19:30 Uhr', '4 Personen', 'Fensterplatz, Jahrestag')" class="px-4 py-2 rounded-xl bg-emerald-600 text-white font-bold text-xs hover:bg-emerald-700 transition-all flex items-center gap-1.5"> <span>✓ Bestätigen + KI-Antwort</span> </button> <button onclick="openAiDraftModal('101', 'Marco & Julia Schmidt', 'Decline', '18.09.2026 um 19:30 Uhr', '4 Personen', 'Ausgebucht')" class="px-4 py-2 rounded-xl bg-rose-600 text-white font-bold text-xs hover:bg-rose-700 transition-all flex items-center gap-1.5"> <span>✕ Ablehnen + KI-Antwort</span> </button> </div> </div> <!-- Reservation Item 2 --> <div class="bg-white p-6 rounded-3xl border border-stone-200 shadow-sm space-y-4 hover:border-amber-400 transition-all" id="res-card-102"> <div class="flex items-start justify-between"> <div> <span class="px-2.5 py-1 rounded-full bg-amber-100 text-amber-800 text-xs font-bold uppercase tracking-wider">Ausstehend</span> <h3 class="font-serif text-xl font-bold text-stone-900 mt-1">Dr. Thomas Weber</h3> <p class="text-xs text-stone-500">Angefragt am 16.09.2026 um 16:05 Uhr</p> </div> <div class="text-right"> <span class="text-2xl font-bold text-[#C85A32]">2 Personen</span> <p class="text-xs text-stone-600 font-medium">19.09.2026 • 20:00 Uhr</p> </div> </div> <div class="p-3 bg-stone-50 rounded-2xl border border-stone-200 text-xs text-stone-700 space-y-1"> <p><strong>Bereich:</strong> Terrasse / Außenbereich</p> <p><strong>Besonderer Wunsch:</strong> "Glutenfreie Pasta & ruhige Ecke erbeten."</p> <p><strong>Kontakt:</strong> +49 160 1234567 • t.weber@med-goslar.de</p> </div> <div class="flex flex-wrap items-center gap-3 pt-2"> <button onclick="openAiDraftModal('102', 'Dr. Thomas Weber', 'Confirm', '19.09.2026 um 20:00 Uhr', '2 Personen', 'Glutenfrei, ruhige Ecke')" class="px-4 py-2 rounded-xl bg-emerald-600 text-white font-bold text-xs hover:bg-emerald-700 transition-all flex items-center gap-1.5"> <span>✓ Bestätigen + KI-Antwort</span> </button> <button onclick="openAiDraftModal('102', 'Dr. Thomas Weber', 'Decline', '19.09.2026 um 20:00 Uhr', '2 Personen', 'Ausgebucht')" class="px-4 py-2 rounded-xl bg-rose-600 text-white font-bold text-xs hover:bg-rose-700 transition-all flex items-center gap-1.5"> <span>✕ Ablehnen + KI-Antwort</span> </button> </div> </div> </div> <!-- Processed Reservations History --> <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm space-y-4"> <h3 class="font-serif text-xl font-bold text-stone-900">Zuletzt bearbeitete Reservierungen</h3> <div class="overflow-x-auto"> <table class="w-full text-left text-xs text-stone-700"> <thead class="bg-stone-100 text-stone-900 uppercase font-bold text-[10px] tracking-wider"> <tr> <th class="p-3 rounded-l-xl">ID</th> <th class="p-3">Gast</th> <th class="p-3">Datum & Zeit</th> <th class="p-3">Gäste</th> <th class="p-3">Entscheidung</th> <th class="p-3">Bearbeiter & Zeitstempel</th> </tr> </thead> <tbody id="processed-res-tbody" class="divide-y divide-stone-100"> <tr> <td class="p-3 font-mono font-bold">#RES-098</td> <td class="p-3 font-semibold">Familie Bauer</td> <td class="p-3">17.09.2026 • 18:30 Uhr</td> <td class="p-3">5 Personen</td> <td class="p-3"><span class="px-2 py-0.5 rounded bg-emerald-100 text-emerald-800 font-bold">Bestätigt</span></td> <td class="p-3 text-stone-500">ENZO-STAFF-01 (Alessandra) • 16.09.2026, 17:10 Uhr</td> </tr> <tr> <td class="p-3 font-mono font-bold">#RES-097</td> <td class="p-3 font-semibold">Michael Becker</td> <td class="p-3">17.09.2026 • 19:00 Uhr</td> <td class="p-3">2 Personen</td> <td class="p-3"><span class="px-2 py-0.5 rounded bg-emerald-100 text-emerald-800 font-bold">Bestätigt</span></td> <td class="p-3 text-stone-500">ENZO-STAFF-02 (Sergio) • 16.09.2026, 15:45 Uhr</td> </tr> </tbody> </table> </div> </div> </div> <!-- TAB 2: ÖFFNUNGSZEITEN & SCHICHTEN --> <div id="tab-hours" class="tab-content hidden space-y-8"> <div> <h2 class="font-serif text-2xl font-bold text-stone-900">Öffnungszeiten & Schichten-Manager</h2> <p class="text-stone-600 text-sm">Verwalten Sie Regulärschichten (Mittag/Abend), Ausnahmetage und den Betriebsferien-Banner für die Website.</p> </div> <!-- Betriebsferien Banner Controller --> <div class="bg-amber-500/10 border border-amber-300 p-6 rounded-3xl space-y-4"> <div class="flex items-center justify-between"> <div class="flex items-center gap-3"> <span class="text-2xl">🏖️</span> <div> <h3 class="font-serif text-lg font-bold text-stone-900">Betriebsferien-Hinweis auf der Website</h3> <p class="text-xs text-stone-600">Aktiviert einen gut sichtbaren Hinweisbanner ganz oben auf der Website.</p> </div> </div> <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" id="vacation-toggle" class="sr-only peer"> <div class="w-14 h-7 bg-stone-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-stone-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-[#C85A32]"></div> </label> </div> <div class="space-y-2"> <label class="block text-xs font-bold text-stone-800 uppercase">Banner Text</label> <input type="text" id="vacation-text-input" value="Wir machen Betriebsferien vom 10.11. bis 24.11.2026. Ab 25.11. begrüßen wir Sie wieder herzlich!" class="w-full px-4 py-2.5 rounded-xl border border-stone-300 text-xs font-medium text-stone-900 focus:ring-2 focus:ring-[#C85A32] focus:outline-none"> </div> <button onclick="saveVacationSettings()" class="px-5 py-2 rounded-xl bg-stone-900 text-white font-bold text-xs hover:bg-stone-800 transition-all">
Banner-Einstellungen speichern
</button> </div> <!-- Weekly Shifts Grid --> <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm space-y-6"> <h3 class="font-serif text-xl font-bold text-stone-900">Standard-Wochenplan (Mittag & Abend)</h3> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-7 gap-4 text-xs" id="shifts-grid"> <!-- Mon --> <div class="p-4 rounded-2xl bg-stone-100 border border-stone-200 text-center space-y-2"> <span class="font-bold text-stone-900 uppercase">Montag</span> <div class="p-2 bg-stone-200 rounded-lg text-stone-600 font-bold">Ruhetag</div> </div> <!-- Tue --> <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-2"> <span class="font-bold text-stone-900 uppercase">Dienstag</span> <div class="p-1.5 bg-white rounded border border-emerald-200">Mittag: 12:00-14:30</div> <div class="p-1.5 bg-white rounded border border-emerald-200">Abend: 17:30-22:30</div> </div> <!-- Wed --> <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-2"> <span class="font-bold text-stone-900 uppercase">Mittwoch</span> <div class="p-1.5 bg-white rounded border border-emerald-200">Mittag: 12:00-14:30</div> <div class="p-1.5 bg-white rounded border border-emerald-200">Abend: 17:30-22:30</div> </div> <!-- Thu --> <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-2"> <span class="font-bold text-stone-900 uppercase">Donnerstag</span> <div class="p-1.5 bg-white rounded border border-emerald-200">Mittag: 12:00-14:30</div> <div class="p-1.5 bg-white rounded border border-emerald-200">Abend: 17:30-22:30</div> </div> <!-- Fri --> <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-2"> <span class="font-bold text-stone-900 uppercase">Freitag</span> <div class="p-1.5 bg-white rounded border border-emerald-200">Mittag: 12:00-14:30</div> <div class="p-1.5 bg-white rounded border border-emerald-200">Abend: 17:30-22:30</div> </div> <!-- Sat --> <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-2"> <span class="font-bold text-stone-900 uppercase">Samstag</span> <div class="p-1.5 bg-white rounded border border-emerald-200">Mittag: 12:00-15:00</div> <div class="p-1.5 bg-white rounded border border-emerald-200">Abend: 17:30-23:00</div> </div> <!-- Sun --> <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-2"> <span class="font-bold text-stone-900 uppercase">Sonntag</span> <div class="p-1.5 bg-white rounded border border-emerald-200">Mittag: 12:00-15:00</div> <div class="p-1.5 bg-white rounded border border-emerald-200">Abend: 17:30-22:00</div> </div> </div> </div> <!-- Special Overrides Table --> <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm space-y-4"> <div class="flex items-center justify-between"> <h3 class="font-serif text-xl font-bold text-stone-900">Individuelle Tages-Sonderregelungen</h3> <button onclick="addDayOverride()" class="px-4 py-2 rounded-xl bg-[#C85A32] text-white font-bold text-xs hover:bg-[#b04d2a] transition-all">
+ Sonder-Schließung / Event eintragen
</button> </div> <div class="overflow-x-auto"> <table class="w-full text-left text-xs text-stone-700"> <thead class="bg-stone-100 text-stone-900 uppercase font-bold text-[10px]"> <tr> <th class="p-3 rounded-l-xl">Datum</th> <th class="p-3">Anlass</th> <th class="p-3">Status / Öffnungszeit</th> <th class="p-3 rounded-r-xl">Aktion</th> </tr> </thead> <tbody id="overrides-tbody" class="divide-y divide-stone-100"> <tr> <td class="p-3 font-bold">24.12.2026 (Heiligabend)</td> <td class="p-3">Weihnachten</td> <td class="p-3"><span class="px-2 py-0.5 rounded bg-rose-100 text-rose-800 font-bold">Geschlossen</span></td> <td class="p-3"><button onclick="this.closest('tr').remove()" class="text-rose-600 hover:underline">Entfernen</button></td> </tr> <tr> <td class="p-3 font-bold">31.12.2026 (Silvester)</td> <td class="p-3">Silvester-Gala (Nur mit Reservierung)</td> <td class="p-3"><span class="px-2 py-0.5 rounded bg-amber-100 text-amber-800 font-bold">Abend: 18:00 - 01:00 Uhr</span></td> <td class="p-3"><button onclick="this.closest('tr').remove()" class="text-rose-600 hover:underline">Entfernen</button></td> </tr> </tbody> </table> </div> </div> </div> <!-- TAB 3: SPEISEKARTE & KI MANAGER --> <div id="tab-menu" class="tab-content hidden space-y-8"> <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> <div> <h2 class="font-serif text-2xl font-bold text-stone-900">Speisekarte & Gerichte-Manager</h2> <p class="text-stone-600 text-sm">Verwalten Sie Speisen, Versionen & automatische Übersetzungen.</p> </div> <div class="flex items-center gap-3"> <button onclick="translateMenuToEn()" class="px-4 py-2.5 rounded-xl bg-indigo-600 text-white font-bold text-xs hover:bg-indigo-700 transition-all flex items-center gap-1.5 shadow-sm"> <span>🇬🇧 Auto-Übersetzung (EN)</span> </button> <button onclick="publishMenu()" class="px-5 py-2.5 rounded-xl bg-emerald-600 text-white font-bold text-xs hover:bg-emerald-700 transition-all flex items-center gap-1.5 shadow-md"> <span>🚀 Speisekarte Veröffentlichen</span> </button> </div> </div> <!-- Menu Version Control Bar --> <div class="bg-stone-900 text-white p-6 rounded-3xl space-y-3"> <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> <div> <span class="text-xs uppercase tracking-widest text-amber-400 font-bold">Revisions-Verwaltung</span> <h3 class="font-serif text-lg font-bold">Aktuelle Version: <span id="current-menu-version" class="text-amber-400">v2.4 (Herbstkarte 2026)</span></h3> </div> <div class="flex items-center gap-2"> <select id="menu-version-select" class="bg-stone-800 text-stone-200 border border-stone-700 text-xs rounded-xl px-3 py-2 font-medium"> <option value="v2.4">v2.4 - Herbstkarte 2026 (Aktiv)</option> <option value="v2.3">v2.3 - Sommerkarte 2026</option> <option value="v2.2">v2.2 - Frühjahrskarte 2026</option> </select> <button onclick="restoreMenuVersion()" class="px-4 py-2 rounded-xl bg-amber-500 text-stone-950 font-bold text-xs hover:bg-amber-400 transition-all">
Version wiederherstellen
</button> </div> </div> </div> <!-- Menu Category Editor --> <div class="space-y-6" id="menu-categories-container"> <!-- Antipasti --> <div class="bg-white p-6 rounded-3xl border border-stone-200 shadow-sm space-y-4"> <div class="flex items-center justify-between border-b border-stone-100 pb-3"> <h3 class="font-serif text-xl font-bold text-stone-900">Antipasti (Vorspeisen)</h3> <button onclick="addDish('antipasti')" class="text-xs text-[#C85A32] font-bold hover:underline">+ Gericht hinzufügen</button> </div> <div class="space-y-3" id="category-antipasti"> <div class="p-4 rounded-2xl bg-stone-50 border border-stone-200 flex flex-col md:flex-row items-start md:items-center justify-between gap-4"> <div class="space-y-1 flex-1"> <div class="flex items-center gap-2"> <input type="text" value="Carpaccio di Manzo Con Tartufo" class="dish-title font-serif font-bold text-stone-900 text-base bg-transparent border-b border-stone-300 focus:outline-none focus:border-[#C85A32] w-full max-w-md"> <span class="text-xs font-mono font-bold text-stone-600">18.50 €</span> </div> <input type="text" value="Hauchdünnes Rinderfilet mit frischem Trüffel, Ruccola & Parmigiano Reggiano" class="dish-desc text-xs text-stone-600 bg-transparent border-b border-stone-200 focus:outline-none focus:border-[#C85A32] w-full"> <p class="dish-en text-[11px] text-indigo-600 font-medium italic mt-1">EN: Wafer-thin beef tenderloin with fresh truffle, arugula & Parmigiano Reggiano</p> </div> <div class="flex items-center gap-2"> <button onclick="aiPolishDish(this)" class="px-3 py-1 rounded-lg bg-amber-100 text-amber-900 text-[11px] font-bold hover:bg-amber-200">✨ KI-Text schärfen</button> <button onclick="this.closest('.p-4').remove()" class="text-rose-600 text-xs hover:underline">Löschen</button> </div> </div> <div class="p-4 rounded-2xl bg-stone-50 border border-stone-200 flex flex-col md:flex-row items-start md:items-center justify-between gap-4"> <div class="space-y-1 flex-1"> <div class="flex items-center gap-2"> <input type="text" value="Bruschetta Classica della Casa" class="dish-title font-serif font-bold text-stone-900 text-base bg-transparent border-b border-stone-300 focus:outline-none focus:border-[#C85A32] w-full max-w-md"> <span class="text-xs font-mono font-bold text-stone-600">9.80 €</span> </div> <input type="text" value="Röstbrot mit fruchtigen San-Marzano-Tomaten, Knoblauch & frischem Basilikum" class="dish-desc text-xs text-stone-600 bg-transparent border-b border-stone-200 focus:outline-none focus:border-[#C85A32] w-full"> <p class="dish-en text-[11px] text-indigo-600 font-medium italic mt-1">EN: Toasted bread with fruity San Marzano tomatoes, garlic & fresh basil</p> </div> <div class="flex items-center gap-2"> <button onclick="aiPolishDish(this)" class="px-3 py-1 rounded-lg bg-amber-100 text-amber-900 text-[11px] font-bold hover:bg-amber-200">✨ KI-Text schärfen</button> <button onclick="this.closest('.p-4').remove()" class="text-rose-600 text-xs hover:underline">Löschen</button> </div> </div> </div> </div> <!-- Primi Piatti --> <div class="bg-white p-6 rounded-3xl border border-stone-200 shadow-sm space-y-4"> <div class="flex items-center justify-between border-b border-stone-100 pb-3"> <h3 class="font-serif text-xl font-bold text-stone-900">Primi Piatti (Hausgemachte Pasta & Risotto)</h3> <button onclick="addDish('primi')" class="text-xs text-[#C85A32] font-bold hover:underline">+ Gericht hinzufügen</button> </div> <div class="space-y-3" id="category-primi"> <div class="p-4 rounded-2xl bg-stone-50 border border-stone-200 flex flex-col md:flex-row items-start md:items-center justify-between gap-4"> <div class="space-y-1 flex-1"> <div class="flex items-center gap-2"> <input type="text" value="Tagliolini Alessandras Secret Recipe" class="dish-title font-serif font-bold text-stone-900 text-base bg-transparent border-b border-stone-300 focus:outline-none focus:border-[#C85A32] w-full max-w-md"> <span class="text-xs font-mono font-bold text-stone-600">21.50 €</span> </div> <input type="text" value="Frische Bandnudeln im Parmesanlaib geschwenkt mit Salsiccia & Waldpilzen" class="dish-desc text-xs text-stone-600 bg-transparent border-b border-stone-200 focus:outline-none focus:border-[#C85A32] w-full"> <p class="dish-en text-[11px] text-indigo-600 font-medium italic mt-1">EN: Fresh ribbon pasta tossed in a parmesan wheel with Salsiccia & wild mushrooms</p> </div> <div class="flex items-center gap-2"> <button onclick="aiPolishDish(this)" class="px-3 py-1 rounded-lg bg-amber-100 text-amber-900 text-[11px] font-bold hover:bg-amber-200">✨ KI-Text schärfen</button> <button onclick="this.closest('.p-4').remove()" class="text-rose-600 text-xs hover:underline">Löschen</button> </div> </div> </div> </div> </div> </div> <!-- TAB 4: GUTSCHEIN VERWALTUNG --> <div id="tab-vouchers" class="tab-content hidden space-y-8"> <div> <h2 class="font-serif text-2xl font-bold text-stone-900">Gutschein-Verwaltung & Versand</h2> <p class="text-stone-600 text-sm">Verfolgen Sie Gutschein-Bestellungen (Abholung vs. Postalisch) und lösen Sie Versandbestätigungen aus.</p> </div> <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm space-y-6"> <div class="flex items-center justify-between"> <h3 class="font-serif text-xl font-bold text-stone-900">Bestellte Gutscheine</h3> <span class="text-xs text-stone-500">Insgesamt: 3 offene Aufträge</span> </div> <div class="overflow-x-auto"> <table class="w-full text-left text-xs text-stone-700"> <thead class="bg-stone-100 text-stone-900 uppercase font-bold text-[10px]"> <tr> <th class="p-3 rounded-l-xl">Code</th> <th class="p-3">Käufer</th> <th class="p-3">Wert</th> <th class="p-3">Art</th> <th class="p-3">Sendungsnummer (DHL)</th> <th class="p-3">Status</th> <th class="p-3 rounded-r-xl">Aktion / Email Trigger</th> </tr> </thead> <tbody id="vouchers-tbody" class="divide-y divide-stone-100"> <!-- Voucher 1 --> <tr> <td class="p-3 font-mono font-bold text-[#C85A32]">#GUT-2026-881</td> <td class="p-3 font-bold">Stefan Hoffmann<br><span class="text-[10px] text-stone-500">stefan.h@gmail.com</span></td> <td class="p-3 font-bold text-stone-900">100,00 €</td> <td class="p-3"><span class="px-2 py-0.5 rounded bg-indigo-100 text-indigo-900 font-bold">Postalisch</span></td> <td class="p-3"> <input type="text" value="358910482019" id="track-881" class="px-2 py-1 border border-stone-300 rounded font-mono text-[11px] w-36"> </td> <td class="p-3"><span id="vstatus-881" class="px-2 py-0.5 rounded bg-amber-100 text-amber-800 font-bold">Offen</span></td> <td class="p-3"> <button onclick="triggerVoucherEmail('881', 'Stefan Hoffmann', 'Postalisch')" class="px-3 py-1.5 rounded-lg bg-stone-900 text-white font-bold text-[11px] hover:bg-stone-800 transition-all">
📧 Versandbestätigung senden
</button> </td> </tr> <!-- Voucher 2 --> <tr> <td class="p-3 font-mono font-bold text-[#C85A32]">#GUT-2026-882</td> <td class="p-3 font-bold">Laura Meyer<br><span class="text-[10px] text-stone-500">l.meyer@goslar-mail.de</span></td> <td class="p-3 font-bold text-stone-900">50,00 €</td> <td class="p-3"><span class="px-2 py-0.5 rounded bg-emerald-100 text-emerald-900 font-bold">Abholung vor Ort</span></td> <td class="p-3 text-stone-400 italic">Entfällt (Abholung)</td> <td class="p-3"><span id="vstatus-882" class="px-2 py-0.5 rounded bg-amber-100 text-amber-800 font-bold">Bereitstellen</span></td> <td class="p-3"> <button onclick="triggerVoucherEmail('882', 'Laura Meyer', 'Abholung')" class="px-3 py-1.5 rounded-lg bg-emerald-600 text-white font-bold text-[11px] hover:bg-emerald-700 transition-all">
🔔 "Abholbereit" Mail senden
</button> </td> </tr> </tbody> </table> </div> </div> </div> <!-- TAB 5: AKTIVITÄTS & REVISONSLOG --> <div id="tab-history" class="tab-content hidden space-y-8"> <div> <h2 class="font-serif text-2xl font-bold text-stone-900">Aktivitäts- & Revisions-Logbuch</h2> <p class="text-stone-600 text-sm">Lückenlose Protokollierung aller Änderungen mit Reviewer-ID und Zeitstempel.</p> </div> <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm space-y-4"> <div class="overflow-x-auto"> <table class="w-full text-left text-xs text-stone-700"> <thead class="bg-stone-100 text-stone-900 uppercase font-bold text-[10px]"> <tr> <th class="p-3 rounded-l-xl">Zeitstempel</th> <th class="p-3">Modul</th> <th class="p-3">Aktion</th> <th class="p-3">Reviewer ID & Name</th> <th class="p-3 rounded-r-xl">Details</th> </tr> </thead> <tbody id="history-log-tbody" class="divide-y divide-stone-100 font-mono text-[11px]"> <tr> <td class="p-3 text-stone-500">16.09.2026, 18:40:12</td> <td class="p-3"><span class="px-2 py-0.5 bg-amber-100 text-amber-900 font-bold rounded">Menu</span></td> <td class="p-3 font-bold text-stone-900">Speisekarte v2.4 veröffentlicht</td> <td class="p-3">ENZO-STAFF-01 (Alessandra Campisi)</td> <td class="p-3 text-stone-600">Herbstkarte 2026 freigegeben für Website</td> </tr> <tr> <td class="p-3 text-stone-500">16.09.2026, 17:10:05</td> <td class="p-3"><span class="px-2 py-0.5 bg-emerald-100 text-emerald-900 font-bold rounded">Reservierung</span></td> <td class="p-3 font-bold text-stone-900">Tisch #RES-098 bestätigt</td> <td class="p-3">ENZO-STAFF-01 (Alessandra Campisi)</td> <td class="p-3 text-stone-600">Bestätigung & KI-Mail an Familie Bauer gesendet</td> </tr> </tbody> </table> </div> </div> </div> </div> <div id="ai-modal" class="fixed inset-0 bg-stone-950/70 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4"> <div class="bg-white max-w-2xl w-full rounded-3xl p-8 shadow-2xl border border-stone-200 space-y-6 animate-fadeIn"> <div class="flex items-center justify-between border-b border-stone-100 pb-4"> <div> <span class="text-xs uppercase font-bold text-[#C85A32] tracking-wider">KI-Kommunikationsassistent</span> <h3 id="modal-title" class="font-serif text-2xl font-bold text-stone-900">Personalisierte Gast-Antwort</h3> </div> <button onclick="closeAiModal()" class="text-stone-400 hover:text-stone-900 text-2xl font-bold">&times;</button> </div> <div class="space-y-4 text-xs"> <div class="p-3 rounded-2xl bg-stone-50 border border-stone-200 grid grid-cols-2 gap-2 text-stone-700"> <p><strong>Gast:</strong> <span id="modal-guest-name">---</span></p> <p><strong>Aktion:</strong> <span id="modal-action-type" class="font-bold">---</span></p> <p><strong>Termin & Pax:</strong> <span id="modal-details">---</span></p> <p><strong>Tonalität:</strong> Herzlich Sizilianisch (Enzo Guidelines)</p> </div> <div class="space-y-1.5"> <div class="flex items-center justify-between"> <label class="font-bold text-stone-900 uppercase text-[10px]">Generierter Antwort-Entwurf (Edtierbar)</label> <button onclick="regenerateAiDraft()" class="text-[#C85A32] font-bold hover:underline flex items-center gap-1"> <span>✨ Entwurf neu generieren</span> </button> </div> <textarea id="ai-draft-textarea" rows="7" class="w-full p-4 rounded-2xl border border-stone-300 font-sans text-xs text-stone-800 leading-relaxed focus:ring-2 focus:ring-[#C85A32] focus:outline-none"></textarea> </div> </div> <div class="flex justify-end gap-3 border-t border-stone-100 pt-4"> <button onclick="closeAiModal()" class="px-5 py-2.5 rounded-xl bg-stone-100 text-stone-700 font-bold text-xs hover:bg-stone-200">
Abbrechen
</button> <button onclick="confirmAndSendDraft()" class="px-6 py-2.5 rounded-xl bg-[#C85A32] text-white font-bold text-xs hover:bg-[#b04d2a] shadow-md">
✓ Bestätigen & Antwort senden
</button> </div> </div> </div> </main> <footer class="bg-stone-950 text-stone-400 pt-16 pb-12 border-t border-stone-800 font-sans"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12"> <!-- Col 1: Brand & Heritage --> <div class="space-y-4"> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[#2D5A43] via-[#D4A373] to-[#C85A32] p-0.5"> <div class="w-full h-full bg-stone-950 rounded-[10px] flex items-center justify-center font-serif text-lg font-bold text-amber-400">
E
</div> </div> <div> <h3 class="font-serif text-xl font-bold text-stone-100">Casa da Enzo</h3> <p class="text-[10px] uppercase tracking-widest text-amber-400">Sizilien trifft Goslar • Seit 1980</p> </div> </div> <p class="text-xs leading-relaxed text-stone-400">
7 individuelle Boutique-Apartments über unserer traditionsreichen Trattoria im UNESCO-Weltkulturerbe Goslar. 100% digitaler Check-in trifft auf authentische italienische Gastfreundschaft.
</p> <p class="text-xs text-amber-400 font-medium">
📍 Bäckerstraße 18 • 38640 Goslar, Harz
</p> </div> <!-- Col 2: Navigation --> <div class="space-y-3"> <h4 class="font-serif text-base font-semibold text-stone-100 border-b border-stone-800 pb-2">Navigation</h4> <ul class="space-y-2 text-xs"> <li> <a href="/apartments" class="hover:text-emerald-400 transition-colors flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> <span>Apartments & Suiten (7 Einheiten)</span> </a> </li> <li> <a href="/trattoria" class="hover:text-[#C85A32] transition-colors flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-[#C85A32]"></span> <span>Trattoria da Enzo (Speisekarte & Tisch)</span> </a> </li> <li> <a href="/trattoria#gutscheine" class="hover:text-amber-400 transition-colors flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span> <span>Gutschein-Shop</span> </a> </li> <li> <a href="/blog" class="hover:text-amber-400 transition-colors">
Blog & Magazin
</a> </li> <li> <a href="/#geschichte" class="hover:text-amber-400 transition-colors">
Unsere Geschichte
</a> </li> </ul> </div> <!-- Col 3: Contacts --> <div class="space-y-3"> <h4 class="font-serif text-base font-semibold text-stone-100 border-b border-stone-800 pb-2">
Kontakt & Service
</h4> <div class="space-y-3 text-xs"> <!-- Apartments Contact --> <div class="p-3 rounded-xl bg-stone-900 border border-emerald-500/30 space-y-1"> <div class="text-[10px] uppercase font-bold text-emerald-400 flex items-center gap-1.5"> <span class="w-2 h-2 rounded-full bg-emerald-500"></span> <span>Apartments & Buchungen</span> </div> <a href="https://wa.me/4915207483196" target="_blank" class="block text-emerald-400 hover:underline font-bold">
WhatsApp: +49 1520 7483196
</a> <p class="text-[10px] text-stone-400">E-Mail: booking@casa-daenzo.de</p> </div> <!-- Trattoria Contact --> <div class="p-3 rounded-xl bg-stone-900 border border-[#C85A32]/30 space-y-1"> <div class="text-[10px] uppercase font-bold text-[#C85A32] flex items-center gap-1.5"> <span class="w-2 h-2 rounded-full bg-[#C85A32]"></span> <span>Trattoria Reservierung</span> </div> <a href="tel:+4915207483196" class="block text-[#C85A32] hover:underline font-bold">
Telefon: +49 1520 7483196
</a> <p class="text-[10px] text-stone-400">Öffnungszeiten: Di–So 17:00–22:30 Uhr</p> </div> </div> </div> <!-- Col 4: Direct Booking Advantages --> <div class="p-6 rounded-3xl bg-stone-900 border border-stone-800 space-y-4 shadow-xl"> <h4 class="font-serif text-base font-semibold text-amber-400">
Direktbucher-Vorteile
</h4> <ul class="space-y-2.5 text-xs text-stone-300"> <li class="flex items-start gap-2"> <span class="text-amber-400 font-bold">✓</span> <span>Bestpreis-Garantie (15% günstiger als Booking.com)</span> </li> <li class="flex items-start gap-2"> <span class="text-amber-400 font-bold">✓</span> <span>Bevorzugte Tischreservierung in der Trattoria</span> </li> <li class="flex items-start gap-2"> <span class="text-amber-400 font-bold">✓</span> <span>Kontaktloser Nuki Smart-Lock Check-in</span> </li> </ul> <a href="/apartments#booking" class="block text-center py-2.5 rounded-xl bg-[#C85A32] text-white font-bold text-xs hover:bg-[#b04d2a] transition-colors">
Verfügbarkeit prüfen
</a> </div> </div> <!-- Bottom line --> <div class="pt-8 border-t border-stone-900 flex flex-col sm:flex-row items-center justify-between text-xs text-stone-500 gap-4"> <p>© 2026 Casa da Enzo Goslar. Alle Rechte vorbehalten.</p> <div class="flex items-center gap-6"> <a href="https://guest.eviivo.com/casa-daenzo" target="_blank" class="hover:text-stone-300 transition-colors">Eviivo Guest Directory</a> </div> </div> </div> </footer> <div id="enzino-widget" class="fixed bottom-6 right-6 z-50 font-sans" data-lang="de"> <!-- Floating Launcher Button --> <button id="enzino-launcher" class="relative group flex items-center gap-3 bg-[#24211D] border border-[#D4A373]/30 hover:border-[#D4A373] text-[#E6D5C3] px-4 py-3 rounded-full shadow-2xl transition-all duration-300 hover:scale-105" aria-label="Enzino Concierge Chat öffnen"> <div class="relative w-10 h-10 rounded-full bg-gradient-to-br from-[#C85A32] to-[#D4A373] p-0.5 flex items-center justify-center shadow-inner"> <div class="w-full h-full rounded-full bg-[#1A1816] flex items-center justify-center text-lg font-serif font-bold text-[#D4A373]">
🇮🇹
</div> <span class="absolute -top-0.5 -right-0.5 w-3 h-3 bg-emerald-500 rounded-full border-2 border-[#1A1816] animate-pulse"></span> </div> <div class="text-left hidden sm:block"> <div class="text-xs font-serif font-bold text-[#D4A373] tracking-wide">Enzino Concierge</div> <div class="text-[10px] text-[#A3978B]">Online • Frag mich was!</div> </div> </button> <!-- Chat Dialog Window --> <div id="enzino-chat-window" class="hidden fixed bottom-6 right-6 w-[calc(100vw-3rem)] sm:w-[380px] max-h-[580px] h-[85vh] bg-[#24211D] border border-[#D4A373]/30 rounded-3xl shadow-2xl flex-col overflow-hidden transition-all duration-300 z-50"> <!-- Header --> <div class="bg-[#1A1816] border-b border-[#D4A373]/20 p-4 flex items-center justify-between"> <div class="flex items-center gap-3"> <div class="relative w-10 h-10 rounded-full bg-gradient-to-br from-[#C85A32] to-[#D4A373] p-0.5 flex items-center justify-center"> <div class="w-full h-full rounded-full bg-[#24211D] flex items-center justify-center text-lg">
👨‍🍳
</div> <span class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-emerald-500 rounded-full border border-[#1A1816]"></span> </div> <div> <h3 class="font-serif text-sm font-bold text-[#E6D5C3]">Enzino da Enzo</h3> <p class="text-[10px] text-[#D4A373]">Digitaler Host & Concierge</p> </div> </div> <div class="flex items-center gap-2"> <!-- Session Disable Button --> <button id="enzino-disable-btn" title="Enzino für diese Session deaktivieren" class="p-1.5 text-[#A3978B] hover:text-amber-400 rounded-lg hover:bg-[#2A2622] text-xs transition-colors">
🚫
</button> <!-- Close Button --> <button id="enzino-close-btn" class="p-1.5 text-[#A3978B] hover:text-white rounded-lg hover:bg-[#2A2622] transition-colors" aria-label="Chat schließen">
✕
</button> </div> </div> <!-- Messages Body --> <div id="enzino-messages" class="flex-1 p-4 overflow-y-auto space-y-3.5 text-xs text-[#E6D5C3]"> <!-- Initial Bot Message --> <div class="flex gap-2.5 items-start"> <div class="w-7 h-7 rounded-full bg-[#C85A32]/20 border border-[#C85A32]/40 flex items-center justify-center text-xs shrink-0">
🇮🇹
</div> <div class="bg-[#2E2A25] border border-[#D4A373]/15 p-3 rounded-2xl rounded-tl-none max-w-[85%] leading-relaxed shadow-sm"> Ciao! I&#39;m Enzino, dein italienischer Digital Concierge 🇮🇹 Wie kann ich dir heute helfen? Frag mich nach unseren Apartments, der Trattoria oder dem digitalen Check-in! </div> </div> <!-- Quick Chips --> <div id="enzino-chips" class="flex flex-wrap gap-1.5 pt-2 pl-9"> <button class="enzino-chip text-[11px] bg-[#1A1816] hover:bg-[#C85A32]/20 text-[#D4A373] border border-[#D4A373]/30 hover:border-[#D4A373] px-3 py-1.5 rounded-full transition-all text-left" data-question="Wie funktioniert der Check-in?"> Wie funktioniert der Check-in? </button><button class="enzino-chip text-[11px] bg-[#1A1816] hover:bg-[#C85A32]/20 text-[#D4A373] border border-[#D4A373]/30 hover:border-[#D4A373] px-3 py-1.5 rounded-full transition-all text-left" data-question="Tisch in der Trattoria reservieren"> Tisch in der Trattoria reservieren </button><button class="enzino-chip text-[11px] bg-[#1A1816] hover:bg-[#C85A32]/20 text-[#D4A373] border border-[#D4A373]/30 hover:border-[#D4A373] px-3 py-1.5 rounded-full transition-all text-left" data-question="Direktbucher Bestpreis"> Direktbucher Bestpreis </button><button class="enzino-chip text-[11px] bg-[#1A1816] hover:bg-[#C85A32]/20 text-[#D4A373] border border-[#D4A373]/30 hover:border-[#D4A373] px-3 py-1.5 rounded-full transition-all text-left" data-question="Digitales Gästebuch (Eviivo)"> Digitales Gästebuch (Eviivo) </button> </div> </div> <!-- Typing Indicator (hidden by default) --> <div id="enzino-typing" class="hidden px-4 py-2 text-[11px] text-[#D4A373] italic flex items-center gap-2 bg-[#1A1816]/50"> <span class="w-2 h-2 bg-[#D4A373] rounded-full animate-ping"></span> <span>Enzino tippt...</span> </div> <!-- Input Footer --> <form id="enzino-form" class="bg-[#1A1816] border-t border-[#D4A373]/20 p-3 flex gap-2"> <input type="text" id="enzino-input" placeholder="Stelle Enzino eine Frage..." class="flex-1 bg-[#24211D] border border-[#D4A373]/20 focus:border-[#D4A373] text-[#E6D5C3] placeholder-[#A3978B] text-xs rounded-xl px-3 py-2.5 outline-none transition-all" autocomplete="off"> <button type="submit" class="bg-[#C85A32] hover:bg-[#b04d2a] text-white px-3.5 py-2.5 rounded-xl text-xs font-bold transition-all shrink-0">
➔
</button> </form> </div> </div> </body></html>