Render FAQ topics as cards, drop dead scoped CSS

Elternbeirat.Web/wwwroot/app.css

@@ -206,7 +206,8 @@ h1:focus {
    lifted off the tinted page background with a soft shadow and a gentle hover. */
 
 .post-list,
-.event-list {
+.event-list,
+.faq-topic-list {
     list-style: none;
     padding: 0;
     margin: 0;
@@ -215,7 +216,8 @@ h1:focus {
 }
 
 .post-list li,
-.event-list li {
+.event-list li,
+.faq-topic-list li {
     background: var(--color-bg);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
@@ -224,11 +226,28 @@ h1:focus {
 }
 
 .post-list li:hover,
-.event-list li:hover {
+.event-list li:hover,
+.faq-topic-list li:hover {
     box-shadow: var(--shadow-hover);
     transform: translateY(-2px);
 }
 
+/* FAQ topics: each card is a link to the topic's own page, with an optional intro
+   below the heading. The heading matches the post/event card titles. */
+.faq-topic-list h2 {
+    margin: 0;
+    font-size: 1.15rem;
+}
+
+.faq-topic-list h2 a {
+    text-decoration: none;
+}
+
+.faq-topic-intro {
+    margin-top: var(--space-2);
+    color: var(--color-text-soft);
+}
+
 /* Posts */
 .post-list a {
     font-size: 1.15rem;