Merge pull request 'Design/blocks layout' (#60) from design/blocks-layout into main

Reviewed-on: #60

Elternbeirat.Web.Tests/EventDateFormatTests.cs

@@ -0,0 +1,105 @@
+using Elternbeirat.Contracts;
+using Elternbeirat.Web.Features.Events;
+
+namespace Elternbeirat.Web.Tests;
+
+/// <summary>
+/// Unit tests for the calendar sheet texts and the time line beside it. Pure logic,
+/// no PocketBase needed. All times are Berlin wall-clock, as the contract delivers them.
+/// </summary>
+public class EventDateFormatTests
+{
+    private static Event Event(DateTime start, DateTime? end = null) =>
+        new() { Id = "test", Title = "Termin", Start = start, End = end };
+
+    [Theory]
+    [InlineData(1, "Jan")]
+    [InlineData(3, "März")]
+    [InlineData(5, "Mai")]
+    [InlineData(10, "Okt")]
+    [InlineData(12, "Dez")]
+    public void Sheet_month_is_the_German_short_month_without_period(int month, string expected) =>
+        EventDateFormat.SheetMonth(new DateTime(2026, month, 1)).ShouldBe(expected);
+
+    [Fact]
+    public void Sheet_day_has_no_leading_zero() =>
+        EventDateFormat.SheetDay(new DateTime(2026, 10, 8, 19, 30, 0)).ShouldBe("8");
+
+    [Theory]
+    [InlineData(8, "Do")]  // Thursday, 8 October 2026
+    [InlineData(11, "So")] // Sunday
+    public void Sheet_weekday_is_the_German_short_weekday_without_period(int day, string expected) =>
+        EventDateFormat.SheetWeekday(new DateTime(2026, 10, day)).ShouldBe(expected);
+
+    [Fact]
+    public void Past_all_day_event_shows_the_day_and_no_time()
+    {
+        var allDay = Event(new DateTime(2026, 11, 13));
+
+        EventDateFormat.PastDays(allDay).ShouldBe("13. November");
+        EventDateFormat.PastTime(allDay).ShouldBe("");
+    }
+
+    [Fact]
+    public void Past_timed_event_shows_the_day_and_its_start_time()
+    {
+        var timed = Event(new DateTime(2026, 9, 1, 19, 0, 0));
+
+        EventDateFormat.PastDays(timed).ShouldBe("1. September"); // no leading zero
+        EventDateFormat.PastTime(timed).ShouldBe("19:00 Uhr");
+    }
+
+    [Fact]
+    public void Past_timed_event_ending_the_same_day_shows_the_time_range()
+    {
+        var evening = Event(new DateTime(2026, 11, 13, 19, 0, 0), new DateTime(2026, 11, 13, 21, 0, 0));
+
+        EventDateFormat.PastDays(evening).ShouldBe("13. November");
+        EventDateFormat.PastTime(evening).ShouldBe("19:00–21:00 Uhr");
+    }
+
+    [Fact]
+    public void Past_multi_day_event_in_one_month_names_the_month_once() =>
+        EventDateFormat.PastDays(Event(new DateTime(2026, 2, 8), new DateTime(2026, 2, 9))).ShouldBe("8.–9. Februar");
+
+    [Fact]
+    public void Past_multi_day_event_across_a_month_names_both_months() =>
+        EventDateFormat.PastDays(Event(new DateTime(2026, 1, 30), new DateTime(2026, 2, 2)))
+            .ShouldBe("30. Januar – 2. Februar");
+
+    [Fact]
+    public void Past_multi_day_event_across_a_year_names_the_end_year() =>
+        // The list is grouped by the start year, so only the end needs its year.
+        EventDateFormat.PastDays(Event(new DateTime(2026, 12, 30), new DateTime(2027, 1, 2)))
+            .ShouldBe("30. Dezember – 2. Januar 2027");
+
+    [Fact]
+    public void Past_timed_multi_day_event_shows_only_the_start_time() =>
+        // A range here would read as the daily hours.
+        EventDateFormat.PastTime(Event(new DateTime(2026, 2, 8, 9, 0, 0), new DateTime(2026, 2, 9, 13, 0, 0)))
+            .ShouldBe("09:00 Uhr");
+
+    [Fact]
+    public void Span_of_a_timed_event_without_end_is_its_start_time() =>
+        EventDateFormat.Span(Event(new DateTime(2026, 10, 8, 19, 30, 0))).ShouldBe("19:30 Uhr");
+
+    [Fact]
+    public void Span_of_a_same_day_event_is_the_time_range() =>
+        EventDateFormat.Span(Event(new DateTime(2026, 10, 8, 19, 30, 0), new DateTime(2026, 10, 8, 21, 0, 0)))
+            .ShouldBe("19:30–21:00 Uhr");
+
+    [Fact]
+    public void Span_of_a_multi_day_event_names_the_last_day() =>
+        EventDateFormat.Span(Event(new DateTime(2026, 10, 9, 9, 0, 0), new DateTime(2026, 10, 11, 13, 0, 0)))
+            .ShouldBe("09:00 Uhr bis Sonntag, 11. Oktober 2026, 13:00 Uhr");
+
+    [Fact]
+    public void Span_of_a_multi_day_all_day_event_has_no_times() =>
+        EventDateFormat.Span(Event(new DateTime(2026, 10, 9), new DateTime(2026, 10, 11)))
+            .ShouldBe("bis Sonntag, 11. Oktober 2026");
+
+    [Fact]
+    public void Span_of_a_single_all_day_event_is_empty() =>
+        // The sheet already shows the day; there is nothing left to say.
+        EventDateFormat.Span(Event(new DateTime(2026, 10, 8))).ShouldBe("");
+}

Elternbeirat.Web.Tests/MarkdownTests.cs

@@ -125,4 +125,63 @@ 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("");
+
+    [Theory]
+    [InlineData(null)]
+    [InlineData("")]
+    [InlineData("   ")]
+    [InlineData("## Nur eine Überschrift")]
+    public void Teaser_is_empty_without_paragraph_text(string? markdown) =>
+        Markdown.Teaser(markdown).ShouldBe("");
+
+    [Fact]
+    public void Teaser_keeps_a_short_body_whole() =>
+        Markdown.Teaser("Kurzer Text.").ShouldBe("Kurzer Text.");
+
+    [Fact]
+    public void Teaser_removes_markdown_and_skips_headings()
+    {
+        // Emphasis and link markup go, link text stays; the heading would repeat the
+        // card title, so it is left out. Paragraphs and list items are joined.
+        var teaser = Markdown.Teaser(
+            "## Rückblick\n\nDer **Basar** war ein [Erfolg](/posts).\n\n- Danke an alle\n- Bis bald");
+
+        teaser.ShouldBe("Der Basar war ein Erfolg. Danke an alle Bis bald");
+    }
+
+    [Fact]
+    public void Teaser_cuts_a_long_body_at_a_word_boundary()
+    {
+        var teaser = Markdown.Teaser("Der Basar war ein voller Erfolg.", 20);
+
+        // 20 characters end inside "voller"; the cut falls back to the space before it.
+        teaser.ShouldBe("Der Basar war ein…");
+    }
+
+    [Fact]
+    public void Teaser_keeps_a_word_that_ends_exactly_at_the_limit() =>
+        Markdown.Teaser("Der Basar war ein voller Erfolg.", 17).ShouldBe("Der Basar war ein…");
+
+    [Fact]
+    public void Teaser_drops_punctuation_left_at_the_cut() =>
+        Markdown.Teaser("Liebe Eltern, der Basar war schön.", 14).ShouldBe("Liebe Eltern…");
+
+    [Fact]
+    public void Teaser_cuts_a_single_overlong_word_hard() =>
+        Markdown.Teaser("Donaudampfschifffahrtsgesellschaft", 10).ShouldBe("Donaudampf…");
+
+    [Fact]
+    public void Teaser_defaults_to_160_characters_plus_ellipsis()
+    {
+        var body = string.Join(' ', Enumerable.Repeat("Wort", 100)); // 499 characters
+
+        var teaser = Markdown.Teaser(body);
+
+        teaser.Length.ShouldBeLessThanOrEqualTo(Markdown.TeaserLength + 1);
+        teaser.ShouldEndWith("Wort…");
+    }
+
+    [Fact]
+    public void Teaser_rejects_a_length_of_zero() =>
+        Should.Throw<ArgumentOutOfRangeException>(() => Markdown.Teaser("Text", 0));
 }

Elternbeirat.Web.Tests/PocketBaseClientTests.cs

@@ -17,8 +17,8 @@ public sealed class PocketBaseClientTests(PocketBaseFixture pocketBase)
 
         var events = await client.GetEventsAsync();
 
-        // Two seeded events, earliest start first.
-        events.Select(@event => @event.Title).ShouldBe(["Elternbeiratssitzung", "Herbstbasar"]);
+        // Three seeded events, earliest start first.
+        events.Select(@event => @event.Title).ShouldBe(["Projekttage", "Infoabend Klasse 5", "Elternbeiratssitzung", "Herbstbasar"]);
     }
 
     [Fact]

Elternbeirat.Web.Tests/PocketBaseFixture.cs

@@ -235,7 +235,16 @@ public sealed class PocketBaseFixture : IAsyncLifetime
         });
         await CreateRecordAsync(http, "pages", new
         {
-            title = "Vorstandsteam", body = "# Vorstand", location = "header",
+            // The body uses the "::: team" block like production: one card with the
+            // full convention (bold name, role, italic duties, note) in a large block,
+            // and one item without the convention, which must become a plain card.
+            title = "Vorstandsteam",
+            body = "## Vorsitz\n\n::: team gross\n"
+                   + "- **Jenny Reger-Stilgenbauer** (Vorsitzende)  \n  *Schulkonferenz, Mensarat*  \n  Mitglied im Gesamtelternbeirat.\n"
+                   + ":::\n\n## Beisitz\n\n::: team\n"
+                   + "- Özlem Ünal, Beisitz\n"
+                   + ":::",
+            location = "header",
             order = 2, slug = "board", embed = Array.Empty<string>(), @public = true,
         });
         await CreateRecordAsync(http, "pages", new
@@ -338,6 +347,20 @@ public sealed class PocketBaseFixture : IAsyncLifetime
             start = "2026-11-22 08:00:00.000Z", end = "2026-11-22 12:00:00.000Z",
             title = "Herbstbasar", location = "Schulhof", note = "", @public = true,
         });
+        // Two past events (before the smoke tests' clock of 1 October 2026), so the
+        // folded-up "Vergangene Termine" section on /events has something to show:
+        // one with a time (19:00 Berlin, summer time), and one over several days
+        // without a time. All-day means 00:00 Berlin, i.e. 22:00Z the day before.
+        await CreateRecordAsync(http, "events", new
+        {
+            start = "2026-09-10 17:00:00.000Z", title = "Infoabend Klasse 5",
+            location = "Aula", note = "", @public = true,
+        });
+        await CreateRecordAsync(http, "events", new
+        {
+            start = "2026-07-19 22:00:00.000Z", end = "2026-07-21 22:00:00.000Z",
+            title = "Projekttage", location = "", note = "", @public = true,
+        });
 
         // Faq topics: two, ordered. The topics own the grouping and the order the FAQ
         // page shows the groups in (cafeteria before lockers). Titles stay German for

Elternbeirat.Web.Tests/PocketBaseHealthCacheTests.cs

@@ -0,0 +1,73 @@
+using Elternbeirat.Web.Shared;
+
+namespace Elternbeirat.Web.Tests;
+
+/// <summary>
+/// Unit tests for the health cache behind the maintenance gate. The probe is a fake
+/// that counts its calls, so no PocketBase is needed.
+/// </summary>
+public class PocketBaseHealthCacheTests
+{
+    private readonly SteppingClock _clock = new(new DateTimeOffset(2026, 10, 1, 10, 0, 0, TimeSpan.Zero));
+    private int _probes;
+
+    private Func<CancellationToken, Task<bool>> Probe(bool healthy) =>
+        _ =>
+        {
+            _probes++;
+            return Task.FromResult(healthy);
+        };
+
+    [Fact]
+    public async Task Result_is_reused_within_the_lifetime()
+    {
+        var cache = new PocketBaseHealthCache(_clock);
+
+        await cache.IsHealthyAsync(Probe(healthy: true), CancellationToken.None);
+        _clock.Now += PocketBaseHealthCache.Lifetime - TimeSpan.FromSeconds(1);
+        var healthy = await cache.IsHealthyAsync(Probe(healthy: false), CancellationToken.None);
+
+        healthy.ShouldBeTrue();
+        _probes.ShouldBe(1);
+    }
+
+    [Fact]
+    public async Task Stale_result_is_probed_again()
+    {
+        // The way back after an outage: once the lifetime is over, the new answer
+        // replaces the old one.
+        var cache = new PocketBaseHealthCache(_clock);
+
+        await cache.IsHealthyAsync(Probe(healthy: false), CancellationToken.None);
+        _clock.Now += PocketBaseHealthCache.Lifetime;
+        var healthy = await cache.IsHealthyAsync(Probe(healthy: true), CancellationToken.None);
+
+        healthy.ShouldBeTrue();
+        _probes.ShouldBe(2);
+    }
+
+    [Fact]
+    public async Task Unhealthy_result_is_cached_too()
+    {
+        // While PocketBase is down, not every request should wait for a failing probe.
+        var cache = new PocketBaseHealthCache(_clock);
+
+        await cache.IsHealthyAsync(Probe(healthy: false), CancellationToken.None);
+        var healthy = await cache.IsHealthyAsync(Probe(healthy: true), CancellationToken.None);
+
+        healthy.ShouldBeFalse();
+        _probes.ShouldBe(1);
+    }
+
+    /// <summary>
+    /// A clock the test moves forward by hand, to step past the cache lifetime without
+    /// waiting.
+    /// </summary>
+    /// <param name="start">The moment the clock shows at first.</param>
+    private sealed class SteppingClock(DateTimeOffset start) : TimeProvider
+    {
+        public DateTimeOffset Now { get; set; } = start;
+
+        public override DateTimeOffset GetUtcNow() => Now;
+    }
+}

Elternbeirat.Web.Tests/PostNeighborsTests.cs

@@ -0,0 +1,57 @@
+using Elternbeirat.Contracts;
+using Elternbeirat.Web.Features.Posts;
+
+namespace Elternbeirat.Web.Tests;
+
+/// <summary>
+/// Unit tests for the older/newer post next to a post. The list comes newest
+/// first, as from PocketBase; "previous" is the older post. Pure logic, no
+/// PocketBase needed.
+/// </summary>
+public class PostNeighborsTests
+{
+    // Newest first, like PocketBaseClient.GetPostsAsync.
+    private static readonly Post[] Posts = [Post("march"), Post("february"), Post("january")];
+
+    private static Post Post(string slug) =>
+        new() { Id = slug, Title = slug, Slug = slug };
+
+    [Fact]
+    public void Middle_post_has_the_older_as_previous_and_the_newer_as_next()
+    {
+        var neighbors = PostNeighbors.Of(Posts, "february");
+
+        neighbors.Previous?.Slug.ShouldBe("january");
+        neighbors.Next?.Slug.ShouldBe("march");
+    }
+
+    [Fact]
+    public void Newest_post_has_no_next()
+    {
+        var neighbors = PostNeighbors.Of(Posts, "march");
+
+        neighbors.Previous?.Slug.ShouldBe("february");
+        neighbors.Next.ShouldBeNull();
+    }
+
+    [Fact]
+    public void Oldest_post_has_no_previous()
+    {
+        var neighbors = PostNeighbors.Of(Posts, "january");
+
+        neighbors.Previous.ShouldBeNull();
+        neighbors.Next?.Slug.ShouldBe("february");
+    }
+
+    [Fact]
+    public void Only_post_has_no_neighbors() =>
+        PostNeighbors.Of([Post("only")], "only").ShouldBe(new PostNeighbors(null, null));
+
+    [Fact]
+    public void Unknown_slug_has_no_neighbors() =>
+        PostNeighbors.Of(Posts, "december").ShouldBe(new PostNeighbors(null, null));
+
+    [Fact]
+    public void Slug_is_compared_case_insensitively() =>
+        PostNeighbors.Of(Posts, "February").Next?.Slug.ShouldBe("march");
+}

Elternbeirat.Web.Tests/RouteSmokeTests.cs

@@ -60,7 +60,16 @@ public sealed partial class RouteSmokeTests : IDisposable
     /// Every route that a visitor can reach through the navigation, the FAQ hub
     /// or the news section. The post slugs match the fixture's seed.
     /// </summary>
