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

145 lines
55 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>Casa da Enzo | Boutique Apartments &amp; Trattoria in Goslar Altstadt</title><meta name="description" content="7 exklusive Boutique Apartments &#38; traditionsreiche italienische Trattoria in Goslars UNESCO-Altstadt. 100% digitaler Check-in, Bestpreis-Garantie bei Direktbuchung."><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/"><meta property="og:title" content="Casa da Enzo | Boutique Apartments &#38; Trattoria in Goslar Altstadt"><meta property="og:description" content="7 exklusive Boutique Apartments &#38; traditionsreiche italienische Trattoria in Goslars UNESCO-Altstadt. 100% digitaler Check-in, Bestpreis-Garantie bei Direktbuchung."><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="Casa da Enzo | Boutique Apartments &#38; Trattoria in Goslar Altstadt"><meta property="twitter:description" content="7 exklusive Boutique Apartments &#38; traditionsreiche italienische Trattoria in Goslars UNESCO-Altstadt. 100% digitaler Check-in, Bestpreis-Garantie bei Direktbuchung."><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.jAcVTPu2.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 pt-8 pb-16 lg:pt-12 lg:pb-24 overflow-hidden bg-[#1A1816]"> <!-- Subtle Background Gradients --> <div class="absolute top-0 left-0 w-1/2 h-full bg-[#2D5A43]/10 blur-3xl pointer-events-none"></div> <div class="absolute top-0 right-0 w-1/2 h-full bg-[#C85A32]/10 blur-3xl pointer-events-none"></div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 space-y-12"> <!-- Top Subtitle / Heritage Tag --> <div class="text-center space-y-3"> <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#24211D] border border-[#D4A373]/30 text-[#D4A373] text-xs font-semibold tracking-wider uppercase"> <span>🇮🇹 Sizilien trifft Goslar</span> <span>•</span> <span>Seit 1980 • Bäckerstraße 18</span> </div> <h1 class="font-serif text-3xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-[#E6D5C3]">
Zwei Welten. Ein unvergleichliches Haus.
</h1> <p class="text-sm sm:text-base text-[#A3978B] max-w-2xl mx-auto leading-relaxed"> Obere Etagen: 7 neu sanierte Boutique-Apartments im UNESCO-Fachwerk. Erdgeschoss: Die traditionsreiche Familien-Trattoria. Erlebe echte italienische Gastfreundschaft im Herzen von Goslar. </p> </div> <!-- 50 / 50 Dual Hero Cards Grid --> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch"> <!-- Left Side: Apartments (Green #2D5A43) --> <div class="relative rounded-3xl bg-[#24211D] border border-[#2D5A43]/40 p-8 sm:p-10 flex flex-col justify-between shadow-2xl hover:border-emerald-500/60 transition-all group overflow-hidden"> <div class="absolute top-0 right-0 w-32 h-32 bg-[#2D5A43]/20 rounded-full blur-2xl group-hover:bg-[#2D5A43]/30 transition-all"></div> <div class="space-y-6 relative z-10"> <div class="flex items-center justify-between"> <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#2D5A43]/20 border border-emerald-500/30 text-emerald-400 text-xs font-bold uppercase tracking-wider"> <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> <span>Boutique Apartments</span> </span> <span class="text-xs font-serif text-[#D4A373]">7 Suiten • 100% Saniert</span> </div> <div class="space-y-3"> <h2 class="font-serif text-2xl sm:text-3xl font-bold text-[#E6D5C3] group-hover:text-emerald-300 transition-colors"> Schlafen &amp; Entspannen im Denkmal </h2> <p class="text-xs sm:text-sm text-[#A3978B] leading-relaxed"> 4 Premium-Komfort-Suites mit Balkon/Terrasse &amp; Workstation sowie 3 gemütliche Klassik-Suites. Kontaktloser Nuki Smart-Lock Access ab 15:00 Uhr, Highspeed WLAN &amp; Bestpreis-Garantie bei Direktbuchung. </p> </div> <!-- Feature Bullets --> <div class="grid grid-cols-2 gap-3 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/15"> <div class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span>100% 2025er Sanierung</span> </div> <div class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span>Nuki Keyless PIN Access</span> </div> <div class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span>15% Direktbucher-Rabatt</span> </div> <div class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span>Balkon, Terrasse & Workation</span> </div> </div> </div> <!-- Action Area --> <div class="pt-8 space-y-4 relative z-10"> <div class="flex flex-col sm:flex-row gap-3"> <a href="#apartments" class="flex-1 py-3.5 px-6 rounded-2xl bg-[#2D5A43] hover:bg-[#386d52] text-white text-center font-bold text-xs sm:text-sm transition-all shadow-lg hover:shadow-emerald-900/30"> Suiten entdecken &amp; buchen </a> <a href="https://wa.me/4915207483196" target="_blank" class="py-3.5 px-4 rounded-2xl bg-[#1A1816] hover:bg-[#2E2A25] text-emerald-400 border border-emerald-500/40 text-center font-semibold text-xs transition-all flex items-center justify-center gap-2"> <span>💬 WhatsApp Alja</span> </a> </div> <p class="text-[11px] text-[#A3978B] text-center sm:text-left">
Apartment Concierge Alja: <a href="https://wa.me/4915207483196" target="_blank" class="text-emerald-400 underline font-medium">+49 1520 7483196</a> </p> </div> </div> <!-- Right Side: Trattoria (Red #C85A32) --> <div class="relative rounded-3xl bg-[#24211D] border border-[#C85A32]/40 p-8 sm:p-10 flex flex-col justify-between shadow-2xl hover:border-[#C85A32] transition-all group overflow-hidden"> <div class="absolute top-0 right-0 w-32 h-32 bg-[#C85A32]/20 rounded-full blur-2xl group-hover:bg-[#C85A32]/30 transition-all"></div> <div class="space-y-6 relative z-10"> <div class="flex items-center justify-between"> <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#C85A32]/20 border border-[#C85A32]/30 text-[#C85A32] text-xs font-bold uppercase tracking-wider"> <span class="w-2 h-2 rounded-full bg-[#C85A32] animate-pulse"></span> <span>Trattoria da Enzo</span> </span> <span class="text-xs font-serif text-[#D4A373]">Familientradition seit 1980</span> </div> <div class="space-y-3"> <h2 class="font-serif text-2xl sm:text-3xl font-bold text-[#E6D5C3] group-hover:text-[#e2724a] transition-colors"> Kulinarik &amp; Italienische Lebensfreude </h2> <p class="text-xs sm:text-sm text-[#A3978B] leading-relaxed"> In Alessandras Trattoria genießen Hotelgäste und Feinschmecker ehrliche sizilianische Spezialitäten, frisch gedrehte Pasta und erlesene Weine. Bevorzugte Tischreservierung für Apartment-Gäste. </p> </div> <!-- Feature Bullets --> <div class="grid grid-cols-2 gap-3 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/15"> <div class="flex items-center gap-2"> <span class="text-[#C85A32] font-bold">✓</span> <span>Hausgemachte Pasta & Kräuter</span> </div> <div class="flex items-center gap-2"> <span class="text-[#C85A32] font-bold">✓</span> <span>Di–So 17:00 – 22:30 Uhr</span> </div> <div class="flex items-center gap-2"> <span class="text-[#C85A32] font-bold">✓</span> <span>Priorisierte Gästereservierung</span> </div> <div class="flex items-center gap-2"> <span class="text-[#C85A32] font-bold">✓</span> <span>Echte Sizilianische Rezepte</span> </div> </div> </div> <!-- Action Area --> <div class="pt-8 space-y-4 relative z-10"> <div class="flex flex-col sm:flex-row gap-3"> <a href="tel:+49532123456" class="flex-1 py-3.5 px-6 rounded-2xl bg-[#C85A32] hover:bg-[#b04d2a] text-white text-center font-bold text-xs sm:text-sm transition-all shadow-lg hover:shadow-red-900/30"> Tisch anrufen &amp; reservieren </a> <a href="#trattoria" class="py-3.5 px-4 rounded-2xl bg-[#1A1816] hover:bg-[#2E2A25] text-[#C85A32] border border-[#C85A32]/40 text-center font-semibold text-xs transition-all flex items-center justify-center gap-2"> <span>🍷 Speisekarte & Info</span> </a> </div> <p class="text-[11px] text-[#A3978B] text-center sm:text-left">
Trattoria Festnetz: <a href="tel:+49532123456" class="text-[#C85A32] underline font-medium">+49 5321 23456</a> </p> </div> </div> </div> <!-- Trust Bar: Airbnb Superhost, 9.8 Booking.com, 100% 2025er Sanierung --> <div class="bg-[#24211D] border border-[#D4A373]/20 rounded-2xl p-6 grid grid-cols-2 lg:grid-cols-4 gap-6 text-center shadow-xl"> <div class="space-y-1"> <div class="text-2xl">⭐</div> <div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">Airbnb Superhost</div> <div class="text-[11px] text-[#A3978B]">Höchste Gastzufriedenheit</div> </div> <div class="space-y-1 border-l border-[#D4A373]/10"> <div class="text-2xl">🏆</div> <div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">9.8 Booking.com</div> <div class="text-[11px] text-[#A3978B]">Spitzenbewertung 2025</div> </div> <div class="space-y-1 border-l border-[#D4A373]/10"> <div class="text-2xl">🛠️</div> <div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">100% 2025er Sanierung</div> <div class="text-[11px] text-[#A3978B]">Denkmal trifft Moderne</div> </div> <div class="space-y-1 border-l border-[#D4A373]/10"> <div class="text-2xl">🔑</div> <div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">24/7 Nuki Smart Access</div> <div class="text-[11px] text-[#A3978B]">Digitaler kontaktloser Check-in</div> </div> </div> </div> </section> <section id="booking" class="px-4 py-8 bg-[#1A1816]"> <div class="stone-card rounded-3xl p-6 sm:p-10 max-w-4xl mx-auto my-8 font-sans border border-[#D4A373]/30 shadow-2xl"> <div class="text-center mb-8 space-y-2"> <div class="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-[#2D5A43]/20 border border-emerald-500/40 text-emerald-400 text-xs font-bold uppercase tracking-wider"> <span>🔒 Direktbucher Bestpreis-Garantie</span> </div> <h3 class="font-serif text-2xl sm:text-3xl font-bold text-[#E6D5C3]">
Verfügbarkeit & Bestpreis prüfen
</h3> <p class="text-[#A3978B] text-xs sm:text-sm max-w-xl mx-auto">
Buche direkt über unsere Eviivo-Schnittstelle – 15% günstiger als auf Booking.com oder Airbnb. Bestpreis garantiert!
</p> </div> <!-- Booking Mask Interface --> <form action="https://onlinereservation.eviivo.com" method="GET" target="_blank" class="grid grid-cols-1 sm:grid-cols-3 gap-4"> <div class="space-y-1"> <label class="text-xs font-semibold text-[#D4A373] uppercase tracking-wider">Anreise</label> <input type="date" name="startDate" class="w-full px-4 py-3 rounded-xl bg-[#1A1816] border border-[#D4A373]/30 text-[#E6D5C3] text-xs focus:border-[#D4A373] focus:outline-none" required> </div> <div class="space-y-1"> <label class="text-xs font-semibold text-[#D4A373] uppercase tracking-wider">Abreise</label> <input type="date" name="endDate" class="w-full px-4 py-3 rounded-xl bg-[#1A1816] border border-[#D4A373]/30 text-[#E6D5C3] text-xs focus:border-[#D4A373] focus:outline-none" required> </div> <div class="space-y-1"> <label class="text-xs font-semibold text-[#D4A373] uppercase tracking-wider">Gäste</label> <select name="adults" class="w-full px-4 py-3 rounded-xl bg-[#1A1816] border border-[#D4A373]/30 text-[#E6D5C3] text-xs focus:border-[#D4A373] focus:outline-none"> <option value="1">1 Person</option> <option value="2" selected>2 Personen</option> <option value="3">3 Personen</option> <option value="4">4 Personen</option> </select> </div> <div class="sm:col-span-3 pt-2"> <button type="submit" class="w-full py-4 rounded-xl bg-gradient-to-r from-[#2D5A43] to-[#C85A32] text-white font-bold text-sm hover:opacity-95 shadow-xl transition-all">
Jetzt Verfügbarkeit & Bestpreis abrufen ➔
</button> </div> </form> <div class="mt-6 text-center text-[11px] text-[#A3978B] flex flex-wrap items-center justify-center gap-4 border-t border-[#D4A373]/10 pt-4"> <span>🔒 Sichere SSL-Schnittstelle</span> <span>•</span> <span>💳 Keine versteckten Gebühren</span> <span>•</span> <span>⚡ Sofortige Reservierungsbestätigung</span> </div> </div> </section> <section id="apartments" class="py-20 bg-[#1A1816] border-y border-[#D4A373]/15"> <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="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#2D5A43]/20 border border-emerald-500/40 text-emerald-400 text-xs font-bold uppercase tracking-wider"> <span class="w-2 h-2 rounded-full bg-emerald-400"></span> <span>Boutique Apartments & Suiten</span> </span> <h2 class="font-serif text-3xl sm:text-4xl font-bold text-[#E6D5C3]">
Dein Zuhause auf Zeit im Welterbe
</h2> <p class="text-[#A3978B] text-sm sm:text-base leading-relaxed">
Wähle zwischen unseren 4 neu sanierten Premium-Komfort-Suites (mit Balkon, Terrasse oder Workstation) und 3 gemütlichen Klassik-Einheiten. Alle mit Nuki PIN access & Highspeed WLAN.
</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="group stone-card stone-card-hover rounded-3xl overflow-hidden flex flex-col h-full font-sans"> <!-- Image Header --> <div class="relative aspect-[16/10] bg-[#1A1816] overflow-hidden border-b border-[#D4A373]/15"> <div class="absolute top-4 left-4 z-10 flex gap-2"> <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-md bg-[#2D5A43] text-emerald-100 border border-emerald-500/40"> Premium-Komfort </span> <span class="px-2.5 py-1 rounded-full text-xs font-bold bg-[#1A1816]/80 backdrop-blur-md text-emerald-400 border border-emerald-500/30">
🌿 Balkon/Terrasse
</span> </div> <!-- Image Placeholder / Visual Container --> <div class="w-full h-full bg-gradient-to-br from-[#2E2A25] to-[#1A1816] flex items-center justify-center text-[#D4A373] font-serif group-hover:scale-105 transition-transform duration-500 p-6 text-center"> <div class="space-y-1"> <span class="text-3xl block">🏛️</span> <span class="text-sm font-semibold text-[#E6D5C3]">Komfort-Suite 1 mit Balkon</span> </div> </div> </div> <!-- Content --> <div class="p-6 flex-1 flex flex-col justify-between space-y-6"> <div class="space-y-3"> <div class="flex items-center gap-3 text-xs font-medium text-[#A3978B]"> <span class="text-[#E6D5C3]">👤 Bis zu 4 Gäste</span> <span>•</span> <span class="text-[#E6D5C3]">📐 58 m²</span> <span>•</span> <span class="text-emerald-400 font-semibold">💻 Workstation</span> </div> <h3 class="font-serif text-2xl font-bold text-[#E6D5C3] group-hover:text-emerald-400 transition-colors"> Komfort-Suite 1 mit Balkon </h3> <p class="text-[#A3978B] text-xs leading-relaxed line-clamp-2"> Lichtdurchflutete Premium-Suite mit historischem Altstadt-Balkon und Bosch-Küche </p> <!-- Highlights list --> <ul class="space-y-1.5 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/10"> <li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Privater Balkon zur ruhigen Bäckerstraße</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Ergonomischer Dedicated Workspace mit Highspeed-WLAN</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Nuki Keyless Smart Lock Check-in</span> </li> </ul> </div> <!-- Actions --> <div class="pt-4 border-t border-[#D4A373]/15 flex items-center justify-between gap-3"> <a href="/apartments/suite-1-balkon" class="text-xs font-semibold text-[#D4A373] hover:text-white transition-colors">
Details ansehen →
</a> <a href="#booking" class="px-4 py-2 rounded-xl bg-[#2D5A43] hover:bg-[#386d52] text-white text-xs font-bold transition-all shadow-md">
Buchen
</a> </div> </div> </div><div class="group stone-card stone-card-hover rounded-3xl overflow-hidden flex flex-col h-full font-sans"> <!-- Image Header --> <div class="relative aspect-[16/10] bg-[#1A1816] overflow-hidden border-b border-[#D4A373]/15"> <div class="absolute top-4 left-4 z-10 flex gap-2"> <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-md bg-[#2D5A43] text-emerald-100 border border-emerald-500/40"> Premium-Komfort </span> <span class="px-2.5 py-1 rounded-full text-xs font-bold bg-[#1A1816]/80 backdrop-blur-md text-emerald-400 border border-emerald-500/30">
🌿 Balkon/Terrasse
</span> </div> <!-- Image Placeholder / Visual Container --> <div class="w-full h-full bg-gradient-to-br from-[#2E2A25] to-[#1A1816] flex items-center justify-center text-[#D4A373] font-serif group-hover:scale-105 transition-transform duration-500 p-6 text-center"> <div class="space-y-1"> <span class="text-3xl block">🏛️</span> <span class="text-sm font-semibold text-[#E6D5C3]">Komfort-Suite 2 mit Terrasse</span> </div> </div> </div> <!-- Content --> <div class="p-6 flex-1 flex flex-col justify-between space-y-6"> <div class="space-y-3"> <div class="flex items-center gap-3 text-xs font-medium text-[#A3978B]"> <span class="text-[#E6D5C3]">👤 Bis zu 4 Gäste</span> <span>•</span> <span class="text-[#E6D5C3]">📐 62 m²</span> <span>•</span> <span class="text-emerald-400 font-semibold">💻 Workstation</span> </div> <h3 class="font-serif text-2xl font-bold text-[#E6D5C3] group-hover:text-emerald-400 transition-colors"> Komfort-Suite 2 mit Terrasse </h3> <p class="text-[#A3978B] text-xs leading-relaxed line-clamp-2"> Großzügige 62m² Suite mit privatem Innenhof-Balkon und ruhiger Lage </p> <!-- Highlights list --> <ul class="space-y-1.5 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/10"> <li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Ruhiger Balkon/Terrasse zum geschützten Innenhof</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Separates Schlafzimmer mit Boxspringbett</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Kontaktloser 24/7 Check-in via Nuki Code</span> </li> </ul> </div> <!-- Actions --> <div class="pt-4 border-t border-[#D4A373]/15 flex items-center justify-between gap-3"> <a href="/apartments/suite-2-terrasse" class="text-xs font-semibold text-[#D4A373] hover:text-white transition-colors">
Details ansehen →
</a> <a href="#booking" class="px-4 py-2 rounded-xl bg-[#2D5A43] hover:bg-[#386d52] text-white text-xs font-bold transition-all shadow-md">
Buchen
</a> </div> </div> </div><div class="group stone-card stone-card-hover rounded-3xl overflow-hidden flex flex-col h-full font-sans"> <!-- Image Header --> <div class="relative aspect-[16/10] bg-[#1A1816] overflow-hidden border-b border-[#D4A373]/15"> <div class="absolute top-4 left-4 z-10 flex gap-2"> <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-md bg-[#2D5A43] text-emerald-100 border border-emerald-500/40"> Premium-Komfort </span> </div> <!-- Image Placeholder / Visual Container --> <div class="w-full h-full bg-gradient-to-br from-[#2E2A25] to-[#1A1816] flex items-center justify-center text-[#D4A373] font-serif group-hover:scale-105 transition-transform duration-500 p-6 text-center"> <div class="space-y-1"> <span class="text-3xl block">🏛️</span> <span class="text-sm font-semibold text-[#E6D5C3]">Komfort-Suite 3 Design</span> </div> </div> </div> <!-- Content --> <div class="p-6 flex-1 flex flex-col justify-between space-y-6"> <div class="space-y-3"> <div class="flex items-center gap-3 text-xs font-medium text-[#A3978B]"> <span class="text-[#E6D5C3]">👤 Bis zu 3 Gäste</span> <span>•</span> <span class="text-[#E6D5C3]">📐 52 m²</span> <span>•</span> <span class="text-emerald-400 font-semibold">💻 Workstation</span> </div> <h3 class="font-serif text-2xl font-bold text-[#E6D5C3] group-hover:text-emerald-400 transition-colors"> Komfort-Suite 3 Design </h3> <p class="text-[#A3978B] text-xs leading-relaxed line-clamp-2"> Elegante Altstadt-Suite mit sichtbaren Balken und edler Einrichtung </p> <!-- Highlights list --> <ul class="space-y-1.5 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/10"> <li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Sichtbares historisches Fachwerkelement</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Highspeed Wi-Fi 6 für Remote Work</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Kontaktlose Anreise &amp; Nuki Smart Lock</span> </li> </ul> </div> <!-- Actions --> <div class="pt-4 border-t border-[#D4A373]/15 flex items-center justify-between gap-3"> <a href="/apartments/suite-3-komfort" class="text-xs font-semibold text-[#D4A373] hover:text-white transition-colors">
Details ansehen →
</a> <a href="#booking" class="px-4 py-2 rounded-xl bg-[#2D5A43] hover:bg-[#386d52] text-white text-xs font-bold transition-all shadow-md">
Buchen
</a> </div> </div> </div><div class="group stone-card stone-card-hover rounded-3xl overflow-hidden flex flex-col h-full font-sans"> <!-- Image Header --> <div class="relative aspect-[16/10] bg-[#1A1816] overflow-hidden border-b border-[#D4A373]/15"> <div class="absolute top-4 left-4 z-10 flex gap-2"> <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-md bg-[#2D5A43] text-emerald-100 border border-emerald-500/40"> Premium-Komfort </span> </div> <!-- Image Placeholder / Visual Container --> <div class="w-full h-full bg-gradient-to-br from-[#2E2A25] to-[#1A1816] flex items-center justify-center text-[#D4A373] font-serif group-hover:scale-105 transition-transform duration-500 p-6 text-center"> <div class="space-y-1"> <span class="text-3xl block">🏛️</span> <span class="text-sm font-semibold text-[#E6D5C3]">Komfort-Suite 4 Workation</span> </div> </div> </div> <!-- Content --> <div class="p-6 flex-1 flex flex-col justify-between space-y-6"> <div class="space-y-3"> <div class="flex items-center gap-3 text-xs font-medium text-[#A3978B]"> <span class="text-[#E6D5C3]">👤 Bis zu 2 Gäste</span> <span>•</span> <span class="text-[#E6D5C3]">📐 50 m²</span> <span>•</span> <span class="text-emerald-400 font-semibold">💻 Workstation</span> </div> <h3 class="font-serif text-2xl font-bold text-[#E6D5C3] group-hover:text-emerald-400 transition-colors"> Komfort-Suite 4 Workation </h3> <p class="text-[#A3978B] text-xs leading-relaxed line-clamp-2"> Optimiert für Remote Worker, Geschäftsreisende und Long-Stays </p> <!-- Highlights list --> <ul class="space-y-1.5 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/10"> <li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Professioneller Workstation-Schreibtisch &amp; Monitor</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">100 Mbit/s Glasfaser WLAN</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Flüsterleise Lage &amp; Verdunkelungsrollos</span> </li> </ul> </div> <!-- Actions --> <div class="pt-4 border-t border-[#D4A373]/15 flex items-center justify-between gap-3"> <a href="/apartments/suite-4-workspace" class="text-xs font-semibold text-[#D4A373] hover:text-white transition-colors">
Details ansehen →
</a> <a href="#booking" class="px-4 py-2 rounded-xl bg-[#2D5A43] hover:bg-[#386d52] text-white text-xs font-bold transition-all shadow-md">
Buchen
</a> </div> </div> </div><div class="group stone-card stone-card-hover rounded-3xl overflow-hidden flex flex-col h-full font-sans"> <!-- Image Header --> <div class="relative aspect-[16/10] bg-[#1A1816] overflow-hidden border-b border-[#D4A373]/15"> <div class="absolute top-4 left-4 z-10 flex gap-2"> <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-md bg-[#2E2A25] text-[#D4A373] border border-[#D4A373]/30"> Klassik </span> </div> <!-- Image Placeholder / Visual Container --> <div class="w-full h-full bg-gradient-to-br from-[#2E2A25] to-[#1A1816] flex items-center justify-center text-[#D4A373] font-serif group-hover:scale-105 transition-transform duration-500 p-6 text-center"> <div class="space-y-1"> <span class="text-3xl block">🏛️</span> <span class="text-sm font-semibold text-[#E6D5C3]">Romantik-Apartment Altstadt 1</span> </div> </div> </div> <!-- Content --> <div class="p-6 flex-1 flex flex-col justify-between space-y-6"> <div class="space-y-3"> <div class="flex items-center gap-3 text-xs font-medium text-[#A3978B]"> <span class="text-[#E6D5C3]">👤 Bis zu 2 Gäste</span> <span>•</span> <span class="text-[#E6D5C3]">📐 42 m²</span> </div> <h3 class="font-serif text-2xl font-bold text-[#E6D5C3] group-hover:text-emerald-400 transition-colors"> Romantik-Apartment Altstadt 1 </h3> <p class="text-[#A3978B] text-xs leading-relaxed line-clamp-2"> Gemütliches Nest für Paare im charmanten Klassik-Stil </p> <!-- Highlights list --> <ul class="space-y-1.5 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/10"> <li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Gemütliche Dachschrägen &amp; Fachwerk-Atmosphäre</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Kontaktloser Code-Check-in</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Ideal für Kurztrips &amp; Harz-Wochenenden</span> </li> </ul> </div> <!-- Actions --> <div class="pt-4 border-t border-[#D4A373]/15 flex items-center justify-between gap-3"> <a href="/apartments/romantik-1" class="text-xs font-semibold text-[#D4A373] hover:text-white transition-colors">
Details ansehen →
</a> <a href="#booking" class="px-4 py-2 rounded-xl bg-[#2D5A43] hover:bg-[#386d52] text-white text-xs font-bold transition-all shadow-md">
Buchen
</a> </div> </div> </div><div class="group stone-card stone-card-hover rounded-3xl overflow-hidden flex flex-col h-full font-sans"> <!-- Image Header --> <div class="relative aspect-[16/10] bg-[#1A1816] overflow-hidden border-b border-[#D4A373]/15"> <div class="absolute top-4 left-4 z-10 flex gap-2"> <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-md bg-[#2E2A25] text-[#D4A373] border border-[#D4A373]/30"> Klassik </span> </div> <!-- Image Placeholder / Visual Container --> <div class="w-full h-full bg-gradient-to-br from-[#2E2A25] to-[#1A1816] flex items-center justify-center text-[#D4A373] font-serif group-hover:scale-105 transition-transform duration-500 p-6 text-center"> <div class="space-y-1"> <span class="text-3xl block">🏛️</span> <span class="text-sm font-semibold text-[#E6D5C3]">Romantik-Apartment Altstadt 2</span> </div> </div> </div> <!-- Content --> <div class="p-6 flex-1 flex flex-col justify-between space-y-6"> <div class="space-y-3"> <div class="flex items-center gap-3 text-xs font-medium text-[#A3978B]"> <span class="text-[#E6D5C3]">👤 Bis zu 2 Gäste</span> <span>•</span> <span class="text-[#E6D5C3]">📐 40 m²</span> </div> <h3 class="font-serif text-2xl font-bold text-[#E6D5C3] group-hover:text-emerald-400 transition-colors"> Romantik-Apartment Altstadt 2 </h3> <p class="text-[#A3978B] text-xs leading-relaxed line-clamp-2"> Charmantes Klassik-Apartment mit italienischen Akzenten </p> <!-- Highlights list --> <ul class="space-y-1.5 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/10"> <li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Ruhige Ausrichtung zum Innenhof</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Bequemes Doppelbett &amp; gemütliche Sitzecke</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Inklusive Tee- &amp; Kaffeeset</span> </li> </ul> </div> <!-- Actions --> <div class="pt-4 border-t border-[#D4A373]/15 flex items-center justify-between gap-3"> <a href="/apartments/romantik-2" class="text-xs font-semibold text-[#D4A373] hover:text-white transition-colors">
Details ansehen →
</a> <a href="#booking" class="px-4 py-2 rounded-xl bg-[#2D5A43] hover:bg-[#386d52] text-white text-xs font-bold transition-all shadow-md">
Buchen
</a> </div> </div> </div><div class="group stone-card stone-card-hover rounded-3xl overflow-hidden flex flex-col h-full font-sans"> <!-- Image Header --> <div class="relative aspect-[16/10] bg-[#1A1816] overflow-hidden border-b border-[#D4A373]/15"> <div class="absolute top-4 left-4 z-10 flex gap-2"> <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-md bg-[#2E2A25] text-[#D4A373] border border-[#D4A373]/30"> Klassik </span> </div> <!-- Image Placeholder / Visual Container --> <div class="w-full h-full bg-gradient-to-br from-[#2E2A25] to-[#1A1816] flex items-center justify-center text-[#D4A373] font-serif group-hover:scale-105 transition-transform duration-500 p-6 text-center"> <div class="space-y-1"> <span class="text-3xl block">🏛️</span> <span class="text-sm font-semibold text-[#E6D5C3]">Boutique Studio Bäckerstraße</span> </div> </div> </div> <!-- Content --> <div class="p-6 flex-1 flex flex-col justify-between space-y-6"> <div class="space-y-3"> <div class="flex items-center gap-3 text-xs font-medium text-[#A3978B]"> <span class="text-[#E6D5C3]">👤 Bis zu 2 Gäste</span> <span>•</span> <span class="text-[#E6D5C3]">📐 32 m²</span> </div> <h3 class="font-serif text-2xl font-bold text-[#E6D5C3] group-hover:text-emerald-400 transition-colors"> Boutique Studio Bäckerstraße </h3> <p class="text-[#A3978B] text-xs leading-relaxed line-clamp-2"> Kompaktes, stilvolles Studio für Individualreisende &amp; Städtetrips </p> <!-- Highlights list --> <ul class="space-y-1.5 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/10"> <li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Optimales Preis-Leistungs-Verhältnis</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Zentrale Lage in der Bäckerstraße 18</span> </li><li class="flex items-center gap-2"> <span class="text-emerald-400 font-bold">✓</span> <span class="text-[#E6D5C3]">Kontaktlose Anreise rund um die Uhr</span> </li> </ul> </div> <!-- Actions --> <div class="pt-4 border-t border-[#D4A373]/15 flex items-center justify-between gap-3"> <a href="/apartments/studio" class="text-xs font-semibold text-[#D4A373] hover:text-white transition-colors">
Details ansehen →
</a> <a href="#booking" class="px-4 py-2 rounded-xl bg-[#2D5A43] hover:bg-[#386d52] text-white text-xs font-bold transition-all shadow-md">
Buchen
</a> </div> </div> </div> </div> </div> </section> <section id="trattoria" class="py-20 bg-[#24211D] border-b border-[#D4A373]/15"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <!-- Story & Offer --> <div class="space-y-6"> <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#C85A32]/20 border border-[#C85A32]/40 text-[#C85A32] text-xs font-bold uppercase tracking-wider"> <span class="w-2 h-2 rounded-full bg-[#C85A32]"></span> <span>Trattoria da Enzo • Erdgeschoss</span> </span> <h2 class="font-serif text-3xl sm:text-4xl font-bold text-[#E6D5C3]">
Sizilianische Kulinarik & Echte Lebensfreude
</h2> <p class="text-[#A3978B] text-sm sm:text-base leading-relaxed">
Direkt unter den Apartments befindet sich das schlagende Herz unseres Hauses: Alessandras Trattoria. Seit 1980 servieren wir ehrliche sizilianische Küche, frische hausgemachte Pasta und sorgfältig ausgewählte italienische Weine.
</p> <div class="stone-card p-6 rounded-2xl border border-[#C85A32]/30 space-y-3"> <h4 class="font-serif text-lg font-bold text-[#D4A373]">Exklusiver Gästevorteil</h4> <p class="text-[#E6D5C3] text-xs sm:text-sm leading-relaxed">
Gäste unserer Casa da Enzo Apartments genießen eine <strong>priorisierte Tischreservierung</strong>. Gib bei deiner Buchung einfach deinen Wunschtermin an oder rufen direkt in der Trattoria an.
</p> </div> </div> <!-- Hours & Contact Box --> <div class="stone-card rounded-3xl p-8 border border-[#C85A32]/40 space-y-6 text-center shadow-2xl"> <div class="w-16 h-16 rounded-full bg-[#C85A32]/20 border border-[#C85A32]/40 flex items-center justify-center mx-auto text-3xl">
🍷
</div> <h3 class="font-serif text-2xl font-bold text-[#E6D5C3]">Öffnungszeiten & Reservierung</h3> <div class="space-y-2 text-[#E6D5C3] text-sm border-y border-[#D4A373]/15 py-4"> <p><strong class="text-[#D4A373]">Dienstag – Sonntag:</strong> 17:00 – 22:30 Uhr</p> <p><strong class="text-[#D4A373]">Montag:</strong> Ruhetag</p> </div> <div class="space-y-3"> <a href="tel:+49532123456" class="block w-full py-4 rounded-xl bg-[#C85A32] hover:bg-[#b04d2a] text-white font-bold text-sm shadow-lg transition-all">
📞 Tisch reservieren: +49 5321 23456
</a> <p class="text-[11px] text-[#A3978B]">
Direkte Durchwahl zur Trattoria (Alessandra)
</p> </div> </div> </div> </div> </section> <section id="eviivo-guest" class="py-16 bg-[#1A1816] border-b border-[#D4A373]/15"> <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="stone-card rounded-3xl p-8 sm:p-10 border border-[#D4A373]/30 flex flex-col md:flex-row items-center justify-between gap-8 shadow-2xl"> <div class="space-y-3 text-center md:text-left"> <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#D4A373]/20 text-[#D4A373] text-xs font-bold uppercase tracking-wider">
📖 Für gebuchte Gäste
</span> <h2 class="font-serif text-2xl sm:text-3xl font-bold text-[#E6D5C3]">
Digitales Gästebuch (Eviivo Guest Directory)
</h2> <p class="text-[#A3978B] text-xs sm:text-sm max-w-xl">
Du hast bereits gebucht? Gib deine Eviivo-Buchungsnummer und deinen Nachnamen ein, um deinen Nuki PIN-Code, WLAN-Daten, Parktipps und den Hausguide direkt abzurufen.
</p> </div> <div class="shrink-0"> <button onclick="document.getElementById('eviivo-link-btn')?.click()" class="px-8 py-4 rounded-2xl bg-[#D4A373] hover:bg-[#e6c5a2] text-[#1A1816] font-bold text-sm transition-all shadow-xl">
Gästebuch öffnen ➔
</button> </div> </div> </div> </section> <section id="geschichte" class="py-20 bg-[#24211D] border-b border-[#D4A373]/15"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-8"> <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#D4A373]/20 border border-[#D4A373]/30 text-[#D4A373] text-xs font-bold uppercase tracking-wider"> <span>🇮🇹 Vincenzos Erbe seit 1980</span> </span> <h2 class="font-serif text-3xl sm:text-4xl font-bold text-[#E6D5C3]">
Sizilien trifft Goslar – Die Geschichte unserer Familie
</h2> <div class="space-y-4 text-[#E6D5C3] text-sm sm:text-base leading-relaxed text-left sm:text-center"> <p>
1980 legte unser Vater Vincenzo "Enzo" Campisi den Grundstein in der Bäckerstraße 18. Er brachte authentische italienische Herzlichkeit und sizilianische Rezepte mitten in die geschichtsträchtige Altstadt von Goslar.
</p> <p>
Heute führen wir – Sergio, Alja und Alessandra – das Erbe in der 2. Generation fort. Wir haben die historische Bausubstanz des Fachwerkgebäudes 2025 aufwendig saniert: 7 zeitgemäße, edle Boutique-Apartments sind entstanden, ergänzt durch unabhängigen Nuki-PIN-Code Check-in und persönliche Betreuung.
</p> </div> <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-6 border-t border-[#D4A373]/20 text-center"> <div class="p-4 rounded-2xl bg-[#1A1816] border border-[#D4A373]/20"> <div class="font-serif text-lg font-bold text-[#D4A373]">Alja</div> <div class="text-xs text-[#A3978B]">Apartments & Concierge</div> </div> <div class="p-4 rounded-2xl bg-[#1A1816] border border-[#D4A373]/20"> <div class="font-serif text-lg font-bold text-[#C85A32]">Alessandra</div> <div class="text-xs text-[#A3978B]">Trattoria & Küche</div> </div> <div class="p-4 rounded-2xl bg-[#1A1816] border border-[#D4A373]/20"> <div class="font-serif text-lg font-bold text-[#2D5A43]">Sergio</div> <div class="text-xs text-[#A3978B]">Familie & Gastfreundschaft</div> </div> </div> </div> </section> <section id="faq" class="py-20 bg-[#1A1816]"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12"> <div class="text-center space-y-2"> <span class="text-xs font-bold uppercase tracking-widest text-[#D4A373]">Gut zu wissen</span> <h2 class="font-serif text-3xl font-bold text-[#E6D5C3]">Häufig gestellte Fragen</h2> </div> <div class="space-y-6"> <div class="stone-card p-6 rounded-2xl border border-[#D4A373]/20 space-y-2"> <h3 class="font-serif text-lg font-bold text-[#E6D5C3]">Wie funktioniert der Check-in?</h3> <p class="text-[#A3978B] text-xs sm:text-sm leading-relaxed">
Der Check-in verläuft 100% kontaktlos und flexibel ab 15:00 Uhr. Vor deiner Anreise erhältst du deinen persönlichen Nuki-Smart-Lock-PIN-Code per WhatsApp oder E-Mail.
</p> </div> <div class="stone-card p-6 rounded-2xl border border-[#D4A373]/20 space-y-2"> <h3 class="font-serif text-lg font-bold text-[#E6D5C3]">An wen wende ich mich bei Fragen?</h3> <p class="text-[#A3978B] text-xs sm:text-sm leading-relaxed">
Wir pflegen eine klare Kontakttrennung:<br>
• <strong>Apartments & Buchungen:</strong> Alja per WhatsApp unter <a href="https://wa.me/4915207483196" target="_blank" class="text-emerald-400 underline">+49 1520 7483196</a><br>
• <strong>Trattoria & Tischreservierungen:</strong> Alessandra auf dem Festnetz unter <a href="tel:+49532123456" class="text-[#C85A32] underline">+49 5321 23456</a> </p> </div> <div class="stone-card p-6 rounded-2xl border border-[#D4A373]/20 space-y-2"> <h3 class="font-serif text-lg font-bold text-[#E6D5C3]">Wo kann ich in Goslar parken?</h3> <p class="text-[#A3978B] text-xs sm:text-sm leading-relaxed">
Du kannst direkt vor die Bäckerstraße 18 fahren, um dein Gepäck auszuladen. Öffentliche Parkplätze sowie das Parkhaus 'Kaiserpassage' befinden sich in ca. 2-3 Gehminuten Entfernung.
</p> </div> <div class="stone-card p-6 rounded-2xl border border-[#D4A373]/20 space-y-2"> <h3 class="font-serif text-lg font-bold text-[#E6D5C3]">Warum lohnt sich die Direktbuchung?</h3> <p class="text-[#A3978B] text-xs sm:text-sm leading-relaxed">
Bei einer Direktbuchung sparst du dir die 15% OTA-Gebühren von Booking.com oder Airbnb. Wir garantieren dir den besten verfügbaren Preis und bieten dir eine bevorzugte Tischreservierung in der Trattoria!
</p> </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>