Render FAQ topics as cards, drop dead scoped CSS

Elternbeirat.Web/Features/Faqs/FaqList.razor

@@ -8,25 +8,22 @@
 {
     <p>Die Fragen sind gerade nicht erreichbar. Bitte später erneut versuchen.</p>
 }
-else if (_groups.Count == 0)
+else if (_topics.Count == 0)
 {
     <p>Zurzeit gibt es keine Fragen.</p>
 }
 else
 {
-    @foreach (var group in _groups)
-    {
-        <section class="faq-topic">
-            <h2>@group.Key.Title</h2>
-            @foreach (var faq in group)
-            {
-                <details class="faq-item">
-                    <summary>@faq.Question</summary>
-                    <div class="faq-answer">
-                        @((MarkupString)Markdown.ToHtml(faq.Answer))
-                    </div>
-                </details>
-            }
-        </section>
-    }
+    <ul class="faq-topic-list">
+        @foreach (var topic in _topics)
+        {
+            <li>
+                <h2><a href="@($"/faqs/{topic.Slug}")">@topic.Title</a></h2>
+                @if (!string.IsNullOrWhiteSpace(topic.Intro))
+                {
+                    <div class="faq-topic-intro">@((MarkupString)Markdown.ToHtml(topic.Intro))</div>
+                }
+            </li>
+        }
+    </ul>
 }