From 358edb9a12c54ed346a982380d4e00df537d603a Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Fri, 10 Apr 2026 11:23:05 +0200
Subject: [PATCH] fix(planner): improve DesktopDayTile visual polish

- Add dark gradient scrim on card front so recipe name is always readable
  over images and protein/cuisine gradients
- Style card-back actions as proper buttons (border, padding, border-radius)
  instead of unstyled browser defaults
- Add meta chips for cookTimeMin and effort
- Scope Entfernen inside isPlanner guard alongside Gericht tauschen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/planner/DesktopDayTile.svelte     | 119 +++++++++++++-----
 1 file changed, 91 insertions(+), 28 deletions(-)

diff --git a/frontend/src/lib/planner/DesktopDayTile.svelte b/frontend/src/lib/planner/DesktopDayTile.svelte
index 4e2e369..d198f78 100644
--- a/frontend/src/lib/planner/DesktopDayTile.svelte
+++ b/frontend/src/lib/planner/DesktopDayTile.svelte
@@ -102,51 +102,59 @@
 				class="card-front"
 				style="background: {gradientBackground}; background-size: cover; background-position: center;"
 			>
-				<p style="font-family: var(--font-display); font-size: 13px; padding: 8px; margin: 0; color: var(--color-text);">
-					{slot.recipe.name}
-				</p>
+				<div class="card-front-scrim">
+					<p style="font-family: var(--font-display); font-size: 13px; margin: 0; color: #fff;">
+						{slot.recipe.name}
+					</p>
+				</div>
 			</div>
 
 			<div class="card-back" aria-hidden={!isFlipped}>
 				<button
 					type="button"
 					aria-label="Schließen"
+					class="btn-close"
 					onclick={(e) => { e.stopPropagation(); onclose?.(); }}
 				>
 					×
 				</button>
 
-				{#if slot.recipe.cookTimeMin}
-					<span style="font-size: 12px;">{slot.recipe.cookTimeMin} min</span>
+				{#if slot.recipe.cookTimeMin || slot.recipe.effort}
+					<div style="display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;">
+						{#if slot.recipe.cookTimeMin}
+							<span class="meta-chip">{slot.recipe.cookTimeMin} min</span>
+						{/if}
+						{#if slot.recipe.effort}
+							<span class="meta-chip">{slot.recipe.effort}</span>
+						{/if}
+					</div>
 				{/if}
 
-				{#if slot.recipe.effort}
-					<span style="font-size: 12px; margin-left: 4px;">{slot.recipe.effort}</span>
-				{/if}
-
-				<div style="margin-top: 8px; display: flex; flex-direction: column; gap: 4px;">
-					<a href="/recipes/{slot.recipe.id}/cook" onclick={(e) => e.stopPropagation()}>Koch-Modus</a>
-					<a href="/recipes/{slot.recipe.id}" onclick={(e) => e.stopPropagation()}>Rezept ansehen</a>
+				<div style="display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px;">
+					<a class="btn-action" href="/recipes/{slot.recipe.id}/cook" onclick={(e) => e.stopPropagation()}>Koch-Modus</a>
+					<a class="btn-action" href="/recipes/{slot.recipe.id}" onclick={(e) => e.stopPropagation()}>Rezept ansehen</a>
 				</div>
 
 				{#if isPlanner}
-					<button
-						type="button"
-						onclick={(e) => { e.stopPropagation(); onswap?.(); }}
-						style="margin-top: 8px; display: block;"
-					>
-						Gericht tauschen
-					</button>
-				{/if}
+					<div style="display: flex; flex-direction: column; gap: 4px;">
+						<button
+							type="button"
+							class="btn-action"
+							onclick={(e) => { e.stopPropagation(); onswap?.(); }}
+						>
+							Gericht tauschen
+						</button>
 
-				{#if isPlanner && slot.id}
-					<button
-						type="button"
-						onclick={(e) => { e.stopPropagation(); onremove?.(); }}
-						style="margin-top: 4px; display: block;"
-					>
-						Entfernen
-					</button>
+						{#if slot.id}
+							<button
+								type="button"
+								class="btn-action btn-danger"
+								onclick={(e) => { e.stopPropagation(); onremove?.(); }}
+							>
+								Entfernen
+							</button>
+						{/if}
+					</div>
 				{/if}
 			</div>
 		</div>
@@ -195,6 +203,61 @@
 		padding: 10px;
 		overflow-y: auto;
 	}
+	.card-front-scrim {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 20px 8px 8px;
+		background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
+		border-radius: 0 0 10px 10px;
+	}
+	.btn-close {
+		background: none;
+		border: none;
+		cursor: pointer;
+		font-size: 18px;
+		line-height: 1;
+		color: var(--color-text-muted);
+		padding: 2px 6px;
+		float: right;
+		margin: -4px -4px 4px 4px;
+	}
+	.btn-close:hover {
+		color: var(--color-text);
+	}
+	.meta-chip {
+		font-size: 11px;
+		padding: 2px 7px;
+		border-radius: 99px;
+		background: var(--color-surface);
+		border: 1px solid var(--color-border);
+		color: var(--color-text-muted);
+	}
+	.btn-action {
+		display: block;
+		width: 100%;
+		padding: 6px 10px;
+		border-radius: 6px;
+		border: 1px solid var(--color-border);
+		background: var(--color-surface);
+		color: var(--color-text);
+		font-size: 12px;
+		text-align: center;
+		text-decoration: none;
+		cursor: pointer;
+		box-sizing: border-box;
+	}
+	.btn-action:hover {
+		background: var(--color-border);
+	}
+	.btn-danger {
+		color: var(--color-destructive, #dc2626);
+		border-color: var(--color-destructive, #dc2626);
+	}
+	.btn-danger:hover {
+		background: color-mix(in srgb, var(--color-destructive, #dc2626) 10%, transparent);
+	}
 	@media (prefers-reduced-motion: reduce) {
 		.card {
 			transition: none;