<div id="about-tech-modal" class="home-modal-overlay hidden">
    <div class="home-modal-panel home-modal-wide">
        <button type="button" class="home-modal-close" data-about-modal-close="about-tech-modal">&times;</button>
        <h2>Technik</h2>
        <p class="home-modal-sub">Daten und Eckwerte zu Bild, Projektoren, Leinwandgrößen und Sitzkapazitäten.</p>
        <div class="hall-modal-grid full-page-grid">
            <article class="hall-modal-item">
                <h4>Projektoren</h4>
                <textarea placeholder="z.B. 4K Laserprojektion, Modellinfos, Lichtleistung..."></textarea>
            </article>
            <article class="hall-modal-item">
                <h4>Leinwandgrößen</h4>
                <textarea placeholder="z.B. IMAX: 22m x 12m, Deluxe: 14m x 7m ..."></textarea>
            </article>
            <article class="hall-modal-item">
                <h4>Sitzplätze pro Saal</h4>
                <textarea placeholder="z.B. Kino 1: 180, Kino 2: 150, Deluxe 1: 120, IMAX: 300"></textarea>
            </article>
            <article class="hall-modal-item">
                <h4>Bild & Audio</h4>
                <textarea placeholder="z.B. Dolby Atmos, 7.1, Frame Rates, HDR-Profile..."></textarea>
            </article>
        </div>
    </div>
</div>

<script>
    const aboutModal = document.getElementById("about-tech-modal");
    const openButtons = document.querySelectorAll("[data-about-modal-open='about-tech-modal']");
    const closeButtons = document.querySelectorAll("[data-about-modal-close='about-tech-modal']");

    openButtons.forEach(btn => btn.addEventListener("click", () => {
        aboutModal?.classList.remove("hidden");
        document.body.style.overflow = "hidden";
    }));

    closeButtons.forEach(btn => btn.addEventListener("click", () => {
        aboutModal?.classList.add("hidden");
        document.body.style.overflow = "auto";
    }));

    aboutModal?.addEventListener("click", (event) => {
        if (event.target === aboutModal) {
            aboutModal.classList.add("hidden");
            document.body.style.overflow = "auto";
        }
    });

    document.addEventListener("keydown", (event) => {
        if (event.key === "Escape" && aboutModal && !aboutModal.classList.contains("hidden")) {
            aboutModal.classList.add("hidden");
            document.body.style.overflow = "auto";
        }
    });
</script>
