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/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>