diff --git a/assets/css/main.css b/assets/css/main.css
index 5e14a30..9c2edb8 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -282,13 +282,13 @@ nav a:hover {
 }
 
 /* Table of Contents */
-#TableOfContents {
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 0.95rem;
-  line-height: 1.7;
+#TableOfContents, #TableOfContents li, #TableOfContents a, #sidebar-toc, #sidebar-toc li, #sidebar-toc a {
+  font-family: system-ui, -apple-system, sans-serif !important;
+  font-size: 0.8rem !important;
+  line-height: 1.6 !important;
 }
 
-#TableOfContents a {
+#TableOfContents a, #sidebar-toc a {
   color: var(--ifk-accent);
   text-decoration: none;
 }
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 228379b..c05a72f 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -62,7 +62,7 @@
       <h3 style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:#6b7280;font-weight:600;margin-bottom:0.75rem">
         {{ i18n "table_of_contents" | default "Contents" }}
       </h3>
-      <div style="font-size:0.85rem;line-height:1.7;border-left:2px solid #e5e7eb;padding-left:0.75rem">
+      <div id="sidebar-toc" style="font-size:0.8rem;line-height:1.6;border-left:2px solid #e5e7eb;padding-left:0.75rem">
         {{ .TableOfContents }}
       </div>
 
