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

@@ -164,11 +164,11 @@ window.Page_welcome = (() => {
         ` : ''}
 
         <p class="wc-footer">
-          <a href="/#impressum" style="color:var(--c-text-muted)">Impressum</a>
+          <a href="/#impressum" class="text-muted">Impressum</a>
           &nbsp;·&nbsp;
-          <a href="/#datenschutz" style="color:var(--c-text-muted)">Datenschutz</a>
+          <a href="/#datenschutz" class="text-muted">Datenschutz</a>
           &nbsp;·&nbsp;
-          <a href="/#agb" style="color:var(--c-text-muted)">AGB</a>
+          <a href="/#agb" class="text-muted">AGB</a>
         </p>
       </div>
     `;
@@ -403,7 +403,7 @@ window.Page_welcome = (() => {
                 <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
                 Immer griffbereit — kein App Store
               </div>
-              <div style="padding:var(--space-4)">${_installHTML()}</div>
+              <div class="p-4">${_installHTML()}</div>
             </div>
           ` : ''}
 
@@ -485,16 +485,16 @@ window.Page_welcome = (() => {
     }
     const medals = ['🥇', '🥈', '🥉'];
     return `
-      <div style="display:flex;flex-direction:column;gap:var(--space-2)">
+      <div class="flex-col-gap-2">
         ${rows.map((r, i) => `
           <div style="display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--c-border-subtle)">
             <span style="font-size:1.4rem;width:28px;text-align:center;flex-shrink:0">${medals[i] || (i + 1) + '.'}</span>
             ${r.foto_url
               ? `<img src="${UI.escape(r.foto_url)}" style="width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0" alt="">`
               : `<div style="width:36px;height:36px;border-radius:50%;background:var(--c-primary-subtle);flex-shrink:0"></div>`}
-            <div style="flex:1;min-width:0">
+            <div class="flex-1-min">
               <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${UI.escape(r.dog_name)}</div>
-              <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${UI.escape(r.rasse || '')}${r.user_name ? ' · ' + UI.escape(r.user_name) : ''}</div>
+              <div class="text-xs-secondary">${UI.escape(r.rasse || '')}${r.user_name ? ' · ' + UI.escape(r.user_name) : ''}</div>
             </div>
             <div style="display:flex;align-items:center;gap:4px;flex-shrink:0">
               <span style="font-size:1.1rem">🔥</span>
@@ -1098,7 +1098,7 @@ window.Page_welcome = (() => {
                 style="flex:1;background:var(--c-primary);color:#fff;border:none">
           Android
         </button>
-        <button class="btn btn-sm btn-ghost" id="inst-tab-ios" style="flex:1">
+        <button class="btn btn-sm btn-ghost" id="inst-tab-ios" class="flex-1">
           iPhone / iPad
         </button>
       </div>
@@ -1118,7 +1118,7 @@ window.Page_welcome = (() => {
           </p>
         </div>
       </div>
-      <div id="inst-panel-ios" style="display:none">
+      <div id="inst-panel-ios" class="hidden">
         ${_steps([
           ['arrow-square-in', 'Öffne <strong>banyaro.app</strong> in Safari auf dem iPhone'],
           ['share',           'Tippe auf das <strong>Teilen-Symbol</strong> <svg class="ph-icon" style="width:14px;height:14px;vertical-align:-2px"><use href="/icons/phosphor.svg#share"></use></svg>'],