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

@@ -413,7 +413,7 @@ window.Page_lost = (() => {
                            border-radius:var(--radius-md);flex-shrink:0;
                            display:flex;align-items:center;justify-content:center;
                            font-size:2rem">🐕</div>`}
-          <div style="flex:1;min-width:0">
+          <div class="flex-1-min">
             <div style="display:flex;align-items:center;gap:var(--space-2);
                         margin-bottom:var(--space-1);flex-wrap:wrap">
               <span style="font-weight:var(--weight-semibold);font-size:var(--text-base)">
@@ -436,7 +436,7 @@ window.Page_lost = (() => {
                       color:var(--c-text)">
               ${_escape(r.beschreibung.slice(0, 120))}${r.beschreibung.length > 120 ? '…' : ''}
             </p>
-            <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
+            <div class="text-xs-secondary">
               Gemeldet ${_fmtDate(r.created_at)}
               ${r.melder_name ? '· ' + _escape(r.melder_name.split(' ')[0]) : ''}
             </div>
@@ -450,7 +450,7 @@ window.Page_lost = (() => {
                      🗑 Verwerfen
                    </button>
                  </div>`
-              : (_appState.user ? `<div style="margin-top:var(--space-2)">
+              : (_appState.user ? `<div class="mt-2">
                    <button class="btn btn-ghost btn-xs lost-note-btn"
                            data-lost-note-id="${r.id}"
                            data-lost-note-name="${_escape(r.name)}"
@@ -600,7 +600,7 @@ window.Page_lost = (() => {
         <div class="form-group">
           <label class="form-label">
             Registrierter Hund
-            <span style="color:var(--c-text-secondary)">(optional)</span>
+            <span class="text-secondary">(optional)</span>
           </label>
           <select class="form-control" name="dog_id" id="lf-dog-select">
             ${dogOpts}
@@ -616,7 +616,7 @@ window.Page_lost = (() => {
         <div class="form-group">
           <label class="form-label">
             Rasse
-            <span style="color:var(--c-text-secondary)">(optional)</span>
+            <span class="text-secondary">(optional)</span>
           </label>
           <input class="form-control" type="text" name="rasse"
                  placeholder="z. B. Labrador">
@@ -643,7 +643,7 @@ window.Page_lost = (() => {
           </div>
           <input type="hidden" name="lat" id="lf-lat">
           <input type="hidden" name="lon" id="lf-lon">
-          <small id="lf-gps-hint" style="color:var(--c-text-secondary)">
+          <small id="lf-gps-hint" class="text-secondary">
             ${_userPos
               ? '✅ Aktueller Standort vorausgefüllt'
               : 'GPS-Button drücken um Standort zu ermitteln'}
@@ -653,7 +653,7 @@ window.Page_lost = (() => {
         <div class="form-group">
           <label class="form-label">
             Foto
-            <span style="color:var(--c-text-secondary)">(optional)</span>
+            <span class="text-secondary">(optional)</span>
           </label>
           <input class="form-control" type="file" name="photo"
                  accept="image/*" capture="environment">