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

@@ -82,7 +82,7 @@ window.Page_gruender = (() => {
         <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin:0 0 var(--space-4)">
           Unsere Partner treten gegeneinander an — wer bringt die meisten Gründer?
         </p>
-        <div style="display:flex;flex-direction:column;gap:var(--space-2)">
+        <div class="flex-col-gap-2">
           ${d.partners.map((p, i) => {
             const medal = i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : `#${i+1}`;
             const barPct = d.partners[0].uses > 0 ? Math.round((p.uses / d.partners[0].uses) * 100) : 0;
@@ -91,7 +91,7 @@ window.Page_gruender = (() => {
                           padding:var(--space-3);border-radius:var(--radius-md);
                           background:${i === 0 ? 'linear-gradient(135deg,#fef9c3,#fef3c7)' : 'var(--c-surface-2)'}">
                 <div style="font-size:22px;min-width:32px;text-align:center">${medal}</div>
-                <div style="flex:1;min-width:0">
+                <div class="flex-1-min">
                   <div style="font-weight:700;font-size:var(--text-sm)">${_esc(p.label)}</div>
                   <div style="background:var(--c-surface-3,rgba(0,0,0,.08));border-radius:var(--radius-full);
                                height:6px;margin-top:var(--space-1);overflow:hidden">
@@ -131,13 +131,13 @@ window.Page_gruender = (() => {
               <span style="font-size:var(--text-xs);font-weight:800;color:var(--c-text-muted);min-width:28px">
                 #${d.total + i + 1}
               </span>
-              <span style="font-size:var(--text-sm);color:var(--c-text-muted)">frei</span>
+              <span class="text-sm-muted">frei</span>
             </div>
           `).join('')}
         </div>
       </div>` : `
       <div class="by-card" style="padding:var(--space-6);text-align:center">
-        <p style="color:var(--c-text-muted);font-size:var(--text-sm)">
+        <p class="text-sm-muted">
           Noch keine Gründer — sei der Erste!
         </p>
       </div>`}