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

1023 lines
65 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 Suiten & Sizilianische Trattoria | Goslar Altstadt</title>
<meta name="description" content="7 exklusive Boutique Suiten im Fachwerkerbe von 1510. Echte sizilianische Trattoria, 24/7 Nuki Keyless Check-in & 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',
sienadark: '#A8431F',
sienalight: '#F7EBE6',
sand: '#FAF8F5',
sandcard: '#F4F0EA',
charcoal: '#1C1917',
charcoalsoft: '#292524',
warmmuted: '#78716C',
gold: '#D4A359',
goldlight: '#FBF5EB',
olive: '#4A5240',
olivelight: '#F0F2EE'
},
fontFamily: {
serif: ['Playfair Display', 'Georgia', 'serif'],
sans: ['DM Sans', 'sans-serif'],
},
boxShadow: {
'bento': '0 0 0 1px rgba(28,25,23,0.04), 0 4px 16px rgba(28,25,23,0.05), 0 16px 36px rgba(28,25,23,0.08)',
'bento-hover': '0 0 0 1px rgba(194,89,50,0.2), 0 8px 24px rgba(28,25,23,0.08), 0 24px 48px rgba(28,25,23,0.12)',
'floating': '0 20px 60px -10px rgba(28,25,23,0.25), 0 0 0 1px rgba(255,255,255,0.4)',
'glow-siena': '0 10px 30px -5px rgba(194,89,50,0.35)',
},
borderRadius: {
'2xl': '20px',
'3xl': '28px',
'4xl': '36px',
}
}
}
}
</script>
<!-- Google Fonts: DM Sans & Playfair Display -->
<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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
<style>
body {
background-color: #FAF8F5;
color: #1C1917;
font-family: 'DM Sans', sans-serif;
letter-spacing: -0.015em;
}
h1, h2, h3, h4, .font-serif {
font-family: 'Playfair Display', serif;
letter-spacing: -0.02em;
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #FAF8F5; }
::-webkit-scrollbar-thumb { background: #D6D0C7; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #C25932; }
/* Hide scrollbar for category horizontal scroll on mobile */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* Glassmorphic backdrop fallback */
.glass-nav {
background: rgba(250, 248, 245, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.glass-card {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.glass-dark {
background: rgba(28, 25, 23, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
</style>
</head>
<body class="antialiased selection:bg-siena selection:text-white relative">
<!-- 1. TOP ANNOUNCEMENT BANNER -->
<div class="bg-charcoal text-sand text-xs py-2.5 px-4 sm:px-6 text-center font-medium tracking-wide flex justify-center items-center gap-2 sm:gap-3 border-b border-white/10 z-50 relative">
<span class="bg-siena text-white px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider shrink-0">Direktbucher-Vorteil</span>
<span class="truncate">Garantierter Bestpreis (5–10% günstiger) + 1 Glas Aperitif in Alessandras Trattoria gratis</span>
<a href="#vorteile" class="underline underline-offset-2 hover:text-siena transition-colors hidden md:inline shrink-0 font-semibold ml-1">Mehr erfahren →</a>
</div>
<!-- STICKY GLASS NAVIGATION -->
<header class="sticky top-0 z-40 glass-nav border-b border-stone-200/70 transition-all duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 h-20 flex items-center justify-between">
<!-- Brand Logo -->
<a href="#" class="flex items-center gap-3 group">
<div class="w-10 h-10 rounded-2xl bg-siena text-white flex items-center justify-center font-serif font-bold text-xl shadow-md group-hover:scale-105 transition-transform">
E
</div>
<div>
<span class="font-serif text-2xl font-bold tracking-tight text-charcoal block leading-none group-hover:text-siena transition-colors">Casa da Enzo</span>
<span class="text-[10px] uppercase tracking-widest text-siena font-bold block mt-1">Boutique Suites & Trattoria</span>
</div>
</a>
<!-- Desktop Nav Menu -->
<nav class="hidden lg:flex items-center gap-8 text-sm font-medium text-charcoal/80">
<a href="#suiten" class="hover:text-siena transition-colors py-1">7 Suiten & Apartments</a>
<a href="#vorteile" class="hover:text-siena transition-colors py-1">Direktbucher-Vorteile</a>
<a href="#story" class="hover:text-siena transition-colors py-1">Unsere Geschichte</a>
<a href="#trattoria" class="hover:text-siena transition-colors py-1">Trattoria Kulinarik</a>
<a href="#faq" class="hover:text-siena transition-colors py-1">Anreise & FAQ</a>
</nav>
<!-- CTA Action Group -->
<div class="flex items-center gap-3 sm:gap-4">
<button onclick="openWhatsAppModal()" class="hidden sm:flex items-center gap-2 text-xs font-semibold text-olive bg-olivelight hover:bg-olive/15 px-3.5 py-2 rounded-full transition-colors">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
<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>Concierge</span>
</button>
<a href="#booking" class="bg-siena hover:bg-sienadark text-white px-5 sm:px-6 py-2.5 rounded-full text-xs sm:text-sm font-semibold transition-all shadow-md hover:shadow-glow-siena hover:scale-[1.02] active:scale-95">
Bestpreis Buchen
</a>
</div>
</div>
</header>
<!-- 2. CINEMATIC HERO SECTION WITH FLOATING QUICK-BOOKING BAR -->
<section class="relative min-h-[90vh] flex flex-col justify-between bg-charcoal text-sand overflow-hidden pt-12 pb-16">
<!-- Background Image with Ambient Dark Overlay -->
<div class="absolute inset-0 bg-gradient-to-t from-charcoal via-charcoal/70 to-charcoal/40 z-10"></div>
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?auto=format&fit=crop&w=2400&q=85')] bg-cover bg-center opacity-45 scale-105 transform transition-transform duration-10000"></div>
<div class="relative z-20 max-w-5xl mx-auto text-center px-4 sm:px-6 lg:px-8 pt-8 sm:pt-12">
<!-- Badge -->
<div 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-ping"></span>
<span>Bäckerstraße 18 • UNESCO-Weltkulturerbe Goslar</span>
</div>
<!-- Headline & Subline -->
<h1 class="text-3xl sm:text-5xl 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/90 max-w-2xl mx-auto mb-10 font-normal leading-relaxed">
7 restaurierte Boutique-Suiten im historischen Fachwerkerbe von 1510. Echte sizilianische Trattoria im Haus, 24/7 Nuki Keyless Check-in & unverfälschter Direktbucher-Vorteil.
</p>
<!-- Trust Badges Line -->
<div class="flex flex-wrap items-center justify-center gap-4 sm:gap-8 text-xs font-medium text-sand/80 mb-10">
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-gold" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<span>4.9 / 5.0 Gästebewertung</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-siena" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<span>100% Bestpreis-Garantie</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-siena" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
<span>Kontaktloser 24/7 Check-in</span>
</div>
</div>
</div>
<!-- FLOATING SEAMLESS BOOKING BAR -->
<div id="booking" class="relative z-20 max-w-5xl mx-auto px-4 sm:px-6 w-full">
<div class="glass-card p-4 sm:p-6 rounded-3xl shadow-floating text-charcoal border border-white/60">
<form onsubmit="handleBookingSubmit(event)" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 items-end">
<!-- Anreise -->
<div class="text-left bg-sandcard/80 p-3.5 rounded-2xl border border-stone-200/80 hover:border-siena/50 transition-colors">
<label class="block text-[10px] font-bold text-warmmuted uppercase tracking-wider mb-1">Anreise</label>
<input type="date" id="checkin" required class="w-full bg-transparent font-semibold text-sm text-charcoal outline-none cursor-pointer">
</div>
<!-- Abreise -->
<div class="text-left bg-sandcard/80 p-3.5 rounded-2xl border border-stone-200/80 hover:border-siena/50 transition-colors">
<label class="block text-[10px] font-bold text-warmmuted uppercase tracking-wider mb-1">Abreise</label>
<input type="date" id="checkout" required class="w-full bg-transparent font-semibold text-sm text-charcoal outline-none cursor-pointer">
</div>
<!-- Gäste & Suite -->
<div class="text-left bg-sandcard/80 p-3.5 rounded-2xl border border-stone-200/80 hover:border-siena/50 transition-colors">
<label class="block text-[10px] font-bold text-warmmuted uppercase tracking-wider mb-1">Gäste & Kategorien</label>
<select id="suite-select" class="w-full bg-transparent font-semibold text-sm text-charcoal outline-none cursor-pointer">
<option value="all">Alle Suiten (1-4 Personen)</option>
<option value="suite1">Suite 1 — Balkon & Altstadtblick (ab 119 €)</option>
<option value="suite2">Suite 2 — Private Terrasse (ab 129 €)</option>
<option value="suite3">Suite 3 — Altstadt Komfort (ab 109 €)</option>
<option value="suite4">Suite 4 — Workspace & Balkon (ab 115 €)</option>
<option value="romantik1">Romantik 1 — Kaminzauber (ab 99 €)</option>
<option value="romantik2">Romantik 2 — Freistehende Wanne (ab 109 €)</option>
<option value="studio">Hof-Studio Bäckerstraße (ab 79 €)</option>
</select>
</div>
<!-- CTA Button -->
<div>
<button type="submit" class="w-full bg-siena hover:bg-sienadark text-white font-bold py-3.5 px-6 rounded-2xl text-sm transition-all shadow-md hover:shadow-glow-siena flex items-center justify-center gap-2 group active:scale-98">
<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>
<!-- Direct Booker Sub-Bar -->
<div class="mt-4 pt-3 border-t border-stone-200/60 flex flex-wrap items-center justify-between text-xs text-warmmuted px-1 gap-2">
<div class="flex items-center gap-1.5 text-siena font-semibold">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
<span>100% Direktbucher-Vorteil • Keine Buchungsgebühren • Gratis Aperitif</span>
</div>
<div class="text-[11px] font-medium text-stone-500">
Kostenfreie Stornierung bis 7 Tage vor Anreise
</div>
</div>
</div>
</div>
</section>
<!-- 3. DIRECT BOOKER TRUST SECTION (3-SÄULEN-GRID) -->
<section id="vorteile" class="py-24 bg-sand border-b border-stone-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
<div class="text-center max-w-2xl mx-auto mb-16">
<span class="text-siena font-bold text-xs uppercase tracking-widest mb-3 inline-block bg-sienalight px-3 py-1 rounded-full">Warum direkt buchen?</span>
<h2 class="text-3xl sm:text-4xl font-bold text-charcoal font-serif">Exklusive Vorteile für Direktbucher</h2>
<p class="text-warmmuted text-sm mt-3">Vergessen Sie Booking.com und Airbnb — buchen Sie direkt an der Quelle zum besten Preis.</p>
</div>
<!-- 3 Columns Card Grid with Airbnb-Style 3-Layer Shadows -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Säule 1 -->
<div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-bento hover:shadow-bento-hover transition-all duration-300 group">
<div class="w-14 h-14 rounded-2xl bg-sienalight text-siena flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<svg class="w-7 h-7" 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 class="inline-block px-2.5 py-0.5 rounded-full bg-sienalight text-siena text-[11px] font-bold mb-3 uppercase tracking-wider">Ersparnis & Genuss</div>
<h3 class="font-serif font-bold text-2xl mb-3 text-charcoal">Garantierter Bestpreis & Aperitif</h3>
<p class="text-sm text-warmmuted leading-relaxed">
Immer <strong>5–10% günstiger</strong> als auf Buchungsportalen. Zusätzlich schenken wir Ihnen bei Ankunft <strong>1 Glas Prosecco oder Aperitif</strong> in Alessandras Trattoria im Erdgeschoss.
</p>
</div>
<!-- Säule 2 -->
<div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-bento hover:shadow-bento-hover transition-all duration-300 group">
<div class="w-14 h-14 rounded-2xl bg-sienalight text-siena flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<svg class="w-7 h-7" 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 class="inline-block px-2.5 py-0.5 rounded-full bg-olivelight text-olive text-[11px] font-bold mb-3 uppercase tracking-wider">Smart Access</div>
<h3 class="font-serif font-bold text-2xl mb-3 text-charcoal">Digitaler 24/7 Check-in</h3>
<p class="text-sm text-warmmuted leading-relaxed">
Keine Hektik bei der Anreise. Ihr persönlicher Nuki-PIN-Code für Haustür und Suite erreicht Sie am Anreisetag um 14:00 Uhr direkt per SMS/WhatsApp. Ankommen & wohlfühlen.
</p>
</div>
<!-- Säule 3 -->
<div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-bento hover:shadow-bento-hover transition-all duration-300 group">
<div class="w-14 h-14 rounded-2xl bg-sienalight text-siena flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<svg class="w-7 h-7" 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 class="inline-block px-2.5 py-0.5 rounded-full bg-goldlight text-gold text-[11px] font-bold mb-3 uppercase tracking-wider">Top-Lage</div>
<h3 class="font-serif font-bold text-2xl mb-3 text-charcoal">Bäckerstraße 18 Goslar</h3>
<p class="text-sm text-warmmuted leading-relaxed">
Ruhige Fachwerkstraße mitten im UNESCO-Weltkulturerbe. Nur 3 Gehminuten zum Marktplatz und der historischen Kaiserpfalz. Parken am Schützenplatz bequem erreichbar.
</p>
</div>
</div>
</div>
</section>
<!-- 4. PRODUCT CATALOGUE — THE 7 SUITES BENTO GRID -->
<section id="suiten" class="py-28 bg-sand border-b border-stone-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
<!-- Section Header -->
<div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
<div>
<span class="text-siena font-bold text-xs uppercase tracking-widest mb-3 inline-block bg-sienalight px-3 py-1 rounded-full">Exklusives Wohnen</span>
<h2 class="text-3xl sm:text-5xl font-bold text-charcoal font-serif">Unsere 7 Suiten & Apartments</h2>
</div>
<p class="text-warmmuted max-w-md text-sm leading-relaxed">
Fachwerkerbe von 1510, kombiniert mit italienischem Design, Boxspringbetten, Regenduschen & 1 Gbit/s Glasfaser-WLAN.
</p>
</div>
<!-- Filter Pills Bar -->
<div class="flex items-center gap-3 overflow-x-auto no-scrollbar pb-4 mb-10 border-b border-stone-200/60">
<button onclick="filterSuites('all')" id="filter-all" class="suite-filter-btn px-5 py-2.5 rounded-full text-xs font-bold transition-all bg-charcoal text-white shadow-sm shrink-0">
Alle 7 Einheiten
</button>
<button onclick="filterSuites('vorderhaus')" id="filter-vorderhaus" class="suite-filter-btn px-5 py-2.5 rounded-full text-xs font-medium transition-all bg-white hover:bg-stone-100 text-charcoal border border-stone-200/80 shrink-0">
Vorderhaus Suiten (4)
</button>
<button onclick="filterSuites('romantik')" id="filter-romantik" class="suite-filter-btn px-5 py-2.5 rounded-full text-xs font-medium transition-all bg-white hover:bg-stone-100 text-charcoal border border-stone-200/80 shrink-0">
Romantik Apartments (2)
</button>
<button onclick="filterSuites('studio')" id="filter-studio" class="suite-filter-btn px-5 py-2.5 rounded-full text-xs font-medium transition-all bg-white hover:bg-stone-100 text-charcoal border border-stone-200/80 shrink-0">
Hof-Studio (1)
</button>
</div>
<!-- BENTO GRID (7 CARDS) -->
<div id="suites-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- SUITE 1 (FEATURED BENTO CARD — SPANS 2 COLS ON LG) -->
<div data-category="vorderhaus" class="suite-card lg:col-span-2 bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-bento hover:shadow-bento-hover transition-all duration-300 group flex flex-col md:flex-row">
<div class="relative md:w-1/2 h-72 md:h-auto overflow-hidden bg-stone-100 shrink-0">
<span class="absolute top-4 left-4 z-10 bg-siena text-white text-[11px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">Highlight • Suite 1</span>
<img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=1200&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-8 md:w-1/2 flex flex-col justify-between">
<div>
<div class="flex items-center justify-between text-xs text-siena font-bold uppercase tracking-wider mb-2">
<span>Vorderhaus Suite</span>
<span>Bis zu 4 Personen</span>
</div>
<h3 class="font-serif font-bold text-2xl md:text-3xl mb-3 text-charcoal">Suite 1 — Balkon & Altstadtblick</h3>
<p class="text-sm text-warmmuted leading-relaxed mb-6">
Großzügige Loggia-Suite im 1. OG mit direktem Blick auf die Bäckerstraße. Separater Wohnbereich mit Schlafsofa, Designer-Bad, voll ausgestattete Küche & privater Balkon.
</p>
<!-- Key Amenities Pills -->
<div class="flex flex-wrap gap-2 mb-6 text-xs text-charcoal/80">
<span class="bg-sandcard px-3 py-1 rounded-full font-medium">55 m²</span>
<span class="bg-sandcard px-3 py-1 rounded-full font-medium">Privater Balkon</span>
<span class="bg-sandcard px-3 py-1 rounded-full font-medium">Boxspringbetten</span>
<span class="bg-sandcard px-3 py-1 rounded-full font-medium">Nespresso Espressobar</span>
</div>
</div>
<div class="pt-6 border-t border-stone-200/60 flex items-center justify-between">
<div>
<span class="text-[11px] text-warmmuted block font-medium">Direktbucher Bestpreis 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>
<button onclick="openSuiteModal('suite1')" class="bg-siena hover:bg-sienadark text-white px-5 py-2.5 rounded-full text-xs font-bold transition-all shadow-sm hover:shadow-md">
Details & Buchen
</button>
</div>
</div>
</div>
<!-- SUITE 2 -->
<div data-category="vorderhaus" class="suite-card bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-bento hover:shadow-bento-hover transition-all duration-300 group flex flex-col justify-between">
<div>
<div class="relative h-64 overflow-hidden bg-stone-100">
<span class="absolute top-4 left-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3 py-1 rounded-full">Suite 2</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">
<div class="text-xs text-siena font-bold uppercase tracking-wider mb-2">Sonnendeck • 2 Personen</div>
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 2 — Private Terrasse</h3>
<p class="text-sm text-warmmuted mb-6 leading-relaxed">
Ruhige Oase mit privater Sonnenterrasse zum geschützten Innenhof. Exklusives Kingsize-Bett & vollkommene Ungestörtheit.
</p>
<div class="flex flex-wrap gap-2 mb-4 text-xs">
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">48 m²</span>
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">Hof-Terrasse</span>
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">Sonnendeck</span>
</div>
</div>
</div>
<div class="px-7 pb-7 pt-4 border-t border-stone-200/60 flex items-center justify-between">
<div>
<span class="text-[11px] text-warmmuted block">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>
<button onclick="openSuiteModal('suite2')" class="bg-stone-100 hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-full text-xs font-bold transition-all">
Details
</button>
</div>
</div>
<!-- SUITE 3 -->
<div data-category="vorderhaus" class="suite-card bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-bento hover:shadow-bento-hover transition-all duration-300 group flex flex-col justify-between">
<div>
<div class="relative h-64 overflow-hidden bg-stone-100">
<span class="absolute top-4 left-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3 py-1 rounded-full">Suite 3</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">
<div class="text-xs text-siena font-bold uppercase tracking-wider mb-2">Vorderhaus • Bis 4 Personen</div>
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 3 — Altstadt Komfort</h3>
<p class="text-sm text-warmmuted mb-6 leading-relaxed">
Kombiniert historischen Fachwerkreiz mit modernem Design. Bodengleiche Walk-In Regendusche & gemütliche Schlafcouch.
</p>
<div class="flex flex-wrap gap-2 mb-4 text-xs">
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">50 m²</span>
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">Walk-In Dusche</span>
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">Familientauglich</span>
</div>
</div>
</div>
<div class="px-7 pb-7 pt-4 border-t border-stone-200/60 flex items-center justify-between">
<div>
<span class="text-[11px] text-warmmuted block">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>
<button onclick="openSuiteModal('suite3')" class="bg-stone-100 hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-full text-xs font-bold transition-all">
Details
</button>
</div>
</div>
<!-- SUITE 4 -->
<div data-category="vorderhaus" class="suite-card bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-bento hover:shadow-bento-hover transition-all duration-300 group flex flex-col justify-between">
<div>
<div class="relative h-64 overflow-hidden bg-stone-100">
<span class="absolute top-4 left-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3 py-1 rounded-full">Suite 4</span>
<img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?auto=format&fit=crop&w=1000&q=80" alt="Suite 4 Workspace" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<div class="p-7">
<div class="text-xs text-siena font-bold uppercase tracking-wider mb-2">Workation • 2 Personen</div>
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 4 — Workspace & Balkon</h3>
<p class="text-sm text-warmmuted mb-6 leading-relaxed">
Maßgeschneidert für Workation & Remote Work. Ergonomischer Arbeitsplatz, 1 Gbit/s Glasfaser, Espressobar & Südbalkon.
</p>
<div class="flex flex-wrap gap-2 mb-4 text-xs">
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">52 m²</span>
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">1 Gbit/s Glasfaser</span>
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">Ergo-Desk</span>
</div>
</div>
</div>
<div class="px-7 pb-7 pt-4 border-t border-stone-200/60 flex items-center justify-between">
<div>
<span class="text-[11px] text-warmmuted block">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>
<button onclick="openSuiteModal('suite4')" class="bg-stone-100 hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-full text-xs font-bold transition-all">
Details
</button>
</div>
</div>
<!-- ROMANTIK 1 -->
<div data-category="romantik" class="suite-card bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-bento hover:shadow-bento-hover transition-all duration-300 group flex flex-col justify-between">
<div>
<div class="relative h-64 overflow-hidden bg-stone-100">
<span class="absolute top-4 left-4 z-10 bg-gold text-charcoal text-[11px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">Romantik 1</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">
<div class="text-xs text-gold font-bold uppercase tracking-wider mb-2">Historisch • 2 Personen</div>
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Romantik 1 — Kaminzauber</h3>
<p class="text-sm text-warmmuted mb-6 leading-relaxed">
Freigelegtes Original-Eichengebälk von 1510, atmosphärischer Kaminfeuer-Effekt, Samt-Sessel & kuscheliges Ambiente.
</p>
<div class="flex flex-wrap gap-2 mb-4 text-xs">
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">42 m²</span>
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">Gebälk 1510</span>
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">Kamin-Optik</span>
</div>
</div>
</div>
<div class="px-7 pb-7 pt-4 border-t border-stone-200/60 flex items-center justify-between">
<div>
<span class="text-[11px] text-warmmuted block">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>
<button onclick="openSuiteModal('romantik1')" class="bg-stone-100 hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-full text-xs font-bold transition-all">
Details
</button>
</div>
</div>
<!-- ROMANTIK 2 -->
<div data-category="romantik" class="suite-card bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-bento hover:shadow-bento-hover transition-all duration-300 group flex flex-col justify-between">
<div>
<div class="relative h-64 overflow-hidden bg-stone-100">
<span class="absolute top-4 left-4 z-10 bg-gold text-charcoal text-[11px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">Romantik 2</span>
<img src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&w=1000&q=80" alt="Romantik 2 Badewanne" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<div class="p-7">
<div class="text-xs text-gold font-bold uppercase tracking-wider mb-2">Wellness • 2 Personen</div>
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Romantik 2 — Freistehende Wanne</h3>
<p class="text-sm text-warmmuted mb-6 leading-relaxed">
Freistehende Design-Badewanne im Zimmer, sichtbares Fachwerk und warmes Stimmungslicht für unvergessliche Auszeiten zu zweit.
</p>
<div class="flex flex-wrap gap-2 mb-4 text-xs">
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">46 m²</span>
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">Freistehende Wanne</span>
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">Romantik-Bad</span>
</div>
</div>
</div>
<div class="px-7 pb-7 pt-4 border-t border-stone-200/60 flex items-center justify-between">
<div>
<span class="text-[11px] text-warmmuted block">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>
<button onclick="openSuiteModal('romantik2')" class="bg-stone-100 hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-full text-xs font-bold transition-all">
Details
</button>
</div>
</div>
<!-- HOF-STUDIO -->
<div data-category="studio" class="suite-card bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-bento hover:shadow-bento-hover transition-all duration-300 group flex flex-col justify-between">
<div>
<div class="relative h-64 overflow-hidden bg-stone-100">
<span class="absolute top-4 left-4 z-10 bg-olive text-white text-[11px] font-semibold px-3 py-1 rounded-full">Studio</span>
<img src="https://images.unsplash.com/photo-1591088398332-8a7791972843?auto=format&fit=crop&w=1000&q=80" alt="Hof Studio" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<div class="p-7">
<div class="text-xs text-olive font-bold uppercase tracking-wider mb-2">Kompakt • 1–2 Personen</div>
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Hof-Studio Bäckerstraße</h3>
<p class="text-sm text-warmmuted mb-6 leading-relaxed">
Smart geschnittenes Designer-Studio zum geschützten Innenhof. Perfekt für Solo-Reisende, Kurztrips & geschäftliche Aufenthalte.
</p>
<div class="flex flex-wrap gap-2 mb-4 text-xs">
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">32 m²</span>
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">Ruhige Hoflage</span>
<span class="bg-sandcard px-2.5 py-1 rounded-full font-medium">Pantry-Küche</span>
</div>
</div>
</div>
<div class="px-7 pb-7 pt-4 border-t border-stone-200/60 flex items-center justify-between">
<div>
<span class="text-[11px] text-warmmuted block">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>
<button onclick="openSuiteModal('studio')" class="bg-stone-100 hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-full text-xs font-bold transition-all">
Details
</button>
</div>
</div>
</div>
</div>
</section>
<!-- 5. STORYTELLING: GOSLAR TRIFFT SIZILIEN -->
<section id="story" class="py-28 bg-white border-b border-stone-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
<!-- Text Side -->
<div class="lg:col-span-7">
<span class="text-siena font-bold text-xs uppercase tracking-widest mb-3 inline-block bg-sienalight px-3 py-1 rounded-full">Familien-Erbe & Philosophie</span>
<h2 class="text-3xl sm:text-5xl font-bold mb-6 text-charcoal font-serif leading-tight">
Vincenzos Erbe: Von Palazzolo Acreide nach Goslar.
</h2>
<p class="text-charcoal/85 text-base sm:text-lg leading-relaxed mb-6 font-normal">
Casa da Enzo ist keine kühle, anonyme FeWo-Investmentkette. Es ist das Herzensprojekt der Familie Campisi. Benannt nach Vincenzo „Enzo“ Campisi, verbindet das historische Bauwerk von 1510 in der Bäckerstraße 18 die Seele Siziliens mit dem weltberühmten Fachwerkerbe Goslars.
</p>
<p class="text-warmmuted text-sm sm:text-base leading-relaxed mb-8">
Heute führen Sergio und Alja Campisi das Haus mit persönlicher Hingabe: Ein Refugium, in dem sizilianische Herzlichkeit, frische Pasta nach Familienrezepten und moderner digitaler Komfort nahtlos verschmelzen.
</p>
<!-- Quote Card -->
<div class="p-6 sm:p-8 bg-sand rounded-3xl border border-stone-200/80 relative">
<span class="text-6xl font-serif text-siena/20 absolute top-2 left-4">“</span>
<p class="text-sm sm:text-base italic text-charcoal/90 leading-relaxed relative z-10 pl-4 border-l-2 border-siena">
„Gastfreundschaft bedeutet bei uns nicht, einfach einen Schlüssel zu übergeben — sondern dem Gast das Gefühl zu schenken, nach Hause zu kommen.“
</p>
<div class="mt-4 pl-4 text-xs font-bold uppercase tracking-wider text-siena">
— Alessandra, Sergio & Alja Campisi
</div>
</div>
</div>
<!-- Image / Gallery Side -->
<div class="lg:col-span-5 relative">
<div class="relative rounded-3xl overflow-hidden border border-stone-200/80 shadow-bento group">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=1200&q=85" alt="Gastgeber Familie Campisi" class="w-full h-auto object-cover group-hover:scale-102 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-charcoal/80 via-transparent to-transparent flex items-end p-6 text-white">
<div>
<span class="text-xs text-gold font-bold uppercase tracking-wider block">Bäckerstraße 18 • Goslar</span>
<span class="font-serif text-xl font-bold">Familiengeführte Hospitality aus Leidenschaft</span>
</div>
</div>
</div>
<!-- Floating Badge -->
<div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-2xl shadow-floating border border-stone-200/80 hidden sm:flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-goldlight text-gold font-serif font-bold text-2xl flex items-center justify-center">
1510
</div>
<div class="text-xs">
<span class="font-bold text-charcoal block">UNESCO-Denkmal</span>
<span class="text-warmmuted">Liebevoll restauriert</span>
</div>
</div>
</div>
</div>
</section>
<!-- 6. TRATTORIA & KULINARIK CROSS-SELL -->
<section id="trattoria" class="py-28 bg-charcoal text-sand relative overflow-hidden">
<!-- Atmospheric Background Blur Circles -->
<div class="absolute -top-32 -left-32 w-96 h-96 bg-siena/20 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute -bottom-32 -right-32 w-96 h-96 bg-gold/15 rounded-full blur-3xl pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center relative z-10">
<!-- Left Content -->
<div>
<div class="inline-flex items-center gap-2 bg-white/10 text-gold font-semibold text-xs uppercase tracking-widest px-3.5 py-1 rounded-full mb-6 backdrop-blur-md border border-white/15">
<span>Alessandras Trattoria</span>
</div>
<h2 class="text-3xl sm:text-5xl font-bold mb-6 text-white font-serif leading-tight">
Sizilien im Erdgeschoss: Unverfälschte Trattoria-Kultur.
</h2>
<p class="text-sand/85 text-base sm:text-lg leading-relaxed mb-8 font-light">
In Alessandras Trattoria genießen Sie echte sizilianische Küche. Täglich frische, handgemachte Pasta, sonnengereifte Zutaten, traditionelle Familienrezepte und erlesene Weine von den Hängen des Ätna.
</p>
<!-- Feature List -->
<div class="space-y-4 mb-10">
<div class="flex items-start gap-3.5 text-sm text-sand/90">
<div class="w-6 h-6 rounded-full bg-siena/30 text-gold flex items-center justify-center shrink-0 mt-0.5">✓</div>
<span><strong>Willkommens-Aperitif inklusive:</strong> Gratis Prosecco oder Aperitif für alle Direktbucher.</span>
</div>
<div class="flex items-start gap-3.5 text-sm text-sand/90">
<div class="w-6 h-6 rounded-full bg-siena/30 text-gold flex items-center justify-center shrink-0 mt-0.5">✓</div>
<span><strong>Frische Handarbeit:</strong> Tagliatelle, Ravioli, Arancini, Cannoli & hausgemachtes Tiramisù.</span>
</div>
<div class="flex items-start gap-3.5 text-sm text-sand/90">
<div class="w-6 h-6 rounded-full bg-siena/30 text-gold flex items-center justify-center shrink-0 mt-0.5">✓</div>
<span><strong>Garantierter Gästetisch:</strong> Bevorzugte Reservierung für Apartment-Gäste.</span>
</div>
</div>
<!-- CTAs -->
<div class="flex flex-wrap items-center gap-4">
<button onclick="openMenuModal()" class="bg-gold hover:bg-gold/90 text-charcoal font-bold px-7 py-3.5 rounded-full text-xs sm:text-sm transition-all shadow-md hover:scale-[1.02]">
Speisekarte Ansehen
</button>
<button onclick="openTableModal()" class="border border-white/30 hover:bg-white/10 text-white font-semibold px-7 py-3.5 rounded-full text-xs sm:text-sm transition-all">
Tisch Reservieren
</button>
</div>
</div>
<!-- Right Image Grid -->
<div class="grid grid-cols-2 gap-4">
<div class="rounded-3xl overflow-hidden border border-white/10 shadow-2xl h-64 sm:h-80">
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=800&q=80" alt="Trattoria Ambiente" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700">
</div>
<div class="rounded-3xl overflow-hidden border border-white/10 shadow-2xl h-64 sm:h-80 mt-8">
<img src="https://images.unsplash.com/photo-1551183053-bf91a1d81141?auto=format&fit=crop&w=800&q=80" alt="Frische Pasta" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700">
</div>
</div>
</div>
</section>
<!-- 7. WORRY-FREE ARRIVAL & OPERATIVE FAQS -->
<section id="faq" class="py-28 bg-sand border-b border-stone-200/60">
<div class="max-w-4xl mx-auto px-4 sm:px-6">
<div class="text-center mb-16">
<span class="text-siena font-bold text-xs uppercase tracking-widest mb-3 inline-block bg-sienalight px-3 py-1 rounded-full">Operative Infos & Anreise</span>
<h2 class="text-3xl sm:text-4xl font-bold text-charcoal font-serif">Sorglose Anreise & FAQ</h2>
<p class="text-warmmuted text-sm mt-3">Alles, was Sie für einen reibungslosen Aufenthalt in Goslar wissen müssen.</p>
</div>
<!-- Interactive Accordions -->
<div class="space-y-4">
<!-- FAQ 1 -->
<div class="bg-white rounded-3xl border border-stone-200/80 overflow-hidden shadow-bento transition-all">
<button onclick="toggleFaq('faq1')" class="w-full p-6 text-left flex items-center justify-between font-serif font-bold text-lg sm:text-xl text-charcoal focus:outline-none">
<span>Wie funktioniert der digitale 24/7 Nuki Check-in?</span>
<span id="faq1-icon" class="w-8 h-8 rounded-full bg-sandcard flex items-center justify-center text-siena font-sans text-xl shrink-0 transition-transform duration-300">+</span>
</button>
<div id="faq1-content" class="hidden px-6 pb-6 text-sm text-warmmuted leading-relaxed border-t border-stone-100 pt-4">
Am Anreisetag senden wir Ihnen pünktlich um 14:00 Uhr Ihren persönlichen 6-stelligen Nuki-PIN-Code per SMS und WhatsApp. Mit diesem Code öffnen Sie die historische Haustür Bäckerstraße 18 sowie Ihre Suite ab 15:00 Uhr absolut flexibel und schlüssellos — ohne Schlüsselübergabe-Stress oder Zeitdruck.
</div>
</div>
<!-- FAQ 2 -->
<div class="bg-white rounded-3xl border border-stone-200/80 overflow-hidden shadow-bento transition-all">
<button onclick="toggleFaq('faq2')" class="w-full p-6 text-left flex items-center justify-between font-serif font-bold text-lg sm:text-xl text-charcoal focus:outline-none">
<span>Wo kann ich in Goslar am besten parken?</span>
<span id="faq2-icon" class="w-8 h-8 rounded-full bg-sandcard flex items-center justify-center text-siena font-sans text-xl shrink-0 transition-transform duration-300">+</span>
</button>
<div id="faq2-content" class="hidden px-6 pb-6 text-sm text-warmmuted leading-relaxed border-t border-stone-100 pt-4">
Zum Be- und Entladen Ihres Gepäcks können Sie direkt vor das Haus in der Bäckerstraße 18 fahren. Zum dauerhaften Parken empfehlen wir den Großparkplatz <strong>Schützenplatz</strong> (nur 3 Gehminuten entfernt, günstig/kostenfrei) oder das Parkhaus <strong>Zentrumsgarage</strong> (4 Gehminuten).
</div>
</div>
<!-- FAQ 3 -->
<div class="bg-white rounded-3xl border border-stone-200/80 overflow-hidden shadow-bento transition-all">
<button onclick="toggleFaq('faq3')" class="w-full p-6 text-left flex items-center justify-between font-serif font-bold text-lg sm:text-xl text-charcoal focus:outline-none">
<span>Wie ist die Frühstücksregelung & Verpflegung?</span>
<span id="faq3-icon" class="w-8 h-8 rounded-full bg-sandcard flex items-center justify-center text-siena font-sans text-xl shrink-0 transition-transform duration-300">+</span>
</button>
<div id="faq3-content" class="hidden px-6 pb-6 text-sm text-warmmuted leading-relaxed border-t border-stone-100 pt-4">
Jede Suite verfügt über eine hochwertige Espressobar/Kaffeemaschine sowie eine voll ausgestattete Küche. In lediglich 2 Gehminuten erreichen Sie 3 hervorragende Altstadt-Bäckereien. Mittags & abends verwöhnt Sie Alessandras Trattoria direkt im Erdgeschoss mit warmen sizilianischen Spezialitäten.
</div>
</div>
<!-- FAQ 4 -->
<div class="bg-white rounded-3xl border border-stone-200/80 overflow-hidden shadow-bento transition-all">
<button onclick="toggleFaq('faq4')" class="w-full p-6 text-left flex items-center justify-between font-serif font-bold text-lg sm:text-xl text-charcoal focus:outline-none">
<span>Sind Hunde erlaubt & wie ist das WLAN ausgestattet?</span>
<span id="faq4-icon" class="w-8 h-8 rounded-full bg-sandcard flex items-center justify-center text-siena font-sans text-xl shrink-0 transition-transform duration-300">+</span>
</button>
<div id="faq4-content" class="hidden px-6 pb-6 text-sm text-warmmuted leading-relaxed border-t border-stone-100 pt-4">
Hunde sind auf Anfrage in ausgewählten Suiten (z.B. Suite 1 & Hof-Studio) herzlich willkommen. Alle Einheiten sind an unser ultraschnelles <strong>1 Gbit/s Glasfaser-WLAN</strong> angeschlossen — perfekt auch für Videocalls & Streaming.
</div>
</div>
</div>
</div>
</section>
<!-- 8. FOOTER & CONCIERGE CTA -->
<footer class="bg-charcoal text-sand/70 py-20 text-xs sm:text-sm border-t border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
<!-- Brand Info -->
<div class="md:col-span-2">
<div class="flex items-center gap-3 mb-4">
<div class="w-9 h-9 rounded-xl bg-siena text-white flex items-center justify-center font-serif font-bold text-lg">E</div>
<span class="font-serif text-2xl font-bold text-white">Casa da Enzo</span>
</div>
<p class="text-sand/70 max-w-sm leading-relaxed mb-6">
7 exklusive Boutique-Suiten & Echte Trattoria im UNESCO-Fachwerkerbe von 1510. Bäckerstraße 18, 38640 Goslar.
</p>
<p class="text-sand/40 text-xs">
© 2026 Casa da Enzo • Alle Rechte vorbehalten.
</p>
</div>
<!-- Quick Links -->
<div>
<h4 class="text-xs font-bold uppercase tracking-wider text-white mb-5">Navigation & Service</h4>
<ul class="space-y-3">
<li><a href="#suiten" class="hover:text-siena transition-colors">7 Suiten im Überblick</a></li>
<li><a href="#vorteile" class="hover:text-siena transition-colors">Direktbucher-Vorteile</a></li>
<li><a href="#trattoria" class="hover:text-siena transition-colors">Trattoria Speisekarte</a></li>
<li><a href="#faq" class="hover:text-siena transition-colors">Anreise & Parken</a></li>
</ul>
</div>
<!-- Contact -->
<div>
<h4 class="text-xs font-bold uppercase tracking-wider text-white mb-5">Kontakt & Concierge</h4>
<ul class="space-y-3">
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-siena" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
<span>+49 1520 7483196</span>
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-siena" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
<span>booking@casa-daenzo.de</span>
</li>
<li class="pt-2">
<button onclick="openWhatsAppModal()" class="inline-flex items-center gap-2 text-xs font-bold text-white bg-olive hover:bg-olive/80 px-4 py-2 rounded-full transition-colors">
<span>WhatsApp Concierge (24/7)</span>
</button>
</li>
</ul>
</div>
</div>
</footer>
<!-- FLOATING WHATSAPP CONCIERGE BUTTON (BOTTOM RIGHT) -->
<div class="fixed bottom-6 right-6 z-50">
<button onclick="openWhatsAppModal()" class="bg-siena hover:bg-sienadark text-white p-4 rounded-full shadow-floating flex items-center gap-3 transition-all hover:scale-105 active:scale-95 group border border-white/20">
<div class="relative">
<svg class="w-6 h-6" 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 class="absolute -top-1 -right-1 w-3 h-3 bg-emerald-400 rounded-full border-2 border-siena"></span>
</div>
<span class="text-xs font-bold hidden md:inline pr-1">Concierge Fragen</span>
</button>
</div>
<!-- INTERACTIVE MODAL 1: SUITE DETAILS MODAL -->
<div id="suite-modal" class="fixed inset-0 z-50 hidden bg-charcoal/80 backdrop-blur-md flex items-center justify-center p-4 sm:p-6 overflow-y-auto">
<div class="bg-white rounded-3xl max-w-2xl w-full p-6 sm:p-8 relative shadow-floating border border-stone-200/80 max-h-[90vh] overflow-y-auto">
<button onclick="closeModal('suite-modal')" class="absolute top-4 right-4 w-10 h-10 rounded-full bg-sandcard text-charcoal hover:bg-siena hover:text-white transition-colors flex items-center justify-center font-bold">✕</button>
<div id="modal-suite-content">
<!-- Injected via JS -->
</div>
</div>
</div>
<!-- INTERACTIVE MODAL 2: WHATSAPP CONCIERGE MODAL -->
<div id="whatsapp-modal" class="fixed inset-0 z-50 hidden bg-charcoal/80 backdrop-blur-md flex items-center justify-center p-4 sm:p-6">
<div class="bg-white rounded-3xl max-w-md w-full p-6 sm:p-8 relative shadow-floating border border-stone-200/80 text-center">
<button onclick="closeModal('whatsapp-modal')" class="absolute top-4 right-4 w-9 h-9 rounded-full bg-sandcard text-charcoal hover:bg-siena hover:text-white transition-colors flex items-center justify-center font-bold">✕</button>
<div class="w-16 h-16 bg-olivelight text-olive rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8" 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>
</div>
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">WhatsApp Concierge</h3>
<p class="text-xs text-warmmuted mb-6">Direktkontakt zu Alja & Sergio Campisi. Antworten innerhalb weniger Minuten.</p>
<div class="space-y-3 text-left mb-6">
<a href="https://wa.me/4915207483196?text=Hallo%20Familie%20Campisi,%20ich%20habe%20eine%20Frage%20zur%20Direktbuchung%20einer%20Suite." target="_blank" class="block p-4 rounded-2xl bg-sand hover:bg-sienalight hover:text-siena transition-all border border-stone-200/80 font-medium text-xs">
💬 Frage zur Verfügbarkeit & Bestpreis stellen
</a>
<a href="https://wa.me/4915207483196?text=Hallo,%20ich%20m%C3%B6chte%20einen%20Tisch%20in%20Alessandras%20Trattoria%20reservieren." target="_blank" class="block p-4 rounded-2xl bg-sand hover:bg-sienalight hover:text-siena transition-all border border-stone-200/80 font-medium text-xs">
🍝 Tisch in der Trattoria reservieren
</a>
<a href="https://wa.me/4915207483196?text=Hallo,%20ich%20habe%20eine%20Frage%20zum%2024/7%20Check-in%20oder%20Parken." target="_blank" class="block p-4 rounded-2xl bg-sand hover:bg-sienalight hover:text-siena transition-all border border-stone-200/80 font-medium text-xs">
🔑 Frage zu Check-in / Anreise / Parken
</a>
</div>
</div>
</div>
<!-- INTERACTIVE JAVASCRIPT -->
<script>
// Set default dates in booking bar (tomorrow & +2 days)
document.addEventListener('DOMContentLoaded', () => {
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
const dayAfter = new Date(today);
dayAfter.setDate(dayAfter.getDate() + 3);
document.getElementById('checkin').value = tomorrow.toISOString().split('T')[0];
document.getElementById('checkout').value = dayAfter.toISOString().split('T')[0];
});
// Suite Data Object for Details Modal
const suitesData = {
suite1: {
title: "Suite 1 — Balkon & Altstadtblick",
category: "Vorderhaus Suite",
guests: "Bis zu 4 Personen",
size: "55 m²",
price: "119 €",
image: "https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=1200&q=80",
desc: "Lichtdurchflutete Loggia-Suite im 1. Obergeschoss mit direktem Blick in die historische Bäckerstraße. Separates Schlafzimmer mit Kingsize-Boxspringbett, großzügiger Wohnbereich mit bequemer Schlaf-Couch, Designer-Tageslichtbad mit Regendusche & voll ausgestattete Küche.",
features: ["Privater Altstadt-Balkon", "Kingsize Boxspringbett", "Schlafsofa für 2 weitere Gäste", "Nespresso Espresso-Bar", "1 Gbit/s Glasfaser WLAN", "4K Smart-TV mit Streaming"]
},
suite2: {
title: "Suite 2 — Private Terrasse",
category: "Sonnendeck Suite",
guests: "Bis zu 2 Personen",
size: "48 m²",
price: "129 €",
image: "https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=1200&q=80",
desc: "Ruhige, exklusive Oase mit direktem Zugang zu einer geschützten Sonnenterrasse im Innenhof. Perfekt für entspannte Morgen-Kaffees und laue Sommerabende in absoluter Ungestörtheit.",
features: ["Private Hof-Terrasse", "Sonnendeck mit Liegestühlen", "Kingsize Boxspringbett", "Tageslichtbad mit Regendusche", "Kaffeespezialitäten-Bar", "Nuki Smart Lock Access"]
},
suite3: {
title: "Suite 3 — Altstadt Komfort",
category: "Komfort Suite",
guests: "Bis zu 4 Personen",
size: "50 m²",
price: "109 €",
image: "https://images.unsplash.com/photo-1618773928121-c32242e63f39?auto=format&fit=crop&w=1200&q=80",
desc: "Historisches Fachwerk trifft auf modernes Design. Bodengleiche Walk-In Regendusche, stilvolle Eichenholz-Akzente und flexible Schlafmöglichkeiten für Familien oder Paare.",
features: ["Walk-In Regendusche", "Eichenholz-Fachwerkakzente", "Boxspringbett", "Voll ausgestattete Küche", "Glasfaser-WLAN", "Ruhiges Schlafzimmer"]
},
suite4: {
title: "Suite 4 — Workspace & Balkon",
category: "Workspace Suite",
guests: "Bis zu 2 Personen",
size: "52 m²",
price: "115 €",
image: "https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?auto=format&fit=crop&w=1200&q=80",
desc: "Die ideale Suite für Workation & Kreativpausen. Ergonomischer Schreibtisch mit 4K-Monitor-Anschluss, ultraschnelles Glasfaser-Internet, Südbalkon und Kaffeebar.",
features: ["Ergonomischer Workspace", "1 Gbit/s Glasfaser-WLAN", "Südbalkon", "Espressobar", "Kingsize-Bett", "Ruhige Lage"]
},
romantik1: {
title: "Romantik Suite 1 — Kaminzauber",
category: "Romantik Suite",
guests: "Bis zu 2 Personen",
size: "42 m²",
price: "99 €",
image: "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&w=1200&q=80",
desc: "Freigelegtes Eichengebälk aus dem Jahr 1510, behaglicher Kaminfeuer-Effekt, samtene Sessel und warmes Stimmungslicht schaffen eine unvergleichlich romantische Atmosphäre.",
features: ["Original Gebälk von 1510", "Stimmungsvoller Kamin-Effekt", "Samt-Sessel & Lounge", "Regendusche", "Nespresso-Bar", "Smart-TV"]
},
romantik2: {
title: "Romantik Suite 2 — Freistehende Wanne",
category: "Romantik Suite",
guests: "Bis zu 2 Personen",
size: "46 m²",
price: "109 €",
image: "https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&w=1200&q=80",
desc: "Das Highlight für Paare: Freistehende Design-Badewanne direkt im Raum, atmosphärische Beleuchtung, sichtbar gemachtes Historienfachwerk und Luxus-Bettwaren.",
features: ["Freistehende Badewanne", "Romantik-Atmosphäre", "Eichenholz-Fachwerk", "Kingsize-Bett", "Espressobar", "Keyless Access"]
},
studio: {
title: "Hof-Studio Bäckerstraße",
category: "Hof Studio",
guests: "Bis zu 2 Personen",
size: "32 m²",
price: "79 €",
image: "https://images.unsplash.com/photo-1591088398332-8a7791972843?auto=format&fit=crop&w=1200&q=80",
desc: "Kompaktes, maßgeschneidertes Studio im ruhigen Innenhof. Höchster Komfort auf 32 m² mit Queensize-Boxspringbett, Pantry-Küche, Regendusche und Highspeed-WLAN.",
features: ["Geschützte Hoflage", "Queensize Boxspringbett", "Pantry-Küche", "Walk-In Dusche", "Glasfaser-WLAN", "Bestpreis-Favorit"]
}
};
// Suite Filter Function
function filterSuites(category) {
const cards = document.querySelectorAll('.suite-card');
const buttons = document.querySelectorAll('.suite-filter-btn');
buttons.forEach(btn => {
btn.classList.remove('bg-charcoal', 'text-white');
btn.classList.add('bg-white', 'text-charcoal');
});
const activeBtn = document.getElementById(`filter-${category}`);
if (activeBtn) {
activeBtn.classList.remove('bg-white', 'text-charcoal');
activeBtn.classList.add('bg-charcoal', 'text-white');
}
cards.forEach(card => {
if (category === 'all' || card.getAttribute('data-category') === category) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
});
}
// Modal Handlers
function openSuiteModal(key) {
const data = suitesData[key];
if (!data) return;
const content = `
<div class="rounded-2xl overflow-hidden h-64 mb-6 bg-stone-100">
<img src="${data.image}" alt="${data.title}" class="w-full h-full object-cover">
</div>
<div class="flex items-center justify-between text-xs text-siena font-bold uppercase tracking-wider mb-1">
<span>${data.category}</span>
<span>${data.guests} • ${data.size}</span>
</div>
<h3 class="font-serif font-bold text-2xl sm:text-3xl text-charcoal mb-4">${data.title}</h3>
<p class="text-sm text-warmmuted leading-relaxed mb-6">${data.desc}</p>
<h4 class="text-xs font-bold uppercase tracking-wider text-charcoal mb-3">Ausstattung Highlights</h4>
<div class="grid grid-cols-2 gap-2 mb-8 text-xs text-charcoal/90">
${data.features.map(f => `<div class="flex items-center gap-2 bg-sandcard p-2.5 rounded-xl font-medium">✓ ${f}</div>`).join('')}
</div>
<div class="p-4 bg-sienalight rounded-2xl flex items-center justify-between">
<div>
<span class="text-[11px] text-siena font-bold block">Direktbucher Bestpreis</span>
<span class="font-serif font-bold text-2xl text-charcoal">${data.price} <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
</div>
<a href="https://wa.me/4915207483196?text=Hallo%20Familie%20Campisi,%20ich%20m%C3%B6chte%20${encodeURIComponent(data.title)}%20direkt%20buchen." target="_blank" class="bg-siena hover:bg-sienadark text-white font-bold px-6 py-3 rounded-full text-xs shadow-md transition-all">
Jetzt Anfragen & Buchen
</a>
</div>
`;
document.getElementById('modal-suite-content').innerHTML = content;
document.getElementById('suite-modal').classList.remove('hidden');
}
function openWhatsAppModal() {
document.getElementById('whatsapp-modal').classList.remove('hidden');
}
function closeModal(modalId) {
document.getElementById(modalId).classList.add('hidden');
}
// Toggle FAQ Accordion
function toggleFaq(faqId) {
const content = document.getElementById(`${faqId}-content`);
const icon = document.getElementById(`${faqId}-icon`);
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
icon.innerText = '−';
icon.classList.add('rotate-180', 'bg-siena', 'text-white');
} else {
content.classList.add('hidden');
icon.innerText = '+';
icon.classList.remove('rotate-180', 'bg-siena', 'text-white');
}
}
// Handle Form Submit
function handleBookingSubmit(e) {
e.preventDefault();
const checkin = document.getElementById('checkin').value;
const checkout = document.getElementById('checkout').value;
const suite = document.getElementById('suite-select').value;
const msg = `Hallo%20Familie%20Campisi,%20ich%20m%C3%B6chte%20die%20Verf%C3%BCgbarkeit%20pr%C3%BCfen:%0A- Anreise: ${checkin}%0A- Abreise: ${checkout}%0A- Ausgewählte Suite: ${suite}`;
window.open(`https://wa.me/4915207483196?text=${msg}`, '_blank');
}
// Modal Backdrop Close
window.onclick = function(event) {
const suiteModal = document.getElementById('suite-modal');
const waModal = document.getElementById('whatsapp-modal');
if (event.target === suiteModal) suiteModal.classList.add('hidden');
if (event.target === waModal) waModal.classList.add('hidden');
};
</script>
</body>
</html>