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

@@ -99,7 +99,7 @@ window.Page_forum = (() => {
           <h2 class="forum-header-title">Forum</h2>
           <div class="forum-header-actions">
             ${isMod ? `<button class="btn btn-ghost btn-sm" id="forum-mod-btn" title="Moderationsberichte">${UI.icon('warning')}</button>` : ''}
-            <button class="btn btn-ghost btn-sm" id="forum-rules-btn" title="Regeln & Netiquette" style="color:var(--c-text-muted)">${UI.icon('info')} Regeln</button>
+            <button class="btn btn-ghost btn-sm" id="forum-rules-btn" title="Regeln & Netiquette" class="text-muted">${UI.icon('info')} Regeln</button>
             <button class="btn btn-primary btn-sm" id="forum-new-btn">${UI.icon('plus')} Neues Thema</button>
           </div>
         </div>
@@ -280,7 +280,7 @@ window.Page_forum = (() => {
            <div class="hdm-kandidaten-search">
              <input type="search" id="hdm-search" class="form-control"
                     placeholder="Name oder Rasse suchen …" autocomplete="off"
-                    style="font-size:var(--text-sm)">
+                    class="text-sm">
            </div>
            <div id="hdm-kandidaten-grid" class="hdm-vote-grid">
              ${UI.skeleton(3)}
@@ -328,8 +328,8 @@ window.Page_forum = (() => {
             <div class="hdm-vote-av">${av}</div>
             <div class="hdm-vote-name">${_esc(dog.name)}</div>
             ${dog.rasse ? `<div class="hdm-vote-rasse">${_esc(dog.rasse)}</div>` : ''}
-            ${vorname ? `<div class="hdm-vote-besitzer" style="font-size:var(--text-xs);color:var(--c-text-muted)">von ${vorname}</div>` : ''}
-            ${dog.stimmen > 0 ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted)">${dog.stimmen} ${UI.icon('star')}</div>` : ''}
+            ${vorname ? `<div class="hdm-vote-besitzer text-xs-muted">von ${vorname}</div>` : ''}
+            ${dog.stimmen > 0 ? `<div class="text-xs-muted">${dog.stimmen} ${UI.icon('star')}</div>` : ''}
             <button class="btn btn-sm ${isVoted ? 'btn-primary' : 'btn-secondary'} hdm-vote-btn"
                     data-dog-id="${dog.id}" ${isVoted ? 'disabled' : ''}>
               ${isVoted ? `${UI.icon('check-circle')} Gewählt` : 'Abstimmen'}
@@ -411,8 +411,8 @@ window.Page_forum = (() => {
       el.innerHTML = `
         <div style="text-align:center;padding:var(--space-10) var(--space-4)">
           <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon('chat-circle-dots')}</div>
-          <p style="color:var(--c-text-secondary)">Noch keine Beiträge in dieser Kategorie.</p>
-          <button class="btn btn-primary" style="margin-top:var(--space-4)" id="forum-first-btn">
+          <p class="text-secondary">Noch keine Beiträge in dieser Kategorie.</p>
+          <button class="btn btn-primary mt-4" id="forum-first-btn">
             Ersten Beitrag erstellen
           </button>
         </div>`;
@@ -493,7 +493,7 @@ window.Page_forum = (() => {
         document.getElementById('forum-main').innerHTML = `
           <div style="text-align:center;padding:var(--space-8)">
             <div style="font-size:2rem;margin-bottom:var(--space-2)">${UI.icon('magnifying-glass')}</div>
-            <p style="color:var(--c-text-secondary)">Keine Ergebnisse für „${_esc(q)}"</p>
+            <p class="text-secondary">Keine Ergebnisse für „${_esc(q)}"</p>
           </div>`;
         return;
       }
@@ -533,7 +533,7 @@ window.Page_forum = (() => {
         <button class="btn btn-ghost btn-sm forum-mod-lock" title="${thread.is_locked ? 'Entsperren' : 'Sperren'}">
           ${UI.icon('lock')} ${thread.is_locked ? 'Entsperren' : 'Sperren'}
         </button>
-        <button class="btn btn-ghost btn-sm forum-mod-delete-thread" style="color:var(--c-danger)">${UI.icon('trash')} Thread</button>
+        <button class="btn btn-ghost btn-sm forum-mod-delete-thread text-danger">${UI.icon('trash')} Thread</button>
       </div>` : '';
 
     const _forumMediaHtml = (u) => {
@@ -565,7 +565,7 @@ window.Page_forum = (() => {
         <div class="forum-reply-actions">
           <label class="btn btn-ghost btn-sm forum-upload-label" title="Foto anhängen">
             ${UI.icon('camera')}
-            <input type="file" accept="image/*" id="forum-reply-file" style="display:none">
+            <input type="file" accept="image/*" id="forum-reply-file" class="hidden">
           </label>
           <div id="forum-reply-previews" class="forum-upload-previews"></div>
         </div>
@@ -862,7 +862,7 @@ window.Page_forum = (() => {
         try {
           await API.forum.deletePost(postId);
           if (postEl) {
-            postEl.innerHTML = '<em style="color:var(--c-text-muted)">Beitrag wurde entfernt</em>';
+            postEl.innerHTML = '<em class="text-muted">Beitrag wurde entfernt</em>';
             postEl.className = 'forum-post forum-post--deleted';
           }
           const idx = _threads.findIndex(t => t.id === threadId);
@@ -1011,16 +1011,16 @@ window.Page_forum = (() => {
                     placeholder="Beschreibe dein Thema ausführlich…" required></textarea>
         </div>
         <div class="form-group">
-          <label class="form-label">Standort <span style="color:var(--c-text-secondary)">(optional)</span></label>
+          <label class="form-label">Standort <span class="text-secondary">(optional)</span></label>
           <div id="forum-location-picker"></div>
         </div>
         <div class="form-group">
           <label class="form-label">Fotos / Dateien (max. 5)</label>
           <div class="forum-upload-area">
             <label class="btn btn-secondary btn-sm" for="forum-thread-files">${UI.icon('image')} Fotos / Video / PDF</label>
-            <input type="file" id="forum-thread-files" accept="image/*,video/*,application/pdf" multiple style="display:none">
+            <input type="file" id="forum-thread-files" accept="image/*,video/*,application/pdf" multiple class="hidden">
           </div>
-          <div id="forum-thread-previews" class="forum-upload-previews" style="margin-top:var(--space-2)"></div>
+          <div id="forum-thread-previews" class="forum-upload-previews mt-2"></div>
         </div>
       </form>
       <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--space-3)">
@@ -1295,14 +1295,14 @@ window.Page_forum = (() => {
       ? `<div class="forum-mod-reports">
           ${reports.map(r => `
             <div class="forum-mod-report-item" data-id="${r.id}">
-              <div style="font-size:var(--text-sm)">
+              <div class="text-sm">
                 <strong>${_esc(r.target_type)} #${r.target_id}</strong>
                 — ${_esc(r.grund)}
               </div>
-              <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+              <div class="text-xs-muted">
                 von ${_esc(r.melder_name || '?')} · ${_fmtDate(r.created_at)}
               </div>
-              <button class="btn btn-sm btn-secondary forum-resolve-btn" data-id="${r.id}" style="margin-top:var(--space-2)">
+              <button class="btn btn-sm btn-secondary forum-resolve-btn" data-id="${r.id}" class="mt-2">
                 ${UI.icon('check')} Erledigt
               </button>
             </div>`).join('')}
@@ -1380,7 +1380,7 @@ window.Page_forum = (() => {
           <textarea class="form-control" name="text" rows="5">${_esc(thread.text || '')}</textarea>
         </div>
         <div class="form-group">
-          <label class="form-label">Standort <span style="color:var(--c-text-secondary)">(optional)</span></label>
+          <label class="form-label">Standort <span class="text-secondary">(optional)</span></label>
           <div id="forum-edit-location-picker"></div>
         </div>
       </form>`,