greggy/landingpage-haus-schleusingen
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

merge: resolve conflicts with main (WebP + vanilla JS + a11y)
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 32s
Details

Browse Source
This commit is contained in:
Claw
2026-05-19 13:28:52 +00:00
parent 73635a5f03 4ca48a7445
commit 9c0a9a856a
9 changed files with 295 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bilder/favicon/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
bilder/favicon/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 851 B

BIN
bilder/favicon/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
bilder/favicon/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

10
bilder/favicon/site.webmanifest Normal file
View File

@@ -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"
}

50
css/haus-schleusingen.css
View File

@@ -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 { :root {
--cream: #f5f0e8; --cream: #f5f0e8;
--warm: #e8dfd0; --warm: #e8dfd0;
--stone: #9e9485; --stone: #7a7062;
--dark: #1c1a17; --dark: #1c1a17;
--charcoal: #2e2b26; --charcoal: #2e2b26;
--accent: #8b6914; --accent: #8b6914;

1
eslint.config.js
View File

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

87
index.php
View File

@@ -126,6 +126,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Einfamilienhaus mieten Schleusingen | 227 m², 6 Zimmer | 1.300 € Kaltmiete</title> <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." /> <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> </script>
<link rel="stylesheet" href="fonts/fonts.css" /> <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" /> <link rel="stylesheet" href="css/haus-schleusingen.css" />
</head> </head>
<body> <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> <div class="nav-logo">Bahnhofstraße 10</div>
<button class="nav-hamburger" aria-label="Navigation öffnen" aria-expanded="false"> <button class="nav-hamburger" aria-label="Navigation öffnen" aria-expanded="false">
<span></span> <span></span>
@@ -235,6 +240,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
</section> </section>
<main id="main-content">
<div class="facts-strip"> <div class="facts-strip">
<div class="fact"> <div class="fact">
<div class="fact-val">227</div> <div class="fact-val">227</div>
@@ -291,7 +297,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
</section> </section>
<section id="galerie" class="gallery-section"> <section id="galerie" class="gallery-section" aria-label="Fotogalerie">
<div class="gallery-header"> <div class="gallery-header">
<div> <div>
<div class="section-eyebrow">Fotogalerie</div> <div class="section-eyebrow">Fotogalerie</div>
@@ -301,84 +307,84 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<div class="masonry-grid"> <div class="masonry-grid">
<div class="grid-sizer"></div> <div class="grid-sizer"></div>
<div class="grid-item" data-img="bilder/Außenansicht-2.webp"> <div class="grid-item" data-img="bilder/Außenansicht-2.webp" role="button" tabindex="0" aria-label="Außenansicht – Großansicht öffnen">
<picture> <picture>
<source srcset="bilder/Außenansicht-2-small.webp" type="image/webp"> <source srcset="bilder/Außenansicht-2-small.webp" type="image/webp">
<img src="bilder/Außenansicht-2-small.png" alt="Außenansicht" loading="lazy" /> <img src="bilder/Außenansicht-2-small.png" alt="Außenansicht des Einfamilienhauses" loading="lazy" />
</picture> </picture>
<span class="grid-item-label">Außenansicht</span> <span class="grid-item-label">Außenansicht</span>
</div> </div>
<div class="grid-item" data-img="bilder/wohnzimmer2.webp"> <div class="grid-item" data-img="bilder/wohnzimmer2.webp" role="button" tabindex="0" aria-label="Wohnzimmer – Großansicht öffnen">
<picture> <picture>
<source srcset="bilder/wohnzimmer2-small.webp" type="image/webp"> <source srcset="bilder/wohnzimmer2-small.webp" type="image/webp">
<img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer" loading="lazy" /> <img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer mit 42,6 m² Wohnfläche" loading="lazy" />
</picture> </picture>
<span class="grid-item-label">Wohnzimmer · 42,6 m²</span> <span class="grid-item-label">Wohnzimmer · 42,6 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/Küche 1.webp"> <div class="grid-item" data-img="bilder/Küche 1.webp" role="button" tabindex="0" aria-label="Küche – Großansicht öffnen">
<picture> <picture>
<source srcset="bilder/Küche 1-small.webp" type="image/webp"> <source srcset="bilder/Küche 1-small.webp" type="image/webp">
<img src="bilder/Küche 1.jpg" alt="Küche" loading="lazy" /> <img src="bilder/Küche 1.jpg" alt="Küche mit 18,4 m²" loading="lazy" />
</picture> </picture>
<span class="grid-item-label">Küche · 18,4 m²</span> <span class="grid-item-label">Küche · 18,4 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/schlafzimmer.webp"> <div class="grid-item" data-img="bilder/schlafzimmer.webp" role="button" tabindex="0" aria-label="Schlafzimmer – Großansicht öffnen">
<picture> <picture>
<source srcset="bilder/schlafzimmer-small.webp" type="image/webp"> <source srcset="bilder/schlafzimmer-small.webp" type="image/webp">
<img src="bilder/schlafzimmer-small.png" alt="Schlafzimmer" loading="lazy" /> <img src="bilder/schlafzimmer-small.png" alt="Schlafzimmer mit 18 m²" loading="lazy" />
</picture> </picture>
<span class="grid-item-label">Schlafzimmer · 18 m²</span> <span class="grid-item-label">Schlafzimmer · 18 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/Bad.webp"> <div class="grid-item" data-img="bilder/Bad.webp" role="button" tabindex="0" aria-label="Badezimmer – Großansicht öffnen">
<picture> <picture>
<source srcset="bilder/Bad-small.webp" type="image/webp"> <source srcset="bilder/Bad-small.webp" type="image/webp">
<img src="bilder/Bad.jpg" alt="Badezimmer" loading="lazy" /> <img src="bilder/Bad.jpg" alt="Badezimmer mit 9,8 m²" loading="lazy" />
</picture> </picture>
<span class="grid-item-label">Badezimmer · 9,8 m²</span> <span class="grid-item-label">Badezimmer · 9,8 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/Kinderzimmer.webp"> <div class="grid-item" data-img="bilder/Kinderzimmer.webp" role="button" tabindex="0" aria-label="Kinderzimmer 1 – Großansicht öffnen">
<picture> <picture>
<source srcset="bilder/Kinderzimmer-small.webp" type="image/webp"> <source srcset="bilder/Kinderzimmer-small.webp" type="image/webp">
<img src="bilder/Kinderzimmer-small.png" alt="Kinderzimmer 1" loading="lazy" /> <img src="bilder/Kinderzimmer-small.png" alt="Kinderzimmer 1 mit 21,7 m²" loading="lazy" />
</picture> </picture>
<span class="grid-item-label">Kinderzimmer 1 · 21,7 m²</span> <span class="grid-item-label">Kinderzimmer 1 · 21,7 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/Kinderzimmer 2.webp"> <div class="grid-item" data-img="bilder/Kinderzimmer 2.webp" role="button" tabindex="0" aria-label="Kinderzimmer 2 – Großansicht öffnen">
<picture> <picture>
<source srcset="bilder/Kinderzimmer 2-small.webp" type="image/webp"> <source srcset="bilder/Kinderzimmer 2-small.webp" type="image/webp">
<img src="bilder/Kinderzimmer 2-small.png" alt="Kinderzimmer 2" loading="lazy" /> <img src="bilder/Kinderzimmer 2-small.png" alt="Kinderzimmer 2 mit 15,7 m²" loading="lazy" />
</picture> </picture>
<span class="grid-item-label">Kinderzimmer 2 · 15,7 m²</span> <span class="grid-item-label">Kinderzimmer 2 · 15,7 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/kinderzimmer 2 2.webp"> <div class="grid-item" data-img="bilder/kinderzimmer 2 2.webp" role="button" tabindex="0" aria-label="Kinderzimmer Detail – Großansicht öffnen">
<picture> <picture>
<source srcset="bilder/kinderzimmer 2 2-small.webp" type="image/webp"> <source srcset="bilder/kinderzimmer 2 2-small.webp" type="image/webp">
<img src="bilder/kinderzimmer 2 2-small.png" alt="Kinderzimmer Detail" loading="lazy" /> <img src="bilder/kinderzimmer 2 2-small.png" alt="Detailansicht Kinderzimmer" loading="lazy" />
</picture> </picture>
<span class="grid-item-label">Kinderzimmer Detail</span> <span class="grid-item-label">Kinderzimmer Detail</span>
</div> </div>
<div class="grid-item" data-img="bilder/Kinderzimmer 3.webp"> <div class="grid-item" data-img="bilder/Kinderzimmer 3.webp" role="button" tabindex="0" aria-label="Gästezimmer – Großansicht öffnen">
<picture> <picture>
<source srcset="bilder/Kinderzimmer 3-small.webp" type="image/webp"> <source srcset="bilder/Kinderzimmer 3-small.webp" type="image/webp">
<img src="bilder/Kinderzimmer 3-small.png" alt="Kinderzimmer 3" loading="lazy" /> <img src="bilder/Kinderzimmer 3-small.png" alt="Gästezimmer mit 11,5 m²" loading="lazy" />
</picture> </picture>
<span class="grid-item-label">Gästezimmer · 11,5 m²</span> <span class="grid-item-label">Gästezimmer · 11,5 m²</span>
</div> </div>
<div class="grid-item" data-img="bilder/Bad-2.webp"> <div class="grid-item" data-img="bilder/Bad-2.webp" role="button" tabindex="0" aria-label="Zweites Bad – Großansicht öffnen">
<picture> <picture>
<source srcset="bilder/Bad-2-small.webp" type="image/webp"> <source srcset="bilder/Bad-2-small.webp" type="image/webp">
<img src="bilder/Bad-2-small.jpg" alt="Wohnbereich Detail 1" loading="lazy" /> <img src="bilder/Bad-2-small.jpg" alt="Zweites Badezimmer im Haus" loading="lazy" />
</picture> </picture>
<span class="grid-item-label">Wohnbereich</span> <span class="grid-item-label">Wohnbereich</span>
</div> </div>
<div class="grid-item" data-img="bilder/Bad-3.webp"> <div class="grid-item" data-img="bilder/Bad-3.webp" role="button" tabindex="0" aria-label="Drittes Bad – Großansicht öffnen">
<picture> <picture>
<source srcset="bilder/Bad-3-small.webp" type="image/webp"> <source srcset="bilder/Bad-3-small.webp" type="image/webp">
<img src="bilder/Bad-3-small.jpg" alt="Wohnbereich Detail 2" loading="lazy" /> <img src="bilder/Bad-3-small.jpg" alt="Drittes Badezimmer im Haus" loading="lazy" />
</picture> </picture>
<span class="grid-item-label">Wohnbereich Detail</span> <span class="grid-item-label">Wohnbereich Detail</span>
</div> </div>
<div class="grid-item" data-img="bilder/Bad-4.webp"> <div class="grid-item" data-img="bilder/Bad-4.webp" role="button" tabindex="0" aria-label="Wohnbereich Detail – Großansicht öffnen">
<picture> <picture>
<source srcset="bilder/Bad-4-small.webp" type="image/webp"> <source srcset="bilder/Bad-4-small.webp" type="image/webp">
<img src="bilder/Bad-4-small.jpg" alt="Wohnbereich Detail 3" loading="lazy" /> <img src="bilder/Bad-4-small.jpg" alt="Wohnbereich Detail 3" loading="lazy" />
@@ -393,14 +399,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<h2>Großzügig auf allen Etagen</h2> <h2>Großzügig auf allen Etagen</h2>
<div class="floor-accordion"> <div class="floor-accordion">
<div class="floor-item"> <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> <span class="floor-title">Erdgeschoss</span>
<div class="floor-size"> <div class="floor-size">
<span>99,5 m²</span> <span>99,5 m²</span>
<div class="floor-icon">+</div> <div class="floor-icon">+</div>
</div> </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="floor-rooms-grid">
<div class="room-chip"> <div class="room-chip">
Flur Flur
@@ -450,14 +456,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
</div> </div>
<div class="floor-item"> <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> <span class="floor-title">1. Obergeschoss</span>
<div class="floor-size"> <div class="floor-size">
<span>120,4 m²</span> <span>120,4 m²</span>
<div class="floor-icon">+</div> <div class="floor-icon">+</div>
</div> </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="floor-rooms-grid">
<div class="room-chip"> <div class="room-chip">
Flur Flur
@@ -507,14 +513,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
</div> </div>
<div class="floor-item"> <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> <span class="floor-title">2. Obergeschoss</span>
<div class="floor-size"> <div class="floor-size">
<span>68 m²</span> <span>68 m²</span>
<div class="floor-icon">+</div> <div class="floor-icon">+</div>
</div> </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="floor-rooms-grid">
<div class="room-chip"> <div class="room-chip">
Flur Flur
@@ -564,14 +570,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
</div> </div>
<div class="floor-item"> <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> <span class="floor-title">Dachboden</span>
<div class="floor-size"> <div class="floor-size">
<span>94 m² Nutzfläche</span> <span>94 m² Nutzfläche</span>
<div class="floor-icon">+</div> <div class="floor-icon">+</div>
</div> </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="floor-rooms-grid">
<div class="room-chip"> <div class="room-chip">
Dachboden unten (ungeheizt) Dachboden unten (ungeheizt)
@@ -611,7 +617,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
</section> </section>
<section class="pricing-section" id="miete"> <section class="pricing-section" id="miete" aria-label="Mietkonditionen">
<div class="pricing-inner"> <div class="pricing-inner">
<div class="section-eyebrow">Mietkonditionen</div> <div class="section-eyebrow">Mietkonditionen</div>
<h2>Transparente Preisgestaltung</h2> <h2>Transparente Preisgestaltung</h2>
@@ -709,7 +715,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
</section> </section>
<section class="contact-section" id="kontakt"> <section class="contact-section" id="kontakt" aria-label="Kontaktformular">
<div class="contact-inner"> <div class="contact-inner">
<div class="section-eyebrow">Kontakt</div> <div class="section-eyebrow">Kontakt</div>
<h2> <h2>
@@ -810,7 +816,8 @@ foreach ($interestOptions as $opt):
</div> </div>
</section> </section>
<footer> </main>
<footer role="contentinfo">
<div class="footer-logo">Bahnhofstraße 10 · Schleusingen</div> <div class="footer-logo">Bahnhofstraße 10 · Schleusingen</div>
<div class="footer-links"> <div class="footer-links">
<a href="impressum.html">Impressum</a> <a href="impressum.html">Impressum</a>
@@ -818,9 +825,9 @@ foreach ($interestOptions as $opt):
</div> </div>
</footer> </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> </div>
<script src="js/haus-schleusingen.js"></script> <script src="js/haus-schleusingen.js"></script>

250
js/haus-schleusingen.js
View File

@@ -1,88 +1,216 @@
$(function () { document.addEventListener("DOMContentLoaded", function () {
// Navbar scroll // 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 // Hero animation on load
setTimeout(function () { setTimeout(function () {
$("#heroContent").addClass("visible"); document.getElementById("heroContent").classList.add("visible");
$("#heroBg").addClass("loaded"); document.getElementById("heroBg").classList.add("loaded");
}, 200); }, 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 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);
}
});
// Lightbox – gallery grid items // Close all
$(document).on("click", ".grid-item", function () { allItems.forEach(function (fi) {
var src = $(this).data("img") || $(this).find("img").attr("src"); fi.classList.remove("open");
$("#lightboxImg").off("error").on("error", function () { var hdr = fi.querySelector(".floor-header");
// WebP fallback: try original format if (hdr) hdr.setAttribute("aria-expanded", "false");
if ($(this).attr('src').endsWith('.webp')) { var body = fi.querySelector(".floor-body");
$(this).attr('src', src.replace(/\.webp$/, '.png')); 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.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();
} }
}); });
$("#lightboxImg").attr("src", src);
$("#lightbox").addClass("open");
$("body").css("overflow", "hidden");
}); });
// Lightbox – floor plan images in Raumaufteilung // 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").off("error").on("error", function () { openLightbox(this.dataset.img);
if ($(this).attr('src').endsWith('.webp')) {
$(this).attr('src', src.replace(/\.webp$/, '.png'));
}
}); });
$("#lightboxImg").attr("src", src);
$("#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 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) // Mobile hamburger menu (vanilla JS)