Faktenkompass: UI-Rebrand, Admin-Assistent und Produktions-Setup.

Modernisiert die öffentliche Oberfläche mit Inter, Dark Mode und Live-Suche, ergänzt KI-gestützte Entwürfe im Admin mit Nachweis-Uploads und dokumentiert Daphne/Nginx für den Serverbetrieb.

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

templates/claims/category_detail.html

@@ -10,21 +10,21 @@
     </ol>
 </nav>
 
-<div class="d-flex align-items-center gap-2 mb-3">
+<div class="d-flex align-items-center gap-2 mb-4">
     <div class="category-tile-icon flex-shrink-0">
         <i class="bi {{ category.icon|default:'bi-book' }}"></i>
     </div>
     <div class="flex-grow-1 overflow-hidden">
-        <h1 class="h5 mb-0 text-truncate">{{ category.name }}</h1>
+        <h1 class="fk-page-title mb-0 text-truncate">{{ category.name }}</h1>
         <span class="small text-muted">{{ claims|length }} Behauptung{% if claims|length != 1 %}en{% endif %}</span>
     </div>
 </div>
 
-<form method="get" class="row g-2 mb-3">
+<form method="get" class="row g-2 mb-4" data-live-search data-live-target="#category-results">
     <div class="col-12 col-sm">
-        <input type="search" id="q" name="q" class="form-control form-control-sm" placeholder="Suchen…" value="{{ query }}">
+        <input type="search" id="q" name="q" class="form-control form-control-sm" placeholder="Suchen…" value="{{ query }}" autocomplete="off">
     </div>
-    <div class="col-7 col-sm-auto">
+    <div class="col-12 col-sm-auto">
         <select id="status" name="status" class="form-select form-select-sm">
             <option value="">Alle Status</option>
             {% for value, label in status_choices %}
@@ -32,23 +32,9 @@
             {% endfor %}
         </select>
     </div>
-    <div class="col-5 col-sm-auto">
-        <button type="submit" class="btn btn-primary btn-sm w-100">Filtern</button>
-    </div>
 </form>
 
-<div class="d-flex flex-column gap-2">
-    {% for claim in claims %}
-    <a href="{{ claim.get_absolute_url }}" class="text-decoration-none">
-        <div class="card claim-card">
-            <div class="card-body d-flex align-items-start gap-2">
-                <span class="badge text-bg-{{ claim.get_status_badge_class }} flex-shrink-0 mt-1">{{ claim.get_status_display }}</span>
-                <span class="text-dark">{{ claim.title }}</span>
-            </div>
-        </div>
-    </a>
-    {% empty %}
-    <p class="text-muted text-center py-4 mb-0">Keine Behauptungen gefunden.</p>
-    {% endfor %}
+<div id="category-results">
+    {% include "claims/partials/claim_list.html" %}
 </div>
 {% endblock %}

templates/claims/claim_detail.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% load static claims_extras %}
 
 {% block title %}{{ claim.title }} – Faktenkompass{% endblock %}
 {% block meta_description %}{{ claim.short_answer|truncatewords:30 }}{% endblock %}
@@ -13,43 +14,42 @@
 </nav>
 
 <article>
-    <div class="d-flex flex-wrap gap-1 mb-2">
-        <span class="badge text-bg-{{ claim.get_status_badge_class }}">{{ claim.get_status_display }}</span>
-        <span class="badge text-bg-light border text-dark">Evidenz: {{ claim.get_evidence_level_display }}</span>
+    <h1 class="fk-claim-title">{{ claim.title }}</h1>
+
+    <div class="fk-meta-stack mb-3">
+        {% status_badge claim %}
+        {% evidence_badge claim %}
     </div>
 
-    <h1 class="h5 fw-semibold mb-3">{{ claim.title }}</h1>
-
-    <div class="card mb-3 border-start border-3 border-primary">
-        <div class="card-body py-3">
-            <p class="small text-muted text-uppercase fw-semibold mb-1">Kurzantwort</p>
-            <p class="mb-0">{{ claim.short_answer }}</p>
-        </div>
+    <div class="fk-card fk-answer-card">
+        <p class="fk-section-label mb-2">Kurzantwort</p>
+        <p>{{ claim.short_answer }}</p>
     </div>
 
     {% if claim.evidence_files.all %}
