style(recipes): swap heart emoji for lucide icon

Replaces heart/black-heart emoji on the favorite button and the
card favorite indicators with the lucide Heart icon. Favorited
state uses a vivid #ff2d55 fill with layered drop-shadows so the
mark reads against colorful recipe photos; unfavorited button
shows an outlined white heart.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.46.27",
+	"version": "1.46.28",
 	"private": true,
 	"type": "module",
 	"scripts": {

src/lib/components/FavoriteButton.svelte

@@ -2,6 +2,7 @@
   import { browser } from '$app/environment';
   import { enhance } from '$app/forms';
   import { page } from '$app/stores';
+  import Heart from '@lucide/svelte/icons/heart';
 
   let { recipeId, isFavorite = $bindable(false), isLoggedIn = false } = $props<{ recipeId: string, isFavorite?: boolean, isLoggedIn?: boolean }>();
 
@@ -44,21 +45,28 @@
 <style>
   .favorite-button {
     all: unset;
-    font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
+    display: flex;
-    font-size: 1.5rem;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
     transition: var(--transition-fast);
-    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
+    filter:
+      drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6))
+      drop-shadow(0 0 3px rgba(0, 0, 0, 0.45));
     position: absolute;
     bottom: 0.5em;
     right: 0.5em;
+    color: white;
   }
-  
+  .favorite-button.is-favorite {
+    color: #ff2d55;
+  }
+
   .favorite-button:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
-  
+
   .favorite-button:hover,
   .favorite-button:focus-visible {
     transform: scale(1.2);
@@ -69,14 +77,16 @@
   <form method="post" action="?/toggleFavorite" style="display: inline;" use:enhance>
     <input type="hidden" name="recipeId" value={recipeId} />
     <input type="hidden" name="isFavorite" value={isFavorite} />
-    <button 
+    <button
       type="submit"
       class="favorite-button"
+      class:is-favorite={isFavorite}
       disabled={isLoading}
       onclick={toggleFavorite}
+      aria-label={isFavorite ? 'Favorit entfernen' : 'Als Favorit speichern'}
       title={isFavorite ? 'Favorit entfernen' : 'Als Favorit speichern'}
     >
-      {isFavorite ? '❤️' : '🖤'}
+      <Heart size={24} strokeWidth={2} fill={isFavorite ? 'currentColor' : 'none'} />
     </button>
   </form>
 {/if}

src/lib/components/recipes/Card.svelte

@@ -2,6 +2,7 @@
 import "$lib/css/shake.css";
 import "$lib/css/icon.css";
 import { onMount } from "svelte";
+import Heart from '@lucide/svelte/icons/heart';
 
 let {
 	recipe,
@@ -182,10 +183,13 @@ function preloadHeroImage() {
 
 .favorite-indicator{
 	position: absolute;
-	font-size: 2rem;
+	top: 0.4em;
-	top: 0.1em;
+	left: 0.4em;
-	left: 0.1em;
+	display: flex;
-	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
+	color: #ff2d55;
+	filter:
+		drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7))
+		drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
 }
 
 .translation-badge{
@@ -240,7 +244,9 @@ function preloadHeroImage() {
 		<img class="image" class:loaded={isloaded} src={'https://bocken.org/static/rezepte/thumb/' + img_name} loading={loading_strat} alt="{img_alt}" onload={() => isloaded=true}/>
 	</div>
 	{#if showFavoriteIndicator && isFavorite}
-		<div class="favorite-indicator">❤️</div>
+		<div class="favorite-indicator" aria-label="Favorit">
+			<Heart size={28} strokeWidth={2} fill="currentColor" />
+		</div>
 	{/if}
 	{#if translationStatus !== undefined}
 		<div class="translation-badge {translationStatus || 'none'}">

src/lib/components/recipes/CompactCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import "$lib/css/shake.css";
+	import Heart from '@lucide/svelte/icons/heart';
 
 	let {
 		recipe,
@@ -143,9 +144,11 @@
 	position: absolute;
 	top: 0.5em;
 	left: 0.5em;
-	font-size: 1.1rem;
+	display: flex;
-	font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
+	color: #ff2d55;
-	filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
+	filter:
+		drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7))
+		drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
 	z-index: 2;
 	pointer-events: none;
 }
@@ -156,7 +159,9 @@
 <div class="compact-card" onclick={activateTransitions}>
 	<a href="{routePrefix}/{recipe.short_name}" class="card-link" aria-label={recipe.name}></a>
 	{#if showFavoriteIndicator && isFavorite}
-		<span class="favorite">❤️</span>
+		<span class="favorite" aria-label="Favorit">
+			<Heart size={18} strokeWidth={2} fill="currentColor" />
+		</span>
 	{/if}
 	<div class="img-wrap" style:background-color={img_color}>
 		<img