Migrate selected module CSS values to design tokens (#229)

Co-authored-by: Christa Egger <231125860+christaegger-dot@users.noreply.github.com>

Author: christaegger-dot

src/css/module.css

@@ -66,7 +66,7 @@
 .toc li { counter-increment: toc-counter; }
 .toc li a {
   text-decoration: none; color: var(--slate); font-size: var(--text-base);
-  display: block; padding: 8px 0 8px 28px; position: relative;
+  display: block; padding: var(--space-sm) 0 var(--space-sm) 28px; position: relative;
   transition: color 0.2s;
 }
 .toc li a::before {
@@ -427,7 +427,7 @@
   display: none; /* hidden on desktop */
   width: 100%; background: none; border: none; cursor: pointer;
   font: inherit; font-size: var(--text-xs); font-weight: 600;
-  color: var(--teal-text); padding: 8px 0; text-align: left;
+  color: var(--teal-text); padding: var(--space-sm) 0; text-align: left;
 }
 @media (max-width: 900px) {
   .toc-mobile-toggle { display: block; }
@@ -469,7 +469,7 @@
 .expandable-toggle {
   display: inline-block; background: none; border: none; cursor: pointer;
   font: inherit; font-size: var(--text-xs); font-weight: 600;
-  color: var(--teal-text); padding: 8px 0; margin-top: 4px;
+  color: var(--teal-text); padding: var(--space-sm) 0; margin-top: 4px;
 }
 .expandable-toggle:hover { color: var(--navy); }
 
@@ -1086,7 +1086,7 @@ p.bright-moment {
 .guide.open .guide-chevron{transform:rotate(180deg);background:var(--alert-red-light)}
 .guide-body[hidden]{display:none}
 .guide-body-inner{padding:0 var(--space-lg) var(--space-lg)}
-.guide-body-inner ul{list-style:none;margin:0 0 16px}
+.guide-body-inner ul{list-style:none;margin:0 0 var(--space-md)}
 .guide-body-inner li{font-size:var(--text-base);color:var(--slate);padding:6px 0 6px 20px;position:relative;line-height:1.5}
 .guide-body-inner li::before{content:'→';position:absolute;left:0;color:var(--alert);font-weight:700;font-size:var(--text-xs)}
 .guide-do{background:var(--alert-soft);border-radius:var(--radius-md);padding:var(--space-base) var(--space-md);margin:var(--space-base) 0;font-size:var(--text-xs);color:var(--navy)}
@@ -1381,7 +1381,7 @@ body.pdf-preview-open{overflow:hidden}
 .cycle-section { background: var(--card); border: 1px solid var(--border-warm); border-radius: var(--radius-md); padding: var(--space-xl); margin: var(--temp-dense-margin) 0; box-shadow: var(--shadow-soft); }
 .cycle-svg-wrap { max-width: 380px; margin: 0 auto var(--space-lg); }
 .cycle-svg-wrap svg { width: 100%; height: auto; display: block; }
-.cycle-steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap-tight); margin: 0 0 16px; }
+.cycle-steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap-tight); margin: 0 0 var(--space-md); }
 .cycle-step { padding: 18px; border-radius: var(--radius-sm); }
 .cycle-step-num { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
 .cycle-step p { font-size: var(--text-base); line-height: 1.5; margin: 0; }
@@ -1492,7 +1492,7 @@ body.pdf-preview-open{overflow:hidden}
 .phase-card.p1{background:var(--amber-bg);border-top-color:var(--amber)}
 .phase-card.p2{background:var(--alert-soft);border-top-color:var(--alert)}
 .phase-card.p3{background:var(--blue-phase-light);border-top-color:var(--blue-phase)}
-.phase-card-label{font-size:var(--text-xs);font-weight:800;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px}
+.phase-card-label{font-size:var(--text-xs);font-weight:800;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--space-sm)}
 .phase-card.p1 .phase-card-label{color:var(--amber)}
 .phase-card.p2 .phase-card-label{color:var(--alert)}
 .phase-card.p3 .phase-card-label{color:var(--blue-phase)}
@@ -1619,7 +1619,7 @@ body.pdf-preview-open{overflow:hidden}
 .situation-card .avoid{font-size:var(--text-xs);color:var(--alert);font-weight:500}
 .grenz-example{background:var(--card);border:1px solid var(--border-warm);border-radius:var(--radius-md);padding:var(--space-lg);margin-bottom:14px}
 .grenz-bad{font-size:var(--text-base);color:var(--alert);margin-bottom: var(--space-sm);padding:10px 14px;background:var(--alert-soft);border-radius:var(--radius-sm)}
-.grenz-good{font-size:var(--text-base);color:var(--navy);padding:10px 14px;background:var(--success-soft);border-radius:var(--radius-sm);margin-bottom:8px}
+.grenz-good{font-size:var(--text-base);color:var(--navy);padding:10px 14px;background:var(--success-soft);border-radius:var(--radius-sm);margin-bottom:var(--space-sm)}
 .grenz-why{font-size:var(--text-xs);color:var(--text-soft);line-height:1.5}
 .einsicht-compare{display:grid;grid-template-columns:repeat(2, 1fr);gap:0;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin:var(--space-lg) 0}
 .einsicht-col{display:flex;flex-direction:column}
