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/personality.js

@@ -237,7 +237,7 @@ window.Page_personality = (() => {
         <!-- Fortschritt -->
         <div style="padding:var(--space-4) var(--space-4) 0">
           <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
-            <span style="font-size:var(--text-xs);color:var(--c-text-muted)">
+            <span class="text-xs-muted">
               Frage ${_current + 1} von ${FRAGEN.length}
             </span>
             <span style="font-size:var(--text-xs);font-weight:600;color:var(--c-primary)">${pct}%</span>
@@ -344,7 +344,7 @@ window.Page_personality = (() => {
         return `
           <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
             <span style="font-size:1rem;width:24px;text-align:center">${tp.emoji}</span>
-            <div style="flex:1">
+            <div class="flex-1">
               <div style="height:8px;background:var(--c-border);border-radius:4px;overflow:hidden">
                 <div style="height:100%;width:${pct}%;background:${tp.color};border-radius:4px;transition:width .6s"></div>
               </div>
@@ -414,7 +414,7 @@ window.Page_personality = (() => {
           <div style="padding:var(--space-3) var(--space-4);font-size:var(--text-xs);font-weight:600;
                       color:var(--c-text-secondary);text-transform:uppercase;letter-spacing:0.05em;
                       border-bottom:1px solid var(--c-border)">Dein Profil</div>
-          <div style="padding:var(--space-4)">${scoreBars}</div>
+          <div class="p-4">${scoreBars}</div>
         </div>
 
         <!-- Teilen + Nochmal -->