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

@@ -176,7 +176,7 @@ window.Page_sitting = (() => {
           <div class="sitting-profil-fact"><strong>${s.max_hunde}</strong> Hund${s.max_hunde !== 1 ? 'e' : ''} max.</div>
           <div class="sitting-profil-fact"><strong>${s.radius_km} km</strong> Umkreis</div>
         </div>
-        <div class="sitting-services" style="margin-top:var(--space-3)">${svcs || '(keine Services angegeben)'}</div>
+        <div class="sitting-services mt-3">${svcs || '(keine Services angegeben)'}</div>
       </div>
     `;
   }
@@ -194,7 +194,7 @@ window.Page_sitting = (() => {
     }
 
     if (myReqs.length) {
-      html += `<div class="by-section-label" style="margin-top:var(--space-4)">${UI.icon('upload')} Meine Anfragen</div>`;
+      html += `<div class="by-section-label mt-4">${UI.icon('upload')} Meine Anfragen</div>`;
       html += myReqs.map(r => _requestCardHTML(r, 'sent')).join('');
     }
 
@@ -273,7 +273,7 @@ window.Page_sitting = (() => {
 
     const footer = _state.user && _mySitter?.user_id !== s.user_id ? `
       <button class="btn btn-primary" id="sit-anfrage-btn">${UI.icon('bell')} Anfrage senden</button>
-    ` : (!_state.user ? `<span style="color:var(--c-text-secondary)">Zum Anfragen bitte einloggen.</span>` : '');
+    ` : (!_state.user ? `<span class="text-secondary">Zum Anfragen bitte einloggen.</span>` : '');
 
     UI.modal.open({ title: 'Sitter-Profil', body, footer });
 
@@ -389,10 +389,10 @@ window.Page_sitting = (() => {
           `).join('')}
         </div>
         <div class="form-group">
-          <label class="form-label">Mein Standort <span style="color:var(--c-text-secondary)">(für Umkreis-Suche)</span></label>
+          <label class="form-label">Mein Standort <span class="text-secondary">(für Umkreis-Suche)</span></label>
           <div id="sit-loc-picker"></div>
         </div>
-        <div class="form-group" style="margin-top:var(--space-3)">
+        <div class="form-group mt-3">
           <label class="form-label">Umkreis (km)</label>
           <input class="form-control" type="number" min="1" max="100" name="radius_km" value="${s?.radius_km ?? 20}">
         </div>
@@ -407,7 +407,7 @@ window.Page_sitting = (() => {
     `;
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
-        <button class="btn btn-primary" type="submit" form="${id}" id="sit-profil-submit" style="width:100%">
+        <button class="btn btn-primary" type="submit" form="${id}" id="sit-profil-submit" class="w-full">
           ${s ? `${UI.icon('floppy-disk')} Speichern` : `${UI.icon('plus')} Profil erstellen`}
         </button>
         <button class="btn btn-secondary" onclick="UI.modal.close()">Abbrechen</button>
@@ -773,7 +773,7 @@ window.Page_sitting = (() => {
       <div style="width:100%;max-width:600px;background:var(--c-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
                   padding:var(--space-4);box-sizing:border-box;max-height:80vh;display:flex;flex-direction:column">
         <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)">
-          <svg class="ph-icon" aria-hidden="true" style="color:var(--c-primary)"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
+          <svg class="ph-icon" aria-hidden="true" class="text-primary"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
           <span style="font-weight:600;flex:1"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz — ${UI.escape(parentLabel)}</span>
           <button id="sit-note-close" style="background:none;border:none;cursor:pointer;color:var(--c-text-muted);padding:4px">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg>