merge: resolve conflicts with main (WebP + vanilla JS + a11y)

Reviewed-on: #40

bilder/favicon/site.webmanifest

@@ -0,0 +1,10 @@
+{
+  "name": "Haus Schleusingen",
+  "short_name": "HS",
+  "icons": [
+    { "src": "/bilder/favicon/favicon-32x32.png", "sizes": "32x32", "type": "image/png" },
+    { "src": "/bilder/favicon/favicon-16x16.png", "sizes": "16x16", "type": "image/png" }
+  ],
+  "theme_color": "#1c1917",
+  "background_color": "#fafaf9"
+}

css/haus-schleusingen.css

@@ -1,7 +1,55 @@
+/* SKIP LINK */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--accent);
+  color: var(--white);
+  padding: 0.75rem 1.5rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  z-index: 200;
+  text-decoration: none;
+  transition: none;
+}
+
+.skip-link:focus {
+  left: 0;
+  outline: 2px solid var(--white);
+  outline-offset: 2px;
+}
+
+/* FOCUS VISIBLE */
+*:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.lightbox-close:focus-visible {
+  outline: 2px solid var(--white);
+  outline-offset: 2px;
+}
+
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.grid-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.floor-header:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
 :root {
   --cream: #f5f0e8;
   --warm: #e8dfd0;
-  --stone: #9e9485;
+  --stone: #7a7062;
   --dark: #1c1a17;
   --charcoal: #2e2b26;
   --accent: #8b6914;
@@ -991,6 +1039,36 @@ nav.scrolled .nav-hamburger span::after {
   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;

eslint.config.js

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

index.php

@@ -1,7 +1,136 @@
+<?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>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/bilder/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/bilder/favicon/favicon-16x16.png">
+    <link rel="icon" type="image/x-icon" href="/bilder/favicon/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="/bilder/favicon/apple-touch-icon.png">
+    <link rel="manifest" href="/bilder/favicon/site.webmanifest">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Einfamilienhaus mieten Schleusingen | 227 m², 6 Zimmer | 1.300 € Kaltmiete</title>
     <meta name="description" content="Einfamilienhaus zur Langzeitmiete in Schleusingen: 227 m² Wohnfläche, 6 Zimmer, 3 Etagen mit Dachterrasse. Kaltmiete 1.300 €. Bahnhofstraße 10, 98553 Schleusingen. Ab sofort verfügbar." />
@@ -58,11 +187,11 @@
     </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">
+    <a href="#main-content" class="skip-link">Zum Inhalt springen</a>
+    <nav id="navbar" role="navigation" aria-label="Hauptnavigation">
       <div class="nav-logo">Bahnhofstraße 10</div>
       <button class="nav-hamburger" aria-label="Navigation öffnen" aria-expanded="false">
         <span></span>
@@ -86,7 +215,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">
@@ -111,6 +240,7 @@
       </div>
     </section>
 
+    <main id="main-content">
     <div class="facts-strip">
       <div class="fact">
         <div class="fact-val">227</div>
@@ -159,12 +289,15 @@
         </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>
 
-    <section id="galerie" class="gallery-section">
+    <section id="galerie" class="gallery-section" aria-label="Fotogalerie">
       <div class="gallery-header">
         <div>
           <div class="section-eyebrow">Fotogalerie</div>
@@ -174,55 +307,88 @@
       <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" role="button" tabindex="0" aria-label="Außenansicht – Großansicht öffnen">
+          <picture>
+            <source srcset="bilder/Außenansicht-2-small.webp" type="image/webp">
+            <img src="bilder/Außenansicht-2-small.png" alt="Außenansicht des Einfamilienhauses" 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" role="button" tabindex="0" aria-label="Wohnzimmer – Großansicht öffnen">
+          <picture>
+            <source srcset="bilder/wohnzimmer2-small.webp" type="image/webp">
+            <img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer mit 42,6 m² Wohnfläche" 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" role="button" tabindex="0" aria-label="Küche – Großansicht öffnen">
+          <picture>
+            <source srcset="bilder/Küche 1-small.webp" type="image/webp">
+            <img src="bilder/Küche 1.jpg" alt="Küche mit 18,4 m²" 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" role="button" tabindex="0" aria-label="Schlafzimmer – Großansicht öffnen">
+          <picture>
+            <source srcset="bilder/schlafzimmer-small.webp" type="image/webp">
+            <img src="bilder/schlafzimmer-small.png" alt="Schlafzimmer mit 18 m²" 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" role="button" tabindex="0" aria-label="Badezimmer – Großansicht öffnen">
+          <picture>
+            <source srcset="bilder/Bad-small.webp" type="image/webp">
+            <img src="bilder/Bad.jpg" alt="Badezimmer mit 9,8 m²" 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" role="button" tabindex="0" aria-label="Kinderzimmer 1 – Großansicht öffnen">
+          <picture>
+            <source srcset="bilder/Kinderzimmer-small.webp" type="image/webp">
+            <img src="bilder/Kinderzimmer-small.png" alt="Kinderzimmer 1 mit 21,7 m²" 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" role="button" tabindex="0" aria-label="Kinderzimmer 2 – Großansicht öffnen">
+          <picture>
+            <source srcset="bilder/Kinderzimmer 2-small.webp" type="image/webp">
+            <img src="bilder/Kinderzimmer 2-small.png" alt="Kinderzimmer 2 mit 15,7 m²" 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" role="button" tabindex="0" aria-label="Kinderzimmer Detail – Großansicht öffnen">
+          <picture>
+            <source srcset="bilder/kinderzimmer 2 2-small.webp" type="image/webp">
+            <img src="bilder/kinderzimmer 2 2-small.png" alt="Detailansicht Kinderzimmer" 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" role="button" tabindex="0" aria-label="Gästezimmer – Großansicht öffnen">
+          <picture>
+            <source srcset="bilder/Kinderzimmer 3-small.webp" type="image/webp">
+            <img src="bilder/Kinderzimmer 3-small.png" alt="Gästezimmer mit 11,5 m²" 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" role="button" tabindex="0" aria-label="Zweites Bad – Großansicht öffnen">
+          <picture>
+            <source srcset="bilder/Bad-2-small.webp" type="image/webp">
+            <img src="bilder/Bad-2-small.jpg" alt="Zweites Badezimmer im Haus" 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" role="button" tabindex="0" aria-label="Drittes Bad – Großansicht öffnen">
+          <picture>
+            <source srcset="bilder/Bad-3-small.webp" type="image/webp">
+            <img src="bilder/Bad-3-small.jpg" alt="Drittes Badezimmer im Haus" 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" role="button" tabindex="0" aria-label="Wohnbereich Detail – Großansicht öffnen">
+          <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>
@@ -233,14 +399,14 @@
       <h2>Großzügig auf allen Etagen</h2>
       <div class="floor-accordion">
         <div class="floor-item">
-          <div class="floor-header">
+          <div class="floor-header" role="button" tabindex="0" aria-expanded="false" aria-controls="floor-body-0" id="floor-title-0">
             <span class="floor-title">Erdgeschoss</span>
             <div class="floor-size">
               <span>99,5 m²</span>
               <div class="floor-icon">+</div>
             </div>
           </div>
-          <div class="floor-body">
+          <div class="floor-body" id="floor-body-0" role="region" aria-labelledby="floor-title-0">
             <div class="floor-rooms-grid">
               <div class="room-chip">
                 Flur
@@ -268,28 +434,36 @@
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
+              <picture>
+                <source srcset="bilder/grundrisse/EG-small.webp" type="image/webp">
                 <img
                   src="bilder/grundrisse/EG-small.jpg"
                   alt="Grundriss Erdgeschoss"
-                data-img="bilder/grundrisse/EG.png"
+                  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"
-                data-img="bilder/grundrisse/EG 3D.png"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/EG 3D.webp"
                 />
+              </picture>
             </div>
           </div>
         </div>
         <div class="floor-item">
-          <div class="floor-header">
+          <div class="floor-header" role="button" tabindex="0" aria-expanded="false" aria-controls="floor-body-1" id="floor-title-1">
             <span class="floor-title">1. Obergeschoss</span>
             <div class="floor-size">
               <span>120,4 m²</span>
               <div class="floor-icon">+</div>
             </div>
           </div>
-          <div class="floor-body">
+          <div class="floor-body" id="floor-body-1" role="region" aria-labelledby="floor-title-1">
             <div class="floor-rooms-grid">
               <div class="room-chip">
                 Flur
@@ -317,28 +491,36 @@
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
+              <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"
-                data-img="bilder/grundrisse/OG 1 2.png"
+                  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"
-                data-img="bilder/grundrisse/OG 1 3D.png"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/OG 1 3D.webp"
                 />
+              </picture>
             </div>
           </div>
         </div>
         <div class="floor-item">
-          <div class="floor-header">
+          <div class="floor-header" role="button" tabindex="0" aria-expanded="false" aria-controls="floor-body-2" id="floor-title-2">
             <span class="floor-title">2. Obergeschoss</span>
             <div class="floor-size">
               <span>68 m²</span>
               <div class="floor-icon">+</div>
             </div>
           </div>
-          <div class="floor-body">
+          <div class="floor-body" id="floor-body-2" role="region" aria-labelledby="floor-title-2">
             <div class="floor-rooms-grid">
               <div class="room-chip">
                 Flur
@@ -366,28 +548,36 @@
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
+              <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)"
-                data-img="bilder/grundrisse/OG 2 grundriss.png"
+                  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)"
-                data-img="bilder/grundrisse/OG 2 3D.png"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/OG 2 3D.webp"
                 />