-    public static TheoryData<string> KnownRoutes =>
+    public static TheoryData<string> KnownRoutes => [.. Routes];
+
+    /// <summary>
+    /// The <see cref="KnownRoutes"/> that render an HTML page, i.e. all but the
+    /// calendar feed.
+    /// </summary>
+    public static TheoryData<string> PageRoutes =>
+        [.. Routes.Where(route => !route.EndsWith(".ics", StringComparison.Ordinal))];
+
+    private static readonly string[] Routes =
     [
         "/",
         "/board",
@@ -92,6 +101,7 @@ public sealed partial class RouteSmokeTests : IDisposable
     [Theory]
     [InlineData("/gibt-es-nicht")]
     [InlineData("/posts/gibt-es-nicht")]
+    [InlineData("/events/gibt-es-nicht.ics")]
     public async Task Unknown_route_returns_404(string route)
     {
         var client = _factory.CreateClient();
@@ -197,6 +207,28 @@ public sealed partial class RouteSmokeTests : IDisposable
         html.ShouldContain("<div class=\"kennzahlen\">");
     }
 
+    [Fact]
+    public async Task Board_renders_team_block_as_person_cards()
+    {
+        // The board body in the fixture holds a "::: team gross" block with one card
+        // following the convention and a "::: team" block with one that does not.
+        // Assert the cards survive the whole path: PocketBase, page, Markdown, HTML.
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/board", UriKind.Relative));
+
+        html.ShouldContain("<div class=\"team gross\">");
+        html.ShouldContain("<span class=\"team-avatar team-avatar-");
+        html.ShouldContain("aria-hidden=\"true\">JR</span>");
+        html.ShouldContain("<strong class=\"team-name\">Jenny Reger-Stilgenbauer</strong>");
+        html.ShouldContain("<span class=\"team-role\">Vorsitzende</span>");
+        html.ShouldContain("<span class=\"team-duty\">Schulkonferenz</span>");
+        html.ShouldContain("<span class=\"team-duty\">Mensarat</span>");
+        html.ShouldContain("<span class=\"team-note\">Mitglied im Gesamtelternbeirat.</span>");
+        html.ShouldContain("<li class=\"team-card team-card-plain\">Özlem Ünal, Beisitz</li>");
+        html.ShouldContain("<h2>Beisitz</h2>"); // the group headings stay normal headings
+    }
+
     [Fact]
     public async Task Posts_and_events_render_their_page_heading_and_body()
     {
@@ -276,8 +308,64 @@ public sealed partial class RouteSmokeTests : IDisposable
         var response = await client.GetAsync(new Uri("/health", UriKind.Relative));
 
         response.StatusCode.ShouldBe(HttpStatusCode.ServiceUnavailable);
+        (await response.Content.ReadAsStringAsync()).ShouldBe("PocketBase unreachable");
     }
 
+    [Theory]
+    [InlineData("/")]
+    [InlineData("/board")]
+    [InlineData("/posts/new-board")]
+    public async Task Page_shows_maintenance_page_when_PocketBase_is_unreachable(string route)
+    {
+        // The maintenance gate: with PocketBase down, a page is not rendered half-empty
+        // but answered with the static maintenance.html, a 503 and a hint when to retry.
+        await using var factory = UnreachablePocketBase();
+        var client = factory.CreateClient();
+
+        var response = await client.GetAsync(new Uri(route, UriKind.Relative));
+
+        response.StatusCode.ShouldBe(HttpStatusCode.ServiceUnavailable);
+        response.Headers.RetryAfter.ShouldNotBeNull();
+        (await response.Content.ReadAsStringAsync()).ShouldContain("Die Seite ist gerade nicht erreichbar");
+    }
+
+    [Fact]
+    public async Task Calendar_feed_stays_an_empty_calendar_when_PocketBase_is_unreachable()
+    {
+        // Not a page, so the gate lets it through: subscribed calendar apps keep
+        // getting a valid (empty) calendar instead of an HTML page.
+        await using var factory = UnreachablePocketBase();
+        var client = factory.CreateClient();
+
+        var response = await client.GetAsync(new Uri("/events.ics", UriKind.Relative));
+
+        response.StatusCode.ShouldBe(HttpStatusCode.OK);
+        (await response.Content.ReadAsStringAsync()).ShouldContain("BEGIN:VCALENDAR");
+    }
+
+    [Fact]
+    public async Task Maintenance_page_and_its_font_stay_reachable_when_PocketBase_is_unreachable()
+    {
+        // Static files are not gated: the maintenance page loads its self-hosted font
+        // from /fonts while PocketBase is down.
+        await using var factory = UnreachablePocketBase();
+        var client = factory.CreateClient();
+
+        var page = await client.GetAsync(new Uri("/maintenance.html", UriKind.Relative));
+        var font = await client.GetAsync(new Uri("/fonts/nunito-latin-wght.woff2", UriKind.Relative));
+
+        page.StatusCode.ShouldBe(HttpStatusCode.OK);
+        font.StatusCode.ShouldBe(HttpStatusCode.OK);
+    }
+
+    /// <summary>
+    /// A throwaway app pointed at a dead address: nothing listens on port 1, so every
+    /// PocketBase call is refused at once, without a timeout wait.
+    /// </summary>
+    private WebApplicationFactory<Program> UnreachablePocketBase() =>
+        _baseFactory.WithWebHostBuilder(builder =>
+            builder.UseSetting("PocketBase:BaseUrl", "http://localhost:1"));
+
     [Fact]
     public async Task Home_hero_takes_title_and_buttons_from_the_body()
     {
@@ -328,6 +416,173 @@ public sealed partial class RouteSmokeTests : IDisposable
         html.ShouldNotContain("Nächster Termin");
     }
 
+    [Fact]
+    public async Task Event_cards_on_the_events_page_do_not_link_to_the_events_page()
+    {
+        // Events have no page of their own; a card linking to /events led the
+        // visitor back to where they already were. The navigation does link to
+        // /events, so only the card list is checked.
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/events", UriKind.Relative));
+
+        var list = EventCards().Match(html);
+        list.Success.ShouldBeTrue();
+        Href().Matches(list.Value).Select(match => match.Groups[1].Value).ShouldAllBe(href => href.EndsWith(".ics", StringComparison.Ordinal));
+    }
+
+    [Fact]
+    public async Task Events_page_shows_its_intro_once_and_a_subscribe_button()
+    {
+        // The intro is the "events" page body; a hard-coded intro beside it used to
+        // say the same thing twice.
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/events", UriKind.Relative));
+
+        Regex.Count(html, Regex.Escape("Sitzungen und Veranstaltungen auf einen Blick.")).ShouldBe(1);
+        html.ShouldContain("""<a class="btn btn-secondary" href="/events.ics">""");
+        html.ShouldContain("Kalender abonnieren");
+    }
+
+    [Fact]
+    public async Task Events_page_folds_past_events_away()
+    {
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/events", UriKind.Relative));
+
+        var past = PastEvents().Match(html);
+        past.Success.ShouldBeTrue();
+        past.Value.ShouldContain("Vergangene Termine anzeigen (2)");
+        past.Value.ShouldContain("Infoabend Klasse 5");
+        past.Value.ShouldNotContain("Elternbeiratssitzung"); // upcoming, not past
+        past.Value.ShouldContain("""<h3 class="past-events-year">2026</h3>""");
+        past.Value.ShouldContain("10. September"); // day without weekday or year
+        past.Value.ShouldContain("19:00 Uhr");     // the time stays, after the title
+        past.Value.ShouldContain("20.–22. Juli");  // several days as a span
+        Regex.Count(past.Value, "Uhr").ShouldBe(1); // the all-day Projekttage get no time
+    }
+
+    [Fact]
+    public async Task Single_event_calendar_file_holds_exactly_that_event()
+    {
+        // The "In Kalender übernehmen" link of a card leads to a calendar with just
+        // that one event. Take the link from the page, as a visitor would.
+        var client = _factory.CreateClient();
+        var html = await client.GetStringAsync(new Uri("/events", UriKind.Relative));
+        var href = Href().Matches(EventCards().Match(html).Value)
+            .Select(match => match.Groups[1].Value)
+            .First();
+
+        var response = await client.GetAsync(new Uri(href, UriKind.Relative));
+
+        response.StatusCode.ShouldBe(HttpStatusCode.OK);
+        response.Content.Headers.ContentType?.MediaType.ShouldBe("text/calendar");
+        var ics = await response.Content.ReadAsStringAsync();
+        ics.ShouldStartWith("BEGIN:VCALENDAR");
+        Regex.Count(ics, "BEGIN:VEVENT").ShouldBe(1);
+        ics.ShouldContain("SUMMARY:Elternbeiratssitzung"); // the earliest upcoming card
+    }
+
+    [Fact]
+    public async Task Home_event_cards_link_to_the_events_page()
+    {
+        // On the home page the cards are a teaser and may lead to the full list.
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/", UriKind.Relative));
+
+        var list = EventCards().Match(html);
+        list.Success.ShouldBeTrue();
+        Href().Matches(list.Value).Select(match => match.Groups[1].Value).ShouldAllBe(href => href == "/events");
+        html.ShouldContain("class=\"calendar-sheet\"");
+    }
+
+    [Fact]
+    public async Task Home_next_event_shows_the_time_and_keeps_the_full_date_for_screen_readers()
+    {
+        // The calendar sheet already shows the day, so the written-out date is only
+        // for screen readers; visible beside the sheet is the time. The meeting is
+        // 19:30 Berlin on Thursday, 8 October 2026 (fixture, test clock 1 October).
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/", UriKind.Relative));
+
+        var card = NextEventCard().Match(html);
+        card.Success.ShouldBeTrue();
+        var hidden = VisuallyHidden().Match(card.Value);
+        hidden.Value.ShouldContain("Donnerstag, 8. Oktober 2026, 19:30 Uhr");
+        var visible = card.Value.Replace(hidden.Value, "", StringComparison.Ordinal);
+        visible.ShouldContain("19:30 Uhr");
+        visible.ShouldNotContain("Oktober 2026");
+    }
+
+    [Fact]
+    public async Task Post_page_has_the_title_as_its_only_h1()
+    {
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/posts/new-board", UriKind.Relative));
+
+        Regex.Count(html, "<h1[ >]").ShouldBe(1);
+        html.ShouldContain(">Neuer Vorstand</h1>");
+    }
+
+    [Fact]
+    public async Task Newest_post_links_only_to_the_older_one()
+    {
+        // The fixture has two posts: new-board (newer) and new-hall (older).
+        // "Vorheriger Beitrag" is the older post, so the newest post has no "next".
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/posts/new-board", UriKind.Relative));
+
+        html.ShouldContain("href=\"/posts/new-hall\" rel=\"prev\"");
+        html.ShouldNotContain("rel=\"next\"");
+    }
+
+    [Fact]
+    public async Task Oldest_post_links_only_to_the_newer_one()
+    {
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/posts/new-hall", UriKind.Relative));
+
+        html.ShouldContain("href=\"/posts/new-board\" rel=\"next\"");
+        html.ShouldNotContain("rel=\"prev\"");
+    }
+
+    [Theory]
+    [MemberData(nameof(PageRoutes))]
+    public async Task Every_page_starts_with_a_skip_link_to_its_own_content(string route)
+    {
+        // The skip link must carry the page's own path: with <base href="/"> a bare
+        // "#main" would lead back to the home page. It must also bypass Blazor's
+        // enhanced navigation, which scrolls but does not move the focus.
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri(route, UriKind.Relative));
+
+        html.ShouldContain($"""<a class="skip-link" href="{route}#main" data-enhance-nav="false" """);
+        html.ShouldContain("Zum Inhalt springen</a>");
+        html.ShouldContain("""<main id="main" """);
+    }
+
+    [Fact]
+    public async Task Menu_toggle_is_a_named_checkbox_tied_to_the_menu()
+    {
+        // The CSS-only hamburger: the checkbox is what keyboard and screen-reader
+        // users operate, so it needs a name and must point at the menu it opens.
+        var client = _factory.CreateClient();
+
+        var html = await client.GetStringAsync(new Uri("/", UriKind.Relative));
+
+        html.ShouldContain("aria-controls=\"main-nav\"");
+        html.ShouldContain("Hauptmenü anzeigen</span>");
+        html.ShouldContain("<nav id=\"main-nav\"");
+    }
+
     /// <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
@@ -356,4 +611,30 @@ public sealed partial class RouteSmokeTests : IDisposable
     /// </summary>
     [GeneratedRegex("""<section class="home-tiles".*?</section>""", RegexOptions.Singleline)]
     private static partial Regex HomeTiles();
+
+    /// <summary>
+    /// Matches the "Nächster Termin" card in the home hero. It holds no other link,
+    /// so the first closing <c>&lt;/a&gt;</c> ends it.
+    /// </summary>
+    [GeneratedRegex("""<a class="next-event".*?</a>""", RegexOptions.Singleline)]
+    private static partial Regex NextEventCard();
+
+    /// <summary>
+    /// Matches the first text hidden for sighted visitors but read by screen readers.
+    /// </summary>
+    [GeneratedRegex("""<span class="visually-hidden".*?</span>""", RegexOptions.Singleline)]
+    private static partial Regex VisuallyHidden();
+
+    /// <summary>
+    /// Matches the first list of event cards, from its opening tag to the closing one.
+    /// The cards nest no other <c>&lt;ul&gt;</c>.
+    /// </summary>
+    [GeneratedRegex("""<ul class="event-list".*?</ul>""", RegexOptions.Singleline)]
+    private static partial Regex EventCards();
+
+    /// <summary>
+    /// Matches the folded-up past events on the events page.
+    /// </summary>
+    [GeneratedRegex("""<details class="past-events[ "].*?</details>""", RegexOptions.Singleline)]
+    private static partial Regex PastEvents();
 }

Elternbeirat.Web.Tests/TeamMemberTests.cs

@@ -0,0 +1,176 @@
+using Elternbeirat.Web.Shared;
+using Markdig.Syntax;
+
+namespace Elternbeirat.Web.Tests;
+
+/// <summary>
+/// Unit tests for the person cards of the "::: team" block: initials, avatar colour,
+/// reading the list-item convention and the rendered card. Pure logic, no PocketBase
+/// needed.
+/// </summary>
+public class TeamMemberTests
+{
+    [Theory]
+    [InlineData("Jenny Reger-Stilgenbauer", "JR")] // a double name is one word
+    [InlineData("Özlem Ünal", "ÖÜ")]              // umlauts kept, not folded to O/U
+    [InlineData("ömer şahin", "ÖŞ")]              // lower case is raised
+    [InlineData("Isabell", "I")]                   // a single word gives one letter
+    [InlineData("Anna Maria Müller", "AM")]        // first and last word only
+    [InlineData("  Maik   Palm ", "MP")]           // extra whitespace ignored
+    [InlineData("", "")]
+    [InlineData("123", "")]                        // no letter, no initials
+    public void Initials_are_first_and_last_word(string name, string expected) =>
+        TeamMember.InitialsOf(name).ShouldBe(expected);
+
+    [Fact]
+    public void Color_is_stable_and_in_range()
+    {
+        // Pinned values: the colour must not change between restarts or releases, so a
+        // change to the hash shows up here instead of recolouring the board.
+        TeamMember.ColorOf("Maik Palm").ShouldBe(TeamMember.ColorOf(" Maik Palm "));
+        TeamMember.ColorOf("Maik Palm").ShouldBe(2);
+        TeamMember.ColorOf("Gentiana Erol").ShouldBe(2);
+        TeamMember.ColorOf("Raul Chira").ShouldBe(1);
+
+        new[] { "Maik Palm", "Gentiana Erol", "Raul Chira", "Marion Leininger", "Isabell Vesper", "" }
+            .ShouldAllBe(name => TeamMember.ColorOf(name) >= 1 && TeamMember.ColorOf(name) <= TeamMember.ColorCount);
+    }
+
+    [Fact]
+    public void Board_uses_both_colours_about_evenly()
+    {
+        // Two colours only make sense if both show up; the real board (ten names)
+        // must not land mostly on one.
+        string[] board =
+        [
+            "Maik Palm", "Gentiana Erol", "Raul Chira", "Marion Leininger", "Jenny Reger-Stilgenbauer",
+            "Mariella Ianello", "Isabell Vesper", "Susanne Naumburg", "Rebecca Goldmann", "Michael Weber",
+        ];
+
+        board.Count(name => TeamMember.ColorOf(name) == 1).ShouldBeInRange(4, 6);
+    }
+
+    [Fact]
+    public void Item_with_role_duties_and_note_is_read_in_full()
+    {
+        var (member, note) = Read("- **Maik Palm** (Vorsitzender)  \n  *Schulkonferenz, Mensarat , Homepage*  \n  Mitglied im Schulbeirat.");
+
+        member.Name.ShouldBe("Maik Palm");
+        member.Role.ShouldBe("Vorsitzender");
+        member.Duties.ShouldBe(["Schulkonferenz", "Mensarat", "Homepage"]);
+        Markdown.PlainText(note).ShouldBe("Mitglied im Schulbeirat.");
+    }
+
+    [Fact]
+    public void Item_without_role_still_reads_the_duties()
+    {
+        var (member, note) = Read("- **Jenny Reger-Stilgenbauer**  \n  *Schulkonferenz, Schaukasten*");
+
+        member.Role.ShouldBeNull();
+        member.Duties.ShouldBe(["Schulkonferenz", "Schaukasten"]);
+        note.ShouldBeEmpty();
+    }
+
+    [Fact]
+    public void Item_with_only_a_name_has_no_role_and_no_duties()
+    {
+        var (member, note) = Read("- **Isabell Vesper**");
+
+        member.Name.ShouldBe("Isabell Vesper");
+        member.Role.ShouldBeNull();
+        member.Duties.ShouldBeEmpty();
+        note.ShouldBeEmpty();
+    }
+
+    [Fact]
+    public void Soft_line_breaks_count_like_hard_ones()
+    {
+        // Editors forget the two trailing spaces; the card must not depend on them.
+        var (member, _) = Read("- **Raul Chira** (2. Stellvertreter)\n  *Mensarat*");
+
+        member.Role.ShouldBe("2. Stellvertreter");
+        member.Duties.ShouldBe(["Mensarat"]);
+    }
+
+    [Fact]
+    public void Second_line_that_is_not_only_italic_becomes_the_note()
+    {
+        var (member, note) = Read("- **Rebecca Goldmann**  \n  Neu im Team, *herzlich willkommen*.");
+
+        member.Duties.ShouldBeEmpty();
+        Markdown.PlainText(note).ShouldBe("Neu im Team, herzlich willkommen.");
+    }
+
+    [Theory]
+    [InlineData("- Michael Weber, Beisitz")]        // no bold at all
+    [InlineData("- Beisitz: **Michael Weber**")]    // bold, but not at the start
+    [InlineData("- *Michael Weber*")]               // italic, not bold
+    public void Item_without_convention_is_not_read(string markdown) =>
+        TeamMember.Read(FirstParagraph(markdown)).ShouldBeNull();
+
+    [Fact]
+    public void Team_block_renders_person_cards()
+    {
+        var html = Markdown.ToHtml(
+            "::: team\n- **Maik Palm** (Vorsitzender)  \n  *Schulkonferenz, Mensarat*  \n  Siehe [Kontakt](/contact).\n:::");
+
+        html.ShouldContain("<div class=\"team\">");
+        html.ShouldContain($"<li class=\"{TeamMember.CardClass}\">");
+        html.ShouldContain("<span class=\"team-avatar team-avatar-2\" aria-hidden=\"true\">MP</span>");
+        html.ShouldContain("<strong class=\"team-name\">Maik Palm</strong>");
+        html.ShouldContain("<span class=\"team-role\">Vorsitzender</span>");
+        html.ShouldContain("<span class=\"team-duty\">Schulkonferenz</span>");
+        html.ShouldContain("<span class=\"team-duty\">Mensarat</span>");
+        html.ShouldContain("<span class=\"team-note\">Siehe <a href=\"/contact\">Kontakt</a>.</span>"); // links survive
+        html.ShouldNotContain("(Vorsitzender)");
+    }
+
+    [Fact]
+    public void Item_without_convention_renders_as_plain_card_with_its_text()
+    {
+        var html = Markdown.ToHtml("::: team\n- Michael Weber, Beisitz\n:::");
+
+        html.ShouldContain($"<li class=\"{TeamMember.CardClass} {TeamMember.PlainCardClass}\">Michael Weber, Beisitz</li>");
+        html.ShouldNotContain("team-avatar");
+    }
+
+    [Fact]
+    public void Editor_text_in_a_card_is_escaped()
+    {
+        var html = Markdown.ToHtml("::: team\n- **<b>Name</b>** (Rolle \"x\")\n:::");
+
+        html.ShouldNotContain("<b>");
+        html.ShouldContain("&lt;b&gt;Name&lt;/b&gt;");
+    }
+
+    [Theory]
+    [InlineData("::: team gross")]
+    [InlineData("::: team groß")]
+    [InlineData("::: team GROSS")]
+    public void Large_modifier_adds_its_class(string opening) =>
+        Markdown.ToHtml($"{opening}\n- **Maik Palm**\n:::").ShouldContain("<div class=\"team gross\">");
+
+    [Fact]
+    public void Mistyped_modifier_keeps_the_grid()
+    {
+        // A typo in the modifier costs the highlight, not the cards.
+        var html = Markdown.ToHtml("::: team grss\n- **Maik Palm**\n:::");
+
+        html.ShouldContain("<div class=\"team\">");
+        html.ShouldContain("team-card");
+    }
+
+    [Fact]
+    public void Lists_outside_a_team_block_are_untouched()
+    {
+        var html = Markdown.ToHtml("- **Maik Palm** (Vorsitzender)");
+
+        html.ShouldBe("<ul>\n<li><strong>Maik Palm</strong> (Vorsitzender)</li>\n</ul>\n");
+    }
+
+    private static (TeamMember Member, Markdig.Syntax.Inlines.Inline[] Note) Read(string markdown) =>
+        TeamMember.Read(FirstParagraph(markdown)) ?? throw new ShouldAssertException("The item was not read as a person.");
+
+    private static ParagraphBlock FirstParagraph(string markdown) =>
+        Markdown.Parse(markdown).Descendants<ParagraphBlock>().First();
+}

Elternbeirat.Web/Components/Layout/MainLayout.razor

@@ -6,6 +6,15 @@
    immediately), it pins to the top and stays there while the page scrolls. The
    footer is kept at the bottom on short pages by a min-height on <main>, not by a
    flex wrapper -- see MainLayout.razor.css. *@
+
+@* Skip link: the first stop for the Tab key, straight past the menu to the content.
+   The href carries the current path because of <base href="/"> in App.razor: a
+   bare "#main" would resolve to "/#main" and lead every subpage back home.
+   data-enhance-nav="false" leaves the jump to the browser: blazor.web.js would
+   otherwise take the click, only scroll to <main> and keep the focus on the link,
+   so the next Tab would land in the header menu again. *@
+<a class="skip-link" href="@SkipLinkHref" data-enhance-nav="false">Zum Inhalt springen</a>
+
 <header class="site-header">
         <div class="header-inner">
             @* Two-line lettering next to the signet: the body's name large, the
@@ -18,16 +27,23 @@
                 </span>
             </a>
 
-            @* CSS-only mobile menu: the hidden checkbox holds the open/closed
-               state, the label is the hamburger button, and :checked reveals the
-               nav below (see MainLayout.razor.css). No JavaScript, no @@rendermode
-               -- works under static SSR. *@
-            <input type="checkbox" id="nav-toggle" class="nav-toggle" />
-            <label for="nav-toggle" class="nav-toggle-label" aria-label="Menü öffnen und schließen">
+            @* CSS-only mobile menu: the checkbox holds the open/closed state, the
+               label is the hamburger button, and :checked reveals the nav below (see
+               MainLayout.razor.css). No JavaScript, no @@rendermode -- works under
+               static SSR. The checkbox is only visually hidden on a phone, not
+               removed, so it is what keyboard and screen-reader users operate: Tab
+               reaches it, Space toggles it, and its checked state is the menu's
+               open/closed state, announced as such ("Hauptmenü anzeigen,
+               Kontrollkästchen, aktiviert"). Its name is the label's hidden text;
+               aria-controls ties it to the menu it opens. aria-expanded would need
+               JavaScript to keep it in sync, the native checked state does not. *@
+            <input type="checkbox" id="nav-toggle" class="nav-toggle visually-hidden" aria-controls="main-nav" />
+            <label for="nav-toggle" class="nav-toggle-label">
                 <span class="nav-toggle-bar"></span>
+                <span class="visually-hidden">Hauptmenü anzeigen</span>
             </label>
 
-            <nav class="main-nav" aria-label="Hauptmenü">
+            <nav id="main-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
@@ -40,7 +56,9 @@
         </div>
     </header>
 
-    <main class="content">
+    @* The skip link's target. tabindex="-1" makes it focusable by the link alone
+       (not by Tab), so after the jump the next Tab continues inside the content. *@
+    <main id="main" class="content" tabindex="-1">
         @Body
     </main>
 

Elternbeirat.Web/Components/Layout/MainLayout.razor.cs

@@ -23,6 +23,12 @@ public partial class MainLayout
     private IReadOnlyList<NavLinkItem> _header = [];
     private IReadOnlyList<NavLinkItem> _footer = [];
 
+    // The skip link's target on this very page: path and query of the request plus
+    // the fragment. See the comment on the skip link in the markup for why it cannot
+    // be a bare "#main".
+    private string SkipLinkHref =>
+        $"{HttpContext?.Request.PathBase}{HttpContext?.Request.Path}{HttpContext?.Request.QueryString}#main";
+
     // Berlin's year, not the server's (UTC) -- see FooterYear.
     private readonly int _year = FooterYear.For(TimeProvider.System.GetUtcNow());
 

Elternbeirat.Web/Components/Layout/MainLayout.razor.css

@@ -62,6 +62,12 @@
     color: var(--color-on-header);
 }
 