-    <section class="mb-3">
-        <p class="small text-muted text-uppercase fw-semibold mb-2">Nachweise</p>
+    <section class="fk-section">
+        <p class="fk-section-label">Nachweise</p>
         <div class="d-flex flex-column gap-2">
             {% for evidence in claim.evidence_files.all %}
             {% if evidence.is_image %}
-            <figure class="card mb-0 evidence-card">
-                <img src="{{ evidence.file.url }}" alt="{{ evidence.caption|default:evidence.display_title }}"
-                     class="evidence-img w-100" loading="lazy">
-                {% if evidence.title or evidence.caption %}
-                <figcaption class="card-body py-2 px-3 small">
-                    {% if evidence.title %}<strong class="d-block">{{ evidence.title }}</strong>{% endif %}
-                    {% if evidence.caption %}<span class="text-muted">{{ evidence.caption }}</span>{% endif %}
-                </figcaption>
+            <figure class="fk-card evidence-card mb-0">
+                <button type="button" class="fk-img-open" data-src="{{ evidence.file.url }}"
+                        data-caption="{{ evidence.caption|default:evidence.image_alt }}"
+                        aria-label="Grafik im Vollbild anzeigen">
+                    <img src="{{ evidence.file.url }}" alt="{{ evidence.image_alt }}"
+                         class="evidence-img w-100" loading="lazy">
+                </button>
+                {% if evidence.caption %}
+                <figcaption class="card-body py-2 px-3 small text-muted">{{ evidence.caption }}</figcaption>
                 {% endif %}
             </figure>
             {% elif evidence.is_pdf %}
             <a href="{{ evidence.file.url }}" target="_blank" rel="noopener noreferrer" class="text-decoration-none">
-                <div class="card evidence-card">
+                <div class="fk-card evidence-card">
                     <div class="card-body py-2 px-3 d-flex align-items-center gap-3">
-                        <i class="bi bi-file-earmark-pdf text-danger fs-3 flex-shrink-0"></i>
+                        <i class="bi bi-file-earmark-pdf fs-3 flex-shrink-0" style="color:#ef4444"></i>
                         <div class="min-w-0">
-                            <span class="small fw-medium text-dark d-block">{{ evidence.display_title }}</span>
+                            <span class="small fw-medium d-block" style="color:var(--fk-text)">{{ evidence.display_title }}</span>
                             {% if evidence.caption %}<span class="small text-muted">{{ evidence.caption }}</span>{% endif %}
                             <span class="small text-primary">PDF öffnen</span>
                         </div>
@@ -63,29 +63,27 @@
     {% endif %}
 
     {% if claim.detailed_explanation %}
-    <section class="card mb-3">
-        <div class="card-body py-3">
-            <p class="small text-muted text-uppercase fw-semibold mb-1">Erklärung</p>
-            <div class="small">{{ claim.detailed_explanation|linebreaks }}</div>
+    <section class="fk-section">
+        <p class="fk-section-label">Erklärung</p>
+        <div class="fk-card fk-section-body">
+            {{ claim.detailed_explanation|linebreaks }}
         </div>
     </section>
     {% endif %}
 
     {% if claim.sources.all %}
-    <section class="mb-3">
-        <p class="small text-muted text-uppercase fw-semibold mb-2">Quellen</p>
+    <section class="fk-section">
+        <p class="fk-section-label">Quellen</p>
         <div class="d-flex flex-column gap-2">
             {% for source in claim.sources.all %}