+              </picture>
             </div>
           </div>
         </div>
         <div class="floor-item">
-          <div class="floor-header">
+          <div class="floor-header" role="button" tabindex="0" aria-expanded="false" aria-controls="floor-body-3" id="floor-title-3">
             <span class="floor-title">Dachboden</span>
             <div class="floor-size">
               <span>94 m² Nutzfläche</span>
               <div class="floor-icon">+</div>
             </div>
           </div>
-          <div class="floor-body">
+          <div class="floor-body" id="floor-body-3" role="region" aria-labelledby="floor-title-3">
             <div class="floor-rooms-grid">
               <div class="room-chip">
                 Dachboden unten (ungeheizt)
@@ -403,23 +593,31 @@
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
+              <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"
-                data-img="bilder/grundrisse/Dachboden unten 2.png"
+                  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"
-                data-img="bilder/grundrisse/Dachboden unten.png"
+                  loading="lazy"
+                  data-img="bilder/grundrisse/Dachboden unten.webp"
                 />
+              </picture>
             </div>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="pricing-section" id="miete">
+    <section class="pricing-section" id="miete" aria-label="Mietkonditionen">
       <div class="pricing-inner">
         <div class="section-eyebrow">Mietkonditionen</div>
         <h2>Transparente Preisgestaltung</h2>
