Design-System Sprint A: utilities.css + 948 Inline-Styles → Utility-Klassen, SW by-v1102

PHASE 1 — Sofort-Cleanup ohne Risiko:
- Neue Datei utilities.css mit ~25 Klassen für häufige Kombinationen:
  * text-xs-muted, text-xs-secondary, text-sm-muted, text-sm-secondary
  * flex-gap-2/3, flex-col-gap-2/3/4, flex-center-gap-1/2/3
  * flex-between, flex-1-min, mb-1/3, mt-1/3
  * icon-xs/sm/md/lg, label-block, caption
- index.html bindet utilities.css ein
- mb-3/mt-3 ergänzt (waren in design-system.css unvollständig)

PHASE 2 — .by-tab Modifier für Vereinheitlichung:
- .by-tabs.grid (mit --tab-cols Variable für Admin/Health/etc.)
- .by-tabs.sticky (Desktop vertikale Tabs für Admin)
- .by-tabs.wrap (Zuchthunde, flex-wrap statt scroll)
- .by-tabs.separated (Sitting, mit eigenem Hintergrund + Border)

PHASE 3 — Inline-Style → Klassen-Migration (Python-Script):
- 948 Inline-Styles entfernt (5101 → 4153, -18%)
- 962 Migrationen über 47 Page-Dateien
- Top-Treffer: admin.js (180), health.js (67), dog-profile.js (67),
  litters.js (62), settings.js (61), zuchthunde.js (51)
- Patterns: text-muted, text-secondary, text-danger, text-xs-muted,
  text-sm-muted, grid-2 (Duplikat-Bug behoben!), flex-col-gap-3,
  p-3/4, mb-2/3/4, hidden, w-full, flex-1, ...
- Bewahrt bestehende class-Attribute (mergt korrekt)

Alle 19 Tests grün. Kein visueller Diff erwartet (gleiche Property-Werte).

backend/static/js/pages/onboarding.js

@@ -85,7 +85,7 @@ window.Page_onboarding = (() => {
   // ----------------------------------------------------------
   function _step1() {
     return `
-      <div style="text-align:center">
+      <div class="text-center">
 
         <!-- Logo -->
         <div style="margin-bottom:var(--space-6)">
@@ -133,19 +133,19 @@ window.Page_onboarding = (() => {
               <div>
                 <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                              color:var(--c-text)">${title}</div>
-                <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${desc}</div>
+                <div class="text-xs-secondary">${desc}</div>
               </div>
             </div>
           `).join('')}
         </div>
 
         <!-- Buttons -->
-        <div style="display:flex;flex-direction:column;gap:var(--space-3)">
-          <button class="btn btn-primary" id="ob-next-btn" style="width:100%">
+        <div class="flex-col-gap-3">
+          <button class="btn btn-primary" id="ob-next-btn" class="w-full">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#arrow-right"></use></svg>
             Los geht's
           </button>
-          <button class="btn btn-ghost" id="ob-skip-btn" style="width:100%">
+          <button class="btn btn-ghost" id="ob-skip-btn" class="w-full">
             Überspringen
           </button>
         </div>
@@ -222,7 +222,7 @@ window.Page_onboarding = (() => {
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#camera"></use></svg>
               <span id="ob-photo-label">Foto auswählen</span>
               <input type="file" name="foto" id="ob-photo-input"
-                     accept="image/*" style="display:none">
+                     accept="image/*" class="hidden">
             </label>
           </div>
 
@@ -234,13 +234,13 @@ window.Page_onboarding = (() => {
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#arrow-left"></use></svg>
           </button>
           <button type="submit" form="ob-dog-form" class="btn btn-primary" id="ob-save-btn"
-                  style="flex:1">
+                  class="flex-1">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>
             Hund anlegen
           </button>
         </div>
         <div style="text-align:center;margin-top:var(--space-3)">
-          <button class="btn btn-ghost" id="ob-skip-btn" style="font-size:var(--text-sm)">
+          <button class="btn btn-ghost" id="ob-skip-btn" class="text-sm">
             Ohne Hund fortfahren
           </button>
         </div>
@@ -255,7 +255,7 @@ window.Page_onboarding = (() => {
   function _step3() {
     const dogName = _appState.activeDog?.name;
     return `
-      <div style="text-align:center">
+      <div class="text-center">
 
         <!-- Erfolgs-Icon -->
         <div style="margin-bottom:var(--space-6)">
@@ -294,13 +294,13 @@ window.Page_onboarding = (() => {
         </p>
 
         <!-- CTA -->
-        <div style="display:flex;flex-direction:column;gap:var(--space-3)">
-          <button class="btn btn-primary" id="ob-diary-btn" style="width:100%">
+        <div class="flex-col-gap-3">
+          <button class="btn btn-primary" id="ob-diary-btn" class="w-full">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>
             Zum Tagebuch
           </button>
           ${dogName ? `
-            <button class="btn btn-secondary" id="ob-profile-btn" style="width:100%">
+            <button class="btn btn-secondary" id="ob-profile-btn" class="w-full">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>
               Profil vervollständigen
             </button>