From 4191012cf15e81e007bf2c975d6342c216c85f76 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Sun, 15 Feb 2026 22:26:22 +0100
Subject: [PATCH] css: consolidate stylesheets into single source of truth
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Merge nordtheme.css tokens and utility classes into app.css, import
app.css once in root layout, delete redundant files (nordtheme.css,
form.css, rosenkranz.css), move domain CSS to layouts, fix broken
shake keyframe in action_button.css, and scope form styles to the
two pages that need them. 10 CSS files → 6, 41 redundant imports removed.
---
 src/app.css                                   | 174 ++++++++++-----
 src/lib/components/ActionButton.svelte        |   1 -
 src/lib/components/Header.svelte              |   1 -
 src/lib/components/SearchInput.svelte         |   1 -
 src/lib/components/Symbol.svelte              |   1 -
 src/lib/components/TagBall.svelte             |   1 -
 src/lib/components/recipes/Card.svelte        |   1 -
 .../components/recipes/CategoryFilter.svelte  |   1 -
 .../components/recipes/CreateStepList.svelte  |   1 -
 .../components/recipes/FavoritesFilter.svelte |   1 -
 src/lib/components/recipes/FilterPanel.svelte |   1 -
 src/lib/components/recipes/Icon.svelte        |   1 -
 src/lib/components/recipes/IconFilter.svelte  |   1 -
 src/lib/components/recipes/IconLayout.svelte  |   1 -
 .../components/recipes/IngredientsPage.svelte |   2 -
 .../recipes/InstructionsPage.svelte           |   1 -
 .../components/recipes/LogicModeToggle.svelte |   1 -
 .../components/recipes/MediaScroller.svelte   |   1 -
 src/lib/components/recipes/Search.svelte      |   1 -
 .../components/recipes/SeasonFilter.svelte    |   1 -
 .../components/recipes/SeasonLayout.svelte    |   1 -
 .../components/recipes/SeasonSelect.svelte    |   1 -
 src/lib/components/recipes/TagChip.svelte     |   1 -
 src/lib/components/recipes/TagFilter.svelte   |   1 -
 src/lib/css/action_button.css                 |  32 +--
 src/lib/css/form.css                          |  51 -----
 src/lib/css/nordtheme.css                     | 178 ----------------
 src/lib/css/rosenkranz.css                    | 198 ------------------
 src/routes/(main)/+page.svelte                |   1 -
 src/routes/(main)/register/+page.svelte       |  40 +++-
 src/routes/(main)/settings/+page.svelte       |  37 +++-
 src/routes/+layout.svelte                     |   1 +
 .../[faithLang=faithLang]/+layout.svelte      |   1 +
 .../[prayers=prayersLang]/+page.svelte        |   2 -
 .../[prayer]/+page.svelte                     |   2 -
 .../[rosary=rosaryLang]/+page.svelte          |  10 +-
 .../[recipeLang=recipeLang]/+layout.svelte    |   1 +
 .../[name]/+page.svelte                       |   1 -
 .../[recipeLang=recipeLang]/add/+page.svelte  |   1 -
 .../admin/untranslated/+page.svelte           |   1 -
 .../administration/+page.svelte               |   1 -
 .../category/+page.svelte                     |   1 -
 .../edit/[name]/+page.svelte                  |   1 -
 .../favorites/+page.svelte                    |   1 -
 .../[recipeLang=recipeLang]/icon/+page.svelte |   1 -
 .../season/+page.svelte                       |   1 -
 .../[recipeLang=recipeLang]/tag/+page.svelte  |   1 -
 47 files changed, 209 insertions(+), 553 deletions(-)
 delete mode 100644 src/lib/css/form.css
 delete mode 100644 src/lib/css/nordtheme.css
 delete mode 100644 src/lib/css/rosenkranz.css

diff --git a/src/app.css b/src/app.css
index e5b6fed..08cb30e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -109,6 +109,35 @@
 	--color-warning: var(--nord13);
 	--color-error: var(--nord11);
 	--color-info: var(--nord10);
+
+	/* 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;
+	--radius-md: 0.5rem;
+	--radius-lg: 0.75rem;
+
+	/* Spacing scale */
+	--space-xs: 0.25rem;
+	--space-sm: 0.5rem;
+	--space-md: 1rem;
+	--space-lg: 1.5rem;
+	--space-xl: 2rem;
+	--space-2xl: 3rem;
+
+	/* Font size scale */
+	--text-sm: 0.85rem;
+	--text-base: 1rem;
+	--text-lg: 1.1rem;
+	--text-xl: 1.5rem;
+	--text-2xl: 2rem;
+	--text-3xl: 3rem;
 }
 
 /* ============================================
@@ -208,65 +237,110 @@ a:focus-visible {
 	color: var(--color-link-hover);
 }
 
+
 /* ============================================
-   FORM STYLES
+   GLOBAL UTILITY CLASSES
    ============================================ */
 
