recipes: replace Card with CompactCard + CSS grid on all sub-pages

Migrate all recipe sub-pages from the old fixed-size Card component
inside flex-wrap Recipes wrapper to CompactCard with responsive CSS
grid for visual consistency with the main recipes page.

src/app.css

@@ -344,3 +344,28 @@ a:focus-visible {
 		color: var(--nord0);
 	}
 }
+
+/* ============================================
+   RECIPE GRID
+   Responsive card grid used across recipe pages
+   ============================================ */
+
+.recipe-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: 1.5em;
+	padding: 0 1.5em;
+	max-width: 1400px;
+	margin: 0 auto 2em;
+}
+@media (min-width: 600px) {
+	.recipe-grid {
+		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	}
+}
+@media (min-width: 1024px) {
+	.recipe-grid {
+		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+		gap: 1.8em;
+	}
+}

src/lib/components/recipes/CompactCard.svelte

@@ -4,6 +4,7 @@
 	let {
 		recipe,
 		current_month = 0,
+		icon_override = false,
 		isFavorite = false,
 		showFavoriteIndicator = false,
 		loading_strat = "lazy",
@@ -19,7 +20,7 @@
 		recipe.images?.[0]?.alt || recipe.name
 	);
 
-	const isInSeason = $derived(recipe.season?.includes(current_month));
+	const isInSeason = $derived(icon_override || recipe.season?.includes(current_month));
 </script>
 <style>
 .compact-card {

src/lib/components/recipes/RecipeEditor.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import CardAdd from '$lib/components/recipes/CardAdd.svelte';
     	import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
-    	import Card from '$lib/components/recipes/Card.svelte';
     	import Search from '$lib/components/recipes/Search.svelte';
 	import SeasonSelect from '$lib/components/recipes/SeasonSelect.svelte';
 	import CreateIngredientList from '$lib/components/recipes/CreateIngredientList.svelte';

src/routes/[recipeLang=recipeLang]/+page.svelte

@@ -306,27 +306,6 @@
 	z-index: 10;
 }
 
-/* ─── Recipe grid ─── */
-.recipe-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	gap: 1.5em;
-	padding: 0 1.5em;
-	max-width: 1400px;
-	margin: 0 auto 2em;
-}
-@media (min-width: 600px) {
-	.recipe-grid {
-		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-	}
-}
-@media (min-width: 1024px) {
-	.recipe-grid {
-		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-		gap: 1.8em;
-	}
-}
-
 .sentinel {
 	height: 1px;
 }

src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import Recipes from '$lib/components/recipes/Recipes.svelte';
+	import CompactCard from '$lib/components/recipes/CompactCard.svelte';
-	import Card from '$lib/components/recipes/Card.svelte';
 
 	let { data } = $props<{ data: PageData }>();
 	let current_month = new Date().getMonth() + 1;
@@ -79,6 +78,31 @@ h1 {
 		color: var(--nord2);
 	}
 }
