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

445 lines
30 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 = {
theme: {
extend: {
colors: {
siena: '#C25932',
terracotta: '#A8431F',
sand: '#FAF8F5',
stonebg: '#F3EFEA',
charcoal: '#1C1917',
charcoalsoft: '#292524',
warmmuted: '#78716C',
gold: '#D4A359',
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: #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 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>
<!-- 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="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-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.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-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>
<!-- 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-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 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-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>
<!-- 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 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 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>
<option>4 Erwachsene (Große Suite)</option>
</select>
</div>
<div>
<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 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>
</div>
</div>
</section>
<!-- 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="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>
<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="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>
<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="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>
<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 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-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-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>
<!-- 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-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-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-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-[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-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-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-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-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-[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-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-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-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-[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-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-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-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-[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-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-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-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-[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-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>
<!-- 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-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-[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-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>
</section>
<!-- 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 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-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-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-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 & 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 font-serif leading-tight">
Sizilien im Erdgeschoss: Echte Trattoria-Kultur.
</h2>
<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-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.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.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>
<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="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 -->
<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-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-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-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-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-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-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-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-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/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-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>
</ul>
</div>
<div>
<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>
</footer>
</body>
</html>