Move more CSS styling to a global css files to reduce bundle size

refactor: clean up recipe routes and reduce bundle size
- Eliminate duplicate API fetch in recipe page by passing item from server load to universal load instead of fetching twice - Replace cheerio with simple regex in stripHtmlTags, removing ~200KB dependency - Refactor multiplier buttons in IngredientsPage to use loop instead of 5 repeated form elements - Move /rezepte/untranslated to /[recipeLang]/admin/untranslated and delete legacy /rezepte/ layout files
2026-01-23 15:37:32 +01:00 · 2026-01-23 15:04:58 +01:00
17 changed files with 256 additions and 487 deletions
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
 		"@auth/sveltekit": "^1.11.1",
 		"@sveltejs/adapter-node": "^5.0.0",
 		"chart.js": "^4.5.0",
-		"cheerio": "1.0.0-rc.12",
 		"file-type": "^19.0.0",
 		"ioredis": "^5.9.0",
 		"mongoose": "^8.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,9 +17,6 @@ importers:
      chart.js:
        specifier: ^4.5.0
        version: 4.5.0
-      cheerio:
-        specifier: 1.0.0-rc.12
-        version: 1.0.0-rc.12
      file-type:
        specifier: ^19.0.0
        version: 19.6.0
@@ -813,9 +810,6 @@ packages:
  bidi-js@1.0.3:
    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}

-  boolbase@1.0.0:
-    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
-
  bson@6.10.4:
    resolution: {integrity: sha512-WIsKqkSC0ABoBJuT1LEX+2HEvNmNKKgnTAyd0fL8qzK4SH2i9NXg+t08YtdZp/V9IZ33cxe3iV4yM0qg8lMQng==}
    engines: {node: '>=16.20.1'}
@@ -831,13 +825,6 @@ packages:
    resolution: {integrity: sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==}
    engines: {pnpm: '>=8'}

-  cheerio-select@2.1.0:
-    resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
-
-  cheerio@1.0.0-rc.12:
-    resolution: {integrity: sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==}
-    engines: {node: '>= 6'}
-
  chokidar@4.0.3:
    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
    engines: {node: '>= 14.16.0'}
@@ -874,17 +861,10 @@ packages:
    resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
    engines: {node: '>= 0.6'}

-  css-select@5.1.0:
-    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
-
  css-tree@3.1.0:
    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}

-  css-what@6.1.0:
-    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
-    engines: {node: '>= 6'}
-
  css.escape@1.5.1:
    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}

@@ -951,23 +931,6 @@ packages:
  dom-accessibility-api@0.6.3:
    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}

-  dom-serializer@2.0.0:
-    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
-
-  domelementtype@2.3.0:
-    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
-
-  domhandler@5.0.3:
-    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
-    engines: {node: '>= 4'}
-
-  domutils@3.1.0:
-    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
-
-  entities@4.5.0:
-    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
-    engines: {node: '>=0.12'}
-
  entities@6.0.1:
    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
    engines: {node: '>=0.12'}
@@ -1040,9 +1003,6 @@ packages:
    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
    engines: {node: '>=18'}

-  htmlparser2@8.0.2:
-    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
-
  http-proxy-agent@7.0.2:
    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
    engines: {node: '>= 14'}
@@ -1212,18 +1172,9 @@ packages:
    resolution: {integrity: sha512-lgimEHPE/QDgFlywTd8yTR61ptugX3Qer29efeyWw2rv259HtGBNn1vZVmp8lB9uo9wC0t/AT4iGqXxia+CJFg==}
    engines: {node: '>=6.0.0'}

-  nth-check@2.1.1:
-    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
-
  oauth4webapi@3.8.1:
    resolution: {integrity: sha512-olkZDELNycOWQf9LrsELFq8n05LwJgV8UkrS0cburk6FOwf8GvLam+YB+Uj5Qvryee+vwWOfQVeI5Vm0MVg7SA==}

-  parse5-htmlparser2-tree-adapter@7.0.0:
-    resolution: {integrity: sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==}
-
-  parse5@7.1.2:
-    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
-
  parse5@8.0.0:
    resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}

@@ -2188,8 +2139,6 @@ snapshots:
    dependencies:
      require-from-string: 2.0.2

-  boolbase@1.0.0: {}
-
  bson@6.10.4: {}

  buffer-from@1.1.2: {}
@@ -2200,25 +2149,6 @@ snapshots:
    dependencies:
      '@kurkle/color': 0.3.4

-  cheerio-select@2.1.0:
-    dependencies:
-      boolbase: 1.0.0
-      css-select: 5.1.0
-      css-what: 6.1.0
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      domutils: 3.1.0
-
-  cheerio@1.0.0-rc.12:
-    dependencies:
-      cheerio-select: 2.1.0
-      dom-serializer: 2.0.0
-      domhandler: 5.0.3
-      domutils: 3.1.0
-      htmlparser2: 8.0.2
-      parse5: 7.1.2
-      parse5-htmlparser2-tree-adapter: 7.0.0
-
  chokidar@4.0.3:
    dependencies:
      readdirp: 4.1.2
@@ -2249,21 +2179,11 @@ snapshots:

  cookie@0.6.0: {}

