Rework post page (lead, pager), add skip link, unified focus ring, reduced motion and keyboard-accessible menu

Elternbeirat.Web/Features/Posts/PostDetail.razor

@@ -8,16 +8,39 @@
 else if (_post is not null)
 {
     <PageTitle>@_post.Title</PageTitle>
-    <nav>
-        <a href="/posts">&larr; Alle Beiträge</a>
-    </nav>
-    <article>
-        <div class="post-content">
-            <PostDate Value="_post.Date" />
-            <h2>@_post.Title</h2>
-            <div class="markdown-body">@Body</div>
-        </div>
+    @* A plain link, not a <nav>: one link is no navigation block, and an unlabelled
+       second <nav> next to the main menu would only add noise for screen readers. *@
+    <a class="btn btn-quiet" href="/posts"><Icon Name="arrow-left" Size="18" />Alle Beiträge</a>
+
+    <article class="post">
+        <header class="post-header">
+            <p class="post-meta"><Icon Name="calendar" Size="16" /><PostDate Value="_post.Date" /></p>
+            <h1>@_post.Title</h1>
+        </header>
+        <div class="markdown-body post-body">@Body</div>
     </article>
+
+    @if (_neighbors.Previous is not null || _neighbors.Next is not null)
+    {
+        @* Older post on the left, newer on the right, like a timeline. A missing side
+           leaves its cell empty, so the remaining link keeps its place. *@
+        <nav class="post-pager" aria-label="Weitere Beiträge">
+            @if (_neighbors.Previous is { } previous)
+            {
+                <a class="post-pager-link post-pager-previous" href="/posts/@previous.Slug" rel="prev">
+                    <span class="post-pager-label"><Icon Name="arrow-left" Size="16" />Vorheriger Beitrag</span>
+                    <span class="post-pager-title">@previous.Title</span>
+                </a>
+            }
+            @if (_neighbors.Next is { } next)
+            {
+                <a class="post-pager-link post-pager-next" href="/posts/@next.Slug" rel="next">
+                    <span class="post-pager-label">Nächster Beitrag<Icon Name="arrow-right" Size="16" /></span>
+                    <span class="post-pager-title">@next.Title</span>
+                </a>
+            }
+        </nav>
+    }
 }
 @* No post and not unavailable: the slug was unknown; NavigationManager.NotFound()
    already ran in OnParametersSetAsync and renders the not-found page. *@