+/* On the blue gradient the global brand-blue focus ring would vanish; white
+   stays visible on both ends of it. */
+.brand:focus-visible {
+    outline-color: var(--color-focus-inverse);
+}
+
 /* The signet lives in its own component (Signet.razor), so its <svg> carries that
    component's scope attribute, not this one's; ::deep reaches it from here. */
 .brand ::deep .signet {
@@ -97,7 +103,9 @@
 }
 
 /* The hamburger button and its state checkbox are hidden on wide screens; the
-   media query below turns them on for narrow ones. */
+   media query below turns them on for narrow ones. display:none (beating the
+   global .visually-hidden the checkbox also carries) takes the checkbox out of the
+   tab order here, where there is no menu to open. */
 .nav-toggle,
 .nav-toggle-label {
     display: none;
@@ -205,6 +213,11 @@
     text-decoration: underline;
 }
 
+/* Same reason as the brand link in the header: a light ring on the dark band. */
+.footer-nav a:focus-visible {
+    outline-color: var(--color-focus-inverse);
+}
+
 /* Copyright: a thin rule separates it from the columns. The rule spans the content
    width, not the whole window, so it lines up with the columns above. */
 .footer-copyright {
@@ -228,6 +241,19 @@
         justify-content: space-between;
     }
 
+    /* The checkbox comes back as a real, focusable control -- only visually hidden
+       (global .visually-hidden), so Tab stops on it and Space toggles the menu. It
+       lives under the label, so the focus ring is drawn there instead. */
+    .nav-toggle {
+        display: block;
+    }
+
+    .nav-toggle:focus-visible + .nav-toggle-label {
+        outline: 3px solid var(--color-focus-inverse);
+        outline-offset: 2px;
+        border-radius: var(--radius);
+    }
+
     /* Show the hamburger button. */
     .nav-toggle-label {
         display: block;
@@ -271,20 +297,29 @@
         transform: translateY(-2px) rotate(-45deg);   /* back up by its own height */
     }
 
-    /* The nav takes its own row and is hidden until the checkbox is checked. */
+    /* The nav takes its own row and is hidden until the checkbox is checked.
+       max-height:0 alone would only hide it from the eye: its links would still
+       be Tab stops and still be read out. visibility:hidden takes them out of
+       both. Transitioning visibility delays the switch to hidden until the fold
+       has finished, so closing still animates. Opening uses the transition of the
+       :checked rule below, which leaves visibility out: the links must be Tab
+       stops the moment Space is pressed, not 0.2s later. */
     .main-nav {
         flex-basis: 100%;
         flex-direction: column;
         gap: 0;
         max-height: 0;
         overflow: hidden;
-        transition: max-height 0.2s ease;
+        visibility: hidden;
+        transition: max-height 0.2s ease, visibility 0.2s;
     }
 
     /* Checked state: reveal the stacked links. The max-height caps the open menu
        to the space below the sticky header; a longer list scrolls inside it
        instead of running off the screen. */
     .nav-toggle:checked ~ .main-nav {
+        visibility: visible;
+        transition: max-height 0.2s ease;
         max-height: 70vh;
         overflow-y: auto;
         margin-top: 0.5rem;

Elternbeirat.Web/Features/Embeds/EventsEmbed.razor

@@ -6,16 +6,8 @@
         <ul class="event-list">
             @foreach (var ev in _upcomingEvents)
             {
-                <li>
-                    <a class="card-link" href="/events">
-                        <span class="event-title">@ev.Title</span>
-                        <EventDate Value="ev" />
-                        @if (!string.IsNullOrWhiteSpace(ev.Location))
-                        {
-                            <span class="event-location">@ev.Location</span>
-                        }
-                    </a>
-                </li>
+                @* A teaser: each card leads to the events page with the full list. *@
+                <li><EventCard Value="ev" Href="/events" /></li>
             }
         </ul>
     </section>

Elternbeirat.Web/Features/Embeds/EventsEmbed.razor.css

@@ -1,5 +1,5 @@
-/* Card styles for .event-list are shared with the full events page and live in the
-   global app.css. Only the embed's spacing on the home page is specific here. */
+/* The card is EventCard and the list grid lives in the global app.css, shared with
+   the full events page. Only the embed's spacing on the home page is specific here. */
 .embed-events {
     margin-top: var(--space-5);
 }

Elternbeirat.Web/Features/Embeds/PostsEmbed.razor

@@ -6,12 +6,7 @@
         <ul class="post-list">
             @foreach (var post in _latest)
             {
-                <li>
-                    <a class="card-link" href="@($"/posts/{post.Slug}")">
-                        <span class="post-title">@post.Title</span>
-                        <PostDate Value="post.Date" />
-                    </a>
-                </li>
+                <li><PostCard Value="post" /></li>
             }
         </ul>
     </section>

Elternbeirat.Web/Features/Embeds/PostsEmbed.razor.css

@@ -1,5 +1,5 @@
-/* Card styles for .post-list are shared with the full posts page and live in the
-   global app.css. Only the embed's spacing on the home page is specific here. */
+/* The card is PostCard and the list grid lives in the global app.css, shared with
+   the full posts page. Only the embed's spacing on the home page is specific here. */
 .embed-posts {
     margin-top: var(--space-5);
 }

Elternbeirat.Web/Features/Events/CalendarSheet.razor

@@ -0,0 +1,10 @@
+@*
+    A tear-off calendar sheet for an event's start: short month on a green band,
+    the day large, the weekday small. Pure decoration, hidden from screen readers:
+    every caller puts the full date (<EventDate>) next to it.
+*@
+<span class="calendar-sheet" aria-hidden="true">
+    <span class="calendar-month">@EventDateFormat.SheetMonth(Value)</span>
+    <span class="calendar-day">@EventDateFormat.SheetDay(Value)</span>
+    <span class="calendar-weekday">@EventDateFormat.SheetWeekday(Value)</span>
+</span>

Elternbeirat.Web/Features/Events/CalendarSheet.razor.cs

@@ -0,0 +1,22 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Elternbeirat.Web.Features.Events;
+
+/// <summary>
+///     Renders an event's start day as a calendar sheet (month, day, weekday).
+/// </summary>
+/// <remarks>
+///     One component for every place that shows an event (the next-event card on the
+///     home page, the events embed and the events page), so the sheets look the same
+///     everywhere. The texts come from <see cref="EventDateFormat"/>.
+/// </remarks>
+/// <seealso cref="EventCard"/>
+public partial class CalendarSheet
+{
+    /// <summary>
+    ///     The event's start, as Berlin wall-clock time.
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    public DateTime Value { get; set; }
+}

Elternbeirat.Web/Features/Events/CalendarSheet.razor.css

@@ -0,0 +1,41 @@
+/* The calendar sheet: a green band with the month over a large day number and the
+   weekday. Fixed width, so the sheets of a list line up whatever the month. The band
+   has its own token (--color-calendar-band): the plain green accent is too light for
+   small white text, the band's darker green keeps it above AA in both schemes.
+   Positioning (gap to the text beside it) is the caller's job. */
+.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;
+    line-height: 1.2;
+}
+
+.calendar-month {
+    padding: 0.15rem 0;
+    background: var(--color-calendar-band);
+    color: var(--color-on-button);
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.calendar-day {
+    padding-top: var(--space-1);
+    color: var(--color-heading);
+    font-size: 1.75rem;
+    font-weight: var(--font-weight-heading);
+}
+
+.calendar-weekday {
+    padding-bottom: var(--space-1);
+    color: var(--color-text-soft);
+    font-size: 0.8rem;
+    font-weight: 600;
+}

Elternbeirat.Web/Features/Events/EventCard.razor

@@ -0,0 +1,43 @@
+@*
+    One event as a card: calendar sheet on the left, title, time, place and note on
+    the right. With an Href the whole card is that link (home embed); without one it
+    is a plain card (events page) and offers the event as a calendar file instead.
+*@
+@if (Href is null)
+{
+    <div class="event-card">@Details</div>
+}
+else
+{
+    <a class="event-card event-card-link" href="@Href">@Details</a>
+}
+
+@code {
+    // The card's content, the same in both forms. A template, not a child component,
+    // so the wrapper above stays the only difference between the two.
+    private RenderFragment Details => @<text>
+        <CalendarSheet Value="Value.Start" />
+        <span class="event-details">
+            <span class="event-title">@Value.Title</span>
+            @* The sheet is hidden from screen readers; this is the date they hear. *@
+            <span class="visually-hidden"><EventDate Value="Value" /></span>
+            @if (Span.Length > 0)
+            {
+                <span class="event-meta"><Icon Name="clock" Size="16" /> @Span</span>
+            }
+            @if (!string.IsNullOrWhiteSpace(Value.Location))
+            {
+                <span class="event-meta"><Icon Name="map-pin" Size="16" /> @Value.Location</span>
+            }
+            @if (!string.IsNullOrWhiteSpace(Value.Note))
+            {
+                <span class="event-note">@Value.Note</span>
+            }
+            @* A link inside a link is invalid HTML, so only the plain card offers it. *@
+            @if (Href is null)
+            {
+                <a class="event-ics" href="@IcsHref"><Icon Name="calendar-plus" Size="16" /> In Kalender übernehmen</a>
+            }
+        </span>
+    </text>;
+}

Elternbeirat.Web/Features/Events/EventCard.razor.cs

@@ -0,0 +1,55 @@
+using Elternbeirat.Contracts;
+using Microsoft.AspNetCore.Components;
+
+namespace Elternbeirat.Web.Features.Events;
+
+/// <summary>
+///     Renders one event as a card with a calendar sheet, time, place and note.
+/// </summary>
+/// <remarks>
+///     Shared by the events page and the home-page events embed, so both show events
+///     the same way. They differ only in what the card leads to:
+///     <list type="bullet">
+///         <item>
+///             <description>
+///                 In the embed the whole card links to the events page
+///                 (<see cref="Href"/> set).
+///             </description>
+///         </item>
+///         <item>
+///             <description>
+///                 On the events page itself a link back to the same page would lead
+///                 nowhere, so the card is no link (<see cref="Href"/> is
+///                 <see langword="null"/>) and offers "In Kalender übernehmen" instead.
+///             </description>
+///         </item>
+///     </list>
+/// </remarks>
+/// <seealso cref="CalendarSheet"/>
+/// <seealso cref="IcsCalendar"/>
+public partial class EventCard
+{
+    /// <summary>
+    ///     The event to show.
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    public Event Value { get; set; } = null!;
+
+    /// <summary>
+    ///     Where the card links to, or <see langword="null"/> for a card that is no link
+    ///     and offers the event as a calendar file instead.
+    /// </summary>
+    [Parameter]
+    public string? Href { get; set; }
+
+    /// <summary>
+    ///     The time line beside the sheet; empty for a single all-day event.
+    /// </summary>
+    private string Span => EventDateFormat.Span(Value);
+
+    /// <summary>
+    ///     The address of this one event as a calendar file.
+    /// </summary>
+    private string IcsHref => $"/events/{Uri.EscapeDataString(Value.Id)}.ics";
+}

Elternbeirat.Web/Features/Events/EventCard.razor.css

@@ -0,0 +1,82 @@
+/* The event card: a white surface on the tinted page, sheet left, text right. The
+   card fills its list cell, so the cards of a row are equally tall. */
+.event-card {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--space-3);
+    align-items: flex-start;
+    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);
+}
+
+/* Only the linked card reacts to hover: a card that leads nowhere must not look
+   clickable. Hover = stronger shadow and a blue edge, nothing moves. */
+.event-card-link {
+    text-decoration: none;
+    transition: box-shadow var(--transition), border-color var(--transition);
+}
+
+.event-card-link:hover {
+    border-color: var(--color-brand);
+    box-shadow: var(--shadow-hover);
+    color: var(--color-text);
+}
+
+.event-details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;   /* lets a long title wrap instead of widening the card */
+}
+
+.event-title {
+    color: var(--color-brand);
+    font-size: 1.15rem;
+    font-weight: 700;
+    line-height: 1.3;
+}
+
+/* Time and place: icon and text on one quiet line each. The icon belongs to Icon's
+   own scope, so it is reached through ::deep. */
+.event-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    color: var(--color-text-soft);
+    font-size: 0.9rem;
+}
+
+.event-meta ::deep .icon {
+    color: var(--color-accent-dark);
+}
+
+.event-note {
+    margin-top: var(--space-1);
+    font-size: 0.95rem;
+}
+
+/* In the linked card (home embed) the note is only a teaser: cut after two lines,
+   so a long note does not stretch the card next to short ones. The full note is
+   on the events page. */
+.event-card-link .event-note {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+}
+
+.event-ics {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    align-self: flex-start;
+    margin-top: var(--space-2);
+    font-size: 0.9rem;
+    font-weight: 600;
+}

Elternbeirat.Web/Features/Events/EventDateFormat.cs

@@ -7,8 +7,10 @@ namespace Elternbeirat.Web.Features.Events;
 ///     Formats the date range of an <see cref="Event"/> for display in German.
 /// </summary>
 /// <remarks>
-///     Shared by the full event list and the home-page events embed, so both render
-///     dates the same way.
+///     Shared by the full event list, the home-page events embed and the next-event
+///     card, so all render dates the same way: <see cref="Range"/> as the full date,
+///     the <c>Sheet…</c> methods and <see cref="Span"/> for the calendar sheet and the
+///     time line beside it, <see cref="PastDays"/> and <see cref="PastTime"/> for the list of past events.
 ///     <para>
 ///         This is the event counterpart to
 ///         <see cref="Posts.PostDateFormat"/>, which formats a plain
@@ -27,6 +29,11 @@ public static class EventDateFormat
     /// </summary>
     private const string ShortDate = "d. MMMM yyyy";
 
+    /// <summary>
+    ///     Date format for the list of past events, which is grouped by year.
+    /// </summary>
+    private const string DayMonth = "d. MMMM";
+
     /// <summary>
     ///     Formats the date range of an event.
     /// </summary>
@@ -54,13 +61,136 @@ public static class EventDateFormat
             (var start, null, var hasTime)
                 => Stamp(start, LongDate, hasTime),
             (var start, { } end, true) when end.Date == start.Date
-                => $"{start.ToString(LongDate, Cultures.German)}, {start.ToString("HH:mm", Cultures.German)}–{end.ToString("HH:mm", Cultures.German)} Uhr",
+                => $"{start.ToString(LongDate, Cultures.German)}, {Clock(start)}–{Clock(end)} Uhr",
             (var start, { } end, false) when end.Date == start.Date
                 => Stamp(start, LongDate, withTime: false),
             (var start, { } end, var hasTime)
                 => $"{Stamp(start, LongDate, hasTime)} – {Stamp(end, ShortDate, hasTime)}",
         };
 
+    /// <summary>
+    ///     The short month for the top band of a calendar sheet.
+    /// </summary>
+    /// <param name="value">The event's start.</param>
+    /// <returns>The German short month without its period, e.g. <c>Okt</c> or <c>März</c>.</returns>
+    /// <remarks>
+    ///     Returned in normal case; the sheet's CSS sets it in capitals. The period of the
+    ///     abbreviation (<c>Okt.</c>) is dropped because on a sheet it reads as a stray dot.
+    /// </remarks>
+    /// <seealso cref="CalendarSheet"/>
+    public static string SheetMonth(DateTime value)
+        => value.ToString("MMM", Cultures.German).TrimEnd('.');
+
+    /// <summary>
+    ///     The day of the month for the large number on a calendar sheet.
+    /// </summary>
+    /// <param name="value">The event's start.</param>
+    /// <returns>The day without a leading zero, e.g. <c>8</c>.</returns>
+    public static string SheetDay(DateTime value)
+        => value.Day.ToString(Cultures.German);
+
+    /// <summary>
+    ///     The short weekday for the bottom of a calendar sheet.
+    /// </summary>
+    /// <param name="value">The event's start.</param>
+    /// <returns>The German short weekday without its period, e.g. <c>Do</c>.</returns>
+    public static string SheetWeekday(DateTime value)
+        => value.ToString("ddd", Cultures.German).TrimEnd('.');
+
+    /// <summary>
+    ///     The time line beside a calendar sheet: what the sheet itself cannot show.
+    /// </summary>
+    /// <param name="event">The event to format.</param>
+    /// <returns>
+    ///     Depending on <see cref="Event.End"/> and <see cref="Event.HasTime"/>:
+    ///     <list type="bullet">
+    ///         <item><description>No end: <c>19:30 Uhr</c></description></item>
+    ///         <item><description>Same day: <c>19:30–21:00 Uhr</c></description></item>
+    ///         <item><description>Several days: <c>09:00 Uhr bis Sonntag, 11. Oktober 2026, 13:00 Uhr</c></description></item>
+    ///         <item><description>Several days, no time: <c>bis Sonntag, 11. Oktober 2026</c></description></item>
+    ///         <item><description>One day, no time: an empty string; the sheet says it all.</description></item>
+    ///     </list>
+    /// </returns>
+    /// <remarks>
+    ///     The sheet shows the start day only, so a multi-day event must name its last
+    ///     day here, with the weekday, as the sheet does for the first one.
+    /// </remarks>
+    public static string Span(Event @event)
+        => (@event.Start, @event.End, @event.HasTime) switch
+        {
+            (var start, { } end, var hasTime) when end.Date != start.Date
+                => (hasTime ? Clock(start) + " Uhr " : "") + "bis " + Stamp(end, LongDate, hasTime),
+            (var start, null, true)
+                => $"{Clock(start)} Uhr",
+            (var start, { } end, true)
+                => $"{Clock(start)}–{Clock(end)} Uhr",
+            _ => "",
+        };
+
+    /// <summary>
+    ///     The day column of a past event in the folded-up list on the events page.
+    /// </summary>
+    /// <param name="event">The event to format.</param>
+    /// <returns>
+    ///     Day and full month, depending on <see cref="Event.End"/>:
+    ///     <list type="bullet">
+    ///         <item><description>One day: <c>13. November</c></description></item>
+    ///         <item><description>Several days in one month: <c>8.–9. Februar</c></description></item>
+    ///         <item><description>Across a month: <c>30. Januar – 2. Februar</c></description></item>
+    ///         <item><description>Across a year: <c>30. Dezember – 2. Januar 2027</c></description></item>
+    ///     </list>
+    /// </returns>
+    /// <remarks>
+    ///     The list is grouped by the start year under its own small heading, so the
+    ///     year is only named where the end leaves that year. The weekday is left out
+    ///     to keep the column short; the time follows the title (<see cref="PastTime"/>).
+    /// </remarks>
+    public static string PastDays(Event @event)
+        => (@event.Start, @event.End) switch
+        {
+            (var start, { } end) when end.Year != start.Year
+                => $"{start.ToString(DayMonth, Cultures.German)} – {end.ToString(ShortDate, Cultures.German)}",
+            (var start, { } end) when end.Month != start.Month
+                => $"{start.ToString(DayMonth, Cultures.German)} – {end.ToString(DayMonth, Cultures.German)}",
+            (var start, { } end) when end.Day != start.Day
+                => $"{start.Day.ToString(Cultures.German)}.–{end.ToString(DayMonth, Cultures.German)}",
+            (var start, _)
+                => start.ToString(DayMonth, Cultures.German),
+        };
+
+    /// <summary>
+    ///     The time after the title of a past event in the folded-up list.
+    /// </summary>
+    /// <param name="event">The event to format.</param>
+    /// <returns>
+    ///     Depending on <see cref="Event.HasTime"/> and <see cref="Event.End"/>:
+    ///     <list type="bullet">
+    ///         <item><description>No time: an empty string; nothing is shown.</description></item>
+    ///         <item><description>No end: <c>19:00 Uhr</c></description></item>
+    ///         <item><description>Same day: <c>19:00–21:00 Uhr</c></description></item>
+    ///         <item><description>Several days: the start time only, <c>09:00 Uhr</c></description></item>
+    ///     </list>
+    /// </returns>
+    /// <remarks>
+    ///     For several days the day column already shows the span; a time range beside
+    ///     it would read as the daily hours, so only the start time is given.
+    /// </remarks>
+    public static string PastTime(Event @event)
+        => (@event.HasTime, @event.End) switch
+        {
+            (false, _) => "",
+            (true, { } end) when end.Date != @event.Start.Date => $"{Clock(@event.Start)} Uhr",
+            _ => Span(@event),
+        };
+
+    /// <summary>
+    ///     Formats the clock time of a point in time.
+    /// </summary>
+    /// <param name="value">The date and time.</param>
+    /// <returns>The time as e.g. <c>19:30</c>.</returns>
+    private static string Clock(DateTime value)
+        => value.ToString("HH:mm", Cultures.German);
+
     /// <summary>
     ///     Formats a single point in time as a date with an optional time.
     /// </summary>

