fix: remove map tile-seam lines + add interactive popups with law data

Pre-blend fill colors over white background (opacity=1) to eliminate
horizontal line artifacts at tile boundaries. Fix addTo(map) → addTo(window._ifkMap).
Add hover highlight, age limit display, status badges, and article anchor links.

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

layouts/shortcodes/world-map.html

@@ -13,8 +13,13 @@
 }
 .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: 260px; line-height: 1.4; }
+.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; }
+.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; }
 @media (max-width: 640px) { #ifk-world-map { height: 280px; } }
 </style>
 
@@ -41,6 +46,9 @@ function ifkInitMap() {
   }
   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' },
@@ -97,8 +105,7 @@ function ifkInitMap() {
         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.fillOpacity = c ? 0.65 : 0.15;
+          f.properties.fillColor = c ? FILL_COLORS[c.status] : NO_DATA_FILL;
           f.properties.isoNum = id;
         });
 
@@ -110,7 +117,7 @@ function ifkInitMap() {
           source: 'countries-choropleth',
           paint: {
             'fill-color': ['get', 'fillColor'],
-            'fill-opacity': ['get', 'fillOpacity']
+            'fill-opacity': 1
           }
         });
 
@@ -126,28 +133,61 @@ function ifkInitMap() {
 
         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 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: ''
+        };
+        if (LANG === 'de') {
+          ARTICLE_ANCHORS.AUS = 'australien';
+          ARTICLE_ANCHORS.USA = 'die-vereinigten-staaten';
+          ARTICLE_ANCHORS.DEU = 'deutschland';
+          ARTICLE_ANCHORS.BRA = 'brasilien';
+        }
+
+        var AGE_LABELS = { en: 'Min. social media age', de: 'Min. Social-Media-Alter', fr: 'Âge min. réseaux sociaux' };
+
         window._ifkMap.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;
-          popup.setLngLat(e.lngLat).setHTML(
-            '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
+          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 style="color:' + STATUS_COLORS[c.status] + ';font-weight:600">' + labels[c.status] + '</span> (' + c.year + ')<br>' +
-            loc.detail
-          ).addTo(map);
+            '<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>' +
+            '<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 ↓' };
+            html += '<a class="ifk-popup-link" href="#' + anchor + '">' + (readMore[LANG] || readMore.en) + '</a>';
+          }
+          popup.setLngLat(e.lngLat).setHTML(html).addTo(window._ifkMap);
         });
       });
   });