From 47eca108805cb659d2980d89e1473d9558de815d Mon Sep 17 00:00:00 2001
From: cgasser <cg@stranto.com>
Date: Fri, 22 May 2026 11:47:08 +0200
Subject: [PATCH] Add Leaflet.js map in contact section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 74 +++++++++++++++++++++++++++---------------------------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index f9d76a1..246455c 100644
--- a/index.html
+++ b/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 {
-      text-align: center;
-    }
-    .map-address p {
-      font-size: 14px;
-      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 {
+      flex: 1;
+      min-height: 320px;
+      filter: grayscale(100%) brightness(0.75) contrast(1.1);
+      transition: filter 0.4s ease;
     }
+    #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 class="map-address">
-          <strong>Marszalek Architekten</strong>
-          <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 id="map"></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>
 </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 => {