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

Elternbeirat.Web/Features/Home/Home.razor.css

@@ -188,26 +188,35 @@
 }
 
 /* --- Tiles --------------------------------------------------------------------
-   One card per header page. auto-fill with a minimum width gives as many columns
-   as fit (one on a phone) without breakpoints. Hover = stronger shadow and a blue
+   One card per header page. Fixed columns instead of auto-fill: two on a phone,
+   three from tablet width, so the six pages always fill whole rows and never leave
+   a half row behind. On a phone the tiles are compact (icon and title only), the
+   teaser would make six tiles a long scroll. Hover = stronger shadow and a blue
    edge, nothing moves. */
+.home-tiles {
+    margin-block: var(--space-5);
+}
+
 .home-tiles ul {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--space-3);
     margin: 0;
     padding: 0;
     list-style: none;
 }
 
+/* On a phone the icon sits above the title: beside it, a half-width column leaves
+   too little room and titles get cut. */
 .tile-link {
     box-sizing: border-box;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    column-gap: var(--space-3);
+    display: flex;
+    flex-direction: column;
     align-items: center;
+    gap: var(--space-2);
     height: 100%;
-    padding: var(--space-3) var(--space-4);
+    text-align: center;
+    padding: var(--space-3);
     border: 1px solid transparent;
     border-radius: var(--radius);
     background: var(--color-bg);
@@ -228,10 +237,9 @@
     outline-offset: 2px;
 }
 
-/* The icon in a soft round tint; it spans both rows, so title and text line up
-   beside it whether there is a text or not. */
+/* The icon in a soft round tint. */
 .tile-icon {
-    grid-row: span 2;
+    flex-shrink: 0;
     display: grid;
     place-items: center;
     width: 3rem;
@@ -241,18 +249,51 @@
     color: var(--color-brand);
 }
 
+/* Long German compounds must wrap rather than overflow the narrow tile. */
 .tile-title {
+    max-width: 100%;
     color: var(--color-brand);
     font-size: 1.1rem;
     font-weight: 700;
+    overflow-wrap: anywhere;
 }
 
+/* Hidden on a phone; the title alone says where the tile leads. */
 .tile-text {
+    display: none;
     color: var(--color-text-soft);
     font-size: 0.9rem;
     line-height: 1.45;
 }
 
+@media (min-width: 48rem) {
+    .home-tiles ul {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    /* Icon left, title and teaser right. Both start at the top, so the icon stays
+       beside the title even when the teaser runs over several lines. The icon spans
+       both rows here, where the teaser is visible. */
+    .tile-link {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        column-gap: var(--space-3);
+        row-gap: 0;
+        align-content: start;
+        padding: var(--space-3) var(--space-4);
+        text-align: start;
+    }
+
+    .tile-icon {
+        grid-row: span 2;
+        align-self: start;
+    }
+
+    .tile-text {
+        display: block;
+    }
+}
+
 /* --- Embeds -------------------------------------------------------------------
    The blocks the home page opts into (posts, events) sit side by side from desktop
    width, so the start page shows both without a long scroll. One column below. */