Elternbeirat.Web/Features/Events/EventList.razor

@@ -21,10 +21,9 @@
 }
 else
 {
-    <p class="intro">
-        Alle Termine des Elternbeirats auf einen Blick. Sie können den Kalender auch
-        <a href="/events.ics">abonnieren</a> und in Ihrer Kalender-App automatisch
-        aktuell halten.
+    @* The page body above is the intro; the page only adds the subscribe button. *@
+    <p class="events-subscribe">
+        <a class="btn btn-secondary" href="/events.ics"><Icon Name="calendar-plus" Size="18" /> Kalender abonnieren</a>
     </p>
 
     <h2>Kommende Termine</h2>
@@ -38,41 +37,38 @@ else
         <ul class="event-list">
             @foreach (var ev in _upcomingEvents)
             {
-                <li>
-                    <a class="card-link" href="/events">
-                        <span class="event-title">@ev.Title</span>
-                        <EventDate Value="ev" />
-                        @if (!string.IsNullOrWhiteSpace(ev.Location))
-                        {
-                            <span class="event-location">@ev.Location</span>
-                        }
-                        @if (!string.IsNullOrWhiteSpace(ev.Note))
-                        {
-                            <p class="event-note">@ev.Note</p>
-                        }
-                    </a>
-                </li>
+                @* No Href: a card linking to this very page would lead nowhere. *@
+                <li><EventCard Value="ev" /></li>
             }
         </ul>
     }
 
+    @* Past events matter rarely, so they wait folded up and compact: grouped by year,
+       then day, title and (if the event has one) the time per row. *@
     @if (_pastEvents.Count > 0)
     {
-        <h2>Vergangene Termine</h2>
-        <ul class="event-list event-list-past">
-            @foreach (var ev in _pastEvents)
+        <details class="past-events disclosure">
+            <summary>Vergangene Termine anzeigen (@_pastEvents.Count)</summary>
+            @foreach (var year in PastYears)
             {
+                <h3 class="past-events-year">@year.Key</h3>
+                <ul>
+                    @foreach (var ev in year)
+                    {
+                        var time = EventDateFormat.PastTime(ev);
                         <li>
-                    <a class="card-link" href="/events">
-                        <span class="event-title">@ev.Title</span>
-                        <EventDate Value="ev" />
-                        @if (!string.IsNullOrWhiteSpace(ev.Location))
+                            <span class="past-event-date">@EventDateFormat.PastDays(ev)</span>
+                            <span class="past-event-title">
+                                @ev.Title
+                                @if (time.Length > 0)
                                 {
-                            <span class="event-location">@ev.Location</span>
+                                    <span class="past-event-time">@time</span>
                                 }
-                    </a>
+                            </span>
                         </li>
                     }
                 </ul>
             }
+        </details>
+    }
 }

Elternbeirat.Web/Features/Events/EventList.razor.cs

@@ -39,6 +39,10 @@ public partial class EventList
     // 503 this sets on the response.
     private bool _unavailable;
 
+    // Past events grouped by year for the small year headings. _pastEvents is most
+    // recent first, and GroupBy keeps that order, so the newest year comes first.
+    private IEnumerable<IGrouping<int, Event>> PastYears => _pastEvents.GroupBy(@event => @event.Start.Year);
+
     // The page body rendered from Markdown to HTML, ready to emit as a MarkupString.
     private MarkupString Body => (MarkupString)Markdown.ToHtml(_page?.Body);
 

Elternbeirat.Web/Features/Events/EventList.razor.css

@@ -1,2 +1,85 @@
-/* The .event-list card styles (including past-event styling) are shared with the
-   home-page embed and live in the global app.css. Nothing page-specific here. */
+/* The card grid (.event-list) is shared with the home-page embed and lives in the
+   global app.css; the card itself is EventCard. Only the page's own parts are here. */
+
+/* Same centred 42rem reading column as a content page (ContentPage.razor.css), so
+   every page of the site shares one column under the header. */
+h1,
+h2,
+article,
+p,
+.event-list,
+.past-events {
+    max-width: 42rem;
+    margin-inline: auto;
+}
+
+/* auto, not 0: this rule outweighs the column rule above and would otherwise pull
+   the button back to the left edge of the page. */
+.events-subscribe {
+    margin: var(--space-4) auto;
+}
+
+/* Past events: one folded-up card. Opened, a compact list grouped by year,
+   deliberately quieter than the upcoming cards above. The open/close triangle is
+   the shared .disclosure rule in app.css, the same as on the FAQ topics. */
+.past-events {
+    box-sizing: border-box;   /* padding inside the 42rem, flush with the text */
+    margin-top: var(--space-5);
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    background: var(--color-surface);
+}
+
+.past-events-year {
+    margin: var(--space-4) 0 var(--space-1);
+    color: var(--color-text-soft);
+    font-size: 0.9rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+}
+
+.past-events ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* On a phone the day sits above the title: a column beside it would leave the
+   title too little room. */
+.past-events li {
+    display: grid;
+    padding: var(--space-2) 0;
+    border-top: 1px solid var(--color-border);
+}
+
+/* From tablet width on, day and title side by side. The day column has a fixed
+   width, so every title starts on the same line; it fits the longest single day,
+   "30. September". A span across months ("30. Januar – 2. Februar") wraps after
+   the dash inside the column. Same font size for both and baseline alignment, so
+   the two texts sit on one line. */
+@media (min-width: 40rem) {
+    .past-events li {
+        grid-template-columns: 8rem 1fr;
+        column-gap: var(--space-3);
+        align-items: baseline;
+    }
+}
+
+/* Tabular digits give every day the same width, so "1." and "10." line up. */
+.past-event-date {
+    color: var(--color-text-soft);
+    font-variant-numeric: tabular-nums;
+}
+
+.past-event-title {
+    color: var(--color-text);
+}
+
+/* The time trails the title, quieter, as an addition rather than part of the name. */
+.past-event-time {
+    margin-left: var(--space-2);
+    color: var(--color-text-soft);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}

Elternbeirat.Web/Features/Faqs/FaqList.razor

@@ -27,7 +27,7 @@ else
 {
     @foreach (var topic in _topics)
     {
-        <details class="faq-topic">
+        <details class="faq-topic disclosure">
             <summary>@topic.Title</summary>
             @if (!string.IsNullOrWhiteSpace(topic.Intro))
             {

Elternbeirat.Web/Features/Faqs/FaqList.razor.css

@@ -0,0 +1,17 @@
+/* Same centred 42rem reading column as a content page (ContentPage.razor.css), so
+   every page of the site shares one column under the header. The topic cards and
+   the questions inside them live in the global app.css. */
+h1,
+article,
+p,
+.faq-topic {
+    box-sizing: border-box;   /* padding inside the 42rem, flush with the text */
+    max-width: 42rem;
+    margin-inline: auto;
+}
+
+/* The intro's last paragraph drops its margin (app.css), so the first card would
+   sit right under the text; this gives it the same air as between sections. */
+article {
+    margin-bottom: var(--space-5);
+}

Elternbeirat.Web/Features/Home/Home.razor

@@ -29,21 +29,24 @@
 
         @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. *@
+            @* As in EventCard: the calendar sheet shows the date and is hidden from
+               screen readers, who get the full date from <EventDate> instead. Visible
+               beside the sheet is only what it cannot show: the time, the end. *@
+            var span = EventDateFormat.Span(_nextEvent);
             <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>
+                    <CalendarSheet Value="_nextEvent.Start" />
                     <span class="next-event-details">
                         <span class="next-event-title">@_nextEvent.Title</span>
-                        <EventDate Value="_nextEvent" />
+                        <span class="visually-hidden"><EventDate Value="_nextEvent" /></span>
+                        @if (span.Length > 0)
+                        {
+                            <span class="next-event-meta"><Icon Name="clock" Size="16" /> @span</span>
+                        }
                         @if (!string.IsNullOrWhiteSpace(_nextEvent.Location))
                         {
-                            <span class="next-event-location"><Icon Name="map-pin" Size="16" /> @_nextEvent.Location</span>
+                            <span class="next-event-meta"><Icon Name="map-pin" Size="16" /> @_nextEvent.Location</span>
                         }
                     </span>
                 </span>

Elternbeirat.Web/Features/Home/Home.razor.cs

@@ -35,8 +35,8 @@ public partial class Home
     private HttpContext? HttpContext { get; set; }
 
     // 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.
+    // -- and for good if PocketBase fails during this request -- the static fallback
+    // heading stands, so the start page always has a title.
     private HomeIntro _intro = HomeIntro.Fallback;
 
     // The hero, the tiles and the next-event card are fixed structure of the start
@@ -46,14 +46,6 @@ public partial class Home
     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;
@@ -61,8 +53,12 @@ public partial class Home
     }
 
     // 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.
+    // page loses only the card, without pages only text and tiles. A PocketBase that
+    // is plainly down never gets this far -- the maintenance gate in Program.cs
+    // answers with maintenance.html first. These catches are the second line: the
+    // gate's health result is cached for a few seconds, so PocketBase can fail between
+    // that check and these reads. Without them that would be a 500; with them the
+    // start page stays a 200 rather than a 503 -- degraded, not broken, and rare.
     private async Task LoadPagesAsync(CancellationToken token)
     {
         try

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

@@ -90,7 +90,27 @@
 }
 
 .hero .btn:focus-visible {
-    outline-color: var(--color-on-header);
+    outline-color: var(--color-focus-inverse);
+}
+
+/* On a phone the buttons used to wrap onto a row each: two wide blocks stacked,
+   far too heavy for the top of the page. Instead they share one row in equal
+   columns -- the same buttons as on the desktop, just side by side and a little
+   tighter. Short labels ("Termine", "Kontakt") fit on one line; a longer one
+   wraps inside its button (centred) rather than pushing the other off the row. */
+@media (max-width: 40rem) {
+    .hero-actions {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
+        gap: var(--space-2);
+    }
+
+    .hero .btn {
+        justify-content: center;
+        padding: var(--space-2) var(--space-3);
+        text-align: center;
+    }
 }
 
 /* --- Next event ---------------------------------------------------------------
@@ -116,7 +136,7 @@
 /* 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-color: var(--color-focus-inverse);
     outline-offset: 3px;
 }
 
@@ -136,38 +156,6 @@
     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 */
 }
@@ -180,7 +168,9 @@
     line-height: 1.3;
 }
 
-.next-event-location {
+/* Time and place, one line each with their icon, green as on the event cards. The
+   icon belongs to Icon's own scope, so it is reached through ::deep. */
+.next-event-meta {
     display: flex;
     align-items: center;
     gap: var(--space-1);
@@ -189,6 +179,10 @@
     font-size: 0.9rem;
 }
 
+.next-event-meta ::deep .icon {
+    color: var(--color-accent-dark);
+}
+
 /* --- Tiles --------------------------------------------------------------------
    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
@@ -234,11 +228,6 @@
     color: var(--color-text);
 }
 
-.tile-link:focus-visible {
-    outline: 3px solid var(--color-focus);
-    outline-offset: 2px;
-}
-
 /* The icon in a soft round tint. */
 .tile-icon {
     flex-shrink: 0;

Elternbeirat.Web/Features/Pages/ContentPage.razor.css

@@ -0,0 +1,11 @@
+/* A content page is one reading column: its text, boxes and card grids all stop at
+   42rem (app.css). Left-aligned in the 72rem layout that column left a wide empty
+   strip on the right of a desktop screen; centred, the empty space splits evenly and
+   the page sits balanced under the header. Title and body share the column, so they
+   keep one left edge. The children inside keep margin 0 and simply fill it. */
+h1,
+article,
+p {
+    max-width: 42rem;
+    margin-inline: auto;
+}

Elternbeirat.Web/Features/Posts/PostCard.razor

@@ -0,0 +1,13 @@
+@*
+    One post as a card that links to the post: date, title, a teaser from the body
+    and "Weiterlesen". The arrow is a hint where the card leads; it does not move.
+*@
+<a class="@CssClass" href="@Href">
+    <span class="post-date"><Icon Name="calendar" Size="16" /><PostDate Value="Value.Date" /></span>
+    <span class="post-title">@Value.Title</span>
+    @if (Teaser.Length > 0)
+    {
+        <span class="post-teaser">@Teaser</span>
+    }
+    <span class="post-more">Weiterlesen <Icon Name="arrow-right" Size="16" /></span>
+</a>

Elternbeirat.Web/Features/Posts/PostCard.razor.cs

@@ -0,0 +1,46 @@
+using Elternbeirat.Contracts;
+using Elternbeirat.Web.Shared;
+using Microsoft.AspNetCore.Components;
+
+namespace Elternbeirat.Web.Features.Posts;
+
+/// <summary>
+///     Renders one post as a card linking to the post, with date, title and teaser.
+/// </summary>
+/// <remarks>
+///     Shared by the posts page and the home-page posts embed, so both show posts the
+///     same way. The teaser comes from the body (<see cref="Markdown.Teaser"/>): posts
+///     have no summary field of their own.
+/// </remarks>
+/// <seealso cref="PostDate"/>
+public partial class PostCard
+{
+    /// <summary>
+    ///     The post to show.
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    public Post Value { get; set; } = null!;
+
+    /// <summary>
+    ///     <see langword="true"/> for the large card that opens the posts page (the
+    ///     newest post); <see langword="false"/> for a regular card.
+    /// </summary>
+    [Parameter]
+    public bool Featured { get; set; }
+
+    /// <summary>
+    ///     The card's classes; the featured card adds its modifier.
+    /// </summary>
+    private string CssClass => Featured ? "post-card post-card-featured" : "post-card";
+
+    /// <summary>
+    ///     The address of the post.
+    /// </summary>
+    private string Href => $"/posts/{Value.Slug}";
+
+    /// <summary>
+    ///     The teaser text; empty if the body has no paragraph text.
+    /// </summary>
+    private string Teaser => Markdown.Teaser(Value.Body);
+}

Elternbeirat.Web/Features/Posts/PostCard.razor.css

@@ -0,0 +1,88 @@
+/* The post card: a white surface with a green stripe on the left as the eye's
+   anchor. The stripe is a border, so it follows the rounded corners. The whole card
+   is the link and fills its list cell, so the cards of a row are equally tall.
+   Hover = stronger shadow, nothing moves. */
+.post-card {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    height: 100%;
+    padding: var(--space-3) var(--space-4);
+    border-left: 4px solid var(--color-accent);
+    border-radius: var(--radius);
+    background: var(--color-bg);
+    box-shadow: var(--shadow);
+    color: var(--color-text);
+    text-decoration: none;
+    transition: box-shadow var(--transition);
+}
+
+.post-card:hover {
+    box-shadow: var(--shadow-hover);
+    color: var(--color-text);
+}
+
+/* Icon and date on one line. The icon belongs to Icon's own scope, so it is
+   reached through ::deep. */
+.post-date {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+}
+
+.post-date ::deep .icon {
+    color: var(--color-accent-dark);
+}
+
+.post-title {
+    color: var(--color-brand);
+    font-size: 1.15rem;
+    font-weight: 700;
+    line-height: 1.3;
+}
+
+/* Cut after three lines, so cards of a row stay close in height whatever the
+   editor wrote. The featured card lifts the limit (see below). */
+.post-teaser {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow: hidden;
+    font-size: 0.95rem;
+}
+
+/* margin-top: auto pushes the link line to the bottom, so it sits on one level
+   across a row of cards with teasers of different length. */
+.post-more {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    margin-top: auto;
+    padding-top: var(--space-1);
+    color: var(--color-brand);
+    font-size: 0.9rem;
+    font-weight: 700;
+}
+
+/* The newest post on the posts page: more room, a larger title and the full
+   teaser. */
+.post-card-featured {
+    padding: var(--space-4) var(--space-5);
+}
+
+.post-card-featured .post-title {
+    font-size: var(--font-size-h3);
+}
+
+@media (min-width: 48rem) {
+    .post-card-featured .post-title {
+        font-size: 1.5rem;
+    }
+}
+
+.post-card-featured .post-teaser {
+    display: block;
+    font-size: 1rem;
+}

Elternbeirat.Web/Features/Posts/PostDetail.razor

@@ -8,16 +8,39 @@
 else if (_post is not null)
 {
     <PageTitle>@_post.Title</PageTitle>
-    <nav>
-        <a href="/posts">&larr; Alle Beiträge</a>
-    </nav>
-    <article>
-        <div class="post-content">
-            <PostDate Value="_post.Date" />
-            <h2>@_post.Title</h2>
-            <div class="markdown-body">@Body</div>
-        </div>
+    @* A plain link, not a <nav>: one link is no navigation block, and an unlabelled
+       second <nav> next to the main menu would only add noise for screen readers. *@
+    <a class="btn btn-quiet" href="/posts"><Icon Name="arrow-left" Size="18" />Alle Beiträge</a>
+
+    <article class="post">
+        <header class="post-header">
+            <p class="post-meta"><Icon Name="calendar" Size="16" /><PostDate Value="_post.Date" /></p>
+            <h1>@_post.Title</h1>
+        </header>
+        <div class="markdown-body post-body">@Body</div>
     </article>
+
+    @if (_neighbors.Previous is not null || _neighbors.Next is not null)
+    {
+        @* Older post on the left, newer on the right, like a timeline. A missing side
+           leaves its cell empty, so the remaining link keeps its place. *@
+        <nav class="post-pager" aria-label="Weitere Beiträge">
+            @if (_neighbors.Previous is { } previous)
+            {
+                <a class="post-pager-link post-pager-previous" href="/posts/@previous.Slug" rel="prev">
+                    <span class="post-pager-label"><Icon Name="arrow-left" Size="16" />Vorheriger Beitrag</span>
+                    <span class="post-pager-title">@previous.Title</span>
+                </a>
+            }
+            @if (_neighbors.Next is { } next)
+            {
+                <a class="post-pager-link post-pager-next" href="/posts/@next.Slug" rel="next">
+                    <span class="post-pager-label">Nächster Beitrag<Icon Name="arrow-right" Size="16" /></span>
+                    <span class="post-pager-title">@next.Title</span>
+                </a>
+            }
+        </nav>
+    }
 }
 @* No post and not unavailable: the slug was unknown; NavigationManager.NotFound()
    already ran in OnParametersSetAsync and renders the not-found page. *@

Elternbeirat.Web/Features/Posts/PostDetail.razor.cs

@@ -32,6 +32,10 @@ public partial class PostDetail
 
     private Post? _post;
 
+    // The older and newer post for the "Vorheriger / Nächster Beitrag" links at the
+    // end; both empty until loaded or when the post stands alone.
+    private PostNeighbors _neighbors = new(null, null);
+
     // Set when the content source could not be reached or read. The markup then
     // shows a "temporarily unavailable" note instead of a not-found page, matching
     // the 503 this sets on the response.
@@ -48,6 +52,7 @@ public partial class PostDetail
             var posts = await PocketBase.GetPostsAsync(HttpContext?.RequestAborted ?? CancellationToken.None);
             _post = posts.FirstOrDefault(
                 post => string.Equals(post.Slug, Slug, StringComparison.OrdinalIgnoreCase));
+            _neighbors = PostNeighbors.Of(posts, Slug);
         }
         catch (PocketBaseUnavailableException exception)
         {

Elternbeirat.Web/Features/Posts/PostDetail.razor.css

@@ -1,15 +1,116 @@
-/* Push the whole article body down from the "all posts" link above it. Wraps the
-   date, heading and body, so scoped CSS applies (the date sits in the PostDate
-   child component and would not be reachable on its own). The date's own look
-   comes from PostDate.razor.css. */
-.post-content {
-    margin-top: 1.5rem;
+/* The article: the site's centred 42rem reading column (as on a content page,
+   ContentPage.razor.css) with generous leading, so a long post reads like a page,
+   not like a form. Everything inside follows this width -- the global 42rem cap on
+   paragraphs, lists and boxes is lifted here, so nothing stops short of the column
+   (the post's own leading makes the text a touch wider than elsewhere). */
+.post {
+    max-width: 42rem;
+    margin: var(--space-4) auto 0;
+    line-height: 1.75;
 }
 
-/* The post title is the first h2 in the content, sitting right under its date, so
-   drop the large default heading gap above it (h1..h4 carry --space-5 top margin
-   globally); date and title belong together. Scoped to :first-of-type so h2
-   subheadings inside the Markdown body keep their normal spacing. */
-.post-content h2:first-of-type {
-    margin-top: var(--space-1);
+/* The back link is an inline button, which margin: auto cannot centre. A left
+   margin of half the free space puts it on the column's left edge instead, and
+   max() keeps it at 0 once the screen is narrower than the column. */
+.btn-quiet {
+    margin-left: max(0px, (100% - 42rem) / 2);
+}
+
+.post ::deep :is(p, ul, ol, blockquote, .aufruf, .hinweis) {
+    max-width: none;
+}
+
+/* Date above the title as a quiet meta line, with the same calendar icon as on the
+   post cards. The title follows directly, so the gap between them stays small
+   (h1 carries no top margin globally). */
+.post-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    margin: 0 0 var(--space-2);
+    color: var(--color-text-soft);
+    font-size: 0.95rem;
+    font-weight: 600;
+}
+
+.post-meta ::deep .icon {
+    color: var(--color-accent-dark);
+}
+
+/* The first paragraph as the lead: larger and in the soft tone, so it reads as an
+   introduction. Pure CSS on the editor's Markdown -- if a post starts with a
+   heading or a list instead, there simply is no lead. Same text colour token as
+   the rest, so it keeps AA contrast in both schemes. */
+.post-body ::deep > p:first-child {
+    color: var(--color-text-soft);
+    font-size: 1.2rem;
+    line-height: 1.65;
+}
+
+/* Older/newer post at the end: two cards side by side, older on the left, newer on
+   the right. The grid keeps each in its column even if the other is missing. Hover
+   = border and shadow, nothing moves. */
+.post-pager {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-3);
+    max-width: 42rem;
+    margin: var(--space-6) auto 0;
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--color-border);
+}
+
+.post-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    background: var(--color-bg);
+    color: var(--color-text);
+    text-decoration: none;
+    transition: box-shadow var(--transition), border-color var(--transition);
+}
+
+.post-pager-link:hover {
+    border-color: var(--color-brand);
+    box-shadow: var(--shadow-hover);
+    color: var(--color-text);
+}
+
+.post-pager-next {
+    grid-column: 2;
+    text-align: right;
+}
+
+.post-pager-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    color: var(--color-text-soft);
+    font-size: 0.85rem;
+    font-weight: 700;
+}
+
+.post-pager-next .post-pager-label {
+    align-self: flex-end;
+}
+
+.post-pager-title {
+    color: var(--color-brand);
+    font-weight: 700;
+    line-height: 1.3;
+}
+
+/* On a phone the two cards stack: a half-width card would squeeze a long title
+   into a narrow column. Older first, as in the wide layout. */
+@media (max-width: 40rem) {
+    .post-pager {
+        grid-template-columns: 1fr;
+    }
+
+    .post-pager-next {
+        grid-column: 1;
+    }
 }

