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

@@ -18,7 +18,7 @@ window.Page_widget = (() => {
 
   async function _render() {
     _container.innerHTML = `
-      <div style="padding:var(--space-4)">
+      <div class="p-4">
         <div style="text-align:center;color:var(--c-text-muted);padding:var(--space-8)">
           <div style="font-size:2rem">⏳</div>
           <div>Lade…</div>
@@ -57,7 +57,7 @@ window.Page_widget = (() => {
          </div>`
       : `<div class="widget-photo-wrap widget-photo-placeholder">
            <svg class="ph-icon" style="font-size:3rem" aria-hidden="true"><use href="/icons/phosphor.svg#image"></use></svg>
-           <div style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Fotos im Tagebuch</div>
+           <div class="text-sm-muted">Noch keine Fotos im Tagebuch</div>
          </div>`;
 
     const reminderHtml = rem
@@ -65,17 +65,17 @@ window.Page_widget = (() => {
            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#calendar-check"></use></svg>
            <div>
              <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">${_esc(rem.bezeichnung)}</div>
-             <div style="font-size:var(--text-xs);color:var(--c-text-muted)">${_fmtDate(rem.naechstes)}</div>
+             <div class="text-xs-muted">${_fmtDate(rem.naechstes)}</div>
            </div>
          </div>`
       : data.overdue > 0
         ? `<div class="widget-reminder widget-reminder--overdue">
              <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg>
-             <div style="font-size:var(--text-sm)">${data.overdue} überfällige Erinnerung${data.overdue > 1 ? 'en' : ''}</div>
+             <div class="text-sm">${data.overdue} überfällige Erinnerung${data.overdue > 1 ? 'en' : ''}</div>
            </div>`
         : `<div class="widget-reminder widget-reminder--ok">
              <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#check-circle"></use></svg>
-             <div style="font-size:var(--text-sm)">Keine offenen Erinnerungen</div>
+             <div class="text-sm">Keine offenen Erinnerungen</div>
            </div>`;
 
     const dogAvatar = dog.foto_url
@@ -83,14 +83,14 @@ window.Page_widget = (() => {
       : `<div class="widget-dog-av widget-dog-av--placeholder">🐕</div>`;
 
     _container.innerHTML = `
-      <div style="padding:var(--space-4)">
+      <div class="p-4">
 
         <div class="widget-card">
           <div class="widget-dog-row">
             ${dogAvatar}
             <div>
               <div style="font-weight:var(--weight-bold);font-size:var(--text-lg)">${_esc(dog.name)}</div>
-              ${dog.rasse ? `<div style="font-size:var(--text-sm);color:var(--c-text-muted)">${_esc(dog.rasse)}</div>` : ''}
+              ${dog.rasse ? `<div class="text-sm-muted">${_esc(dog.rasse)}</div>` : ''}
             </div>
             <button class="btn btn-secondary btn-sm" id="widget-refresh-btn" style="margin-left:auto"
                     title="Neues Zufallsbild">
@@ -113,11 +113,11 @@ window.Page_widget = (() => {
           <p style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-bottom:var(--space-3)">
             Füge diese Seite zum Home-Screen hinzu und öffne sie mit einem Tipp.
           </p>
-          <div style="display:flex;flex-direction:column;gap:var(--space-2)">
-            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+          <div class="flex-col-gap-2">
+            <div class="text-xs-muted">
               <strong>iOS Safari:</strong> Teilen-Symbol → „Zum Home-Bildschirm"
             </div>
-            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+            <div class="text-xs-muted">
               <strong>Android Chrome:</strong> Menü (⋮) → „Zum Startbildschirm hinzufügen"
             </div>
           </div>