NEusortierung der Eigenschaften der Ferienwohnungen.

static/css/style.css

@@ -259,6 +259,11 @@ img { max-width: 100%; height: auto; display: block; }
 .highlight-card h3 { margin-bottom: 0.5rem; font-size: 1.05rem; }
 .highlight-card p  { color: var(--text-muted); font-size: 0.9rem; }
 
+/* ===== Belegungsplan (Übersicht ein-/ausblenden) ===== */
+.belegungsplan-toggle { margin: 1rem 0 2.5rem; }
+.belegungsplan-frame { margin-top: 1.5rem; }
+.belegungsplan-frame[hidden] { display: none; }
+
 /* ===== FeWo Grid ===== */
 .fewo-preview { background: var(--bg-alt); padding: 4rem 0; }
 .fewo-preview h2, .fewo-preview > .container > h2 { margin-bottom: 2rem; font-size: 1.8rem; }
@@ -305,8 +310,33 @@ img { max-width: 100%; height: auto; display: block; }
 .fewo-header h1 { margin-bottom: 0.75rem; }
 .fewo-content { margin: 2rem 0; }
 .fewo-content h2 { margin: 1.5rem 0 0.5rem; font-size: 1.2rem; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
-.fewo-content ul { padding-left: 1.5rem; }
-.fewo-content li { margin-bottom: 0.2rem; }
+/* ===== Karten-Grid (wiederverwendet für Umfeld + Ausstattung) ===== */
+.spec-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.25rem;
+}
+.spec-block {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.25rem 1.5rem;
+}
+.spec-block h3 { color: var(--primary); font-size: 1.05rem; margin-bottom: 0.5rem; }
+.spec-block ul { padding-left: 1.25rem; margin: 0; }
+.spec-block li { margin-bottom: 0.2rem; }
+
+/* ===== Umfeld (gemeinsame Ausstattung aller Ferienwohnungen) ===== */
+.umfeld { margin-top: 3rem; scroll-margin-top: calc(var(--nav-height) + 1rem); }
+.umfeld-intro { color: var(--text-muted); margin-bottom: 1.5rem; }
+.umfeld-gruppe { margin-top: 2rem; }
+.umfeld-gruppe:first-of-type { margin-top: 0; }
+.umfeld-gruppe h2 { margin-bottom: 1rem; font-size: 1.4rem; color: var(--primary); }
+
+/* ===== Ausstattung (einzelne Ferienwohnung) ===== */
+.ausstattung { margin-top: 2rem; }
+.ausstattung h2 { margin: 1.5rem 0 1rem; font-size: 1.2rem; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
+.ausstattung-hinweis { margin-top: 1.5rem; font-size: 0.95rem; color: var(--text-muted); }
 
 /* ===== Ausflugsziele-Gruppen ===== */
 .ausflug-gruppe { margin-top: 3rem; }

static/js/main.js

@@ -26,16 +26,34 @@ document.querySelectorAll('.slider').forEach(slider => {
   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 }));
+// Belegungsplan ein-/ausblenden (externes webplanner-Skript erst bei Klick nachladen)
+const belBtn   = document.getElementById('belegungsplan-btn');
+const belFrame = document.getElementById('belegungsplan-frame');
+if (belBtn && belFrame) {
+  const labelClosed = belBtn.textContent.trim();
+  let loaded = false;
+  belBtn.addEventListener('click', () => {
+    const willShow = belFrame.hidden;
+    if (willShow && !loaded) {
+      const script = document.createElement('script');
+      script.src = belFrame.dataset.src;
+      belFrame.appendChild(script);
+      loaded = true;
+    }
+    belFrame.hidden = !willShow;
+    belBtn.setAttribute('aria-expanded', String(willShow));
+    belBtn.textContent = willShow ? 'Belegungsplan ausblenden' : labelClosed;
+  });
+}
+
+// Lightbox für Bildergalerien (eine Lightbox, beliebig viele Galerien pro Seite)
+const lightbox = document.querySelector('.lightbox');
+if (lightbox) {
   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 images  = [];
   let current = 0;
 
   const show = i => {
@@ -43,7 +61,9 @@ if (lightboxGallery && lightbox) {
     imgEl.src = images[current].src;
     imgEl.alt = images[current].alt;
   };
-  const open = i => {
+  const open = (gallery, i) => {
+    images = Array.from(gallery.querySelectorAll('.lightbox-trigger'))
+      .map(a => ({ src: a.href, alt: a.querySelector('img').alt }));
     show(i);
     lightbox.hidden = false;
     document.body.style.overflow = 'hidden';
@@ -53,7 +73,11 @@ if (lightboxGallery && lightbox) {
     document.body.style.overflow = '';
   };
 
-  triggers.forEach((a, i) => a.addEventListener('click', e => { e.preventDefault(); open(i); }));
+  document.querySelectorAll('.lightbox-gallery').forEach(gallery => {
+    Array.from(gallery.querySelectorAll('.lightbox-trigger')).forEach((a, i) => {
+      a.addEventListener('click', e => { e.preventDefault(); open(gallery, i); });
+    });
+  });
   closeBtn.addEventListener('click', close);
   prevBtn.addEventListener('click', () => show(current - 1));
   nextBtn.addEventListener('click', () => show(current + 1));