Echte Karte auf Unternehmen und Kontakt (MapLibre + OpenFreeMap)

Ersetzt die schematische Karte durch MapLibre GL 6.11 (lokal
eingebunden, ohne React, da die Seite statisch ist). Kacheln vom
OpenFreeMap-Stil "dark", auf die Nachtblau-Palette umgefärbt; Marker
mit Label, lädt beim Heranscrollen und zoomt sanft auf den Standort.
Die schematische Karte bleibt als Vorschau und Fallback ohne WebGL.
Datenschutzerklärung um den Kartenanbieter ergänzt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

kontakt.html

@@ -25,6 +25,7 @@
 <script src="assets/vendor/lenis.min.js" defer></script>
 <script src="assets/motion.js" defer></script>
 
+<script type="module" src="assets/map.js"></script>
 </head>
 <body>
 <a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
@@ -80,8 +81,8 @@
       <p class="lead" data-reveal>Kirschner Gebäudeservice<br>Etzstraße 45<br>84030 Ergolding</p>
       <div class="btn-row" data-reveal><a class="btn" href="https://www.google.com/maps/search/?api=1&query=Etzstra%C3%9Fe+45%2C+84030+Ergolding" target="_blank" rel="noopener">Route planen <svg class="btn__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></a></div>
     </div>
-    <a class="map reveal-img" href="https://www.google.com/maps/search/?api=1&query=Etzstra%C3%9Fe+45%2C+84030+Ergolding" target="_blank" rel="noopener" aria-label="Standort in Google Maps öffnen (externe Seite)">
-      <svg viewBox="0 0 800 480" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+    <div class="map reveal-img" data-map data-lng="12.1740033" data-lat="48.5646225" data-label="Kirschner Gebäudeservice" role="region" aria-label="Karte: Kirschner Gebäudeservice, Etzstraße 45, Ergolding">
+      <div class="map__placeholder" aria-hidden="true"><svg viewBox="0 0 800 480" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
   <defs><pattern id="g" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M40 0H0v40" fill="none" stroke="rgba(169,183,204,.07)"/></pattern></defs>
   <rect width="800" height="480" fill="url(#g)"/>
   <path d="M-20 360 C 140 330, 240 400, 380 370 S 640 300, 820 330" fill="none" stroke="rgba(91,138,214,.35)" stroke-width="18" stroke-linecap="round"/>
@@ -89,9 +90,8 @@
     <path d="M0 120 L800 170"/><path d="M120 0 L260 480"/><path d="M430 0 C 440 160, 470 260, 520 480"/><path d="M0 250 C 200 230, 520 250, 800 210"/><path d="M620 0 L700 480"/>
   </g>
   <g fill="none" stroke="rgba(169,183,204,.14)" stroke-width="1.5"><path d="M0 60 L800 90"/><path d="M300 0 L340 480"/><path d="M0 420 L800 440"/><path d="M540 0 L580 480"/></g>
-</svg>
-      <span class="map__pin"><span>Kirschner Gebäudeservice</span><i></i></span>
-    </a>
+</svg><span class="map__pin"><span>Kirschner Gebäudeservice</span><i></i></span></div>
+    </div>
   </div>
 </section>