-form {
-	background-color: var(--color-bg-secondary);
-	display: flex;
-	flex-direction: column;
-	max-width: 600px;
-	gap: 0.5em;
-	margin-inline: auto;
-	justify-content: center;
-	align-items: center;
-	padding-block: 2rem;
-	margin-block: 2rem;
-}
-
-form label {
-	font-size: 1.2em;
-}
-
-form input {
-	display: block;
-	font-size: 1.2rem;
-}
-
-form:not(.search) button {
-	background-color: var(--color-accent);
-	color: var(--color-text-on-accent);
+/* Pill-shaped element base */
+.g-pill {
+	border-radius: var(--radius-pill);
 	border: none;
-	padding: 0.5em 1em;
-	font-size: 1.3em;
-	border-radius: 1000px;
-	margin-top: 1em;
-	transition: 100ms;
 	cursor: pointer;
+	display: inline-block;
+	text-decoration: none;
+	transition: var(--transition-fast);
 }
 
-form:not(.search) button:hover,
-form:not(.search) button:focus-visible {
-	background-color: var(--color-accent-hover);
-	scale: 1.1;
+/* 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;
 }
 
-form:not(.search) button:active {
-	background-color: var(--color-accent-active);
+/* Light background button (with dark mode) */
+.g-btn-light {
+	background-color: var(--nord5);
+	color: var(--nord0);
+	box-shadow: var(--shadow-sm);
 }
-
-form p {
-	max-width: 400px;
-	margin-top: 0;
-}
-
-form h4 {
-	margin-bottom: 0;
-}
-
-@media screen and (max-width: 600px) {
-	form {
-		margin-top: 0;
+@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);
 	}
 }
diff --git a/src/lib/components/ActionButton.svelte b/src/lib/components/ActionButton.svelte
index 399b8a9..679f9d8 100644
--- a/src/lib/components/ActionButton.svelte
+++ b/src/lib/components/ActionButton.svelte
@@ -2,7 +2,6 @@
 import type { Snippet } from 'svelte';
 
 let { href, ariaLabel = undefined, children } = $props<{ href: string, ariaLabel?: string, children?: Snippet }>();
-import "$lib/css/nordtheme.css"
 import "$lib/css/action_button.css"
 </script>
 
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 71aa57d..fdd10ed 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import "$lib/css/nordtheme.css"
 import { onMount } from "svelte";
 import { page } from '$app/stores';
 import Symbol from "./Symbol.svelte"
diff --git a/src/lib/components/SearchInput.svelte b/src/lib/components/SearchInput.svelte
index 9bf953a..3a142b4 100644
--- a/src/lib/components/SearchInput.svelte
+++ b/src/lib/components/SearchInput.svelte
@@ -1,5 +1,4 @@
 <script>
-	import "$lib/css/nordtheme.css";
 
 	let {
 		value = $bindable(''),
diff --git a/src/lib/components/Symbol.svelte b/src/lib/components/Symbol.svelte
index 4613054..666ac1b 100644
--- a/src/lib/components/Symbol.svelte
+++ b/src/lib/components/Symbol.svelte
@@ -1,5 +1,4 @@
 <script>
-	import "$lib/css/nordtheme.css";
 </script>
 <style>
 	:root{
diff --git a/src/lib/components/TagBall.svelte b/src/lib/components/TagBall.svelte
index 61d5369..12c0896 100644
--- a/src/lib/components/TagBall.svelte
+++ b/src/lib/components/TagBall.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 let { tag, ref } = $props<{ tag: string, ref: string }>();
-import '$lib/css/nordtheme.css'
 </script>
 <style>
 a{
diff --git a/src/lib/components/recipes/Card.svelte b/src/lib/components/recipes/Card.svelte
index 86982da..01aab36 100644
--- a/src/lib/components/recipes/Card.svelte
+++ b/src/lib/components/recipes/Card.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import "$lib/css/nordtheme.css";
 import "$lib/css/shake.css";
 import "$lib/css/icon.css";
 import { onMount } from "svelte";
diff --git a/src/lib/components/recipes/CategoryFilter.svelte b/src/lib/components/recipes/CategoryFilter.svelte
index ea4f84e..e7c056a 100644
--- a/src/lib/components/recipes/CategoryFilter.svelte
+++ b/src/lib/components/recipes/CategoryFilter.svelte
@@ -1,5 +1,4 @@
 <script>
-	import "$lib/css/nordtheme.css";
 	import TagChip from '$lib/components/recipes/TagChip.svelte';
 
 	let {
diff --git a/src/lib/components/recipes/CreateStepList.svelte b/src/lib/components/recipes/CreateStepList.svelte
index 08bd783..758d518 100644
--- a/src/lib/components/recipes/CreateStepList.svelte
+++ b/src/lib/components/recipes/CreateStepList.svelte
@@ -5,7 +5,6 @@ import Cross from '$lib/assets/icons/Cross.svelte'
 import Plus from '$lib/assets/icons/Plus.svelte'
 import Check from '$lib/assets/icons/Check.svelte'
 
-import '$lib/css/nordtheme.css'
 import "$lib/css/action_button.css"
 
 import { do_on_key } from '$lib/components/recipes/do_on_key.js'
diff --git a/src/lib/components/recipes/FavoritesFilter.svelte b/src/lib/components/recipes/FavoritesFilter.svelte
index c964a97..9bd6762 100644
--- a/src/lib/components/recipes/FavoritesFilter.svelte
+++ b/src/lib/components/recipes/FavoritesFilter.svelte
@@ -1,5 +1,4 @@
 <script>
-	import "$lib/css/nordtheme.css";
 	import Toggle from '$lib/components/Toggle.svelte';
 
 	let {
diff --git a/src/lib/components/recipes/FilterPanel.svelte b/src/lib/components/recipes/FilterPanel.svelte
index f5a4394..6e4505e 100644
--- a/src/lib/components/recipes/FilterPanel.svelte
+++ b/src/lib/components/recipes/FilterPanel.svelte
@@ -1,5 +1,4 @@
 <script>
-	import "$lib/css/nordtheme.css";
 	import CategoryFilter from './CategoryFilter.svelte';
 	import TagFilter from './TagFilter.svelte';
 	import IconFilter from './IconFilter.svelte';
diff --git a/src/lib/components/recipes/Icon.svelte b/src/lib/components/recipes/Icon.svelte
index 6be97a1..2a59dbb 100644
--- a/src/lib/components/recipes/Icon.svelte
+++ b/src/lib/components/recipes/Icon.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '$lib/css/nordtheme.css';
 	import "$lib/css/shake.css"
 	let { icon, ...restProps } = $props<{ icon: string, [key: string]: any }>();
 </script>
diff --git a/src/lib/components/recipes/IconFilter.svelte b/src/lib/components/recipes/IconFilter.svelte
index 22b2660..88127c1 100644
--- a/src/lib/components/recipes/IconFilter.svelte
+++ b/src/lib/components/recipes/IconFilter.svelte
@@ -1,5 +1,4 @@
 <script>
-	import "$lib/css/nordtheme.css";
 	import TagChip from '$lib/components/recipes/TagChip.svelte';
 
 	let {
diff --git a/src/lib/components/recipes/IconLayout.svelte b/src/lib/components/recipes/IconLayout.svelte
index a41daa8..e780b8e 100644
--- a/src/lib/components/recipes/IconLayout.svelte
+++ b/src/lib/components/recipes/IconLayout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
-    import '$lib/css/nordtheme.css';
     import Recipes from '$lib/components/recipes/Recipes.svelte';
     import Search from './Search.svelte';
 
diff --git a/src/lib/components/recipes/IngredientsPage.svelte b/src/lib/components/recipes/IngredientsPage.svelte
index b3aa55c..a095a23 100644
--- a/src/lib/components/recipes/IngredientsPage.svelte
+++ b/src/lib/components/recipes/IngredientsPage.svelte
@@ -4,8 +4,6 @@ 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();
 
 // Helper function to multiply numbers in ingredient amounts
diff --git a/src/lib/components/recipes/InstructionsPage.svelte b/src/lib/components/recipes/InstructionsPage.svelte
index 9098dfc..b5e8868 100644
--- a/src/lib/components/recipes/InstructionsPage.svelte
+++ b/src/lib/components/recipes/InstructionsPage.svelte
@@ -1,5 +1,4 @@
 <script>
-import '$lib/css/recipe-links.css';
 let { data } = $props();
 
 let multiplier = $state(data.multiplier || 1);
diff --git a/src/lib/components/recipes/LogicModeToggle.svelte b/src/lib/components/recipes/LogicModeToggle.svelte
index 51dc18c..7a617a1 100644
--- a/src/lib/components/recipes/LogicModeToggle.svelte
+++ b/src/lib/components/recipes/LogicModeToggle.svelte
@@ -1,5 +1,4 @@
 <script>
-	import "$lib/css/nordtheme.css";
 
 	let {
 		useAndLogic = true,
diff --git a/src/lib/components/recipes/MediaScroller.svelte b/src/lib/components/recipes/MediaScroller.svelte
index 34e7871..0f5228a 100644
--- a/src/lib/components/recipes/MediaScroller.svelte
+++ b/src/lib/components/recipes/MediaScroller.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 import type { Snippet } from 'svelte';
-import "$lib/css/nordtheme.css"
 let { title = '', children } = $props<{ title?: string, children?: Snippet }>();
 </script>
 <style>
diff --git a/src/lib/components/recipes/Search.svelte b/src/lib/components/recipes/Search.svelte
index 81ae63d..2908c2b 100644
--- a/src/lib/components/recipes/Search.svelte
+++ b/src/lib/components/recipes/Search.svelte
@@ -1,7 +1,6 @@
 <script>
     import {onMount} from "svelte";
     import { browser } from '$app/environment';
-    import "$lib/css/nordtheme.css";
     import FilterPanel from './FilterPanel.svelte';
     import { getCategories } from '$lib/js/categories';
 
diff --git a/src/lib/components/recipes/SeasonFilter.svelte b/src/lib/components/recipes/SeasonFilter.svelte
index 9dc00b6..791c789 100644
--- a/src/lib/components/recipes/SeasonFilter.svelte
+++ b/src/lib/components/recipes/SeasonFilter.svelte
@@ -1,5 +1,4 @@
 <script>
-	import "$lib/css/nordtheme.css";
 	import TagChip from '$lib/components/recipes/TagChip.svelte';
 
 	let {
diff --git a/src/lib/components/recipes/SeasonLayout.svelte b/src/lib/components/recipes/SeasonLayout.svelte
index 13f6d99..621ba7a 100644
--- a/src/lib/components/recipes/SeasonLayout.svelte
+++ b/src/lib/components/recipes/SeasonLayout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
-    import '$lib/css/nordtheme.css';
     import Recipes from '$lib/components/recipes/Recipes.svelte';
     import Search from './Search.svelte';
 
diff --git a/src/lib/components/recipes/SeasonSelect.svelte b/src/lib/components/recipes/SeasonSelect.svelte
index aa6d0bd..7cdf589 100644
--- a/src/lib/components/recipes/SeasonSelect.svelte
+++ b/src/lib/components/recipes/SeasonSelect.svelte
@@ -1,5 +1,4 @@
 <script lang=ts>
-import "$lib/css/nordtheme.css"
 import { season } from '$lib/js/season_store.js'
 import {onMount} from "svelte";
     import {do_on_key} from "./do_on_key";
diff --git a/src/lib/components/recipes/TagChip.svelte b/src/lib/components/recipes/TagChip.svelte
index 37f142e..08af6d7 100644
--- a/src/lib/components/recipes/TagChip.svelte
+++ b/src/lib/components/recipes/TagChip.svelte
@@ -1,5 +1,4 @@
 <script>
-	import "$lib/css/nordtheme.css";
 
 	let {
 		tag = '',
diff --git a/src/lib/components/recipes/TagFilter.svelte b/src/lib/components/recipes/TagFilter.svelte
index f4312da..eacbf0c 100644
--- a/src/lib/components/recipes/TagFilter.svelte
+++ b/src/lib/components/recipes/TagFilter.svelte
@@ -1,5 +1,4 @@
 <script>
-	import "$lib/css/nordtheme.css";
 	import TagChip from '$lib/components/recipes/TagChip.svelte';
 
 	let {
diff --git a/src/lib/css/action_button.css b/src/lib/css/action_button.css
index 212873f..5b63be0 100644
--- a/src/lib/css/action_button.css
+++ b/src/lib/css/action_button.css
@@ -1,3 +1,5 @@
+@import "./shake.css";
+
 :root{
 	--angle: 15deg;
 }
@@ -26,33 +28,3 @@
 	transition: 50ms;
 	scale: 0.8 0.8;
 }
-
-
-@keyframes shake{
-    0%{
-      transform: rotate(0)
-		scale(1,1);
-    }
-    25%{
-    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-      	transform: rotate(--angle)
-      		scale(1.2,1.2)
-      ;
-    }
-    50%{
-
-    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-      	transform: rotate(calc(-1 * --angle))
-      		scale(1.2,1.2);
-    }
-    74%{
-
-    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-  	transform: rotate(--angle)
-  		scale(1.2, 1.2);
-	}
-	100%{
-      transform: rotate(0)
-  		scale(1.2, 1.2);
-    }
-  }
diff --git a/src/lib/css/form.css b/src/lib/css/form.css
deleted file mode 100644
index 4881f86..0000000
--- a/src/lib/css/form.css
+++ /dev/null
@@ -1,51 +0,0 @@
-form{
-	background-color: var(--nord5);
-	display: flex;
-	flex-direction: column;
-	max-width: 600px;
-	gap: 0.5em;
-	margin-inline: auto;
-	justify-content: center;
-	align-items: center;
-	padding-block: 2rem;
-	margin-block: 2rem;
-}
-@media (prefers-color-scheme: dark){
-	form{
-		background-color: var(--accent-dark);
-	}
-}
-form label{
-	font-size: 1.2em;
-}
-form input{
-	display: block;
-	font-size: 1.2rem;
-}
-form button{
-	 background-color: var(--red);
-	 color: white;
-	 border: none;
-	 padding: 0.5em 1em;
-	 font-size: 1.3em;
-	 border-radius: 1000px;
-	 margin-top: 1em;
-	 transition: 100ms;
-}
-form button:hover,
-form button:focus-visible
-{
-	scale: 1.1;
-}
-form p{
-	max-width: 400px;
-	margin-top: 0;
-}
-form h4{
-	margin-bottom:0;
-}
-@media screen and (max-width: 600px){
-	form{
-		margin-top: 0;
-	}
-}
diff --git a/src/lib/css/nordtheme.css b/src/lib/css/nordtheme.css
deleted file mode 100644
index 7e111e6..0000000
--- a/src/lib/css/nordtheme.css
+++ /dev/null
@@ -1,178 +0,0 @@
-:root{
-	--nord0: #2E3440;
-	--nord1: #3B4252;
-	--nord2: #434C5E;
-	--nord3: #4C566A;
-	--nord4: #D8DEE9;
-	--nord5: #E5E9F0;
-	--nord6: #ECEFF4;
-	--nord7: #8FBCBB;
-	--nord8: #88C0D0;
-	--nord9: #81A1C1;
-	--nord10: #5E81AC;
-	--nord11: #BF616A;
-	--nord12: #D08770;
-	--nord13: #EBCB8B;
-	--nord14: #A3BE8C;
-	--nord15: #B48EAD;
-	--lightblue: var(--nord9);
-	--blue: var(--nord10);
-	--red: var(--nord11);
-	--orange: var(--nord12);
-	--yellow: var(--nord13);
-	--green: var(--nord14);
-	--purple: var(--nord15);
-	--nord6-dark: #292c31;
-	--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){
-	color: var(--blue);
-}
-
-a:visited{
-	color: var(--purple);
-}
-
-@media (prefers-color-scheme: dark) {
-	a:not(:visited){
-		color: var(--nord8);
-	}
-}
-
-*{
-	box-sizing: border-box;
-	font-family: Helvetica, Arial, "Noto Sans", sans-serif
-}
-body{
-	margin:0;
-	padding:0;
-	background-color: #fbf9f3;
-	overflow-x: hidden;
-}
-@media (prefers-color-scheme: dark) {
-	body{
-		color: white;
-		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);
-	}
-}
diff --git a/src/lib/css/rosenkranz.css b/src/lib/css/rosenkranz.css
deleted file mode 100644
index 53734f1..0000000
--- a/src/lib/css/rosenkranz.css
+++ /dev/null
@@ -1,198 +0,0 @@
-@font-face {
-  font-family: 'LibertineMinimal';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/LinLibertine_minimal.woff2) format('woff2'),
-       url(/fonts/LinLibertine_minimal.ttf) format('truetype');
- }
-.sbeads{
-	fill: var(--nord10);
-}
-
-.chain{
-	stroke:black;
-	stroke-width: 0.7;
-	stroke-miterlimit: 4;
-	stroke: gray;
-	fill: none;
-}
-
-.sbeads circle.hitbox{
-	r: 3.2px;
-	stroke-width:0;
-}
-
-#start1 circle{
-	cx:15.559271px;
-	cy: 20.881956px;
-}
-#start2 circle{
-        cx:21.633902px;
-	cy:20.367514px;
-}
-#start3 circle{
-	cx:27.96961px;
-	cy:21.178484px;
-}
-#lbead5 circle{
-        cx:118.50725px;
-        cy:59.477211px;
-}
-#lbead4 circle{
-        cx:126.81134px;
-        cy:15.751753px;
-}
-#lbead1 circle{
-           cx:7.6719489px;
-           cy:25.364584px;
-}
-#lbead2 circle{
-           cx:36.798512px;
-           cy:23.486462px;
-}
-#lbead3 circle{
-           cx:84.105789px;
-           cy:3.0456686px;
-}
-#lbead6 circle{
-           cx:72.185097px;
-           cy:64.006859px;
-   }
-#start1:hover .msg,
-#start2:hover .msg,
-#start3:hover .msg,
-#secret1:hover .msg,
-#secret2:hover .msg,
-#secret3:hover .msg,
-#secret4:hover .msg,
-#secret5:hover .msg,
-#lbeads .beforedecades:hover .msg,
-#lbeads .afterdecade:hover .msg,
-#cross:hover .msg
-{
-	display:block;
-}
-
-#start1:hover .sbeads circle:not(.hitbox),
-#start2:hover .sbeads circle:not(.hitbox),
-#start3:hover .sbeads circle:not(.hitbox),
-#secret1:hover .sbeads circle,
-#secret2:hover .sbeads circle,
-#secret3:hover .sbeads circle,
-#secret4:hover .sbeads circle,
-#secret5:hover .sbeads circle
-{
-	fill: var(--nord11);
-	r: 1.5px;
-}
-#lbead1:hover .lbead,
-#lbead2:hover .lbead,
-#lbead3:hover .lbead,
-#lbead4:hover .lbead,
-#lbead5:hover .lbead,
-#lbead6:hover .lbead{
-	r: 2.8px;
-	fill: var(--nord11);
-}
-#cross:hover .symbol{
-	fill: var(--nord11);
-	stroke: var(--nord11);
-	stroke-width: 0.25;
-}
-#lbeads.msg{
-	display:block;
-}
-.sbeads circle{
-	r: 1.25px;
-}
-.msg .diff{
-	fill: var(--nord11);
-}
-.msg .b{
-	font-family: crosses;
-	font-weight: bold;
-}
-.msg .title{
-	fill: var(--nord10);
-	font-weight: bold;
-	font-size: 5px;
-}
-.msg{
-	font-size: 4px;
-	stroke: none;
-	fill: var(--nord4);
-	display:none;
-}
-text{
-	font-family: LibertineMinimal;
-}
-#lbeads circle.hitbox{
-	r:5px;
-	stroke:none;
-	stroke-width:0;
-}
-.lbead{
-	fill: var(--nord12);
-	r: 2.65px;
-}
-
-.hitbox{
-	opacity:0;
-	stroke-width: 2;
-	fill: red;
-	stroke: red;
-}
-#coin circle{
-	r: 2.7px;
-	fill:darkgray;
-}
-
-#coin text{
-	fill:var(--nord0);
-	font-size: 4.259px;
-	line-height:1.25;
-	font-family: crosses;
-}
-
-#cross .symbol{
-	font-family: crosses;
-	fill: var(--nord4);
-	font-size: 17.3637px;
-	line-height: 1.25;
-	stroke-width:0.434093
-}
-
-table{
-	width: 100%;
-	border-collapse: collapse;
-}
-td{
-	text-align:center;
-	border-left: 1px solid;
-	border-right: 1px solid;
-	border-color: var(--nord2);
-	padding-left: 5px;
-	padding-right: 5px;
-}
-
-tr :last-child{
-	border-right: none;
-}
-
-tr :first-child{
-	border-left: 0px solid;
-}
-
-thead td{
-        color: var(--nord4);
-	border-bottom-width: 3px;
-	border-bottom-color: var(--nord10);
-	border-bottom-style: dotted;
-	font-size: 110%;
-	font-weight: bold;
-}
-.table{
-	width:100%;
-	overflow-x: auto;
-}
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
index 5f5f268..c049ba2 100644
--- a/src/routes/(main)/+page.svelte
+++ b/src/routes/(main)/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import "$lib/css/nordtheme.css";
 	import LinksGrid from "$lib/components/LinksGrid.svelte";
 	import { onMount } from 'svelte';
 	let { data } = $props();