@@ -517,7 +715,7 @@
       </div>
     </section>
 
-    <section class="contact-section" id="kontakt">
+    <section class="contact-section" id="kontakt" aria-label="Kontaktformular">
       <div class="contact-inner">
         <div class="section-eyebrow">Kontakt</div>
         <h2>
@@ -531,15 +729,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">
@@ -551,20 +765,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>
-                  <option>Allgemeine Informationen</option>
-                  <option>Mietbewerbung einreichen</option>
+<?php
+$interestOptions = ['Besichtigung anfragen', 'Allgemeine Informationen', 'Mietbewerbung einreichen'];
+foreach ($interestOptions as $opt):
+    $selected = ($formData['interest'] === $opt) ? ' selected' : '';
+?>
+                  <option<?= $selected ?>><?= escapeContactValue($opt) ?></option>
+<?php endforeach; ?>
                 </select>
               </div>
             </div>
@@ -576,16 +795,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">
-            <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>
+<?php endif; ?>
         </div>
         <div class="contact-details">
           <p>Oder schreiben Sie uns direkt: <a href="mailto:mki@kies-media.de">mki@kies-media.de</a></p>
@@ -593,7 +816,8 @@
       </div>
     </section>
 
-    <footer>
+    </main>
+    <footer role="contentinfo">
       <div class="footer-logo">Bahnhofstraße 10 · Schleusingen</div>
       <div class="footer-links">
         <a href="impressum.html">Impressum</a>
@@ -601,9 +825,9 @@
       </div>
     </footer>
 
-    <div class="lightbox" id="lightbox">
-      <button class="lightbox-close" id="lightboxClose">&times;</button>
-      <img src="" id="lightboxImg" alt="Vollbild" />
+    <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Bildansicht">
+      <button class="lightbox-close" id="lightboxClose" aria-label="Bildansicht schließen">&times;</button>
+      <img src="" id="lightboxImg" alt="" />
     </div>
 
     <script src="js/haus-schleusingen.js"></script>

js/haus-schleusingen.js

@@ -1,86 +1,191 @@
-$(function () {
+document.addEventListener("DOMContentLoaded", function () {
   // Navbar scroll
-  $(window).on("scroll", function () {
-    if ($(this).scrollTop() > 60) $("#navbar").addClass("scrolled");
-    else $("#navbar").removeClass("scrolled");
+  var navbar = document.getElementById("navbar");
+  window.addEventListener("scroll", function () {
+    if (window.scrollY > 60) navbar.classList.add("scrolled");
+    else navbar.classList.remove("scrolled");
   });
 
   // Hero animation on load
   setTimeout(function () {
-    $("#heroContent").addClass("visible");
-    $("#heroBg").addClass("loaded");
+    document.getElementById("heroContent").classList.add("visible");
+    document.getElementById("heroBg").classList.add("loaded");
   }, 200);
 
-  // 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)" });
+  // 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);
           }
         });
-  }
-  $("[data-animate]").css({
-    opacity: 0,
-    transform: "translateY(30px)",
-    transition: "opacity 0.8s ease, transform 0.8s ease",
+      },
+      { rootMargin: "0px 0px -60px 0px" }
+    );
+    animElements.forEach(function (el) {
+      observer.observe(el);
     });
-  $(window).on("scroll", checkVisible);
-  checkVisible();
+  } else {
+    // 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 () {
-    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);
-    }
+  // Floor accordion (vanilla JS + a11y)
+  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 hdr = fi.querySelector(".floor-header");
+        if (hdr) hdr.setAttribute("aria-expanded", "false");
+        var body = fi.querySelector(".floor-body");
+        if (body) body.style.display = "none";
       });
 
