From 2401ce032165a0352cb2e7f548af1c36d2670a6f Mon Sep 17 00:00:00 2001
From: cgasser <cg@stranto.com>
Date: Fri, 22 May 2026 11:50:26 +0200
Subject: [PATCH] Replace Leaflet with Google Maps iframe embed

No API key required for the iframe embed at low traffic.
Grayscale CSS filter applied, lifts on hover.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 49 ++++++++++++++++---------------------------------
 1 file changed, 16 insertions(+), 33 deletions(-)

diff --git a/index.html b/index.html
index 246455c..6cdbe13 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,6 @@
   <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; }
@@ -510,13 +509,17 @@
       flex-direction: column;
       gap: 16px;
     }
-    #map {
-      flex: 1;
-      min-height: 320px;
-      filter: grayscale(100%) brightness(0.75) contrast(1.1);
+    .contact-map-box iframe {
+      width: 100%;
+      height: 320px;
+      border: none;
+      filter: grayscale(80%) contrast(1.05);
       transition: filter 0.4s ease;
+      display: block;
+    }
+    .contact-map-box iframe:hover {
+      filter: grayscale(20%) contrast(1.0);
     }
-    #map:hover { filter: grayscale(60%) brightness(0.85) contrast(1.05); }
     .map-link {
       display: inline-block;
       align-self: flex-start;
@@ -962,7 +965,13 @@
     </div>
 
     <div class="contact-map-box">
-      <div id="map"></div>
+      <iframe
+        src="https://maps.google.com/maps?q=Elisabethstra%C3%9Fe+14%2C+2380+Perchtoldsdorf%2C+Austria&z=16&output=embed&hl=de"
+        allowfullscreen
+        loading="lazy"
+        referrerpolicy="no-referrer-when-downgrade"
+        title="Marszalek Architekten – Elisabethstraße 14, 2380 Perchtoldsdorf">
+      </iframe>
       <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>
@@ -1026,32 +1035,6 @@
     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 => {