Refresh header and footer with signet, gradient, nav pills and three-column footer; fix box-sizing of design boxes

Elternbeirat.Web/Components/Layout/MainLayout.razor

@@ -8,7 +8,15 @@
    flex wrapper -- see MainLayout.razor.css. *@
 <header class="site-header">
         <div class="header-inner">
-            <a class="brand" href="/">Elternbeirat IGMH</a>
+            @* Two-line lettering next to the signet: the body's name large, the
+               school small below it. One link, so the whole mark leads home. *@
+            <a class="brand" href="/">
+                <Signet />
+                <span class="brand-text">
+                    <span class="brand-name">Elternbeirat</span>
+                    <span class="brand-school">IGMH Mannheim</span>
+                </span>
+            </a>
 
             @* CSS-only mobile menu: the hidden checkbox holds the open/closed
                state, the label is the hamburger button, and :checked reveals the
@@ -37,13 +45,48 @@
     </main>
 
     <footer class="site-footer">
+        @* A soft wave as the transition from the page into the dark footer. Pure
+           decoration, so hidden from screen readers; it is filled with the footer
+           colour and stretched to the full width (preserveAspectRatio="none"). *@
+        <svg class="footer-wave" viewBox="0 0 1440 48" preserveAspectRatio="none" aria-hidden="true" focusable="false">
+            <path d="M0 24C240 48 480 48 720 28S1200 0 1440 20V48H0z" />
+        </svg>
+
         <div class="footer-inner">
-            <span>Elternbeirat der IGMH</span>
-            <nav class="footer-nav">
-                @foreach (var link in _footer)
-                {
-                    <a href="@link.Href">@link.Title</a>
-                }
-            </nav>
+            <div class="footer-brand">
+                <Signet />
+                <span>Elternbeirat der IGMH</span>
+            </div>
+
+            @* Both link columns come from PocketBase like the header. An empty list
+               (no such pages, or PocketBase down) renders nothing -- no lone
+               heading above an empty column. *@
+            @if (_header.Count > 0)
+            {
+                <nav class="footer-nav" aria-label="Schnellzugriff">
+                    <h2 class="footer-heading">Schnellzugriff</h2>
+                    <ul>
+                        @foreach (var link in _header)
+                        {
+                            <li><a href="@link.Href">@link.Title</a></li>
+                        }
+                    </ul>
+                </nav>
+            }
+
+            @if (_footer.Count > 0)
+            {
+                <nav class="footer-nav" aria-label="Weiteres">
+                    <h2 class="footer-heading">Weiteres</h2>
+                    <ul>
+                        @foreach (var link in _footer)
+                        {
+                            <li><a href="@link.Href">@link.Title</a></li>
+                        }
+                    </ul>
+                </nav>
+            }
         </div>
+
+        <p class="footer-copyright">© @_year Elternbeirat der IGMH</p>
     </footer>