Feature: Gesundheit Multi-Media — health_media Tabelle + Multi-Upload UI

- Neue Tabelle health_media (Migration in database.py) analog zu diary_media
- GET-Endpoints geben media_items:[{id,url,media_type}] zurück (datei_url bleibt für Rückwärtskompatibilität)
- POST /health/{id}/media und DELETE /health/{id}/media/{media_id} Endpoints
- Multi-Upload-Bereich im Formular: Thumbnails für Bilder, PDF-Icon, X-Button zum Entfernen
- Galerie in Detailansicht: Bilder klickbar/zoombar, PDFs als Link
- CSS-Klassen health-media-grid/thumb/gallery in components.css
- SW by-v213, APP_VER 187

backend/static/css/components.css

@@ -1419,6 +1419,104 @@ html.modal-open {
   flex-shrink:   0;
 }
 
+/* Health Multi-Media — Upload-Grid im Formular */
+.health-media-grid {
+  display:   flex;
+  flex-wrap: wrap;
+  gap:       var(--space-2);
+  margin-bottom: var(--space-1);
+}
+.health-media-thumb {
+  position:      relative;
+  width:         72px;
+  height:        72px;
+  border-radius: var(--radius-md);
+  overflow:      hidden;
+  background:    var(--c-surface-2);
+  flex-shrink:   0;
+  border:        1px solid var(--c-border-light);
+}
+.health-media-thumb img {
+  width:      100%;
+  height:     100%;
+  object-fit: cover;
+  display:    block;
+}
+.health-media-thumb-pdf {
+  display:        flex;
+  flex-direction: column;
+  align-items:    center;
+  justify-content: center;
+  width:          100%;
+  height:         100%;
+  gap:            var(--space-1);
+  font-size:      1.4rem;
+  color:          var(--c-text-secondary);
+}
+.health-media-thumb-pdf span {
+  font-size:   var(--text-xs);
+  font-weight: var(--weight-semibold);
+}
+.health-media-remove {
+  position:    absolute;
+  top:         2px;
+  right:       2px;
+  width:       20px;
+  height:      20px;
+  border-radius: 50%;
+  background:  rgba(0,0,0,0.55);
+  color:       #fff;
+  border:      none;
+  font-size:   14px;
+  line-height: 1;
+  cursor:      pointer;
+  display:     flex;
+  align-items: center;
+  justify-content: center;
+  padding:     0;
+}
+.health-media-thumb--pending {
+  opacity: 0.75;
+  border-style: dashed;
+}
+.health-media-thumb--pending small {
+  position:   absolute;
+  bottom:     2px;
+  left:       2px;
+  right:      2px;
+  font-size:  9px;
+  text-align: center;
+  color:      var(--c-text-muted);
+  overflow:   hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Health Media-Galerie in Detail-Modal */
+.health-media-gallery {
+  display:   flex;
+  flex-wrap: wrap;
+  gap:       var(--space-2);
+}
+.health-media-gallery-img {
+  display:       block;
+  width:         calc(50% - var(--space-1));
+  max-width:     160px;
+  border-radius: var(--radius-md);
+  overflow:      hidden;
+  flex-shrink:   0;
+}
+.health-media-gallery-img img {
+  width:      100%;
+  height:     100px;
+  object-fit: cover;
+  display:    block;
+  border-radius: var(--radius-md);
+}
+.health-media-gallery-pdf {
+  align-self: flex-start;
+}
+
 /* Detail-Dialog DL */
 .health-detail-dl {
   display:               grid;