Give the site a warm design system with card-based content lists

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

@@ -25,27 +25,30 @@
    z-index keeps it above the content; the opaque background stops content showing
    through as it scrolls underneath. */
 .site-header {
-    border-bottom: 1px solid #e0e0e0;
-    background: #fff;
+    /* Brand-blue bar with a warm accent underline -- the strongest, most visible
+       cue that carries the friendly tone across every page. */
+    background: var(--color-brand);
+    border-bottom: 3px solid var(--color-accent);
+    box-shadow: var(--shadow);
     position: sticky;
     top: 0;
     z-index: 20;
 }
 
 .header-inner {
-    max-width: 60rem;
+    max-width: var(--content-width);
     margin: 0 auto;
-    padding: 1rem 1.25rem;
+    padding: var(--space-3) 1.25rem;
     display: flex;
     flex-wrap: wrap;
     align-items: baseline;
-    gap: 0.5rem 1.5rem;
+    gap: var(--space-2) var(--space-4);
 }
 
 .brand {
     font-size: 1.35rem;
     font-weight: 700;
-    color: #1f3a5f;
+    color: #fff;
     text-decoration: none;
     white-space: nowrap;
 }
@@ -65,22 +68,9 @@
     display: none;
 }
 
-.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;
-}
+/* The link colours/states for .main-nav a live in the GLOBAL app.css, not here.
+   Reason: NavLink renders plain <a> elements that carry no scoped-CSS attribute
+   (b-xxxxx), so a scoped rule ".main-nav a" would not match them. See app.css. */
 
 /* Content: at least tall enough that the footer sits at the bottom of the viewport
    on short pages. 100dvh - 4rem leaves room for the header (which sits above in
@@ -90,41 +80,41 @@
     min-height: calc(100dvh - 4rem);
     box-sizing: border-box;
     width: 100%;
-    max-width: 60rem;
+    max-width: var(--content-width);
     margin: 0 auto;
-    padding: 1.5rem 1.25rem 3rem;
+    padding: var(--space-4) 1.25rem var(--space-6);
 }
 
 /* Footer */
 .site-footer {
-    border-top: 1px solid #e0e0e0;
-    background: #fafafa;
-    color: #555;
+    border-top: 1px solid var(--color-border);
+    background: var(--color-surface);
+    color: var(--color-text-soft);
     font-size: 0.9rem;
 }
 
 .footer-inner {
-    max-width: 60rem;
+    max-width: var(--content-width);
     margin: 0 auto;
-    padding: 1rem 1.25rem;
+    padding: var(--space-3) 1.25rem;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    gap: 0.5rem 1.5rem;
+    gap: var(--space-2) var(--space-4);
 }
 
 .footer-nav {
     display: flex;
-    gap: 1.25rem;
+    gap: var(--space-4);
 }
 
 .footer-nav a {
-    color: #555;
+    color: var(--color-text-soft);
     text-decoration: none;
 }
 
 .footer-nav a:hover {
-    color: #1f3a5f;
+    color: var(--color-brand);
     text-decoration: underline;
 }
 
@@ -155,7 +145,7 @@
         display: block;
         width: 1.5rem;
         height: 2px;
-        background: #1f3a5f;
+        background: #fff;   /* on the blue header bar */
         content: "";
     }
 
@@ -191,14 +181,6 @@
         display: block;
     }
 
-    .main-nav a {
-        padding: 0.6rem 0;
-        border-bottom: 1px solid #eee;
-    }
-
-    /* The active link keeps its colour but not the desktop underline, which would
-       clash with the row separators. */
-    .main-nav a.active {
-        border-bottom-color: #eee;
-    }
+    /* Mobile per-link spacing/separators for .main-nav a are in the global app.css
+       too, for the same scoped-attribute reason as above. */
 }