+      // Open clicked if it was closed
+      if (!isOpen) {
+        item.classList.add("open");
+        this.setAttribute("aria-expanded", "true");
+        var body = item.querySelector(".floor-body");
+        if (body) body.style.display = "block";
+      }
+    });
+  });
+
+  // Accordion keyboard handler (Enter/Space)
+  document.querySelectorAll(".floor-header").forEach(function (header) {
+    header.addEventListener("keydown", function (e) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.click();
+      }
+    });
+  });
+
+  // Lightbox – track last focused element for focus return
+  var lightboxTrigger = null;
+
+  function openLightbox(src) {
+    lightboxTrigger = document.activeElement;
+    var img = document.getElementById("lightboxImg");
+    // WebP fallback: if .webp fails, try original format
+    img.onerror = function () {
+      if (img.getAttribute('src').endsWith('.webp')) {
+        img.setAttribute('src', src.replace(/\.webp$/, '.png'));
+      }
+    };
+    img.setAttribute("src", src);
+    img.setAttribute("alt", "");
+    document.getElementById("lightbox").classList.add("open");
+    document.body.style.overflow = "hidden";
+    // Set focus to close button
+    setTimeout(function () {
+      document.getElementById("lightboxClose").focus();
+    }, 50);
+  }
+
+  function closeLightbox() {
+    document.getElementById("lightbox").classList.remove("open");
+    document.body.style.overflow = "";
+    // Return focus to trigger
+    if (lightboxTrigger) {
+      lightboxTrigger.focus();
+      lightboxTrigger = null;
+    }
+  }
+
   // Lightbox – gallery grid items
-  $(document).on("click", ".grid-item", function () {
-    var src = $(this).data("img") || $(this).find("img").attr("src");
-    $("#lightboxImg").attr("src", src);
-    $("#lightbox").addClass("open");
-    $("body").css("overflow", "hidden");
+  document.querySelectorAll(".grid-item").forEach(function (item) {
+    item.addEventListener("click", function () {
+      var src = this.dataset.img || this.querySelector("img").getAttribute("src");
+      openLightbox(src);
+    });
+  });
+
+  // Gallery keyboard handler (Enter/Space)
+  document.querySelectorAll(".grid-item").forEach(function (item) {
+    item.setAttribute("tabindex", "0");
+    item.addEventListener("keydown", function (e) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.click();
+      }
+    });
   });
 
   // Lightbox – floor plan images in Raumaufteilung
-  $(document).on("click", ".floor-plan img[data-img]", function () {
-    var src = $(this).data("img");
-    $("#lightboxImg").attr("src", src);
-    $("#lightbox").addClass("open");
-    $("body").css("overflow", "hidden");
+  document.querySelectorAll(".floor-plan img[data-img]").forEach(function (img) {
+    img.addEventListener("click", function () {
+      openLightbox(this.dataset.img);
     });
-  $("#lightboxClose, #lightbox").on("click", function (e) {
-    if (e.target === this) {
-      $("#lightbox").removeClass("open");
-      $("body").css("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();
+  });
+
+  // Focus trap for lightbox
+  document.getElementById("lightbox").addEventListener("keydown", function (e) {
+    if (e.key !== "Tab") return;
+
+    var focusable = this.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");
+    focusable = Array.from(focusable).filter(function (el) { return el.offsetParent !== null; });
+    if (focusable.length === 0) return;
+
+    var first = focusable[0];
+    var last = focusable[focusable.length - 1];
+
+    if (e.shiftKey) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
       }
-  });
-  $(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
-  $("#contactForm").on("submit", function (e) {
+  document.getElementById("contactForm").addEventListener("submit", function (e) {
     e.preventDefault();
 
-    var fname = $("#fname").val().trim();
-    var lname = $("#lname").val().trim();
-    var email = $("#email").val().trim();
-    var phone = $("#phone").val().trim();
-    var interest = $("#interest").val();
-    var message = $("#message").val().trim();
+    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";
@@ -97,8 +202,14 @@ $(function () {
     window.location.href = mailto;
 
     // Show success message
-    $("#contactForm").hide();
-    $("#formSuccess").fadeIn(400);
+    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";
+    });
   });
 });
 

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