feat: Kontaktformular als Popup, Grid zentriert, Straße gefixt

- Kontaktformular als Modal-Popup (Name, Organisation, E-Mail, Nachricht)
- Oeffnet per Button-Klick, schliessbar per X/Overlay/Escape
- Submit erstellt mailto-Link mit vorausgefuellten Feldern
- Feature-Grid: letzte 2 Cards zentriert statt linksbuendig
- Gladbacher Strasse -> Gladbacher Straße

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vorschau/css/style.css

@@ -109,6 +109,10 @@ a { color:inherit; text-decoration:none; }
 
 /* ==================== GRID ==================== */
 .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
+#features .grid-3 { justify-items:center; }
+#features .grid-3 .feature-card:nth-last-child(-n+2):nth-child(3n+1) { grid-column: 1; }
+#features .grid-3 { display:flex; flex-wrap:wrap; justify-content:center; }
+#features .grid-3 .feature-card { width:calc(33.333% - 20px); }
 .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
 
 /* ==================== PROBLEM ==================== */
@@ -226,6 +230,23 @@ a { color:inherit; text-decoration:none; }
 .cta-text { font-size:1.1rem; color:var(--text-light); margin-bottom:32px; }
 .cta-email { font-size:0.9rem; color:var(--text-light); margin-top:16px; }
 
+
+/* ==================== CONTACT MODAL ==================== */
+.modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(10,24,50,0.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; }
+.modal-content { background:var(--white); border-radius:var(--radius-lg); padding:40px; max-width:520px; width:100%; position:relative; box-shadow:0 24px 64px rgba(10,24,50,0.3); max-height:90vh; overflow-y:auto; }
+.modal-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:1.8rem; color:var(--gray-400); cursor:pointer; line-height:1; }
+.modal-close:hover { color:var(--navy); }
+.modal-content h2 { font-size:1.5rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
+.modal-sub { font-size:0.95rem; color:var(--text-light); margin-bottom:28px; }
+.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
+.form-group { margin-bottom:16px; }
+.form-group label { display:block; font-size:0.82rem; font-weight:600; color:var(--navy); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em; }
+.form-group input, .form-group textarea { width:100%; padding:10px 14px; border:1px solid var(--gray-200); border-radius:var(--radius); font-family:inherit; font-size:0.95rem; color:var(--text); background:var(--base); transition:border-color 0.2s; }
+.form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--gold); }
+.form-group textarea { resize:vertical; }
+.form-success { text-align:center; padding:40px 0; }
+.form-success p { font-size:1.05rem; color:var(--navy); font-weight:500; }
+@media(max-width:768px) { .form-row { grid-template-columns:1fr; } .modal-content { padding:28px 20px; } }
 /* ==================== FOOTER ==================== */
 .footer { background:var(--navy); color:rgba(255,255,255,0.7); padding:40px 0; font-size:0.85rem; }
 .footer-content { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.1); }

vorschau/index.html

@@ -96,7 +96,7 @@
             <p class="hero-sub">Aggregiert, analysiert und verifiziert Informationen aus öffentlich zugänglichen Quellen.</p>
             <div class="hero-cta">
                 <a href="#demos" class="btn btn-primary">Live-Demo ansehen</a>
-                <a href="mailto:info@aegis-sight.de" class="btn btn-outline-light">Kontakt aufnehmen</a>
+                <button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
             </div>
         </div>
     </section>
@@ -291,7 +291,7 @@
         <div class="container cta-container">
             <h2 class="section-title">Interesse am AegisSight Monitor?</h2>
             <p class="cta-text">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
-            <a href="mailto:info@aegis-sight.de" class="btn btn-primary btn-lg">Kontakt aufnehmen</a>
+            <button class="btn btn-primary btn-lg" onclick="openContactModal()">Kontakt aufnehmen</button>
         </div>
     </section>
 
@@ -343,7 +343,7 @@
             <div class="footer-content">
                 <div class="footer-info">
                     <p class="footer-company">AegisSight UG (haftungsbeschränkt)</p>
-                    <p>Gladbacher Strasse 3-5, 40764 Langenfeld</p>
+                    <p>Gladbacher Straße 3-5, 40764 Langenfeld</p>
                 </div>
                 <div class="footer-links">
                     <a href="/impressum.html">Impressum</a>
@@ -354,6 +354,40 @@
         </div>
     </footer>
 
+
+    <!-- Contact Modal -->
+    <div class="modal-overlay" id="contact-modal" style="display:none">
+        <div class="modal-content">
+            <button class="modal-close" onclick="closeContactModal()">&times;</button>
+            <h2>Kontakt aufnehmen</h2>
+            <p class="modal-sub">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
+            <form id="contact-form" onsubmit="return submitContact(event)">
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="cf-name">Name</label>
+                        <input type="text" id="cf-name" name="name" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="cf-org">Organisation</label>
+                        <input type="text" id="cf-org" name="organisation">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="cf-email">E-Mail</label>
+                    <input type="email" id="cf-email" name="email" required>
+                </div>
+                <div class="form-group">
+                    <label for="cf-message">Nachricht</label>
+                    <textarea id="cf-message" name="message" rows="4" required></textarea>
+                </div>
+                <button type="submit" class="btn btn-primary btn-block">Nachricht senden</button>
+            </form>
+            <div class="form-success" id="form-success" style="display:none">
+                <p>Vielen Dank für Ihre Nachricht. Wir melden uns zeitnah bei Ihnen.</p>
+            </div>
+        </div>
+    </div>
+
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script src="js/app.js"></script>
 </body>

vorschau/js/app.js

@@ -325,6 +325,55 @@ function mdToHtml(md) {
         setTimeout(function () { mapInstance.invalidateSize(); }, 300);
     }
 
+    /* ==================== CONTACT MODAL ==================== */
+    window.openContactModal = function () {
+        document.getElementById('contact-modal').style.display = 'flex';
+        document.body.style.overflow = 'hidden';
+    };
+
+    window.closeContactModal = function () {
+        document.getElementById('contact-modal').style.display = 'none';
+        document.body.style.overflow = '';
+    };
+
+    // Close on overlay click
+    var modalOverlay = document.getElementById('contact-modal');
+    if (modalOverlay) {
+        modalOverlay.addEventListener('click', function (e) {
+            if (e.target === modalOverlay) closeContactModal();
+        });
+    }
+
+    // Close on Escape
+    document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && modalOverlay && modalOverlay.style.display === 'flex') {
+            closeContactModal();
+        }
+    });
+
+    // Form submit -> mailto fallback (no backend yet)
+    window.submitContact = function (e) {
+        e.preventDefault();
+        var name = document.getElementById('cf-name').value;
+        var org = document.getElementById('cf-org').value;
+        var email = document.getElementById('cf-email').value;
+        var msg = document.getElementById('cf-message').value;
+
+        var subject = 'Anfrage von ' + name + (org ? ' (' + org + ')' : '');
+        var body = 'Name: ' + name + '
+Organisation: ' + (org || '-') + '
+E-Mail: ' + email + '
+
+Nachricht:
+' + msg;
+
+        window.location.href = 'mailto:info@aegis-sight.de?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
+
+        document.getElementById('contact-form').style.display = 'none';
+        document.getElementById('form-success').style.display = 'block';
+        return false;
+    };
+
     /* ==================== INIT ==================== */
     loadLiveData();
 })();