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

@@ -84,8 +84,8 @@ window.Page_wetter = (() => {
     _container.innerHTML = `
       <div id="wttr-body">
         <div style="text-align:center;padding:var(--space-10) var(--space-4)">
-          <div style="margin-bottom:var(--space-3)">${_wmoIcon(2, '2.5rem')}</div>
-          <p style="color:var(--c-text-secondary)">Standort wird ermittelt…</p>
+          <div class="mb-3">${_wmoIcon(2, '2.5rem')}</div>
+          <p class="text-secondary">Standort wird ermittelt…</p>
         </div>
       </div>
     `;
@@ -198,7 +198,7 @@ window.Page_wetter = (() => {
         </div>
 
         <!-- CTAs -->
-        <div style="display:flex;flex-direction:column;gap:var(--space-3)">
+        <div class="flex-col-gap-3">
           <button class="btn btn-primary" id="wttr-btn-retry"
                   style="display:flex;align-items:center;justify-content:center;gap:var(--space-2)">
             <svg class="ph-icon" style="width:1rem;height:1rem">
@@ -247,7 +247,7 @@ window.Page_wetter = (() => {
       if (body) body.innerHTML = `
         <div style="text-align:center;padding:var(--space-10) var(--space-4)">
           <div style="font-size:2.5rem;margin-bottom:var(--space-3)">⚠️</div>
-          <h3 style="margin-bottom:var(--space-2)">Wetter nicht verfügbar</h3>
+          <h3 class="mb-2">Wetter nicht verfügbar</h3>
           <p style="color:var(--c-text-secondary);margin-bottom:var(--space-5)">
             Die Wetterdaten konnten nicht geladen werden.
           </p>
@@ -287,13 +287,11 @@ window.Page_wetter = (() => {
       </div>
 
       <!-- Detail-Card -->
-      <div id="wttr-detail" class="section-card"
-           style="margin-bottom:var(--space-4)">
+      <div id="wttr-detail" class="section-card mb-4">
       </div>
 
       <!-- Niederschlagswahrscheinlichkeit Zeitskala -->
-      <div id="wttr-rain" class="section-card"
-           style="margin-bottom:var(--space-4)">
+      <div id="wttr-rain" class="section-card mb-4">
       </div>
 
       <!-- Hunde-Wetter -->
@@ -441,7 +439,7 @@ window.Page_wetter = (() => {
 
       <!-- Sonnenaufgang / -untergang -->
       ${sunriseStr && sunsetStr ? `
-      <div style="margin-bottom:var(--space-4)">
+      <div class="mb-4">
         <div style="display:flex;justify-content:space-between;
                     font-size:var(--text-xs);color:var(--c-text-secondary);
                     margin-bottom:var(--space-1)">
@@ -469,18 +467,18 @@ window.Page_wetter = (() => {
         <span style="font-size:1.4rem;transform:rotate(${windDir}deg);display:inline-block;line-height:1">
           ${UI.icon('arrow-up')}
         </span>
-        <div style="flex:1">
+        <div class="flex-1">
           <div style="font-size:var(--text-sm);font-weight:600">
             ${_esc(compass)} · ${Math.round(d.wind_kmh ?? 0)} km/h
           </div>
-          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(bft)}</div>
+          <div class="text-xs-secondary">${_esc(bft)}</div>
         </div>
         ${d.precip_sum != null ? `
-        <div style="text-align:right">
+        <div class="text-right">
           <div style="font-size:var(--text-sm);font-weight:600">
             ${d.precip_sum} mm
           </div>
-          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">Niederschlag</div>
+          <div class="text-xs-secondary">Niederschlag</div>
         </div>` : ''}
       </div>
 
@@ -488,7 +486,7 @@ window.Page_wetter = (() => {
       <div>
         <div style="display:flex;justify-content:space-between;
                     font-size:var(--text-xs);margin-bottom:4px">
-          <span style="color:var(--c-text-secondary)">UV-Index</span>
+          <span class="text-secondary">UV-Index</span>
           <span style="font-weight:600;color:${uvColor}">
             ${d.uv_index ?? 0} — ${_esc(uvLabel)}
           </span>
@@ -670,7 +668,7 @@ window.Page_wetter = (() => {
                     background:${aspColor}1a;border:1px solid ${aspColor}55;
                     margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:1.3rem;height:1.3rem;flex-shrink:0;color:var(--c-primary)"><use href="/icons/phosphor.svg#paw-print"></use></svg>
-          <div style="flex:1">
+          <div class="flex-1">
             <div style="font-weight:600;font-size:var(--text-sm);color:${aspColor}">
               Asphalt ~${Math.round(d.asphalt_temp)}°C — ${_esc(aspText)}
             </div>
@@ -690,7 +688,7 @@ window.Page_wetter = (() => {
                     background:#3b82f61a;border:1px solid #3b82f655;
                     margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:1.3rem;height:1.3rem;color:#38BDF8"><use href="/icons/phosphor.svg#snowflake"></use></svg>
-          <div style="font-size:var(--text-sm)">
+          <div class="text-sm">
             <strong>Kälteschutz für Pfoten:</strong>
             Eis und Streusalz können die Pfoten reizen. Pfotenpflege empfohlen.
           </div>
@@ -706,7 +704,7 @@ window.Page_wetter = (() => {
                     background:#f59e0b1a;border:1px solid #f59e0b55;
                     margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:1.3rem;height:1.3rem;color:#7C3AED"><use href="/icons/phosphor.svg#cloud-lightning"></use></svg>
-          <div style="font-size:var(--text-sm)">
+          <div class="text-sm">
             <strong>Gewitter erwartet:</strong>
             Hunde können auf Gewitter sensibel reagieren. Sichere Umgebung schaffen.
           </div>
@@ -721,7 +719,7 @@ window.Page_wetter = (() => {
         .filter(([, v]) => v != null && v.level > 0);
       if (pollenEntries.length) {
         html += `
-          <div style="margin-bottom:var(--space-3)">
+          <div class="mb-3">
             <div style="font-size:var(--text-xs);font-weight:600;
                         color:var(--c-text-secondary);margin-bottom:var(--space-2)">
               <svg class="ph-icon" style="width:1em;height:1em;vertical-align:-1px;color:#16A34A"><use href="/icons/phosphor.svg#leaf"></use></svg>
@@ -755,7 +753,7 @@ window.Page_wetter = (() => {
                     background:${tickColor}1a;border:1px solid ${tickColor}55;
                     margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:1.3rem;height:1.3rem;color:#92400E"><use href="/icons/phosphor.svg#bug"></use></svg>
-          <div style="flex:1">
+          <div class="flex-1">
             <span style="font-size:var(--text-sm);font-weight:600">Zecken-Risiko: </span>
             <span style="font-size:var(--text-sm);color:${tickColor};font-weight:700">
               ${_esc(tickLabel)}
@@ -788,7 +786,7 @@ window.Page_wetter = (() => {
             <svg class="ph-icon" style="width:1.3rem;height:1.3rem;flex-shrink:0;color:${fellHint.color}">
               <use href="/icons/phosphor.svg#${fellHint.icon}"></use>
             </svg>
-            <div style="font-size:var(--text-sm)">${_esc(fellHint.text)}</div>
+            <div class="text-sm">${_esc(fellHint.text)}</div>
           </div>
         `;
       }
@@ -808,7 +806,7 @@ window.Page_wetter = (() => {
     if (!d.asphalt_temp && !d.paw_cold && !d.thunderstorm
         && !d.zecken && !(pollen && Object.keys(pollen).length)) {
       html += `
-        <p style="font-size:var(--text-sm);color:var(--c-text-secondary)">
+        <p class="text-sm-secondary">
           Keine besonderen Hinweise für heute.
         </p>
       `;
@@ -876,7 +874,7 @@ window.Page_wetter = (() => {
         <span style="font-size:var(--text-2xl);font-weight:900;color:${color};line-height:1">
           ${score}
         </span>
-        <span style="font-size:var(--text-xs);color:var(--c-text-secondary)">/&nbsp;10</span>
+        <span class="text-xs-secondary">/&nbsp;10</span>
         <span style="font-size:var(--text-xs);font-weight:600;color:${color};
                      white-space:nowrap">— ${_esc(text)}</span>
       </div>
@@ -947,7 +945,7 @@ window.Page_wetter = (() => {
                     background:#f59e0b1a;border:1px solid #f59e0b55;
                     margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:1.3rem;height:1.3rem;flex-shrink:0;color:#F59E0B"><use href="/icons/phosphor.svg#baby"></use></svg>
-          <div style="font-size:var(--text-sm)">
+          <div class="text-sm">
             <strong>Welpe</strong> — kurze Spaziergänge, max. 15 Min bei Hitze.
             Gelenke und Pfoten besonders schonen.
           </div>
@@ -961,7 +959,7 @@ window.Page_wetter = (() => {
                     background:#6b7280 1a;border:1px solid #6b728055;
                     margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:1.3rem;height:1.3rem;flex-shrink:0;color:#9CA3AF"><use href="/icons/phosphor.svg#person-simple-walk"></use></svg>
-          <div style="font-size:var(--text-sm)">
+          <div class="text-sm">
             <strong>Seniorhund</strong> — Hitze und Kälte vermeiden, kurze Runden bevorzugen.
             Auf Gelenkbeschwerden achten.
           </div>