Add Leaflet.js map in contact section

Replaces placeholder with an interactive OpenStreetMap embed (no API key
required). Marker at exact geocoded coordinates for Elisabethstraße 14,
2380 Perchtoldsdorf. Map rendered in grayscale to match the dark section.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

index.html

@@ -8,6 +8,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
   <style>
     /* ── Reset ── */
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -507,36 +508,18 @@
     .contact-map-box {
       display: flex;
       flex-direction: column;
-      gap: 24px;
-    }
-    .map-placeholder {
-      flex: 1;
-      min-height: 320px;
-      background: rgba(255,255,255,0.05);
-      border: 1px solid rgba(255,255,255,0.1);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
       gap: 16px;
     }
-    .map-address {
+    #map {
-      text-align: center;
+      flex: 1;
-    }
+      min-height: 320px;
-    .map-address p {
+      filter: grayscale(100%) brightness(0.75) contrast(1.1);
-      font-size: 14px;
+      transition: filter 0.4s ease;
-      color: rgba(255,255,255,0.5);
-      line-height: 1.6;
-    }
-    .map-address strong {
-      display: block;
-      font-size: 16px;
-      color: var(--white);
-      font-weight: 300;
-      margin-bottom: 6px;
     }
+    #map:hover { filter: grayscale(60%) brightness(0.85) contrast(1.05); }
     .map-link {
       display: inline-block;
+      align-self: flex-start;
       padding: 11px 28px;
       border: 1px solid rgba(255,255,255,0.25);
       font-size: 10.5px;
@@ -979,18 +962,9 @@
     </div>
 
     <div class="contact-map-box">
-      <div class="map-placeholder">
+      <div id="map"></div>
-        <div class="map-address">
+      <a href="https://www.google.com/maps/search/Elisabethstra%C3%9Fe+14,+2380+Perchtoldsdorf"
-          <strong>Marszalek Architekten</strong>
+         target="_blank" rel="noopener noreferrer" class="map-link">Route planen ↗</a>
-          <p>Elisabethstraße 14<br>2380 Perchtoldsdorf, Österreich</p>
-        </div>
-        <a
-          href="https://www.google.com/maps/search/Elisabethstra%C3%9Fe+14,+2380+Perchtoldsdorf"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="map-link"
-        >Route planen</a>
-      </div>
     </div>
   </div>
 </section>
@@ -1052,6 +1026,32 @@
     a.addEventListener('click', () => navLinks.classList.remove('open'));
   });
 
+  /* ── Map (Leaflet + OpenStreetMap) ── */
+  (function () {
+    const script = document.createElement('script');
+    script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
+    script.integrity = 'sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV/XN/WLcE=';
+    script.crossOrigin = '';
+    script.onload = function () {
+      const lat = 48.1176923, lng = 16.2631144;
+      const map = L.map('map', { zoomControl: true, scrollWheelZoom: false }).setView([lat, lng], 16);
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+        maxZoom: 19,
+      }).addTo(map);
+      const icon = L.divIcon({
+        className: '',
+        html: '<div style="width:14px;height:14px;border-radius:50%;background:#99cc00;border:3px solid #fff;box-shadow:0 0 0 2px #99cc00;"></div>',
+        iconSize: [14, 14],
+        iconAnchor: [7, 7],
+      });
+      L.marker([lat, lng], { icon })
+        .addTo(map)
+        .bindPopup('<strong>Marszalek Architekten</strong><br>Elisabethstraße 14<br>2380 Perchtoldsdorf');
+    };
+    document.head.appendChild(script);
+  })();
+
   /* ── Smooth scroll (fallback for older browsers) ── */
   document.querySelectorAll('a[href^="#"]').forEach(a => {
     a.addEventListener('click', e => {