Feature: Offline-Bereitschafts-Indikator (Pfote im Header), SW by-v1077

- Neue Pfote oben rechts im Header zeigt 5-stufige Offline-Bereitschaft
  (1 Ballen + 4 Zehen, je 20% — grau outline → grün gefüllt)
- 5 Checks: App-Shell · Page-Module · Hund-/Tagebuchdaten · Karten-
  Tiles (≥50) · Foto-Previews
- Klick öffnet Status-Modal mit Checkliste + 'Fehlende nachladen'-
  Button. Lädt aktiv: Page-Module per fetch, API-Daten für aktiven
  Hund, Tile-Cache per SW-Message CACHE_TILES, Diary-Foto-Previews
- Refresh: alle 60s + bei SW CACHE_UPDATE-Message
- Eigene offline-indicator.js (nicht im app.js mit reingequetscht);
  ins STATIC_ASSETS-Precache aufgenommen

backend/static/css/components.css

@@ -8865,3 +8865,51 @@ svg.empty-state-icon {
   overflow: hidden;
   position: relative;
 }
+
+/* ============================================================
+   Offline-Bereitschafts-Indikator (Pfote im Header)
+   5 Pfade — Score 0 (grau) bis 5 (grün, gefüllt)
+   ============================================================ */
+.offline-paw .paw-elem {
+  color: var(--c-text-muted);
+  transition: stroke 0.5s ease, fill 0.5s ease;
+}
+.offline-paw .paw-elem.filled {
+  color: var(--c-success);
+  fill:  var(--c-success);
+}
+#offline-indicator {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+#offline-indicator:hover .paw-elem {
+  opacity: 0.85;
+}
+
+.offline-status-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--c-border-light);
+  font-size: var(--text-sm);
+  margin-bottom: var(--space-2);
+}
+.offline-status-row .osr-check {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 700;
+}
+.offline-status-row.ok    .osr-check { background: var(--c-success); color: #fff; }
+.offline-status-row.miss  .osr-check { background: var(--c-surface-2); color: var(--c-text-muted); border: 1px dashed var(--c-border); }
+.offline-status-row .osr-text { flex: 1; min-width: 0; }
+.offline-status-row .osr-title { font-weight: 600; }
+.offline-status-row .osr-detail { font-size: var(--text-xs); color: var(--c-text-muted); margin-top: 2px; }