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

@@ -44,7 +44,7 @@ window.Page_jobs = (() => {
         </div>
 
         <!-- Stellenbeschreibung -->
-        <div class="card" style="margin-bottom:var(--space-4)">
+        <div class="card mb-4">
           <div style="padding:var(--space-5)">
             <h2 style="font-size:var(--text-lg);font-weight:700;margin:0 0 var(--space-4);color:var(--c-primary)">Die Stelle</h2>
             <div style="display:grid;gap:var(--space-3)">
@@ -76,7 +76,7 @@ window.Page_jobs = (() => {
         </div>
 
         <!-- Wen wir suchen -->
-        <div class="card" style="margin-bottom:var(--space-4)">
+        <div class="card mb-4">
           <div style="padding:var(--space-5)">
             <h2 style="font-size:var(--text-lg);font-weight:700;margin:0 0 var(--space-4);color:var(--c-primary)">Wen wir suchen</h2>
             <ul style="margin:0;padding-left:var(--space-5);display:grid;gap:var(--space-2);color:var(--c-text-secondary);font-size:var(--text-sm)">
@@ -121,7 +121,7 @@ window.Page_jobs = (() => {
     const s = statusMap[app.status] || statusMap.pending;
     return `
       <div class="card" style="padding:var(--space-5);text-align:center">
-        <div style="margin-bottom:var(--space-3)">
+        <div class="mb-3">
           <svg class="ph-icon" aria-hidden="true" style="width:48px;height:48px;color:${s.color}"><use href="/icons/phosphor.svg#${s.icon}"></use></svg>
         </div>
         <div style="font-weight:700;color:${s.color};font-size:var(--text-lg);margin-bottom:var(--space-2)">${s.text}</div>
@@ -194,7 +194,7 @@ window.Page_jobs = (() => {
               <label class="form-label">Anhänge (optional)</label>
               <input class="form-control" type="file" name="files" id="jobs-files"
                      multiple accept=".pdf,.jpg,.jpeg,.png,.webp,.mp4,.mov"
-                     style="padding:var(--space-2)">
+                     class="p-2">
               <p style="margin:var(--space-1) 0 0;font-size:var(--text-xs);color:var(--c-text-muted)">
                 Beispiel-Posts, Portfolio, kurzes Video von dir und deinem Hund — max. 3 Dateien, je 10 MB.
                 PDF, Bild oder Video.
@@ -205,7 +205,7 @@ window.Page_jobs = (() => {
               padding:var(--space-3);font-size:var(--text-sm);color:var(--c-text-secondary);
               margin-bottom:var(--space-4)">
               💡 <b>Tipp:</b> Wenn du dich vorher
-              <a href="#" id="jobs-login-link" style="color:var(--c-primary)">anmeldest oder registrierst</a>,
+              <a href="#" id="jobs-login-link" class="text-primary">anmeldest oder registrierst</a>,
               bekommst du sofort den 14-tägigen Luna-Probezugang.
             </div>` : ''}