Elternbeirat.Web.Tests/RouteSmokeTests.cs

@@ -351,9 +351,9 @@ public sealed partial class RouteSmokeTests : IDisposable
     private static partial Regex Href();
 
     /// <summary>
-    /// Matches the home page's tile navigation, from its opening tag to the closing
-    /// one. It nests no other <c>&lt;nav&gt;</c>.
+    /// Matches the home page's tile section, from its opening tag to the closing
+    /// one. It nests no other <c>&lt;section&gt;</c>.
     /// </summary>
-    [GeneratedRegex("""<nav class="home-tiles".*?</nav>""", RegexOptions.Singleline)]
+    [GeneratedRegex("""<section class="home-tiles".*?</section>""", RegexOptions.Singleline)]
     private static partial Regex HomeTiles();
 }

Elternbeirat.Web/Components/Layout/MainLayout.razor

@@ -27,7 +27,7 @@
                 <span class="nav-toggle-bar"></span>
             </label>
 
-            <nav class="main-nav">
+            <nav class="main-nav" aria-label="Hauptmenü">
                 @* The home link comes from PocketBase like every other entry (the
                    "home" page carries location "header"), so it is rendered by the
                    loop below -- no separate hard-coded home link, which would show

Elternbeirat.Web/Features/Home/Home.razor

@@ -54,7 +54,8 @@
 
 @if (_tiles.Count > 0)
 {
-    <nav class="home-tiles" aria-label="Bereiche der Website">
+    <section class="home-tiles" aria-labelledby="home-tiles-title">
+        <h2 id="home-tiles-title">Bereiche im Überblick</h2>
         <ul>
             @foreach (var tile in _tiles)
             {
@@ -70,7 +71,7 @@
                 </li>
             }
         </ul>
-    </nav>
+    </section>
 }
 
 <div class="home-embeds">

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. */

docs/redaktion.md

@@ -132,7 +132,9 @@ Darunter erscheinen automatisch:
 - **Kacheln** — eine pro öffentlicher Seite mit `location = header` (außer der
   Startseite), in Menü-Reihenfolge. Der Kacheltext ist der **erste Satz** des
   `body` (ohne Überschrift, ggf. gekürzt); beginnt der Text mit einer Liste oder
-  einem Baustein, zeigt die Kachel nur den Titel. Das Symbol hängt am Slug und ist
+  einem Baustein, zeigt die Kachel nur den Titel. Auf dem Handy zeigen die
+  Kacheln immer nur Symbol und Titel (zwei Spalten), ab Tablet-Breite auch den
+  Text (drei Spalten). Das Symbol hängt am Slug und ist
   im Code festgelegt; eine neue Seite bekommt ein Standardsymbol.
 
 Eigene Felder für Kacheltext und Symbol gibt es (noch) nicht.