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

97 lines
49 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 da Enzo | Italienische Kulinarik &amp; Tischreservierung in Goslar</title><meta name="description" content="Trattoria da Enzo in Goslar: Echte sizilianische Küche, hausgemachte Pasta, historische Atmosphäre seit 1980. Speisekarte ansehen, Tisch reservieren &#38; Gutscheine kaufen."><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/"><meta property="og:title" content="Trattoria da Enzo | Italienische Kulinarik &#38; Tischreservierung in Goslar"><meta property="og:description" content="Trattoria da Enzo in Goslar: Echte sizilianische Küche, hausgemachte Pasta, historische Atmosphäre seit 1980. Speisekarte ansehen, Tisch reservieren &#38; Gutscheine kaufen."><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 da Enzo | Italienische Kulinarik &#38; Tischreservierung in Goslar"><meta property="twitter:description" content="Trattoria da Enzo in Goslar: Echte sizilianische Küche, hausgemachte Pasta, historische Atmosphäre seit 1980. Speisekarte ansehen, Tisch reservieren &#38; Gutscheine kaufen."><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.D1ACqP_G.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"> <section class="relative bg-stone-950 text-white py-20 lg:py-28 overflow-hidden"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"> <div class="lg:col-span-7 space-y-6"> <span class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-semibold uppercase tracking-wider border border-amber-500/30">
🇮🇹 Cucina Siciliana in Goslar • Seit 1980
</span> <h1 class="font-serif text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-white leading-[1.15]">
Trattoria da Enzo <br> <span class="text-amber-400">Echte Leidenschaft auf dem Teller</span> </h1> <p class="text-stone-300 text-base sm:text-lg leading-relaxed max-w-2xl">
Im Erdgeschoss unseres historischen Altstadt-Fachwerkhauses schlägt das Herz der Familie Campisi. Hier servieren wir unverfälschte sizilianische Rezepte, tagesfrisch handgemachte Pasta und beste Weine.
</p> <div class="pt-4 flex flex-wrap gap-4"> <a href="#reservierung" class="px-8 py-4 rounded-2xl bg-[#C85A32] text-white font-bold text-base hover:bg-[#b04d2a] shadow-lg transition-all">
Tisch online reservieren →
</a> <a href="#speisekarte" class="px-8 py-4 rounded-2xl bg-stone-800 text-stone-200 border border-stone-700 font-semibold text-base hover:bg-stone-700 transition-all">
Speisekarte ansehen ↓
</a> </div> </div> <!-- Right Quick Info Card --> <div class="lg:col-span-5"> <div class="bg-stone-900 border border-stone-800 rounded-3xl p-8 space-y-6 shadow-2xl"> <h2 class="font-serif text-2xl font-bold text-amber-400">Öffnungszeiten & Lage</h2> <div class="space-y-4 text-sm text-stone-300 border-t border-stone-800 pt-4"> <div class="flex justify-between items-center"> <span class="font-semibold text-white">Dienstag – Sonntag:</span> <span>17:00 – 22:30 Uhr</span> </div> <div class="flex justify-between items-center text-stone-400"> <span>Mittags-Schicht:</span> <span>Sa & So 12:00 – 14:30 Uhr</span> </div> <div class="flex justify-between items-center text-rose-400"> <span class="font-semibold">Montag:</span> <span>Ruhetag</span> </div> <div class="pt-3 border-t border-stone-800 space-y-1 text-xs text-stone-400"> <p>📍 <strong>Adresse:</strong> Bäckerstraße 18, 38640 Goslar</p> <p>📞 <strong>Telefon:</strong> +49 1520 7483196</p> <p>🏨 <strong>Hotelgäste:</strong> Bevorzugte Tischreservierung inklusive!</p> </div> </div> </div> </div> </div> </div> </section> <section class="py-20 bg-[#FAF6F0]"> <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="bg-white rounded-3xl p-8 sm:p-12 border border-stone-200/80 shadow-md space-y-8"> <div class="text-center space-y-3"> <span class="text-xs font-bold uppercase tracking-widest text-[#C85A32]">Familientradition seit 1980</span> <h2 class="font-serif text-3xl sm:text-4xl font-bold text-stone-900">
Die Geschichte von Alessandra & der Trattoria
</h2> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center pt-4"> <div class="md:col-span-1 rounded-2xl bg-stone-200 aspect-[4/5] flex items-center justify-center text-stone-500 font-serif text-center p-6 bg-gradient-to-br from-stone-800 to-stone-950 text-white shadow-inner"> <div> <p class="font-serif text-2xl font-bold text-amber-400">Alessandra</p> <p class="text-xs text-stone-300 uppercase tracking-widest mt-1">Campisi</p> <p class="text-xs text-stone-400 mt-4 italic">"Kochen ist Hingabe und Erinnerung an Zuhause."</p> </div> </div> <div class="md:col-span-2 space-y-4 text-stone-700 text-sm sm:text-base leading-relaxed"> <p>
Als unser Vater <strong>Vincenzo "Enzo" Campisi</strong> im Jahr 1980 die Trattoria in der Goslarer Bäckerstraße eröffnete, wollte er ein Stück unberührtes Sizilien in den Harz bringen. Kein Chichi, keine industriellen Fertigsaucen – sondern ehrliches Handwerk, sonnengeküsste Zutaten und die typisch mediterrane Herzlichkeit.
</p> <p>
Heute führt Tochter <strong>Alessandra Campisi</strong> mit derselben Leidenschaft die Küche. Jedes Nudelgericht wird täglich frisch zubereitet, das Olivenöl stammt von Familienplantagen aus Sizilien, und das Fleisch kommt direkt von ausgewählten Höfen aus der Harzer Region.
</p> <div class="p-4 rounded-xl bg-amber-50 border border-amber-200 text-stone-800 text-xs font-medium flex items-center gap-3"> <span class="text-xl">🍷</span> <span>"Ein Abend in der Trattoria soll sich anfühlen wie ein Kurzurlaub bei Freunden in Palermo."</span> </div> </div> </div> </div> </div> </section> <section id="speisekarte" class="py-20 bg-stone-900 text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center max-w-3xl mx-auto mb-16 space-y-3"> <span class="text-xs font-bold uppercase tracking-widest text-amber-400">Kulinarischer Auszug</span> <h2 class="font-serif text-3xl sm:text-4xl font-bold">Unsere Speisekarte Preview</h2> <p class="text-stone-300 text-base">
Frische Zutaten, hausgemachte Teigwaren und klassische Spezialitäten.
</p> </div> <!-- Menu Grid --> <div class="space-y-12"> <div class="space-y-6"> <div class="border-b border-stone-800 pb-3 flex items-center justify-between"> <h3 class="font-serif text-2xl font-bold text-amber-400">Antipasti &amp; Vorspeisen</h3> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors"> <div> <div class="flex items-start justify-between gap-2"> <h4 class="font-serif text-lg font-bold text-white">Bruschetta Tradizionale</h4> <span class="text-amber-400 font-bold text-sm whitespace-nowrap">7,50 €</span> </div> <p class="text-stone-300 text-xs mt-2 leading-relaxed">Geröstetes Altstadtbrot mit Würfeln von sizilianischen Strauchtomaten, Knoblauch, frischem Basilikum und Extra Vergine Olivenöl.</p> </div> <div class="flex flex-wrap gap-2 pt-2"> <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Vegetarisch </span><span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Klassiker </span> </div> </div><div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors"> <div> <div class="flex items-start justify-between gap-2"> <h4 class="font-serif text-lg font-bold text-white">Carpaccio di Manzo</h4> <span class="text-amber-400 font-bold text-sm whitespace-nowrap">14,90 €</span> </div> <p class="text-stone-300 text-xs mt-2 leading-relaxed">Hauchdünne Scheiben vom Rinderfilet mit Rucola, Hobeln von Parmigiano Reggiano DOP und nativem Zitronenöl.</p> </div> <div class="flex flex-wrap gap-2 pt-2"> <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Empfehlung </span> </div> </div><div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors"> <div> <div class="flex items-start justify-between gap-2"> <h4 class="font-serif text-lg font-bold text-white">Antipasto Misto &quot;da Enzo&quot;</h4> <span class="text-amber-400 font-bold text-sm whitespace-nowrap">17,50 €</span> </div> <p class="text-stone-300 text-xs mt-2 leading-relaxed">Große Vorspeisenplatte für Feinschmecker: Caponata Siciliana, Prosciutto di Parma, Burrata, gegrilltes Gemüse und Oliven.</p> </div> <div class="flex flex-wrap gap-2 pt-2"> <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Für 2 Personen </span><span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Spezialität </span> </div> </div> </div> </div><div class="space-y-6"> <div class="border-b border-stone-800 pb-3 flex items-center justify-between"> <h3 class="font-serif text-2xl font-bold text-amber-400">Primi Piatti – Hausgemachte Pasta</h3> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors"> <div> <div class="flex items-start justify-between gap-2"> <h4 class="font-serif text-lg font-bold text-white">Spaghetti alla Norma</h4> <span class="text-amber-400 font-bold text-sm whitespace-nowrap">14,50 €</span> </div> <p class="text-stone-300 text-xs mt-2 leading-relaxed">Der Sizilien-Klassiker: Hausgemachte Spaghetti mit gebratenen Auberginen, fruchtiger San Marzano Tomatensauce und Würfeln von Ricotta Salata.</p> </div> <div class="flex flex-wrap gap-2 pt-2"> <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Vegetarisch </span><span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Sizilianisch </span> </div> </div><div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors"> <div> <div class="flex items-start justify-between gap-2"> <h4 class="font-serif text-lg font-bold text-white">Tagliatelle con Ragù di Cervo</h4> <span class="text-amber-400 font-bold text-sm whitespace-nowrap">16,80 €</span> </div> <p class="text-stone-300 text-xs mt-2 leading-relaxed">Eigene Bandnudeln mit sanft geschmorter Wildsoße vom Harzer Hirsch, Wacholderbeeren und edlen Kräutern.</p> </div> <div class="flex flex-wrap gap-2 pt-2"> <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Regional &amp; Saison </span> </div> </div><div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors"> <div> <div class="flex items-start justify-between gap-2"> <h4 class="font-serif text-lg font-bold text-white">Ravioli Ricotta e Spinaci</h4> <span class="text-amber-400 font-bold text-sm whitespace-nowrap">15,90 €</span> </div> <p class="text-stone-300 text-xs mt-2 leading-relaxed">Handgemachte Teigtaschen mit cremig-frischer Ricotta-Spinat-Füllung in schäumender Salbeibutter und Parmesan.</p> </div> <div class="flex flex-wrap gap-2 pt-2"> <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Hausgemacht </span> </div> </div> </div> </div><div class="space-y-6"> <div class="border-b border-stone-800 pb-3 flex items-center justify-between"> <h3 class="font-serif text-2xl font-bold text-amber-400">Secondi Piatti – Fleisch &amp; Fisch</h3> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors"> <div> <div class="flex items-start justify-between gap-2"> <h4 class="font-serif text-lg font-bold text-white">Scaloppine al Limone</h4> <span class="text-amber-400 font-bold text-sm whitespace-nowrap">22,50 €</span> </div> <p class="text-stone-300 text-xs mt-2 leading-relaxed">Zarte Kalbsmedaillons in erfrischender Zitronen-Weißweinsauce, serviert mit getrüffeltem Kartoffelpüree und Marktgemüse.</p> </div> <div class="flex flex-wrap gap-2 pt-2"> <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Spezialität </span> </div> </div><div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors"> <div> <div class="flex items-start justify-between gap-2"> <h4 class="font-serif text-lg font-bold text-white">Filetto di Spigola alla Siciliana</h4> <span class="text-amber-400 font-bold text-sm whitespace-nowrap">24,90 €</span> </div> <p class="text-stone-300 text-xs mt-2 leading-relaxed">Kross gebratenes Wolfsbarschfilet mit Datteltomaten, Pantelleria-Kapern, schwarzen Oliven und frischem Oregano.</p> </div> <div class="flex flex-wrap gap-2 pt-2"> <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Fangfrisch </span> </div> </div> </div> </div><div class="space-y-6"> <div class="border-b border-stone-800 pb-3 flex items-center justify-between"> <h3 class="font-serif text-2xl font-bold text-amber-400">Dolci – Verführerische Desserts</h3> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors"> <div> <div class="flex items-start justify-between gap-2"> <h4 class="font-serif text-lg font-bold text-white">Tiramisù Tradizionale</h4> <span class="text-amber-400 font-bold text-sm whitespace-nowrap">6,90 €</span> </div> <p class="text-stone-300 text-xs mt-2 leading-relaxed">Nach dem Originalrezept von Vater Vincenzo &quot;Enzo&quot;: Löffelbiskuits in kräftigem Espresso, feiner Mascarponecreme und bitterem Kakao.</p> </div> <div class="flex flex-wrap gap-2 pt-2"> <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Originalrezept 1980 </span> </div> </div><div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors"> <div> <div class="flex items-start justify-between gap-2"> <h4 class="font-serif text-lg font-bold text-white">Cannoli Siciliani</h4> <span class="text-amber-400 font-bold text-sm whitespace-nowrap">7,50 €</span> </div> <p class="text-stone-300 text-xs mt-2 leading-relaxed">Zwei knusprige Röllchen gefüllt mit gesüßtem Schafskäse-Ricotta, gehackten Bronte-Pistazien und Schokoladendrops.</p> </div> <div class="flex flex-wrap gap-2 pt-2"> <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> 100% Sizilien </span> </div> </div> </div> </div><div class="space-y-6"> <div class="border-b border-stone-800 pb-3 flex items-center justify-between"> <h3 class="font-serif text-2xl font-bold text-amber-400">Vini d&#39;Italia – Erlesene Weine</h3> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors"> <div> <div class="flex items-start justify-between gap-2"> <h4 class="font-serif text-lg font-bold text-white">Nero d’Avola Sicilia DOC</h4> <span class="text-amber-400 font-bold text-sm whitespace-nowrap">Glas 6,80 € / Fl. 23,00 €</span> </div> <p class="text-stone-300 text-xs mt-2 leading-relaxed">Kräftiger Rotwein aus den sonnenverwöhnten Hängen Südsiziliens. Vollmundig mit Noten von reifen Waldbeeren und Gewürzen.</p> </div> <div class="flex flex-wrap gap-2 pt-2"> <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Rotwein </span> </div> </div><div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors"> <div> <div class="flex items-start justify-between gap-2"> <h4 class="font-serif text-lg font-bold text-white">Grillo Sicilia DOC</h4> <span class="text-amber-400 font-bold text-sm whitespace-nowrap">Glas 6,50 € / Fl. 22,00 €</span> </div> <p class="text-stone-300 text-xs mt-2 leading-relaxed">Erfrischender, eleganter Weißwein mit Aromen von Zitrusfrüchten, weißem Pfirsich und feiner Mineralität.</p> </div> <div class="flex flex-wrap gap-2 pt-2"> <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider"> Weißwein </span> </div> </div> </div> </div> </div> </div> </section> <section id="reservierung" class="py-20 bg-[#FAF6F0] border-t border-stone-200"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="bg-white rounded-3xl p-8 sm:p-12 border border-stone-200/90 shadow-xl space-y-8"> <div class="text-center space-y-2"> <span class="px-3 py-1 rounded-full bg-amber-100 text-[#C85A32] text-xs font-bold uppercase tracking-wider">
Online Reservierung
</span> <h2 class="font-serif text-3xl sm:text-4xl font-bold text-stone-900">
Tisch in der Trattoria reservieren
</h2> <p class="text-stone-600 text-sm">
Sichere dir deinen Platz bei Alessandra. Sofortige Bestätigung & direkte Bearbeitung.
</p> </div> <form id="reservation-form" class="space-y-6"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <!-- Datum --> <div class="space-y-1"> <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Datum</label> <input type="date" id="res-date" required class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"> </div> <!-- Schicht --> <div class="space-y-1"> <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Schicht</label> <select id="res-shift" required class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"> <option value="Abendschicht (17:00 – 22:00 Uhr)" selected>Abendschicht (17:00 – 22:00 Uhr)</option> <option value="Mittagsschicht (12:00 – 14:30 Uhr, Sa/So)">Mittagsschicht (12:00 – 14:30 Uhr, Sa/So)</option> </select> </div> <!-- Uhrzeit --> <div class="space-y-1"> <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Uhrzeit</label> <select id="res-time" required class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"> <option value="17:00">17:00 Uhr</option> <option value="17:30">17:30 Uhr</option> <option value="18:00" selected>18:00 Uhr</option> <option value="18:30">18:30 Uhr</option> <option value="19:00">19:00 Uhr</option> <option value="19:30">19:30 Uhr</option> <option value="20:00">20:00 Uhr</option> <option value="20:30">20:30 Uhr</option> </select> </div> <!-- Personen --> <div class="space-y-1"> <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Personenzahl</label> <select id="res-guests" required class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"> <option value="1 Person">1 Person</option> <option value="2 Personen" selected>2 Personen</option> <option value="3 Personen">3 Personen</option> <option value="4 Personen">4 Personen</option> <option value="5 Personen">5 Personen</option> <option value="6+ Personen">6+ Personen (Gruppe)</option> </select> </div> <!-- Name --> <div class="space-y-1"> <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Name / Ansprechpartner</label> <input type="text" id="res-name" placeholder="z.B. Maria Muster" required class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"> </div> <!-- Telefon --> <div class="space-y-1"> <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Telefonnummer</label> <input type="tel" id="res-phone" placeholder="z.B. +49 170 1234567" required class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"> </div> </div> <!-- E-Mail --> <div class="space-y-1"> <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">E-Mail-Adresse</label> <input type="email" id="res-email" placeholder="deine.email@beispiel.de" required class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"> </div> <!-- Anmerkungen --> <div class="space-y-1"> <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Anmerkungen / Sonderwünsche</label> <textarea id="res-notes" rows="3" placeholder="z.B. Hotelgast in Suite 1, Hochstuhl benötigt, Allergien..." class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"></textarea> </div> <button type="submit" class="w-full py-4 rounded-xl bg-[#C85A32] text-white font-bold text-base hover:bg-[#b04d2a] shadow-lg hover:shadow-xl transition-all">
Tischreservierung anfragen →
</button> </form> <!-- Dynamic Success Confirmation Modal/Box --> <div id="res-success" class="hidden p-6 rounded-2xl bg-emerald-50 border border-emerald-300 space-y-4 text-emerald-900"> <div class="flex items-center gap-3"> <span class="text-2xl">✅</span> <div> <h3 class="font-serif text-xl font-bold">Vielen Dank für deine Reservierungsanfrage!</h3> <p class="text-xs text-emerald-800">Deine Daten wurden übermittelt. Wir senden dir in Kürze deine Bestätigung.</p> </div> </div> <div id="res-summary-box" class="p-4 rounded-xl bg-white border border-emerald-200 text-xs text-stone-800 space-y-1 font-mono"></div> <a id="res-whatsapp-btn" href="#" target="_blank" class="inline-flex items-center justify-center gap-2 w-full py-3 rounded-xl bg-emerald-600 text-white font-bold text-sm hover:bg-emerald-700 transition-colors shadow-md"> <span>💬 Zusätzlicher 1-Klick WhatsApp Versand an Alessandra</span> </a> </div> </div> </div> </section> <section id="gutscheine" class="py-20 bg-stone-900 text-white"> <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12"> <div class="text-center space-y-3"> <span class="px-4 py-1.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-semibold uppercase tracking-wider border border-amber-500/30">
Geschenkidee
</span> <h2 class="font-serif text-3xl sm:text-4xl font-bold text-stone-100">
Trattoria Gutschein-Shop
</h2> <p class="text-stone-300 text-base max-w-2xl mx-auto">
Verschenke italienische Gaumenfreuden im Herzen von Goslar. Wähle Betrag, Motiv und Versandoption.
</p> </div> <form id="voucher-form" class="bg-stone-800 border border-stone-700 rounded-3xl p-8 sm:p-12 space-y-8 shadow-2xl"> <!-- 1. Gutschein-Betrag --> <div class="space-y-4"> <label class="block text-xs font-bold uppercase tracking-wider text-amber-400">1. Gutschein-Betrag wählen</label> <div class="grid grid-cols-2 sm:grid-cols-5 gap-3"> <label class="voucher-amount-card cursor-pointer p-4 rounded-2xl border text-center transition-all border-stone-700 bg-stone-900/80 text-stone-300 hover:border-stone-500"> <input type="radio" name="voucher_amount" value="35" class="sr-only"> <span class="block text-2xl font-serif font-bold">35 €</span> <span class="block text-[10px] text-stone-400 uppercase mt-1">Trattoria Wert</span> </label><label class="voucher-amount-card cursor-pointer p-4 rounded-2xl border text-center transition-all border-amber-400 bg-amber-500/20 text-amber-300 font-bold"> <input type="radio" name="voucher_amount" value="50" checked class="sr-only"> <span class="block text-2xl font-serif font-bold">50 €</span> <span class="block text-[10px] text-stone-400 uppercase mt-1">Trattoria Wert</span> </label><label class="voucher-amount-card cursor-pointer p-4 rounded-2xl border text-center transition-all border-stone-700 bg-stone-900/80 text-stone-300 hover:border-stone-500"> <input type="radio" name="voucher_amount" value="75" class="sr-only"> <span class="block text-2xl font-serif font-bold">75 €</span> <span class="block text-[10px] text-stone-400 uppercase mt-1">Trattoria Wert</span> </label><label class="voucher-amount-card cursor-pointer p-4 rounded-2xl border text-center transition-all border-stone-700 bg-stone-900/80 text-stone-300 hover:border-stone-500"> <input type="radio" name="voucher_amount" value="100" class="sr-only"> <span class="block text-2xl font-serif font-bold">100 €</span> <span class="block text-[10px] text-stone-400 uppercase mt-1">Trattoria Wert</span> </label><label class="voucher-amount-card cursor-pointer p-4 rounded-2xl border text-center transition-all border-stone-700 bg-stone-900/80 text-stone-300 hover:border-stone-500"> <input type="radio" name="voucher_amount" value="200" class="sr-only"> <span class="block text-2xl font-serif font-bold">200 €</span> <span class="block text-[10px] text-stone-400 uppercase mt-1">Trattoria Wert</span> </label> </div> </div> <!-- 2. Gutschein-Motiv --> <div class="space-y-4"> <label class="block text-xs font-bold uppercase tracking-wider text-amber-400">2. Trattoria-Motiv wählen</label> <div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> <label class="voucher-motif-card cursor-pointer p-5 rounded-2xl border border-amber-400 bg-amber-500/20 text-white space-y-2 transition-all"> <input type="radio" name="voucher_motif" value="Sizilianischer Genussabend" checked class="sr-only"> <div class="text-2xl">🍷🍝</div> <h4 class="font-serif font-bold text-amber-300 text-sm">Sizilianischer Genussabend</h4> <p class="text-xs text-stone-300">Klassisches Design mit Pasta, Wein & Toskana-Flair.</p> </label> <label class="voucher-motif-card cursor-pointer p-5 rounded-2xl border border-stone-700 bg-stone-900/80 text-stone-300 space-y-2 hover:border-stone-500 transition-all"> <input type="radio" name="voucher_motif" value="Gourmet & Fine Dining" class="sr-only"> <div class="text-2xl">✨🥂</div> <h4 class="font-serif font-bold text-stone-100 text-sm">Gourmet & Fine Dining</h4> <p class="text-xs text-stone-400">Edles Gold-Schwarz-Design mit Casa da Enzo Siegel.</p> </label> <label class="voucher-motif-card cursor-pointer p-5 rounded-2xl border border-stone-700 bg-stone-900/80 text-stone-300 space-y-2 hover:border-stone-500 transition-all"> <input type="radio" name="voucher_motif" value="Romantik & Altstadt-Charme" class="sr-only"> <div class="text-2xl">🕯️❤️</div> <h4 class="font-serif font-bold text-stone-100 text-sm">Romantik & Altstadt-Charme</h4> <p class="text-xs text-stone-400">Stimmungsvolles Motiv für romantische Abende zu zweit.</p> </label> </div> </div> <!-- 3. Übergabe / Versandart --> <div class="space-y-4 border-t border-stone-700 pt-6"> <label class="block text-xs font-bold uppercase tracking-wider text-amber-400">3. Übergabe & Versandoption</label> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <label class="delivery-option-card cursor-pointer p-4 rounded-2xl border border-amber-400 bg-amber-500/20 text-white flex items-center gap-3"> <input type="radio" name="delivery_type" value="pickup" checked class="accent-amber-400"> <div> <span class="block text-sm font-bold">Abholung vor Ort in Goslar</span> <span class="block text-xs text-stone-300">Kostenlos in der Bäckerstraße 18</span> </div> </label> <label class="delivery-option-card cursor-pointer p-4 rounded-2xl border border-stone-700 bg-stone-900/80 text-stone-300 flex items-center gap-3"> <input type="radio" name="delivery_type" value="post" class="accent-amber-400"> <div> <span class="block text-sm font-bold text-stone-100">Postversand (+5,00 €)</span> <span class="block text-xs text-stone-400">Gedruckter Edel-Gutschein per Post</span> </div> </label> </div> </div> <!-- Address Fields (Shown only when Postversand is selected) --> <div id="address-fields" class="hidden space-y-4 border-t border-stone-700 pt-6 bg-stone-900/60 p-6 rounded-2xl"> <h4 class="font-serif text-base font-bold text-amber-300">Lieferadresse für Postversand</h4> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="space-y-1"> <label class="block text-xs text-stone-300 uppercase">Empfänger Name</label> <input type="text" id="v-street-name" placeholder="Erika Musterfrau" class="w-full px-4 py-2.5 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:outline-none focus:border-amber-400"> </div> <div class="space-y-1"> <label class="block text-xs text-stone-300 uppercase">Straße & Hausnummer</label> <input type="text" id="v-street-addr" placeholder="Musterstraße 42" class="w-full px-4 py-2.5 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:outline-none focus:border-amber-400"> </div> <div class="space-y-1"> <label class="block text-xs text-stone-300 uppercase">Postleitzahl & Ort</label> <input type="text" id="v-city" placeholder="12345 Musterstadt" class="w-full px-4 py-2.5 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:outline-none focus:border-amber-400"> </div> <div class="space-y-1"> <label class="block text-xs text-stone-300 uppercase">Land</label> <input type="text" id="v-country" value="Deutschland" class="w-full px-4 py-2.5 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:outline-none focus:border-amber-400"> </div> </div> </div> <!-- Buyer Contact Info --> <div class="space-y-4 border-t border-stone-700 pt-6"> <h4 class="font-serif text-base font-bold text-amber-300">Kontaktdaten des Käufers</h4> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="space-y-1"> <label class="block text-xs text-stone-300 uppercase">Dein Name</label> <input type="text" id="v-buyer-name" required placeholder="Vor- und Nachname" class="w-full px-4 py-3 rounded-xl bg-stone-900 border border-stone-700 text-white text-sm focus:outline-none focus:border-amber-400"> </div> <div class="space-y-1"> <label class="block text-xs text-stone-300 uppercase">Deine E-Mail-Adresse</label> <input type="email" id="v-buyer-email" required placeholder="email@beispiel.de" class="w-full px-4 py-3 rounded-xl bg-stone-900 border border-stone-700 text-white text-sm focus:outline-none focus:border-amber-400"> </div> </div> </div> <!-- Total Price Summary Bar --> <div class="p-6 rounded-2xl bg-stone-950 border border-stone-700 flex flex-col sm:flex-row items-center justify-between gap-4"> <div> <span class="text-xs uppercase text-stone-400 font-semibold block">Gesamtsumme inkl. MwSt.</span> <span id="voucher-total-display" class="font-serif text-3xl font-bold text-amber-400">50,00 €</span> </div> <button type="submit" class="px-8 py-4 rounded-xl bg-amber-500 text-stone-950 font-bold text-base hover:bg-amber-400 transition-all shadow-lg">
Gutschein jetzt verbindlich bestellen →
</button> </div> </form> <!-- Voucher Success Box --> <div id="voucher-success" class="hidden p-8 rounded-3xl bg-amber-50 border border-amber-300 text-stone-900 space-y-4"> <div class="flex items-center gap-3"> <span class="text-3xl">🎉</span> <div> <h3 class="font-serif text-2xl font-bold text-[#C85A32]">Gutschein-Bestellung erfolgreich empfangen!</h3> <p class="text-stone-700 text-sm">Vielen Dank. Wir bearbeiten deine Bestellung umgehend.</p> </div> </div> <div id="voucher-summary-box" class="p-4 rounded-xl bg-white border border-amber-200 text-xs text-stone-800 space-y-1 font-mono"></div> </div> </div> </section> </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>