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

@@ -51,12 +51,12 @@ window.Page_friends = (() => {
             <div>
               <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                            color:var(--c-text)">Dein Freundes-Link</div>
-              <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
+              <div class="text-xs-secondary">
                 Teile ihn — der andere tippt drauf und findet dich sofort.
               </div>
             </div>
           </div>
-          <div style="display:flex;gap:var(--space-2)">
+          <div class="flex-gap-2">
             <div style="flex:1;padding:var(--space-2) var(--space-3);
                         background:var(--c-surface-2);border-radius:var(--radius-md);
                         font-size:var(--text-xs);color:var(--c-text-secondary);
@@ -392,10 +392,10 @@ window.Page_friends = (() => {
                           font-size:var(--text-sm);flex-shrink:0">
                 ${_esc((r.addressee_name || '?')[0].toUpperCase())}
               </div>
-              <div style="flex:1">
+              <div class="flex-1">
                 <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                              color:var(--c-text)">${_esc(r.addressee_name)}</div>
-                <div style="font-size:var(--text-xs);color:var(--c-text-muted)">Anfrage ausstehend</div>
+                <div class="text-xs-muted">Anfrage ausstehend</div>
               </div>
               <button class="btn btn-ghost btn-sm"
                       onclick="Page_friends._cancel(${r.id})" title="Zurückziehen">
@@ -480,7 +480,7 @@ window.Page_friends = (() => {
           ${_userAvatar(f.friend_name, dogs[0], f.avatar_url)}
 
           <!-- Name + Infos + Hunde -->
-          <div style="flex:1;min-width:0">
+          <div class="flex-1-min">
             <div style="display:flex;align-items:center;flex-wrap:wrap;gap:2px;
                          margin-bottom:var(--space-1)">
               <span style="font-weight:var(--weight-semibold);color:var(--c-text)">
@@ -495,7 +495,7 @@ window.Page_friends = (() => {
                 ? `<div style="display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center">
                      ${_dogPills(dogs, 3)}
                    </div>`
-                : `<div style="font-size:var(--text-xs);color:var(--c-text-muted)">Noch kein Hund eingetragen</div>`
+                : `<div class="text-xs-muted">Noch kein Hund eingetragen</div>`
               }
             </div>
           </div>
@@ -536,7 +536,7 @@ window.Page_friends = (() => {
       <div style="display:flex;gap:var(--space-2);margin-top:var(--space-3);
                   padding-top:var(--space-3);border-top:1px solid var(--c-border)">
         ${withPhotos.slice(0, 4).map(d => `
-          <div style="text-align:center">
+          <div class="text-center">
             <img src="${_esc(d.foto_url)}" alt="${_esc(d.name)}"
                  style="width:44px;height:44px;border-radius:50%;object-fit:cover;
                         border:2px solid var(--c-surface)">
@@ -558,7 +558,7 @@ window.Page_friends = (() => {
       ? `<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
                      gap:var(--space-3);margin-top:var(--space-4)">
            ${dogs.map(d => `
-             <div style="text-align:center">
+             <div class="text-center">
                ${d.foto_url
                  ? `<img src="${_esc(d.foto_url)}" alt="${_esc(d.name)}"
                          style="width:72px;height:72px;border-radius:50%;object-fit:cover;
@@ -571,7 +571,7 @@ window.Page_friends = (() => {
                <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                             color:var(--c-text)">${_esc(d.name)}</div>
                ${d.rasse
-                 ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(d.rasse)}</div>`
+                 ? `<div class="text-xs-secondary">${_esc(d.rasse)}</div>`
                  : ''}
              </div>
            `).join('')}
@@ -589,7 +589,7 @@ window.Page_friends = (() => {
         </div>`);
       }
       if (profile.erfahrung && _erfahrungBadge[profile.erfahrung]) {
-        parts.push(`<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
+        parts.push(`<div class="text-sm-secondary">
           ${_erfahrungBadge[profile.erfahrung]}
         </div>`);
       }
@@ -602,7 +602,7 @@ window.Page_friends = (() => {
       if (profile.social_link) {
         parts.push(`<div style="font-size:var(--text-xs);word-break:break-all">
           <a href="${_esc(profile.social_link)}" target="_blank" rel="noopener noreferrer"
-             style="color:var(--c-primary)">${_esc(profile.social_link)}</a>
+             class="text-primary">${_esc(profile.social_link)}</a>
         </div>`);
       }
       if (!parts.length) return '';
@@ -638,7 +638,7 @@ window.Page_friends = (() => {
           Nachricht schreiben
         </button>
         <button class="btn btn-ghost" id="modal-remove-btn" form=""
-                style="color:var(--c-danger)">
+                class="text-danger">
           <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user-minus"></use></svg>
           Entfernen
         </button>
@@ -679,7 +679,7 @@ window.Page_friends = (() => {
                         padding:var(--space-3) var(--space-4);
                         ${i < results.length - 1 ? 'border-bottom:1px solid var(--c-border)' : ''}">
               ${_userAvatar(u.name, null, u.avatar_url)}
-              <div style="flex:1;min-width:0">
+              <div class="flex-1-min">
                 <div style="display:flex;align-items:center;flex-wrap:wrap;gap:4px;
                              margin-bottom:2px">
                   <span style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
@@ -817,7 +817,7 @@ window.Page_friends = (() => {
 
   function _wohnortLine(wohnort) {
     if (!wohnort) return '';
-    return `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">📍 ${_esc(wohnort)}</span>`;
+    return `<span class="text-xs-muted">📍 ${_esc(wohnort)}</span>`;
   }
 
   function _bioLine(bio, sichtbarkeit) {