Sprint 7: Gassi-Treffen — Meetup-Feature komplett

- Backend: walks.py mit allen Endpoints (CRUD, join/leave, Haversine-Filter)
- DB: walks, walk_participants, walk_participant_dogs Tabellen (bereits in database.py)
- Frontend: walks.js — Liste/Karte-Toggle, Heute/Demnächst-Gruppierung, Detail-Modal
  mit Teilnehmerliste, Beitreten/Verlassen, Erstellen/Bearbeiten-Formulare
- CSS: Walks-Komponenten (Card, Date-Badge, Spots-Anzeige, Map-View)
- api.js: walks-Abschnitt (list, get, create, update, cancel, join, leave)
- SW-Cache: by-v20 → by-v21

backend/static/css/components.css

@@ -1619,3 +1619,124 @@ textarea.form-control {
   align-items:   center;
   justify-content: center;
 }
+
+/* ------------------------------------------------------------
+   GASSI-TREFFEN (walks.js)
+   ------------------------------------------------------------ */
+.walks-toolbar {
+  display:     flex;
+  align-items: center;
+  gap:         var(--space-2);
+  padding:     var(--space-3) var(--space-4);
+  background:  var(--c-surface);
+  border-bottom: 1px solid var(--c-border);
+  flex-shrink: 0;
+}
+.walks-view-toggle {
+  display:       flex;
+  gap:           var(--space-1);
+  background:    var(--c-bg);
+  border-radius: var(--radius-md);
+  padding:       2px;
+  border:        1px solid var(--c-border);
+}
+.walks-view-btn {
+  padding:       var(--space-1) var(--space-3);
+  border-radius: var(--radius-sm);
+  border:        none;
+  background:    transparent;
+  color:         var(--c-text-secondary);
+  font-size:     var(--text-sm);
+  cursor:        pointer;
+  transition:    all 0.15s;
+}
+.walks-view-btn.active {
+  background: var(--c-surface);
+  color:      var(--c-text);
+  box-shadow: var(--shadow-xs);
+}
+.walks-list {
+  flex:       1;
+  overflow-y: auto;
+  padding:    var(--space-4);
+  display:    flex;
+  flex-direction: column;
+  gap:        var(--space-3);
+}
+.walks-section-label {
+  font-size:   var(--text-sm);
+  font-weight: var(--weight-semibold);
+  color:       var(--c-text-secondary);
+  padding:     var(--space-1) 0;
+  margin-bottom: var(--space-1);
+}
+.walks-card {
+  background:    var(--c-surface);
+  border-radius: var(--radius-lg);
+  border:        1px solid var(--c-border);
+  padding:       var(--space-4);
+  display:       grid;
+  grid-template-columns: 56px 1fr auto;
+  gap:           var(--space-3);
+  cursor:        pointer;
+  transition:    box-shadow 0.15s;
+  box-shadow:    var(--shadow-xs);
+}
+.walks-card:hover { box-shadow: var(--shadow-md); }
+.walks-card.today  { border-left: 3px solid var(--c-amber,  #f59e0b); }
+.walks-card.full   { opacity: 0.6; }
+.walks-date-badge {
+  display:         flex;
+  flex-direction:  column;
+  align-items:     center;
+  justify-content: center;
+  background:      var(--c-bg);
+  border-radius:   var(--radius-md);
+  padding:         var(--space-1) var(--space-2);
+  min-width:       52px;
+}
+.walks-date-badge .day   { font-size: var(--text-xs); color: var(--c-text-secondary); }
+.walks-date-badge .num   { font-size: 1.5rem; font-weight: var(--weight-bold); line-height: 1.1; }
+.walks-date-badge .month { font-size: var(--text-xs); color: var(--c-text-secondary); }
+.walks-date-badge.today-badge .num { color: var(--c-amber, #f59e0b); }
+.walks-card-body { min-width: 0; }
+.walks-card-title {
+  font-weight: var(--weight-semibold);
+  white-space: nowrap;
+  overflow:    hidden;
+  text-overflow: ellipsis;
+}
+.walks-card-meta {
+  font-size: var(--text-sm);
+  color:     var(--c-text-secondary);
+  margin-top: var(--space-1);
+}
+.walks-card-side {
+  display:        flex;
+  flex-direction: column;
+  align-items:    flex-end;
+  gap:            var(--space-1);
+}
+.walks-spots {
+  font-size:   var(--text-xs);
+  font-weight: var(--weight-semibold);
+  color:       var(--c-success);
+  white-space: nowrap;
+}
+.walks-spots.full  { color: var(--c-text-muted); }
+.walks-spots.today { color: var(--c-amber, #f59e0b); }
+.walks-map {
+  flex:     1;
+  position: relative;
+}
+.walks-participant {
+  display:     flex;
+  align-items: center;
+  gap:         var(--space-2);
+  padding:     var(--space-2) 0;
+  border-bottom: 1px solid var(--c-border);
+  font-size:   var(--text-sm);
+}
+.walks-participant:last-child { border-bottom: none; }
+.walks-participant-name { font-weight: var(--weight-semibold); }
+.walks-participant-dogs { color: var(--c-text-secondary); }