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

@@ -75,7 +75,7 @@ window.Page_breeder = (() => {
                   padding:var(--space-6) var(--space-4) var(--space-8);color:white;position:relative">
         <div style="max-width:640px;margin:0 auto">
           <div style="display:flex;align-items:flex-start;gap:var(--space-3);flex-wrap:wrap">
-            <div style="flex:1;min-width:0">
+            <div class="flex-1-min">
               <p style="margin:0 0 var(--space-1);font-size:var(--text-xs);opacity:.7;text-transform:uppercase;letter-spacing:.1em">
                 ${UI.icon('seal-check')} Verifizierter Züchter
               </p>
@@ -157,7 +157,7 @@ window.Page_breeder = (() => {
                      display:flex;align-items:center;gap:var(--space-2)">
             ${UI.icon('baby')} Aktuelle Würfe
           </h2>
-          <div style="display:flex;flex-direction:column;gap:var(--space-3)">
+          <div class="flex-col-gap-3">
             ${p.wuerfe.map(w => _wurfCard(w)).join('')}
           </div>
         </div>` : ''}
@@ -201,7 +201,7 @@ window.Page_breeder = (() => {
 
         <!-- Fotos / Gallery -->
         ${p.fotos?.length ? `
-        <div style="margin-bottom:var(--space-4)">
+        <div class="mb-4">
           <h2 style="margin:0 0 var(--space-3);font-size:var(--text-base);font-weight:700;
                      display:flex;align-items:center;gap:var(--space-2)">
             ${UI.icon('images')} Galerie
@@ -226,7 +226,7 @@ window.Page_breeder = (() => {
           </div>
         </div>` : ''}
 
-        <div id="breeder-photos-section" style="display:none"></div>
+        <div id="breeder-photos-section" class="hidden"></div>
 
       </div>`;
 
@@ -262,7 +262,7 @@ window.Page_breeder = (() => {
     ).join('');
 
     const genBadge = h.gentests_total > 0
-      ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">
+      ? `<span class="text-xs-muted">
            ${h.gentests_clear}/${h.gentests_total} Gentests frei
          </span>`
       : '';
@@ -271,7 +271,7 @@ window.Page_breeder = (() => {
       <div style="background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);
                   padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)">
         <div style="display:flex;align-items:center;gap:var(--space-2)">
-          <span style="color:var(--c-primary)">${gIcon}</span>
+          <span class="text-primary">${gIcon}</span>
           <span style="font-weight:700;font-size:var(--text-sm)">${_esc(h.name)}</span>
           ${h.rufname ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">"${_esc(h.rufname)}"</span>` : ''}
           ${alter !== null ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs);margin-left:auto">${alter} J.</span>` : ''}
@@ -345,7 +345,7 @@ window.Page_breeder = (() => {
           ${stats.map(r => `
             <div style="display:flex;align-items:center;gap:6px;font-size:var(--text-sm)">
               <span style="font-weight:700">${_esc(r.ergebnis || '—')}</span>
-              <span style="color:var(--c-text-muted)">${r.cnt}×</span>
+              <span class="text-muted">${r.cnt}×</span>
               <span style="background:var(--c-border);border-radius:999px;height:6px;
                            width:${Math.round(r.cnt/total*80)+16}px;display:inline-block"></span>
             </div>`).join('')}
@@ -377,7 +377,7 @@ window.Page_breeder = (() => {
       const photos = await API.breederPhotos.list('breeder', breederId);
       if (!photos?.length) return;
       section.innerHTML = `
-        <div style="margin-bottom:var(--space-4)">
+        <div class="mb-4">
           <h2 style="margin:0 0 var(--space-3);font-size:var(--text-base);font-weight:700">
             ${UI.icon('images')} Fotos
           </h2>