Add post and event cards, shared calendar sheet and per-event ICS; rework past events and next-event card

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

@@ -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;

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

@@ -136,38 +136,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 +148,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 +159,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