Bildervorschau als Slider für jede Fehrienwohnung

static/js/main.js

@@ -25,3 +25,43 @@ document.querySelectorAll('.slider').forEach(slider => {
   if (prev) prev.addEventListener('click', () => track.scrollBy({ left: -step(), behavior: 'smooth' }));
   if (next) next.addEventListener('click', () => track.scrollBy({ left: step(), behavior: 'smooth' }));
 });
+
+// Lightbox für Bildergalerien (Ferienwohnungen)
+const lightboxGallery = document.querySelector('.lightbox-gallery');
+const lightbox        = document.querySelector('.lightbox');
+if (lightboxGallery && lightbox) {
+  const triggers = Array.from(lightboxGallery.querySelectorAll('.lightbox-trigger'));
+  const images   = triggers.map(a => ({ src: a.href, alt: a.querySelector('img').alt }));
+  const imgEl    = lightbox.querySelector('.lightbox-img');
+  const closeBtn = lightbox.querySelector('.lightbox-close');
+  const prevBtn  = lightbox.querySelector('.lightbox-prev');
+  const nextBtn  = lightbox.querySelector('.lightbox-next');
+  let current = 0;
+
+  const show = i => {
+    current = (i + images.length) % images.length;
+    imgEl.src = images[current].src;
+    imgEl.alt = images[current].alt;
+  };
+  const open = i => {
+    show(i);
+    lightbox.hidden = false;
+    document.body.style.overflow = 'hidden';
+  };
+  const close = () => {
+    lightbox.hidden = true;
+    document.body.style.overflow = '';
+  };
+
+  triggers.forEach((a, i) => a.addEventListener('click', e => { e.preventDefault(); open(i); }));
+  closeBtn.addEventListener('click', close);
+  prevBtn.addEventListener('click', () => show(current - 1));
+  nextBtn.addEventListener('click', () => show(current + 1));
+  lightbox.addEventListener('click', e => { if (e.target === lightbox) close(); });
+  document.addEventListener('keydown', e => {
+    if (lightbox.hidden) return;
+    if (e.key === 'Escape') close();
+    if (e.key === 'ArrowLeft') show(current - 1);
+    if (e.key === 'ArrowRight') show(current + 1);
+  });
+}