diff --git a/src/routes/(main)/register/+page.svelte b/src/routes/(main)/register/+page.svelte
index 0b0bb9a..76598c5 100644
--- a/src/routes/(main)/register/+page.svelte
+++ b/src/routes/(main)/register/+page.svelte
@@ -1,6 +1,40 @@
-<script>
-import "$lib/css/form.css"
-</script>
+<style>
+form {
+	background-color: var(--color-bg-secondary);
+	display: flex;
+	flex-direction: column;
+	max-width: 600px;
+	gap: 0.5em;
+	margin-inline: auto;
+	justify-content: center;
+	align-items: center;
+	padding-block: 2rem;
+	margin-block: 2rem;
+}
+form label { font-size: 1.2em; }
+form input { display: block; font-size: 1.2rem; }
+form button {
+	background-color: var(--color-accent);
+	color: var(--color-text-on-accent);
+	border: none;
+	padding: 0.5em 1em;
+	font-size: 1.3em;
+	border-radius: 1000px;
+	margin-top: 1em;
+	transition: 100ms;
+	cursor: pointer;
+}
+form button:hover, form button:focus-visible {
+	background-color: var(--color-accent-hover);
+	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; }
+}
+</style>
 
 <form action="?/register" method=POST>
 	<h1>Registrieren</h1>
