style: overhaul design system with Airbnb luxury tokens and Bento layout

This commit is contained in:
leonardo committed 2026-09-16 23:33:47 +00:00
1 parent 8766ce1da8
commit 40a6f466a0
3 files changed
+214 -200

No files matched your search

+214 -200
View File
@@ -3,8 +3,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Casa da Enzo — Boutique Apartments & Trattoria in Goslar</title> <title>Casa da Enzo — Luxury Boutique Suites & Trattoria | Goslar</title>
<meta name="description" content="7 exklusive Boutique Suiten & Apartments in der historischen Altstadt Goslar (Bäckerstraße 18). Mit eigener sizilianischer Trattoria, 24/7 Nuki Check-in & Bestpreis-Garantie."> <meta name="description" content="7 exklusive Boutique Suiten im UNESCO-Fachwerkerbe von 1510. Echte sizilianische Trattoria, 24/7 Nuki Keyless Access & Bestpreis-Garantie in der Bäckerstraße 18, Goslar.">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>
tailwind.config = { tailwind.config = {
@@ -13,94 +15,114 @@
colors: { colors: {
siena: '#C25932', siena: '#C25932',
terracotta: '#A8431F', terracotta: '#A8431F',
sand: '#F9F6F0', sand: '#FAF8F5',
charcoal: '#1A1817', stonebg: '#F3EFEA',
olive: '#4A5240', charcoal: '#1C1917',
charcoalsoft: '#292524',
warmmuted: '#78716C',
gold: '#D4A359', gold: '#D4A359',
warmgray: '#EFECE6' olive: '#4A5240'
}, },
fontFamily: { fontFamily: {
serif: ['Playfair Display', 'Georgia', 'serif'], serif: ['Playfair Display', 'Georgia', 'serif'],
sans: ['Plus Jakarta Sans', 'Inter', 'sans-serif'], sans: ['Plus Jakarta Sans', 'Inter', 'sans-serif'],
},
boxShadow: {
'airbnb': '0 0 0 1px rgba(0,0,0,0.03), 0 2px 8px rgba(0,0,0,0.04), 0 12px 28px rgba(0,0,0,0.08)',
'airbnb-hover': '0 0 0 1px rgba(0,0,0,0.05), 0 8px 20px rgba(0,0,0,0.08), 0 20px 40px rgba(0,0,0,0.12)',
'floating': '0 20px 50px -10px rgba(28,25,23,0.25)'
} }
} }
} }
} }
</script> </script>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..800;1,400..800&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..800;1,400..800&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<style> <style>
body { background-color: #F9F6F0; color: #1A1817; font-family: 'Plus Jakarta Sans', sans-serif; } body { background-color: #FAF8F5; color: #1C1917; font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.01em; }
h1, h2, h3, .font-serif { font-family: 'Playfair Display', serif; } h1, h2, h3, .font-serif { font-family: 'Playfair Display', serif; }
/* Smooth custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FAF8F5; }
::-webkit-scrollbar-thumb { background: #D6D0C7; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #C25932; }
</style> </style>
</head> </head>
<body class="antialiased selection:bg-siena selection:text-white"> <body class="antialiased selection:bg-siena selection:text-white">
<!-- TOP BAR / ANNOUNCEMENT --> <!-- TOP PROMO BANNER -->
<div class="bg-charcoal text-sand text-xs py-2.5 px-4 text-center tracking-wide flex justify-center items-center gap-3 border-b border-white/10"> <div class="bg-charcoal text-sand text-xs py-2.5 px-6 text-center font-medium tracking-wide flex justify-center items-center gap-3 border-b border-white/10">
<span class="bg-siena text-white px-2.5 py-0.5 rounded-full text-[10px] font-bold tracking-wider uppercase">Direktbucher-Vorteil</span> <span class="bg-siena text-white px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider">Direktbucher-Vorteil</span>
<span>Bestpreis-Garantie + 1 Glas Willkommens-Aperitif in Alessandras Trattoria inklusive!</span> <span>Garantierter Bestpreis + 1 Glas Willkommens-Aperitif in Alessandras Trattoria inklusive</span>
</div> </div>
<!-- NAVIGATION HEADER --> <!-- STICKY GLASSMORPHIC HEADER -->
<header class="sticky top-0 z-50 bg-sand/95 backdrop-blur-md border-b border-warmgray transition-all"> <header class="sticky top-0 z-50 bg-sand/90 backdrop-blur-xl border-b border-stone-200/60 transition-all">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between"> <div class="max-w-7xl mx-auto px-6 md:px-10 h-20 flex items-center justify-between">
<a href="#" class="flex items-center gap-3 group"> <a href="#" class="flex items-center gap-3.5 group">
<span class="font-serif text-2xl md:text-3xl font-bold tracking-tight text-charcoal group-hover:text-siena transition-colors">Casa da Enzo</span> <span class="font-serif text-2xl md:text-3xl font-bold tracking-tight text-charcoal group-hover:text-siena transition-colors">Casa da Enzo</span>
<span class="text-[11px] uppercase tracking-widest text-siena border-l border-siena/30 pl-3 hidden sm:inline font-semibold">Boutique Apartments & Trattoria</span> <span class="h-4 w-px bg-stone-300 hidden sm:block"></span>
<span class="text-[11px] uppercase tracking-widest text-siena font-semibold hidden sm:block">Boutique Suites & Trattoria</span>
</a> </a>
<nav class="hidden md:flex items-center gap-8 text-sm font-medium text-charcoal/80"> <nav class="hidden md:flex items-center gap-9 text-sm font-medium text-charcoal/80">
<a href="#apartments" class="hover:text-siena transition-colors">7 Suiten & Apartments</a> <a href="#suiten" class="hover:text-siena transition-colors">7 Suiten</a>
<a href="#vorteile" class="hover:text-siena transition-colors">Direktbucher-Vorteile</a> <a href="#vorteile" class="hover:text-siena transition-colors">Vorteile</a>
<a href="#story" class="hover:text-siena transition-colors">Geschichte</a> <a href="#story" class="hover:text-siena transition-colors">Geschichte</a>
<a href="#trattoria" class="hover:text-siena transition-colors">Trattoria</a> <a href="#trattoria" class="hover:text-siena transition-colors">Trattoria</a>
<a href="#faq" class="hover:text-siena transition-colors">Anreise & FAQ</a> <a href="#faq" class="hover:text-siena transition-colors">Anreise & FAQ</a>
</nav> </nav>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<a href="https://wa.me/4915207483196" target="_blank" class="hidden lg:flex items-center gap-2 text-xs font-semibold text-olive bg-olive/10 hover:bg-olive/20 px-3 py-2 rounded-lg transition-colors"> <a href="https://wa.me/4915207483196" target="_blank" class="hidden lg:flex items-center gap-2 text-xs font-semibold text-olive bg-olive/10 hover:bg-olive/20 px-3.5 py-2 rounded-full transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg> <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg>
<span>WhatsApp Concierge</span> <span>WhatsApp Concierge</span>
</a> </a>
<a href="#booking" class="bg-siena hover:bg-terracotta text-white px-5 py-2.5 rounded-lg text-sm font-semibold transition-all shadow-sm hover:shadow-md"> <a href="#booking" class="bg-siena hover:bg-terracotta text-white px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm hover:shadow-md hover:scale-[1.02]">
Suiten Buchen Jetzt Buchen
</a> </a>
</div> </div>
</div> </div>
</header> </header>
<!-- HERO SECTION --> <!-- CINEMATIC HERO SECTION -->
<section class="relative min-h-[85vh] flex items-center justify-center bg-charcoal text-sand overflow-hidden"> <section class="relative min-h-[88vh] flex items-center justify-center bg-charcoal text-sand overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-t from-charcoal via-charcoal/65 to-charcoal/30 z-10"></div> <!-- Immersive Background Image -->
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2000&q=80')] bg-cover bg-center opacity-40"></div> <div class="absolute inset-0 bg-gradient-to-t from-charcoal via-charcoal/60 to-charcoal/30 z-10"></div>
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2400&q=85')] bg-cover bg-center opacity-50 scale-105"></div>
<div class="relative z-20 max-w-5xl mx-auto text-center px-6 py-20"> <div class="relative z-20 max-w-5xl mx-auto text-center px-6 py-24">
<span class="text-gold font-semibold text-xs uppercase tracking-widest mb-4 inline-block bg-white/10 border border-gold/40 px-4 py-1.5 rounded-full backdrop-blur-md"> <span class="inline-flex items-center gap-2 bg-white/10 border border-white/20 text-gold font-semibold text-xs uppercase tracking-widest px-4 py-1.5 rounded-full backdrop-blur-md mb-6">
Bäckerstraße 18 • UNESCO-Altstadt Goslar <span class="w-2 h-2 rounded-full bg-siena animate-pulse"></span>
Bäckerstraße 18 • UNESCO-Weltkulturerbe Goslar
</span> </span>
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight text-white mb-6 leading-[1.12]">
Sizilianische Gastfreundschaft im Herzen von Goslar. <h1 class="text-4xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-white mb-6 leading-[1.1] font-serif">
Sizilianische Gastfreundschaft.<br class="hidden sm:block"> Inmitten Goslars Altstadt.
</h1> </h1>
<p class="text-lg md:text-xl text-sand/80 max-w-2xl mx-auto mb-10 font-light leading-relaxed">
7 liebevoll restaurierte Boutique-Suites im Fachwerkerbe von 1510. Echte Trattoria im Erdgeschoss, 24/7 Nuki Keyless Check-in und unmittelbare Lage am historischen Marktplatz. <p class="text-base sm:text-xl text-sand/85 max-w-2xl mx-auto mb-12 font-light leading-relaxed">
7 restaurierte Boutique-Suiten im Fachwerkerbe von 1510. Echte Trattoria im Haus, 24/7 Nuki Keyless Check-in & unvergesslicher Harz-Urlaub.
</p> </p>
<!-- QUICK BOOKING BAR (DIRECT CONVERSION ENGINE) --> <!-- FLOATING LUXURY BOOKING BAR -->
<div id="booking" class="bg-white/95 backdrop-blur-lg p-5 md:p-6 rounded-2xl shadow-2xl text-charcoal max-w-4xl mx-auto border border-white/20"> <div id="booking" class="bg-white/95 backdrop-blur-2xl p-4 sm:p-6 rounded-3xl shadow-floating text-charcoal max-w-4xl mx-auto border border-white/40">
<form class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end"> <form class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3.5 items-end">
<div class="text-left"> <div class="text-left bg-stonebg/60 p-3 rounded-2xl border border-stone-200/80">
<label class="block text-xs font-bold text-charcoal/70 uppercase tracking-wider mb-1.5">Anreise</label> <label class="block text-[10px] font-bold text-warmmuted uppercase tracking-wider mb-1">Anreise</label>
<input type="date" class="w-full bg-sand/60 border border-warmgray rounded-lg p-3 text-sm font-medium focus:ring-2 focus:ring-siena outline-none"> <input type="date" class="w-full bg-transparent font-medium text-sm text-charcoal outline-none cursor-pointer">
</div> </div>
<div class="text-left"> <div class="text-left bg-stonebg/60 p-3 rounded-2xl border border-stone-200/80">
<label class="block text-xs font-bold text-charcoal/70 uppercase tracking-wider mb-1.5">Abreise</label> <label class="block text-[10px] font-bold text-warmmuted uppercase tracking-wider mb-1">Abreise</label>
<input type="date" class="w-full bg-sand/60 border border-warmgray rounded-lg p-3 text-sm font-medium focus:ring-2 focus:ring-siena outline-none"> <input type="date" class="w-full bg-transparent font-medium text-sm text-charcoal outline-none cursor-pointer">
</div> </div>
<div class="text-left"> <div class="text-left bg-stonebg/60 p-3 rounded-2xl border border-stone-200/80">
<label class="block text-xs font-bold text-charcoal/70 uppercase tracking-wider mb-1.5">Gäste / suite</label> <label class="block text-[10px] font-bold text-warmmuted uppercase tracking-wider mb-1">Gäste & Suite</label>
<select class="w-full bg-sand/60 border border-warmgray rounded-lg p-3 text-sm font-medium focus:ring-2 focus:ring-siena outline-none"> <select class="w-full bg-transparent font-medium text-sm text-charcoal outline-none cursor-pointer">
<option>2 Erwachsene (1 Suite)</option> <option>2 Erwachsene (1 Suite)</option>
<option>1 Erwachsener</option> <option>1 Erwachsener</option>
<option>Familie (2 Erw. + Kinder)</option> <option>Familie (2 Erw. + Kinder)</option>
@@ -108,9 +130,9 @@
</select> </select>
</div> </div>
<div> <div>
<button type="submit" class="w-full bg-siena hover:bg-terracotta text-white font-bold py-3.5 px-6 rounded-lg text-sm transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2"> <button type="submit" class="w-full bg-siena hover:bg-terracotta text-white font-bold py-3.5 px-6 rounded-2xl text-sm transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2 group">
<span>Bestpreis Prüfen</span> <span>Bestpreis Prüfen</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg> <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
</button> </button>
</div> </div>
</form> </form>
@@ -118,180 +140,174 @@
</div> </div>
</section> </section>
<!-- DIRECT BOOKER BENEFITS --> <!-- DIRECT BOOKER TRUST SECTION -->
<section id="vorteile" class="py-20 bg-sand border-b border-warmgray"> <section id="vorteile" class="py-24 bg-sand border-b border-stone-200/60">
<div class="max-w-7xl mx-auto px-6"> <div class="max-w-7xl mx-auto px-6 md:px-10">
<div class="text-center max-w-2xl mx-auto mb-12"> <div class="text-center max-w-2xl mx-auto mb-16">
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-2 inline-block">Warum direkt bei uns buchen?</span> <span class="text-siena font-semibold text-xs uppercase tracking-widest mb-3 inline-block">100% Direktbucher-Vorteil</span>
<h2 class="text-3xl font-bold text-charcoal">Ihre Vorteile auf der offiziellen Website</h2> <h2 class="text-3xl md:text-4xl font-bold text-charcoal font-serif">Exklusive Privilegien der Direktbuchung</h2>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="flex items-start gap-4 p-8 bg-white rounded-2xl border border-warmgray shadow-sm hover:shadow-md transition-shadow"> <div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all">
<div class="w-12 h-12 rounded-xl bg-siena/10 text-siena flex items-center justify-center shrink-0"> <div class="w-12 h-12 rounded-2xl bg-siena/10 text-siena flex items-center justify-center mb-6">
<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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div> </div>
<div> <h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Bestpreis & Willkommens-Drink</h3>
<h3 class="font-serif font-bold text-xl mb-1.5 text-charcoal">Garantierter Bestpreis & Aperitif</h3> <p class="text-sm text-warmmuted leading-relaxed">Immer 5–10% günstiger als auf Booking.com & Airbnb. Inklusive 1 Glas Prosecco oder Aperitif in Alessandras Trattoria.</p>
<p class="text-sm text-charcoal/70 leading-relaxed">Sparen Sie 5–10% gegenüber Booking.com & Airbnb. Zusätzlich erhalten Sie 1 Glas Willkommens-Aperitif in Alessandras Trattoria gratis.</p>
</div>
</div> </div>
<div class="flex items-start gap-4 p-8 bg-white rounded-2xl border border-warmgray shadow-sm hover:shadow-md transition-shadow"> <div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all">
<div class="w-12 h-12 rounded-xl bg-siena/10 text-siena flex items-center justify-center shrink-0"> <div class="w-12 h-12 rounded-2xl bg-siena/10 text-siena flex items-center justify-center mb-6">
<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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 0121 9z"/></svg> <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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 0121 9z"/></svg>
</div> </div>
<div> <h3 class="font-serif font-bold text-xl mb-2 text-charcoal">24/7 Digitaler Keyless Access</h3>
<h3 class="font-serif font-bold text-xl mb-1.5 text-charcoal">24/7 Nuki Keyless Check-in</h3> <p class="text-sm text-warmmuted leading-relaxed">Völlig flexibel anreisen. Ihr Nuki-PIN-Code kommt am Anreisetag um 14:00 Uhr per SMS/WhatsApp. Kein Anreise-Stress.</p>
<p class="text-sm text-charcoal/70 leading-relaxed">Reisen Sie völlig flexibel an. Ihr persönlicher Nuki-PIN-Code öffnet die Haustür und Ihr Apartment ab 15:00 Uhr rund um die Uhr.</p>
</div>
</div> </div>
<div class="flex items-start gap-4 p-8 bg-white rounded-2xl border border-warmgray shadow-sm hover:shadow-md transition-shadow"> <div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all">
<div class="w-12 h-12 rounded-xl bg-siena/10 text-siena flex items-center justify-center shrink-0"> <div class="w-12 h-12 rounded-2xl bg-siena/10 text-siena flex items-center justify-center mb-6">
<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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/></svg> <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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/></svg>
</div> </div>
<div> <h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Historische Altstadt-Lage</h3>
<h3 class="font-serif font-bold text-xl mb-1.5 text-charcoal">Historische Top-Altstadtlage</h3> <p class="text-sm text-warmmuted leading-relaxed">Bäckerstraße 18: Ruhig im Fachwerk-Areal gelegen. Nur 3 Gehminuten zum historischen Marktplatz und der Kaiserpfalz.</p>
<p class="text-sm text-charcoal/70 leading-relaxed">Bäckerstraße 18: Ruhiges Fachwerk-Areal, nur 3 Gehminuten zum Marktplatz, der Kaiserpfalz und allen Altstadt-Highlight-Spots.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- APARTMENTS CATALOGUE (7 SUITES) --> <!-- APARTMENTS CATALOGUE (7 SUITES BENTO GRID) -->
<section id="apartments" class="py-24 bg-sand"> <section id="suiten" class="py-28 bg-sand">
<div class="max-w-7xl mx-auto px-6"> <div class="max-w-7xl mx-auto px-6 md:px-10">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16"> <div class="flex flex-col md:flex-row md:items-end justify-between mb-16">
<div> <div>
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-2 inline-block">7 Refugien der Erholung</span> <span class="text-siena font-semibold text-xs uppercase tracking-widest mb-3 inline-block">7 Refugien der Erholung</span>
<h2 class="text-3xl md:text-5xl font-bold text-charcoal">Unsere Suiten & Apartments</h2> <h2 class="text-3xl md:text-5xl font-bold text-charcoal font-serif">Unsere Suiten & Apartments</h2>
</div> </div>
<p class="text-charcoal/70 max-w-md mt-4 md:mt-0 text-sm leading-relaxed"> <p class="text-warmmuted max-w-md mt-4 md:mt-0 text-sm leading-relaxed">
Fachwerk-Erbe aus dem 16. Jahrhundert trifft auf modernen Wohnkomfort. Boxspringbetten, Design-Bäder, Highspeed-Glasfaser-WLAN & sizilianische Details. Historischer Charme aus dem Jahr 1510 trifft auf modernen Wohnkomfort, Boxspringbetten, Design-Bäder, Highspeed-Glasfaser & mediterranes Flair.
</p> </p>
</div> </div>
<!-- 7 APARTMENT CARDS GRID --> <!-- BENTO / CARD GRID -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- SUITE 1 --> <!-- SUITE 1 -->
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group"> <div class="bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all group">
<div class="relative h-64 overflow-hidden bg-charcoal/10"> <div class="relative h-72 overflow-hidden bg-stonebg">
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full">Vorderhaus Suite</span> <span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3.5 py-1 rounded-full">Vorderhaus Suite</span>
<img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=800&q=80" alt="Suite 1 Balkon" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=1000&q=80" alt="Suite 1 Balkon" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div> </div>
<div class="p-6"> <div class="p-7">
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 1 — Balkon & Altstadtblick</h3> <h3 class="font-serif font-bold text-2xl mb-1 text-charcoal">Suite 1 — Balkon & Altstadtblick</h3>
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 4 Personen • 55 m² • Privater Balkon</p> <p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 4 Personen • 55 m² • Privater Balkon</p>
<p class="text-sm text-charcoal/70 mb-6 line-clamp-2">Lichtdurchflutete Loggia-Suite im 1. OG mit Blick in die historische Bäckerstraße. Großer Wohnraum, Designer-Badezimmer und Vollküche.</p> <p class="text-sm text-warmmuted mb-6 leading-relaxed">Lichtdurchflutete Loggia-Suite im 1. OG mit Blick in die Bäckerstraße. Großer Wohnbereich, Designer-Bad & Vollküche.</p>
<div class="flex items-center justify-between pt-4 border-t border-warmgray"> <div class="flex items-center justify-between pt-5 border-t border-stone-200/60">
<div> <div>
<span class="text-xs text-charcoal/50 block">Direktbucher ab</span> <span class="text-[11px] text-warmmuted block">Direktbucher ab</span>
<span class="font-serif font-bold text-xl text-charcoal">119 € <span class="text-xs font-sans font-normal text-charcoal/60">/ Nacht</span></span> <span class="font-serif font-bold text-2xl text-charcoal">119 € <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
</div> </div>
<a href="#booking" class="bg-sand hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Details & Buchen</a> <a href="#booking" class="bg-stonebg hover:bg-siena hover:text-white text-charcoal px-5 py-2.5 rounded-full text-xs font-bold transition-all">Details & Buchen</a>
</div> </div>
</div> </div>
</div> </div>
<!-- SUITE 2 --> <!-- SUITE 2 -->
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group"> <div class="bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all group">
<div class="relative h-64 overflow-hidden bg-charcoal/10"> <div class="relative h-72 overflow-hidden bg-stonebg">
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full">Sonnendeck Suite</span> <span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3.5 py-1 rounded-full">Sonnendeck Suite</span>
<img src="https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=800&q=80" alt="Suite 2 Terrasse" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <img src="https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=1000&q=80" alt="Suite 2 Terrasse" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div> </div>
<div class="p-6"> <div class="p-7">
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 2 — Private Terrasse</h3> <h3 class="font-serif font-bold text-2xl mb-1 text-charcoal">Suite 2 — Private Terrasse</h3>
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 48 m² • Hof-Terrasse</p> <p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 48 m² • Hof-Terrasse</p>
<p class="text-sm text-charcoal/70 mb-6 line-clamp-2">Ruhige Oase zum geschützten Innenhof. Exklusive Sonnenterrasse, mediterranes Flair und vollkommene Ungestörtheit für Paare.</p> <p class="text-sm text-warmmuted mb-6 leading-relaxed">Ruhige Oase zum geschützten Innenhof. Exklusive Sonnenterrasse, mediterranes Ambiente & vollkommene Ungestörtheit.</p>
<div class="flex items-center justify-between pt-4 border-t border-warmgray"> <div class="flex items-center justify-between pt-5 border-t border-stone-200/60">
<div> <div>
<span class="text-xs text-charcoal/50 block">Direktbucher ab</span> <span class="text-[11px] text-warmmuted block">Direktbucher ab</span>
<span class="font-serif font-bold text-xl text-charcoal">129 € <span class="text-xs font-sans font-normal text-charcoal/60">/ Nacht</span></span> <span class="font-serif font-bold text-2xl text-charcoal">129 € <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
</div> </div>
<a href="#booking" class="bg-sand hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Details & Buchen</a> <a href="#booking" class="bg-stonebg hover:bg-siena hover:text-white text-charcoal px-5 py-2.5 rounded-full text-xs font-bold transition-all">Details & Buchen</a>
</div> </div>
</div> </div>
</div> </div>
<!-- SUITE 3 --> <!-- SUITE 3 -->
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group"> <div class="bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all group">
<div class="relative h-64 overflow-hidden bg-charcoal/10"> <div class="relative h-72 overflow-hidden bg-stonebg">
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full">Komfort Suite</span> <span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3.5 py-1 rounded-full">Komfort Suite</span>
<img src="https://images.unsplash.com/photo-1618773928121-c32242e63f39?auto=format&fit=crop&w=800&q=80" alt="Suite 3 Komfort" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <img src="https://images.unsplash.com/photo-1618773928121-c32242e63f39?auto=format&fit=crop&w=1000&q=80" alt="Suite 3" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div> </div>
<div class="p-6"> <div class="p-7">
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 3 — Altstadt Komfort</h3> <h3 class="font-serif font-bold text-2xl mb-1 text-charcoal">Suite 3 — Altstadt Komfort</h3>
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 4 Personen • 50 m² • Regendusche</p> <p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 4 Personen • 50 m² • Walk-In Dusche</p>
<p class="text-sm text-charcoal/70 mb-6 line-clamp-2">Klassischer Harzer Fachwerk-Stil kombiniert mit edler Ausstattung. Großes Boxspringbett, Schlafsofa und bodengleiche Walk-In Dusche.</p> <p class="text-sm text-warmmuted mb-6 leading-relaxed">Fachwerk-Eleganz mit bodengleicher Regendusche, Kingsize-Boxspringbett & Schlafcouch für Familien oder Freunde.</p>
<div class="flex items-center justify-between pt-4 border-t border-warmgray"> <div class="flex items-center justify-between pt-5 border-t border-stone-200/60">
<div> <div>
<span class="text-xs text-charcoal/50 block">Direktbucher ab</span> <span class="text-[11px] text-warmmuted block">Direktbucher ab</span>
<span class="font-serif font-bold text-xl text-charcoal">109 € <span class="text-xs font-sans font-normal text-charcoal/60">/ Nacht</span></span> <span class="font-serif font-bold text-2xl text-charcoal">109 € <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
</div> </div>
<a href="#booking" class="bg-sand hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Details & Buchen</a> <a href="#booking" class="bg-stonebg hover:bg-siena hover:text-white text-charcoal px-5 py-2.5 rounded-full text-xs font-bold transition-all">Details & Buchen</a>
</div> </div>
</div> </div>
</div> </div>
<!-- SUITE 4 --> <!-- SUITE 4 -->
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group"> <div class="bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all group">
<div class="relative h-64 overflow-hidden bg-charcoal/10"> <div class="relative h-72 overflow-hidden bg-stonebg">
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full">Workspace Suite</span> <span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3.5 py-1 rounded-full">Workspace Suite</span>
<img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?auto=format&fit=crop&w=800&q=80" alt="Suite 4 Workspace" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?auto=format&fit=crop&w=1000&q=80" alt="Suite 4" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div> </div>
<div class="p-6"> <div class="p-7">
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 4 — Workspace & Balkon</h3> <h3 class="font-serif font-bold text-2xl mb-1 text-charcoal">Suite 4 — Workspace & Balkon</h3>
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 52 m² • Workstation & Balkon</p> <p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 52 m² • 1 Gbit/s Glasfaser</p>
<p class="text-sm text-charcoal/70 mb-6 line-clamp-2">Ideal für Workation & Long-Stays. Ergonomischer Arbeitsplatz, 1 Gbit/s Glasfaser-WLAN, Balkon und Espresso-Kaffeebar.</p> <p class="text-sm text-warmmuted mb-6 leading-relaxed">Perfekt für Workation. Ergonomischer Schreibtisch, Highspeed-WLAN, Espresso-Bar & eigener Balkon.</p>
<div class="flex items-center justify-between pt-4 border-t border-warmgray"> <div class="flex items-center justify-between pt-5 border-t border-stone-200/60">
<div> <div>
<span class="text-xs text-charcoal/50 block">Direktbucher ab</span> <span class="text-[11px] text-warmmuted block">Direktbucher ab</span>
<span class="font-serif font-bold text-xl text-charcoal">115 € <span class="text-xs font-sans font-normal text-charcoal/60">/ Nacht</span></span> <span class="font-serif font-bold text-2xl text-charcoal">115 € <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
</div> </div>
<a href="#booking" class="bg-sand hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Details & Buchen</a> <a href="#booking" class="bg-stonebg hover:bg-siena hover:text-white text-charcoal px-5 py-2.5 rounded-full text-xs font-bold transition-all">Details & Buchen</a>
</div> </div>
</div> </div>
</div> </div>
<!-- ROMANTIK 1 --> <!-- ROMANTIK 1 -->
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group"> <div class="bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all group">
<div class="relative h-64 overflow-hidden bg-charcoal/10"> <div class="relative h-72 overflow-hidden bg-stonebg">
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full">Romantik Apartment</span> <span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3.5 py-1 rounded-full">Romantik Suite</span>
<img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&w=800&q=80" alt="Romantik 1" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&w=1000&q=80" alt="Romantik 1" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div> </div>
<div class="p-6"> <div class="p-7">
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Romantik Suite 1 — Kaminzauber</h3> <h3 class="font-serif font-bold text-2xl mb-1 text-charcoal">Romantik Suite 1 — Kaminzauber</h3>
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 42 m² • Eichengebälk</p> <p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 42 m² • Original Eichengebälk</p>
<p class="text-sm text-charcoal/70 mb-6 line-clamp-2">Original freigelegtes Eichengebälk aus 1510, stimmungsvoller Kaminfeuer-Effekt, Samt-Garnitur und romantische Beleuchtung.</p> <p class="text-sm text-warmmuted mb-6 leading-relaxed">Freigelegtes Eichengebälk aus 1510, stimmungsvoller Kaminfeuer-Effekt, Samt-Sessel & stimmungsvolle Beleuchtung.</p>
<div class="flex items-center justify-between pt-4 border-t border-warmgray"> <div class="flex items-center justify-between pt-5 border-t border-stone-200/60">
<div> <div>
<span class="text-xs text-charcoal/50 block">Direktbucher ab</span> <span class="text-[11px] text-warmmuted block">Direktbucher ab</span>
<span class="font-serif font-bold text-xl text-charcoal">99 € <span class="text-xs font-sans font-normal text-charcoal/60">/ Nacht</span></span> <span class="font-serif font-bold text-2xl text-charcoal">99 € <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
</div> </div>
<a href="#booking" class="bg-sand hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Details & Buchen</a> <a href="#booking" class="bg-stonebg hover:bg-siena hover:text-white text-charcoal px-5 py-2.5 rounded-full text-xs font-bold transition-all">Details & Buchen</a>
</div> </div>
</div> </div>
</div> </div>
<!-- ROMANTIK 2 --> <!-- STUDIO -->
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group"> <div class="bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all group">
<div class="relative h-64 overflow-hidden bg-charcoal/10"> <div class="relative h-72 overflow-hidden bg-stonebg">
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full">Romantik Apartment</span> <span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3.5 py-1 rounded-full">Hof Studio</span>
<img src="https://images.unsplash.com/photo-1591088398332-8a7791972843?auto=format&fit=crop&w=800&q=80" alt="Romantik 2" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <img src="https://images.unsplash.com/photo-1591088398332-8a7791972843?auto=format&fit=crop&w=1000&q=80" alt="Studio" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div> </div>
<div class="p-6"> <div class="p-7">
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Romantik Suite 2 — Kuschelnest</h3> <h3 class="font-serif font-bold text-2xl mb-1 text-charcoal">Hof-Studio Bäckerstraße</h3>
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 38 m² • Innenhoflage</p> <p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 32 m² • Ruhige Hoflage</p>
<p class="text-sm text-charcoal/70 mb-6 line-clamp-2">Ein idyllischer Rückzugsort mit warmen Erdtönen, samtigen Textilien und absolut ruhiger Lage zum historischen Hofbereich.</p> <p class="text-sm text-warmmuted mb-6 leading-relaxed">Kompaktes, erstklassig ausgestattetes Designer-Studio im Innenhof. Ideal für Wochenendtrips & Alleinreisende.</p>
<div class="flex items-center justify-between pt-4 border-t border-warmgray"> <div class="flex items-center justify-between pt-5 border-t border-stone-200/60">
<div> <div>
<span class="text-xs text-charcoal/50 block">Direktbucher ab</span> <span class="text-[11px] text-warmmuted block">Direktbucher ab</span>
<span class="font-serif font-bold text-xl text-charcoal">89 € <span class="text-xs font-sans font-normal text-charcoal/60">/ Nacht</span></span> <span class="font-serif font-bold text-2xl text-charcoal">79 € <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
</div> </div>
<a href="#booking" class="bg-sand hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Details & Buchen</a> <a href="#booking" class="bg-stonebg hover:bg-siena hover:text-white text-charcoal px-5 py-2.5 rounded-full text-xs font-bold transition-all">Details & Buchen</a>
</div> </div>
</div> </div>
</div> </div>
@@ -300,115 +316,113 @@
</div> </div>
</section> </section>
<!-- STORYTELLING: DIE GESCHICHTE VON ENZO --> <!-- STORYTELLING SECTION -->
<section id="story" class="py-24 bg-white border-y border-warmgray"> <section id="story" class="py-28 bg-white border-y border-stone-200/60">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <div class="max-w-7xl mx-auto px-6 md:px-10 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div> <div>
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-3 inline-block">Tradition & Herzblut</span> <span class="text-siena font-semibold text-xs uppercase tracking-widest mb-3 inline-block">Tradition & Herzblut</span>
<h2 class="text-3xl md:text-5xl font-bold mb-6 text-charcoal leading-tight"> <h2 class="text-3xl md:text-5xl font-bold mb-6 text-charcoal font-serif leading-tight">
Vincenzos Erbe: Von Palazzolo Acreide nach Goslar. Vincenzos Erbe: Von Palazzolo Acreide nach Goslar.
</h2> </h2>
<p class="text-charcoal/80 text-base leading-relaxed mb-6"> <p class="text-charcoal/80 text-base leading-relaxed mb-6">
Casa da Enzo ist keine namenlose Ferienwohnungs-Kette, sondern ein echtes Familienprojekt. Benannt nach Vincenzo „Enzo“ Campisi, tragen die 7 Suiten und die Trattoria die Seele Siziliens mitten in das raue Fachwerkerbe des Harzes. Casa da Enzo ist keine namenlose Ferienwohnungs-Kette, sondern ein echtes Familienprojekt. Benannt nach Vincenzo „Enzo“ Campisi, tragen die 7 Suiten und die Trattoria die Seele Siziliens mitten in das raue Fachwerkerbe des Harzes.
</p> </p>
<p class="text-charcoal/70 text-sm leading-relaxed mb-8"> <p class="text-warmmuted text-sm leading-relaxed mb-8">
Heute führen Sergio und Alja Campisi das Haus in der Bäckerstraße 18 mit persönlicher Leidenschaft: Ein Ort, an dem sizilianische Wärme, handgemachte Pasta und unverfälschte Gastfreundschaft auf moderne Technologie treffen. Heute führen Sergio und Alja Campisi das Haus in der Bäckerstraße 18 mit persönlicher Leidenschaft: Ein Ort, an dem sizilianische Wärme, handgemachte Pasta und unverfälschte Gastfreundschaft auf moderne Technologie treffen.
</p> </p>
<div class="p-6 bg-sand rounded-xl border border-warmgray flex items-center gap-4"> <div class="p-6 bg-sand rounded-2xl border border-stone-200/80 flex items-center gap-5">
<div class="w-12 h-12 rounded-full bg-siena/20 text-siena font-serif font-bold text-xl flex items-center justify-center shrink-0">V</div> <div class="w-12 h-12 rounded-full bg-siena/15 text-siena font-serif font-bold text-xl flex items-center justify-center shrink-0">V</div>
<p class="text-xs italic text-charcoal/80">„Gastfreundschaft bedeutet bei uns nicht, einen Schlüssel auszuhändigen — sondern dem Gast das Gefühl zu geben, nach Hause zu kommen.“</p> <p class="text-xs italic text-charcoal/90 leading-relaxed">„Gastfreundschaft bedeutet bei uns nicht, einen Schlüssel auszuhändigen — sondern dem Gast das Gefühl zu geben, nach Hause zu kommen.“</p>
</div> </div>
</div> </div>
<div class="relative"> <div class="relative">
<div class="rounded-2xl overflow-hidden border border-warmgray shadow-2xl"> <div class="rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb-hover">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=1000&q=80" alt="Sizilianische Gastfreundschaft" class="w-full h-auto object-cover"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=1200&q=85" alt="Sizilianische Gastfreundschaft" class="w-full h-auto object-cover">
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- TRATTORIA KULINARIK --> <!-- TRATTORIA & FOOD SECTION -->
<section id="trattoria" class="py-24 bg-charcoal text-sand relative overflow-hidden"> <section id="trattoria" class="py-28 bg-charcoal text-sand relative overflow-hidden">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <div class="max-w-7xl mx-auto px-6 md:px-10 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div> <div>
<span class="text-gold font-semibold text-xs uppercase tracking-widest mb-3 inline-block">Alessandras Kulinarik</span> <span class="text-gold font-semibold text-xs uppercase tracking-widest mb-3 inline-block">Alessandras Kulinarik</span>
<h2 class="text-3xl md:text-5xl font-bold mb-6 text-white leading-tight"> <h2 class="text-3xl md:text-5xl font-bold mb-6 text-white font-serif leading-tight">
Sizilien im Erdgeschoss: Echte Trattoria-Kultur. Sizilien im Erdgeschoss: Echte Trattoria-Kultur.
</h2> </h2>
<p class="text-sand/80 text-base leading-relaxed mb-6 font-light"> <p class="text-sand/85 text-base leading-relaxed mb-8 font-light">
Bei Casa da Enzo wohnen Sie nicht nur – Sie genießen. Im Erdgeschoss kocht Alessandra täglich frische, hausgemachte Pasta, sizilianische Spezialitäten nach Familienrezepten und serviert handverlesene Weine aus den Hängen des Ätna. Bei Casa da Enzo wohnen Sie nicht nur – Sie genießen. Im Erdgeschoss kocht Alessandra täglich frische, hausgemachte Pasta, sizilianische Spezialitäten nach Familienrezepten und serviert handverlesene Weine aus den Hängen des Ätna.
</p> </p>
<div class="space-y-4 mb-8"> <div class="space-y-4 mb-10">
<div class="flex items-center gap-3 text-sm text-sand/90"> <div class="flex items-center gap-3.5 text-sm text-sand/90">
<span class="w-2.5 h-2.5 rounded-full bg-gold"></span> <span class="w-2.5 h-2.5 rounded-full bg-gold"></span>
<span>Täglich frische Tagliatelle, Ravioli, Arancini & Cannoli</span> <span>Täglich frische Tagliatelle, Ravioli, Arancini & Cannoli</span>
</div> </div>
<div class="flex items-center gap-3 text-sm text-sand/90"> <div class="flex items-center gap-3.5 text-sm text-sand/90">
<span class="w-2.5 h-2.5 rounded-full bg-gold"></span> <span class="w-2.5 h-2.5 rounded-full bg-gold"></span>
<span>Willkommens-Aperitif für alle Direktbucher gratis</span> <span>Willkommens-Aperitif für alle Direktbucher gratis</span>
</div> </div>
<div class="flex items-center gap-3 text-sm text-sand/90"> <div class="flex items-center gap-3.5 text-sm text-sand/90">
<span class="w-2.5 h-2.5 rounded-full bg-gold"></span> <span class="w-2.5 h-2.5 rounded-full bg-gold"></span>
<span>Garantierte Tischreservierung für Apartment-Gäste</span> <span>Garantierte Tischreservierung für Apartment-Gäste</span>
</div> </div>
</div> </div>
<div class="flex flex-wrap gap-4"> <a href="tel:+4915207483196" class="inline-block bg-gold hover:bg-gold/90 text-charcoal font-bold px-8 py-4 rounded-full text-sm transition-all shadow-md hover:scale-[1.02]">
<a href="tel:+4915207483196" class="bg-gold hover:bg-gold/90 text-charcoal font-bold px-6 py-3.5 rounded-lg text-sm transition-all shadow-md">
Tisch in der Trattoria Reservieren Tisch in der Trattoria Reservieren
</a> </a>
</div> </div>
</div>
<div class="relative"> <div class="relative">
<div class="relative rounded-2xl overflow-hidden border border-sand/10 shadow-2xl"> <div class="rounded-3xl overflow-hidden border border-white/10 shadow-2xl">
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=1000&q=80" alt="Trattoria Kulinarik" class="w-full h-auto object-cover"> <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=1200&q=85" alt="Trattoria Kulinarik" class="w-full h-auto object-cover">
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- OPERATIVE FAQS (ENZO) --> <!-- OPERATIVE FAQS -->
<section id="faq" class="py-24 bg-sand border-t border-warmgray"> <section id="faq" class="py-28 bg-sand border-t border-stone-200/60">
<div class="max-w-4xl mx-auto px-6"> <div class="max-w-4xl mx-auto px-6">
<div class="text-center mb-16"> <div class="text-center mb-16">
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-2 inline-block">Sorgenfreie Anreise</span> <span class="text-siena font-semibold text-xs uppercase tracking-widest mb-3 inline-block">Sorgenfreie Anreise</span>
<h2 class="text-3xl md:text-4xl font-bold text-charcoal">Häufig gestellte Fragen</h2> <h2 class="text-3xl md:text-4xl font-bold text-charcoal font-serif">Häufig gestellte Fragen</h2>
</div> </div>
<div class="space-y-6"> <div class="space-y-6">
<div class="p-6 bg-white rounded-2xl border border-warmgray shadow-sm"> <div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-airbnb">
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Wie funktioniert der 24/7 Check-in?</h3> <h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Wie funktioniert der 24/7 Keyless Check-in?</h3>
<p class="text-sm text-charcoal/70 leading-relaxed">Am Anreisetag erhalten Sie um 14:00 Uhr Ihren persönlichen 6-stelligen Nuki-PIN-Code per SMS und WhatsApp. Damit öffnen Sie die Haustür Bäckerstraße 18 und Ihre Suite ab 15:00 Uhr völlig flexibel.</p> <p class="text-sm text-warmmuted leading-relaxed">Am Anreisetag erhalten Sie um 14:00 Uhr Ihren persönlichen 6-stelligen Nuki-PIN-Code per SMS und WhatsApp. Damit öffnen Sie die Haustür Bäckerstraße 18 und Ihre Suite ab 15:00 Uhr völlig flexibel.</p>
</div> </div>
<div class="p-6 bg-white rounded-2xl border border-warmgray shadow-sm"> <div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-airbnb">
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Wo kann ich in Goslar parken?</h3> <h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Wo kann ich in Goslar parken?</h3>
<p class="text-sm text-charcoal/70 leading-relaxed">Zum Ausladen des Gepäcks können Sie direkt vor das Haus Bäckerstraße 18 fahren. Zum Dauerparken empfehlen wir den Großparkplatz Schützenplatz (3 Gehminuten) oder das Parkhaus Zentrumsgarage (4 Gehminuten).</p> <p class="text-sm text-warmmuted leading-relaxed">Zum Ausladen des Gepäcks können Sie direkt vor das Haus Bäckerstraße 18 fahren. Zum Dauerparken empfehlen wir den Großparkplatz Schützenplatz (3 Gehminuten) oder das Parkhaus Zentrumsgarage (4 Gehminuten).</p>
</div> </div>
<div class="p-6 bg-white rounded-2xl border border-warmgray shadow-sm"> <div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-airbnb">
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Gibt es Frühstück bei Casa da Enzo?</h3> <h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Gibt es Frühstück bei Casa da Enzo?</h3>
<p class="text-sm text-charcoal/70 leading-relaxed">Alle Apartments verfügen über eine eigene Kaffeemaschine/Küche. In 2 Gehminuten erreichen Sie zudem 3 hervorragende Altstadt-Bäckereien. Mittags & Abends genießen Sie kulinarische Highlights in Alessandras Trattoria im Haus.</p> <p class="text-sm text-warmmuted leading-relaxed">Alle Apartments verfügen über eine eigene Kaffeemaschine/Küche. In 2 Gehminuten erreichen Sie zudem 3 hervorragende Altstadt-Bäckereien. Mittags & Abends genießen Sie kulinarische Highlights in Alessandras Trattoria im Haus.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer class="bg-charcoal border-t border-sand/10 text-sand/60 py-16 text-sm"> <footer class="bg-charcoal border-t border-white/10 text-sand/60 py-20 text-sm">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-10 mb-12"> <div class="max-w-7xl mx-auto px-6 md:px-10 grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
<div class="md:col-span-2"> <div class="md:col-span-2">
<span class="font-serif text-2xl font-bold text-white block mb-3">Casa da Enzo</span> <span class="font-serif text-2xl font-bold text-white block mb-4">Casa da Enzo</span>
<p class="text-xs text-sand/70 max-w-sm leading-relaxed mb-4"> <p class="text-xs text-sand/70 max-w-sm leading-relaxed mb-6">
Boutique-Apartments & Trattoria in der historischen Altstadt Goslar. 7 Suiten mit sizilianischem Herzschlag und digitalem Komfort. Boutique-Suites & Trattoria in der historischen Altstadt Goslar. 7 Suiten mit sizilianischem Herzschlag und digitalem Komfort.
</p> </p>
<p class="text-xs text-sand/50">© 2026 Casa da Enzo • Bäckerstraße 18, 38640 Goslar</p> <p class="text-xs text-sand/40">© 2026 Casa da Enzo • Bäckerstraße 18, 38640 Goslar</p>
</div> </div>
<div> <div>
<h4 class="text-xs font-bold uppercase tracking-wider text-sand mb-4">Kontakt & Service</h4> <h4 class="text-xs font-bold uppercase tracking-wider text-sand mb-5">Kontakt & Service</h4>
<ul class="space-y-2 text-xs"> <ul class="space-y-3 text-xs">
<li>Tel: +49 1520 7483196</li> <li>Tel: +49 1520 7483196</li>
<li>Email: booking@casa-daenzo.de</li> <li>Email: booking@casa-daenzo.de</li>
<li>WAHA Concierge: 24/7 aktiv</li> <li>WAHA Concierge: 24/7 aktiv</li>
@@ -416,11 +430,11 @@
</div> </div>
<div> <div>
<h4 class="text-xs font-bold uppercase tracking-wider text-sand mb-4">Rechtliches</h4> <h4 class="text-xs font-bold uppercase tracking-wider text-sand mb-5">Rechtliches</h4>
<ul class="space-y-2 text-xs"> <ul class="space-y-3 text-xs">
<li><a href="#" class="hover:text-sand">Impressum</a></li> <li><a href="#" class="hover:text-sand transition-colors">Impressum</a></li>
<li><a href="#" class="hover:text-sand">Datenschutz</a></li> <li><a href="#" class="hover:text-sand transition-colors">Datenschutz</a></li>
<li><a href="#" class="hover:text-sand">AGB & Storno</a></li> <li><a href="#" class="hover:text-sand transition-colors">AGB & Storno</a></li>
</ul> </ul>
</div> </div>
</div> </div>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 637 KiB

After

Width:  |  Height:  |  Size: 707 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 420 KiB

After

Width:  |  Height:  |  Size: 233 KiB