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

@@ -173,7 +173,7 @@ window.Page_knigge = (() => {
   // ----------------------------------------------------------
   function _renderVoting() {
     const cards = SZENARIEN.map(s => `
-      <div class="card" style="margin-bottom:var(--space-4)" id="sz-${s.id}">
+      <div class="card mb-4" id="sz-${s.id}">
         <p style="font-weight:var(--weight-semibold);margin:0;padding:var(--space-5) var(--space-5) var(--space-3);line-height:1.5">
           ${_esc(s.frage)}
         </p>
@@ -260,12 +260,12 @@ window.Page_knigge = (() => {
         ? 'var(--c-success, #22c55e)'
         : (isU && !isR ? 'var(--c-danger, #ef4444)' : 'var(--c-border)');
       return `
-        <div style="margin-bottom:var(--space-3)">
+        <div class="mb-3">
           <div style="display:flex;justify-content:space-between;margin-bottom:4px;font-size:var(--text-sm)">
             <span style="color:${isU ? 'var(--c-text)' : 'var(--c-text-secondary)'};font-weight:${isU ? 'var(--weight-semibold)' : 'normal'}">
               ${isU ? UI.icon('arrow-right') + ' ' : ''}${_esc(a.text)}${isR ? ' ' + UI.icon('check') : ''}
             </span>
-            <span style="color:var(--c-text-secondary)">${pct}% (${cnt})</span>
+            <span class="text-secondary">${pct}% (${cnt})</span>
           </div>
           <div style="background:var(--c-surface-2);border-radius:4px;height:8px;overflow:hidden">
             <div style="width:${pct}%;background:${color};height:8px;border-radius:4px;transition:width 0.4s"></div>
@@ -282,7 +282,7 @@ window.Page_knigge = (() => {
       <div style="margin-bottom:var(--space-4);padding:0 var(--space-5)">${bars}</div>
       <div style="background:var(--c-surface-2);border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);line-height:1.5">
         ${badge}
-        <span style="color:var(--c-text-secondary)">${_esc(szenario.erklaerung)}</span>
+        <span class="text-secondary">${_esc(szenario.erklaerung)}</span>
       </div>
     `;
   }
@@ -300,8 +300,8 @@ window.Page_knigge = (() => {
         <textarea id="ki-situation-input" class="form-control"
                   rows="3"
                   placeholder="Beschreibe deine Situation…"
-                  style="margin-bottom:var(--space-3)"></textarea>
-        <button class="btn btn-primary" id="ki-rat-btn" style="width:100%">
+                  class="mb-3"></textarea>
+        <button class="btn btn-primary" id="ki-rat-btn" class="w-full">
           Rat holen ${UI.icon('robot')}
         </button>
         <div id="ki-rat-result" style="margin-top:var(--space-4);display:none"></div>