improve header navigation styling and active link highlighting

Optimize header link spacing and add visual feedback for active pages:
- Reduce link padding and gap for more compact navigation
- Shorten German labels: "In Saison" to "Saison", "Stichwörter" to "Tags"
- Remove "Tipps" section from navigation menu

Add active page highlighting across all layouts:
- Highlight current page links in red (matching hover color)
- Desktop: animated red underline that smoothly slides between links
- Mobile: static red underline for active links in hamburger menu
- Underline aligns precisely with text width (excludes padding)

Improve transitions:
- Fix color transition to only animate color, not layout properties
- Disable underline transition during window resize to prevent lag
- Underline updates immediately on resize for perfect alignment

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

@@ -1,4 +1,5 @@
 <script>
+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';
@@ -10,25 +11,33 @@ const isEnglish = $derived(data.lang === 'en');
 const labels = $derived({
 	allRecipes: isEnglish ? 'All Recipes' : 'Alle Rezepte',
 	favorites: isEnglish ? 'Favorites' : 'Favoriten',
-	inSeason: isEnglish ? 'In Season' : 'In Saison',
+	inSeason: isEnglish ? 'In Season' : 'Saison',
 	category: isEnglish ? 'Category' : 'Kategorie',
 	icon: 'Icon',
-	keywords: isEnglish ? 'Keywords' : 'Stichwörter',
-	tips: isEnglish ? 'Tips' : 'Tipps'
+	keywords: isEnglish ? 'Keywords' : 'Tags'
 });
+
+function isActive(path) {
+	const currentPath = $page.url.pathname;
+	// Exact match for recipe lang root
+	if (path === `/${data.recipeLang}`) {
+		return currentPath === `/${data.recipeLang}` || currentPath === `/${data.recipeLang}/`;
+	}
+	// For other paths, check if current path starts with the link path
+	return currentPath.startsWith(path);
+}
 </script>
 
 <Header>
 	<ul class=site_header slot=links>
-	<li><a href="/{data.recipeLang}">{labels.allRecipes}</a></li>
+	<li><a href="/{data.recipeLang}" class:active={isActive(`/${data.recipeLang}`)}>{labels.allRecipes}</a></li>
 	{#if user}
-		<li><a href="/{data.recipeLang}/favorites">{labels.favorites}</a></li>
+		<li><a href="/{data.recipeLang}/favorites" class:active={isActive(`/${data.recipeLang}/favorites`)}>{labels.favorites}</a></li>
 	{/if}
-	<li><a href="/{data.recipeLang}/season">{labels.inSeason}</a></li>
-	<li><a href="/{data.recipeLang}/category">{labels.category}</a></li>
-	<li><a href="/{data.recipeLang}/icon">{labels.icon}</a></li>
-	<li><a href="/{data.recipeLang}/tag">{labels.keywords}</a></li>
-	<li><a href="/rezepte/tips-and-tricks">{labels.tips}</a></li>
+	<li><a href="/{data.recipeLang}/season" class:active={isActive(`/${data.recipeLang}/season`)}>{labels.inSeason}</a></li>
+	<li><a href="/{data.recipeLang}/category" class:active={isActive(`/${data.recipeLang}/category`)}>{labels.category}</a></li>
+	<li><a href="/{data.recipeLang}/icon" class:active={isActive(`/${data.recipeLang}/icon`)}>{labels.icon}</a></li>
+	<li><a href="/{data.recipeLang}/tag" class:active={isActive(`/${data.recipeLang}/tag`)}>{labels.keywords}</a></li>
 	</ul>
 	<LanguageSelector slot=language_selector_mobile />
 	<LanguageSelector slot=language_selector_desktop />

src/routes/cospend/+layout.svelte

@@ -38,19 +38,29 @@
     // Close the modal
     showModal = false;
     paymentId = null;
-    
+
     // Dispatch a custom event to trigger dashboard refresh
     if ($page.route.id === '/cospend') {
       window.dispatchEvent(new CustomEvent('dashboardRefresh'));
     }
   }
+
+  function isActive(path) {
+    const currentPath = $page.url.pathname;
+    // Exact match for cospend root
+    if (path === '/cospend') {
+      return currentPath === '/cospend' || currentPath === '/cospend/';
+    }
+    // For other paths, check if current path starts with the link path
+    return currentPath.startsWith(path);
+  }
 </script>
 
 <Header>
   <ul class="site_header" slot="links">
-    <li><a href="/cospend">Dashboard</a></li>
-    <li><a href="/cospend/payments">All Payments</a></li>
-    <li><a href="/cospend/recurring">Recurring Payments</a></li>
+    <li><a href="/cospend" class:active={isActive('/cospend')}>Dashboard</a></li>
+    <li><a href="/cospend/payments" class:active={isActive('/cospend/payments')}>All Payments</a></li>
+    <li><a href="/cospend/recurring" class:active={isActive('/cospend/recurring')}>Recurring Payments</a></li>
   </ul>
   <UserHeader slot="right_side" {user}></UserHeader>
   

src/routes/glaube/+layout.svelte

@@ -1,13 +1,20 @@
 <script>
+import { page } from '$app/stores';
 import Header from '$lib/components/Header.svelte'
 import UserHeader from '$lib/components/UserHeader.svelte';
 export let data
+
+function isActive(path) {
+	const currentPath = $page.url.pathname;
+	// Check if current path starts with the link path
+	return currentPath.startsWith(path);
+}
 </script>
 <Header>
 	<ul class=site_header slot=links>
-	<li><a href="/glaube/gebete">Gebete</a></li>
-	<li><a href="/glaube/rosenkranz">Rosenkranz</a></li>
-	<li><a href="/glaube/predigten">Predigten</a></li>
+	<li><a href="/glaube/gebete" class:active={isActive('/glaube/gebete')}>Gebete</a></li>
+	<li><a href="/glaube/rosenkranz" class:active={isActive('/glaube/rosenkranz')}>Rosenkranz</a></li>
+	<li><a href="/glaube/predigten" class:active={isActive('/glaube/predigten')}>Predigten</a></li>
 	</ul>
 	<UserHeader user={data.session?.user} slot=right_side></UserHeader>
 	<slot></slot>