From de73c7901e925d84bb8fb0937a3c132692821b7b Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Sat, 25 Apr 2026 09:27:19 +0200
Subject: [PATCH] =?UTF-8?q?Wiki:=20Hunde-Silhouette=20als=20Placeholder=20?=
 =?UTF-8?q?f=C3=BCr=20fehlende=20Rassenfotos=20(SW=20by-v362)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- _DOG_SILHOUETTE Phosphor-SVG als Modul-Konstante in wiki.js
- Karten-Fallback zeigt SVG statt UI.icon('dog')
- Detail-Ansicht zeigt 56px SVG + „Kein Foto verfügbar" wenn kein Foto
- CSS: wiki-breed-photo-fallback mit Gradient, neue wiki-detail-photo-placeholder-Klasse
- SW by-v362, APP_VER 347
---
 backend/static/css/components.css | 36 ++++++++++++++++++++++++-------
 backend/static/js/app.js          |  2 +-
 backend/static/js/pages/wiki.js   | 13 +++++++----
 backend/static/sw.js              |  2 +-
 4 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/backend/static/css/components.css b/backend/static/css/components.css
index 33c67d1..3102262 100644
--- a/backend/static/css/components.css
+++ b/backend/static/css/components.css
@@ -4660,15 +4660,35 @@ html.modal-open {
   display:    block;
 }
 .wiki-breed-photo-fallback {
-  font-size:   2.5rem;
-  line-height: 1;
-  display:     flex;
-  align-items: center;
+  display:         flex;
+  align-items:     center;
   justify-content: center;
-  width:       100%;
-  height:      100%;
-  background:  var(--c-bg);
-  color:       var(--c-text-secondary);
+  width:           100%;
+  height:          100%;
+  background:      linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-bg) 100%);
+  color:           var(--c-text-muted);
+  font-size:       2.8rem;
+  line-height:     1;
+}
+.wiki-detail-photo-placeholder {
+  display:         flex;
+  flex-direction:  column;
+  align-items:     center;
+  justify-content: center;
+  gap:             var(--space-2);
+  width:           100%;
+  height:          220px;
+  background:      linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-bg) 100%);
+  border-radius:   var(--radius-lg);
+  color:           var(--c-text-muted);
+  font-size:       3.5rem;
+}
+.wiki-detail-photo-placeholder span {
+  font-size:      var(--text-xs);
+  color:          var(--c-text-muted);
+  font-weight:    var(--weight-medium);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
 
 /* Card Body */
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index df1b431..22217d2 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER = '346'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '347'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 
 const App = (() => {
 
diff --git a/backend/static/js/pages/wiki.js b/backend/static/js/pages/wiki.js
index 9e63226..5f72bf9 100644
--- a/backend/static/js/pages/wiki.js
+++ b/backend/static/js/pages/wiki.js
@@ -368,11 +368,13 @@ window.Page_wiki = (() => {
     }
   }
 
+  const _DOG_SILHOUETTE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="48" height="48" fill="currentColor" aria-hidden="true"><path d="M200,56H180V48a12,12,0,0,0-24,0v8H132a44,44,0,0,0-43.3,36.3L80,140H60a28,28,0,0,0-28,28v16a12,12,0,0,0,12,12H204a12,12,0,0,0,12-12V100A44.05,44.05,0,0,0,200,56Zm20,128H44V168a4,4,0,0,1,4-4H84.9l4.16-41.57A20,20,0,0,1,108.86,104H156a4,4,0,0,1,0,8H128a4,4,0,0,0,0,8h28a12,12,0,0,0,12-12,11.84,11.84,0,0,0-.1-1.52A20,20,0,0,1,196,124Zm0-60a20,20,0,0,1-7.77,15.82A27.84,27.84,0,0,0,180,132V120a12,12,0,0,1,12-12h16a4,4,0,0,0,4-4V100A20,20,0,0,1,220,124ZM168,48a4,4,0,0,1,8,0V72H168Z"/></svg>`;
+
   function _breedCardHtml(r) {
     const photoHtml = r.foto_url
       ? `<img class="wiki-breed-photo" src="${_esc(r.foto_url)}" loading="lazy" alt="${_esc(r.name)}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">`
       : '';
-    const fallbackHtml = `<div class="wiki-breed-photo-fallback" style="${r.foto_url ? 'display:none' : ''}">${UI.icon('dog')}</div>`;
+    const fallbackHtml = `<div class="wiki-breed-photo-fallback" style="${r.foto_url ? 'display:none' : ''}">${_DOG_SILHOUETTE}</div>`;
 
     return `
       <div class="wiki-breed-card" data-slug="${_esc(r.slug)}">
@@ -714,11 +716,14 @@ window.Page_wiki = (() => {
       ? rasse.temperament.split(',').map(t => `<span class="wiki-trait-chip">${_esc(t.trim())}</span>`).join('')
       : '';
 
+    const _dogSvgLg = _DOG_SILHOUETTE.replace('width="48" height="48"', 'width="56" height="56"');
     const photoHtml = rasse.foto_url
       ? `<div class="wiki-detail-hero-photo-wrap">
-           <img class="wiki-detail-photo" src="${_esc(rasse.foto_url)}" alt="${_esc(rasse.name)}" onerror="this.parentElement.style.display='none'">
-         </div>`
-      : '';
+           <img class="wiki-detail-photo" src="${_esc(rasse.foto_url)}" alt="${_esc(rasse.name)}"
+                onerror="this.parentElement.style.display='none';this.parentElement.nextElementSibling.style.display='flex'">
+         </div>
+         <div class="wiki-detail-photo-placeholder" style="display:none">${_dogSvgLg}<span>Kein Foto verfügbar</span></div>`
+      : `<div class="wiki-detail-photo-placeholder">${_dogSvgLg}<span>Kein Foto verfügbar</span></div>`;
 
     const berichteHtml = _renderBerichteHtml(rasse.berichte || [], slug);
 
diff --git a/backend/static/sw.js b/backend/static/sw.js
index 86351ed..3ba2ba5 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v361';
+const CACHE_VERSION = 'by-v362';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten