From 66f8403b33aca087208c64b9b1d3aa4d735bd799 Mon Sep 17 00:00:00 2001
From: Markus Graf <info@markusgraf.ch>
Date: Sun, 29 Mar 2026 11:54:56 +0200
Subject: [PATCH] feat(02-02): add 7 SVG fallback images for forest elements

- blume, pilz, vogel, schmetterling, reh, baum, bach
- Pastel watercolor style with soft gradients, 200x200 viewBox
- All under 2KB, no text elements, child-friendly aesthetic

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/assets/fallback-images/bach.svg          | 24 ++++++++++++++++
 src/assets/fallback-images/baum.svg          | 23 ++++++++++++++++
 src/assets/fallback-images/blume.svg         | 21 ++++++++++++++
 src/assets/fallback-images/pilz.svg          | 21 ++++++++++++++
 src/assets/fallback-images/reh.svg           | 29 ++++++++++++++++++++
 src/assets/fallback-images/schmetterling.svg | 24 ++++++++++++++++
 src/assets/fallback-images/vogel.svg         | 20 ++++++++++++++
 7 files changed, 162 insertions(+)
 create mode 100644 src/assets/fallback-images/bach.svg
 create mode 100644 src/assets/fallback-images/baum.svg
 create mode 100644 src/assets/fallback-images/blume.svg
 create mode 100644 src/assets/fallback-images/pilz.svg
 create mode 100644 src/assets/fallback-images/reh.svg
 create mode 100644 src/assets/fallback-images/schmetterling.svg
 create mode 100644 src/assets/fallback-images/vogel.svg

