Add home hero with intro and buttons from the body, next-event card and page tiles

Elternbeirat.Web/wwwroot/app.css

@@ -62,6 +62,18 @@
     --color-button-hover: #1f5477;
     --color-on-button: #fff;
 
+    /* The light button for dark surfaces (the brand gradient of the home hero),
+       where a filled blue button would melt into the blue end. Dark blue text on
+       white, 8:1; the hover is a faint blue tint, so the button still reads as one. */
+    --color-button-light: #fff;
+    --color-button-light-hover: #eaf3f9;
+    --color-on-button-light: #1f5477;
+
+    /* Keyboard focus ring (:focus-visible). Its own token so it can stay strong on
+       the light page (dark blue, 8:1 on white) and flip to a light blue on the dark
+       one; on the gradient the hero switches it to white. */
+    --color-focus: #1f5477;
+
     /* Headings. Its own token (not --color-brand) so headings and links can differ:
        in dark mode headings become a soft white while links keep the brand blue. */
     --color-heading: #2b6f9c;
@@ -158,6 +170,13 @@
                                           text, calm on the dark page */
         --color-button-hover: #1f5477;
 
+        --color-button-light: #e8eef3; /* white eased down, so it does not glare
+                                          on the darker gradient */
+        --color-button-light-hover: #d3dee6;
+        --color-on-button-light: #1a3d57; /* 9:1 on the eased white */
+
+        --color-focus: #a3d5f4;        /* light blue: a dark ring would vanish here */
+
         --color-heading: #c9ced6;      /* soft white, kept a step brighter than the
                                           body text so headings still lead the page */
 
@@ -211,6 +230,11 @@ body {
     background: var(--color-page);
     color: var(--color-text);
     font-size: var(--font-size-body);
+    /* Full-width bands inside the content column (the home hero) reach the window
+       edges with 100vw, which includes the vertical scrollbar and would add a few
+       pixels of sideways scroll. clip, not hidden: hidden would make body a scroll
+       container and stop the sticky header from sticking. */
+    overflow-x: clip;
 }
 
 a {
@@ -273,6 +297,54 @@ h1:focus {
     vertical-align: -0.15em;
 }
 
+/* Buttons for links that are an action (the hero's "Kommende Termine", "Kontakt
+   aufnehmen"). Global, because the look must be the same wherever a component puts
+   one. Primary = filled, secondary = outlined; both carry the same 2px border, so a
+   primary and a secondary side by side are exactly the same height. Hover changes
+   colour and shadow only -- nothing moves (hover movement was removed on purpose). */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-4);
+    border: 2px solid transparent;
+    border-radius: var(--radius-sm);
+    font-weight: 700;
+    line-height: 1.4;
+    text-decoration: none;
+    transition: background-color var(--transition), box-shadow var(--transition),
+                color var(--transition), border-color var(--transition);
+}
+
+.btn:focus-visible {
+    outline: 3px solid var(--color-focus);
+    outline-offset: 2px;
+}
+
+.btn-primary {
+    background: var(--color-button);
+    border-color: var(--color-button);
+    color: var(--color-on-button);
+}
+
+.btn-primary:hover {
+    background: var(--color-button-hover);
+    border-color: var(--color-button-hover);
+    color: var(--color-on-button);
+    box-shadow: var(--shadow-hover);
+}
+
+.btn-secondary {
+    background: transparent;
+    border-color: var(--color-button);
+    color: var(--color-brand);
+}
+
+.btn-secondary:hover {
+    background: var(--color-brand-tint);
+    color: var(--color-brand);
+}
+
 /* 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