add addiction stats charts to The Numbers section (EN/DE/FR)

Two Chart.js visualizations: usage/addiction percentages (horizontal bar)
and health impact metrics. Multilingual labels. New shortcode:
addiction-stats.

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

content/de/tech-konzerne-sucht-als-geschaeftsmodell.md

@@ -43,6 +43,8 @@ Die American Psychological Association hat ihre eigene Gesundheitswarnung zum So
 
 ## Die Zahlen
 
+{{< addiction-stats >}}
+
 Das Ausmaß des Problems ist kaum zu überschätzen.
 
 - **95 %** der Kinder zwischen 10 und 17 Jahren nutzen regelmäßig soziale Medien

content/en/tech-companies-addiction-business-model.md

@@ -43,6 +43,8 @@ The American Psychological Association has issued its own health advisory on ado
 
 ## The Numbers
 
+{{< addiction-stats >}}
+
 The scale of the problem is difficult to overstate.
 
 - **95%** of children aged 10–17 use social media regularly

content/fr/entreprises-tech-addiction-modele-economique.md

@@ -43,6 +43,8 @@ L'American Psychological Association a publié son propre avis sanitaire sur l'u
 
 ## Les chiffres
 
+{{< addiction-stats >}}
+
 L'ampleur du problème est difficile à surestimer.
 
 - **95 %** des enfants de 10 à 17 ans utilisent régulièrement les réseaux sociaux

layouts/shortcodes/addiction-stats.html

@@ -0,0 +1,157 @@
+{{/* Addiction stats charts — visual representation of key social media addiction statistics */}}
+{{ $lang := .Page.Language.Lang }}
+
+<style>
+.addiction-stats { margin: 2.5rem 0; }
+.addiction-stats-grid {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
+}
+.addiction-stat-card {
+  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
+  padding: 1.5rem; text-align: center;
+}
+.addiction-stat-card h4 {
+  margin: 0 0 1rem; font-size: 0.9rem; color: #334155;
+  font-family: system-ui, sans-serif;
+}
+.addiction-stat-card canvas { max-height: 220px; }
+@media (max-width: 640px) {
+  .addiction-stats-grid { grid-template-columns: 1fr; }
+}
+</style>
+
+<div class="addiction-stats">
+  <div class="addiction-stats-grid">
+    <div class="addiction-stat-card">
+      <h4>{{ if eq $lang "de" }}Nutzung & Suchtempfinden{{ else if eq $lang "fr" }}Utilisation & sentiment d'addiction{{ else }}Usage & Perceived Addiction{{ end }}</h4>
+      <canvas id="addiction-usage-chart"></canvas>
+    </div>
+    <div class="addiction-stat-card">
+      <h4>{{ if eq $lang "de" }}Gesundheitliche Auswirkungen{{ else if eq $lang "fr" }}Impact sur la santé{{ else }}Health Impact{{ end }}</h4>
+      <canvas id="addiction-health-chart"></canvas>
+    </div>
+  </div>
+</div>
+
+<script src="{{ "js/chart.umd.min.js" | relURL }}"></script>
+<script>
+(function() {
+  const lang = '{{ $lang }}';
+
+  const labels = {
+    usage: {
+      en: ['Use social media\nregularly', 'Feel addicted', 'Sleep affected', '3+ hours/day'],
+      de: ['Nutzen Social Media\nregelmäßig', 'Fühlen sich\nsüchtig', 'Schlaf\nbeeinträchtigt', '3+ Stunden/Tag'],
+      fr: ['Utilisent les\nréseaux sociaux', 'Se sentent\ndépendants', 'Sommeil\naffecté', '3+ heures/jour']
+    },
+    health: {
+      en: ['Higher anxiety\n& depression\n(3h+/day)', 'Suicidal ideation\nrisk increase', 'Avg. daily\nscreen time (h)'],
+      de: ['Mehr Angst &\nDepression\n(3h+/Tag)', 'Erhöhtes Risiko\nSuizidgedanken', 'Bildschirmzeit\npro Tag (Std.)'],
+      fr: ['Anxiété &\ndépression\n(3h+/jour)', 'Risque accru\nd\'idéation\nsuicidaire', 'Temps d\'écran\nquotidien (h)']
+    }
+  };
+
+  // Usage & Addiction doughnut-style horizontal bar
+  new Chart(document.getElementById('addiction-usage-chart'), {
+    type: 'bar',
+    data: {
+      labels: labels.usage[lang] || labels.usage.en,
+      datasets: [{
+        data: [95, 47, 45, 63],
+        backgroundColor: ['#667eea', '#764ba2', '#a78bfa', '#c4b5fd'],
+        borderRadius: 6,
+        barThickness: 28
+      }]
+    },
+    options: {
+      indexAxis: 'y',
+      responsive: true,
+      maintainAspectRatio: true,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: function(ctx) { return ctx.raw + '%'; }
+          }
+        }
+      },
+      scales: {
+        x: {
+          max: 100,
+          ticks: {
+            callback: function(v) { return v + '%'; },
+            font: { size: 11, family: 'system-ui' }
+          },
+          grid: { color: '#f1f5f9' }
+        },
+        y: {
+          ticks: {
+            font: { size: 11, family: 'system-ui' },
+            autoSkip: false
+          },
+          grid: { display: false }
+        }
+      }
+    }
+  });
+
+  // Health impact - mixed chart
+  new Chart(document.getElementById('addiction-health-chart'), {
+    type: 'bar',
+    data: {
+      labels: labels.health[lang] || labels.health.en,
+      datasets: [{
+        data: [100, 250, 5],
+        backgroundColor: ['#ef4444', '#dc2626', '#667eea'],
+        borderRadius: 6,
+        barThickness: 36
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: true,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: function(ctx) {
+              if (ctx.dataIndex === 0) return (lang === 'de' ? 'Deutlich erhöht' : lang === 'fr' ? 'Significativement plus élevé' : 'Significantly higher');
+              if (ctx.dataIndex === 1) return '2-3x';
+              return ctx.raw + 'h';
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          ticks: {
+            font: { size: 11, family: 'system-ui' },
+            autoSkip: false
+          },
+          grid: { display: false }
+        },
+        y: {
+          display: false
+        }
+      }
+    },
+    plugins: [{
+      afterDatasetsDraw: function(chart) {
+        const ctx = chart.ctx;
+        chart.data.datasets[0].data.forEach(function(value, index) {
+          const meta = chart.getDatasetMeta(0);
+          const bar = meta.data[index];
+          ctx.save();
+          ctx.textAlign = 'center';
+          ctx.textBaseline = 'bottom';
+          ctx.fillStyle = '#fff';
+          ctx.font = 'bold 14px system-ui';
+          const label = index === 0 ? '↑' : index === 1 ? '2-3x' : '5h';
+          ctx.fillText(label, bar.x, bar.y + bar.height / 2 + 7);
+          ctx.restore();
+        });
+      }
+    }]
+  });
+})();
+</script>