feat(planner): RecipePicker uses scoreDelta/hasConflict, drop currentVarietyScore, add isLoading

- Suggestion interface: { recipe, scoreDelta, hasConflict } (no simulatedScore)
- Badge renders from hasConflict directly — no client-side delta computation needed
- New isLoading prop shows skeleton rows while suggestions fetch is in flight
- currentVarietyScore prop removed from component and both call sites follow in next commit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/planner/RecipePicker.svelte

@@ -8,24 +8,25 @@
 
 	interface Suggestion {
 		recipe: Recipe;
-		simulatedScore: number;
+		scoreDelta: number;
+		hasConflict: boolean;
 	}
 
 	let {
 		planId,
 		date,
 		dateLabel,
-		currentVarietyScore = 0,
 		suggestions = [],
 		allRecipes = [],
+		isLoading = false,
 		onpick
 	}: {
 		planId: string;
 		date: string;
 		dateLabel: string;
-		currentVarietyScore?: number;
 		suggestions: Suggestion[];
 		allRecipes: Recipe[];
+		isLoading?: boolean;
 		onpick: (recipeId: string, recipeName: string) => void;
 	} = $props();
 
@@ -71,7 +72,27 @@
 	</div>
 
 	<!-- Empfohlen section -->
-	{#if suggestions.length > 0}
+	{#if isLoading}
+		<div data-testid="suggestions-loading">
+			{#each [1, 2, 3] as i (i)}
+				<div
+					style="padding: 7px 12px; border-bottom: 1px solid var(--color-subtle); display: flex; align-items: center; gap: 8px;"
+				>
+					<div style="flex: 1; min-width: 0;">
+						<div
+							style="height: 12px; width: 60%; border-radius: 3px; background: var(--color-subtle); animation: pulse 1.5s ease-in-out infinite;"
+						></div>
+						<div
+							style="height: 9px; width: 35%; border-radius: 3px; background: var(--color-subtle); margin-top: 4px; animation: pulse 1.5s ease-in-out infinite;"
+						></div>
+					</div>
+					<div
+						style="height: 26px; width: 56px; border-radius: var(--radius-md); background: var(--color-subtle); animation: pulse 1.5s ease-in-out infinite;"
+					></div>
+				</div>
+			{/each}
+		</div>
+	{:else if suggestions.length > 0}
 		<div
 			style="font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); padding: 5px 12px 3px; background: var(--color-subtle);"
 		>
@@ -79,7 +100,6 @@
 		</div>
 
 		{#each suggestions as suggestion (suggestion.recipe.id)}
-			{@const delta = suggestion.simulatedScore - currentVarietyScore}
 			{@const meta = recipeMetadata(suggestion.recipe)}
 			<div
 				style="padding: 7px 12px; border-bottom: 1px solid var(--color-subtle); display: flex; align-items: center; gap: 8px;"
@@ -95,13 +115,13 @@
 							{meta}
 						</p>
 					{/if}
-					{#if delta > 0}
+					{#if !suggestion.hasConflict}
 						<span
 							data-testid="badge-{suggestion.recipe.id}"
 							data-type="good"
 							style="display: inline-block; margin-top: 3px; font-size: 8px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--green-tint); color: var(--green-dark);"
 						>
-							↑ +{delta.toFixed(0)} Punkte
+							↑ +{suggestion.scoreDelta.toFixed(0)} Punkte
 						</span>
 					{:else}
 						<span