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/BlogOverview.svelte

@@ -2,13 +2,18 @@
     import Icon from "@iconify/svelte";
     import "$lib/iconify-offline";
     import PostCard from "./PostCard.svelte";
+    import EventBadges from "./EventBadges.svelte";
     import Tag from "./Tag.svelte";
     import Pagination from "./Pagination.svelte";
     import type { PostEntry } from "$lib/cms";
     import { postHref } from "$lib/blog-utils";
     import { t as tStatic, T } from "$lib/translations";
     import type { Translations } from "$lib/translations";
-  import { fetchCommentCounts, postSlugForComments, type CommentCountsMap } from "$lib/comment-counts";
+    import {
+        fetchCommentCounts,
+        postSlugForComments,
+        type CommentCountsMap,
+    } from "$lib/comment-counts";
 
     interface TagEntry {
         _slug?: string;
@@ -84,7 +89,8 @@
             .filter((p) => {
                 if (year && yearOf(p) !== year) return false;
                 if (q) {
-          const hay = `${p.headline} ${p.excerpt} ${p.subheadline} ${p.tags.join(" ")}`.toLowerCase();
+                    const hay =
+                        `${p.headline} ${p.excerpt} ${p.subheadline} ${p.tags.join(" ")}`.toLowerCase();
                     if (!hay.includes(q)) return false;
                 }
                 return true;
@@ -97,13 +103,6 @@
         return norm ? `/post/${encodeURIComponent(norm)}` : "/post";
     }
 
-  function formatEventDate(iso: string | null | undefined): string {
-    if (!iso) return "";
-    const d = new Date(iso);
-    if (Number.isNaN(d.getTime())) return "";
-    return d.toLocaleDateString("de-DE", { day: "2-digit", month: "long", year: "numeric" });
-  }
-
     function t(key: string, replacements?: Record<string, string | number>) {
         return tStatic(translations ?? null, key, replacements);
     }
@@ -119,8 +118,9 @@
     let commentCounts = $state<CommentCountsMap>({});
     $effect(() => {
         const ctrl = new AbortController();
-    fetchCommentCounts(posts.map(postSlugForComments), { signal: ctrl.signal })
-      .then((map) => {
+        fetchCommentCounts(posts.map(postSlugForComments), {
+            signal: ctrl.signal,
+        }).then((map) => {
             commentCounts = map;
         });
         return () => ctrl.abort();
@@ -132,7 +132,9 @@
         <div class="mb-4 flex flex-wrap items-center gap-2">
             <label class="relative block w-full sm:max-w-sm">
                 <span class="sr-only">{t(T.blog_search_label)}</span>
-        <span class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500">
+                <span
+                    class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500"
+                >
                     <Icon icon="mdi:magnify" class="h-4 w-4" />
                 </span>
                 <input
@@ -155,7 +157,9 @@
             {#if availableYears.length > 0}
                 <label class="relative inline-flex items-center">
                     <span class="sr-only">{t(T.blog_year_label)}</span>
-          <span class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500">
+                    <span
+                        class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500"
+                    >
                         <Icon icon="mdi:calendar" class="h-4 w-4" />
                     </span>
                     <select
@@ -167,7 +171,9 @@
                             <option value={y}>{y}</option>
                         {/each}
                     </select>
-          <span class="pointer-events-none absolute top-1/2 right-1.5 -translate-y-1/2 text-zinc-500">
+                    <span
+                        class="pointer-events-none absolute top-1/2 right-1.5 -translate-y-1/2 text-zinc-500"
+                    >
                         <Icon icon="mdi:chevron-down" class="h-4 w-4" />
                     </span>
                 </label>
@@ -176,19 +182,27 @@
     {/if}
 
     {#if !isFiltering && upcomingEvents.length > 0}
-    <section class="not-prose mb-6 rounded-sm border border-zinc-200 bg-zinc-50 p-4">
-      <h2 class="mb-3 flex items-center gap-2 text-sm font-semibold tracking-wide text-zinc-700 uppercase">
-        <Icon icon="mdi:calendar-clock" class="size-5 shrink-0" />
+        <section
+            class="not-prose mb-6 rounded-sm border border-zinc-200 bg-zinc-50 p-4"
+        >
+            <h2
+                class="mb-3 flex items-center gap-2 text-sm font-semibold tracking-wide text-zinc-700"
+            >
+                <Icon icon="mdi:calendar-clock" class="size-7 shrink-0" />
                 {t(T.blog_upcoming_events)}
             </h2>
             <ul class="not-prose list-none space-y-2 pl-0">
                 {#each upcomingEvents as ev}
                     <li>
-            <a href={postHref(ev)} class="group flex items-baseline gap-3 no-underline hover:underline">
-              <time class="shrink-0 text-xs font-medium text-zinc-600 tabular-nums">
-                {formatEventDate(ev.eventDate)}
-              </time>
-              <span class="text-sm text-zinc-900 group-hover:text-zinc-950">{ev.headline}</span>
+                        <a
+                            href={postHref(ev)}
+                            class="group flex flex-wrap items-center gap-2 no-underline"
+                        >
+                            <EventBadges eventDate={ev.eventDate} />
+                            <span
+                                class="text-sm text-zinc-900 group-hover:text-zinc-950"
+                                >{ev.headline}</span
+                            >
                         </a>
                     </li>
                 {/each}
@@ -197,7 +211,9 @@
     {/if}
 
     {#if isFiltering}
-    <div class="mb-3 flex flex-wrap items-center gap-2 text-xs text-zinc-600">
+        <div
+            class="mb-3 flex flex-wrap items-center gap-2 text-xs text-zinc-600"
+        >
             <span>
                 {t(T.blog_results_count, { count: filteredResults.length })}
                 {#if query}{t(T.blog_results_for, { query })}{/if}
@@ -205,37 +221,63 @@
             </span>
             <button
                 type="button"
-        onclick={() => { query = ""; year = ""; }}
+                onclick={() => {
+                    query = "";
+                    year = "";
+                }}
                 class="text-zinc-500 underline hover:text-zinc-900"
-      >{t(T.blog_filter_reset)}</button>
+                >{t(T.blog_filter_reset)}</button
+            >
         </div>
         {#if filteredResults.length > 0}
-      <div class="py-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <div
+                class="py-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+            >
                 {#each filteredResults as hit}
-          <a href={searchResultHref(hit.slug)} class="flex flex-col overflow-hidden border border-gray-200 bg-white text-slate-950 no-underline transition-all">
+                    <a
+                        href={searchResultHref(hit.slug)}
+                        class="flex flex-col overflow-hidden border border-gray-200 bg-white text-slate-950 no-underline transition-all"
+                    >
                         {#if hit.image}
-              <div class="aspect-3/2 w-full overflow-hidden bg-gray-100">
-                <img src={hit.image} alt={hit.headline} class="h-full w-full object-cover" loading="lazy" />
+                            <div
+                                class="aspect-3/2 w-full overflow-hidden bg-gray-100"
+                            >
+                                <img
+                                    src={hit.image}
+                                    alt={hit.headline}
+                                    class="h-full w-full object-cover"
+                                    loading="lazy"
+                                />
                             </div>
                         {/if}
                         <div class="flex flex-1 flex-col p-4">
-              <h3 class="mb-1 text-base font-semibold">{hit.headline}</h3>
+                            <h3 class="mb-1 text-base font-semibold">
+                                {hit.headline}
+                            </h3>
                             {#if hit.excerpt}
-                <p class="text-sm text-zinc-700 line-clamp-3">{hit.excerpt}</p>
+                                <p class="text-sm text-zinc-700 line-clamp-3">
+                                    {hit.excerpt}
+                                </p>
                             {/if}
                         </div>
                     </a>
                 {/each}
             </div>
         {:else}
-      <div class="rounded-sm border border-zinc-200 bg-white p-6 text-center text-sm text-zinc-600">
+            <div
+                class="rounded-sm border border-zinc-200 bg-white p-6 text-center text-sm text-zinc-600"
+            >
                 {t(T.blog_no_results)}
             </div>
         {/if}
     {:else}
         {#if tags.length > 0}
             <div class="mb-2">
-        <div class="flex flex-wrap gap-2" role="navigation" aria-label={t(T.blog_filter_aria)}>
+                <div
+                    class="flex flex-wrap gap-2"
+                    role="navigation"
+                    aria-label={t(T.blog_filter_aria)}
+                >
                     <Tag
                         label={t(T.blog_tag_all)}
                         href={tagHref(null)}
@@ -250,38 +292,31 @@
                             variant={activeTag === slug ? "inactive" : "green"}
                             active={activeTag === slug}
                             icon={tag.icon?.trim() || null}
-              customColor={activeTag === slug ? null : tag.color?.trim() || null}
+                            customColor={activeTag === slug
+                                ? null
+                                : tag.color?.trim() || null}
                         />
                     {/each}
                 </div>
             </div>
         {/if}
 
-    <Pagination
-      {currentPage}
-      {totalPages}
-      {basePath}
-      activeTag={activeTag}
-    />
+        <Pagination {currentPage} {totalPages} {basePath} {activeTag} />
 
         <div class="py-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {#each posts as post}
                 <PostCard
-          post={post}
+                    {post}
                     href={postHref(post)}
                     tagBase={`${basePath}/tag`}
-          commentCount={commentCounts[postSlugForComments(post)] ?? null}
+                    commentCount={commentCounts[postSlugForComments(post)] ??
+                        null}
                 />
             {/each}
         </div>
 
         <div class="flex flex-wrap items-center gap-2">
-      <Pagination
-        {currentPage}
-        {totalPages}
-        {basePath}
-        activeTag={activeTag}
-      />
+            <Pagination {currentPage} {totalPages} {basePath} {activeTag} />
             <div class="grow"></div>
             <div class="bg-white rounded-md font-thin">
                 <div class="inline-flex text-xs p-2">
@@ -305,7 +340,10 @@
         </div>
 
         <div class="mt-4 text-xs text-zinc-600">
-      <a href="/posts/rss.xml" class="inline-flex items-center gap-1 hover:underline">
+            <a
+                href="/posts/rss.xml"
+                class="inline-flex items-center gap-1 hover:underline"
+            >
                 <Icon icon="mdi:rss" class="h-3.5 w-3.5" />
                 {t(T.blog_rss_subscribe)}
             </a>

src/lib/components/EventBadges.svelte

@@ -27,7 +27,7 @@
 {#if dateLabel || locationText}
   <div class="flex flex-wrap gap-2">
     {#if dateLabel}
-      <span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-wald-500 px-3 py-1 text-[.65rem] font-semibold text-white shadow-sm">
+      <span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-wald-500 px-3 py-1 text-[.65rem] font-semibold text-white shadow-sm no-underline! [text-decoration:none]">
         <Icon icon="mdi:calendar" class="size-3.5 shrink-0 opacity-90" aria-hidden="true" />
         {dateLabel}
       </span>
@@ -39,7 +39,7 @@
           {locationText}
         </a>
       {:else}
-        <span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-neutral-800 text-neutral-50 px-3 py-1 text-[.65rem] font-medium shadow-sm">
+        <span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-neutral-800 text-neutral-50 px-3 py-1 text-[.65rem] font-medium shadow-sm no-underline! [text-decoration:none]">
           <Icon icon="mdi:map-marker" class="size-3.5 shrink-0 opacity-90" aria-hidden="true" />
           {locationText}
         </span>

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