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

431 lines
29 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 — 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.">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
siena: '#C25932',
terracotta: '#A8431F',
sand: '#F9F6F0',
charcoal: '#1A1817',
olive: '#4A5240',
gold: '#D4A359',
warmgray: '#EFECE6'
},
fontFamily: {
serif: ['Playfair Display', 'Georgia', 'serif'],
sans: ['Plus Jakarta Sans', 'Inter', 'sans-serif'],
}
}
}
}
</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; }
h1, h2, h3, .font-serif { font-family: 'Playfair Display', serif; }
</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>
</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">
<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>
</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>
<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>
<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>
</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>
<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
</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>
<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>
<!-- 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">
</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>
<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">
<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-lg text-sm transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2">
<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>
</button>
</div>
</form>
</div>
</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>
</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">
<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>
</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">
<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>
</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">
<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>
</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">
<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>
</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>
</div>
<!-- 7 APARTMENT CARDS GRID -->
<div class="grid grid-cols-1 md: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>
<div class="p-6">
<h3 class="font-serif font-bold text-2xl mb-2 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">
<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>
</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>
</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>
<div class="p-6">
<h3 class="font-serif font-bold text-2xl mb-2 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">
<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>
</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>
</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>
<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>
<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>
</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>
</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>
<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>
<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>
</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>
</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>
<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>
<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>
</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>
</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">
</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>
<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>
</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>
</div>
</div>
</div>
</div>
</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">
<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">
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">
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>
</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>
</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">
<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">
Sizilien im Erdgeschoss: Echte Trattoria-Kultur.
</h2>
<p class="text-sand/80 text-base leading-relaxed mb-6 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">
<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">
<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">
<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>
</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>
</div>
</div>
</section>
<!-- OPERATIVE FAQS (ENZO) -->
<section id="faq" class="py-24 bg-sand border-t border-warmgray">
<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>
</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>
<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">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>
</div>
<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">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>
</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">
<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.
</p>
<p class="text-xs text-sand/50">© 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">
<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-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>
</ul>
</div>
</div>
</footer>
</body>
</html>