97 lines
49 KiB
HTML
97 lines
49 KiB
HTML
<!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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 "da Enzo"</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 & 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 & 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 "Enzo": 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'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'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> |