Levelauswahl: Wolken-Symbol auf heller Karte sichtbar (Tönung + Kontur)

src/lib/components/home/NumberCard.svelte

@@ -27,8 +27,13 @@
   <span class="number">{target}</span>
   <span class="best" aria-hidden="true">
     {#if runs > 0}
-      {@const Best = SYMBOL[bestStage].c}
-      <Best size={SYMBOL[bestStage].size} />
+      {#if bestStage === 2}
+        <!-- Auf der hellen Karte braucht die Wolke Farbe/Kontur, sonst weiß auf weiß. -->
+        <Cloud size={50} fill="#cfe2ff" stroke="#7e97c4" />
+      {:else}
+        {@const Best = SYMBOL[bestStage].c}
+        <Best size={SYMBOL[bestStage].size} />
+      {/if}
     {/if}
   </span>
 </button>

src/lib/components/svg/Cloud.svelte

@@ -4,11 +4,13 @@
     size = 100,
     opacity = 1,
     variant = 0,
-  }: { size?: number; opacity?: number; variant?: number } = $props();
+    fill = 'var(--c-cloud)',
+    stroke = '#cad6e8',
+  }: { size?: number; opacity?: number; variant?: number; fill?: string; stroke?: string } = $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">
+  <g {fill} {stroke} stroke-width="2">
     {#if variant === 1}
       <ellipse cx="26" cy="44" rx="20" ry="16" />
       <ellipse cx="52" cy="30" rx="24" ry="20" />