Add site layout with header navigation and footer

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;
+}