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

@@ -281,8 +281,8 @@ window.Page_places = (() => {
         </div>
       </div>
       ${place.adresse ? `<p style="color:var(--c-text-secondary);margin-bottom:var(--space-2)">${UI.icon('map-pin')} ${UI.escape(place.adresse)}</p>` : ''}
-      ${place.telefon ? `<p style="margin-bottom:var(--space-2)"><a href="tel:${UI.escape(place.telefon)}" style="color:var(--c-primary)">${UI.icon('phone')} ${UI.escape(place.telefon)}</a></p>` : ''}
-      ${place.website ? `<p style="margin-bottom:var(--space-2)"><a href="${UI.escape(place.website)}" target="_blank" style="color:var(--c-primary)">${UI.icon('arrow-square-out')} ${UI.escape(place.website)}</a></p>` : ''}
+      ${place.telefon ? `<p class="mb-2"><a href="tel:${UI.escape(place.telefon)}" class="text-primary">${UI.icon('phone')} ${UI.escape(place.telefon)}</a></p>` : ''}
+      ${place.website ? `<p class="mb-2"><a href="${UI.escape(place.website)}" target="_blank" class="text-primary">${UI.icon('arrow-square-out')} ${UI.escape(place.website)}</a></p>` : ''}
       ${flags.length ? `<div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)">${flags.map(f => `<span class="places-flag places-flag--detail">${f}</span>`).join('')}</div>` : ''}
       <div id="place-rating-${place.id}"></div>
       <p style="color:var(--c-text-muted);font-size:0.8rem;margin-top:var(--space-4)">
@@ -291,7 +291,7 @@ window.Page_places = (() => {
     `;
 
     const footer = isOwn ? `
-      <button type="button" class="btn btn-secondary" style="width:100%" id="place-detail-edit">Bearbeiten</button>
+      <button type="button" class="btn btn-secondary w-full" id="place-detail-edit">Bearbeiten</button>
       <button type="button" class="btn btn-ghost" style="width:100%;margin-top:var(--space-2)" id="place-detail-close">Schließen</button>
     ` : `
       <button type="button" class="btn btn-primary flex-1" id="place-detail-close">Schließen</button>
@@ -348,24 +348,24 @@ window.Page_places = (() => {
         </div>
 
         <div class="form-group">
-          <label class="form-label">Adresse <span style="color:var(--c-text-secondary)">(optional)</span></label>
+          <label class="form-label">Adresse <span class="text-secondary">(optional)</span></label>
           <input class="form-control" type="text" name="adresse"
                  value="${UI.escape(place?.adresse || '')}" placeholder="Musterstraße 1, 12345 Musterstadt">
         </div>
 
         <div class="form-group">
-          <label class="form-label">Website <span style="color:var(--c-text-secondary)">(optional)</span></label>
+          <label class="form-label">Website <span class="text-secondary">(optional)</span></label>
           <input class="form-control" type="url" name="website"
                  value="${UI.escape(place?.website || '')}" placeholder="https://…">
         </div>
 
         <div class="form-group">
-          <label class="form-label">Telefon <span style="color:var(--c-text-secondary)">(optional)</span></label>
+          <label class="form-label">Telefon <span class="text-secondary">(optional)</span></label>
           <input class="form-control" type="tel" name="telefon"
                  value="${UI.escape(place?.telefon || '')}" placeholder="+49 89 123456">
         </div>
 
-        <div class="form-group" style="display:flex;flex-direction:column;gap:var(--space-2)">
+        <div class="form-group flex-col-gap-2">
           <label class="form-label">Hundefreundlichkeit</label>
           <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
             <input type="checkbox" name="hund_rein" ${place?.hund_rein ? 'checked' : ''}>
@@ -386,10 +386,10 @@ window.Page_places = (() => {
 
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
-        <button type="submit" form="place-form" class="btn btn-primary" style="width:100%">
+        <button type="submit" form="place-form" class="btn btn-primary w-full">
           ${isEdit ? 'Speichern' : 'Ort hinzufügen'}
         </button>
-        <div style="display:flex;gap:var(--space-2)">
+        <div class="flex-gap-2">
           ${isEdit ? `<button type="button" class="btn btn-danger" id="place-form-delete">Löschen</button>` : ''}
           <button type="button" class="btn btn-secondary flex-1" id="place-form-cancel">Abbrechen</button>
         </div>