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/zucht-profil.js

@@ -93,7 +93,7 @@ window.Page_zucht_profil = (() => {
       _container.innerHTML = `
         <div style="text-align:center;padding:var(--space-10) var(--space-4)">
           <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon('warning')}</div>
-          <p style="color:var(--c-text-secondary)">Kein Hund angegeben.</p>
+          <p class="text-secondary">Kein Hund angegeben.</p>
         </div>`;
       return;
     }
@@ -126,7 +126,7 @@ window.Page_zucht_profil = (() => {
       _container.innerHTML = `
         <div style="text-align:center;padding:var(--space-10) var(--space-4)">
           <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon('warning')}</div>
-          <p style="color:var(--c-danger)">${_esc(err.message || 'Fehler beim Laden.')}</p>
+          <p class="text-danger">${_esc(err.message || 'Fehler beim Laden.')}</p>
           <button class="btn btn-secondary" onclick="history.back()">Zurück</button>
         </div>`;
     }
@@ -138,7 +138,7 @@ window.Page_zucht_profil = (() => {
   function _renderSkeleton() {
     _container.innerHTML = `
       <div class="zp-layout">
-        <button class="btn btn-ghost btn-sm zp-back-btn" style="margin-bottom:var(--space-4)">
+        <button class="btn btn-ghost btn-sm zp-back-btn mb-4">
           ${UI.icon('arrow-left')} Zurück zur Zuchtkartei
         </button>
         ${UI.skeleton(6)}
@@ -274,7 +274,7 @@ window.Page_zucht_profil = (() => {
               ${identItems.map(m => `<span>${m}</span>`).join('')}
             </div>` : ''}
           ${elternItems.length ? `
-            <div class="zp-header-meta" style="font-size:var(--text-xs);color:var(--c-text-secondary)">
+            <div class="zp-header-meta text-xs-secondary">
               ${elternItems.join(' &nbsp;·&nbsp; ')}
             </div>` : ''}
           ${h.notiz ? `<div class="zp-header-notiz">${_esc(h.notiz)}</div>` : ''}
@@ -378,7 +378,7 @@ window.Page_zucht_profil = (() => {
       <tr>
         <td class="zp-td">
           <span style="font-weight:var(--weight-medium)">${_esc(t.test_typ || 'Sonstiges')}</span>
-          ${t.test_name ? `<br><span style="font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(t.test_name)}</span>` : ''}
+          ${t.test_name ? `<br><span class="text-xs-secondary">${_esc(t.test_name)}</span>` : ''}
         </td>
         <td class="zp-td">${_healthBadge(t.test_typ || '', t.ergebnis)}</td>
         <td class="zp-td zp-td-muted">${t.untersuch_am ? _fmtDate(t.untersuch_am) : '—'}</td>
@@ -463,7 +463,7 @@ window.Page_zucht_profil = (() => {
           ${t.verliehen_am ? `${UI.icon('calendar-dots')} ${_fmtDate(t.verliehen_am)}` : ''}
           ${t.ort          ? `&nbsp;·&nbsp; ${UI.icon('map-pin')} ${_esc(t.ort)}`       : ''}
           ${t.richter      ? `&nbsp;·&nbsp; ${UI.icon('user')} ${_esc(t.richter)}`      : ''}
-          ${t.ausstellung  ? `<br><span style="font-size:var(--text-xs)">${UI.icon('ticket')} ${_esc(t.ausstellung)}</span>` : ''}
+          ${t.ausstellung  ? `<br><span class="text-xs">${UI.icon('ticket')} ${_esc(t.ausstellung)}</span>` : ''}
         </div>
       </div>`).join('');