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
+216 -202

No files matched your search

+216 -202
View File
@@ -3,8 +3,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Casa da Enzo — Boutique Apartments & Trattoria in 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.">
<title>Casa da Enzo — Luxury Boutique Suites & Trattoria | Goslar</title>
<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>
tailwind.config = {
@@ -13,94 +15,114 @@
colors: {
siena: '#C25932',
terracotta: '#A8431F',
sand: '#F9F6F0',
charcoal: '#1A1817',
olive: '#4A5240',
sand: '#FAF8F5',
stonebg: '#F3EFEA',
charcoal: '#1C1917',
charcoalsoft: '#292524',
warmmuted: '#78716C',
gold: '#D4A359',
warmgray: '#EFECE6'
olive: '#4A5240'
},
fontFamily: {
serif: ['Playfair Display', 'Georgia', '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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<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">
<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; }
/* 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>
</head>
<body class="antialiased selection:bg-siena selection:text-white">
<!-- TOP BAR / ANNOUNCEMENT -->
<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">
<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>Bestpreis-Garantie + 1 Glas Willkommens-Aperitif in Alessandras Trattoria inklusive!</span>
<!-- TOP PROMO BANNER -->
<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 uppercase tracking-wider">Direktbucher-Vorteil</span>
<span>Garantierter Bestpreis + 1 Glas Willkommens-Aperitif in Alessandras Trattoria inklusive</span>
</div>
<!-- NAVIGATION HEADER -->
<header class="sticky top-0 z-50 bg-sand/95 backdrop-blur-md border-b border-warmgray transition-all">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<a href="#" class="flex items-center gap-3 group">
<!-- STICKY GLASSMORPHIC HEADER -->
<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 md:px-10 h-20 flex items-center justify-between">
<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="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>
<nav class="hidden md:flex items-center gap-8 text-sm font-medium text-charcoal/80">
<a href="#apartments" class="hover:text-siena transition-colors">7 Suiten & Apartments</a>
<a href="#vorteile" class="hover:text-siena transition-colors">Direktbucher-Vorteile</a>
<nav class="hidden md:flex items-center gap-9 text-sm font-medium text-charcoal/80">
<a href="#suiten" class="hover:text-siena transition-colors">7 Suiten</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="#trattoria" class="hover:text-siena transition-colors">Trattoria</a>
<a href="#faq" class="hover:text-siena transition-colors">Anreise & FAQ</a>
</nav>
<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">
<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>
<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-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>
</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">
Suiten Buchen
<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]">
Jetzt Buchen
</a>
</div>
</div>
</header>
<!-- HERO SECTION -->
<section class="relative min-h-[85vh] 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>
<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>
<!-- CINEMATIC HERO SECTION -->
<section class="relative min-h-[88vh] flex items-center justify-center bg-charcoal text-sand overflow-hidden">
<!-- Immersive Background Image -->
<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">
<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">
Bäckerstraße 18 • UNESCO-Altstadt Goslar
<div class="relative z-20 max-w-5xl mx-auto text-center px-6 py-24">
<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">
<span class="w-2 h-2 rounded-full bg-siena animate-pulse"></span>
Bäckerstraße 18 • UNESCO-Weltkulturerbe Goslar
</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>
<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>
<!-- QUICK BOOKING BAR (DIRECT CONVERSION ENGINE) -->
<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">
<form class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
<div class="text-left">
<label class="block text-xs font-bold text-charcoal/70 uppercase tracking-wider mb-1.5">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">
<!-- FLOATING LUXURY BOOKING BAR -->
<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 sm:grid-cols-2 lg:grid-cols-4 gap-3.5 items-end">
<div class="text-left bg-stonebg/60 p-3 rounded-2xl border border-stone-200/80">
<label class="block text-[10px] font-bold text-warmmuted uppercase tracking-wider mb-1">Anreise</label>
<input type="date" class="w-full bg-transparent font-medium text-sm text-charcoal outline-none cursor-pointer">
</div>
<div class="text-left">
<label class="block text-xs font-bold text-charcoal/70 uppercase tracking-wider mb-1.5">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">
<div class="text-left bg-stonebg/60 p-3 rounded-2xl border border-stone-200/80">
<label class="block text-[10px] font-bold text-warmmuted uppercase tracking-wider mb-1">Abreise</label>
<input type="date" class="w-full bg-transparent font-medium text-sm text-charcoal outline-none cursor-pointer">
</div>
<div class="text-left">
<label class="block text-xs font-bold text-charcoal/70 uppercase tracking-wider mb-1.5">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">
<div class="text-left bg-stonebg/60 p-3 rounded-2xl border border-stone-200/80">
<label class="block text-[10px] font-bold text-warmmuted uppercase tracking-wider mb-1">Gäste & Suite</label>
<select class="w-full bg-transparent font-medium text-sm text-charcoal outline-none cursor-pointer">
<option>2 Erwachsene (1 Suite)</option>
<option>1 Erwachsener</option>
<option>Familie (2 Erw. + Kinder)</option>
@@ -108,9 +130,9 @@
</select>
</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>
<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>
</div>
</form>
@@ -118,180 +140,174 @@
</div>
</section>
<!-- DIRECT BOOKER BENEFITS -->
<section id="vorteile" class="py-20 bg-sand border-b border-warmgray">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center max-w-2xl mx-auto mb-12">
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-2 inline-block">Warum direkt bei uns buchen?</span>
<h2 class="text-3xl font-bold text-charcoal">Ihre Vorteile auf der offiziellen Website</h2>
<!-- DIRECT BOOKER TRUST SECTION -->
<section id="vorteile" class="py-24 bg-sand border-b border-stone-200/60">
<div class="max-w-7xl mx-auto px-6 md:px-10">
<div class="text-center max-w-2xl mx-auto mb-16">
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-3 inline-block">100% Direktbucher-Vorteil</span>
<h2 class="text-3xl md:text-4xl font-bold text-charcoal font-serif">Exklusive Privilegien der Direktbuchung</h2>
</div>
<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="w-12 h-12 rounded-xl bg-siena/10 text-siena flex items-center justify-center shrink-0">
<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-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>
</div>
<div>
<h3 class="font-serif font-bold text-xl mb-1.5 text-charcoal">Garantierter Bestpreis & Aperitif</h3>
<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>
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Bestpreis & Willkommens-Drink</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>
</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="w-12 h-12 rounded-xl bg-siena/10 text-siena flex items-center justify-center shrink-0">
<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-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>
</div>
<div>
<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-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>
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">24/7 Digitaler Keyless Access</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>
</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="w-12 h-12 rounded-xl bg-siena/10 text-siena flex items-center justify-center shrink-0">
<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-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>
</div>
<div>
<h3 class="font-serif font-bold text-xl mb-1.5 text-charcoal">Historische Top-Altstadtlage</h3>
<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>
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Historische Altstadt-Lage</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>
</div>
</div>
</div>
</section>
<!-- APARTMENTS CATALOGUE (7 SUITES) -->
<section id="apartments" class="py-24 bg-sand">
<div class="max-w-7xl mx-auto px-6">
<!-- APARTMENTS CATALOGUE (7 SUITES BENTO GRID) -->
<section id="suiten" class="py-28 bg-sand">
<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>
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-2 inline-block">7 Refugien der Erholung</span>
<h2 class="text-3xl md:text-5xl font-bold text-charcoal">Unsere Suiten & Apartments</h2>
<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 font-serif">Unsere Suiten & Apartments</h2>
</div>
<p class="text-charcoal/70 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.
<p class="text-warmmuted max-w-md mt-4 md:mt-0 text-sm leading-relaxed">
Historischer Charme aus dem Jahr 1510 trifft auf modernen Wohnkomfort, Boxspringbetten, Design-Bäder, Highspeed-Glasfaser & mediterranes Flair.
</p>
</div>
<!-- 7 APARTMENT CARDS GRID -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- BENTO / CARD GRID -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- SUITE 1 -->
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group">
<div class="relative h-64 overflow-hidden bg-charcoal/10">
<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>
<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">
<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-72 overflow-hidden bg-stonebg">
<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=1000&q=80" alt="Suite 1 Balkon" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<div class="p-6">
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 1 — Balkon & Altstadtblick</h3>
<div class="p-7">
<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-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>
<div class="flex items-center justify-between pt-4 border-t border-warmgray">
<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-5 border-t border-stone-200/60">
<div>
<span class="text-xs text-charcoal/50 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="text-[11px] text-warmmuted block">Direktbucher ab</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>
<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>
<!-- SUITE 2 -->
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group">
<div class="relative h-64 overflow-hidden bg-charcoal/10">
<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>
<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">
<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-72 overflow-hidden bg-stonebg">
<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=1000&q=80" alt="Suite 2 Terrasse" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<div class="p-6">
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 2 — Private Terrasse</h3>
<div class="p-7">
<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-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>
<div class="flex items-center justify-between pt-4 border-t border-warmgray">
<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-5 border-t border-stone-200/60">
<div>
<span class="text-xs text-charcoal/50 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="text-[11px] text-warmmuted block">Direktbucher ab</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>
<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>
<!-- SUITE 3 -->
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group">
<div class="relative h-64 overflow-hidden bg-charcoal/10">
<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>
<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">
<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-72 overflow-hidden bg-stonebg">
<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=1000&q=80" alt="Suite 3" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<div class="p-6">
<h3 class="font-serif font-bold text-2xl mb-2 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-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>
<div class="flex items-center justify-between pt-4 border-t border-warmgray">
<div class="p-7">
<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² • 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-5 border-t border-stone-200/60">
<div>
<span class="text-xs text-charcoal/50 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="text-[11px] text-warmmuted block">Direktbucher ab</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>
<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>
<!-- SUITE 4 -->
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group">
<div class="relative h-64 overflow-hidden bg-charcoal/10">
<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>
<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">
<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-72 overflow-hidden bg-stonebg">
<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=1000&q=80" alt="Suite 4" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<div class="p-6">
<h3 class="font-serif font-bold text-2xl mb-2 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-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>
<div class="flex items-center justify-between pt-4 border-t border-warmgray">
<div class="p-7">
<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² • 1 Gbit/s Glasfaser</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-5 border-t border-stone-200/60">
<div>
<span class="text-xs text-charcoal/50 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="text-[11px] text-warmmuted block">Direktbucher ab</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>
<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>
<!-- ROMANTIK 1 -->
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group">
<div class="relative h-64 overflow-hidden bg-charcoal/10">
<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>
<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">
<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-72 overflow-hidden bg-stonebg">
<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=1000&q=80" alt="Romantik 1" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<div class="p-6">
<h3 class="font-serif font-bold text-2xl mb-2 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-sm text-charcoal/70 mb-6 line-clamp-2">Original freigelegtes Eichengebälk aus 1510, stimmungsvoller Kaminfeuer-Effekt, Samt-Garnitur und romantische Beleuchtung.</p>
<div class="flex items-center justify-between pt-4 border-t border-warmgray">
<div class="p-7">
<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² • Original Eichengebälk</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-5 border-t border-stone-200/60">
<div>
<span class="text-xs text-charcoal/50 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="text-[11px] text-warmmuted block">Direktbucher ab</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>
<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>
<!-- ROMANTIK 2 -->
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group">
<div class="relative h-64 overflow-hidden bg-charcoal/10">
<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>
<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">
<!-- STUDIO -->
<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-72 overflow-hidden bg-stonebg">
<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=1000&q=80" alt="Studio" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<div class="p-6">
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Romantik Suite 2 — Kuschelnest</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-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>
<div class="flex items-center justify-between pt-4 border-t border-warmgray">
<div class="p-7">
<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 • 32 m² • Ruhige Hoflage</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-5 border-t border-stone-200/60">
<div>
<span class="text-xs text-charcoal/50 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="text-[11px] text-warmmuted block">Direktbucher ab</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>
<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>
@@ -300,115 +316,113 @@
</div>
</section>
<!-- STORYTELLING: DIE GESCHICHTE VON ENZO -->
<section id="story" class="py-24 bg-white border-y border-warmgray">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- STORYTELLING SECTION -->
<section id="story" class="py-28 bg-white border-y border-stone-200/60">
<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>
<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.
</h2>
<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.
</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.
</p>
<div class="p-6 bg-sand rounded-xl border border-warmgray flex items-center gap-4">
<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>
<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>
<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/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/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 class="relative">
<div class="rounded-2xl overflow-hidden border border-warmgray shadow-2xl">
<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">
<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=1200&q=85" alt="Sizilianische Gastfreundschaft" class="w-full h-auto object-cover">
</div>
</div>
</div>
</section>
<!-- TRATTORIA KULINARIK -->
<section id="trattoria" class="py-24 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">
<!-- TRATTORIA & FOOD SECTION -->
<section id="trattoria" class="py-28 bg-charcoal text-sand relative overflow-hidden">
<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>
<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.
</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.
</p>
<div class="space-y-4 mb-8">
<div class="flex items-center gap-3 text-sm text-sand/90">
<div class="space-y-4 mb-10">
<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>Täglich frische Tagliatelle, Ravioli, Arancini & Cannoli</span>
</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>Willkommens-Aperitif für alle Direktbucher gratis</span>
</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>Garantierte Tischreservierung für Apartment-Gäste</span>
</div>
</div>
<div class="flex flex-wrap gap-4">
<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
</a>
</div>
<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]">
Tisch in der Trattoria Reservieren
</a>
</div>
<div class="relative">
<div class="relative rounded-2xl overflow-hidden border border-sand/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">
<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=1200&q=85" alt="Trattoria Kulinarik" class="w-full h-auto object-cover">
</div>
</div>
</div>
</section>
<!-- OPERATIVE FAQS (ENZO) -->
<section id="faq" class="py-24 bg-sand border-t border-warmgray">
<!-- OPERATIVE FAQS -->
<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="text-center mb-16">
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-2 inline-block">Sorgenfreie Anreise</span>
<h2 class="text-3xl md:text-4xl font-bold text-charcoal">Häufig gestellte Fragen</h2>
<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 font-serif">Häufig gestellte Fragen</h2>
</div>
<div class="space-y-6">
<div class="p-6 bg-white rounded-2xl border border-warmgray shadow-sm">
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Wie funktioniert der 24/7 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>
<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 Keyless Check-in?</h3>
<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 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>
<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 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>
<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>
</section>
<!-- FOOTER -->
<footer class="bg-charcoal border-t border-sand/10 text-sand/60 py-16 text-sm">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-10 mb-12">
<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 md:px-10 grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
<div class="md:col-span-2">
<span class="font-serif text-2xl font-bold text-white block mb-3">Casa da Enzo</span>
<p class="text-xs text-sand/70 max-w-sm leading-relaxed mb-4">
Boutique-Apartments & Trattoria in der historischen Altstadt Goslar. 7 Suiten mit sizilianischem Herzschlag und digitalem Komfort.
<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-6">
Boutique-Suites & Trattoria in der historischen Altstadt Goslar. 7 Suiten mit sizilianischem Herzschlag und digitalem Komfort.
</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>
<h4 class="text-xs font-bold uppercase tracking-wider text-sand mb-4">Kontakt & Service</h4>
<ul class="space-y-2 text-xs">
<h4 class="text-xs font-bold uppercase tracking-wider text-sand mb-5">Kontakt & Service</h4>
<ul class="space-y-3 text-xs">
<li>Tel: +49 1520 7483196</li>
<li>Email: booking@casa-daenzo.de</li>
<li>WAHA Concierge: 24/7 aktiv</li>
@@ -416,11 +430,11 @@
</div>
<div>
<h4 class="text-xs font-bold uppercase tracking-wider text-sand mb-4">Rechtliches</h4>
<ul class="space-y-2 text-xs">
<li><a href="#" class="hover:text-sand">Impressum</a></li>
<li><a href="#" class="hover:text-sand">Datenschutz</a></li>
<li><a href="#" class="hover:text-sand">AGB & Storno</a></li>
<h4 class="text-xs font-bold uppercase tracking-wider text-sand mb-5">Rechtliches</h4>
<ul class="space-y-3 text-xs">
<li><a href="#" class="hover:text-sand transition-colors">Impressum</a></li>
<li><a href="#" class="hover:text-sand transition-colors">Datenschutz</a></li>
<li><a href="#" class="hover:text-sand transition-colors">AGB & Storno</a></li>
</ul>
</div>
</div>