-            <div class="card">
-                <div class="card-body py-2 px-3">
-                    <a href="{{ source.url }}" target="_blank" rel="noopener noreferrer" class="text-decoration-none fw-medium small">
-                        {{ source.title }} <i class="bi bi-box-arrow-up-right"></i>
-                    </a>
-                    <p class="text-muted small mb-0">{{ source.organization }}</p>
-                    {% if source.description %}
-                    <p class="small mb-0 mt-1">{{ source.description }}</p>
-                    {% endif %}
-                </div>
+            <div class="fk-card fk-section-body">
+                <a href="{{ source.url }}" target="_blank" rel="noopener noreferrer" class="fk-source-link">
+                    {{ source.title }} <i class="bi bi-box-arrow-up-right"></i>
+                </a>
+                <p class="text-muted small mb-0">{{ source.organization }}</p>
+                {% if source.description %}
+                <p class="small mb-0 mt-1">{{ source.description }}</p>
+                {% endif %}
             </div>
             {% endfor %}
         </div>
@@ -93,11 +91,11 @@
     {% endif %}
 
     {% if claim.counter_arguments.all %}
-    <section class="mb-3">
-        <p class="small text-muted text-uppercase fw-semibold mb-2">Gegenargumente</p>
-        <div class="accordion accordion-flush" id="counterArgs">
+    <section class="fk-section">
+        <p class="fk-section-label">Gegenargumente</p>
+        <div class="accordion fk-accordion" id="counterArgs">
             {% for ca in claim.counter_arguments.all %}
-            <div class="accordion-item border mb-1 rounded">
+            <div class="accordion-item">
                 <h2 class="accordion-header">
                     <button class="accordion-button collapsed py-2 small" type="button"
                             data-bs-toggle="collapse" data-bs-target="#collapse{{ forloop.counter }}">
@@ -106,7 +104,7 @@
                 </h2>
                 <div id="collapse{{ forloop.counter }}" class="accordion-collapse collapse"
                      data-bs-parent="#counterArgs">
-                    <div class="accordion-body py-2 small text-muted">
+                    <div class="accordion-body py-2">
                         {{ ca.response|linebreaks }}
                     </div>
                 </div>
@@ -119,22 +117,22 @@
     {% if claim.tags.all %}
     <div class="d-flex flex-wrap gap-1">
         {% for tag in claim.tags.all %}
-        <span class="badge text-bg-light border text-secondary">#{{ tag.name }}</span>
+        <span class="fk-tag">#{{ tag.name }}</span>
         {% endfor %}
     </div>
     {% endif %}
 </article>
 
 {% if related_claims %}
-<aside class="mt-4 pt-3 border-top">
-    <p class="small text-muted text-uppercase fw-semibold mb-2">Mehr zu {{ claim.category.name }}</p>
+<aside class="mt-4 pt-4" style="border-top:1px solid var(--fk-border)">
+    <p class="fk-section-label">Mehr zu {{ claim.category.name }}</p>
     <div class="d-flex flex-column gap-2">
         {% for related in related_claims %}
         <a href="{{ related.get_absolute_url }}" class="text-decoration-none">
-            <div class="card claim-card">
-                <div class="card-body py-2 d-flex align-items-start gap-2">
-                    <span class="badge text-bg-{{ related.get_status_badge_class }} flex-shrink-0">{{ related.get_status_display }}</span>
-                    <span class="small text-dark">{{ related.title }}</span>
+            <div class="claim-card">
+                <div class="card-body py-2">
+                    <div class="mb-1">{% status_badge related %}</div>
+                    <span class="claim-title small d-block">{{ related.title }}</span>
                 </div>
             </div>
         </a>
@@ -142,4 +140,17 @@
     </div>
 </aside>
 {% endif %}
+
+<div id="fk-lightbox" class="fk-lightbox" hidden role="dialog" aria-modal="true" aria-label="Grafik Vollbild">
+    <button type="button" class="fk-lightbox-backdrop" aria-label="Schließen"></button>
+    <button type="button" class="fk-lightbox-close" aria-label="Schließen">
+        <i class="bi bi-x-lg"></i>
+    </button>
+    <img class="fk-lightbox-img" src="" alt="">
+    <p class="fk-lightbox-caption"></p>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{% static 'js/image-lightbox.js' %}" defer></script>
 {% endblock %}

templates/claims/home.html

