Show FAQ topics as an in-page accordion instead of drill-down pages

Elternbeirat.Web/wwwroot/app.css

@@ -206,8 +206,7 @@ h1:focus {
    lifted off the tinted page background with a soft shadow and a gentle hover. */
 
 .post-list,
-.event-list,
-.faq-topic-list {
+.event-list {
     list-style: none;
     padding: 0;
     margin: 0;
@@ -216,8 +215,7 @@ h1:focus {
 }
 
 .post-list li,
-.event-list li,
-.faq-topic-list li {
+.event-list li {
     background: var(--color-bg);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
@@ -226,21 +224,56 @@ h1:focus {
 }
 
 .post-list li:hover,
-.event-list li:hover,
-.faq-topic-list li:hover {
+.event-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 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
+   questions nested inside, so the two accordion levels read apart. */
+.faq-topic {
+    background: var(--color-bg);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    padding: var(--space-3) var(--space-4);
+    margin-bottom: var(--space-3);
+    transition: box-shadow var(--transition);
 }
 
-.faq-topic-list h2 a {
-    text-decoration: none;
+.faq-topic:hover {
+    box-shadow: var(--shadow-hover);
+}
+
+.faq-topic > summary {
+    cursor: pointer;
+    font-size: 1.15rem;
+    font-weight: 600;
+    color: var(--color-brand);
+    list-style: none;
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-2);
+}
+
+.faq-topic > summary::-webkit-details-marker {
+    display: none;
+}
+
+.faq-topic > summary::before {
+    content: "▸";
+    color: var(--color-accent-dark);
+    font-size: 0.9rem;
+}
+
+.faq-topic[open] > summary::before {
+    content: "▾";
+}
+
+/* Space the questions off the topic heading once the topic is open. */
+.faq-topic[open] > .faq-item:first-of-type {
+    margin-top: var(--space-3);
 }
 
 .faq-topic-intro {