1023 lines
65 KiB
HTML
1023 lines
65 KiB
HTML
<!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 Suites & Trattoria | Goslar</title>
|
||
<meta name="description" content="7 exklusive Boutique Suiten im UNESCO-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>
|