Elternbeirat.Web/Features/Posts/PostList.razor

@@ -25,15 +25,12 @@ else if (_posts.Count == 0)
 }
 else
 {
-    <ul class="post-list">
-        @foreach (var post in _posts)
+    @* The newest post (GetPostsAsync sorts newest first) opens the page as a large
+       card across the full width; the rest follow in the grid. *@
+    <ul class="post-list post-list-grid">
+        @for (var i = 0; i < _posts.Count; i++)
         {
-            <li>
-                <a class="card-link" href="@($"/posts/{post.Slug}")">
-                    <span class="post-title">@post.Title</span>
-                    <PostDate Value="post.Date" />
-                </a>
-            </li>
+            <li class="@(i == 0 ? "post-list-featured" : null)"><PostCard Value="_posts[i]" Featured="i == 0" /></li>
         }
     </ul>
 }

Elternbeirat.Web/Features/Posts/PostList.razor.css

@@ -1,2 +1,29 @@
-/* The .post-list card styles are shared with the home-page embed and live in the
-   global app.css. This page needs no extra styling of its own. */
+/* The card is PostCard and the base list grid lives in the global app.css, shared
+   with the home-page embed. Only the page's two-column layout is here: one column
+   on a phone, two from tablet width, with the newest post across both. */
+@media (min-width: 48rem) {
+    .post-list-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .post-list-featured {
+        grid-column: 1 / -1;
+    }
+}
+
+/* Same centred 42rem reading column as a content page (ContentPage.razor.css), so
+   every page of the site shares one column under the header. Two cards still fit
+   side by side in it. */
+h1,
+article,
+p,
+.post-list {
+    max-width: 42rem;
+    margin-inline: auto;
+}
+
+/* The intro's last paragraph drops its margin (app.css), so the first card would
+   sit right under the text; this gives it the same air as between sections. */
+article {
+    margin-bottom: var(--space-5);
+}

Elternbeirat.Web/Features/Posts/PostNeighbors.cs

@@ -0,0 +1,65 @@
+using Elternbeirat.Contracts;
+
+namespace Elternbeirat.Web.Features.Posts;
+
+/// <summary>
+///     The posts next to a given post in time: the one published before it and the
+///     one published after it.
+/// </summary>
+/// <param name="Previous">
+///     The older post, or <see langword="null"/> if the post is the oldest.
+/// </param>
+/// <param name="Next">
+///     The newer post, or <see langword="null"/> if the post is the newest.
+/// </param>
+/// <remarks>
+///     "Previous" and "next" follow time, as a reader moving through the news would:
+///     "Vorheriger Beitrag" is the older one, "Nächster Beitrag" the newer one. The
+///     list order of the posts page (newest first) is the other way round, which is
+///     why the direction is pinned down here instead of being left to the markup.
+/// </remarks>
+/// <seealso cref="PostDetail"/>
+public sealed record PostNeighbors(Post? Previous, Post? Next)
+{
+    /// <summary>
+    ///     Finds the neighbours of the post with the given slug.
+    /// </summary>
+    /// <param name="posts">
+    ///     All public posts, newest first, as <c>PocketBaseClient.GetPostsAsync</c>
+    ///     returns them.
+    /// </param>
+    /// <param name="slug">The slug of the post being shown.</param>
+    /// <returns>
+    ///     The older and the newer post. Both are <see langword="null"/> if the slug is
+    ///     not in the list, or if it is the only post.
+    /// </returns>
+    /// <remarks>
+    ///     The slug is compared case-insensitively, like the route lookup in
+    ///     <see cref="PostDetail"/>, so a page reached as <c>/posts/New-Board</c> still
+    ///     gets its neighbours.
+    /// </remarks>
+    /// <example>
+    ///     <code>
+    ///         // posts = [March, February, January] (newest first)
+    ///         var neighbors = PostNeighbors.Of(posts, "february");
+    ///         // neighbors.Previous is January, neighbors.Next is March
+    ///     </code>
+    /// </example>
+    public static PostNeighbors Of(IReadOnlyList<Post> posts, string slug) =>
+        IndexOf(posts, slug) is var index and >= 0
+            ? new PostNeighbors(
+                Previous: index + 1 < posts.Count ? posts[index + 1] : null,
+                Next: index > 0 ? posts[index - 1] : null)
+            : new PostNeighbors(null, null);
+
+    /// <summary>
+    ///     The position of the post with <paramref name="slug"/>, or <c>-1</c>.
+    /// </summary>
+    private static int IndexOf(IReadOnlyList<Post> posts, string slug) =>
+        posts
+            .Select((post, index) => (post, index))
+            .FirstOrDefault(
+                entry => string.Equals(entry.post.Slug, slug, StringComparison.OrdinalIgnoreCase),
+                (null!, -1))
+            .index;
+}

Elternbeirat.Web/Program.cs

@@ -2,6 +2,8 @@ using Elternbeirat.Contracts;
 using Elternbeirat.PocketBase;
 using Elternbeirat.Web.Components;
 using Elternbeirat.Web.Features.Events;
+using Elternbeirat.Web.Shared;
+using Microsoft.AspNetCore.Components.Endpoints;
 using Microsoft.AspNetCore.HttpOverrides;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -25,6 +27,10 @@ builder.Services.AddHttpClient<PocketBaseClient>(client =>
     client.Timeout = TimeSpan.FromSeconds(5);
 });
 
+// Shared by all requests, so the maintenance gate below asks PocketBase at most once
+// every few seconds rather than on every page view.
+builder.Services.AddSingleton<PocketBaseHealthCache>();
+
 var app = builder.Build();
 
 // NPM sits in front of the app and handles HTTPS. Without this line the app would
@@ -48,6 +54,37 @@ if (app.Environment.IsDevelopment() is false)
 // is down (a 503) it would wrongly show "not found" instead of our own message.
 app.UseAntiforgery();
 
+// Maintenance gate: while PocketBase is down, every page gets the static
+// maintenance.html with 503 instead of a half-empty page (the menu comes from
+// PocketBase too). Routing has already picked the endpoint at this point, so the gate
+// covers exactly the Razor component pages: /health, the calendar feeds, the static
+// assets (incl. maintenance.html and its font) are not components and answer for
+// themselves. A new endpoint is thus left alone unless it is a page. The health
+// result is cached (PocketBaseHealthCache), so the page may come back a few seconds
+// after PocketBase does. Retry-After tells well-behaved clients and crawlers when to
+// come back; no-store keeps the 503 page out of any cache.
+app.Use(async (context, next) =>
+{
+    var isPage = context.GetEndpoint()?.Metadata.GetMetadata<ComponentTypeMetadata>() is not null;
+    var services = context.RequestServices;
+    if (!isPage
+        || await services.GetRequiredService<PocketBaseHealthCache>().IsHealthyAsync(
+            services.GetRequiredService<PocketBaseClient>().IsHealthyAsync,
+            context.RequestAborted))
+    {
+        await next(context);
+        return;
+    }
+
+    context.Response.StatusCode = StatusCodes.Status503ServiceUnavailable;
+    context.Response.Headers.RetryAfter = "60";
+    context.Response.Headers.CacheControl = "no-store";
+    context.Response.ContentType = "text/html; charset=utf-8";
+    await context.Response.SendFileAsync(
+        app.Environment.WebRootFileProvider.GetFileInfo("maintenance.html"),
+        context.RequestAborted);
+});
+
 app.MapStaticAssets();
 app.MapRazorComponents<App>();
 
@@ -69,6 +106,28 @@ app.MapGet("/events.ics", async (PocketBaseClient pocketBase, CancellationToken
     return Results.Text(IcsCalendar.Build(events), "text/calendar; charset=utf-8");
 });
 
+// One event as a calendar file ("In Kalender übernehmen" on the events page): the
+// same calendar as the feed, holding just this event. Unlike the feed it does not
+// fall back to an empty calendar when PocketBase is down -- a file without the event
+// the visitor clicked would be a silent failure, so it answers 503. An unknown or
+// non-public id is a 404.
+app.MapGet("/events/{id}.ics", async (string id, PocketBaseClient pocketBase, CancellationToken token) =>
+{
+    IReadOnlyList<Event> events;
+    try
+    {
+        events = await pocketBase.GetEventsAsync(token);
+    }
+    catch (PocketBaseUnavailableException)
+    {
+        return Results.StatusCode(StatusCodes.Status503ServiceUnavailable);
+    }
+
+    return events.FirstOrDefault(@event => @event.Id == id) is { } match
+        ? Results.Text(IcsCalendar.Build([match]), "text/calendar; charset=utf-8")
+        : Results.NotFound();
+});
+
 // Status page for an outside monitor (Uptime Kuma) to check. One check tells all
 // three states apart: no reply = the app is down, 503 = the app runs but PocketBase
 // is down, 200 = both are fine. It talks to PocketBase directly, not through the

Elternbeirat.Web/Shared/IconSet.cs

@@ -12,7 +12,8 @@ namespace Elternbeirat.Web.Shared;
 ///     <para>
 ///         Source: Lucide (<c>lucide.dev</c>), ISC license; the icons derived from
 ///         Feather (<c>calendar</c>, <c>clock</c>, <c>download</c>,
-///         <c>external-link</c>, <c>help-circle</c>, <c>info</c>, <c>arrow-right</c>)
+///         <c>external-link</c>, <c>help-circle</c>, <c>info</c>, <c>arrow-right</c>,
+///         <c>arrow-left</c>)
 ///         are MIT, Copyright (c) 2013-present Cole Bemis. Both licenses only ask that
 ///         the notice travels with the copy, which this comment does. Only the inner
 ///         elements are stored; <see cref="Icon"/> supplies the shared
@@ -55,6 +56,8 @@ public static class IconSet
                 """<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>""",
             ["newspaper"] =
                 """<path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/>""",
+            ["arrow-left"] =
+                """<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>""",
             ["arrow-right"] =
                 """<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>""",
             ["external-link"] =

Elternbeirat.Web/Shared/Markdown.cs

@@ -1,6 +1,7 @@
 using System.Text;
 using System.Text.RegularExpressions;
 using Markdig;
+using Markdig.Extensions.CustomContainers;
 using Markdig.Renderers.Html;
 using Markdig.Syntax;
 using Markdig.Syntax.Inlines;
@@ -20,8 +21,8 @@ namespace Elternbeirat.Web.Shared;
 ///                 <b>Custom containers</b> (<c>::: name</c> … <c>:::</c>) turn a block
 ///                 into <c>&lt;div class="name"&gt;</c>. That is how editors use the
 ///                 design blocks (<c>kennzahlen</c>, <c>aufruf</c>, <c>kacheln</c>,
-///                 <c>hinweis</c>) without writing HTML. An unknown name just yields a
-///                 div without styling, so a typo never breaks a page.
+///                 <c>hinweis</c>, <c>team</c>) without writing HTML. An unknown name
+///                 just yields a div without styling, so a typo never breaks a page.
 ///             </description>
 ///         </item>
 ///         <item>
@@ -45,8 +46,14 @@ namespace Elternbeirat.Web.Shared;
 ///         the text around an element), but the stylesheet needs exactly that to show a
 ///         lone <c>mailto:</c> link as a button and a lone PDF link as a file card.
 ///     </para>
+///     <para>
+///         The list items of a <c>::: team</c> block become person cards
+///         (<see cref="TeamMember"/>): the initials avatar and the split into name,
+///         role and duties need the text itself, which CSS cannot read.
+///     </para>
 /// </remarks>
 /// <seealso cref="IconSet"/>