@@ -3,12 +3,12 @@
 {% block title %}Faktenkompass{% endblock %}
 
 {% block content %}
-<header class="page-header mb-3">
-    <h1 class="h4 mb-3">Themen</h1>
-    <form method="get" action="{% url 'claims:home' %}" class="mb-2">
+<header class="mb-4">
+    <h1 class="fk-page-title">Themen</h1>
+    <form method="get" action="{% url 'claims:home' %}" class="mb-2" data-live-search data-live-target="#home-results">
         <div class="input-group">
-            <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
-            <input type="search" name="q" class="form-control border-start-0 ps-0" placeholder="Suchen…" value="{{ query }}" aria-label="Kategorien durchsuchen">
+            <span class="input-group-text border-end-0"><i class="bi bi-search"></i></span>
+            <input type="search" name="q" class="form-control border-start-0 ps-0" placeholder="Suchen…" value="{{ query }}" aria-label="Kategorien durchsuchen" autocomplete="off">
         </div>
     </form>
     <div class="d-flex justify-content-between align-items-center">
@@ -17,31 +17,7 @@
     </div>
 </header>
 
-{% if query and not categories %}
-<p class="text-muted small mb-3">Keine Kategorien für „{{ query }}".</p>
-{% endif %}
-
-<div class="row g-2 g-sm-3">
-    {% for category in categories %}
-    <div class="col-6 col-md-4 col-lg-3">
-        <a href="{{ category.get_absolute_url }}" class="text-decoration-none d-block h-100">
-            <div class="card category-tile h-100 text-center">
-                <div class="card-body d-flex flex-column align-items-center justify-content-center py-3 py-sm-4">
-                    <div class="category-tile-icon mb-2">
-                        <i class="bi {{ category.icon|default:'bi-book' }}"></i>
-                    </div>
-                    <h2 class="h6 card-title text-dark mb-0">{{ category.name }}</h2>
-                    <span class="small text-muted mt-1">{{ category.claim_count }}</span>
-                </div>
-            </div>
-        </a>
-    </div>
-    {% empty %}
-    {% if not query %}
-    <div class="col-12">
-        <p class="text-muted text-center py-5 mb-0">Noch keine Kategorien vorhanden.</p>
-    </div>
-    {% endif %}
-    {% endfor %}
+<div id="home-results">
+    {% include "claims/partials/category_list.html" %}
 </div>
 {% endblock %}

templates/claims/partials/category_list.html

@@ -0,0 +1,27 @@
+{% if query and not categories %}
+<p class="text-muted small mb-3">Keine Kategorien für „{{ query }}".</p>
+{% endif %}
+
+<div class="row g-2 g-sm-3">
+    {% for category in categories %}
+    <div class="col-6 col-md-4 col-lg-3">
+        <a href="{{ category.get_absolute_url }}" class="text-decoration-none d-block h-100">
+            <div class="category-tile h-100 text-center">
+                <div class="card-body d-flex flex-column align-items-center justify-content-center py-3 py-sm-4">
+                    <div class="category-tile-icon mb-2">
+                        <i class="bi {{ category.icon|default:'bi-book' }}"></i>
+                    </div>
+                    <h2 class="h6 card-title mb-0">{{ category.name }}</h2>
+                    <span class="small text-muted mt-1">{{ category.claim_count }}</span>
+                </div>
+            </div>
+        </a>
+    </div>
+    {% empty %}
+    {% if not query %}
+    <div class="col-12">
+        <p class="text-muted text-center py-5 mb-0">Noch keine Kategorien vorhanden.</p>
+    </div>
+    {% endif %}
+    {% endfor %}
+</div>

templates/claims/partials/claim_list.html

@@ -0,0 +1,20 @@
+{% load claims_extras %}
+<div class="d-flex flex-column gap-2">
+    {% for claim in claims %}
+    <a href="{{ claim.get_absolute_url }}" class="text-decoration-none">
+        <div class="claim-card">
+            <div class="card-body">
+                {% if show_category %}
+                <div class="mb-1">
+                    <span class="fk-topic">{{ claim.category.name }}</span>
+                </div>
+                {% endif %}
+                <div class="mb-1">{% status_badge claim %}</div>
+                <span class="claim-title d-block">{{ claim.title }}</span>
+            </div>
+        </div>
+    </a>
+    {% empty %}
+    <p class="text-muted text-center py-4 mb-0">{{ empty_message|default:"Keine Behauptungen gefunden." }}</p>
+    {% endfor %}
+</div>

