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

Merge pull request 'fix: JavaScript doppelte Funktionen & toter Code (#39 )' (#40 ) from feature/39-js-duplicate-functions-fix into main
Reviewed-on: #40
2026-05-19 13:28:52 +00:00 · 2026-05-19 15:13:29 +02:00 · 2026-05-19 12:41:58 +00:00 · 2026-05-15 10:45:31 +02:00 · 2026-05-15 08:43:47 +00:00 · 2026-05-15 08:40:16 +00:00
51 changed files with 424 additions and 149 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/favicon/apple-touch-icon.png
+++ b/bilder/favicon/apple-touch-icon.png
--- a/bilder/favicon/favicon-16x16.png
+++ b/bilder/favicon/favicon-16x16.png
--- a/bilder/favicon/favicon-32x32.png
+++ b/bilder/favicon/favicon-32x32.png
--- a/bilder/favicon/favicon.ico
+++ b/bilder/favicon/favicon.ico
--- a/bilder/favicon/site.webmanifest
+++ b/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"
 }
--- 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/css/haus-schleusingen.css
+++ b/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;
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -13,7 +13,6 @@ module.exports = [
      sourceType: "script",
      globals: {
        ...globals.browser,
        ...globals.jquery,
      },
    },
    plugins: {
--- a/index.php
+++ b/index.php
@@ -126,6 +126,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 <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." />
@@ -182,11 +187,11 @@ 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>
-    <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>
@@ -210,7 +215,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">
@@ -235,6 +240,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
      </div>
    </section>
    <main id="main-content">
    <div class="facts-strip">
      <div class="fact">
        <div class="fact-val">227</div>
@@ -283,12 +289,15 @@ 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>
-    <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>
@@ -298,55 +307,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">
+        <div class="grid-item" data-img="bilder/Außenansicht-2.webp" role="button" tabindex="0" aria-label="Außenansicht – Großansicht öffnen">
-          <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 des Einfamilienhauses" 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" role="button" tabindex="0" aria-label="Wohnzimmer – Großansicht öffnen">
-          <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 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">
+        <div class="grid-item" data-img="bilder/Küche 1.webp" role="button" tabindex="0" aria-label="Küche – Großansicht öffnen">
-          <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 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">
+        <div class="grid-item" data-img="bilder/schlafzimmer.webp" role="button" tabindex="0" aria-label="Schlafzimmer – Großansicht öffnen">
-          <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 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">
+        <div class="grid-item" data-img="bilder/Bad.webp" role="button" tabindex="0" aria-label="Badezimmer – Großansicht öffnen">
-          <img src="bilder/Bad.jpg" alt="Badezimmer" />
+          <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">
+        <div class="grid-item" data-img="bilder/Kinderzimmer.webp" role="button" tabindex="0" aria-label="Kinderzimmer 1 – Großansicht öffnen">
-          <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 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">
+        <div class="grid-item" data-img="bilder/Kinderzimmer 2.webp" role="button" tabindex="0" aria-label="Kinderzimmer 2 – Großansicht öffnen">
-          <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 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">
+        <div class="grid-item" data-img="bilder/kinderzimmer 2 2.webp" role="button" tabindex="0" aria-label="Kinderzimmer Detail – Großansicht öffnen">
-          <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="Detailansicht Kinderzimmer" 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" role="button" tabindex="0" aria-label="Gästezimmer – Großansicht öffnen">
-          <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="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">
+        <div class="grid-item" data-img="bilder/Bad-2.webp" role="button" tabindex="0" aria-label="Zweites Bad – Großansicht öffnen">
-          <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="Zweites Badezimmer im Haus" 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" role="button" tabindex="0" aria-label="Drittes Bad – Großansicht öffnen">
-          <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="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">
+        <div class="grid-item" data-img="bilder/Bad-4.webp" role="button" tabindex="0" aria-label="Wohnbereich Detail – Großansicht öffnen">
-          <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>
@@ -357,14 +399,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
      <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
@@ -392,28 +434,36 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
              </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>
        <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
@@ -441,28 +491,36 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
              </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>
        <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
@@ -490,28 +548,36 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
              </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>
        <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)
@@ -527,23 +593,31 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
              </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>
      </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>
@@ -641,7 +715,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
      </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>
@@ -742,7 +816,8 @@ foreach ($interestOptions as $opt):
      </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>
@@ -750,9 +825,9 @@ foreach ($interestOptions as $opt):
      </div>
    </footer>
-    <div class="lightbox" id="lightbox">
+    <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Bildansicht">
-      <button class="lightbox-close" id="lightboxClose">&times;</button>
+      <button class="lightbox-close" id="lightboxClose" aria-label="Bildansicht schließen">&times;</button>
-      <img src="" id="lightboxImg" alt="Vollbild" />
+      <img src="" id="lightboxImg" alt="" />
    </div>
    <script src="js/haus-schleusingen.js"></script>