+.card-wrapper {
+	position: relative;
+}
+.translation-badge {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	padding: 0.4rem 0.8rem;
+	border-radius: 4px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+	z-index: 3;
+	color: var(--nord0);
+	pointer-events: none;
+}
+.translation-badge.none {
+	background-color: var(--nord14);
+}
+.translation-badge.pending {
+	background-color: var(--nord13);
+}
+.translation-badge.needs_update {
+	background-color: var(--nord12);
+}
 .empty-state {
 	text-align: center;
 	margin-top: 3rem;
@@ -121,16 +145,26 @@ h1 {
 		</div>
 	</div>
 
-	<Recipes>
+	<div class="recipe-grid">
-		{#each data.untranslated as recipe}
+		{#each data.untranslated as recipe (recipe._id)}
-			<Card
+			<div class="card-wrapper">
-				{recipe}
+				<CompactCard
-				{current_month}
+					{recipe}
-				routePrefix="/{data.recipeLang}"
+					{current_month}
-				translationStatus={recipe.translationStatus}
+					routePrefix="/{data.recipeLang}"
-			></Card>
+				/>
+				<div class="translation-badge {recipe.translationStatus || 'none'}">
+					{#if recipe.translationStatus === 'pending'}
+						Freigabe ausstehend
+					{:else if recipe.translationStatus === 'needs_update'}
+						Aktualisierung erforderlich
+					{:else}
+						Keine Übersetzung
+					{/if}
+				</div>
+			</div>
 		{/each}
-	</Recipes>
+	</div>
 {:else}
 	<div class="empty-state">
 		<p>Alle Rezepte sind übersetzt!</p>

src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
     import Search from '$lib/components/recipes/Search.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
     import { rand_array } from '$lib/js/randomize';
     import { createSearchFilter } from '$lib/js/searchFilter.svelte';
 
@@ -28,10 +27,8 @@
 
 <h1>{label} <q>{data.category}</q>:</h1>
 <Search category={data.category} lang={data.lang} recipes={data.recipes} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
-<section>
+<div class="recipe-grid">
-<Recipes>
+	{#each rand_array(filteredRecipes) as recipe (recipe._id)}
-	{#each rand_array(filteredRecipes) as recipe}
+		<CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
-		<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
 	{/each}
-</Recipes>
+</div>
-</section>

src/routes/[recipeLang=recipeLang]/favorites/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
     import Search from '$lib/components/recipes/Search.svelte';
     import { createSearchFilter } from '$lib/js/searchFilter.svelte';
 
@@ -69,11 +68,11 @@ h1{
 {#if data.error}
     <p class="empty-state">{labels.errorLoading} {data.error}</p>
 {:else if filteredFavorites.length > 0}
-    <Recipes>
+    <div class="recipe-grid">
-        {#each filteredFavorites as recipe}
+        {#each filteredFavorites as recipe (recipe._id)}
-            <Card {recipe} {current_month} isFavorite={true} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}"></Card>
+            <CompactCard {recipe} {current_month} isFavorite={true} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}" />
         {/each}
-    </Recipes>
+    </div>
 {:else if data.favorites.length > 0}
     <div class="empty-state">
         <p>{isEnglish ? 'No matching favorites found.' : 'Keine passenden Favoriten gefunden.'}</p>

src/routes/[recipeLang=recipeLang]/icon/+page.svelte

@@ -1,10 +1,5 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
-    import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
-    import SeasonLayout from '$lib/components/recipes/SeasonLayout.svelte'
-    import Card from '$lib/components/recipes/Card.svelte';
-    import Search from '$lib/components/recipes/Search.svelte';
     let { data } = $props<{ data: PageData }>();
 
     const isEnglish = $derived(data.lang === 'en');

src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
     import IconLayout from '$lib/components/recipes/IconLayout.svelte';
-    import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
-    import Search from '$lib/components/recipes/Search.svelte';
     let { data } = $props<{ data: PageData }>();
     import { rand_array } from '$lib/js/randomize';
 
@@ -36,10 +33,10 @@
 
 <IconLayout icons={data.icons} active_icon={data.icon} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}>
 	{#snippet recipesSlot()}
-		<Recipes>
+		<div class="recipe-grid">
-			{#each rand_array(filteredRecipes) as recipe}
+			{#each rand_array(filteredRecipes) as recipe (recipe._id)}
-				<Card {recipe} icon_override=true isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+				<CompactCard {recipe} icon_override={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 			{/each}
-		</Recipes>
+		</div>
 	{/snippet}
 </IconLayout>

src/routes/[recipeLang=recipeLang]/search/+page.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
     import Search from '$lib/components/recipes/Search.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
     let { data } = $props<{ data: PageData }>();
     let current_month = new Date().getMonth() + 1;
 
@@ -115,11 +114,11 @@
 {/if}
 
 {#if displayedRecipes.length > 0}
-    <Recipes>
+    <div class="recipe-grid">
-        {#each displayedRecipes as recipe}
+        {#each displayedRecipes as recipe (recipe._id)}
-            <Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}"></Card>
+            <CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}" />
         {/each}
-    </Recipes>
+    </div>
 {:else if (data.query || hasActiveSearch) && !data.error}
     <div class="search-info">
         <p>{labels.noResults}</p>

src/routes/[recipeLang=recipeLang]/season/+page.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
-    import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
     import SeasonLayout from '$lib/components/recipes/SeasonLayout.svelte'
-    import Card from '$lib/components/recipes/Card.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
-    import Search from '$lib/components/recipes/Search.svelte';
     let { data } = $props<{ data: PageData }>();
     let current_month = new Date().getMonth() + 1
     import { rand_array } from '$lib/js/randomize';
@@ -43,10 +40,10 @@
 
 <SeasonLayout active_index={current_month-1} {months} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}>
 	{#snippet recipesSlot()}
-		<Recipes>
+		<div class="recipe-grid">
-			{#each rand_array(filteredRecipes) as recipe}
+			{#each rand_array(filteredRecipes) as recipe (recipe._id)}
-				<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+				<CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 			{/each}
-		</Recipes>
+		</div>
 	{/snippet}
 </SeasonLayout>

src/routes/[recipeLang=recipeLang]/season/[month]/+page.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
     import SeasonLayout from '$lib/components/recipes/SeasonLayout.svelte';
-    import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
-    import Search from '$lib/components/recipes/Search.svelte';
     let { data } = $props<{ data: PageData }>();
 
     const isEnglish = $derived(data.lang === 'en');
@@ -41,10 +38,10 @@
 
 <SeasonLayout active_index={data.month -1} {months} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} onSearchResults={handleSearchResults}>
 	{#snippet recipesSlot()}
-		<Recipes>
+		<div class="recipe-grid">
-			{#each rand_array(filteredRecipes) as recipe}
+			{#each rand_array(filteredRecipes) as recipe (recipe._id)}
-				<Card {recipe} icon_override=true isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+				<CompactCard {recipe} icon_override={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 			{/each}
-		</Recipes>
+		</div>
 	{/snippet}
 </SeasonLayout>

src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
     import Search from '$lib/components/recipes/Search.svelte';
     import { rand_array } from '$lib/js/randomize';
     import { createSearchFilter } from '$lib/js/searchFilter.svelte';
@@ -28,10 +27,8 @@
 
 <h1>{label} <q>{data.tag}</q>:</h1>
 <Search tag={data.tag} lang={data.lang} recipes={data.recipes} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
-<section>
+<div class="recipe-grid">
-<Recipes>
+	{#each rand_array(filteredRecipes) as recipe (recipe._id)}
-	{#each rand_array(filteredRecipes) as recipe}
+		<CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
-		<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
 	{/each}
-	</Recipes>
+</div>
-</section>