diff --git a/layouts/shortcodes/child-safety-map.html b/layouts/shortcodes/child-safety-map.html
index 9123b1d..ad98d64 100644
--- a/layouts/shortcodes/child-safety-map.html
+++ b/layouts/shortcodes/child-safety-map.html
@@ -14,14 +14,14 @@
 .csm-container h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; }
 .csm-subtitle { text-align: center; color: #666; font-size: 0.85rem; margin-bottom: 1rem; }
 .csm-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
-.csm-table th { background: #1e40af; color: white; padding: 0.75rem 1rem; text-align: left; font-weight: 600; }
+.csm-table th { background: #84cc16; color: white; padding: 0.75rem 1rem; text-align: left; font-weight: 600; }
 .csm-table td { padding: 0.65rem 1rem; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
 .csm-table tr:hover { background: #f0fdf4; }
 .csm-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
-.csm-enforced { background: #1e40af; color: white; }
-.csm-passed { background: #3b82f6; color: white; }
-.csm-progress { background: #93c5fd; color: #1e3a5f; }
-.csm-guidelines { background: #dbeafe; color: #1e3a5f; }
+.csm-enforced { background: #84cc16; color: white; }
+.csm-passed { background: #65a30d; color: white; }
+.csm-progress { background: #a3e635; color: #365314; }
+.csm-guidelines { background: #d9f99d; color: #365314; }
 .csm-legend { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; font-size: 0.8rem; }
 .csm-legend-item { display: flex; align-items: center; gap: 0.35rem; }
 .csm-legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
@@ -57,9 +57,9 @@
   </table>
 
   <div class="csm-legend">
-    <div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#1e40af"></div>{{ if eq $lang "de" }}Gesetz in Kraft{{ else if eq $lang "fr" }}Loi en vigueur{{ else }}Law Enforced{{ end }}</div>
-    <div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#3b82f6"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
-    <div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#93c5fd"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
-    <div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#dbeafe"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
+    <div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#84cc16"></div>{{ if eq $lang "de" }}Gesetz in Kraft{{ else if eq $lang "fr" }}Loi en vigueur{{ else }}Law Enforced{{ end }}</div>
+    <div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#65a30d"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
+    <div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#a3e635"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
+    <div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#d9f99d"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
   </div>
 </div>
diff --git a/layouts/shortcodes/law-charts.html b/layouts/shortcodes/law-charts.html
index 314a116..d28769b 100644
--- a/layouts/shortcodes/law-charts.html
+++ b/layouts/shortcodes/law-charts.html
@@ -57,7 +57,7 @@ window.addEventListener('load', function() {
       labels: [labels.enforced, labels.passed, labels.progress, labels.guidelines],
       datasets: [{
         data: [counts.enforced, counts.passed, counts.progress, counts.guidelines],
-        backgroundColor: ['#1e40af', '#3b82f6', '#93c5fd', '#dbeafe'],
+        backgroundColor: ['#84cc16', '#65a30d', '#a3e635', '#d9f99d'],
         borderWidth: 2, borderColor: '#fff'
       }]
     },
@@ -71,7 +71,7 @@ window.addEventListener('load', function() {
 
   /* Horizontal bar: age limits */
   var sorted = countries.slice().sort(function(a, b) { return b.ageLimitSocial - a.ageLimitSocial; });
-  var colors = { enforced: '#1e40af', passed: '#3b82f6', progress: '#93c5fd', guidelines: '#dbeafe' };
+  var colors = { enforced: '#84cc16', passed: '#65a30d', progress: '#a3e635', guidelines: '#d9f99d' };
 
   new Chart(document.getElementById('ifk-chart-age'), {
     type: 'bar',
@@ -106,10 +106,10 @@ window.addEventListener('load', function() {
     data: {
       labels: years,
       datasets: [
-        { label: labels.enforced, data: years.map(function(y) { return yearCounts[y].enforced; }), backgroundColor: '#1e40af', borderRadius: 4 },
-        { label: labels.passed, data: years.map(function(y) { return yearCounts[y].passed; }), backgroundColor: '#3b82f6', borderRadius: 4 },
-        { label: labels.progress, data: years.map(function(y) { return yearCounts[y].progress; }), backgroundColor: '#93c5fd', borderRadius: 4 },
-        { label: labels.guidelines, data: years.map(function(y) { return yearCounts[y].guidelines; }), backgroundColor: '#dbeafe', borderRadius: 4 }
+        { label: labels.enforced, data: years.map(function(y) { return yearCounts[y].enforced; }), backgroundColor: '#84cc16', borderRadius: 4 },
+        { label: labels.passed, data: years.map(function(y) { return yearCounts[y].passed; }), backgroundColor: '#65a30d', borderRadius: 4 },
+        { label: labels.progress, data: years.map(function(y) { return yearCounts[y].progress; }), backgroundColor: '#a3e635', borderRadius: 4 },
+        { label: labels.guidelines, data: years.map(function(y) { return yearCounts[y].guidelines; }), backgroundColor: '#d9f99d', borderRadius: 4 }
       ]
     },
     options: {
diff --git a/layouts/shortcodes/stats-banner.html b/layouts/shortcodes/stats-banner.html
index 55baa95..b7ebca0 100644
--- a/layouts/shortcodes/stats-banner.html
+++ b/layouts/shortcodes/stats-banner.html
@@ -31,19 +31,19 @@
 
 <div class="ifk-stats">
   <div class="ifk-stat">
-    <div class="ifk-stat-num" style="color:#1e40af">{{ $enforced }}</div>
+    <div class="ifk-stat-num" style="color:#84cc16">{{ $enforced }}</div>
     <div class="ifk-stat-label">{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}</div>
   </div>
   <div class="ifk-stat">
-    <div class="ifk-stat-num" style="color:#3b82f6">{{ $passed }}</div>
+    <div class="ifk-stat-num" style="color:#65a30d">{{ $passed }}</div>
     <div class="ifk-stat-label">{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adoptées{{ else }}Passed{{ end }}</div>
   </div>
   <div class="ifk-stat">
-    <div class="ifk-stat-num" style="color:#6366f1">{{ $progress }}</div>
+    <div class="ifk-stat-num" style="color:#a3e635">{{ $progress }}</div>
     <div class="ifk-stat-label">{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
   </div>
   <div class="ifk-stat">
-    <div class="ifk-stat-num" style="color:#8b5cf6">{{ $guidelines }}</div>
+    <div class="ifk-stat-num" style="color:#d9f99d">{{ $guidelines }}</div>
     <div class="ifk-stat-label">{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
   </div>
 </div>
diff --git a/static/css/main.css b/static/css/main.css
index 5e14a30..9c2edb8 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -282,13 +282,13 @@ nav a:hover {
 }
 
 /* Table of Contents */
-#TableOfContents {
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 0.95rem;
-  line-height: 1.7;
+#TableOfContents, #TableOfContents li, #TableOfContents a, #sidebar-toc, #sidebar-toc li, #sidebar-toc a {
+  font-family: system-ui, -apple-system, sans-serif !important;
+  font-size: 0.8rem !important;
+  line-height: 1.6 !important;
 }
 
-#TableOfContents a {
+#TableOfContents a, #sidebar-toc a {
   color: var(--ifk-accent);
   text-decoration: none;
 }