Add a mobile nav and pin the header while scrolling

Elternbeirat.Web/Components/Layout/MainLayout.razor

@@ -1,10 +1,29 @@
 @inherits LayoutComponentBase
 
-<div class="page">
-    <header class="site-header">
+@* Header, main and footer are plain block children of <body>, which is the page's
+   scroll root. The header is position:sticky and, because it is NOT a flex/grid
+   child (a stretched flex item never sticks -- it fills its cell and unsticks
+   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. *@
+<header class="site-header">
         <div class="header-inner">
             <a class="brand" href="/">Elternbeirat IGMH</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">
+                <span class="nav-toggle-bar"></span>
+            </label>
+
             <nav class="main-nav">
+                @* A home link that only shows in the collapsed mobile menu. On wide
+                   screens the brand is the home link, so this would be a redundant
+                   entry -- CSS hides it there (see .nav-home-mobile). *@
+                <NavLink class="nav-home-mobile" href="/" Match="NavLinkMatch.All">Start</NavLink>
                 @foreach (var link in _header)
                 {
                     <NavLink href="@link.Href" Match="@(link.Href == "/" ? NavLinkMatch.All : NavLinkMatch.Prefix)">@link.Title</NavLink>
@@ -28,4 +47,3 @@
             </nav>
         </div>
     </footer>
-</div>