fix(js): improve lightbox WebP fallback error handler

- Use .off('error') to prevent stacking error handlers - Simplify fallback logic: only replace .webp → .png on error - Prevents infinite error loops
fix(images): remove unused masonry.js and fix broken references
2026-05-15 07:57:09 +00:00 · 2026-05-15 07:57:09 +00:00 · 2026-05-15 07:57:09 +00:00 · 2026-05-15 07:57:09 +00:00
44 changed files with 216 additions and 189 deletions
--- a/bilder/Außenansicht-2-small.webp
+++ b/bilder/Außenansicht-2-small.webp
--- a/bilder/Außenansicht-2.webp
+++ b/bilder/Außenansicht-2.webp
--- a/bilder/Bad-2-small.webp
+++ b/bilder/Bad-2-small.webp
--- a/bilder/Bad-2.webp
+++ b/bilder/Bad-2.webp
--- a/bilder/Bad-3-small.webp
+++ b/bilder/Bad-3-small.webp
--- a/bilder/Bad-3.webp
+++ b/bilder/Bad-3.webp
--- a/bilder/Bad-4-small.webp
+++ b/bilder/Bad-4-small.webp
--- a/bilder/Bad-4.webp
+++ b/bilder/Bad-4.webp
--- a/bilder/Bad-small.webp
+++ b/bilder/Bad-small.webp
--- a/bilder/Bad.webp
+++ b/bilder/Bad.webp
--- a/bilder/Kinderzimmer
+++ b/bilder/Kinderzimmer
--- a/bilder/Kinderzimmer
+++ b/bilder/Kinderzimmer
--- a/bilder/Kinderzimmer
+++ b/bilder/Kinderzimmer
--- a/bilder/Kinderzimmer
+++ b/bilder/Kinderzimmer
--- a/bilder/Kinderzimmer-small.webp
+++ b/bilder/Kinderzimmer-small.webp
--- a/bilder/Kinderzimmer.webp
+++ b/bilder/Kinderzimmer.webp
--- a/bilder/Küche
+++ b/bilder/Küche
--- a/bilder/Küche
+++ b/bilder/Küche
--- a/bilder/grundrisse/Dachboden
+++ b/bilder/grundrisse/Dachboden
--- a/bilder/grundrisse/Dachboden
+++ b/bilder/grundrisse/Dachboden
--- a/bilder/grundrisse/Dachboden
+++ b/bilder/grundrisse/Dachboden
--- a/bilder/grundrisse/Dachboden
+++ b/bilder/grundrisse/Dachboden
--- a/bilder/grundrisse/EG
+++ b/bilder/grundrisse/EG
--- a/bilder/grundrisse/EG
+++ b/bilder/grundrisse/EG
--- a/bilder/grundrisse/EG-small.webp
+++ b/bilder/grundrisse/EG-small.webp
--- a/bilder/grundrisse/EG.webp
+++ b/bilder/grundrisse/EG.webp
--- a/bilder/grundrisse/OG
+++ b/bilder/grundrisse/OG
--- a/bilder/grundrisse/OG
+++ b/bilder/grundrisse/OG
--- a/bilder/grundrisse/OG
+++ b/bilder/grundrisse/OG
--- a/bilder/grundrisse/OG
+++ b/bilder/grundrisse/OG
--- a/bilder/grundrisse/OG
+++ b/bilder/grundrisse/OG
--- a/bilder/grundrisse/OG
+++ b/bilder/grundrisse/OG
--- a/grundriss-small.webp
+++ b/grundriss-small.webp
--- a/bilder/grundrisse/OG
+++ b/bilder/grundrisse/OG
--- a/bilder/kinderzimmer
+++ b/bilder/kinderzimmer
--- a/bilder/kinderzimmer
+++ b/bilder/kinderzimmer
--- a/bilder/schlafzimmer-small.webp
+++ b/bilder/schlafzimmer-small.webp
--- a/bilder/schlafzimmer.webp
+++ b/bilder/schlafzimmer.webp
--- a/bilder/wohnzimmer2-small.webp
+++ b/bilder/wohnzimmer2-small.webp
--- a/bilder/wohnzimmer2.webp
+++ b/bilder/wohnzimmer2.webp
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -13,6 +13,7 @@ module.exports = [
      sourceType: "script",
      globals: {
        ...globals.browser,
+        ...globals.jquery,
      },
    },
    plugins: {
--- a/index.php
+++ b/index.php
@@ -182,6 +182,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    </script>

    <link rel="stylesheet" href="fonts/fonts.css" />
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="css/haus-schleusingen.css" />
  </head>
  <body>
@@ -209,7 +210,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
      <div
        class="hero-bg"
        id="heroBg"
-        style="background-image: url(bilder/Außenansicht-2.png)"
+        style="background-image: url(bilder/Außenansicht-2.webp)"
      ></div>
      <div class="hero-overlay"></div>
      <div class="hero-content" id="heroContent">
@@ -282,7 +283,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        </div>
      </div>
      <div class="intro-img" data-animate>
-        <img src="bilder/wohnzimmer2.png" alt="Wohnzimmer" />
+        <picture>
+          <source srcset="bilder/wohnzimmer2.webp" type="image/webp">
+          <img src="bilder/wohnzimmer2.png" alt="Wohnzimmer" loading="lazy" />
+        </picture>
        <div class="intro-img-badge">Wohnzimmer · 42,6 m²</div>
      </div>
    </section>
@@ -297,55 +301,88 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
      <div class="masonry-grid">
        <div class="grid-sizer"></div>

-        <div class="grid-item" data-img="bilder/Außenansicht-2.png">
-          <img src="bilder/Außenansicht-2-small.png" alt="Außenansicht" />
+        <div class="grid-item" data-img="bilder/Außenansicht-2.webp">
+          <picture>
+            <source srcset="bilder/Außenansicht-2-small.webp" type="image/webp">
+            <img src="bilder/Außenansicht-2-small.png" alt="Außenansicht" loading="lazy" />
+          </picture>
          <span class="grid-item-label">Außenansicht</span>
        </div>
-        <div class="grid-item" data-img="bilder/wohnzimmer2.png">
-          <img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer" />
+        <div class="grid-item" data-img="bilder/wohnzimmer2.webp">
+          <picture>
+            <source srcset="bilder/wohnzimmer2-small.webp" type="image/webp">
+            <img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer" loading="lazy" />
+          </picture>
          <span class="grid-item-label">Wohnzimmer · 42,6 m²</span>
        </div>
-        <div class="grid-item" data-img="bilder/Küche 1.jpg">
-          <img src="bilder/Küche 1.jpg" alt="Küche" />
+        <div class="grid-item" data-img="bilder/Küche 1.webp">
+          <picture>
+            <source srcset="bilder/Küche 1-small.webp" type="image/webp">
+            <img src="bilder/Küche 1.jpg" alt="Küche" loading="lazy" />
+          </picture>
          <span class="grid-item-label">Küche · 18,4 m²</span>
        </div>
-        <div class="grid-item" data-img="bilder/schlafzimmer.png">
-          <img src="bilder/schlafzimmer-small.png" alt="Schlafzimmer" />
+        <div class="grid-item" data-img="bilder/schlafzimmer.webp">
+          <picture>
+            <source srcset="bilder/schlafzimmer-small.webp" type="image/webp">
+            <img src="bilder/schlafzimmer-small.png" alt="Schlafzimmer" loading="lazy" />
+          </picture>
          <span class="grid-item-label">Schlafzimmer · 18 m²</span>
        </div>
-        <div class="grid-item" data-img="bilder/Bad.jpg">
-          <img src="bilder/Bad.jpg" alt="Badezimmer" />
+        <div class="grid-item" data-img="bilder/Bad.webp">
+          <picture>
+            <source srcset="bilder/Bad-small.webp" type="image/webp">
+            <img src="bilder/Bad.jpg" alt="Badezimmer" loading="lazy" />
+          </picture>
          <span class="grid-item-label">Badezimmer · 9,8 m²</span>
        </div>
-        <div class="grid-item" data-img="bilder/Kinderzimmer.png">
-          <img src="bilder/Kinderzimmer-small.png" alt="Kinderzimmer 1" />
+        <div class="grid-item" data-img="bilder/Kinderzimmer.webp">
+          <picture>
+            <source srcset="bilder/Kinderzimmer-small.webp" type="image/webp">
+            <img src="bilder/Kinderzimmer-small.png" alt="Kinderzimmer 1" loading="lazy" />
+          </picture>
          <span class="grid-item-label">Kinderzimmer 1 · 21,7 m²</span>
        </div>
-        <div class="grid-item" data-img="bilder/Kinderzimmer 2.jpg">
-          <img src="bilder/Kinderzimmer 2-small.png" alt="Kinderzimmer 2" />
+        <div class="grid-item" data-img="bilder/Kinderzimmer 2.webp">
+          <picture>
+            <source srcset="bilder/Kinderzimmer 2-small.webp" type="image/webp">
+            <img src="bilder/Kinderzimmer 2-small.png" alt="Kinderzimmer 2" loading="lazy" />
+          </picture>
          <span class="grid-item-label">Kinderzimmer 2 · 15,7 m²</span>
        </div>
-        <div class="grid-item" data-img="bilder/kinderzimmer 2 2.jpeg">
-          <img src="bilder/kinderzimmer 2 2-small.png" alt="Kinderzimmer Detail" />
+        <div class="grid-item" data-img="bilder/kinderzimmer 2 2.webp">
+          <picture>
+            <source srcset="bilder/kinderzimmer 2 2-small.webp" type="image/webp">
+            <img src="bilder/kinderzimmer 2 2-small.png" alt="Kinderzimmer Detail" loading="lazy" />
+          </picture>
          <span class="grid-item-label">Kinderzimmer Detail</span>
        </div>
-        <div class="grid-item" data-img="bilder/Kinderzimmer 3.jpg">
-          <img src="bilder/Kinderzimmer 3-small.png" alt="Kinderzimmer 3" />
+        <div class="grid-item" data-img="bilder/Kinderzimmer 3.webp">
+          <picture>
+            <source srcset="bilder/Kinderzimmer 3-small.webp" type="image/webp">
+            <img src="bilder/Kinderzimmer 3-small.png" alt="Kinderzimmer 3" loading="lazy" />
+          </picture>
          <span class="grid-item-label">Gästezimmer · 11,5 m²</span>
        </div>
-        <div class="grid-item" data-img="bilder/Bad-2.jpg">
-          <img src="bilder/Bad-2-small.jpg" alt="Wohnbereich Detail 1" />
+        <div class="grid-item" data-img="bilder/Bad-2.webp">
+          <picture>
+            <source srcset="bilder/Bad-2-small.webp" type="image/webp">
+            <img src="bilder/Bad-2-small.jpg" alt="Wohnbereich Detail 1" loading="lazy" />
+          </picture>
          <span class="grid-item-label">Wohnbereich</span>
        </div>
-        <div class="grid-item" data-img="bilder/bad3.jpg">
-          <img src="bilder/Bad-3-small.jpg" alt="Wohnbereich Detail 2" />
+        <div class="grid-item" data-img="bilder/Bad-3.webp">
+          <picture>
+            <source srcset="bilder/Bad-3-small.webp" type="image/webp">
+            <img src="bilder/Bad-3-small.jpg" alt="Wohnbereich Detail 2" loading="lazy" />
+          </picture>
          <span class="grid-item-label">Wohnbereich Detail</span>
        </div>
-        <div class="grid-item" data-img="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (2).jpeg">
-          <img
-            src="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (2).jpeg"
-            alt="Wohnbereich Detail 3"
-          />
+        <div class="grid-item" data-img="bilder/Bad-4.webp">
+          <picture>
+            <source srcset="bilder/Bad-4-small.webp" type="image/webp">
+            <img src="bilder/Bad-4-small.jpg" alt="Wohnbereich Detail 3" loading="lazy" />
+          </picture>
          <span class="grid-item-label">Hausansicht</span>
        </div>
      </div>
@@ -391,16 +428,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
              </div>
            </div>
            <div class="floor-plan floor-plan-multi">
-              <img
-                src="bilder/grundrisse/EG-small.jpg"
-                alt="Grundriss Erdgeschoss"
-                data-img="bilder/grundrisse/EG.png"
-              />
-              <img
-                src="bilder/grundrisse/EG 3D-small.jpg"
-                alt="Grundriss Erdgeschoss"
-                data-img="bilder/grundrisse/EG 3D.png"
-              />
+              <picture>
+                <source srcset="bilder/grundrisse/EG-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/EG-small.jpg"
+                  alt="Grundriss Erdgeschoss"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/EG.webp"
+                />
+              </picture>
+              <picture>
+                <source srcset="bilder/grundrisse/EG 3D-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/EG 3D-small.jpg"
+                  alt="Grundriss Erdgeschoss"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/EG 3D.webp"
+                />
+              </picture>
            </div>
          </div>
        </div>
@@ -440,16 +485,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
              </div>
            </div>
            <div class="floor-plan floor-plan-multi">
-              <img
-                src="bilder/grundrisse/OG 1 2-small.jpg"
-                alt="Grundriss 1. Obergeschoss"
-                data-img="bilder/grundrisse/OG 1 2.png"
-              />
-              <img
-                src="bilder/grundrisse/OG 1 3D-small.jpg"
-                alt="Grundriss 1. Obergeschoss"
-                data-img="bilder/grundrisse/OG 1 3D.png"
-              />
+              <picture>
+                <source srcset="bilder/grundrisse/OG 1 2-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/OG 1 2-small.jpg"
+                  alt="Grundriss 1. Obergeschoss"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/OG 1 2.webp"
+                />
+              </picture>
+              <picture>
+                <source srcset="bilder/grundrisse/OG 1 3D-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/OG 1 3D-small.jpg"
+                  alt="Grundriss 1. Obergeschoss"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/OG 1 3D.webp"
+                />
+              </picture>
            </div>
          </div>
        </div>
@@ -489,16 +542,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
              </div>
            </div>
            <div class="floor-plan floor-plan-multi">
-              <img
-                src="bilder/grundrisse/OG 2 grundriss-small.jpg"
-                alt="Grundriss 2. Obergeschoss (1)"
-                data-img="bilder/grundrisse/OG 2 grundriss.png"
-              />
-              <img
-                src="bilder/grundrisse/OG 2 3D-small.jpg"
-                alt="Grundriss 2. Obergeschoss (1)"
-                data-img="bilder/grundrisse/OG 2 3D.png"
-              />
+              <picture>
+                <source srcset="bilder/grundrisse/OG 2 grundriss-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/OG 2 grundriss-small.jpg"
+                  alt="Grundriss 2. Obergeschoss (1)"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/OG 2 grundriss.webp"
+                />
+              </picture>
+              <picture>
+                <source srcset="bilder/grundrisse/OG 2 3D-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/OG 2 3D-small.jpg"
+                  alt="Grundriss 2. Obergeschoss (1)"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/OG 2 3D.webp"
+                />
+              </picture>
            </div>
          </div>
        </div>
@@ -526,16 +587,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
              </div>
            </div>
            <div class="floor-plan floor-plan-multi">
-              <img
-                src="bilder/grundrisse/Dachboden unten 2-small.jpg"
-                alt="Grundriss Dachboden"
-                data-img="bilder/grundrisse/Dachboden unten 2.png"
-              />
-              <img
-                src="bilder/grundrisse/Dachboden unten-small.jpg"
-                alt="Grundriss Dachboden"
-                data-img="bilder/grundrisse/Dachboden unten.png"
-              />
+              <picture>
+                <source srcset="bilder/grundrisse/Dachboden unten 2-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/Dachboden unten 2-small.jpg"
+                  alt="Grundriss Dachboden"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/Dachboden unten 2.webp"
+                />
+              </picture>
+              <picture>
+                <source srcset="bilder/grundrisse/Dachboden unten-small.webp" type="image/webp">
+                <img
+                  src="bilder/grundrisse/Dachboden unten-small.jpg"
+                  alt="Grundriss Dachboden"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/Dachboden unten.webp"
+                />
+              </picture>
            </div>
          </div>
        </div>
--- a/js/haus-schleusingen.js
+++ b/js/haus-schleusingen.js
@@ -1,144 +1,88 @@
-document.addEventListener("DOMContentLoaded", function () {
+$(function () {
  // Navbar scroll
-  var navbar = document.getElementById("navbar");
-  window.addEventListener("scroll", function () {
-    if (window.scrollY > 60) navbar.classList.add("scrolled");
-    else navbar.classList.remove("scrolled");
+  $(window).on("scroll", function () {
+    if ($(this).scrollTop() > 60) $("#navbar").addClass("scrolled");
+    else $("#navbar").removeClass("scrolled");
  });

  // Hero animation on load
  setTimeout(function () {
-    document.getElementById("heroContent").classList.add("visible");
-    document.getElementById("heroBg").classList.add("loaded");
+    $("#heroContent").addClass("visible");
+    $("#heroBg").addClass("loaded");
  }, 200);

-  // Scroll animations via IntersectionObserver
-  var animElements = document.querySelectorAll(".fact, [data-animate]");
-  animElements.forEach(function (el) {
-    el.style.opacity = "0";
-    el.style.transform = "translateY(30px)";
-    el.style.transition = "opacity 0.8s ease, transform 0.8s ease";
-  });
-
-  if ("IntersectionObserver" in window) {
-    var observer = new IntersectionObserver(
-      function (entries) {
-        entries.forEach(function (entry) {
-          if (entry.isIntersecting) {
-            entry.target.classList.add("visible");
-            entry.target.style.opacity = "1";
-            entry.target.style.transform = "translateY(0)";
-            observer.unobserve(entry.target);
-          }
-        });
-      },
-      { rootMargin: "0px 0px -60px 0px" }
-    );
-    animElements.forEach(function (el) {
-      observer.observe(el);
-    });
-  } else {
-    // Fallback: show all immediately
-    animElements.forEach(function (el) {
-      el.classList.add("visible");
-      el.style.opacity = "1";
-      el.style.transform = "translateY(0)";
-    });
-  }
-
-  // Floor accordion
-  document.querySelectorAll(".floor-header").forEach(function (header) {
-    header.addEventListener("click", function () {
-      var item = this.closest(".floor-item");
-      var isOpen = item.classList.contains("open");
-      var allItems = document.querySelectorAll(".floor-item");
-
-      // Close all
-      allItems.forEach(function (fi) {
-        fi.classList.remove("open");
-        var body = fi.querySelector(".floor-body");
-        if (body) body.style.display = "none";
-      });
-
-      // Open clicked if it was closed
-      if (!isOpen) {
-        item.classList.add("open");
-        var body = item.querySelector(".floor-body");
-        if (body) body.style.display = "block";
+  // Scroll animations
+  function checkVisible() {
+    $(".fact, [data-animate]").each(function () {
+      var el = $(this);
+      var top = el.offset().top;
+      var windowBottom = $(window).scrollTop() + $(window).height();
+      if (windowBottom > top + 60) {
+        el.addClass("visible");
+        el.css({ opacity: 1, transform: "translateY(0)" });
      }
    });
+  }
+  $("[data-animate]").css({
+    opacity: 0,
+    transform: "translateY(30px)",
+    transition: "opacity 0.8s ease, transform 0.8s ease",
+  });
+  $(window).on("scroll", checkVisible);
+  checkVisible();
+
+  // Floor accordion
+  $(".floor-header").on("click", function () {
+    var item = $(this).closest(".floor-item");
+    var isOpen = item.hasClass("open");
+    $(".floor-item").removeClass("open");
+    $(".floor-body").slideUp(300);
+    if (!isOpen) {
+      item.addClass("open");
+      item.find(".floor-body").slideDown(300);
+    }
  });

  // Lightbox – gallery grid items
-  document.querySelectorAll(".grid-item").forEach(function (item) {
-    item.addEventListener("click", function () {
-      var src = this.dataset.img || this.querySelector("img").getAttribute("src");
-      openLightbox(src);
+  $(document).on("click", ".grid-item", function () {
+    var src = $(this).data("img") || $(this).find("img").attr("src");
+    $("#lightboxImg").off("error").on("error", function () {
+      // WebP fallback: try original format
+      if ($(this).attr('src').endsWith('.webp')) {
+        $(this).attr('src', src.replace(/\.webp$/, '.png'));
+      }
    });
+    $("#lightboxImg").attr("src", src);
+    $("#lightbox").addClass("open");
+    $("body").css("overflow", "hidden");
  });

  // Lightbox – floor plan images in Raumaufteilung
-  document.querySelectorAll(".floor-plan img[data-img]").forEach(function (img) {
-    img.addEventListener("click", function () {
-      openLightbox(this.dataset.img);
+  $(document).on("click", ".floor-plan img[data-img]", function () {
+    var src = $(this).data("img");
+    $("#lightboxImg").off("error").on("error", function () {
+      if ($(this).attr('src').endsWith('.webp')) {
+        $(this).attr('src', src.replace(/\.webp$/, '.png'));
+      }
    });
+    $("#lightboxImg").attr("src", src);
+    $("#lightbox").addClass("open");
+    $("body").css("overflow", "hidden");
  });
-
-  function openLightbox(src) {
-    document.getElementById("lightboxImg").setAttribute("src", src);
-    document.getElementById("lightbox").classList.add("open");
-    document.body.style.overflow = "hidden";
-  }
-
-  function closeLightbox() {
-    document.getElementById("lightbox").classList.remove("open");
-    document.body.style.overflow = "";
-  }
-
-  document.getElementById("lightboxClose").addEventListener("click", closeLightbox);
-  document.getElementById("lightbox").addEventListener("click", function (e) {
-    if (e.target === this) closeLightbox();
+  $("#lightboxClose, #lightbox").on("click", function (e) {
+    if (e.target === this) {
+      $("#lightbox").removeClass("open");
+      $("body").css("overflow", "");
+    }
  });
-  document.addEventListener("keydown", function (e) {
-    if (e.key === "Escape") closeLightbox();
+  $(document).on("keydown", function (e) {
+    if (e.key === "Escape") {
+      $("#lightbox").removeClass("open");
+      $("body").css("overflow", "");
+    }
  });

  // Form submit is handled server-side by PHP – no JS intervention needed.
-  // Form submit – opens email client with pre-filled mailto: link
-  document.getElementById("contactForm").addEventListener("submit", function (e) {
-    e.preventDefault();
-
-    var fname = document.getElementById("fname").value.trim();
-    var lname = document.getElementById("lname").value.trim();
-    var email = document.getElementById("email").value.trim();
-    var phone = document.getElementById("phone").value.trim();
-    var interest = document.getElementById("interest").value;
-    var message = document.getElementById("message").value.trim();
-
-    var subject = "Kontaktanfrage: " + interest;
-    var body = "Von: " + fname + " " + lname + "\n";
-    body += "E-Mail: " + email + "\n";
-    if (phone) body += "Telefon: " + phone + "\n";
-    body += "Anliegen: " + interest + "\n\n";
-    body += message;
-
-    var mailto =
-      "mailto:mki@kies-media.de" +
-      "?subject=" + encodeURIComponent(subject) +
-      "&body=" + encodeURIComponent(body);
-
-    window.location.href = mailto;
-
-    // Show success message
-    this.style.display = "none";
-    var success = document.getElementById("formSuccess");
-    success.style.display = "block";
-    success.style.opacity = "0";
-    success.style.transition = "opacity 0.4s ease";
-    requestAnimationFrame(function () {
-      success.style.opacity = "1";
-    });
-  });
 });

 // Mobile hamburger menu (vanilla JS)
--- a/nginx.conf
+++ b/nginx.conf
@@ -5,7 +5,20 @@ server {
    root /usr/share/nginx/html;
    index haus-schleusingen.html;

+    # Gzip aktivieren
+    gzip on;
+    gzip_types text/css application/javascript image/svg+xml application/json text/xml;
+    gzip_min_length 256;
+    gzip_vary on;
+
    location / {
        try_files $uri $uri/ /haus-schleusingen.html;
    }
+
+    # Lange Cache-Dauer für Bilder und statische Assets
+    location ~* \.(jpg|jpeg|png|webp|gif|ico|svg|css|js|woff2?)$ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+        access_log off;
+    }
 }
Author	SHA1	Message	Date
Claw (AI)	73635a5f03	fix(js): improve lightbox WebP fallback error handler All checks were successful Deploy Feature Branch to Test / deploy (push) Successful in 24s Details - Use .off('error') to prevent stacking error handlers - Simplify fallback logic: only replace .webp → .png on error - Prevents infinite error loops	2026-05-15 07:57:09 +00:00
Claw (AI)	b237cb6315	fix(images): remove unused masonry.js and fix broken references - Delete js/masonry.pkgd.min.js (24 KB, never referenced in HTML) - Fix bad3.jpg → Bad-3.webp reference (was 404) - Fix WhatsApp Image reference → replaced with Bad-4.webp (existing image) - Update data-img attributes to use WebP paths	2026-05-15 07:57:09 +00:00
Claw (AI)	98cb53df09	fix(images): update nginx with gzip and 30d cache headers - Enable gzip for CSS, JS, SVG, JSON, XML - Add 30-day cache headers for static assets (images, CSS, JS, fonts) - Set Cache-Control: public, immutable for static files	2026-05-15 07:57:09 +00:00
Claw (AI)	8666bc1eec	feat(images): convert all images to WebP with 87% size reduction - Convert 34 images (PNG/JPG) to WebP at quality 80 - Total savings: 21.6 MB → 2.8 MB (87% reduction) - Add <picture> elements with WebP source + original fallback - Add loading=lazy to all below-the-fold images - Update lightbox to serve WebP images with error fallback	2026-05-15 07:57:09 +00:00