--- a/js/haus-schleusingen.js
+++ b/js/haus-schleusingen.js
@@ -1,77 +1,216 @@
-$(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);
          }
        });
      },
      { 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)";
    });
  }
  $("[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 () {
+  // Floor accordion (vanilla JS + a11y)
-    var item = $(this).closest(".floor-item");
+  document.querySelectorAll(".floor-header").forEach(function (header) {
-    var isOpen = item.hasClass("open");
+    header.addEventListener("click", function () {
-    $(".floor-item").removeClass("open");
+      var item = this.closest(".floor-item");
-    $(".floor-body").slideUp(300);
+      var isOpen = item.classList.contains("open");
-    if (!isOpen) {
+      var allItems = document.querySelectorAll(".floor-item");
-      item.addClass("open");
+
-      item.find(".floor-body").slideDown(300);
+      // 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 () {
+  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");
+    });
  });
  // 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 () {
+  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.getElementById("lightboxClose").addEventListener("click", closeLightbox);
-    }
+  document.getElementById("lightbox").addEventListener("click", function (e) {
    if (e.target === this) closeLightbox();
  });
-  $(document).on("keydown", function (e) {
+  document.addEventListener("keydown", function (e) {
-    if (e.key === "Escape") {
+    if (e.key === "Escape") closeLightbox();
-      $("#lightbox").removeClass("open");
+  });
-      $("body").css("overflow", "");
+
  // 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();
      }
    }
  });
  // 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/js/masonry.pkgd.min.js
+++ b/js/masonry.pkgd.min.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	9c0a9a856a	merge: resolve conflicts with main (WebP + vanilla JS + a11y) All checks were successful Deploy Feature Branch to Test / deploy (push) Successful in 32s Details	2026-05-19 13:28:52 +00:00
greggy	4ca48a7445	Merge pull request 'fix: JavaScript doppelte Funktionen & toter Code (#39 )' (#40 ) from feature/39-js-duplicate-functions-fix into main Reviewed-on: #40	2026-05-19 15:13:29 +02:00
Claw	6b13b95102	fix: remove duplicate openLightbox/closeLightbox and dead code (#39 ) All checks were successful Deploy Feature Branch to Test / deploy (push) Successful in 26s Details - Consolidate openLightbox() and closeLightbox() to single vanilla JS definition - Remove orphaned keyboard handler block that caused ReferenceError - Refs: #39	2026-05-19 12:41:58 +00:00
greggy	9a8776412e	Merge pull request 'Fix #36 : Favicon erstellen und einbinden' (#37 ) from feature/issue-36-favicon into main	2026-05-15 10:45:31 +02:00
greggy	127faaffaf	feat(favicon): use Außenansicht as favicon base All checks were successful Deploy Feature Branch to Test / deploy (push) Successful in 24s Details	2026-05-15 08:43:47 +00:00
greggy	c6eda36750	feat(favicon): add favicon and browser icons for Issue #36 All checks were successful Deploy Feature Branch to Test / deploy (push) Successful in 37s Details - favicon.ico (16x16 + 32x32) - favicon-32x32.png, favicon-16x16.png - apple-touch-icon.png (180x180) - site.webmanifest - Linked in index.php head Resolves #36	2026-05-15 08:40:16 +00:00
greggy	336fbc12a6	Merge pull request 'Fix #18 : Accessibility – ARIA-Labels, Focus-Management, Skip-Navigation' (#24 ) from feature/issue-18-accessibility into main	2026-05-15 10:32:45 +02:00
Claw AI	8b73603293	feat(a11y): ARIA labels, focus management, skip-nav, keyboard nav, contrast fix All checks were successful Deploy Feature Branch to Test / deploy (push) Successful in 23s Details Accessibility improvements per WCAG 2.1 AA: - Skip-to-content link (TA-1) - ARIA landmarks and roles for nav, main, sections, footer (TA-2) - Accordion keyboard navigation + aria-expanded (TA-3) - Lightbox focus trap + focus management + dialog role (TA-4) - Gallery grid items keyboard accessible (TA-5) - Improved alt texts for all images (TA-6) - Focus-visible styles for all interactive elements (TA-7) - Darker --stone color for WCAG AA contrast compliance (TA-8) Fix #18	2026-05-15 08:32:26 +00:00
greggy	d609175b3c	Merge pull request 'Fix #19 : Remove jQuery dependency, replace with vanilla JS' (#21 ) from feature/issue-19-remove-jquery-masonry into main	2026-05-15 10:29:56 +02:00
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
greggy	1fcdca95b7	refactor(js): remove jQuery dependency and replace with vanilla JS All checks were successful Deploy Feature Branch to Test / deploy (push) Successful in 24s Details - 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	2026-05-15 07:57:01 +00:00
greggy	88ef7aa6ac	Merge pull request 'Fix #34 : Kontaktformular E-Mail-Versand via PHP' (#35 ) from feature/issue-34-contact-form-mail into main	2026-05-15 09:50:43 +02:00