From e51afeb34b0d39359da1ef13b47a917192131a88 Mon Sep 17 00:00:00 2001
From: tleininger <thomas.leininger@kardex.com>
Date: Thu, 1 Oct 2026 14:05:25 +0200
Subject: [PATCH 1/3] Add home hero with intro and buttons from the body,
 next-event card and page tiles

---
 Elternbeirat.Web.Tests/FixedTimeProvider.cs   |  13 +
 Elternbeirat.Web.Tests/HomeIntroTests.cs      |  67 +++++
 Elternbeirat.Web.Tests/MarkdownTests.cs       |  45 +++
 Elternbeirat.Web.Tests/PocketBaseFixture.cs   |   6 +-
 Elternbeirat.Web.Tests/RouteSmokeTests.cs     |  78 ++++-
 Elternbeirat.Web.Tests/TileIconsTests.cs      |  37 +++
 Elternbeirat.Web.Tests/UpcomingEventsTests.cs |  45 +++
 .../Features/Embeds/EventsEmbed.razor.cs      |  14 +-
 .../Features/Events/EventList.razor.cs        |  12 +-
 .../Features/Events/UpcomingEvents.cs         |  30 ++
 Elternbeirat.Web/Features/Home/Home.razor     |  78 ++++-
 Elternbeirat.Web/Features/Home/Home.razor.cs  |  70 ++++-
 Elternbeirat.Web/Features/Home/Home.razor.css | 266 +++++++++++++++++-
 Elternbeirat.Web/Features/Home/HomeIntro.cs   | 128 +++++++++
 Elternbeirat.Web/Features/Home/HomeTile.cs    |  39 +++
 Elternbeirat.Web/Features/Home/TileIcons.cs   |  45 +++
 .../Features/Layout/NavBuilder.cs             |  42 ++-
 Elternbeirat.Web/Program.cs                   |   4 +
 Elternbeirat.Web/Shared/BerlinClock.cs        |  33 +++
 Elternbeirat.Web/Shared/Markdown.cs           | 169 +++++++++--
 Elternbeirat.Web/wwwroot/app.css              |  72 +++++
 docs/redaktion.md                             |  32 +++
 pb/pb_migrations/1727200000_dev_seed.js       |   2 +-
 23 files changed, 1262 insertions(+), 65 deletions(-)
 create mode 100644 Elternbeirat.Web.Tests/FixedTimeProvider.cs
 create mode 100644 Elternbeirat.Web.Tests/HomeIntroTests.cs
 create mode 100644 Elternbeirat.Web.Tests/TileIconsTests.cs
 create mode 100644 Elternbeirat.Web.Tests/UpcomingEventsTests.cs
 create mode 100644 Elternbeirat.Web/Features/Events/UpcomingEvents.cs
 create mode 100644 Elternbeirat.Web/Features/Home/HomeIntro.cs
 create mode 100644 Elternbeirat.Web/Features/Home/HomeTile.cs
 create mode 100644 Elternbeirat.Web/Features/Home/TileIcons.cs
 create mode 100644 Elternbeirat.Web/Shared/BerlinClock.cs

diff --git a/Elternbeirat.Web.Tests/FixedTimeProvider.cs b/Elternbeirat.Web.Tests/FixedTimeProvider.cs
new file mode 100644
index 0000000..e8b99c5
--- /dev/null
+++ b/Elternbeirat.Web.Tests/FixedTimeProvider.cs
@@ -0,0 +1,13 @@
+namespace Elternbeirat.Web.Tests;
+
+/// <summary>
+/// A clock that always shows the same moment, so tests can decide what "today" is
+/// (e.g. before or after the fixture's events). Hand-written instead of
+/// Microsoft.Extensions.TimeProvider.Testing: overriding one method does not justify
+/// a new package.
+/// </summary>
+/// <param name="now">The moment the clock shows.</param>
+internal sealed class FixedTimeProvider(DateTimeOffset now) : TimeProvider
+{
+    public override DateTimeOffset GetUtcNow() => now;
+}
diff --git a/Elternbeirat.Web.Tests/HomeIntroTests.cs b/Elternbeirat.Web.Tests/HomeIntroTests.cs
new file mode 100644
index 0000000..1b919d1
--- /dev/null
+++ b/Elternbeirat.Web.Tests/HomeIntroTests.cs
@@ -0,0 +1,67 @@
+using Elternbeirat.Web.Features.Home;
+
+namespace Elternbeirat.Web.Tests;
+
+/// <summary>
+/// Unit tests for taking the home page's body apart into heading, intro and
+/// buttons. Pure logic, no PocketBase needed.
+/// </summary>
+public class HomeIntroTests
+{
+    [Fact]
+    public void Body_splits_into_title_intro_and_buttons()
+    {
+        var intro = HomeIntro.Parse(
+            "# Willkommen\n\nSchön, dass Sie da sind.\n\n[Kommende Termine](/events)\n[Kontakt aufnehmen](/contact)");
+
+        intro.Title.ShouldBe("Willkommen");
+        intro.IntroHtml.ShouldBe("<p>Schön, dass Sie da sind.</p>\n");
+        intro.Links.ShouldBe(
+        [
+            new HomeLink("/events", "Kommende Termine"),
+            new HomeLink("/contact", "Kontakt aufnehmen"),
+        ]);
+    }
+
+    [Theory]
+    [InlineData(null)]
+    [InlineData("")]
+    [InlineData("   ")]
+    public void Empty_body_gives_the_fallback(string? markdown) =>
+        HomeIntro.Parse(markdown).ShouldBe(HomeIntro.Fallback);
+
+    [Fact]
+    public void Body_without_heading_keeps_the_fallback_title_and_all_text()
+    {
+        var intro = HomeIntro.Parse("Nur ein Absatz.");
+
+        intro.Title.ShouldBe(HomeIntro.FallbackTitle);
+        intro.IntroHtml.ShouldContain("Nur ein Absatz.");
+        intro.Links.ShouldBeEmpty();
+    }
+
+    [Fact]
+    public void Last_paragraph_with_other_text_stays_intro()
+    {
+        // "oder" would get lost in a button row, so the paragraph stays text.
+        var intro = HomeIntro.Parse("# Hallo\n\n[Termine](/events) oder [Kontakt](/contact)");
+
+        intro.Links.ShouldBeEmpty();
+        intro.IntroHtml.ShouldContain("href=\"/events\"");
+    }
+
+    [Fact]
+    public void Link_paragraph_that_is_not_last_stays_intro()
+    {
+        var intro = HomeIntro.Parse("# Hallo\n\n[Termine](/events)\n\nSchlusssatz.");
+
+        intro.Links.ShouldBeEmpty();
+        intro.IntroHtml.ShouldContain("Schlusssatz.");
+    }
+
+    [Fact]
+    public void Heading_markup_is_reduced_to_its_text()
+    {
+        HomeIntro.Parse("# Willkommen beim **Elternbeirat**").Title.ShouldBe("Willkommen beim Elternbeirat");
+    }
+}
diff --git a/Elternbeirat.Web.Tests/MarkdownTests.cs b/Elternbeirat.Web.Tests/MarkdownTests.cs
index 038f9ca..0267aa0 100644
--- a/Elternbeirat.Web.Tests/MarkdownTests.cs
+++ b/Elternbeirat.Web.Tests/MarkdownTests.cs
@@ -78,4 +78,49 @@ public class MarkdownTests
         html.ShouldContain($"<li class=\"{Markdown.LoneLinkClass}\"><a href=\"/dokumente/antrag.pdf\">");
         html.ShouldContain("<li>Text mit");
     }
+
+    [Fact]
+    public void First_sentence_skips_the_heading_and_drops_the_markdown()
+    {
+        var sentence = Markdown.FirstSentence(
+            "# Vorstand\n\nWir sind **sieben** [Eltern](/board). Der Rest folgt.");
+
+        sentence.ShouldBe("Wir sind sieben Eltern.");
+    }
+
+    [Theory]
+    [InlineData("Wir helfen z. B. bei Anträgen. Mehr dazu unten.", "Wir helfen z. B. bei Anträgen.")]
+    [InlineData("Gewählt am 13. November 2025. Danach mehr.", "Gewählt am 13. November 2025.")]
+    [InlineData("Haben Sie Fragen? Schreiben Sie uns.", "Haben Sie Fragen?")]
+    [InlineData("Ohne Satzzeichen am Ende", "Ohne Satzzeichen am Ende")]
+    public void First_sentence_ends_at_a_real_sentence_end(string markdown, string expected) =>
+        Markdown.FirstSentence(markdown).ShouldBe(expected);
+
+    [Fact]
+    public void First_sentence_joins_soft_line_breaks_with_a_space()
+    {
+        // Editors wrap long lines; the wrap must not glue two words together.
+        Markdown.FirstSentence("Erste Zeile\nzweite Zeile.").ShouldBe("Erste Zeile zweite Zeile.");
+    }
+
+    [Fact]
+    public void First_sentence_longer_than_the_limit_is_cut_between_words()
+    {
+        var sentence = Markdown.FirstSentence("Eins zwei drei vier fünf.", maxLength: 12);
+
+        sentence.ShouldBe("Eins zwei…");
+    }
+
+    [Theory]
+    [InlineData(null)]
+    [InlineData("")]
+    [InlineData("# Nur eine Überschrift")]
+    [InlineData("- nur\n- eine Liste")]
+    [InlineData("::: hinweis\nText im Baustein.\n:::")]
+    public void First_sentence_is_empty_without_a_top_level_paragraph(string? markdown) =>
+        Markdown.FirstSentence(markdown).ShouldBe("");
+
+    [Fact]
+    public void First_sentence_rejects_a_limit_below_one() =>
+        Should.Throw<ArgumentOutOfRangeException>(() => Markdown.FirstSentence("Text.", maxLength: 0));
 }
diff --git a/Elternbeirat.Web.Tests/PocketBaseFixture.cs b/Elternbeirat.Web.Tests/PocketBaseFixture.cs
index e137631..151241a 100644
--- a/Elternbeirat.Web.Tests/PocketBaseFixture.cs
+++ b/Elternbeirat.Web.Tests/PocketBaseFixture.cs
@@ -226,7 +226,11 @@ public sealed class PocketBaseFixture : IAsyncLifetime
         // links home too, but the nav entry is the single source of the home link.
         await CreateRecordAsync(http, "pages", new
         {
-            title = "Start", body = "# Willkommen", location = "header",
+            // The body drives the home hero: "# heading" -> h1, the paragraph -> intro,
+            // the last paragraph of only links -> the button row.
+            title = "Start",
+            body = "# Willkommen\n\nSchön, dass Sie da sind.\n\n[Kommende Termine](/events)\n[Kontakt aufnehmen](/contact)",
+            location = "header",
             order = 1, slug = "home", embed = new[] { "posts", "events" }, @public = true,
         });
         await CreateRecordAsync(http, "pages", new
diff --git a/Elternbeirat.Web.Tests/RouteSmokeTests.cs b/Elternbeirat.Web.Tests/RouteSmokeTests.cs
index ca9ba7c..a4c3b0b 100644
--- a/Elternbeirat.Web.Tests/RouteSmokeTests.cs
+++ b/Elternbeirat.Web.Tests/RouteSmokeTests.cs
@@ -1,6 +1,8 @@
 using System.Net;
 using System.Text.RegularExpressions;
 using Microsoft.AspNetCore.Mvc.Testing;
+using Microsoft.AspNetCore.TestHost;
+using Microsoft.Extensions.DependencyInjection;
 
 namespace Elternbeirat.Web.Tests;
 
@@ -29,10 +31,25 @@ public sealed partial class RouteSmokeTests : IDisposable
         // the value from appsettings. UseSetting (not ConfigureAppConfiguration)
         // because it wins over appsettings.Development.json, which otherwise pins the
         // client to localhost:8090 while the test container uses a random port.
-        _factory = _baseFactory.WithWebHostBuilder(builder =>
-            builder.UseSetting("PocketBase:BaseUrl", pocketBase.BaseUrl.ToString()));
+        _factory = WithClock(
+            _baseFactory.WithWebHostBuilder(builder =>
+                builder.UseSetting("PocketBase:BaseUrl", pocketBase.BaseUrl.ToString())),
+            BeforeFixtureEvents);
     }
 
+    /// <summary>
+    /// "Now" for the default factory: a week before the fixture's first event, so
+    /// "upcoming" stays true no matter when the tests run.
+    /// </summary>
+    private static readonly DateTimeOffset BeforeFixtureEvents = new(2026, 10, 1, 10, 0, 0, TimeSpan.Zero);
+
+    /// <summary>
+    /// Wraps <paramref name="factory"/> so the app's clock shows <paramref name="now"/>.
+    /// </summary>
+    private static WebApplicationFactory<Program> WithClock(WebApplicationFactory<Program> factory, DateTimeOffset now) =>
+        factory.WithWebHostBuilder(builder =>
+            builder.ConfigureTestServices(services => services.AddSingleton<TimeProvider>(new FixedTimeProvider(now))));
+
     public void Dispose()
     {
         _factory.Dispose();
@@ -261,6 +278,56 @@ public sealed partial class RouteSmokeTests : IDisposable
         response.StatusCode.ShouldBe(HttpStatusCode.ServiceUnavailable);
     }
 
+    [Fact]
+    public async Task Home_hero_takes_title_and_buttons_from_the_body()
+    {
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/", UriKind.Relative));
+
+        html.ShouldContain(">Willkommen</h1>");
+        html.ShouldNotContain(">Elternbeirat der IGMH</h1>"); // the fallback title
+        html.ShouldContain("""<a class="btn btn-primary" href="/events">""");
+        html.ShouldContain("""<a class="btn btn-secondary" href="/contact">""");
+    }
+
+    [Fact]
+    public async Task Home_tiles_are_exactly_the_public_header_pages()
+    {
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/", UriKind.Relative));
+
+        var tiles = HomeTiles().Match(html);
+        tiles.Success.ShouldBeTrue();
+        Href().Matches(tiles.Value).Select(match => match.Groups[1].Value)
+            .ShouldBe(["/board", "/patrons", "/faqs", "/downloads", "/posts", "/events"]);
+    }
+
+    [Fact]
+    public async Task Home_shows_the_next_event_when_one_is_upcoming()
+    {
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/", UriKind.Relative));
+
+        html.ShouldContain("Nächster Termin");
+        html.ShouldContain("Elternbeiratssitzung");
+    }
+
+    [Fact]
+    public async Task Home_hides_the_next_event_when_none_is_upcoming()
+    {
+        // After the fixture's last event nothing is upcoming; the card must vanish
+        // instead of showing an empty frame.
+        await using var factory = WithClock(_factory, new DateTimeOffset(2027, 1, 1, 10, 0, 0, TimeSpan.Zero));
+        var client = factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/", UriKind.Relative));
+
+        html.ShouldNotContain("Nächster Termin");
+    }
+
     /// <summary>
     /// Matches a resource reference that points at an absolute URL, with or without
     /// scheme (<c>https://</c>, <c>http://</c> or protocol-relative <c>//</c>): the
