style: overhaul design system with Airbnb luxury tokens and Bento layout
This commit is contained in:
1 parent
8766ce1da8
commit
40a6f466a0
3 files changed
+216
-202
No files matched your search
+216
-202
@@ -3,8 +3,10 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Casa da Enzo — Boutique Apartments & Trattoria in Goslar</title>
|
<title>Casa da Enzo — Luxury Boutique Suites & Trattoria | Goslar</title>
|
||||||
<meta name="description" content="7 exklusive Boutique Suiten & Apartments in der historischen Altstadt Goslar (Bäckerstraße 18). Mit eigener sizilianischer Trattoria, 24/7 Nuki Check-in & Bestpreis-Garantie.">
|
<meta name="description" content="7 exklusive Boutique Suiten im UNESCO-Fachwerkerbe von 1510. Echte sizilianische Trattoria, 24/7 Nuki Keyless Access & Bestpreis-Garantie in der Bäckerstraße 18, Goslar.">
|
||||||
|
|
||||||
|
<!-- Tailwind CSS CDN -->
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script>
|
<script>
|
||||||
tailwind.config = {
|
tailwind.config = {
|
||||||
@@ -13,94 +15,114 @@
|
|||||||
colors: {
|
colors: {
|
||||||
siena: '#C25932',
|
siena: '#C25932',
|
||||||
terracotta: '#A8431F',
|
terracotta: '#A8431F',
|
||||||
sand: '#F9F6F0',
|
sand: '#FAF8F5',
|
||||||
charcoal: '#1A1817',
|
stonebg: '#F3EFEA',
|
||||||
olive: '#4A5240',
|
charcoal: '#1C1917',
|
||||||
|
charcoalsoft: '#292524',
|
||||||
|
warmmuted: '#78716C',
|
||||||
gold: '#D4A359',
|
gold: '#D4A359',
|
||||||
warmgray: '#EFECE6'
|
olive: '#4A5240'
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
serif: ['Playfair Display', 'Georgia', 'serif'],
|
serif: ['Playfair Display', 'Georgia', 'serif'],
|
||||||
sans: ['Plus Jakarta Sans', 'Inter', 'sans-serif'],
|
sans: ['Plus Jakarta Sans', 'Inter', 'sans-serif'],
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
'airbnb': '0 0 0 1px rgba(0,0,0,0.03), 0 2px 8px rgba(0,0,0,0.04), 0 12px 28px rgba(0,0,0,0.08)',
|
||||||
|
'airbnb-hover': '0 0 0 1px rgba(0,0,0,0.05), 0 8px 20px rgba(0,0,0,0.08), 0 20px 40px rgba(0,0,0,0.12)',
|
||||||
|
'floating': '0 20px 50px -10px rgba(28,25,23,0.25)'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..800;1,400..800&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..800;1,400..800&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body { background-color: #F9F6F0; color: #1A1817; font-family: 'Plus Jakarta Sans', sans-serif; }
|
body { background-color: #FAF8F5; color: #1C1917; font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.01em; }
|
||||||
h1, h2, h3, .font-serif { font-family: 'Playfair Display', serif; }
|
h1, h2, h3, .font-serif { font-family: 'Playfair Display', serif; }
|
||||||
|
|
||||||
|
/* Smooth custom scrollbar */
|
||||||
|
::-webkit-scrollbar { width: 8px; }
|
||||||
|
::-webkit-scrollbar-track { background: #FAF8F5; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #D6D0C7; border-radius: 4px; }
|
||||||
|
::-webkit-scrollbar-thumb:hover { background: #C25932; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="antialiased selection:bg-siena selection:text-white">
|
<body class="antialiased selection:bg-siena selection:text-white">
|
||||||
|
|
||||||
<!-- TOP BAR / ANNOUNCEMENT -->
|
<!-- TOP PROMO BANNER -->
|
||||||
<div class="bg-charcoal text-sand text-xs py-2.5 px-4 text-center tracking-wide flex justify-center items-center gap-3 border-b border-white/10">
|
<div class="bg-charcoal text-sand text-xs py-2.5 px-6 text-center font-medium tracking-wide flex justify-center items-center gap-3 border-b border-white/10">
|
||||||
<span class="bg-siena text-white px-2.5 py-0.5 rounded-full text-[10px] font-bold tracking-wider uppercase">Direktbucher-Vorteil</span>
|
<span class="bg-siena text-white px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider">Direktbucher-Vorteil</span>
|
||||||
<span>Bestpreis-Garantie + 1 Glas Willkommens-Aperitif in Alessandras Trattoria inklusive!</span>
|
<span>Garantierter Bestpreis + 1 Glas Willkommens-Aperitif in Alessandras Trattoria inklusive</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- NAVIGATION HEADER -->
|
<!-- STICKY GLASSMORPHIC HEADER -->
|
||||||
<header class="sticky top-0 z-50 bg-sand/95 backdrop-blur-md border-b border-warmgray transition-all">
|
<header class="sticky top-0 z-50 bg-sand/90 backdrop-blur-xl border-b border-stone-200/60 transition-all">
|
||||||
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
<div class="max-w-7xl mx-auto px-6 md:px-10 h-20 flex items-center justify-between">
|
||||||
<a href="#" class="flex items-center gap-3 group">
|
<a href="#" class="flex items-center gap-3.5 group">
|
||||||
<span class="font-serif text-2xl md:text-3xl font-bold tracking-tight text-charcoal group-hover:text-siena transition-colors">Casa da Enzo</span>
|
<span class="font-serif text-2xl md:text-3xl font-bold tracking-tight text-charcoal group-hover:text-siena transition-colors">Casa da Enzo</span>
|
||||||
<span class="text-[11px] uppercase tracking-widest text-siena border-l border-siena/30 pl-3 hidden sm:inline font-semibold">Boutique Apartments & Trattoria</span>
|
<span class="h-4 w-px bg-stone-300 hidden sm:block"></span>
|
||||||
|
<span class="text-[11px] uppercase tracking-widest text-siena font-semibold hidden sm:block">Boutique Suites & Trattoria</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<nav class="hidden md:flex items-center gap-8 text-sm font-medium text-charcoal/80">
|
<nav class="hidden md:flex items-center gap-9 text-sm font-medium text-charcoal/80">
|
||||||
<a href="#apartments" class="hover:text-siena transition-colors">7 Suiten & Apartments</a>
|
<a href="#suiten" class="hover:text-siena transition-colors">7 Suiten</a>
|
||||||
<a href="#vorteile" class="hover:text-siena transition-colors">Direktbucher-Vorteile</a>
|
<a href="#vorteile" class="hover:text-siena transition-colors">Vorteile</a>
|
||||||
<a href="#story" class="hover:text-siena transition-colors">Geschichte</a>
|
<a href="#story" class="hover:text-siena transition-colors">Geschichte</a>
|
||||||
<a href="#trattoria" class="hover:text-siena transition-colors">Trattoria</a>
|
<a href="#trattoria" class="hover:text-siena transition-colors">Trattoria</a>
|
||||||
<a href="#faq" class="hover:text-siena transition-colors">Anreise & FAQ</a>
|
<a href="#faq" class="hover:text-siena transition-colors">Anreise & FAQ</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
<a href="https://wa.me/4915207483196" target="_blank" class="hidden lg:flex items-center gap-2 text-xs font-semibold text-olive bg-olive/10 hover:bg-olive/20 px-3 py-2 rounded-lg transition-colors">
|
<a href="https://wa.me/4915207483196" target="_blank" class="hidden lg:flex items-center gap-2 text-xs font-semibold text-olive bg-olive/10 hover:bg-olive/20 px-3.5 py-2 rounded-full transition-colors">
|
||||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg>
|
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg>
|
||||||
<span>WhatsApp Concierge</span>
|
<span>WhatsApp Concierge</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="#booking" class="bg-siena hover:bg-terracotta text-white px-5 py-2.5 rounded-lg text-sm font-semibold transition-all shadow-sm hover:shadow-md">
|
<a href="#booking" class="bg-siena hover:bg-terracotta text-white px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm hover:shadow-md hover:scale-[1.02]">
|
||||||
Suiten Buchen
|
Jetzt Buchen
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- HERO SECTION -->
|
<!-- CINEMATIC HERO SECTION -->
|
||||||
<section class="relative min-h-[85vh] flex items-center justify-center bg-charcoal text-sand overflow-hidden">
|
<section class="relative min-h-[88vh] flex items-center justify-center bg-charcoal text-sand overflow-hidden">
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-charcoal via-charcoal/65 to-charcoal/30 z-10"></div>
|
<!-- Immersive Background Image -->
|
||||||
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2000&q=80')] bg-cover bg-center opacity-40"></div>
|
<div class="absolute inset-0 bg-gradient-to-t from-charcoal via-charcoal/60 to-charcoal/30 z-10"></div>
|
||||||
|
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2400&q=85')] bg-cover bg-center opacity-50 scale-105"></div>
|
||||||
|
|
||||||
<div class="relative z-20 max-w-5xl mx-auto text-center px-6 py-20">
|
<div class="relative z-20 max-w-5xl mx-auto text-center px-6 py-24">
|
||||||
<span class="text-gold font-semibold text-xs uppercase tracking-widest mb-4 inline-block bg-white/10 border border-gold/40 px-4 py-1.5 rounded-full backdrop-blur-md">
|
<span class="inline-flex items-center gap-2 bg-white/10 border border-white/20 text-gold font-semibold text-xs uppercase tracking-widest px-4 py-1.5 rounded-full backdrop-blur-md mb-6">
|
||||||
Bäckerstraße 18 • UNESCO-Altstadt Goslar
|
<span class="w-2 h-2 rounded-full bg-siena animate-pulse"></span>
|
||||||
|
Bäckerstraße 18 • UNESCO-Weltkulturerbe Goslar
|
||||||
</span>
|
</span>
|
||||||
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight text-white mb-6 leading-[1.12]">
|
|
||||||
Sizilianische Gastfreundschaft im Herzen von Goslar.
|
<h1 class="text-4xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-white mb-6 leading-[1.1] font-serif">
|
||||||
|
Sizilianische Gastfreundschaft.<br class="hidden sm:block"> Inmitten Goslars Altstadt.
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-lg md:text-xl text-sand/80 max-w-2xl mx-auto mb-10 font-light leading-relaxed">
|
|
||||||
7 liebevoll restaurierte Boutique-Suites im Fachwerkerbe von 1510. Echte Trattoria im Erdgeschoss, 24/7 Nuki Keyless Check-in und unmittelbare Lage am historischen Marktplatz.
|
<p class="text-base sm:text-xl text-sand/85 max-w-2xl mx-auto mb-12 font-light leading-relaxed">
|
||||||
|
7 restaurierte Boutique-Suiten im Fachwerkerbe von 1510. Echte Trattoria im Haus, 24/7 Nuki Keyless Check-in & unvergesslicher Harz-Urlaub.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- QUICK BOOKING BAR (DIRECT CONVERSION ENGINE) -->
|
<!-- FLOATING LUXURY BOOKING BAR -->
|
||||||
<div id="booking" class="bg-white/95 backdrop-blur-lg p-5 md:p-6 rounded-2xl shadow-2xl text-charcoal max-w-4xl mx-auto border border-white/20">
|
<div id="booking" class="bg-white/95 backdrop-blur-2xl p-4 sm:p-6 rounded-3xl shadow-floating text-charcoal max-w-4xl mx-auto border border-white/40">
|
||||||
<form class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
|
<form class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3.5 items-end">
|
||||||
<div class="text-left">
|
<div class="text-left bg-stonebg/60 p-3 rounded-2xl border border-stone-200/80">
|
||||||
<label class="block text-xs font-bold text-charcoal/70 uppercase tracking-wider mb-1.5">Anreise</label>
|
<label class="block text-[10px] font-bold text-warmmuted uppercase tracking-wider mb-1">Anreise</label>
|
||||||
<input type="date" class="w-full bg-sand/60 border border-warmgray rounded-lg p-3 text-sm font-medium focus:ring-2 focus:ring-siena outline-none">
|
<input type="date" class="w-full bg-transparent font-medium text-sm text-charcoal outline-none cursor-pointer">
|
||||||
</div>
|
</div>
|
||||||
<div class="text-left">
|
<div class="text-left bg-stonebg/60 p-3 rounded-2xl border border-stone-200/80">
|
||||||
<label class="block text-xs font-bold text-charcoal/70 uppercase tracking-wider mb-1.5">Abreise</label>
|
<label class="block text-[10px] font-bold text-warmmuted uppercase tracking-wider mb-1">Abreise</label>
|
||||||
<input type="date" class="w-full bg-sand/60 border border-warmgray rounded-lg p-3 text-sm font-medium focus:ring-2 focus:ring-siena outline-none">
|
<input type="date" class="w-full bg-transparent font-medium text-sm text-charcoal outline-none cursor-pointer">
|
||||||
</div>
|
</div>
|
||||||
<div class="text-left">
|
<div class="text-left bg-stonebg/60 p-3 rounded-2xl border border-stone-200/80">
|
||||||
<label class="block text-xs font-bold text-charcoal/70 uppercase tracking-wider mb-1.5">Gäste / suite</label>
|
<label class="block text-[10px] font-bold text-warmmuted uppercase tracking-wider mb-1">Gäste & Suite</label>
|
||||||
<select class="w-full bg-sand/60 border border-warmgray rounded-lg p-3 text-sm font-medium focus:ring-2 focus:ring-siena outline-none">
|
<select class="w-full bg-transparent font-medium text-sm text-charcoal outline-none cursor-pointer">
|
||||||
<option>2 Erwachsene (1 Suite)</option>
|
<option>2 Erwachsene (1 Suite)</option>
|
||||||
<option>1 Erwachsener</option>
|
<option>1 Erwachsener</option>
|
||||||
<option>Familie (2 Erw. + Kinder)</option>
|
<option>Familie (2 Erw. + Kinder)</option>
|
||||||
@@ -108,9 +130,9 @@
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<button type="submit" class="w-full bg-siena hover:bg-terracotta text-white font-bold py-3.5 px-6 rounded-lg text-sm transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2">
|
<button type="submit" class="w-full bg-siena hover:bg-terracotta text-white font-bold py-3.5 px-6 rounded-2xl text-sm transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2 group">
|
||||||
<span>Bestpreis Prüfen</span>
|
<span>Bestpreis Prüfen</span>
|
||||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
|
<svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -118,180 +140,174 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- DIRECT BOOKER BENEFITS -->
|
<!-- DIRECT BOOKER TRUST SECTION -->
|
||||||
<section id="vorteile" class="py-20 bg-sand border-b border-warmgray">
|
<section id="vorteile" class="py-24 bg-sand border-b border-stone-200/60">
|
||||||
<div class="max-w-7xl mx-auto px-6">
|
<div class="max-w-7xl mx-auto px-6 md:px-10">
|
||||||
<div class="text-center max-w-2xl mx-auto mb-12">
|
<div class="text-center max-w-2xl mx-auto mb-16">
|
||||||
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-2 inline-block">Warum direkt bei uns buchen?</span>
|
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-3 inline-block">100% Direktbucher-Vorteil</span>
|
||||||
<h2 class="text-3xl font-bold text-charcoal">Ihre Vorteile auf der offiziellen Website</h2>
|
<h2 class="text-3xl md:text-4xl font-bold text-charcoal font-serif">Exklusive Privilegien der Direktbuchung</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
<div class="flex items-start gap-4 p-8 bg-white rounded-2xl border border-warmgray shadow-sm hover:shadow-md transition-shadow">
|
<div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all">
|
||||||
<div class="w-12 h-12 rounded-xl bg-siena/10 text-siena flex items-center justify-center shrink-0">
|
<div class="w-12 h-12 rounded-2xl bg-siena/10 text-siena flex items-center justify-center mb-6">
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Bestpreis & Willkommens-Drink</h3>
|
||||||
<h3 class="font-serif font-bold text-xl mb-1.5 text-charcoal">Garantierter Bestpreis & Aperitif</h3>
|
<p class="text-sm text-warmmuted leading-relaxed">Immer 5–10% günstiger als auf Booking.com & Airbnb. Inklusive 1 Glas Prosecco oder Aperitif in Alessandras Trattoria.</p>
|
||||||
<p class="text-sm text-charcoal/70 leading-relaxed">Sparen Sie 5–10% gegenüber Booking.com & Airbnb. Zusätzlich erhalten Sie 1 Glas Willkommens-Aperitif in Alessandras Trattoria gratis.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-start gap-4 p-8 bg-white rounded-2xl border border-warmgray shadow-sm hover:shadow-md transition-shadow">
|
<div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all">
|
||||||
<div class="w-12 h-12 rounded-xl bg-siena/10 text-siena flex items-center justify-center shrink-0">
|
<div class="w-12 h-12 rounded-2xl bg-siena/10 text-siena flex items-center justify-center mb-6">
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 0121 9z"/></svg>
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 0121 9z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">24/7 Digitaler Keyless Access</h3>
|
||||||
<h3 class="font-serif font-bold text-xl mb-1.5 text-charcoal">24/7 Nuki Keyless Check-in</h3>
|
<p class="text-sm text-warmmuted leading-relaxed">Völlig flexibel anreisen. Ihr Nuki-PIN-Code kommt am Anreisetag um 14:00 Uhr per SMS/WhatsApp. Kein Anreise-Stress.</p>
|
||||||
<p class="text-sm text-charcoal/70 leading-relaxed">Reisen Sie völlig flexibel an. Ihr persönlicher Nuki-PIN-Code öffnet die Haustür und Ihr Apartment ab 15:00 Uhr rund um die Uhr.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-start gap-4 p-8 bg-white rounded-2xl border border-warmgray shadow-sm hover:shadow-md transition-shadow">
|
<div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all">
|
||||||
<div class="w-12 h-12 rounded-xl bg-siena/10 text-siena flex items-center justify-center shrink-0">
|
<div class="w-12 h-12 rounded-2xl bg-siena/10 text-siena flex items-center justify-center mb-6">
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/></svg>
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Historische Altstadt-Lage</h3>
|
||||||
<h3 class="font-serif font-bold text-xl mb-1.5 text-charcoal">Historische Top-Altstadtlage</h3>
|
<p class="text-sm text-warmmuted leading-relaxed">Bäckerstraße 18: Ruhig im Fachwerk-Areal gelegen. Nur 3 Gehminuten zum historischen Marktplatz und der Kaiserpfalz.</p>
|
||||||
<p class="text-sm text-charcoal/70 leading-relaxed">Bäckerstraße 18: Ruhiges Fachwerk-Areal, nur 3 Gehminuten zum Marktplatz, der Kaiserpfalz und allen Altstadt-Highlight-Spots.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- APARTMENTS CATALOGUE (7 SUITES) -->
|
<!-- APARTMENTS CATALOGUE (7 SUITES BENTO GRID) -->
|
||||||
<section id="apartments" class="py-24 bg-sand">
|
<section id="suiten" class="py-28 bg-sand">
|
||||||
<div class="max-w-7xl mx-auto px-6">
|
<div class="max-w-7xl mx-auto px-6 md:px-10">
|
||||||
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16">
|
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16">
|
||||||
<div>
|
<div>
|
||||||
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-2 inline-block">7 Refugien der Erholung</span>
|
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-3 inline-block">7 Refugien der Erholung</span>
|
||||||
<h2 class="text-3xl md:text-5xl font-bold text-charcoal">Unsere Suiten & Apartments</h2>
|
<h2 class="text-3xl md:text-5xl font-bold text-charcoal font-serif">Unsere Suiten & Apartments</h2>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-charcoal/70 max-w-md mt-4 md:mt-0 text-sm leading-relaxed">
|
<p class="text-warmmuted max-w-md mt-4 md:mt-0 text-sm leading-relaxed">
|
||||||
Fachwerk-Erbe aus dem 16. Jahrhundert trifft auf modernen Wohnkomfort. Boxspringbetten, Design-Bäder, Highspeed-Glasfaser-WLAN & sizilianische Details.
|
Historischer Charme aus dem Jahr 1510 trifft auf modernen Wohnkomfort, Boxspringbetten, Design-Bäder, Highspeed-Glasfaser & mediterranes Flair.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 7 APARTMENT CARDS GRID -->
|
<!-- BENTO / CARD GRID -->
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
|
||||||
<!-- SUITE 1 -->
|
<!-- SUITE 1 -->
|
||||||
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group">
|
<div class="bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all group">
|
||||||
<div class="relative h-64 overflow-hidden bg-charcoal/10">
|
<div class="relative h-72 overflow-hidden bg-stonebg">
|
||||||
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full">Vorderhaus Suite</span>
|
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3.5 py-1 rounded-full">Vorderhaus Suite</span>
|
||||||
<img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=800&q=80" alt="Suite 1 Balkon" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
<img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=1000&q=80" alt="Suite 1 Balkon" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6">
|
<div class="p-7">
|
||||||
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 1 — Balkon & Altstadtblick</h3>
|
<h3 class="font-serif font-bold text-2xl mb-1 text-charcoal">Suite 1 — Balkon & Altstadtblick</h3>
|
||||||
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 4 Personen • 55 m² • Privater Balkon</p>
|
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 4 Personen • 55 m² • Privater Balkon</p>
|
||||||
<p class="text-sm text-charcoal/70 mb-6 line-clamp-2">Lichtdurchflutete Loggia-Suite im 1. OG mit Blick in die historische Bäckerstraße. Großer Wohnraum, Designer-Badezimmer und Vollküche.</p>
|
<p class="text-sm text-warmmuted mb-6 leading-relaxed">Lichtdurchflutete Loggia-Suite im 1. OG mit Blick in die Bäckerstraße. Großer Wohnbereich, Designer-Bad & Vollküche.</p>
|
||||||
<div class="flex items-center justify-between pt-4 border-t border-warmgray">
|
<div class="flex items-center justify-between pt-5 border-t border-stone-200/60">
|
||||||
<div>
|
<div>
|
||||||
<span class="text-xs text-charcoal/50 block">Direktbucher ab</span>
|
<span class="text-[11px] text-warmmuted block">Direktbucher ab</span>
|
||||||
<span class="font-serif font-bold text-xl text-charcoal">119 € <span class="text-xs font-sans font-normal text-charcoal/60">/ Nacht</span></span>
|
<span class="font-serif font-bold text-2xl text-charcoal">119 € <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
|
||||||
</div>
|
</div>
|
||||||
<a href="#booking" class="bg-sand hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Details & Buchen</a>
|
<a href="#booking" class="bg-stonebg hover:bg-siena hover:text-white text-charcoal px-5 py-2.5 rounded-full text-xs font-bold transition-all">Details & Buchen</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- SUITE 2 -->
|
<!-- SUITE 2 -->
|
||||||
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group">
|
<div class="bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all group">
|
||||||
<div class="relative h-64 overflow-hidden bg-charcoal/10">
|
<div class="relative h-72 overflow-hidden bg-stonebg">
|
||||||
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full">Sonnendeck Suite</span>
|
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3.5 py-1 rounded-full">Sonnendeck Suite</span>
|
||||||
<img src="https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=800&q=80" alt="Suite 2 Terrasse" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
<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>
|
||||||
<div class="p-6">
|
<div class="p-7">
|
||||||
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 2 — Private Terrasse</h3>
|
<h3 class="font-serif font-bold text-2xl mb-1 text-charcoal">Suite 2 — Private Terrasse</h3>
|
||||||
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 48 m² • Hof-Terrasse</p>
|
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 48 m² • Hof-Terrasse</p>
|
||||||
<p class="text-sm text-charcoal/70 mb-6 line-clamp-2">Ruhige Oase zum geschützten Innenhof. Exklusive Sonnenterrasse, mediterranes Flair und vollkommene Ungestörtheit für Paare.</p>
|
<p class="text-sm text-warmmuted mb-6 leading-relaxed">Ruhige Oase zum geschützten Innenhof. Exklusive Sonnenterrasse, mediterranes Ambiente & vollkommene Ungestörtheit.</p>
|
||||||
<div class="flex items-center justify-between pt-4 border-t border-warmgray">
|
<div class="flex items-center justify-between pt-5 border-t border-stone-200/60">
|
||||||
<div>
|
<div>
|
||||||
<span class="text-xs text-charcoal/50 block">Direktbucher ab</span>
|
<span class="text-[11px] text-warmmuted block">Direktbucher ab</span>
|
||||||
<span class="font-serif font-bold text-xl text-charcoal">129 € <span class="text-xs font-sans font-normal text-charcoal/60">/ Nacht</span></span>
|
<span class="font-serif font-bold text-2xl text-charcoal">129 € <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
|
||||||
</div>
|
</div>
|
||||||
<a href="#booking" class="bg-sand hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Details & Buchen</a>
|
<a href="#booking" class="bg-stonebg hover:bg-siena hover:text-white text-charcoal px-5 py-2.5 rounded-full text-xs font-bold transition-all">Details & Buchen</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- SUITE 3 -->
|
<!-- SUITE 3 -->
|
||||||
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group">
|
<div class="bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all group">
|
||||||
<div class="relative h-64 overflow-hidden bg-charcoal/10">
|
<div class="relative h-72 overflow-hidden bg-stonebg">
|
||||||
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full">Komfort Suite</span>
|
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3.5 py-1 rounded-full">Komfort Suite</span>
|
||||||
<img src="https://images.unsplash.com/photo-1618773928121-c32242e63f39?auto=format&fit=crop&w=800&q=80" alt="Suite 3 Komfort" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
<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>
|
||||||
<div class="p-6">
|
<div class="p-7">
|
||||||
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 3 — Altstadt Komfort</h3>
|
<h3 class="font-serif font-bold text-2xl mb-1 text-charcoal">Suite 3 — Altstadt Komfort</h3>
|
||||||
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 4 Personen • 50 m² • Regendusche</p>
|
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 4 Personen • 50 m² • Walk-In Dusche</p>
|
||||||
<p class="text-sm text-charcoal/70 mb-6 line-clamp-2">Klassischer Harzer Fachwerk-Stil kombiniert mit edler Ausstattung. Großes Boxspringbett, Schlafsofa und bodengleiche Walk-In Dusche.</p>
|
<p class="text-sm text-warmmuted mb-6 leading-relaxed">Fachwerk-Eleganz mit bodengleicher Regendusche, Kingsize-Boxspringbett & Schlafcouch für Familien oder Freunde.</p>
|
||||||
<div class="flex items-center justify-between pt-4 border-t border-warmgray">
|
<div class="flex items-center justify-between pt-5 border-t border-stone-200/60">
|
||||||
<div>
|
<div>
|
||||||
<span class="text-xs text-charcoal/50 block">Direktbucher ab</span>
|
<span class="text-[11px] text-warmmuted block">Direktbucher ab</span>
|
||||||
<span class="font-serif font-bold text-xl text-charcoal">109 € <span class="text-xs font-sans font-normal text-charcoal/60">/ Nacht</span></span>
|
<span class="font-serif font-bold text-2xl text-charcoal">109 € <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
|
||||||
</div>
|
</div>
|
||||||
<a href="#booking" class="bg-sand hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Details & Buchen</a>
|
<a href="#booking" class="bg-stonebg hover:bg-siena hover:text-white text-charcoal px-5 py-2.5 rounded-full text-xs font-bold transition-all">Details & Buchen</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- SUITE 4 -->
|
<!-- SUITE 4 -->
|
||||||
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group">
|
<div class="bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all group">
|
||||||
<div class="relative h-64 overflow-hidden bg-charcoal/10">
|
<div class="relative h-72 overflow-hidden bg-stonebg">
|
||||||
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full">Workspace Suite</span>
|
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3.5 py-1 rounded-full">Workspace Suite</span>
|
||||||
<img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?auto=format&fit=crop&w=800&q=80" alt="Suite 4 Workspace" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
<img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?auto=format&fit=crop&w=1000&q=80" alt="Suite 4" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6">
|
<div class="p-7">
|
||||||
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Suite 4 — Workspace & Balkon</h3>
|
<h3 class="font-serif font-bold text-2xl mb-1 text-charcoal">Suite 4 — Workspace & Balkon</h3>
|
||||||
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 52 m² • Workstation & Balkon</p>
|
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 52 m² • 1 Gbit/s Glasfaser</p>
|
||||||
<p class="text-sm text-charcoal/70 mb-6 line-clamp-2">Ideal für Workation & Long-Stays. Ergonomischer Arbeitsplatz, 1 Gbit/s Glasfaser-WLAN, Balkon und Espresso-Kaffeebar.</p>
|
<p class="text-sm text-warmmuted mb-6 leading-relaxed">Perfekt für Workation. Ergonomischer Schreibtisch, Highspeed-WLAN, Espresso-Bar & eigener Balkon.</p>
|
||||||
<div class="flex items-center justify-between pt-4 border-t border-warmgray">
|
<div class="flex items-center justify-between pt-5 border-t border-stone-200/60">
|
||||||
<div>
|
<div>
|
||||||
<span class="text-xs text-charcoal/50 block">Direktbucher ab</span>
|
<span class="text-[11px] text-warmmuted block">Direktbucher ab</span>
|
||||||
<span class="font-serif font-bold text-xl text-charcoal">115 € <span class="text-xs font-sans font-normal text-charcoal/60">/ Nacht</span></span>
|
<span class="font-serif font-bold text-2xl text-charcoal">115 € <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
|
||||||
</div>
|
</div>
|
||||||
<a href="#booking" class="bg-sand hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Details & Buchen</a>
|
<a href="#booking" class="bg-stonebg hover:bg-siena hover:text-white text-charcoal px-5 py-2.5 rounded-full text-xs font-bold transition-all">Details & Buchen</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ROMANTIK 1 -->
|
<!-- ROMANTIK 1 -->
|
||||||
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group">
|
<div class="bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all group">
|
||||||
<div class="relative h-64 overflow-hidden bg-charcoal/10">
|
<div class="relative h-72 overflow-hidden bg-stonebg">
|
||||||
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full">Romantik Apartment</span>
|
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3.5 py-1 rounded-full">Romantik Suite</span>
|
||||||
<img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&w=800&q=80" alt="Romantik 1" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
<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>
|
||||||
<div class="p-6">
|
<div class="p-7">
|
||||||
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Romantik Suite 1 — Kaminzauber</h3>
|
<h3 class="font-serif font-bold text-2xl mb-1 text-charcoal">Romantik Suite 1 — Kaminzauber</h3>
|
||||||
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 42 m² • Eichengebälk</p>
|
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 42 m² • Original Eichengebälk</p>
|
||||||
<p class="text-sm text-charcoal/70 mb-6 line-clamp-2">Original freigelegtes Eichengebälk aus 1510, stimmungsvoller Kaminfeuer-Effekt, Samt-Garnitur und romantische Beleuchtung.</p>
|
<p class="text-sm text-warmmuted mb-6 leading-relaxed">Freigelegtes Eichengebälk aus 1510, stimmungsvoller Kaminfeuer-Effekt, Samt-Sessel & stimmungsvolle Beleuchtung.</p>
|
||||||
<div class="flex items-center justify-between pt-4 border-t border-warmgray">
|
<div class="flex items-center justify-between pt-5 border-t border-stone-200/60">
|
||||||
<div>
|
<div>
|
||||||
<span class="text-xs text-charcoal/50 block">Direktbucher ab</span>
|
<span class="text-[11px] text-warmmuted block">Direktbucher ab</span>
|
||||||
<span class="font-serif font-bold text-xl text-charcoal">99 € <span class="text-xs font-sans font-normal text-charcoal/60">/ Nacht</span></span>
|
<span class="font-serif font-bold text-2xl text-charcoal">99 € <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
|
||||||
</div>
|
</div>
|
||||||
<a href="#booking" class="bg-sand hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Details & Buchen</a>
|
<a href="#booking" class="bg-stonebg hover:bg-siena hover:text-white text-charcoal px-5 py-2.5 rounded-full text-xs font-bold transition-all">Details & Buchen</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ROMANTIK 2 -->
|
<!-- STUDIO -->
|
||||||
<div class="bg-white rounded-2xl overflow-hidden border border-warmgray shadow-sm hover:shadow-xl transition-all group">
|
<div class="bg-white rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb hover:shadow-airbnb-hover transition-all group">
|
||||||
<div class="relative h-64 overflow-hidden bg-charcoal/10">
|
<div class="relative h-72 overflow-hidden bg-stonebg">
|
||||||
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full">Romantik Apartment</span>
|
<span class="absolute top-4 right-4 z-10 bg-charcoal/80 backdrop-blur-md text-white text-[11px] font-semibold px-3.5 py-1 rounded-full">Hof Studio</span>
|
||||||
<img src="https://images.unsplash.com/photo-1591088398332-8a7791972843?auto=format&fit=crop&w=800&q=80" alt="Romantik 2" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
<img src="https://images.unsplash.com/photo-1591088398332-8a7791972843?auto=format&fit=crop&w=1000&q=80" alt="Studio" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6">
|
<div class="p-7">
|
||||||
<h3 class="font-serif font-bold text-2xl mb-2 text-charcoal">Romantik Suite 2 — Kuschelnest</h3>
|
<h3 class="font-serif font-bold text-2xl mb-1 text-charcoal">Hof-Studio Bäckerstraße</h3>
|
||||||
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 38 m² • Innenhoflage</p>
|
<p class="text-xs text-siena font-semibold uppercase tracking-wider mb-4">Bis zu 2 Personen • 32 m² • Ruhige Hoflage</p>
|
||||||
<p class="text-sm text-charcoal/70 mb-6 line-clamp-2">Ein idyllischer Rückzugsort mit warmen Erdtönen, samtigen Textilien und absolut ruhiger Lage zum historischen Hofbereich.</p>
|
<p class="text-sm text-warmmuted mb-6 leading-relaxed">Kompaktes, erstklassig ausgestattetes Designer-Studio im Innenhof. Ideal für Wochenendtrips & Alleinreisende.</p>
|
||||||
<div class="flex items-center justify-between pt-4 border-t border-warmgray">
|
<div class="flex items-center justify-between pt-5 border-t border-stone-200/60">
|
||||||
<div>
|
<div>
|
||||||
<span class="text-xs text-charcoal/50 block">Direktbucher ab</span>
|
<span class="text-[11px] text-warmmuted block">Direktbucher ab</span>
|
||||||
<span class="font-serif font-bold text-xl text-charcoal">89 € <span class="text-xs font-sans font-normal text-charcoal/60">/ Nacht</span></span>
|
<span class="font-serif font-bold text-2xl text-charcoal">79 € <span class="text-xs font-sans font-normal text-warmmuted">/ Nacht</span></span>
|
||||||
</div>
|
</div>
|
||||||
<a href="#booking" class="bg-sand hover:bg-siena hover:text-white text-charcoal px-4 py-2 rounded-lg text-sm font-semibold transition-colors">Details & Buchen</a>
|
<a href="#booking" class="bg-stonebg hover:bg-siena hover:text-white text-charcoal px-5 py-2.5 rounded-full text-xs font-bold transition-all">Details & Buchen</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -300,115 +316,113 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- STORYTELLING: DIE GESCHICHTE VON ENZO -->
|
<!-- STORYTELLING SECTION -->
|
||||||
<section id="story" class="py-24 bg-white border-y border-warmgray">
|
<section id="story" class="py-28 bg-white border-y border-stone-200/60">
|
||||||
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
<div class="max-w-7xl mx-auto px-6 md:px-10 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
<div>
|
<div>
|
||||||
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-3 inline-block">Tradition & Herzblut</span>
|
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-3 inline-block">Tradition & Herzblut</span>
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6 text-charcoal leading-tight">
|
<h2 class="text-3xl md:text-5xl font-bold mb-6 text-charcoal font-serif leading-tight">
|
||||||
Vincenzos Erbe: Von Palazzolo Acreide nach Goslar.
|
Vincenzos Erbe: Von Palazzolo Acreide nach Goslar.
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-charcoal/80 text-base leading-relaxed mb-6">
|
<p class="text-charcoal/80 text-base leading-relaxed mb-6">
|
||||||
Casa da Enzo ist keine namenlose Ferienwohnungs-Kette, sondern ein echtes Familienprojekt. Benannt nach Vincenzo „Enzo“ Campisi, tragen die 7 Suiten und die Trattoria die Seele Siziliens mitten in das raue Fachwerkerbe des Harzes.
|
Casa da Enzo ist keine namenlose Ferienwohnungs-Kette, sondern ein echtes Familienprojekt. Benannt nach Vincenzo „Enzo“ Campisi, tragen die 7 Suiten und die Trattoria die Seele Siziliens mitten in das raue Fachwerkerbe des Harzes.
|
||||||
</p>
|
</p>
|
||||||
<p class="text-charcoal/70 text-sm leading-relaxed mb-8">
|
<p class="text-warmmuted text-sm leading-relaxed mb-8">
|
||||||
Heute führen Sergio und Alja Campisi das Haus in der Bäckerstraße 18 mit persönlicher Leidenschaft: Ein Ort, an dem sizilianische Wärme, handgemachte Pasta und unverfälschte Gastfreundschaft auf moderne Technologie treffen.
|
Heute führen Sergio und Alja Campisi das Haus in der Bäckerstraße 18 mit persönlicher Leidenschaft: Ein Ort, an dem sizilianische Wärme, handgemachte Pasta und unverfälschte Gastfreundschaft auf moderne Technologie treffen.
|
||||||
</p>
|
</p>
|
||||||
<div class="p-6 bg-sand rounded-xl border border-warmgray flex items-center gap-4">
|
<div class="p-6 bg-sand rounded-2xl border border-stone-200/80 flex items-center gap-5">
|
||||||
<div class="w-12 h-12 rounded-full bg-siena/20 text-siena font-serif font-bold text-xl flex items-center justify-center shrink-0">V</div>
|
<div class="w-12 h-12 rounded-full bg-siena/15 text-siena font-serif font-bold text-xl flex items-center justify-center shrink-0">V</div>
|
||||||
<p class="text-xs italic text-charcoal/80">„Gastfreundschaft bedeutet bei uns nicht, einen Schlüssel auszuhändigen — sondern dem Gast das Gefühl zu geben, nach Hause zu kommen.“</p>
|
<p class="text-xs italic text-charcoal/90 leading-relaxed">„Gastfreundschaft bedeutet bei uns nicht, einen Schlüssel auszuhändigen — sondern dem Gast das Gefühl zu geben, nach Hause zu kommen.“</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="rounded-2xl overflow-hidden border border-warmgray shadow-2xl">
|
<div class="rounded-3xl overflow-hidden border border-stone-200/80 shadow-airbnb-hover">
|
||||||
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=1000&q=80" alt="Sizilianische Gastfreundschaft" class="w-full h-auto object-cover">
|
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=1200&q=85" alt="Sizilianische Gastfreundschaft" class="w-full h-auto object-cover">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- TRATTORIA KULINARIK -->
|
<!-- TRATTORIA & FOOD SECTION -->
|
||||||
<section id="trattoria" class="py-24 bg-charcoal text-sand relative overflow-hidden">
|
<section id="trattoria" class="py-28 bg-charcoal text-sand relative overflow-hidden">
|
||||||
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
<div class="max-w-7xl mx-auto px-6 md:px-10 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
<div>
|
<div>
|
||||||
<span class="text-gold font-semibold text-xs uppercase tracking-widest mb-3 inline-block">Alessandras Kulinarik</span>
|
<span class="text-gold font-semibold text-xs uppercase tracking-widest mb-3 inline-block">Alessandras Kulinarik</span>
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6 text-white leading-tight">
|
<h2 class="text-3xl md:text-5xl font-bold mb-6 text-white font-serif leading-tight">
|
||||||
Sizilien im Erdgeschoss: Echte Trattoria-Kultur.
|
Sizilien im Erdgeschoss: Echte Trattoria-Kultur.
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-sand/80 text-base leading-relaxed mb-6 font-light">
|
<p class="text-sand/85 text-base leading-relaxed mb-8 font-light">
|
||||||
Bei Casa da Enzo wohnen Sie nicht nur – Sie genießen. Im Erdgeschoss kocht Alessandra täglich frische, hausgemachte Pasta, sizilianische Spezialitäten nach Familienrezepten und serviert handverlesene Weine aus den Hängen des Ätna.
|
Bei Casa da Enzo wohnen Sie nicht nur – Sie genießen. Im Erdgeschoss kocht Alessandra täglich frische, hausgemachte Pasta, sizilianische Spezialitäten nach Familienrezepten und serviert handverlesene Weine aus den Hängen des Ätna.
|
||||||
</p>
|
</p>
|
||||||
<div class="space-y-4 mb-8">
|
<div class="space-y-4 mb-10">
|
||||||
<div class="flex items-center gap-3 text-sm text-sand/90">
|
<div class="flex items-center gap-3.5 text-sm text-sand/90">
|
||||||
<span class="w-2.5 h-2.5 rounded-full bg-gold"></span>
|
<span class="w-2.5 h-2.5 rounded-full bg-gold"></span>
|
||||||
<span>Täglich frische Tagliatelle, Ravioli, Arancini & Cannoli</span>
|
<span>Täglich frische Tagliatelle, Ravioli, Arancini & Cannoli</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-3 text-sm text-sand/90">
|
<div class="flex items-center gap-3.5 text-sm text-sand/90">
|
||||||
<span class="w-2.5 h-2.5 rounded-full bg-gold"></span>
|
<span class="w-2.5 h-2.5 rounded-full bg-gold"></span>
|
||||||
<span>Willkommens-Aperitif für alle Direktbucher gratis</span>
|
<span>Willkommens-Aperitif für alle Direktbucher gratis</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-3 text-sm text-sand/90">
|
<div class="flex items-center gap-3.5 text-sm text-sand/90">
|
||||||
<span class="w-2.5 h-2.5 rounded-full bg-gold"></span>
|
<span class="w-2.5 h-2.5 rounded-full bg-gold"></span>
|
||||||
<span>Garantierte Tischreservierung für Apartment-Gäste</span>
|
<span>Garantierte Tischreservierung für Apartment-Gäste</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap gap-4">
|
<a href="tel:+4915207483196" class="inline-block bg-gold hover:bg-gold/90 text-charcoal font-bold px-8 py-4 rounded-full text-sm transition-all shadow-md hover:scale-[1.02]">
|
||||||
<a href="tel:+4915207483196" class="bg-gold hover:bg-gold/90 text-charcoal font-bold px-6 py-3.5 rounded-lg text-sm transition-all shadow-md">
|
Tisch in der Trattoria Reservieren
|
||||||
Tisch in der Trattoria Reservieren
|
</a>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="relative rounded-2xl overflow-hidden border border-sand/10 shadow-2xl">
|
<div class="rounded-3xl overflow-hidden border border-white/10 shadow-2xl">
|
||||||
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=1000&q=80" alt="Trattoria Kulinarik" class="w-full h-auto object-cover">
|
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=1200&q=85" alt="Trattoria Kulinarik" class="w-full h-auto object-cover">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- OPERATIVE FAQS (ENZO) -->
|
<!-- OPERATIVE FAQS -->
|
||||||
<section id="faq" class="py-24 bg-sand border-t border-warmgray">
|
<section id="faq" class="py-28 bg-sand border-t border-stone-200/60">
|
||||||
<div class="max-w-4xl mx-auto px-6">
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
<div class="text-center mb-16">
|
<div class="text-center mb-16">
|
||||||
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-2 inline-block">Sorgenfreie Anreise</span>
|
<span class="text-siena font-semibold text-xs uppercase tracking-widest mb-3 inline-block">Sorgenfreie Anreise</span>
|
||||||
<h2 class="text-3xl md:text-4xl font-bold text-charcoal">Häufig gestellte Fragen</h2>
|
<h2 class="text-3xl md:text-4xl font-bold text-charcoal font-serif">Häufig gestellte Fragen</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
<div class="p-6 bg-white rounded-2xl border border-warmgray shadow-sm">
|
<div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-airbnb">
|
||||||
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Wie funktioniert der 24/7 Check-in?</h3>
|
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Wie funktioniert der 24/7 Keyless Check-in?</h3>
|
||||||
<p class="text-sm text-charcoal/70 leading-relaxed">Am Anreisetag erhalten Sie um 14:00 Uhr Ihren persönlichen 6-stelligen Nuki-PIN-Code per SMS und WhatsApp. Damit öffnen Sie die Haustür Bäckerstraße 18 und Ihre Suite ab 15:00 Uhr völlig flexibel.</p>
|
<p class="text-sm text-warmmuted leading-relaxed">Am Anreisetag erhalten Sie um 14:00 Uhr Ihren persönlichen 6-stelligen Nuki-PIN-Code per SMS und WhatsApp. Damit öffnen Sie die Haustür Bäckerstraße 18 und Ihre Suite ab 15:00 Uhr völlig flexibel.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-6 bg-white rounded-2xl border border-warmgray shadow-sm">
|
<div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-airbnb">
|
||||||
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Wo kann ich in Goslar parken?</h3>
|
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Wo kann ich in Goslar parken?</h3>
|
||||||
<p class="text-sm text-charcoal/70 leading-relaxed">Zum Ausladen des Gepäcks können Sie direkt vor das Haus Bäckerstraße 18 fahren. Zum Dauerparken empfehlen wir den Großparkplatz Schützenplatz (3 Gehminuten) oder das Parkhaus Zentrumsgarage (4 Gehminuten).</p>
|
<p class="text-sm text-warmmuted leading-relaxed">Zum Ausladen des Gepäcks können Sie direkt vor das Haus Bäckerstraße 18 fahren. Zum Dauerparken empfehlen wir den Großparkplatz Schützenplatz (3 Gehminuten) oder das Parkhaus Zentrumsgarage (4 Gehminuten).</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-6 bg-white rounded-2xl border border-warmgray shadow-sm">
|
<div class="p-8 bg-white rounded-3xl border border-stone-200/80 shadow-airbnb">
|
||||||
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Gibt es Frühstück bei Casa da Enzo?</h3>
|
<h3 class="font-serif font-bold text-xl mb-2 text-charcoal">Gibt es Frühstück bei Casa da Enzo?</h3>
|
||||||
<p class="text-sm text-charcoal/70 leading-relaxed">Alle Apartments verfügen über eine eigene Kaffeemaschine/Küche. In 2 Gehminuten erreichen Sie zudem 3 hervorragende Altstadt-Bäckereien. Mittags & Abends genießen Sie kulinarische Highlights in Alessandras Trattoria im Haus.</p>
|
<p class="text-sm text-warmmuted leading-relaxed">Alle Apartments verfügen über eine eigene Kaffeemaschine/Küche. In 2 Gehminuten erreichen Sie zudem 3 hervorragende Altstadt-Bäckereien. Mittags & Abends genießen Sie kulinarische Highlights in Alessandras Trattoria im Haus.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- FOOTER -->
|
<!-- FOOTER -->
|
||||||
<footer class="bg-charcoal border-t border-sand/10 text-sand/60 py-16 text-sm">
|
<footer class="bg-charcoal border-t border-white/10 text-sand/60 py-20 text-sm">
|
||||||
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-10 mb-12">
|
<div class="max-w-7xl mx-auto px-6 md:px-10 grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
|
||||||
<div class="md:col-span-2">
|
<div class="md:col-span-2">
|
||||||
<span class="font-serif text-2xl font-bold text-white block mb-3">Casa da Enzo</span>
|
<span class="font-serif text-2xl font-bold text-white block mb-4">Casa da Enzo</span>
|
||||||
<p class="text-xs text-sand/70 max-w-sm leading-relaxed mb-4">
|
<p class="text-xs text-sand/70 max-w-sm leading-relaxed mb-6">
|
||||||
Boutique-Apartments & Trattoria in der historischen Altstadt Goslar. 7 Suiten mit sizilianischem Herzschlag und digitalem Komfort.
|
Boutique-Suites & Trattoria in der historischen Altstadt Goslar. 7 Suiten mit sizilianischem Herzschlag und digitalem Komfort.
|
||||||
</p>
|
</p>
|
||||||
<p class="text-xs text-sand/50">© 2026 Casa da Enzo • Bäckerstraße 18, 38640 Goslar</p>
|
<p class="text-xs text-sand/40">© 2026 Casa da Enzo • Bäckerstraße 18, 38640 Goslar</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h4 class="text-xs font-bold uppercase tracking-wider text-sand mb-4">Kontakt & Service</h4>
|
<h4 class="text-xs font-bold uppercase tracking-wider text-sand mb-5">Kontakt & Service</h4>
|
||||||
<ul class="space-y-2 text-xs">
|
<ul class="space-y-3 text-xs">
|
||||||
<li>Tel: +49 1520 7483196</li>
|
<li>Tel: +49 1520 7483196</li>
|
||||||
<li>Email: booking@casa-daenzo.de</li>
|
<li>Email: booking@casa-daenzo.de</li>
|
||||||
<li>WAHA Concierge: 24/7 aktiv</li>
|
<li>WAHA Concierge: 24/7 aktiv</li>
|
||||||
@@ -416,11 +430,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h4 class="text-xs font-bold uppercase tracking-wider text-sand mb-4">Rechtliches</h4>
|
<h4 class="text-xs font-bold uppercase tracking-wider text-sand mb-5">Rechtliches</h4>
|
||||||
<ul class="space-y-2 text-xs">
|
<ul class="space-y-3 text-xs">
|
||||||
<li><a href="#" class="hover:text-sand">Impressum</a></li>
|
<li><a href="#" class="hover:text-sand transition-colors">Impressum</a></li>
|
||||||
<li><a href="#" class="hover:text-sand">Datenschutz</a></li>
|
<li><a href="#" class="hover:text-sand transition-colors">Datenschutz</a></li>
|
||||||
<li><a href="#" class="hover:text-sand">AGB & Storno</a></li>
|
<li><a href="#" class="hover:text-sand transition-colors">AGB & Storno</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 637 KiB After Width: | Height: | Size: 707 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 420 KiB After Width: | Height: | Size: 233 KiB |
Reference in new issue
Block a user