fix: switch map from MapLibre GL to Leaflet SVG, eliminates tile seams

MapLibre GL WebGL renderer tiles all sources internally, causing
visible seam lines on retina displays. Leaflet renders GeoJSON as
SVG paths in a single layer - zero tiling, zero seams.

Also replaces child-safety-map with world-map on all homepages.

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

content/de/_index.md

@@ -11,6 +11,6 @@ Der Schutz von Kindern im Internet ist eine der wichtigsten Herausforderungen un
 - **Online-Sicherheitstools** — Bewertungen und Anleitungen für Kindersicherungen, VPNs und Inhaltsfilter
 - **Digitale Erziehung** — Praktische Ratschläge für die Kindererziehung in einer vernetzten Welt
 
-{{< child-safety-map >}}
+{{< world-map >}}
 
 *Herausgegeben von [Agiliton](https://www.agiliton.eu), einem europäischen Technologieunternehmen für Datenschutz, Sicherheit und Familienschutz.*

content/en/_index.md

@@ -11,6 +11,6 @@ Protecting children online is one of the most important challenges of our time.
 - **Online Safety Tools** — Reviews and guides for parental controls, VPNs, and content filters
 - **Digital Parenting** — Practical advice for raising children in a connected world
 
-{{< child-safety-map >}}
+{{< world-map >}}
 
 *Published by [Agiliton](https://www.agiliton.eu), a European technology company focused on privacy, security, and family protection.*

content/fr/_index.md

@@ -11,6 +11,6 @@ Protéger les enfants en ligne est l'un des défis les plus importants de notre
 - **Outils de sécurité en ligne** — Tests et guides pour le contrôle parental, les VPN et les filtres de contenu
 - **Parentalité numérique** — Conseils pratiques pour élever des enfants dans un monde connecté
 
-{{< child-safety-map >}}
+{{< world-map >}}
 
 *Publié par [Agiliton](https://www.agiliton.eu), une entreprise technologique européenne spécialisée dans la confidentialité, la sécurité et la protection des familles.*

layouts/shortcodes/world-map.html

@@ -1,20 +1,18 @@
 {{ $lang := .Page.Language.Lang }}
 {{ $countries := hugo.Data.countries }}
 
-<link rel="stylesheet" href="{{ "css/maplibre-gl.min.css" | relURL }}" />
+<link rel="stylesheet" href="{{ "css/leaflet.min.css" | relURL }}" />
 <style>
 .ifk-map-wrap { max-width: 100%; margin: 2rem 0; }
 .ifk-map-wrap h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; }
 .ifk-map-subtitle { text-align: center; color: #666; font-size: 0.85rem; margin-bottom: 1rem; }
-#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; }
+#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; background: #dce4ec; }
 .ifk-map-legend {
   display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
   margin-top: 1rem; font-size: 0.8rem;
 }
 .ifk-map-legend-item { display: flex; align-items: center; gap: 0.35rem; }
 .ifk-map-legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
-.maplibregl-popup-content { font-size: 0.85rem; max-width: 280px; line-height: 1.4; padding: 0.75rem; }
-.maplibregl-popup-content strong { font-size: 0.95rem; }
 .ifk-popup-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 600; font-size: 0.8rem; color: white; margin: 0.3rem 0; }
 .ifk-popup-age { display: flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0; font-size: 0.8rem; color: #555; }
 .ifk-popup-detail { margin: 0.4rem 0; font-size: 0.82rem; color: #444; }
@@ -36,116 +34,21 @@
   </div>
 </div>
 
-<script src="{{ "js/maplibre-gl.min.js" | relURL }}"></script>
+<script src="{{ "js/leaflet.min.js" | relURL }}"></script>
 <script src="{{ "js/topojson-client.min.js" | relURL }}"></script>
 <script>
-function ifkInitMap() {
-  if (typeof maplibregl === 'undefined' || typeof topojson === 'undefined') {
-    setTimeout(ifkInitMap, 100);
-    return;
-  }
+(function() {
   var LANG = "{{ $lang }}";
   var STATUS_COLORS = { enforced: '#667eea', passed: '#764ba2', progress: '#a5b4fc', guidelines: '#e0e7ff' };
-  // Pre-blended colors (over white bg) to avoid tile-seam artifacts from partial opacity
-  var FILL_COLORS = { enforced: '#9cabf1', passed: '#a68ac3', progress: '#c5cefd', guidelines: '#ebefff' };
-  var NO_DATA_FILL = '#f0f1f4';
   var STATUS_LABELS = {
     en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' },
     de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
     fr: { enforced: 'En vigueur', passed: 'Adopté', progress: 'En cours', guidelines: 'Directives' }
   };
-
-  var countries = {{ $countries | jsonify | safeJS }};
-  var byIsoNum = {};
-  countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });
-
-  window._ifkMap = new maplibregl.Map({
-    container: 'ifk-world-map',
-    antialias: false,
-    renderWorldCopies: false,
-    fadeDuration: 0,
-    style: {
-      version: 8,
-      sources: {},
-      layers: [
-        { id: 'background', type: 'background', paint: { 'background-color': '#dce4ec' } }
-      ]
-    },
-    center: [20, 20],
-    zoom: 2,
-    minZoom: 1,
-    maxZoom: 6,
-    cooperativeGestures: true,
-    attributionControl: false
-  });
-
-  window._ifkMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
-  window._ifkMap.addControl(new maplibregl.FullscreenControl(), 'top-right');
-
-  window._ifkMap.on('load', function() {
-    fetch('{{ "data/countries-50m.json" | relURL }}')
-      .then(function(r) { return r.json(); })
-      .then(function(topo) {
-        // Land mass (white on ocean background) — single polygon, no tile seams
-        var land = topojson.feature(topo, topo.objects.land);
-        window._ifkMap.addSource('land', { type: 'geojson', data: land });
-        window._ifkMap.addLayer({
-          id: 'land-fill', type: 'fill', source: 'land',
-          paint: { 'fill-color': '#ffffff', 'fill-antialias': false }
-        });
-
-        // Country choropleth
-        var geo = topojson.feature(topo, topo.objects.countries);
-        geo.features.forEach(function(f) {
-          var id = String(f.id).padStart(3, '0');
-          var c = byIsoNum[id];
-          f.properties.fillColor = c ? FILL_COLORS[c.status] : '#ffffff';
-          f.properties.isoNum = id;
-        });
-
-        window._ifkMap.addSource('countries-choropleth', { type: 'geojson', data: geo });
-
-        window._ifkMap.addLayer({
-          id: 'choropleth-fill', type: 'fill', source: 'countries-choropleth',
-          paint: { 'fill-color': ['get', 'fillColor'], 'fill-antialias': false }
-        });
-
-        // Country borders from TopoJSON mesh (shared edges only — no tile seams)
-        var borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; });
-        window._ifkMap.addSource('borders', { type: 'geojson', data: borders });
-        window._ifkMap.addLayer({
-          id: 'choropleth-outline', type: 'line', source: 'borders',
-          paint: { 'line-color': '#94a3b8', 'line-width': 0.5 }
-        });
-
-        var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' });
-
-        // Hover highlight layer
-        window._ifkMap.addLayer({
-          id: 'choropleth-hover',
-          type: 'line',
-          source: 'countries-choropleth',
-          paint: { 'line-color': '#667eea', 'line-width': 2 },
-          filter: ['==', 'isoNum', '']
-        });
-
-        window._ifkMap.on('mousemove', 'choropleth-fill', function(e) {
-          var id = e.features[0].properties.isoNum;
-          var c = byIsoNum[id];
-          window._ifkMap.getCanvas().style.cursor = c ? 'pointer' : '';
-          window._ifkMap.setFilter('choropleth-hover', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']);
-        });
-
-        window._ifkMap.on('mouseleave', 'choropleth-fill', function() {
-          window._ifkMap.getCanvas().style.cursor = '';
-          window._ifkMap.setFilter('choropleth-hover', ['==', 'isoNum', '']);
-        });
-
-        // Anchor map: country ISO3 → article heading slug
+  var AGE_LABELS = { en: 'Min. social media age', de: 'Min. Social-Media-Alter', fr: 'Âge min. réseaux sociaux' };
   var ARTICLE_ANCHORS = {
-          AUS: 'australia', GBR: '', DEU: 'germany', USA: 'the-united-states',
-          FRA: 'france', BRA: 'brazil', IND: '', ITA: '', ESP: '', NOR: '',
-          CHN: '', KOR: '', IRL: '', NLD: '', SWE: '', CAN: '', JPN: ''
+    AUS: 'australia', DEU: 'germany', USA: 'the-united-states',
+    FRA: 'france', BRA: 'brazil'
   };
   if (LANG === 'de') {
     ARTICLE_ANCHORS.AUS = 'australien';
@@ -154,30 +57,106 @@ function ifkInitMap() {
     ARTICLE_ANCHORS.BRA = 'brasilien';
   }
 
-        var AGE_LABELS = { en: 'Min. social media age', de: 'Min. Social-Media-Alter', fr: 'Âge min. réseaux sociaux' };
+  var countries = {{ $countries | jsonify | safeJS }};
+  var byIsoNum = {};
+  countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });
 
-        window._ifkMap.on('click', 'choropleth-fill', function(e) {
-          var id = e.features[0].properties.isoNum;
+  var map = L.map('ifk-world-map', {
+    center: [20, 20],
+    zoom: 2,
+    minZoom: 2,
+    maxZoom: 6,
+    scrollWheelZoom: false,
+    attributionControl: false,
+    zoomControl: false
+  });
+
+  L.control.zoom({ position: 'topright' }).addTo(map);
+
+  // Enable scroll zoom in fullscreen
+  document.addEventListener('fullscreenchange', function() {
+    if (document.fullscreenElement) map.scrollWheelZoom.enable();
+    else map.scrollWheelZoom.disable();
+  });
+
+  // Fullscreen button
+  var FsControl = L.Control.extend({
+    options: { position: 'topright' },
+    onAdd: function() {
+      var btn = L.DomUtil.create('div', 'leaflet-bar');
+      var a = L.DomUtil.create('a', '', btn);
+      a.href = '#'; a.title = 'Fullscreen'; a.setAttribute('role', 'button');
+      a.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 9H0v5h5v-2H2V9zm0-4h3V3H2V0H0v5zm10 7H9v2h5V9h-2v3zM9 0v2h3v3h2V0H9z" fill="currentColor"/></svg>';
+      a.style.cssText = 'display:flex;align-items:center;justify-content:center;width:30px;height:30px;';
+      L.DomEvent.on(a, 'click', function(e) {
+        L.DomEvent.stop(e);
+        var el = document.getElementById('ifk-world-map');
+        if (!document.fullscreenElement) el.requestFullscreen();
+        else document.exitFullscreen();
+      });
+      return btn;
+    }
+  });
+  new FsControl().addTo(map);
+
+  var hoveredLayer = null;
+
+  function resetStyle(layer) {
+    layer.setStyle({ weight: 0.5, color: '#94a3b8' });
+  }
+
+  function highlightStyle(layer) {
+    layer.setStyle({ weight: 2.5, color: '#667eea' });
+    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) layer.bringToFront();
+  }
+
+  fetch('{{ "data/countries-50m.json" | relURL }}')
+    .then(function(r) { return r.json(); })
+    .then(function(topo) {
+      var geo = topojson.feature(topo, topo.objects.countries);
+
+      L.geoJSON(geo, {
+        style: function(feature) {
+          var id = String(feature.id).padStart(3, '0');
+          var c = byIsoNum[id];
+          return {
+            fillColor: c ? STATUS_COLORS[c.status] : '#e2e8f0',
+            fillOpacity: c ? 0.65 : 0.15,
+            weight: 0.5,
+            color: '#94a3b8'
+          };
+        },
+        onEachFeature: function(feature, layer) {
+          var id = String(feature.id).padStart(3, '0');
           var c = byIsoNum[id];
           if (!c) return;
+
+          layer.on('mouseover', function() {
+            highlightStyle(layer);
+            hoveredLayer = layer;
+          });
+          layer.on('mouseout', function() {
+            resetStyle(layer);
+            hoveredLayer = null;
+          });
+          layer.on('click', function(e) {
             var loc = c[LANG] || c.en;
             var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
             var ageLabel = AGE_LABELS[LANG] || AGE_LABELS.en;
-          var statusBg = STATUS_COLORS[c.status];
             var html = '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
               '<em>' + loc.law + '</em><br>' +
-            '<span class="ifk-popup-status" style="background:' + statusBg + '">' + labels[c.status] + ' (' + c.year + ')</span>' +
-            '<div class="ifk-popup-age">👤 ' + ageLabel + ': <strong>' + c.ageLimitSocial + '+</strong></div>' +
+              '<span class="ifk-popup-status" style="background:' + STATUS_COLORS[c.status] + '">' + labels[c.status] + ' (' + c.year + ')</span>' +
+              '<div class="ifk-popup-age">&#x1F464; ' + ageLabel + ': <strong>' + c.ageLimitSocial + '+</strong></div>' +
               '<div class="ifk-popup-detail">' + loc.detail + '</div>';
             var anchor = ARTICLE_ANCHORS[c.iso3];
             if (anchor) {
-            var readMore = { en: 'Read more ↓', de: 'Weiterlesen ↓', fr: 'En savoir plus ↓' };
+              var readMore = { en: 'Read more &darr;', de: 'Weiterlesen &darr;', fr: 'En savoir plus &darr;' };
               html += '<a class="ifk-popup-link" href="#' + anchor + '">' + (readMore[LANG] || readMore.en) + '</a>';
             }
-          popup.setLngLat(e.lngLat).setHTML(html).addTo(window._ifkMap);
-        });
-      });
+            L.popup({ maxWidth: 280 }).setLatLng(e.latlng).setContent(html).openOn(map);
           });
         }
-ifkInitMap();
+      }).addTo(map);
+    });
+})();
 </script>