fix: remove build warnings (unused CSS, a11y labels, npmrc)

- settings: remove unused form p/h4 CSS selectors
- prayers: remove unused .postcommunio-section/links CSS selectors
- RosarySvg: add aria-label to all bead hitbox anchors
- .npmrc: remove pnpm-only resolution-mode setting

.npmrc

@@ -1,2 +1 @@
 engine-strict=true
-resolution-mode=highest

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/(main)/settings/+page.svelte

@@ -36,8 +36,6 @@ form button:hover, form button:focus-visible {
 	scale: 1.1;
 }
 form button:active { background-color: var(--color-accent-active); }
-form p { max-width: 400px; margin-top: 0; }
-form h4 { margin-bottom: 0; }
 @media screen and (max-width: 600px) {
 	form { margin-top: 0; }
 }

src/routes/[faithLang=faithLang]/[prayers=prayersLang]/+page.svelte

@@ -428,33 +428,6 @@ h1{
 		background-color: var(--nord5);
 	}
 }
-.postcommunio-section h2 {
-	text-align: center;
-	padding-bottom: 0.5em;
-}
-.postcommunio-links {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	text-align: center;
-}
-.postcommunio-links li {
-	margin: 0.75em 0;
-}
-.postcommunio-links a {
-	color: var(--nord8);
-	text-decoration: none;
-	font-size: 1.15em;
-}
-.postcommunio-links a:hover {
-	text-decoration: underline;
-}
-@media(prefers-color-scheme: light) {
-	.postcommunio-links a {
-		color: var(--nord10);
-	}
-}
-
 /* Seasonal badge */
 .seasonal-badge {
 	display: inline-block;

src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/RosarySvg.svelte

@@ -131,31 +131,31 @@
 	<!-- Invisible hitboxes for larger tap targets (anchor links for no-JS fallback) -->
 	<g class="hitboxes">
 		<!-- Cross hitbox -->
-		<a href="#cross"><rect x="-15" y="-30" width="80" height="80" data-section="cross" /></a>
+		<a href="#cross" aria-label="Cross"><rect x="-15" y="-30" width="80" height="80" data-section="cross" /></a>
 
 		<!-- Individual bead hitboxes -->
-		<a href="#lbead1"><circle cx="25" cy={pos.lbead1} r="25" data-section="lbead1" /></a>
+		<a href="#lbead1" aria-label="First large bead"><circle cx="25" cy={pos.lbead1} r="25" data-section="lbead1" /></a>
-		<a href="#start1"><circle cx="25" cy={pos.start1} r="20" data-section="start1" /></a>
+		<a href="#start1" aria-label="First small bead"><circle cx="25" cy={pos.start1} r="20" data-section="start1" /></a>
-		<a href="#start2"><circle cx="25" cy={pos.start2} r="20" data-section="start2" /></a>
+		<a href="#start2" aria-label="Second small bead"><circle cx="25" cy={pos.start2} r="20" data-section="start2" /></a>
-		<a href="#start3"><circle cx="25" cy={pos.start3} r="20" data-section="start3" /></a>
+		<a href="#start3" aria-label="Third small bead"><circle cx="25" cy={pos.start3} r="20" data-section="start3" /></a>
-		<a href="#lbead2"><circle cx="25" cy={pos.lbead2} r="25" data-section="lbead2" /></a>
+		<a href="#lbead2" aria-label="Second large bead"><circle cx="25" cy={pos.lbead2} r="25" data-section="lbead2" /></a>
 
 		<!-- Decade hitboxes -->
 		{#each [1, 2, 3, 4, 5] as d (d)}
 			{@const decadePos = pos[`secret${d}`]}
-			<a href={`#secret${d}`}><rect x="-15" y={decadePos - 2} width="80" height={DECADE_OFFSET + 9 * BEAD_SPACING + 12} data-section={`secret${d}`} /></a>
+			<a href={`#secret${d}`} aria-label={`Decade ${d}`}><rect x="-15" y={decadePos - 2} width="80" height={DECADE_OFFSET + 9 * BEAD_SPACING + 12} data-section={`secret${d}`} /></a>
 		{/each}
 
 		<!-- Transition bead hitboxes -->
 		{#each [1, 2, 3, 4] as d (d)}
-			<a href={`#secret${d}_transition`}><circle cx="25" cy={pos[`secret${d}_transition`]} r="25" data-section={`secret${d}_transition`} /></a>
+			<a href={`#secret${d}_transition`} aria-label={`Transition after decade ${d}`}><circle cx="25" cy={pos[`secret${d}_transition`]} r="25" data-section={`secret${d}_transition`} /></a>
 		{/each}
-		<a href="#final_transition"><circle cx="25" cy={pos.final_transition} r="25" data-section="final_transition" /></a>
+		<a href="#final_transition" aria-label="Final transition"><circle cx="25" cy={pos.final_transition} r="25" data-section="final_transition" /></a>
-		<a href="#final_salve"><circle cx="25" cy={pos.final_salve} r="20" data-section="final_salve" /></a>
+		<a href="#final_salve" aria-label="Salve Regina"><circle cx="25" cy={pos.final_salve} r="20" data-section="final_salve" /></a>
-		<a href="#final_schlussgebet"><circle cx="25" cy={pos.final_schlussgebet} r="20" data-section="final_schlussgebet" /></a>
+		<a href="#final_schlussgebet" aria-label="Closing prayer"><circle cx="25" cy={pos.final_schlussgebet} r="20" data-section="final_schlussgebet" /></a>
-		<a href="#final_michael"><circle cx="25" cy={pos.final_michael} r="20" data-section="final_michael" /></a>
+		<a href="#final_michael" aria-label="St. Michael prayer"><circle cx="25" cy={pos.final_michael} r="20" data-section="final_michael" /></a>
-		<a href="#final_paternoster"><circle cx="25" cy={pos.final_paternoster} r="25" data-section="final_paternoster" /></a>
+		<a href="#final_paternoster" aria-label="Final Our Father"><circle cx="25" cy={pos.final_paternoster} r="25" data-section="final_paternoster" /></a>
-		<a href="#final_cross"><rect x="-15" y={pos.final_cross - 50} width="80" height="80" data-section="final_cross" /></a>
+		<a href="#final_cross" aria-label="Final cross"><rect x="-15" y={pos.final_cross - 50} width="80" height="80" data-section="final_cross" /></a>
 	</g>
 
 </svg>

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>