-  css-select@5.1.0:
-    dependencies:
-      boolbase: 1.0.0
-      css-what: 6.1.0
-      domhandler: 5.0.3
-      domutils: 3.1.0
-      nth-check: 2.1.1
-
  css-tree@3.1.0:
    dependencies:
      mdn-data: 2.12.2
      source-map-js: 1.2.1

-  css-what@6.1.0: {}
-
  css.escape@1.5.1: {}

  cssstyle@5.3.3:
@@ -2305,26 +2225,6 @@ snapshots:

  dom-accessibility-api@0.6.3: {}

-  dom-serializer@2.0.0:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      entities: 4.5.0
-
-  domelementtype@2.3.0: {}
-
-  domhandler@5.0.3:
-    dependencies:
-      domelementtype: 2.3.0
-
-  domutils@3.1.0:
-    dependencies:
-      dom-serializer: 2.0.0
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-
-  entities@4.5.0: {}
-
  entities@6.0.1: {}

  es-module-lexer@1.7.0: {}
@@ -2408,13 +2308,6 @@ snapshots:
    dependencies:
      whatwg-encoding: 3.1.1

-  htmlparser2@8.0.2:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      domutils: 3.1.0
-      entities: 4.5.0
-
  http-proxy-agent@7.0.2:
    dependencies:
      agent-base: 7.1.4
@@ -2585,21 +2478,8 @@ snapshots:

  node-cron@4.2.1: {}

-  nth-check@2.1.1:
-    dependencies:
-      boolbase: 1.0.0
-
  oauth4webapi@3.8.1: {}