templates/claims/partials/evidence_badge.html

@@ -0,0 +1,4 @@
+<span class="fk-evidence">
+  <i class="bi bi-bar-chart" aria-hidden="true"></i>
+  Evidenz: {{ claim.get_evidence_level_display }}
+</span>

templates/claims/partials/search_results.html

@@ -0,0 +1,12 @@
+{% if claims is not None %}
+<div class="d-flex justify-content-between align-items-center mb-2">
+    <span class="small text-muted">{{ result_count }} Ergebnis{% if result_count != 1 %}se{% endif %}</span>
+    {% if query or category_slug or status %}
+    <a href="{% url 'claims:search' %}" class="small text-muted text-decoration-none">Zurücksetzen</a>
+    {% endif %}
+</div>
+
+{% include "claims/partials/claim_list.html" with claims=claims show_category=True empty_message="Keine Ergebnisse." %}
+{% else %}
+<p class="text-muted text-center py-4 mb-0 small">Suchbegriff oder Filter eingeben…</p>
+{% endif %}

templates/claims/partials/status_badge.html

@@ -0,0 +1,4 @@
+<span class="fk-status fk-status--{{ claim.status }}">
+    <span class="fk-status-dot" aria-hidden="true"></span>
+    {{ claim.get_status_display }}
+</span>

templates/claims/search.html

@@ -3,12 +3,12 @@
 {% block title %}Suche – Faktenkompass{% endblock %}
 
 {% block content %}
-<h1 class="h5 mb-3">Suche</h1>
+<h1 class="fk-page-title">Suche</h1>
 
-<form method="get" class="row g-2 mb-3">
+<form method="get" action="{% url 'claims:search' %}" class="row g-2 mb-4" data-live-search data-live-target="#search-results">
     <div class="col-12">
         <input type="search" id="q" name="q" class="form-control form-control-sm"
-               placeholder="Behauptung suchen…" value="{{ query }}" autofocus>
+               placeholder="Behauptung suchen…" value="{{ query }}" autofocus autocomplete="off">
     </div>
     <div class="col-6">
         <select id="kategorie" name="kategorie" class="form-select form-select-sm">
@@ -26,35 +26,9 @@
             {% endfor %}
         </select>
     </div>
-    <div class="col-12">
-        <button type="submit" class="btn btn-primary btn-sm w-100">Suchen</button>
-    </div>
 </form>
 
-{% if claims is not None %}
-<div class="d-flex justify-content-between align-items-center mb-2">
-    <span class="small text-muted">{{ result_count }} Ergebnis{% if result_count != 1 %}se{% endif %}</span>
-    {% if query or category_slug or status %}
-    <a href="{% url 'claims:search' %}" class="small text-muted">Zurücksetzen</a>
-    {% endif %}
+<div id="search-results">
+    {% include "claims/partials/search_results.html" %}
 </div>
-
-<div class="d-flex flex-column gap-2">
-    {% for claim in claims %}
-    <a href="{{ claim.get_absolute_url }}" class="text-decoration-none">
-        <div class="card claim-card">
-            <div class="card-body">
-                <div class="d-flex flex-wrap gap-1 mb-1">
-                    <span class="badge text-bg-secondary">{{ claim.category.name }}</span>
-                    <span class="badge text-bg-{{ claim.get_status_badge_class }}">{{ claim.get_status_display }}</span>
-                </div>
-                <span class="text-dark">{{ claim.title }}</span>
-            </div>
-        </div>
-    </a>
-    {% empty %}
-    <p class="text-muted text-center py-4 mb-0">Keine Ergebnisse.</p>
-    {% endfor %}
-</div>
-{% endif %}
 {% endblock %}