diff --git a/src/assets/fallback-images/bach.svg b/src/assets/fallback-images/bach.svg
new file mode 100644
index 0000000..3ec0533
--- /dev/null
+++ b/src/assets/fallback-images/bach.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#7DB8D4" stop-opacity="0.7"/>
+      <stop offset="100%" stop-color="#7DB8D4" stop-opacity="0.4"/>
+    </linearGradient>
+    <radialGradient id="stone" cx="50%" cy="40%" r="55%">
+      <stop offset="0%" stop-color="#C8BEB4" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#A89888" stop-opacity="0.7"/>
+    </radialGradient>
+  </defs>
+  <path d="M0,100 C30,95 50,110 80,105 C110,100 130,115 160,108 C180,103 195,110 200,108 L200,145 C180,148 160,140 130,145 C110,148 80,138 50,142 C30,145 10,138 0,140 Z" fill="url(#water)"/>
+  <path d="M20,108 C40,105 55,112 75,108" fill="none" stroke="#FFF8F0" stroke-width="1.5" opacity="0.5" stroke-linecap="round"/>
+  <path d="M100,112 C120,108 140,115 165,110" fill="none" stroke="#FFF8F0" stroke-width="1.5" opacity="0.4" stroke-linecap="round"/>
+  <ellipse cx="50" cy="95" rx="14" ry="10" fill="url(#stone)"/>
+  <ellipse cx="120" cy="98" rx="11" ry="8" fill="url(#stone)"/>
+  <ellipse cx="170" cy="100" rx="9" ry="7" fill="url(#stone)"/>
+  <ellipse cx="85" cy="148" rx="10" ry="7" fill="url(#stone)" opacity="0.6"/>
+  <ellipse cx="30" cy="85" rx="8" ry="4" fill="#6DB87D" opacity="0.5"/>
+  <ellipse cx="90" cy="82" rx="6" ry="3" fill="#6DB87D" opacity="0.4"/>
+  <ellipse cx="150" cy="88" rx="7" ry="4" fill="#6DB87D" opacity="0.45"/>
+  <ellipse cx="60" cy="155" rx="10" ry="5" fill="#6DB87D" opacity="0.4"/>
+  <ellipse cx="140" cy="152" rx="8" ry="4" fill="#6DB87D" opacity="0.35"/>
+</svg>
diff --git a/src/assets/fallback-images/baum.svg b/src/assets/fallback-images/baum.svg
new file mode 100644
index 0000000..c281441
--- /dev/null
+++ b/src/assets/fallback-images/baum.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <radialGradient id="crown" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#6DB87D" stop-opacity="0.9"/>
+      <stop offset="70%" stop-color="#6DB87D" stop-opacity="0.7"/>
+      <stop offset="100%" stop-color="#E8F5E4" stop-opacity="0.4"/>
+    </radialGradient>
+    <linearGradient id="trunk" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#B8865A" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#8B6B47" stop-opacity="0.8"/>
+    </linearGradient>
+  </defs>
+  <rect x="90" y="110" width="20" height="60" rx="4" fill="url(#trunk)"/>
+  <circle cx="100" cy="72" r="48" fill="url(#crown)"/>
+  <circle cx="75" cy="82" r="25" fill="#6DB87D" opacity="0.5"/>
+  <circle cx="125" cy="82" r="25" fill="#6DB87D" opacity="0.5"/>
+  <circle cx="100" cy="55" r="20" fill="#E8F5E4" opacity="0.4"/>
+  <circle cx="85" cy="65" r="5" fill="#E88BAE" opacity="0.5"/>
+  <circle cx="115" cy="70" r="4" fill="#E88BAE" opacity="0.4"/>
+  <circle cx="100" cy="50" r="3" fill="#E88BAE" opacity="0.45"/>
+  <circle cx="108" cy="85" r="3.5" fill="#E8B84B" opacity="0.5"/>
+  <ellipse cx="100" cy="175" rx="35" ry="6" fill="#6DB87D" opacity="0.3"/>
+</svg>
diff --git a/src/assets/fallback-images/blume.svg b/src/assets/fallback-images/blume.svg
new file mode 100644
index 0000000..f6df1c6
--- /dev/null
+++ b/src/assets/fallback-images/blume.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <radialGradient id="petal" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#E88BAE" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#9B7DC4" stop-opacity="0.6"/>
+    </radialGradient>
+    <radialGradient id="center" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#E8B84B"/>
+      <stop offset="100%" stop-color="#E8B84B" stop-opacity="0.7"/>
+    </radialGradient>
+  </defs>
+  <ellipse cx="100" cy="68" rx="22" ry="28" fill="url(#petal)" opacity="0.85"/>
+  <ellipse cx="130" cy="85" rx="22" ry="28" fill="url(#petal)" opacity="0.8" transform="rotate(72 130 85)"/>
+  <ellipse cx="120" cy="115" rx="22" ry="28" fill="url(#petal)" opacity="0.75" transform="rotate(144 120 115)"/>
+  <ellipse cx="80" cy="115" rx="22" ry="28" fill="url(#petal)" opacity="0.8" transform="rotate(216 80 115)"/>
+  <ellipse cx="70" cy="85" rx="22" ry="28" fill="url(#petal)" opacity="0.85" transform="rotate(288 70 85)"/>
+  <circle cx="100" cy="95" r="14" fill="url(#center)"/>
+  <line x1="100" y1="125" x2="100" y2="180" stroke="#6DB87D" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
+  <ellipse cx="88" cy="155" rx="12" ry="8" fill="#6DB87D" opacity="0.6" transform="rotate(-20 88 155)"/>
+  <ellipse cx="112" cy="165" rx="10" ry="7" fill="#6DB87D" opacity="0.5" transform="rotate(15 112 165)"/>
+</svg>
diff --git a/src/assets/fallback-images/pilz.svg b/src/assets/fallback-images/pilz.svg
new file mode 100644
index 0000000..5040b08
--- /dev/null
+++ b/src/assets/fallback-images/pilz.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <radialGradient id="cap" cx="50%" cy="40%" r="55%">
+      <stop offset="0%" stop-color="#E88BAE" stop-opacity="0.95"/>
+      <stop offset="100%" stop-color="#9B7DC4" stop-opacity="0.7"/>
+    </radialGradient>
+    <linearGradient id="stem" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#FFF8F0"/>
+      <stop offset="100%" stop-color="#E8F5E4"/>
+    </linearGradient>
+  </defs>
+  <ellipse cx="100" cy="100" rx="65" ry="45" fill="url(#cap)"/>
+  <rect x="80" y="100" width="40" height="55" rx="10" fill="url(#stem)" opacity="0.9"/>
+  <circle cx="80" cy="85" r="7" fill="#FFF8F0" opacity="0.8"/>
+  <circle cx="105" cy="78" r="5" fill="#FFF8F0" opacity="0.7"/>
+  <circle cx="120" cy="90" r="6" fill="#FFF8F0" opacity="0.75"/>
+  <circle cx="92" cy="95" r="4" fill="#FFF8F0" opacity="0.65"/>
+  <ellipse cx="100" cy="170" rx="30" ry="6" fill="#6DB87D" opacity="0.3"/>
+  <ellipse cx="75" cy="168" rx="8" ry="4" fill="#6DB87D" opacity="0.4"/>
+  <ellipse cx="125" cy="168" rx="8" ry="4" fill="#6DB87D" opacity="0.35"/>
+</svg>
diff --git a/src/assets/fallback-images/reh.svg b/src/assets/fallback-images/reh.svg
new file mode 100644
index 0000000..52f3f2f
--- /dev/null
+++ b/src/assets/fallback-images/reh.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <radialGradient id="fur" cx="50%" cy="40%" r="60%">
+      <stop offset="0%" stop-color="#D4A574" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#B8865A" stop-opacity="0.7"/>
+    </radialGradient>
+    <radialGradient id="spot" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#FFF8F0" stop-opacity="0.7"/>
+      <stop offset="100%" stop-color="#FFF8F0" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <ellipse cx="105" cy="110" rx="40" ry="30" fill="url(#fur)"/>
+  <circle cx="85" cy="75" r="18" fill="url(#fur)"/>
+  <ellipse cx="75" cy="58" rx="6" ry="14" fill="url(#fur)" transform="rotate(-15 75 58)"/>
+  <ellipse cx="95" cy="58" rx="6" ry="14" fill="url(#fur)" transform="rotate(15 95 58)"/>
+  <ellipse cx="76" cy="56" rx="4" ry="10" fill="#E88BAE" opacity="0.3" transform="rotate(-15 76 56)"/>
+  <ellipse cx="94" cy="56" rx="4" ry="10" fill="#E88BAE" opacity="0.3" transform="rotate(15 94 56)"/>
+  <circle cx="79" cy="73" r="3" fill="#333" opacity="0.6"/>
+  <circle cx="91" cy="73" r="3" fill="#333" opacity="0.6"/>
+  <ellipse cx="85" cy="81" rx="3" ry="2" fill="#333" opacity="0.4"/>
+  <circle cx="100" cy="100" r="4" fill="url(#spot)"/>
+  <circle cx="112" cy="105" r="3" fill="url(#spot)"/>
+  <circle cx="95" cy="112" r="3.5" fill="url(#spot)"/>
+  <line x1="80" y1="138" x2="78" y2="170" stroke="#B8865A" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
+  <line x1="95" y1="138" x2="93" y2="170" stroke="#B8865A" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
+  <line x1="115" y1="138" x2="117" y2="170" stroke="#B8865A" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
+  <line x1="130" y1="135" x2="132" y2="170" stroke="#B8865A" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
+  <ellipse cx="105" cy="175" rx="35" ry="5" fill="#6DB87D" opacity="0.25"/>
+</svg>
diff --git a/src/assets/fallback-images/schmetterling.svg b/src/assets/fallback-images/schmetterling.svg
new file mode 100644
index 0000000..7129512
--- /dev/null
+++ b/src/assets/fallback-images/schmetterling.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <radialGradient id="lwing" cx="40%" cy="40%" r="60%">
+      <stop offset="0%" stop-color="#9B7DC4" stop-opacity="0.85"/>
+      <stop offset="100%" stop-color="#E88BAE" stop-opacity="0.5"/>
+    </radialGradient>
+    <radialGradient id="rwing" cx="60%" cy="40%" r="60%">
+      <stop offset="0%" stop-color="#E88BAE" stop-opacity="0.85"/>
+      <stop offset="100%" stop-color="#9B7DC4" stop-opacity="0.5"/>
+    </radialGradient>
+  </defs>
+  <ellipse cx="70" cy="85" rx="32" ry="38" fill="url(#lwing)" transform="rotate(-10 70 85)"/>
+  <ellipse cx="130" cy="85" rx="32" ry="38" fill="url(#rwing)" transform="rotate(10 130 85)"/>
+  <ellipse cx="75" cy="125" rx="22" ry="28" fill="url(#lwing)" opacity="0.7" transform="rotate(10 75 125)"/>
+  <ellipse cx="125" cy="125" rx="22" ry="28" fill="url(#rwing)" opacity="0.7" transform="rotate(-10 125 125)"/>
+  <ellipse cx="100" cy="105" rx="6" ry="35" fill="#6DB87D" opacity="0.8" rx="5"/>
+  <circle cx="78" cy="82" r="6" fill="#E8B84B" opacity="0.5"/>
+  <circle cx="122" cy="82" r="6" fill="#E8B84B" opacity="0.5"/>
+  <circle cx="100" cy="68" r="5" fill="#6DB87D" opacity="0.7"/>
+  <line x1="96" y1="65" x2="88" y2="50" stroke="#6DB87D" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
+  <line x1="104" y1="65" x2="112" y2="50" stroke="#6DB87D" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
+  <circle cx="87" cy="48" r="3" fill="#E8B84B" opacity="0.6"/>
+  <circle cx="113" cy="48" r="3" fill="#E8B84B" opacity="0.6"/>
+</svg>
diff --git a/src/assets/fallback-images/vogel.svg b/src/assets/fallback-images/vogel.svg
new file mode 100644
index 0000000..d1177c6
--- /dev/null
+++ b/src/assets/fallback-images/vogel.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <radialGradient id="body" cx="45%" cy="45%" r="55%">
+      <stop offset="0%" stop-color="#7DB8D4" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#6DB87D" stop-opacity="0.7"/>
+    </radialGradient>
+    <radialGradient id="wing" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#9B7DC4" stop-opacity="0.8"/>
+      <stop offset="100%" stop-color="#7DB8D4" stop-opacity="0.5"/>
+    </radialGradient>
+  </defs>
+  <ellipse cx="100" cy="105" rx="35" ry="28" fill="url(#body)"/>
+  <circle cx="100" cy="75" r="20" fill="url(#body)"/>
+  <ellipse cx="72" cy="100" rx="25" ry="15" fill="url(#wing)" transform="rotate(-15 72 100)"/>
+  <circle cx="94" cy="72" r="4" fill="#333" opacity="0.7"/>
+  <polygon points="115,73 130,70 115,77" fill="#E8B84B" opacity="0.9"/>
+  <line x1="90" y1="132" x2="90" y2="155" stroke="#E8B84B" stroke-width="3" stroke-linecap="round" opacity="0.8"/>
+  <line x1="110" y1="132" x2="110" y2="155" stroke="#E8B84B" stroke-width="3" stroke-linecap="round" opacity="0.8"/>
+  <ellipse cx="100" cy="160" rx="20" ry="4" fill="#6DB87D" opacity="0.25"/>
+</svg>