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

@@ -499,7 +499,7 @@ window.Page_notes = (() => {
           <h3 style="font-size:var(--text-base);font-weight:700;margin:0 0 var(--space-4)">Neue Notiz</h3>
 
           <!-- Kategorie-Auswahl -->
-          <div style="margin-bottom:var(--space-4)">
+          <div class="mb-4">
             <label style="display:block;font-size:var(--text-sm);font-weight:600;color:var(--c-text);margin-bottom:var(--space-2)">Kategorie</label>
             <div style="display:flex;flex-wrap:wrap;gap:var(--space-2)">
               ${ERSTELL_RUBRIKEN.map(r => `
@@ -514,7 +514,7 @@ window.Page_notes = (() => {
           </div>
 
           <!-- Text -->
-          <div style="margin-bottom:var(--space-4)">
+          <div class="mb-4">
             <label style="display:block;font-size:var(--text-sm);font-weight:600;color:var(--c-text);margin-bottom:var(--space-2)">Notiz</label>
             <textarea id="nc-text" rows="5" placeholder="Was möchtest du festhalten…"
                       style="width:100%;padding:var(--space-3);border:1.5px solid var(--c-border);
@@ -524,9 +524,9 @@ window.Page_notes = (() => {
                              box-sizing:border-box"></textarea>
           </div>
 
-          <div style="display:flex;gap:var(--space-3)">
-            <button id="nc-cancel" class="btn btn-ghost" style="flex:1">Abbrechen</button>
-            <button id="nc-save" class="btn btn-primary" style="flex:1">Speichern</button>
+          <div class="flex-gap-3">
+            <button id="nc-cancel" class="btn btn-ghost flex-1">Abbrechen</button>
+            <button id="nc-save" class="btn btn-primary flex-1">Speichern</button>
           </div>
         </div>`;
     };
@@ -627,7 +627,7 @@ window.Page_notes = (() => {
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
                           color:var(--c-text);margin-bottom:var(--space-2)">Bewertung</label>
-            <div style="display:flex;gap:var(--space-2)">
+            <div class="flex-gap-2">
               ${[1,2,3,4,5].map(n => `
                 <button type="button" class="notes-pfote" data-val="${n}"
                         style="font-size:1.3rem;border:1.5px solid var(--c-border);border-radius:var(--radius-md);
@@ -642,7 +642,7 @@ window.Page_notes = (() => {
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
                           color:var(--c-text);margin-bottom:var(--space-2)">Umgebung</label>
-            <div style="display:flex;gap:var(--space-2)">
+            <div class="flex-gap-2">
               ${[['🏠','zuhause'],['🌿','natur'],['🌆','stadt']].map(([emoji,val]) => `
                 <button type="button" class="notes-umgebung" data-val="${val}"
                         style="font-size:1.2rem;border:1.5px solid var(--c-border);border-radius:var(--radius-md);
@@ -657,7 +657,7 @@ window.Page_notes = (() => {
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
                           color:var(--c-text);margin-bottom:var(--space-2)">Stimmung des Hundes</label>
-            <div style="display:flex;gap:var(--space-2)">
+            <div class="flex-gap-2">
               ${[['😊','super'],['😐','ok'],['😔','mude']].map(([emoji,val]) => `
                 <button type="button" class="notes-stimmung" data-val="${val}"
                         style="font-size:1.2rem;border:1.5px solid var(--c-border);border-radius:var(--radius-md);