document.addEventListener("DOMContentLoaded", function () { // Navbar scroll 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 () { document.getElementById("heroContent").classList.add("visible"); document.getElementById("heroBg").classList.add("loaded"); }, 200); // 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); } }); }, { 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)"; }); } // Floor accordion 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 body = fi.querySelector(".floor-body"); if (body) body.style.display = "none"; }); // Open clicked if it was closed if (!isOpen) { item.classList.add("open"); var body = item.querySelector(".floor-body"); if (body) body.style.display = "block"; } }); }); // 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); }); }); // Lightbox – floor plan images in Raumaufteilung document.querySelectorAll(".floor-plan img[data-img]").forEach(function (img) { img.addEventListener("click", function () { openLightbox(this.dataset.img); }); }); function openLightbox(src) { document.getElementById("lightboxImg").setAttribute("src", src); document.getElementById("lightbox").classList.add("open"); document.body.style.overflow = "hidden"; } function closeLightbox() { document.getElementById("lightbox").classList.remove("open"); document.body.style.overflow = ""; } document.getElementById("lightboxClose").addEventListener("click", closeLightbox); document.getElementById("lightbox").addEventListener("click", function (e) { if (e.target === this) closeLightbox(); }); document.addEventListener("keydown", function (e) { if (e.key === "Escape") closeLightbox(); }); // Form submit is handled server-side by PHP – no JS intervention needed. // Form submit – opens email client with pre-filled mailto: link 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) (function () { var hamburger = document.querySelector(".nav-hamburger"); var nav = document.getElementById("navbar"); var overlay = document.querySelector(".nav-mobile-overlay"); var links = nav ? nav.querySelectorAll(".nav-links a") : []; function toggleMenu() { var isOpen = hamburger.classList.toggle("active"); nav.classList.toggle("mobile-open", isOpen); if (overlay) overlay.classList.toggle("active", isOpen); hamburger.setAttribute("aria-expanded", isOpen); document.body.style.overflow = isOpen ? "hidden" : ""; } function closeMenu() { hamburger.classList.remove("active"); nav.classList.remove("mobile-open"); if (overlay) overlay.classList.remove("active"); hamburger.setAttribute("aria-expanded", "false"); document.body.style.overflow = ""; } if (hamburger) { hamburger.addEventListener("click", toggleMenu); } if (overlay) { overlay.addEventListener("click", closeMenu); } links.forEach(function (link) { link.addEventListener("click", closeMenu); }); document.addEventListener("keydown", function (e) { if (e.key === "Escape") closeMenu(); }); // Close on resize to desktop window.addEventListener("resize", function () { if (window.innerWidth > 900) closeMenu(); }); })();