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

Elternbeirat.Web/Features/Layout/FooterYear.cs

@@ -0,0 +1,35 @@
+namespace Elternbeirat.Web.Features.Layout;
+
+/// <summary>
+///     Works out the year shown in the footer's copyright line.
+/// </summary>
+/// <remarks>
+///     The container runs on UTC, but visitors live in Germany. Taking the year
+///     straight from the server clock would show the old year for the first hour
+///     (two in summer time) of every new year, so the instant is converted to
+///     Europe/Berlin first.
+/// </remarks>
+public static class FooterYear
+{
+    /// <summary>
+    ///     IANA id; resolves on every platform .NET supports, Windows included.
+    /// </summary>
+    private static readonly TimeZoneInfo Berlin =
+        TimeZoneInfo.FindSystemTimeZoneById("Europe/Berlin");
+
+    /// <summary>
+    ///     Returns the calendar year in Berlin at the given instant.
+    /// </summary>
+    /// <param name="now">
+    ///     The current instant, in any offset; usually
+    ///     <see cref="TimeProvider.GetUtcNow"/>.
+    /// </param>
+    /// <returns>The year a visitor in Germany would see on their calendar.</returns>
+    /// <example>
+    ///     <code>
+    ///         FooterYear.For(new DateTimeOffset(2026, 12, 31, 23, 30, 0, TimeSpan.Zero)); // 2027
+    ///     </code>
+    /// </example>
+    public static int For(DateTimeOffset now) =>
+        TimeZoneInfo.ConvertTime(now, Berlin).Year;
+}

Elternbeirat.Web/Features/Layout/Signet.razor

@@ -0,0 +1,17 @@
+@*
+    The site's own small mark: a speech bubble (the board speaks for the parents)
+    holding a grown-up and a child. Inline SVG, so there is no extra request and
+    nothing from a third-party host. Decorative only -- the name next to it carries
+    the meaning, so it is hidden from screen readers. Colours come from tokens in
+    Signet.razor.css; the size is set by whoever places it (MainLayout.razor.css).
+*@
+<svg class="signet" viewBox="0 0 40 40" width="40" height="40" aria-hidden="true" focusable="false">
+    <path class="signet-bubble"
+          d="M8 4h24a6 6 0 0 1 6 6v15a6 6 0 0 1-6 6H18l-8 6v-6H8a6 6 0 0 1-6-6V10a6 6 0 0 1 6-6z" />
+    <g class="signet-figures">
+        <circle cx="15" cy="12" r="3.5" />
+        <path d="M9 26c0-5 2.7-8 6-8s6 3 6 8z" />
+        <circle cx="26" cy="16" r="2.6" />
+        <path d="M21.5 26c0-3.8 2-6 4.5-6s4.5 2.2 4.5 6z" />
+    </g>
+</svg>

Elternbeirat.Web/Features/Layout/Signet.razor.css

@@ -0,0 +1,11 @@
+/* A white bubble with green figures. It sits on the header gradient and on the dark
+   footer, both of which always carry white text, so --color-on-header is right in
+   both places. The figures use the darker green so they stay distinct on the white
+   bubble (the lighter --color-accent would wash out). */
+.signet-bubble {
+    fill: var(--color-on-header);
+}
+
+.signet-figures {
+    fill: var(--color-accent-dark);
+}