Add site layout with header navigation and footer

Elternbeirat.Web/Components/App.razor

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 
 <head>
     <meta charset="utf-8"/>

Elternbeirat.Web/Components/Layout/MainLayout.razor

@@ -1,3 +1,33 @@
-@inherits LayoutComponentBase
+@inherits LayoutComponentBase
 
-@Body
+<div class="page">
+    <header class="site-header">
+        <div class="header-inner">
+            <a class="brand" href="/">Elternbeirat IGMH</a>
+            <nav class="main-nav">
+                <NavLink href="/" Match="NavLinkMatch.All">Start</NavLink>
+                <NavLink href="/vorstandsteam">Vorstandsteam</NavLink>
+                <NavLink href="/foerderverein">Förderverein</NavLink>
+                <NavLink href="/beitraege">Beiträge</NavLink>
+                <NavLink href="/faq">FAQ</NavLink>
+                <NavLink href="/downloads">Downloads</NavLink>
+                <NavLink href="/kontakt">Kontakt</NavLink>
+            </nav>
+        </div>
+    </header>
+
+    <main class="content">
+        @Body
+    </main>
+
+    <footer class="site-footer">
+        <div class="footer-inner">
+            <span>Elternbeirat der IGMH</span>
+            <nav class="footer-nav">
+                <a href="/kontakt">Kontakt</a>
+                <a href="/impressum">Impressum</a>
+                <a href="/datenschutz">Datenschutz</a>
+            </nav>
+        </div>
+    </footer>
+</div>

Elternbeirat.Web/Components/Layout/MainLayout.razor.css

@@ -18,3 +18,100 @@
         right: 0.75rem;
         top: 0.5rem;
     }
+
+/* Page frame: header and footer stay put, the content grows and pushes the
+   footer to the bottom even on short pages. */
+.page {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+/* Header */
+.site-header {
+    border-bottom: 1px solid #e0e0e0;
+    background: #fff;
+}
+
+.header-inner {
+    max-width: 60rem;
+    margin: 0 auto;
+    padding: 1rem 1.25rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.5rem 1.5rem;
+}
+
+.brand {
+    font-size: 1.35rem;
+    font-weight: 700;
+    color: #1f3a5f;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.main-nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 1.25rem;
+}
+
+.main-nav a {
+    color: #333;
+    text-decoration: none;
+    padding: 0.2rem 0;
+    border-bottom: 2px solid transparent;
+}
+
+.main-nav a:hover {
+    color: #1f3a5f;
+}
+
+/* NavLink adds .active to the link of the current route. */
+.main-nav a.active {
+    color: #1f3a5f;
+    border-bottom-color: #1f3a5f;
+}
+
+/* Content */
+.content {
+    flex: 1;
+    width: 100%;
+    max-width: 60rem;
+    margin: 0 auto;
+    padding: 1.5rem 1.25rem 3rem;
+}
+
+/* Footer */
+.site-footer {
+    border-top: 1px solid #e0e0e0;
+    background: #fafafa;
+    color: #555;
+    font-size: 0.9rem;
+}
+
+.footer-inner {
+    max-width: 60rem;
+    margin: 0 auto;
+    padding: 1rem 1.25rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.5rem 1.5rem;
+}
+
+.footer-nav {
+    display: flex;
+    gap: 1.25rem;
+}
+
+.footer-nav a {
+    color: #555;
+    text-decoration: none;
+}
+
+.footer-nav a:hover {
+    color: #1f3a5f;
+    text-decoration: underline;
+}