diff --git a/src/routes/(main)/settings/+page.svelte b/src/routes/(main)/settings/+page.svelte
index 841497a..61ba0b5 100644
--- a/src/routes/(main)/settings/+page.svelte
+++ b/src/routes/(main)/settings/+page.svelte
@@ -3,9 +3,44 @@
 	export let data
   let password;
 	const admin = data.user?.access.includes('admin') ?? false
-  import "$lib/css/form.css"
+
 </script>
 <style>
+form {
+	background-color: var(--color-bg-secondary);
+	display: flex;
+	flex-direction: column;
+	max-width: 600px;
+	gap: 0.5em;
+	margin-inline: auto;
+	justify-content: center;
+	align-items: center;
+	padding-block: 2rem;
+	margin-block: 2rem;
+}
+form label { font-size: 1.2em; }
+form input { display: block; font-size: 1.2rem; }
+form button {
+	background-color: var(--color-accent);
+	color: var(--color-text-on-accent);
+	border: none;
+	padding: 0.5em 1em;
+	font-size: 1.3em;
+	border-radius: 1000px;
+	margin-top: 1em;
+	transition: 100ms;
+	cursor: pointer;
+}
+form button:hover, form button:focus-visible {
+	background-color: var(--color-accent-hover);
+	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; }
+}
 input:invalid + div{
   display: none;
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 10a92f9..e75c657 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script>
+	import '../app.css';
 	let { children } = $props();
 </script>
 
diff --git a/src/routes/[faithLang=faithLang]/+layout.svelte b/src/routes/[faithLang=faithLang]/+layout.svelte
index c5bad1c..c917c4d 100644
--- a/src/routes/[faithLang=faithLang]/+layout.svelte
+++ b/src/routes/[faithLang=faithLang]/+layout.svelte
@@ -1,4 +1,5 @@
 <script>
+import '$lib/css/christ.css';
 import { page } from '$app/stores';
 import Header from '$lib/components/Header.svelte'
 import UserHeader from '$lib/components/UserHeader.svelte';
diff --git a/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/+page.svelte b/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/+page.svelte
index e2e4218..62459d4 100644
--- a/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/+page.svelte
+++ b/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/+page.svelte
@@ -2,8 +2,6 @@
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import { createLanguageContext } from "$lib/contexts/languageContext.js";
-	import "$lib/css/christ.css";
-	import "$lib/css/nordtheme.css";
 	import Gebet from "./Gebet.svelte";
 	import LanguageToggle from "$lib/components/faith/LanguageToggle.svelte";
 	import SearchInput from "$lib/components/SearchInput.svelte";
diff --git a/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/[prayer]/+page.svelte b/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/[prayer]/+page.svelte
index e29356e..1d970f9 100644
--- a/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/[prayer]/+page.svelte
+++ b/src/routes/[faithLang=faithLang]/[prayers=prayersLang]/[prayer]/+page.svelte
@@ -1,8 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
 	import { createLanguageContext } from "$lib/contexts/languageContext.js";
-	import "$lib/css/christ.css";
-	import "$lib/css/nordtheme.css";
 	import LanguageToggle from "$lib/components/faith/LanguageToggle.svelte";
 	import Kreuzzeichen from "$lib/components/faith/prayers/Kreuzzeichen.svelte";
 	import GloriaPatri from "$lib/components/faith/prayers/GloriaPatri.svelte";
diff --git a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
index df71008..984f9d7 100644
--- a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
+++ b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
@@ -3,7 +3,6 @@ import { onMount, tick } from "svelte";
 import { createLanguageContext } from "$lib/contexts/languageContext.js";
 import { createPip } from "$lib/js/pip.svelte";
 import PipImage from "$lib/components/faith/PipImage.svelte";
-import "$lib/css/christ.css";
 import "$lib/css/action_button.css";
 import Kreuzzeichen from "$lib/components/faith/prayers/Kreuzzeichen.svelte";
 import Credo from "$lib/components/faith/prayers/Credo.svelte";
@@ -75,6 +74,7 @@ let currentMysteryDescriptions = $derived(data.mysteryDescriptions[selectedMyste
 // Function to switch mysteries
 function selectMystery(mysteryType) {
 	selectedMystery = mysteryType;
+	lastMysteryTarget = 'before';
 }
 
 // Build URLs preserving full state (for no-JS fallback)
@@ -163,6 +163,7 @@ $effect(() => {
 
 let mysteryImageContainer;
 let mysteryScrollRaf = null;
+let lastMysteryTarget = 'before';
 
 function scrollMysteryImage(targetY, duration = 1200) {
 	if (!mysteryImageContainer) return;
@@ -193,14 +194,17 @@ $effect(() => {
 		// Edge pads (before/after): scroll flush so previous image hides behind the header
 		const offset = isEdge ? 0 : rem * IMAGE_COL_HEADER_OFFSET;
 		const target = Math.max(0, targetEl.offsetTop - offset);
-		if (isEdge) {
-			// Snap instantly when jumping to top/bottom
+		// Smooth-scroll the last image away when naturally transitioning from decade 5 to 'after'
+		const isNaturalEnd = targetName === 'after' && lastMysteryTarget === 5;
+		if (isEdge && !isNaturalEnd) {
+			// Snap instantly when jumping to top/bottom (not a natural scroll)
 			if (mysteryScrollRaf) cancelAnimationFrame(mysteryScrollRaf);
 			mysteryScrollRaf = null;
 			mysteryImageContainer.scrollTop = target;
 		} else {
 			scrollMysteryImage(target);
 		}
+		lastMysteryTarget = targetName;
 	}
 });
 
diff --git a/src/routes/[recipeLang=recipeLang]/+layout.svelte b/src/routes/[recipeLang=recipeLang]/+layout.svelte
index cf9bb07..b98d388 100644
--- a/src/routes/[recipeLang=recipeLang]/+layout.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+layout.svelte
@@ -1,4 +1,5 @@
 <script>
+import '$lib/css/recipe-links.css';
 import { page } from '$app/stores';
 import Header from '$lib/components/Header.svelte'
 import UserHeader from '$lib/components/UserHeader.svelte';
diff --git a/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte b/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
index 47f6180..ba52ebc 100644
--- a/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
@@ -3,7 +3,6 @@
 	export const multiplier = writable(0);
 
 	import type { PageData } from './$types';
-    	import "$lib/css/nordtheme.css"
 	import EditButton from '$lib/components/EditButton.svelte';
 	import InstructionsPage from '$lib/components/recipes/InstructionsPage.svelte';
 	import IngredientsPage from '$lib/components/recipes/IngredientsPage.svelte';
diff --git a/src/routes/[recipeLang=recipeLang]/add/+page.svelte b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
index e7b5ca5..2ef0dc6 100644
--- a/src/routes/[recipeLang=recipeLang]/add/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
@@ -10,7 +10,6 @@
 	import CreateStepList from '$lib/components/recipes/CreateStepList.svelte';
 	import Toggle from '$lib/components/Toggle.svelte';
 	import '$lib/css/action_button.css';
-	import '$lib/css/nordtheme.css';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
diff --git a/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte b/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte
index 66ef8ef..c26a509 100644
--- a/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import '$lib/css/nordtheme.css';
 	import Recipes from '$lib/components/recipes/Recipes.svelte';
 	import Card from '$lib/components/recipes/Card.svelte';
 
diff --git a/src/routes/[recipeLang=recipeLang]/administration/+page.svelte b/src/routes/[recipeLang=recipeLang]/administration/+page.svelte
index fd9e8f5..de0702d 100644
--- a/src/routes/[recipeLang=recipeLang]/administration/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/administration/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import '$lib/css/nordtheme.css';
 
 	let { data } = $props<{ data: PageData }>();
 
diff --git a/src/routes/[recipeLang=recipeLang]/category/+page.svelte b/src/routes/[recipeLang=recipeLang]/category/+page.svelte
index c05ebe2..86b6a50 100644
--- a/src/routes/[recipeLang=recipeLang]/category/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/category/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import "$lib/css/nordtheme.css";
     let { data } = $props<{ data: PageData }>();
     import TagCloud from '$lib/components/TagCloud.svelte';
     import TagBall from '$lib/components/TagBall.svelte';
diff --git a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
index 7e87cae..0a03abc 100644
--- a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
@@ -15,7 +15,6 @@
 	import { season } from '$lib/js/season_store';
 	import { portions } from '$lib/js/portions_store';
 	import '$lib/css/action_button.css';
-	import '$lib/css/nordtheme.css';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
diff --git a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
index c1daab4..5927dc0 100644
--- a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import '$lib/css/nordtheme.css';
     import Recipes from '$lib/components/recipes/Recipes.svelte';
     import Card from '$lib/components/recipes/Card.svelte';
     import Search from '$lib/components/recipes/Search.svelte';
diff --git a/src/routes/[recipeLang=recipeLang]/icon/+page.svelte b/src/routes/[recipeLang=recipeLang]/icon/+page.svelte
index 92c9323..62bf481 100644
--- a/src/routes/[recipeLang=recipeLang]/icon/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/icon/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import '$lib/css/nordtheme.css';
     import Recipes from '$lib/components/recipes/Recipes.svelte';
     import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
     import SeasonLayout from '$lib/components/recipes/SeasonLayout.svelte'
diff --git a/src/routes/[recipeLang=recipeLang]/season/+page.svelte b/src/routes/[recipeLang=recipeLang]/season/+page.svelte
index 0c29857..52e8d04 100644
--- a/src/routes/[recipeLang=recipeLang]/season/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/season/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import '$lib/css/nordtheme.css';
     import Recipes from '$lib/components/recipes/Recipes.svelte';
     import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
     import SeasonLayout from '$lib/components/recipes/SeasonLayout.svelte'
diff --git a/src/routes/[recipeLang=recipeLang]/tag/+page.svelte b/src/routes/[recipeLang=recipeLang]/tag/+page.svelte
index 8a38af5..8181a19 100644
--- a/src/routes/[recipeLang=recipeLang]/tag/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/tag/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import type { PageData } from './$types';
     let { data } = $props<{ data: PageData }>();
-    import "$lib/css/nordtheme.css";
     import TagCloud from '$lib/components/TagCloud.svelte';
     import TagBall from '$lib/components/TagBall.svelte';