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

@@ -14,7 +14,7 @@ window.Page_laeufi = (() => {
     _appState  = appState;
     if (!appState.user || !['breeder','admin'].includes(appState.user.rolle)) {
       _container.innerHTML = `<div style="text-align:center;padding:var(--space-10)">
-        <p style="color:var(--c-text-secondary)">Nur für verifizierte Züchter.</p></div>`;
+        <p class="text-secondary">Nur für verifizierte Züchter.</p></div>`;
       return;
     }
     API.breeder.status().then(s => {
@@ -53,7 +53,7 @@ window.Page_laeufi = (() => {
                   padding:var(--space-3) var(--space-4);
                   display:flex;align-items:center;gap:var(--space-3)">
         ${logoHtml}
-        <div style="flex:1;min-width:0">
+        <div class="flex-1-min">
           <h2 style="margin:0 0 2px;font-size:var(--text-lg);font-weight:700;
                      color:var(--c-text);white-space:nowrap;overflow:hidden;
                      text-overflow:ellipsis;line-height:1.2">${UI.escape(zwinger)}</h2>
@@ -61,7 +61,7 @@ window.Page_laeufi = (() => {
             <svg style="width:11px;height:11px;color:var(--c-primary);flex-shrink:0" viewBox="0 0 256 256">
               <use href="/icons/phosphor.svg#lock-key"></use>
             </svg>
-            <span style="font-size:var(--text-xs);color:var(--c-text-secondary)">Privater Bereich · Nur du siehst das</span>
+            <span class="text-xs-secondary">Privater Bereich · Nur du siehst das</span>
           </div>
         </div>
       </div>`;
@@ -89,7 +89,7 @@ window.Page_laeufi = (() => {
       _renderHundeList();
     } catch (err) {
       document.getElementById('laeufi-list').innerHTML =
-        `<p style="color:var(--c-danger)">${UI.escape(err.message || 'Fehler')}</p>`;
+        `<p class="text-danger">${UI.escape(err.message || 'Fehler')}</p>`;
     }
   }
 
@@ -129,22 +129,22 @@ window.Page_laeufi = (() => {
         <div id="laeufi-toggle-${h.id}"
              style="padding:var(--space-4);display:flex;align-items:center;gap:var(--space-3);
                     cursor:pointer;user-select:none">
-          <div style="flex:1;min-width:0">
+          <div class="flex-1-min">
             <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap">
               <span style="font-size:var(--text-base);font-weight:700">${UI.escape(h.name)}</span>
-              ${h.rufname ? `<span style="color:var(--c-text-muted);font-size:var(--text-sm)">"${UI.escape(h.rufname)}"</span>` : ''}
-              ${alter ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">${alter}</span>` : ''}
+              ${h.rufname ? `<span class="text-sm-muted">"${UI.escape(h.rufname)}"</span>` : ''}
+              ${alter ? `<span class="text-xs-muted">${alter}</span>` : ''}
             </div>
             ${h.rasse_text || h.farbe ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">
               ${[h.rasse_text, h.farbe].filter(Boolean).map(s => UI.escape(s)).join(' · ')}
             </div>` : ''}
           </div>
-          <span style="color:var(--c-text-muted)">${UI.icon('caret-down')}</span>
+          <span class="text-muted">${UI.icon('caret-down')}</span>
         </div>
         <div id="laeufi-detail-${h.id}" style="display:none;border-top:1px solid var(--c-border)">
           <div id="laeufi-content-${h.id}"
-               style="padding:var(--space-4)">
-            <p style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt…</p>
+               class="p-4">
+            <p class="text-sm-muted">Lädt…</p>
           </div>
         </div>
       </div>`;
@@ -177,7 +177,7 @@ window.Page_laeufi = (() => {
       ]);
       _renderHundContent(el, hundId, laeufiList, deckList);
     } catch (err) {
-      el.innerHTML = `<p style="color:var(--c-danger)">${UI.escape(err.message || 'Fehler')}</p>`;
+      el.innerHTML = `<p class="text-danger">${UI.escape(err.message || 'Fehler')}</p>`;
     }
   }
 
@@ -270,11 +270,11 @@ window.Page_laeufi = (() => {
     return list.map(l => `
       <div style="background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);
                   padding:var(--space-3);margin-bottom:var(--space-2);display:flex;gap:var(--space-3);align-items:flex-start">
-        <div style="flex:1;min-width:0">
+        <div class="flex-1-min">
           <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap">
             <span style="font-weight:600;font-size:var(--text-sm)">${_fmtDate(l.beginn)}</span>
-            ${l.ende ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">→ ${_fmtDate(l.ende)}</span>
-              <span style="font-size:var(--text-xs);color:var(--c-text-muted)">${_daysDiff(l.beginn, l.ende)} Tage</span>` : ''}
+            ${l.ende ? `<span class="text-xs-muted">→ ${_fmtDate(l.ende)}</span>
+              <span class="text-xs-muted">${_daysDiff(l.beginn, l.ende)} Tage</span>` : ''}
           </div>
           ${l.notiz ? `<p style="font-size:var(--text-xs);color:var(--c-text-secondary);margin:var(--space-1) 0 0;font-style:italic">${UI.escape(l.notiz)}</p>` : ''}
         </div>
@@ -286,7 +286,7 @@ window.Page_laeufi = (() => {
             ${UI.icon('pencil-simple')}
           </button>
           <button class="btn btn-ghost btn-xs laeufi-delete-btn" data-id="${l.id}"
-                  title="Löschen" style="color:var(--c-danger)">
+                  title="Löschen" class="text-danger">
             ${UI.icon('trash')}
           </button>
         </div>
@@ -314,7 +314,7 @@ window.Page_laeufi = (() => {
                     margin-bottom:var(--space-3);overflow:hidden">
           <!-- Deck-Header -->
           <div style="padding:var(--space-3);display:flex;gap:var(--space-3);align-items:flex-start">
-            <div style="flex:1;min-width:0">
+            <div class="flex-1-min">
               <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-1)">
                 <span style="font-weight:700;font-size:var(--text-sm)">${UI.icon('heart')} Deckung ${_fmtDate(d.deckdatum)}</span>
                 <span style="background:${tc.color}1a;color:${tc.color};border:1px solid ${tc.color}30;
@@ -335,7 +335,7 @@ window.Page_laeufi = (() => {
             </div>
             <div style="display:flex;gap:var(--space-1);flex-shrink:0">
               <button class="btn btn-ghost btn-xs deck-edit-btn" data-id="${d.id}" title="Bearbeiten">${UI.icon('pencil-simple')}</button>
-              <button class="btn btn-ghost btn-xs deck-delete-btn" data-id="${d.id}" title="Löschen" style="color:var(--c-danger)">${UI.icon('trash')}</button>
+              <button class="btn btn-ghost btn-xs deck-delete-btn" data-id="${d.id}" title="Löschen" class="text-danger">${UI.icon('trash')}</button>
             </div>
           </div>
           <!-- Meilensteine -->
@@ -358,7 +358,7 @@ window.Page_laeufi = (() => {
                            color:${m.vorbei ? 'white' : 'var(--c-text-muted)'};font-size:9px">
                 ${m.vorbei ? '✓' : m.tag}
               </span>
-              <span style="color:var(--c-text-secondary)">${_fmtDate(m.datum)}</span>
+              <span class="text-secondary">${_fmtDate(m.datum)}</span>
               <span style="color:${m.vorbei ? 'var(--c-text-muted)' : 'var(--c-text)'};font-weight:${m.vorbei ? '400' : '600'}">
                 ${UI.escape(m.label)}
               </span>
@@ -377,8 +377,8 @@ window.Page_laeufi = (() => {
     UI.modal.open({
       title: isEdit ? 'Läufigkeit bearbeiten' : 'Läufigkeit eintragen',
       body: `
-        <form id="laeufi-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+        <form id="laeufi-form" class="flex-col-gap-3">
+          <div class="grid-2">
             <div class="form-group">
               <label class="form-label">Beginn *</label>
               <input class="form-control" type="date" name="beginn" required value="${v.beginn || today}">
@@ -421,8 +421,8 @@ window.Page_laeufi = (() => {
     UI.modal.open({
       title: isEdit ? 'Deckung bearbeiten' : 'Deckung eintragen',
       body: `
-        <form id="deck-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+        <form id="deck-form" class="flex-col-gap-3">
+          <div class="grid-2">
             <div class="form-group">
               <label class="form-label">Deckdatum *</label>
               <input class="form-control" type="date" name="deckdatum" required value="${v.deckdatum || today}">
@@ -435,7 +435,7 @@ window.Page_laeufi = (() => {
               </select>
             </div>
           </div>
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+          <div class="grid-2">
             <div class="form-group">
               <label class="form-label">Rüde</label>
               <input class="form-control" name="ruede_name" placeholder="Name des Deckrüden"
@@ -451,7 +451,7 @@ window.Page_laeufi = (() => {
               </select>
             </div>
           </div>
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+          <div class="grid-2">
             <div class="form-group">
               <label class="form-label">Trächtigkeitsstatus</label>
               <select class="form-control" name="traechtig">
@@ -503,7 +503,7 @@ window.Page_laeufi = (() => {
   async function _showProgModal(hundId, laeufi) {
     UI.modal.open({
       title: `Progesterontests — ${_fmtDate(laeufi.beginn)}`,
-      body: `<div id="prog-modal-content"><p style="color:var(--c-text-muted)">Lädt…</p></div>`,
+      body: `<div id="prog-modal-content"><p class="text-muted">Lädt…</p></div>`,
       footer: `
         <button class="btn btn-secondary" onclick="UI.modal.close()">Schließen</button>
         <button class="btn btn-primary" id="prog-add-btn">${UI.icon('plus')} Test eintragen</button>`,
@@ -535,7 +535,7 @@ window.Page_laeufi = (() => {
         <tbody>
           ${tests.map(t => `
             <tr style="border-top:1px solid var(--c-border)">
-              <td style="padding:var(--space-2)">${_fmtDate(t.datum)}</td>
+              <td class="p-2">${_fmtDate(t.datum)}</td>
               <td style="text-align:right;padding:var(--space-2);font-weight:600">
                 ${t.wert != null ? `${t.wert} ${UI.escape(t.einheit)}` : '—'}
                 ${t.wert != null ? `<span style="font-size:10px;margin-left:4px;color:var(--c-text-muted)">${_progEinschaetzung(t.wert, t.einheit)}</span>` : ''}
@@ -543,7 +543,7 @@ window.Page_laeufi = (() => {
               <td style="padding:var(--space-2);color:var(--c-text-secondary)">${t.labor ? UI.escape(t.labor) : '—'}</td>
               <td style="padding:var(--space-2);text-align:right">
                 <button class="btn btn-ghost btn-xs prog-delete-btn" data-id="${t.id}"
-                        style="color:var(--c-danger)">${UI.icon('trash')}</button>
+                        class="text-danger">${UI.icon('trash')}</button>
               </td>
             </tr>`).join('')}
         </tbody>
@@ -572,8 +572,8 @@ window.Page_laeufi = (() => {
     UI.modal.open({
       title: 'Progesterontest eintragen',
       body: `
-        <form id="prog-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+        <form id="prog-form" class="flex-col-gap-3">
+          <div class="grid-2">
             <div class="form-group">
               <label class="form-label">Datum *</label>
               <input class="form-control" type="date" name="datum" required value="${today}">
@@ -586,7 +586,7 @@ window.Page_laeufi = (() => {
               </select>
             </div>
           </div>
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+          <div class="grid-2">
             <div class="form-group">
               <label class="form-label">Wert</label>
               <input class="form-control" type="number" step="0.01" name="wert" placeholder="z.B. 8.5">