fix: isolate map in iframe to prevent Tailwind CSS tile seam artifacts

Hugo's Tailwind CSS reset (box-sizing: border-box on *) interferes with
MapLibre GL's WebGL tile rendering, causing horizontal line artifacts
on retina displays. The iframe provides complete CSS isolation.

Map features: choropleth fills (fill-antialias: false), click popups
with law details, hover highlights, zoom/pan, fullscreen, i18n.

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

layouts/shortcodes/world-map.html

@@ -6,7 +6,7 @@
 .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; border: none; }
 .ifk-map-legend {
   display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
   margin-top: 1rem; font-size: 0.8rem;
@@ -25,12 +25,12 @@
 <div class="ifk-map-wrap">
   <h3>{{ if eq $lang "de" }}Interaktive Weltkarte: Kinderschutzgesetze{{ else if eq $lang "fr" }}Carte interactive : lois de protection de l'enfance{{ else }}Interactive Map: Child Protection Laws{{ end }}</h3>
   <p class="ifk-map-subtitle">{{ if eq $lang "de" }}Klicken Sie auf ein Land für Details{{ else if eq $lang "fr" }}Cliquez sur un pays pour plus de détails{{ else }}Click a country for details{{ end }}</p>
-  <div id="ifk-world-map"></div>
+  <iframe id="ifk-world-map" src="{{ "map-embed.html" | relURL }}" loading="lazy" allow="fullscreen"></iframe>
   <div class="ifk-map-legend">
-    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#667eea"></div>{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}</div>
+    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#9cabf1"></div>{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}</div>
-    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#764ba2"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
+    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#a68ac3"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
-    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#a5b4fc"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
+    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#c5cefd"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
-    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e0e7ff"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
+    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#ebefff"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
     <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e2e8f0"></div>{{ if eq $lang "de" }}Keine Daten{{ else if eq $lang "fr" }}Pas de données{{ else }}No Data{{ end }}</div>
   </div>
 </div>
@@ -40,7 +40,8 @@
 <script>
 (function() {
   var LANG = "{{ $lang }}";
-  var STATUS_COLORS = { enforced: '#667eea', passed: '#764ba2', progress: '#a5b4fc', guidelines: '#e0e7ff' };
+  // Pre-blended with base map at 0.65 — fully opaque, no transparency needed
+  var STATUS_COLORS = { enforced: '#9cabf1', passed: '#a68ac3', progress: '#c5cefd', guidelines: '#ebefff' };
   var STATUS_LABELS = {
     en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' },
     de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
@@ -78,8 +79,8 @@
         geo.features.forEach(function(f) {
           var id = String(f.id).padStart(3, '0');
           var c = byIsoNum[id];
-          f.properties.fillColor = c ? STATUS_COLORS[c.status] : '#e2e8f0';
+          f.properties.fillColor = c ? STATUS_COLORS[c.status] : 'transparent';
-          f.properties.fillOpacity = c ? 0.65 : 0.15;
+          f.properties.fillOpacity = c ? 1 : 0;
           f.properties.isoNum = id;
         });
 

static/data/countries.json

@@ -0,0 +1,86 @@
+[
+  {"iso3": "AUS", "isoNum": "036", "flag": "🇦🇺", "status": "enforced", "year": 2024, "ageLimitSocial": 16,
+    "en": {"name": "Australia", "law": "Social Media Minimum Age Act 2024", "detail": "Social media ban for under-16s. Fines up to AUD 49.5M."},
+    "de": {"name": "Australien", "law": "Social Media Minimum Age Act 2024", "detail": "Social-Media-Verbot für unter 16-Jährige. Bußgelder bis 49,5 Mio. AUD."},
+    "fr": {"name": "Australie", "law": "Social Media Minimum Age Act 2024", "detail": "Interdiction des réseaux sociaux pour les moins de 16 ans. Amendes jusqu'à 49,5 M AUD."}},
+
+  {"iso3": "GBR", "isoNum": "826", "flag": "🇬🇧", "status": "enforced", "year": 2023, "ageLimitSocial": 13,
+    "en": {"name": "United Kingdom", "law": "Online Safety Act 2023", "detail": "Comprehensive online safety regime. Age verification required."},
+    "de": {"name": "Vereinigtes Königreich", "law": "Online Safety Act 2023", "detail": "Umfassendes Online-Sicherheitsregime. Altersverifikation erforderlich."},
+    "fr": {"name": "Royaume-Uni", "law": "Online Safety Act 2023", "detail": "Régime complet de sécurité en ligne. Vérification d'âge obligatoire."}},
+
+  {"iso3": "DEU", "isoNum": "276", "flag": "🇩🇪", "status": "enforced", "year": 2021, "ageLimitSocial": 13,
+    "en": {"name": "Germany", "law": "Jugendschutzgesetz (JuSchG)", "detail": "Youth Protection Act extended to online platforms. BzKJ monitoring."},
+    "de": {"name": "Deutschland", "law": "Jugendschutzgesetz (JuSchG)", "detail": "Auf Online-Plattformen ausgeweitet. BzKJ überwacht aktiv die Einhaltung."},
+    "fr": {"name": "Allemagne", "law": "Jugendschutzgesetz (JuSchG)", "detail": "Loi sur la protection de la jeunesse étendue aux plateformes en ligne. Surveillance BzKJ."}},
+
+  {"iso3": "CHN", "isoNum": "156", "flag": "🇨🇳", "status": "enforced", "year": 2021, "ageLimitSocial": 14,
+    "en": {"name": "China", "law": "Minor Protection Law", "detail": "1hr/day gaming for minors. Real-name verification mandatory."},
+    "de": {"name": "China", "law": "Minderjährigenschutzgesetz", "detail": "1 Std./Tag Gaming für Minderjährige. Echtnamen-Verifizierung verpflichtend."},
+    "fr": {"name": "Chine", "law": "Loi sur la protection des mineurs", "detail": "1h/jour de jeux vidéo pour les mineurs. Vérification d'identité obligatoire."}},
+
+  {"iso3": "KOR", "isoNum": "410", "flag": "🇰🇷", "status": "enforced", "year": 2020, "ageLimitSocial": 14,
+    "en": {"name": "South Korea", "law": "Youth Protection Act", "detail": "Long-standing youth protection framework. Real-name verification."},
+    "de": {"name": "Südkorea", "law": "Jugendschutzgesetz", "detail": "Langjähriger Jugendschutzrahmen. Echtnamen-Verifizierung für Online-Dienste."},
+    "fr": {"name": "Corée du Sud", "law": "Loi sur la protection de la jeunesse", "detail": "Cadre de protection de la jeunesse établi de longue date. Vérification d'identité."}},
+
+  {"iso3": "IRL", "isoNum": "372", "flag": "🇮🇪", "status": "enforced", "year": 2022, "ageLimitSocial": 13,
+    "en": {"name": "Ireland", "law": "Online Safety and Media Regulation Act", "detail": "Coimisiún na Meán regulates online safety with binding codes."},
+    "de": {"name": "Irland", "law": "Online Safety and Media Regulation Act", "detail": "Coimisiún na Meán reguliert Online-Sicherheit mit verbindlichen Kodizes."},
+    "fr": {"name": "Irlande", "law": "Online Safety and Media Regulation Act", "detail": "Coimisiún na Meán régule la sécurité en ligne avec des codes contraignants."}},
+
+  {"iso3": "NLD", "isoNum": "528", "flag": "🇳🇱", "status": "enforced", "year": 2024, "ageLimitSocial": 16,
+    "en": {"name": "Netherlands", "law": "DSA + Children's Code", "detail": "Dutch DPA actively enforcing children's data protection."},
+    "de": {"name": "Niederlande", "law": "DSA + Kinderkodex", "detail": "Datenschutzbehörde setzt Kinderdatenschutz aktiv durch."},
+    "fr": {"name": "Pays-Bas", "law": "DSA + Code de l'enfance", "detail": "Autorité de protection des données applique activement la protection des données des enfants."}},
+
+  {"iso3": "SWE", "isoNum": "752", "flag": "🇸🇪", "status": "enforced", "year": 2024, "ageLimitSocial": 13,
+    "en": {"name": "Sweden", "law": "DSA + National Youth Guidelines", "detail": "EU DSA framework plus national youth protection guidelines."},
+    "de": {"name": "Schweden", "law": "DSA + Nationale Jugendrichtlinien", "detail": "EU-DSA-Rahmen plus nationale Jugendschutzrichtlinien."},
+    "fr": {"name": "Suède", "law": "DSA + Directives nationales jeunesse", "detail": "Cadre DSA de l'UE plus directives nationales de protection de la jeunesse."}},
+
+  {"iso3": "FRA", "isoNum": "250", "flag": "🇫🇷", "status": "passed", "year": 2026, "ageLimitSocial": 15,
+    "en": {"name": "France", "law": "Loi SREN + Social Media Ban", "detail": "Senate votes to ban social media for under-15s (April 2026). Arcom blacklist."},
+    "de": {"name": "Frankreich", "law": "Loi SREN + Social-Media-Verbot", "detail": "Senat stimmt für Social-Media-Verbot unter 15 (April 2026). Arcom-Blacklist."},
+    "fr": {"name": "France", "law": "Loi SREN + Interdiction réseaux sociaux", "detail": "Le Sénat vote l'interdiction des réseaux sociaux pour les moins de 15 ans (avril 2026)."}},
+
+  {"iso3": "BRA", "isoNum": "076", "flag": "🇧🇷", "status": "passed", "year": 2025, "ageLimitSocial": 12,
+    "en": {"name": "Brazil", "law": "ECA Digital", "detail": "Loot box ban for minors. Age-appropriate design requirements."},
+    "de": {"name": "Brasilien", "law": "ECA Digital", "detail": "Lootbox-Verbot für Minderjährige. Altersgerechtes Design."},
+    "fr": {"name": "Brésil", "law": "ECA Digital", "detail": "Interdiction des loot boxes pour les mineurs. Exigences de design adapté à l'âge."}},
+
+  {"iso3": "IND", "isoNum": "356", "flag": "🇮🇳", "status": "passed", "year": 2023, "ageLimitSocial": 18,
+    "en": {"name": "India", "law": "DPDP Act 2023", "detail": "Verifiable parental consent for under-18s."},
+    "de": {"name": "Indien", "law": "DPDP Act 2023", "detail": "Verifizierbare elterliche Einwilligung für unter 18-Jährige."},
+    "fr": {"name": "Inde", "law": "DPDP Act 2023", "detail": "Consentement parental vérifiable pour les moins de 18 ans."}},
+
+  {"iso3": "ITA", "isoNum": "380", "flag": "🇮🇹", "status": "passed", "year": 2025, "ageLimitSocial": 14,
+    "en": {"name": "Italy", "law": "DSA + Parental Consent Law", "detail": "Digital age of consent set to 14."},
+    "de": {"name": "Italien", "law": "DSA + Einwilligungsgesetz", "detail": "Digitales Einwilligungsalter auf 14 festgelegt."},
+    "fr": {"name": "Italie", "law": "DSA + Loi sur le consentement parental", "detail": "Âge de consentement numérique fixé à 14 ans."}},
+
+  {"iso3": "ESP", "isoNum": "724", "flag": "🇪🇸", "status": "passed", "year": 2025, "ageLimitSocial": 14,
+    "en": {"name": "Spain", "law": "Child Protection in Digital Environments", "detail": "Comprehensive child digital protection law."},
+    "de": {"name": "Spanien", "law": "Organisches Kinderschutzgesetz", "detail": "Umfassendes digitales Kinderschutzgesetz."},
+    "fr": {"name": "Espagne", "law": "Protection de l'enfance dans les environnements numériques", "detail": "Loi complète de protection numérique de l'enfance."}},
+
+  {"iso3": "NOR", "isoNum": "578", "flag": "🇳🇴", "status": "passed", "year": 2025, "ageLimitSocial": 15,
+    "en": {"name": "Norway", "law": "Social Media Age Limit", "detail": "Proposed social media age limit of 15."},
+    "de": {"name": "Norwegen", "law": "Social-Media-Altersgrenze", "detail": "Geplante Altersgrenze von 15 Jahren."},
+    "fr": {"name": "Norvège", "law": "Limite d'âge réseaux sociaux", "detail": "Limite d'âge proposée à 15 ans."}},
+
+  {"iso3": "USA", "isoNum": "840", "flag": "🇺🇸", "status": "progress", "year": 2026, "ageLimitSocial": 13,
+    "en": {"name": "United States", "law": "KOSA + COPPA Update", "detail": "KOSA passed Senate 91-3. COPPA update by Apr 2026."},
+    "de": {"name": "Vereinigte Staaten", "law": "KOSA + COPPA-Update", "detail": "KOSA im Senat angenommen. COPPA-Update bis Apr. 2026."},
+    "fr": {"name": "États-Unis", "law": "KOSA + Mise à jour COPPA", "detail": "KOSA adopté au Sénat 91-3. Mise à jour COPPA prévue avr. 2026."}},
+
+  {"iso3": "CAN", "isoNum": "124", "flag": "🇨🇦", "status": "progress", "year": 2026, "ageLimitSocial": 13,
+    "en": {"name": "Canada", "law": "Online Harms Act (C-63)", "detail": "Proposed duty of care for platforms."},
+    "de": {"name": "Kanada", "law": "Online Harms Act (C-63)", "detail": "Sorgfaltspflicht für Plattformen in Prüfung."},
+    "fr": {"name": "Canada", "law": "Online Harms Act (C-63)", "detail": "Devoir de diligence proposé pour les plateformes."}},
+
+  {"iso3": "JPN", "isoNum": "392", "flag": "🇯🇵", "status": "guidelines", "year": 2024, "ageLimitSocial": 13,
+    "en": {"name": "Japan", "law": "Act on Regulation of Soliciting Children", "detail": "Platform self-regulation encouraged."},
+    "de": {"name": "Japan", "law": "Regulierung der Kontaktaufnahme", "detail": "Selbstregulierung der Plattformen empfohlen."},
+    "fr": {"name": "Japon", "law": "Loi sur la régulation de la sollicitation des enfants", "detail": "Autorégulation des plateformes encouragée."}}
+]

static/map-embed.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="/css/maplibre-gl.min.css" />
+<style>
+body { margin: 0; overflow: hidden; }
+#map { width: 100%; height: 100vh; }
+.maplibregl-popup-content { font-size: 0.85rem; max-width: 260px; line-height: 1.4; }
+.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; }
+.ifk-popup-link { display: inline-block; margin-top: 0.4rem; font-size: 0.8rem; color: #667eea; text-decoration: none; font-weight: 600; }
+.ifk-popup-link:hover { text-decoration: underline; }
+</style>
+</head>
+<body>
+<div id="map"></div>
+<script src="/js/maplibre-gl.min.js"></script>
+<script src="/js/topojson-client.min.js"></script>
+<script>
+(function() {
+  var LANG = 'en';
+  try { var m = parent.location.pathname.match(/^\/(de|fr|en)\//); if (m) LANG = m[1]; } catch(e) {}
+
+  var STATUS_COLORS = { enforced: '#9cabf1', passed: '#a68ac3', progress: '#c5cefd', guidelines: '#ebefff' };
+  var POPUP_COLORS = { enforced: '#667eea', passed: '#764ba2', progress: '#a5b4fc', guidelines: '#e0e7ff' };
+  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 AGE_LABELS = { en: 'Min. social media age', de: 'Min. Social-Media-Alter', fr: 'Âge min. réseaux sociaux' };
+  var ARTICLE_ANCHORS = { AUS: 'australia', DEU: 'germany', USA: 'the-united-states', FRA: 'france', BRA: 'brazil' };
+  if (LANG === 'de') { ARTICLE_ANCHORS.AUS = 'australien'; ARTICLE_ANCHORS.USA = 'die-vereinigten-staaten'; ARTICLE_ANCHORS.DEU = 'deutschland'; ARTICLE_ANCHORS.BRA = 'brasilien'; }
+
+  var byIsoNum = {};
+
+  var map = new maplibregl.Map({
+    container: 'map',
+    center: [20, 20],
+    zoom: 2,
+    scrollZoom: false,
+    style: 'https://maps.clicksports.de/styles/klokantech-basic/style.json'
+  });
+  map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
+  map.addControl(new maplibregl.FullscreenControl(), 'top-right');
+
+  document.addEventListener('fullscreenchange', function() {
+    if (document.fullscreenElement) map.scrollZoom.enable();
+    else map.scrollZoom.disable();
+  });
+
+  Promise.all([
+    fetch('/data/countries.json').then(function(r) { return r.json(); }),
+    fetch('/data/countries-50m.json').then(function(r) { return r.json(); })
+  ]).then(function(results) {
+    var countries = results[0];
+    var topo = results[1];
+
+    countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });
+
+    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 ? STATUS_COLORS[c.status] : 'transparent';
+      f.properties.fillOpacity = c ? 1 : 0;
+      f.properties.isoNum = id;
+    });
+
+    map.addSource('countries', { type: 'geojson', data: geo });
+
+    map.addLayer({
+      id: 'choropleth-fill', type: 'fill', source: 'countries',
+      paint: {
+        'fill-color': ['get', 'fillColor'],
+        'fill-opacity': ['get', 'fillOpacity'],
+        'fill-antialias': false
+      }
+    });
+    map.addLayer({
+      id: 'choropleth-border', type: 'line', source: 'countries',
+      paint: { 'line-color': '#94a3b8', 'line-width': 0.5 }
+    });
+    map.addLayer({
+      id: 'choropleth-hover', type: 'fill', source: 'countries',
+      paint: { 'fill-color': '#667eea', 'fill-opacity': 0.2 },
+      filter: ['==', 'isoNum', '']
+    });
+
+    var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' });
+
+    map.on('mousemove', 'choropleth-fill', function(e) {
+      var id = e.features[0].properties.isoNum;
+      var c = byIsoNum[id];
+      map.getCanvas().style.cursor = c ? 'pointer' : '';
+      map.setFilter('choropleth-hover', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']);
+    });
+    map.on('mouseleave', 'choropleth-fill', function() {
+      map.getCanvas().style.cursor = '';
+      map.setFilter('choropleth-hover', ['==', 'isoNum', '']);
+    });
+
+    map.on('click', 'choropleth-fill', function(e) {
+      var id = e.features[0].properties.isoNum;
+      var c = byIsoNum[id];
+      if (!c) return;
+      var loc = c[LANG] || c.en;
+      var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
+      var ageLabel = AGE_LABELS[LANG] || AGE_LABELS.en;
+      var html = '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
+        '<em>' + loc.law + '</em><br>' +
+        '<span class="ifk-popup-status" style="background:' + POPUP_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 &darr;', de: 'Weiterlesen &darr;', fr: 'En savoir plus &darr;' };
+        html += '<a class="ifk-popup-link" href="#' + anchor + '" target="_parent">' + (readMore[LANG] || readMore.en) + '</a>';
+      }
+      popup.setLngLat(e.lngLat).setHTML(html).addTo(map);
+    });
+  });
+})();
+</script>
+</body>
+</html>