@@ -1694,7 +1694,7 @@ body.pdf-preview-open{overflow:hidden}
 .trialog-card h3{font-size:var(--text-base);color:var(--text);margin-bottom:var(--heading-gap-h4)}
 .trialog-card p{font-size:var(--text-xs);color:var(--text-soft);line-height:1.5;margin:0}
 .nachkrise-items{list-style:none;margin:20px 0}
-.nachkrise-items li{font-size:var(--text-base);color:var(--slate);padding:8px 0 8px 24px;position:relative;line-height:1.5;border-bottom:1px solid var(--border-warm)}
+.nachkrise-items li{font-size:var(--text-base);color:var(--slate);padding:var(--space-sm) 0 var(--space-sm) var(--space-lg);position:relative;line-height:1.5;border-bottom:1px solid var(--border-warm)}
 .nachkrise-items li::before{content:'\2014';position:absolute;left:0;color:var(--amber);font-weight:700}
 .ptg-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap-tight);margin:var(--temp-dense-margin) 0}
 .ptg-card{background:var(--success-soft);border-radius:var(--radius-sm);padding:18px;text-align:center}
@@ -1792,6 +1792,7 @@ body.pdf-preview-open{overflow:hidden}
 .dl-module-sos{border-left:4px solid var(--alert)}
 .dl-icon{width:50px;height:34px;border-radius:var(--radius-sm);background:rgba(221,210,191,0.3);color:var(--sand-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;font-size:var(--text-xs);font-weight:800;letter-spacing:0.08em;text-transform:uppercase}
 .dl-module-sos .dl-icon{background:var(--alert-coral);color:var(--alert)}
+.dl-body{flex:1;min-width:0}
 .dl-body h3{font-size:var(--text-base);color:var(--text);margin:0 0 var(--heading-gap-h4);font-weight:700}
 .dl-body p{font-size:var(--text-base);color:var(--slate);line-height:1.5;margin:0 0 14px}
 .dl-btn{display:inline-flex;align-items:center;gap:var(--space-sm);background:var(--cta-primary-bg);color:var(--cta-primary-text);text-decoration:none;font-size:var(--text-xs);font-weight:600;padding:10px 18px;border-radius:var(--radius-sm);transition:background-color 0.2s ease,box-shadow 0.2s ease}
@@ -1902,14 +1903,14 @@ body.pdf-preview-open{overflow:hidden}
 .hub-contact-inner{max-width:var(--content-width);margin:0 auto}
 .hub-contact-cta h2{color:#ffffff;border-top:none;padding-top:0;margin-top:0;font-family:'DM Serif Display',serif;font-size:var(--text-xl);line-height:1.3;margin-bottom:var(--space-md)}
 .hub-contact-cta p{color:rgba(255,255,255,0.88);font-size:var(--text-base);line-height:1.65;max-width:60ch;margin:0 auto}
-.hub-contact-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:var(--space-lg)}
+.hub-contact-actions{display:flex;justify-content:center;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-lg)}
 .hub-contact-phone{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 28px;border-radius:var(--radius-md);background:#ffffff;color:var(--teal-cta-dark);text-decoration:none;font-size:var(--text-base);font-weight:700;letter-spacing:0.02em;box-shadow:0 2px 8px rgba(0,0,0,0.15);transition:background 0.2s ease,transform 0.15s ease}
 .hub-contact-phone:hover{background:var(--surface-alt);transform:translateY(-1px)}
 .hub-contact-email{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,0.2);background:transparent;color:rgba(255,255,255,0.92);text-decoration:none;font-size:var(--text-sm);font-weight:500;transition:border-color 0.2s ease,background 0.2s ease,color 0.2s ease}
 .hub-contact-email:hover{border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.08);color:#ffffff}
 
 .hub-footer-nav{display:flex;justify-content:center;gap:var(--space-lg);padding:var(--space-xl) 0;border-top:1px solid var(--border-warm);margin-top:var(--section-standard)}
-.hub-footer-nav a{color:var(--navy);text-decoration:none;font-size:var(--text-sm);font-weight:600;padding:8px 14px;border-radius:var(--radius-sm);transition:background 0.2s ease,color 0.2s ease}
+.hub-footer-nav a{color:var(--navy);text-decoration:none;font-size:var(--text-sm);font-weight:600;padding:var(--space-sm) 14px;border-radius:var(--radius-sm);transition:background 0.2s ease,color 0.2s ease}
 .hub-footer-nav a:hover{background:var(--surface-alt);color:var(--teal-cta)}
 
 @media (max-width: 900px) {
@@ -1977,6 +1978,8 @@ body.pdf-preview-open{overflow:hidden}
   [data-module-accent="8"] .mini-plan,
   [data-module-accent="8"] .hub-details summary,
   [data-module-accent="8"] .hub-details-body { padding-left: 18px; padding-right: 18px; }
+  [data-module-accent="8"] .dl-module { flex-direction: column; gap: var(--space-md); }
+  [data-module-accent="8"] .dl-btn { width: 100%; flex-wrap: wrap; }
   .closing { padding: var(--space-xl) var(--space-lg); }
 }
 @media (max-width: 900px) {
@@ -3734,8 +3737,8 @@ a.ampel-card{text-decoration:none;display:block}
 @media (max-width: 720px) {
   [data-module-accent]:not([data-module-accent="8"]) .phase-tabs {
     grid-template-columns: 1fr;
-    gap: 8px;
-    padding: 8px;
+    gap: var(--space-sm);
+    padding: var(--space-sm);
   }
 
   [data-module-accent]:not([data-module-accent="8"]) .phase-tab {