@@ -282,4 +349,11 @@ public sealed partial class RouteSmokeTests : IDisposable
     /// </summary>
     [GeneratedRegex(@"\bhref=""([^""]*)""")]
     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>.
+    /// </summary>
+    [GeneratedRegex("""<nav class="home-tiles".*?</nav>""", RegexOptions.Singleline)]
+    private static partial Regex HomeTiles();
 }
diff --git a/Elternbeirat.Web.Tests/TileIconsTests.cs b/Elternbeirat.Web.Tests/TileIconsTests.cs
new file mode 100644
index 0000000..6867313
--- /dev/null
+++ b/Elternbeirat.Web.Tests/TileIconsTests.cs
@@ -0,0 +1,37 @@
+using Elternbeirat.Web.Features.Home;
+using Elternbeirat.Web.Shared;
+
+namespace Elternbeirat.Web.Tests;
+
+/// <summary>
+/// Unit tests for the slug-to-icon mapping of the home page tiles. Pure logic, no
+/// PocketBase needed.
+/// </summary>
+public class TileIconsTests
+{
+    [Theory]
+    [InlineData("board", "users")]
+    [InlineData("faqs", "help-circle")]
+    [InlineData("events", "calendar")]
+    public void Known_slug_gets_its_icon(string slug, string icon) =>
+        TileIcons.For(slug).ShouldBe(icon);
+
+    [Theory]
+    [InlineData("schulweg")] // a page an editor just created
+    [InlineData("Board")] // slugs are lowercase; anything else is unknown
+    [InlineData("")]
+    public void Unknown_slug_gets_the_default_icon(string slug) =>
+        TileIcons.For(slug).ShouldBe(TileIcons.Default);
+
+    [Theory]
+    [InlineData("board")]
+    [InlineData("patrons")]
+    [InlineData("faqs")]
+    [InlineData("downloads")]
+    [InlineData("posts")]
+    [InlineData("events")]
+    [InlineData("contact")]
+    [InlineData("unbekannt")] // the default
+    public void Every_icon_exists_in_the_icon_set(string slug) =>
+        IconSet.Find(TileIcons.For(slug)).ShouldNotBeNull(); // a typo would render no icon at all
+}
diff --git a/Elternbeirat.Web.Tests/UpcomingEventsTests.cs b/Elternbeirat.Web.Tests/UpcomingEventsTests.cs
new file mode 100644
index 0000000..c811bdb
--- /dev/null
+++ b/Elternbeirat.Web.Tests/UpcomingEventsTests.cs
@@ -0,0 +1,45 @@
+using Elternbeirat.Contracts;
+using Elternbeirat.Web.Features.Events;
+using Elternbeirat.Web.Shared;
+
+namespace Elternbeirat.Web.Tests;
+
+/// <summary>
+/// Unit tests for the "what is coming up?" rule and the Berlin day behind it. Pure
+/// logic, no PocketBase needed.
+/// </summary>
+public class UpcomingEventsTests
+{
+    private static Event Event(string title, DateTime start) =>
+        new() { Id = "test", Title = title, Start = start };
+
+    [Fact]
+    public void Keeps_today_and_later_ordered_by_start()
+    {
+        var events = new[]
+        {
+            Event("Basar", new DateTime(2026, 11, 22, 9, 0, 0)),
+            Event("Gestern", new DateTime(2026, 9, 30, 19, 30, 0)),
+            Event("Heute früh", new DateTime(2026, 10, 1, 7, 0, 0)), // already begun, still today
+            Event("Sitzung", new DateTime(2026, 10, 8, 19, 30, 0)),
+        };
+
+        var upcoming = UpcomingEvents.From(events, new DateOnly(2026, 10, 1));
+
+        upcoming.Select(@event => @event.Title).ShouldBe(["Heute früh", "Sitzung", "Basar"]);
+    }
+
+    [Fact]
+    public void Nothing_upcoming_gives_an_empty_list() =>
+        UpcomingEvents.From([Event("Vorbei", new DateTime(2026, 1, 1))], new DateOnly(2026, 10, 1))
+            .ShouldBeEmpty();
+
+    [Fact]
+    public void Berlin_day_starts_before_the_UTC_day()
+    {
+        // 22:30 UTC on 30 September is 00:30 on 1 October in Berlin (summer time).
+        var time = new FixedTimeProvider(new DateTimeOffset(2026, 9, 30, 22, 30, 0, TimeSpan.Zero));
+
+        BerlinClock.Today(time).ShouldBe(new DateOnly(2026, 10, 1));
+    }
+}
diff --git a/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor.cs b/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor.cs
index 80673ed..54d8fc4 100644
--- a/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor.cs
+++ b/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor.cs
@@ -1,5 +1,7 @@
 using Elternbeirat.Contracts;
 using Elternbeirat.PocketBase;
+using Elternbeirat.Web.Features.Events;
+using Elternbeirat.Web.Shared;
 using Microsoft.AspNetCore.Components;
 
 namespace Elternbeirat.Web.Features.Embeds;
@@ -22,6 +24,9 @@ public partial class EventsEmbed
     [Inject]
     private ILogger<EventsEmbed> Logger { get; set; } = null!;
 
+    [Inject]
+    private TimeProvider Time { get; set; } = null!;
+
     [CascadingParameter]
     private HttpContext? HttpContext { get; set; }
 
@@ -44,13 +49,6 @@ public partial class EventsEmbed
 
         // Teaser: the soonest upcoming events, earliest first. An event earlier
         // today still counts as upcoming.
-        var today = DateOnly.FromDateTime(DateTime.Today);
-        _upcomingEvents =
-        [
-            .. events
-                .Where(@event => DateOnly.FromDateTime(@event.Start) >= today)
-                .OrderBy(@event => @event.Start)
-                .Take(TeaserCount)
-        ];
+        _upcomingEvents = [.. UpcomingEvents.From(events, BerlinClock.Today(Time)).Take(TeaserCount)];
     }
 }
diff --git a/Elternbeirat.Web/Features/Events/EventList.razor.cs b/Elternbeirat.Web/Features/Events/EventList.razor.cs
index 2c6417d..1967cbd 100644
--- a/Elternbeirat.Web/Features/Events/EventList.razor.cs
+++ b/Elternbeirat.Web/Features/Events/EventList.razor.cs
@@ -20,6 +20,9 @@ public partial class EventList
     [Inject]
     private ILogger<EventList> Logger { get; set; } = null!;
 
+    [Inject]
+    private TimeProvider Time { get; set; } = null!;
+
     [CascadingParameter]
     private HttpContext? HttpContext { get; set; }
 
@@ -62,13 +65,8 @@ public partial class EventList
 
         // Split into upcoming and past by date, so an event earlier today still
         // counts as upcoming. Upcoming earliest first, past most recent first.
-        var today = DateOnly.FromDateTime(DateTime.Today);
-        _upcomingEvents =
-        [
-            .. events
-                .Where(@event => DateOnly.FromDateTime(@event.Start) >= today)
-                .OrderBy(@event => @event.Start)
-        ];
+        var today = BerlinClock.Today(Time);
+        _upcomingEvents = [.. UpcomingEvents.From(events, today)];
         _pastEvents =
         [
             .. events
diff --git a/Elternbeirat.Web/Features/Events/UpcomingEvents.cs b/Elternbeirat.Web/Features/Events/UpcomingEvents.cs
new file mode 100644
index 0000000..937f4e2
--- /dev/null
+++ b/Elternbeirat.Web/Features/Events/UpcomingEvents.cs
@@ -0,0 +1,30 @@
+using Elternbeirat.Contracts;
+
+namespace Elternbeirat.Web.Features.Events;
+
+/// <summary>
+///     Picks the events that still lie ahead.
+/// </summary>
+/// <remarks>
+///     The events page, the events embed and the "next event" card on the home page
+///     all need the same answer to "what is coming up?". Keeping the rule here means a
+///     change to it (e.g. hiding an event once it has ended) reaches all three.
+/// </remarks>
+/// <seealso cref="Shared.BerlinClock"/>
+public static class UpcomingEvents
+{
+    /// <summary>
+    ///     Returns the events on or after <paramref name="today"/>, earliest first.
+    /// </summary>
+    /// <param name="events">All events, in any order.</param>
+    /// <param name="today">The current day, from <see cref="Shared.BerlinClock.Today"/>.</param>
+    /// <returns>The upcoming events, ordered by start.</returns>
+    /// <remarks>
+    ///     Compared by day, not by the minute: an event earlier today still counts as
+    ///     upcoming, so a visitor who checks during the evening's meeting still finds it.
+    /// </remarks>
+    public static IEnumerable<Event> From(IEnumerable<Event> events, DateOnly today) =>
+        events
+            .Where(@event => DateOnly.FromDateTime(@event.Start) >= today)
+            .OrderBy(@event => @event.Start);
+}
diff --git a/Elternbeirat.Web/Features/Home/Home.razor b/Elternbeirat.Web/Features/Home/Home.razor
index 318c1a8..7a6284b 100644
--- a/Elternbeirat.Web/Features/Home/Home.razor
+++ b/Elternbeirat.Web/Features/Home/Home.razor
@@ -1,12 +1,78 @@
 @page "/"
+@using Elternbeirat.Web.Features.Events
 
 <PageTitle>Elternbeirat der IGMH</PageTitle>
 
-<h1>Elternbeirat der IGMH</h1>
+@* The hero spans the full window width (see Home.razor.css). Its text is the "home"
+   page's body, taken apart by HomeIntro; the card beside it shows the next event. *@
+<section class="hero">
+    <div class="hero-inner">
+        <div class="hero-text">
+            <h1>@_intro.Title</h1>
 
-<p class="intro">
-    Willkommen beim Elternbeirat der IGMH. Hier finden Sie aktuelle Informationen,
-    Antworten auf häufige Fragen und Unterlagen rund um die Elternarbeit.
-</p>
+            @if (_intro.IntroHtml.Length > 0)
+            {
+                <div class="hero-intro">@((MarkupString)_intro.IntroHtml)</div>
+            }
 
-<PageEmbeds Embed="_embed" />
+            @if (_intro.Links.Count > 0)
+            {
+                <p class="hero-actions">
+                    @for (var i = 0; i < _intro.Links.Count; i++)
+                    {
+                        var link = _intro.Links[i];
+                        <a class="btn @(i == 0 ? "btn-primary" : "btn-secondary")" href="@link.Href">@link.Text</a>
+                    }
+                </p>
+            }
+        </div>
+
+        @if (_nextEvent is not null)
+        {
+            @* The calendar sheet repeats the date as decoration, so it is hidden from
+               screen readers; <EventDate> carries the full date for everyone. *@
+            <a class="next-event" href="/events">
+                <span class="next-event-label">Nächster Termin</span>
+                <span class="next-event-row">
+                    <span class="calendar-sheet" aria-hidden="true">
+                        <span class="calendar-month">@NextEventMonth</span>
+                        <span class="calendar-day">@NextEventDay</span>
+                    </span>
+                    <span class="next-event-details">
+                        <span class="next-event-title">@_nextEvent.Title</span>
+                        <EventDate Value="_nextEvent" />
+                        @if (!string.IsNullOrWhiteSpace(_nextEvent.Location))
+                        {
+                            <span class="next-event-location"><Icon Name="map-pin" Size="16" /> @_nextEvent.Location</span>
+                        }
+                    </span>
+                </span>
+            </a>
+        }
+    </div>
+</section>
+
+@if (_tiles.Count > 0)
+{
+    <nav class="home-tiles" aria-label="Bereiche der Website">
+        <ul>
+            @foreach (var tile in _tiles)
+            {
+                <li>
+                    <a class="tile-link" href="@tile.Href">
+                        <span class="tile-icon"><Icon Name="@tile.Icon" Size="24" /></span>
+                        <span class="tile-title">@tile.Title</span>
+                        @if (tile.Description.Length > 0)
+                        {
+                            <span class="tile-text">@tile.Description</span>
+                        }
+                    </a>
+                </li>
+            }
+        </ul>
+    </nav>
+}
+
+<div class="home-embeds">
+    <PageEmbeds Embed="_embed" />
+</div>
diff --git a/Elternbeirat.Web/Features/Home/Home.razor.cs b/Elternbeirat.Web/Features/Home/Home.razor.cs
index e4d7c4d..9be56da 100644
--- a/Elternbeirat.Web/Features/Home/Home.razor.cs
+++ b/Elternbeirat.Web/Features/Home/Home.razor.cs
@@ -1,5 +1,7 @@
 using Elternbeirat.Contracts;
 using Elternbeirat.PocketBase;
+using Elternbeirat.Web.Features.Events;
+using Elternbeirat.Web.Shared;
 using Microsoft.AspNetCore.Components;
 
 namespace Elternbeirat.Web.Features.Home;
@@ -8,8 +10,15 @@ public partial class Home
 {
     [LoggerMessage(
         Level = LogLevel.Warning,
-        Message = "Could not load the home page from PocketBase; embeds are omitted.")]
-    private static partial void LogSourceUnavailable(
+        Message = "Could not load the pages for the home page from PocketBase; showing the static title only.")]
+    private static partial void LogPagesUnavailable(
+        ILogger logger,
+        Exception exception);
+
+    [LoggerMessage(
+        Level = LogLevel.Warning,
+        Message = "Could not load events for the home page from PocketBase; the next-event card is omitted.")]
+    private static partial void LogEventsUnavailable(
         ILogger logger,
         Exception exception);
 
@@ -19,26 +28,67 @@ public partial class Home
     [Inject]
     private ILogger<Home> Logger { get; set; } = null!;
 
+    [Inject]
+    private TimeProvider Time { get; set; } = null!;
+
     [CascadingParameter]
     private HttpContext? HttpContext { get; set; }
 
-    // Which dynamic blocks the home page shows is editorial: it comes from the
-    // "home" page's embed field in PocketBase, not from hard-coded markup.
-    private IReadOnlyList<string> _embed = [];
+    // Heading, intro and buttons come from the "home" page's body. Until it is loaded
+    // -- and for good if PocketBase is down -- the static fallback heading stands, so
+    // the start page always has a title.
+    private HomeIntro _intro = HomeIntro.Fallback;
 
-    protected override async Task OnInitializedAsync()
+    // The hero, the tiles and the next-event card are fixed structure of the start
+    // page; which dynamic blocks follow below is editorial and comes from the "home"
+    // page's embed field.
+    private IReadOnlyList<HomeTile> _tiles = [];
+    private IReadOnlyList<string> _embed = [];
+    private Event? _nextEvent;
+
+    // Month and day for the calendar sheet. The sheet is decoration (the full date is
+    // in <EventDate> next to it), so the short month drops its trailing period.
+    private string NextEventMonth =>
+        _nextEvent?.Start.ToString("MMM", Cultures.German).TrimEnd('.') ?? "";
+
+    private string NextEventDay =>
+        _nextEvent?.Start.Day.ToString(Cultures.German) ?? "";
+
+    protected override Task OnInitializedAsync()
+    {
+        var token = HttpContext?.RequestAborted ?? CancellationToken.None;
+        return Task.WhenAll(LoadPagesAsync(token), LoadNextEventAsync(token));
+    }
+
+    // Pages and events load side by side and fail on their own: without events the
+    // page loses only the card, without pages only text and tiles. Either way the
+    // start page stays a 200 rather than a 503 -- it is degraded, not broken.
+    private async Task LoadPagesAsync(CancellationToken token)
     {
         try
         {
-            var pages = await PocketBase.GetPagesAsync(HttpContext?.RequestAborted ?? default);
+            var pages = await PocketBase.GetPagesAsync(token);
             var home = pages.FirstOrDefault(page => Page.IsHomeSlug(page.Slug));
+            _intro = HomeIntro.Parse(home?.Body);
             _embed = home?.Embed ?? [];
+            _tiles = HomeTile.From(pages);
         }
         catch (PocketBaseUnavailableException exception)
         {
-            // Only the embeds fail: render the static intro without them instead of a
-            // 500. The home page's own text is markup, so it stays intact.
-            LogSourceUnavailable(Logger, exception);
+            LogPagesUnavailable(Logger, exception);
+        }
+    }
+
+    private async Task LoadNextEventAsync(CancellationToken token)
+    {
+        try
+        {
+            var events = await PocketBase.GetEventsAsync(token);
+            _nextEvent = UpcomingEvents.From(events, BerlinClock.Today(Time)).FirstOrDefault();
+        }
+        catch (PocketBaseUnavailableException exception)
+        {
+            LogEventsUnavailable(Logger, exception);
         }
     }
 }
