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/erste-hilfe.js

@@ -253,13 +253,13 @@ window.Page_erste_hilfe = (() => {
         </div>
 
         ${KATEGORIEN.map(k => `
-          <div class="eh-tab-panel" id="eh-panel-${k.id}" style="display:none">
+          <div class="eh-tab-panel" id="eh-panel-${k.id}" class="hidden">
             ${k.eintraege.map((e, i) => _renderEintrag(e, k.id, i, k.color)).join('')}
           </div>
         `).join('')}
 
         <div style="margin-top:var(--space-6);padding:var(--space-4);background:var(--c-surface-2);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.6">
-          <svg class="ph-icon" aria-hidden="true" style="color:var(--c-primary)"><use href="/icons/phosphor.svg#info"></use></svg>
+          <svg class="ph-icon" aria-hidden="true" class="text-primary"><use href="/icons/phosphor.svg#info"></use></svg>
           Diese Inhalte ersetzen keinen Tierarztbesuch. Im Zweifel immer sofort zum Tierarzt oder den tierärztlichen Notdienst anrufen.
         </div>
       </div>
@@ -311,7 +311,7 @@ window.Page_erste_hilfe = (() => {
         <div style="font-size:var(--text-xs);font-weight:var(--weight-semibold);color:rgba(255,255,255,0.85);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:var(--space-1)">
           ${g.flag} · ${g.land}
         </div>
-        <div style="display:flex;flex-direction:column;gap:var(--space-2)">
+        <div class="flex-col-gap-2">
           ${g.eintraege.map(renderEintrag).join('')}
         </div>
       </div>
@@ -323,7 +323,7 @@ window.Page_erste_hilfe = (() => {
           <svg class="ph-icon" style="width:20px;height:20px" aria-hidden="true"><use href="/icons/phosphor.svg#siren"></use></svg>
           Tiergiftzentralen — jetzt anrufen
         </div>
-        <div style="display:flex;flex-direction:column;gap:var(--space-3)">
+        <div class="flex-col-gap-3">
           ${gruppen}
         </div>
         <p style="margin-top:var(--space-3);font-size:var(--text-xs);color:rgba(255,255,255,0.8)">
@@ -345,7 +345,7 @@ window.Page_erste_hilfe = (() => {
     return `
       <div class="card" style="padding:0;overflow:hidden;margin-bottom:var(--space-4)">
         <div style="padding:var(--space-3) var(--space-4);background:var(--c-surface-2);font-weight:var(--weight-semibold);font-size:var(--text-sm);display:flex;align-items:center;gap:var(--space-2)">
-          <svg class="ph-icon" aria-hidden="true" style="color:var(--c-primary)"><use href="/icons/phosphor.svg#list-bullets"></use></svg>
+          <svg class="ph-icon" aria-hidden="true" class="text-primary"><use href="/icons/phosphor.svg#list-bullets"></use></svg>
           Schnellübersicht: Was tun bei …
         </div>
         <div style="overflow-x:auto">