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

@@ -73,7 +73,7 @@ window.Page_poison = (() => {
         <a href="tel:110" class="btn btn-secondary" style="flex:1;text-align:center;text-decoration:none">
           ${UI.icon('phone')} <strong>110</strong> Polizei
         </a>
-        <button class="btn btn-secondary" id="poison-btn-erstehilfe" style="flex:1">
+        <button class="btn btn-secondary" id="poison-btn-erstehilfe" class="flex-1">
           ${UI.icon('first-aid')} Erste Hilfe & Tiergift
         </button>
       </div>
@@ -221,7 +221,7 @@ window.Page_poison = (() => {
           ${r.beschreibung ? UI.escape(r.beschreibung.slice(0, 80)) + '<br>' : ''}
           <small>📍 ${distStr} entfernt</small><br>
           <small>📅 ${_fmtDate(r.created_at)}</small>
-          ${r.bestaetigt ? '<br><small><svg class="ph-icon" aria-hidden="true" style="color:var(--c-success)"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</small>' : ''}
+          ${r.bestaetigt ? '<br><small><svg class="ph-icon" aria-hidden="true" class="text-success"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</small>' : ''}
         `);
 
       marker.on('click', () => _openDetail(r));
@@ -276,13 +276,13 @@ window.Page_poison = (() => {
                   border-left:4px solid ${typ.color}">
         <div style="display:flex;gap:var(--space-3);align-items:flex-start">
           <div style="width:40px;height:40px;flex-shrink:0;color:${typ.color};display:flex;align-items:center;justify-content:center">${UI.icon(typ.icon)}</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 class="badge"
                     style="background:${typ.color};color:#fff">${typ.label}</span>
               ${r.bestaetigt
-                ? '<span class="badge badge-success"><svg class="ph-icon" aria-hidden="true" style="color:var(--c-success)"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</span>'
+                ? '<span class="badge badge-success"><svg class="ph-icon" aria-hidden="true" class="text-success"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</span>'
                 : ''}
               <span style="margin-left:auto;color:var(--c-text-secondary);
                            font-size:var(--text-sm);white-space:nowrap">
@@ -295,7 +295,7 @@ window.Page_poison = (() => {
                    ${UI.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)} ·
               läuft ab ${_fmtDate(r.expires_at)}
             </div>
@@ -336,7 +336,7 @@ window.Page_poison = (() => {
         <span class="badge" style="background:${typ.color};color:#fff">
           ${UI.icon(typ.icon)} ${typ.label}
         </span>
-        ${r.bestaetigt ? '<span class="badge badge-success"><svg class="ph-icon" aria-hidden="true" style="color:var(--c-success)"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</span>' : ''}
+        ${r.bestaetigt ? '<span class="badge badge-success"><svg class="ph-icon" aria-hidden="true" class="text-success"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</span>' : ''}
       </div>
 
       ${r.beschreibung
@@ -353,7 +353,7 @@ window.Page_poison = (() => {
 
       <div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
         ${!r.bestaetigt && _appState.user && !isOwnEntry
-          ? `<button class="btn btn-secondary flex-1" id="detail-confirm"><svg class="ph-icon" aria-hidden="true" style="color:var(--c-success)"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigen</button>`
+          ? `<button class="btn btn-secondary flex-1" id="detail-confirm"><svg class="ph-icon" aria-hidden="true" class="text-success"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigen</button>`
           : ''}
         <button class="btn btn-secondary flex-1" id="detail-show-map">🗺️ Auf Karte</button>
         ${isOwnEntry || isAdmin
@@ -472,7 +472,7 @@ window.Page_poison = (() => {
         <div class="form-group">
           <label class="form-label">
             Beschreibung
-            <span style="color:var(--c-text-secondary)">(optional)</span>
+            <span class="text-secondary">(optional)</span>
           </label>
           <textarea class="form-control" name="beschreibung" rows="3"
                     placeholder="z. B. Wurstköder mit Nadeln, liegt beim Eingang Hundeparkplatz, linke Seite…"></textarea>
@@ -481,7 +481,7 @@ window.Page_poison = (() => {
         <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">
@@ -593,7 +593,7 @@ window.Page_poison = (() => {
       title: 'Danke für deine Meldung!',
       body: `
         <div style="text-align:center;padding:var(--space-2) 0 var(--space-4)">
-          <div style="margin-bottom:var(--space-4)">
+          <div class="mb-4">
             <svg class="ph-icon" aria-hidden="true" style="width:48px;height:48px;color:var(--c-danger)"><use href="/icons/phosphor.svg#siren"></use></svg>
           </div>
           <p style="color:var(--c-text);font-size:var(--text-base);line-height:1.7;margin:0">