refactor(js): remove jQuery dependency and replace with vanilla JS

- Rewrite haus-schleusingen.js entirely in vanilla JavaScript
- Use IntersectionObserver instead of scroll event for scroll animations
- Replace jQuery slideUp/slideDown with display toggle for accordion
- Replace jQuery fadeIn with CSS opacity transition for form success
- Remove jQuery CDN script tag from haus-schleusingen.html
- Delete unused masonry.pkgd.min.js
- Remove jquery globals from eslint.config.js

Ref #19

css/haus-schleusingen.css

@@ -115,6 +115,84 @@ nav.scrolled .nav-links a:hover {
   box-shadow: 0 4px 20px rgb(139 105 20 / 50%);
 }
 
+/* HAMBURGER */
+.nav-hamburger {
+  display: none;
+  width: 44px;
+  height: 44px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  z-index: 110;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.nav-hamburger span,
+.nav-hamburger span::before,
+.nav-hamburger span::after {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background: var(--white);
+  border-radius: 1px;
+  transition:
+    transform 0.3s ease,
+    opacity 0.3s ease,
+    background 0.4s;
+  position: absolute;
+}
+
+.nav-hamburger span::before,
+.nav-hamburger span::after {
+  content: "";
+}
+
+.nav-hamburger span::before {
+  transform: translateY(-7px);
+}
+
+.nav-hamburger span::after {
+  transform: translateY(7px);
+}
+
+nav.scrolled .nav-hamburger span,
+nav.scrolled .nav-hamburger span::before,
+nav.scrolled .nav-hamburger span::after {
+  background: var(--dark);
+}
+
+.nav-hamburger.active span {
+  background: transparent;
+}
+
+.nav-hamburger.active span::before {
+  transform: rotate(45deg);
+  background: var(--dark);
+}
+
+.nav-hamburger.active span::after {
+  transform: rotate(-45deg);
+  background: var(--dark);
+}
+
+.nav-mobile-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgb(28 26 23 / 50%);
+  z-index: 90;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.nav-mobile-overlay.active {
+  display: block;
+  opacity: 1;
+}
+
 /* HERO */
 .hero {
   position: relative;
@@ -913,6 +991,36 @@ nav.scrolled .nav-links a:hover {
   transform: translateY(-1px);
 }
 
+.form-errors {
+  background: #fdf2f2;
+  border: 1px solid #e8a0a0;
+  padding: 1rem 1.2rem;
+  margin-bottom: 1.2rem;
+}
+
+.form-errors ul {
+  margin: 0;
+  padding: 0 0 0 1.2rem;
+  list-style: disc;
+}
+
+.form-errors li {
+  font-size: 0.85rem;
+  color: #9e2c2c;
+  line-height: 1.6;
+}
+
+.hp-field {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
 .form-success {
   display: none;
   text-align: center;
@@ -1042,6 +1150,58 @@ footer {
     display: none;
   }
 
+  .nav-hamburger {
+    display: flex;
+  }
+
+  /* Mobile slide-down nav */
+  nav.mobile-open .nav-links {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: rgb(253 252 250 / 98%);
+    backdrop-filter: blur(12px);
+    padding: 5rem 1.5rem 2rem;
+    gap: 0;
+    z-index: 95;
+    border-bottom: 1px solid var(--warm);
+    animation: slideDown 0.3s ease;
+  }
+
+  nav.mobile-open .nav-links a {
+    color: var(--charcoal);
+    font-size: 1rem;
+    padding: 1rem 0;
+    border-bottom: 1px solid var(--warm);
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+  }
+
+  nav.mobile-open .nav-hamburger span,
+  nav.mobile-open .nav-hamburger span::before,
+  nav.mobile-open .nav-hamburger span::after {
+    background: var(--dark);
+  }
+
+  nav.mobile-open .nav-hamburger.active span {
+    background: transparent;
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
   .hero-content {
     padding: 0 1.5rem 4rem;
   }

eslint.config.js

@@ -13,7 +13,6 @@ module.exports = [
       sourceType: "script",
       globals: {
         ...globals.browser,
-        ...globals.jquery,
       },
     },
     plugins: {

index.php

@@ -1,3 +1,127 @@
+<?php
+session_start();
+
+// --- Helper functions ---
+function normalizeContactValue(string $value): string
+{
+    return trim($value);
+}
+
+function escapeContactValue(string $value): string
+{
+    return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
+}
+
+function containsHeaderInjection(string $value): bool
+{
+    return (bool) preg_match('/[\r\n]/', $value);
+}
+
+
+
+// --- Form processing ---
+$formErrors = [];
+$formSuccess = false;
+if (!empty($_SESSION['form_success'])) {
+    $formSuccess = true;
+    unset($_SESSION['form_success']);
+}
+if (!empty($_SESSION['form_errors'])) {
+    $formErrors = $_SESSION['form_errors'];
+    unset($_SESSION['form_errors']);
+}
+if (!empty($_SESSION['form_data'])) {
+    $formData = $_SESSION['form_data'];
+    unset($_SESSION['form_data']);
+} else {
+    $formData = ['fname' => '', 'lname' => '', 'email' => '', 'phone' => '', 'interest' => 'Besichtigung anfragen', 'message' => ''];
+}
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    // Collect and normalize input
+    $formData['fname']    = normalizeContactValue((string) ($_POST['fname'] ?? ''));
+    $formData['lname']    = normalizeContactValue((string) ($_POST['lname'] ?? ''));
+    $formData['email']    = normalizeContactValue((string) ($_POST['email'] ?? ''));
+    $formData['phone']    = normalizeContactValue((string) ($_POST['phone'] ?? ''));
+    $formData['interest'] = normalizeContactValue((string) ($_POST['interest'] ?? ''));
+    $formData['message']  = normalizeContactValue((string) ($_POST['message'] ?? ''));
+
+    // Honeypot check – hidden field must be empty
+    $honeypot = normalizeContactValue((string) ($_POST['website'] ?? ''));
+    if ($honeypot !== '') {
+        // Bot detected – pretend success
+        header('Location: ' . $_SERVER['REQUEST_URI'] . '#form-result');
+        $_SESSION['form_success'] = true;
+        exit;
+    } else {
+        // Server-side validation
+        if ($formData['fname'] === '') {
+            $formErrors[] = 'Bitte geben Sie Ihren Vornamen an.';
+        }
+        if ($formData['lname'] === '') {
+            $formErrors[] = 'Bitte geben Sie Ihren Nachnamen an.';
+        }
+        if ($formData['email'] === '' || !filter_var($formData['email'], FILTER_VALIDATE_EMAIL)) {
+            $formErrors[] = 'Bitte geben Sie eine gültige E-Mail-Adresse an.';
+        }
+        if ($formData['message'] === '') {
+            $formErrors[] = 'Bitte geben Sie eine Nachricht ein.';
+        }
+
+        // Header injection check
+        if (containsHeaderInjection($formData['email']) || containsHeaderInjection($formData['fname'] . ' ' . $formData['lname'])) {
+            $formErrors[] = 'Ungültige Zeichen in den Eingabefeldern.';
+        }
+
+        // Minimum time check – form submitted too fast (< 3 seconds)
+        $formTime = isset($_POST['form_time']) ? (int) $_POST['form_time'] : 0;
+        if ($formTime > 0 && (time() - $formTime) < 3) {
+            $formErrors[] = 'Das Formular wurde zu schnell abgeschickt. Bitte versuchen Sie es erneut.';
+        }
+
+        // Session rate limit – max 1 submission per 60 seconds
+        $lastSubmit = $_SESSION['last_contact_submit'] ?? 0;
+        if ($lastSubmit && (time() - $lastSubmit) < 60) {
+            $formErrors[] = 'Bitte warten Sie einen Moment vor der nächsten Anfrage.';
+        }
+
+        // Send email if no errors
+        if (empty($formErrors)) {
+            $to      = 'mki@kies-media.de';
+            $subject = 'Kontaktanfrage: ' . $formData['interest'];
+            $body    = "Von: {$formData['fname']} {$formData['lname']}\n"
+                     . "E-Mail: {$formData['email']}\n";
+            if ($formData['phone'] !== '') {
+                $body .= "Telefon: {$formData['phone']}\n";
+            }
+            $body .= "Anliegen: {$formData['interest']}\n\n"
+                     . $formData['message'];
+
+            $headers  = "From: {$formData['email']}\r\n";
+            $headers .= "Reply-To: {$formData['email']}\r\n";
+            $headers .= "Content-Type: text/plain; charset=UTF-8\r\n";
+            $headers .= "X-Mailer: PHP/" . phpversion();
+
+            $mailSent = mail($to, $subject, $body, $headers);
+
+            if ($mailSent) {
+                $_SESSION['last_contact_submit'] = time();
+                header('Location: ' . $_SERVER['REQUEST_URI'] . '#form-result');
+                $_SESSION['form_success'] = true;
+                exit;
+            } else {
+                $formErrors[] = 'Leider konnte die E-Mail nicht gesendet werden. Bitte versuchen Sie es später erneut oder schreiben Sie uns direkt an mki@kies-media.de.';
+            }
+        }
+    }
+    if (!empty($formErrors)) {
+        header('Location: ' . $_SERVER['REQUEST_URI'] . '#form-result');
+        $_SESSION['form_errors'] = $formErrors;
+        $_SESSION['form_data'] = $formData;
+        exit;
+    }
+}
+?>
 <!doctype html>
 <html lang="de">
   <head>
@@ -58,12 +182,14 @@
     </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>
     <nav id="navbar">
       <div class="nav-logo">Bahnhofstraße 10</div>
+      <button class="nav-hamburger" aria-label="Navigation öffnen" aria-expanded="false">
+        <span></span>
+      </button>
       <ul class="nav-links">
         <li><a href="#galerie">Galerie</a></li>
         <li><a href="#grundriss">Grundriss</a></li>
@@ -77,6 +203,7 @@
         Jetzt anfragen
       </button>
     </nav>
+    <div class="nav-mobile-overlay" aria-hidden="true"></div>
 
     <section class="hero" id="hero">
       <div
@@ -527,15 +654,31 @@
           paar Terminvorschläge an.
         </p>
         <div class="contact-form">
-          <form id="contactForm">
+<?php if ($formSuccess): ?>
+          <div id="form-result" class="form-success" style="display: block">
+            <p>Vielen Dank für Ihre Anfrage!</p>
+            <br />
+            <small>Wir haben Ihre Nachricht erhalten und melden uns innerhalb von 24 Stunden bei Ihnen.</small>
+          </div>
+<?php else: ?>
+<?php if (!empty($formErrors)): ?>
+          <div id="form-result" class="form-errors">
+            <ul>
+<?php foreach ($formErrors as $error): ?>
+              <li><?= escapeContactValue($error) ?></li>
+<?php endforeach; ?>
+            </ul>
+          </div>
+<?php endif; ?>
+          <form id="contactForm" method="post">
             <div class="form-row">
               <div class="form-field">
                 <label for="fname">Vorname</label>
-                <input type="text" id="fname" name="fname" placeholder="Max" required />
+                <input type="text" id="fname" name="fname" placeholder="Max" required value="<?= escapeContactValue($formData['fname']) ?>" />
               </div>
               <div class="form-field">
                 <label for="lname">Nachname</label>
-                <input type="text" id="lname" name="lname" placeholder="Mustermann" required />
+                <input type="text" id="lname" name="lname" placeholder="Mustermann" required value="<?= escapeContactValue($formData['lname']) ?>" />
               </div>
             </div>
             <div class="form-row">
@@ -547,20 +690,25 @@
                   name="email"
                   placeholder="max@beispiel.de"
                   required
+                  value="<?= escapeContactValue($formData['email']) ?>"
                 />
               </div>
               <div class="form-field">
                 <label for="phone">Telefon</label>
-                <input type="tel" id="phone" name="phone" placeholder="+49 ..." />
+                <input type="tel" id="phone" name="phone" placeholder="+49 ..." value="<?= escapeContactValue($formData['phone']) ?>" />
               </div>
             </div>
             <div class="form-row">
               <div class="form-field full">
                 <label for="interest">Anliegen</label>
                 <select id="interest" name="interest">
-                  <option>Besichtigung anfragen</option>
+<?php
-                  <option>Allgemeine Informationen</option>
+$interestOptions = ['Besichtigung anfragen', 'Allgemeine Informationen', 'Mietbewerbung einreichen'];
-                  <option>Mietbewerbung einreichen</option>
+foreach ($interestOptions as $opt):
+    $selected = ($formData['interest'] === $opt) ? ' selected' : '';
+?>
+                  <option<?= $selected ?>><?= escapeContactValue($opt) ?></option>
+<?php endforeach; ?>
                 </select>
               </div>
             </div>
@@ -572,16 +720,20 @@
                   name="message"
                   rows="4"
                   placeholder="Ihre Nachricht ..."
-                ></textarea>
+                  required
+                ><?= escapeContactValue($formData['message']) ?></textarea>
               </div>
             </div>
+            <!-- Honeypot: hidden field for spam bots -->
+            <div class="hp-field" aria-hidden="true">
+              <label for="website">Website</label>
+              <input type="text" id="website" name="website" tabindex="-1" autocomplete="off" />
+            </div>
+            <!-- Form load timestamp for minimum-submit-time check -->
+            <input type="hidden" name="form_time" value="<?= time() ?>" />
             <button type="submit" class="btn-submit">Anfrage absenden</button>
           </form>
-          <div class="form-success" id="formSuccess">
+<?php endif; ?>
-            <p>Vielen Dank für Ihre Anfrage!</p>
-            <br />
-            <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>

js/haus-schleusingen.js

@@ -1,86 +1,119 @@
-$(function () {
+document.addEventListener("DOMContentLoaded", function () {
   // Navbar scroll
-  $(window).on("scroll", function () {
+  var navbar = document.getElementById("navbar");
-    if ($(this).scrollTop() > 60) $("#navbar").addClass("scrolled");
+  window.addEventListener("scroll", function () {
-    else $("#navbar").removeClass("scrolled");
+    if (window.scrollY > 60) navbar.classList.add("scrolled");
+    else navbar.classList.remove("scrolled");
   });
 
   // Hero animation on load
   setTimeout(function () {
-    $("#heroContent").addClass("visible");
+    document.getElementById("heroContent").classList.add("visible");
-    $("#heroBg").addClass("loaded");
+    document.getElementById("heroBg").classList.add("loaded");
   }, 200);
 
-  // Scroll animations
+  // Scroll animations via IntersectionObserver
-  function checkVisible() {
+  var animElements = document.querySelectorAll(".fact, [data-animate]");
-    $(".fact, [data-animate]").each(function () {
+  animElements.forEach(function (el) {
-      var el = $(this);
+    el.style.opacity = "0";
-      var top = el.offset().top;
+    el.style.transform = "translateY(30px)";
-      var windowBottom = $(window).scrollTop() + $(window).height();
+    el.style.transition = "opacity 0.8s ease, transform 0.8s ease";
-      if (windowBottom > top + 60) {
+  });
-        el.addClass("visible");
+
-        el.css({ opacity: 1, transform: "translateY(0)" });
+  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);
           }
         });
-  }
+      },
-  $("[data-animate]").css({
+      { rootMargin: "0px 0px -60px 0px" }
-    opacity: 0,
+    );
-    transform: "translateY(30px)",
+    animElements.forEach(function (el) {
-    transition: "opacity 0.8s ease, transform 0.8s ease",
+      observer.observe(el);
     });
-  $(window).on("scroll", checkVisible);
+  } else {
-  checkVisible();
+    // Fallback: show all immediately
+    animElements.forEach(function (el) {
+      el.classList.add("visible");
+      el.style.opacity = "1";
+      el.style.transform = "translateY(0)";
+    });
+  }
 
   // Floor accordion
-  $(".floor-header").on("click", function () {
+  document.querySelectorAll(".floor-header").forEach(function (header) {
-    var item = $(this).closest(".floor-item");
+    header.addEventListener("click", function () {
-    var isOpen = item.hasClass("open");
+      var item = this.closest(".floor-item");
-    $(".floor-item").removeClass("open");
+      var isOpen = item.classList.contains("open");
-    $(".floor-body").slideUp(300);
+      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.addClass("open");
+        item.classList.add("open");
-      item.find(".floor-body").slideDown(300);
+        var body = item.querySelector(".floor-body");
+        if (body) body.style.display = "block";
       }
     });
+  });
 
   // Lightbox – gallery grid items
-  $(document).on("click", ".grid-item", function () {
+  document.querySelectorAll(".grid-item").forEach(function (item) {
-    var src = $(this).data("img") || $(this).find("img").attr("src");
+    item.addEventListener("click", function () {
-    $("#lightboxImg").attr("src", src);
+      var src = this.dataset.img || this.querySelector("img").getAttribute("src");
-    $("#lightbox").addClass("open");
+      openLightbox(src);
-    $("body").css("overflow", "hidden");
+    });
   });
 
   // Lightbox – floor plan images in Raumaufteilung
-  $(document).on("click", ".floor-plan img[data-img]", function () {
+  document.querySelectorAll(".floor-plan img[data-img]").forEach(function (img) {
-    var src = $(this).data("img");
+    img.addEventListener("click", function () {
-    $("#lightboxImg").attr("src", src);
+      openLightbox(this.dataset.img);
-    $("#lightbox").addClass("open");
-    $("body").css("overflow", "hidden");
     });
-  $("#lightboxClose, #lightbox").on("click", function (e) {
-    if (e.target === this) {
-      $("#lightbox").removeClass("open");
-      $("body").css("overflow", "");
-    }
-  });
-  $(document).on("keydown", function (e) {
-    if (e.key === "Escape") {
-      $("#lightbox").removeClass("open");
-      $("body").css("overflow", "");
-    }
   });
 
+  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();
+  });
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") closeLightbox();
+  });
+
+  // Form submit is handled server-side by PHP – no JS intervention needed.
   // Form submit – opens email client with pre-filled mailto: link
-  $("#contactForm").on("submit", function (e) {
+  document.getElementById("contactForm").addEventListener("submit", function (e) {
     e.preventDefault();
 
-    var fname = $("#fname").val().trim();
+    var fname = document.getElementById("fname").value.trim();
-    var lname = $("#lname").val().trim();
+    var lname = document.getElementById("lname").value.trim();
-    var email = $("#email").val().trim();
+    var email = document.getElementById("email").value.trim();
-    var phone = $("#phone").val().trim();
+    var phone = document.getElementById("phone").value.trim();
-    var interest = $("#interest").val();
+    var interest = document.getElementById("interest").value;
-    var message = $("#message").val().trim();
+    var message = document.getElementById("message").value.trim();
 
     var subject = "Kontaktanfrage: " + interest;
     var body = "Von: " + fname + " " + lname + "\n";
@@ -97,7 +130,58 @@ $(function () {
     window.location.href = mailto;
 
     // Show success message
-    $("#contactForm").hide();
+    this.style.display = "none";
-    $("#formSuccess").fadeIn(400);
+    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)
+(function () {
+  var hamburger = document.querySelector(".nav-hamburger");
+  var nav = document.getElementById("navbar");
+  var overlay = document.querySelector(".nav-mobile-overlay");
+  var links = nav ? nav.querySelectorAll(".nav-links a") : [];
+
+  function toggleMenu() {
+    var isOpen = hamburger.classList.toggle("active");
+    nav.classList.toggle("mobile-open", isOpen);
+  if (overlay) overlay.classList.toggle("active", isOpen);
+    hamburger.setAttribute("aria-expanded", isOpen);
+    document.body.style.overflow = isOpen ? "hidden" : "";
+  }
+
+  function closeMenu() {
+    hamburger.classList.remove("active");
+    nav.classList.remove("mobile-open");
+    if (overlay) overlay.classList.remove("active");
+    hamburger.setAttribute("aria-expanded", "false");
+    document.body.style.overflow = "";
+  }
+
+  if (hamburger) {
+    hamburger.addEventListener("click", toggleMenu);
+  }
+
+  if (overlay) {
+    overlay.addEventListener("click", closeMenu);
+  }
+
+  links.forEach(function (link) {
+    link.addEventListener("click", closeMenu);
+  });
+
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") closeMenu();
+  });
+
+  // Close on resize to desktop
+  window.addEventListener("resize", function () {
+    if (window.innerWidth > 900) closeMenu();
+  });
+})();