From 3922089eff36a4729af246b6b9bdc4c00cd44c8d Mon Sep 17 00:00:00 2001
From: schmop <lars.richard@rocketmail.com>
Date: Sun, 31 May 2026 17:28:34 +0200
Subject: [PATCH] Ballon- und Wolken-Symbole mit Farb- und Formvarianten

---
 src/lib/components/svg/Balloon.svelte | 12 ++++++++----
 src/lib/components/svg/Cloud.svelte   | 23 ++++++++++++++++++-----
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/svg/Balloon.svelte b/src/lib/components/svg/Balloon.svelte
index d74c3f2..1dc0bc1 100644
--- a/src/lib/components/svg/Balloon.svelte
+++ b/src/lib/components/svg/Balloon.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-  let { size = 80 }: { size?: number } = $props();
+  let {
+    size = 80,
+    color = '#ff8aa8',
+    stroke = '#c25578',
+  }: { size?: number; color?: string; stroke?: string } = $props();
 </script>
 
 <svg width={size} height={size} viewBox="0 0 80 110" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-  <ellipse cx="40" cy="42" rx="30" ry="36" fill="#ff8aa8" stroke="#c25578" stroke-width="2" />
-  <ellipse cx="30" cy="32" rx="8" ry="14" fill="#ffd0db" opacity="0.7" />
-  <path d="M36 78 L44 78 L42 84 L38 84 Z" fill="#c25578" />
+  <ellipse cx="40" cy="42" rx="30" ry="36" fill={color} {stroke} stroke-width="2" />
+  <ellipse cx="30" cy="32" rx="8" ry="14" fill="#ffffff" opacity="0.45" />
+  <path d="M36 78 L44 78 L42 84 L38 84 Z" fill={stroke} />
   <path d="M40 84 Q38 95 42 105" stroke="#5c3344" stroke-width="1.5" fill="none" />
 </svg>
diff --git a/src/lib/components/svg/Cloud.svelte b/src/lib/components/svg/Cloud.svelte
index bbf999d..f510e38 100644
--- a/src/lib/components/svg/Cloud.svelte
+++ b/src/lib/components/svg/Cloud.svelte
@@ -1,12 +1,25 @@
 <script lang="ts">
-  let { size = 100, opacity = 1 }: { size?: number; opacity?: number } = $props();
+  // variant 0/1 = zwei leicht unterschiedliche Wolkenformen für Abwechslung.
+  let {
+    size = 100,
+    opacity = 1,
+    variant = 0,
+  }: { size?: number; opacity?: number; variant?: number } = $props();
 </script>
 
 <svg width={size} height={size * 0.6} viewBox="0 0 120 70" xmlns="http://www.w3.org/2000/svg" {opacity} aria-hidden="true">
   <g fill="var(--c-cloud)" stroke="#cad6e8" stroke-width="2">
-    <ellipse cx="30" cy="42" rx="22" ry="18" />
-    <ellipse cx="60" cy="32" rx="28" ry="22" />
-    <ellipse cx="90" cy="42" rx="22" ry="18" />
-    <rect x="22" y="42" width="76" height="18" rx="9" />
+    {#if variant === 1}
+      <ellipse cx="26" cy="44" rx="20" ry="16" />
+      <ellipse cx="52" cy="30" rx="24" ry="20" />
+      <ellipse cx="80" cy="36" rx="26" ry="22" />
+      <ellipse cx="100" cy="46" rx="16" ry="14" />
+      <rect x="20" y="44" width="84" height="18" rx="9" />
+    {:else}
+      <ellipse cx="30" cy="42" rx="22" ry="18" />
+      <ellipse cx="60" cy="32" rx="28" ry="22" />
+      <ellipse cx="90" cy="42" rx="22" ry="18" />
+      <rect x="22" y="42" width="76" height="18" rx="9" />
+    {/if}
   </g>
 </svg>