Add project mission section to the home page.

Explains under Warum diese Seite? that Faktenkompass collects answers and evidence for common arguments.

Co-authored-by: Cursor <cursoragent@cursor.com>

static/css/custom.css

@@ -153,6 +153,28 @@ body {
     margin: 0;
 }
 
+.fk-about {
+    border-top: 1px solid var(--fk-border);
+}
+
+.fk-about-title {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0 0 0.75rem;
+    letter-spacing: -0.02em;
+}
+
+.fk-about-body {
+    padding: 1rem 1.125rem;
+}
+
+.fk-about-body p {
+    margin: 0;
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: var(--fk-muted);
+}
+
 /* Cards */
 .fk-card,
 .category-tile,

templates/admin/claims/assistant.html

@@ -19,6 +19,65 @@
         border-radius: 8px;
         padding: 1.25rem;
         background: #fff;
+        position: relative;
+    }
+    .assistant-card.is-loading {
+        pointer-events: none;
+    }
+    .fk-assistant-loading {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.92);
+    }
+    .fk-assistant-loading[hidden] {
+        display: none !important;
+    }
+    .fk-assistant-loading-inner {
+        text-align: center;
+        color: #374151;
+    }
+    .fk-assistant-loading-inner p {
+        margin: 0.75rem 0 0;
+        font-weight: 500;
+    }
+    .fk-assistant-loading-hint {
+        margin-top: 0.35rem !important;
+        font-size: 0.85rem;
+        font-weight: 400 !important;
+        color: #6b7280;
+    }
+    .fk-spinner {
+        display: inline-block;
+        width: 2.25rem;
+        height: 2.25rem;
+        border: 3px solid #d1d5db;
+        border-top-color: #0d9488;
+        border-radius: 50%;
+        animation: fk-spin 0.75s linear infinite;
+    }
+    @keyframes fk-spin {
+        to { transform: rotate(360deg); }
+    }
+    .fk-generate-btn.is-loading .fk-btn-label {
+        display: none;
+    }
+    .fk-generate-btn.is-loading .fk-btn-loading {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+    .fk-btn-loading {
+        display: none;
+    }
+    .fk-btn-loading .fk-spinner {
+        width: 1rem;
+        height: 1rem;
+        border-width: 2px;
     }
 </style>
 {% endblock %}
@@ -48,8 +107,15 @@
         </ol>
     </div>
 
-    <div class="assistant-card">
-        <form method="post" enctype="multipart/form-data" novalidate>
+    <div class="assistant-card" id="fk-assistant-card">
+        <div class="fk-assistant-loading" id="fk-assistant-loading" hidden>
+            <div class="fk-assistant-loading-inner">
+                <span class="fk-spinner" aria-hidden="true"></span>
+                <p>Entwurf wird generiert…</p>
+                <p class="fk-assistant-loading-hint">Die KI analysiert Ihre Eingaben. Das kann einige Sekunden dauern.</p>
+            </div>
+        </div>
+        <form method="post" enctype="multipart/form-data" novalidate id="fk-assistant-form">
             {% csrf_token %}
             {% if form.non_field_errors %}
             <div class="alert alert-danger">{{ form.non_field_errors }}</div>
@@ -73,7 +139,13 @@
                 <div class="form-text">JPG, PNG, GIF, WebP, SVG oder PDF. SVG wird für die KI intern in PNG umgewandelt.</div>
             </div>
 
-            <button type="submit" class="button default">Entwurf generieren</button>
+            <button type="submit" class="button default fk-generate-btn" id="fk-generate-draft-btn">
+                <span class="fk-btn-label">Entwurf generieren</span>
+                <span class="fk-btn-loading">
+                    <span class="fk-spinner" aria-hidden="true"></span>
+                    Wird generiert…
+                </span>
+            </button>
         </form>
     </div>
 
@@ -95,3 +167,36 @@
     {% endif %}
 </div>
 {% endblock %}
+
+{% block extrahead %}
+{{ block.super }}
+<script>
+(function () {
+    var form = document.getElementById('fk-assistant-form');
+    if (!form) {
+        return;
+    }
+
+    form.addEventListener('submit', function () {
+        var card = document.getElementById('fk-assistant-card');
+        var overlay = document.getElementById('fk-assistant-loading');
+        var button = document.getElementById('fk-generate-draft-btn');
+
+        if (card) {
+            card.classList.add('is-loading');
+        }
+        if (overlay) {
+            overlay.hidden = false;
+        }
+        if (button) {
+            button.classList.add('is-loading');
+            button.disabled = true;
+        }
+
+        form.querySelectorAll('input:not([type="hidden"]), textarea, select, button').forEach(function (field) {
+            field.disabled = true;
+        });
+    });
+})();
+</script>
+{% endblock %}

templates/claims/home.html

@@ -20,4 +20,15 @@
 <div id="home-results">
     {% include "claims/partials/category_list.html" %}
 </div>
+
+<section class="fk-about mt-5 pt-4" aria-labelledby="fk-about-heading">
+    <h2 class="fk-about-title" id="fk-about-heading">Warum diese Seite?</h2>
+    <div class="fk-card fk-about-body">
+        <p>
+            Faktenkompass ist eine Datenbank mit Antworten und Belegen zu typischen Argumenten,
+            die man immer wieder hört. Die Idee: In einer Diskussion schnell die passende Grafik
+            oder die richtige Zahl parat zu haben – fundiert, nachvollziehbar und mit Quellen.
+        </p>
+    </div>
+</section>
 {% endblock %}