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/css/components.css

@@ -235,6 +235,45 @@
   color:        var(--c-primary);
 }
 
+/* ----- .by-tabs Modifier-Varianten ----------------------------- */
+
+/* Grid-Layout (Admin/Health/Übungen — Desktop oft 2-3 Spalten) */
+.by-tabs.grid {
+  display: grid;
+  grid-template-columns: repeat(var(--tab-cols, 4), minmax(0, 1fr));
+  overflow: visible;
+  gap: var(--space-2);
+}
+
+/* Flex-Wrap (Zuchthunde — Buttons brechen um statt zu scrollen) */
+.by-tabs.wrap {
+  flex-wrap: wrap;
+  overflow-x: visible;
+}
+
+/* Separated — eigener Hintergrund + Border (Sitting) */
+.by-tabs.separated {
+  padding: var(--space-3) var(--space-4) var(--space-2);
+  border-bottom: 1px solid var(--c-border);
+  background: var(--c-surface);
+}
+
+/* Sticky (Admin Desktop vertikal) — nur ab 1024px */
+@media (min-width: 1024px) {
+  .by-tabs.sticky {
+    position: sticky;
+    top: var(--space-3);
+    flex-direction: column;
+    width: 190px;
+    gap: var(--space-1);
+  }
+  .by-tabs.sticky .by-tab {
+    justify-content: flex-start;
+    text-align: left;
+    padding: var(--space-2) var(--space-3);
+  }
+}
+
 /* ------------------------------------------------------------
    4. BY-SECTION-LABEL + BY-TOOLBAR — weitere gemeinsame Elemente
    ------------------------------------------------------------ */

backend/static/css/utilities.css

@@ -0,0 +1,65 @@
+/* ============================================================
+   BAN YARO — Utility-Klassen für häufige Inline-Patterns
+   Ergänzt design-system.css (Single-Property-Utilities sind dort)
+   ============================================================ */
+
+/* ------------------------------------------------------------
+   Text + Farb-Kombinationen (häufigste Inline-Patterns)
+   ------------------------------------------------------------ */
+.text-xs-muted     { font-size: var(--text-xs); color: var(--c-text-muted); }
+.text-xs-secondary { font-size: var(--text-xs); color: var(--c-text-secondary); }
+.text-sm-muted     { font-size: var(--text-sm); color: var(--c-text-muted); }
+.text-sm-secondary { font-size: var(--text-sm); color: var(--c-text-secondary); }
+
+/* Caption = Mini-Label/Hinweis unter einem Wert */
+.caption {
+  font-size: var(--text-xs);
+  color:     var(--c-text-secondary);
+  margin-top: 2px;
+}
+
+/* ------------------------------------------------------------
+   Flex-Layouts (kombiniert)
+   ------------------------------------------------------------ */
+.flex-gap-2     { display: flex; gap: var(--space-2); }
+.flex-gap-3     { display: flex; gap: var(--space-3); }
+.flex-col-gap-2 { display: flex; flex-direction: column; gap: var(--space-2); }
+.flex-col-gap-3 { display: flex; flex-direction: column; gap: var(--space-3); }
+.flex-col-gap-4 { display: flex; flex-direction: column; gap: var(--space-4); }
+
+.flex-center        { display: flex; align-items: center; }
+.flex-center-gap-1  { display: flex; align-items: center; gap: var(--space-1); }
+.flex-center-gap-2  { display: flex; align-items: center; gap: var(--space-2); }
+.flex-center-gap-3  { display: flex; align-items: center; gap: var(--space-3); }
+
+.flex-between       { display: flex; align-items: center; justify-content: space-between; }
+.flex-between-gap-2 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
+
+/* min-width:0 + flex:1 — verhindert Overflow in Flex-Children */
+.flex-1-min { flex: 1; min-width: 0; }
+
+/* ------------------------------------------------------------
+   Spacing-Lücken in design-system.css füllen
+   ------------------------------------------------------------ */
+.mb-1 { margin-bottom: var(--space-1); }
+.mb-3 { margin-bottom: var(--space-3); }
+.mt-1 { margin-top: var(--space-1); }
+.mt-3 { margin-top: var(--space-3); }
+
+/* ------------------------------------------------------------
+   Icon-Größen (statt width:NNpx;height:NNpx inline)
+   ------------------------------------------------------------ */
+.icon-xs { width: 12px; height: 12px; }
+.icon-sm { width: 14px; height: 14px; }
+.icon-md { width: 18px; height: 18px; }
+.icon-lg { width: 22px; height: 22px; }
+
+/* ------------------------------------------------------------
+   Form-Helper
+   ------------------------------------------------------------ */
+.label-block {
+  display:       block;
+  font-size:     var(--text-sm);
+  font-weight:   600;
+  margin-bottom: var(--space-1);
+}