diff --git a/frontend/src/lib/planner/RecipePicker.svelte b/frontend/src/lib/planner/RecipePicker.svelte
index ec9196d..5f3f90e 100644
--- a/frontend/src/lib/planner/RecipePicker.svelte
+++ b/frontend/src/lib/planner/RecipePicker.svelte
@@ -115,10 +115,10 @@
 					{:else if suggestion.hasConflict}
 						<span
 							data-testid="badge-{suggestion.recipe.id}"
-							data-type="warning"
-							style="display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--yellow-tint); color: var(--yellow-text);"
+							data-type="bad"
+							style="display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--red-tint, #fdecea); color: var(--color-error, #d9534f);"
 						>
-							⚠ Variationskonflikt
+							↓ {(suggestion.scoreDelta ?? 0).toFixed(1)} Punkte
 						</span>
 					{/if}
 				</div>
diff --git a/frontend/src/lib/planner/RecipePicker.test.ts b/frontend/src/lib/planner/RecipePicker.test.ts
index d34476b..7e44fe3 100644
--- a/frontend/src/lib/planner/RecipePicker.test.ts
+++ b/frontend/src/lib/planner/RecipePicker.test.ts
@@ -47,11 +47,12 @@ describe('RecipePicker', () => {
 		expect(badge.getAttribute('data-type')).toBe('good');
 	});
 
-	it('shows yellow badge when hasConflict is true', () => {
+	it('shows red delta badge when hasConflict is true', () => {
 		render(RecipePicker, { props: baseProps });
-		// Hähnchen-Curry: hasConflict = true → yellow badge
+		// Hähnchen-Curry: hasConflict = true, scoreDelta = -1.5 → red badge with delta
 		const badge = screen.getByTestId('badge-s2');
-		expect(badge.getAttribute('data-type')).toBe('warning');
+		expect(badge.getAttribute('data-type')).toBe('bad');
+		expect(badge.textContent).toContain('-1.5');
 	});
 
 	it('shows Alle Rezepte section', () => {