diff --git a/Elternbeirat.Web/Features/Home/Home.razor.css b/Elternbeirat.Web/Features/Home/Home.razor.css
index d480a24..a185190 100644
--- a/Elternbeirat.Web/Features/Home/Home.razor.css
+++ b/Elternbeirat.Web/Features/Home/Home.razor.css
@@ -1,6 +1,266 @@
-.intro {
+/* --- Hero ---------------------------------------------------------------------
+   A full-width band in the brand gradient with a faint dot pattern on top. The
+   page content sits in a centred column (.content in MainLayout), so the band
+   breaks out of it: 100vw wide, pulled left by the column's offset. body clips the
+   few pixels of scrollbar this adds (see app.css). The negative top margin cancels
+   the column's top padding, so the band meets the header without a strip of page
+   background in between.
+   The pattern is an inline SVG in a data: URL -- no request, nothing from another
+   host. White dots at 12% opacity: visible as texture, too faint to cost the
+   white text any contrast. */
+.hero {
+    width: 100vw;
+    margin: calc(-1 * var(--space-4)) 0 var(--space-5) calc(50% - 50vw);
+    background:
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%23fff' fill-opacity='.12'/%3E%3C/svg%3E"),
+        var(--gradient-brand);
+    color: var(--color-on-header);
+}
+
+/* The inside follows the page frame again, so the hero text lines up with the
+   tiles and lists below. Stacked on a phone; from tablet width the next-event card
+   moves beside the text. */
+.hero-inner {
+    box-sizing: border-box;
+    max-width: var(--content-width);
+    margin: 0 auto;
+    padding: var(--space-6) 1.25rem;
+    display: grid;
+    gap: var(--space-5);
+    align-items: center;
+}
+
+@media (min-width: 48rem) {
+    .hero-inner {
+        grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
+    }
+}
+
+/* On the gradient everything is white: the global heading colour is a blue that
+   would vanish here. */
+.hero h1 {
+    color: var(--color-on-header);
+}
+
+/* The intro is editor Markdown, rendered without scope attributes, so it is reached
+   through ::deep. Slightly larger than body text, as a lead. Links stay white and
+   underlined: the blue link colour would be unreadable on the gradient. */
+.hero-intro ::deep p {
+    font-size: 1.15rem;
+}
+
+.hero-intro ::deep a,
+.hero-intro ::deep a:hover {
+    color: var(--color-on-header);
+}
+
+.hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+    margin: var(--space-4) 0 0;
+}
+
+/* The hero's buttons, adapted to the dark gradient: the primary turns light (a
+   filled blue would melt into the blue end), the secondary becomes a white outline
+   with the same translucent wash as the header menu on hover. The focus ring turns
+   white for the same reason. */
+.hero .btn-primary {
+    background: var(--color-button-light);
+    border-color: var(--color-button-light);
+    color: var(--color-on-button-light);
+}
+
+.hero .btn-primary:hover {
+    background: var(--color-button-light-hover);
+    border-color: var(--color-button-light-hover);
+    color: var(--color-on-button-light);
+}
+
+.hero .btn-secondary {
+    border-color: var(--color-on-header);
+    color: var(--color-on-header);
+}
+
+.hero .btn-secondary:hover {
+    background: var(--color-nav-hover);
+    color: var(--color-on-header);
+}
+
+.hero .btn:focus-visible {
+    outline-color: var(--color-on-header);
+}
+
+/* --- Next event ---------------------------------------------------------------
+   A card on the gradient: the regular card surface, so its text uses the normal
+   tokens and adapts to dark mode by itself. The whole card is one link to the
+   events page. */
+.next-event {
+    display: block;
+    padding: var(--space-4);
+    border-radius: var(--radius);
+    background: var(--color-bg);
+    box-shadow: var(--shadow-lg);
+    color: var(--color-text);
+    text-decoration: none;
+    transition: box-shadow var(--transition);
+}
+
+.next-event:hover {
+    color: var(--color-text);
+    box-shadow: var(--shadow-hover), var(--shadow-lg);
+}
+
+/* The ring sits outside the card, on the gradient, so it is white like the
+   hero's button rings. */
+.next-event:focus-visible {
+    outline: 3px solid var(--color-on-header);
+    outline-offset: 3px;
+}
+
+.next-event-label {
+    display: block;
+    margin-bottom: var(--space-3);
+    color: var(--color-text-soft);
+    font-size: 0.85rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.next-event-row {
+    display: flex;
+    gap: var(--space-3);
+    align-items: flex-start;
+}
+
+/* The calendar sheet: a blue band with the month over a large day number. The band
+   uses the button blue, which keeps white text at >= 5.5:1 in both schemes (the
+   green accent would fall below AA for text this small). */
+.calendar-sheet {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    width: 4rem;
+    overflow: hidden;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-bg);
+    text-align: center;
+}
+
+.calendar-month {
+    padding: 0.1rem 0;
+    background: var(--color-button);
+    color: var(--color-on-button);
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.calendar-day {
+    padding: var(--space-1) 0;
+    color: var(--color-heading);
+    font-size: 1.75rem;
+    font-weight: var(--font-weight-heading);
+    line-height: 1.2;
+}
+
+.next-event-details {
+    min-width: 0;   /* lets a long title wrap instead of widening the card */
+}
+
+.next-event-title {
+    display: block;
+    color: var(--color-brand);
+    font-size: 1.15rem;
+    font-weight: 700;
+    line-height: 1.3;
+}
+
+.next-event-location {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    margin-top: var(--space-1);
+    color: var(--color-text-soft);
+    font-size: 0.9rem;
+}
+
+/* --- 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
+   edge, nothing moves. */
+.home-tiles ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+    gap: var(--space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.tile-link {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: var(--space-3);
+    align-items: center;
+    height: 100%;
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    background: var(--color-bg);
+    box-shadow: var(--shadow);
+    color: var(--color-text);
+    text-decoration: none;
+    transition: box-shadow var(--transition), border-color var(--transition);
+}
+
+.tile-link:hover {
+    border-color: var(--color-brand);
+    box-shadow: var(--shadow-hover);
+    color: var(--color-text);
+}
+
+.tile-link:focus-visible {
+    outline: 3px solid var(--color-focus);
+    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. */
+.tile-icon {
+    grid-row: span 2;
+    display: grid;
+    place-items: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    background: var(--color-brand-tint);
+    color: var(--color-brand);
+}
+
+.tile-title {
+    color: var(--color-brand);
     font-size: 1.1rem;
-    /* Softer than body text, via the token -- so it adapts in dark mode instead of
-       staying a fixed dark grey that turns unreadable there. */
+    font-weight: 700;
+}
+
+.tile-text {
     color: var(--color-text-soft);
+    font-size: 0.9rem;
+    line-height: 1.45;
+}
+
+/* --- 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. */
+@media (min-width: 64rem) {
+    .home-embeds {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: var(--space-5);
+        align-items: start;
+    }
 }
diff --git a/Elternbeirat.Web/Features/Home/HomeIntro.cs b/Elternbeirat.Web/Features/Home/HomeIntro.cs
new file mode 100644
index 0000000..1dfb848
--- /dev/null
+++ b/Elternbeirat.Web/Features/Home/HomeIntro.cs
@@ -0,0 +1,128 @@
+using Elternbeirat.Web.Shared;
+using Markdig.Syntax;
+using Markdig.Syntax.Inlines;
+
+namespace Elternbeirat.Web.Features.Home;
+
+/// <summary>
+///     The head of the home page, taken apart from the <c>home</c> page's Markdown body:
+///     a large heading, an intro and a row of buttons.
+/// </summary>
+/// <param name="Title">The large heading.</param>
+/// <param name="IntroHtml">The intro rendered to HTML, or an empty string.</param>
+/// <param name="Links">The buttons, in the order the editor wrote them; may be empty.</param>
+/// <remarks>
+///     Everything visible here is written by editors in PocketBase. The page only gives
+///     it the hero layout, so the editor needs no new field and no special syntax:
+///     <list type="bullet">
+///         <item><description>The first <c># heading</c> becomes the large heading.</description></item>
+///         <item>
+///             <description>
+///                 A last paragraph made of nothing but links becomes the button row;
+///                 the first link is the primary button.
+///             </description>
+///         </item>
+///         <item><description>Everything else is the intro text.</description></item>
+///     </list>
+///     <para>
+///         <see cref="Fallback"/> keeps a static heading when PocketBase cannot be
+///         reached, so the start page never renders without a title.
+///     </para>
+/// </remarks>
+/// <example>
+///     <code>
+///         HomeIntro.Parse("# Willkommen\n\nSchön, dass Sie da sind.\n\n[Termine](/events) [Kontakt](/contact)");
+///         // Title "Willkommen", IntroHtml "&lt;p&gt;Schön, dass Sie da sind.&lt;/p&gt;\n", two links
+///     </code>
+/// </example>
+public sealed record HomeIntro(string Title, string IntroHtml, IReadOnlyList<HomeLink> Links)
+{
+    /// <summary>
+    ///     The heading shown when the body has none or PocketBase is not reachable.
+    /// </summary>
+    public const string FallbackTitle = "Elternbeirat der IGMH";
+
+    /// <summary>
+    ///     The head of the home page without any content from PocketBase: the static
+    ///     heading, no intro, no buttons.
+    /// </summary>
+    public static HomeIntro Fallback { get; } = new(FallbackTitle, "", []);
+
+    /// <summary>
+    ///     Takes the <c>home</c> page's body apart into heading, intro and buttons.
+    /// </summary>
+    /// <param name="markdown">The body; may be <see langword="null"/> or empty.</param>
+    /// <returns>
+    ///     The parts; <see cref="Fallback"/> for an empty body. Without a level-1
+    ///     heading, the title is <see cref="FallbackTitle"/> and the rest is used as is.
+    /// </returns>
+    /// <remarks>
+    ///     Only top-level blocks are looked at: a heading or a link paragraph inside a
+    ///     list or a <c>:::</c> block stays part of the intro. Links in the button row
+    ///     may be separated by spaces or line breaks; any other text in the paragraph
+    ///     (e.g. "oder") keeps it a normal paragraph, because the button row would drop
+    ///     that text.
+    /// </remarks>
+    public static HomeIntro Parse(string? markdown)
+    {
+        if (string.IsNullOrWhiteSpace(markdown))
+        {
+            return Fallback;
+        }
+
+        var document = Markdown.Parse(markdown);
+
+        var heading = document.OfType<HeadingBlock>().FirstOrDefault(block => block.Level == 1);
+        if (heading is not null)
+        {
+            document.Remove(heading);
+        }
+
+        var links = document.LastChild is ParagraphBlock last ? LinksOnly(last) : [];
+        if (links.Count > 0)
+        {
+            document.RemoveAt(document.Count - 1);
+        }
+
+        var title = heading?.Inline is { } inline ? Markdown.PlainText(inline) : "";
+        return new HomeIntro(
+            string.IsNullOrEmpty(title) ? FallbackTitle : title,
+            Markdown.Render(document),
+            links);
+    }
+
+    /// <summary>
+    ///     Reads the links of a paragraph that holds nothing but links.
+    /// </summary>
+    /// <param name="paragraph">The paragraph to inspect.</param>
+    /// <returns>
+    ///     Its links, or an empty list if the paragraph contains anything besides links
+    ///     and whitespace (including an image).
+    /// </returns>
+    private static List<HomeLink> LinksOnly(ParagraphBlock paragraph) =>
+        paragraph.Inline?.Where(inline => !Markdown.IsBlank(inline)).ToList() is { Count: > 0 } inlines
+        && inlines.All(inline => inline is LinkInline { IsImage: false } or AutolinkInline)
+            ? [.. inlines.Select(ToLink)]
+            : [];
+
+    /// <summary>
+    ///     Turns a link inline into a button.
+    /// </summary>
+    /// <param name="inline">A <see cref="LinkInline"/> or <see cref="AutolinkInline"/>.</param>
+    /// <returns>The button's target and visible text.</returns>
+    /// <exception cref="ArgumentException"><paramref name="inline"/> is neither kind of link.</exception>
+    private static HomeLink ToLink(Inline inline) =>
+        inline switch
+        {
+            LinkInline link => new HomeLink(link.Url ?? "", Markdown.PlainText(link)),
+            AutolinkInline autolink => new HomeLink(autolink.Url, autolink.Url),
+            _ => throw new ArgumentException("Not a link.", nameof(inline)),
+        };
+}
+
+/// <summary>
+///     A button in the head of the home page.
+/// </summary>
+/// <param name="Href">The link target as the editor wrote it.</param>
+/// <param name="Text">The visible button text.</param>
+public sealed record HomeLink(string Href, string Text);
diff --git a/Elternbeirat.Web/Features/Home/HomeTile.cs b/Elternbeirat.Web/Features/Home/HomeTile.cs
new file mode 100644
index 0000000..c625991
--- /dev/null
+++ b/Elternbeirat.Web/Features/Home/HomeTile.cs
@@ -0,0 +1,39 @@
+using Elternbeirat.Contracts;
+using Elternbeirat.Web.Features.Layout;
+using Elternbeirat.Web.Shared;
+
+namespace Elternbeirat.Web.Features.Home;
+
+/// <summary>
+///     One tile on the home page, leading to a section of the site.
+/// </summary>
+/// <param name="Href">Target URL of the page.</param>
+/// <param name="Title">The page's title.</param>
+/// <param name="Description">
+///     The first sentence of the page's body, or an empty string, in which case the
+///     tile shows only the title.
+/// </param>
+/// <param name="Icon">The icon name, see <see cref="TileIcons"/>.</param>
+public sealed record HomeTile(string Href, string Title, string Description, string Icon)
+{
+    /// <summary>
+    ///     Builds one tile per header page except the home page itself.
+    /// </summary>
+    /// <param name="pages">All public pages.</param>
+    /// <returns>The tiles, in menu order.</returns>
+    /// <remarks>
+    ///     The tiles mirror the header menu (<see cref="NavBuilder.HeaderPages"/>), so a
+    ///     page an editor puts into the header appears here too, without any code. The
+    ///     home page is left out: a tile leading to the page it sits on would be useless.
+    /// </remarks>
+    public static IReadOnlyList<HomeTile> From(IReadOnlyList<Page> pages) =>
+    [
+        .. NavBuilder.HeaderPages(pages)
+            .Where(page => !Page.IsHomeSlug(page.Slug))
+            .Select(page => new HomeTile(
+                NavBuilder.HrefFor(page.Slug),
+                page.Title,
+                Markdown.FirstSentence(page.Body),
+                TileIcons.For(page.Slug))),
+    ];
+}
diff --git a/Elternbeirat.Web/Features/Home/TileIcons.cs b/Elternbeirat.Web/Features/Home/TileIcons.cs
new file mode 100644
index 0000000..34e076f
--- /dev/null
+++ b/Elternbeirat.Web/Features/Home/TileIcons.cs
@@ -0,0 +1,45 @@
+using System.Collections.Frozen;
+using Elternbeirat.Web.Shared;
+
+namespace Elternbeirat.Web.Features.Home;
+
+/// <summary>
+///     Chooses the icon of a home page tile from the page's slug.
+/// </summary>
+/// <remarks>
+///     Pure presentation, so it lives in code: the schema has no icon field, and adding
+///     one needs a schema change that cannot reach production yet. A page without an
+///     entry here (e.g. one an editor just created) gets <see cref="Default"/>, so a
+///     new page always shows up as a complete tile.
+/// </remarks>
+/// <seealso cref="IconSet"/>
+public static class TileIcons
+{
+    /// <summary>
+    ///     The icon for a slug without its own entry: a generic page.
+    /// </summary>
+    public const string Default = "file-text";
+
+    /// <summary>
+    ///     Icon name per slug. Every value must be a name in <see cref="IconSet"/>.
+    /// </summary>
+    private static readonly FrozenDictionary<string, string> Icons =
+        new Dictionary<string, string>
+        {
+            ["board"] = "users",
+            ["patrons"] = "heart-handshake",
+            ["faqs"] = "help-circle",
+            ["downloads"] = "download",
+            ["posts"] = "newspaper",
+            ["events"] = "calendar",
+            ["contact"] = "mail",
+        }.ToFrozenDictionary(StringComparer.Ordinal);
+
+    /// <summary>
+    ///     Returns the icon name for a page.
+    /// </summary>
+    /// <param name="slug">The page's slug, e.g. <c>board</c>.</param>
+    /// <returns>An icon name from <see cref="IconSet"/>; <see cref="Default"/> for an unknown slug.</returns>
+    public static string For(string slug) =>
+        Icons.GetValueOrDefault(slug, Default);
+}
diff --git a/Elternbeirat.Web/Features/Layout/NavBuilder.cs b/Elternbeirat.Web/Features/Layout/NavBuilder.cs
index c1f9df0..40c27f4 100644
--- a/Elternbeirat.Web/Features/Layout/NavBuilder.cs
+++ b/Elternbeirat.Web/Features/Layout/NavBuilder.cs
@@ -11,23 +11,45 @@ public static class NavBuilder
 {
     /// <summary>Header links, ordered, built from pages with location "header".</summary>
     public static IReadOnlyList<NavLinkItem> Header(IReadOnlyList<Page> pages) =>
-        Build(pages, "header");
+        ToLinks(PagesAt(pages, "header"));
 
     /// <summary>Footer links, ordered, built from pages with location "footer".</summary>
     public static IReadOnlyList<NavLinkItem> Footer(IReadOnlyList<Page> pages) =>
-        Build(pages, "footer");
+        ToLinks(PagesAt(pages, "footer"));
 
-    private static List<NavLinkItem> Build(
+    /// <summary>
+    ///     Returns the pages of the header menu themselves, in menu order.
+    /// </summary>
+    /// <param name="pages">All public pages.</param>
+    /// <returns>The pages with location <c>header</c>, ordered by <see cref="Page.Order"/>.</returns>
+    /// <remarks>
+    ///     For callers that need more than a link, such as the tiles on the home page,
+    ///     which also show part of each page's body. Using the same selection as
+    ///     <see cref="Header"/> keeps tiles and menu in step.
+    /// </remarks>
+    public static IReadOnlyList<Page> HeaderPages(IReadOnlyList<Page> pages) =>
+        PagesAt(pages, "header");
+
+    /// <summary>
+    ///     Returns the URL a page is reached at.
+    /// </summary>
+    /// <param name="slug">The page's slug.</param>
+    /// <returns><c>/</c> for the home page, otherwise <c>/{slug}</c>.</returns>
+    /// <remarks>
+    ///     The home page owns "/" (served by the Home component); every other slug is
+    ///     reached at "/{slug}", where either a literal route or the catch-all content
+    ///     page renders it.
+    /// </remarks>
+    public static string HrefFor(string slug) =>
+        Page.IsHomeSlug(slug) ? "/" : $"/{slug}";
+
+    private static List<Page> PagesAt(
         IReadOnlyList<Page> pages,
         string location) =>
         [.. pages
             .Where(page => string.Equals(page.Location, location, StringComparison.Ordinal))
-            .OrderBy(page => page.Order)
-            .Select(page => new NavLinkItem(HrefFor(page.Slug), page.Title))];
+            .OrderBy(page => page.Order)];
 
-    // The home page owns "/" (served by the Home component); every other slug is
-    // reached at "/{slug}", where either a literal route or the catch-all content
-    // page renders it.
-    private static string HrefFor(string slug) =>
-        Page.IsHomeSlug(slug) ? "/" : $"/{slug}";
+    private static List<NavLinkItem> ToLinks(IEnumerable<Page> pages) =>
+        [.. pages.Select(page => new NavLinkItem(HrefFor(page.Slug), page.Title))];
 }
diff --git a/Elternbeirat.Web/Program.cs b/Elternbeirat.Web/Program.cs
index fbe49a8..9a3e8c5 100644
--- a/Elternbeirat.Web/Program.cs
+++ b/Elternbeirat.Web/Program.cs
@@ -8,6 +8,10 @@ var builder = WebApplication.CreateBuilder(args);
 
 builder.Services.AddRazorComponents();
 
+// "Today" for upcoming events comes from this clock, not DateTime.Today, so the
+// smoke tests can swap in a fixed date and check the pages before and after an event.
+builder.Services.AddSingleton(TimeProvider.System);
+
 // The typed client reads content from PocketBase over its REST API. The base URL
 // comes from config: appsettings for local dev, the PocketBase__BaseUrl env var
 // on the server (see compose.yaml).
diff --git a/Elternbeirat.Web/Shared/BerlinClock.cs b/Elternbeirat.Web/Shared/BerlinClock.cs
new file mode 100644
index 0000000..0e6250c
--- /dev/null
+++ b/Elternbeirat.Web/Shared/BerlinClock.cs
@@ -0,0 +1,33 @@
+namespace Elternbeirat.Web.Shared;
+
+/// <summary>
+///     Tells the current calendar day as people at the school see it.
+/// </summary>
+/// <remarks>
+///     The container's clock runs in UTC, so <see cref="DateTime.Today"/> would flip to
+///     the next day at 01:00 or 02:00 Berlin time, and an event shortly after midnight
+///     would count as past for an hour or two. Event times are Berlin wall-clock
+///     values (see <c>LocalDateTimeConverter</c>), so "today" has to be a Berlin day
+///     too.
+///     <para>
+///         The time comes from an injected <see cref="TimeProvider"/>, not the system
+///         clock, so tests can pin "today" and check what a page shows before and after
+///         an event.
+///     </para>
+/// </remarks>
+public static class BerlinClock
+{
+    /// <summary>
+    ///     IANA id; resolves on every platform .NET supports, Windows included.
+    /// </summary>
+    private static readonly TimeZoneInfo Berlin =
+        TimeZoneInfo.FindSystemTimeZoneById("Europe/Berlin");
+
+    /// <summary>
+    ///     Returns today's date in Berlin.
+    /// </summary>
+    /// <param name="time">The clock to read, usually <see cref="TimeProvider.System"/>.</param>
+    /// <returns>The current Berlin calendar day.</returns>
+    public static DateOnly Today(TimeProvider time) =>
+        DateOnly.FromDateTime(TimeZoneInfo.ConvertTime(time.GetUtcNow(), Berlin).DateTime);
+}
diff --git a/Elternbeirat.Web/Shared/Markdown.cs b/Elternbeirat.Web/Shared/Markdown.cs
index 01e46b3..64d596c 100644
--- a/Elternbeirat.Web/Shared/Markdown.cs
+++ b/Elternbeirat.Web/Shared/Markdown.cs
@@ -1,3 +1,5 @@
+using System.Text;
+using System.Text.RegularExpressions;
 using Markdig;
 using Markdig.Renderers.Html;
 using Markdig.Syntax;
@@ -45,7 +47,7 @@ namespace Elternbeirat.Web.Shared;
 ///     </para>
 /// </remarks>
 /// <seealso cref="IconSet"/>
-public static class Markdown
+public static partial class Markdown
 {
     /// <summary>
     ///     The class marking a paragraph or list item whose only content is one link.
@@ -75,9 +77,155 @@ public static class Markdown
     ///     </code>
     /// </example>
     public static string ToHtml(string? markdown) =>
-        string.IsNullOrEmpty(markdown)
-            ? ""
-            : Markdig.Markdown.ToHtml(MarkLoneLinks(Markdig.Markdown.Parse(markdown, Pipeline)), Pipeline);
+        string.IsNullOrEmpty(markdown) ? "" : Render(Parse(markdown));
+
+    /// <summary>
+    ///     Extracts the first sentence of a Markdown text as plain text, e.g. as the
+    ///     short description on a home page tile.
+    /// </summary>
+    /// <param name="markdown">The editor's Markdown; may be <see langword="null"/>.</param>
+    /// <param name="maxLength">
+    ///     The longest sentence kept as is; a longer one is cut at the last word
+    ///     boundary before the limit and ends in <c>…</c>.
+    /// </param>
+    /// <returns>
+    ///     The first sentence of the first top-level paragraph, with all Markdown
+    ///     removed and whitespace collapsed, or an empty string when there is no such
+    ///     paragraph (empty body, or only headings, lists and blocks).
+    /// </returns>
+    /// <exception cref="ArgumentOutOfRangeException">
+    ///     <paramref name="maxLength"/> is zero or negative.
+    /// </exception>
+    /// <remarks>
+    ///     Only top-level paragraphs count: a heading repeats the title, and the text in
+    ///     a list or a <c>:::</c> block is rarely a sentence that describes the page.
+    ///     <para>
+    ///         A sentence ends at <c>.</c>, <c>!</c> or <c>?</c> followed by a space or
+    ///         the end. A period after a single letter or a number does not count, so
+    ///         <c>z. B.</c> and <c>13. November</c> do not cut the sentence short. A
+    ///         longer abbreviation such as <c>bzw.</c> still does; that costs the rest
+    ///         of a teaser, never the page.
+    ///     </para>
+    /// </remarks>
+    /// <example>
+    ///     <code>
+    ///         Markdown.FirstSentence("# Vorstand\n\nWir sind **sieben** Eltern. Mehr unten.");
+    ///         // "Wir sind sieben Eltern."
+    ///     </code>
+    /// </example>
+    public static string FirstSentence(string? markdown, int maxLength = 140) =>
+        maxLength <= 0
+            ? throw new ArgumentOutOfRangeException(nameof(maxLength), maxLength, "Must be positive.")
+            : string.IsNullOrWhiteSpace(markdown)
+                ? ""
+                : Parse(markdown).OfType<ParagraphBlock>().FirstOrDefault()?.Inline is { } inline
+                    ? Shorten(UpToSentenceEnd(PlainText(inline)), maxLength)
+                    : "";
+
+    /// <summary>
+    ///     Parses Markdown with the site's pipeline, for callers that take the document
+    ///     apart before rendering it (see <see cref="Render"/>).
+    /// </summary>
+    /// <param name="markdown">The editor's Markdown.</param>
+    /// <returns>The parsed document.</returns>
+    internal static MarkdownDocument Parse(string markdown) =>
+        Markdig.Markdown.Parse(markdown, Pipeline);
+
+    /// <summary>
+    ///     Renders a document from <see cref="Parse"/> to HTML, marking lone links on
+    ///     the way, exactly as <see cref="ToHtml"/> does.
+    /// </summary>
+    /// <param name="document">The parsed document; changed in place.</param>
+    /// <returns>The rendered HTML.</returns>
+    internal static string Render(MarkdownDocument document) =>
+        Markdig.Markdown.ToHtml(MarkLoneLinks(document), Pipeline);
+
+    /// <summary>
+    ///     Flattens inline Markdown to the text a reader sees: emphasis and link
+    ///     markup dropped, link text kept, images left out, whitespace collapsed.
+    /// </summary>
+    /// <param name="inline">The inline content, e.g. of a paragraph or heading.</param>
+    /// <returns>The visible text, trimmed.</returns>
+    internal static string PlainText(ContainerInline inline) =>
+        Whitespace().Replace(AppendText(new StringBuilder(), inline).ToString(), " ").Trim();
+
+    /// <summary>
+    ///     Whether an inline carries no visible content (whitespace or a line break).
+    /// </summary>
+    /// <param name="inline">The inline to inspect.</param>
+    /// <returns>
+    ///     <see langword="true"/> if it can be ignored when looking for links that stand
+    ///     alone in a paragraph.
+    /// </returns>
+    internal static bool IsBlank(Inline inline) =>
+        inline switch
+        {
+            LineBreakInline => true,
+            LiteralInline literal => literal.Content.IsEmptyOrWhitespace(),
+            _ => false,
+        };
+
+    /// <summary>
+    ///     Appends the visible text of an inline and its children.
+    /// </summary>
+    /// <param name="text">The builder to append to.</param>
+    /// <param name="inline">The inline to flatten.</param>
+    /// <returns>The same <paramref name="text"/>, for chaining.</returns>
+    private static StringBuilder AppendText(StringBuilder text, Inline inline) =>
+        inline switch
+        {
+            LiteralInline literal => text.Append(literal.Content.ToString()),
+            CodeInline code => text.Append(code.Content),
+            HtmlEntityInline entity => text.Append(entity.Transcoded.ToString()),
+            AutolinkInline autolink => text.Append(autolink.Url),
+            LineBreakInline => text.Append(' '),
+            LinkInline { IsImage: true } => text,
+            ContainerInline container => container.Aggregate(text, AppendText),
+            _ => text,
+        };
+
+    /// <summary>
+    ///     Cuts a text after its first sentence.
+    /// </summary>
+    /// <param name="text">Plain text.</param>
+    /// <returns>
+    ///     The first sentence including its end mark, or the whole text if it has none.
+    /// </returns>
+    private static string UpToSentenceEnd(string text) =>
+        SentenceEnd().Match(text) is { Success: true } end ? text[..(end.Index + 1)] : text;
+
+    /// <summary>
+    ///     Shortens a text to at most <paramref name="maxLength"/> characters plus an
+    ///     ellipsis, cutting between words.
+    /// </summary>
+    /// <param name="text">Plain text.</param>
+    /// <param name="maxLength">The longest text kept as is.</param>
+    /// <returns>The text, shortened if needed.</returns>
+    /// <remarks>
+    ///     The search for a space starts at <paramref name="maxLength"/> itself, so a
+    ///     word that ends exactly at the limit is kept. A single word longer than the
+    ///     limit is cut hard.
+    /// </remarks>
+    private static string Shorten(string text, int maxLength) =>
+        text.Length <= maxLength
+            ? text
+            : text.LastIndexOf(' ', maxLength) is > 0 and var space
+                ? $"{text[..space].TrimEnd(',', ';', ':', '-', '–')}…"
+                : $"{text[..maxLength]}…";
+
+    /// <summary>
+    ///     Matches the end mark of a sentence: <c>.</c>, <c>!</c> or <c>?</c> before a
+    ///     space or the end, unless it follows a lone letter (<c>z.</c>) or a number
+    ///     (<c>13.</c>).
+    /// </summary>
+    [GeneratedRegex(@"(?<!\b\p{L}|\b\d+)[.!?](?=\s|$)")]
+    private static partial Regex SentenceEnd();
+
+    /// <summary>
+    ///     Matches a run of whitespace, collapsed to one space in plain text.
+    /// </summary>
+    [GeneratedRegex(@"\s+")]
+    private static partial Regex Whitespace();
 
     /// <summary>
     ///     Adds <see cref="LoneLinkClass"/> to every paragraph that holds nothing but
@@ -114,17 +262,4 @@ public static class Markdown
         paragraph.Inline?
             .Where(inline => !IsBlank(inline))
             .ToList() is [LinkInline { IsImage: false } or AutolinkInline];
-
-    /// <summary>
-    ///     Whether an inline carries no visible content (whitespace or a line break).
-    /// </summary>
-    /// <param name="inline">The inline to inspect.</param>
-    /// <returns><see langword="true"/> if it can be ignored when looking for a lone link.</returns>
-    private static bool IsBlank(Inline inline) =>
-        inline switch
-        {
-            LineBreakInline => true,
-            LiteralInline literal => literal.Content.IsEmptyOrWhitespace(),
-            _ => false,
-        };
 }
diff --git a/Elternbeirat.Web/wwwroot/app.css b/Elternbeirat.Web/wwwroot/app.css
index 1dc0539..cddaf32 100644
--- a/Elternbeirat.Web/wwwroot/app.css
+++ b/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
diff --git a/docs/redaktion.md b/docs/redaktion.md
index d59dfa9..748fcca 100644
--- a/docs/redaktion.md
+++ b/docs/redaktion.md
@@ -105,6 +105,38 @@ sofort live, ohne Code und ohne Rebuild:
   `embed` = reine Textseite. Die FAQ-Liste ist kein `embed`: `/faqs` ist eine
   feste Ansicht (siehe *Häufige Fragen*).
 
+### Die Startseite (`home`)
+
+Der `body` der Startseite füllt den farbigen Kopfbereich. Die App zerlegt ihn so:
+
+- Die **erste `#`-Überschrift** wird die große Überschrift im Kopfbereich. Fehlt
+  sie, steht dort „Elternbeirat der IGMH".
+- Besteht der **letzte Absatz nur aus Links** (je Link eine Zeile), werden daraus
+  Knöpfe — der erste hervorgehoben, die übrigen umrandet. Steht in dem Absatz
+  noch anderer Text, bleibt er normaler Text.
+- Alles andere ist der Einleitungstext daneben.
+
+```markdown
+# Willkommen beim Elternbeirat der IGMH
+
+Hier finden Sie aktuelle Informationen rund um die Elternarbeit.
+
+[Kommende Termine](/events)
+[Kontakt aufnehmen](/contact)
+```
+
+Darunter erscheinen automatisch:
+
+- **Nächster Termin** — der früheste kommende Termin aus `events`; gibt es
+  keinen, entfällt die Karte.
+- **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
+  im Code festgelegt; eine neue Seite bekommt ein Standardsymbol.
+
+Eigene Felder für Kacheltext und Symbol gibt es (noch) nicht.
+
 > **Impressum und Datenschutz** hängen an ihren Slugs (`imprint`, `privacy`).
 > Diese Slugs nicht ändern — sonst laufen die rechtlich verlinkten Adressen ins
 > Leere (404).
diff --git a/pb/pb_migrations/1727200000_dev_seed.js b/pb/pb_migrations/1727200000_dev_seed.js
index 88762c4..2afb43a 100644
--- a/pb/pb_migrations/1727200000_dev_seed.js
+++ b/pb/pb_migrations/1727200000_dev_seed.js
@@ -21,7 +21,7 @@ migrate((app) => {
   const schema = JSON.parse(toString($os.readFile("/pb_migrations/collections_schema.json")))
 
   const records = {
-    pages: [{"body":"Der Elternbeirat der IGMH vertritt die Interessen aller Eltern gegenüber der Schulleitung und dem Kollegium. Wir treffen uns regelmäßig, bringen Anliegen aus der Elternschaft ein und begleiten das Schulleben aktiv.\n\nDer Vorstand wurde am 13. November 2025 gewählt.\n\n## Vorsitz\n\n- **Maik Palm** (Vorsitzender)  \n  *Schulkonferenz, Mensarat, Homepage*  \n  Mitglied im Gesamtelternbeirat und im Schulbeirat der Stadt Mannheim.\n- **Gentiana Erol** (1. Stellvertreterin)  \n  *Schulkonferenz, Kommunikation Hausmeister, Mensarat*\n- **Raul Chira** (2. Stellvertreter)  \n  *Mensarat*\n\n## Schriftführung\n\n- **Marion Leininger**  \n  *Kasse, Schriftführung, Kontakt Förderverein*\n\n## Beisitz\n\n- **Jenny Reger-Stilgenbauer**  \n  *Schulkonferenz, Schaukasten*\n- **Mariella Ianello**  \n  *Mensarat, Kontakt Förderverein*\n- **Isabell Vesper**\n- **Susanne Naumburg**  \n  *Stellvertretende Schulkonferenz*\n- **Rebecca Goldmann**\n- **Michael Weber**  \n  *Stellvertretende Schulkonferenz*\n\n## So erreichen Sie uns\n\nAm schnellsten per Mail über unsere [Kontaktseite](/contact). Zu unseren öffentlichen Sitzungen sind alle Eltern herzlich eingeladen. Die Termine finden Sie unter [Termine](/events).","embed":[],"location":"header","order":2,"public":true,"slug":"board","title":"Vorstandsteam"},{"body":"Der Förderverein **„Freunde der IGMH e.V.\"** unterstützt die Schule seit 1975 bei Anschaffungen und Projekten, die aus dem regulären Schulbudget nicht finanziert werden können.\n\n::: kennzahlen\n- **seit 1975** im Einsatz für die IGMH\n- **über 500** Mitglieder\n- **ab 10 €** Jahresbeitrag\n:::\n\n::: hinweis\nDer Förderverein ist ein eigenständiger, gemeinnützig anerkannter Verein und nicht Teil des Elternbeirats.\n:::\n\n## Was der Verein fördert\n\n::: kacheln\n- **Pädagogik** Bessere Rahmenbedingungen für die Arbeit an der Schule\n- **Projekte** Musische, sportliche und kulturelle Vorhaben\n- **Ausstattung** Anschaffungen, die allen Schülerinnen und Schülern zugutekommen\n- **Chancengerechtigkeit** Damit kein Kind aus finanziellen Gründen zurückbleibt\n:::\n\n## Was bereits gefördert wurde\n\n- Rennräder, Bälle, Trikots sowie Sport- und Spielgeräte für AGs\n- Zuschüsse für Chorwochenenden und Kanutage\n- Unterstützung der Theater-AG\n- Veranstaltungstechnik und Musikinstrumente, zum Beispiel DJ-Mischpult und Klavier\n- Vor- und Mitfinanzierung der Schülerhandbücher\n- Kletterwand, Außenmöbel in den Innenhöfen, Sitzbänke im Schulhaus und Wasserspender im Mensabereich\n- Laptops und Tablets für den Unterricht\n\n## Mitglied werden\n\nMitglied werden kann, wer die Arbeit der Schule unterstützen möchte. Eine Mitgliedschaft ist bereits ab einem Jahresbeitrag von **10 €** möglich.\n\n::: aufruf\nDie Beitrittserklärung füllen Sie online beim Förderverein aus.\n\n[Zur Beitrittserklärung](https://easyverein.com/public/FDI/applicationform/21612)\n:::\n\n## Spenden\n\nSpenden sind jederzeit willkommen und werden auf Wunsch mit einer Zuwendungsbestätigung quittiert. Der Verein ist als gemeinnützig anerkannt. Wie Sie spenden können, erfahren Sie beim Förderverein.\n\n## Kontakt zum Förderverein\n\n**Freunde der IGMH e.V.**  \nHerzogenriedstraße 50  \n68169 Mannheim  \n(Fach 165)\n\nE-Mail: [foerderverein@igmh.de](mailto:foerderverein@igmh.de)  \nWebsite: [foerderverein.igmh.de](https://foerderverein.igmh.de)","embed":[],"location":"header","order":3,"public":true,"slug":"patrons","title":"Förderverein"},{"body":"Auf dieser Seite haben wir die Fragen zusammengetragen, die uns am häufigsten erreichen.\n\nIhre Frage ist nicht dabei? Schreiben Sie uns über die [Kontaktseite](/contact) – wir helfen gern weiter.","embed":[],"location":"header","order":6,"public":true,"slug":"faqs","title":"FAQs"},{"body":"Formulare und Dokumente zum Herunterladen:\n\n- [Aufnahmeantrag Förderverein](/dokumente/aufnahmeantrag-foerderverein.pdf)\n- [Einzugsermächtigung](/dokumente/einzugsermaechtigung.pdf)\n- [Erstattungsformular Klassenkasse](/dokumente/erstattungsformular-klassenkasse.pdf)\n\n::: hinweis\nFehlt ein Dokument? Melden Sie sich über die [Kontaktseite](/contact).\n:::","embed":[],"location":"header","order":7,"public":true,"slug":"downloads","title":"Downloads"},{"body":"Haben Sie eine Frage, eine Anregung oder möchten Sie sich einbringen? Der Elternbeirat der IGMH freut sich über jede Nachricht.\n\n[kontakt@elternbeirat-igmh.info](mailto:kontakt@elternbeirat-igmh.info)\n\nIn der Regel melden wir uns innerhalb weniger Tage zurück.\n\n::: hinweis\nBei dringenden schulischen Angelegenheiten wenden Sie sich bitte direkt an das Sekretariat der IGMH.\n:::","embed":[],"location":"footer","order":1,"public":true,"slug":"contact","title":"Kontakt"},{"body":"# Impressum\n\nAngaben gemäß § 5 DDG\n\n**Elternbeirat der IGMH**\nVertreten durch den Vorstand\n\nKontakt: siehe [Kontaktseite](/contact)\n\nVerantwortlich für den Inhalt nach § 18 Abs. 2 MStV: der Vorstand des Elternbeirats.","embed":[],"location":"footer","order":2,"public":true,"slug":"imprint","title":"Impressum"},{"body":"# Datenschutz\n\nDer Schutz Ihrer Daten ist uns wichtig. Diese Website kommt ohne externe Dienste aus: keine Analysewerkzeuge, keine eingebundenen Karten oder Videos, keine Schriften von fremden Servern.\n\n## Server-Logs\n\nBeim Aufruf werden technisch notwendige Zugriffsdaten (IP-Adresse, Zeitpunkt, aufgerufene Seite) kurzzeitig verarbeitet, um den Betrieb sicherzustellen. Eine Zusammenführung mit anderen Daten findet nicht statt.\n\n## Ihre Rechte\n\nFragen zum Datenschutz richten Sie bitte an die [Kontaktseite](/contact).","embed":[],"location":"footer","order":3,"public":true,"slug":"privacy","title":"Datenschutz"},{"body":"# Willkommen beim Elternbeirat der IGMH","embed":["posts","events"],"location":"header","order":1,"public":true,"slug":"home","title":"Start"},{"body":"Was tut sich am Elternbeirat und an der IGMH? Hier finden Sie Rückblicke auf Veranstaltungen, Ankündigungen und Berichte aus den Sitzungen des Elternbeirats.","embed":[],"location":"header","order":4,"public":true,"slug":"posts","title":"Beiträge"},{"body":"Wann kommt der Elternbeirat zusammen, und was steht rund um die IGMH an? Hier finden Sie die Termine auf einen Blick.","embed":[],"location":"header","order":5,"public":true,"slug":"events","title":"Termine"}]
+    pages: [{"body":"Der Elternbeirat der IGMH vertritt die Interessen aller Eltern gegenüber der Schulleitung und dem Kollegium. Wir treffen uns regelmäßig, bringen Anliegen aus der Elternschaft ein und begleiten das Schulleben aktiv.\n\nDer Vorstand wurde am 13. November 2025 gewählt.\n\n## Vorsitz\n\n- **Maik Palm** (Vorsitzender)  \n  *Schulkonferenz, Mensarat, Homepage*  \n  Mitglied im Gesamtelternbeirat und im Schulbeirat der Stadt Mannheim.\n- **Gentiana Erol** (1. Stellvertreterin)  \n  *Schulkonferenz, Kommunikation Hausmeister, Mensarat*\n- **Raul Chira** (2. Stellvertreter)  \n  *Mensarat*\n\n## Schriftführung\n\n- **Marion Leininger**  \n  *Kasse, Schriftführung, Kontakt Förderverein*\n\n## Beisitz\n\n- **Jenny Reger-Stilgenbauer**  \n  *Schulkonferenz, Schaukasten*\n- **Mariella Ianello**  \n  *Mensarat, Kontakt Förderverein*\n- **Isabell Vesper**\n- **Susanne Naumburg**  \n  *Stellvertretende Schulkonferenz*\n- **Rebecca Goldmann**\n- **Michael Weber**  \n  *Stellvertretende Schulkonferenz*\n\n## So erreichen Sie uns\n\nAm schnellsten per Mail über unsere [Kontaktseite](/contact). Zu unseren öffentlichen Sitzungen sind alle Eltern herzlich eingeladen. Die Termine finden Sie unter [Termine](/events).","embed":[],"location":"header","order":2,"public":true,"slug":"board","title":"Vorstandsteam"},{"body":"Der Förderverein **„Freunde der IGMH e.V.\"** unterstützt die Schule seit 1975 bei Anschaffungen und Projekten, die aus dem regulären Schulbudget nicht finanziert werden können.\n\n::: kennzahlen\n- **seit 1975** im Einsatz für die IGMH\n- **über 500** Mitglieder\n- **ab 10 €** Jahresbeitrag\n:::\n\n::: hinweis\nDer Förderverein ist ein eigenständiger, gemeinnützig anerkannter Verein und nicht Teil des Elternbeirats.\n:::\n\n## Was der Verein fördert\n\n::: kacheln\n- **Pädagogik** Bessere Rahmenbedingungen für die Arbeit an der Schule\n- **Projekte** Musische, sportliche und kulturelle Vorhaben\n- **Ausstattung** Anschaffungen, die allen Schülerinnen und Schülern zugutekommen\n- **Chancengerechtigkeit** Damit kein Kind aus finanziellen Gründen zurückbleibt\n:::\n\n## Was bereits gefördert wurde\n\n- Rennräder, Bälle, Trikots sowie Sport- und Spielgeräte für AGs\n- Zuschüsse für Chorwochenenden und Kanutage\n- Unterstützung der Theater-AG\n- Veranstaltungstechnik und Musikinstrumente, zum Beispiel DJ-Mischpult und Klavier\n- Vor- und Mitfinanzierung der Schülerhandbücher\n- Kletterwand, Außenmöbel in den Innenhöfen, Sitzbänke im Schulhaus und Wasserspender im Mensabereich\n- Laptops und Tablets für den Unterricht\n\n## Mitglied werden\n\nMitglied werden kann, wer die Arbeit der Schule unterstützen möchte. Eine Mitgliedschaft ist bereits ab einem Jahresbeitrag von **10 €** möglich.\n\n::: aufruf\nDie Beitrittserklärung füllen Sie online beim Förderverein aus.\n\n[Zur Beitrittserklärung](https://easyverein.com/public/FDI/applicationform/21612)\n:::\n\n## Spenden\n\nSpenden sind jederzeit willkommen und werden auf Wunsch mit einer Zuwendungsbestätigung quittiert. Der Verein ist als gemeinnützig anerkannt. Wie Sie spenden können, erfahren Sie beim Förderverein.\n\n## Kontakt zum Förderverein\n\n**Freunde der IGMH e.V.**  \nHerzogenriedstraße 50  \n68169 Mannheim  \n(Fach 165)\n\nE-Mail: [foerderverein@igmh.de](mailto:foerderverein@igmh.de)  \nWebsite: [foerderverein.igmh.de](https://foerderverein.igmh.de)","embed":[],"location":"header","order":3,"public":true,"slug":"patrons","title":"Förderverein"},{"body":"Auf dieser Seite haben wir die Fragen zusammengetragen, die uns am häufigsten erreichen.\n\nIhre Frage ist nicht dabei? Schreiben Sie uns über die [Kontaktseite](/contact) – wir helfen gern weiter.","embed":[],"location":"header","order":6,"public":true,"slug":"faqs","title":"FAQs"},{"body":"Formulare und Dokumente zum Herunterladen:\n\n- [Aufnahmeantrag Förderverein](/dokumente/aufnahmeantrag-foerderverein.pdf)\n- [Einzugsermächtigung](/dokumente/einzugsermaechtigung.pdf)\n- [Erstattungsformular Klassenkasse](/dokumente/erstattungsformular-klassenkasse.pdf)\n\n::: hinweis\nFehlt ein Dokument? Melden Sie sich über die [Kontaktseite](/contact).\n:::","embed":[],"location":"header","order":7,"public":true,"slug":"downloads","title":"Downloads"},{"body":"Haben Sie eine Frage, eine Anregung oder möchten Sie sich einbringen? Der Elternbeirat der IGMH freut sich über jede Nachricht.\n\n[kontakt@elternbeirat-igmh.info](mailto:kontakt@elternbeirat-igmh.info)\n\nIn der Regel melden wir uns innerhalb weniger Tage zurück.\n\n::: hinweis\nBei dringenden schulischen Angelegenheiten wenden Sie sich bitte direkt an das Sekretariat der IGMH.\n:::","embed":[],"location":"footer","order":1,"public":true,"slug":"contact","title":"Kontakt"},{"body":"# Impressum\n\nAngaben gemäß § 5 DDG\n\n**Elternbeirat der IGMH**\nVertreten durch den Vorstand\n\nKontakt: siehe [Kontaktseite](/contact)\n\nVerantwortlich für den Inhalt nach § 18 Abs. 2 MStV: der Vorstand des Elternbeirats.","embed":[],"location":"footer","order":2,"public":true,"slug":"imprint","title":"Impressum"},{"body":"# Datenschutz\n\nDer Schutz Ihrer Daten ist uns wichtig. Diese Website kommt ohne externe Dienste aus: keine Analysewerkzeuge, keine eingebundenen Karten oder Videos, keine Schriften von fremden Servern.\n\n## Server-Logs\n\nBeim Aufruf werden technisch notwendige Zugriffsdaten (IP-Adresse, Zeitpunkt, aufgerufene Seite) kurzzeitig verarbeitet, um den Betrieb sicherzustellen. Eine Zusammenführung mit anderen Daten findet nicht statt.\n\n## Ihre Rechte\n\nFragen zum Datenschutz richten Sie bitte an die [Kontaktseite](/contact).","embed":[],"location":"footer","order":3,"public":true,"slug":"privacy","title":"Datenschutz"},{"body":"# Willkommen beim Elternbeirat der IGMH\n\nHier finden Sie aktuelle Informationen, Antworten auf häufige Fragen und Unterlagen rund um die Elternarbeit an der IGMH.\n\n[Kommende Termine](/events)\n[Kontakt aufnehmen](/contact)","embed":["posts","events"],"location":"header","order":1,"public":true,"slug":"home","title":"Start"},{"body":"Was tut sich am Elternbeirat und an der IGMH? Hier finden Sie Rückblicke auf Veranstaltungen, Ankündigungen und Berichte aus den Sitzungen des Elternbeirats.","embed":[],"location":"header","order":4,"public":true,"slug":"posts","title":"Beiträge"},{"body":"Wann kommt der Elternbeirat zusammen, und was steht rund um die IGMH an? Hier finden Sie die Termine auf einen Blick.","embed":[],"location":"header","order":5,"public":true,"slug":"events","title":"Termine"}]
 ,
     posts: [{"body":"In fast allen Familien wird über die Handy-Nutzung diskutiert. Auch im schulischen Alltag ist das immer wieder ein Thema.\n\nSinnvolles und weniger Sinnvolles ist mit dem Handy möglich. Viele Jugendliche haben das Handy bis in die späten Abendstunden und über Nacht bei sich, was natürlich zur Nutzung verführt. Innerhalb der Familie dazu Regelungen zu finden, ist nicht einfach. Auch wir in der Schule kennen diese Gespräche.\n\nWir möchten Ihnen ein Angebot digitaler Elternmodule zu diesem Themenfeld vorstellen und kurz aus schulischer, sozialpädagogischer und strafrechtlicher Sicht zur Handynutzung informieren.\n\n**Dienstag, 18. Februar 2025 um 18 Uhr im Hörsaal 2.**\n\nBitte geben Sie kurz über die Klassenleitung Rückmeldung, dass Sie teilnehmen werden.","date":"2025-02-07 12:00:00.000Z","public":true,"slug":"elternabend-handy-nutzung","title":"Elternabend zur Handy-Nutzung"},{"body":"Am 8. Februar öffnete die IGMH ihre Türen für interessierte Eltern und Kinder, die sich einen Eindruck von unserer Schule verschaffen wollten. Besonders Eltern, die planen, ihre Kinder im kommenden Schuljahr anzumelden, konnten sich umfassend informieren und direkt einen Anmeldetermin vereinbaren.\n\n## Vielfältige Einblicke in das Schulleben\n\nAn verschiedenen Stationen lernten die Besucherinnen und Besucher das breite Angebot der IGMH kennen. Die Eliteschule des Sports präsentierte ihre Fördermöglichkeiten, und Schulhund Tonka ließ viele Kinderherzen höherschlagen. Auch der Elternbeirat und der Förderverein der IGMH informierten in der Aula über ihre Arbeit.\n\nFür die jungen Gäste gab es zahlreiche Mitmach-Aktionen:\n\n- Im römischen Zimmer konnten sie sich spielerisch mit der lateinischen Sprache beschäftigen.\n- Im Chemielabor wurden spannende Experimente durchgeführt.\n- Die Kletterwand war ein echter Publikumsmagnet, hier ging es unter professioneller Sicherung hoch hinaus.\n\n## Unterhaltung und kulinarische Highlights\n\n- Die Schülerband begeisterte das Publikum mit ihren Auftritten in der Aula.\n- Im Hörsaal 2 führten die 6. und 7. Klassen eine unterhaltsame Theateraufführung auf.\n- Für das leibliche Wohl war bestens gesorgt, ob im gemütlichen Schülercafé oder im Bistro Français.\n\nDer Tag der offenen Tür war ein voller Erfolg und lockte zahlreiche Besucherinnen und Besucher an. Die positive Resonanz zeigt, wie groß das Interesse an unserer Schule ist.","date":"2025-02-09 12:00:00.000Z","public":true,"slug":"tag-der-offenen-tuer-2025","title":"Rückblick: Tag der offenen Tür an der IGMH"},{"body":"Digitale Medien spielen eine zentrale Rolle im Alltag von Kindern und Jugendlichen, sei es das Smartphone, ein Tablet oder die Spielkonsole. Doch was machen junge Menschen eigentlich damit? Welcher Erwachsene weiß genau, was sich auf WhatsApp, Instagram oder Snapchat abspielt? Und was passiert auf TikTok? Wann wird ein Videospiel zur Sucht? Und welches Vorbild geben wir als Erwachsene ab, wenn auch unser eigener Alltag vom Smartphone bestimmt wird?\n\n## Digitaler Medienelternabend an der IGMH\n\nVor Kurzem fand an der IGMH ein digitaler Medienelternabend statt, der auf großes Interesse stieß. Frau Ruthig, stellvertretende Mittelstufenleiterin, führte in das Thema ein und beleuchtete die Herausforderungen der Mediennutzung.\n\nAnschließend erklärte Schulpolizist Herr Ebert die juristischen Aspekte. Dabei zeigte er auf, welche Möglichkeiten Eltern haben, wenn ihr Kind von Cybermobbing betroffen ist:\n\n- Gespräch mit Schule und Polizeibeamten\n- Gespräch mit dem Präventionsbeamten der Polizei\n- Durchführung eines Präventionstermins in der Klasse\n- Mit Einverständnis der Eltern des Täters: Gespräch mit dem Täter\n- Mit Einverständnis der Eltern des Täters: Gespräch mit Täter, Opfer, Eltern und Schule\n- Strafanzeige durch die Polizei\n\nWeiterführende Informationen zu Computerspielen finden Sie unter [usk.de](http://www.usk.de) (USK Unterhaltungssoftware) und [zavatar.de](http://www.zavatar.de).\n\n## Herausforderungen der Handynutzung aus sozialpädagogischer Sicht\n\nFrau Graske (Sozialpädagogin) stellte die Herausforderungen aus Sicht der Schulsozialarbeit dar und gab Eltern konkrete Tipps:\n\n**1. Bildschirmzeit im Blick behalten**\n\n**2. Handy am Abend außer Reichweite bringen.** Vereinbaren Sie einen festen Schlafplatz für das Handy und aktivieren Sie einen Ruhemodus.\n\n**3. Online-Kontakte des Kindes sensibel begleiten.** Lassen Sie sich Chat-Gruppen zeigen, schauen Sie gemeinsam das TikTok-Profil an und nutzen Sie Ratschläge von [Clemens hilft](https://www.clemenshilft.de/).\n\n**4. Bleiben Sie die wichtigste Ansprechperson für Ihr Kind.** Zeigen Sie, dass Ihr Kind Ihnen vertrauen kann, begründen Sie Ihre Maßnahmen und bleiben Sie offen für Fragen. Der [Mediennutzungsvertrag](https://www.mediennutzungsvertrag.de/) hilft bei klaren Absprachen.\n\n**5. Denken Sie auch an sich selbst.** Anerkennen Sie Ihren Einsatz, seien Sie nachsichtig mit sich, wenn Pläne nicht sofort aufgehen, und holen Sie sich bei Frustration Unterstützung.\n\n## Kontakt zur Schulsozialarbeit\n\nBei Fragen zur Handynutzung aus sozialpädagogischer Sicht können Sie sich an die Schulsozialarbeit der IGMH wenden (Raum CO.03).\n\n## Weitere hilfreiche Informationen\n\n1. [Klicksafe](https://www.klicksafe.de/), die EU-Initiative für mehr Sicherheit im Netz, unterstützt Eltern mit Informationen und Tipps zum kompetenten Umgang mit digitalen Medien.\n2. Der [Mediennutzungsvertrag](https://www.mediennutzungsvertrag.de/) hilft, gemeinsam mit dem Kind Regeln für die Mediennutzung festzulegen.","date":"2025-02-18 12:00:00.000Z","public":true,"slug":"digitale-medien-herausforderung","title":"Digitale Medien: Herausforderung für Jugendliche und Eltern"},{"body":"Kürzlich fand die Wahl des neuen Vorstands des Elternbeirats statt. Sie wurde notwendig, da mehrere Mitglieder aus dem Gremium ausgeschieden sind, unter anderem aufgrund eines Schulwechsels.\n\nLeider wurde die Wahl nur von wenigen Eltern besucht, was bedauerlich ist, da die Elternarbeit eine wichtige Rolle für unsere Schule spielt. Dennoch konnte die Wahl erfolgreich durchgeführt werden.\n\nGewählt wurde folgender Vorstand des Elternbeirats der IGMH:\n\n**Elternbeiratsvorsitz**\n\n- Dina Losert\n\n**Stellvertretende Elternbeiratsvorsitzende**\n\n- Bernhard Topschall\n- Maik Palm\n\n**Beisitzerinnen und Beisitzer**\n\n- Marielle Ianello\n- Gentiana Erol\n- Jenny Reger-Stilgenbauer\n- Michael Weber\n- Marion Leininger\n- Raul Chira\n\nAußerdem wurden die ständigen Mitglieder sowie deren Stellvertreterinnen und Stellvertreter für die Schulkonferenz gewählt. In der ersten Sitzung werden die konkreten Aufgaben verteilt, zum Beispiel die Vertretung im Mensarat oder im Förderverein.\n\nWir freuen uns auf eine engagierte und erfolgreiche Zusammenarbeit im Interesse aller Schülerinnen und Schüler.","date":"2025-02-26 12:00:00.000Z","public":true,"slug":"vorstand-gewaehlt-februar-2025","title":"Neuer Vorstand des Elternbeirats gewählt (Februar 2025)"},{"body":"Am 1. Oktober 2025 war es endlich so weit: Die IGMH feierte die Einweihung ihrer neuen Sporthalle. Oberbürgermeister Christian Specht übergab das moderne Gebäude im Wert von rund 23 Millionen Euro offiziell seiner Bestimmung. 3,85 Millionen Euro der Kosten wurden durch das Bundesprogramm „Sanierung kommunaler Einrichtungen\" gefördert.\n\nNach vielen Jahren des Wartens und Planens ist damit ein echtes Zukunftsprojekt für unsere Schule und die ganze Neckarstadt entstanden. Die alte Halle konnte aufgrund schwerer Bauschäden nicht mehr genutzt werden, so fiel die Entscheidung für einen kompletten Neubau.\n\nEntstanden ist eine helle, moderne und barrierefreie Sportanlage mit einer großen Dreifeldhalle und einer kleineren Einfeldhalle, die sowohl im Schulalltag als auch von Vereinen genutzt werden können. Eine Photovoltaikanlage, Dachbegrünung und moderne Wärmeschutztechnik sorgen dafür, dass auch das Thema Nachhaltigkeit nicht zu kurz kommt.\n\nAuch architektonisch ist die neue Halle ein Hingucker: viel Glas, ein elegantes Holztragwerk und eine dunkle Fassade, die sich harmonisch in den Herzogenriedpark einfügt. „Ein Leuchtturmprojekt für Bildung, Sport und Nachhaltigkeit\", betonte Oberbürgermeister Specht bei der Einweihung.\n\nDie Schülerinnen und Schüler dürfen sich auf ideale Bedingungen für Unterricht und Training freuen, und die IGMH kann stolz sein auf eine Sporthalle, die ihrem Namen als Eliteschule des Sports wirklich gerecht wird.","date":"2025-10-05 12:00:00.000Z","public":true,"slug":"neue-sporthalle-eroeffnet","title":"Neue Sporthalle feierlich eröffnet"},{"body":"Wir laden herzlich zur Vollversammlung des Elternbeirats der IGMH ein.\n\n**Datum:** Donnerstag, 13. November 2025\n**Uhrzeit:** 19:00 Uhr\n**Ort:** Hörsaal 2 der IGMH\n\n## Tagesordnung\n\n1. Begrüßung und Feststellung der Beschlussfähigkeit, Wahlleitung und Protokoll\n2. Vorstellung der Kandidatinnen und Kandidaten\n3. Wahl der Mitglieder des EBV-Vorstands\n4. Wahl der Mitglieder der Schulkonferenz\n5. Mitteilung über Änderung der Geschäftsordnung\n6. Schlusswort\n\n## Wir brauchen Sie\n\nZur Wahl stehen der Elternbeiratsvorstand, zwei stellvertretende Vorsitzende sowie Beisitzerinnen und Beisitzer. Als Beisitzerin oder Beisitzer nehmen Sie beispielsweise an den Sitzungen des Elternbeirats teil, die in der Regel alle ein bis zwei Monate stattfinden. Es gibt vielfältige Möglichkeiten, sich je nach zeitlicher Verfügbarkeit einzubringen. Jede Form der Unterstützung ist von großem Wert.\n\nFalls Sie Interesse haben, sich aufstellen zu lassen, oder Fragen zur Arbeit des Elternbeirats haben, melden Sie sich gerne vorab über die [Kontaktseite](/contact) oder sprechen Sie uns direkt am Wahlabend an.\n\nWir kommen hiermit einer Informationspflicht nach Punkt 9 der Geschäftsordnung nach:\n\n> Eine Änderung der Geschäftsordnung erfolgt durch Mehrheitsbeschluss des Vorstands. Die Information über die geänderte Geschäftsordnung erfolgt mit Veröffentlichung auf der Homepage des Elternbeirates und in der nächsten Elternbeiratssitzung.","date":"2025-10-24 12:00:00.000Z","public":true,"slug":"einladung-vollversammlung-2025","title":"Einladung zur Vollversammlung des Elternbeirats"},{"body":"Die Schule bietet ab sofort einen neuen Service an: Lost and Found, eine Fundstelle für verlorene Gegenstände.\n\nAb sofort gibt es eine digitale Möglichkeit, nach verlorenen Gegenständen zu suchen. Über 200 Fundsachen wurden fotografiert und in Bildergalerien nach Kategorien auf der Homepage der IGMH veröffentlicht.\n\nAlle Informationen und die Bilderstrecken finden Sie beim [Lost-and-Found-Service der IGMH](https://igmh.de/presse/fundsachen-bilder-durchklicken-verlorenes-wiederfinden).\n\nWer etwas auf den Fotos oder in der Beschreibung wiedererkennt, kann sich per E-Mail an [heike.scholz@igmh.de](mailto:heike.scholz@igmh.de) wenden.","date":"2025-10-29 12:00:00.000Z","public":true,"slug":"lost-and-found","title":"Lost and Found: Fundstelle für verlorene Gegenstände"},{"body":"Am 13. November 2025 fand die turnusmäßige Wahl des Elternbeirats der IGMH im Hörsaal 2 statt. Besetzt wurden der Vorstand, die Beisitzerinnen und Beisitzer, die Mitglieder der Schulkonferenz sowie zwei Kassenprüferinnen bzw. Kassenprüfer. Die Versammlung war mit 35 wahlberechtigten Elternvertreterinnen und Elternvertretern beschlussfähig.\n\nMit der Wahl beginnt die nächste Amtsperiode, in der die gewählten Mitglieder die Interessen der Eltern vertreten, die Zusammenarbeit mit der Schulleitung begleiten und Impulse für das Schulleben setzen. Im Anschluss wurden aktuelle Themen angesprochen, darunter die Pausenregelung, der Umgang mit Mobiltelefonen, der digitale Zugang zu Untis, die Situation der Schultoiletten sowie die Kommunikation zwischen Elternhaus und Schule.\n\n## Ergebnisse im Überblick\n\n**Vorstand Elternbeirat**\n\n- 1. Vorsitz: Maik Palm\n- Stellvertretung: Gentiana Erol\n- Stellvertretung: Raul Chira\n\n**Beisitzer**\n\n- Neu gewählt: Susanne Naumburg, Rebecca Goldmann, Isabell Vesper\n- Im Amt verbleibend: Mariella Ianello, Marion Leininger, Jenny Reger-Stilgenbauer, Michael Weber\n\n**Schulkonferenz**\n\n- Mitglied kraft Amtes: Maik Palm\n- Feste Sitze: Gentiana Erol, Tanja Engelhardt, Jenny Reger-Stilgenbauer\n- Ersatzmitglieder: Franziska Schaaf, Susanne Naumburg, Michael Weber, Cemile Ökzüz\n\n**Kassenprüfer**\n\n- Franziska Wieczorek\n- Michael Vokt\n\nDas ausführliche Protokoll steht im Downloadbereich zur Verfügung.","date":"2025-11-26 12:00:00.000Z","public":true,"slug":"vollversammlung-wahl-november-2025","title":"Vollversammlung des Elternbeirats: Wahl am 13. November 2025"},{"body":"Bitte unterstützen Sie das Schülercafé der IGMH mit Ihrer Stimme. Das Café soll verschönert und gemütlicher gestaltet werden, dafür zählt jede Stimme von Eltern und Unterstützern.\n\n**Hier können Sie abstimmen:** [zum Abstimmen beim Sparda-Impuls](https://www.spardaimpuls.de/projekte/68f9d6ec1d40df0c78f35285).\n\n## Dafür machen wir uns stark\n\nDas Schulcafé der IGMH ist ein Ort des Miteinanders. In den Mittagspausen verkaufen Schülerinnen und Schüler verschiedene gesunde Mittagssnacks, vom Sandwichtoast über Müsli bis zum Obstsalat, im Sommer darf es auch einmal ein Eis sein. Die helfenden Jugendlichen bekommen erste Einblicke in die gastronomische Arbeitswelt und engagieren sich für die Gemeinschaft.\n\nDie Überschüsse aus dem Verkauf fließen in ein Projekt, das Schülerinnen und Schüler bei der Finanzierung von Klassenfahrten unterstützt, die finanziell belastet sind und nicht von Bildung und Teilhabe profitieren können. Um dieses Projekt aufrechterhalten zu können, bewerben wir uns beim Sparda-Impuls.","date":"2025-11-12 12:00:00.000Z","public":true,"slug":"schulcafe-sparda-impuls-abstimmung","title":"Stimmen Sie für das Schulcafé beim Sparda-Impuls"},{"body":"Nachdem es anfangs recht schleppend mit den Stimmen voranging, begaben sich die Elternsprecher im wahrsten Sinne des Wortes auf Stimmenfang. Zwischenzeitlich belegten wir sogar kurzzeitig einen der ersten drei Plätze.\n\nDer Schlussspurt war ein regelrechter Krimi. Zwischen dem fünften und sechsten Platz lagen zeitweise nur drei Stimmen Unterschied. Am Ende erreichte das Projekt Schulcafé beim Sparda-Impuls-Wettbewerb einen hervorragenden fünften Platz mit 2.490 Stimmen.\n\nDank dieses großartigen Ergebnisses kann das Schulcafé nun mit den gewonnenen 3.000 Euro verschönert werden, sehr zur Freude aller Schülerinnen und Schüler der IGMH.\n\nDer Elternbeiratsvorstand gratuliert herzlich zum fünften Platz und bedankt sich bei allen Eltern, die engagiert Werbung für das Projekt gemacht haben, und natürlich bei allen, die abgestimmt und damit zum Erfolg beigetragen haben.\n\n## Kurz zusammengefasst\n\n- Projekt: Verschönerung des IGMH-Schulcafés\n- Wettbewerb: Sparda-Impuls\n- Ergebnis: 5. Platz\n- Stimmen: 2.490\n- Fördersumme: 3.000 Euro","date":"2025-12-04 12:00:00.000Z","public":true,"slug":"schulcafe-platz-5-sparda-impuls","title":"Das Schulcafé holt Platz 5 beim Sparda-Impuls-Wettbewerb"},{"body":"Am 9. Dezember fand die erste Sitzung des Elternbeiratsvorstands im Schuljahr 2025/26 statt. Im Mittelpunkt stand die Besetzung zentraler Aufgaben und Zuständigkeiten. Dabei wurde festgelegt, wer den Austausch mit dem Förderverein übernimmt, wer im Mensarat mitarbeitet und welche weiteren organisatorischen Aufgaben wahrgenommen werden.\n\n## Zusammenfassung\n\n- Förderverein: Mariella Ianello, Marion Leininger\n- Mensarat: Gentiana Erol, Raul Chira, Mariella Ianello, Maik Palm\n- Kasse und Protokoll: Marion Leininger\n- Homepage: Maik Palm\n- Schaukasten: Jenny Reger-Stilgenbauer\n\nDie Kasse wurde ordnungsgemäß an die zukünftige Kassenwartin übergeben. Die nächste Sitzung des Elternbeiratsvorstands ist für Ende Januar 2026 geplant.","date":"2025-12-12 12:00:00.000Z","public":true,"slug":"ebv-sitzung-dezember-2025","title":"1. EBV-Sitzung im Schuljahr 2025/26"},{"body":"Kreativität, Teamgeist und eine stimmungsvolle Atmosphäre: Auch in diesem Jahr war der Adventstüren-Contest ein voller Erfolg.\n\nDie Schülerinnen und Schüler hatten wieder die Gelegenheit, ihre Klassenzimmertür weihnachtlich zu dekorieren. Die Schülermitverantwortung (SMV) lobt den Contest jährlich aus und bietet den Klassen damit die Möglichkeit, ihre Klassenkasse aufzubessern.\n\nDer Förderverein der IGMH unterstützt die SMV dabei jedes Jahr und stellt das Preisgeld zur Verfügung. In diesem Jahr wurde das Preisgeld zusätzlich durch den Elternbeirat aufgestockt, der den Wettbewerb mit weiteren 280 Euro unterstützte.\n\nAm Mittwoch, den 17. Dezember, fand in der ersten großen Pause die feierliche Preisverleihung statt. Der Adventstüren-Contest sorgte auch in diesem Jahr für eine stimmungsvolle vorweihnachtliche Atmosphäre an der Schule.\n\n## Zusammenfassung\n\n- Die SMV organisiert jährlich den Adventstüren-Contest.\n- Der Förderverein stellt das Preisgeld bereit.\n- Der Elternbeirat unterstützt zusätzlich mit 280 Euro.\n- Preisverleihung: Mittwoch, 17. Dezember, in der 1. großen Pause.","date":"2025-12-18 12:00:00.000Z","public":true,"slug":"adventstueren-contest-2025","title":"Adventstüren-Contest"},{"body":"Am 10. März 2026 fand die zweite Sitzung des Elternbeiratsvorstands statt. Im Mittelpunkt standen der Mensabetrieb, Rückerstattungen des ehemaligen Caterers, Maßnahmen zur Mobbingprävention sowie organisatorische Fragen. Das Treffen verlief konstruktiv und lösungsorientiert.\n\n## Mensabetrieb und Austausch mit FMD\n\nFür den 18. März wurde ein Austausch mit dem Caterer FMD angekündigt. Fragen der Eltern zum Mensabetrieb sollten über die Elternsprecher gesammelt und gebündelt weitergeleitet werden. Deutlich wurde, dass die zweite Essensausgabeschlange für die siebten Klassen derzeit nicht wie vorgesehen funktioniert. Dieses Thema sollte gezielt angesprochen werden.\n\n## Rückerstattungen des ehemaligen Caterers\n\nBeim ehemaligen Caterer Ehrenfried haben noch nicht alle Eltern, die Beiträge überwiesen hatten, ihre Rückerstattung erhalten. Der Großteil der ausstehenden Beträge wurde jedoch bereits zurückgezahlt.\n\n## Mobbingprävention\n\nDa es vermehrt zu Mobbing- und Gewaltvorfällen kommt, soll sich der Vorstand künftig intensiver mit Mobbingprävention befassen. Konkrete Vorschläge sollen an die Schulleitung herangetragen werden, beispielsweise unter Einbeziehung externer Stellen wie dem Haus des Jugendrechts.\n\n## Themen für die Schulleitung\n\nMehrere offene Punkte werden an die Schulleitung herangetragen, darunter der Wunsch nach einem Schulfotografen, der aktuelle Stand beim Elternzugang zu WebUntis und die Wiederaufnahme der Quartalsgespräche mit der Schulleitung.\n\nDie Sitzung war von einem konstruktiven Austausch geprägt und setzte wichtige Impulse für die weitere Elternarbeit.","date":"2026-03-21 12:00:00.000Z","public":true,"slug":"ebv-sitzung-maerz-2026","title":"Zweite Sitzung des Elternbeiratsvorstands am 10. März 2026"},{"body":"Am 18. März fand ein Austausch mit Mitarbeitenden des Caterers FMD, Elternvertreterinnen und Elternvertretern, Lehrkräften sowie Schülerinnen und Schülern der SMV statt. Insgesamt war es ein sehr konstruktives Gespräch. Die Eltern hatten im Vorfeld die Möglichkeit, über ihre Elternvertretungen Fragen und Anregungen einzureichen.\n\n## Fragen und Anmerkungen der Eltern\n\n- Mehrere Eltern äußerten Fragen zu den erhöhten Preisen.\n- Einige Kinder berichten, dass sie trotz Vorbestellung keinen Nachtisch erhalten haben, obwohl dieser bezahlt wurde.\n- Positiv war, dass laktosefreie und vegetarische Menüs angeboten werden. Werden beide am selben Tag angeboten, ist die Auswahl jedoch eingeschränkt. Angeregt wurde ein abwechslungsreicherer Speiseplan.\n- Angeregt wurde, PayPal als zusätzliche Aufladefunktion für das Essenskonto zu prüfen.\n- Gewünscht wurden kleinere Snacks oder einfache Gerichte zum Barzahlen, etwa belegte Brötchen oder Brezeln.\n- Viele Eltern sprachen ausdrücklich ein Lob aus, dass sich das Essen insgesamt deutlich verbessert habe.\n\n## Rückmeldungen von FMD\n\nFMD erklärte, dass der Preisspielraum begrenzt sei, da die Preise im Vergleich zu anderen Caterern bereits im unteren Bereich lägen. Nach Vorgaben der Stadt gibt es nur einmal pro Woche ein Fleischgericht. Als tägliche Alternative gibt es weiterhin Spaghetti Bolognese, die nicht vorbestellbar sind, aber jeden Tag bar oder per Chip erhältlich.\n\nFalls Kinder einen vorbestellten Nachtisch nicht erhalten haben, sollen sie bitte aktiv danach fragen. Hierzu wird es zusätzlich einen Aushang geben. Zudem wird geprüft, ob künftig wieder eine Salatbar angeboten werden kann. PayPal wurde angesprochen, hier hat FMD als Teil der GBG-Gruppe keine alleinige Entscheidungsfreiheit, nimmt das Anliegen aber mit.\n\n## Kiosk und Snack-Angebot\n\nDer Kiosk bietet täglich ab 7:15 Uhr sowie in der Mittagszeit kleine Snacks an, zahlbar bar oder mit Chip. Dort liegt ein Wünschebuch aus, in das die Kinder gewünschte Produkte eintragen können. Ein mobiler Snack-Trolley ist aus personellen und hygienischen Gründen leider nicht umsetzbar.\n\n## Zusammenfassung\n\n- Der Austausch mit FMD verlief konstruktiv und offen.\n- Zentrale Themen waren Preise, Dessertausgabe, Speiseplan, Snack-Angebote und Pausenregelung.\n- Spaghetti Bolognese bleibt täglich verfügbar, auch wenn sie nicht vorbestellbar ist.\n- Eine Salatbar wird geprüft, PayPal als Zahlungsoption angeregt.\n- Die Fragen zur Pausenregelung werden in der Schulkonferenz weiter beraten.","date":"2026-03-22 12:00:00.000Z","public":true,"slug":"mensa-austausch-fmd-maerz-2026","title":"Mensa-Austausch mit FMD am 18. März 2026"}]
 ,

From c24ca16a41601f9d779a6042a6740d9b33d9733b Mon Sep 17 00:00:00 2001
From: tleininger <thomas.leininger@kardex.com>
Date: Thu, 1 Oct 2026 14:23:55 +0200
Subject: [PATCH 2/3] Add home hero with intro and buttons from the body,
 next-event card and page tiles

---
 Elternbeirat.Web.Tests/RouteSmokeTests.cs     |  6 +-
 .../Components/Layout/MainLayout.razor        |  2 +-
 Elternbeirat.Web/Features/Home/Home.razor     |  5 +-
 Elternbeirat.Web/Features/Home/Home.razor.css | 61 ++++++++++++++++---
 docs/redaktion.md                             |  4 +-
 5 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/Elternbeirat.Web.Tests/RouteSmokeTests.cs b/Elternbeirat.Web.Tests/RouteSmokeTests.cs
index a4c3b0b..d99723d 100644
--- a/Elternbeirat.Web.Tests/RouteSmokeTests.cs
+++ b/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();
 }
diff --git a/Elternbeirat.Web/Components/Layout/MainLayout.razor b/Elternbeirat.Web/Components/Layout/MainLayout.razor
index 3c495e6..b78e43f 100644
--- a/Elternbeirat.Web/Components/Layout/MainLayout.razor
+++ b/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
diff --git a/Elternbeirat.Web/Features/Home/Home.razor b/Elternbeirat.Web/Features/Home/Home.razor
index 7a6284b..c850c93 100644
--- a/Elternbeirat.Web/Features/Home/Home.razor
+++ b/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">
diff --git a/Elternbeirat.Web/Features/Home/Home.razor.css b/Elternbeirat.Web/Features/Home/Home.razor.css
index a185190..5090968 100644
--- a/Elternbeirat.Web/Features/Home/Home.razor.css
+++ b/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. */
diff --git a/docs/redaktion.md b/docs/redaktion.md
index 748fcca..be83f70 100644
--- a/docs/redaktion.md
+++ b/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.

From 6e5a30607e82b2c999fd843c0efed5775eb1bbaa Mon Sep 17 00:00:00 2001
From: tleininger <thomas.leininger@kardex.com>
Date: Thu, 1 Oct 2026 14:44:55 +0200
Subject: [PATCH 3/3] Polish home page: clamp tile teasers, balance hero
 heading, fix embed gap

---
 Elternbeirat.Web.Tests/MarkdownTests.cs       | 18 ++++---
 Elternbeirat.Web/Features/Home/Home.razor.css | 19 ++++++-
 Elternbeirat.Web/Shared/Markdown.cs           | 51 ++++++-------------
 docs/redaktion.md                             |  3 +-
 4 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/Elternbeirat.Web.Tests/MarkdownTests.cs b/Elternbeirat.Web.Tests/MarkdownTests.cs
index 0267aa0..969102a 100644
--- a/Elternbeirat.Web.Tests/MarkdownTests.cs
+++ b/Elternbeirat.Web.Tests/MarkdownTests.cs
@@ -104,11 +104,17 @@ public class MarkdownTests
     }
 
     [Fact]
-    public void First_sentence_longer_than_the_limit_is_cut_between_words()
-    {
-        var sentence = Markdown.FirstSentence("Eins zwei drei vier fünf.", maxLength: 12);
+    public void First_sentence_drops_a_colon_that_leads_into_a_list() =>
+        Markdown.FirstSentence("Formulare zum Herunterladen:\n\n- Antrag")
+            .ShouldBe("Formulare zum Herunterladen");
 
-        sentence.ShouldBe("Eins zwei…");
+    [Fact]
+    public void First_sentence_is_never_cut_short()
+    {
+        // Long teasers are clamped by the tile's CSS, not by a character count.
+        var sentence = string.Join(' ', Enumerable.Repeat("Wort", 60)) + ".";
+
+        Markdown.FirstSentence(sentence).ShouldBe(sentence);
     }
 
     [Theory]
@@ -119,8 +125,4 @@ public class MarkdownTests
     [InlineData("::: hinweis\nText im Baustein.\n:::")]
     public void First_sentence_is_empty_without_a_top_level_paragraph(string? markdown) =>
         Markdown.FirstSentence(markdown).ShouldBe("");
-
-    [Fact]
-    public void First_sentence_rejects_a_limit_below_one() =>
-        Should.Throw<ArgumentOutOfRangeException>(() => Markdown.FirstSentence("Text.", maxLength: 0));
 }
diff --git a/Elternbeirat.Web/Features/Home/Home.razor.css b/Elternbeirat.Web/Features/Home/Home.razor.css
index 5090968..336367d 100644
--- a/Elternbeirat.Web/Features/Home/Home.razor.css
+++ b/Elternbeirat.Web/Features/Home/Home.razor.css
@@ -38,8 +38,10 @@
 
 /* On the gradient everything is white: the global heading colour is a blue that
    would vanish here. */
+/* balance evens out the lines, so a short last word ("IGMH") never wraps alone. */
 .hero h1 {
     color: var(--color-on-header);
+    text-wrap: balance;
 }
 
 /* The intro is editor Markdown, rendered without scope attributes, so it is reached
@@ -289,14 +291,23 @@
         align-self: start;
     }
 
+    /* The teaser is a whole sentence; the tile cuts it visually after three lines,
+       so the tiles of a row keep a similar height whatever the editor wrote. The
+       -webkit- box is the form every current browser supports for line-clamp. */
     .tile-text {
-        display: block;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+        overflow: hidden;
     }
 }
 
 /* --- 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. */
+   width, so the start page shows both without a long scroll. One column below.
+   In the grid the blocks' own top margin no longer collapses with the margin of
+   the tiles above, so it is dropped there; otherwise the gap would be doubled. */
 @media (min-width: 64rem) {
     .home-embeds {
         display: grid;
@@ -304,4 +315,8 @@
         gap: var(--space-5);
         align-items: start;
     }
+
+    .home-embeds ::deep .embed {
+        margin-top: 0;
+    }
 }
diff --git a/Elternbeirat.Web/Shared/Markdown.cs b/Elternbeirat.Web/Shared/Markdown.cs
index 64d596c..a676f21 100644
--- a/Elternbeirat.Web/Shared/Markdown.cs
+++ b/Elternbeirat.Web/Shared/Markdown.cs
@@ -84,18 +84,12 @@ public static partial class Markdown
     ///     short description on a home page tile.
     /// </summary>
     /// <param name="markdown">The editor's Markdown; may be <see langword="null"/>.</param>
-    /// <param name="maxLength">
-    ///     The longest sentence kept as is; a longer one is cut at the last word
-    ///     boundary before the limit and ends in <c>…</c>.
-    /// </param>
     /// <returns>
     ///     The first sentence of the first top-level paragraph, with all Markdown
-    ///     removed and whitespace collapsed, or an empty string when there is no such
-    ///     paragraph (empty body, or only headings, lists and blocks).
+    ///     removed, whitespace collapsed and a trailing colon dropped, or an empty
+    ///     string when there is no such paragraph (empty body, or only headings, lists
+    ///     and blocks).
     /// </returns>
-    /// <exception cref="ArgumentOutOfRangeException">
-    ///     <paramref name="maxLength"/> is zero or negative.
-    /// </exception>
     /// <remarks>
     ///     Only top-level paragraphs count: a heading repeats the title, and the text in
     ///     a list or a <c>:::</c> block is rarely a sentence that describes the page.
@@ -106,6 +100,12 @@ public static partial class Markdown
     ///         longer abbreviation such as <c>bzw.</c> still does; that costs the rest
     ///         of a teaser, never the page.
     ///     </para>
+    ///     <para>
+    ///         A paragraph that leads into a list often ends in <c>:</c> without a
+    ///         period; as a teaser the colon would point at a list that is not there.
+    ///         The sentence is returned whole: a long one is cut by the tile's CSS,
+    ///         which knows the space it has, not by a character count.
+    ///     </para>
     /// </remarks>
     /// <example>
     ///     <code>
@@ -113,14 +113,12 @@ public static partial class Markdown
     ///         // "Wir sind sieben Eltern."
     ///     </code>
     /// </example>
-    public static string FirstSentence(string? markdown, int maxLength = 140) =>
-        maxLength <= 0
-            ? throw new ArgumentOutOfRangeException(nameof(maxLength), maxLength, "Must be positive.")
-            : string.IsNullOrWhiteSpace(markdown)
-                ? ""
-                : Parse(markdown).OfType<ParagraphBlock>().FirstOrDefault()?.Inline is { } inline
-                    ? Shorten(UpToSentenceEnd(PlainText(inline)), maxLength)
-                    : "";
+    public static string FirstSentence(string? markdown) =>
+        string.IsNullOrWhiteSpace(markdown)
+            ? ""
+            : Parse(markdown).OfType<ParagraphBlock>().FirstOrDefault()?.Inline is { } inline
+                ? UpToSentenceEnd(PlainText(inline)).TrimEnd(':', ' ')
+                : "";
 
     /// <summary>
     ///     Parses Markdown with the site's pipeline, for callers that take the document
@@ -194,25 +192,6 @@ public static partial class Markdown
     private static string UpToSentenceEnd(string text) =>
         SentenceEnd().Match(text) is { Success: true } end ? text[..(end.Index + 1)] : text;
 
-    /// <summary>
-    ///     Shortens a text to at most <paramref name="maxLength"/> characters plus an
-    ///     ellipsis, cutting between words.
-    /// </summary>
-    /// <param name="text">Plain text.</param>
-    /// <param name="maxLength">The longest text kept as is.</param>
-    /// <returns>The text, shortened if needed.</returns>
-    /// <remarks>
-    ///     The search for a space starts at <paramref name="maxLength"/> itself, so a
-    ///     word that ends exactly at the limit is kept. A single word longer than the
-    ///     limit is cut hard.
-    /// </remarks>
-    private static string Shorten(string text, int maxLength) =>
-        text.Length <= maxLength
-            ? text
-            : text.LastIndexOf(' ', maxLength) is > 0 and var space
-                ? $"{text[..space].TrimEnd(',', ';', ':', '-', '–')}…"
-                : $"{text[..maxLength]}…";
-
     /// <summary>
     ///     Matches the end mark of a sentence: <c>.</c>, <c>!</c> or <c>?</c> before a
     ///     space or the end, unless it follows a lone letter (<c>z.</c>) or a number
diff --git a/docs/redaktion.md b/docs/redaktion.md
index be83f70..f28e39f 100644
--- a/docs/redaktion.md
+++ b/docs/redaktion.md
@@ -131,7 +131,8 @@ Darunter erscheinen automatisch:
   keinen, entfällt die Karte.
 - **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
+  `body` (ohne Überschrift, ein Doppelpunkt am Ende fällt weg; ein langer Satz
+  wird nach drei Zeilen mit „…“ abgeschnitten); beginnt der Text mit einer Liste oder
   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