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

css/haus-schleusingen.css

@@ -928,6 +928,29 @@ nav.scrolled .nav-links a:hover {
   color: var(--stone);
 }
 
+.contact-details {
+  text-align: center;
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--warm);
+}
+
+.contact-details p {
+  font-size: 0.95rem;
+  color: var(--stone);
+}
+
+.contact-details a {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 600;
+  transition: color 0.2s;
+}
+
+.contact-details a:hover {
+  color: var(--accent-light);
+}
+
 /* FOOTER */
 footer {
   background: var(--dark);

haus-schleusingen.html

@@ -29,7 +29,7 @@
       <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">
@@ -102,7 +102,10 @@
         </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>
@@ -117,55 +120,88 @@
       <div class="masonry-grid">
         <div class="grid-sizer"></div>
 
-        <div class="grid-item" data-img="bilder/Außenansicht-2.png">
+        <div class="grid-item" data-img="bilder/Außenansicht-2.webp">
-          <img src="bilder/Außenansicht-2-small.png" alt="Außenansicht" />
+          <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">
+        <div class="grid-item" data-img="bilder/wohnzimmer2.webp">
-          <img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer" />
+          <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">
+        <div class="grid-item" data-img="bilder/Küche 1.webp">
-          <img src="bilder/Küche 1.jpg" alt="Küche" />
+          <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">
+        <div class="grid-item" data-img="bilder/schlafzimmer.webp">
-          <img src="bilder/schlafzimmer-small.png" alt="Schlafzimmer" />
+          <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">
+        <div class="grid-item" data-img="bilder/Bad.webp">
-          <img src="bilder/Bad.jpg" alt="Badezimmer" />
+          <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">
+        <div class="grid-item" data-img="bilder/Kinderzimmer.webp">
-          <img src="bilder/Kinderzimmer-small.png" alt="Kinderzimmer 1" />
+          <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">
+        <div class="grid-item" data-img="bilder/Kinderzimmer 2.webp">
-          <img src="bilder/Kinderzimmer 2-small.png" alt="Kinderzimmer 2" />
+          <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">
+        <div class="grid-item" data-img="bilder/kinderzimmer 2 2.webp">
-          <img src="bilder/kinderzimmer 2 2-small.png" alt="Kinderzimmer Detail" />
+          <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">
+        <div class="grid-item" data-img="bilder/Kinderzimmer 3.webp">
-          <img src="bilder/Kinderzimmer 3-small.png" alt="Kinderzimmer 3" />
+          <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">
+        <div class="grid-item" data-img="bilder/Bad-2.webp">
-          <img src="bilder/Bad-2-small.jpg" alt="Wohnbereich Detail 1" />
+          <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">
+        <div class="grid-item" data-img="bilder/Bad-3.webp">
-          <img src="bilder/Bad-3-small.jpg" alt="Wohnbereich Detail 2" />
+          <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">
+        <div class="grid-item" data-img="bilder/Bad-4.webp">
-          <img
+          <picture>
-            src="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (2).jpeg"
+            <source srcset="bilder/Bad-4-small.webp" type="image/webp">
-            alt="Wohnbereich Detail 3"
+            <img src="bilder/Bad-4-small.jpg" alt="Wohnbereich Detail 3" loading="lazy" />
-          />
+          </picture>
           <span class="grid-item-label">Hausansicht</span>
         </div>
       </div>
@@ -211,16 +247,24 @@
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
-              <img
+              <picture>
-                src="bilder/grundrisse/EG-small.jpg"
+                <source srcset="bilder/grundrisse/EG-small.webp" type="image/webp">
-                alt="Grundriss Erdgeschoss"
+                <img
-                data-img="bilder/grundrisse/EG.png"
+                  src="bilder/grundrisse/EG-small.jpg"
-              />
+                  alt="Grundriss Erdgeschoss"
-              <img
+                  loading="lazy"
-                src="bilder/grundrisse/EG 3D-small.jpg"
+                  data-img="bilder/grundrisse/EG.webp"
-                alt="Grundriss Erdgeschoss"
+                />
-                data-img="bilder/grundrisse/EG 3D.png"
+              </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>
@@ -260,16 +304,24 @@
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
-              <img
+              <picture>
-                src="bilder/grundrisse/OG 1 2-small.jpg"
+                <source srcset="bilder/grundrisse/OG 1 2-small.webp" type="image/webp">
-                alt="Grundriss 1. Obergeschoss"
+                <img
-                data-img="bilder/grundrisse/OG 1 2.png"
+                  src="bilder/grundrisse/OG 1 2-small.jpg"
-              />
+                  alt="Grundriss 1. Obergeschoss"
-              <img
+                  loading="lazy"
-                src="bilder/grundrisse/OG 1 3D-small.jpg"
+                  data-img="bilder/grundrisse/OG 1 2.webp"
-                alt="Grundriss 1. Obergeschoss"
+                />
-                data-img="bilder/grundrisse/OG 1 3D.png"
+              </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>
@@ -309,16 +361,24 @@
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
-              <img
+              <picture>
-                src="bilder/grundrisse/OG 2 grundriss-small.jpg"
+                <source srcset="bilder/grundrisse/OG 2 grundriss-small.webp" type="image/webp">
-                alt="Grundriss 2. Obergeschoss (1)"
+                <img
-                data-img="bilder/grundrisse/OG 2 grundriss.png"
+                  src="bilder/grundrisse/OG 2 grundriss-small.jpg"
-              />
+                  alt="Grundriss 2. Obergeschoss (1)"
-              <img
+                  loading="lazy"
-                src="bilder/grundrisse/OG 2 3D-small.jpg"
+                  data-img="bilder/grundrisse/OG 2 grundriss.webp"
-                alt="Grundriss 2. Obergeschoss (1)"
+                />
-                data-img="bilder/grundrisse/OG 2 3D.png"
+              </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>
@@ -346,16 +406,24 @@
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
-              <img
+              <picture>
-                src="bilder/grundrisse/Dachboden unten 2-small.jpg"
+                <source srcset="bilder/grundrisse/Dachboden unten 2-small.webp" type="image/webp">
-                alt="Grundriss Dachboden"
+                <img
-                data-img="bilder/grundrisse/Dachboden unten 2.png"
+                  src="bilder/grundrisse/Dachboden unten 2-small.jpg"
-              />
+                  alt="Grundriss Dachboden"
-              <img
+                  loading="lazy"
-                src="bilder/grundrisse/Dachboden unten-small.jpg"
+                  data-img="bilder/grundrisse/Dachboden unten 2.webp"
-                alt="Grundriss Dachboden"
+                />
-                data-img="bilder/grundrisse/Dachboden unten.png"
+              </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>
@@ -527,16 +595,19 @@
           <div class="form-success" id="formSuccess">
             <p>Vielen Dank für Ihre Anfrage!</p>
             <br />
-            <small>Wir melden uns schnellstmöglich bei Ihnen.</small>
+            <small>Ihr E-Mail-Programm wurde geöffnet. Bitte senden Sie die E-Mail ab, damit Ihre Anfrage bei uns eingeht.</small>
           </div>
         </div>
+        <div class="contact-details">
+          <p>Oder schreiben Sie uns direkt: <a href="mailto:mki@kies-media.de">mki@kies-media.de</a></p>
+        </div>
       </div>
     </section>
 
     <footer>
       <div class="footer-logo">Bahnhofstraße 10 · Schleusingen</div>
       <div class="footer-links">
-        <a href="#">Impressum</a>
+        <a href="/impressum" target="_blank">Impressum</a>
         <a href="#">Datenschutz</a>
       </div>
     </footer>

js/haus-schleusingen.js

@@ -46,6 +46,11 @@ $(function () {
   // Lightbox – gallery grid items
   $(document).on("click", ".grid-item", function () {
     var src = $(this).data("img") || $(this).find("img").attr("src");
+    $("#lightboxImg").on("error", function () {
+      // WebP fallback: try original format
+      var fallback = src.replace(/\.webp$/, src.endsWith('.webp') ? '.png' : '.jpg');
+      if ($(this).attr('src') !== fallback) $(this).attr('src', fallback);
+    });
     $("#lightboxImg").attr("src", src);
     $("#lightbox").addClass("open");
     $("body").css("overflow", "hidden");
@@ -54,6 +59,10 @@ $(function () {
   // Lightbox – floor plan images in Raumaufteilung
   $(document).on("click", ".floor-plan img[data-img]", function () {
     var src = $(this).data("img");
+    $("#lightboxImg").on("error", function () {
+      var fallback = src.replace(/\.webp$/, '.png');
+      if ($(this).attr('src') !== fallback) $(this).attr('src', fallback);
+    });
     $("#lightboxImg").attr("src", src);
     $("#lightbox").addClass("open");
     $("body").css("overflow", "hidden");
@@ -71,14 +80,33 @@ $(function () {
     }
   });
 
-  // Form submit
+  // Form submit – opens email client with pre-filled mailto: link
   $("#contactForm").on("submit", function (e) {
     e.preventDefault();
-    var btn = $(this).find(".btn-submit");
+
-    btn.text("Wird gesendet...").prop("disabled", true);
+    var fname = $("#fname").val().trim();
-    setTimeout(function () {
+    var lname = $("#lname").val().trim();
-      $("#contactForm").hide();
+    var email = $("#email").val().trim();
-      $("#formSuccess").fadeIn(400);
+    var phone = $("#phone").val().trim();
-    }, 1200);
+    var interest = $("#interest").val();
+    var message = $("#message").val().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
+    $("#contactForm").hide();
+    $("#formSuccess").fadeIn(400);
   });
 });

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;
+    }
+}