feat(header): highlight active nav link with bold + underline

Compares the link href against `$page.url.pathname` (with trailing-slash
normalization + subpath match), applies `font-bold underline` and
`aria-current="page"` on a match. Wired into both the desktop horizontal
nav and the mobile slide-down menu.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/lib/components/Header.svelte

@@ -1,11 +1,20 @@
 <script lang="ts">
-  import '$lib/iconify-offline';
+    import "$lib/iconify-offline";
     import { slide } from "svelte/transition";
     import Icon from "@iconify/svelte";
     import Search from "./Search.svelte";
     import { overlayOpen, overlayClose } from "$lib/overlay-store";
     import { t as tStatic, T } from "$lib/translations";
     import type { Translations } from "$lib/translations";
+    import { page } from "$app/stores";
+
+    function isActiveLink(href: string, pathname: string): boolean {
+        if (!href) return false;
+        const h = href.replace(/\/$/, "") || "/";
+        const p = pathname.replace(/\/$/, "") || "/";
+        if (h === "/") return p === "/";
+        return p === h || p.startsWith(h + "/");
+    }
 
     interface NavLink {
         href: string;
@@ -91,7 +100,7 @@
 
 <header
     id="horizontal-navigation"
-  class="sticky top-0 z-20 border-b border-white/30 shadow-2xl backdrop-blur-md bg-linear-to-br from-stein-50 from-0% via-wald-100/90 via-42% to-himmel-100 to-100%"
+    class="sticky top-0 z-20 border-b border-white/30 shadow-2xl backdrop-blur-md bg-wald-50"
 >
     <div class="flex items-center justify-between container-custom py-2">
         <a
@@ -100,7 +109,10 @@
             class="logo flex items-center origin-left font-bold text-lg tracking-wide hover:scale-[1.12] transition-transform duration-200 ease-out relative"
         >
             {#if logoSvgHtml}
-        <span class="logo-svg h-10 w-auto inline-flex items-center text-inherit [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-10" aria-hidden="true">{@html logoSvgHtml}</span>
+                <span
+                    class="logo-svg h-10 w-auto inline-flex items-center text-inherit [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-10"
+                    aria-hidden="true">{@html logoSvgHtml}</span
+                >
             {:else if logoUrl && logoUrl.trim() !== ""}
                 <img src={logoUrl} alt="" class="h-10 w-auto object-contain" />
             {:else}
@@ -116,7 +128,18 @@
             {#each links as link}
                 <a
                     href={link.href}
-          class="hover:animate-pulse transition-all text-xs tracking-wide"
+                    class="hover:animate-pulse transition-all text-[.7rem]"
+                    class:font-bold={isActiveLink(
+                        link.href,
+                        $page.url.pathname,
+                    )}
+                    class:underline={isActiveLink(
+                        link.href,
+                        $page.url.pathname,
+                    )}
+                    aria-current={isActiveLink(link.href, $page.url.pathname)
+                        ? "page"
+                        : undefined}
                 >
                     {link.label}
                 </a>
@@ -144,7 +167,11 @@
                 onclick={() => (searchOpen = !searchOpen)}
             >
                 {#if searchOpen}
-          <Icon icon="mdi:close" class="text-error!" aria-hidden="true" />
+                    <Icon
+                        icon="mdi:close"
+                        class="text-error!"
+                        aria-hidden="true"
+                    />
                 {:else}
                     <Icon icon="mdi:magnify" aria-hidden="true" />
                 {/if}
@@ -180,16 +207,24 @@
             <button
                 type="button"
                 class="p-2 -mr-2 hover:bg-stein-0/10 rounded-md transition-colors flex items-center justify-center"
-        aria-label={menuOpen ? t(T.header_menu_close) : t(T.header_menu_open)}
+                aria-label={menuOpen
+                    ? t(T.header_menu_close)
+                    : t(T.header_menu_open)}
                 aria-controls={menuOpen ? "mobile-nav" : undefined}
                 aria-expanded={menuOpen}
                 onclick={toggleMenu}
             >
                 <span class="sr-only"
-          >{menuOpen ? t(T.header_menu_close) : t(T.header_menu_open)}</span
+                    >{menuOpen
+                        ? t(T.header_menu_close)
+                        : t(T.header_menu_open)}</span
                 >
                 {#if menuOpen}
-          <Icon icon="mdi:close" class="text-2xl" aria-hidden="true" />
+                    <Icon
+                        icon="mdi:close"
+                        class="text-2xl"
+                        aria-hidden="true"
+                    />
                 {:else}
                     <Icon icon="mdi:menu" class="text-2xl" aria-hidden="true" />
                 {/if}
@@ -217,6 +252,20 @@
                     <a
                         href={link.href}
                         class="block py-3 px-2 text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 rounded-md transition-colors text-sm"
+                        class:font-bold={isActiveLink(
+                            link.href,
+                            $page.url.pathname,
+                        )}
+                        class:underline={isActiveLink(
+                            link.href,
+                            $page.url.pathname,
+                        )}
+                        aria-current={isActiveLink(
+                            link.href,
+                            $page.url.pathname,
+                        )
+                            ? "page"
+                            : undefined}
                         onclick={closeMenu}
                     >
                         {link.label}
@@ -232,7 +281,8 @@
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 class="inline-flex p-2 text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 rounded-md transition-colors"
-                aria-label={social.label || t(T.header_social_aria)}
+                                aria-label={social.label ||
+                                    t(T.header_social_aria)}
                                 onclick={closeMenu}
                             >
                                 <Icon