split stats into chart + impact cards, spread across article

Chart after intro (early viewport), impact stat cards after bullet list
in The Numbers section. Old combined shortcode replaced.

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

layouts/shortcodes/addiction-chart.html

@@ -0,0 +1,36 @@
+{{/* Horizontal bar chart — teen social media usage percentages */}}
+{{ $lang := .Page.Language.Lang }}
+<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:1.5rem;text-align:center;margin:2rem 0">
+  <h4 style="margin:0 0 1rem;font-size:0.9rem;color:#334155;font-family:system-ui,sans-serif">{{ if eq $lang "de" }}Jugendliche & Social Media{{ else if eq $lang "fr" }}Adolescents & réseaux sociaux{{ else }}Teens & Social Media{{ end }}</h4>
+  <canvas id="addiction-usage-chart"></canvas>
+</div>
+<script src="{{ "js/chart.umd.min.js" | relURL }}"></script>
+<script>
+(function() {
+  const lang = '{{ $lang }}';
+  const labels = {
+    en: ['Use social media\nregularly', 'Feel addicted', 'Sleep negatively\naffected', '3+ hours/day'],
+    de: ['Nutzen Social Media\nregelmäßig', 'Fühlen sich\nsüchtig', 'Schlaf negativ\nbeeinflusst', '3+ Stunden/Tag'],
+    fr: ['Utilisent les\nréseaux sociaux', 'Se sentent\ndépendants', 'Sommeil\nnégativement affecté', '3+ heures/jour']
+  };
+  new Chart(document.getElementById('addiction-usage-chart'), {
+    type: 'bar',
+    data: {
+      labels: labels[lang] || labels.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 } }
+      }
+    }
+  });
+})();
+</script>

layouts/shortcodes/addiction-impact.html

@@ -0,0 +1,23 @@
+{{/* Stat cards — health impact metrics */}}
+{{ $lang := .Page.Language.Lang }}
+<style>
+.addiction-impact-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2rem 0; }
+.addiction-impact-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:1.25rem; text-align:center; }
+.addiction-impact-num { font-size:2rem; font-weight:800; line-height:1; margin-bottom:0.5rem; font-family:system-ui,sans-serif; }
+.addiction-impact-desc { font-size:0.8rem; color:#475569; line-height:1.35; font-family:system-ui,sans-serif; }
+@media(max-width:640px){ .addiction-impact-cards{grid-template-columns:1fr;} }
+</style>
+<div class="addiction-impact-cards">
+  <div class="addiction-impact-card">
+    <div class="addiction-impact-num" style="color:#667eea">5h</div>
+    <div class="addiction-impact-desc">{{ if eq $lang "de" }}Durchschnittliche tägliche Nutzung{{ else if eq $lang "fr" }}Utilisation quotidienne moyenne{{ else }}Average daily use{{ end }}</div>
+  </div>
+  <div class="addiction-impact-card">
+    <div class="addiction-impact-num" style="color:#ef4444">2-3x</div>
+    <div class="addiction-impact-desc">{{ if eq $lang "de" }}Suizidgedanken-Risiko bei Abhängigkeit{{ else if eq $lang "fr" }}Risque d'idéation suicidaire{{ else }}Suicidal ideation risk with addiction{{ end }}</div>
+  </div>
+  <div class="addiction-impact-card">
+    <div class="addiction-impact-num" style="color:#764ba2">3h+</div>
+    <div class="addiction-impact-desc">{{ if eq $lang "de" }}Schwelle für erhöhte Angst & Depression{{ else if eq $lang "fr" }}Seuil d'anxiété & dépression accrues{{ else }}Threshold for increased anxiety & depression{{ end }}</div>
+  </div>
+</div>