+/// <seealso cref="TeamMember"/>
 public static partial class Markdown
 {
     /// <summary>
@@ -55,6 +62,12 @@ public static partial class Markdown
     /// </summary>
     public const string LoneLinkClass = "lone-link";
 
+    /// <summary>
+    ///     The default teaser length: about two lines on a card, enough to say what a
+    ///     post is about without turning the list into a wall of text.
+    /// </summary>
+    public const int TeaserLength = 160;
+
     private static readonly MarkdownPipeline Pipeline =
         new MarkdownPipelineBuilder()
             .UseCustomContainers()
@@ -120,6 +133,53 @@ public static partial class Markdown
                 ? UpToSentenceEnd(PlainText(inline)).TrimEnd(':', ' ')
                 : "";
 
+    /// <summary>
+    ///     Builds a short plain-text teaser from a Markdown text, e.g. for a post card.
+    /// </summary>
+    /// <param name="markdown">The editor's Markdown; may be <see langword="null"/>.</param>
+    /// <param name="maxLength">
+    ///     The longest teaser, in characters, before the ellipsis. Defaults to
+    ///     <see cref="TeaserLength"/>.
+    /// </param>
+    /// <returns>
+    ///     The text of all paragraphs (including those in lists, quotes and <c>:::</c>
+    ///     blocks), with all Markdown removed and whitespace collapsed. A longer text is
+    ///     cut at the last word boundary within <paramref name="maxLength"/> and ends
+    ///     in <c>…</c>. An empty string when there is no paragraph text at all.
+    /// </returns>
+    /// <exception cref="ArgumentOutOfRangeException">
+    ///     <paramref name="maxLength"/> is zero or negative.
+    /// </exception>
+    /// <remarks>
+    ///     Headings are skipped: on a card the title already heads the teaser. Unlike
+    ///     <see cref="FirstSentence"/> the teaser does not stop at the first sentence,
+    ///     because a post often opens with a short line ("Liebe Eltern,") that says
+    ///     nothing on its own.
+    ///     <para>
+    ///         Punctuation left dangling at the cut (<c>,</c>, <c>.</c>, <c>:</c> …) is
+    ///         dropped, so the teaser never ends in <c>,…</c>.
+    ///     </para>
+    /// </remarks>
+    /// <example>
+    ///     <code>
+    ///         Markdown.Teaser("## Rückblick\n\nDer **Basar** war ein voller Erfolg.", 20);
+    ///         // "Der Basar war ein…"
+    ///     </code>
+    /// </example>
+    public static string Teaser(string? markdown, int maxLength = TeaserLength) =>
+        maxLength <= 0
+            ? throw new ArgumentOutOfRangeException(nameof(maxLength), maxLength, "The teaser needs room for at least one character.")
+            : string.IsNullOrWhiteSpace(markdown)
+                ? ""
+                : Shorten(
+                    string.Join(
+                        ' ',
+                        Parse(markdown)
+                            .Descendants<ParagraphBlock>()
+                            .Select(paragraph => paragraph.Inline is { } inline ? PlainText(inline) : "")
+                            .Where(text => text.Length > 0)),
+                    maxLength);
+
     /// <summary>
     ///     Parses Markdown with the site's pipeline, for callers that take the document
     ///     apart before rendering it (see <see cref="Render"/>).
@@ -130,22 +190,24 @@ public static partial class 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.
+    ///     Renders a document from <see cref="Parse"/> to HTML, building the team cards
+    ///     and 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);
+        Markdig.Markdown.ToHtml(MarkLoneLinks(BuildTeamCards(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>
+    /// <param name="inlines">
+    ///     The inline content, e.g. of a paragraph or heading, or a part of it.
+    /// </param>
     /// <returns>The visible text, trimmed.</returns>
-    internal static string PlainText(ContainerInline inline) =>
-        Whitespace().Replace(AppendText(new StringBuilder(), inline).ToString(), " ").Trim();
+    internal static string PlainText(IEnumerable<Inline> inlines) =>
+        Whitespace().Replace(inlines.Aggregate(new StringBuilder(), AppendText).ToString(), " ").Trim();
 
     /// <summary>
     ///     Whether an inline carries no visible content (whitespace or a line break).
@@ -192,6 +254,26 @@ public static partial class Markdown
     private static string UpToSentenceEnd(string text) =>
         SentenceEnd().Match(text) is { Success: true } end ? text[..(end.Index + 1)] : text;
 
+    /// <summary>
+    ///     Cuts a text to a word boundary and marks the cut.
+    /// </summary>
+    /// <param name="text">Plain text.</param>
+    /// <param name="maxLength">The longest result before the ellipsis.</param>
+    /// <returns>
+    ///     The text unchanged if it fits; otherwise everything up to the last space
+    ///     within <paramref name="maxLength"/>, trailing punctuation removed, plus
+    ///     <c>…</c>. A single word longer than <paramref name="maxLength"/> is cut hard.
+    /// </returns>
+    /// <remarks>
+    ///     The space is searched one character past the limit: if the text breaks
+    ///     exactly at <paramref name="maxLength"/>, the last whole word still fits.
+    /// </remarks>
+    private static string Shorten(string text, int maxLength) =>
+        text.Length <= maxLength
+            ? text
+            : (text[..(maxLength + 1)].LastIndexOf(' ') is var space and > 0 ? text[..space] : text[..maxLength])
+              .TrimEnd(' ', ',', ';', ':', '.', '-', '–') + "…";
+
     /// <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
@@ -206,6 +288,35 @@ public static partial class Markdown
     [GeneratedRegex(@"\s+")]
     private static partial Regex Whitespace();
 
+    /// <summary>
+    ///     Turns the list items of every <c>::: team</c> block into person cards.
+    /// </summary>
+    /// <param name="document">The parsed document; changed in place.</param>
+    /// <returns>The same <paramref name="document"/>, for chaining.</returns>
+    /// <remarks>
+    ///     Only lists directly in the block count; a nested list inside a card stays a
+    ///     list. <c>::: team gross</c> adds the class
+    ///     <see cref="TeamMember.LargeModifier"/> to the block, because Markdig only
+    ///     turns the block name into a class, not the words after it.
+    /// </remarks>
+    private static MarkdownDocument BuildTeamCards(MarkdownDocument document)
+    {
+        foreach (var team in document.Descendants<CustomContainer>().Where(TeamMember.IsTeam).ToList())
+        {
+            if (TeamMember.IsLarge(team))
+            {
+                team.GetAttributes().AddClass(TeamMember.LargeModifier);
+            }
+
+            foreach (var item in team.OfType<ListBlock>().SelectMany(list => list.OfType<ListItemBlock>()))
+            {
+                TeamMember.ToCard(item);
+            }
+        }
+
+        return document;
+    }
+
     /// <summary>
     ///     Adds <see cref="LoneLinkClass"/> to every paragraph that holds nothing but
     ///     one link.

Elternbeirat.Web/Shared/PocketBaseHealthCache.cs

@@ -0,0 +1,73 @@
+namespace Elternbeirat.Web.Shared;
+
+/// <summary>
+///     Remembers for a few seconds whether PocketBase answered its health check, so the
+///     maintenance gate does not probe PocketBase on every page request.
+/// </summary>
+/// <param name="time">
+///     The clock that decides when a result is stale; injected so tests can step past
+///     <see cref="Lifetime"/> without waiting.
+/// </param>
+/// <remarks>
+///     The gate in <c>Program.cs</c> asks this cache before rendering any page and serves
+///     the static <c>maintenance.html</c> with 503 while the answer is "unhealthy". A
+///     failed check is kept just as long as a passed one: while PocketBase is down every
+///     probe would otherwise wait for the connection to fail again.
+///     <para>
+///         The price of caching is a short blind spot in both directions: after
+///         PocketBase fails, pages may still render for up to <see cref="Lifetime"/> (the
+///         components' own fallbacks cover that), and after it recovers the maintenance
+///         page may stay up for as long.
+///     </para>
+///     <para>
+///         Registered as a singleton. No lock: two requests that find the result stale at
+///         the same moment both probe, and the later answer wins -- harmless, and cheaper
+///         than making every request wait on one another.
+///     </para>
+/// </remarks>
+/// <example>
+///     <code>
+///         var healthy = await cache.IsHealthyAsync(pocketBase.IsHealthyAsync, context.RequestAborted);
+///     </code>
+/// </example>
+/// <seealso cref="PocketBase.PocketBaseClient.IsHealthyAsync"/>
+public sealed class PocketBaseHealthCache(TimeProvider time)
+{
+    /// <summary>
+    ///     How long a health check result is reused before PocketBase is asked again.
+    /// </summary>
+    public static readonly TimeSpan Lifetime = TimeSpan.FromSeconds(10);
+
+    // One reference, swapped as a whole, so a reader never sees the result of one
+    // check paired with the time of another.
+    private volatile Check? _last;
+
+    /// <summary>
+    ///     Returns the last known health of PocketBase, probing again once it is older
+    ///     than <see cref="Lifetime"/>.
+    /// </summary>
+    /// <param name="probe">
+    ///     The actual check, usually <see cref="PocketBase.PocketBaseClient.IsHealthyAsync"/>.
+    ///     Passed in rather than injected because the typed client is transient and this
+    ///     cache is a singleton.
+    /// </param>
+    /// <param name="token">Cancels the probe, e.g. when the visitor goes away.</param>
+    /// <returns>
+    ///     <see langword="true"/> if PocketBase answered its last check (or answers this
+    ///     one), otherwise <see langword="false"/>.
+    /// </returns>
+    /// <exception cref="OperationCanceledException">
+    ///     <paramref name="token"/> was cancelled during a probe; nothing is cached then.
+    /// </exception>
+    public async Task<bool> IsHealthyAsync(Func<CancellationToken, Task<bool>> probe, CancellationToken token) =>
+        _last is { } last && time.GetUtcNow() - last.At < Lifetime
+            ? last.Healthy
+            : (_last = new Check(await probe(token), time.GetUtcNow())).Healthy;
+
+    /// <summary>
+    ///     One health check result and when it was taken.
+    /// </summary>
+    /// <param name="Healthy">Whether PocketBase answered.</param>
+    /// <param name="At">When the answer came in.</param>
+    private sealed record Check(bool Healthy, DateTimeOffset At);
+}

Elternbeirat.Web/Shared/TeamMember.cs

@@ -0,0 +1,380 @@
+using System.Globalization;
+using Markdig.Extensions.CustomContainers;
+using Markdig.Renderers.Html;
+using Markdig.Syntax;
+using Markdig.Syntax.Inlines;
+
+namespace Elternbeirat.Web.Shared;
+
+/// <summary>
+///     One person in a <c>::: team</c> block, read from a list item that follows the
+///     convention the board page has always used.
+/// </summary>
+/// <param name="Name">The person's name: the bold start of the item.</param>
+/// <param name="Role">
+///     The role after the name, without its parentheses, or <see langword="null"/>
+///     when the item has none (most of the "Beisitz" members).
+/// </param>
+/// <param name="Duties">
+///     The responsibilities from the italic second line, split at commas; empty when
+///     there is no such line.
+/// </param>
+/// <remarks>
+///     The convention, one list item per person:
+///     <code>
+///         - **Maik Palm** (Vorsitzender)
+///           *Schulkonferenz, Mensarat, Homepage*
+///           Mitglied im Gesamtelternbeirat.
+///     </code>
+///     The bold name becomes the card's heading, the role a chip, every duty a small
+///     tag and any further line the note. Line breaks may be hard (two spaces) or soft:
+///     editors forget the two spaces, and the card should not depend on them.
+///     <para>
+///         The board stays Markdown in the page body on purpose: a dedicated
+///         collection would be cleaner, but there is no way yet to bring a schema
+///         change to production (Gitea #39). Reading the convention costs the editors
+///         nothing they do not already write.
+///     </para>
+///     <para>
+///         An item that does not start with a bold name is not an error: it becomes a
+///         plain card showing its text as written (<see cref="PlainCardClass"/>).
+///     </para>
+/// </remarks>
+/// <seealso cref="Markdown"/>
+public sealed record TeamMember(string Name, string? Role, IReadOnlyList<string> Duties)
+{
+    /// <summary>
+    ///     The block name editors type: <c>::: team</c>.
+    /// </summary>
+    public const string ContainerName = "team";
+
+    /// <summary>
+    ///     The modifier for the chair, <c>::: team gross</c>; also the class it adds to
+    ///     the block. The cards keep the shared raster; only the role chip is
+    ///     highlighted.
+    /// </summary>
+    /// <remarks>
+    ///     A word after the block name rather than a block of its own
+    ///     (<c>::: team-gross</c>): the block stays <c>team</c>, so a typo in the
+    ///     modifier only costs the highlight, never the whole grid. <c>groß</c> is
+    ///     accepted too; <c>gross</c> is the documented form because it types the same
+    ///     on every keyboard.
+    /// </remarks>
+    public const string LargeModifier = "gross";
+
+    /// <summary>
+    ///     The class on every card, i.e. on every list item in a <c>::: team</c> block.
+    /// </summary>
+    public const string CardClass = "team-card";
+
+    /// <summary>
+    ///     The extra class on a card whose item does not follow the convention.
+    /// </summary>
+    public const string PlainCardClass = "team-card-plain";
+
+    /// <summary>
+    ///     How many avatar colours there are; <c>app.css</c> defines
+    ///     <c>--color-avatar-1</c> (brand blue) and <c>--color-avatar-2</c> (brand
+    ///     green) to match.
+    /// </summary>
+    /// <remarks>
+    ///     Only the two brand colours: more hues made the board look busy and pulled it
+    ///     away from the IGMH palette.
+    /// </remarks>
+    public const int ColorCount = 2;
+
+    /// <summary>
+    ///     FNV-1a offset basis and prime (32 bit), see <see cref="Fnv"/>.
+    /// </summary>
+    private const uint FnvOffset = 2166136261;
+
+    private const uint FnvPrime = 16777619;
+
+    /// <summary>
+    ///     The letters on the avatar, see <see cref="InitialsOf"/>.
+    /// </summary>
+    public string Initials => InitialsOf(Name);
+
+    /// <summary>
+    ///     The avatar colour, from <c>1</c> to <see cref="ColorCount"/>, see
+    ///     <see cref="ColorOf"/>.
+    /// </summary>
+    public int Color => ColorOf(Name);
+
+    /// <summary>
+    ///     Builds the initials shown on a person's avatar.
+    /// </summary>
+    /// <param name="name">The person's name.</param>
+    /// <returns>
+    ///     The first letter of the first and of the last word, upper case; one letter
+    ///     for a single word; an empty string when the name holds no letter at all.
+    /// </returns>
+    /// <remarks>
+    ///     A double name counts as one word, so it adds one letter, not two: two
+    ///     letters are what fits the circle, and they are what people expect from a
+    ///     name like <c>Reger-Stilgenbauer</c>. Letters outside A–Z (<c>Ö</c>,
+    ///     <c>Ş</c>) are kept as they are, and leading punctuation is skipped.
+    /// </remarks>
+    /// <example>
+    ///     <code>
+    ///         TeamMember.InitialsOf("Jenny Reger-Stilgenbauer"); // "JR"
+    ///         TeamMember.InitialsOf("Özlem Ünal");               // "ÖÜ"
+    ///         TeamMember.InitialsOf("Isabell");                  // "I"
+    ///     </code>
+    /// </example>
+    public static string InitialsOf(string name) =>
+        name.Split((char[]?)null, StringSplitOptions.RemoveEmptyEntries) switch
+        {
+            [] => "",
+            [var only] => Initial(only),
+            [var first, .., var last] => Initial(first) + Initial(last),
+        };
+
+    /// <summary>
+    ///     Picks a person's avatar colour from the name.
+    /// </summary>
+    /// <param name="name">The person's name.</param>
+    /// <returns>A number from <c>1</c> to <see cref="ColorCount"/>.</returns>
+    /// <remarks>
+    ///     The same name always gets the same colour, on every request and after every
+    ///     restart, so a person does not change colour between visits. That is why this
+    ///     is a fixed hash (FNV-1a) and not <see cref="string.GetHashCode()"/>, which
+    ///     .NET randomises per process. Surrounding whitespace does not count.
+    ///     <para>
+    ///         FNV-1a alone spreads short names badly, so the MurmurHash3 finaliser
+    ///         (<see cref="Mix"/>) stirs all bits first. The colour is then taken from
+    ///         the <b>high</b> bits (multiply by <see cref="ColorCount"/>, keep the top
+    ///         32 bits) rather than a remainder, which would read only the low bits:
+    ///         with two colours that put eight of the ten board members on the same
+    ///         one.
+    ///     </para>
+    /// </remarks>
+    public static int ColorOf(string name) =>
+        (int)(((ulong)Mix(Fnv(name.Trim())) * ColorCount) >> 32) + 1;
+
+    /// <summary>
+    ///     Reads a person from the first paragraph of a list item.
+    /// </summary>
+    /// <param name="paragraph">The paragraph to read; not changed.</param>
+    /// <returns>
+    ///     The person and the inlines that form the note (everything after the name
+    ///     line and, if present, the duties line; possibly empty), or
+    ///     <see langword="null"/> when the paragraph does not start with a bold name.
+    /// </returns>
+    /// <remarks>
+    ///     The duties line is only recognised when it is nothing but one italic span;
+    ///     any other second line is part of the note, so no text is lost.
+    /// </remarks>
+    internal static (TeamMember Member, Inline[] Note)? Read(ParagraphBlock paragraph) =>
+        Lines(paragraph).ToArray() is [var head, .. var rest]
+        && Content(head) is [EmphasisInline { DelimiterCount: 2 } name, .. var role]
+        && Markdown.PlainText(name) is { Length: > 0 } nameText
+            ? rest is [var second, .. var after] && Content(second) is [EmphasisInline { DelimiterCount: 1 } duties]
+                ? (new TeamMember(nameText, RoleOf(role), DutiesOf(duties)), [.. after.SelectMany(line => line)])
+                : (new TeamMember(nameText, RoleOf(role), []), [.. rest.SelectMany(line => line)])
+            : null;
+
+    /// <summary>
+    ///     Turns one list item of a <c>::: team</c> block into a person card.
+    /// </summary>
+    /// <param name="item">The list item; changed in place.</param>
+    /// <remarks>
+    ///     The first paragraph is rebuilt from new inlines: raw HTML inlines for the
+    ///     tags and literal inlines for the text, so Markdig escapes everything the
+    ///     editor wrote. The note keeps its original inlines, so links and emphasis in it
+    ///     still render. Any further blocks in the item stay untouched below.
+    /// </remarks>
+    internal static void ToCard(ListItemBlock item)
+    {
+        var attributes = item.GetAttributes();
+        attributes.AddClass(CardClass);
+
+        if (item.FirstOrDefault() is ParagraphBlock { Inline: not null } paragraph && Read(paragraph) is { } card)
+        {
+            foreach (var inline in card.Note)
+            {
+                inline.Remove();
+            }
+
+            paragraph.Inline = card.Member.Head()
+                .Concat(card.Note.Length > 0 ? [Open("span", "team-note"), .. card.Note, Close("span")] : [])
+                .Aggregate(new ContainerInline(), (container, inline) => container.AppendChild(inline));
+        }
+        else
+        {
+            attributes.AddClass(PlainCardClass);
+        }
+    }
+
+    /// <summary>
+    ///     Whether a <c>:::</c> block is a team block.
+    /// </summary>
+    /// <param name="container">The block to inspect.</param>
+    /// <returns><see langword="true"/> for <c>::: team</c>, with or without modifier.</returns>
+    internal static bool IsTeam(CustomContainer container) =>
+        string.Equals(container.Info, ContainerName, StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    ///     Whether a team block asks for the chair highlight (<c>::: team gross</c>).
+    /// </summary>
+    /// <param name="container">The team block.</param>
+    /// <returns>
+    ///     <see langword="true"/> when one of the words after the name is
+    ///     <c>gross</c> or <c>groß</c>, in any case.
+    /// </returns>
+    internal static bool IsLarge(CustomContainer container) =>
+        (container.Arguments ?? "")
+            .Split((char[]?)null, StringSplitOptions.RemoveEmptyEntries)
+            .Any(word => word.Equals(LargeModifier, StringComparison.OrdinalIgnoreCase)
+                         || word.Equals("groß", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>
+    ///     The card's head: avatar, name, role chip and duty tags, as inlines.
+    /// </summary>
+    /// <returns>The inlines, in reading order; missing parts are left out.</returns>
+    /// <remarks>
+    ///     The avatar is hidden from screen readers: it only repeats the name next to
+    ///     it.
+    /// </remarks>
+    private Inline[] Head() =>
+    [
+        .. Initials is { Length: > 0 } initials
+            ? [Open("span", $"team-avatar team-avatar-{Color.ToString(CultureInfo.InvariantCulture)}", " aria-hidden=\"true\""), new LiteralInline(initials), Close("span")]
+            : Array.Empty<Inline>(),
+        .. Element("team-name", Name, "strong"),
+        .. Role is { } role ? Element("team-role", role) : [],
+        .. Duties.Count > 0
+            ? [Open("span", "team-duties"), .. Duties.SelectMany(Duty), Close("span")]
+            : Array.Empty<Inline>(),
+    ];
+
+    /// <summary>
+    ///     The 32-bit FNV-1a hash of a text's UTF-16 code units.
+    /// </summary>
+    /// <param name="text">The text.</param>
+    /// <returns>The hash.</returns>
+    private static uint Fnv(string text) =>
+        unchecked(text.Aggregate(FnvOffset, (hash, letter) => (hash ^ letter) * FnvPrime));
+
+    /// <summary>
+    ///     The MurmurHash3 finaliser (<c>fmix32</c>): spreads every input bit over all
+    ///     output bits.
+    /// </summary>
+    /// <param name="hash">The hash to mix.</param>
+    /// <returns>The mixed hash.</returns>
+    private static uint Mix(uint hash) =>
+        unchecked(XorShift(XorShift(XorShift(hash, 16) * 0x85EBCA6B, 13) * 0xC2B2AE35, 16));
+
+    /// <summary>
+    ///     Folds the high bits of a value into its low bits.
+    /// </summary>
+    /// <param name="value">The value.</param>
+    /// <param name="shift">How far to shift right before the XOR.</param>
+    /// <returns><paramref name="value"/> XOR <paramref name="value"/> shifted right.</returns>
+    private static uint XorShift(uint value, int shift) => value ^ (value >> shift);
+
+    /// <summary>
+    ///     One duty tag, led by a space so screen readers keep the tags apart.
+    /// </summary>
+    /// <param name="duty">The duty.</param>
+    /// <returns>The space and the tag.</returns>
+    private static Inline[] Duty(string duty) =>
+        [new LiteralInline(" "), .. Element("team-duty", duty)];
+
+    /// <summary>
+    ///     An element with escaped text inside.
+    /// </summary>
+    /// <param name="classes">The value of the class attribute; written as is.</param>
+    /// <param name="text">The text; escaped by Markdig on rendering.</param>
+    /// <param name="tag">The element name.</param>
+    /// <returns>Opening tag, text and closing tag.</returns>
+    private static Inline[] Element(string classes, string text, string tag = "span") =>
+        [Open(tag, classes), new LiteralInline(text), Close(tag)];
+
+    /// <summary>
+    ///     An opening tag with a class, as a raw HTML inline.
+    /// </summary>
+    /// <param name="tag">The element name.</param>
+    /// <param name="classes">The value of the class attribute; written as is.</param>
+    /// <param name="attributes">
+    ///     Further attributes, written as is after the class, with a leading space.
+    /// </param>
+    /// <returns>The tag.</returns>
+    /// <remarks>
+    ///     Only ever called with constants from this class, never with editor text:
+    ///     nothing here is escaped.
+    /// </remarks>
+    private static HtmlInline Open(string tag, string classes, string attributes = "") =>
+        new($"<{tag} class=\"{classes}\"{attributes}>");
+
+    /// <summary>
+    ///     A closing tag, as a raw HTML inline.
+    /// </summary>
+    /// <param name="tag">The element name.</param>
+    /// <returns>The tag.</returns>
+    private static HtmlInline Close(string tag) => new($"</{tag}>");
+
+    /// <summary>
+    ///     The first letter of a word, upper case.
+    /// </summary>
+    /// <param name="word">One word of a name.</param>
+    /// <returns>The letter, or an empty string if the word has none.</returns>
+    private static string Initial(string word) =>
+        word.FirstOrDefault(char.IsLetter) is var letter and not '\0'
+            ? letter.ToString().ToUpper(Cultures.German)
+            : "";
+
+    /// <summary>
+    ///     The text after the name, without separators and parentheses.
+    /// </summary>
+    /// <param name="inlines">The inlines after the bold name on the first line.</param>
+    /// <returns>The role, or <see langword="null"/> if nothing is left.</returns>
+    private static string? RoleOf(IEnumerable<Inline> inlines) =>
+        Markdown.PlainText(inlines).Trim(' ', ',', ':', ';', '-', '–') is var text
+        && (text.StartsWith('(') && text.EndsWith(')') ? text[1..^1].Trim() : text) is { Length: > 0 } role
+            ? role
+            : null;
+
+    /// <summary>
+    ///     Splits the italic duties line at its commas.
+    /// </summary>
+    /// <param name="duties">The italic span.</param>
+    /// <returns>The duties, trimmed, without empty entries.</returns>
+    private static string[] DutiesOf(EmphasisInline duties) =>
+        Markdown.PlainText(duties).Split(',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+    /// <summary>
+    ///     The inlines of a line that carry content: no whitespace, no line break.
+    /// </summary>
+    /// <param name="line">One line from <see cref="Lines"/>.</param>
+    /// <returns>The content inlines, in order.</returns>
+    private static Inline[] Content(IEnumerable<Inline> line) =>
+        [.. line.Where(inline => !Markdown.IsBlank(inline))];
+
+    /// <summary>
+    ///     Splits a paragraph's inlines into lines.
+    /// </summary>
+    /// <param name="paragraph">The paragraph.</param>
+    /// <returns>
+    ///     The lines; each keeps the line break that ends it, so the note can be moved
+    ///     with its breaks intact.
+    /// </returns>
+    private static IEnumerable<List<Inline>> Lines(ParagraphBlock paragraph)
+    {
+        var line = new List<Inline>();
+        foreach (var inline in paragraph.Inline?.ToList() ?? [])
+        {
+            line.Add(inline);
+            if (inline is LineBreakInline)
+            {
+                yield return line;
+                line = [];
+            }
+        }
+
+        if (line.Count > 0)
+        {
+            yield return line;
+        }
+    }
+}

Elternbeirat.Web/wwwroot/app.css

@@ -11,20 +11,22 @@
     --color-brand-dark: #1f5477;
     --color-brand-tint: #eaf3f9;
 
-    /* The header bar's background: the IGMH blue at full strength. Its own token
-       (not --color-brand) both because it only ever carries white text (so it needs
-       no darkening) and because it must stay a deep blue in dark mode, where
-       --color-brand is lightened for text/links. */
-    --color-header: #328fc6;
+    /* The header bar's background: the IGMH blue, eased one step deeper. The
+       original #328fc6 carries white menu text at only 3.6:1, below AA for normal
+       text; #2a77a6 is the same hue at 4.9:1. Its own token (not --color-brand)
+       because it only ever carries white text and must stay a deep blue in dark
+       mode, where --color-brand is lightened for text/links. */
+    --color-header: #2a77a6;
 
-    /* Text and menu states on the header. White text, and two translucent white
-       washes for the menu pills: they lighten whatever part of the gradient sits
-       behind a link, so one value works from the blue end to the green end. The
-       active pill is the stronger one, so "where am I" outranks "where is the
-       mouse". */
+    /* Text and menu states on the header. White text, and two translucent dark
+       washes for the menu pills: they deepen whatever part of the gradient sits
+       behind a link, so one value works from the blue end to the green end and the
+       white text gains contrast instead of losing it (a white wash dropped the
+       active pill to 2.7:1). The active pill is the stronger one, so "where am I"
+       outranks "where is the mouse". */
     --color-on-header: #fff;
-    --color-nav-hover: rgba(255, 255, 255, 0.12);
-    --color-nav-active: rgba(255, 255, 255, 0.2);
+    --color-nav-hover: rgba(0, 0, 0, 0.12);
+    --color-nav-active: rgba(0, 0, 0, 0.2);
 
     /* Footer: a dark brand blue, so the page visibly ends there. Light text in two
        steps (headings and the name brighter, links softer); both stay >= 7:1 on the
@@ -54,6 +56,11 @@
        not --color-accent, so white text stays readable across the whole sweep. */
     --gradient-brand: linear-gradient(135deg, var(--color-header) 0%, #3a7a3e 100%);
 
+    /* The month band of the calendar sheet (CalendarSheet): the deep green of the
+       gradient's end, because it carries small white text -- on --color-accent that
+       would fall below AA. Same 5.2:1 as in the gradient. */
+    --color-calendar-band: #3a7a3e;
+
     /* Buttons in editor content (a lone mail link, links in an "aufruf" box): a
        filled blue with white text. Own tokens, not --color-brand, because in dark
        mode --color-brand turns light for link text, and white on that light blue
@@ -69,11 +76,27 @@
     --color-button-light-hover: #eaf3f9;
     --color-on-button-light: #1f5477;
 
+    /* Initials avatars on the person cards (::: team, see TeamMember.cs): only the
+       two brand colours, blue and green tint, so the board stays in the IGMH palette.
+       The colour is picked from the name, so it means nothing -- it only helps tell
+       the cards apart. The tints follow their tokens into dark mode; the green text
+       needs its own shade, because --color-accent-dark is too light for small text
+       on the tint (3.6:1). Blue 7.2:1, green 5.9:1. */
+    --color-avatar-1: var(--color-brand-tint);
+    --color-on-avatar-1: var(--color-brand-dark);
+    --color-avatar-2: var(--color-accent-tint);
+    --color-on-avatar-2: #2f6b33;
+
     /* 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;
 
+    /* The focus ring on the dark brand surfaces (header, hero gradient, footer),
+       where the dark ring above would vanish: white in both schemes, >= 4.9:1 on
+       every one of them. */
+    --color-focus-inverse: #fff;
+
     /* 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;
@@ -131,6 +154,28 @@
        because heavy letters at large sizes otherwise look spaced out. */
     --font-weight-heading: 800;
     --letter-spacing-heading: -0.015em;
+
+    /* WCAG AA check of the colour pairs, light / dark (computed, October 2026).
+       Text needs 4.5:1, large text and focus rings/graphics 3:1.
+         text on card / page ............... 15.9 / 6.2    14.6 / 7.2
+         soft text on card / page .......... 7.5 / 6.2     6.9 / 7.2
+         soft text on green / blue tint .... 6.8 / 5.6     6.6 / 5.7
+         link (brand) on card / page ....... 5.4 / 7.5     5.0 / 8.7
+         link on green / blue tint ......... 5.0 / 6.7     4.8 / 6.9
+         heading on card / page ............ 5.4 / 9.3     5.0 / 10.9
+         white on header / gradient green .. 4.9 / 5.5     5.2 / 6.4
+         white on menu pill hover / active . 6.0 / 6.6     6.9 / 7.6
+         footer heading / link on footer ... 10.4 / 10.5   7.4 / 6.9
+         white on button / button hover .... 5.4 / 5.5     8.1 / 8.1
+         light button text ................. 8.1 / 9.7    (hover 7.2 / 8.3)
+         white on calendar band ............ 5.2 / 6.4
+         avatar blue / green ............... 7.2 / 8.6     5.9 / 6.7
+         key figure / caption on card ...... 5.4 / 7.5     5.0 / 6.9
+         focus ring on page / card ......... 7.5 / 11.0    8.1 / 9.4
+         white ring on header / footer ..... 4.9 / 5.5     11.4 / 16.6
+         green markers on card (graphic) ... 3.8 / 7.5
+       All pass. Exempt as pure decoration: the light green --color-accent (card
+       stripes, heading bars, the active-menu stroke), which never carries text. */
 }
 
 /* Dark mode: follows the visitor's OS setting automatically (prefers-color-scheme).
@@ -148,7 +193,8 @@
         --color-brand-dark: #a3d5f4;   /* hover goes lighter, not darker, on dark */
         --color-brand-tint: #223038;
 
-        --color-header: #266f9c;       /* the IGMH blue eased down, to sit calmly on dark */
+        --color-header: #266f9c;       /* the IGMH blue eased down, to sit calmly on
+                                          dark; white on it 5.5:1 */
 
         --color-footer: #10202e;       /* a deep night blue: darker than the page, so
                                           the band still reads as the page's end */
@@ -165,6 +211,7 @@
                                           yellow would glare on the dark page */
 
         --gradient-brand: linear-gradient(135deg, var(--color-header) 0%, #2f6b33 100%);
+        --color-calendar-band: #2f6b33; /* the gradient's dark-mode green, 6.4:1 with white */
 
         --color-button: #266f9c;       /* the header blue: deep enough for white
                                           text, calm on the dark page */
@@ -175,6 +222,10 @@
         --color-button-light-hover: #d3dee6;
         --color-on-button-light: #1a3d57; /* 9:1 on the eased white */
 
+        /* Avatar green text: the brightened accent, 6.7:1 on the dark green tint
+           (the blue pair follows its tokens, 8.6:1). */
+        --color-on-avatar-2: var(--color-accent);
+
         --color-focus: #a3d5f4;        /* light blue: a dark ring would vanish here */
 
         --color-heading: #c9ced6;      /* soft white, kept a step brighter than the
@@ -289,6 +340,76 @@ h1:focus {
     outline: none;
 }
 
+/* Keyboard focus, one look for the whole site: a thick ring in --color-focus with a
+   little air between ring and element, so it never melts into a card's border or a
+   button's fill. :focus-visible, not :focus -- the ring shows for keyboard users
+   and stays away after a mouse click. Covers every focusable thing a page has:
+   links (and with them every card, which is one big link), buttons, the <summary>
+   of each disclosure, form fields and anything made focusable with tabindex. Dark
+   brand surfaces (header, hero, footer) switch the colour to
+   --color-focus-inverse.
+   tabindex="-1" is left out: such an element is never reached with Tab, only
+   focused by code -- the h1 by FocusOnNavigate on every page load, <main> by the
+   skip link. Chromium counts that as :focus-visible, and since this rule outweighs
+   h1:focus / main:focus below, the page title would otherwise get a ring. */
+:is(a, button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
+    outline: 3px solid var(--color-focus);
+    outline-offset: 2px;
+}
+
+/* <main> takes focus from the skip link (tabindex="-1") only so the next Tab
+   continues inside the content; a ring around the whole page would just be noise. */
+main:focus {
+    outline: none;
+}
+
+/* Skip link: the first thing on every page, so keyboard and screen-reader users
+   can jump past the header menu straight to the content. Off screen until it gets
+   focus, then it drops in at the top left over the sticky header -- a link that
+   is only hidden visually stays in the tab order, display:none would remove it. */
+.skip-link {
+    position: absolute;
+    top: var(--space-2);
+    left: var(--space-2);
+    z-index: 100;
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-sm);
+    background: var(--color-button-light);
+    box-shadow: var(--shadow-lg);
+    color: var(--color-on-button-light);
+    font-weight: 700;
+    text-decoration: none;
+    transform: translateY(-200%);
+}
+
+/* It lands on the header, so it takes the light button look and the white ring
+   of the dark brand surfaces. Shown instantly, no transition: it is a jump aid,
+   not an effect. */
+.skip-link:focus {
+    transform: none;
+    outline-color: var(--color-focus-inverse);
+}
+
+.skip-link:hover {
+    color: var(--color-on-button-light);
+}
+
+/* Text for screen readers only: off screen visually, still read aloud. For places
+   where the visible form is decoration (the calendar sheet) and the spoken form
+   must carry the full information. Not display:none -- that hides it from screen
+   readers too. */
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}
+
 /* Icons (Shared/Icon.razor) sit inline next to text: nudged down to line up with the
    letters instead of the baseline, and never squeezed when they share a flex row
    with a long label. */
@@ -316,11 +437,6 @@ h1:focus {
                 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);
@@ -345,6 +461,21 @@ h1:focus {
     color: var(--color-brand);
 }
 
+/* Quiet = no frame at all, just the brand-blue label; hover lays the blue tint
+   behind it. For a way back ("Alle Beiträge") that should be easy to find but not
+   compete with the page's content. The negative inline margin lines the label up
+   with the text below while the hover tint still gets its padding. */
+.btn-quiet {
+    margin-inline: calc(-1 * var(--space-3));
+    padding-inline: var(--space-3);
+    color: var(--color-brand);
+}
+
+.btn-quiet: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
@@ -366,6 +497,12 @@ h1:focus {
     background: var(--color-nav-hover);
 }
 
+/* The dark default ring would vanish on the blue header (2.3:1); white stands out
+   on the whole gradient. */
+.main-nav a:focus-visible {
+    outline-color: var(--color-focus-inverse);
+}
+
 /* NavLink adds .active to the current route's link: a stronger pill plus a short
    green stroke under the text mark where the visitor is. The stroke is drawn by
    ::after, not a border, so it follows the text width inside the rounded pill. */
@@ -384,28 +521,27 @@ h1:focus {
     background: var(--color-accent);
 }
 
-/* Mobile: the stacked links in the open menu become full-width rows with a
-   rounded highlight instead of pills, and the green stroke shrinks to a short
-   mark at the start, so a long row does not get a long line. Same global
-   placement, same NavLink reason as above. */
+/* Mobile: the open menu stacks the links centred, each as wide as its text -- so
+   they stay the same pills as on the desktop, with the stroke under the whole word.
+   Only taller, for a comfortable tap target; the stroke moves up with the extra
+   padding so it still sits right under the text, not at the pill's edge. Same
+   global placement, same NavLink reason as above. */
 @media (max-width: 40rem) {
     .main-nav a {
         padding: 0.6rem var(--space-3);
-        border-radius: var(--radius-sm);
     }
 
     .main-nav a.active::after {
-        right: auto;
-        width: 1.5rem;
+        bottom: 0.55rem;
     }
 }
 
-/* --- Shared card styles for content lists --------------------------------------
-   Posts, events and FAQs appear both on their own page (PostList/EventList/
-   FaqList) AND embedded on the home page (the *Embed components), with the same
-   class names. These rules live here (global) so both places share one look
-   instead of duplicating the CSS per component. The card look: a white surface
-   lifted off the tinted page background with a soft shadow and a gentle hover. */
+/* --- Lists of post and event cards ------------------------------------------------
+   Posts and events appear both on their own page (PostList/EventList) AND embedded
+   on the home page (the *Embed components). The cards themselves are components
+   (PostCard, EventCard) with their own scoped styles; only the list around them is
+   shared here: no bullets, one column with even gaps. A page may widen the grid
+   (the posts page goes to two columns). */
 
 .post-list,
 .event-list {
@@ -416,29 +552,6 @@ h1:focus {
     gap: var(--space-3);
 }
 
-.post-list li,
-.event-list li {
-    background: var(--color-bg);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow);
-    transition: box-shadow var(--transition);
-}
-
-.post-list li:hover,
-.event-list li:hover {
-    box-shadow: var(--shadow-hover);
-}
-
-/* The whole card is one link. The <a> fills the card and carries the padding (so
-   the entire surface is clickable, not just the text), and resets link colour and
-   underline so the content inside -- title, date, location -- keeps its own look. */
-.card-link {
-    display: block;
-    padding: var(--space-3) var(--space-4);
-    color: inherit;
-    text-decoration: none;
-}
-
 /* FAQ topics: each is a collapsible card. Its summary is the topic heading; open it
    to reveal the optional intro and the questions (themselves collapsible .faq-item
    cards). The topic marker is a rotating triangle, distinct from the +/- on the
@@ -456,7 +569,10 @@ h1:focus {
     box-shadow: var(--shadow-hover);
 }
 
-.faq-topic > summary {
+/* A <details> with class "disclosure": the browser's own marker is replaced by a
+   triangle that turns down when open. Shared by the FAQ topics and the past events,
+   so "click to open" looks the same everywhere. */
+.disclosure > summary {
     cursor: pointer;
     font-size: 1.15rem;
     font-weight: 600;
@@ -467,17 +583,17 @@ h1:focus {
     gap: var(--space-2);
 }
 
-.faq-topic > summary::-webkit-details-marker {
+.disclosure > summary::-webkit-details-marker {
     display: none;
 }
 
-.faq-topic > summary::before {
+.disclosure > summary::before {
     content: "▸";
     color: var(--color-accent-dark);
     font-size: 0.9rem;
 }
 
-.faq-topic[open] > summary::before {
+.disclosure[open] > summary::before {
     content: "▾";
 }
 
@@ -491,57 +607,6 @@ h1:focus {
     color: var(--color-text-soft);
 }
 
-/* Post and event cards are built the same way, so they read as one style on the
-   home page where both appear: the title leads in the brand colour (the whole card
-   is the link, so the title itself is plain text), the date sits quietly beneath. */
-.post-title,
-.event-title {
-    display: block;
-    font-size: 1.15rem;
-    font-weight: 600;
-    color: var(--color-brand);
-}
-
-/* The date's small, softened look comes from PostDate.razor.css / EventDate; here
-   only the shared spacing: nudge it down from the title above. */
-.post-list time,
-.event-list time {
-    margin-top: var(--space-1);
-}
-
-/* The location sits on its own quiet line beneath the date. */
-.event-location {
-    display: block;
-    margin-top: var(--space-1);
-    color: var(--color-text-soft);
-}
-
-.event-note {
-    margin: var(--space-2) 0 0;
-    color: var(--color-text);
-}
-
-/* Past events (only on the full events page): same cards, quieter and flat. */
-.event-list-past li {
-    box-shadow: none;
-    border: 1px solid var(--color-border);
-    background: var(--color-surface);
-}
-
-.event-list-past li:hover {
-    box-shadow: none;
-}
-
-.event-list-past time {
-    color: var(--color-text-soft);
-    font-weight: 400;
-}
-
-.event-list-past .event-title {
-    font-weight: 400;
-    color: var(--color-text-soft);
-}
-
 /* FAQ: each question is an expandable card with an accent +/– marker. */
 .faq-item {
     background: var(--color-bg);
@@ -841,24 +906,39 @@ h1:focus {
     mask: var(--icon-info) center / contain no-repeat;
 }
 
-/* ::: kacheln and ::: kennzahlen -- a list laid out as a grid of cards. auto-fill
-   with a minimum width gives as many columns as fit (one on a phone) without any
-   breakpoint. */
+/* ::: kacheln and ::: kennzahlen -- a list laid out as a grid of cards. They keep
+   the 42rem reading column like the text and the other boxes: one calm left and
+   right edge down the page instead of blocks of three different widths. */
 .markdown-body :is(.kacheln, .kennzahlen) > ul {
     display: grid;
     gap: var(--space-3);
-    max-width: none;
+    box-sizing: border-box;
+    max-width: 42rem;
     margin: 0 0 var(--space-4);
     padding: 0;
     list-style: none;
 }
 
+/* Kacheln: auto-fit with a 15rem minimum gives exactly two columns in the 42rem
+   (three would need 46rem), so four tiles sit as 2 x 2. Below ~31rem it drops to
+   one column -- two would squeeze a long word like "Chancengerechtigkeit" out of
+   its card. min() keeps a single card from overflowing a very narrow screen. */
 .markdown-body .kacheln > ul {
-    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+}
+
+/* Kennzahlen: one row of equal columns where there is room. auto-fill used to
+   leave empty tracks on the right on a wide screen and one figure alone in a second
+   row on a phone. A narrow column switches to stacked rows instead (below). The
+   block is its own container, so the switch follows the width the figures actually
+   get, not the screen. */
+.markdown-body .kennzahlen {
+    container-type: inline-size;
 }
 
 .markdown-body .kennzahlen > ul {
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
 }
 
 /* The grid gap does the spacing; the list's own item spacing would only push the
@@ -882,24 +962,215 @@ h1:focus {
     color: var(--color-heading);
 }
 
+/* On a phone the tiles keep their card but tighten up, so four of them stacked
+   do not turn into a long scroll. */
+@media (max-width: 40rem) {
+    .markdown-body .kacheln > ul {
+        gap: var(--space-2);
+    }
+
+    .markdown-body .kacheln li {
+        padding: var(--space-2) var(--space-3);
+    }
+
+    .markdown-body .kacheln li > strong:first-child {
+        margin-bottom: 0;
+    }
+}
+
 /* Kennzahlen: "- **seit 1975** Gründung" -- the bold part becomes a big figure,
-   the rest a small caption beneath. Brand blue for the figure, not the green: the
-   green does not reach 3:1 on its own tint, the blue does. */
+   the rest a small caption beneath. A white card with a green stroke on top, not
+   a green wash: a ::: hinweis often follows right below, and two green tints in a
+   row ran together into one green patch. Brand blue for the figure: 5.4:1 on the
+   card (5.0 dark), where the green would not reach 3:1. */
 .markdown-body .kennzahlen li {
-    padding: var(--space-4) var(--space-3);
+    padding: var(--space-4) var(--space-2);
+    border-top: 4px solid var(--color-accent);
     border-radius: var(--radius);
-    background: var(--color-accent-tint);
+    background: var(--color-bg);
+    box-shadow: var(--shadow);
     color: var(--color-text-soft);
     text-align: center;
 }
 
+/* The figure scales with the block (cqi, not vw): 2rem in the full 42rem, a little
+   less just above the switch to rows. nowrap: "seit 1975" split over two lines
+   reads as two figures. */
 .markdown-body .kennzahlen li > strong:first-child {
     display: block;
     color: var(--color-brand);
-    font-size: 2rem;
+    font-size: clamp(1.5rem, 4.75cqi, 2rem);
     font-weight: var(--font-weight-heading);
     letter-spacing: var(--letter-spacing-heading);
     line-height: 1.15;
+    white-space: nowrap;
+}
+
+/* Below 30rem three columns get under 10rem each: the figure no longer fits on one
+   line and a caption like "im Einsatz für die IGMH" stacks up word by word. So the
+   figures become rows of one card -- figure left, caption beside it, a thin line
+   between rows. Subgrid gives every row the same figure column, so the captions
+   line up whatever the figure's length. */
+@container (max-width: 30rem) {
+    .markdown-body .kennzahlen > ul {
+        grid-auto-flow: row;
+        grid-template-columns: max-content 1fr;
+        gap: 0;
+        border-top: 4px solid var(--color-accent);
+        border-radius: var(--radius);
+        background: var(--color-bg);
+        box-shadow: var(--shadow);
+    }
+
+    .markdown-body .kennzahlen li {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+        column-gap: var(--space-3);
+        align-items: baseline;
+        padding: var(--space-2) var(--space-3);
+        border-top: none;
+        border-radius: 0;
+        background: none;
+        box-shadow: none;
+        text-align: left;
+    }
+
+    .markdown-body .kennzahlen li + li {
+        border-top: 1px solid var(--color-border);
+    }
+
+    .markdown-body .kennzahlen li > strong:first-child {
+        font-size: 1.35rem;
+    }
+}
+
+/* ::: team -- one person card per list item (Markdown.cs/TeamMember.cs build the
+   avatar, name, role chip, duty tags and note). Each "## Vorsitz" etc. above stays
+   a normal heading; every group is a block of its own. One raster for all of them,
+   so the cards line up across groups: a group of one person gets the same card
+   width as a group of six, not a stretched one. 17rem fits a long double name.
+   Like every other block it stays in the 42rem reading column, so the cards share
+   the edges of the text above and below them; that leaves room for two columns
+   (three would need 52.5rem), one on a phone.
+   The cards of a row share one height (the grid's default stretch), so a row reads
+   as a calm band; the card itself keeps its content at the top (align-content). */
+.markdown-body .team > ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
+    gap: var(--space-3);
+    box-sizing: border-box;
+    max-width: 42rem;
+    margin: 0 0 var(--space-4);
+    padding: 0;
+    list-style: none;
+}
+
+.markdown-body .team li + li {
+    margin-top: 0;
+}
+
+/* The card: avatar in a column of its own, everything else stacked beside it.
+   Hover only deepens the shadow -- nothing moves. */
+.markdown-body .team-card {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: var(--space-3);
+    align-content: start;
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius);
+    background: var(--color-bg);
+    box-shadow: var(--shadow);
+    transition: box-shadow var(--transition);
+}
+
+.markdown-body .team-card:hover {
+    box-shadow: var(--shadow-hover);
+}
+
+/* In a loose list (blank lines between items) Markdig wraps the card's text in a
+   <p>; display: contents lets its parts join the card's grid all the same. */
+.markdown-body .team-card > p:first-child {
+    display: contents;
+}
+
+/* Everything but the avatar goes into the text column -- including whatever else
+   an editor puts into the item (a second paragraph, a sub-list). */
+.markdown-body .team-card > :not(.team-avatar),
+.markdown-body .team-card > p:first-child > :not(.team-avatar) {
+    grid-column: 2;
+}
+
+/* A card without the convention (no bold name) is just its text. */
+.markdown-body .team-card-plain {
+    display: block;
+}
+
+.markdown-body .team-avatar {
+    grid-row: 1 / span 4;
+    display: grid;
+    place-items: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    font-weight: var(--font-weight-heading);
+    letter-spacing: 0.02em;
+}
+
+.markdown-body .team-avatar-1 { background: var(--color-avatar-1); color: var(--color-on-avatar-1); }
+.markdown-body .team-avatar-2 { background: var(--color-avatar-2); color: var(--color-on-avatar-2); }
+
+.markdown-body .team-name {
+    color: var(--color-heading);
+    font-size: 1.15rem;
+    line-height: 1.3;
+}
+
+/* The role as a chip under the name; justify-self keeps it as wide as its text,
+   not the column. */
+.markdown-body .team-role {
+    justify-self: start;
+    margin-top: var(--space-1);
+    padding: 0.1rem var(--space-2);
+    border-radius: 999px;
+    background: var(--color-brand-tint);
+    color: var(--color-brand-dark);
+    font-size: 0.85rem;
+    font-weight: 700;
+}
+
+/* Duties as small outlined tags: quieter than the role chip, because the role
+   says who someone is and the duties only what they look after. A tag never breaks
+   inside ("Stellvertretende Schulkonferenz" stays one piece); the row wraps between
+   tags instead. */
+.markdown-body .team-duties {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1);
+    margin-top: var(--space-2);
+}
+
+.markdown-body .team-duty {
+    white-space: nowrap;
+    padding: 0.05rem var(--space-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    color: var(--color-text-soft);
+    font-size: 0.85rem;
+}
+
+.markdown-body .team-note {
+    margin-top: var(--space-2);
+    color: var(--color-text-soft);
+    font-size: 0.95rem;
+}
+
+/* ::: team gross -- the chair. Same raster and card as every other group, so the
+   page keeps one rhythm; only the role chip stands out, filled in the button blue
+   instead of the pale tint (white on it 5.4:1, in dark mode too). */
+.markdown-body .team.gross .team-role {
+    background: var(--color-button);
+    color: var(--color-on-button);
 }
 
 /* Tables (pipe tables): not in the content yet, styled ahead of time. As a block
@@ -939,3 +1210,19 @@ h1:focus {
     border: none;
     border-top: 1px solid var(--color-border);
 }
+
+/* Reduced motion: visitors who asked their system for less movement get none.
+   The site has no animations, only short transitions (hover colours, the
+   hamburger turning into an X, the mobile menu folding open); these are cut to
+   an instant here. Near zero rather than none, so anything that waits for a
+   transition to end still gets its event. */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+        transition-duration: 0.01ms !important;
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        scroll-behavior: auto !important;
+    }
+}

Elternbeirat.Web/wwwroot/maintenance.html

@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<!--
+  Static maintenance page shown when PocketBase is unreachable. The gate in Program.cs
+  serves this file with status 503 before any component renders, so it must stand on
+  its own: no menu, no PocketBase, no script, and its styles are inlined rather than
+  linked to the fingerprinted app.css (whose hashed name this static file cannot know).
+  The tokens below are a copy of the ones this page needs from app.css, light and dark,
+  under the same names -- when a colour changes there, change it here too. The header
+  band and the signet mirror MainLayout and Signet.razor, so the page still looks like
+  the site. The font is our own self-hosted Nunito; static files stay reachable while
+  PocketBase is down, the gate only covers pages.
+-->
+<html lang="de">
+
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="robots" content="noindex"/>
+    <title>Elternbeirat der IGMH – gerade nicht erreichbar</title>
+    <style>
+        :root {
+            --color-brand: #2b6f9c;
+            --color-brand-dark: #1f5477;
+            --color-header: #2a77a6;
+            --color-on-header: #fff;
+            --color-accent-dark: #4f9247;
+            --gradient-brand: linear-gradient(135deg, var(--color-header) 0%, #3a7a3e 100%);
+            --color-focus: #1f5477;
+            --color-heading: #2b6f9c;
+            --color-text: #222;
+            --color-text-soft: #555;
+            --color-bg: #fff;
+            --color-page: #f4f6f4;
+            --color-border: #e0e0e0;
+
+            --space-2: 0.5rem;
+            --space-3: 1rem;
+            --space-4: 1.5rem;
+            --space-5: 2rem;
+            --radius: 12px;
+            --shadow: 0 1px 3px rgba(31, 58, 95, 0.08), 0 4px 12px rgba(31, 58, 95, 0.06);
+
+            --font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            --font-size-body: 1.0625rem;
+            --font-weight-heading: 800;
+            --letter-spacing-heading: -0.015em;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --color-brand: #7cc0ec;
+                --color-brand-dark: #a3d5f4;
+                --color-header: #266f9c;
+                --color-accent-dark: #86c97d;
+                --gradient-brand: linear-gradient(135deg, var(--color-header) 0%, #2f6b33 100%);
+                --color-focus: #a3d5f4;
+                --color-heading: #c9ced6;
+                --color-text: #a2a8b2;
+                --color-text-soft: #a2a8b2;
+                --color-bg: #222834;
+                --color-page: #171b22;
+                --color-border: #333b47;
+                --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
+            }
+        }
+
+        /* Absolute path: this file is served for any page URL, e.g. /posts/new-board,
+           where a relative "fonts/..." would point into /posts/. */
+        @font-face {
+            font-family: "Nunito";
+            src: url("/fonts/nunito-latin-wght.woff2") format("woff2");
+            font-weight: 400 800;
+            font-style: normal;
+            font-display: swap;
+        }
+
+        html {
+            font-family: var(--font-family);
+            line-height: 1.65;
+            color-scheme: light dark;
+        }
+
+        body {
+            margin: 0;
+            min-height: 100dvh;
+            background: var(--color-page);
+            color: var(--color-text);
+            font-size: var(--font-size-body);
+        }
+
+        /* The header band of MainLayout without the menu: there is nothing to
+           navigate to while the pages are down. */
+        header {
+            background: var(--gradient-brand);
+            box-shadow: var(--shadow);
+        }
+
+        .header-inner {
+            max-width: 72rem;
+            margin: 0 auto;
+            padding: var(--space-3) 1.25rem;
+            display: flex;
+            align-items: center;
+            gap: var(--space-2);
+            color: var(--color-on-header);
+        }
+
+        .signet {
+            flex-shrink: 0;
+            width: 2.5rem;
+            height: 2.5rem;
+        }
+
+        .signet-bubble {
+            fill: var(--color-on-header);
+        }
+
+        .signet-figures {
+            fill: var(--color-accent-dark);
+        }
+
+        .brand-text {
+            display: flex;
+            flex-direction: column;
+            line-height: 1.15;
+        }
+
+        .brand-name {
+            font-size: 1.35rem;
+            font-weight: var(--font-weight-heading);
+            letter-spacing: var(--letter-spacing-heading);
+        }
+
+        .brand-school {
+            font-size: 0.85rem;
+            font-weight: 600;
+        }
+
+        main {
+            box-sizing: border-box;
+            max-width: 36rem;
+            margin: var(--space-5) auto;
+            padding: 0 1.25rem;
+        }
+
+        .card {
+            background: var(--color-bg);
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            padding: var(--space-5);
+        }
+
+        h1 {
+            margin: 0 0 var(--space-3);
+            color: var(--color-heading);
+            font-size: 1.5rem;
+            line-height: 1.25;
+            font-weight: var(--font-weight-heading);
+            letter-spacing: var(--letter-spacing-heading);
+        }
+
+        p {
+            margin: 0;
+        }
+
+        a {
+            color: var(--color-brand);
+            font-weight: 600;
+            text-underline-offset: 2px;
+        }
+
+        a:hover {
+            color: var(--color-brand-dark);
+        }
+
+        a:focus-visible {
+            outline: 3px solid var(--color-focus);
+            outline-offset: 2px;
+            border-radius: 2px;
+        }
+
+        .contact {
+            margin-top: var(--space-4);
+            padding-top: var(--space-4);
+            border-top: 1px solid var(--color-border);
+            color: var(--color-text-soft);
+        }
+    </style>
+</head>
+
+<body>
+<header>
+    <div class="header-inner">
+        <!-- Not a link: the start page is down as well, it would only lead here. -->
+        <svg class="signet" viewBox="0 0 40 40" width="40" height="40" aria-hidden="true" focusable="false">
+            <path class="signet-bubble"
+                  d="M8 4h24a6 6 0 0 1 6 6v15a6 6 0 0 1-6 6H18l-8 6v-6H8a6 6 0 0 1-6-6V10a6 6 0 0 1 6-6z"/>
+            <g class="signet-figures">
+                <circle cx="15" cy="12" r="3.5"/>
+                <path d="M9 26c0-5 2.7-8 6-8s6 3 6 8z"/>
+                <circle cx="26" cy="16" r="2.6"/>
+                <path d="M21.5 26c0-3.8 2-6 4.5-6s4.5 2.2 4.5 6z"/>
+            </g>
+        </svg>
+        <span class="brand-text">
+            <span class="brand-name">Elternbeirat</span>
+            <span class="brand-school">IGMH Mannheim</span>
+        </span>
+    </div>
+</header>
+
+<main>
+    <div class="card">
+        <h1>Die Seite ist gerade nicht erreichbar</h1>
+        <p>
+            Wir bitten um Entschuldigung. Die Website des Elternbeirats der IGMH ist im
+            Moment nicht verfügbar. Wir arbeiten daran, bitte versuchen Sie es in Kürze
+            noch einmal.
+        </p>
+        <p class="contact">
+            In dringenden Fällen erreichen Sie den Elternbeirat per E-Mail:<br/>
+            <a href="mailto:kontakt@elternbeirat-igmh.info">kontakt@elternbeirat-igmh.info</a>
+        </p>
+    </div>
+</main>
+</body>
+
+</html>

docs/deployment.md

@@ -128,6 +128,31 @@ development and the tests and are **not** used on Unraid — see `entwicklung.md
 
 ---
 
+## Outage: PocketBase unreachable
+
+If `eb-pocketbase` is down while `eb-blazor` runs, the app does not render
+half-empty pages (the menu comes from PocketBase too). A gate in `Program.cs`
+answers every **page** request with the static `wwwroot/maintenance.html`:
+
+| Request | Answer while PocketBase is down |
+|---|---|
+| Any page (`/`, `/board`, `/posts/…`, unknown slugs) | **503**, `Retry-After: 60`, maintenance page |
+| `/health` | **503** `PocketBase unreachable` (for Uptime Kuma) |
+| `/events.ics` | 200 with an empty calendar, so subscriptions keep working |
+| `/events/{id}.ics` | 503 |
+| Static files (CSS, fonts, PDFs, `/maintenance.html`) | served as usual |
+
+The gate caches the health check for **10 seconds** (`PocketBaseHealthCache`). So
+after PocketBase stops, pages can render for up to 10 s more (the components
+degrade on their own in that window: empty menu, a short note, 503), and after it
+starts again the maintenance page can stay up for up to 10 s. No restart of the
+web app is needed — the site comes back by itself.
+
+`maintenance.html` carries its styles inline, as a copy of the tokens from
+`app.css`. When colours change there, copy them over.
+
+---
+
 ## Rollback
 
 `scripts/release.sh` additionally tags each release with the short commit SHA,

docs/redaktion.md

@@ -178,6 +178,11 @@ der Startseite als Vorschau angeteasert.
 - `slug` ist englisch, klein, ohne Umlaute (z. B. `new-sports-hall-opened`) —
   dieselbe erzwungene Feldregel wie bei Seiten (siehe *Seiten → Slug-Regel wird
   erzwungen*).
+- **Vorschautext auf der Karte:** Die Karte zeigt die ersten rund 160 Zeichen
+  des `body` als reinen Text (Überschriften und Formatierung fallen weg, gekürzt
+  am Wortende mit „…“). Ein eigenes Feld dafür gibt es nicht — beginne den Text
+  deshalb am besten mit einem Satz, der sagt, worum es geht. Auf `/posts`
+  erscheint der neueste Beitrag als große Karte über die volle Breite.
 
 ---
 
@@ -188,8 +193,23 @@ mehrtägige), `title`, `location` (optional), `note` (optional) und `public`.
 Kein Slug.
 
 Die Übersicht `/events` trennt automatisch in kommende und vergangene Termine;
-die Reihenfolge der Records spielt keine Rolle. Besucher können `/events.ics` in
-ihrer Kalender-App abonnieren — der Feed entsteht aus denselben Records.
+die Reihenfolge der Records spielt keine Rolle. Vergangene Termine stehen
+zugeklappt unter „Vergangene Termine anzeigen“. Besucher können `/events.ics` in
+ihrer Kalender-App abonnieren (Knopf „Kalender abonnieren“) — der Feed entsteht
+aus denselben Records. Jeder kommende Termin hat außerdem einen Link „In Kalender
+übernehmen“, der nur diesen einen Termin als Kalenderdatei liefert.
+
+So erscheint ein Termin auf seiner Karte:
+
+- Links ein **Kalenderblatt** mit Monat, Tag und Wochentag des `start`.
+- Daneben die **Uhrzeit**: nur der Beginn, mit `end` am selben Tag die Spanne
+  (`19:30–21:00 Uhr`), bei mehrtägigen Terminen „bis …“ mit dem letzten Tag. Ein
+  ganztägiger Termin (Uhrzeit `00:00`) ohne `end` zeigt keine Uhrzeit.
+- Darunter `location` und `note`. Auf der Startseite wird `note` nach zwei
+  Zeilen abgeschnitten, auf `/events` steht sie ganz.
+
+Einen Einleitungstext über der Liste schreibst du in den `body` der Seite mit
+dem Slug `events` (unter `pages`); die Website fügt keinen eigenen hinzu.
 
 > **Trage einfach die Ortszeit ein.** Gib die Uhrzeit ein, die auf der Seite
 > stehen soll (Europe/Berlin) — z. B. `08:00`. PocketBase speichert intern in UTC
@@ -289,6 +309,46 @@ Die Beitrittserklärung füllen Sie online beim Förderverein aus.
 :::
 ```
 
+**Team** — eine Personenliste wird zu Karten mit Initialen-Kreis. Jeder
+Listenpunkt ist eine Person:
+
+```markdown
+## Vorsitz
+
+::: team gross
+- **Maik Palm** (Vorsitzender)  
+  *Schulkonferenz, Mensarat, Homepage*  
+  Mitglied im Gesamtelternbeirat und im Schulbeirat der Stadt Mannheim.
+- **Gentiana Erol** (1. Stellvertreterin)  
+  *Schulkonferenz, Kommunikation Hausmeister, Mensarat*
+:::
+
+## Beisitz
+
+::: team
+- **Isabell Vesper**
+- **Susanne Naumburg**  
+  *Stellvertretende Schulkonferenz*
+:::
+```
+
+- Der **fette Name** am Anfang wird die Überschrift der Karte, die **Rolle in
+  Klammern** dahinter ein farbiges Etikett. Beides außer dem Namen ist optional.
+- Die **kursive** zweite Zeile sind die Zuständigkeiten, durch Komma getrennt;
+  jede wird ein kleines Schildchen.
+- Jede **weitere Zeile** erscheint als kleiner Text darunter (Links gehen).
+- Zeilenumbruch innerhalb einer Person: zwei Leerzeichen am Zeilenende, die
+  Folgezeilen mit zwei Leerzeichen einrücken (wie oben).
+- Initialen und Farbe des Kreises entstehen **automatisch aus dem Namen**; es gibt
+  bewusst keine Fotos (siehe `docs/recht.md`).
+- `::: team gross` ist für den Vorsitz gedacht: Die Karten bleiben gleich groß,
+  nur das Rollen-Etikett wird kräftig blau hervorgehoben. Ein vertipptes Wort
+  nach `team` schadet nicht: Die Etiketten erscheinen dann einfach normal.
+- Die Überschriften (`## Vorsitz`, `## Beisitz` …) stehen **außerhalb** der
+  Blöcke; jede Gruppe ist ein eigener `::: team`-Block.
+- Beginnt ein Listenpunkt nicht mit einem fetten Namen, wird er eine schlichte
+  Karte mit genau dem Text, der dasteht.
+
 **Hinweis** — eine dezente Info-Box mit Info-Symbol:
 
 ```markdown

pb/pb_migrations/1727200000_dev_seed.js

@@ -21,11 +21,11 @@ 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 MSLine truncated
+    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::: team gross\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\n## Schriftführung\n\n::: team\n- **Marion Leininger**  \n  *Kasse, Schriftführung, Kontakt Förderverein*\n:::\n\n## Beisitz\n\n::: team\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\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\nLine truncated
 ,
     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 
Line truncated
 ,
-    events: [{"end":"","location":"","note":"Die neue Internetseite des Elternbeirats der IGMH löst die bisherige ab und ist ab diesem Tag unter der neuen Adresse erreichbar.","public":true,"start":"2026-10-14 22:00:00.000Z","title":"Neue Website des Elternbeirats geht online"},{"end":"","location":"IGMH","note":"","public":true,"start":"2025-02-07 23:00:00.000Z","title":"Tag der offenen Tür der IGMH"},{"end":"","location":"IGMH","note":"","public":true,"start":"2025-02-24 23:00:00.000Z","title":"Wahl des Elternbeiratsvorstands"},{"end":"","location":"Hörsaal 2 der IGMH","note":"","public":true,"start":"2025-11-13 18:00:00.000Z","title":"Vollversammlung des Elternbeirats mit Vorstandswahl"},{"end":"","location":"IGMH","note":"","public":true,"start":"2025-12-08 23:00:00.000Z","title":"1. Sitzung des Elternbeiratsvorstands"},{"end":"","location":"IGMH","note":"","public":true,"start":"2025-12-16 23:00:00.000Z","title":"Adventstüren-Contest"},{"end":"","location":"IGMH","note":"","public":true,"start":"2026-03-09 23:00:00.000Z","title":"2. Sitzung des Elternbeiratsvorstands"}]
+    events: [{"end":"","location":"","note":"Die neue Internetseite des Elternbeirats der IGMH löst die bisherige ab und ist ab diesem Tag unter der neuen Adresse erreichbar.","public":true,"start":"2026-10-14 22:00:00.000Z","title":"Neue Website des Elternbeirats geht online"},{"end":"","location":"IGMH","note":"","public":true,"start":"2025-02-07 23:00:00.000Z","title":"Tag der offenen Tür der IGMH"},{"end":"","location":"IGMH","note":"","public":true,"start":"2025-02-24 23:00:00.000Z","title":"Wahl des Elternbeiratsvorstands"},{"end":"","location":"Hörsaal 2 der IGMH","note":"","public":true,"start":"2025-11-13 18:00:00.000Z","title":"Vollversammlung des Elternbeirats mit Vorstandswahl"},{"end":"","location":"IGMH","note":"","public":true,"start":"2025-12-08 23:00:00.000Z","title":"1. Sitzung des Elternbeiratsvorstands"},{"end":"","location":"IGMH","note":"","public":true,"start":"2025-12-16 23:00:00.000Z","title":"Adventstüren-Contest"},{"end":"","location":"IGMH","note":"","public":true,"start":"2026-03-09 23:00:00.000Z","title":"2. Sitzung des Elternbeiratsvorstands"},{"end":"2026-11-21 12:00:00.000Z","location":"Schulhof der IGMH","note":"Kuchenspenden bitte bis Freitag bei der Klassenleitung anmelden.","public":true,"start":"2026-11-21 08:00:00.000Z","title":"Herbstbasar"},{"end":"2026-12-11 11:00:00.000Z","location":"Jugendherberge Heidelberg","note":"","public":true,"start":"2026-12-09 07:00:00.000Z","title":"Klausurtagung des Elternbeiratsvorstands"},{"end":"2026-07-02 22:00:00.000Z","location":"","note":"","public":true,"start":"2026-06-28 22:00:00.000Z","title":"Projektwoche"}]
 ,
     // Topics own the grouping and the order of the FAQ page; a question links to
     // its topic below via the "topic" relation, resolved by slug at seed time.