Elternbeirat.Web/Features/Embeds/EventsEmbed.razor

@@ -7,15 +7,16 @@
             @foreach (var ev in _upcomingEvents)
             {
                 <li>
-                    <EventDate Value="ev" />
+                    <a class="card-link" href="/events">
-                    <span class="event-title">@ev.Title</span>
+                        <span class="event-title">@ev.Title</span>
-                    @if (!string.IsNullOrWhiteSpace(ev.Location))
+                        <EventDate Value="ev" />
-                    {
+                        @if (!string.IsNullOrWhiteSpace(ev.Location))
-                        <span class="event-location">@ev.Location</span>
+                        {
-                    }
+                            <span class="event-location">@ev.Location</span>
+                        }
+                    </a>
                 </li>
             }
         </ul>
-        <p class="embed-more"><a href="/events">Alle Termine <span aria-hidden="true">&rarr;</span></a></p>
     </section>
 }

Elternbeirat.Web/Features/Embeds/PostsEmbed.razor

@@ -7,11 +7,12 @@
             @foreach (var post in _latest)
             {
                 <li>
-                    <a href="@($"/posts/{post.Slug}")">@post.Title</a>
+                    <a class="card-link" href="@($"/posts/{post.Slug}")">
-                    <PostDate Value="post.Date" />
+                        <span class="post-title">@post.Title</span>
+                        <PostDate Value="post.Date" />
+                    </a>
                 </li>
             }
         </ul>
-        <p class="embed-more"><a href="/posts">Alle Beiträge <span aria-hidden="true">&rarr;</span></a></p>
     </section>
 }

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

@@ -0,0 +1,9 @@
+/* The date's own look: small and softened, matching <PostDate> so post and event
+   cards read as one style. Lives with the component so every place that renders
+   <EventDate> (list, home embed) shows the date the same way. Positioning (margin
+   to neighbours) is NOT set here -- that is the surrounding list's job. */
+time {
+    display: block;
+    color: var(--color-text-soft);   /* token, so it adapts in dark mode */
+    font-size: 0.85rem;
+}

Elternbeirat.Web/Features/Events/EventList.razor

@@ -39,16 +39,18 @@ else
             @foreach (var ev in _upcomingEvents)
             {
                 <li>
-                    <EventDate Value="ev" />
+                    <a class="card-link" href="/events">
-                    <span class="event-title">@ev.Title</span>
+                        <span class="event-title">@ev.Title</span>
-                    @if (!string.IsNullOrWhiteSpace(ev.Location))
+                        <EventDate Value="ev" />
-                    {
+                        @if (!string.IsNullOrWhiteSpace(ev.Location))
-                        <span class="event-location">@ev.Location</span>
+                        {
-                    }
+                            <span class="event-location">@ev.Location</span>
-                    @if (!string.IsNullOrWhiteSpace(ev.Note))
+                        }
-                    {
+                        @if (!string.IsNullOrWhiteSpace(ev.Note))
-                        <p class="event-note">@ev.Note</p>
+                        {
-                    }
+                            <p class="event-note">@ev.Note</p>
+                        }
+                    </a>
                 </li>
             }
         </ul>
@@ -61,12 +63,14 @@ else
             @foreach (var ev in _pastEvents)
             {
                 <li>
-                    <EventDate Value="ev" />
+                    <a class="card-link" href="/events">
-                    <span class="event-title">@ev.Title</span>
+                        <span class="event-title">@ev.Title</span>
-                    @if (!string.IsNullOrWhiteSpace(ev.Location))
+                        <EventDate Value="ev" />
-                    {
+                        @if (!string.IsNullOrWhiteSpace(ev.Location))
-                        <span class="event-location">@ev.Location</span>
+                        {
-                    }
+                            <span class="event-location">@ev.Location</span>
+                        }
+                    </a>
                 </li>
             }
         </ul>

Elternbeirat.Web/Features/Posts/PostList.razor

@@ -29,8 +29,10 @@ else
         @foreach (var post in _posts)
         {
             <li>
-                <a href="@($"/posts/{post.Slug}")">@post.Title</a>
+                <a class="card-link" href="@($"/posts/{post.Slug}")">
-                <PostDate Value="post.Date" />
+                    <span class="post-title">@post.Title</span>
+                    <PostDate Value="post.Date" />
+                </a>
             </li>
         }
     </ul>

Elternbeirat.Web/wwwroot/app.css

@@ -219,7 +219,6 @@ h1:focus {
     background: var(--color-bg);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
-    padding: var(--space-3) var(--space-4);
     transition: box-shadow var(--transition);
 }
 
@@ -228,6 +227,16 @@ h1:focus {
     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
@@ -280,41 +289,28 @@ h1:focus {
     color: var(--color-text-soft);
 }
 
-/* Posts */
+/* Post and event cards are built the same way, so they read as one style on the
-.post-list a {
+   home page where both appear: the title leads in the brand colour (the whole card
-    font-size: 1.15rem;
+   is the link, so the title itself is plain text), the date sits quietly beneath. */
-    font-weight: 600;
+.post-title,
-    text-decoration: none;
-}
-
-/* The date's look (small, softened) comes from PostDate.razor.css. Here only the
-   list-specific spacing: nudge the date down from the post's title link above. */
-.post-list time {
-    margin-top: var(--space-1);
-}
-
-/* Events: the date leads in the warm accent colour. */
-.event-list time {
-    display: block;
-    color: var(--color-accent-dark);
-    font-weight: 600;
-    font-size: 0.9rem;
-}
-
 .event-title {
     display: block;
-    margin-top: var(--space-1);
     font-size: 1.15rem;
     font-weight: 600;
     color: var(--color-brand);
 }
 
-.event-location::before {
+/* The date's small, softened look comes from PostDate.razor.css / EventDate; here
-    content: " · ";
+   only the shared spacing: nudge it down from the title above. */
-    color: var(--color-text-soft);
+.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);
 }
 
@@ -388,25 +384,3 @@ h1:focus {
     padding-top: var(--space-2);
     color: var(--color-text);
 }
-
-/* "Alle Beiträge/Termine/Fragen →" links below an embedded list on the home page.
-   Set apart from the cards with extra space above, and styled as a distinct call
-   to action in the accent colour rather than looking like body text. The arrow
-   nudges right on hover for a subtle bit of life. */
-.embed-more {
-    margin-top: var(--space-4);
-    max-width: none;   /* override the global paragraph reading cap */
-}
-
-.embed-more a {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-    font-weight: 600;
-    color: var(--color-accent-dark);
-    text-decoration: none;
-}
-
-.embed-more a:hover {
-    color: var(--color-brand);
-}