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

@@ -162,7 +162,7 @@ window.Page_expenses = (() => {
           <div class="exp-kachel-icon" style="background:${k.color}20;color:${k.color}">
             ${UI.icon(k.icon)}
           </div>
-          <div class="exp-kachel-betrag" style="color:var(--c-primary)">${_fmt(jahr)}</div>
+          <div class="exp-kachel-betrag text-primary">${_fmt(jahr)}</div>
           <div class="exp-kachel-label">${k.label}</div>
           ${monatLine}
           <div class="exp-kachel-add">${UI.icon('plus')} eintragen</div>
@@ -477,13 +477,13 @@ window.Page_expenses = (() => {
         </div>
         ${dogOptions ? `
         <div class="form-group">
-          <label class="form-label">Hund <span style="color:var(--c-text-muted)">(optional)</span></label>
+          <label class="form-label">Hund <span class="text-muted">(optional)</span></label>
           <select class="form-control" name="dog_id">
             <option value="">Kein Hund</option>${dogOptions}
           </select>
         </div>` : ''}
         <div class="form-group">
-          <label class="form-label">Bezeichnung <span style="color:var(--c-text-muted)">(optional)</span></label>
+          <label class="form-label">Bezeichnung <span class="text-muted">(optional)</span></label>
           <input class="form-control" type="text" name="notiz"
                  value="${_esc(r?.notiz || '')}" placeholder="z.B. Haftpflicht Allianz">
         </div>
@@ -694,7 +694,7 @@ window.Page_expenses = (() => {
     // Kategorie-Kacheln statt Dropdown
     const katKacheln = KATEGORIEN.map(k => `
       <label class="exp-kat-tile${selKat === k.id ? ' exp-kat-tile--sel' : ''}" data-kat="${k.id}">
-        <input type="radio" name="kategorie" value="${k.id}" ${selKat === k.id ? 'checked' : ''} style="display:none">
+        <input type="radio" name="kategorie" value="${k.id}" ${selKat === k.id ? 'checked' : ''} class="hidden">
         <span class="exp-kat-tile-icon" style="color:${k.color}">${UI.icon(k.icon)}</span>
         <span class="exp-kat-tile-label">${k.label}</span>
       </label>`).join('');
@@ -707,7 +707,7 @@ window.Page_expenses = (() => {
           <div class="exp-kat-grid">${katKacheln}</div>
         </div>
 
-        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+        <div class="grid-2">
           <div class="form-group" style="margin-bottom:0">
             <label class="form-label">Betrag</label>
             <div class="exp-betrag-wrap">