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

Elternbeirat.Web/Components/Layout/MainLayout.razor

@@ -6,6 +6,15 @@
    immediately), it pins to the top and stays there while the page scrolls. The
    footer is kept at the bottom on short pages by a min-height on <main>, not by a
    flex wrapper -- see MainLayout.razor.css. *@
+
+@* Skip link: the first stop for the Tab key, straight past the menu to the content.
+   The href carries the current path because of <base href="/"> in App.razor: a
+   bare "#main" would resolve to "/#main" and lead every subpage back home.
+   data-enhance-nav="false" leaves the jump to the browser: blazor.web.js would
+   otherwise take the click, only scroll to <main> and keep the focus on the link,
+   so the next Tab would land in the header menu again. *@
+<a class="skip-link" href="@SkipLinkHref" data-enhance-nav="false">Zum Inhalt springen</a>
+
 <header class="site-header">
         <div class="header-inner">
             @* Two-line lettering next to the signet: the body's name large, the
@@ -18,16 +27,23 @@
                 </span>
             </a>
 
-            @* CSS-only mobile menu: the hidden checkbox holds the open/closed
-               state, the label is the hamburger button, and :checked reveals the
-               nav below (see MainLayout.razor.css). No JavaScript, no @@rendermode
-               -- works under static SSR. *@
-            <input type="checkbox" id="nav-toggle" class="nav-toggle" />
-            <label for="nav-toggle" class="nav-toggle-label" aria-label="Menü öffnen und schließen">
+            @* CSS-only mobile menu: the checkbox holds the open/closed state, the
+               label is the hamburger button, and :checked reveals the nav below (see
+               MainLayout.razor.css). No JavaScript, no @@rendermode -- works under
+               static SSR. The checkbox is only visually hidden on a phone, not
+               removed, so it is what keyboard and screen-reader users operate: Tab
+               reaches it, Space toggles it, and its checked state is the menu's
+               open/closed state, announced as such ("Hauptmenü anzeigen,
+               Kontrollkästchen, aktiviert"). Its name is the label's hidden text;
+               aria-controls ties it to the menu it opens. aria-expanded would need
+               JavaScript to keep it in sync, the native checked state does not. *@
+            <input type="checkbox" id="nav-toggle" class="nav-toggle visually-hidden" aria-controls="main-nav" />
+            <label for="nav-toggle" class="nav-toggle-label">
                 <span class="nav-toggle-bar"></span>
+                <span class="visually-hidden">Hauptmenü anzeigen</span>
             </label>
 
-            <nav class="main-nav" aria-label="Hauptmenü">
+            <nav id="main-nav" class="main-nav" aria-label="Hauptmenü">
                 @* The home link comes from PocketBase like every other entry (the
                    "home" page carries location "header"), so it is rendered by the
                    loop below -- no separate hard-coded home link, which would show
@@ -40,7 +56,9 @@
         </div>
     </header>
 
-    <main class="content">
+    @* The skip link's target. tabindex="-1" makes it focusable by the link alone
+       (not by Tab), so after the jump the next Tab continues inside the content. *@
+    <main id="main" class="content" tabindex="-1">
         @Body
     </main>