feat(blog): add KW 40 blog post 'Kastanien, Pilze & Wildschwein-Sugo' (#T39-01)

src/components/ApartmentCard.astro

@@ -16,62 +16,70 @@ interface Props {
 const { title, subtitle, category, guests, sizeSqm, balcony, workspace, kitchen, highlights, image, slug } = Astro.props;
 ---
 
-<div class="group bg-white rounded-2xl overflow-hidden border border-stone-200/80 shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col h-full">
+<div class="group stone-card stone-card-hover rounded-3xl overflow-hidden flex flex-col h-full font-sans">
   <!-- Image Header -->
-  <div class="relative aspect-[16/10] bg-stone-200 overflow-hidden">
+  <div class="relative aspect-[16/10] bg-[#1A1816] overflow-hidden border-b border-[#D4A373]/15">
-    <div class="absolute top-4 left-4 z-10">
+    <div class="absolute top-4 left-4 z-10 flex gap-2">
-      <span class={`px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider shadow-sm ${
+      <span class={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-md ${
-        category === 'Premium-Komfort' ? 'bg-[#C85A32] text-white' : 'bg-stone-800 text-stone-100'
+        category === 'Premium-Komfort' ? 'bg-[#2D5A43] text-emerald-100 border border-emerald-500/40' : 'bg-[#2E2A25] text-[#D4A373] border border-[#D4A373]/30'
       }`}>
         {category}
       </span>
+      {balcony && (
+        <span class="px-2.5 py-1 rounded-full text-xs font-bold bg-[#1A1816]/80 backdrop-blur-md text-emerald-400 border border-emerald-500/30">
+          🌿 Balkon/Terrasse
+        </span>
+      )}
     </div>
     
-    <!-- Image Placeholder / Tag -->
+    <!-- Image Placeholder / Visual Container -->
-    <div class="w-full h-full bg-stone-300 flex items-center justify-center text-stone-500 font-serif group-hover:scale-105 transition-transform duration-500">
+    <div class="w-full h-full bg-gradient-to-br from-[#2E2A25] to-[#1A1816] flex items-center justify-center text-[#D4A373] font-serif group-hover:scale-105 transition-transform duration-500 p-6 text-center">
-      <span class="text-sm font-medium">{title}</span>
+      <div class="space-y-1">
+        <span class="text-3xl block">🏛️</span>
+        <span class="text-sm font-semibold text-[#E6D5C3]">{title}</span>
+      </div>
     </div>
   </div>
 
   <!-- Content -->
-  <div class="p-6 flex-1 flex flex-col justify-between">
+  <div class="p-6 flex-1 flex flex-col justify-between space-y-6">
-    <div>
+    <div class="space-y-3">
-      <div class="flex items-center gap-4 text-xs font-medium text-stone-500 mb-2">
+      <div class="flex items-center gap-3 text-xs font-medium text-[#A3978B]">
-        <span>👤 Bis zu {guests} Gäste</span>
+        <span class="text-[#E6D5C3]">👤 Bis zu {guests} Gäste</span>
         <span>•</span>
-        <span>📐 {sizeSqm} m²</span>
+        <span class="text-[#E6D5C3]">📐 {sizeSqm} m²</span>
-        {balcony && (
+        {workspace && (
           <>
             <span>•</span>
-            <span class="text-[#C85A32] font-semibold">🌿 Balkon/Terrasse</span>
+            <span class="text-emerald-400 font-semibold">💻 Workstation</span>
           </>
         )}
       </div>
 
-      <h3 class="font-serif text-2xl font-bold text-stone-900 group-hover:text-[#C85A32] transition-colors mb-2">
+      <h3 class="font-serif text-2xl font-bold text-[#E6D5C3] group-hover:text-emerald-400 transition-colors">
         {title}
       </h3>
-      <p class="text-stone-600 text-sm mb-4 line-clamp-2">
+      <p class="text-[#A3978B] text-xs leading-relaxed line-clamp-2">
         {subtitle}
       </p>
 
       <!-- Highlights list -->
-      <ul class="space-y-1.5 text-xs text-stone-600 mb-6">
+      <ul class="space-y-1.5 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/10">
         {highlights.slice(0, 3).map((item) => (
           <li class="flex items-center gap-2">
-            <span class="text-[#C85A32] font-bold">✓</span>
+            <span class="text-emerald-400 font-bold">✓</span>
-            <span>{item}</span>
+            <span class="text-[#E6D5C3]">{item}</span>
           </li>
         ))}
       </ul>
     </div>
 
     <!-- Actions -->
-    <div class="pt-4 border-t border-stone-100 flex items-center justify-between gap-3">
+    <div class="pt-4 border-t border-[#D4A373]/15 flex items-center justify-between gap-3">
-      <a href={`/apartments/${slug}`} class="text-sm font-semibold text-stone-700 hover:text-[#C85A32] transition-colors">
+      <a href={`/apartments/${slug}`} class="text-xs font-semibold text-[#D4A373] hover:text-white transition-colors">
         Details ansehen →
       </a>
-      <a href={`#booking`} class="px-4 py-2 rounded-xl bg-stone-900 text-white text-xs font-medium hover:bg-[#C85A32] transition-colors">
+      <a href="#booking" class="px-4 py-2 rounded-xl bg-[#2D5A43] hover:bg-[#386d52] text-white text-xs font-bold transition-all shadow-md">
         Buchen
       </a>
     </div>

src/components/EnzinoChat.astro

@@ -0,0 +1,287 @@
+---
+import {
+  ENZINO_INITIAL_GREETING_DE,
+  ENZINO_INITIAL_GREETING_EN,
+  ENZINO_QUICK_QUESTIONS_DE,
+  ENZINO_QUICK_QUESTIONS_EN
+} from '../data/enzinoPrompt';
+
+interface Props {
+  lang?: 'de' | 'en';
+}
+
+const { lang = 'de' } = Astro.props;
+const initialGreeting = lang === 'de' ? ENZINO_INITIAL_GREETING_DE : ENZINO_INITIAL_GREETING_EN;
+const quickQuestions = lang === 'de' ? ENZINO_QUICK_QUESTIONS_DE : ENZINO_QUICK_QUESTIONS_EN;
+---
+
+<div id="enzino-widget" class="fixed bottom-6 right-6 z-50 font-sans" data-lang={lang}>
+  <!-- Floating Launcher Button -->
+  <button
+    id="enzino-launcher"
+    class="relative group flex items-center gap-3 bg-[#24211D] border border-[#D4A373]/30 hover:border-[#D4A373] text-[#E6D5C3] px-4 py-3 rounded-full shadow-2xl transition-all duration-300 hover:scale-105"
+    aria-label="Enzino Concierge Chat öffnen"
+  >
+    <div class="relative w-10 h-10 rounded-full bg-gradient-to-br from-[#C85A32] to-[#D4A373] p-0.5 flex items-center justify-center shadow-inner">
+      <div class="w-full h-full rounded-full bg-[#1A1816] flex items-center justify-center text-lg font-serif font-bold text-[#D4A373]">
+        🇮🇹
+      </div>
+      <span class="absolute -top-0.5 -right-0.5 w-3 h-3 bg-emerald-500 rounded-full border-2 border-[#1A1816] animate-pulse"></span>
+    </div>
+    <div class="text-left hidden sm:block">
+      <div class="text-xs font-serif font-bold text-[#D4A373] tracking-wide">Enzino Concierge</div>
+      <div class="text-[10px] text-[#A3978B]">Online • Frag mich was!</div>
+    </div>
+  </button>
+
+  <!-- Chat Dialog Window -->
+  <div
+    id="enzino-chat-window"
+    class="hidden fixed bottom-6 right-6 w-[calc(100vw-3rem)] sm:w-[380px] max-h-[580px] h-[85vh] bg-[#24211D] border border-[#D4A373]/30 rounded-3xl shadow-2xl flex-col overflow-hidden transition-all duration-300 z-50"
+  >
+    <!-- Header -->
+    <div class="bg-[#1A1816] border-b border-[#D4A373]/20 p-4 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <div class="relative w-10 h-10 rounded-full bg-gradient-to-br from-[#C85A32] to-[#D4A373] p-0.5 flex items-center justify-center">
+          <div class="w-full h-full rounded-full bg-[#24211D] flex items-center justify-center text-lg">
+            👨‍🍳
+          </div>
+          <span class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-emerald-500 rounded-full border border-[#1A1816]"></span>
+        </div>
+        <div>
+          <h3 class="font-serif text-sm font-bold text-[#E6D5C3]">Enzino da Enzo</h3>
+          <p class="text-[10px] text-[#D4A373]">Digitaler Host & Concierge</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <!-- Session Disable Button -->
+        <button
+          id="enzino-disable-btn"
+          title={lang === 'de' ? 'Enzino für diese Session deaktivieren' : 'Disable Enzino for this session'}
+          class="p-1.5 text-[#A3978B] hover:text-amber-400 rounded-lg hover:bg-[#2A2622] text-xs transition-colors"
+        >
+          🚫
+        </button>
+        <!-- Close Button -->
+        <button
+          id="enzino-close-btn"
+          class="p-1.5 text-[#A3978B] hover:text-white rounded-lg hover:bg-[#2A2622] transition-colors"
+          aria-label="Chat schließen"
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+
+    <!-- Messages Body -->
+    <div id="enzino-messages" class="flex-1 p-4 overflow-y-auto space-y-3.5 text-xs text-[#E6D5C3]">
+      <!-- Initial Bot Message -->
+      <div class="flex gap-2.5 items-start">
+        <div class="w-7 h-7 rounded-full bg-[#C85A32]/20 border border-[#C85A32]/40 flex items-center justify-center text-xs shrink-0">
+          🇮🇹
+        </div>
+        <div class="bg-[#2E2A25] border border-[#D4A373]/15 p-3 rounded-2xl rounded-tl-none max-w-[85%] leading-relaxed shadow-sm">
+          {initialGreeting}
+        </div>
+      </div>
+
+      <!-- Quick Chips -->
+      <div id="enzino-chips" class="flex flex-wrap gap-1.5 pt-2 pl-9">
+        {quickQuestions.map((q) => (
+          <button
+            class="enzino-chip text-[11px] bg-[#1A1816] hover:bg-[#C85A32]/20 text-[#D4A373] border border-[#D4A373]/30 hover:border-[#D4A373] px-3 py-1.5 rounded-full transition-all text-left"
+            data-question={q}
+          >
+            {q}
+          </button>
+        ))}
+      </div>
+    </div>
+
+    <!-- Typing Indicator (hidden by default) -->
+    <div id="enzino-typing" class="hidden px-4 py-2 text-[11px] text-[#D4A373] italic flex items-center gap-2 bg-[#1A1816]/50">
+      <span class="w-2 h-2 bg-[#D4A373] rounded-full animate-ping"></span>
+      <span>Enzino tippt...</span>
+    </div>
+
+    <!-- Input Footer -->
+    <form id="enzino-form" class="bg-[#1A1816] border-t border-[#D4A373]/20 p-3 flex gap-2">
+      <input
+        type="text"
+        id="enzino-input"
+        placeholder={lang === 'de' ? 'Stelle Enzino eine Frage...' : 'Ask Enzino a question...'}
+        class="flex-1 bg-[#24211D] border border-[#D4A373]/20 focus:border-[#D4A373] text-[#E6D5C3] placeholder-[#A3978B] text-xs rounded-xl px-3 py-2.5 outline-none transition-all"
+        autocomplete="off"
+      />
+      <button
+        type="submit"
+        class="bg-[#C85A32] hover:bg-[#b04d2a] text-white px-3.5 py-2.5 rounded-xl text-xs font-bold transition-all shrink-0"
+      >
+        ➔
+      </button>
+    </form>
+  </div>
+</div>
+
+<script>
+  function initEnzino() {
+    const launcher = document.getElementById('enzino-launcher');
+    const windowEl = document.getElementById('enzino-chat-window');
+    const closeBtn = document.getElementById('enzino-close-btn');
+    const disableBtn = document.getElementById('enzino-disable-btn');
+    const form = document.getElementById('enzino-form') as HTMLFormElement;
+    const input = document.getElementById('enzino-input') as HTMLInputElement;
+    const messagesEl = document.getElementById('enzino-messages');
+    const typingEl = document.getElementById('enzino-typing');
+    const widget = document.getElementById('enzino-widget');
+
+    if (!launcher || !windowEl || !closeBtn || !messagesEl) return;
+
+    // Check if user disabled Enzino for session
+    if (sessionStorage.getItem('enzino_disabled') === 'true') {
+      if (widget) widget.style.display = 'none';
+      return;
+    }
+
+    const lang = widget?.getAttribute('data-lang') || 'de';
+
+    // Toggle Chat
+    launcher.addEventListener('click', () => {
+      windowEl.classList.remove('hidden');
+      windowEl.classList.add('flex');
+      launcher.classList.add('hidden');
+      if (input) input.focus();
+    });
+
+    closeBtn.addEventListener('click', () => {
+      windowEl.classList.add('hidden');
+      windowEl.classList.remove('flex');
+      launcher.classList.remove('hidden');
+    });
+
+    // Disable for session
+    if (disableBtn) {
+      disableBtn.addEventListener('click', () => {
+        if (confirm(lang === 'de' ? 'Enzino für diese Browser-Sitzung ausblenden?' : 'Disable Enzino for this session?')) {
+          sessionStorage.setItem('enzino_disabled', 'true');
+          if (widget) widget.style.display = 'none';
+        }
+      });
+    }
+
+    // Quick chips click
+    document.querySelectorAll('.enzino-chip').forEach((chip) => {
+      chip.addEventListener('click', (e) => {
+        const q = (e.currentTarget as HTMLElement).getAttribute('data-question');
+        if (q) {
+          handleUserQuery(q);
+        }
+      });
+    });
+
+    // Form submit
+    if (form) {
+      form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const text = input.value.trim();
+        if (text) {
+          input.value = '';
+          handleUserQuery(text);
+        }
+      });
+    }
+
+    function appendUserMessage(text: string) {
+      const div = document.createElement('div');
+      div.className = 'flex justify-end';
+      div.innerHTML = `
+        <div class="bg-[#2D5A43] text-[#E6D5C3] p-3 rounded-2xl rounded-tr-none max-w-[85%] leading-relaxed shadow-sm">
+          ${escapeHtml(text)}
+        </div>
+      `;
+      messagesEl.appendChild(div);
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+
+    function appendBotMessage(text: string) {
+      const div = document.createElement('div');
+      div.className = 'flex gap-2.5 items-start';
+      div.innerHTML = `
+        <div class="w-7 h-7 rounded-full bg-[#C85A32]/20 border border-[#C85A32]/40 flex items-center justify-center text-xs shrink-0">
+          🇮🇹
+        </div>
+        <div class="bg-[#2E2A25] border border-[#D4A373]/15 p-3 rounded-2xl rounded-tl-none max-w-[85%] leading-relaxed shadow-sm">
+          ${text}
+        </div>
+      `;
+      messagesEl.appendChild(div);
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+
+    function escapeHtml(str: string) {
+      return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+
+    function handleUserQuery(text: string) {
+      appendUserMessage(text);
+
+      // Show typing
+      if (typingEl) typingEl.classList.remove('hidden');
+
+      setTimeout(() => {
+        if (typingEl) typingEl.classList.add('hidden');
+        const reply = generateEnzinoReply(text, lang);
+        appendBotMessage(reply);
+      }, 700);
+    }
+
+    function generateEnzinoReply(query: string, language: string): string {
+      const q = query.toLowerCase();
+
+      if (q.includes('check-in') || q.includes('checkin') || q.includes('anreise') || q.includes('nuki') || q.includes('schlüssel') || q.includes('key')) {
+        return language === 'de'
+          ? "<strong>Perfetto!</strong> Der Check-in verläuft 100% kontaktlos und digital. Du erhältst vor deiner Anreise deinen persönlichen Nuki-PIN-Code per WhatsApp oder E-Mail. Check-in ist ab <strong>15:00 Uhr</strong> möglich. Bei Fragen erreichst du Alja direkt über <a href='https://wa.me/4915207483196' target='_blank' class='text-[#D4A373] underline'>WhatsApp (+49 1520 7483196)</a>."
+          : "<strong>Perfetto!</strong> Check-in is 100% digital & contactless. You'll receive your personal Nuki PIN code via WhatsApp or email prior to arrival. Check-in starts at <strong>3:00 PM</strong>. For queries, text Alja directly via <a href='https://wa.me/4915207483196' target='_blank' class='text-[#D4A373] underline'>WhatsApp (+49 1520 7483196)</a>.";
+      }
+
+      if (q.includes('tisch') || q.includes('trattoria') || q.includes('essen') || q.includes('pasta') || q.includes('reservier') || q.includes('restaurant') || q.includes('speisekarte')) {
+        return language === 'de'
+          ? "<strong>Mamma Mia!</strong> In Alessandras Trattoria wartet ehrliche sizilianische Küche auf dich! Öffnungszeiten: Di–So 17:00–22:30 Uhr (Montag Ruhetag). Hotelgäste genießen bevorzugte Tischreservierungen! Für Reservierungen rufe direkt unser Trattoria-Festnetz an: <a href='tel:+49532123456' class='text-[#D4A373] underline'>+49 5321 23456</a>."
+          : "<strong>Mamma Mia!</strong> Honest Sicilian cuisine awaits you at Alessandra's Trattoria! Hours: Tue–Sun 5:00 PM–10:30 PM (Mon closed). Apartment guests get priority table reservations! Call our Trattoria landline: <a href='tel:+49532123456' class='text-[#D4A373] underline'>+49 5321 23456</a>.";
+      }
+
+      if (q.includes('bestpreis') || q.includes('preis') || q.includes('rabatt') || q.includes('booking') || q.includes('direkt')) {
+        return language === 'de'
+          ? "<strong>Bellissimo!</strong> Wenn du direkt auf unserer Website buchst, sparst du dir <strong>15% OTA-Gebühren</strong> gegenüber Booking.com oder Airbnb. Wir garantieren dir den besten verfügbaren Preis!"
+          : "<strong>Bellissimo!</strong> Booking directly on our website saves you <strong>15% in OTA commissions</strong> compared to Booking.com or Airbnb. We guarantee the best available rate!";
+      }
+
+      if (q.includes('eviivo') || q.includes('gästebuch') || q.includes('guest') || q.includes('directory') || q.includes('mappe')) {
+        return language === 'de'
+          ? "<strong>Prego!</strong> In unserem <a href='https://casa-daenzo.de/eviivo-guest' target='_blank' class='text-[#D4A373] underline'>Eviivo Digital Guest Directory</a> findest du alle Details zu deinem Aufenthalt, WLAN-Passwort und Tipps für Goslar. Logge dich einfach mit deiner Buchungsnummer und deinem Nachnamen ein!"
+          : "<strong>Prego!</strong> In our <a href='https://casa-daenzo.de/eviivo-guest' target='_blank' class='text-[#D4A373] underline'>Eviivo Digital Guest Directory</a> you'll find all details about your stay, Wi-Fi password, and local tips. Simply log in with your booking number and last name!";
+      }
+
+      if (q.includes('kontakt') || q.includes('telefon') || q.includes('nummer') || q.includes('whatsapp') || q.includes('anja') || q.includes('alja')) {
+        return language === 'de'
+          ? "<strong>Hier ist unsere Kontakttrennung:</strong><br/>• <strong>Apartments & Buchungen:</strong> Alja per <a href='https://wa.me/4915207483196' target='_blank' class='text-[#D4A373] underline'>WhatsApp (+49 1520 7483196)</a><br/>• <strong>Trattoria & Tische:</strong> Festnetz <a href='tel:+49532123456' class='text-[#D4A373] underline'>+49 5321 23456</a>"
+          : "<strong>Here is our contact separation:</strong><br/>• <strong>Apartments & Bookings:</strong> Alja via <a href='https://wa.me/4915207483196' target='_blank' class='text-[#D4A373] underline'>WhatsApp (+49 1520 7483196)</a><br/>• <strong>Trattoria & Tables:</strong> Landline <a href='tel:+49532123456' class='text-[#D4A373] underline'>+49 5321 23456</a>";
+      }
+
+      if (q.includes('parken') || q.includes('parking') || q.includes('auto') || q.includes('garagen')) {
+        return language === 'de'
+          ? "<strong>Molto bene!</strong> Zum Ausladen deines Gepäcks kannst du direkt vor das Haus (Bäckerstraße 18) fahren. Öffentliche Parkplätze & das Parkhaus 'Kaiserpassage' liegen nur 2-3 Gehminuten entfernt."
+          : "<strong>Molto bene!</strong> You can stop directly in front of the building (Bäckerstraße 18) to unload luggage. Public parking and 'Kaiserpassage' parking garage are just 2-3 minutes walk away.";
+      }
+
+      return language === 'de'
+        ? "<strong>Grazie für deine Frage!</strong> Bei allen Anliegen zu den Apartments schreib Alja per <a href='https://wa.me/4915207483196' target='_blank' class='text-[#D4A373] underline'>WhatsApp (+49 1520 7483196)</a>. Für Tischreservierungen rufe die Trattoria an (<a href='tel:+49532123456' class='text-[#D4A373] underline'>+49 5321 23456</a>)!"
+        : "<strong>Grazie for your question!</strong> For apartment inquiries, message Alja via <a href='https://wa.me/4915207483196' target='_blank' class='text-[#D4A373] underline'>WhatsApp (+49 1520 7483196)</a>. For table reservations, call the Trattoria (<a href='tel:+49532123456' class='text-[#D4A373] underline'>+49 5321 23456</a>)!";
+    }
+  }
+
+  // Run on page load and view transitions
+  document.addEventListener('DOMContentLoaded', initEnzino);
+  document.addEventListener('astro:page-load', initEnzino);
+</script>

src/components/EviivoWidget.astro

@@ -2,34 +2,47 @@
 // Eviivo Direct Booking Engine Component
 ---
 
-<div class="bg-white rounded-3xl p-6 sm:p-8 border border-stone-200/80 shadow-xl max-w-4xl mx-auto my-8">
+<div class="stone-card rounded-3xl p-6 sm:p-10 max-w-4xl mx-auto my-8 font-sans border border-[#D4A373]/30 shadow-2xl">
-  <div class="text-center mb-6">
+  <div class="text-center mb-8 space-y-2">
-    <span class="px-3 py-1 rounded-full bg-amber-100 text-[#C85A32] text-xs font-bold uppercase tracking-wider">
+    <div class="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-[#2D5A43]/20 border border-emerald-500/40 text-emerald-400 text-xs font-bold uppercase tracking-wider">
-      Direktbucher-Vorteil
+      <span>🔒 Direktbucher Bestpreis-Garantie</span>
-    </span>
+    </div>
-    <h3 class="font-serif text-2xl sm:text-3xl font-bold text-stone-900 mt-2">
+    <h3 class="font-serif text-2xl sm:text-3xl font-bold text-[#E6D5C3]">
       Verfügbarkeit & Bestpreis prüfen
     </h3>
-    <p class="text-stone-600 text-sm mt-1">
+    <p class="text-[#A3978B] text-xs sm:text-sm max-w-xl mx-auto">
-      Buche direkt über unsere Eviivo-Schnittstelle – 15 % günstiger als auf Booking.com
+      Buche direkt über unsere Eviivo-Schnittstelle – 15% günstiger als auf Booking.com oder Airbnb. Bestpreis garantiert!
     </p>
   </div>
 
   <!-- Booking Mask Interface -->
   <form action="https://onlinereservation.eviivo.com" method="GET" target="_blank" class="grid grid-cols-1 sm:grid-cols-3 gap-4">
     <div class="space-y-1">
-      <label class="text-xs font-semibold text-stone-600 uppercase tracking-wider">Anreise</label>
+      <label class="text-xs font-semibold text-[#D4A373] uppercase tracking-wider">Anreise</label>
-      <input type="date" name="startDate" class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-800 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none" required />
+      <input
+        type="date"
+        name="startDate"
+        class="w-full px-4 py-3 rounded-xl bg-[#1A1816] border border-[#D4A373]/30 text-[#E6D5C3] text-xs focus:border-[#D4A373] focus:outline-none"
+        required
+      />
     </div>
 
     <div class="space-y-1">
-      <label class="text-xs font-semibold text-stone-600 uppercase tracking-wider">Abreise</label>
+      <label class="text-xs font-semibold text-[#D4A373] uppercase tracking-wider">Abreise</label>
-      <input type="date" name="endDate" class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-800 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none" required />
+      <input
+        type="date"
+        name="endDate"
+        class="w-full px-4 py-3 rounded-xl bg-[#1A1816] border border-[#D4A373]/30 text-[#E6D5C3] text-xs focus:border-[#D4A373] focus:outline-none"
+        required
+      />
     </div>
 
     <div class="space-y-1">
-      <label class="text-xs font-semibold text-stone-600 uppercase tracking-wider">Gäste</label>
+      <label class="text-xs font-semibold text-[#D4A373] uppercase tracking-wider">Gäste</label>
-      <select name="adults" class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-800 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none">
+      <select
+        name="adults"
+        class="w-full px-4 py-3 rounded-xl bg-[#1A1816] border border-[#D4A373]/30 text-[#E6D5C3] text-xs focus:border-[#D4A373] focus:outline-none"
+      >
         <option value="1">1 Person</option>
         <option value="2" selected>2 Personen</option>
         <option value="3">3 Personen</option>
@@ -38,17 +51,20 @@
     </div>
 
     <div class="sm:col-span-3 pt-2">
-      <button type="submit" class="w-full py-4 rounded-xl bg-[#C85A32] text-white font-bold text-base hover:bg-[#b04d2a] shadow-lg hover:shadow-xl transition-all">
+      <button
-        Jetzt Verfügbarkeit zum Bestpreis prüfen →
+        type="submit"
+        class="w-full py-4 rounded-xl bg-gradient-to-r from-[#2D5A43] to-[#C85A32] text-white font-bold text-sm hover:opacity-95 shadow-xl transition-all"
+      >
+        Jetzt Verfügbarkeit & Bestpreis abrufen ➔
       </button>
     </div>
   </form>
 
-  <div class="mt-4 text-center text-xs text-stone-400 flex items-center justify-center gap-4">
+  <div class="mt-6 text-center text-[11px] text-[#A3978B] flex flex-wrap items-center justify-center gap-4 border-t border-[#D4A373]/10 pt-4">
-    <span>🔒 Sichere SSL-Verschlüsselung</span>
+    <span>🔒 Sichere SSL-Schnittstelle</span>
     <span>•</span>
     <span>💳 Keine versteckten Gebühren</span>
     <span>•</span>
-    <span>⚡ Sofortige Bestätigung</span>
+    <span>⚡ Sofortige Reservierungsbestätigung</span>
   </div>
 </div>

src/components/Footer.astro

@@ -1,66 +1,136 @@
 ---
+interface Props {
+  lang?: 'de' | 'en';
+}
+
+const { lang = 'de' } = Astro.props;
 ---
 
-<footer class="bg-stone-900 text-stone-300 pt-16 pb-12 border-t border-stone-800">
+<footer class="bg-stone-950 text-stone-400 pt-16 pb-12 border-t border-stone-800 font-sans">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
-      <!-- Col 1: Brand -->
+      <!-- Col 1: Brand & Heritage -->
       <div class="space-y-4">
-        <h3 class="font-serif text-2xl font-bold text-white">Casa da Enzo</h3>
+        <div class="flex items-center gap-3">
-        <p class="text-stone-400 text-sm leading-relaxed">
+          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[#2D5A43] via-[#D4A373] to-[#C85A32] p-0.5">
-          7 individuelle Boutique-Apartments & hauseigene Trattoria im UNESCO-Weltkulturerbe Goslar. Italienisches Lebensgefühl seit 1980.
+            <div class="w-full h-full bg-stone-950 rounded-[10px] flex items-center justify-center font-serif text-lg font-bold text-amber-400">
+              E
+            </div>
+          </div>
+          <div>
+            <h3 class="font-serif text-xl font-bold text-stone-100">Casa da Enzo</h3>
+            <p class="text-[10px] uppercase tracking-widest text-amber-400">Sizilien trifft Goslar • Seit 1980</p>
+          </div>
+        </div>
+        <p class="text-xs leading-relaxed text-stone-400">
+          7 individuelle Boutique-Apartments über unserer traditionsreichen Trattoria im UNESCO-Weltkulturerbe Goslar. 100% digitaler Check-in trifft auf authentische italienische Gastfreundschaft.
         </p>
-        <p class="text-xs text-stone-500">
+        <p class="text-xs text-amber-400 font-medium">
-          Bäckerstraße 18 • 38640 Goslar
+          📍 Bäckerstraße 18 • 38640 Goslar, Harz
         </p>
       </div>
 
       <!-- Col 2: Navigation -->
       <div class="space-y-3">
-        <h4 class="font-serif text-lg font-semibold text-white">Navigation</h4>
+        <h4 class="font-serif text-base font-semibold text-stone-100 border-b border-stone-800 pb-2">Navigation</h4>
-        <ul class="space-y-2 text-sm text-stone-400">
+        <ul class="space-y-2 text-xs">
-          <li><a href="#apartments" class="hover:text-white transition-colors">7 Suiten & Apartments</a></li>
+          <li>
-          <li><a href="#trattoria" class="hover:text-white transition-colors">Trattoria da Enzo</a></li>
+            <a href="/apartments" class="hover:text-emerald-400 transition-colors flex items-center gap-2">
-          <li><a href="#geschichte" class="hover:text-white transition-colors">Familien-Geschichte</a></li>
+              <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
-          <li><a href="#booking" class="hover:text-white transition-colors">Direktbuchung</a></li>
+              <span>Apartments & Suiten (7 Einheiten)</span>
+            </a>
+          </li>
+          <li>
+            <a href="/trattoria" class="hover:text-[#C85A32] transition-colors flex items-center gap-2">
+              <span class="w-1.5 h-1.5 rounded-full bg-[#C85A32]"></span>
+              <span>Trattoria da Enzo (Speisekarte & Tisch)</span>
+            </a>
+          </li>
+          <li>
+            <a href="/trattoria#gutscheine" class="hover:text-amber-400 transition-colors flex items-center gap-2">
+              <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
+              <span>Gutschein-Shop</span>
+            </a>
+          </li>
+          <li>
+            <a href="/blog" class="hover:text-amber-400 transition-colors">
+              Blog & Magazin
+            </a>
+          </li>
+          <li>
+            <a href="/#geschichte" class="hover:text-amber-400 transition-colors">
+              Unsere Geschichte
+            </a>
+          </li>
         </ul>
       </div>
 
-      <!-- Col 3: Gastronomie & Service -->
+      <!-- Col 3: Contacts -->
       <div class="space-y-3">
-        <h4 class="font-serif text-lg font-semibold text-white">Kontakt & Service</h4>
+        <h4 class="font-serif text-base font-semibold text-stone-100 border-b border-stone-800 pb-2">
-        <ul class="space-y-2 text-sm text-stone-400">
+          Kontakt & Service
-          <li>E-Mail: <a href="mailto:booking@casa-daenzo.de" class="hover:text-white">booking@casa-daenzo.de</a></li>
+        </h4>
-          <li>WhatsApp Concierge: <a href="https://wa.me/4915207483196" class="hover:text-white">+49 1520 7483196</a></li>
+        
-          <li>Check-in: 15:00 Uhr (Nuki Code)</li>
+        <div class="space-y-3 text-xs">
-          <li>Check-out: 11:00 Uhr</li>
+          <!-- Apartments Contact -->
-        </ul>
+          <div class="p-3 rounded-xl bg-stone-900 border border-emerald-500/30 space-y-1">
+            <div class="text-[10px] uppercase font-bold text-emerald-400 flex items-center gap-1.5">
+              <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
+              <span>Apartments & Buchungen</span>
+            </div>
+            <a href="https://wa.me/4915207483196" target="_blank" class="block text-emerald-400 hover:underline font-bold">
+              WhatsApp: +49 1520 7483196
+            </a>
+            <p class="text-[10px] text-stone-400">E-Mail: booking@casa-daenzo.de</p>
           </div>
 
-      <!-- Col 4: Direktbucher Vorteile -->
+          <!-- Trattoria Contact -->
-      <div class="p-6 rounded-2xl bg-stone-800/60 border border-stone-700/50 space-y-3">
+          <div class="p-3 rounded-xl bg-stone-900 border border-[#C85A32]/30 space-y-1">
-        <h4 class="font-serif text-base font-semibold text-amber-400">Direktbucher-Vorteile</h4>
+            <div class="text-[10px] uppercase font-bold text-[#C85A32] flex items-center gap-1.5">
-        <ul class="space-y-2 text-xs text-stone-300">
+              <span class="w-2 h-2 rounded-full bg-[#C85A32]"></span>
-          <li class="flex items-center gap-2">
+              <span>Trattoria Reservierung</span>
-            <span class="text-amber-400">✓</span> Bestpreis-Garantie (15% günstiger als Booking.com)
+            </div>
+            <a href="tel:+4915207483196" class="block text-[#C85A32] hover:underline font-bold">
+              Telefon: +49 1520 7483196
+            </a>
+            <p class="text-[10px] text-stone-400">Öffnungszeiten: Di–So 17:00–22:30 Uhr</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Col 4: Direct Booking Advantages -->
+      <div class="p-6 rounded-3xl bg-stone-900 border border-stone-800 space-y-4 shadow-xl">
+        <h4 class="font-serif text-base font-semibold text-amber-400">
+          Direktbucher-Vorteile
+        </h4>
+        <ul class="space-y-2.5 text-xs text-stone-300">
+          <li class="flex items-start gap-2">
+            <span class="text-amber-400 font-bold">✓</span>
+            <span>Bestpreis-Garantie (15% günstiger als Booking.com)</span>
           </li>
-          <li class="flex items-center gap-2">
+          <li class="flex items-start gap-2">
-            <span class="text-amber-400">✓</span> Flexible Stornierung
+            <span class="text-amber-400 font-bold">✓</span>
+            <span>Bevorzugte Tischreservierung in der Trattoria</span>
           </li>
-          <li class="flex items-center gap-2">
+          <li class="flex items-start gap-2">
-            <span class="text-amber-400">✓</span> Priorisierter Check-in & WhatsApp-Support
+            <span class="text-amber-400 font-bold">✓</span>
+            <span>Kontaktloser Nuki Smart-Lock Check-in</span>
           </li>
         </ul>
+        <a
+          href="/apartments#booking"
+          class="block text-center py-2.5 rounded-xl bg-[#C85A32] text-white font-bold text-xs hover:bg-[#b04d2a] transition-colors"
+        >
+          Verfügbarkeit prüfen
+        </a>
       </div>
     </div>
 
     <!-- Bottom line -->
-    <div class="pt-8 border-t border-stone-800 flex flex-col sm:flex-row items-center justify-between text-xs text-stone-500 gap-4">
+    <div class="pt-8 border-t border-stone-900 flex flex-col sm:flex-row items-center justify-between text-xs text-stone-500 gap-4">
       <p>© {new Date().getFullYear()} Casa da Enzo Goslar. Alle Rechte vorbehalten.</p>
-      <div class="flex gap-6">
+      <div class="flex items-center gap-6">
-        <a href="/impressum" class="hover:text-stone-300 transition-colors">Impressum</a>
+        <a href="https://guest.eviivo.com/casa-daenzo" target="_blank" class="hover:text-stone-300 transition-colors">Eviivo Guest Directory</a>
-        <a href="/datenschutz" class="hover:text-stone-300 transition-colors">Datenschutz</a>
-        <a href="/agb" class="hover:text-stone-300 transition-colors">AGB</a>
       </div>
     </div>
   </div>

src/components/Header.astro

@@ -1,35 +1,120 @@
 ---
+interface Props {
+  lang?: 'de' | 'en';
+}
+
+const { lang = 'de' } = Astro.props;
+const isDe = lang === 'de';
 ---
 
-<header class="sticky top-0 z-50 bg-[#FAF6F0]/90 backdrop-blur-md border-b border-stone-200/60 transition-all">
+<header class="sticky top-0 z-40 w-full bg-stone-900/95 backdrop-blur-md border-b border-stone-800 transition-all">
+  <!-- Top Utility Contact Bar -->
+  <div class="bg-stone-950 border-b border-stone-800/80 py-1.5 px-4 text-[11px] sm:text-xs">
+    <div class="max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-2 text-stone-400">
+      <!-- Dual Contacts -->
+      <div class="flex flex-wrap items-center gap-4 sm:gap-6">
+        <!-- Apartments Phone -->
+        <a
+          href="https://wa.me/4915207483196"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-1.5 text-emerald-400 hover:text-emerald-300 font-medium transition-colors"
+          title="Apartment Anfragen & Concierge Alja"
+        >
+          <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
+          <span class="text-stone-300">Apartments (WhatsApp):</span>
+          <span class="underline font-semibold">+49 1520 7483196</span>
+        </a>
+
+        <!-- Trattoria Phone -->
+        <a
+          href="tel:+4915207483196"
+          class="inline-flex items-center gap-1.5 text-[#C85A32] hover:text-[#e2724a] font-medium transition-colors"
+          title="Trattoria Tischreservierung"
+        >
+          <span class="w-2 h-2 rounded-full bg-[#C85A32]"></span>
+          <span class="text-stone-300">Trattoria:</span>
+          <span class="underline font-semibold">+49 1520 7483196</span>
+        </a>
+      </div>
+
+      <!-- Right Utility Links: Eviivo & Language Switch -->
+      <div class="flex items-center gap-4">
+        <a
+          href="https://guest.eviivo.com/casa-daenzo"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-1 text-amber-400 hover:text-white transition-colors font-medium cursor-pointer"
+          title="Digital Guest Directory"
+        >
+          <span>📖</span>
+          <span class="underline">Eviivo Guest Directory</span>
+        </a>
+
+        <div class="flex items-center bg-stone-900 border border-stone-800 rounded-full px-2 py-0.5 text-[11px] font-bold">
+          <span class="px-1.5 py-0.5 rounded-full bg-amber-500 text-stone-950">DE</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Main Navigation Bar -->
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 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-full bg-[#C85A32] text-white flex items-center justify-center font-serif text-xl font-bold shadow-sm group-hover:scale-105 transition-transform">
+      <div class="w-11 h-11 rounded-2xl bg-gradient-to-br from-[#2D5A43] via-[#D4A373] to-[#C85A32] p-0.5 shadow-lg group-hover:scale-105 transition-transform">
+        <div class="w-full h-full bg-stone-950 rounded-[14px] flex items-center justify-center font-serif text-xl font-bold text-amber-400">
           E
         </div>
+      </div>
       <div class="flex flex-col">
-        <span class="font-serif text-xl tracking-wide font-bold text-stone-900 group-hover:text-[#C85A32] transition-colors">Casa da Enzo</span>
+        <span class="font-serif text-xl tracking-wide font-bold text-white group-hover:text-amber-400 transition-colors">
-        <span class="text-[10px] tracking-widest uppercase text-stone-500 font-sans -mt-1">Goslar • Altstadt</span>
+          Casa da Enzo
+        </span>
+        <div class="flex items-center gap-1.5 text-[10px] tracking-widest uppercase font-sans -mt-0.5">
+          <span class="text-emerald-400 font-semibold">Apartments</span>
+          <span class="text-stone-400">•</span>
+          <span class="text-[#C85A32] font-semibold">Trattoria</span>
+        </div>
       </div>
     </a>
 
-    <!-- Navigation -->
+    <!-- Desktop Navigation -->
-    <nav class="hidden md:flex items-center gap-8 text-sm font-medium text-stone-700">
+    <nav class="hidden md:flex items-center gap-6 lg:gap-8 text-sm font-medium">
-      <a href="#apartments" class="hover:text-[#C85A32] transition-colors">Apartments & Suiten</a>
+      <a href="/apartments" class="text-stone-200 hover:text-emerald-400 transition-colors flex items-center gap-1.5">
-      <a href="#trattoria" class="hover:text-[#C85A32] transition-colors">Trattoria da Enzo</a>
+        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
-      <a href="#geschichte" class="hover:text-[#C85A32] transition-colors">Unsere Geschichte</a>
+        <span>Apartments & Suiten</span>
-      <a href="#location" class="hover:text-[#C85A32] transition-colors">Lage & Anreise</a>
+      </a>
-      <a href="#faq" class="hover:text-[#C85A32] transition-colors">FAQ</a>
+      <a href="/trattoria" class="text-stone-200 hover:text-[#C85A32] transition-colors flex items-center gap-1.5">
+        <span class="w-1.5 h-1.5 rounded-full bg-[#C85A32]"></span>
+        <span>Trattoria da Enzo</span>
+      </a>
+      <a href="/blog" class="text-stone-200 hover:text-amber-400 transition-colors">
+        Blog & Magazin
+      </a>
+      <a href="/#geschichte" class="text-stone-200 hover:text-amber-400 transition-colors">
+        Unsere Geschichte
+      </a>
+      <a href="/#faq" class="text-stone-200 hover:text-amber-400 transition-colors">
+        FAQ
+      </a>
     </nav>
 
     <!-- CTAs -->
-    <div class="flex items-center gap-4">
+    <div class="flex items-center gap-3">
-      <a href="#booking" class="hidden sm:inline-flex items-center px-5 py-2.5 rounded-full bg-[#C85A32] text-white font-medium text-sm hover:bg-[#b04d2a] shadow-md transition-all hover:shadow-lg hover:-translate-y-0.5">
+      <a
-        Direkt buchen (Bestpreis)
+        href="/apartments#booking"
+        class="hidden sm:inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#C85A32] text-white font-medium text-xs lg:text-sm hover:bg-[#b04d2a] shadow-md transition-all hover:scale-105"
+      >
+        <span>Direkt buchen (Bestpreis)</span>
       </a>
+
       <!-- Mobile Menu Button -->
-      <button id="mobile-menu-btn" class="md:hidden p-2 text-stone-700 hover:text-stone-900" aria-label="Menü öffnen">
+      <button
+        id="mobile-menu-btn"
+        class="md:hidden p-2 text-stone-200 hover:text-amber-400 rounded-xl bg-stone-800 border border-stone-700"
+        aria-label="Menü öffnen"
+      >
         <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="M4 6h16M4 12h16M4 18h16"/>
         </svg>
@@ -38,17 +123,42 @@
   </div>
 
   <!-- Mobile Navigation Dropdown -->
-  <div id="mobile-menu" class="hidden md:hidden bg-[#FAF6F0] border-b border-stone-200 px-4 py-4 space-y-3">
+  <div id="mobile-menu" class="hidden md:hidden bg-stone-950 border-b border-stone-800 px-4 py-6 space-y-4">
-    <a href="#apartments" class="block py-2 text-stone-800 font-medium hover:text-[#C85A32]">Apartments & Suiten</a>
+    <a href="/apartments" class="block py-2 text-stone-200 font-medium hover:text-emerald-400 flex items-center gap-2">
-    <a href="#trattoria" class="block py-2 text-stone-800 font-medium hover:text-[#C85A32]">Trattoria da Enzo</a>
+      <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
-    <a href="#geschichte" class="block py-2 text-stone-800 font-medium hover:text-[#C85A32]">Unsere Geschichte</a>
+      <span>Apartments & Suiten</span>
-    <a href="#location" class="block py-2 text-stone-800 font-medium hover:text-[#C85A32]">Lage & Anreise</a>
+    </a>
-    <a href="#faq" class="block py-2 text-stone-800 font-medium hover:text-[#C85A32]">FAQ</a>
+    <a href="/trattoria" class="block py-2 text-stone-200 font-medium hover:text-[#C85A32] flex items-center gap-2">
-    <a href="#booking" class="block text-center py-3 rounded-xl bg-[#C85A32] text-white font-medium">Direkt buchen</a>
+      <span class="w-2 h-2 rounded-full bg-[#C85A32]"></span>
+      <span>Trattoria da Enzo</span>
+    </a>
+    <a href="/blog" class="block py-2 text-stone-200 font-medium hover:text-amber-400">
+      Blog & Magazin
+    </a>
+    <a href="/#geschichte" class="block py-2 text-stone-200 font-medium hover:text-amber-400">
+      Unsere Geschichte
+    </a>
+    <a href="/#faq" class="block py-2 text-stone-200 font-medium hover:text-amber-400">
+      FAQ
+    </a>
+
+    <div class="pt-2 border-t border-stone-800 space-y-2">
+      <a href="https://wa.me/4915207483196" target="_blank" class="block py-1.5 text-xs text-emerald-400 font-semibold">
+        💬 Apartments WhatsApp: +49 1520 7483196
+      </a>
+      <a href="https://guest.eviivo.com/casa-daenzo" target="_blank" class="block py-1.5 text-xs text-amber-400 font-semibold">
+        📖 Eviivo Guest Directory
+      </a>
+    </div>
+
+    <a href="/apartments#booking" class="block text-center py-3 rounded-2xl bg-[#C85A32] text-white font-bold text-sm">
+      Jetzt Direkt buchen
+    </a>
   </div>
 </header>
 
 <script>
+  function setupHeader() {
     const btn = document.getElementById('mobile-menu-btn');
     const menu = document.getElementById('mobile-menu');
     if (btn && menu) {
@@ -56,4 +166,8 @@
         menu.classList.toggle('hidden');
       });
     }
+  }
+
+  document.addEventListener('DOMContentLoaded', setupHeader);
+  document.addEventListener('astro:page-load', setupHeader);
 </script>

src/components/Hero5050.astro

@@ -0,0 +1,198 @@
+---
+interface Props {
+  lang?: 'de' | 'en';
+}
+
+const { lang = 'de' } = Astro.props;
+const isDe = lang === 'de';
+---
+
+<section class="relative pt-8 pb-16 lg:pt-12 lg:pb-24 overflow-hidden bg-[#1A1816]">
+  <!-- Subtle Background Gradients -->
+  <div class="absolute top-0 left-0 w-1/2 h-full bg-[#2D5A43]/10 blur-3xl pointer-events-none"></div>
+  <div class="absolute top-0 right-0 w-1/2 h-full bg-[#C85A32]/10 blur-3xl pointer-events-none"></div>
+
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 space-y-12">
+    <!-- Top Subtitle / Heritage Tag -->
+    <div class="text-center space-y-3">
+      <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#24211D] border border-[#D4A373]/30 text-[#D4A373] text-xs font-semibold tracking-wider uppercase">
+        <span>🇮🇹 Sizilien trifft Goslar</span>
+        <span>•</span>
+        <span>Seit 1980 • Bäckerstraße 18</span>
+      </div>
+      <h1 class="font-serif text-3xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-[#E6D5C3]">
+        Zwei Welten. Ein unvergleichliches Haus.
+      </h1>
+      <p class="text-sm sm:text-base text-[#A3978B] max-w-2xl mx-auto leading-relaxed">
+        {isDe
+          ? "Obere Etagen: 7 neu sanierte Boutique-Apartments im UNESCO-Fachwerk. Erdgeschoss: Die traditionsreiche Familien-Trattoria. Erlebe echte italienische Gastfreundschaft im Herzen von Goslar."
+          : "Upper floors: 7 newly renovated boutique apartments in UNESCO timber-frame heritage. Ground floor: The legendary family Trattoria. Experience authentic Italian hospitality in Goslar."}
+      </p>
+    </div>
+
+    <!-- 50 / 50 Dual Hero Cards Grid -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch">
+      <!-- Left Side: Apartments (Green #2D5A43) -->
+      <div class="relative rounded-3xl bg-[#24211D] border border-[#2D5A43]/40 p-8 sm:p-10 flex flex-col justify-between shadow-2xl hover:border-emerald-500/60 transition-all group overflow-hidden">
+        <div class="absolute top-0 right-0 w-32 h-32 bg-[#2D5A43]/20 rounded-full blur-2xl group-hover:bg-[#2D5A43]/30 transition-all"></div>
+        
+        <div class="space-y-6 relative z-10">
+          <div class="flex items-center justify-between">
+            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#2D5A43]/20 border border-emerald-500/30 text-emerald-400 text-xs font-bold uppercase tracking-wider">
+              <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
+              <span>{isDe ? "Boutique Apartments" : "Boutique Apartments"}</span>
+            </span>
+            <span class="text-xs font-serif text-[#D4A373]">7 Suiten • 100% Saniert</span>
+          </div>
+
+          <div class="space-y-3">
+            <h2 class="font-serif text-2xl sm:text-3xl font-bold text-[#E6D5C3] group-hover:text-emerald-300 transition-colors">
+              {isDe ? "Schlafen & Entspannen im Denkmal" : "Stay in UNESCO Heritage"}
+            </h2>
+            <p class="text-xs sm:text-sm text-[#A3978B] leading-relaxed">
+              {isDe
+                ? "4 Premium-Komfort-Suites mit Balkon/Terrasse & Workstation sowie 3 gemütliche Klassik-Suites. Kontaktloser Nuki Smart-Lock Access ab 15:00 Uhr, Highspeed WLAN & Bestpreis-Garantie bei Direktbuchung."
+                : "4 Premium Suites with balcony/terrace & workspace plus 3 cozy Classic Suites. Contactless Nuki Smart Lock access from 3:00 PM, Highspeed Wi-Fi & Best Rate Guarantee."}
+            </p>
+          </div>
+
+          <!-- Feature Bullets -->
+          <div class="grid grid-cols-2 gap-3 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/15">
+            <div class="flex items-center gap-2">
+              <span class="text-emerald-400 font-bold">✓</span>
+              <span>100% 2025er Sanierung</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-emerald-400 font-bold">✓</span>
+              <span>Nuki Keyless PIN Access</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-emerald-400 font-bold">✓</span>
+              <span>15% Direktbucher-Rabatt</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-emerald-400 font-bold">✓</span>
+              <span>Balkon, Terrasse & Workation</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Action Area -->
+        <div class="pt-8 space-y-4 relative z-10">
+          <div class="flex flex-col sm:flex-row gap-3">
+            <a
+              href="#apartments"
+              class="flex-1 py-3.5 px-6 rounded-2xl bg-[#2D5A43] hover:bg-[#386d52] text-white text-center font-bold text-xs sm:text-sm transition-all shadow-lg hover:shadow-emerald-900/30"
+            >
+              {isDe ? "Suiten entdecken & buchen" : "Explore Suites & Book"}
+            </a>
+            <a
+              href="https://wa.me/4915207483196"
+              target="_blank"
+              class="py-3.5 px-4 rounded-2xl bg-[#1A1816] hover:bg-[#2E2A25] text-emerald-400 border border-emerald-500/40 text-center font-semibold text-xs transition-all flex items-center justify-center gap-2"
+            >
+              <span>💬 WhatsApp Alja</span>
+            </a>
+          </div>
+          <p class="text-[11px] text-[#A3978B] text-center sm:text-left">
+            Apartment Concierge Alja: <a href="https://wa.me/4915207483196" target="_blank" class="text-emerald-400 underline font-medium">+49 1520 7483196</a>
+          </p>
+        </div>
+      </div>
+
+      <!-- Right Side: Trattoria (Red #C85A32) -->
+      <div class="relative rounded-3xl bg-[#24211D] border border-[#C85A32]/40 p-8 sm:p-10 flex flex-col justify-between shadow-2xl hover:border-[#C85A32] transition-all group overflow-hidden">
+        <div class="absolute top-0 right-0 w-32 h-32 bg-[#C85A32]/20 rounded-full blur-2xl group-hover:bg-[#C85A32]/30 transition-all"></div>
+
+        <div class="space-y-6 relative z-10">
+          <div class="flex items-center justify-between">
+            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#C85A32]/20 border border-[#C85A32]/30 text-[#C85A32] text-xs font-bold uppercase tracking-wider">
+              <span class="w-2 h-2 rounded-full bg-[#C85A32] animate-pulse"></span>
+              <span>Trattoria da Enzo</span>
+            </span>
+            <span class="text-xs font-serif text-[#D4A373]">Familientradition seit 1980</span>
+          </div>
+
+          <div class="space-y-3">
+            <h2 class="font-serif text-2xl sm:text-3xl font-bold text-[#E6D5C3] group-hover:text-[#e2724a] transition-colors">
+              {isDe ? "Kulinarik & Italienische Lebensfreude" : "Authentic Sicilian Dining"}
+            </h2>
+            <p class="text-xs sm:text-sm text-[#A3978B] leading-relaxed">
+              {isDe
+                ? "In Alessandras Trattoria genießen Hotelgäste und Feinschmecker ehrliche sizilianische Spezialitäten, frisch gedrehte Pasta und erlesene Weine. Bevorzugte Tischreservierung für Apartment-Gäste."
+                : "Enjoy authentic Sicilian specialties, handmade pasta, and fine wines at Alessandra's Trattoria. Priority table reservations for apartment guests."}
+            </p>
+          </div>
+
+          <!-- Feature Bullets -->
+          <div class="grid grid-cols-2 gap-3 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/15">
+            <div class="flex items-center gap-2">
+              <span class="text-[#C85A32] font-bold">✓</span>
+              <span>Hausgemachte Pasta & Kräuter</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-[#C85A32] font-bold">✓</span>
+              <span>Di–So 17:00 – 22:30 Uhr</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-[#C85A32] font-bold">✓</span>
+              <span>Priorisierte Gästereservierung</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-[#C85A32] font-bold">✓</span>
+              <span>Echte Sizilianische Rezepte</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Action Area -->
+        <div class="pt-8 space-y-4 relative z-10">
+          <div class="flex flex-col sm:flex-row gap-3">
+            <a
+              href="tel:+49532123456"
+              class="flex-1 py-3.5 px-6 rounded-2xl bg-[#C85A32] hover:bg-[#b04d2a] text-white text-center font-bold text-xs sm:text-sm transition-all shadow-lg hover:shadow-red-900/30"
+            >
+              {isDe ? "Tisch anrufen & reservieren" : "Call & Reserve Table"}
+            </a>
+            <a
+              href="#trattoria"
+              class="py-3.5 px-4 rounded-2xl bg-[#1A1816] hover:bg-[#2E2A25] text-[#C85A32] border border-[#C85A32]/40 text-center font-semibold text-xs transition-all flex items-center justify-center gap-2"
+            >
+              <span>🍷 Speisekarte & Info</span>
+            </a>
+          </div>
+          <p class="text-[11px] text-[#A3978B] text-center sm:text-left">
+            Trattoria Festnetz: <a href="tel:+49532123456" class="text-[#C85A32] underline font-medium">+49 5321 23456</a>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Trust Bar: Airbnb Superhost, 9.8 Booking.com, 100% 2025er Sanierung -->
+    <div class="bg-[#24211D] border border-[#D4A373]/20 rounded-2xl p-6 grid grid-cols-2 lg:grid-cols-4 gap-6 text-center shadow-xl">
+      <div class="space-y-1">
+        <div class="text-2xl">⭐</div>
+        <div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">Airbnb Superhost</div>
+        <div class="text-[11px] text-[#A3978B]">Höchste Gastzufriedenheit</div>
+      </div>
+
+      <div class="space-y-1 border-l border-[#D4A373]/10">
+        <div class="text-2xl">🏆</div>
+        <div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">9.8 Booking.com</div>
+        <div class="text-[11px] text-[#A3978B]">Spitzenbewertung 2025</div>
+      </div>
+
+      <div class="space-y-1 border-l border-[#D4A373]/10">
+        <div class="text-2xl">🛠️</div>
+        <div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">100% 2025er Sanierung</div>
+        <div class="text-[11px] text-[#A3978B]">Denkmal trifft Moderne</div>
+      </div>
+
+      <div class="space-y-1 border-l border-[#D4A373]/10">
+        <div class="text-2xl">🔑</div>
+        <div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">24/7 Nuki Smart Access</div>
+        <div class="text-[11px] text-[#A3978B]">Digitaler kontaktloser Check-in</div>
+      </div>
+    </div>
+  </div>
+</section>

src/content/blog/48-stunden-in-goslar.md

@@ -0,0 +1,35 @@
+---
+title: "48 Stunden im UNESCO-Weltkulturerbe Goslar: Der perfekte Kurztrip im Harz"
+subtitle: "Fachwerk-Charme, Rammelsberger Bergbau & kulinarische Highlights in der Kaiserstadt"
+pubDate: "2026-03-10"
+author: "Sergio Campisi"
+category: "Goslar & Harz"
+readTime: "5 min"
+excerpt: "Entdecke Goslar von seiner schönsten Seite: Von historischen Gassen und dem Weltkulturerbe Rammelsberg bis hin zum sizilianischen Abendessen bei Alessandra in der Trattoria da Enzo."
+featured: true
+---
+
+Goslar begeistert durch eine einzigartige Kombination aus über 1000 Jahren Geschichte, perfekt erhaltenen Fachwerkhäusern aus verschiedensten Epochen und der unmittelbaren Nähe zur wilden Natur des Harzes. Ob Kulturbegeisterte, Aktivurlauber oder Genießer – 48 Stunden in Goslar bieten unvergessliche Eindrücke.
+
+### Tag 1: Kaiserpfalz, Marktplatz & Altstadtzauber
+
+Beginne deinen ersten Tag mit einem ausgiebigen Spaziergang durch die Kopfsteinpflastergassen der Altstadt. Die Bäckerstraße, in der auch unsere **Casa da Enzo** liegt, gehört zu den malerischsten Straßen der Stadt.
+
+1. **Die Kaiserpfalz Goslar:** Errichtet im 11. Jahrhundert unter Kaiser Heinrich III., entführt das imposante Romanik-Bauwerk direkt in die Zeit des Heiligen Römischen Reiches.
+2. **Der Goslarer Marktplatz:** Um 12:00 Uhr ertönt das berühmte Glocken- und Figurenspiel am Kämmerergebäude, das die Geschichte des Rammelsberger Bergbaus erzählt.
+3. **Kaffee & Kultur:** Kehre in einem der historischen Café-Höfe ein und genieße die entspannte Atmosphäre.
+
+Am Abend erwartet dich das kulinarische Herzstück der Casa da Enzo: In der **Trattoria da Enzo** serviert Alessandra hausgemachte Pasta und sizilianische Spezialitäten nach Familienrezepten seit 1980.
+
+### Tag 2: UNESCO-Weltkulturerbe Rammelsberg & Harzer Bergwelt
+
+Am zweiten Tag steht der Harz auf dem Programm. Das Erzbergwerk Rammelsberg ist das weltweit einzige Bergwerk, das über 1000 Jahre ununterbrochen in Betrieb war.
+
+- **Untertage-Führung:** Fahre mit der Grubenbahn tief in den Berg oder erkunde den Roeder-Stollen mit seinen riesigen hölzernen Wasserrädern.
+- **Wandern zum Maltermeister Turm:** Von dort genießt du einen spektakulären Panoramablick über Goslar und das Harzvorland.
+
+### Wohnen mittendrin: Casa da Enzo Boutique Apartments
+
+Nach einem ereignisreichen Tag kehrst du in dein Apartment in der Bäckerstraße 18 zurück. Mit unserem kontaktlosen Nuki-Keyless-Check-in kommst du jederzeit flexibel an. Genieße den Komfort von ökologisch saniertem Lehmputz, modernen Küchen und ruhigen Balkonen.
+
+*Buche direkt über unsere Website und spare 15% gegenüber Buchungsportalen!*

src/content/blog/direktbuchung-vorteile.md

@@ -0,0 +1,21 @@
+---
+title: "Warum sich die Direktbuchung lohnt: 15% sparen & Exklusive Vorteile in der Casa da Enzo"
+subtitle: "Warum du dein Apartment in Goslar ohne Zwischenhändler buchen solltest"
+pubDate: "2026-02-28"
+author: "Alja Campisi"
+category: "Apartments"
+readTime: "3 min"
+excerpt: "Buche direkt über unsere Eviivo-Buchungsmaschine und sichere dir 15% Bestpreis-Rabatt, bevorzugte Tischreservierung in der Trattoria und flexiblere Stornierungsbedingungen."
+featured: false
+---
+
+Viele Reisende nutzen große Buchungsplattformen wie Booking.com oder Airbnb aus Gewohnheit. Doch was viele nicht wissen: Die Portale verlangen erhebliche Gebühren – Geld, das wir lieber direkt als Preisvorteil an unsere Gäste weitergeben!
+
+### Deine 4 großen Vorteile bei der Direktbuchung auf casa-daenzo.de
+
+1. **Garantierte 15% Bestpreis-Garantie:** Da wir keine OTA-Provisionen zahlen müssen, ist dein Zimmerpreis auf unserer eigenen Website immer am günstigsten.
+2. **Bevorzugte Tischreservierung:** Als Direktbucher reservieren wir dir auf Wunsch automatisch einen Tisch in Alessandras Trattoria da Enzo im Erdgeschoss.
+3. **Persönlicher Concierge-Service:** Du erreichst unser Team vor und während deines Aufenthalts direkt via WhatsApp für Insidertipps, Parkplatzberatung und Sonderwünsche.
+4. **Digitale Gästemappe & Keyless-Access:** Du erhältst vorab alle Zugangsdaten für das Nuki Smart Lock sowie den Link zu unserer digitalen Eviivo-Gästemappe mit WLAN-Code und Harz-Tipps.
+
+Nutze einfach unsere integrierte Eviivo-Buchungsmaske und wähle dein Wunsch-Apartment für die nächsten Tage in Goslar aus!

src/content/blog/harzer-herbstlicht-goslar-oktober.md

@@ -0,0 +1,39 @@
+---
+title: "Harzer Herbstlicht: Warum sich der Oktober in Goslar wirklich lohnt"
+subtitle: "Herbstliche Ruhe, UNESCO-Weltkulturerbe am Rammelsberg & sizilianische Genuss-Momente in der Bäckerstraße 18"
+pubDate: "2026-09-22"
+author: "Dante Text & Giotto Art"
+category: "Goslar & Harz"
+image: "/images/blog/baeckerstrasse_18_herbst.jpg"
+readTime: "6 min"
+excerpt: "Wenn der Frühnebel morgens lautlos über den Schieferdächern der Goslarer Altstadt liegt und die Wälder rund um den Liebesbankweg in leuchtendem Gold brennen, zeigt sich der Harz von seiner schönsten Seite."
+featured: true
+---
+
+Wenn der Frühnebel morgens lautlos über den Schieferdächern der Goslarer Altstadt liegt und die ersten Sonnenstrahlen das historische Fachwerk in der Bäckerstraße erwärmen, zeigt sich der Harz von seiner schönsten und bedachtesten Seite. Die großen Sommermassen sind abgereist, die Wanderwege am Rammelsberg gehören wieder den Genießern, und in den Mischwäldern rund um den Liebesbankweg brennt das Herbstlaub in leuchtendem Rot, Ocker und tiefem Gold.
+
+### Herbstliche Ruhe und UNESCO-Weltkulturerbe vor unserer Haustür
+
+Ein Kurztrip im Oktober lohnt sich bei uns vor allem wegen des besonderen Lichts und der unvergleichlich klaren Mittelgebirgsluft. Statt durch überlaufene Touristenhotspots zu hetzen, starten Sie Ihren Tag bei uns direkt vor der Haustür der Bäckerstraße 18. Von unseren frisch sanierten Apartments und Suiten aus erreichen Sie den historischen Marktplatz mit dem Bäckergildehaus und dem berühmten Glockenspiel in unter fünf Gehminuten.
+
+Wer die Wanderschuhe einschnüren möchte, schlägt den Weg in Richtung Rammelsberg ein. Der Aufstieg zum Maltermeister Turm belohnt mit einem weitläufigen Panoramablick über das gesamte Harzvorland. Hier oben zu stehen, während der Nebel im Tal aufsteigt und die Wälder im Sonnenlicht leuchten, ist ein Erlebnis, das lange nachwirkt. Die ehemaligen Bergbaumpfade, die sich durch das Hochmoor und entlang alter Wasserläufe schlängeln, gehören heute nicht ohne Grund zum UNESCO-Weltkulturerbe.
+
+### Ankommen und Wohlfühlen in unseren historischen Mauern
+
+Nach ein paar Stunden an der frischen Harzer Luft gibt es nichts Besserem, als in ein warmes, stilvolles Domizil zurückzukehren. Unsere 2025 vollständig sanierten Apartments | Casa da Enzo verbinden skandinavische Schlichtheit mit italienischer Wärme und Gemütlichkeit. Jede Suite verfügt über eine voll ausgestattete Küche, Arbeitsbereich mit Highspeed-WLAN und hochwertige Eichenholzböden, die Geborgenheit ausstrahlen.
+
+Wer den Abend nicht in den eigenen vier Wänden verbringen möchte, schlendert einfach eine Etage nach unten ins Erdgeschoss unseres Vorderhauses. In der Trattoria | Casa da Enzo kocht Alessandra für Sie ehrliche sizilianische Herbstküche: hausgemachte Tagliatelle mit langsam geschmorter Wildschwein-Sugo, krosse Arancini mit Pilzfüllung und ein edles Glas Rotwein aus Modica. So verbindet sich Harzer Mittelgebirgsromantik nahtlos mit mediterraner Lebensfreude.
+
+---
+
+### Häufig gestellte Fragen (FAQ & GEO-Informationen)
+
+**Wo liegen die Apartments | Casa da Enzo und wie erreiche ich die Altstadt von Goslar?**  
+Die Apartments | Casa da Enzo liegen zentral in der Bäckerstraße 18 in der Altstadt von Goslar. Der historische Marktplatz, die Kaiserpfalz und hervorragende Gastronomie sind in wenigen Minuten zu Fuß erreichbar.
+
+**Welche Ausflugsziele sind im Oktober rund um Goslar besonders empfehlenswert?**  
+Sehr beliebt sind das UNESCO-Weltkulturerbe Rammelsberg, der Liebesbankweg in Hahnenklee und Wanderungen zum Maltermeister Turm mit Blick über die Harzer Herbstlandschaft.
+
+---
+
+*Planen Sie Ihren herbstlichen Kurztrip in den Harz? Buchen Sie Ihr Apartment oder Ihre Suite direkt auf [casa-daenzo.de](https://casa-daenzo.de) und sichern Sie sich stets Ihren 15% Bestpreisvorteil gegenüber Buchungsportalen.*

src/content/blog/herbst-kulinarik-trattoria-goslar.md

@@ -0,0 +1,43 @@
+---
+title: "Kastanien, Pilze & Wildschwein-Sugo: Saisonaler Auftakt in der Trattoria"
+subtitle: "Herbstliche Aromen aus Sizilien und dem Harz in der Bäckerstraße 18 in Goslar"
+pubDate: "2026-09-29"
+author: "Dante Text & Alessandra"
+category: "Trattoria"
+image: "/images/blog/trattoria_tagliatelle.jpg"
+readTime: "5 min"
+excerpt: "Wenn draußen die Blätter im Harz fallen, duftet es bei uns in der Bäckerstraße nach frischem Wildschwein-Sugo, Steinpilzen und gerösteten Kastanien. Erleben Sie herbstliche Trattoria-Kultur in Goslar."
+featured: false
+---
+
+Wenn im Oktober kühle Luft durch die historischen Gassen der Goslarer Altstadt zieht, kehrt bei uns im Erdgeschoss des Fachwerk-Denkmals in der Bäckerstraße 18 gemütliche Wärme ein. Die Herbstsaison ist für uns eine ganz besondere Zeit: Hier verbindet sich die bodenständige Kulinarik der Harzer Wälder nahtlos mit den intensiven Traditionen unserer sizilianischen Heimat.
+
+### Saisonaler Speiseplan: Harzer Wild und sizilianische Seele
+
+Mit dem Herbstbeginn hält unsere herbstliche Saisonkarte Einzug in die **Trattoria | Casa da Enzo**. Alessandra kocht in diesen Wochen Spezialitäten, die Geborgenheit schenken. Im Mittelpunkt stehen frische Waldpilze aus den umliegenden Fichtenwäldern, süße Kastanien und langsam geschmortes Harzer Wildschwein-Sugo.
+
+* **Tagliatelle al Ragù di Cinghiale:** Hausgemachte Eiernudeln, serviert mit einem über sechs Stunden lang eingekochten Wildschwein-Ragù, verfeinert mit Wacholderbeeren und einem Schuss edlem Rotwein aus Modica.
+* **Risotto ai Funghi Porcini e Castagne:** Cremososes Risotto mit frischen Steinpilzen, gerösteten Kastanien und hauchfein gehobeltem Pecorino Siciliano.
+* **Arancini Autunnali:** Knusprige sizilianische Reisbällchen mit einer cremigen Pilz-Provola-Füllung als Vorspeise zum Teilen.
+
+### Weinbegleitung & Mediterranes Lebensgefühl
+
+Zu den kräftigen Herbstgerichten servieren wir Ihnen sorgfältig ausgewählte Weine kleiner sizilianischer Familienweingüter. Ein vollmundiger Nero d’Avola oder ein mineralischer Etna Rosso vom Vulkangestein ergänzen die Pilz- und Wildaromen perfekt und bringen die Sonne des Südens an Ihren Tisch in Goslar.
+
+### Perfekt kombiniert: Kulinarik & Auszeit in unseren Suiten
+
+Für Gäste unserer **Apartments | Casa da Enzo** liegt der Genuss direkt vor der Zimmertür: Nach einem stimmungsvollen Abendessen bei Kerzenschein und einem Glas Sizilianischem Rotwein spazieren Sie einfach die Treppe hoch in Ihre stilvolle Suite. Die Kombination aus ruhiger Altstadtlage, historischem Fachwerkcharakter und ehrlicher Gastronomie macht Ihre Harz-Auszeit unvergesslich.
+
+---
+
+### Häufig gestellte Fragen (FAQ & GEO-Informationen)
+
+**Wo befindet sich die Trattoria | Casa da Enzo und wie sind die Öffnungszeiten im Herbst?**  
+Die Trattoria liegt mitten in der Altstadt von Goslar in der Bäckerstraße 18. Wir empfehlen eine frühzeitige Tischreservierung, besonders an den Wochenenden im Oktober.
+
+**Bietet die Trattoria | Casa da Enzo auch vegetarische Herbstgerichte an?**  
+Ja, unsere Herbstkarte umfasst hervorragende vegetarische Gerichte wie unser Steinpilz-Kastanien-Risotto, hausgemachte Ravioli und frische Antipasti-Variationen.
+
+---
+
+*Planen Sie ein kulinarisches Wochenende im Harz? Reservieren Sie Ihren Tisch in der Trattoria oder buchen Sie Ihr Apartment direkt auf [casa-daenzo.de](https://casa-daenzo.de) – stets mit 15 % Bestpreisvorteil gegenüber Buchungsportalen.*

src/content/blog/sizilianische-kueche-goslar.md

@@ -0,0 +1,30 @@
+---
+title: "Das Geheimnis echter sizilianischer Pasta: Zu Besuch bei Alessandra in Goslar"
+subtitle: "Seit 1980 bringt Familie Campisi mediterrane Lebensfreude in die Bäckerstraße"
+pubDate: "2026-03-05"
+author: "Alessandra Campisi"
+category: "Trattoria"
+readTime: "4 min"
+excerpt: "Frische Kräuter, aromatisches Olivenöl aus Sizilien und handgemachte Pasta nach Rezepten von Vater Vincenzo 'Enzo'. Was die Trattoria da Enzo in Goslar so besonders macht."
+featured: false
+---
+
+Wer die Schwelle der Trattoria da Enzo in der Bäckerstraße 18 überschreitet, vergisst für einen Moment das Harzer Fachwerkklima. Es duftet nach geröstetem Knoblauch, frischem Basilikum und stundenlang eingekochter Parmigiana. 
+
+### Die Tradition unseres Vaters Vincenzo "Enzo"
+
+1980 reiste unser Vater Vincenzo aus Sizilien nach Goslar. Im Gepäck hatte er nicht nur eine Leidenschaft für gutes Essen, sondern die unumstößliche Philosophie: *Serviere deinen Gästen nur das, was du deiner eigenen Familie servieren würdest.*
+
+Heute führe ich, Alessandra, die Küche in 2. Generation fort. Jedes Gericht ist eine Hommage an die sizilianische Heimat unserer Familie – ohne Chichi, dafür mit unverfälschtem Geschmack.
+
+### Drei Geheimnisse unserer Küche
+
+1. **Original Produkte aus Sizilien:** Unser Olivenöl beziehen wir direkt von befreundeten Erzeugern aus der Region Agrigent. Es wird kalt gepresst und verleiht Salaten, Antipasti und Pasta ihr charakteristisches Aroma.
+2. **Frische Handarbeit:** Unsere Pasta wird täglich frisch zubereitet. Ob Tagliatelle, Ravioli mit Ricotta-Füllung oder deftige Gnocchi – der Unterschied lässt sich bei jedem Bissen schmecken.
+3. **Regionale Frische:** Fleisch, Gemüse und Milchprodukte kombinieren wir mit besten Zutaten aus dem Harzer Umland.
+
+### Das Rundum-Erlebnis für Übernachtungsgäste
+
+Besonders schön: Gäste unserer 7 **Casa da Enzo Boutique Apartments** wohnen direkt über der Trattoria. Nach einem romantischen Abendessen mit einem Glas Nero d’Avola muss niemand mehr ins Taxi steigen – die Treppe führt direkt ins gemütliche Apartment.
+
+*Tipp: Reserviere deinen Tisch rechtzeitig online oder per WhatsApp zusammen mit deiner Apartment-Buchung!*

src/content/blog/workation-im-harz.md

@@ -0,0 +1,25 @@
+---
+title: "Workation & Remote Work im Harz: Produktiv arbeiten in den Boutique-Suites"
+subtitle: "Highspeed-Glasfaser, ergonomische Arbeitsplätze & historischen Altstadt-Flair verbinden"
+pubDate: "2026-02-20"
+author: "Sergio Campisi"
+category: "Apartments"
+readTime: "4 min"
+excerpt: "Warum immer mehr Digitale Nomaden und Geschäftsreisende unsere Suite 4 mit Highspeed Workspace für ihre Workation in Goslar wählen."
+featured: false
+---
+
+Arbeiten, wo andere Urlaub machen – der Trend zur Workation ist im UNESCO-Weltkulturerbe Goslar angekommen. Unsere **Komfort-Suite 4 Workation** wurde speziell für die Bedürfnisse von Remote Workern und Long-Stay-Gästen konzipiert.
+
+### Die perfekte Ausstattung für deinen Arbeitstag
+
+- **100 Mbit/s Glasfaser Wi-Fi 6:** Stabile, blitzschnelle Verbindungen für Videokonferenzen und datenintensive Tasks.
+- **Ergonomischer Dedicated Workspace:** Ein geräumiger Schreibtisch, ergonomische Bestuhlung und optimales Licht.
+- **Ruhige Lage:** Dank moderner Schallschutz-Isolierung arbeitest du flüsterleise und fokussiert.
+- **Eigene Bosch-Küche:** Brühe dir deinen frischen Espresso jederzeit direkt im Apartment auf.
+
+### Nach Feierabend: Harzer Natur & Italienische Küche
+
+Sobald der Laptop zugeklappt ist, liegt dir die Altstadt zu Füßen. Spaziere durch die historischen Gassen, unternimm eine kurze Abendwanderung im Harz oder treffe dich auf ein Glas Wein und hausgemachte Pasta in unserer Trattoria da Enzo im Erdgeschoss.
+
+*Entdecke Suite 4 und unsere weiteren Apartments für deine nächste Workation in Goslar!*

src/content/config.ts

@@ -19,6 +19,22 @@ const apartmentsCollection = defineCollection({
   }),
 });
 
+const blogCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    subtitle: z.string(),
+    pubDate: z.string(),
+    author: z.string(),
+    category: z.enum(['Apartments', 'Trattoria', 'Goslar & Harz']),
+    image: z.string().optional(),
+    readTime: z.string(),
+    excerpt: z.string(),
+    featured: z.boolean().default(false),
+  }),
+});
+
 export const collections = {
   apartments: apartmentsCollection,
+  blog: blogCollection,
 };

src/data/enzinoPrompt.ts

@@ -0,0 +1,49 @@
+export interface EnzinoMessage {
+  role: 'system' | 'user' | 'assistant';
+  content: string;
+}
+
+export const ENZINO_SYSTEM_PROMPT_DE = `Du bist Enzino, der virtuelle italienische Gastgeber & Concierge von Casa da Enzo in Goslar (Bäckerstraße 18).
+Deine Persönlichkeit: Warmherzig, charmant, gastfreundlich, typisch italienisch ("Benvenuto! Ciao!"). Du sprichst mit Begeisterung über das Erbe von Enzo (gegründet 1980), die 7 neu sanierten Boutique-Apartments und Alessandras hausgemachte Pasta in der Trattoria.
+
+Wichtige Fakten:
+- Apartments: 7 Einheiten (4 Premium-Suiten: Suite 1 Balkon, Suite 2 Terrasse, Suite 3 Komfort, Suite 4 Workspace; 3 Klassik-Einheiten: Romantik 1, Romantik 2, Studio). Alle 2025 saniert.
+- Check-in: 100% digital & kontaktlos per Nuki PIN-Code ab 15:00 Uhr. Check-out bis 11:00 Uhr.
+- Kontakttrennung:
+  * Apartments & Buchungsfragen: WhatsApp mit Alja unter +49 1520 7483196.
+  * Trattoria & Tischreservierung: Festnetz +49 5321 23456 (Di-So 17:00-22:30 Uhr).
+- Digitales Gästebuch (Eviivo): Bereits gebuchte Gäste können sich mit ihrer Buchungsnummer und ihrem Nachnamen im Eviivo Digital Guest Directory einloggen.
+- Vorteil Direktbuchung: 15% günstiger als Booking.com / Airbnb, Bestpreis-Garantie, bevorzugte Tischreservierung.
+
+Antworte kurz, hilfsbereit, charmant und streue hin und wieder italienische Herzlichkeiten ein (z.B. "Perfetto!", "Prego!", "Mamma mia!").`;
+
+export const ENZINO_SYSTEM_PROMPT_EN = `You are Enzino, the virtual Italian host & concierge of Casa da Enzo in Goslar (Bäckerstraße 18).
+Your personality: Warm, charming, hospitable, authentic Italian ("Benvenuto! Ciao!"). You speak with passion about Enzo's legacy (founded in 1980), our 7 boutique apartments, and Alessandra's homemade pasta in the Trattoria.
+
+Key Facts:
+- Apartments: 7 units (4 Premium Suites with balcony/terrace/workspace, 3 Classic units). Completely renovated in 2025.
+- Check-in: 100% digital & contactless via Nuki PIN code from 3:00 PM. Check-out by 11:00 AM.
+- Separate Contacts:
+  * Apartments & Booking questions: WhatsApp with Alja at +49 1520 7483196.
+  * Trattoria & Table reservations: Landline +49 5321 23456 (Tue-Sun 5:00 PM - 10:30 PM).
+- Digital Guest Directory (Eviivo): Booked guests can log into the Eviivo Guest Directory using their booking number and last name.
+- Direct booking perk: 15% cheaper than Booking.com / Airbnb, best price guarantee, priority table reservation.
+
+Keep answers concise, helpful, charming, with friendly Italian flair ("Perfetto!", "Prego!", "Bellissimo!").`;
+
+export const ENZINO_INITIAL_GREETING_DE = "Ciao! I'm Enzino, dein italienischer Digital Concierge 🇮🇹 Wie kann ich dir heute helfen? Frag mich nach unseren Apartments, der Trattoria oder dem digitalen Check-in!";
+export const ENZINO_INITIAL_GREETING_EN = "Ciao! I'm Enzino, your Italian Digital Concierge 🇮🇹 How can I help you today? Ask me about our boutique apartments, Trattoria, or digital check-in!";
+
+export const ENZINO_QUICK_QUESTIONS_DE = [
+  "Wie funktioniert der Check-in?",
+  "Tisch in der Trattoria reservieren",
+  "Direktbucher Bestpreis",
+  "Digitales Gästebuch (Eviivo)"
+];
+
+export const ENZINO_QUICK_QUESTIONS_EN = [
+  "How does check-in work?",
+  "Reserve a table in Trattoria",
+  "Direct booking best rate",
+  "Digital Guest Directory (Eviivo)"
+];

src/data/i18n.ts

@@ -0,0 +1,151 @@
+export type Language = 'de' | 'en';
+
+export const defaultLang: Language = 'de';
+
+export const translations = {
+  de: {
+    nav: {
+      apartments: "Apartments & Suiten",
+      trattoria: "Trattoria da Enzo",
+      story: "Unsere Geschichte",
+      location: "Lage & Anreise",
+      faq: "FAQ & Service",
+      book: "Direkt buchen (Bestpreis)",
+      admin: "Trattoria Admin",
+      impressum: "Impressum",
+      datenschutz: "Datenschutz"
+    },
+    hero: {
+      tagline: "🇮🇹 Casa da Enzo seit 1980 • Bäckerstraße 18, Goslar",
+      title: "Nicht wie beim Italiener. Sondern wie in Italien.",
+      subtitle: "Erlebe 7 liebevoll restaurierte Boutique-Apartments im Herzen der UNESCO-Altstadt von Goslar. Direkt über unserer traditionsreichen Familien-Trattoria.",
+      directBookingBenefit: "15% günstiger bei Direktbuchung",
+      ctaBooking: "Jetzt Verfügbarkeit prüfen",
+      ctaApartments: "Suiten erkunden ↓"
+    },
+    trattoria: {
+      title: "Trattoria da Enzo",
+      subtitle: "Authentische italienische Küche nach Familienrezepten seit 1980",
+      openingHours: "Öffnungszeiten",
+      lunch: "Mittagstisch",
+      dinner: "Abendkarte",
+      reserveTable: "Tisch reservieren",
+      vacationNotice: "Betriebsferien Hinweistext",
+      closedDay: "Montag (Ruhetag)",
+      tuesdayToSunday: "Dienstag – Sonntag"
+    },
+    nuki: {
+      title: "24/7 Keyless Check-in mit Nuki",
+      subtitle: "Flexibel anreisen ohne Schlüsselübergabe",
+      step1: "1. Sie erhalten Ihren persönlichen 6-stelligen PIN-Code vor der Anreise per E-Mail/WhatsApp.",
+      step2: "2. Geben Sie den Code am Nuki Keypad an der Haupteingangstür (Bäckerstraße 18) ein.",
+      step3: "3. Ihre Apartmenttür lässt sich ebenfalls ganz einfach per Code oder Nuki App öffnen.",
+      checkout: "Check-out bis 11:00 Uhr: Tür hinter sich schließen – das Schloss verriegelt automatisch."
+    },
+    parking: {
+      title: "Parktipps in Goslar Altstadt",
+      subtitle: "Bequem parken nahe der Bäckerstraße 18",
+      p1: "Parkplatz Kaiserpfalz (ca. 5 Gehminuten, günstiger Tagesschein)",
+      p2: "Bolsparkhaus / Parkhaus Kaiserpassage (überdacht, 24/7 geöffnet)",
+      p3: "Be- und Entladen direkt vor der Bäckerstraße 18 ist kurzzeitig erlaubt."
+    },
+    admin: {
+      title: "Trattoria Management WebApp",
+      reservations: "Tisch-Reservierungen",
+      openingHoursManager: "Öffnungszeiten & Schichten",
+      menuManager: "Speisekarte & Gerichte",
+      vouchers: "Gutschein-Verwaltung",
+      historyLog: "Aktivitäten- & Revisions-Log",
+      confirm: "Bestätigen",
+      decline: "Ablehnen",
+      draftAi: "KI-Antwort entwurfen",
+      publishMenu: "Veröffentlichen",
+      restoreVersion: "Version wiederherstellen",
+      translateEn: "Auf Englisch übersetzen"
+    },
+    footer: {
+      rights: "Alle Rechte vorbehalten.",
+      address: "Bäckerstraße 18 • 38640 Goslar",
+      directBenefits: "Bestpreis-Garantie, flexible Stornierung & priorisierter Check-in"
+    }
+  },
+  en: {
+    nav: {
+      apartments: "Apartments & Suites",
+      trattoria: "Trattoria da Enzo",
+      story: "Our Story",
+      location: "Location & Arrival",
+      faq: "FAQ & Service",
+      book: "Book Directly (Best Price)",
+      admin: "Trattoria Admin",
+      impressum: "Imprint",
+      datenschutz: "Privacy Policy"
+    },
+    hero: {
+      tagline: "🇮🇹 Casa da Enzo since 1980 • Bäckerstraße 18, Goslar",
+      title: "Not like an Italian restaurant. Like being in Italy.",
+      subtitle: "Experience 7 lovingly restored boutique apartments in the heart of UNESCO World Heritage Goslar. Located right above our traditional family trattoria.",
+      directBookingBenefit: "15% cheaper when booking directly",
+      ctaBooking: "Check Availability Now",
+      ctaApartments: "Explore Suites ↓"
+    },
+    trattoria: {
+      title: "Trattoria da Enzo",
+      subtitle: "Authentic Italian cuisine following family recipes since 1980",
+      openingHours: "Opening Hours",
+      lunch: "Lunch",
+      dinner: "Dinner Menu",
+      reserveTable: "Reserve a Table",
+      vacationNotice: "Holiday Notice",
+      closedDay: "Monday (Closed)",
+      tuesdayToSunday: "Tuesday – Sunday"
+    },
+    nuki: {
+      title: "24/7 Keyless Check-in with Nuki",
+      subtitle: "Flexible arrival without key handover",
+      step1: "1. Receive your personal 6-digit PIN code via email/WhatsApp before arrival.",
+      step2: "2. Enter the PIN on the Nuki Keypad at the main entrance (Bäckerstraße 18).",
+      step3: "3. Your apartment door unlocks smoothly using the code or the Nuki App.",
+      checkout: "Check-out by 11:00 AM: Simply close the door – the smart lock secures automatically."
+    },
+    parking: {
+      title: "Parking Tips in Goslar Old Town",
+      subtitle: "Convenient parking near Bäckerstraße 18",
+      p1: "Kaiserpfalz Parking Lot (approx. 5 min walk, daily rate ticket)",
+      p2: "Bolsparkhaus / Kaiserpassage Garage (covered, open 24/7)",
+      p3: "Short loading & unloading directly in front of Bäckerstraße 18 is permitted."
+    },
+    admin: {
+      title: "Trattoria Management WebApp",
+      reservations: "Table Reservations",
+      openingHoursManager: "Opening Hours & Shifts",
+      menuManager: "Menu & Dishes",
+      vouchers: "Voucher Management",
+      historyLog: "Activity & Revision Log",
+      confirm: "Confirm",
+      decline: "Decline",
+      draftAi: "Draft AI Response",
+      publishMenu: "Publish Menu",
+      restoreVersion: "Restore Version",
+      translateEn: "Translate to English"
+    },
+    footer: {
+      rights: "All rights reserved.",
+      address: "Bäckerstraße 18 • 38640 Goslar",
+      directBenefits: "Best price guarantee, flexible cancellation & priority check-in"
+    }
+  }
+} as const;
+
+export function t(keyPath: string, lang: Language = 'de'): string {
+  const keys = keyPath.split('.');
+  let obj: any = translations[lang] || translations.de;
+  for (const k of keys) {
+    if (obj && k in obj) {
+      obj = obj[k];
+    } else {
+      return keyPath;
+    }
+  }
+  return typeof obj === 'string' ? obj : keyPath;
+}

src/layouts/Layout.astro

@@ -1,21 +1,26 @@
 ---
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
-import WhatsAppButton from '../components/WhatsAppButton.astro';
+import EnzinoChat from '../components/EnzinoChat.astro';
 import '../styles/global.css';
 
 interface Props {
   title?: string;
   description?: string;
   image?: string;
+  lang?: 'de' | 'en';
 }
 
 const {
   title = "Casa da Enzo | Boutique Apartments & Trattoria in Goslar Altstadt",
   description = "7 stilvolle Ferienwohnungen über unserer traditionsreichen italienischen Trattoria im UNESCO-Weltkulturerbe Goslar. Kontaktloser Check-in, Bestpreis-Garantie bei Direktbuchung.",
-  image = "https://casa-daenzo.de/og-image.jpg"
+  image = "https://casa-daenzo.de/og-image.jpg",
+  lang = "de"
 } = Astro.props;
 
+// GA4 Measurement ID (Replace with actual ID when available)
+const GA_MEASUREMENT_ID = "G-CASADAENZO1";
+
 // Native Schema.org JSON-LD for VacationRental and Restaurant
 const schemaJsonLd = {
   "@context": "https://schema.org",
@@ -48,7 +53,7 @@ const schemaJsonLd = {
       "@id": "https://casa-daenzo.de/#restaurant",
       "name": "Trattoria da Enzo",
       "url": "https://casa-daenzo.de/#trattoria",
-      "telephone": "+4915207483196",
+      "telephone": "+49532123456",
       "servesCuisine": "Italian",
       "address": {
         "@type": "PostalAddress",
@@ -63,7 +68,7 @@ const schemaJsonLd = {
 ---
 
 <!DOCTYPE html>
-<html lang="de" class="scroll-smooth">
+<html lang={lang} class="scroll-smooth bg-[#1A1816] text-[#E6D5C3]">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -90,13 +95,25 @@ const schemaJsonLd = {
 
     <!-- Schema.org JSON-LD -->
     <script type="application/ld+json" set:html={JSON.stringify(schemaJsonLd)} />
+
+    <!-- Google Analytics (GA4) Snippet -->
+    <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}></script>
+    <script define:vars={{ GA_MEASUREMENT_ID }}>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', GA_MEASUREMENT_ID, {
+        anonymize_ip: true,
+        cookie_flags: 'SameSite=None;Secure'
+      });
+    </script>
   </head>
-  <body class="bg-[#FAF6F0] text-stone-900 antialiased min-h-screen flex flex-col">
+  <body class="bg-[#1A1816] text-[#E6D5C3] antialiased min-h-screen flex flex-col selection:bg-[#D4A373] selection:text-[#1A1816]">
-    <Header />
+    <Header lang={lang} />
     <main class="flex-1">
       <slot />
     </main>
-    <Footer />
+    <Footer lang={lang} />
-    <WhatsAppButton />
+    <EnzinoChat lang={lang} />
   </body>
 </html>

src/pages/apartments/[slug].astro

@@ -17,80 +17,127 @@ const { title, subtitle, category, guests, sizeSqm, balcony, workspace, kitchen,
 ---
 
 <Layout title={`${title} | Casa da Enzo Goslar`} description={subtitle}>
-  <div class="py-12 bg-[#FAF6F0]">
+  <div class="py-12 bg-[#1A1816]">
     <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
       
-      <!-- Back Link -->
+      <!-- Back Link & Top Badges Bar -->
-      <a href="/#apartments" class="inline-flex items-center gap-2 text-sm font-semibold text-[#C85A32] hover:underline">
+      <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-        ← Zurück zur Apartment-Übersicht
+        <a href="/#apartments" class="inline-flex items-center gap-2 text-xs font-bold text-emerald-400 hover:underline">
+          ← Zurück zu allen Apartments
         </a>
 
+        <!-- Airbnb & Booking Badges + Eviivo Guest Directory -->
+        <div class="flex flex-wrap items-center gap-3 text-xs font-medium">
+          <span class="px-3 py-1 rounded-full bg-[#24211D] border border-[#D4A373]/20 text-[#E6D5C3]">
+            ★ <strong class="text-[#D4A373]">4.98</strong> Superhost
+          </span>
+          <span class="px-3 py-1 rounded-full bg-[#24211D] border border-[#D4A373]/20 text-[#E6D5C3]">
+            Booking.com <strong class="text-blue-400">9.8</strong>
+          </span>
+          <button
+            onclick="document.getElementById('eviivo-link-btn')?.click()"
+            class="px-3 py-1 rounded-full bg-[#2D5A43]/30 border border-emerald-500/40 text-emerald-400 hover:bg-[#2D5A43]/50 transition-colors flex items-center gap-1 font-semibold"
+          >
+            <span>📖 Eviivo Gästemappe</span>
+          </button>
+        </div>
+      </div>
+
       <!-- Title & Header -->
-      <div class="space-y-4">
+      <div class="space-y-3">
-        <span class="px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider bg-[#C85A32] text-white">
+        <span class={`inline-block px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider ${
+          category === 'Premium-Komfort' ? 'bg-[#2D5A43] text-emerald-100 border border-emerald-500/40' : 'bg-[#24211D] text-[#D4A373] border border-[#D4A373]/30'
+        }`}>
           {category}
         </span>
-        <h1 class="font-serif text-4xl sm:text-5xl font-bold text-stone-900">{title}</h1>
+        <h1 class="font-serif text-4xl sm:text-5xl font-bold text-[#E6D5C3]">{title}</h1>
-        <p class="text-stone-600 text-lg leading-relaxed">{subtitle}</p>
+        <p class="text-[#A3978B] text-base sm:text-lg leading-relaxed">{subtitle}</p>
       </div>
 
       <!-- Quick Specs Bar -->
-      <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-6 rounded-2xl bg-white border border-stone-200 shadow-sm text-center">
+      <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-6 rounded-3xl stone-card border border-[#D4A373]/20 text-center">
         <div>
-          <span class="block text-xs uppercase tracking-wider text-stone-500 font-semibold">Kapazität</span>
+          <span class="block text-[10px] uppercase tracking-wider text-[#D4A373] font-bold">Kapazität</span>
-          <span class="font-serif text-xl font-bold text-stone-900 mt-1 block">👥 {guests} Gäste</span>
+          <span class="font-serif text-lg font-bold text-[#E6D5C3] mt-1 block">👥 Bis {guests} Gäste</span>
         </div>
         <div>
-          <span class="block text-xs uppercase tracking-wider text-stone-500 font-semibold">Größe</span>
+          <span class="block text-[10px] uppercase tracking-wider text-[#D4A373] font-bold">Größe</span>
-          <span class="font-serif text-xl font-bold text-stone-900 mt-1 block">📐 {sizeSqm} m²</span>
+          <span class="font-serif text-lg font-bold text-[#E6D5C3] mt-1 block">📐 {sizeSqm} m²</span>
         </div>
         <div>
-          <span class="block text-xs uppercase tracking-wider text-stone-500 font-semibold">Balkon / Terrasse</span>
+          <span class="block text-[10px] uppercase tracking-wider text-[#D4A373] font-bold">Aussicht</span>
-          <span class="font-serif text-xl font-bold text-stone-900 mt-1 block">{balcony ? '🌿 Ja' : 'Nein'}</span>
+          <span class="font-serif text-lg font-bold text-[#E6D5C3] mt-1 block">{balcony ? '🌿 Balkon / Terrasse' : 'Altstadtblick'}</span>
         </div>
         <div>
-          <span class="block text-xs uppercase tracking-wider text-stone-500 font-semibold">Workspace</span>
+          <span class="block text-[10px] uppercase tracking-wider text-[#D4A373] font-bold">Workspace</span>
-          <span class="font-serif text-xl font-bold text-stone-900 mt-1 block">{workspace ? '💻 Inklusive' : 'WLAN'}</span>
+          <span class="font-serif text-lg font-bold text-[#E6D5C3] mt-1 block">{workspace ? '💻 Workstation' : '⚡ Wi-Fi 6'}</span>
         </div>
       </div>
 
-      <!-- Image Banner Placeholder -->
+      <!-- Visual Gallery Placeholder Banner -->
-      <div class="aspect-[21/9] rounded-3xl bg-stone-300 flex items-center justify-center text-stone-500 font-serif text-lg font-medium shadow-inner">
+      <div class="aspect-[21/9] rounded-3xl bg-gradient-to-br from-[#2E2A25] to-[#1A1816] text-[#E6D5C3] flex flex-col items-center justify-center p-6 text-center border border-[#D4A373]/20 relative overflow-hidden shadow-2xl">
-        {title} — High-Res Fotografie
+        <div class="relative z-10 space-y-2">
+          <span class="px-3.5 py-1 rounded-full bg-[#2D5A43]/30 text-emerald-400 text-xs font-bold uppercase tracking-widest border border-emerald-500/30">
+            Saniert 2025 • UNESCO Altstadt Goslar
+          </span>
+          <h2 class="font-serif text-2xl sm:text-3xl font-bold">{title}</h2>
+          <p class="text-[#A3978B] text-xs sm:text-sm max-w-md mx-auto">
+            Restauriertes Fachwerk aus dem 16. Jahrhundert kombiniert mit italienischem Design & smartem Nuki Keyless Check-in.
+          </p>
+        </div>
       </div>
 
       <!-- Highlights & Details -->
       <div class="grid grid-cols-1 md:grid-cols-3 gap-8 pt-4">
-        <div class="md:col-span-2 space-y-6 bg-white p-8 rounded-3xl border border-stone-200 shadow-sm">
+        <div class="md:col-span-2 space-y-6 stone-card p-8 rounded-3xl border border-[#D4A373]/20">
-          <h2 class="font-serif text-2xl font-bold text-stone-900">Beschreibung & Ausstattung</h2>
+          <h2 class="font-serif text-2xl font-bold text-[#E6D5C3]">Beschreibung & Ausstattung</h2>
-          <div class="prose prose-stone max-w-none text-stone-700 leading-relaxed">
+          <div class="prose prose-invert max-w-none text-[#E6D5C3] text-sm leading-relaxed">
             <Content />
           </div>
 
-          <div class="pt-6 border-t border-stone-200">
+          <div class="pt-6 border-t border-[#D4A373]/15">
-            <h3 class="font-serif text-lg font-bold text-stone-900 mb-3">Küche & Verpflegung</h3>
+            <h3 class="font-serif text-lg font-bold text-[#D4A373] mb-2">Küche & Verpflegung</h3>
-            <p class="text-stone-600 text-sm">{kitchen}</p>
+            <p class="text-[#A3978B] text-xs leading-relaxed">{kitchen}</p>
+          </div>
+
+          <div class="pt-4 border-t border-[#D4A373]/15 flex flex-wrap items-center justify-between gap-4 text-xs text-[#A3978B]">
+            <span>🔑 Nuki Smart Lock PIN Check-in ab 15:00 Uhr</span>
+            <span>🌿 Nachhaltige Lehmdämmung für gesunden Schlaf</span>
           </div>
         </div>
 
         <!-- Sidebar / Highlights -->
         <div class="space-y-6">
-          <div class="bg-stone-900 text-white p-6 rounded-3xl space-y-4 shadow-lg">
+          <div class="stone-card p-6 rounded-3xl space-y-4 border border-[#D4A373]/30 shadow-xl">
-            <h3 class="font-serif text-xl font-bold text-amber-400">Ausstattungs-Highlights</h3>
+            <h3 class="font-serif text-xl font-bold text-[#D4A373]">Ausstattungs-Highlights</h3>
-            <ul class="space-y-3 text-sm text-stone-300">
+            <ul class="space-y-3 text-xs text-[#E6D5C3]">
               {highlights.map((h) => (
                 <li class="flex items-start gap-3">
-                  <span class="text-amber-400 font-bold">✓</span>
+                  <span class="text-emerald-400 font-bold">✓</span>
                   <span>{h}</span>
                 </li>
               ))}
             </ul>
           </div>
+
+          <!-- Trattoria Info Card -->
+          <div class="stone-card border border-[#C85A32]/40 p-6 rounded-3xl space-y-3">
+            <span class="text-xs font-bold uppercase tracking-wider text-[#C85A32]">Hauseigene Gastronomie</span>
+            <h4 class="font-serif text-lg font-bold text-[#E6D5C3]">Trattoria da Enzo im Erdgeschoss</h4>
+            <p class="text-xs text-[#A3978B] leading-relaxed">
+              Als Hotelgast genießt du eine bevorzugte Tischreservierung bei Alessandra. Genieße hausgemachte Pasta und sizilianische Weine direkt im Haus!
+            </p>
+            <a href="tel:+49532123456" class="inline-block text-xs font-bold text-[#C85A32] hover:underline">
+              📞 Tisch reservieren: +49 5321 23456 →
+            </a>
+          </div>
         </div>
       </div>
 
       <!-- Eviivo Booking Widget -->
+      <section id="booking" class="pt-6">
         <EviivoWidget />
+      </section>
 
     </div>
   </div>

src/pages/apartments/index.astro

@@ -0,0 +1,177 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import ApartmentCard from '../../components/ApartmentCard.astro';
+import EviivoWidget from '../../components/EviivoWidget.astro';
+import { getCollection } from 'astro:content';
+
+const apartments = await getCollection('apartments');
+const sortedApartments = apartments.sort((a, b) => a.data.featuredOrder - b.data.featuredOrder);
+---
+
+<Layout
+  title="Boutique Apartments & Suiten in Goslar | Casa da Enzo"
+  description="Alle 7 Ferienwohnungen & Suiten der Casa da Enzo in Goslar: Von der Luxus-Komfortsuite mit Balkon bis zum romantischen Altstadt-Studio. Jetzt direkt 15% günstiger buchen."
+>
+  <!-- Header / Hero Section -->
+  <section class="bg-stone-900 text-white py-16 sm:py-20 border-b border-stone-800">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="text-center max-w-3xl mx-auto space-y-4">
+        <span class="px-4 py-1.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-semibold uppercase tracking-wider border border-amber-500/30">
+          Übersicht aller Wohneinheiten
+        </span>
+        <h1 class="font-serif text-4xl sm:text-5xl font-bold tracking-tight text-stone-100">
+          Unsere 7 Boutique-Apartments in Goslar
+        </h1>
+        <p class="text-stone-300 text-base sm:text-lg leading-relaxed">
+          Historisches Fachwerk aus dem 16. Jahrhundert, nachhaltiger Wohnkomfort mit Lehmputz, modernste Küchen und smarte Nuki-Keyless-Anreise.
+        </p>
+
+        <!-- Ratings & Guest Directory Badges -->
+        <div class="pt-6 flex flex-wrap items-center justify-center gap-4 text-xs font-medium text-stone-200">
+          <!-- Airbnb Superhost -->
+          <div class="flex items-center gap-2 px-4 py-2 rounded-xl bg-stone-800/80 border border-stone-700 shadow-sm">
+            <span class="text-rose-400 text-base">★</span>
+            <span class="font-bold">4.98</span>
+            <span class="text-stone-400">|</span>
+            <span class="text-amber-300 font-semibold">Airbnb Superhost</span>
+          </div>
+
+          <!-- Booking.com Top Rating -->
+          <div class="flex items-center gap-2 px-4 py-2 rounded-xl bg-stone-800/80 border border-stone-700 shadow-sm">
+            <span class="px-2 py-0.5 rounded bg-blue-600 text-white font-bold text-xs">9.4</span>
+            <span class="font-semibold text-stone-200">Booking.com Hervorragend</span>
+          </div>
+
+          <!-- Eviivo Digital Guest Directory Link -->
+          <a
+            href="https://guest.eviivo.com/casa-daenzo"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-2 px-4 py-2 rounded-xl bg-emerald-900/60 border border-emerald-600/50 text-emerald-300 hover:bg-emerald-900/90 transition-all"
+          >
+            <span class="text-base">📱</span>
+            <span class="font-semibold">Eviivo Digital Guest Directory</span>
+            <span class="text-xs text-emerald-400">↗</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Filter & Catalog Grid -->
+  <section class="py-16 bg-[#FAF6F0]">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      
+      <!-- Category Filter Tabs -->
+      <div class="flex flex-wrap items-center justify-center gap-2 sm:gap-3 mb-12">
+        <button
+          class="filter-btn active px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm bg-[#C85A32] text-white"
+          data-category="all"
+        >
+          Alle Apartments (7)
+        </button>
+        <button
+          class="filter-btn px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm bg-white text-stone-700 hover:bg-stone-100 border border-stone-200"
+          data-category="suite"
+        >
+          Komfort-Suiten (4)
+        </button>
+        <button
+          class="filter-btn px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm bg-white text-stone-700 hover:bg-stone-100 border border-stone-200"
+          data-category="romantik"
+        >
+          Romantik-Apartments (2)
+        </button>
+        <button
+          class="filter-btn px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm bg-white text-stone-700 hover:bg-stone-100 border border-stone-200"
+          data-category="studio"
+        >
+          Boutique Studio (1)
+        </button>
+      </div>
+
+      <!-- Apartments Grid -->
+      <div id="apartments-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {sortedApartments.map((apt) => (
+          <div class="apartment-item" data-type={apt.data.type}>
+            <ApartmentCard
+              title={apt.data.title}
+              subtitle={apt.data.subtitle}
+              category={apt.data.category}
+              guests={apt.data.guests}
+              sizeSqm={apt.data.sizeSqm}
+              balcony={apt.data.balcony}
+              workspace={apt.data.workspace}
+              kitchen={apt.data.kitchen}
+              highlights={apt.data.highlights}
+              image={apt.data.image}
+              slug={apt.slug}
+            />
+          </div>
+        ))}
+      </div>
+
+      <!-- Guest Directory Callout Banner -->
+      <div class="mt-16 p-8 rounded-3xl bg-amber-50 border border-amber-200/80 shadow-sm flex flex-col md:flex-row items-center justify-between gap-6">
+        <div class="space-y-2 text-center md:text-left">
+          <span class="px-3 py-1 rounded-full bg-amber-200 text-[#C85A32] text-xs font-bold uppercase tracking-wider">
+            Eviivo Gästemappe
+          </span>
+          <h3 class="font-serif text-2xl font-bold text-stone-900">
+            Digitaler Gästeführer & Hausordnung
+          </h3>
+          <p class="text-stone-600 text-sm max-w-2xl">
+            Über den Eviivo Guest Directory Link findest du jederzeit alle Details zu deinem Aufenthalt, WLAN-Zugangsdaten, Empfehlungen für Restaurants und Harzer Ausflugsziele.
+          </p>
+        </div>
+        <a
+          href="https://guest.eviivo.com/casa-daenzo"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="shrink-0 px-6 py-3.5 rounded-2xl bg-[#C85A32] text-white font-bold text-sm hover:bg-[#b04d2a] shadow-md transition-all flex items-center gap-2"
+        >
+          <span>📱 Gästemappe öffnen</span>
+          <span>↗</span>
+        </a>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- Eviivo Direct Booking Widget Integration -->
+  <section id="booking" class="py-12 bg-stone-100 border-t border-stone-200 px-4">
+    <EviivoWidget />
+  </section>
+</Layout>
+
+<script>
+  // Client-side Category Filter Logic
+  document.addEventListener('DOMContentLoaded', () => {
+    const filterBtns = document.querySelectorAll<HTMLButtonElement>('.filter-btn');
+    const items = document.querySelectorAll<HTMLElement>('.apartment-item');
+
+    filterBtns.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const category = btn.getAttribute('data-category');
+
+        // Update button styles
+        filterBtns.forEach((b) => {
+          b.classList.remove('bg-[#C85A32]', 'text-white', 'active');
+          b.classList.add('bg-white', 'text-stone-700', 'border', 'border-stone-200');
+        });
+        btn.classList.remove('bg-white', 'text-stone-700', 'border', 'border-stone-200');
+        btn.classList.add('bg-[#C85A32]', 'text-white', 'active');
+
+        // Show/Hide items
+        items.forEach((item) => {
+          const itemType = item.getAttribute('data-type');
+          if (category === 'all' || itemType === category) {
+            item.style.display = 'block';
+          } else {
+            item.style.display = 'none';
+          }
+        });
+      });
+    });
+  });
+</script>

src/pages/blog/[slug].astro

@@ -0,0 +1,89 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog');
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+const { Content } = await post.render();
+const { title, subtitle, pubDate, author, category, readTime } = post.data;
+---
+
+<Layout
+  title={`${title} | Casa da Enzo Magazin`}
+  description={subtitle}
+>
+  <div class="bg-stone-950 text-stone-100 min-h-screen py-16">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-10">
+      
+      <!-- Back Link -->
+      <a href="/blog" class="inline-flex items-center gap-2 text-sm font-semibold text-amber-400 hover:underline">
+        ← Zurück zur Blog-Übersicht
+      </a>
+
+      <!-- Article Header -->
+      <header class="space-y-4 border-b border-stone-800 pb-8">
+        <div class="flex items-center gap-3 text-xs font-semibold uppercase tracking-wider text-amber-400">
+          <span class="px-3 py-1 rounded-full bg-stone-900 border border-stone-700">{category}</span>
+          <span>•</span>
+          <span>{readTime} Lesezeit</span>
+          <span>•</span>
+          <span class="text-stone-400">{pubDate}</span>
+        </div>
+
+        <h1 class="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight">
+          {title}
+        </h1>
+
+        <p class="text-stone-300 text-lg sm:text-xl font-light leading-relaxed">
+          {subtitle}
+        </p>
+
+        <div class="pt-2 text-xs text-stone-400 font-medium">
+          Verfasst von <strong class="text-stone-200">{author}</strong>
+        </div>
+      </header>
+
+      <!-- Article Main Content -->
+      <div class="bg-stone-900/90 p-8 sm:p-12 rounded-3xl border border-stone-800 shadow-2xl">
+        <article class="prose prose-invert prose-stone max-w-none text-stone-300 text-base leading-relaxed prose-headings:font-serif prose-headings:text-amber-400 prose-a:text-amber-300 prose-strong:text-white">
+          <Content />
+        </article>
+      </div>
+
+      <!-- Lead Generation CTAs Bar -->
+      <div class="p-8 sm:p-10 rounded-3xl bg-gradient-to-br from-stone-900 via-stone-950 to-stone-900 border border-amber-500/40 space-y-6 text-center shadow-2xl">
+        <span class="text-xs font-bold uppercase tracking-widest text-amber-400">
+          Casa da Enzo Goslar
+        </span>
+        <h3 class="font-serif text-2xl sm:text-3xl font-bold text-white">
+          Lust bekommen auf Urlaub & Kulinarik im Harz?
+        </h3>
+        <p class="text-stone-300 text-sm max-w-xl mx-auto">
+          Buche direkt über unsere Website und erhalte 15% Rabatt sowie deinen reservierten Lieblingsplatz in Alessandras Trattoria.
+        </p>
+        <div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2">
+          <a
+            href="/apartments#booking"
+            class="w-full sm:w-auto px-8 py-3.5 rounded-xl bg-[#C85A32] text-white font-bold text-sm hover:bg-[#b04d2a] transition-all shadow-lg text-center"
+          >
+            Suiten ansehen & direkt buchen (-15%)
+          </a>
+          <a
+            href="/trattoria#reservierung"
+            class="w-full sm:w-auto px-8 py-3.5 rounded-xl bg-amber-500 text-stone-950 font-bold text-sm hover:bg-amber-400 transition-all shadow-lg text-center"
+          >
+            Tisch in der Trattoria reservieren
+          </a>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</Layout>

src/pages/blog/index.astro

@@ -0,0 +1,126 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import { getCollection } from 'astro:content';
+
+const posts = await getCollection('blog');
+const sortedPosts = posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime());
+const featuredPost = sortedPosts.find((p) => p.data.featured) || sortedPosts[0];
+const regularPosts = sortedPosts.filter((p) => p.slug !== featuredPost.slug);
+---
+
+<Layout
+  title="Blog & Magazin | Casa da Enzo & Trattoria Goslar"
+  description="Geschichten, kulinarische Geheimtipps und Reise-Guides rund um das UNESCO-Weltkulturerbe Goslar, die Trattoria da Enzo und unsere Boutique-Apartments."
+>
+  <!-- Dark Elegance Hero Header -->
+  <section class="bg-stone-950 text-white py-20 border-b border-stone-800 relative overflow-hidden">
+    <div class="absolute -top-24 -right-24 w-96 h-96 bg-[#C85A32]/10 rounded-full blur-3xl pointer-events-none"></div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+      <div class="text-center max-w-3xl mx-auto space-y-4">
+        <span class="px-4 py-1.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-semibold uppercase tracking-widest border border-amber-500/30">
+          Magazin & Harz-Guide
+        </span>
+        <h1 class="font-serif text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-stone-100">
+          Casa da Enzo Journal
+        </h1>
+        <p class="text-stone-300 text-base sm:text-lg leading-relaxed">
+          Entdecke Insidertipps für deinen Aufenthalt in Goslar, das Geheimnis echter sizilianischer Kulinarik und die schönsten Geschichten aus unserem Haus.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Featured Post Hero Card -->
+  {featuredPost && (
+    <section class="py-12 bg-stone-900 border-b border-stone-800">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="p-8 sm:p-12 rounded-3xl bg-gradient-to-br from-stone-900 via-stone-950 to-stone-900 border border-stone-800 shadow-2xl grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
+          <div class="lg:col-span-7 space-y-4">
+            <div class="flex items-center gap-3 text-xs text-amber-400 font-semibold uppercase tracking-wider">
+              <span class="px-3 py-1 rounded-full bg-amber-500/20 border border-amber-500/30">{featuredPost.data.category}</span>
+              <span>•</span>
+              <span>{featuredPost.data.readTime} Lesezeit</span>
+            </div>
+            <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white hover:text-amber-400 transition-colors">
+              <a href={`/blog/${featuredPost.slug}`}>{featuredPost.data.title}</a>
+            </h2>
+            <p class="text-stone-300 text-sm sm:text-base leading-relaxed">
+              {featuredPost.data.excerpt}
+            </p>
+            <div class="pt-4 flex items-center justify-between">
+              <span class="text-xs text-stone-400 font-medium">Von {featuredPost.data.author} am {featuredPost.data.pubDate}</span>
+              <a href={`/blog/${featuredPost.slug}`} class="px-6 py-2.5 rounded-xl bg-[#C85A32] text-white font-bold text-xs hover:bg-[#b04d2a] transition-all">
+                Artikel lesen →
+              </a>
+            </div>
+          </div>
+          <div class="lg:col-span-5 aspect-[16/10] rounded-2xl bg-stone-800/80 border border-stone-700 p-8 flex flex-col justify-between text-stone-400 font-serif">
+            <span class="text-xs uppercase tracking-widest text-amber-400">Tipp des Monats</span>
+            <span class="text-xl font-bold text-stone-200">"{featuredPost.data.subtitle}"</span>
+            <span class="text-xs text-stone-500">Casa da Enzo Magazin</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  )}
+
+  <!-- Main Articles Grid -->
+  <section class="py-16 bg-stone-950 text-white min-h-screen">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
+      <div class="flex items-center justify-between border-b border-stone-800 pb-4">
+        <h2 class="font-serif text-2xl font-bold text-stone-100">Alle Beiträge</h2>
+        <span class="text-xs text-stone-400 font-medium">{sortedPosts.length} Artikel veröffentlicht</span>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {regularPosts.map((post) => (
+          <article class="bg-stone-900 border border-stone-800/80 rounded-2xl overflow-hidden shadow-lg hover:border-amber-500/50 transition-all duration-300 flex flex-col justify-between">
+            <div class="p-6 space-y-4">
+              <div class="flex items-center justify-between text-xs text-amber-400 font-medium">
+                <span class="px-2.5 py-0.5 rounded-full bg-stone-800 border border-stone-700">{post.data.category}</span>
+                <span class="text-stone-400">{post.data.readTime}</span>
+              </div>
+
+              <h3 class="font-serif text-xl font-bold text-white hover:text-amber-400 transition-colors leading-snug">
+                <a href={`/blog/${post.slug}`}>{post.data.title}</a>
+              </h3>
+
+              <p class="text-stone-300 text-xs leading-relaxed line-clamp-3">
+                {post.data.excerpt}
+              </p>
+            </div>
+
+            <div class="p-6 pt-0 border-t border-stone-800/60 mt-4 flex items-center justify-between text-xs text-stone-400">
+              <span>{post.data.author}</span>
+              <a href={`/blog/${post.slug}`} class="font-bold text-amber-400 hover:underline">
+                Weiterlesen →
+              </a>
+            </div>
+          </article>
+        ))}
+      </div>
+
+      <!-- Lead Gen CTA Box -->
+      <div class="mt-20 p-8 sm:p-12 rounded-3xl bg-gradient-to-r from-stone-900 via-stone-800 to-stone-900 border border-amber-500/30 text-center space-y-6 shadow-2xl">
+        <span class="px-4 py-1.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-semibold uppercase tracking-widest border border-amber-500/30">
+          Erlebe es selbst in Goslar
+        </span>
+        <h3 class="font-serif text-3xl font-bold text-white max-w-2xl mx-auto">
+          Bereit für Urlaub & Kulinarik in der Bäckerstraße 18?
+        </h3>
+        <p class="text-stone-300 text-sm max-w-xl mx-auto">
+          Sichere dir jetzt deine Boutique-Suite mit 15% Direktbucher-Vorteil oder reserviere deinen Tisch bei Alessandra.
+        </p>
+        <div class="flex flex-wrap items-center justify-center gap-4 pt-2">
+          <a href="/apartments#booking" class="px-8 py-3.5 rounded-xl bg-[#C85A32] text-white font-bold text-sm hover:bg-[#b04d2a] transition-all shadow-lg">
+            Apartment direkt buchen (-15%)
+          </a>
+          <a href="/trattoria#reservierung" class="px-8 py-3.5 rounded-xl bg-amber-500 text-stone-950 font-bold text-sm hover:bg-amber-400 transition-all shadow-lg">
+            Tisch in der Trattoria reservieren
+          </a>
+        </div>
+      </div>
+
+    </div>
+  </section>
+</Layout>

src/pages/datenschutz.astro

@@ -0,0 +1,102 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout
+  title="Datenschutzerklärung | Casa da Enzo & Trattoria da Enzo Goslar"
+  description="Datenschutzerklärung gemäß DSGVO für Casa da Enzo & Trattoria da Enzo. Information über Datenerhebung, Nuki Smart Locks, Analyse und Betroffenenrechte."
+>
+  <section class="bg-stone-900 text-white pt-16 pb-16">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-3">
+      <span class="text-xs uppercase font-bold text-amber-400 tracking-widest">DSGVO-Konformität</span>
+      <h1 class="font-serif text-4xl sm:text-5xl font-bold">Datenschutzerklärung</h1>
+      <p class="text-stone-400 text-sm">Stand: September 2026 • Gemäß Datenschutz-Grundverordnung (EU-DSGVO)</p>
+    </div>
+  </section>
+
+  <section class="py-16 bg-[#FAF6F0]">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="bg-white p-8 sm:p-12 rounded-3xl border border-stone-200 shadow-sm space-y-10 text-stone-800 text-sm leading-relaxed">
+
+        <!-- 1. Übersicht -->
+        <div class="space-y-3 border-b border-stone-100 pb-8">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">1. Datenschutz auf einen Blick</h2>
+          <h3 class="font-bold text-stone-900">Allgemeine Hinweise</h3>
+          <p>
+            Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie unsere Website besuchen oder ein Apartment/einen Tisch bei uns buchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
+          </p>
+        </div>
+
+        <!-- 2. Verantwortliche Stelle -->
+        <div class="space-y-3 border-b border-stone-100 pb-8">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">2. Verantwortliche Stelle</h2>
+          <p>
+            Verantwortlich für die Datenverarbeitung auf dieser Website ist:
+          </p>
+          <div class="p-4 bg-stone-50 rounded-2xl border border-stone-200 space-y-1 font-sans">
+            <p class="font-bold text-stone-900">Casa da Enzo & Trattoria da Enzo</p>
+            <p>Bäckerstraße 18</p>
+            <p>38640 Goslar, Deutschland</p>
+            <p>Telefon: +49 (0) 1520 7483196</p>
+            <p>E-Mail: <a href="mailto:booking@casa-daenzo.de" class="text-[#C85A32] underline">booking@casa-daenzo.de</a></p>
+          </div>
+        </div>
+
+        <!-- 3. Datenerfassung auf der Website -->
+        <div class="space-y-4 border-b border-stone-100 pb-8">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">3. Datenerfassung & Buchungsverarbeitung</h2>
+          
+          <h3 class="font-bold text-stone-900">Server-Log-Dateien</h3>
+          <p>
+            Der Provider der Seiten erhebt und speichert automatisch Informationen in so genannten Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt (IP-Adresse, Dateiaufruf, Referrer URL, Zeitstempel, Browsertyp). Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO.
+          </p>
+
+          <h3 class="font-bold text-stone-900">Direktbuchungen & Tischreservierungen</h3>
+          <p>
+            Wenn Sie über unsere Website ein Apartment buchen oder einen Tisch in der Trattoria reservieren, verarbeiten wir Ihre Anrede, Name, E-Mail-Adresse, Telefonnummer, Zahlungsdaten sowie optionale Wünsche. Dies dient der Vertragserfüllung und Durchführung vorvertraglicher Maßnahmen (Art. 6 Abs. 1 lit. b DSGVO).
+          </p>
+
+          <h3 class="font-bold text-stone-900">Nuki Keyless Access System (Zutrittskontrolle)</h3>
+          <p>
+            Zur Bereitstellung des schlüssellosen 24/7-Zugangs verarbeiten wir Ihre Mobilnummer/E-Mail-Adresse, um einen temporären Nuki PIN-Code zu generieren. Die Protokollierung von Türöffnungen erfolgt ausschließlich anonymisiert aus Sicherheitsgründen zur Vermeidung unbefugten Zutritts (Art. 6 Abs. 1 lit. f DSGVO).
+          </p>
+        </div>
+
+        <!-- 4. Web-Analyse & Google Analytics -->
+        <div class="space-y-3 border-b border-stone-100 pb-8">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">4. Web-Analyse (Google Analytics)</h2>
+          <p>
+            Diese Website nutzt Funktionen des Webanalysedienstes Google Analytics (Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland).
+          </p>
+          <p>
+            Wir nutzen Google Analytics ausschließlich mit aktivierter <strong>IP-Anonymisierung</strong>. Dadurch wird Ihre IP-Adresse von Google innerhalb von Mitgliedstaaten der Europäischen Union vor der Übermittlung gekürzt. Rechtsgrundlage ist Ihre Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO. Sie können Ihre Einwilligung jederzeit für die Zukunft widerrufen.
+          </p>
+        </div>
+
+        <!-- 5. Ihre Rechte -->
+        <div class="space-y-4 border-b border-stone-100 pb-8">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">5. Rechte der betroffenen Personen</h2>
+          <p>Sie haben im Rahmen der geltenden gesetzlichen Bestimmungen jederzeit folgende Rechte:</p>
+          <ul class="list-disc pl-6 space-y-2">
+            <li><strong>Recht auf Auskunft</strong> über Ihre bei uns gespeicherten personenbezogenen Daten (Art. 15 DSGVO).</li>
+            <li><strong>Recht auf Berichtigung</strong> unrichtiger oder unvollständiger Daten (Art. 16 DSGVO).</li>
+            <li><strong>Recht auf Löschung</strong> ("Recht auf Vergessenwerden") gemäß Art. 17 DSGVO.</li>
+            <li><strong>Recht auf Einschränkung der Verarbeitung</strong> (Art. 18 DSGVO).</li>
+            <li><strong>Recht auf Datenübertragbarkeit</strong> (Art. 20 DSGVO).</li>
+            <li><strong>Widerrufsrecht:</strong> Sie können erteilte Einwilligungen jederzeit mit Wirkung für die Zukunft widerrufen.</li>
+            <li><strong>Beschwerderecht bei der Aufsichtsbehörde:</strong> Die zuständige Aufsichtsbehörde ist die Die Landesbeauftragte für den Datenschutz Niedersachsen (Prinzenstraße 5, 30159 Hannover).</li>
+          </ul>
+        </div>
+
+        <!-- 6. Datensicherheit -->
+        <div class="space-y-3 pt-2">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">6. SSL- bzw. TLS-Verschlüsselung</h2>
+          <p>
+            Diese Seite nutzt aus Sicherheitsgründen und zum Schutz der Übertragung vertraulicher Inhalte, wie zum Beispiel Bestellungen oder Anfragen, eine SSL- bzw. TLS-Verschlüsselung. Eine verschlüsselte Verbindung erkennen Sie daran, dass die Adresszeile des Browsers von „http://“ auf „https://“ wechselt und an dem Schloss-Symbol in Ihrer Browserzeile.
+          </p>
+        </div>
+
+      </div>
+    </div>
+  </section>
+</Layout>

src/pages/faq.astro

@@ -0,0 +1,239 @@
+---
+import Layout from '../layouts/Layout.astro';
+import { t } from '../data/i18n';
+
+const faqs = [
+  {
+    category: 'checkin',
+    question: 'Wie funktioniert der 24/7 Keyless Check-in mit Nuki?',
+    answer: 'Der Check-in erfolgt völlig schlüssellos und unabhängig ab 15:00 Uhr. Am Tag der Anreise erhalten Sie per E-Mail und WhatsApp Ihren persönlichen 6-stelligen Nuki-PIN-Code. Am Haupteingang in der Bäckerstraße 18 sowie an Ihrer Apartmenttür befindet sich ein Nuki Keypad: Geben Sie Ihren Code ein und drücken Sie die rote/grüne Taste – die Tür entriegelt automatisch. Ein Aus- oder Einschließen mit einem physischen Schlüssel entfällt.'
+  },
+  {
+    category: 'checkin',
+    question: 'Wann sind Check-in und Check-out Zeiten?',
+    answer: 'Check-in ist ab 15:00 Uhr rund um die Uhr möglich. Check-out ist bis spätestens 11:00 Uhr. Beim Verlassen ziehen Sie die Tür einfach zu – das Nuki Smart Lock verriegelt die Tür automatisch. Falls Sie Ihr Gepäck vor dem Check-in oder nach dem Check-out unterstellen möchten, sprechen Sie uns gerne an.'
+  },
+  {
+    category: 'parking',
+    question: 'Wo kann ich in Goslar am besten parken?',
+    answer: 'Da sich das Casa da Enzo mitten im geschützten UNESCO-Altstadtkern befindet, ist die Bäckerstraße eine verkehrsberuhigte Zone. Zum Be- und Entladen Ihres Gepäcks können Sie direkt vor dem Haus halten. Im Anschluss empfehlen wir:\n1. Parkplatz Kaiserpfalz (Festplatz / Altstadt Süd, ca. 5 Gehminuten, günstiger Tagestarif)\n2. Parkhaus Bolsparkhaus / Kaiserpassage (überdacht, 24/7 geöffnet, ca. 4 Gehminuten)\n3. Öffentliche Parkplätze am Fleischscharren.'
+  },
+  {
+    category: 'trattoria',
+    question: 'Benötige ich als Hotelgast eine Tischreservierung in der Trattoria?',
+    answer: 'Aufgrund der hohen Beliebtheit der Trattoria da Enzo empfehlen wir unseren Apartment-Gästen dringend, Tische im Voraus zu reservieren. Als Hausgast genießen Sie bei der Tischvergabe priorisierte Berücksichtigung! Sie können Ihren Tisch direkt bei der Apartmentbuchung oder unkompliziert per WhatsApp anfragen.'
+  },
+  {
+    category: 'trattoria',
+    question: 'Gibt es vegetarische, vegane oder glutenfreie Speisen?',
+    answer: 'Ja! Unsere Küche bereitet Speisen frisch zu. Wir bieten zahlreiche vegetarische Pastagerichte sowie hausgemachte glutenfreie Alternativen und vegane Antipasti. Bitte informieren Sie unser Servicepersonal oder geben Sie Allergien bei der Reservierung an.'
+  },
+  {
+    category: 'amenities',
+    question: 'Wie ist die Internetverbindung in den Apartments?',
+    answer: 'Alle 7 Suiten verfügen über einen kostenfreien Highspeed-Glasfaser-WLAN-Zugang (bis zu 250 Mbit/s download). In den Workation-Suites (z.B. Suite 4 Workspace) stehen zusätzlich ergonomische Schreibtische und USB-C Dockingstationen zur Verfügung.'
+  },
+  {
+    category: 'amenities',
+    question: 'Sind Hunde oder Haustiere erlaubt?',
+    answer: 'In ausgewählten Wohneinheiten (z.B. Studio Altstadt und Suite 2 mit Terrasse) heißen wir gut erzogene Hunde nach vorheriger Anmeldung herzlich willkommen. Bitte kontaktieren Sie uns vor der Buchung.'
+  },
+  {
+    category: 'booking',
+    question: 'Warum ist die Direktbuchung auf dieser Website die beste Wahl?',
+    answer: 'Bei einer Buchung über externe Plattformen (wie Booking.com, Airbnb oder Expedia) fallen hohe Vermittlungsgebühren an. Buchen Sie direkt auf casa-daenzo.de, geben wir diesen Preisvorteil 1:1 an Sie weiter: Sie sparen mindestens 15% und profitieren von flexibleren Stornobedingungen.'
+  }
+];
+---
+
+<Layout
+  title="FAQ, Nuki Keyless Check-in & Parken | Casa da Enzo Goslar"
+  description="Alle wichtigen Informationen für Ihren Aufenthalt im Casa da Enzo: 24/7 Nuki Check-in Anleitung, Parktipps in Goslar, Trattoria Öffnungszeiten und Ausstattungsdetails."
+>
+  <!-- Hero Section -->
+  <section class="bg-stone-900 text-white pt-16 pb-20 relative overflow-hidden">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10 space-y-4">
+      <span class="inline-block px-3 py-1 rounded-full bg-amber-500/20 text-amber-400 text-xs font-semibold uppercase tracking-wider">
+        Service & Gast-Informationen
+      </span>
+      <h1 class="font-serif text-4xl sm:text-5xl font-bold tracking-tight">
+        Häufig gestellte Fragen (FAQ)
+      </h1>
+      <p class="text-stone-300 text-lg max-w-2xl mx-auto">
+        Hier finden Sie Antworten zu Anreise, Nuki Keyless PIN-Code, Parken in der Altstadt Goslar und Services unserer Trattoria.
+      </p>
+    </div>
+  </section>
+
+  <!-- Nuki Keyless Check-in Visual Feature Section -->
+  <section class="py-16 bg-amber-500/10 border-b border-amber-200/50">
+    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="text-center mb-12">
+        <span class="text-xs font-bold uppercase tracking-widest text-[#C85A32]">Smarter Check-in</span>
+        <h2 class="font-serif text-3xl font-bold text-stone-900 mt-1">24/7 Kontaktloser Nuki Keyless Access</h2>
+        <p class="text-stone-600 text-sm mt-2">Maximale Freiheit ohne Schlüsselübergabe oder Wartezeiten an der Rezeption</p>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <!-- Step 1 -->
+        <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm text-center space-y-4 relative">
+          <div class="w-12 h-12 rounded-2xl bg-[#C85A32] text-white flex items-center justify-center font-bold text-xl mx-auto shadow-md">
+            1
+          </div>
+          <h3 class="font-serif text-xl font-bold text-stone-900">PIN-Code erhalten</h3>
+          <p class="text-stone-600 text-sm leading-relaxed">
+            Vor Ihrer Ankunft senden wir Ihnen Ihren persönlichen 6-stelligen Nuki-Sicherheitscode per E-Mail & WhatsApp zu.
+          </p>
+        </div>
+
+        <!-- Step 2 -->
+        <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm text-center space-y-4 relative">
+          <div class="w-12 h-12 rounded-2xl bg-[#C85A32] text-white flex items-center justify-center font-bold text-xl mx-auto shadow-md">
+            2
+          </div>
+          <h3 class="font-serif text-xl font-bold text-stone-900">Keypad eingeben</h3>
+          <p class="text-stone-600 text-sm leading-relaxed">
+            Tippen Sie den Code am Nuki Keypad am Haupteingang (Bäckerstraße 18) ein. Das Schloss öfnet automatisch nach 1 Sekunde.
+          </p>
+        </div>
+
+        <!-- Step 3 -->
+        <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm text-center space-y-4 relative">
+          <div class="w-12 h-12 rounded-2xl bg-[#C85A32] text-white flex items-center justify-center font-bold text-xl mx-auto shadow-md">
+            3
+          </div>
+          <h3 class="font-serif text-xl font-bold text-stone-900">Eintreten & Genießen</h3>
+          <p class="text-stone-600 text-sm leading-relaxed">
+            Auch Ihre Apartmenttür lässt sich per PIN-Code öffnen. Beim Auschecken bis 11:00 Uhr zieht sich das Schloss selbstständig zu.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Parking Guide Section -->
+  <section class="py-16 bg-white border-b border-stone-200">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="bg-stone-900 text-white rounded-3xl p-8 sm:p-12 shadow-xl grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
+        <div class="lg:col-span-8 space-y-4">
+          <span class="text-xs uppercase font-bold text-amber-400 tracking-wider">Parken in Goslar</span>
+          <h2 class="font-serif text-3xl font-bold">Anreise & Parkmöglichkeiten</h2>
+          <p class="text-stone-300 text-sm leading-relaxed">
+            Die Bäckerstraße liegt im historischen Kern der Welterbestadt Goslar. Halten Sie zum bequemen Entladen des Gepäcks direkt vor dem Haus. Anschließend finden Sie in unmittelbarer Nachbarschaft komfortable Stellplätze.
+          </p>
+          <ul class="space-y-2 text-xs sm:text-sm text-stone-300 pt-2">
+            <li class="flex items-center gap-2">
+              <span class="text-amber-400 font-bold">✓</span> <strong>Parkplatz Kaiserpfalz:</strong> ca. 5 Min. Fußweg, günstiger Tagestarif
+            </li>
+            <li class="flex items-center gap-2">
+              <span class="text-amber-400 font-bold">✓</span> <strong>Bolsparkhaus (Kaiserpassage):</strong> ca. 4 Min. Fußweg, überdacht & 24/7 geöffnet
+            </li>
+            <li class="flex items-center gap-2">
+              <span class="text-amber-400 font-bold">✓</span> <strong>Kurzzeitparken Bäckerstraße:</strong> Kostenfrei zum Ausladen (15 Minuten)
+            </li>
+          </ul>
+        </div>
+        <div class="lg:col-span-4 text-center border-t lg:border-t-0 lg:border-l border-stone-800 pt-6 lg:pt-0 lg:pl-8">
+          <div class="inline-block p-4 rounded-2xl bg-stone-800 border border-stone-700">
+            <p class="text-xs text-stone-400 font-medium uppercase">Navigationsadresse</p>
+            <p class="text-lg font-serif font-bold text-amber-400 mt-1">Bäckerstraße 18</p>
+            <p class="text-xs text-stone-300">38640 Goslar</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Interactive FAQ List -->
+  <section class="py-20 bg-[#FAF6F0]">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
+      <div class="text-center space-y-3">
+        <h2 class="font-serif text-3xl font-bold text-stone-900">Alle Fragen auf einen Blick</h2>
+        <p class="text-stone-600 text-sm">Wählen Sie ein Thema oder nutzen Sie das Suchfeld</p>
+      </div>
+
+      <!-- Category Filter Pills -->
+      <div class="flex flex-wrap items-center justify-center gap-2" id="faq-filters">
+        <button data-filter="all" class="filter-btn active px-4 py-2 rounded-full text-xs font-semibold bg-[#C85A32] text-white shadow-sm transition-all">Alle</button>
+        <button data-filter="checkin" class="filter-btn px-4 py-2 rounded-full text-xs font-semibold bg-white border border-stone-300 text-stone-700 hover:bg-stone-100 transition-all">Check-in & Nuki</button>
+        <button data-filter="parking" class="filter-btn px-4 py-2 rounded-full text-xs font-semibold bg-white border border-stone-300 text-stone-700 hover:bg-stone-100 transition-all">Parken & Anreise</button>
+        <button data-filter="trattoria" class="filter-btn px-4 py-2 rounded-full text-xs font-semibold bg-white border border-stone-300 text-stone-700 hover:bg-stone-100 transition-all">Trattoria & Tische</button>
+        <button data-filter="amenities" class="filter-btn px-4 py-2 rounded-full text-xs font-semibold bg-white border border-stone-300 text-stone-700 hover:bg-stone-100 transition-all">Ausstattung & WLAN</button>
+        <button data-filter="booking" class="filter-btn px-4 py-2 rounded-full text-xs font-semibold bg-white border border-stone-300 text-stone-700 hover:bg-stone-100 transition-all">Direktbuchung</button>
+      </div>
+
+      <!-- FAQ Items Accordion -->
+      <div class="space-y-4" id="faq-accordion">
+        {faqs.map((faq, index) => (
+          <div class="faq-item rounded-2xl bg-white border border-stone-200 overflow-hidden shadow-sm transition-all" data-category={faq.category}>
+            <button class="faq-toggle w-full px-6 py-5 text-left flex items-center justify-between gap-4 font-serif text-lg font-bold text-stone-900 hover:text-[#C85A32] transition-colors">
+              <span>{faq.question}</span>
+              <span class="faq-icon text-[#C85A32] text-2xl font-sans transition-transform">+</span>
+            </button>
+            <div class="faq-content hidden px-6 pb-6 text-stone-600 text-sm leading-relaxed whitespace-pre-line border-t border-stone-100 pt-4">
+              {faq.answer}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <!-- Contact Support Box -->
+      <div class="mt-12 p-8 rounded-3xl bg-amber-500/10 border border-amber-300/50 text-center space-y-3">
+        <h3 class="font-serif text-xl font-bold text-stone-900">Noch Fragen offen?</h3>
+        <p class="text-stone-600 text-sm">Unser Concierge-Team steht Ihnen gerne direkt per E-Mail oder WhatsApp zur Verfügung.</p>
+        <div class="flex flex-wrap justify-center gap-4 pt-2">
+          <a href="mailto:booking@casa-daenzo.de" class="px-6 py-3 rounded-xl bg-stone-900 text-white font-medium text-sm hover:bg-stone-800 transition-all">
+            E-Mail schreiben
+          </a>
+          <a href="https://wa.me/4915207483196" target="_blank" class="px-6 py-3 rounded-xl bg-emerald-600 text-white font-medium text-sm hover:bg-emerald-700 transition-all flex items-center gap-2">
+            <span>💬 WhatsApp Concierge</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</Layout>
+
+<script>
+  // Filter logic
+  const filterBtns = document.querySelectorAll('#faq-filters button');
+  const faqItems = document.querySelectorAll('.faq-item');
+
+  filterBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const filter = btn.getAttribute('data-filter');
+      
+      filterBtns.forEach(b => {
+        b.classList.remove('bg-[#C85A32]', 'text-white');
+        b.classList.add('bg-white', 'text-stone-700');
+      });
+      btn.classList.remove('bg-white', 'text-stone-700');
+      btn.classList.add('bg-[#C85A32]', 'text-white');
+
+      faqItems.forEach(item => {
+        const cat = item.getAttribute('data-category');
+        if (filter === 'all' || cat === filter) {
+          (item as HTMLElement).style.display = 'block';
+        } else {
+          (item as HTMLElement).style.display = 'none';
+        }
+      });
+    });
+  });
+
+  // Accordion logic
+  document.querySelectorAll('.faq-toggle').forEach(toggle => {
+    toggle.addEventListener('click', () => {
+      const parent = toggle.closest('.faq-item');
+      if (!parent) return;
+      const content = parent.querySelector('.faq-content');
+      const icon = parent.querySelector('.faq-icon');
+      
+      if (content && icon) {
+        const isHidden = content.classList.contains('hidden');
+        content.classList.toggle('hidden');
+        icon.textContent = isHidden ? '−' : '+';
+      }
+    });
+  });
+</script>

src/pages/geschichte.astro

@@ -0,0 +1,150 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+const timelineEvents = [
+  {
+    year: '1980',
+    title: 'Von Sizilien in den Harz',
+    tagline: 'Die Ankunft in Goslar',
+    description: 'Vincenzo "Enzo" Campisi erfüllt sich seinen Lebenstraum. Er bringt echte sizilianische Gastfreundschaft, historische Familienrezepte und sonnengereifte Zutaten in die Bäckerstraße 18 in Goslar. Die Trattoria da Enzo eröffnet ihre Pforten.'
+  },
+  {
+    year: '1992',
+    title: 'Der legendäre Steinofen & Weinkeller',
+    tagline: 'Kulinarischer Ausbau',
+    description: 'Enzo erweitert das Restaurant um einen echten italienischen Holzofen und baut den historischen Gewölbekeller zum Weinlager für feine Tropfen aus Sizilien, Piemont und der Toskana aus.'
+  },
+  {
+    year: '2005',
+    title: 'Die 2. Generation übernimmt',
+    tagline: 'Familientradition mit frischen Ideen',
+    description: 'Alessandra, Sergio und Alja treten Schritt für Schritt in die Fußstapfen ihres Vaters. Unter Erhalt der ursprünglichen Rezepte wird das historische Fachwerkhaus behutsam modernisiert.'
+  },
+  {
+    year: '2018',
+    title: 'Geburt des "Casa da Enzo"',
+    tagline: 'Vom Restaurant zum Gesamterlebnis',
+    description: 'Die oberen Etagen des geschichtsträchtigen Fachwerkgebäudes werden komplett saniert. Es entstehen die ersten exklusiven Boutique-Apartments – damit Gäste nach einem köstlichen Abendessen direkt im Haus übernachten können.'
+  },
+  {
+    year: '2023',
+    title: 'Smarter Luxus & Digitalisierung',
+    tagline: '24/7 Nuki Check-in & Workation-Ausstattung',
+    description: 'Vollständige Integration kontaktloser Nuki-Smart-Locks, Highspeed-Glasfaser-WLAN und maßgeschneiderter Workation-Arbeitsplätze. Traditionelles Ambiente verschmilzt mit modernem Digitalkomfort.'
+  },
+  {
+    year: '2025',
+    title: '45 Jahre Jubiläum & Relaunch',
+    tagline: '7 Suiten & Premium Direktbuchungsportal',
+    description: '45 Jahre Trattoria da Enzo! Zum Jubiläum strahlen alle 7 Boutique-Apartments in neuem Glanz – inklusive Bestpreis-Direktbuchung und maßgeschneidertem Concierge-Service.'
+  }
+];
+---
+
+<Layout
+  title="Unsere Geschichte (1980 - 2025) | Casa da Enzo Goslar"
+  description="Entdecken Sie die 45-jährige Geschichte von Vincenzo 'Enzo' Campisi und der Familie: Von der ersten sizilianischen Trattoria in der Bäckerstraße 18 bis zum heutigen Casa da Enzo Boutique Hotel."
+>
+  <!-- Hero Section -->
+  <section class="bg-stone-900 text-white pt-20 pb-28 relative overflow-hidden">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10 space-y-6">
+      <span class="inline-block px-4 py-1.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-semibold uppercase tracking-wider">
+        45 Jahre Familientradition • 1980 bis 2025
+      </span>
+      <h1 class="font-serif text-4xl sm:text-6xl font-bold tracking-tight text-white leading-tight">
+        Vincenzos Erbe:<br/>
+        <span class="text-amber-400">Vom Traum eines Mannes zum Casa da Enzo</span>
+      </h1>
+      <p class="text-stone-300 text-base sm:text-lg max-w-3xl mx-auto leading-relaxed">
+        Seit 1980 ist die Bäckerstraße 18 im UNESCO-Weltkulturerbe Goslar ein Treffpunkt für Liebhaber ehrlicher italienischer Küche, edler Weine und warmer Gastfreundschaft.
+      </p>
+    </div>
+  </section>
+
+  <!-- Quote Banner Section -->
+  <section class="py-12 bg-[#FAF6F0] border-b border-stone-200">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="bg-white p-8 sm:p-12 rounded-3xl border border-stone-200/80 shadow-md text-center space-y-4">
+        <span class="text-4xl text-[#C85A32]">“</span>
+        <blockquote class="font-serif text-xl sm:text-2xl font-semibold text-stone-900 italic leading-snug">
+          "Echte Gastfreundschaft misst sich nicht an Sternen, sondern daran, dass ein Gast als Fremder kommt und als Freund der Familie geht."
+        </blockquote>
+        <p class="text-xs uppercase tracking-widest text-[#C85A32] font-bold">
+          — Vincenzo "Enzo" Campisi (Gründer, 1980)
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Timeline Section -->
+  <section class="py-20 bg-stone-100/70">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="text-center mb-16 space-y-3">
+        <span class="text-xs font-bold uppercase tracking-widest text-[#C85A32]">Meilensteine</span>
+        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-stone-900">Die Zeitreise durch 4,5 Jahrzehnte</h2>
+      </div>
+
+      <!-- Vertical Timeline -->
+      <div class="relative border-l-2 border-[#C85A32]/40 ml-4 sm:ml-32 space-y-12">
+        {timelineEvents.map((evt) => (
+          <div class="relative pl-8 sm:pl-12 group">
+            <!-- Year Circle Marker -->
+            <div class="absolute -left-[17px] top-1.5 w-8 h-8 rounded-full bg-[#C85A32] text-white font-bold text-xs flex items-center justify-center shadow-md ring-4 ring-stone-100">
+              ✓
+            </div>
+
+            <!-- Year Badge (Left on larger screens) -->
+            <div class="sm:absolute sm:-left-32 sm:top-1 sm:w-24 sm:text-right font-serif text-2xl font-bold text-[#C85A32]">
+              {evt.year}
+            </div>
+
+            <!-- Card Content -->
+            <div class="bg-white p-6 sm:p-8 rounded-3xl border border-stone-200 shadow-sm hover:shadow-md transition-shadow space-y-2">
+              <span class="text-xs font-semibold uppercase tracking-wider text-amber-600 block">{evt.tagline}</span>
+              <h3 class="font-serif text-2xl font-bold text-stone-900">{evt.title}</h3>
+              <p class="text-stone-600 text-sm leading-relaxed">{evt.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- The Family Today Section -->
+  <section class="py-20 bg-white border-t border-stone-200">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
+        <div class="lg:col-span-6 space-y-6">
+          <span class="text-xs font-bold uppercase tracking-widest text-[#C85A32]">Die 2. Generation</span>
+          <h2 class="font-serif text-3xl font-bold text-stone-900">Familienwerte vereint mit modernem Komfort</h2>
+          <p class="text-stone-700 text-base leading-relaxed">
+            Heute führen Sergio, Alja und Alessandra das Erbe ihres Vaters weiter. Alessandra verzaubert die Gäste in der Küche der Trattoria, während Sergio und Alja das Boutique-Hotel und die digitale Betreuung koordinieren.
+          </p>
+          <div class="grid grid-cols-2 gap-4 pt-2">
+            <div class="p-4 rounded-2xl bg-stone-50 border border-stone-200">
+              <h4 class="font-serif font-bold text-stone-900 text-base">Alessandra</h4>
+              <p class="text-xs text-stone-500 mt-1">Küchenchefin & Herznote der Trattoria</p>
+            </div>
+            <div class="p-4 rounded-2xl bg-stone-50 border border-stone-200">
+              <h4 class="font-serif font-bold text-stone-900 text-base">Sergio & Alja</h4>
+              <p class="text-xs text-stone-500 mt-1">Apartment-Management & Guest Experience</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="lg:col-span-6">
+          <div class="p-8 rounded-3xl bg-stone-900 text-white space-y-6 shadow-2xl border border-stone-800 text-center">
+            <span class="text-amber-400 text-xs uppercase font-bold tracking-widest">UNESCO Altstadt Goslar</span>
+            <h3 class="font-serif text-2xl font-bold">Erleben Sie das Casa da Enzo hautnah</h3>
+            <p class="text-stone-300 text-sm leading-relaxed">
+              Buchen Sie eines unserer 7 individuell gestalteten Suiten und genießen Sie abends hausgemachte Pasta direkt im Parterre.
+            </p>
+            <a href="/#booking" class="inline-block px-8 py-3.5 rounded-full bg-[#C85A32] text-white font-bold text-sm hover:bg-[#b04d2a] transition-all shadow-md">
+              Jetzt Verfügbarkeit prüfen
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</Layout>

src/pages/impressum.astro

@@ -0,0 +1,104 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout
+  title="Impressum | Casa da Enzo & Trattoria da Enzo Goslar"
+  description="Rechtliche Informationen, Angaben gemäß § 5 DDG, Kontaktdaten und Vertretungsverhältnisse der Casa da Enzo & Trattoria da Enzo in Goslar."
+>
+  <section class="bg-stone-900 text-white pt-16 pb-16">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-3">
+      <span class="text-xs uppercase font-bold text-amber-400 tracking-widest">Rechtliche Hinweise</span>
+      <h1 class="font-serif text-4xl sm:text-5xl font-bold">Impressum</h1>
+      <p class="text-stone-400 text-sm">Angaben gemäß § 5 Digitale-Dienste-Gesetz (DDG)</p>
+    </div>
+  </section>
+
+  <section class="py-16 bg-[#FAF6F0]">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="bg-white p-8 sm:p-12 rounded-3xl border border-stone-200 shadow-sm space-y-10 text-stone-800 text-sm leading-relaxed">
+        
+        <!-- Service Provider -->
+        <div class="space-y-3 border-b border-stone-100 pb-8">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">Diensteanbieter</h2>
+          <p class="font-bold text-base text-[#C85A32]">Casa da Enzo & Trattoria da Enzo</p>
+          <p>
+            Inhaber: Vincenzo Campisi & Familie (Campisi GbR)<br/>
+            Bäckerstraße 18<br/>
+            38640 Goslar<br/>
+            Deutschland
+          </p>
+        </div>
+
+        <!-- Contact Info -->
+        <div class="space-y-3 border-b border-stone-100 pb-8">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">Kontaktmöglichkeiten</h2>
+          <p>
+            <strong>Telefon:</strong> +49 (0) 1520 7483196<br/>
+            <strong>E-Mail:</strong> <a href="mailto:booking@casa-daenzo.de" class="text-[#C85A32] underline hover:text-[#b04d2a]">booking@casa-daenzo.de</a><br/>
+            <strong>Website:</strong> <a href="https://casa-daenzo.de" class="text-[#C85A32] underline hover:text-[#b04d2a]">https://casa-daenzo.de</a>
+          </p>
+        </div>
+
+        <!-- VAT ID -->
+        <div class="space-y-3 border-b border-stone-100 pb-8">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">Umsatzsteuer-Identifikationsnummer</h2>
+          <p>
+            Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br/>
+            <strong class="font-mono text-stone-900">DE386409876</strong>
+          </p>
+        </div>
+
+        <!-- Responsible for Content -->
+        <div class="space-y-3 border-b border-stone-100 pb-8">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">Redaktionell Verantwortlich</h2>
+          <p>
+            Verantwortlich für die Inhalte gemäß § 18 Abs. 2 MStV:<br/>
+            Sergio Campisi & Alessandra Campisi<br/>
+            Bäckerstraße 18<br/>
+            38640 Goslar
+          </p>
+        </div>
+
+        <!-- EU Dispute Resolution -->
+        <div class="space-y-3 border-b border-stone-100 pb-8">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">EU-Streitschlichtung</h2>
+          <p>
+            Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:<br/>
+            <a href="https://ec.europa.eu/consumers/odr/" target="_blank" rel="noopener noreferrer" class="text-[#C85A32] underline hover:text-[#b04d2a]">https://ec.europa.eu/consumers/odr/</a>.<br/>
+            Unsere E-Mail-Adresse finden Sie oben im Impressum.
+          </p>
+        </div>
+
+        <!-- Consumer Dispute Settlement -->
+        <div class="space-y-3 border-b border-stone-100 pb-8">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">Verbraucherstreitbeilegung / Universalschlichtungsstelle</h2>
+          <p>
+            Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.
+          </p>
+        </div>
+
+        <!-- Legal Disclaimer -->
+        <div class="space-y-4 pt-2">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">Haftungsausschluss (Disclaimer)</h2>
+          
+          <h3 class="font-bold text-stone-900 pt-2">Haftung für Inhalte</h3>
+          <p>
+            Als Diensteanbieter sind wir gemäß § 7 Abs.1 DDG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 DDG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
+          </p>
+
+          <h3 class="font-bold text-stone-900 pt-2">Haftung für Links</h3>
+          <p>
+            Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.
+          </p>
+
+          <h3 class="font-bold text-stone-900 pt-2">Urheberrecht</h3>
+          <p>
+            Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.
+          </p>
+        </div>
+
+      </div>
+    </div>
+  </section>
+</Layout>

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Hero5050 from '../components/Hero5050.astro';
 import ApartmentCard from '../components/ApartmentCard.astro';
 import EviivoWidget from '../components/EviivoWidget.astro';
 import { getCollection } from 'astro:content';
@@ -9,103 +10,30 @@ const sortedApartments = apartments.sort((a, b) => a.data.featuredOrder - b.data
 ---
 
 <Layout
-  title="Casa da Enzo | Boutique Apartments & Trattoria in Goslar"
+  title="Casa da Enzo | Boutique Apartments & Trattoria in Goslar Altstadt"
-  description="7 exklusive Ferienwohnungen im UNESCO-Weltkulturerbe Goslar. Verbindet historischen Fachwerk-Charme mit italienischem Lebensgefühl und smartem Online-Check-in."
+  description="7 exklusive Boutique Apartments & traditionsreiche italienische Trattoria in Goslars UNESCO-Altstadt. 100% digitaler Check-in, Bestpreis-Garantie bei Direktbuchung."
 >
-  <!-- Hero Section -->
+  <!-- 50/50 Dual Brand Hero -->
-  <section class="relative pt-12 pb-24 lg:pt-20 lg:pb-32 overflow-hidden">
+  <Hero5050 />
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
-        <!-- Left Column: Copy -->
-        <div class="lg:col-span-7 space-y-6 text-left">
-          <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-amber-100/80 border border-amber-200 text-[#C85A32] text-xs font-semibold uppercase tracking-wider">
-            <span>🇮🇹 Casa da Enzo seit 1980</span>
-            <span>•</span>
-            <span>Bäckerstraße 18, Goslar</span>
-          </div>
-
-          <h1 class="font-serif text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-stone-900 leading-[1.15]">
-            Nicht wie beim Italiener.<br/>
-            <span class="text-gradient-gold">Sondern wie in Italien.</span>
-          </h1>
-
-          <p class="text-stone-700 text-base sm:text-lg leading-relaxed max-w-2xl">
-            Erlebe 7 liebevoll restaurierte Boutique-Apartments im Herzen der UNESCO-Altstadt von Goslar. Direkt über unserer lebendigen Familien-Trattoria. Historisches Fachwerk, nachhaltiger Wohnkomfort und unabhängiger 24/7 Smart-Check-in.
-          </p>
-
-          <!-- Key Highlights Bar -->
-          <div class="grid grid-cols-3 gap-4 pt-4 border-t border-stone-200/80 text-stone-800 text-xs sm:text-sm font-medium">
-            <div>
-              <span class="block font-bold text-base text-[#C85A32]">7 Suiten</span>
-              <span>4 Premium / 3 Klassik</span>
-            </div>
-            <div>
-              <span class="block font-bold text-base text-[#C85A32]">Keyless Access</span>
-              <span>Nuki PIN Check-in</span>
-            </div>
-            <div>
-              <span class="block font-bold text-base text-[#C85A32]">Bestpreis</span>
-              <span>15% günstiger direkt</span>
-            </div>
-          </div>
-
-          <div class="pt-4 flex flex-col sm:flex-row gap-4">
-            <a href="#booking" class="px-8 py-4 rounded-2xl bg-[#C85A32] text-white font-bold text-base hover:bg-[#b04d2a] shadow-lg hover:shadow-xl transition-all text-center">
-              Jetzt Verfügbarkeit prüfen
-            </a>
-            <a href="#apartments" class="px-8 py-4 rounded-2xl bg-white text-stone-800 font-semibold text-base border border-stone-300 hover:bg-stone-50 transition-all text-center">
-              Suiten erkunden ↓
-            </a>
-          </div>
-        </div>
-
-        <!-- Right Column: Visual Card -->
-        <div class="lg:col-span-5 relative">
-          <div class="relative mx-auto max-w-md lg:max-w-none rounded-3xl overflow-hidden bg-stone-900 text-white p-8 shadow-2xl border border-stone-800">
-            <div class="absolute -top-12 -right-12 w-48 h-48 bg-[#C85A32]/20 rounded-full blur-3xl"></div>
-            
-            <span class="text-xs uppercase tracking-widest text-amber-400 font-semibold">Das Gesamterlebnis</span>
-            <h2 class="font-serif text-2xl font-bold mt-2 mb-4">Urlaub & Genuss vereint</h2>
-            
-            <p class="text-stone-300 text-sm leading-relaxed mb-6">
-              "Am Tag die Harzer Bergwelt erkunden, am Abend hausgemachte Pasta bei Alessandra in der Trattoria genießen und danach entspannt in deiner stilvollen Altstadt-Suite einschlafen."
-            </p>
-
-            <div class="space-y-3 border-t border-stone-800 pt-4 text-xs text-stone-300">
-              <div class="flex items-center gap-3">
-                <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
-                <span>Kontaktloser Check-in ab 15:00 Uhr</span>
-              </div>
-              <div class="flex items-center gap-3">
-                <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
-                <span>Highspeed-WLAN & Workation-Space</span>
-              </div>
-              <div class="flex items-center gap-3">
-                <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
-                <span>Tischreservierung in der Trattoria inklusive</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
 
   <!-- Eviivo Direct Booking Widget -->
-  <section id="booking" class="px-4">
+  <section id="booking" class="px-4 py-8 bg-[#1A1816]">
     <EviivoWidget />
   </section>
 
-  <!-- Apartments Section -->
+  <!-- Apartments Section (Green Accent) -->
-  <section id="apartments" class="py-20 bg-stone-100/60 border-y border-stone-200/60">
+  <section id="apartments" class="py-20 bg-[#1A1816] border-y border-[#D4A373]/15">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="text-center max-w-3xl mx-auto mb-16">
+      <div class="text-center max-w-3xl mx-auto mb-16 space-y-3">
-        <span class="text-xs font-bold uppercase tracking-widest text-[#C85A32]">Suiten & Apartments</span>
+        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#2D5A43]/20 border border-emerald-500/40 text-emerald-400 text-xs font-bold uppercase tracking-wider">
-        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-stone-900 mt-2">
+          <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
-          Dein Zuhause auf Zeit in Goslar
+          <span>Boutique Apartments & Suiten</span>
+        </span>
+        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-[#E6D5C3]">
+          Dein Zuhause auf Zeit im Welterbe
         </h2>
-        <p class="text-stone-600 text-base mt-3">
+        <p class="text-[#A3978B] text-sm sm:text-base leading-relaxed">
-          Wähle zwischen unseren 4 neu sanierten Premium-Komfort-Suites mit Balkon/Terrasse & Workspace oder den 3 gemütlichen Klassik-Einheiten.
+          Wähle zwischen unseren 4 neu sanierten Premium-Komfort-Suites (mit Balkon, Terrasse oder Workstation) und 3 gemütlichen Klassik-Einheiten. Alle mit Nuki PIN access & Highspeed WLAN.
         </p>
       </div>
 
@@ -129,80 +57,160 @@ const sortedApartments = apartments.sort((a, b) => a.data.featuredOrder - b.data
     </div>
   </section>
 
-  <!-- Trattoria Section -->
+  <!-- Trattoria Section (Red Accent) -->
-  <section id="trattoria" class="py-20 bg-stone-900 text-white">
+  <section id="trattoria" class="py-20 bg-[#24211D] border-b border-[#D4A373]/15">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+        <!-- Story & Offer -->
         <div class="space-y-6">
-          <span class="text-xs font-bold uppercase tracking-widest text-amber-400">Gastronomie im Erdgeschoss</span>
+          <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#C85A32]/20 border border-[#C85A32]/40 text-[#C85A32] text-xs font-bold uppercase tracking-wider">
-          <h2 class="font-serif text-3xl sm:text-4xl font-bold">
+            <span class="w-2 h-2 rounded-full bg-[#C85A32]"></span>
-            Trattoria da Enzo – Kulinarik & Lebensfreude
+            <span>Trattoria da Enzo • Erdgeschoss</span>
+          </span>
+          <h2 class="font-serif text-3xl sm:text-4xl font-bold text-[#E6D5C3]">
+            Sizilianische Kulinarik & Echte Lebensfreude
           </h2>
-          <p class="text-stone-300 text-base leading-relaxed">
+          <p class="text-[#A3978B] text-sm sm:text-base leading-relaxed">
-            Direkt unter den Apartments befindet sich das Herzstück unseres Hauses: Alessandras Trattoria. Hier servieren wir ehrliche sizilianische Küche, hausgemachte Pasta, frische Kräuter und erlesene Weine.
+            Direkt unter den Apartments befindet sich das schlagende Herz unseres Hauses: Alessandras Trattoria. Seit 1980 servieren wir ehrliche sizilianische Küche, frische hausgemachte Pasta und sorgfältig ausgewählte italienische Weine.
           </p>
-          <div class="p-6 rounded-2xl bg-stone-800/80 border border-stone-700/60 space-y-3">
+
-            <h4 class="font-serif text-lg font-semibold text-amber-400">Vorteil für Hotel-Gäste</h4>
+          <div class="stone-card p-6 rounded-2xl border border-[#C85A32]/30 space-y-3">
-            <p class="text-stone-300 text-sm">
+            <h4 class="font-serif text-lg font-bold text-[#D4A373]">Exklusiver Gästevorteil</h4>
-              Gäste unserer Casa da Enzo genießen eine bevorzugte Tischreservierung. Gib bei deiner Apartment-Buchung einfach an, wann du bei Alessandra speisen möchtest.
+            <p class="text-[#E6D5C3] text-xs sm:text-sm leading-relaxed">
+              Gäste unserer Casa da Enzo Apartments genießen eine <strong>priorisierte Tischreservierung</strong>. Gib bei deiner Buchung einfach deinen Wunschtermin an oder rufen direkt in der Trattoria an.
             </p>
           </div>
         </div>
 
-        <div class="rounded-3xl bg-stone-800 p-8 border border-stone-700 space-y-6 text-center">
+        <!-- Hours & Contact Box -->
-          <h3 class="font-serif text-2xl font-bold text-white">Öffnungszeiten Trattoria</h3>
+        <div class="stone-card rounded-3xl p-8 border border-[#C85A32]/40 space-y-6 text-center shadow-2xl">
-          <div class="space-y-2 text-stone-300 text-sm">
+          <div class="w-16 h-16 rounded-full bg-[#C85A32]/20 border border-[#C85A32]/40 flex items-center justify-center mx-auto text-3xl">
-            <p><strong class="text-white">Dienstag – Sonntag:</strong> 17:00 – 22:30 Uhr</p>
+            🍷
-            <p><strong class="text-white">Montag:</strong> Ruhetag</p>
           </div>
-          <a href="https://wa.me/4915207483196?text=Hallo%20Alessandra,%20ich%20m%C3%B6chte%20einen%20Tisch%20in%20der%20Trattoria%20reservieren." target="_blank" class="inline-block w-full py-3.5 rounded-xl bg-amber-500 text-stone-950 font-bold text-sm hover:bg-amber-400 transition-colors">
+          <h3 class="font-serif text-2xl font-bold text-[#E6D5C3]">Öffnungszeiten & Reservierung</h3>
-            Tisch per WhatsApp reservieren
+          
+          <div class="space-y-2 text-[#E6D5C3] text-sm border-y border-[#D4A373]/15 py-4">
+            <p><strong class="text-[#D4A373]">Dienstag – Sonntag:</strong> 17:00 – 22:30 Uhr</p>
+            <p><strong class="text-[#D4A373]">Montag:</strong> Ruhetag</p>
+          </div>
+
+          <div class="space-y-3">
+            <a
+              href="tel:+49532123456"
+              class="block w-full py-4 rounded-xl bg-[#C85A32] hover:bg-[#b04d2a] text-white font-bold text-sm shadow-lg transition-all"
+            >
+              📞 Tisch reservieren: +49 5321 23456
             </a>
+            <p class="text-[11px] text-[#A3978B]">
+              Direkte Durchwahl zur Trattoria (Alessandra)
+            </p>
+          </div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- History Section -->
+  <!-- Digital Guest Directory Eviivo Banner -->
-  <section id="geschichte" class="py-20 bg-[#FAF6F0]">
+  <section id="eviivo-guest" class="py-16 bg-[#1A1816] border-b border-[#D4A373]/15">
-    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-      <span class="text-xs font-bold uppercase tracking-widest text-[#C85A32]">Seit 1980</span>
+      <div class="stone-card rounded-3xl p-8 sm:p-10 border border-[#D4A373]/30 flex flex-col md:flex-row items-center justify-between gap-8 shadow-2xl">
-      <h2 class="font-serif text-3xl sm:text-4xl font-bold text-stone-900">
+        <div class="space-y-3 text-center md:text-left">
-        Die Geschichte von Vincenzos "Enzo" Erbe
+          <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#D4A373]/20 text-[#D4A373] text-xs font-bold uppercase tracking-wider">
+            📖 Für gebuchte Gäste
+          </span>
+          <h2 class="font-serif text-2xl sm:text-3xl font-bold text-[#E6D5C3]">
+            Digitales Gästebuch (Eviivo Guest Directory)
           </h2>
-      <p class="text-stone-700 text-base sm:text-lg leading-relaxed">
+          <p class="text-[#A3978B] text-xs sm:text-sm max-w-xl">
-        1980 gründete unser Vater Vincenzo "Enzo" Campisi die Trattoria in der geschichtsträchtigen Bäckerstraße 18 in Goslar. Heute führen wir – Sergio, Alja und Alessandra – das Haus in 2. Generation fort. Wir haben die historische Substanz behutsam nachhaltig saniert und um 7 zeitgemäße Boutique-Apartments erweitert. Echte Gastfreundschaft trifft auf smarten, digitalen Komfort.
+            Du hast bereits gebucht? Gib deine Eviivo-Buchungsnummer und deinen Nachnamen ein, um deinen Nuki PIN-Code, WLAN-Daten, Parktipps und den Hausguide direkt abzurufen.
           </p>
         </div>
+
+        <div class="shrink-0">
+          <button
+            onclick="document.getElementById('eviivo-link-btn')?.click()"
+            class="px-8 py-4 rounded-2xl bg-[#D4A373] hover:bg-[#e6c5a2] text-[#1A1816] font-bold text-sm transition-all shadow-xl"
+          >
+            Gästebuch öffnen ➔
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- History & Legacy Section ("Enzos Erbe") -->
+  <section id="geschichte" class="py-20 bg-[#24211D] border-b border-[#D4A373]/15">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-8">
+      <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#D4A373]/20 border border-[#D4A373]/30 text-[#D4A373] text-xs font-bold uppercase tracking-wider">
+        <span>🇮🇹 Vincenzos Erbe seit 1980</span>
+      </span>
+
+      <h2 class="font-serif text-3xl sm:text-4xl font-bold text-[#E6D5C3]">
+        Sizilien trifft Goslar – Die Geschichte unserer Familie
+      </h2>
+
+      <div class="space-y-4 text-[#E6D5C3] text-sm sm:text-base leading-relaxed text-left sm:text-center">
+        <p>
+          1980 legte unser Vater Vincenzo "Enzo" Campisi den Grundstein in der Bäckerstraße 18. Er brachte authentische italienische Herzlichkeit und sizilianische Rezepte mitten in die geschichtsträchtige Altstadt von Goslar.
+        </p>
+        <p>
+          Heute führen wir – Sergio, Alja und Alessandra – das Erbe in der 2. Generation fort. Wir haben die historische Bausubstanz des Fachwerkgebäudes 2025 aufwendig saniert: 7 zeitgemäße, edle Boutique-Apartments sind entstanden, ergänzt durch unabhängigen Nuki-PIN-Code Check-in und persönliche Betreuung.
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-6 border-t border-[#D4A373]/20 text-center">
+        <div class="p-4 rounded-2xl bg-[#1A1816] border border-[#D4A373]/20">
+          <div class="font-serif text-lg font-bold text-[#D4A373]">Alja</div>
+          <div class="text-xs text-[#A3978B]">Apartments & Concierge</div>
+        </div>
+        <div class="p-4 rounded-2xl bg-[#1A1816] border border-[#D4A373]/20">
+          <div class="font-serif text-lg font-bold text-[#C85A32]">Alessandra</div>
+          <div class="text-xs text-[#A3978B]">Trattoria & Küche</div>
+        </div>
+        <div class="p-4 rounded-2xl bg-[#1A1816] border border-[#D4A373]/20">
+          <div class="font-serif text-lg font-bold text-[#2D5A43]">Sergio</div>
+          <div class="text-xs text-[#A3978B]">Familie & Gastfreundschaft</div>
+        </div>
+      </div>
+    </div>
   </section>
 
   <!-- FAQ Section -->
-  <section id="faq" class="py-20 bg-stone-100/80 border-t border-stone-200">
+  <section id="faq" class="py-20 bg-[#1A1816]">
     <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
-      <div class="text-center">
+      <div class="text-center space-y-2">
-        <span class="text-xs font-bold uppercase tracking-widest text-[#C85A32]">Häufige Fragen</span>
+        <span class="text-xs font-bold uppercase tracking-widest text-[#D4A373]">Gut zu wissen</span>
-        <h2 class="font-serif text-3xl font-bold text-stone-900 mt-2">Gut zu wissen für deinen Aufenthalt</h2>
+        <h2 class="font-serif text-3xl font-bold text-[#E6D5C3]">Häufig gestellte Fragen</h2>
       </div>
 
       <div class="space-y-6">
-        <div class="p-6 rounded-2xl bg-white border border-stone-200/80 shadow-sm space-y-2">
+        <div class="stone-card p-6 rounded-2xl border border-[#D4A373]/20 space-y-2">
-          <h3 class="font-serif text-lg font-bold text-stone-900">Wie funktioniert der Check-in?</h3>
+          <h3 class="font-serif text-lg font-bold text-[#E6D5C3]">Wie funktioniert der Check-in?</h3>
-          <p class="text-stone-600 text-sm leading-relaxed">
+          <p class="text-[#A3978B] text-xs sm:text-sm leading-relaxed">
-            Der Check-in ist vollkommen kontaktlos und flexibel ab 15:00 Uhr möglich. Du erhältst vor deiner Anreise deinen persönlichen Nuki-Smart-Lock-PIN-Code per WhatsApp oder E-Mail.
+            Der Check-in verläuft 100% kontaktlos und flexibel ab 15:00 Uhr. Vor deiner Anreise erhältst du deinen persönlichen Nuki-Smart-Lock-PIN-Code per WhatsApp oder E-Mail.
           </p>
         </div>
 
-        <div class="p-6 rounded-2xl bg-white border border-stone-200/80 shadow-sm space-y-2">
+        <div class="stone-card p-6 rounded-2xl border border-[#D4A373]/20 space-y-2">
-          <h3 class="font-serif text-lg font-bold text-stone-900">Wo kann ich in Goslar parken?</h3>
+          <h3 class="font-serif text-lg font-bold text-[#E6D5C3]">An wen wende ich mich bei Fragen?</h3>
-          <p class="text-stone-600 text-sm leading-relaxed">
+          <p class="text-[#A3978B] text-xs sm:text-sm leading-relaxed">
-            In direkter Gehweite (ca. 2-3 Minuten) befinden sich öffentliche Parkplätze sowie das Parkhaus 'Kaiserpassage'. Ein Ausladen deines Gepäcks direkt vor der Bäckerstraße 18 ist möglich.
+            Wir pflegen eine klare Kontakttrennung:<br/>
+            • <strong>Apartments & Buchungen:</strong> Alja per WhatsApp unter <a href="https://wa.me/4915207483196" target="_blank" class="text-emerald-400 underline">+49 1520 7483196</a><br/>
+            • <strong>Trattoria & Tischreservierungen:</strong> Alessandra auf dem Festnetz unter <a href="tel:+49532123456" class="text-[#C85A32] underline">+49 5321 23456</a>
           </p>
         </div>
 
-        <div class="p-6 rounded-2xl bg-white border border-stone-200/80 shadow-sm space-y-2">
+        <div class="stone-card p-6 rounded-2xl border border-[#D4A373]/20 space-y-2">
-          <h3 class="font-serif text-lg font-bold text-stone-900">Warum direkt über diese Website buchen?</h3>
+          <h3 class="font-serif text-lg font-bold text-[#E6D5C3]">Wo kann ich in Goslar parken?</h3>
-          <p class="text-stone-600 text-sm leading-relaxed">
+          <p class="text-[#A3978B] text-xs sm:text-sm leading-relaxed">
-            Bei einer Direktbuchung sparst du dir die 15-20% OTA-Gebühren von Booking.com oder Airbnb. Wir geben diesen Vorteil direkt in Form des garantierten Bestpreises an dich weiter.
+            Du kannst direkt vor die Bäckerstraße 18 fahren, um dein Gepäck auszuladen. Öffentliche Parkplätze sowie das Parkhaus 'Kaiserpassage' befinden sich in ca. 2-3 Gehminuten Entfernung.
+          </p>
+        </div>
+
+        <div class="stone-card p-6 rounded-2xl border border-[#D4A373]/20 space-y-2">
+          <h3 class="font-serif text-lg font-bold text-[#E6D5C3]">Warum lohnt sich die Direktbuchung?</h3>
+          <p class="text-[#A3978B] text-xs sm:text-sm leading-relaxed">
+            Bei einer Direktbuchung sparst du dir die 15% OTA-Gebühren von Booking.com oder Airbnb. Wir garantieren dir den besten verfügbaren Preis und bieten dir eine bevorzugte Tischreservierung in der Trattoria!
           </p>
         </div>
       </div>

src/pages/trattoria-admin/index.astro

@@ -0,0 +1,792 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout
+  title="Trattoria Management WebApp | Casa da Enzo Goslar"
+  description="Interne Verwaltung der Trattoria da Enzo: Tischreservierungen mit KI-Antwortgenerator, Öffnungszeiten & Schichten, Speisekarten-Manager mit Versionierung und Gutschein-Tracking."
+>
+  <!-- Admin Header Banner -->
+  <div class="bg-stone-900 text-white border-b border-stone-800 sticky top-20 z-40">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex flex-col md:flex-row items-center justify-between gap-4">
+      <div class="flex items-center gap-3">
+        <span class="p-2 rounded-xl bg-[#C85A32] text-white text-lg font-bold">🇮🇹</span>
+        <div>
+          <h1 class="font-serif text-xl font-bold">Trattoria da Enzo • Management App</h1>
+          <p class="text-xs text-stone-400">Angemeldet als: <span class="text-amber-400 font-medium">Alessandra Campisi (ID: ENZO-STAFF-01)</span></p>
+        </div>
+      </div>
+
+      <!-- Quick Status Indicators -->
+      <div class="flex items-center gap-4 text-xs">
+        <div class="flex items-center gap-2 bg-stone-800 px-3 py-1.5 rounded-lg border border-stone-700">
+          <span id="vacation-status-dot" class="w-2.5 h-2.5 rounded-full bg-emerald-400"></span>
+          <span id="vacation-status-text" class="text-stone-300">Website Status: <strong>Normalbetrieb</strong></span>
+        </div>
+        <div class="hidden sm:block text-stone-400">
+          Systemzeit: <span id="clock" class="font-mono text-stone-200">16.09.2026, 18:45</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Main App Workspace -->
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+
+    <!-- App Navigation Tabs -->
+    <div class="flex flex-wrap items-center gap-2 border-b border-stone-200 pb-4 mb-8">
+      <button data-tab="reservations" class="admin-tab active px-5 py-2.5 rounded-xl text-sm font-bold bg-[#C85A32] text-white shadow-sm transition-all flex items-center gap-2">
+        <span>🍽️ Tisch-Reservierungen</span>
+        <span id="pending-badge" class="px-2 py-0.5 rounded-full bg-amber-400 text-stone-950 text-xs font-black">2 Neu</span>
+      </button>
+      <button data-tab="hours" class="admin-tab px-5 py-2.5 rounded-xl text-sm font-semibold bg-white text-stone-700 border border-stone-300 hover:bg-stone-50 transition-all flex items-center gap-2">
+        <span>🕒 Öffnungszeiten & Schichten</span>
+      </button>
+      <button data-tab="menu" class="admin-tab px-5 py-2.5 rounded-xl text-sm font-semibold bg-white text-stone-700 border border-stone-300 hover:bg-stone-50 transition-all flex items-center gap-2">
+        <span>📜 Speisekarte & KI</span>
+      </button>
+      <button data-tab="vouchers" class="admin-tab px-5 py-2.5 rounded-xl text-sm font-semibold bg-white text-stone-700 border border-stone-300 hover:bg-stone-50 transition-all flex items-center gap-2">
+        <span>🎟️ Gutschein-Verwaltung</span>
+      </button>
+      <button data-tab="history" class="admin-tab px-5 py-2.5 rounded-xl text-sm font-semibold bg-white text-stone-700 border border-stone-300 hover:bg-stone-50 transition-all flex items-center gap-2">
+        <span>📜 Aktivitäts-Log</span>
+      </button>
+    </div>
+
+    <!-- TAB 1: TISCH-RESERVIERUNGEN -->
+    <div id="tab-reservations" class="tab-content space-y-8">
+      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+        <div>
+          <h2 class="font-serif text-2xl font-bold text-stone-900">Anstehende Tischreservierungen</h2>
+          <p class="text-stone-600 text-sm">Prüfen und bestätigen Sie Anfragen mit KI-unterstützter persönlicher Gast-Ansprache.</p>
+        </div>
+      </div>
+
+      <!-- Pending Reservations Cards/Table -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6" id="reservations-list">
+        <!-- Reservation Item 1 -->
+        <div class="bg-white p-6 rounded-3xl border border-stone-200 shadow-sm space-y-4 hover:border-amber-400 transition-all" id="res-card-101">
+          <div class="flex items-start justify-between">
+            <div>
+              <span class="px-2.5 py-1 rounded-full bg-amber-100 text-amber-800 text-xs font-bold uppercase tracking-wider">Ausstehend</span>
+              <h3 class="font-serif text-xl font-bold text-stone-900 mt-1">Marco & Julia Schmidt</h3>
+              <p class="text-xs text-stone-500">Angefragt am 16.09.2026 um 14:20 Uhr</p>
+            </div>
+            <div class="text-right">
+              <span class="text-2xl font-bold text-[#C85A32]">4 Personen</span>
+              <p class="text-xs text-stone-600 font-medium">18.09.2026 • 19:30 Uhr</p>
+            </div>
+          </div>
+
+          <div class="p-3 bg-stone-50 rounded-2xl border border-stone-200 text-xs text-stone-700 space-y-1">
+            <p><strong>Bereich:</strong> Gastraum (Fensterplatz gewünscht)</p>
+            <p><strong>Besonderer Wunsch:</strong> "Feiern unseren Jahrestag! Ein schöner Tisch wäre wunderbar."</p>
+            <p><strong>Kontakt:</strong> +49 171 9876543 • julia.schmidt@example.de</p>
+          </div>
+
+          <div class="flex flex-wrap items-center gap-3 pt-2">
+            <button onclick="openAiDraftModal('101', 'Marco & Julia Schmidt', 'Confirm', '18.09.2026 um 19:30 Uhr', '4 Personen', 'Fensterplatz, Jahrestag')" class="px-4 py-2 rounded-xl bg-emerald-600 text-white font-bold text-xs hover:bg-emerald-700 transition-all flex items-center gap-1.5">
+              <span>✓ Bestätigen + KI-Antwort</span>
+            </button>
+            <button onclick="openAiDraftModal('101', 'Marco & Julia Schmidt', 'Decline', '18.09.2026 um 19:30 Uhr', '4 Personen', 'Ausgebucht')" class="px-4 py-2 rounded-xl bg-rose-600 text-white font-bold text-xs hover:bg-rose-700 transition-all flex items-center gap-1.5">
+              <span>✕ Ablehnen + KI-Antwort</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Reservation Item 2 -->
+        <div class="bg-white p-6 rounded-3xl border border-stone-200 shadow-sm space-y-4 hover:border-amber-400 transition-all" id="res-card-102">
+          <div class="flex items-start justify-between">
+            <div>
+              <span class="px-2.5 py-1 rounded-full bg-amber-100 text-amber-800 text-xs font-bold uppercase tracking-wider">Ausstehend</span>
+              <h3 class="font-serif text-xl font-bold text-stone-900 mt-1">Dr. Thomas Weber</h3>
+              <p class="text-xs text-stone-500">Angefragt am 16.09.2026 um 16:05 Uhr</p>
+            </div>
+            <div class="text-right">
+              <span class="text-2xl font-bold text-[#C85A32]">2 Personen</span>
+              <p class="text-xs text-stone-600 font-medium">19.09.2026 • 20:00 Uhr</p>
+            </div>
+          </div>
+
+          <div class="p-3 bg-stone-50 rounded-2xl border border-stone-200 text-xs text-stone-700 space-y-1">
+            <p><strong>Bereich:</strong> Terrasse / Außenbereich</p>
+            <p><strong>Besonderer Wunsch:</strong> "Glutenfreie Pasta & ruhige Ecke erbeten."</p>
+            <p><strong>Kontakt:</strong> +49 160 1234567 • t.weber@med-goslar.de</p>
+          </div>
+
+          <div class="flex flex-wrap items-center gap-3 pt-2">
+            <button onclick="openAiDraftModal('102', 'Dr. Thomas Weber', 'Confirm', '19.09.2026 um 20:00 Uhr', '2 Personen', 'Glutenfrei, ruhige Ecke')" class="px-4 py-2 rounded-xl bg-emerald-600 text-white font-bold text-xs hover:bg-emerald-700 transition-all flex items-center gap-1.5">
+              <span>✓ Bestätigen + KI-Antwort</span>
+            </button>
+            <button onclick="openAiDraftModal('102', 'Dr. Thomas Weber', 'Decline', '19.09.2026 um 20:00 Uhr', '2 Personen', 'Ausgebucht')" class="px-4 py-2 rounded-xl bg-rose-600 text-white font-bold text-xs hover:bg-rose-700 transition-all flex items-center gap-1.5">
+              <span>✕ Ablehnen + KI-Antwort</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Processed Reservations History -->
+      <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm space-y-4">
+        <h3 class="font-serif text-xl font-bold text-stone-900">Zuletzt bearbeitete Reservierungen</h3>
+        <div class="overflow-x-auto">
+          <table class="w-full text-left text-xs text-stone-700">
+            <thead class="bg-stone-100 text-stone-900 uppercase font-bold text-[10px] tracking-wider">
+              <tr>
+                <th class="p-3 rounded-l-xl">ID</th>
+                <th class="p-3">Gast</th>
+                <th class="p-3">Datum & Zeit</th>
+                <th class="p-3">Gäste</th>
+                <th class="p-3">Entscheidung</th>
+                <th class="p-3">Bearbeiter & Zeitstempel</th>
+              </tr>
+            </thead>
+            <tbody id="processed-res-tbody" class="divide-y divide-stone-100">
+              <tr>
+                <td class="p-3 font-mono font-bold">#RES-098</td>
+                <td class="p-3 font-semibold">Familie Bauer</td>
+                <td class="p-3">17.09.2026 • 18:30 Uhr</td>
+                <td class="p-3">5 Personen</td>
+                <td class="p-3"><span class="px-2 py-0.5 rounded bg-emerald-100 text-emerald-800 font-bold">Bestätigt</span></td>
+                <td class="p-3 text-stone-500">ENZO-STAFF-01 (Alessandra) • 16.09.2026, 17:10 Uhr</td>
+              </tr>
+              <tr>
+                <td class="p-3 font-mono font-bold">#RES-097</td>
+                <td class="p-3 font-semibold">Michael Becker</td>
+                <td class="p-3">17.09.2026 • 19:00 Uhr</td>
+                <td class="p-3">2 Personen</td>
+                <td class="p-3"><span class="px-2 py-0.5 rounded bg-emerald-100 text-emerald-800 font-bold">Bestätigt</span></td>
+                <td class="p-3 text-stone-500">ENZO-STAFF-02 (Sergio) • 16.09.2026, 15:45 Uhr</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- TAB 2: ÖFFNUNGSZEITEN & SCHICHTEN -->
+    <div id="tab-hours" class="tab-content hidden space-y-8">
+      <div>
+        <h2 class="font-serif text-2xl font-bold text-stone-900">Öffnungszeiten & Schichten-Manager</h2>
+        <p class="text-stone-600 text-sm">Verwalten Sie Regulärschichten (Mittag/Abend), Ausnahmetage und den Betriebsferien-Banner für die Website.</p>
+      </div>
+
+      <!-- Betriebsferien Banner Controller -->
+      <div class="bg-amber-500/10 border border-amber-300 p-6 rounded-3xl space-y-4">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <span class="text-2xl">🏖️</span>
+            <div>
+              <h3 class="font-serif text-lg font-bold text-stone-900">Betriebsferien-Hinweis auf der Website</h3>
+              <p class="text-xs text-stone-600">Aktiviert einen gut sichtbaren Hinweisbanner ganz oben auf der Website.</p>
+            </div>
+          </div>
+          <label class="relative inline-flex items-center cursor-pointer">
+            <input type="checkbox" id="vacation-toggle" class="sr-only peer">
+            <div class="w-14 h-7 bg-stone-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-stone-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-[#C85A32]"></div>
+          </label>
+        </div>
+
+        <div class="space-y-2">
+          <label class="block text-xs font-bold text-stone-800 uppercase">Banner Text</label>
+          <input type="text" id="vacation-text-input" value="Wir machen Betriebsferien vom 10.11. bis 24.11.2026. Ab 25.11. begrüßen wir Sie wieder herzlich!" class="w-full px-4 py-2.5 rounded-xl border border-stone-300 text-xs font-medium text-stone-900 focus:ring-2 focus:ring-[#C85A32] focus:outline-none">
+        </div>
+
+        <button onclick="saveVacationSettings()" class="px-5 py-2 rounded-xl bg-stone-900 text-white font-bold text-xs hover:bg-stone-800 transition-all">
+          Banner-Einstellungen speichern
+        </button>
+      </div>
+
+      <!-- Weekly Shifts Grid -->
+      <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm space-y-6">
+        <h3 class="font-serif text-xl font-bold text-stone-900">Standard-Wochenplan (Mittag & Abend)</h3>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-7 gap-4 text-xs" id="shifts-grid">
+          <!-- Mon -->
+          <div class="p-4 rounded-2xl bg-stone-100 border border-stone-200 text-center space-y-2">
+            <span class="font-bold text-stone-900 uppercase">Montag</span>
+            <div class="p-2 bg-stone-200 rounded-lg text-stone-600 font-bold">Ruhetag</div>
+          </div>
+          <!-- Tue -->
+          <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-2">
+            <span class="font-bold text-stone-900 uppercase">Dienstag</span>
+            <div class="p-1.5 bg-white rounded border border-emerald-200">Mittag: 12:00-14:30</div>
+            <div class="p-1.5 bg-white rounded border border-emerald-200">Abend: 17:30-22:30</div>
+          </div>
+          <!-- Wed -->
+          <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-2">
+            <span class="font-bold text-stone-900 uppercase">Mittwoch</span>
+            <div class="p-1.5 bg-white rounded border border-emerald-200">Mittag: 12:00-14:30</div>
+            <div class="p-1.5 bg-white rounded border border-emerald-200">Abend: 17:30-22:30</div>
+          </div>
+          <!-- Thu -->
+          <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-2">
+            <span class="font-bold text-stone-900 uppercase">Donnerstag</span>
+            <div class="p-1.5 bg-white rounded border border-emerald-200">Mittag: 12:00-14:30</div>
+            <div class="p-1.5 bg-white rounded border border-emerald-200">Abend: 17:30-22:30</div>
+          </div>
+          <!-- Fri -->
+          <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-2">
+            <span class="font-bold text-stone-900 uppercase">Freitag</span>
+            <div class="p-1.5 bg-white rounded border border-emerald-200">Mittag: 12:00-14:30</div>
+            <div class="p-1.5 bg-white rounded border border-emerald-200">Abend: 17:30-22:30</div>
+          </div>
+          <!-- Sat -->
+          <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-2">
+            <span class="font-bold text-stone-900 uppercase">Samstag</span>
+            <div class="p-1.5 bg-white rounded border border-emerald-200">Mittag: 12:00-15:00</div>
+            <div class="p-1.5 bg-white rounded border border-emerald-200">Abend: 17:30-23:00</div>
+          </div>
+          <!-- Sun -->
+          <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-2">
+            <span class="font-bold text-stone-900 uppercase">Sonntag</span>
+            <div class="p-1.5 bg-white rounded border border-emerald-200">Mittag: 12:00-15:00</div>
+            <div class="p-1.5 bg-white rounded border border-emerald-200">Abend: 17:30-22:00</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Special Overrides Table -->
+      <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm space-y-4">
+        <div class="flex items-center justify-between">
+          <h3 class="font-serif text-xl font-bold text-stone-900">Individuelle Tages-Sonderregelungen</h3>
+          <button onclick="addDayOverride()" class="px-4 py-2 rounded-xl bg-[#C85A32] text-white font-bold text-xs hover:bg-[#b04d2a] transition-all">
+            + Sonder-Schließung / Event eintragen
+          </button>
+        </div>
+
+        <div class="overflow-x-auto">
+          <table class="w-full text-left text-xs text-stone-700">
+            <thead class="bg-stone-100 text-stone-900 uppercase font-bold text-[10px]">
+              <tr>
+                <th class="p-3 rounded-l-xl">Datum</th>
+                <th class="p-3">Anlass</th>
+                <th class="p-3">Status / Öffnungszeit</th>
+                <th class="p-3 rounded-r-xl">Aktion</th>
+              </tr>
+            </thead>
+            <tbody id="overrides-tbody" class="divide-y divide-stone-100">
+              <tr>
+                <td class="p-3 font-bold">24.12.2026 (Heiligabend)</td>
+                <td class="p-3">Weihnachten</td>
+                <td class="p-3"><span class="px-2 py-0.5 rounded bg-rose-100 text-rose-800 font-bold">Geschlossen</span></td>
+                <td class="p-3"><button onclick="this.closest('tr').remove()" class="text-rose-600 hover:underline">Entfernen</button></td>
+              </tr>
+              <tr>
+                <td class="p-3 font-bold">31.12.2026 (Silvester)</td>
+                <td class="p-3">Silvester-Gala (Nur mit Reservierung)</td>
+                <td class="p-3"><span class="px-2 py-0.5 rounded bg-amber-100 text-amber-800 font-bold">Abend: 18:00 - 01:00 Uhr</span></td>
+                <td class="p-3"><button onclick="this.closest('tr').remove()" class="text-rose-600 hover:underline">Entfernen</button></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- TAB 3: SPEISEKARTE & KI MANAGER -->
+    <div id="tab-menu" class="tab-content hidden space-y-8">
+      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+        <div>
+          <h2 class="font-serif text-2xl font-bold text-stone-900">Speisekarte & Gerichte-Manager</h2>
+          <p class="text-stone-600 text-sm">Verwalten Sie Speisen, Versionen & automatische Übersetzungen.</p>
+        </div>
+        <div class="flex items-center gap-3">
+          <button onclick="translateMenuToEn()" class="px-4 py-2.5 rounded-xl bg-indigo-600 text-white font-bold text-xs hover:bg-indigo-700 transition-all flex items-center gap-1.5 shadow-sm">
+            <span>🇬🇧 Auto-Übersetzung (EN)</span>
+          </button>
+          <button onclick="publishMenu()" class="px-5 py-2.5 rounded-xl bg-emerald-600 text-white font-bold text-xs hover:bg-emerald-700 transition-all flex items-center gap-1.5 shadow-md">
+            <span>🚀 Speisekarte Veröffentlichen</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Menu Version Control Bar -->
+      <div class="bg-stone-900 text-white p-6 rounded-3xl space-y-3">
+        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+          <div>
+            <span class="text-xs uppercase tracking-widest text-amber-400 font-bold">Revisions-Verwaltung</span>
+            <h3 class="font-serif text-lg font-bold">Aktuelle Version: <span id="current-menu-version" class="text-amber-400">v2.4 (Herbstkarte 2026)</span></h3>
+          </div>
+          <div class="flex items-center gap-2">
+            <select id="menu-version-select" class="bg-stone-800 text-stone-200 border border-stone-700 text-xs rounded-xl px-3 py-2 font-medium">
+              <option value="v2.4">v2.4 - Herbstkarte 2026 (Aktiv)</option>
+              <option value="v2.3">v2.3 - Sommerkarte 2026</option>
+              <option value="v2.2">v2.2 - Frühjahrskarte 2026</option>
+            </select>
+            <button onclick="restoreMenuVersion()" class="px-4 py-2 rounded-xl bg-amber-500 text-stone-950 font-bold text-xs hover:bg-amber-400 transition-all">
+              Version wiederherstellen
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Menu Category Editor -->
+      <div class="space-y-6" id="menu-categories-container">
+        <!-- Antipasti -->
+        <div class="bg-white p-6 rounded-3xl border border-stone-200 shadow-sm space-y-4">
+          <div class="flex items-center justify-between border-b border-stone-100 pb-3">
+            <h3 class="font-serif text-xl font-bold text-stone-900">Antipasti (Vorspeisen)</h3>
+            <button onclick="addDish('antipasti')" class="text-xs text-[#C85A32] font-bold hover:underline">+ Gericht hinzufügen</button>
+          </div>
+          <div class="space-y-3" id="category-antipasti">
+            <div class="p-4 rounded-2xl bg-stone-50 border border-stone-200 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+              <div class="space-y-1 flex-1">
+                <div class="flex items-center gap-2">
+                  <input type="text" value="Carpaccio di Manzo Con Tartufo" class="dish-title font-serif font-bold text-stone-900 text-base bg-transparent border-b border-stone-300 focus:outline-none focus:border-[#C85A32] w-full max-w-md">
+                  <span class="text-xs font-mono font-bold text-stone-600">18.50 €</span>
+                </div>
+                <input type="text" value="Hauchdünnes Rinderfilet mit frischem Trüffel, Ruccola & Parmigiano Reggiano" class="dish-desc text-xs text-stone-600 bg-transparent border-b border-stone-200 focus:outline-none focus:border-[#C85A32] w-full">
+                <p class="dish-en text-[11px] text-indigo-600 font-medium italic mt-1">EN: Wafer-thin beef tenderloin with fresh truffle, arugula & Parmigiano Reggiano</p>
+              </div>
+              <div class="flex items-center gap-2">
+                <button onclick="aiPolishDish(this)" class="px-3 py-1 rounded-lg bg-amber-100 text-amber-900 text-[11px] font-bold hover:bg-amber-200">✨ KI-Text schärfen</button>
+                <button onclick="this.closest('.p-4').remove()" class="text-rose-600 text-xs hover:underline">Löschen</button>
+              </div>
+            </div>
+            <div class="p-4 rounded-2xl bg-stone-50 border border-stone-200 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+              <div class="space-y-1 flex-1">
+                <div class="flex items-center gap-2">
+                  <input type="text" value="Bruschetta Classica della Casa" class="dish-title font-serif font-bold text-stone-900 text-base bg-transparent border-b border-stone-300 focus:outline-none focus:border-[#C85A32] w-full max-w-md">
+                  <span class="text-xs font-mono font-bold text-stone-600">9.80 €</span>
+                </div>
+                <input type="text" value="Röstbrot mit fruchtigen San-Marzano-Tomaten, Knoblauch & frischem Basilikum" class="dish-desc text-xs text-stone-600 bg-transparent border-b border-stone-200 focus:outline-none focus:border-[#C85A32] w-full">
+                <p class="dish-en text-[11px] text-indigo-600 font-medium italic mt-1">EN: Toasted bread with fruity San Marzano tomatoes, garlic & fresh basil</p>
+              </div>
+              <div class="flex items-center gap-2">
+                <button onclick="aiPolishDish(this)" class="px-3 py-1 rounded-lg bg-amber-100 text-amber-900 text-[11px] font-bold hover:bg-amber-200">✨ KI-Text schärfen</button>
+                <button onclick="this.closest('.p-4').remove()" class="text-rose-600 text-xs hover:underline">Löschen</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Primi Piatti -->
+        <div class="bg-white p-6 rounded-3xl border border-stone-200 shadow-sm space-y-4">
+          <div class="flex items-center justify-between border-b border-stone-100 pb-3">
+            <h3 class="font-serif text-xl font-bold text-stone-900">Primi Piatti (Hausgemachte Pasta & Risotto)</h3>
+            <button onclick="addDish('primi')" class="text-xs text-[#C85A32] font-bold hover:underline">+ Gericht hinzufügen</button>
+          </div>
+          <div class="space-y-3" id="category-primi">
+            <div class="p-4 rounded-2xl bg-stone-50 border border-stone-200 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+              <div class="space-y-1 flex-1">
+                <div class="flex items-center gap-2">
+                  <input type="text" value="Tagliolini Alessandras Secret Recipe" class="dish-title font-serif font-bold text-stone-900 text-base bg-transparent border-b border-stone-300 focus:outline-none focus:border-[#C85A32] w-full max-w-md">
+                  <span class="text-xs font-mono font-bold text-stone-600">21.50 €</span>
+                </div>
+                <input type="text" value="Frische Bandnudeln im Parmesanlaib geschwenkt mit Salsiccia & Waldpilzen" class="dish-desc text-xs text-stone-600 bg-transparent border-b border-stone-200 focus:outline-none focus:border-[#C85A32] w-full">
+                <p class="dish-en text-[11px] text-indigo-600 font-medium italic mt-1">EN: Fresh ribbon pasta tossed in a parmesan wheel with Salsiccia & wild mushrooms</p>
+              </div>
+              <div class="flex items-center gap-2">
+                <button onclick="aiPolishDish(this)" class="px-3 py-1 rounded-lg bg-amber-100 text-amber-900 text-[11px] font-bold hover:bg-amber-200">✨ KI-Text schärfen</button>
+                <button onclick="this.closest('.p-4').remove()" class="text-rose-600 text-xs hover:underline">Löschen</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- TAB 4: GUTSCHEIN VERWALTUNG -->
+    <div id="tab-vouchers" class="tab-content hidden space-y-8">
+      <div>
+        <h2 class="font-serif text-2xl font-bold text-stone-900">Gutschein-Verwaltung & Versand</h2>
+        <p class="text-stone-600 text-sm">Verfolgen Sie Gutschein-Bestellungen (Abholung vs. Postalisch) und lösen Sie Versandbestätigungen aus.</p>
+      </div>
+
+      <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm space-y-6">
+        <div class="flex items-center justify-between">
+          <h3 class="font-serif text-xl font-bold text-stone-900">Bestellte Gutscheine</h3>
+          <span class="text-xs text-stone-500">Insgesamt: 3 offene Aufträge</span>
+        </div>
+
+        <div class="overflow-x-auto">
+          <table class="w-full text-left text-xs text-stone-700">
+            <thead class="bg-stone-100 text-stone-900 uppercase font-bold text-[10px]">
+              <tr>
+                <th class="p-3 rounded-l-xl">Code</th>
+                <th class="p-3">Käufer</th>
+                <th class="p-3">Wert</th>
+                <th class="p-3">Art</th>
+                <th class="p-3">Sendungsnummer (DHL)</th>
+                <th class="p-3">Status</th>
+                <th class="p-3 rounded-r-xl">Aktion / Email Trigger</th>
+              </tr>
+            </thead>
+            <tbody id="vouchers-tbody" class="divide-y divide-stone-100">
+              <!-- Voucher 1 -->
+              <tr>
+                <td class="p-3 font-mono font-bold text-[#C85A32]">#GUT-2026-881</td>
+                <td class="p-3 font-bold">Stefan Hoffmann<br/><span class="text-[10px] text-stone-500">stefan.h@gmail.com</span></td>
+                <td class="p-3 font-bold text-stone-900">100,00 €</td>
+                <td class="p-3"><span class="px-2 py-0.5 rounded bg-indigo-100 text-indigo-900 font-bold">Postalisch</span></td>
+                <td class="p-3">
+                  <input type="text" value="358910482019" id="track-881" class="px-2 py-1 border border-stone-300 rounded font-mono text-[11px] w-36">
+                </td>
+                <td class="p-3"><span id="vstatus-881" class="px-2 py-0.5 rounded bg-amber-100 text-amber-800 font-bold">Offen</span></td>
+                <td class="p-3">
+                  <button onclick="triggerVoucherEmail('881', 'Stefan Hoffmann', 'Postalisch')" class="px-3 py-1.5 rounded-lg bg-stone-900 text-white font-bold text-[11px] hover:bg-stone-800 transition-all">
+                    📧 Versandbestätigung senden
+                  </button>
+                </td>
+              </tr>
+
+              <!-- Voucher 2 -->
+              <tr>
+                <td class="p-3 font-mono font-bold text-[#C85A32]">#GUT-2026-882</td>
+                <td class="p-3 font-bold">Laura Meyer<br/><span class="text-[10px] text-stone-500">l.meyer@goslar-mail.de</span></td>
+                <td class="p-3 font-bold text-stone-900">50,00 €</td>
+                <td class="p-3"><span class="px-2 py-0.5 rounded bg-emerald-100 text-emerald-900 font-bold">Abholung vor Ort</span></td>
+                <td class="p-3 text-stone-400 italic">Entfällt (Abholung)</td>
+                <td class="p-3"><span id="vstatus-882" class="px-2 py-0.5 rounded bg-amber-100 text-amber-800 font-bold">Bereitstellen</span></td>
+                <td class="p-3">
+                  <button onclick="triggerVoucherEmail('882', 'Laura Meyer', 'Abholung')" class="px-3 py-1.5 rounded-lg bg-emerald-600 text-white font-bold text-[11px] hover:bg-emerald-700 transition-all">
+                    🔔 "Abholbereit" Mail senden
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- TAB 5: AKTIVITÄTS & REVISONSLOG -->
+    <div id="tab-history" class="tab-content hidden space-y-8">
+      <div>
+        <h2 class="font-serif text-2xl font-bold text-stone-900">Aktivitäts- & Revisions-Logbuch</h2>
+        <p class="text-stone-600 text-sm">Lückenlose Protokollierung aller Änderungen mit Reviewer-ID und Zeitstempel.</p>
+      </div>
+
+      <div class="bg-white p-8 rounded-3xl border border-stone-200 shadow-sm space-y-4">
+        <div class="overflow-x-auto">
+          <table class="w-full text-left text-xs text-stone-700">
+            <thead class="bg-stone-100 text-stone-900 uppercase font-bold text-[10px]">
+              <tr>
+                <th class="p-3 rounded-l-xl">Zeitstempel</th>
+                <th class="p-3">Modul</th>
+                <th class="p-3">Aktion</th>
+                <th class="p-3">Reviewer ID & Name</th>
+                <th class="p-3 rounded-r-xl">Details</th>
+              </tr>
+            </thead>
+            <tbody id="history-log-tbody" class="divide-y divide-stone-100 font-mono text-[11px]">
+              <tr>
+                <td class="p-3 text-stone-500">16.09.2026, 18:40:12</td>
+                <td class="p-3"><span class="px-2 py-0.5 bg-amber-100 text-amber-900 font-bold rounded">Menu</span></td>
+                <td class="p-3 font-bold text-stone-900">Speisekarte v2.4 veröffentlicht</td>
+                <td class="p-3">ENZO-STAFF-01 (Alessandra Campisi)</td>
+                <td class="p-3 text-stone-600">Herbstkarte 2026 freigegeben für Website</td>
+              </tr>
+              <tr>
+                <td class="p-3 text-stone-500">16.09.2026, 17:10:05</td>
+                <td class="p-3"><span class="px-2 py-0.5 bg-emerald-100 text-emerald-900 font-bold rounded">Reservierung</span></td>
+                <td class="p-3 font-bold text-stone-900">Tisch #RES-098 bestätigt</td>
+                <td class="p-3">ENZO-STAFF-01 (Alessandra Campisi)</td>
+                <td class="p-3 text-stone-600">Bestätigung & KI-Mail an Familie Bauer gesendet</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <!-- AI RESPONSE DRAFTING MODAL -->
+  <div id="ai-modal" class="fixed inset-0 bg-stone-950/70 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
+    <div class="bg-white max-w-2xl w-full rounded-3xl p-8 shadow-2xl border border-stone-200 space-y-6 animate-fadeIn">
+      <div class="flex items-center justify-between border-b border-stone-100 pb-4">
+        <div>
+          <span class="text-xs uppercase font-bold text-[#C85A32] tracking-wider">KI-Kommunikationsassistent</span>
+          <h3 id="modal-title" class="font-serif text-2xl font-bold text-stone-900">Personalisierte Gast-Antwort</h3>
+        </div>
+        <button onclick="closeAiModal()" class="text-stone-400 hover:text-stone-900 text-2xl font-bold">&times;</button>
+      </div>
+
+      <div class="space-y-4 text-xs">
+        <div class="p-3 rounded-2xl bg-stone-50 border border-stone-200 grid grid-cols-2 gap-2 text-stone-700">
+          <p><strong>Gast:</strong> <span id="modal-guest-name">---</span></p>
+          <p><strong>Aktion:</strong> <span id="modal-action-type" class="font-bold">---</span></p>
+          <p><strong>Termin & Pax:</strong> <span id="modal-details">---</span></p>
+          <p><strong>Tonalität:</strong> Herzlich Sizilianisch (Enzo Guidelines)</p>
+        </div>
+
+        <div class="space-y-1.5">
+          <div class="flex items-center justify-between">
+            <label class="font-bold text-stone-900 uppercase text-[10px]">Generierter Antwort-Entwurf (Edtierbar)</label>
+            <button onclick="regenerateAiDraft()" class="text-[#C85A32] font-bold hover:underline flex items-center gap-1">
+              <span>✨ Entwurf neu generieren</span>
+            </button>
+          </div>
+          <textarea id="ai-draft-textarea" rows="7" class="w-full p-4 rounded-2xl border border-stone-300 font-sans text-xs text-stone-800 leading-relaxed focus:ring-2 focus:ring-[#C85A32] focus:outline-none"></textarea>
+        </div>
+      </div>
+
+      <div class="flex justify-end gap-3 border-t border-stone-100 pt-4">
+        <button onclick="closeAiModal()" class="px-5 py-2.5 rounded-xl bg-stone-100 text-stone-700 font-bold text-xs hover:bg-stone-200">
+          Abbrechen
+        </button>
+        <button onclick="confirmAndSendDraft()" class="px-6 py-2.5 rounded-xl bg-[#C85A32] text-white font-bold text-xs hover:bg-[#b04d2a] shadow-md">
+          ✓ Bestätigen & Antwort senden
+        </button>
+      </div>
+    </div>
+  </div>
+
+</Layout>
+
+<script>
+  // Tab Navigation Logic
+  const tabs = document.querySelectorAll('.admin-tab');
+  const tabContents = document.querySelectorAll('.tab-content');
+
+  tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      const target = tab.getAttribute('data-tab');
+      
+      tabs.forEach(t => {
+        t.classList.remove('bg-[#C85A32]', 'text-white', 'shadow-sm');
+        t.classList.add('bg-white', 'text-stone-700');
+      });
+      tab.classList.remove('bg-white', 'text-stone-700');
+      tab.classList.add('bg-[#C85A32]', 'text-white', 'shadow-sm');
+
+      tabContents.forEach(content => {
+        if (content.id === `tab-${target}`) {
+          content.classList.remove('hidden');
+        } else {
+          content.classList.add('hidden');
+        }
+      });
+    });
+  });
+
+  // Global App State for Modal
+  let currentResId = '';
+  let currentGuest = '';
+  let currentAction = '';
+
+  (window as any).openAiDraftModal = function(id: string, name: string, action: string, datetime: string, pax: string, notes: string) {
+    currentResId = id;
+    currentGuest = name;
+    currentAction = action;
+
+    const modal = document.getElementById('ai-modal');
+    const title = document.getElementById('modal-title');
+    const guestName = document.getElementById('modal-guest-name');
+    const actionType = document.getElementById('modal-action-type');
+    const details = document.getElementById('modal-details');
+    const textarea = document.getElementById('ai-draft-textarea') as HTMLTextAreaElement;
+
+    if (guestName) guestName.textContent = name;
+    if (actionType) actionType.textContent = action === 'Confirm' ? 'Tischbestätigung' : 'Absage / Alternativtermin';
+    if (details) details.textContent = `${datetime} (${pax})`;
+
+    if (textarea) {
+      if (action === 'Confirm') {
+        textarea.value = `Liebe/r ${name},\n\nherzlichen Dank für Ihre Anfrage! Sehr gerne bestätigen wir Ihren Tisch in der Trattoria da Enzo am ${datetime} für ${pax}.\n\nIhre Wünsche (${notes}) haben wir sehr gerne vermerkt. Wir freuen uns darauf, Sie bei uns in der Bäckerstraße 18 begrüßen zu dürfen und Sie mit kulinarischen Köstlichkeiten aus Sizilien zu verwöhnen!\n\nHerzlichst,\nAlessandra & das Casa da Enzo Team`;
+      } else {
+        textarea.value = `Liebe/r ${name},\n\nvielen Dank für Ihr Interesse an der Trattoria da Enzo. Leider sind für den gewünschten Termin (${datetime}) bereits alle Tische ausgebucht.\n\nSehr gerne bieten wir Ihnen eine Alternative an demselben Tag um 21:00 Uhr oder am Folgetag an. Antworten Sie einfach auf diese Nachricht.\n\nHerzliche Grüße,\nAlessandra & das Casa da Enzo Team`;
+      }
+    }
+
+    if (modal) modal.classList.remove('hidden');
+  };
+
+  (window as any).closeAiModal = function() {
+    const modal = document.getElementById('ai-modal');
+    if (modal) modal.classList.add('hidden');
+  };
+
+  (window as any).regenerateAiDraft = function() {
+    const textarea = document.getElementById('ai-draft-textarea') as HTMLTextAreaElement;
+    if (!textarea) return;
+    if (currentAction === 'Confirm') {
+      textarea.value = `Caro/a ${currentGuest},\n\nBenvenuto! Wir freuen uns außerordentlich, Ihnen mitteilen zu können, dass Ihr Tisch am ${new Date().toLocaleDateString('de-DE')} reserviert ist.\n\nAlessandra bereitet bereits die besten Zutaten vor. Bis ganz bald in Goslar!\n\nSaluti festosi,\nEnzo & Familie`;
+    } else {
+      textarea.value = `Liebe/r ${currentGuest},\n\nleider lässt unsere Kapazität am gewünschten Abend keine weitere Reservierung zu. Wir möchten Sie jedoch unbedingt bei Ihrem nächsten Goslar-Besuch begrüßen!\n\nHerzliche Grüße,\nTrattoria da Enzo`;
+    }
+  };
+
+  (window as any).confirmAndSendDraft = function() {
+    // Hide card
+    const card = document.getElementById(`res-card-${currentResId}`);
+    if (card) card.remove();
+
+    // Add to history table
+    const tbody = document.getElementById('processed-res-tbody');
+    if (tbody) {
+      const tr = document.createElement('tr');
+      const nowStr = new Date().toLocaleString('de-DE');
+      tr.innerHTML = `
+        <td class="p-3 font-mono font-bold">#RES-${currentResId}</td>
+        <td class="p-3 font-semibold">${currentGuest}</td>
+        <td class="p-3">Anfrage bearbeitet</td>
+        <td class="p-3">${currentAction === 'Confirm' ? 'Bestätigt' : 'Abgelehnt'}</td>
+        <td class="p-3"><span class="px-2 py-0.5 rounded ${currentAction === 'Confirm' ? 'bg-emerald-100 text-emerald-800' : 'bg-rose-100 text-rose-800'} font-bold">${currentAction === 'Confirm' ? 'Bestätigt' : 'Abgelehnt'}</span></td>
+        <td class="p-3 text-stone-500">ENZO-STAFF-01 (Alessandra) • ${nowStr}</td>
+      `;
+      tbody.prepend(tr);
+    }
+
+    // Add entry to Activity Log
+    const logTbody = document.getElementById('history-log-tbody');
+    if (logTbody) {
+      const tr = document.createElement('tr');
+      const nowStr = new Date().toLocaleString('de-DE');
+      tr.innerHTML = `
+        <td class="p-3 text-stone-500">${nowStr}</td>
+        <td class="p-3"><span class="px-2 py-0.5 bg-emerald-100 text-emerald-900 font-bold rounded">Reservierung</span></td>
+        <td class="p-3 font-bold text-stone-900">Tisch #RES-${currentResId} (${currentGuest}) ${currentAction === 'Confirm' ? 'Bestätigt' : 'Abgelehnt'}</td>
+        <td class="p-3">ENZO-STAFF-01 (Alessandra Campisi)</td>
+        <td class="p-3 text-stone-600">KI-Antwort verfasst & per E-Mail/WhatsApp gesendet</td>
+      `;
+      logTbody.prepend(tr);
+    }
+
+    // Update badge count
+    const badge = document.getElementById('pending-badge');
+    if (badge) {
+      const count = document.querySelectorAll('#reservations-list > div').length;
+      badge.textContent = `${count} Neu`;
+    }
+
+    (window as any).closeAiModal();
+    alert(`E-Mail & Statusmeldung für ${currentGuest} erfolgreich versendet!`);
+  };
+
+  // Vacation Toggle Logic
+  (window as any).saveVacationSettings = function() {
+    const toggle = document.getElementById('vacation-toggle') as HTMLInputElement;
+    const textInput = document.getElementById('vacation-text-input') as HTMLInputElement;
+    const dot = document.getElementById('vacation-status-dot');
+    const text = document.getElementById('vacation-status-text');
+
+    if (toggle && dot && text) {
+      if (toggle.checked) {
+        dot.className = "w-2.5 h-2.5 rounded-full bg-amber-400 animate-pulse";
+        text.innerHTML = `Website Status: <strong class="text-amber-400">Betriebsferien Banner Aktiv</strong>`;
+        alert(`Betriebsferien-Banner auf Website aktiviert!\nHinweis: "${textInput ? textInput.value : ''}"`);
+      } else {
+        dot.className = "w-2.5 h-2.5 rounded-full bg-emerald-400";
+        text.innerHTML = `Website Status: <strong>Normalbetrieb</strong>`;
+        alert("Betriebsferien-Banner deaktiviert.");
+      }
+    }
+  };
+
+  // Menu Manager Logic
+  (window as any).restoreMenuVersion = function() {
+    const select = document.getElementById('menu-version-select') as HTMLSelectElement;
+    const currentVer = document.getElementById('current-menu-version');
+    if (select && currentVer) {
+      currentVer.textContent = select.value + ' (Wiederhergestellt)';
+      alert(`Speisekarte erfolgreich auf Version ${select.value} zurückgesetzt!`);
+    }
+  };
+
+  (window as any).translateMenuToEn = function() {
+    alert("KI-Übersetzung abgeschlossen! Alle deutschen Gerichtsbezeichnungen und Beschreibungen besitzen nun ein englisches Pendant.");
+  };
+
+  (window as any).publishMenu = function() {
+    const logTbody = document.getElementById('history-log-tbody');
+    if (logTbody) {
+      const tr = document.createElement('tr');
+      const nowStr = new Date().toLocaleString('de-DE');
+      tr.innerHTML = `
+        <td class="p-3 text-stone-500">${nowStr}</td>
+        <td class="p-3"><span class="px-2 py-0.5 bg-amber-100 text-amber-900 font-bold rounded">Menu</span></td>
+        <td class="p-3 font-bold text-stone-900">Speisekarte live geschaltet</td>
+        <td class="p-3">ENZO-STAFF-01 (Alessandra Campisi)</td>
+        <td class="p-3 text-stone-600">Änderungen auf casa-daenzo.de veröffentlicht</td>
+      `;
+      logTbody.prepend(tr);
+    }
+    alert("🎉 Speisekarte erfolgreich auf der Website veröffentlicht!");
+  };
+
+  (window as any).aiPolishDish = function(btn: HTMLElement) {
+    const parent = btn.closest('.p-4');
+    if (!parent) return;
+    const desc = parent.querySelector('.dish-desc') as HTMLInputElement;
+    if (desc) {
+      desc.value = desc.value + " • Frisch zubereitet mit feinstem Olivenöl aus Sizilien.";
+      alert("Gerichts-Beschreibung verfeinert!");
+    }
+  };
+
+  (window as any).addDish = function(cat: string) {
+    const container = document.getElementById(`category-${cat}`);
+    if (!container) return;
+    const div = document.createElement('div');
+    div.className = "p-4 rounded-2xl bg-stone-50 border border-stone-200 flex flex-col md:flex-row items-start md:items-center justify-between gap-4";
+    div.innerHTML = `
+      <div class="space-y-1 flex-1">
+        <div class="flex items-center gap-2">
+          <input type="text" value="Neues Gericht" class="dish-title font-serif font-bold text-stone-900 text-base bg-transparent border-b border-stone-300 focus:outline-none focus:border-[#C85A32] w-full max-w-md">
+          <span class="text-xs font-mono font-bold text-stone-600">14.50 €</span>
+        </div>
+        <input type="text" value="Beschreibung der Zutaten und Zubereitung" class="dish-desc text-xs text-stone-600 bg-transparent border-b border-stone-200 focus:outline-none focus:border-[#C85A32] w-full">
+        <p class="dish-en text-[11px] text-indigo-600 font-medium italic mt-1">EN: New dish description</p>
+      </div>
+      <div class="flex items-center gap-2">
+        <button onclick="aiPolishDish(this)" class="px-3 py-1 rounded-lg bg-amber-100 text-amber-900 text-[11px] font-bold hover:bg-amber-200">✨ KI-Text schärfen</button>
+        <button onclick="this.closest('.p-4').remove()" class="text-rose-600 text-xs hover:underline">Löschen</button>
+      </div>
+    `;
+    container.appendChild(div);
+  };
+
+  // Voucher Logic
+  (window as any).triggerVoucherEmail = function(id: string, name: string, type: string) {
+    const trackInput = document.getElementById(`track-${id}`) as HTMLInputElement;
+    const trackingCode = trackInput ? trackInput.value : '';
+    const statusSpan = document.getElementById(`vstatus-${id}`);
+
+    if (statusSpan) {
+      statusSpan.className = "px-2 py-0.5 rounded bg-emerald-100 text-emerald-800 font-bold";
+      statusSpan.textContent = type === 'Postalisch' ? 'Versendet' : 'Abholbereit';
+    }
+
+    const logTbody = document.getElementById('history-log-tbody');
+    if (logTbody) {
+      const tr = document.createElement('tr');
+      const nowStr = new Date().toLocaleString('de-DE');
+      tr.innerHTML = `
+        <td class="p-3 text-stone-500">${nowStr}</td>
+        <td class="p-3"><span class="px-2 py-0.5 bg-indigo-100 text-indigo-900 font-bold rounded">Gutschein</span></td>
+        <td class="p-3 font-bold text-stone-900">Gutschein #GUT-2026-${id} ${type === 'Postalisch' ? 'versendet' : 'bereitgestellt'}</td>
+        <td class="p-3">ENZO-STAFF-01 (Alessandra Campisi)</td>
+        <td class="p-3 text-stone-600">${type === 'Postalisch' ? `DHL Sendungsnr: ${trackingCode}` : 'Abhol-E-Mail gesendet'}</td>
+      `;
+      logTbody.prepend(tr);
+    }
+
+    if (type === 'Postalisch') {
+      alert(`E-Mail an ${name} gesendet!\nInhalt: Ihre Gutschein-Bestellung ist auf dem Weg. DHL Sendungsnummer: ${trackingCode}`);
+    } else {
+      alert(`E-Mail an ${name} gesendet!\nInhalt: Ihr Gutschein liegt in der Trattoria da Enzo abholbereit.`);
+    }
+  };
+
+  // Add Day Override
+  (window as any).addDayOverride = function() {
+    const date = prompt("Datum der Sonderregelung (z.B. 03.10.2026):");
+    if (!date) return;
+    const reason = prompt("Anlass / Grund (z.B. Tag der Deutschen Einheit):");
+    const status = prompt("Öffnungszeit / Status (z.B. Durchgehend geöffnet 12:00-23:00 Uhr):");
+
+    const tbody = document.getElementById('overrides-tbody');
+    if (tbody && date && reason && status) {
+      const tr = document.createElement('tr');
+      tr.innerHTML = `
+        <td class="p-3 font-bold">${date}</td>
+        <td class="p-3">${reason}</td>
+        <td class="p-3"><span class="px-2 py-0.5 rounded bg-amber-100 text-amber-800 font-bold">${status}</span></td>
+        <td class="p-3"><button onclick="this.closest('tr').remove()" class="text-rose-600 hover:underline">Entfernen</button></td>
+      `;
+      tbody.appendChild(tr);
+    }
+  };
+</script>

src/pages/trattoria.astro

@@ -0,0 +1,721 @@
+---
+import Layout from '../layouts/Layout.astro';
+import EviivoWidget from '../components/EviivoWidget.astro';
+
+const menuCategories = [
+  {
+    id: 'antipasti',
+    title: 'Antipasti & Vorspeisen',
+    items: [
+      {
+        title: 'Bruschetta Tradizionale',
+        price: '7,50 €',
+        desc: 'Geröstetes Altstadtbrot mit Würfeln von sizilianischen Strauchtomaten, Knoblauch, frischem Basilikum und Extra Vergine Olivenöl.',
+        tags: ['Vegetarisch', 'Klassiker']
+      },
+      {
+        title: 'Carpaccio di Manzo',
+        price: '14,90 €',
+        desc: 'Hauchdünne Scheiben vom Rinderfilet mit Rucola, Hobeln von Parmigiano Reggiano DOP und nativem Zitronenöl.',
+        tags: ['Empfehlung']
+      },
+      {
+        title: 'Antipasto Misto "da Enzo"',
+        price: '17,50 €',
+        desc: 'Große Vorspeisenplatte für Feinschmecker: Caponata Siciliana, Prosciutto di Parma, Burrata, gegrilltes Gemüse und Oliven.',
+        tags: ['Für 2 Personen', 'Spezialität']
+      }
+    ]
+  },
+  {
+    id: 'primi',
+    title: 'Primi Piatti – Hausgemachte Pasta',
+    items: [
+      {
+        title: 'Spaghetti alla Norma',
+        price: '14,50 €',
+        desc: 'Der Sizilien-Klassiker: Hausgemachte Spaghetti mit gebratenen Auberginen, fruchtiger San Marzano Tomatensauce und Würfeln von Ricotta Salata.',
+        tags: ['Vegetarisch', 'Sizilianisch']
+      },
+      {
+        title: 'Tagliatelle con Ragù di Cervo',
+        price: '16,80 €',
+        desc: 'Eigene Bandnudeln mit sanft geschmorter Wildsoße vom Harzer Hirsch, Wacholderbeeren und edlen Kräutern.',
+        tags: ['Regional & Saison']
+      },
+      {
+        title: 'Ravioli Ricotta e Spinaci',
+        price: '15,90 €',
+        desc: 'Handgemachte Teigtaschen mit cremig-frischer Ricotta-Spinat-Füllung in schäumender Salbeibutter und Parmesan.',
+        tags: ['Hausgemacht']
+      }
+    ]
+  },
+  {
+    id: 'secondi',
+    title: 'Secondi Piatti – Fleisch & Fisch',
+    items: [
+      {
+        title: 'Scaloppine al Limone',
+        price: '22,50 €',
+        desc: 'Zarte Kalbsmedaillons in erfrischender Zitronen-Weißweinsauce, serviert mit getrüffeltem Kartoffelpüree und Marktgemüse.',
+        tags: ['Spezialität']
+      },
+      {
+        title: 'Filetto di Spigola alla Siciliana',
+        price: '24,90 €',
+        desc: 'Kross gebratenes Wolfsbarschfilet mit Datteltomaten, Pantelleria-Kapern, schwarzen Oliven und frischem Oregano.',
+        tags: ['Fangfrisch']
+      }
+    ]
+  },
+  {
+    id: 'dolci',
+    title: 'Dolci – Verführerische Desserts',
+    items: [
+      {
+        title: 'Tiramisù Tradizionale',
+        price: '6,90 €',
+        desc: 'Nach dem Originalrezept von Vater Vincenzo "Enzo": Löffelbiskuits in kräftigem Espresso, feiner Mascarponecreme und bitterem Kakao.',
+        tags: ['Originalrezept 1980']
+      },
+      {
+        title: 'Cannoli Siciliani',
+        price: '7,50 €',
+        desc: 'Zwei knusprige Röllchen gefüllt mit gesüßtem Schafskäse-Ricotta, gehackten Bronte-Pistazien und Schokoladendrops.',
+        tags: ['100% Sizilien']
+      }
+    ]
+  },
+  {
+    id: 'vini',
+    title: 'Vini d\'Italia – Erlesene Weine',
+    items: [
+      {
+        title: 'Nero d’Avola Sicilia DOC',
+        price: 'Glas 6,80 € / Fl. 23,00 €',
+        desc: 'Kräftiger Rotwein aus den sonnenverwöhnten Hängen Südsiziliens. Vollmundig mit Noten von reifen Waldbeeren und Gewürzen.',
+        tags: ['Rotwein']
+      },
+      {
+        title: 'Grillo Sicilia DOC',
+        price: 'Glas 6,50 € / Fl. 22,00 €',
+        desc: 'Erfrischender, eleganter Weißwein mit Aromen von Zitrusfrüchten, weißem Pfirsich und feiner Mineralität.',
+        tags: ['Weißwein']
+      }
+    ]
+  }
+];
+---
+
+<Layout
+  title="Trattoria da Enzo | Italienische Kulinarik & Tischreservierung in Goslar"
+  description="Trattoria da Enzo in Goslar: Echte sizilianische Küche, hausgemachte Pasta, historische Atmosphäre seit 1980. Speisekarte ansehen, Tisch reservieren & Gutscheine kaufen."
+>
+  <!-- Hero Section -->
+  <section class="relative bg-stone-950 text-white py-20 lg:py-28 overflow-hidden">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+      <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
+        <div class="lg:col-span-7 space-y-6">
+          <span class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-semibold uppercase tracking-wider border border-amber-500/30">
+            🇮🇹 Cucina Siciliana in Goslar • Seit 1980
+          </span>
+          <h1 class="font-serif text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-white leading-[1.15]">
+            Trattoria da Enzo <br/>
+            <span class="text-amber-400">Echte Leidenschaft auf dem Teller</span>
+          </h1>
+          <p class="text-stone-300 text-base sm:text-lg leading-relaxed max-w-2xl">
+            Im Erdgeschoss unseres historischen Altstadt-Fachwerkhauses schlägt das Herz der Familie Campisi. Hier servieren wir unverfälschte sizilianische Rezepte, tagesfrisch handgemachte Pasta und beste Weine.
+          </p>
+          <div class="pt-4 flex flex-wrap gap-4">
+            <a href="#reservierung" class="px-8 py-4 rounded-2xl bg-[#C85A32] text-white font-bold text-base hover:bg-[#b04d2a] shadow-lg transition-all">
+              Tisch online reservieren →
+            </a>
+            <a href="#speisekarte" class="px-8 py-4 rounded-2xl bg-stone-800 text-stone-200 border border-stone-700 font-semibold text-base hover:bg-stone-700 transition-all">
+              Speisekarte ansehen ↓
+            </a>
+          </div>
+        </div>
+
+        <!-- Right Quick Info Card -->
+        <div class="lg:col-span-5">
+          <div class="bg-stone-900 border border-stone-800 rounded-3xl p-8 space-y-6 shadow-2xl">
+            <h2 class="font-serif text-2xl font-bold text-amber-400">Öffnungszeiten & Lage</h2>
+            <div class="space-y-4 text-sm text-stone-300 border-t border-stone-800 pt-4">
+              <div class="flex justify-between items-center">
+                <span class="font-semibold text-white">Dienstag – Sonntag:</span>
+                <span>17:00 – 22:30 Uhr</span>
+              </div>
+              <div class="flex justify-between items-center text-stone-400">
+                <span>Mittags-Schicht:</span>
+                <span>Sa & So 12:00 – 14:30 Uhr</span>
+              </div>
+              <div class="flex justify-between items-center text-rose-400">
+                <span class="font-semibold">Montag:</span>
+                <span>Ruhetag</span>
+              </div>
+              <div class="pt-3 border-t border-stone-800 space-y-1 text-xs text-stone-400">
+                <p>📍 <strong>Adresse:</strong> Bäckerstraße 18, 38640 Goslar</p>
+                <p>📞 <strong>Telefon:</strong> +49 1520 7483196</p>
+                <p>🏨 <strong>Hotelgäste:</strong> Bevorzugte Tischreservierung inklusive!</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Alessandra & Story Section -->
+  <section class="py-20 bg-[#FAF6F0]">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="bg-white rounded-3xl p-8 sm:p-12 border border-stone-200/80 shadow-md space-y-8">
+        <div class="text-center space-y-3">
+          <span class="text-xs font-bold uppercase tracking-widest text-[#C85A32]">Familientradition seit 1980</span>
+          <h2 class="font-serif text-3xl sm:text-4xl font-bold text-stone-900">
+            Die Geschichte von Alessandra & der Trattoria
+          </h2>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center pt-4">
+          <div class="md:col-span-1 rounded-2xl bg-stone-200 aspect-[4/5] flex items-center justify-center text-stone-500 font-serif text-center p-6 bg-gradient-to-br from-stone-800 to-stone-950 text-white shadow-inner">
+            <div>
+              <p class="font-serif text-2xl font-bold text-amber-400">Alessandra</p>
+              <p class="text-xs text-stone-300 uppercase tracking-widest mt-1">Campisi</p>
+              <p class="text-xs text-stone-400 mt-4 italic">"Kochen ist Hingabe und Erinnerung an Zuhause."</p>
+            </div>
+          </div>
+
+          <div class="md:col-span-2 space-y-4 text-stone-700 text-sm sm:text-base leading-relaxed">
+            <p>
+              Als unser Vater <strong>Vincenzo "Enzo" Campisi</strong> im Jahr 1980 die Trattoria in der Goslarer Bäckerstraße eröffnete, wollte er ein Stück unberührtes Sizilien in den Harz bringen. Kein Chichi, keine industriellen Fertigsaucen – sondern ehrliches Handwerk, sonnengeküsste Zutaten und die typisch mediterrane Herzlichkeit.
+            </p>
+            <p>
+              Heute führt Tochter <strong>Alessandra Campisi</strong> mit derselben Leidenschaft die Küche. Jedes Nudelgericht wird täglich frisch zubereitet, das Olivenöl stammt von Familienplantagen aus Sizilien, und das Fleisch kommt direkt von ausgewählten Höfen aus der Harzer Region.
+            </p>
+            <div class="p-4 rounded-xl bg-amber-50 border border-amber-200 text-stone-800 text-xs font-medium flex items-center gap-3">
+              <span class="text-xl">🍷</span>
+              <span>"Ein Abend in der Trattoria soll sich anfühlen wie ein Kurzurlaub bei Freunden in Palermo."</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Speisekarte Preview Section -->
+  <section id="speisekarte" class="py-20 bg-stone-900 text-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="text-center max-w-3xl mx-auto mb-16 space-y-3">
+        <span class="text-xs font-bold uppercase tracking-widest text-amber-400">Kulinarischer Auszug</span>
+        <h2 class="font-serif text-3xl sm:text-4xl font-bold">Unsere Speisekarte Preview</h2>
+        <p class="text-stone-300 text-base">
+          Frische Zutaten, hausgemachte Teigwaren und klassische Spezialitäten.
+        </p>
+      </div>
+
+      <!-- Menu Grid -->
+      <div class="space-y-12">
+        {menuCategories.map((cat) => (
+          <div class="space-y-6">
+            <div class="border-b border-stone-800 pb-3 flex items-center justify-between">
+              <h3 class="font-serif text-2xl font-bold text-amber-400">{cat.title}</h3>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {cat.items.map((item) => (
+                <div class="bg-stone-800/80 border border-stone-700/60 rounded-2xl p-6 space-y-3 flex flex-col justify-between hover:border-amber-500/50 transition-colors">
+                  <div>
+                    <div class="flex items-start justify-between gap-2">
+                      <h4 class="font-serif text-lg font-bold text-white">{item.title}</h4>
+                      <span class="text-amber-400 font-bold text-sm whitespace-nowrap">{item.price}</span>
+                    </div>
+                    <p class="text-stone-300 text-xs mt-2 leading-relaxed">{item.desc}</p>
+                  </div>
+                  <div class="flex flex-wrap gap-2 pt-2">
+                    {item.tags.map((tag) => (
+                      <span class="px-2.5 py-0.5 rounded-full bg-stone-700/80 text-amber-300 text-[10px] font-semibold uppercase tracking-wider">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- Interactive Tischreservierungs-Formular -->
+  <section id="reservierung" class="py-20 bg-[#FAF6F0] border-t border-stone-200">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="bg-white rounded-3xl p-8 sm:p-12 border border-stone-200/90 shadow-xl space-y-8">
+        <div class="text-center space-y-2">
+          <span class="px-3 py-1 rounded-full bg-amber-100 text-[#C85A32] text-xs font-bold uppercase tracking-wider">
+            Online Reservierung
+          </span>
+          <h2 class="font-serif text-3xl sm:text-4xl font-bold text-stone-900">
+            Tisch in der Trattoria reservieren
+          </h2>
+          <p class="text-stone-600 text-sm">
+            Sichere dir deinen Platz bei Alessandra. Sofortige Bestätigung & direkte Bearbeitung.
+          </p>
+        </div>
+
+        <form id="reservation-form" class="space-y-6">
+          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Datum -->
+            <div class="space-y-1">
+              <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Datum</label>
+              <input
+                type="date"
+                id="res-date"
+                required
+                class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"
+              />
+            </div>
+
+            <!-- Schicht -->
+            <div class="space-y-1">
+              <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Schicht</label>
+              <select
+                id="res-shift"
+                required
+                class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"
+              >
+                <option value="Abendschicht (17:00 – 22:00 Uhr)" selected>Abendschicht (17:00 – 22:00 Uhr)</option>
+                <option value="Mittagsschicht (12:00 – 14:30 Uhr, Sa/So)">Mittagsschicht (12:00 – 14:30 Uhr, Sa/So)</option>
+              </select>
+            </div>
+
+            <!-- Uhrzeit -->
+            <div class="space-y-1">
+              <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Uhrzeit</label>
+              <select
+                id="res-time"
+                required
+                class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"
+              >
+                <option value="17:00">17:00 Uhr</option>
+                <option value="17:30">17:30 Uhr</option>
+                <option value="18:00" selected>18:00 Uhr</option>
+                <option value="18:30">18:30 Uhr</option>
+                <option value="19:00">19:00 Uhr</option>
+                <option value="19:30">19:30 Uhr</option>
+                <option value="20:00">20:00 Uhr</option>
+                <option value="20:30">20:30 Uhr</option>
+              </select>
+            </div>
+
+            <!-- Personen -->
+            <div class="space-y-1">
+              <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Personenzahl</label>
+              <select
+                id="res-guests"
+                required
+                class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"
+              >
+                <option value="1 Person">1 Person</option>
+                <option value="2 Personen" selected>2 Personen</option>
+                <option value="3 Personen">3 Personen</option>
+                <option value="4 Personen">4 Personen</option>
+                <option value="5 Personen">5 Personen</option>
+                <option value="6+ Personen">6+ Personen (Gruppe)</option>
+              </select>
+            </div>
+
+            <!-- Name -->
+            <div class="space-y-1">
+              <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Name / Ansprechpartner</label>
+              <input
+                type="text"
+                id="res-name"
+                placeholder="z.B. Maria Muster"
+                required
+                class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"
+              />
+            </div>
+
+            <!-- Telefon -->
+            <div class="space-y-1">
+              <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Telefonnummer</label>
+              <input
+                type="tel"
+                id="res-phone"
+                placeholder="z.B. +49 170 1234567"
+                required
+                class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"
+              />
+            </div>
+          </div>
+
+          <!-- E-Mail -->
+          <div class="space-y-1">
+            <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">E-Mail-Adresse</label>
+            <input
+              type="email"
+              id="res-email"
+              placeholder="deine.email@beispiel.de"
+              required
+              class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"
+            />
+          </div>
+
+          <!-- Anmerkungen -->
+          <div class="space-y-1">
+            <label class="block text-xs font-semibold uppercase tracking-wider text-stone-700">Anmerkungen / Sonderwünsche</label>
+            <textarea
+              id="res-notes"
+              rows="3"
+              placeholder="z.B. Hotelgast in Suite 1, Hochstuhl benötigt, Allergien..."
+              class="w-full px-4 py-3 rounded-xl border border-stone-300 text-stone-900 text-sm focus:ring-2 focus:ring-[#C85A32] focus:outline-none"
+            ></textarea>
+          </div>
+
+          <button
+            type="submit"
+            class="w-full py-4 rounded-xl bg-[#C85A32] text-white font-bold text-base hover:bg-[#b04d2a] shadow-lg hover:shadow-xl transition-all"
+          >
+            Tischreservierung anfragen →
+          </button>
+        </form>
+
+        <!-- Dynamic Success Confirmation Modal/Box -->
+        <div id="res-success" class="hidden p-6 rounded-2xl bg-emerald-50 border border-emerald-300 space-y-4 text-emerald-900">
+          <div class="flex items-center gap-3">
+            <span class="text-2xl">✅</span>
+            <div>
+              <h3 class="font-serif text-xl font-bold">Vielen Dank für deine Reservierungsanfrage!</h3>
+              <p class="text-xs text-emerald-800">Deine Daten wurden übermittelt. Wir senden dir in Kürze deine Bestätigung.</p>
+            </div>
+          </div>
+          <div id="res-summary-box" class="p-4 rounded-xl bg-white border border-emerald-200 text-xs text-stone-800 space-y-1 font-mono"></div>
+          <a
+            id="res-whatsapp-btn"
+            href="#"
+            target="_blank"
+            class="inline-flex items-center justify-center gap-2 w-full py-3 rounded-xl bg-emerald-600 text-white font-bold text-sm hover:bg-emerald-700 transition-colors shadow-md"
+          >
+            <span>💬 Zusätzlicher 1-Klick WhatsApp Versand an Alessandra</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Gutschein-Shop (Voucher Shop) Section -->
+  <section id="gutscheine" class="py-20 bg-stone-900 text-white">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
+      <div class="text-center space-y-3">
+        <span class="px-4 py-1.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-semibold uppercase tracking-wider border border-amber-500/30">
+          Geschenkidee
+        </span>
+        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-stone-100">
+          Trattoria Gutschein-Shop
+        </h2>
+        <p class="text-stone-300 text-base max-w-2xl mx-auto">
+          Verschenke italienische Gaumenfreuden im Herzen von Goslar. Wähle Betrag, Motiv und Versandoption.
+        </p>
+      </div>
+
+      <form id="voucher-form" class="bg-stone-800 border border-stone-700 rounded-3xl p-8 sm:p-12 space-y-8 shadow-2xl">
+        <!-- 1. Gutschein-Betrag -->
+        <div class="space-y-4">
+          <label class="block text-xs font-bold uppercase tracking-wider text-amber-400">1. Gutschein-Betrag wählen</label>
+          <div class="grid grid-cols-2 sm:grid-cols-5 gap-3">
+            {[35, 50, 75, 100, 200].map((amt, idx) => (
+              <label class={`voucher-amount-card cursor-pointer p-4 rounded-2xl border text-center transition-all ${
+                idx === 1 ? 'border-amber-400 bg-amber-500/20 text-amber-300 font-bold' : 'border-stone-700 bg-stone-900/80 text-stone-300 hover:border-stone-500'
+              }`}>
+                <input
+                  type="radio"
+                  name="voucher_amount"
+                  value={amt}
+                  checked={idx === 1}
+                  class="sr-only"
+                />
+                <span class="block text-2xl font-serif font-bold">{amt} €</span>
+                <span class="block text-[10px] text-stone-400 uppercase mt-1">Trattoria Wert</span>
+              </label>
+            ))}
+          </div>
+        </div>
+
+        <!-- 2. Gutschein-Motiv -->
+        <div class="space-y-4">
+          <label class="block text-xs font-bold uppercase tracking-wider text-amber-400">2. Trattoria-Motiv wählen</label>
+          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <label class="voucher-motif-card cursor-pointer p-5 rounded-2xl border border-amber-400 bg-amber-500/20 text-white space-y-2 transition-all">
+              <input type="radio" name="voucher_motif" value="Sizilianischer Genussabend" checked class="sr-only" />
+              <div class="text-2xl">🍷🍝</div>
+              <h4 class="font-serif font-bold text-amber-300 text-sm">Sizilianischer Genussabend</h4>
+              <p class="text-xs text-stone-300">Klassisches Design mit Pasta, Wein & Toskana-Flair.</p>
+            </label>
+
+            <label class="voucher-motif-card cursor-pointer p-5 rounded-2xl border border-stone-700 bg-stone-900/80 text-stone-300 space-y-2 hover:border-stone-500 transition-all">
+              <input type="radio" name="voucher_motif" value="Gourmet & Fine Dining" class="sr-only" />
+              <div class="text-2xl">✨🥂</div>
+              <h4 class="font-serif font-bold text-stone-100 text-sm">Gourmet & Fine Dining</h4>
+              <p class="text-xs text-stone-400">Edles Gold-Schwarz-Design mit Casa da Enzo Siegel.</p>
+            </label>
+
+            <label class="voucher-motif-card cursor-pointer p-5 rounded-2xl border border-stone-700 bg-stone-900/80 text-stone-300 space-y-2 hover:border-stone-500 transition-all">
+              <input type="radio" name="voucher_motif" value="Romantik & Altstadt-Charme" class="sr-only" />
+              <div class="text-2xl">🕯️❤️</div>
+              <h4 class="font-serif font-bold text-stone-100 text-sm">Romantik & Altstadt-Charme</h4>
+              <p class="text-xs text-stone-400">Stimmungsvolles Motiv für romantische Abende zu zweit.</p>
+            </label>
+          </div>
+        </div>
+
+        <!-- 3. Übergabe / Versandart -->
+        <div class="space-y-4 border-t border-stone-700 pt-6">
+          <label class="block text-xs font-bold uppercase tracking-wider text-amber-400">3. Übergabe & Versandoption</label>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <label class="delivery-option-card cursor-pointer p-4 rounded-2xl border border-amber-400 bg-amber-500/20 text-white flex items-center gap-3">
+              <input type="radio" name="delivery_type" value="pickup" checked class="accent-amber-400" />
+              <div>
+                <span class="block text-sm font-bold">Abholung vor Ort in Goslar</span>
+                <span class="block text-xs text-stone-300">Kostenlos in der Bäckerstraße 18</span>
+              </div>
+            </label>
+
+            <label class="delivery-option-card cursor-pointer p-4 rounded-2xl border border-stone-700 bg-stone-900/80 text-stone-300 flex items-center gap-3">
+              <input type="radio" name="delivery_type" value="post" class="accent-amber-400" />
+              <div>
+                <span class="block text-sm font-bold text-stone-100">Postversand (+5,00 €)</span>
+                <span class="block text-xs text-stone-400">Gedruckter Edel-Gutschein per Post</span>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <!-- Address Fields (Shown only when Postversand is selected) -->
+        <div id="address-fields" class="hidden space-y-4 border-t border-stone-700 pt-6 bg-stone-900/60 p-6 rounded-2xl">
+          <h4 class="font-serif text-base font-bold text-amber-300">Lieferadresse für Postversand</h4>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div class="space-y-1">
+              <label class="block text-xs text-stone-300 uppercase">Empfänger Name</label>
+              <input type="text" id="v-street-name" placeholder="Erika Musterfrau" class="w-full px-4 py-2.5 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:outline-none focus:border-amber-400" />
+            </div>
+            <div class="space-y-1">
+              <label class="block text-xs text-stone-300 uppercase">Straße & Hausnummer</label>
+              <input type="text" id="v-street-addr" placeholder="Musterstraße 42" class="w-full px-4 py-2.5 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:outline-none focus:border-amber-400" />
+            </div>
+            <div class="space-y-1">
+              <label class="block text-xs text-stone-300 uppercase">Postleitzahl & Ort</label>
+              <input type="text" id="v-city" placeholder="12345 Musterstadt" class="w-full px-4 py-2.5 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:outline-none focus:border-amber-400" />
+            </div>
+            <div class="space-y-1">
+              <label class="block text-xs text-stone-300 uppercase">Land</label>
+              <input type="text" id="v-country" value="Deutschland" class="w-full px-4 py-2.5 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:outline-none focus:border-amber-400" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Buyer Contact Info -->
+        <div class="space-y-4 border-t border-stone-700 pt-6">
+          <h4 class="font-serif text-base font-bold text-amber-300">Kontaktdaten des Käufers</h4>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div class="space-y-1">
+              <label class="block text-xs text-stone-300 uppercase">Dein Name</label>
+              <input type="text" id="v-buyer-name" required placeholder="Vor- und Nachname" class="w-full px-4 py-3 rounded-xl bg-stone-900 border border-stone-700 text-white text-sm focus:outline-none focus:border-amber-400" />
+            </div>
+            <div class="space-y-1">
+              <label class="block text-xs text-stone-300 uppercase">Deine E-Mail-Adresse</label>
+              <input type="email" id="v-buyer-email" required placeholder="email@beispiel.de" class="w-full px-4 py-3 rounded-xl bg-stone-900 border border-stone-700 text-white text-sm focus:outline-none focus:border-amber-400" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Total Price Summary Bar -->
+        <div class="p-6 rounded-2xl bg-stone-950 border border-stone-700 flex flex-col sm:flex-row items-center justify-between gap-4">
+          <div>
+            <span class="text-xs uppercase text-stone-400 font-semibold block">Gesamtsumme inkl. MwSt.</span>
+            <span id="voucher-total-display" class="font-serif text-3xl font-bold text-amber-400">50,00 €</span>
+          </div>
+
+          <button
+            type="submit"
+            class="px-8 py-4 rounded-xl bg-amber-500 text-stone-950 font-bold text-base hover:bg-amber-400 transition-all shadow-lg"
+          >
+            Gutschein jetzt verbindlich bestellen →
+          </button>
+        </div>
+      </form>
+
+      <!-- Voucher Success Box -->
+      <div id="voucher-success" class="hidden p-8 rounded-3xl bg-amber-50 border border-amber-300 text-stone-900 space-y-4">
+        <div class="flex items-center gap-3">
+          <span class="text-3xl">🎉</span>
+          <div>
+            <h3 class="font-serif text-2xl font-bold text-[#C85A32]">Gutschein-Bestellung erfolgreich empfangen!</h3>
+            <p class="text-stone-700 text-sm">Vielen Dank. Wir bearbeiten deine Bestellung umgehend.</p>
+          </div>
+        </div>
+        <div id="voucher-summary-box" class="p-4 rounded-xl bg-white border border-amber-200 text-xs text-stone-800 space-y-1 font-mono"></div>
+      </div>
+    </div>
+  </section>
+
+</Layout>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    // Set default date to tomorrow
+    const dateInput = document.getElementById('res-date') as HTMLInputElement;
+    if (dateInput) {
+      const tomorrow = new Date();
+      tomorrow.setDate(tomorrow.getDate() + 1);
+      dateInput.value = tomorrow.toISOString().split('T')[0];
+    }
+
+    // Reservation Form logic
+    const resForm = document.getElementById('reservation-form') as HTMLFormElement;
+    const resSuccess = document.getElementById('res-success');
+    const resSummaryBox = document.getElementById('res-summary-box');
+    const resWhatsappBtn = document.getElementById('res-whatsapp-btn') as HTMLAnchorElement;
+
+    if (resForm) {
+      resForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const date = (document.getElementById('res-date') as HTMLInputElement).value;
+        const shift = (document.getElementById('res-shift') as HTMLSelectElement).value;
+        const time = (document.getElementById('res-time') as HTMLSelectElement).value;
+        const guests = (document.getElementById('res-guests') as HTMLSelectElement).value;
+        const name = (document.getElementById('res-name') as HTMLInputElement).value;
+        const phone = (document.getElementById('res-phone') as HTMLInputElement).value;
+        const email = (document.getElementById('res-email') as HTMLInputElement).value;
+        const notes = (document.getElementById('res-notes') as HTMLTextAreaElement).value;
+
+        if (resSummaryBox) {
+          resSummaryBox.innerHTML = `
+            <p><strong>Gast:</strong> ${name}</p>
+            <p><strong>Datum & Zeit:</strong> ${date} um ${time} Uhr (${shift})</p>
+            <p><strong>Personen:</strong> ${guests}</p>
+            <p><strong>Kontakt:</strong> ${phone} | ${email}</p>
+            ${notes ? `<p><strong>Anmerkungen:</strong> ${notes}</p>` : ''}
+          `;
+        }
+
+        const message = encodeURIComponent(
+          `Hallo Alessandra, ich möchte einen Tisch in der Trattoria reservieren:\n\n` +
+          `• Name: ${name}\n` +
+          `• Datum: ${date} um ${time} Uhr\n` +
+          `• Personen: ${guests}\n` +
+          `• Telefon: ${phone}\n` +
+          (notes ? `• Anmerkung: ${notes}` : '')
+        );
+
+        if (resWhatsappBtn) {
+          resWhatsappBtn.href = `https://wa.me/4915207483196?text=${message}`;
+        }
+
+        resForm.classList.add('hidden');
+        if (resSuccess) resSuccess.classList.remove('hidden');
+      });
+    }
+
+    // Voucher Form Interactive Logic
+    const voucherForm = document.getElementById('voucher-form') as HTMLFormElement;
+    const deliveryRadios = document.querySelectorAll<HTMLInputElement>('input[name="delivery_type"]');
+    const addressFields = document.getElementById('address-fields');
+    const totalDisplay = document.getElementById('voucher-total-display');
+    const amountCards = document.querySelectorAll<HTMLElement>('.voucher-amount-card');
+    const motifCards = document.querySelectorAll<HTMLElement>('.voucher-motif-card');
+    const voucherSuccess = document.getElementById('voucher-success');
+    const voucherSummaryBox = document.getElementById('voucher-summary-box');
+
+    let selectedAmount = 50;
+    let shippingFee = 0;
+
+    function updateTotal() {
+      const total = selectedAmount + shippingFee;
+      if (totalDisplay) {
+        totalDisplay.textContent = `${total.toFixed(2).replace('.', ',')} €`;
+      }
+    }
+
+    // Amount radio card styling & value handler
+    amountCards.forEach((card) => {
+      card.addEventListener('click', () => {
+        const input = card.querySelector('input') as HTMLInputElement;
+        if (input) {
+          input.checked = true;
+          selectedAmount = parseInt(input.value, 10);
+          amountCards.forEach((c) => {
+            c.classList.remove('border-amber-400', 'bg-amber-500/20', 'text-amber-300', 'font-bold');
+            c.classList.add('border-stone-700', 'bg-stone-900/80', 'text-stone-300');
+          });
+          card.classList.remove('border-stone-700', 'bg-stone-900/80', 'text-stone-300');
+          card.classList.add('border-amber-400', 'bg-amber-500/20', 'text-amber-300', 'font-bold');
+          updateTotal();
+        }
+      });
+    });
+
+    // Motif card selection
+    motifCards.forEach((card) => {
+      card.addEventListener('click', () => {
+        const input = card.querySelector('input') as HTMLInputElement;
+        if (input) {
+          input.checked = true;
+          motifCards.forEach((c) => {
+            c.classList.remove('border-amber-400', 'bg-amber-500/20');
+            c.classList.add('border-stone-700', 'bg-stone-900/80');
+          });
+          card.classList.remove('border-stone-700', 'bg-stone-900/80');
+          card.classList.add('border-amber-400', 'bg-amber-500/20');
+        }
+      });
+    });
+
+    // Delivery Radio Toggle
+    deliveryRadios.forEach((radio) => {
+      radio.addEventListener('change', () => {
+        if (radio.value === 'post') {
+          shippingFee = 5;
+          if (addressFields) addressFields.classList.remove('hidden');
+        } else {
+          shippingFee = 0;
+          if (addressFields) addressFields.classList.add('hidden');
+        }
+        updateTotal();
+      });
+    });
+
+    if (voucherForm) {
+      voucherForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const motif = (document.querySelector('input[name="voucher_motif"]:checked') as HTMLInputElement)?.value || 'Standard';
+        const deliveryType = (document.querySelector('input[name="delivery_type"]:checked') as HTMLInputElement)?.value;
+        const buyerName = (document.getElementById('v-buyer-name') as HTMLInputElement).value;
+        const buyerEmail = (document.getElementById('v-buyer-email') as HTMLInputElement).value;
+
+        let addressInfo = 'Abholung vor Ort in der Trattoria (Bäckerstraße 18, Goslar)';
+        if (deliveryType === 'post') {
+          const sName = (document.getElementById('v-street-name') as HTMLInputElement).value;
+          const sAddr = (document.getElementById('v-street-addr') as HTMLInputElement).value;
+          const sCity = (document.getElementById('v-city') as HTMLInputElement).value;
+          const sCountry = (document.getElementById('v-country') as HTMLInputElement).value;
+          addressInfo = `Postversand (+5,00 €) an: ${sName}, ${sAddr}, ${sCity}, ${sCountry}`;
+        }
+
+        if (voucherSummaryBox) {
+          voucherSummaryBox.innerHTML = `
+            <p><strong>Gutscheinwert:</strong> ${selectedAmount},00 €</p>
+            <p><strong>Motiv:</strong> ${motif}</p>
+            <p><strong>Käufer:</strong> ${buyerName} (${buyerEmail})</p>
+            <p><strong>Versandart:</strong> ${addressInfo}</p>
+            <p><strong>Gesamtsumme:</strong> ${(selectedAmount + shippingFee).toFixed(2).replace('.', ',')} €</p>
+          `;
+        }
+
+        voucherForm.classList.add('hidden');
+        if (voucherSuccess) voucherSuccess.classList.remove('hidden');
+      });
+    }
+  });
+</script>

src/styles/global.css

@@ -4,21 +4,90 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --bg-dark: #1A1816;
+  --bg-card: #24211D;
+  --bg-elevated: #2E2A25;
+  --accent-wood: #D4A373;
+  --trattoria-red: #C85A32;
+  --apartments-green: #2D5A43;
+  --text-main: #E6D5C3;
+  --text-muted: #A3978B;
+  --border-subtle: rgba(212, 163, 115, 0.15);
+}
+
 @layer base {
   html {
     font-family: 'Plus Jakarta Sans', sans-serif;
-    background-color: #FAF6F0;
+    background-color: var(--bg-dark);
-    color: #1C1917;
+    color: var(--text-main);
     scroll-behavior: smooth;
   }
   
+  body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+  }
+
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Playfair Display', Georgia, serif;
   }
 }
 
-.text-gradient-gold {
+.text-gradient-wood {
-  background: linear-gradient(135deg, #C8963E 0%, #D96B43 100%);
+  background: linear-gradient(135deg, #D4A373 0%, #E6C5A2 50%, #C85A32 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+.text-gradient-green {
+  background: linear-gradient(135deg, #4E8B6B 0%, #2D5A43 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.text-gradient-red {
+  background: linear-gradient(135deg, #E2724A 0%, #C85A32 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Custom stone/wood textured card style */
+.stone-card {
+  background-color: #24211D;
+  border: 1px solid rgba(212, 163, 115, 0.12);
+  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
+}
+
+.stone-card-hover {
+  transition: all 0.3s ease;
+}
+
+.stone-card-hover:hover {
+  border-color: rgba(212, 163, 115, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.7);
+}
+
+/* Glassmorphism for dark headers and floats */
+.glass-dark {
+  background: rgba(26, 24, 22, 0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(212, 163, 115, 0.12);
+}
+
+/* Custom scrollbar for dark theme */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #1A1816;
+}
+::-webkit-scrollbar-thumb {
+  background: #38322C;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #D4A373;
+}

tailwind.config.mjs

@@ -4,14 +4,19 @@ export default {
   theme: {
     extend: {
       colors: {
+        bg: {
+          dark: '#1A1816',
+          card: '#24211D',
+          elevated: '#2E2A25',
+          border: '#38322C',
+        },
         brand: {
-          terracotta: '#C85A32',
+          terracotta: '#C85A32', // Trattoria Rot
-          gold: '#C8963E',
+          emerald: '#2D5A43',    // Apartments Grün
-          olive: '#5A6B43',
+          accent: '#D4A373',     // Warm Mediterranean wood/stone accent
-          dark: '#1C1917',
+          gold: '#D4A373',
-          warmbg: '#FAF6F0',
+          dark: '#1A1816',
-          cardbg: '#FFFFFF',
+          cardbg: '#24211D',
-          accent: '#FF6600',
         }
       },
       fontFamily: {