-  parse5-htmlparser2-tree-adapter@7.0.0:
-    dependencies:
-      domhandler: 5.0.3
-      parse5: 7.1.2
-
-  parse5@7.1.2:
-    dependencies:
-      entities: 4.5.0
-
  parse5@8.0.0:
    dependencies:
      entities: 6.0.1
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -40,7 +40,7 @@ const img_alt = $derived(
 </script>
 <style>
 .card_anchor{
-	border-radius: 20px;
+	border-radius: var(--radius-card);
 	cursor: pointer;
 	display: inline-block;
 	text-decoration: none;
@@ -67,48 +67,38 @@ const img_alt = $derived(
 	--card-width: 300px;
 	position: relative;
 	flex-shrink: 0;
-	transition: 200ms;
+	transition: var(--transition-normal);
 	text-decoration: none;
 	box-sizing: border-box;
 	font-family: sans-serif;
 	cursor: pointer;
 	height: 525px;
 	width: 300px;
-	border-radius: 20px;
+	border-radius: var(--radius-card);
 	background-size: contain;
 	display: flex;
 	flex-direction: column;
 	justify-content: end;
 	background-color:  var(--blue);
-	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
+	box-shadow: var(--shadow-lg);
 }
+/* Position/size overrides for global g-icon-badge */
 .icon{
-	font-family: "Noto Color Emoji", emoji, sans-serif;
-	border: none;
-	background: none;
-	cursor: pointer;
 	position: absolute;
 	top: -25px;
 	right: -25px;
 	width: 50px;
 	height: 50px;
-	border-radius: 50%;
+	font-size: 1.5em;
 	background-color: var(--nord0);
 	color: white;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 1.5em;
-	box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
-	transition: 100ms;
 	z-index: 5;
-	text-decoration: none;
 }
 .image{
 	width: 300px;
 	height: 255px;
 	object-fit: cover;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 .blur{
 	filter: blur(10px);
@@ -137,7 +127,7 @@ const img_alt = $derived(
 .card:focus-within{
 	transform: scale(1.02,1.02);
 	background-color: var(--red);
-	box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
+	box-shadow: var(--shadow-hover);
 }
 .card:focus{
 	scale: 0.95 0.95;
@@ -153,7 +143,7 @@ const img_alt = $derived(
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-	transition: 100ms;
+	transition: var(--transition-fast);
 }
 .name{
 	font-size: 2em;
@@ -175,59 +165,27 @@ const img_alt = $derived(
 	margin-bottom:0.5em;
 	flex-grow: 0;
 }
+/* Overrides for Card tags - uses g-tag base, with Card-specific adjustments */
 .tag{
-	cursor: pointer;
-	text-decoration: none;
 	background-color: var(--nord4);
-	color: var(--nord0);
-	border-radius: 100px;
 	padding-inline: 1em;
 	line-height: 1.5em;
 	margin-bottom: 0.5em;
-	transition: 100ms;
-	box-shadow: 0em 0em 0.2em 0.05em rgba(0, 0, 0, 0.3);
-	border: none;
 	position: relative;
 	z-index: 2;
-	display: inline-block;
-}
-.tag:hover,
-.tag:focus-visible
-{
-	transform: scale(1.04, 1.04);
-	background-color: var(--nord8);
-	box-shadow: 0.2em 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.3);
-}
-.tag:focus{
-	transition: 100ms;
-	scale: 0.9;
 }
+/* Position overrides for Card category */
 .card_title .category{
 	position: absolute;
-	box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
-	text-decoration: none;
-	color: var(--nord6);
 	font-size: 1.5rem;
 	top: -0.8em;
 	left: -0.5em;
-	background-color: var(--nord0);
 	padding-inline: 1em;
-	border-radius: 1000px;
-	transition: 100ms;
-	border: none;
-	cursor: pointer;
 	z-index: 2;
-	display: inline-block;
 }
 .card_title .category:hover,
-.card_title .category:focus-within
-{
-	box-shadow: -0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.6);
-	background-color: var(--nord3);
-	transform: scale(1.05, 1.05)
-}
-.category:focus{
-	scale: 0.9 0.9;
+.card_title .category:focus-within {
+	transform: scale(1.05);
 }

 .favorite-indicator{
@@ -263,16 +221,10 @@ const img_alt = $derived(
 	background-color: var(--nord12);
 }

+/* Override hover color for Card icon */
 .icon:hover,
-.icon:focus-visible
-{
-	transform: scale(1.1, 1.1);
+.icon:focus-visible {
 	background-color: var(--nord3);
-	box-shadow: 0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.8);
-}
-
-.icon:focus {
-	transform: scale(0.9, 0.9);
 }

 .card:hover .icon,
@@ -313,17 +265,17 @@ const img_alt = $derived(
 		</div>
 	{/if}
 	{#if icon_override || recipe.season.includes(current_month)}
-		<a href="{routePrefix}/icon/{recipe.icon}" class=icon>{recipe.icon}</a>
+		<a href="{routePrefix}/icon/{recipe.icon}" class="icon g-icon-badge">{recipe.icon}</a>
 	{/if}
 	<div class="card_title">
-		<a href="{routePrefix}/category/{recipe.category}" class=category>{recipe.category}</a>
+		<a href="{routePrefix}/category/{recipe.category}" class="category g-pill g-btn-dark">{recipe.category}</a>
 		<div>
 			<div class=name>{@html recipe.name}</div>
 			<div class=description>{@html recipe.description}</div>
 		</div>
 		<div class=tags>
 		{#each recipe.tags as tag}
-			<a href="{routePrefix}/tag/{tag}" class=tag>{tag}</a>
+			<a href="{routePrefix}/tag/{tag}" class="tag g-pill g-interactive">{tag}</a>
 		{/each}
 		</div>
 	</div>
--- a/src/lib/components/IngredientsPage.svelte
+++ b/src/lib/components/IngredientsPage.svelte
@@ -4,6 +4,7 @@ import { onNavigate } from "$app/navigation";
 import { browser } from '$app/environment';
 import { page } from '$app/stores';
 import HefeSwapper from './HefeSwapper.svelte';
+import '$lib/css/recipe-links.css';

 let { data } = $props();

@@ -124,6 +125,15 @@ const labels = $derived({
 	ingredients: isEnglish ? 'Ingredients' : 'Zutaten'
 });

+// Multiplier button options
+const multiplierOptions = [
+	{ value: 0.5, label: '<sup>1</sup>/<sub>2</sub>x' },
+	{ value: 1, label: '1x' },
+	{ value: 1.5, label: '<sup>3</sup>/<sub>2</sub>x' },
+	{ value: 2, label: '2x' },
+	{ value: 3, label: '3x' }
+];
+
 // Calculate yeast IDs for each yeast ingredient
 const yeastIds = $derived.by(() => {
 	const ids = {};
@@ -319,52 +329,34 @@ font-family: sans-serif;
 	column-gap: 0.5em;
 }
 .multipliers{
-	display:flex;
+	display: flex;
 	gap: 0.5rem;
 	justify-content: center;
-	flex-wrap:wrap;
+	flex-wrap: wrap;
 }
+/* Size overrides for multiplier buttons */
 .multipliers button{
 	min-width: 2em;
 	font-size: 1.1rem;
-	border-radius: 0.3rem;
-	border: none;
-	cursor: pointer;
-	transition: 100ms;
-	color: var(--nord0);
-	background-color: var(--nord5);
-	box-shadow: 0px 0px 0.4em 0.05em rgba(0,0,0, 0.2);
+	border-radius: var(--radius-sm);
 }
-@media (prefers-color-scheme: dark){
-	.multipliers button{
-		color: var(--tag-font);
-		background-color: var(--nord6-dark);
-	}
-}
-.multipliers :is(button, div):is(:hover, :focus-within){
+/* Hover scale override - larger than default */
+.multipliers :is(button, form):is(:hover, :focus-within){
 	scale: 1.2;
 	background-color: var(--nord8);
-	box-shadow: 0px 0px 0.5em 0.1em rgba(0,0,0, 0.3);
 }
 .selected{
 	background-color: var(--nord9) !important;
 	color: white !important;
 	font-weight: bold;
 	scale: 1.2 !important;
-	box-shadow: 0px 0px 0.4em 0.1em rgba(0,0,0, 0.3) !important;
 }
 .custom-multiplier {
 	display: flex;
 	align-items: center;
 	min-width: 2em;
 	font-size: 1.1rem;
-	border-radius: 0.3rem;
-	border: none;
-	cursor: pointer;
-	transition: 100ms;
-	color: var(--nord0);
-	background-color: var(--nord5);
-	box-shadow: 0px 0px 0.4em 0.05em rgba(0,0,0, 0.2);
+	border-radius: var(--radius-sm);
 }

 .custom-input {
@@ -399,44 +391,6 @@ font-family: sans-serif;
 	box-shadow: none;
 }

-@media (prefers-color-scheme: dark){
-	.custom-multiplier {
-		color: var(--tag-font);
-		background-color: var(--nord6-dark);
-	}
-}
-
-.custom-multiplier:hover,
-.custom-multiplier:focus-within {
-	scale: 1.2;
-	background-color: var(--nord8);
-	box-shadow: 0px 0px 0.5em 0.1em rgba(0,0,0, 0.3);
-}
-
-/* Base recipe reference link styling */
-h3 a {
-	color: var(--nord10);
-	text-decoration: underline;
-	text-decoration-color: var(--nord10);
-}
-
-h3 a:hover {
-	color: var(--nord9);
-	text-decoration: underline;
-	text-decoration-color: var(--nord9);
-}
-
-@media (prefers-color-scheme: dark) {
-	h3 a {
-		color: var(--nord8);
-		text-decoration-color: var(--nord8);
-	}
-
-	h3 a:hover {
-		color: var(--nord7);
-		text-decoration-color: var(--nord7);
-	}
-}
 </style>
 {#if data.ingredients}
 <div class=ingredients>
@@ -447,65 +401,31 @@ h3 a:hover {

 <h3>{labels.adjustAmount}</h3>
 <div class=multipliers>
-	<form method="get" style="display: inline;">
-		<input type="hidden" name="multiplier" value="0.5" />
+	{#each multiplierOptions as opt}
+		<form method="get" style="display: inline;">
+			<input type="hidden" name="multiplier" value={opt.value} />
+			{#each Array.from(currentParams.entries()) as [key, value]}
+				{#if key !== 'multiplier'}
+					<input type="hidden" name={key} {value} />
+				{/if}
+			{/each}
+			<button type="submit" class="g-pill g-btn-light g-interactive" class:selected={multiplier === opt.value} onclick={(e) => handleMultiplierClick(e, opt.value)}>{@html opt.label}</button>
+		</form>
+	{/each}
+	<form method="get" style="display: inline;" class="custom-multiplier g-pill g-btn-light g-interactive" onsubmit={handleCustomSubmit}>
 		{#each Array.from(currentParams.entries()) as [key, value]}
 			{#if key !== 'multiplier'}
-				<input type="hidden" name={key} value={value} />
+				<input type="hidden" name={key} {value} />
 			{/if}
 		{/each}
-		<button type="submit" class:selected={multiplier==0.5} onclick={(e) => handleMultiplierClick(e, 0.5)}>{@html "<sup>1</sup>/<sub>2</sub>x"}</button>
-	</form>
-	<form method="get" style="display: inline;">
-		<input type="hidden" name="multiplier" value="1" />
-		{#each Array.from(currentParams.entries()) as [key, value]}
-			{#if key !== 'multiplier'}
-				<input type="hidden" name={key} value={value} />
-			{/if}
-		{/each}
-		<button type="submit" class:selected={multiplier==1} onclick={(e) => handleMultiplierClick(e, 1)}>1x</button>
-	</form>
-	<form method="get" style="display: inline;">
-		<input type="hidden" name="multiplier" value="1.5" />
-		{#each Array.from(currentParams.entries()) as [key, value]}
-			{#if key !== 'multiplier'}
-				<input type="hidden" name={key} value={value} />
-			{/if}
-		{/each}
-		<button type="submit" class:selected={multiplier==1.5} onclick={(e) => handleMultiplierClick(e, 1.5)}>{@html "<sup>3</sup>/<sub>2</sub>x"}</button>
-	</form>
-	<form method="get" style="display: inline;">
-		<input type="hidden" name="multiplier" value="2" />
-		{#each Array.from(currentParams.entries()) as [key, value]}
-			{#if key !== 'multiplier'}
-				<input type="hidden" name={key} value={value} />
-			{/if}
-		{/each}
-		<button type="submit" class:selected={multiplier==2} onclick={(e) => handleMultiplierClick(e, 2)}>2x</button>
-	</form>
-	<form method="get" style="display: inline;">
-		<input type="hidden" name="multiplier" value="3" />
-		{#each Array.from(currentParams.entries()) as [key, value]}
-			{#if key !== 'multiplier'}
-				<input type="hidden" name={key} value={value} />
-			{/if}
-		{/each}
-		<button type="submit" class:selected={multiplier==3} onclick={(e) => handleMultiplierClick(e, 3)}>3x</button>
-	</form>
-	<form method="get" style="display: inline;" class="custom-multiplier" onsubmit={handleCustomSubmit}>
-		{#each Array.from(currentParams.entries()) as [key, value]}
-			{#if key !== 'multiplier'}
-				<input type="hidden" name={key} value={value} />
-			{/if}
-		{/each}
-		<input 
-			type="text" 
-			name="multiplier" 
-			pattern="[0-9]+(\.[0-9]*)?" 
-			title="Enter a positive number (e.g., 2.5, 0.75, 3.14)" 
-			placeholder="…" 
+		<input
+			type="text"
+			name="multiplier"
+			pattern="[0-9]+(\.[0-9]*)?"
+			title="Enter a positive number (e.g., 2.5, 0.75, 3.14)"
+			placeholder="…"
 			class="custom-input"
-			value={multiplier != 0.5 && multiplier != 1 && multiplier != 1.5 && multiplier != 2 && multiplier != 3 ? multiplier : ''}
+			value={!multiplierOptions.some(o => o.value === multiplier) ? multiplier : ''}
 			oninput={handleCustomInput}
 		/>
 		<button type="submit" class="custom-button">x</button>
--- a/src/lib/components/InstructionsPage.svelte
+++ b/src/lib/components/InstructionsPage.svelte
@@ -1,4 +1,5 @@
 <script>
+import '$lib/css/recipe-links.css';
 let { data } = $props();

 let multiplier = $state(data.multiplier || 1);
@@ -133,7 +134,7 @@ ol li::marker{
 	flex-grow: 0;
 	padding: 1em;
 	background-color: #FAFAFE;
-	box-shadow: 0.3em 0.3em 1em 0.2em rgba(0,0,0,0.3);
+	box-shadow: var(--shadow-md);
 	max-width: 30%
 }
@media (prefers-color-scheme: dark){
@@ -153,31 +154,6 @@ ol li::marker{
 h3{
 	margin-block: 0;
 }
-
-/* Base recipe reference link styling */
-h3 a {
-	color: var(--nord10);
-	text-decoration: underline;
-	text-decoration-color: var(--nord10);
-}
-
-h3 a:hover {
-	color: var(--nord9);
-	text-decoration: underline;
-	text-decoration-color: var(--nord9);
-}
-
-@media (prefers-color-scheme: dark) {
-	h3 a {
-		color: var(--nord8);
-		text-decoration-color: var(--nord8);
-	}
-
-	h3 a:hover {
-		color: var(--nord7);
-		text-decoration-color: var(--nord7);
-	}
-}
 </style>
 <div class=instructions>
 <div class=additional_info>
--- a/src/lib/css/icon.css
+++ b/src/lib/css/icon.css
@@ -1,52 +1,37 @@
-.icon:focus{
-	scale: 0.8 0.8;
-	rotate: var(--angle, 30deg);
-}
-
-a.icon{
+/* Shared icon styles - position overrides for components using g-icon-badge */
+.icon {
 	--angle: 15deg;
-	--endscale: 1.2;
-	text-decoration: unset;
-	transition: 100ms;
 	position: absolute;
 	font-size: 1.5rem;
-	top:-0.5em;
-	right:-0.5em;
+	top: -0.5em;
+	right: -0.5em;
 	padding: 0.25em;
 	background-color: var(--nord6);
-	border-radius:1000px;
-	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6);
 }
+
+.icon:focus {
+	scale: 0.8;
+	rotate: var(--angle);
+}
+
@media (prefers-color-scheme: dark) {
-	a.icon{
+	.icon {
 		background-color: var(--accent-dark);
 	}
 }
-input.icon{
+
+/* Input-specific overrides */
+input.icon {
 	z-index: 3;
 	box-sizing: border-box;
-	text-decoration: unset;
-	text-align:center;
+	text-align: center;
 	width: 2.6rem;
 	aspect-ratio: 1/1;
-	transition: 100ms;
-	position: absolute;
-	font-size: 1.5rem;
-	top:-0.5em;
-	right:-0.5em;
-	padding: 0.25em;
-	background-color: var(--nord6);
-	border-radius:1000px;
-	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6);
-}
-input.icon:hover,
-input.icon:focus-visible
-{
-	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+	border: none;
 }
+
+/* Animation on hover for links */
 a.icon:hover,
-a.icon:focus-visible
-{
-	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+a.icon:focus-visible {
 	animation: shake 0.6s forwards;
 }
--- a/src/lib/css/nordtheme.css
+++ b/src/lib/css/nordtheme.css
@@ -26,6 +26,16 @@
 	--accent-dark: #1f1f21;
 	--background-dark: #21201b;
 	--font-default-dark: #ffffff;
+	/* Shared transitions & shadows */
+	--transition-fast: 100ms;
+	--transition-normal: 200ms;
+	--shadow-sm: 0 0 0.4em 0.05em rgba(0,0,0,0.2);
+	--shadow-md: 0 0 0.5em 0.1em rgba(0,0,0,0.3);
+	--shadow-lg: 0 0 1em 0.1em rgba(0,0,0,0.4);
+	--shadow-hover: 0.1em 0.1em 0.5em 0.1em rgba(0,0,0,0.3);
+	--radius-pill: 1000px;
+	--radius-card: 20px;
+	--radius-sm: 0.3rem;
 }

 a:not(:visited){
@@ -58,3 +68,111 @@ body{
 		background-color: var(--background-dark);
 	}
 }
+
+/* ========================================
+   Global Utility Classes
+   Use these in components to avoid CSS duplication
+   ======================================== */
+
+/* Pill-shaped element base */
+.g-pill {
+	border-radius: var(--radius-pill);
+	border: none;
+	cursor: pointer;
+	display: inline-block;
+	text-decoration: none;
+	transition: var(--transition-fast);
+}
+
+/* Interactive hover/focus effects */
+.g-interactive {
+	transition: var(--transition-fast);
+}
+.g-interactive:hover,
+.g-interactive:focus-visible {
+	transform: scale(1.05);
+	box-shadow: var(--shadow-hover);
+}
+.g-interactive:focus {
+	scale: 0.9;
+}
+
+/* Light background button (with dark mode) */
+.g-btn-light {
+	background-color: var(--nord5);
+	color: var(--nord0);
+	box-shadow: var(--shadow-sm);
+}
+@media (prefers-color-scheme: dark) {
+	.g-btn-light {
+		background-color: var(--nord0);
+		color: white;
+	}
+}
+
+/* Dark background button */
+.g-btn-dark,
+.g-btn-dark:visited,
+.g-btn-dark:link {
+	background-color: var(--nord0);
+	color: var(--nord6);
+	box-shadow: var(--shadow-lg);
+}
+.g-btn-dark:hover,
+.g-btn-dark:focus-visible {
+	background-color: var(--nord1);
+	color: var(--nord6);
+}
+
+/* Icon badge (circular icon container) */
+.g-icon-badge {
+	font-family: "Noto Color Emoji", emoji, sans-serif;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	text-decoration: none;
+	transition: var(--transition-fast);
+	box-shadow: var(--shadow-lg);
+}
+.g-icon-badge:hover,
+.g-icon-badge:focus-visible {
+	transform: scale(1.1);
+	box-shadow: var(--shadow-hover);
+}
+
+/* Tag/chip styling */
+.g-tag,
+.g-tag:visited,
+.g-tag:link {
+	font-size: 1.1rem;
+	padding: 0.25em 1em;
+	border-radius: var(--radius-pill);
+	background-color: var(--nord5);
+	color: var(--nord0);
+	text-decoration: none;
+	cursor: pointer;
+	transition: var(--transition-fast);
+	box-shadow: var(--shadow-sm);
+	border: none;
+	display: inline-block;
+}
+.g-tag:hover,
+.g-tag:focus-visible {
+	transform: scale(1.05);
+	background-color: var(--nord8);
+	box-shadow: var(--shadow-hover);
+	color: var(--nord0);
+}
+@media (prefers-color-scheme: dark) {
+	.g-tag,
+	.g-tag:visited,
+	.g-tag:link {
+		background-color: var(--nord0);
+		color: white;
+	}
+	.g-tag:hover,
+	.g-tag:focus-visible {
+		color: var(--nord0);
+	}
+}
--- a/src/lib/css/recipe-links.css
+++ b/src/lib/css/recipe-links.css
@@ -0,0 +1,23 @@
+/* Shared link styling for recipe reference links in h3 elements */
+h3 a {
+	color: var(--nord10);
+	text-decoration: underline;
+	text-decoration-color: var(--nord10);
+}
+
+h3 a:hover {
+	color: var(--nord9);
+	text-decoration-color: var(--nord9);
+}
+
+@media (prefers-color-scheme: dark) {
+	h3 a {
+		color: var(--nord8);
+		text-decoration-color: var(--nord8);
+	}
+
+	h3 a:hover {
+		color: var(--nord7);
+		text-decoration-color: var(--nord7);
+	}
+}
--- a/src/lib/js/stripHtmlTags.ts
+++ b/src/lib/js/stripHtmlTags.ts
@@ -1,10 +1,16 @@
 // Function to strip HTML tags from a string
-import {load} from 'cheerio';
-
 export function stripHtmlTags(input: string | undefined | null): string {
  if (!input) {
    return '';
  }
-  const $ = load(input.replace(/&shy;/g, ''));
-  return $.text();
+  return input
+    .replace(/&shy;/g, '')      // Remove soft hyphens
+    .replace(/<[^>]*>/g, '')    // Remove HTML tags
+    .replace(/&amp;/g, '&')     // Decode common HTML entities
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&nbsp;/g, ' ')
+    .trim();
 }
--- a/src/routes/[recipeLang=recipeLang]/[name]/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/[name]/+page.server.ts
@@ -2,18 +2,13 @@ import { redirect, error } from '@sveltejs/kit';
 import { stripHtmlTags } from '$lib/js/stripHtmlTags';

 export async function load({ params, fetch }) {
-    // Fetch recipe data to strip HTML tags server-side
-    // This avoids bundling cheerio in the client bundle
    const isEnglish = params.recipeLang === 'recipes';
    const apiBase = isEnglish ? '/api/recipes' : '/api/rezepte';

    const res = await fetch(`${apiBase}/items/${params.name}`);
    if (!res.ok) {
-        // Let the universal load function handle the error
-        return {
-            strippedName: '',
-            strippedDescription: '',
-        };
+        const errorData = await res.json().catch(() => ({ message: 'Recipe not found' }));
+        throw error(res.status, errorData.message);
    }

    const item = await res.json();
@@ -21,6 +16,7 @@ export async function load({ params, fetch }) {
    const strippedDescription = stripHtmlTags(item.description);

    return {
+        item,
        strippedName,
        strippedDescription,
    };
--- a/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
@@ -115,23 +115,17 @@ h1{
 	hyphens: auto;
 	text-wrap: balance;
 }
+/* Position overrides for global classes */
 .category{
 	--size: 1.75rem;
 	position: absolute;
-	top: calc(-1* var(--size) );
-	left:calc(-3/2 * var(--size));
-	background-color: var(--nord0);
-	color: var(--nord6);
-	text-decoration: none;
+	top: calc(-1* var(--size));
+	left: calc(-3/2 * var(--size));
 	font-size: var(--size);
 	padding: calc(var(--size) * 2/3);
-	border-radius: 1000px;
-	transition: 100ms;
-	box-shadow: 0em 0em 1em 0.3em rgba(0,0,0,0.4);
 }
 .category:hover,
 .category:focus-visible{
-	background-color: var(--nord1);
 	scale: 1.1;
 }
 .tags{
@@ -150,30 +144,6 @@ h2.section-label{
 .center{
 	justify-content: center;
 }
-.tag{
-	all:unset;
-	color: var(--nord0);
-	font-size: 1.1rem;
-	background-color: var(--nord5);
-	border-radius: 10000px;
-	padding: 0.25em 1em;
-	transition: 100ms;
-	box-shadow: 0em 0em 0.5em 0.05em rgba(0,0,0,0.3);
-}
-@media (prefers-color-scheme: dark) {
-	.tag{
-		background-color: var(--nord0);
-		color: white;
-	}
-}
-.tag:hover,
-.tag:focus-visible
-{
-	cursor: pointer;
-	transform: scale(1.1,1.1);
-	background-color: var(--nord8);
-	box-shadow: 0.1em 0.1em 0.5em 0.1em rgba(0,0,0,0.3);
-}

 .wrapper_wrapper{
 	background-color: #fbf9f3;
@@ -220,27 +190,21 @@ h2.section-label{
 }

 .icon{
-	font-family: "Noto Color Emoji", emoji;
 	position: absolute;
 	top: -1em;
 	right: -0.75em;
-	text-decoration: unset;
-	background-color: #FAFAFE;
 	padding: 0.5em;
 	font-size: 1.5rem;
-	border-radius: 100000px;
-	transition: 100ms;
-	box-shadow: 0em 0em 1em 0.3em rgba(0,0,0,0.4);
+	background-color: #FAFAFE;
 }
@media (prefers-color-scheme: dark) {
 	.icon{
 		background-color: var(--accent-dark);
 	}
 }
-
 .icon:hover,
 .icon:focus-visible{
-	scale: 1.2 1.2;
+	scale: 1.2;
 	animation: shake 0.5s ease forwards;
 }

@@ -322,8 +286,8 @@ h2{

 <TitleImgParallax src={hero_img_src} {placeholder_src} alt={img_alt}>
 	<div class=title>
-		<a class="category" href='/{data.recipeLang}/category/{data.category}'>{data.category}</a>
-		<a class="icon" href='/{data.recipeLang}/icon/{data.icon}'>{data.icon}</a>
+		<a class="category g-pill g-btn-dark" href='/{data.recipeLang}/category/{data.category}'>{data.category}</a>
+		<a class="icon g-icon-badge" href='/{data.recipeLang}/icon/{data.icon}'>{data.icon}</a>
 		<h1>{@html data.name}</h1>
 		{#if data.description && ! data.preamble}
 			<p class=description>{data.description}</p>
@@ -334,7 +298,7 @@ h2{
 		<div class=tags>
 			<h2>{labels.season}</h2>
 			{#each season_iv as season}
-				<a class=tag href="/{data.recipeLang}/season/{season[0]}">
+				<a class="g-tag" href="/{data.recipeLang}/season/{season[0]}">
 					{#if season[0]}
 						{months[season[0] - 1]}
 					{/if}
@@ -347,7 +311,7 @@ h2{
 		<h2 class="section-label">{labels.keywords}</h2>
 		<div class="tags center">
 			{#each data.tags as tag}
-				<a class=tag href="/{data.recipeLang}/tag/{tag}">{tag}</a>
+				<a class="g-tag" href="/{data.recipeLang}/tag/{tag}">{tag}</a>
 			{/each}
 		</div>

--- a/src/routes/[recipeLang=recipeLang]/[name]/+page.ts
+++ b/src/routes/[recipeLang=recipeLang]/[name]/+page.ts
@@ -1,15 +1,10 @@
-import { error } from "@sveltejs/kit";
 import { generateRecipeJsonLd } from '$lib/js/recipeJsonLd';

 export async function load({ fetch, params, url, data }) {
    const isEnglish = params.recipeLang === 'recipes';
-    const apiBase = isEnglish ? '/api/recipes' : '/api/rezepte';

-    const res = await fetch(`${apiBase}/items/${params.name}`);
-    let item = await res.json();
-    if(!res.ok){
-	    throw error(res.status, item.message)
-    }
+    // Use item from server load - no duplicate fetch needed
+    let item = { ...data.item };

    // Check if this recipe is favorited by the user
    let isFavorite = false;
@@ -118,8 +113,11 @@ export async function load({ fetch, params, url, data }) {
    const englishShortName = !isEnglish ? (item.translations?.en?.short_name || '') : '';
    const germanShortName = isEnglish ? (item.germanShortName || '') : item.short_name;

+    // Destructure to exclude item (already spread below)
+    const { item: _, ...serverData } = data;
+
    return {
-        ...data,  // Include server load data (strippedName, strippedDescription)
+        ...serverData,  // Include server load data (strippedName, strippedDescription)
        ...item,
        isFavorite,
        multiplier,
--- a/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.server.ts
@@ -1,12 +1,13 @@
 import type { PageServerLoad } from "./$types";
 import { redirect, error } from '@sveltejs/kit';

-export const load: PageServerLoad = async ({ fetch, locals }) => {
+export const load: PageServerLoad = async ({ fetch, locals, url, params }) => {
 	const session = await locals.auth();

 	// Redirect to login if not authenticated
 	if (!session?.user?.nickname) {
-		throw redirect(302, '/login?callbackUrl=/rezepte/untranslated');
+		const callbackUrl = encodeURIComponent(url.pathname);
+		throw redirect(302, `/login?callbackUrl=${callbackUrl}`);
 	}

 	// Check user group permission
@@ -21,6 +22,7 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
 			return {
 				untranslated: [],
 				session,
+				recipeLang: params.recipeLang,
 				error: 'Fehler beim Laden der unübersetzten Rezepte'
 			};
 		}
@@ -29,12 +31,14 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {

 		return {
 			untranslated,
-			session
+			session,
+			recipeLang: params.recipeLang
 		};
 	} catch (e) {
 		return {
 			untranslated: [],
 			session,
+			recipeLang: params.recipeLang,
 			error: 'Fehler beim Laden der unübersetzten Rezepte'
 		};
 	}
--- a/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte
@@ -127,16 +127,16 @@ h1 {
 			<Card
 				{recipe}
 				{current_month}
-				routePrefix="/rezepte"
+				routePrefix="/{data.recipeLang}"
 				translationStatus={recipe.translationStatus}
 			></Card>
 		{/each}
 	</Recipes>
 {:else}
 	<div class="empty-state">
-		<p>🎉 Alle Rezepte sind übersetzt!</p>
+		<p>Alle Rezepte sind übersetzt!</p>
 		<p style="font-size: 1rem; margin-top: 1rem;">
-			<a href="/rezepte">Zurück zu den Rezepten</a>
+			<a href="/{data.recipeLang}">Zurück zu den Rezepten</a>
 		</p>
 	</div>
 {/if}
--- a/src/routes/[recipeLang=recipeLang]/administration/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/administration/+page.svelte
@@ -16,7 +16,7 @@
 			description: isEnglish
 				? 'View and manage recipes that need translation'
 				: 'Rezepte ansehen und verwalten, die übersetzt werden müssen',
-			href: '/rezepte/untranslated',
+			href: `/${data.recipeLang}/admin/untranslated`,
 			icon: '🌐'
 		},
 		{
--- a/src/routes/rezepte/+layout.server.ts
+++ b/src/routes/rezepte/+layout.server.ts
@@ -1,9 +0,0 @@
-import type { LayoutServerLoad } from './$types';
-
-export const load: LayoutServerLoad = async ({ locals }) => {
-	const session = await locals.auth();
-
-	return {
-		session
-	};
-};
--- a/src/routes/rezepte/+layout.svelte
+++ b/src/routes/rezepte/+layout.svelte
@@ -1,43 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores';
-	import Header from '$lib/components/Header.svelte';
-	import UserHeader from '$lib/components/UserHeader.svelte';
-	import LanguageSelector from '$lib/components/LanguageSelector.svelte';
-
-	let { data, children } = $props();
-	let user = $derived(data.session?.user);
-
-	function isActive(path: string) {
-		const currentPath = $page.url.pathname;
-		return currentPath.startsWith(path);
-	}
-</script>
-
-<Header>
-	{#snippet links()}
-		<ul class="site_header">
-			<li><a href="/rezepte" class:active={isActive('/rezepte') && $page.url.pathname === '/rezepte'}>Alle Rezepte</a></li>
-			{#if user}
-				<li><a href="/rezepte/favorites" class:active={isActive('/rezepte/favorites')}>Favoriten</a></li>
-			{/if}
-			<li><a href="/rezepte/season" class:active={isActive('/rezepte/season')}>Saison</a></li>
-			<li><a href="/rezepte/category" class:active={isActive('/rezepte/category')}>Kategorie</a></li>
-			<li><a href="/rezepte/icon" class:active={isActive('/rezepte/icon')}>Icon</a></li>
-			<li><a href="/rezepte/tag" class:active={isActive('/rezepte/tag')}>Tags</a></li>
-		</ul>
-	{/snippet}
-
-	{#snippet language_selector_mobile()}
-		<LanguageSelector />
-	{/snippet}
-
-	{#snippet language_selector_desktop()}
-		<LanguageSelector />
-	{/snippet}
-
-	{#snippet right_side()}
-		<UserHeader {user} recipeLang="rezepte" lang="de"></UserHeader>
-	{/snippet}
-
-	{@render children()}
-</Header>