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

@@ -270,7 +270,7 @@ window.Page_adoption = (() => {
     content.innerHTML = `
       <div style="text-align:center;padding:var(--space-8) var(--space-4)">
         <div style="font-size:2.5rem;margin-bottom:var(--space-3)">🐾</div>
-        <h3 style="margin-bottom:var(--space-2)">Finde Hunde in deiner Nähe</h3>
+        <h3 class="mb-2">Finde Hunde in deiner Nähe</h3>
         <p style="color:var(--c-text-secondary);margin-bottom:var(--space-5);max-width:320px;margin-inline:auto">
           Erlaube den Zugriff auf deinen Standort oder gib eine PLZ ein, um Tierheim-Hunde
           in deiner Umgebung zu finden.
@@ -339,7 +339,7 @@ window.Page_adoption = (() => {
         </p>
         <a href="https://www.tierheimhelden.de/hunde/liste"
            target="_blank" rel="noopener noreferrer"
-           class="btn btn-secondary" style="font-size:var(--text-sm)">
+           class="btn btn-secondary text-sm">
           ${UI.icon('arrow-square-out')} Tierheimhelden.de — alle Hunde
         </a>
       </div>
@@ -434,7 +434,7 @@ window.Page_adoption = (() => {
       <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-3)">
         ${shelters.length} Tierheim${shelters.length !== 1 ? 'e' : ''} im Umkreis von ${_radius} km
       </p>
-      <div style="display:flex;flex-direction:column;gap:var(--space-2)">
+      <div class="flex-col-gap-2">
         ${shelters.map(s => _shelterRow(s)).join('')}
       </div>
       <div style="margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--c-border)">
@@ -444,12 +444,12 @@ window.Page_adoption = (() => {
         <div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
           <a href="https://www.tierheimhelden.de"
              target="_blank" rel="noopener noreferrer"
-             class="btn btn-secondary btn-sm" style="font-size:var(--text-sm)">
+             class="btn btn-secondary btn-sm text-sm">
             ${UI.icon('arrow-square-out')} Tierheimhelden.de
           </a>
           <a href="https://www.tierschutz.com/tierheimsuche/"
              target="_blank" rel="noopener noreferrer"
-             class="btn btn-secondary btn-sm" style="font-size:var(--text-sm)">
+             class="btn btn-secondary btn-sm text-sm">
             ${UI.icon('magnifying-glass')} tierschutz.com
           </a>
         </div>
@@ -473,12 +473,12 @@ window.Page_adoption = (() => {
                     font-size:1.2rem">
           🏠
         </div>
-        <div style="flex:1;min-width:0">
+        <div class="flex-1-min">
           <div style="font-weight:600;font-size:var(--text-sm);
                       white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
             ${_esc(s.name)}
           </div>
-          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
+          <div class="text-xs-secondary">
             ${_esc(s.plz)} ${_esc(s.stadt)}
           </div>
         </div>
@@ -520,7 +520,7 @@ window.Page_adoption = (() => {
       content.innerHTML = `
         <div style="text-align:center;padding:var(--space-8) var(--space-4)">
           <div style="font-size:2.5rem;margin-bottom:var(--space-3)">🐾</div>
-          <h3 style="margin-bottom:var(--space-2)">Noch keine Hunde zur Weitervermittlung</h3>
+          <h3 class="mb-2">Noch keine Hunde zur Weitervermittlung</h3>
           <p style="color:var(--c-text-secondary);margin-bottom:var(--space-5);max-width:320px;margin-inline:auto">
             Hier können Halter Hunde privat zur Weitervermittlung anbieten —
             zum Beispiel bei Umzug, Krankheit oder Allergie.
@@ -530,7 +530,7 @@ window.Page_adoption = (() => {
               ${UI.icon('plus')} Hund zur Vermittlung anbieten
             </button>
           ` : `
-            <p style="font-size:var(--text-sm);color:var(--c-text-secondary)">
+            <p class="text-sm-secondary">
               Bitte anmelden, um ein Inserat zu erstellen.
             </p>
           `}
@@ -556,8 +556,8 @@ window.Page_adoption = (() => {
 
       ${isLoggedIn && _myListings && _myListings.length ? `
         <div id="adp-my-listings" style="margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--c-border)">
-          <h4 style="margin-bottom:var(--space-3)">Meine Inserate</h4>
-          <div style="display:flex;flex-direction:column;gap:var(--space-2)">
+          <h4 class="mb-3">Meine Inserate</h4>
+          <div class="flex-col-gap-2">
             ${_myListings.map(l => _myListingRow(l)).join('')}
           </div>
         </div>
@@ -714,12 +714,12 @@ window.Page_adoption = (() => {
       <div style="display:flex;align-items:center;gap:var(--space-2);
                   padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
                   background:var(--c-surface-2);border:1px solid var(--c-border)">
-        <div style="flex:1;min-width:0">
+        <div class="flex-1-min">
           <div style="font-weight:600;font-size:var(--text-sm);
                       white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
             ${_esc(l.name)}
           </div>
-          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
+          <div class="text-xs-secondary">
             ${l.interesse_count || 0} Interessent${(l.interesse_count || 0) !== 1 ? 'en' : ''}
           </div>
         </div>
@@ -764,7 +764,7 @@ window.Page_adoption = (() => {
 
     // Interesse bekunden — Modal mit optionaler Nachricht
     const body = `
-      <form id="adp-interest-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
+      <form id="adp-interest-form" class="flex-col-gap-3">
         <p style="color:var(--c-text-secondary);font-size:var(--text-sm)">
           Du kannst optional eine Nachricht an den Anbieter schicken.
         </p>
@@ -816,9 +816,9 @@ window.Page_adoption = (() => {
     }
 
     const body = `
-      <form id="adp-create-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
+      <form id="adp-create-form" class="flex-col-gap-3">
         <div class="form-group">
-          <label class="form-label">Name <span style="color:var(--c-danger)">*</span></label>
+          <label class="form-label">Name <span class="text-danger">*</span></label>
           <input class="form-control" name="name" required placeholder="z.B. Bello">
         </div>
         <div class="form-group">
@@ -857,7 +857,7 @@ window.Page_adoption = (() => {
           </div>
         </div>
         <div class="form-group">
-          <label class="form-label">Beschreibung <span style="color:var(--c-danger)">*</span></label>
+          <label class="form-label">Beschreibung <span class="text-danger">*</span></label>
           <textarea class="form-control" name="beschreibung" rows="4" required minlength="80"
                     placeholder="Erzähle, warum du deinen Hund abgeben musst, und was ihn besonders macht…"></textarea>
           <div style="font-size:10px;color:var(--c-text-muted);margin-top:2px">Mindestens 80 Zeichen</div>
@@ -876,7 +876,7 @@ window.Page_adoption = (() => {
 
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
-        <button type="submit" form="adp-create-form" class="btn btn-primary" style="width:100%" id="adp-create-submit">
+        <button type="submit" form="adp-create-form" class="btn btn-primary w-full" id="adp-create-submit">
           ${UI.icon('plus')} Inserat erstellen
         </button>
         <button type="button" class="btn btn-secondary" onclick="UI.modal.close()">Abbrechen</button>