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

@@ -75,7 +75,7 @@ window.Page_events = (() => {
           <button class="events-view-btn active" data-ev-view="liste">${UI.icon('list')} Liste</button>
           <button class="events-view-btn" data-ev-view="karte">${UI.icon('map-trifold')} Karte</button>
         </div>
-        <div style="flex:1"></div>
+        <div class="flex-1"></div>
         ${_state.user ? `<button class="btn btn-primary btn-sm" id="ev-new-btn">${UI.icon('plus')} Event</button>` : ''}
       </div>
 
@@ -102,7 +102,7 @@ window.Page_events = (() => {
       </div>
 
       <div class="events-list" id="ev-list"></div>
-      <div class="events-map" id="ev-map" style="display:none"></div>
+      <div class="events-map" id="ev-map" class="hidden"></div>
     `;
 
     _container.addEventListener('click', _onClick);
@@ -231,7 +231,7 @@ window.Page_events = (() => {
           ${_state.user ? `<button class="btn-icon ev-note-btn" data-ev-note-id="${ev.id}"
                               data-ev-note-label="${UI.escape(ev.titel + ' ' + ev.datum)}"
                               data-ev-note-ort="${UI.escape(ev.ort_name || '')}"
-                              title="Notiz" style="color:var(--c-text-muted)" onclick="event.stopPropagation()">
+                              title="Notiz" class="text-muted" onclick="event.stopPropagation()">
                               ${_icon('note-pencil')}</button>` : ''}
         </div>
       </div>
@@ -496,7 +496,7 @@ window.Page_events = (() => {
           <label class="form-label">GPS-Position</label>
           <div id="ev-location-picker"></div>
         </div>
-        <div class="form-group" style="margin-top:var(--space-3)">
+        <div class="form-group mt-3">
           <label class="form-label">Beschreibung</label>
           <textarea class="form-control" name="beschreibung" rows="3">${ev?.beschreibung || ''}</textarea>
         </div>
@@ -509,10 +509,10 @@ window.Page_events = (() => {
 
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
-        <button class="btn btn-primary" type="submit" form="${id}" id="ev-submit-btn" style="width:100%">
+        <button class="btn btn-primary" type="submit" form="${id}" id="ev-submit-btn" class="w-full">
           ${isEdit ? 'Speichern' : 'Event erstellen'}
         </button>
-        <div style="display:flex;gap:var(--space-2)">
+        <div class="flex-gap-2">
           ${isEdit ? `<button type="button" class="btn btn-danger" id="ev-form-delete">Löschen</button>` : ''}
           <button class="btn btn-secondary flex-1" onclick="UI.modal.close()">Abbrechen</button>
         </div>
@@ -672,7 +672,7 @@ window.Page_events = (() => {
       <div style="width:100%;max-width:600px;background:var(--c-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
                   padding:var(--space-4);box-sizing:border-box;max-height:80vh;display:flex;flex-direction:column">
         <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)">
-          <svg class="ph-icon" aria-hidden="true" style="color:var(--c-primary)"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
+          <svg class="ph-icon" aria-hidden="true" class="text-primary"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
           <span style="font-weight:600;flex:1"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz — ${UI.escape(parentLabel)}</span>
           <button id="ev-note-close" style="background:none;border:none;cursor:pointer;color:var(--c-text-muted);padding:4px">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg>