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

Elternbeirat.Web/wwwroot/app.css

@@ -17,6 +17,23 @@
        --color-brand is lightened for text/links. */
     --color-header: #328fc6;
 
+    /* Text and menu states on the header. White text, and two translucent white
+       washes for the menu pills: they lighten whatever part of the gradient sits
+       behind a link, so one value works from the blue end to the green end. The
+       active pill is the stronger one, so "where am I" outranks "where is the
+       mouse". */
+    --color-on-header: #fff;
+    --color-nav-hover: rgba(255, 255, 255, 0.12);
+    --color-nav-active: rgba(255, 255, 255, 0.2);
+
+    /* Footer: a dark brand blue, so the page visibly ends there. Light text in two
+       steps (headings and the name brighter, links softer); both stay >= 7:1 on the
+       band. The border token is a faint white line for the copyright rule. */
+    --color-footer: #1a3d57;
+    --color-on-footer: #f1f5f9;
+    --color-on-footer-soft: #c5d3df;
+    --color-footer-border: rgba(255, 255, 255, 0.15);
+
     /* Accent for highlights (active nav, event dates, call-outs): the IGMH green.
        The -dark shade is darkened enough to keep small text and the FAQ marker
        legible on a white card. */
@@ -121,6 +138,12 @@
 
         --color-header: #266f9c;       /* the IGMH blue eased down, to sit calmly on dark */
 
+        --color-footer: #10202e;       /* a deep night blue: darker than the page, so
+                                          the band still reads as the page's end */
+        --color-on-footer: #c9ced6;    /* the heading tone, 10:1 on the band */
+        --color-on-footer-soft: #a2a8b2; /* the body text tone, 6.9:1 on the band */
+        --color-footer-border: rgba(255, 255, 255, 0.1);
+
         --color-accent: #86c97d;       /* the IGMH green nudged brighter for dark */
         --color-accent-dark: #86c97d;  /* no darkening needed on a dark surface */
         --color-accent-tint: #24332a;  /* a dark green-grey: tinted, but the soft
@@ -253,37 +276,55 @@ h1:focus {
 /* Header navigation links. These live here (global), not in MainLayout.razor.css:
    NavLink renders plain <a> elements without a scoped-CSS attribute, so a scoped
    ".main-nav a" rule would not match them -- the links would fall back to the
-   global link colour (dark blue) and become unreadable on the blue header bar. */
+   global link colour (dark blue) and become unreadable on the blue header bar.
+   Every link is a pill with the same padding whether active or not, so switching
+   pages never shifts the row. Full white, not a softened white: the blue end of
+   the gradient already leaves little contrast headroom. */
 .main-nav a {
-    color: rgba(255, 255, 255, 0.85);
+    position: relative;
+    padding: var(--space-1) var(--space-3);
+    border-radius: 999px;
+    color: var(--color-on-header);
     text-decoration: none;
-    padding: var(--space-1) 0;
-    border-bottom: 2px solid transparent;
-    transition: color var(--transition), border-color var(--transition);
+    transition: background-color var(--transition);
 }
 
 .main-nav a:hover {
-    color: #fff;
+    color: var(--color-on-header);
+    background: var(--color-nav-hover);
 }
 
-/* NavLink adds .active to the current route's link; a warm accent underline marks
-   where the visitor is on the blue bar. */
+/* NavLink adds .active to the current route's link: a stronger pill plus a short
+   green stroke under the text mark where the visitor is. The stroke is drawn by
+   ::after, not a border, so it follows the text width inside the rounded pill. */
 .main-nav a.active {
-    color: #fff;
-    border-bottom-color: var(--color-accent);
+    background: var(--color-nav-active);
 }
 
-/* Mobile: stacked links inside the collapsed menu get row separators. Same global
-   placement, same NavLink reason as above. Scoped to the narrow layout via the
-   media query so it does not affect the desktop row. */
+.main-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: var(--space-3);
+    right: var(--space-3);
+    bottom: 0.2rem;
+    height: 2px;
+    border-radius: 1px;
+    background: var(--color-accent);
+}
+
+/* Mobile: the stacked links in the open menu become full-width rows with a
+   rounded highlight instead of pills, and the green stroke shrinks to a short
+   mark at the start, so a long row does not get a long line. Same global
+   placement, same NavLink reason as above. */
 @media (max-width: 40rem) {
     .main-nav a {
-        padding: 0.6rem 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+        padding: 0.6rem var(--space-3);
+        border-radius: var(--radius-sm);
     }
 
-    .main-nav a.active {
-        border-bottom-color: rgba(255, 255, 255, 0.15);
+    .main-nav a.active::after {
+        right: auto;
+        width: 1.5rem;
     }
 }
 
@@ -600,12 +641,15 @@ h1:focus {
    this is what turns a plain list of documents on /downloads into a download
    area. Markdown.cs marks such paragraphs/items .lone-link, because CSS cannot see
    the text around a link. Two child paths: in a tight list the link sits directly
-   in the <li>, in a loose list inside a <p>. */
+   in the <li>, in a loose list inside a <p>. border-box: the 42rem include the
+   padding, so the card ends flush with the running text instead of overhanging
+   it (same for the aufruf and hinweis boxes below). */
 .markdown-body .lone-link > a[href$=".pdf" i],
 .markdown-body .lone-link > p > a[href$=".pdf" i] {
     display: flex;
     align-items: center;
     gap: var(--space-3);
+    box-sizing: border-box;
     max-width: 42rem;
     padding: var(--space-3) var(--space-4);
     border: 1px solid var(--color-border);
@@ -692,6 +736,7 @@ h1:focus {
 /* ::: aufruf -- a highlighted call to action: a tinted box with a brand-blue edge.
    Its links become buttons (rule above). */
 .markdown-body .aufruf {
+    box-sizing: border-box;   /* padding inside the 42rem, flush with the text */
     margin: 0 0 var(--space-4);
     padding: var(--space-4);
     max-width: 42rem;
@@ -705,6 +750,7 @@ h1:focus {
    says what matters. */
 .markdown-body .hinweis {
     position: relative;
+    box-sizing: border-box;   /* padding inside the 42rem, flush with the text */
     margin: 0 0 var(--space-4);
     padding: var(--space-3) var(--space-4) var(--space-3) 3.25rem;
     max-width: 42rem;