Design suggestion from AI. Not very useable

.gitea/workflows/build-on-demand.yml

@@ -1,142 +0,0 @@
-name: Build image when workload image tag changes
-
-on:
-  push:
-    branches: [ deployment ]                 # adjust if needed
-    paths:
-      - "arcocd/deployment.yaml"
-      - "Dockerfile"                   # keep if you also want to rebuild when Dockerfile changes
-
-jobs:
-  build-if-image-changed:
-    runs-on: ubuntu-latest
-
-    env:
-      DEPLOY_FILE: "arcocd/deployment.yaml"
-      TARGET_REPO: "git.baumann.gr/adebaumann/vui"   # repo (no tag)
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 2
-
-      - name: Determine base commit
-        id: base
-        shell: bash
-        run: |
-          set -euo pipefail
-          if git rev-parse --verify -q HEAD~1 >/dev/null; then
-            echo "base=$(git rev-parse HEAD~1)" >> "$GITHUB_OUTPUT"
-          else
-            echo "base=$(git hash-object -t tree /dev/null)" >> "$GITHUB_OUTPUT"
-          fi
-
-      # Install yq for robust YAML parsing
-      - name: Install yq
-        shell: bash
-        run: |
-          set -euo pipefail
-          YQ_VER=v4.44.3
-          curl -sL "https://github.com/mikefarah/yq/releases/download/${YQ_VER}/yq_linux_amd64" -o /usr/local/bin/yq
-          chmod +x /usr/local/bin/yq
-          yq --version
-
-      - name: Read workload image from deployment (old vs new)
-        id: img
-        shell: bash
-        run: |
-          set -euo pipefail
-          file="$DEPLOY_FILE"
-          repo="$TARGET_REPO"
-
-          # Function: from a deployment yaml, read .spec.template.spec.containers[].image
-          # and select the one whose image starts with "$repo:"
-          extract() {
-            yq -r '
-              .spec.template.spec.containers // []                       # only real containers, not initContainers
-              | map(.image) | .[]?                                        # images as strings
-              | select(startswith(env(repo) + ":"))                       # match exact repo + ":"
-            ' "$1" 2>/dev/null | tail -n 1
-          }
-
-          # Old image from previous commit (if file existed)
-          if git cat-file -e "${{ steps.base.outputs.base }}":"$file" 2>/dev/null; then
-            git show "${{ steps.base.outputs.base }}:$file" > /tmp/old.yaml
-            old_image="$(extract /tmp/old.yaml || true)"
-          else
-            old_image=""
-          fi
-
-          # New image from workspace
-          if [ -f "$file" ]; then
-            new_image="$(extract "$file" || true)"
-          else
-            new_image=""
-          fi
-
-          echo "Old workload image: $old_image"
-          echo "New workload image: $new_image"
-
-          # Helpers to split repo and tag (handles registry with port)
-          parse_tag() {
-            local ref="$1"
-            local after_slash="${ref##*/}"
-            if [[ "$after_slash" == *:* ]]; then echo "${after_slash##*:}"; else echo ""; fi
-          }
-          parse_repo() {
-            local ref="$1"
-            local tag="$(parse_tag "$ref")"
-            if [ -n "$tag" ]; then echo "${ref%:$tag}"; else echo "$ref"; fi
-          }
-
-          old_tag="$(parse_tag "$old_image")"
-          new_tag="$(parse_tag "$new_image")"
-          new_repo="$(parse_repo "$new_image")"
-
-          if [ -z "$new_image" ]; then
-            echo "ERROR: Could not find a containers[].image starting with ${repo}: in $file"
-            exit 1
-          fi
-
-          registry="$(echo "$new_repo" | awk -F/ '{print $1}')"
-
-          {
-            echo "changed=$([ "$old_tag" != "$new_tag" ] && echo true || echo false)"
-            echo "new_image=$new_image"
-            echo "new_repo=$new_repo"
-            echo "new_tag=$new_tag"
-            echo "registry=$registry"
-          } >> "$GITHUB_OUTPUT"
-
-      - name: Skip if tag unchanged
-        if: steps.img.outputs.changed != 'true'
-        run: echo "Workload image tag unchanged in ${{ env.DEPLOY_FILE }}; skipping build."
-
-      - name: Set up Buildx
-        if: steps.img.outputs.changed == 'true'
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to registry
-        if: steps.img.outputs.changed == 'true'
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ steps.img.outputs.registry }}
-          username: ${{ secrets.REGISTRY_USER }}
-          password: ${{ secrets.REGISTRY_PASSWORD }}
-
-      - name: Build and push (exact tag from deployment)
-        if: steps.img.outputs.changed == 'true'
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: true
-          tags: |
-            ${{ steps.img.outputs.new_image }}
-            ${{ steps.img.outputs.new_repo }}:latest
-          labels: |
-            org.opencontainers.image.source=${{ gitea.repository }}
-            org.opencontainers.image.revision=${{ gitea.sha }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-

.gitignore

@@ -8,6 +8,7 @@ include/
 keys/
 .venv/
 .idea/
+
 *.kate-swp
 node_modules/
 package-lock.json
@@ -15,4 +16,3 @@ package.json
 # Diagram cache directory
 media/diagram_cache/
 .env
-data/db.sqlite3

Dockerfile

@@ -28,10 +28,7 @@ RUN rm -rf /app/Dockerfile* \
            /app/k8s \
            /app/data-loader \
            /app/keys \
-           /app/requirements.txt \
-           /app/node_modules \
-           /app/*.json \
-           /app/test_*.py
+           /app/requirements.txt
 RUN python3 manage.py collectstatic
 CMD ["gunicorn","--bind","0.0.0.0:8000","--workers","3","VorgabenUI.wsgi:application"]
 

Test Suite-DE.md

@@ -1,369 +0,0 @@
-# Test-Suite Dokumentation
-
-Dieses Dokument bietet einen umfassenden Überblick über alle Tests im vgui-cicd Django-Projekt und beschreibt, was jeder Test tut und wie er funktioniert.
-
-## Inhaltsverzeichnis
-
-- [abschnitte App Tests](#abschnitte-app-tests)
-- [dokumente App Tests](#dokumente-app-tests)
-- [pages App Tests](#pages-app-tests)
-- [referenzen App Tests](#referenzen-app-tests)
-- [rollen App Tests](#rollen-app-tests)
-- [stichworte App Tests](#stichworte-app-tests)
-
----
-
-## abschnitte App Tests
-
-Die abschnitte App enthält 32 Tests, die Modelle, Utility-Funktionen, Diagram-Caching und Management-Befehle abdecken.
-
-### Modell-Tests
-
-#### AbschnittTypModelTest
-- **test_abschnitttyp_creation**: Überprüft, dass AbschnittTyp-Objekte korrekt mit den erwarteten Feldwerten erstellt werden
-- **test_abschnitttyp_primary_key**: Bestätigt, dass das `abschnitttyp`-Feld als Primärschlüssel dient
-- **test_abschnitttyp_str**: Testet die String-Repräsentation, die den `abschnitttyp`-Wert zurückgibt
-- **test_abschnitttyp_verbose_name_plural**: Validiert den korrekt gesetzten verbose_name_plural
-- **test_create_multiple_abschnitttypen**: Stellt sicher, dass mehrere AbschnittTyp-Objekte mit verschiedenen Typen erstellt werden können
-
-#### TextabschnittModelTest
-- **test_textabschnitt_creation**: Testet, dass Textabschnitt über das konkrete Modell instanziiert werden kann
-- **test_textabschnitt_default_order**: Überprüft, dass das `order`-Feld standardmäßig 0 ist
-- **test_textabschnitt_ordering**: Testet, dass Textabschnitt-Objekte nach dem `order`-Feld sortiert werden können
-- **test_textabschnitt_blank_fields**: Bestätigt, dass `abschnitttyp`- und `inhalt`-Felder leer/null sein können
-- **test_textabschnitt_foreign_key_protection**: Testet, dass AbschnittTyp-Objekte vor Löschung geschützt sind, wenn sie von Textabschnitt referenziert werden
-
-### Utility-Funktions-Tests
-
-#### MdTableToHtmlTest
-- **test_simple_table**: Konvertiert eine einfache Markdown-Tabelle mit Überschriften und einer Zeile nach HTML
-- **test_table_with_multiple_rows**: Testet die Konvertierung von Tabellen mit mehreren Datenzeilen
-- **test_table_with_empty_cells**: Verarbeitet Tabellen mit leeren Zellen in den Daten
-- **test_table_with_spaces**: Verarbeitet Tabellen mit zusätzlichen Leerzeichen in Zellen
-- **test_table_empty_string**: Löst ValueError für leere Eingabe-Strings aus
-- **test_table_only_whitespace**: Löst ValueError für Strings aus, die nur Leerzeichen enthalten
-- **test_table_insufficient_lines**: Löst ValueError aus, wenn die Eingabe weniger als 2 Zeilen hat
-
-#### RenderTextabschnitteTest
-- **test_render_empty_queryset**: Gibt leeren String für leere Querysets zurück
-- **test_render_multiple_abschnitte**: Rendert mehrere Textabschnitte in korrekter Reihenfolge
-- **test_render_text_markdown**: Konvertiert Klartext mit Markdown-Formatierung
-- **test_render_ordered_list**: Rendert geordnete Listen korrekt
-- **test_render_unordered_list**: Rendert ungeordnete Listen korrekt
-- **test_render_code_block**: Rendert Code-Blöcke mit korrekter Syntax-Hervorhebung
-- **test_render_table**: Konvertiert Markdown-Tabellen mit md_table_to_html nach HTML
-- **test_render_diagram_success**: Testet die Diagramm-Generierung mit erfolgreichem Caching
-- **test_render_diagram_error**: Behandelt Diagramm-Generierungsfehler angemessen
-- **test_render_diagram_with_options**: Testet das Diagramm-Rendering mit benutzerdefinierten Optionen
-- **test_render_text_with_footnotes**: Verarbeitet Text, der Fußnoten enthält
-- **test_render_abschnitt_without_type**: Behandelt Textabschnitte ohne AbschnittTyp
-- **test_render_abschnitt_with_empty_content**: Behandelt Textabschnitte mit leerem Inhalt
-
-### Diagram-Caching-Tests
-
-#### DiagramCacheTest
-- **test_compute_hash**: Generiert konsistente SHA256-Hashes für dieselbe Eingabe
-- **test_get_cache_path**: Erstellt korrekte Cache-Dateipfade basierend auf Hash und Typ
-- **test_get_cached_diagram_hit**: Gibt zwischengespeichertes Diagramm zurück bei Cache-Treffer
-- **test_get_cached_diagram_miss**: Generiert neues Diagramm bei Cache-Fehltreffer
-- **test_get_cached_diagram_request_error**: Behandelt und löst Request-Fehler korrekt aus
-- **test_clear_cache_specific_type**: Löscht Cache-Dateien für spezifische Diagrammtypen
-- **test_clear_cache_all_types**: Löscht alle Cache-Dateien, wenn kein Typ angegeben ist
-
-### Management-Befehl-Tests
-
-#### ClearDiagramCacheCommandTest
-- **test_command_without_type**: Testet die Ausführung des Management-Befehls ohne Angabe des Typs
-- **test_command_with_type**: Testet die Ausführung des Management-Befehls mit spezifischem Diagrammtyp
-
-### Integrations-Tests
-
-#### IntegrationTest
-- **test_textabschnitt_inheritance**: Überprüft, dass VorgabeLangtext Textabschnitt-Felder korrekt erbt
-- **test_render_vorgabe_langtext**: Testet das Rendern von VorgabeLangtext durch render_textabschnitte
-
----
-
-## dokumente App Tests
-
-Die dokumente App enthält 98 Tests und ist damit die umfassendste Test-Suite, die alle Modelle, Views, URLs und Geschäftslogik abdeckt.
-
-### Modell-Tests
-
-#### DokumententypModelTest
-- **test_dokumententyp_creation**: Überprüft die Erstellung von Dokumententyp mit korrekten Feldwerten
-- **test_dokumententyp_str**: Testet die String-Repräsentation, die das `typ`-Feld zurückgibt
-- **test_dokumententyp_verbose_name**: Validiert den korrekt gesetzten verbose_name
-
-#### PersonModelTest
-- **test_person_creation**: Testet die Erstellung von Person-Objekten mit Name und optionalem Titel
-- **test_person_str**: Überprüft, dass die String-Repräsentation Titel und Namen enthält
-- **test_person_verbose_name_plural**: Testet die Konfiguration von verbose_name_plural
-
-#### ThemaModelTest
-- **test_thema_creation**: Testet die Erstellung von Thema mit Name und optionaler Erklärung
-- **test_thema_str**: Überprüft, dass die String-Repräsentation den Themennamen zurückgibt
-- **test_thema_blank_erklaerung**: Bestätigt, dass das `erklaerung`-Feld leer sein kann
-
-#### DokumentModelTest
-- **test_dokument_creation**: Testet die Erstellung von Dokument mit erforderlichen und optionalen Feldern
-- **test_dokument_str**: Überprüft, dass die String-Repräsentation den Dokumenttitel zurückgibt
-- **test_dokument_optional_fields**: Testet, dass optionale Felder None oder leer sein können
-- **test_dokument_many_to_many_relationships**: Überprüft Many-to-Many-Beziehungen mit Personen und Themen
-
-#### VorgabeModelTest
-- **test_vorgabe_creation**: Testet die Erstellung von Vorgabe mit allen erforderlichen Feldern
-- **test_vorgabe_str**: Überprüft, dass die String-Repräsentation die Vorgabennummer zurückgibt
-- **test_vorgabennummer**: Testet die automatische Generierung des Vorgabennummer-Formats
-- **test_get_status_active**: Testet die Statusbestimmung für aktuelle aktive Vorgaben
-- **test_get_status_expired**: Testet die Statusbestimmung für abgelaufene Vorgaben
-- **test_get_status_future**: Testet die Statusbestimmung für zukünftige Vorgaben
-- **test_get_status_with_custom_check_date**: Testet den Status mit benutzerdefiniertem Prüfdatum
-- **test_get_status_verbose**: Testet die ausführliche Statusausgabe
-
-#### ChangelogModelTest
-- **test_changelog_creation**: Testet die Erstellung von Changelog mit Version, Datum und Beschreibung
-- **test_changelog_str**: Überprüft, dass die String-Repräsentation Version und Datum enthält
-
-#### ChecklistenfrageModelTest
-- **test_checklistenfrage_creation**: Testet die Erstellung von Checklistenfrage mit Frage und optionaler Antwort
-- **test_checklistenfrage_str**: Überprüft, dass die String-Repräsentation lange Fragen kürzt
-- **test_checklistenfrage_related_name**: Testet die umgekehrte Beziehung von Vorgabe
-
-### Text-Abschnitt-Tests
-
-#### DokumentTextAbschnitteTest
-- **test_einleitung_creation**: Testet die Erstellung von Einleitung und Vererbung von Textabschnitt
-- **test_geltungsbereich_creation**: Testet die Erstellung von Geltungsbereich und Vererbung
-
-#### VorgabeTextAbschnitteTest
-- **test_vorgabe_kurztext_creation**: Testet die Erstellung von VorgabeKurztext und Vererbung
-- **test_vorgabe_langtext_creation**: Testet die Erstellung von VorgabeLangtext und Vererbung
-
-### Sanity-Check-Tests
-
-#### VorgabeSanityCheckTest
-- **test_date_ranges_intersect_no_overlap**: Testet Datumsüberschneidung mit nicht überlappenden Bereichen
-- **test_date_ranges_intersect_with_overlap**: Testet Datumsüberschneidung mit überlappenden Bereichen
-- **test_date_ranges_intersect_identical_ranges**: Testet Datumsüberschneidung mit identischen Bereichen
-- **test_date_ranges_intersect_with_none_end_date**: Testet Überschneidung mit offenen Endbereichen
-- **test_date_ranges_intersect_both_none_end_dates**: Testet Überschneidung mit zwei offenen Endbereichen
-- **test_check_vorgabe_conflicts_utility**: Testet die Utility-Funktion zur Konflikterkennung
-- **test_find_conflicts_no_conflicts**: Testet die Konflikterkennung bei Vorgabe ohne Konflikte
-- **test_find_conflicts_with_conflicts**: Testet die Konflikterkennung mit konfliktbehafteten Vorgaben
-- **test_format_conflict_report_no_conflicts**: Testet die Konfliktbericht-Formatierung ohne Konflikte
-- **test_format_conflict_report_with_conflicts**: Testet die Konfliktbericht-Formatierung mit Konflikten
-- **test_sanity_check_vorgaben_no_conflicts**: Testet vollständigen Sanity-Check ohne Konflikte
-- **test_sanity_check_vorgaben_with_conflicts**: Testet vollständigen Sanity-Check mit Konflikten
-- **test_sanity_check_vorgaben_multiple_conflicts**: Testet Sanity-Check mit mehreren Konfliktgruppen
-- **test_vorgabe_clean_no_conflicts**: Testet Vorgabe.clean()-Methode ohne Konflikte
-- **test_vorgabe_clean_with_conflicts**: Testet, dass Vorgabe.clean() ValidationError bei Konflikten auslöst
-
-### Management-Befehl-Tests
-
-#### SanityCheckManagementCommandTest
-- **test_sanity_check_command_no_conflicts**: Testet Management-Befehlsausgabe ohne Konflikte
-- **test_sanity_check_command_with_conflicts**: Testet Management-Befehlsausgabe mit Konflikten
-
-### URL-Pattern-Tests
-
-#### URLPatternsTest
-- **test_standard_list_url_resolves**: Überprüft, dass standard_list URL zur korrekten View aufgelöst wird
-- **test_standard_detail_url_resolves**: Überprüft, dass standard_detail URL mit pk-Parameter aufgelöst wird
-- **test_standard_history_url_resolves**: Überprüft, dass standard_history URL mit check_date aufgelöst wird
-- **test_standard_checkliste_url_resolves**: Überprüft, dass standard_checkliste URL mit pk aufgelöst wird
-
-### View-Tests
-
-#### ViewsTestCase
-- **test_standard_list_view**: Testet, dass die Standard-Listen-View 200 zurückgibt und erwartete Inhalte enthält
-- **test_standard_detail_view**: Testet die Standard-Detail-View mit existierendem Dokument
-- **test_standard_detail_view_404**: Testet, dass die Standard-Detail-View 404 für nicht existierendes Dokument zurückgibt
-- **test_standard_history_view**: Testet die Standard-Detail-View mit historischem check_date-Parameter
-- **test_standard_checkliste_view**: Testet die Funktionalität der Checklisten-View
-
-### JSON-Export-Tests
-
-#### JSONExportManagementCommandTest
-- **test_export_json_command_to_file**: Testet, dass der export_json-Befehl JSON in die angegebene Datei ausgibt
-- **test_export_json_command_stdout**: Testet, dass der export_json-Befehl JSON an stdout ausgibt, wenn keine Datei angegeben ist
-- **test_export_json_command_inactive_documents**: Testet, dass der export_json-Befehl inaktive Dokumente herausfiltert
-- **test_export_json_command_empty_database**: Testet, dass der export_json-Befehl leere Datenbank angemessen behandelt
-
-#### StandardJSONViewTest
-- **test_standard_json_view_success**: Testet, dass die standard_json-View korrektes JSON für existierendes Dokument zurückgibt
-- **test_standard_json_view_not_found**: Testet, dass die standard_json-View 404 für nicht existierendes Dokument zurückgibt
-- **test_standard_json_view_json_formatting**: Testet, dass die standard_json-View korrekt formatiertes JSON zurückgibt
-- **test_standard_json_view_null_dates**: Testet, dass die standard_json-View null-Datumfelder korrekt behandelt
-- **test_standard_json_view_empty_sections**: Testet, dass die standard_json-View leere Dokumentabschnitte behandelt
-
-### Unvollständige Vorgaben Tests
-
-#### IncompleteVorgabenTest
-- **test_incomplete_vorgaben_page_status**: Testet, dass die Seite erfolgreich lädt (200-Status)
-- **test_incomplete_vorgaben_staff_only**: Testet, dass Nicht-Staff-Benutzer zum Login weitergeleitet werden
-- **test_incomplete_vorgaben_page_content**: Testet, dass die Seite erwartete Überschriften und Struktur enthält
-- **test_navigation_link**: Testet, dass die Navigation einen Link zur unvollständigen Vorgaben-Seite enthält
-- **test_no_references_list**: Testet, dass Vorgaben ohne Referenzen korrekt aufgelistet werden
-- **test_no_stichworte_list**: Testet, dass Vorgaben ohne Stichworte korrekt aufgelistet werden
-- **test_no_text_list**: Testet, dass Vorgaben ohne Kurz- oder Langtext korrekt aufgelistet werden
-- **test_no_checklistenfragen_list**: Testet, dass Vorgaben ohne Checklistenfragen korrekt aufgelistet werden
-- **test_vorgabe_with_both_text_types**: Testet, dass Vorgabe mit beiden Texttypen als vollständig betrachtet wird
-- **test_vorgabe_with_langtext_only**: Testet, dass Vorgabe mit nur Langtext immer noch unvollständig für Text ist
-- **test_empty_lists_message**: Testet angemessene Nachrichten, wenn Listen leer sind
-- **test_badge_counts**: Testet, dass Badge-Zähler korrekt berechnet werden
-- **test_summary_section**: Testet, dass die Zusammenfassungssektion korrekte Zähler anzeigt
-- **test_vorgabe_links**: Testet, dass Vorgaben zu korrekten Admin-Seiten verlinken
-- **test_back_link**: Testet, dass der Zurück-Link zur Standardübersicht existiert
-
----
-
-## pages App Tests
-
-Die pages App enthält 4 Tests, die sich auf die Suchfunktionalität und Validierung konzentrieren.
-
-### ViewsTestCase
-- **test_search_view_get**: Testet GET-Anfrage an die Search-View gibt 200-Status zurück
-- **test_search_view_post_with_query**: Testet POST-Anfrage mit Query gibt Ergebnisse zurück
-- **test_search_view_post_empty_query**: Testet POST-Anfrage mit leerer Query zeigt Validierungsfehler
-- **test_search_view_post_no_query**: Testet POST-Anfrage ohne Query-Parameter zeigt Validierungsfehler
-
----
-
-## referenzen App Tests
-
-Die referenzen App enthält 18 Tests, die sich auf MPTT-Hierarchiefunktionalität und Modellbeziehungen konzentrieren.
-
-### Modell-Tests
-
-#### ReferenzModelTest
-- **test_referenz_creation**: Testet die Erstellung von Referenz mit erforderlichen Feldern
-- **test_referenz_str**: Testet die String-Repräsentation gibt den Referenztext zurück
-- **test_referenz_ordering**: Testet die Standard-Sortierung nach `order`-Feld
-- **test_referenz_optional_fields**: Testet, dass optionale Felder leer sein können
-
-#### ReferenzerklaerungModelTest
-- **test_referenzerklaerung_creation**: Testet die Erstellung von Referenzerklaerung mit Referenz und Erklärung
-- **test_referenzerklaerung_str**: Testet die String-Repräsentation enthält Referenz und Erklärungsvorschau
-- **test_referenzerklaerung_ordering**: Testet die Standard-Sortierung nach `order`-Feld
-- **test_referenzerklaerung_optional_explanation**: Testet, dass das Erklärungsfeld leer sein kann
-
-### Hierarchie-Tests
-
-#### ReferenzHierarchyTest
-- **test_hierarchy_relationships**: Testet Eltern-Kind-Beziehungen im MPTT-Baum
-- **test_get_root**: Testet das Abrufen des Wurzelknotens einer Hierarchie
-- **test_get_children**: Testet das Abrufen direkter Kinder eines Knotens
-- **test_get_descendants**: Testet das Abrufen aller Nachkommen eines Knotens
-- **test_get_ancestors**: Testet das Abrufen aller Vorfahren eines Knotens
-- **test_get_ancestors_include_self**: Testet das Abrufen von Vorfahren einschließlich des Knotens selbst
-- **test_is_leaf_node**: Testet die Erkennung von Blattknoten
-- **test_is_root_node**: Testet die Erkennung von Wurzelknoten
-- **test_tree_ordering**: Testet die Baum-Sortierung mit mehreren Ebenen
-- **test_move_node**: Testet das Verschieben von Knoten innerhalb der Baumstruktur
-
----
-
-## rollen App Tests
-
-Die rollen App enthält 18 Tests, die Rollenmodelle und ihre Beziehungen zu Dokumentabschnitten abdecken.
-
-### Modell-Tests
-
-#### RolleModelTest
-- **test_rolle_creation**: Testet die Erstellung von Rolle mit Name und optionaler Beschreibung
-- **test_rolle_str**: Testet die String-Repräsentation gibt den Rollennamen zurück
-- **test_rolle_ordering**: Testet die Standard-Sortierung nach `order`-Feld
-- **test_rolle_unique_name**: Testet, dass Rollennamen einzigartig sein müssen
-- **test_rolle_optional_beschreibung**: Testet, dass das Beschreibungsfeld leer sein kann
-
-#### RollenBeschreibungModelTest
-- **test_rollenbeschreibung_creation**: Testet die Erstellung von RollenBeschreibung mit Rolle und Abschnittstyp
-- **test_rollenbeschreibung_str**: Testet die String-Repräsentation enthält Rolle und Abschnittstyp
-- **test_rollenbeschreibung_ordering**: Testet die Standard-Sortierung nach `order`-Feld
-- **test_rollenbeschreibung_unique_combination**: Testet die Unique-Constraint auf Rolle und Abschnittstyp
-- **test_rollenbeschreibung_optional_beschreibung**: Testet, dass das Beschreibungsfeld leer sein kann
-
-### Beziehungs-Tests
-
-#### RelationshipTest
-- **test_rolle_rollenbeschreibung_relationship**: Testet die Eins-zu-viele-Beziehung zwischen Rolle und RollenBeschreibung
-- **test_abschnitttyp_rollenbeschreibung_relationship**: Testet die Beziehung zwischen AbschnittTyp und RollenBeschreibung
-- **test_cascade_delete**: Testet das Cascade-Delete-Verhalten beim Löschen einer Rolle
-- **test_protected_delete**: Testet das Protected-Delete-Verhalten, wenn Abschnittstyp referenziert wird
-- **test_query_related_objects**: Testet das effiziente Abfragen verwandter Objekte
-- **test_string_representations**: Testet, dass alle String-Repräsentationen korrekt funktionieren
-- **test_ordering_consistency**: Testet, dass die Sortierung über Abfragen hinweg konsistent ist
-
----
-
-## stichworte App Tests
-
-Die stichworte App enthält 18 Tests, die Schlüsselwortmodelle und ihre Sortierung abdecken.
-
-### Modell-Tests
-
-#### StichwortModelTest
-- **test_stichwort_creation**: Testet die Erstellung von Stichwort mit Schlüsselworttext
-- **test_stichwort_str**: Testet die String-Repräsentation gibt den Schlüsselworttext zurück
-- **test_stichwort_ordering**: Testet die Standard-Sortierung nach `stichwort`-Feld
-- **test_stichwort_unique**: Testet, dass Schlüsselwörter einzigartig sein müssen
-- **test_stichwort_case_insensitive**: Testet die Groß-/Kleinschreibungs-unabhängige Eindeutigkeit
-
-#### StichworterklaerungModelTest
-- **test_stichworterklaerung_creation**: Testet die Erstellung von Stichworterklaerung mit Schlüsselwort und Erklärung
-- **test_stichworterklaerung_str**: Testet die String-Repräsentation enthält Schlüsselwort und Erklärungsvorschau
-- **test_stichworterklaerung_ordering**: Testet die Standard-Sortierung nach `order`-Feld
-- **test_stichworterklaerung_optional_erklaerung**: Testet, dass das Erklärungsfeld leer sein kann
-- **test_stichworterklaerung_unique_stichwort**: Testet den Unique-Constraint auf das Schlüsselwort
-
-### Beziehungs-Tests
-
-#### RelationshipTest
-- **test_stichwort_stichworterklaerung_relationship**: Testet die Eins-zu-eins-Beziehung zwischen Stichwort und Stichworterklaerung
-- **test_cascade_delete**: Testet das Cascade-Delete-Verhalten beim Löschen eines Schlüsselworts
-- **test_protected_delete**: Testet das Protected-Delete-Verhalten, wenn Erklärung referenziert wird
-- **test_query_related_objects**: Testet das effiziente Abfragen verwandter Objekte
-- **test_string_representations**: Testet, dass alle String-Repräsentationen korrekt funktionieren
-- **test_ordering_consistency**: Testet, dass die Sortierung über Abfragen hinweg konsistent ist
-- **test_reverse_relationship**: Testet die umgekehrte Beziehung von Erklärung zu Schlüsselwort
-
----
-
-## Test-Statistiken
-
-- **Gesamt-Tests**: 206
-- **abschnitte**: 32 Tests
-- **dokumente**: 116 Tests (98 in tests.py + 9 in test_json.py + 9 JSON-Tests in Haupt-tests.py)
-- **pages**: 4 Tests
-- **referenzen**: 18 Tests
-- **rollen**: 18 Tests
-- **stichworte**: 18 Tests
-
-## Test-Abdeckungsbereiche
-
-1. **Modell-Validierung**: Feldvalidierung, Constraints und Beziehungen
-2. **Geschäftslogik**: Statusbestimmung, Konflikterkennung, Hierarchieverwaltung
-3. **View-Funktionalität**: HTTP-Antworten, Template-Rendering, URL-Auflösung
-4. **Utility-Funktionen**: Textverarbeitung, Caching, Formatierung
-5. **Management-Befehle**: CLI-Schnittstelle und Ausgabeverarbeitung
-6. **Integration**: App-übergreifende Funktionalität und Datenfluss
-
-## Ausführen der Tests
-
-Um alle Tests auszuführen:
-```bash
-python manage.py test
-```
-
-Um Tests für eine spezifische App auszuführen:
-```bash
-python manage.py test app_name
-```
-
-Um mit ausführlicher Ausgabe auszuführen:
-```bash
-python manage.py test --verbosity=2
-```
-
-Alle Tests laufen derzeit erfolgreich und bieten umfassende Abdeckung der Funktionalität der Anwendung.

Test suite.md

@@ -1,369 +0,0 @@
-# Test Suite Documentation
-
-This document provides a comprehensive overview of all tests in the vgui-cicd Django project, describing what each test does and how it works.
-
-## Table of Contents
-
-- [abschnitte App Tests](#abschnitte-app-tests)
-- [dokumente App Tests](#dokumente-app-tests)
-- [pages App Tests](#pages-app-tests)
-- [referenzen App Tests](#referenzen-app-tests)
-- [rollen App Tests](#rollen-app-tests)
-- [stichworte App Tests](#stichworte-app-tests)
-
----
-
-## abschnitte App Tests
-
-The abschnitte app contains 32 tests covering models, utility functions, diagram caching, and management commands.
-
-### Model Tests
-
-#### AbschnittTypModelTest
-- **test_abschnitttyp_creation**: Verifies that AbschnittTyp objects are created correctly with the expected field values
-- **test_abschnitttyp_primary_key**: Confirms that the `abschnitttyp` field serves as the primary key
-- **test_abschnitttyp_str**: Tests the string representation returns the `abschnitttyp` value
-- **test_abschnitttyp_verbose_name_plural**: Validates the verbose name plural is set correctly
-- **test_create_multiple_abschnitttypen**: Ensures multiple AbschnittTyp objects can be created with different types
-
-#### TextabschnittModelTest
-- **test_textabschnitt_creation**: Tests that Textabschnitt can be instantiated through the concrete model
-- **test_textabschnitt_default_order**: Verifies the `order` field defaults to 0
-- **test_textabschnitt_ordering**: Tests that Textabschnitt objects can be ordered by the `order` field
-- **test_textabschnitt_blank_fields**: Confirms that `abschnitttyp` and `inhalt` fields can be blank/null
-- **test_textabschnitt_foreign_key_protection**: Tests that AbschnittTyp objects are protected from deletion when referenced by Textabschnitt
-
-### Utility Function Tests
-
-#### MdTableToHtmlTest
-- **test_simple_table**: Converts a basic markdown table with headers and one row to HTML
-- **test_table_with_multiple_rows**: Tests conversion of tables with multiple data rows
-- **test_table_with_empty_cells**: Handles tables with empty cells in the data
-- **test_table_with_spaces**: Processes tables with extra spaces in cells
-- **test_table_empty_string**: Raises ValueError for empty input strings
-- **test_table_only_whitespace**: Raises ValueError for strings containing only whitespace
-- **test_table_insufficient_lines**: Raises ValueError when input has fewer than 2 lines
-
-#### RenderTextabschnitteTest
-- **test_render_empty_queryset**: Returns empty string for empty querysets
-- **test_render_multiple_abschnitte**: Renders multiple Textabschnitte in correct order
-- **test_render_text_markdown**: Converts plain text with markdown formatting
-- **test_render_ordered_list**: Renders ordered lists correctly
-- **test_render_unordered_list**: Renders unordered lists correctly
-- **test_render_code_block**: Renders code blocks with proper syntax highlighting
-- **test_render_table**: Converts markdown tables to HTML using md_table_to_html
-- **test_render_diagram_success**: Tests diagram generation with successful caching
-- **test_render_diagram_error**: Handles diagram generation errors gracefully
-- **test_render_diagram_with_options**: Tests diagram rendering with custom options
-- **test_render_text_with_footnotes**: Processes text containing footnotes
-- **test_render_abschnitt_without_type**: Handles Textabschnitte without AbschnittTyp
-- **test_render_abschnitt_with_empty_content**: Handles Textabschnitte with empty content
-
-### Diagram Caching Tests
-
-#### DiagramCacheTest
-- **test_compute_hash**: Generates consistent SHA256 hashes for the same input
-- **test_get_cache_path**: Creates correct cache file paths based on hash and type
-- **test_get_cached_diagram_hit**: Returns cached diagram when cache hit occurs
-- **test_get_cached_diagram_miss**: Generates new diagram when cache miss occurs
-- **test_get_cached_diagram_request_error**: Properly handles and raises request errors
-- **test_clear_cache_specific_type**: Clears cache files for specific diagram types
-- **test_clear_cache_all_types**: Clears all cache files when no type specified
-
-### Management Command Tests
-
-#### ClearDiagramCacheCommandTest
-- **test_command_without_type**: Tests management command execution without specifying type
-- **test_command_with_type**: Tests management command execution with specific diagram type
-
-### Integration Tests
-
-#### IntegrationTest
-- **test_textabschnitt_inheritance**: Verifies VorgabeLangtext properly inherits Textabschnitt fields
-- **test_render_vorgabe_langtext**: Tests rendering VorgabeLangtext through render_textabschnitte
-
----
-
-## dokumente App Tests
-
-The dokumente app contains 98 tests, making it the most comprehensive test suite, covering all models, views, URLs, and business logic.
-
-### Model Tests
-
-#### DokumententypModelTest
-- **test_dokumententyp_creation**: Verifies Dokumententyp creation with correct field values
-- **test_dokumententyp_str**: Tests string representation returns the `typ` field
-- **test_dokumententyp_verbose_name**: Validates verbose name is set correctly
-
-#### PersonModelTest
-- **test_person_creation**: Tests Person object creation with name and optional title
-- **test_person_str**: Verifies string representation includes title and name
-- **test_person_verbose_name_plural**: Tests verbose name plural configuration
-
-#### ThemaModelTest
-- **test_thema_creation**: Tests Thema creation with name and optional explanation
-- **test_thema_str**: Verifies string representation returns the theme name
-- **test_thema_blank_erklaerung**: Confirms `erklaerung` field can be blank
-
-#### DokumentModelTest
-- **test_dokument_creation**: Tests Dokument creation with required and optional fields
-- **test_dokument_str**: Verifies string representation returns the document title
-- **test_dokument_optional_fields**: Tests that optional fields can be None or blank
-- **test_dokument_many_to_many_relationships**: Verifies many-to-many relationships with Personen and Themen
-
-#### VorgabeModelTest
-- **test_vorgabe_creation**: Tests Vorgabe creation with all required fields
-- **test_vorgabe_str**: Verifies string representation returns the Vorgabennummer
-- **test_vorgabennummer**: Tests automatic generation of Vorgabennummer format
-- **test_get_status_active**: Tests status determination for current active Vorgaben
-- **test_get_status_expired**: Tests status determination for expired Vorgaben
-- **test_get_status_future**: Tests status determination for future Vorgaben
-- **test_get_status_with_custom_check_date**: Tests status with custom check date
-- **test_get_status_verbose**: Tests verbose status output
-
-#### ChangelogModelTest
-- **test_changelog_creation**: Tests Changelog creation with version, date, and description
-- **test_changelog_str**: Verifies string representation includes version and date
-
-#### ChecklistenfrageModelTest
-- **test_checklistenfrage_creation**: Tests Checklistenfrage creation with question and optional answer
-- **test_checklistenfrage_str**: Verifies string representation truncates long questions
-- **test_checklistenfrage_related_name**: Tests the reverse relationship from Vorgabe
-
-### Text Abschnitt Tests
-
-#### DokumentTextAbschnitteTest
-- **test_einleitung_creation**: Tests Einleitung creation and inheritance from Textabschnitt
-- **test_geltungsbereich_creation**: Tests Geltungsbereich creation and inheritance
-
-#### VorgabeTextAbschnitteTest
-- **test_vorgabe_kurztext_creation**: Tests VorgabeKurztext creation and inheritance
-- **test_vorgabe_langtext_creation**: Tests VorgabeLangtext creation and inheritance
-
-### Sanity Check Tests
-
-#### VorgabeSanityCheckTest
-- **test_date_ranges_intersect_no_overlap**: Tests date intersection with non-overlapping ranges
-- **test_date_ranges_intersect_with_overlap**: Tests date intersection with overlapping ranges
-- **test_date_ranges_intersect_identical_ranges**: Tests date intersection with identical ranges
-- **test_date_ranges_intersect_with_none_end_date**: Tests intersection with open-ended ranges
-- **test_date_ranges_intersect_both_none_end_dates**: Tests intersection with two open-ended ranges
-- **test_check_vorgabe_conflicts_utility**: Tests the utility function for conflict detection
-- **test_find_conflicts_no_conflicts**: Tests conflict detection on Vorgabe without conflicts
-- **test_find_conflicts_with_conflicts**: Tests conflict detection with conflicting Vorgaben
-- **test_format_conflict_report_no_conflicts**: Tests conflict report formatting with no conflicts
-- **test_format_conflict_report_with_conflicts**: Tests conflict report formatting with conflicts
-- **test_sanity_check_vorgaben_no_conflicts**: Tests full sanity check with no conflicts
-- **test_sanity_check_vorgaben_with_conflicts**: Tests full sanity check with conflicts
-- **test_sanity_check_vorgaben_multiple_conflicts**: Tests sanity check with multiple conflict groups
-- **test_vorgabe_clean_no_conflicts**: Tests Vorgabe.clean() method without conflicts
-- **test_vorgabe_clean_with_conflicts**: Tests Vorgabe.clean() raises ValidationError with conflicts
-
-### Management Command Tests
-
-#### SanityCheckManagementCommandTest
-- **test_sanity_check_command_no_conflicts**: Tests management command output with no conflicts
-- **test_sanity_check_command_with_conflicts**: Tests management command output with conflicts
-
-### URL Pattern Tests
-
-#### URLPatternsTest
-- **test_standard_list_url_resolves**: Verifies standard_list URL resolves to correct view
-- **test_standard_detail_url_resolves**: Verifies standard_detail URL resolves with pk parameter
-- **test_standard_history_url_resolves**: Verifies standard_history URL resolves with check_date
-- **test_standard_checkliste_url_resolves**: Verifies standard_checkliste URL resolves with pk
-
-### View Tests
-
-#### ViewsTestCase
-- **test_standard_list_view**: Tests standard list view returns 200 and contains expected content
-- **test_standard_detail_view**: Tests standard detail view with existing document
-- **test_standard_detail_view_404**: Tests standard detail view returns 404 for non-existent document
-- **test_standard_history_view**: Tests standard detail view with historical check_date parameter
-- **test_standard_checkliste_view**: Tests checklist view functionality
-
-### JSON Export Tests
-
-#### JSONExportManagementCommandTest
-- **test_export_json_command_to_file**: Tests export_json command outputs JSON to specified file
-- **test_export_json_command_stdout**: Tests export_json command outputs JSON to stdout when no file specified
-- **test_export_json_command_inactive_documents**: Tests export_json command filters out inactive documents
-- **test_export_json_command_empty_database**: Tests export_json command handles empty database gracefully
-
-#### StandardJSONViewTest
-- **test_standard_json_view_success**: Tests standard_json view returns correct JSON for existing document
-- **test_standard_json_view_not_found**: Tests standard_json view returns 404 for non-existent document
-- **test_standard_json_view_json_formatting**: Tests standard_json view returns properly formatted JSON
-- **test_standard_json_view_null_dates**: Tests standard_json view handles null date fields correctly
-- **test_standard_json_view_empty_sections**: Tests standard_json view handles empty document sections
-
-### Incomplete Vorgaben Tests
-
-#### IncompleteVorgabenTest
-- **test_incomplete_vorgaben_page_status**: Tests page loads successfully (200 status)
-- **test_incomplete_vorgaben_staff_only**: Tests non-staff users are redirected to login
-- **test_incomplete_vorgaben_page_content**: Tests page contains expected headings and structure
-- **test_navigation_link**: Tests navigation includes link to incomplete Vorgaben page
-- **test_no_references_list**: Tests Vorgaben without references are listed correctly
-- **test_no_stichworte_list**: Tests Vorgaben without Stichworte are listed correctly
-- **test_no_text_list**: Tests Vorgaben without Kurz- or Langtext are listed correctly
-- **test_no_checklistenfragen_list**: Tests Vorgaben without Checklistenfragen are listed correctly
-- **test_vorgabe_with_both_text_types**: Tests Vorgabe with both text types is considered complete
-- **test_vorgabe_with_langtext_only**: Tests Vorgabe with only Langtext is still incomplete for text
-- **test_empty_lists_message**: Tests appropriate messages when lists are empty
-- **test_badge_counts**: Tests badge counts are calculated correctly
-- **test_summary_section**: Tests summary section shows correct counts
-- **test_vorgabe_links**: Tests Vorgaben link to correct admin pages
-- **test_back_link**: Tests back link to standard list exists
-
----
-
-## pages App Tests
-
-The pages app contains 4 tests focusing on search functionality and validation.
-
-### ViewsTestCase
-- **test_search_view_get**: Tests GET request to search view returns 200 status
-- **test_search_view_post_with_query**: Tests POST request with query returns results
-- **test_search_view_post_empty_query**: Tests POST request with empty query shows validation error
-- **test_search_view_post_no_query**: Tests POST request without query parameter shows validation error
-
----
-
-## referenzen App Tests
-
-The referenzen app contains 18 tests focusing on MPTT hierarchy functionality and model relationships.
-
-### Model Tests
-
-#### ReferenzModelTest
-- **test_referenz_creation**: Tests Referenz creation with required fields
-- **test_referenz_str**: Tests string representation returns the reference text
-- **test_referenz_ordering**: Tests default ordering by `order` field
-- **test_referenz_optional_fields**: Tests optional fields can be blank
-
-#### ReferenzerklaerungModelTest
-- **test_referenzerklaerung_creation**: Tests Referenzerklaerung creation with reference and explanation
-- **test_referenzerklaerung_str**: Tests string representation includes reference and explanation preview
-- **test_referenzerklaerung_ordering**: Tests default ordering by `order` field
-- **test_referenzerklaerung_optional_explanation**: Tests explanation field can be blank
-
-### Hierarchy Tests
-
-#### ReferenzHierarchyTest
-- **test_hierarchy_relationships**: Tests parent-child relationships in MPTT tree
-- **test_get_root**: Tests getting the root node of a hierarchy
-- **test_get_children**: Tests getting direct children of a node
-- **test_get_descendants**: Tests getting all descendants of a node
-- **test_get_ancestors**: Tests getting all ancestors of a node
-- **test_get_ancestors_include_self**: Tests getting ancestors including the node itself
-- **test_is_leaf_node**: Tests leaf node detection
-- **test_is_root_node**: Tests root node detection
-- **test_tree_ordering**: Tests tree ordering with multiple levels
-- **test_move_node**: Tests moving nodes within the tree structure
-
----
-
-## rollen App Tests
-
-The rollen app contains 18 tests covering role models and their relationships with document sections.
-
-### Model Tests
-
-#### RolleModelTest
-- **test_rolle_creation**: Tests Rolle creation with name and optional description
-- **test_rolle_str**: Tests string representation returns the role name
-- **test_rolle_ordering**: Tests default ordering by `order` field
-- **test_rolle_unique_name**: Tests that role names must be unique
-- **test_rolle_optional_beschreibung**: Tests description field can be blank
-
-#### RollenBeschreibungModelTest
-- **test_rollenbeschreibung_creation**: Tests RollenBeschreibung creation with role and section type
-- **test_rollenbeschreibung_str**: Tests string representation includes role and section type
-- **test_rollenbeschreibung_ordering**: Tests default ordering by `order` field
-- **test_rollenbeschreibung_unique_combination**: Tests unique constraint on role and section type
-- **test_rollenbeschreibung_optional_beschreibung**: Tests description field can be blank
-
-### Relationship Tests
-
-#### RelationshipTest
-- **test_rolle_rollenbeschreibung_relationship**: Tests one-to-many relationship between Rolle and RollenBeschreibung
-- **test_abschnitttyp_rollenbeschreibung_relationship**: Tests relationship between AbschnittTyp and RollenBeschreibung
-- **test_cascade_delete**: Tests cascade delete behavior when role is deleted
-- **test_protected_delete**: Tests protected delete behavior when section type is referenced
-- **test_query_related_objects**: Tests querying related objects efficiently
-- **test_string_representations**: Tests all string representations work correctly
-- **test_ordering_consistency**: Tests ordering is consistent across queries
-
----
-
-## stichworte App Tests
-
-The stichworte app contains 18 tests covering keyword models and their ordering.
-
-### Model Tests
-
-#### StichwortModelTest
-- **test_stichwort_creation**: Tests Stichwort creation with keyword text
-- **test_stichwort_str**: Tests string representation returns the keyword text
-- **test_stichwort_ordering**: Tests default ordering by `stichwort` field
-- **test_stichwort_unique**: Tests that keywords must be unique
-- **test_stichwort_case_insensitive**: Tests case-insensitive uniqueness
-
-#### StichworterklaerungModelTest
-- **test_stichworterklaerung_creation**: Tests Stichworterklaerung creation with keyword and explanation
-- **test_stichworterklaerung_str**: Tests string representation includes keyword and explanation preview
-- **test_stichworterklaerung_ordering**: Tests default ordering by `order` field
-- **test_stichworterklaerung_optional_erklaerung**: Tests explanation field can be blank
-- **test_stichworterklaerung_unique_stichwort**: Tests unique constraint on keyword
-
-### Relationship Tests
-
-#### RelationshipTest
-- **test_stichwort_stichworterklaerung_relationship**: Tests one-to-one relationship between Stichwort and Stichworterklaerung
-- **test_cascade_delete**: Tests cascade delete behavior when keyword is deleted
-- **test_protected_delete**: Tests protected delete behavior when explanation is referenced
-- **test_query_related_objects**: Tests querying related objects efficiently
-- **test_string_representations**: Tests all string representations work correctly
-- **test_ordering_consistency**: Tests ordering is consistent across queries
-- **test_reverse_relationship**: Tests reverse relationship from explanation to keyword
-
----
-
-## Test Statistics
-
-- **Total Tests**: 206
-- **abschnitte**: 32 tests
-- **dokumente**: 116 tests (98 in tests.py + 9 in test_json.py + 9 JSON tests in main tests.py)
-- **pages**: 4 tests
-- **referenzen**: 18 tests
-- **rollen**: 18 tests
-- **stichworte**: 18 tests
-
-## Test Coverage Areas
-
-1. **Model Validation**: Field validation, constraints, and relationships
-2. **Business Logic**: Status determination, conflict detection, hierarchy management
-3. **View Functionality**: HTTP responses, template rendering, URL resolution
-4. **Utility Functions**: Text processing, caching, formatting
-5. **Management Commands**: CLI interface and output handling
-6. **Integration**: Cross-app functionality and data flow
-
-## Running the Tests
-
-To run all tests:
-```bash
-python manage.py test
-```
-
-To run tests for a specific app:
-```bash
-python manage.py test app_name
-```
-
-To run with verbose output:
-```bash
-python manage.py test --verbosity=2
-```
-
-All tests are currently passing and provide comprehensive coverage of the application's functionality.

VorgabenUI/settings.py

@@ -51,6 +51,7 @@ INSTALLED_APPS = [
     'mptt',
     'pages',
     'nested_admin',
+    'revproxy.apps.RevProxyConfig',
 ]
 
 MIDDLEWARE = [

VorgabenUI/urls.py

@@ -18,6 +18,7 @@ from django.contrib import admin
 from django.urls import include, path, re_path
 from django.conf import settings
 from django.conf.urls.static import static
+from diagramm_proxy.views import DiagrammProxyView
 import dokumente.views
 import pages.views
 import referenzen.views
@@ -25,13 +26,14 @@ import referenzen.views
 admin.site.site_header="Autorenumgebung"
 
 urlpatterns = [
-    path('',pages.views.startseite),
-    path('search/',pages.views.search),
+    path('',pages.views.startseite, name='startseite'),
+    path('search/',pages.views.search, name='search'),
     path('dokumente/', include("dokumente.urls")),
     path('autorenumgebung/', admin.site.urls),
     path('stichworte/', include("stichworte.urls")),
     path('referenzen/', referenzen.views.tree, name="referenz_tree"),
     path('referenzen/<str:refid>/', referenzen.views.detail, name="referenz_detail"),
+    re_path(r'^diagramm/(?P<path>.*)$', DiagrammProxyView.as_view()),
 ]
 
 # Serve static files

argocd/deployment.yaml

@@ -25,7 +25,7 @@ spec:
               mountPath: /data
       containers:
         - name: web
-          image: git.baumann.gr/adebaumann/vui:0.945
+          image: git.baumann.gr/adebaumann/vui:0.942
           imagePullPolicy: Always
           ports:
             - containerPort: 8000

diagramm_proxy/__init__.py

@@ -0,0 +1 @@
+# Diagram proxy module

diagramm_proxy/views.py

@@ -0,0 +1,4 @@
+from revproxy.views import ProxyView
+
+class DiagrammProxyView(ProxyView):
+    upstream = "http://svckroki:8000/"

dokumente/admin.py

@@ -2,7 +2,6 @@ from django.contrib import admin
 #from nested_inline.admin import NestedStackedInline, NestedModelAdmin
 from nested_admin import NestedStackedInline, NestedModelAdmin, NestedTabularInline
 from django import forms
-from django.utils.html import format_html
 from mptt.forms import TreeNodeMultipleChoiceField
 from mptt.admin import DraggableMPTTAdmin
 from adminsortable2.admin import SortableInlineAdminMixin, SortableAdminBase
@@ -133,57 +132,9 @@ class StichworterklaerungInline(NestedTabularInline):
 
 @admin.register(Stichwort)
 class StichwortAdmin(NestedModelAdmin):
-    list_display = ('stichwort', 'vorgaben_count')
     search_fields = ('stichwort',)
     ordering=('stichwort',)
     inlines=[StichworterklaerungInline]
-    readonly_fields = ('vorgaben_list',)
-    fieldsets = (
-        (None, {
-            'fields': ('stichwort', 'vorgaben_list')
-        }),
-    )
-    
-    def vorgaben_count(self, obj):
-        """Count the number of Vorgaben that have this Stichwort"""
-        count = obj.vorgabe_set.count()
-        return f"{count} Vorgabe{'n' if count != 1 else ''}"
-    vorgaben_count.short_description = "Anzahl Vorgaben"
-    
-    def vorgaben_list(self, obj):
-        """Display list of Vorgaben that use this Stichwort"""
-        vorgaben = obj.vorgabe_set.select_related('dokument', 'thema').order_by('dokument__nummer', 'nummer')
-        vorgaben_list = list(vorgaben)  # Evaluate queryset once
-        count = len(vorgaben_list)
-        
-        if count == 0:
-            return format_html("<em>Keine Vorgaben gefunden</em><p><strong>Gesamt: 0 Vorgaben</strong></p>")
-        
-        html = "<div style='max-height: 300px; overflow-y: auto;'>"
-        html += "<table style='width: 100%; border-collapse: collapse;'>"
-        html += "<thead><tr style='background-color: #f5f5f5;'>"
-        html += "<th style='padding: 8px; border: 1px solid #ddd; text-align: left;'>Vorgabe</th>"
-        html += "<th style='padding: 8px; border: 1px solid #ddd; text-align: left;'>Titel</th>"
-        html += "<th style='padding: 8px; border: 1px solid #ddd; text-align: left;'>Dokument</th>"
-        html += "</tr></thead>"
-        html += "<tbody>"
-        
-        for vorgabe in vorgaben_list:
-            html += "<tr>"
-            html += f"<td style='padding: 6px; border: 1px solid #ddd;'>{vorgabe.Vorgabennummer()}</td>"
-            html += f"<td style='padding: 6px; border: 1px solid #ddd;'>{vorgabe.titel}</td>"
-            html += f"<td style='padding: 6px; border: 1px solid #ddd;'>{vorgabe.dokument.nummer} – {vorgabe.dokument.name}</td>"
-            html += "</tr>"
-        
-        html += "</tbody></table>"
-        html += f"</div><p><strong>Gesamt: {count} Vorgabe{'n' if count != 1 else ''}</strong></p>"
-        
-        return format_html(html)
-    vorgaben_list.short_description = "Zugeordnete Vorgaben"
-    
-    def get_queryset(self, request):
-        """Optimize queryset with related data"""
-        return super().get_queryset(request).prefetch_related('vorgabe_set')
 
 @admin.register(Person)
 class PersonAdmin(admin.ModelAdmin):    

dokumente/templates/standards/standard_detail.html

@@ -1,110 +1,403 @@
 {% extends "base.html" %}
-{% block title %}{{ standard }}{% endblock %}
+{% block title %}{{ standard.nummer }} – {{ standard.name }}{% endblock %}
+{% block breadcrumb_items %}
+<li class="breadcrumb-item"><a href="{% url 'standard_list' %}">Standards</a></li>
+<li class="breadcrumb-item active" aria-current="page">{{ standard.nummer }}</li>
+{% endblock %}
+
 {% block content %}
-<h1>{{ standard.nummer }} – {{ standard.name }}</h1>
-{% if standard.history == True %}
-<h2>Version vom {{ standard.check_date }}</h2>
-{% endif %}
-<!-- Autoren, Prüfende etc. -->
-<p><strong>Autoren:</strong> {{ standard.autoren.all|join:", " }}</p>
-<p><strong>Prüfende:</strong> {{ standard.pruefende.all|join:", " }}</p>
-<p><strong>Gültigkeit:</strong> {{ standard.gueltigkeit_von }} bis {{ standard.gueltigkeit_bis|default_if_none:"auf weiteres" }}</p>
-<p><a href="{% url 'standard_json' standard.nummer %}" class="button" download="{{ standard.nummer }}.json">JSON herunterladen</a></p>
-
-<!-- Start Einleitung -->
-{% if standard.einleitung_html %}
-<h2>Einleitung</h2>
-{% for typ, html in standard.einleitung_html %}
-<div>{{ html|safe }}</div>
-{% endfor %}
-{% endif %}
-<!-- End Einleitung -->
-
-<!-- Start Geltungsbereich -->
-{% if standard.geltungsbereich_html %}
-<h2>Geltungsbereich</h2>
-{% for typ, html in standard.geltungsbereich_html %}
-<div>{{ html|safe }}</div>
-{% endfor %}
-{% endif %}
-<!-- End Geltungsbereich -->
-
-<h2>Vorgaben</h2>
-{% for vorgabe in vorgaben %}
-<!-- Start Vorgabe -->
-{% if standard.history == True or vorgabe.long_status == "active" %}
-  <a id="{{ vorgabe.Vorgabennummer }}"></a><div class="card mb-4">
-    {% if vorgabe.long_status == "active"%}
-    <div class="card-header d-flex justify-content-between align-items-center bg-secondary text-light">
-    {% elif standard.history == True %}
-    <div class="card-header d-flex justify-content-between align-items-center bg-danger-subtle">
-    {% endif %}
-     <h3 class="h5 m-0">{{ vorgabe.Vorgabennummer }} – {{ vorgabe.titel }}
-        {% if vorgabe.long_status != "active"  and standard.history == True %}<span class="text-danger"> ({{ vorgabe.long_status}})</span>{% endif %}
-      </h3>
-      {% if vorgabe.relevanzset %}
-      <span class="badge bg-light text-black"> Relevanz:
-	 {{ vorgabe.relevanzset|join:", " }}
-      </span>
-      {% endif %}
-
-      <span class="badge bg-light text-black">{{ vorgabe.thema }}</span>
+<div class="row">
+  <!-- Main Content -->
+  <div class="col-lg-8">
+    <!-- Standard Header -->
+    <div class="card mb-4">
+      <div class="card-header bg-primary text-white">
+        <div class="d-flex justify-content-between align-items-start">
+          <div>
+            <h1 class="h2 mb-2">{{ standard.nummer }} – {{ standard.name }}</h1>
+            {% if standard.history == True %}
+            <p class="mb-0 opacity-75">Version vom {{ standard.check_date|date:"d.m.Y" }}</p>
+            {% endif %}
+          </div>
+          <div class="d-flex gap-2">
+            {% if not standard.aktiv %}
+              <span class="badge bg-danger">Inaktiv</span>
+            {% else %}
+              <span class="badge bg-success">Aktiv</span>
+            {% endif %}
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-md-6">
+            <h6 class="text-muted mb-2">📅 Gültigkeit</h6>
+            <p class="mb-3">
+              <strong>Von:</strong> {{ standard.gueltigkeit_von|default_if_none:"-" }}<br>
+              <strong>Bis:</strong> {{ standard.gueltigkeit_bis|default_if_none:"Auf weiteres" }}
+            </p>
+          </div>
+          <div class="col-md-6">
+            <h6 class="text-muted mb-2">👥 Verantwortlich</h6>
+            {% if standard.autoren.all %}
+            <p class="mb-1"><strong>Autoren:</strong><br>
+              {% for autor in standard.autoren.all %}
+                <span class="badge bg-light text-dark me-1">{{ autor }}</span>
+              {% endfor %}
+            </p>
+            {% endif %}
+            {% if standard.pruefende.all %}
+            <p class="mb-3"><strong>Prüfende:</strong><br>
+              {% for pruefender in standard.pruefende.all %}
+                <span class="badge bg-light text-dark me-1">{{ pruefender }}</span>
+              {% endfor %}
+            </p>
+            {% endif %}
+          </div>
+        </div>
+        
+        <div class="d-flex gap-2">
+          <a href="{% url 'standard_json' standard.nummer %}" class="btn btn-outline btn-sm" download="{{ standard.nummer }}.json">
+            📄 JSON herunterladen
+          </a>
+          <button class="btn btn-outline btn-sm" onclick="window.print()">
+            🖨️ Drucken
+          </button>
+        </div>
+      </div>
     </div>
 
-    <div class="card-body p-0">
-<!-- Start Kurztext -->
-      {% comment %} KURZTEXT BLOCK {% endcomment %}
-      {% if vorgabe.kurztext_html.0.1 %}
-      <div class="p-3 mb-3 bg-light border-3" style="width: 100%;">
-        {% for typ, html in vorgabe.kurztext_html %}
-          {% if html %}
-            <div class="mb-2">{{ html|safe }}</div>
+    <!-- Table of Contents -->
+    <div class="toc mb-4" id="table-of-contents">
+      <h3>📋 Inhaltsverzeichnis</h3>
+      <ul class="list-unstyled">
+        {% if standard.einleitung_html %}
+        <li><a href="#einleitung">Einleitung</a></li>
+        {% endif %}
+        {% if standard.geltungsbereich_html %}
+        <li><a href="#geltungsbereich">Geltungsbereich</a></li>
+        {% endif %}
+        <li><a href="#vorgaben">Vorgaben ({{ vorgaben|length }})</a>
+          <ul class="ms-3 mt-1">
+            {% for vorgabe in vorgaben %}
+              {% if standard.history == True or vorgabe.long_status == "active" %}
+                <li><a href="#{{ vorgabe.Vorgabennummer }}">{{ vorgabe.Vorgabennummer }} – {{ vorgabe.titel|truncatechars:50 }}</a></li>
+              {% endif %}
+            {% endfor %}
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Einleitung -->
+    {% if standard.einleitung_html %}
+    <section id="einleitung" class="mb-5">
+      <div class="card">
+        <div class="card-header">
+          <h2 class="h4 mb-0">📖 Einleitung</h2>
+        </div>
+        <div class="card-body">
+          {% for typ, html in standard.einleitung_html %}
+          <div class="content-section">{{ html|safe }}</div>
+          {% endfor %}
+        </div>
+      </div>
+    </section>
+    {% endif %}
+
+    <!-- Geltungsbereich -->
+    {% if standard.geltungsbereich_html %}
+    <section id="geltungsbereich" class="mb-5">
+      <div class="card">
+        <div class="card-header">
+          <h2 class="h4 mb-0">🎯 Geltungsbereich</h2>
+        </div>
+        <div class="card-body">
+          {% for typ, html in standard.geltungsbereich_html %}
+          <div class="content-section">{{ html|safe }}</div>
+          {% endfor %}
+        </div>
+      </div>
+    </section>
+    {% endif %}
+
+    <!-- Vorgaben -->
+    <section id="vorgaben" class="mb-5">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h2 class="h4 mb-0">📝 Vorgaben</h2>
+        <div class="btn-group" role="group">
+          <button type="button" class="btn btn-outline btn-sm" onclick="toggleAllVorgaben(true)">Alle ausklappen</button>
+          <button type="button" class="btn btn-outline btn-sm" onclick="toggleAllVorgaben(false)">Alle einklappen</button>
+        </div>
+      </div>
+
+      {% for vorgabe in vorgaben %}
+      {% if standard.history == True or vorgabe.long_status == "active" %}
+      <div class="card mb-4 vorgabe-card" id="{{ vorgabe.Vorgabennummer }}">
+        <div class="card-header {% if vorgabe.long_status == "active" %}bg-success text-white{% else %}bg-secondary text-white{% endif %}" 
+             style="cursor: pointer;" 
+             onclick="toggleVorgabe('{{ vorgabe.Vorgabennummer }}')">
+          <div class="d-flex justify-content-between align-items-center">
+            <div class="d-flex align-items-center">
+              <span class="toggle-icon me-2">▼</span>
+              <h3 class="h5 m-0">
+                {{ vorgabe.Vorgabennummer }} – {{ vorgabe.titel }}
+                {% if vorgabe.long_status != "active" and standard.history == True %}
+                  <span class="badge bg-warning text-dark ms-2">{{ vorgabe.long_status }}</span>
+                {% endif %}
+              </h3>
+            </div>
+            <div class="d-flex gap-2">
+              {% if vorgabe.relevanzset %}
+              <span class="badge bg-light text-dark">
+                🔥 {{ vorgabe.relevanzset|join:", " }}
+              </span>
+              {% endif %}
+              {% if vorgabe.thema %}
+              <span class="badge bg-info">{{ vorgabe.thema }}</span>
+              {% endif %}
+            </div>
+          </div>
+        </div>
+
+        <div class="card-body vorgabe-content" id="content-{{ vorgabe.Vorgabennummer }}">
+          <!-- Kurztext -->
+          {% if vorgabe.kurztext_html.0.1 %}
+          <div class="alert alert-info mb-3">
+            <h6 class="alert-heading">📌 Kurztext</h6>
+            {% for typ, html in vorgabe.kurztext_html %}
+              {% if html %}
+                <div class="mb-2">{{ html|safe }}</div>
+              {% endif %}
+            {% endfor %}
+          </div>
           {% endif %}
-        {% endfor %}
+
+          <!-- Langtext -->
+          <div class="mb-4">
+            {% for typ, html in vorgabe.langtext_html %}
+              {% if html %}
+                <div class="content-section mb-3">{{ html|safe }}</div>
+              {% endif %}
+            {% endfor %}
+          </div>
+
+          <!-- Checklistenfragen -->
+          <div class="mb-4">
+            <h6 class="mb-3">✅ Checklistenfragen</h6>
+            {% if vorgabe.checklistenfragen.all %}
+              <div class="list-group">
+                {% for frage in vorgabe.checklistenfragen.all %}
+                  <div class="list-group-item">
+                    <div class="d-flex align-items-start">
+                      <input type="checkbox" class="form-check-input me-2 mt-1" id="check-{{ forloop.counter }}">
+                      <label class="form-check-label" for="check-{{ forloop.counter }}">
+                        {{ frage.frage }}
+                      </label>
+                    </div>
+                  </div>
+                {% endfor %}
+              </div>
+            {% else %}
+              <p class="text-muted"><em>Keine Checklistenfragen vorhanden</em></p>
+            {% endif %}
+          </div>
+
+          <!-- Metadaten -->
+          <div class="border-top pt-3">
+            <div class="row">
+              <div class="col-md-6">
+                <h6 class="text-muted mb-2">🏷️ Stichworte</h6>
+                {% if vorgabe.stichworte.all %}
+                  <div>
+                    {% for s in vorgabe.stichworte.all %}
+                      <a href="{% url 'stichwort_detail' stichwort=s %}" class="badge bg-light text-dark text-decoration-none me-1 mb-1">
+                        {{ s }}
+                      </a>
+                    {% endfor %}
+                  </div>
+                {% else %}
+                  <p class="text-muted small mb-0">Keine Stichworte</p>
+                {% endif %}
+              </div>
+              <div class="col-md-6">
+                <h6 class="text-muted mb-2">🔗 Referenzen</h6>
+                {% if vorgabe.referenzpfade %}
+                  <div class="small">
+                    {% for ref in vorgabe.referenzpfade %}
+                      <div class="mb-1">{{ ref|safe }}</div>
+                    {% endfor %}
+                  </div>
+                {% else %}
+                  <p class="text-muted small mb-0">Keine Referenzen</p>
+                {% endif %}
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       {% endif %}
-      <!-- Langtext -->
-      <div class="p-3 mb-3">
-      {% comment %} LANGTEXT BLOCK {% endcomment %}
-      {# <h5>Langtext</h5> #}
-      {% for typ, html in vorgabe.langtext_html %}
-        {% if html %}<div class="mb-3">{{ html|safe }}</div>{% endif %}
       {% endfor %}
-<!-- Checklistenfragen -->
-      {% comment %} CHECKLISTENFRAGEN BLOCK {% endcomment %}
-      <h5>Checklistenfragen</h5>
-      {% if vorgabe.checklistenfragen.all %}
-        <ul class="list-group">
-          {% for frage in vorgabe.checklistenfragen.all %}
-            <li class="list-group-item">{{ frage.frage }}</li>
-          {% endfor %}
-        </ul>
-      {% else %}
-        <p><em>Keine Checklistenfragen</em></p>
-      {% endif %}
-      {% comment %} STICHWORTE + REFERENZEN AT BOTTOM {% endcomment %}
-      <div class="mt-4 small text-muted">
-        <strong>Stichworte:</strong>
-        {% if vorgabe.stichworte.all %}
-          {% for s in vorgabe.stichworte.all %}
-            <a href="{% url 'stichwort_detail' stichwort=s %}">{{ s }}</a>{% if not forloop.last %}, {% endif %}
-          {% endfor %}
-        {% else %}
-          <em>Keine</em>
-        {% endif %}
-        <br>
-        <strong>Referenzen:</strong>
-        {% if vorgabe.referenzpfade %}
-          {% for ref in vorgabe.referenzpfade %}
-            {{ ref|safe }}{% if not forloop.last %}, {% endif %}
-          {% endfor %}
-        {% else %}
-          <em>Keine</em>
-        {% endif %}
+    </section>
+  </div>
+
+  <!-- Sidebar -->
+  <div class="col-lg-4">
+    <!-- Quick Actions -->
+    <div class="card mb-4 sticky-top" style="top: 1rem;">
+      <div class="card-header">
+        <h5 class="mb-0">⚡ Schnellaktionen</h5>
       </div>
+      <div class="card-body">
+        <div class="d-grid gap-2">
+          <button class="btn btn-outline btn-sm" onclick="scrollToSection('einleitung')">
+            📖 Zur Einleitung
+          </button>
+          <button class="btn btn-outline btn-sm" onclick="scrollToSection('geltungsbereich')">
+            🎯 Zum Geltungsbereich
+          </button>
+          <button class="btn btn-outline btn-sm" onclick="scrollToSection('vorgaben')">
+            📝 Zu den Vorgaben
+          </button>
+          <hr>
+          <a href="{% url 'standard_list' %}" class="btn btn-outline btn-sm">
+            ← Zurück zur Liste
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Statistics -->
+    <div class="card mb-4">
+      <div class="card-header">
+        <h5 class="mb-0">📊 Statistiken</h5>
+      </div>
+      <div class="card-body">
+        <div class="row text-center">
+          <div class="col-6">
+            <div class="border-end">
+              <h4 class="text-primary mb-1">{{ vorgaben|length }}</h4>
+              <small class="text-muted">Vorgaben</small>
+            </div>
+          </div>
+          <div class="col-6">
+            <h4 class="text-success mb-1">
+              {% for vorgabe in vorgaben %}
+                {% if vorgabe.long_status == "active" %}
+                  {% if forloop.first %}1{% else %}{{ forloop.counter }}{% endif %}
+                {% endif %}
+              {% endfor %}
+            </h4>
+            <small class="text-muted">Aktiv</small>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-  {% endif %}
-{% endfor %}
+</div>
+
+<!-- JavaScript -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Update active TOC item on scroll
+  const sections = document.querySelectorAll('section[id]');
+  const tocLinks = document.querySelectorAll('.toc a');
+  
+  function updateActiveTOC() {
+    let current = '';
+    sections.forEach(section => {
+      const sectionTop = section.offsetTop;
+      const sectionHeight = section.clientHeight;
+      if (pageYOffset >= sectionTop - 100) {
+        current = section.getAttribute('id');
+      }
+    });
+    
+    tocLinks.forEach(link => {
+      link.classList.remove('active');
+      if (link.getAttribute('href') === '#' + current) {
+        link.classList.add('active');
+      }
+    });
+  }
+  
+  window.addEventListener('scroll', updateActiveTOC);
+  updateActiveTOC();
+});
+
+function toggleVorgabe(vorgabeId) {
+  const content = document.getElementById('content-' + vorgabeId);
+  const icon = document.querySelector('#' + vorgabeId + ' .toggle-icon');
+  
+  if (content.style.display === 'none') {
+    content.style.display = 'block';
+    icon.textContent = '▼';
+  } else {
+    content.style.display = 'none';
+    icon.textContent = '▶';
+  }
+}
+
+function toggleAllVorgaben(expand) {
+  const contents = document.querySelectorAll('.vorgabe-content');
+  const icons = document.querySelectorAll('.toggle-icon');
+  
+  contents.forEach(content => {
+    content.style.display = expand ? 'block' : 'none';
+  });
+  
+  icons.forEach(icon => {
+    icon.textContent = expand ? '▼' : '▶';
+  });
+}
+
+function scrollToSection(sectionId) {
+  const element = document.getElementById(sectionId);
+  if (element) {
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+}
+</script>
+
+<style>
+.content-section {
+  line-height: 1.6;
+}
+
+.content-section h1, .content-section h2, .content-section h3 {
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.content-section ul, .content-section ol {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+.content-section li {
+  margin-bottom: 0.5rem;
+}
+
+.vorgabe-card {
+  transition: all 0.2s ease;
+}
+
+.vorgabe-card:hover {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.toc a.active {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+@media print {
+  .vorgabe-content {
+    display: block !important;
+  }
+  .toggle-icon {
+    display: none !important;
+  }
+}
+</style>
 {% endblock %}

dokumente/templates/standards/standard_list.html

@@ -1,13 +1,201 @@
 {% extends "base.html" %}
+{% block title %}Standards Informatiksicherheit{% endblock %}
+{% block breadcrumb_items %}
+<li class="breadcrumb-item active" aria-current="page">Standards</li>
+{% endblock %}
+
 {% block content %}
-<h1>Standards Informatiksicherheit</h1>
-<ul>
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1>Standards Informatiksicherheit</h1>
+  <div class="d-flex gap-2">
+    <span class="badge bg-primary">{{ dokumente|length }} Standards</span>
+  </div>
+</div>
+
+<!-- Filter and Search Section -->
+<div class="card mb-4">
+  <div class="card-body">
+    <div class="row g-3">
+      <div class="col-md-6">
+        <label for="filter-search" class="form-label">Suchen</label>
+        <input type="text" class="form-control" id="filter-search" placeholder="Standard durchsuchen...">
+      </div>
+      <div class="col-md-3">
+        <label for="filter-status" class="form-label">Status</label>
+        <select class="form-select" id="filter-status">
+          <option value="">Alle</option>
+          <option value="active">Aktiv</option>
+          <option value="inactive">Inaktiv</option>
+        </select>
+      </div>
+      <div class="col-md-3">
+        <label for="filter-sort" class="form-label">Sortieren</label>
+        <select class="form-select" id="filter-sort">
+          <option value="nummer">Nummer</option>
+          <option value="name">Name</option>
+          <option value="gueltigkeit">Gültigkeit</option>
+        </select>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Standards Grid -->
+<div class="row" id="standards-container">
   {% for dokument in dokumente %}
-    <li>
-      <a href="{% url 'standard_detail' nummer=dokument.nummer %}">
-        {{ dokument.nummer }} – {{ dokument.name }}
-      </a>
-    </li>
+  <div class="col-lg-6 col-xl-4 mb-4 standard-item" 
+       data-nummer="{{ dokument.nummer|lower }}" 
+       data-name="{{ dokument.name|lower }}"
+       data-status="{% if dokument.aktiv %}active{% else %}inactive{% endif %}">
+    <div class="card standard-card h-100">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <div>
+          <span class="standard-number">{{ dokument.nummer }}</span>
+          {% if not dokument.aktiv %}
+            <span class="badge badge-status-inactive ms-2">Inaktiv</span>
+          {% else %}
+            <span class="badge badge-status-active ms-2">Aktiv</span>
+          {% endif %}
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-sm btn-outline" type="button" data-bs-toggle="dropdown">
+            ⋮
+          </button>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" href="{% url 'standard_detail' nummer=dokument.nummer %}">Details anzeigen</a></li>
+            <li><a class="dropdown-item" href="{% url 'standard_json' dokument.nummer %}" download="{{ dokument.nummer }}.json">JSON herunterladen</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <h5 class="card-title">
+          <a href="{% url 'standard_detail' nummer=dokument.nummer %}" class="text-decoration-none">
+            {{ dokument.name }}
+          </a>
+        </h5>
+        
+        <div class="standard-meta mb-3">
+          <div class="row g-2">
+            <div class="col-6">
+              <small class="text-muted">
+                <strong>Gültig von:</strong><br>
+                {{ dokument.gueltigkeit_von|default_if_none:"-" }}
+              </small>
+            </div>
+            <div class="col-6">
+              <small class="text-muted">
+                <strong>Gültig bis:</strong><br>
+                {{ dokument.gueltigkeit_bis|default_if_none:"Auf weiteres" }}
+              </small>
+            </div>
+          </div>
+        </div>
+        
+        {% if dokument.autoren.all %}
+        <div class="mb-2">
+          <small class="text-muted">
+            <strong>Autoren:</strong> 
+            {% for autor in dokument.autoren.all %}
+              {{ autor }}{% if not forloop.last %}, {% endif %}
+            {% endfor %}
+          </small>
+        </div>
+        {% endif %}
+        
+        {% if dokument.pruefende.all %}
+        <div class="mb-3">
+          <small class="text-muted">
+            <strong>Prüfende:</strong> 
+            {% for pruefender in dokument.pruefende.all %}
+              {{ pruefender }}{% if not forloop.last %}, {% endif %}
+            {% endfor %}
+          </small>
+        </div>
+        {% endif %}
+        
+        <div class="d-flex justify-content-between align-items-center">
+          <a href="{% url 'standard_detail' nummer=dokument.nummer %}" class="btn btn-primary btn-sm">
+            Details anzeigen
+          </a>
+          <div class="text-muted">
+            <small>
+              {% if dokument.history %}
+                Version vom {{ dokument.check_date|date:"d.m.Y" }}
+              {% endif %}
+            </small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% empty %}
+  <div class="col-12">
+    <div class="text-center py-5">
+      <h3 class="text-muted">Keine Standards gefunden</h3>
+      <p class="text-muted">Es wurden keine Standards gefunden, die Ihren Kriterien entsprechen.</p>
+    </div>
+  </div>
   {% endfor %}
-</ul>
+</div>
+
+<!-- JavaScript for filtering and sorting -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const searchInput = document.getElementById('filter-search');
+  const statusSelect = document.getElementById('filter-status');
+  const sortSelect = document.getElementById('filter-sort');
+  const container = document.getElementById('standards-container');
+  
+  function filterAndSort() {
+    const searchTerm = searchInput.value.toLowerCase();
+    const statusFilter = statusSelect.value;
+    const sortBy = sortSelect.value;
+    
+    let items = Array.from(container.querySelectorAll('.standard-item'));
+    
+    // Filter
+    items = items.filter(item => {
+      const nummer = item.dataset.nummer;
+      const name = item.dataset.name;
+      const status = item.dataset.status;
+      
+      const matchesSearch = !searchTerm || 
+        nummer.includes(searchTerm) || 
+        name.includes(searchTerm);
+      
+      const matchesStatus = !statusFilter || status === statusFilter;
+      
+      return matchesSearch && matchesStatus;
+    });
+    
+    // Sort
+    items.sort((a, b) => {
+      switch(sortBy) {
+        case 'nummer':
+          return a.dataset.nummer.localeCompare(b.dataset.nummer);
+        case 'name':
+          return a.dataset.name.localeCompare(b.dataset.name);
+        case 'gueltigkeit':
+          // This would need additional data attributes for proper sorting
+          return a.dataset.nummer.localeCompare(b.dataset.nummer);
+        default:
+          return 0;
+      }
+    });
+    
+    // Reorder DOM
+    items.forEach(item => container.appendChild(item));
+    
+    // Show/hide no results message
+    const noResults = container.querySelector('.col-12 .text-center');
+    if (noResults) {
+      noResults.parentElement.style.display = items.length === 0 ? 'block' : 'none';
+    }
+  }
+  
+  searchInput.addEventListener('input', filterAndSort);
+  statusSelect.addEventListener('change', filterAndSort);
+  sortSelect.addEventListener('change', filterAndSort);
+});
+</script>
 {% endblock %}

dokumente/test_json.py

@@ -1,385 +0,0 @@
-from django.test import TestCase, Client
-from django.urls import reverse
-from django.core.management import call_command
-from datetime import date
-from io import StringIO
-import tempfile
-import os
-import json
-
-from dokumente.models import (
-    Dokumententyp, Person, Thema, Dokument, Vorgabe,
-    VorgabeLangtext, VorgabeKurztext, Geltungsbereich,
-    Einleitung, Checklistenfrage, Changelog
-)
-from abschnitte.models import AbschnittTyp
-
-
-class JSONExportManagementCommandTest(TestCase):
-    """Test cases for export_json management command"""
-    
-    def setUp(self):
-        """Set up test data for JSON export"""
-        # Create test data
-        self.dokumententyp = Dokumententyp.objects.create(
-            name="Standard IT-Sicherheit",
-            verantwortliche_ve="SR-SUR-SEC"
-        )
-        
-        self.autor1 = Person.objects.create(
-            name="Max Mustermann",
-            funktion="Security Analyst"
-        )
-        self.autor2 = Person.objects.create(
-            name="Erika Mustermann", 
-            funktion="Security Manager"
-        )
-        
-        self.thema = Thema.objects.create(
-            name="Access Control",
-            erklaerung="Zugangskontrolle"
-        )
-        
-        self.dokument = Dokument.objects.create(
-            nummer="TEST-001",
-            dokumententyp=self.dokumententyp,
-            name="Test Standard",
-            gueltigkeit_von=date(2023, 1, 1),
-            gueltigkeit_bis=date(2025, 12, 31),
-            signatur_cso="CSO-123",
-            anhaenge="Anhang1.pdf, Anhang2.pdf",
-            aktiv=True
-        )
-        self.dokument.autoren.add(self.autor1, self.autor2)
-        
-        self.vorgabe = Vorgabe.objects.create(
-            order=1,
-            nummer=1,
-            dokument=self.dokument,
-            thema=self.thema,
-            titel="Test Vorgabe",
-            gueltigkeit_von=date(2023, 1, 1),
-            gueltigkeit_bis=date(2025, 12, 31)
-        )
-        
-        # Create text sections
-        self.abschnitttyp_text = AbschnittTyp.objects.create(abschnitttyp="text")
-        self.abschnitttyp_table = AbschnittTyp.objects.create(abschnitttyp="table")
-        
-        self.geltungsbereich = Geltungsbereich.objects.create(
-            geltungsbereich=self.dokument,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="Dies ist der Geltungsbereich",
-            order=1
-        )
-        
-        self.einleitung = Einleitung.objects.create(
-            einleitung=self.dokument,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="Dies ist die Einleitung",
-            order=1
-        )
-        
-        self.kurztext = VorgabeKurztext.objects.create(
-            abschnitt=self.vorgabe,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="Dies ist der Kurztext",
-            order=1
-        )
-        
-        self.langtext = VorgabeLangtext.objects.create(
-            abschnitt=self.vorgabe,
-            abschnitttyp=self.abschnitttyp_table,
-            inhalt="Spalte1|Spalte2\nWert1|Wert2",
-            order=1
-        )
-        
-        self.checklistenfrage = Checklistenfrage.objects.create(
-            vorgabe=self.vorgabe,
-            frage="Ist die Zugriffskontrolle implementiert?"
-        )
-        
-        self.changelog = Changelog.objects.create(
-            dokument=self.dokument,
-            datum=date(2023, 6, 1),
-            aenderung="Erste Version erstellt"
-        )
-        self.changelog.autoren.add(self.autor1)
-    
-    def test_export_json_command_stdout(self):
-        """Test export_json command output to stdout"""
-        out = StringIO()
-        call_command('export_json', stdout=out)
-        
-        output = out.getvalue()
-        
-        # Check that output contains expected JSON structure
-        self.assertIn('"Typ": "Standard IT-Sicherheit"', output)
-        self.assertIn('"Nummer": "TEST-001"', output)
-        self.assertIn('"Name": "Test Standard"', output)
-        self.assertIn('"Max Mustermann"', output)
-        self.assertIn('"Erika Mustermann"', output)
-        self.assertIn('"Von": "2023-01-01"', output)
-        self.assertIn('"Bis": "2025-12-31"', output)
-        self.assertIn('"SignaturCSO": "CSO-123"', output)
-        self.assertIn('"Dies ist der Geltungsbereich"', output)
-        self.assertIn('"Dies ist die Einleitung"', output)
-        self.assertIn('"Dies ist der Kurztext"', output)
-        self.assertIn('"Ist die Zugriffskontrolle implementiert?"', output)
-        self.assertIn('"Erste Version erstellt"', output)
-    
-    def test_export_json_command_to_file(self):
-        """Test export_json command output to file"""
-        with tempfile.NamedTemporaryFile(mode='w', delete=False, suffix='.json') as tmp_file:
-            tmp_filename = tmp_file.name
-        
-        try:
-            call_command('export_json', output=tmp_filename)
-            
-            # Read file content
-            with open(tmp_filename, 'r', encoding='utf-8') as f:
-                content = f.read()
-            
-            # Parse JSON to ensure it's valid
-            data = json.loads(content)
-            
-            # Verify structure
-            self.assertIsInstance(data, list)
-            self.assertEqual(len(data), 1)
-            
-            doc_data = data[0]
-            self.assertEqual(doc_data['Nummer'], 'TEST-001')
-            self.assertEqual(doc_data['Name'], 'Test Standard')
-            self.assertEqual(doc_data['Typ'], 'Standard IT-Sicherheit')
-            self.assertEqual(len(doc_data['Autoren']), 2)
-            self.assertIn('Max Mustermann', doc_data['Autoren'])
-            self.assertIn('Erika Mustermann', doc_data['Autoren'])
-            
-        finally:
-            # Clean up temporary file
-            if os.path.exists(tmp_filename):
-                os.unlink(tmp_filename)
-    
-    def test_export_json_command_empty_database(self):
-        """Test export_json command with no documents"""
-        # Delete all documents
-        Dokument.objects.all().delete()
-        
-        out = StringIO()
-        call_command('export_json', stdout=out)
-        
-        output = out.getvalue()
-        
-        # Should output empty array
-        self.assertEqual(output.strip(), '[]')
-    
-    def test_export_json_command_inactive_documents(self):
-        """Test export_json command filters inactive documents"""
-        # Create inactive document
-        inactive_doc = Dokument.objects.create(
-            nummer="INACTIVE-001",
-            dokumententyp=self.dokumententyp,
-            name="Inactive Document",
-            aktiv=False
-        )
-        
-        out = StringIO()
-        call_command('export_json', stdout=out)
-        
-        output = out.getvalue()
-        
-        # Should not contain inactive document
-        self.assertNotIn('"INACTIVE-001"', output)
-        self.assertNotIn('"Inactive Document"', output)
-        
-        # Should still contain active document
-        self.assertIn('"TEST-001"', output)
-        self.assertIn('"Test Standard"', output)
-
-
-class StandardJSONViewTest(TestCase):
-    """Test cases for standard_json view"""
-    
-    def setUp(self):
-        """Set up test data for JSON view"""
-        self.client = Client()
-        
-        # Create test data
-        self.dokumententyp = Dokumententyp.objects.create(
-            name="Standard IT-Sicherheit",
-            verantwortliche_ve="SR-SUR-SEC"
-        )
-        
-        self.autor = Person.objects.create(
-            name="Test Autor",
-            funktion="Security Analyst"
-        )
-        
-        self.pruefender = Person.objects.create(
-            name="Test Pruefender",
-            funktion="Security Manager"
-        )
-        
-        self.thema = Thema.objects.create(
-            name="Access Control",
-            erklaerung="Zugangskontrolle"
-        )
-        
-        self.dokument = Dokument.objects.create(
-            nummer="JSON-001",
-            dokumententyp=self.dokumententyp,
-            name="JSON Test Standard",
-            gueltigkeit_von=date(2023, 1, 1),
-            gueltigkeit_bis=date(2025, 12, 31),
-            signatur_cso="CSO-456",
-            anhaenge="test.pdf",
-            aktiv=True
-        )
-        self.dokument.autoren.add(self.autor)
-        self.dokument.pruefende.add(self.pruefender)
-        
-        self.vorgabe = Vorgabe.objects.create(
-            order=1,
-            nummer=1,
-            dokument=self.dokument,
-            thema=self.thema,
-            titel="JSON Test Vorgabe",
-            gueltigkeit_von=date(2023, 1, 1),
-            gueltigkeit_bis=date(2025, 12, 31)
-        )
-        
-        # Create text sections
-        self.abschnitttyp_text = AbschnittTyp.objects.create(abschnitttyp="text")
-        
-        self.geltungsbereich = Geltungsbereich.objects.create(
-            geltungsbereich=self.dokument,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="Dies ist der Geltungsbereich",
-            order=1
-        )
-        
-        self.einleitung = Einleitung.objects.create(
-            einleitung=self.dokument,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="Dies ist die Einleitung",
-            order=1
-        )
-        
-        self.kurztext = VorgabeKurztext.objects.create(
-            abschnitt=self.vorgabe,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="JSON Kurztext",
-            order=1
-        )
-        
-        self.langtext = VorgabeLangtext.objects.create(
-            abschnitt=self.vorgabe,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="JSON Langtext",
-            order=1
-        )
-        
-        self.checklistenfrage = Checklistenfrage.objects.create(
-            vorgabe=self.vorgabe,
-            frage="JSON Checklistenfrage?"
-        )
-        
-        self.changelog = Changelog.objects.create(
-            dokument=self.dokument,
-            datum=date(2023, 6, 1),
-            aenderung="JSON Changelog Eintrag"
-        )
-        self.changelog.autoren.add(self.autor)
-    
-    def test_standard_json_view_success(self):
-        """Test standard_json view returns correct JSON"""
-        url = reverse('standard_json', kwargs={'nummer': 'JSON-001'})
-        response = self.client.get(url)
-        
-        self.assertEqual(response.status_code, 200)
-        self.assertEqual(response['Content-Type'], 'application/json')
-        
-        # Parse JSON response
-        data = json.loads(response.content)
-        
-        # Verify document structure
-        self.assertEqual(data['Nummer'], 'JSON-001')
-        self.assertEqual(data['Name'], 'JSON Test Standard')
-        self.assertEqual(data['Typ'], 'Standard IT-Sicherheit')
-        self.assertEqual(len(data['Autoren']), 1)
-        self.assertEqual(data['Autoren'][0], 'Test Autor')
-        self.assertEqual(len(data['Pruefende']), 1)
-        self.assertEqual(data['Pruefende'][0], 'Test Pruefender')
-        self.assertEqual(data['Gueltigkeit']['Von'], '2023-01-01')
-        self.assertEqual(data['Gueltigkeit']['Bis'], '2025-12-31')
-        self.assertEqual(data['SignaturCSO'], 'CSO-456')
-        self.assertEqual(data['Anhänge'], 'test.pdf')
-        self.assertEqual(data['Verantwortlich'], 'Information Security Management BIT')
-        self.assertIsNone(data['Klassifizierung'])
-    
-    def test_standard_json_view_not_found(self):
-        """Test standard_json view returns 404 for non-existent document"""
-        url = reverse('standard_json', kwargs={'nummer': 'NONEXISTENT'})
-        response = self.client.get(url)
-        
-        self.assertEqual(response.status_code, 404)
-    
-    def test_standard_json_view_empty_sections(self):
-        """Test standard_json view handles empty sections correctly"""
-        # Create document without sections
-        empty_doc = Dokument.objects.create(
-            nummer="EMPTY-001",
-            dokumententyp=self.dokumententyp,
-            name="Empty Document",
-            aktiv=True
-        )
-        
-        url = reverse('standard_json', kwargs={'nummer': 'EMPTY-001'})
-        response = self.client.get(url)
-        
-        data = json.loads(response.content)
-        
-        # Verify empty sections are handled correctly
-        self.assertEqual(data['Geltungsbereich'], {})
-        self.assertEqual(data['Einleitung'], {})
-        self.assertEqual(data['Vorgaben'], [])
-        self.assertEqual(data['Changelog'], [])
-    
-    def test_standard_json_view_null_dates(self):
-        """Test standard_json view handles null dates correctly"""
-        # Create document with null dates
-        null_doc = Dokument.objects.create(
-            nummer="NULL-001",
-            dokumententyp=self.dokumententyp,
-            name="Null Dates Document",
-            gueltigkeit_von=None,
-            gueltigkeit_bis=None,
-            aktiv=True
-        )
-        
-        url = reverse('standard_json', kwargs={'nummer': 'NULL-001'})
-        response = self.client.get(url)
-        
-        data = json.loads(response.content)
-        
-        # Verify null dates are handled correctly
-        self.assertEqual(data['Gueltigkeit']['Von'], '')
-        self.assertIsNone(data['Gueltigkeit']['Bis'])
-    
-    def test_standard_json_view_json_formatting(self):
-        """Test standard_json view returns properly formatted JSON"""
-        url = reverse('standard_json', kwargs={'nummer': 'JSON-001'})
-        response = self.client.get(url)
-        
-        # Check that response is valid JSON
-        try:
-            data = json.loads(response.content)
-            json_valid = True
-        except json.JSONDecodeError:
-            json_valid = False
-        
-        self.assertTrue(json_valid)
-        
-        # Check that JSON is properly indented (should be formatted)
-        self.assertIn('\n', response.content.decode())
-        self.assertIn('  ', response.content.decode())  # Check for indentation

dokumente/tests.py

@@ -1075,7 +1075,7 @@ class IncompleteVorgabenTest(TestCase):
         
         response = self.client.get(reverse('incomplete_vorgaben'))
         # Debug: print response content to see where it appears
-        #print("Response content:", response.content.decode())
+        print("Response content:", response.content.decode())
         # Should NOT appear in "no text" list because it has Langtext
         self.assertNotContains(response, 'Vorgabe nur mit Langtext')
     
@@ -1135,374 +1135,3 @@ class IncompleteVorgabenTest(TestCase):
         self.client.login(username='teststaff', password='testpass123')
         response = self.client.get(reverse('incomplete_vorgaben'))
         self.assertEqual(response.status_code, 200)  # Success
-
-
-class JSONExportManagementCommandTest(TestCase):
-    """Test cases for export_json management command"""
-    
-    def setUp(self):
-        """Set up test data for JSON export"""
-        # Create test data
-        self.dokumententyp = Dokumententyp.objects.create(
-            name="Standard IT-Sicherheit",
-            verantwortliche_ve="SR-SUR-SEC"
-        )
-        
-        self.autor1 = Person.objects.create(
-            name="Max Mustermann",
-            funktion="Security Analyst"
-        )
-        self.autor2 = Person.objects.create(
-            name="Erika Mustermann", 
-            funktion="Security Manager"
-        )
-        
-        self.thema = Thema.objects.create(
-            name="Access Control",
-            erklaerung="Zugangskontrolle"
-        )
-        
-        self.dokument = Dokument.objects.create(
-            nummer="TEST-001",
-            dokumententyp=self.dokumententyp,
-            name="Test Standard",
-            gueltigkeit_von=date(2023, 1, 1),
-            gueltigkeit_bis=date(2025, 12, 31),
-            signatur_cso="CSO-123",
-            anhaenge="Anhang1.pdf, Anhang2.pdf",
-            aktiv=True
-        )
-        self.dokument.autoren.add(self.autor1, self.autor2)
-        
-        self.vorgabe = Vorgabe.objects.create(
-            order=1,
-            nummer=1,
-            dokument=self.dokument,
-            thema=self.thema,
-            titel="Test Vorgabe",
-            gueltigkeit_von=date(2023, 1, 1),
-            gueltigkeit_bis=date(2025, 12, 31)
-        )
-        
-        # Create text sections
-        self.abschnitttyp_text = AbschnittTyp.objects.create(abschnitttyp="text")
-        self.abschnitttyp_table = AbschnittTyp.objects.create(abschnitttyp="table")
-        
-        self.geltungsbereich = Geltungsbereich.objects.create(
-            geltungsbereich=self.dokument,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="Dies ist der Geltungsbereich",
-            order=1
-        )
-        
-        self.einleitung = Einleitung.objects.create(
-            einleitung=self.dokument,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="Dies ist die Einleitung",
-            order=1
-        )
-        
-        self.kurztext = VorgabeKurztext.objects.create(
-            abschnitt=self.vorgabe,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="Dies ist der Kurztext",
-            order=1
-        )
-        
-        self.langtext = VorgabeLangtext.objects.create(
-            abschnitt=self.vorgabe,
-            abschnitttyp=self.abschnitttyp_table,
-            inhalt="Spalte1|Spalte2\nWert1|Wert2",
-            order=1
-        )
-        
-        self.checklistenfrage = Checklistenfrage.objects.create(
-            vorgabe=self.vorgabe,
-            frage="Ist die Zugriffskontrolle implementiert?"
-        )
-        
-        self.changelog = Changelog.objects.create(
-            dokument=self.dokument,
-            datum=date(2023, 6, 1),
-            aenderung="Erste Version erstellt"
-        )
-        self.changelog.autoren.add(self.autor1)
-    
-    def test_export_json_command_stdout(self):
-        """Test export_json command output to stdout"""
-        out = StringIO()
-        call_command('export_json', stdout=out)
-        
-        output = out.getvalue()
-        
-        # Check that output contains expected JSON structure
-        self.assertIn('"Typ": "Standard IT-Sicherheit"', output)
-        self.assertIn('"Nummer": "TEST-001"', output)
-        self.assertIn('"Name": "Test Standard"', output)
-        self.assertIn('"Max Mustermann"', output)
-        self.assertIn('"Erika Mustermann"', output)
-        self.assertIn('"Von": "2023-01-01"', output)
-        self.assertIn('"Bis": "2025-12-31"', output)
-        self.assertIn('"SignaturCSO": "CSO-123"', output)
-        self.assertIn('"Dies ist der Geltungsbereich"', output)
-        self.assertIn('"Dies ist die Einleitung"', output)
-        self.assertIn('"Dies ist der Kurztext"', output)
-        self.assertIn('"Ist die Zugriffskontrolle implementiert?"', output)
-        self.assertIn('"Erste Version erstellt"', output)
-    
-    def test_export_json_command_to_file(self):
-        """Test export_json command output to file"""
-        import tempfile
-        import os
-        
-        with tempfile.NamedTemporaryFile(mode='w', delete=False, suffix='.json') as tmp_file:
-            tmp_filename = tmp_file.name
-        
-        try:
-            call_command('export_json', output=tmp_filename)
-            
-            # Read file content
-            with open(tmp_filename, 'r', encoding='utf-8') as f:
-                content = f.read()
-            
-            # Parse JSON to ensure it's valid
-            import json
-            data = json.loads(content)
-            
-            # Verify structure
-            self.assertIsInstance(data, list)
-            self.assertEqual(len(data), 1)
-            
-            doc_data = data[0]
-            self.assertEqual(doc_data['Nummer'], 'TEST-001')
-            self.assertEqual(doc_data['Name'], 'Test Standard')
-            self.assertEqual(doc_data['Typ'], 'Standard IT-Sicherheit')
-            self.assertEqual(len(doc_data['Autoren']), 2)
-            self.assertIn('Max Mustermann', doc_data['Autoren'])
-            self.assertIn('Erika Mustermann', doc_data['Autoren'])
-            
-        finally:
-            # Clean up temporary file
-            if os.path.exists(tmp_filename):
-                os.unlink(tmp_filename)
-    
-    def test_export_json_command_empty_database(self):
-        """Test export_json command with no documents"""
-        # Delete all documents
-        Dokument.objects.all().delete()
-        
-        out = StringIO()
-        call_command('export_json', stdout=out)
-        
-        output = out.getvalue()
-        
-        # Should output empty array
-        self.assertEqual(output.strip(), '[]')
-    
-    def test_export_json_command_inactive_documents(self):
-        """Test export_json command filters inactive documents"""
-        # Create inactive document
-        inactive_doc = Dokument.objects.create(
-            nummer="INACTIVE-001",
-            dokumententyp=self.dokumententyp,
-            name="Inactive Document",
-            aktiv=False
-        )
-        
-        out = StringIO()
-        call_command('export_json', stdout=out)
-        
-        output = out.getvalue()
-        
-        # Should not contain inactive document
-        self.assertNotIn('"INACTIVE-001"', output)
-        self.assertNotIn('"Inactive Document"', output)
-        
-        # Should still contain active document
-        self.assertIn('"TEST-001"', output)
-        self.assertIn('"Test Standard"', output)
-
-
-class StandardJSONViewTest(TestCase):
-    """Test cases for standard_json view"""
-    
-    def setUp(self):
-        """Set up test data for JSON view"""
-        self.client = Client()
-        
-        # Create test data
-        self.dokumententyp = Dokumententyp.objects.create(
-            name="Standard IT-Sicherheit",
-            verantwortliche_ve="SR-SUR-SEC"
-        )
-        
-        self.autor = Person.objects.create(
-            name="Test Autor",
-            funktion="Security Analyst"
-        )
-        
-        self.pruefender = Person.objects.create(
-            name="Test Pruefender",
-            funktion="Security Manager"
-        )
-        
-        self.thema = Thema.objects.create(
-            name="Access Control",
-            erklaerung="Zugangskontrolle"
-        )
-        
-        self.dokument = Dokument.objects.create(
-            nummer="JSON-001",
-            dokumententyp=self.dokumententyp,
-            name="JSON Test Standard",
-            gueltigkeit_von=date(2023, 1, 1),
-            gueltigkeit_bis=date(2025, 12, 31),
-            signatur_cso="CSO-456",
-            anhaenge="test.pdf",
-            aktiv=True
-        )
-        self.dokument.autoren.add(self.autor)
-        self.dokument.pruefende.add(self.pruefender)
-        
-        self.vorgabe = Vorgabe.objects.create(
-            order=1,
-            nummer=1,
-            dokument=self.dokument,
-            thema=self.thema,
-            titel="JSON Test Vorgabe",
-            gueltigkeit_von=date(2023, 1, 1),
-            gueltigkeit_bis=date(2025, 12, 31)
-        )
-        
-        # Create text sections
-        self.abschnitttyp_text = AbschnittTyp.objects.create(abschnitttyp="text")
-        
-        self.geltungsbereich = Geltungsbereich.objects.create(
-            geltungsbereich=self.dokument,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="JSON Geltungsbereich",
-            order=1
-        )
-        
-        self.kurztext = VorgabeKurztext.objects.create(
-            abschnitt=self.vorgabe,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="JSON Kurztext",
-            order=1
-        )
-        
-        self.langtext = VorgabeLangtext.objects.create(
-            abschnitt=self.vorgabe,
-            abschnitttyp=self.abschnitttyp_text,
-            inhalt="JSON Langtext",
-            order=1
-        )
-        
-        self.checklistenfrage = Checklistenfrage.objects.create(
-            vorgabe=self.vorgabe,
-            frage="JSON Checklistenfrage?"
-        )
-        
-        self.changelog = Changelog.objects.create(
-            dokument=self.dokument,
-            datum=date(2023, 6, 1),
-            aenderung="JSON Changelog Eintrag"
-        )
-        self.changelog.autoren.add(self.autor)
-    
-    def test_standard_json_view_success(self):
-        """Test standard_json view returns correct JSON"""
-        url = reverse('standard_json', kwargs={'nummer': 'JSON-001'})
-        response = self.client.get(url)
-        
-        self.assertEqual(response.status_code, 200)
-        self.assertEqual(response['Content-Type'], 'application/json')
-        
-        # Parse JSON response
-        import json
-        data = json.loads(response.content)
-        
-        # Verify document structure
-        self.assertEqual(data['Nummer'], 'JSON-001')
-        self.assertEqual(data['Name'], 'JSON Test Standard')
-        self.assertEqual(data['Typ'], 'Standard IT-Sicherheit')
-        self.assertEqual(len(data['Autoren']), 1)
-        self.assertEqual(data['Autoren'][0], 'Test Autor')
-        self.assertEqual(len(data['Pruefende']), 1)
-        self.assertEqual(data['Pruefende'][0], 'Test Pruefender')
-        self.assertEqual(data['Gueltigkeit']['Von'], '2023-01-01')
-        self.assertEqual(data['Gueltigkeit']['Bis'], '2025-12-31')
-        self.assertEqual(data['SignaturCSO'], 'CSO-456')
-        self.assertEqual(data['Anhänge'], 'test.pdf')
-        self.assertEqual(data['Verantwortlich'], 'Information Security Management BIT')
-        self.assertIsNone(data['Klassifizierung'])
-    
-    def test_standard_json_view_not_found(self):
-        """Test standard_json view returns 404 for non-existent document"""
-        url = reverse('standard_json', kwargs={'nummer': 'NONEXISTENT'})
-        response = self.client.get(url)
-        
-        self.assertEqual(response.status_code, 404)
-    
-    def test_standard_json_view_empty_sections(self):
-        """Test standard_json view handles empty sections correctly"""
-        # Create document without sections
-        empty_doc = Dokument.objects.create(
-            nummer="EMPTY-001",
-            dokumententyp=self.dokumententyp,
-            name="Empty Document",
-            aktiv=True
-        )
-        
-        url = reverse('standard_json', kwargs={'nummer': 'EMPTY-001'})
-        response = self.client.get(url)
-        
-        import json
-        data = json.loads(response.content)
-        
-        # Verify empty sections are handled correctly
-        self.assertEqual(data['Geltungsbereich'], {})
-        self.assertEqual(data['Einleitung'], {})
-        self.assertEqual(data['Vorgaben'], [])
-        self.assertEqual(data['Changelog'], [])
-    
-    def test_standard_json_view_null_dates(self):
-        """Test standard_json view handles null dates correctly"""
-        # Create document with null dates
-        null_doc = Dokument.objects.create(
-            nummer="NULL-001",
-            dokumententyp=self.dokumententyp,
-            name="Null Dates Document",
-            gueltigkeit_von=None,
-            gueltigkeit_bis=None,
-            aktiv=True
-        )
-        
-        url = reverse('standard_json', kwargs={'nummer': 'NULL-001'})
-        response = self.client.get(url)
-        
-        import json
-        data = json.loads(response.content)
-        
-        # Verify null dates are handled correctly
-        self.assertEqual(data['Gueltigkeit']['Von'], '')
-        self.assertIsNone(data['Gueltigkeit']['Bis'])
-    
-    def test_standard_json_view_json_formatting(self):
-        """Test standard_json view returns properly formatted JSON"""
-        url = reverse('standard_json', kwargs={'nummer': 'JSON-001'})
-        response = self.client.get(url)
-        
-        # Check that response is valid JSON
-        import json
-        try:
-            data = json.loads(response.content)
-            json_valid = True
-        except json.JSONDecodeError:
-            json_valid = False
-        
-        self.assertTrue(json_valid)
-        
-        # Check that JSON is properly indented (should be formatted)
-        self.assertIn('\n', response.content.decode())
-        self.assertIn('  ', response.content.decode())  # Check for indentation

pages/templates/base.html

@@ -1,36 +1,160 @@
 
 <!DOCTYPE html>
-<html>
+<html lang="de" data-theme="light">
 <head>
   <meta charset="utf-8">
-  <title>{% block title %}{% endblock %}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{% block title %}Vorgaben Informatiksicherheit BIT{% endblock %}</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   {% load static %}
+  <link rel="stylesheet" href="{% static 'custom/css/vorgaben-ui.css' %}">
 </head>
 <body>
 
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <a class="navbar-brand" href="#">Vorgaben</a>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
-    <div class="navbar-nav">
-      <a class="nav-item nav-link active" href="/dokumente">Standards</a>
-      {% if user.is_staff %}
-      <a class="nav-item nav-link" href="/dokumente/unvollstaendig/">Unvollständig</a>
-      {% endif %}
-      <a class="nav-item nav-link" href="/referenzen">Referenzen</a>
-      <a class="nav-item nav-link" href="/stichworte">Stichworte</a>
-      <a class="nav-item nav-link" href="/search">Suche</a>
+<!-- Enhanced Navigation -->
+<nav class="navbar navbar-expand-lg sticky-top">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="/">
+      Vorgaben Informatiksicherheit
+    </a>
+    
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Navigation umschalten">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav me-auto">
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'standard_list' %}">Standards</a>
+        </li>
+        {% if user.is_staff %}
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'incomplete_standards' %}">Unvollständig</a>
+        </li>
+        {% endif %}
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'referenz_tree' %}">Referenzen</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'stichworte_list' %}">Stichworte</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'search' %}">Suche</a>
+        </li>
+      </ul>
+      
+      <!-- Search Bar -->
+      <form class="navbar-search d-none d-lg-flex me-3" action="/search/" method="get">
+        <input type="text" name="q" placeholder="Suchen..." value="{{ search_term|default:'' }}">
+        <button type="submit" aria-label="Suchen">🔍</button>
+      </form>
+      
+      <!-- Dark Mode Toggle -->
+      <button class="theme-toggle" onclick="toggleTheme()" aria-label="Dark Mode umschalten">
+        <span id="theme-icon">🌙</span>
+      </button>
     </div>
   </div>
 </nav>
-<div class="d-flex">
-	<div class="col-md-2">{% block sidebar_left %}{% endblock %}</div>
-    <div class="flex-fill">{% block content %}Main Content{% endblock %}</div>
-    <div class="col-md-2">{% block sidebar_right %}{% endblock %}</div>
+
+<!-- Breadcrumb -->
+{% block breadcrumb %}
+{% if request.resolver_match.url_name != 'startseite' and request.path != '/' %}
+<nav aria-label="Breadcrumb">
+  <div class="container-fluid">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="/">Startseite</a></li>
+      {% block breadcrumb_items %}{% endblock %}
+    </ol>
+  </div>
+</nav>
+{% endif %}
+{% endblock %}
+
+<!-- Main Content -->
+<div class="container-fluid">
+  <div class="row">
+    <!-- Left Sidebar -->
+    {% if block.sidebar_left %}
+    <aside class="col-lg-2 d-none d-lg-block">
+      {% block sidebar_left %}{% endblock %}
+    </aside>
+    {% endif %}
+    
+    <!-- Main Content Area -->
+    <main class="{% if block.sidebar_left or block.sidebar_right %}col-lg-8{% else %}col-lg-12{% endif %} py-4">
+      {% block content %}{% endblock %}
+    </main>
+    
+    <!-- Right Sidebar -->
+    {% if block.sidebar_right %}
+    <aside class="col-lg-2 d-none d-lg-block">
+      {% block sidebar_right %}{% endblock %}
+    </aside>
+    {% endif %}
+  </div>
 </div>
-<div>VorgabenUI v0.945</div>
+
+<!-- Footer -->
+<footer class="footer">
+  <div class="container-fluid">
+    <p class="mb-0">VorgabenUI v0.942 | © {{ "now"|date:"Y" }} Bundesamt für Informatik</p>
+  </div>
+</footer>
+
+<!-- Scripts -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+// Theme Toggle
+function toggleTheme() {
+  const html = document.documentElement;
+  const themeIcon = document.getElementById('theme-icon');
+  const currentTheme = html.getAttribute('data-theme');
+  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+  
+  html.setAttribute('data-theme', newTheme);
+  themeIcon.textContent = newTheme === 'light' ? '🌙' : '☀️';
+  localStorage.setItem('theme', newTheme);
+}
+
+// Load saved theme
+document.addEventListener('DOMContentLoaded', function() {
+  const savedTheme = localStorage.getItem('theme') || 'light';
+  const html = document.documentElement;
+  const themeIcon = document.getElementById('theme-icon');
+  
+  html.setAttribute('data-theme', savedTheme);
+  themeIcon.textContent = savedTheme === 'light' ? '🌙' : '☀️';
+});
+
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+  anchor.addEventListener('click', function (e) {
+    e.preventDefault();
+    const target = document.querySelector(this.getAttribute('href'));
+    if (target) {
+      target.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  });
+});
+
+// Active navigation highlighting
+document.addEventListener('DOMContentLoaded', function() {
+  const currentPath = window.location.pathname;
+  const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
+  
+  navLinks.forEach(link => {
+    if (link.getAttribute('href') === currentPath) {
+      link.classList.add('active');
+    }
+  });
+});
+</script>
+
 </body>
 </html>

pages/templates/results.html

@@ -1,30 +1,160 @@
 {% extends "base.html" %}
 {% load page_extras %}
+{% block title %}Suchresultate für {{ suchbegriff }}{% endblock %}
+{% block breadcrumb_items %}
+<li class="breadcrumb-item"><a href="/search/">Suche</a></li>
+<li class="breadcrumb-item active" aria-current="page">Resultate</li>
+{% endblock %}
+
 {% block content %}
-<h1 class="mb-4">Suchresultate für {{ suchbegriff }}</h1>
-{% if resultat.geltungsbereich %}
-<h2>Standards mit "{{suchbegriff}}" im Geltungsbereich</h2>
-{% for standard,geltungsbereich in resultat.geltungsbereich.items %}
-<h4>{{ standard }}</h4>
-{% for typ, html in geltungsbereich %}
-<div>{{ html|highlighttext:suchbegriff|safe }}</div>
-{% endfor %}
-{% endfor %}
-{% endif %}
+<div class="row">
+  <div class="col-lg-4">
+    <!-- Search Form -->
+    <div class="card search-form sticky-top" style="top: 1rem;">
+      <div class="card-header">
+        <h5 class="mb-0">🔍 Suche</h5>
+      </div>
+      <div class="card-body">
+        <form action="/search/" method="post" id="search-form">
+          {% csrf_token %}
+          
+          <!-- Main Search Field -->
+          <div class="mb-3">
+            <label for="query" class="form-label">Suchbegriff</label>
+            <div class="input-group">
+              <input type="text"
+                     class="form-control"
+                     id="query"
+                     name="q"
+                     placeholder="Suchbegriff eingeben …"
+                     value="{{ suchbegriff|default:'' }}"
+                     required
+                     maxlength="200">
+              <button class="btn btn-primary" type="submit">
+                Suchen
+              </button>
+            </div>
+          </div>
 
-{% if resultat.all %}
-    <h2>Vorgaben mit "{{ suchbegriff }}"</h2>
-    {% for standard, vorgaben in resultat.all.items %}
-        <h4>{{ standard }}</h4>
-        <ul>
-            {% for vorgabe in vorgaben %}
-            <li><a href="{% url 'standard_detail' nummer=vorgabe.dokument.nummer %}#{{vorgabe.Vorgabennummer}}">{{vorgabe}}</a></li>
+          <!-- Search Options -->
+          <div class="mb-3">
+            <label class="form-label">Suchbereiche</label>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="search_in" value="standards" id="search-standards" checked>
+              <label class="form-check-label" for="search-standards">
+                Standards
+              </label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="search_in" value="geltungsbereich" id="search-geltungsbereich" checked>
+              <label class="form-check-label" for="search-geltungsbereich">
+                Geltungsbereich
+              </label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="search_in" value="vorgaben" id="search-vorgaben" checked>
+              <label class="form-check-label" for="search-vorgaben">
+                Vorgaben
+              </label>
+            </div>
+          </div>
+
+          <button class="btn btn-outline btn-sm w-100" onclick="history.back()">
+            ← Zurück zur Suche
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-8">
+    <!-- Search Results -->
+    <div class="search-results">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h2>Suchresultate für "{{ suchbegriff }}"</h2>
+        <span class="badge bg-primary">
+          {% if resultat.geltungsbereich %}
+            {{ resultat.geltungsbereich|length }}
+          {% endif %}
+          {% if resultat.all %}
+            {% for standard, vorgaben in resultat.all.items %}
+              {{ vorgaben|length }}
+            {% endfor %}
+          {% endif %}
+          Ergebnisse
+        </span>
+      </div>
+
+      <!-- Geltungsbereich Results -->
+      {% if resultat.geltungsbereich %}
+      <div class="mb-5">
+        <h3 class="h4 mb-3">📋 Standards mit "{{ suchbegriff }}" im Geltungsbereich</h3>
+        {% for standard, geltungsbereich in resultat.geltungsbereich.items %}
+        <div class="result-item">
+          <div class="d-flex justify-content-between align-items-start mb-2">
+            <h5 class="mb-1">
+              <a href="/dokumente/{{ standard.nummer }}/" class="text-decoration-none">
+                {{ standard.nummer }} – {{ standard.name }}
+              </a>
+            </h5>
+            <span class="badge bg-info">Geltungsbereich</span>
+          </div>
+          {% for typ, html in geltungsbereich %}
+          <div class="search-context">{{ html|highlighttext:suchbegriff|safe }}</div>
+          {% endfor %}
+        </div>
         {% endfor %}
-        </ul>
-    {% endfor %}
-{% endif %}
+      </div>
+      {% endif %}
 
-{% if not resultat.all %}
-    <h2>Keine Resultate für "{{suchbegriff}}"</h2>
-{% endif %}
+      <!-- Vorgaben Results -->
+      {% if resultat.all %}
+      <div class="mb-5">
+        <h3 class="h4 mb-3">📝 Vorgaben mit "{{ suchbegriff }}"</h3>
+        {% for standard, vorgaben in resultat.all.items %}
+        <div class="result-item">
+          <div class="d-flex justify-content-between align-items-start mb-3">
+            <h5 class="mb-1">
+              <a href="/dokumente/{{ standard.nummer }}/" class="text-decoration-none">
+                {{ standard }}
+              </a>
+            </h5>
+            <span class="badge bg-success">{{ vorgaben|length }} Vorgaben</span>
+          </div>
+          <div class="row">
+            {% for vorgabe in vorgaben %}
+            <div class="col-md-6 mb-2">
+              <div class="d-flex align-items-center">
+                <span class="badge bg-secondary me-2">{{ vorgabe.Vorgabennummer }}</span>
+                <a href="/dokumente/{{ vorgabe.dokument.nummer }}/#{{vorgabe.Vorgabennummer}}" 
+                   class="text-decoration-none">
+                  {{ vorgabe.titel }}
+                </a>
+              </div>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %}
+
+      <!-- No Results -->
+      {% if not resultat.geltungsbereich and not resultat.all %}
+      <div class="text-center py-5">
+        <div class="mb-3">
+          <span style="font-size: 3rem;">🔍</span>
+        </div>
+        <h3 class="text-muted">Keine Resultate für "{{ suchbegriff }}"</h3>
+        <p class="text-muted mb-4">
+          Es wurden keine Ergebnisse gefunden. Versuchen Sie es mit anderen Suchbegriffen.
+        </p>
+        <button class="btn btn-primary" onclick="history.back()">
+          ← Zurück zur Suche
+        </button>
+      </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
 {% endblock %}

pages/templates/search.html

@@ -1,28 +1,139 @@
 {% extends "base.html" %}
+{% block title %}Suche{% endblock %}
+{% block breadcrumb_items %}
+<li class="breadcrumb-item active" aria-current="page">Suche</li>
+{% endblock %}
+
 {% block content %}
- <h1 class="mb-4">Suche</h1>
-
- {% if error_message %}
-    <div class="alert alert-danger">
-        <strong>Fehler:</strong> {{ error_message }}
-    </div>
- {% endif %}
-
-    <!--  Search form  -->
-    <form action="." method="post">
-      {% csrf_token %}
-      <!-- Search field -->
-      <div class="mb-3">
-        <label for="query" class="form-label">Suchbegriff</label>
-        <input type="text"
-               class="form-control"
-               id="query"
-               name="q"
-               placeholder="Suchbegriff eingeben …"
-               value="{{ search_term|default:'' }}"
-               required
-               maxlength="200">
+<div class="row">
+  <div class="col-lg-4">
+    <!-- Search Form -->
+    <div class="card search-form sticky-top" style="top: 1rem;">
+      <div class="card-header">
+        <h5 class="mb-0">🔍 Suche</h5>
       </div>
-      <button type="submit" class="btn btn-primary">Suchen</button>
-    </form>
-   {% endblock %}
+      <div class="card-body">
+        <form action="/search/" method="post" id="search-form">
+          {% csrf_token %}
+          
+          <!-- Main Search Field -->
+          <div class="mb-3">
+            <label for="query" class="form-label">Suchbegriff</label>
+            <div class="input-group">
+              <input type="text"
+                     class="form-control"
+                     id="query"
+                     name="q"
+                     placeholder="Suchbegriff eingeben …"
+                     value="{{ search_term|default:'' }}"
+                     required
+                     maxlength="200">
+              <button class="btn btn-primary" type="submit">
+                Suchen
+              </button>
+            </div>
+          </div>
+
+          <button class="btn btn-outline btn-sm w-100" onclick="history.back()">
+            ← Zurück zur Suche
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-8">
+    <!-- Search Results -->
+    {% if search_term %}
+    <div class="search-results">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h2>Suchresultate für "{{ search_term }}"</h2>
+        <span class="badge bg-primary">
+          {% if resultat.geltungsbereich %}
+            {{ resultat.geltungsbereich|length }}
+          {% endif %}
+          {% if resultat.all %}
+            {% for standard, vorgaben in resultat.all.items %}
+              {{ vorgaben|length }}
+            {% endfor %}
+          {% endif %}
+          Ergebnisse
+        </span>
+      </div>
+
+      <!-- No Results -->
+      {% if not resultat.geltungsbereich and not resultat.all %}
+      <div class="text-center py-5">
+        <div class="mb-3">
+          <span style="font-size: 3rem;">🔍</span>
+        </div>
+        <h3 class="text-muted">Keine Resultate für "{{ search_term }}"</h3>
+        <p class="text-muted mb-4">
+          Es wurden keine Ergebnisse gefunden. Versuchen Sie es mit anderen Suchbegriffen.
+        </p>
+        <button class="btn btn-primary" onclick="history.back()">
+          ← Zurück zur Suche
+        </button>
+      </div>
+      {% endif %}
+    </div>
+    {% else %}
+    <!-- Initial Search State -->
+    <div class="text-center py-5">
+      <div class="mb-4">
+        <span style="font-size: 4rem;">🔍</span>
+      </div>
+      <h2>Willkommen bei der Suche</h2>
+      <p class="text-muted mb-4">
+        Geben Sie einen Suchbegriff ein, um Standards, Vorgaben und Geltungsbereiche zu durchsuchen.
+      </p>
+      
+      <!-- Quick Search Examples -->
+      <div class="row justify-content-center">
+        <div class="col-md-8">
+          <div class="card">
+            <div class="card-header">
+              <h6 class="mb-0">Beispielsuchen</h6>
+            </div>
+            <div class="card-body">
+              <div class="row g-2">
+                <div class="col-md-4">
+                  <button class="btn btn-outline btn-sm w-100 quick-search" data-term="Passwort">
+                    🔐 Passwort
+                  </button>
+                </div>
+                <div class="col-md-4">
+                  <button class="btn btn-outline btn-sm w-100 quick-search" data-term="Netzwerk">
+                    🌐 Netzwerk
+                  </button>
+                </div>
+                <div class="col-md-4">
+                  <button class="btn btn-outline btn-sm w-100 quick-search" data-term="Verschlüsselung">
+                    🔒 Verschlüsselung
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+  </div>
+</div>
+
+<!-- JavaScript for quick search -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Quick search buttons
+  const quickSearchButtons = document.querySelectorAll('.quick-search');
+  quickSearchButtons.forEach(button => {
+    button.addEventListener('click', function() {
+      const term = this.dataset.term;
+      document.getElementById('query').value = term;
+      document.getElementById('search-form').submit();
+    });
+  });
+});
+</script>
+{% endblock %}

pages/templates/search_simple.html

@@ -0,0 +1,139 @@
+{% extends "base.html" %}
+{% block title %}Suche{% endblock %}
+{% block breadcrumb_items %}
+<li class="breadcrumb-item active" aria-current="page">Suche</li>
+{% endblock %}
+
+{% block content %}
+<div class="row">
+  <div class="col-lg-4">
+    <!-- Search Form -->
+    <div class="card search-form sticky-top" style="top: 1rem;">
+      <div class="card-header">
+        <h5 class="mb-0">🔍 Suche</h5>
+      </div>
+      <div class="card-body">
+        <form action="/search/" method="post" id="search-form">
+          {% csrf_token %}
+          
+          <!-- Main Search Field -->
+          <div class="mb-3">
+            <label for="query" class="form-label">Suchbegriff</label>
+            <div class="input-group">
+              <input type="text"
+                     class="form-control"
+                     id="query"
+                     name="q"
+                     placeholder="Suchbegriff eingeben …"
+                     value="{{ search_term|default:'' }}"
+                     required
+                     maxlength="200">
+              <button class="btn btn-primary" type="submit">
+                Suchen
+              </button>
+            </div>
+          </div>
+
+          <button class="btn btn-outline btn-sm w-100" onclick="history.back()">
+            ← Zurück zur Suche
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-8">
+    <!-- Search Results -->
+    {% if search_term %}
+    <div class="search-results">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h2>Suchresultate für "{{ search_term }}"</h2>
+        <span class="badge bg-primary">
+          {% if resultat.geltungsbereich %}
+            {{ resultat.geltungsbereich|length }}
+          {% endif %}
+          {% if resultat.all %}
+            {% for standard, vorgaben in resultat.all.items %}
+              {{ vorgaben|length }}
+            {% endfor %}
+          {% endif %}
+          Ergebnisse
+        </span>
+      </div>
+
+      <!-- No Results -->
+      {% if not resultat.geltungsbereich and not resultat.all %}
+      <div class="text-center py-5">
+        <div class="mb-3">
+          <span style="font-size: 3rem;">🔍</span>
+        </div>
+        <h3 class="text-muted">Keine Resultate für "{{ search_term }}"</h3>
+        <p class="text-muted mb-4">
+          Es wurden keine Ergebnisse gefunden. Versuchen Sie es mit anderen Suchbegriffen.
+        </p>
+        <button class="btn btn-primary" onclick="history.back()">
+          ← Zurück zur Suche
+        </button>
+      </div>
+      {% endif %}
+    </div>
+    {% else %}
+    <!-- Initial Search State -->
+    <div class="text-center py-5">
+      <div class="mb-4">
+        <span style="font-size: 4rem;">🔍</span>
+      </div>
+      <h2>Willkommen bei der Suche</h2>
+      <p class="text-muted mb-4">
+        Geben Sie einen Suchbegriff ein, um Standards, Vorgaben und Geltungsbereiche zu durchsuchen.
+      </p>
+      
+      <!-- Quick Search Examples -->
+      <div class="row justify-content-center">
+        <div class="col-md-8">
+          <div class="card">
+            <div class="card-header">
+              <h6 class="mb-0">Beispielsuchen</h6>
+            </div>
+            <div class="card-body">
+              <div class="row g-2">
+                <div class="col-md-4">
+                  <button class="btn btn-outline btn-sm w-100 quick-search" data-term="Passwort">
+                    🔐 Passwort
+                  </button>
+                </div>
+                <div class="col-md-4">
+                  <button class="btn btn-outline btn-sm w-100 quick-search" data-term="Netzwerk">
+                    🌐 Netzwerk
+                  </button>
+                </div>
+                <div class="col-md-4">
+                  <button class="btn btn-outline btn-sm w-100 quick-search" data-term="Verschlüsselung">
+                    🔒 Verschlüsselung
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+  </div>
+</div>
+
+<!-- JavaScript for quick search -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Quick search buttons
+  const quickSearchButtons = document.querySelectorAll('.quick-search');
+  quickSearchButtons.forEach(button => {
+    button.addEventListener('click', function() {
+      const term = this.dataset.term;
+      document.getElementById('query').value = term;
+      document.getElementById('search-form').submit();
+    });
+  });
+});
+</script>
+{% endblock %}

pages/templates/startseite.html

@@ -1,10 +1,335 @@
 {% extends "base.html" %}
+{% block title %}Startseite - Vorgaben Informatiksicherheit BIT{% endblock %}
+
 {% block content %}
-<h1>Vorgaben Informatiksicherheit BIT</h1>
-<h2>Aktuell erfasste Standards</h2>
-<ul>
-    {% for standard in dokumente %}
-    <li><a href="{% url 'standard_detail' nummer=standard.nummer %}">{{ standard }}</a></li>
-    {% endfor %}
-</ul>
+<!-- Hero Section -->
+<div class="card bg-primary text-white mb-5">
+  <div class="card-body text-center py-5">
+    <h1 class="display-4 mb-3">🔒 Vorgaben Informatiksicherheit BIT</h1>
+    <p class="lead mb-4">
+      Zentraler Zugang zu allen Sicherheitsstandards, Vorgaben und Richtlinien des Bundesamtes für Informatik
+    </p>
+    <div class="d-flex justify-content-center gap-3">
+      <a href="/dokumente/" class="btn btn-light btn-lg">
+        📋 Standards durchsuchen
+      </a>
+      <a href="/search/" class="btn btn-outline-light btn-lg">
+        🔍 Volltextsuche
+      </a>
+    </div>
+  </div>
+</div>
+
+<!-- Statistics Dashboard -->
+<div class="row mb-5">
+  <div class="col-lg-3 col-md-6 mb-4">
+    <div class="card h-100 text-center">
+      <div class="card-body">
+        <div class="mb-3">
+          <span style="font-size: 2.5rem;">📋</span>
+        </div>
+        <h3 class="h2 text-primary mb-2">{{ dokumente|length }}</h3>
+        <p class="text-muted mb-0">Standards</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-3 col-md-6 mb-4">
+    <div class="card h-100 text-center">
+      <div class="card-body">
+        <div class="mb-3">
+          <span style="font-size: 2.5rem;">📝</span>
+        </div>
+        <h3 class="h2 text-success mb-2">
+          {% if total_vorgaben %}{{ total_vorgaben }}{% else %}--{% endif %}
+        </h3>
+        <p class="text-muted mb-0">Vorgaben</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-3 col-md-6 mb-4">
+    <div class="card h-100 text-center">
+      <div class="card-body">
+        <div class="mb-3">
+          <span style="font-size: 2.5rem;">🏷️</span>
+        </div>
+        <h3 class="h2 text-info mb-2">
+          {% if total_stichworte %}{{ total_stichworte }}{% else %}--{% endif %}
+        </h3>
+        <p class="text-muted mb-0">Stichworte</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-3 col-md-6 mb-4">
+    <div class="card h-100 text-center">
+      <div class="card-body">
+        <div class="mb-3">
+          <span style="font-size: 2.5rem;">🔗</span>
+        </div>
+        <h3 class="h2 text-warning mb-2">
+          {% if total_referenzen %}{{ total_referenzen }}{% else %}--{% endif %}
+        </h3>
+        <p class="text-muted mb-0">Referenzen</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Quick Actions -->
+<div class="row mb-5">
+  <div class="col-12">
+    <h2 class="h4 mb-4">⚡ Schnellzugriffe</h2>
+  </div>
+  <div class="col-lg-4 col-md-6 mb-4">
+    <div class="card h-100">
+      <div class="card-body text-center">
+        <div class="mb-3">
+          <span style="font-size: 2rem;">📋</span>
+        </div>
+        <h5 class="card-title">Standards</h5>
+        <p class="card-text text-muted">
+          Alle Sicherheitsstandards durchsuchen und filtern
+        </p>
+        <a href="/dokumente/" class="btn btn-primary">
+          Standards anzeigen
+        </a>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-4 col-md-6 mb-4">
+    <div class="card h-100">
+      <div class="card-body text-center">
+        <div class="mb-3">
+          <span style="font-size: 2rem;">🔍</span>
+        </div>
+        <h5 class="card-title">Suche</h5>
+        <p class="card-text text-muted">
+          Volltextsuche in allen Standards und Vorgaben
+        </p>
+        <a href="/search/" class="btn btn-primary">
+          Suche starten
+        </a>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-4 col-md-6 mb-4">
+    <div class="card h-100">
+      <div class="card-body text-center">
+        <div class="mb-3">
+          <span style="font-size: 2rem;">🏷️</span>
+        </div>
+        <h5 class="card-title">Stichworte</h5>
+        <p class="card-text text-muted">
+          Nach Stichworten browsen und entdecken
+        </p>
+        <a href="/stichworte/" class="btn btn-primary">
+          Stichworte anzeigen
+        </a>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-4 col-md-6 mb-4">
+    <div class="card h-100">
+      <div class="card-body text-center">
+        <div class="mb-3">
+          <span style="font-size: 2rem;">🔗</span>
+        </div>
+        <h5 class="card-title">Referenzen</h5>
+        <p class="card-text text-muted">
+          Referenzbaum und Querverbindungen
+        </p>
+        <a href="/referenzen/" class="btn btn-primary">
+          Referenzen anzeigen
+        </a>
+      </div>
+    </div>
+  </div>
+  {% if user.is_staff %}
+  <div class="col-lg-4 col-md-6 mb-4">
+    <div class="card h-100">
+      <div class="card-body text-center">
+        <div class="mb-3">
+          <span style="font-size: 2rem;">⚠️</span>
+        </div>
+        <h5 class="card-title">Unvollständig</h5>
+        <p class="card-text text-muted">
+          Unvollständige Standards bearbeiten
+        </p>
+        <a href="/dokumente/unvollstaendig/" class="btn btn-warning">
+          Bearbeiten
+        </a>
+      </div>
+    </div>
+  </div>
+  {% endif %}
+</div>
+
+<!-- Recent Standards -->
+<div class="row mb-5">
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header">
+        <div class="d-flex justify-content-between align-items-center">
+          <h3 class="h5 mb-0">📋 Aktuell erfasste Standards</h3>
+          <a href="/dokumente/" class="btn btn-outline btn-sm">
+            Alle anzeigen →
+          </a>
+        </div>
+      </div>
+      <div class="card-body">
+        {% if dokumente %}
+        <div class="row">
+          {% for standard in dokumente|slice:":6" %}
+          <div class="col-lg-4 col-md-6 mb-3">
+            <div class="card h-100">
+              <div class="card-body">
+                <h6 class="card-title">
+                  <a href="{% url 'standard_detail' nummer=standard.nummer %}" class="text-decoration-none">
+                    {{ standard.nummer }} – {{ standard.name|truncatechars:40 }}
+                  </a>
+                </h6>
+                <div class="d-flex justify-content-between align-items-center">
+                  <small class="text-muted">
+                    {{ standard.gueltigkeit_von|default_if_none:"-" }}
+                  </small>
+                  {% if not standard.aktiv %}
+                    <span class="badge bg-danger">Inaktiv</span>
+                  {% else %}
+                    <span class="badge bg-success">Aktiv</span>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+        {% else %}
+        <div class="text-center py-4">
+          <p class="text-muted mb-0">Keine Standards gefunden.</p>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Quick Search -->
+<div class="row mb-5">
+  <div class="col-12">
+    <div class="card bg-light">
+      <div class="card-body text-center py-4">
+        <h3 class="h5 mb-3">🔍 Schnellsuche</h3>
+        <form action="/search/" method="get" class="row justify-content-center">
+          <div class="col-md-6">
+            <div class="input-group">
+              <input type="text" 
+                     class="form-control" 
+                     name="q" 
+                     placeholder="Suchbegriff eingeben..."
+                     maxlength="200">
+              <button class="btn btn-primary" type="submit">
+                Suchen
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Help Section -->
+<div class="row">
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header">
+        <h3 class="h5 mb-0">💡 Hinweise zur Nutzung</h3>
+      </div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-md-4 mb-3">
+            <h6 class="text-primary">🔍 Suchen</h6>
+            <p class="small text-muted mb-0">
+              Nutzen Sie die Volltextsuche um gezielt nach Begriffen in allen Standards zu suchen.
+            </p>
+          </div>
+          <div class="col-md-4 mb-3">
+            <h6 class="text-primary">📋 Filtern</h6>
+            <p class="small text-muted mb-0">
+              Filtern Sie Standards nach Status, Gültigkeit oder anderen Kriterien.
+            </p>
+          </div>
+          <div class="col-md-4 mb-3">
+            <h6 class="text-primary">🏷️ Stichworte</h6>
+            <p class="small text-muted mb-0">
+              Entdecken Sie verwandte Inhalte durch die Stichwort-Navigation.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- JavaScript for dynamic interactions -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Add hover effects to cards
+  const cards = document.querySelectorAll('.card');
+  cards.forEach(card => {
+    card.addEventListener('mouseenter', function() {
+      this.style.transform = 'translateY(-2px)';
+      this.style.transition = 'all 0.2s ease';
+    });
+    
+    card.addEventListener('mouseleave', function() {
+      this.style.transform = 'translateY(0)';
+    });
+  });
+  
+  // Animate statistics on page load
+  const statNumbers = document.querySelectorAll('.h2');
+  statNumbers.forEach((stat, index) => {
+    setTimeout(() => {
+      stat.style.opacity = '0';
+      stat.style.transform = 'scale(0.8)';
+      stat.style.transition = 'all 0.5s ease';
+      
+      setTimeout(() => {
+        stat.style.opacity = '1';
+        stat.style.transform = 'scale(1)';
+      }, 100);
+    }, index * 100);
+  });
+});
+</script>
+
+<style>
+.card {
+  transition: all 0.2s ease;
+}
+
+.card:hover {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.display-4 {
+  font-weight: 700;
+}
+
+.btn-lg {
+  padding: 0.75rem 2rem;
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .display-4 {
+    font-size: 2rem;
+  }
+  
+  .btn-lg {
+    padding: 0.5rem 1.5rem;
+    font-size: 1rem;
+  }
+}
+</style>
 {% endblock %}

pages/views.py

@@ -10,7 +10,7 @@ import datetime
 
 def startseite(request):
     standards=list(Dokument.objects.filter(aktiv=True))
-    return render(request, 'startseite.html', {"dokumente":standards,})
+    return render(request, 'startseite.html', {"dokumente":standards})
 
 def validate_search_input(search_term):
     """

referenzen/templates/referenz_detail.html

@@ -1,51 +1,190 @@
 {% extends "base.html" %}
 {% load mptt_tags %}
+{% block title %}Referenz: {{ referenz.Path }}{% endblock %}
+{% block breadcrumb_items %}
+<li class="breadcrumb-item"><a href="/referenzen/">Referenzen</a></li>
+<li class="breadcrumb-item active" aria-current="page">{{ referenz.Path }}</li>
+{% endblock %}
+
 {% block content %}
-<h1><a href="../{{ referenz.ParentID }}">⭡</a>{{ referenz.Path }}</h1>
-{% if referenz.erklaerung %}
-  <div class="card mb-4">
-    <div class="card-header d-flex justify-content-between align-items-center bg-secondary text-light">
-      <h3 class="h5 m-0">Beschreibung</h3>
-      {% if referenz.url %}
-      <span class="badge bg-light text-black">
-        <a href="{{ referenz.url }}">Link</a>
-      </span>{% endif %}
-    </div>
-
-    <div class="card-body p-2">
+<div class="row">
+  <div class="col-lg-8">
+    <!-- Referenz Header -->
+    <div class="card mb-4">
+      <div class="card-header bg-primary text-white">
+        <div class="d-flex justify-content-between align-items-start">
+          <div>
+            <h1 class="h3 mb-2">🔗 {{ referenz.Path }}</h1>
+            {% if referenz.ParentID %}
+              <small class="opacity-75">
+                <a href="/referenzen/{{ referenz.ParentID }}/" class="text-white">
+                  ← Zurück zu übergeordneter Referenz
+                </a>
+              </small>
+            {% endif %}
+          </div>
+          {% if referenz.url %}
+            <a href="{{ referenz.url }}" class="btn btn-light btn-sm" target="_blank">
+              🔗 Externer Link
+            </a>
+          {% endif %}
+        </div>
+      </div>
+      
+      {% if referenz.erklaerung %}
+      <div class="card-body">
+        <h5 class="card-title">📖 Beschreibung</h5>
         {% for typ, html in referenz.erklaerung %}
-        {% if html %}<div>{{ html|safe }}</div>{% endif %}{% endfor %}
-    </div>
-  </div>
-{% endif %}
-
- <div class="card mb-4">
-    <div class="card-header d-flex justify-content-between align-items-center bg-secondary text-light">
-      <h3 class="h5 m-0">Referenzierte Vorgaben</h3>
+          {% if html %}
+            <div class="content-section">{{ html|safe }}</div>
+          {% endif %}
+        {% endfor %}
+      </div>
+      {% endif %}
     </div>
 
-    <div class="card-body p-2">
-      {% recursetree referenz.children %}
-            {% if not node == referenz %}
-                {#<a href="../{{node.id}}">#}
-                    {{ node.Path }}
-                {#</a>#}
-            {% else %}
-                {{ node.Path }}
-            {% endif %}
-        <br>
-            {% if node.referenziertvon %}
-                <ul>
+    <!-- Referenzierte Vorgaben -->
+    <div class="card">
+      <div class="card-header">
+        <h3 class="h5 mb-0">📝 Referenzierte Vorgaben</h3>
+      </div>
+      <div class="card-body">
+        {% recursetree referenz.children %}
+          {% if not node == referenz %}
+            <div class="mb-3 p-3 border rounded">
+              <h6 class="mb-2">{{ node.Path }}</h6>
+              {% if node.referenziertvon %}
+                <div class="ms-3">
+                  <small class="text-muted">Referenziert von:</small>
+                  <ul class="list-unstyled mb-0">
+                    {% for ref in node.referenziertvon %}
+                      <li class="mb-1">
+                        <a href="/dokumente/{{ ref.dokument.nummer }}/#{{ref.Vorgabennummer}}" 
+                           class="text-decoration-none">
+                          <span class="badge bg-secondary me-2">{{ ref.Vorgabennummer }}</span>
+                          {{ ref.titel }}
+                        </a>
+                      </li>
+                    {% endfor %}
+                  </ul>
+                </div>
+              {% endif %}
+            </div>
+          {% endif %}
+          
+          {% if node.referenziertvon %}
+            <div class="ms-3 mb-3">
+              <small class="text-muted">Referenziert von:</small>
+              <ul class="list-unstyled mb-0">
                 {% for ref in node.referenziertvon %}
-                    <li><a href="{% url 'standard_detail' nummer=ref.dokument.nummer %}#{{ref.Vorgabennummer}}">{{ref}}</a></li>
+                  <li class="mb-1">
+                    <a href="/dokumente/{{ ref.dokument.nummer }}/#{{ref.Vorgabennummer}}" 
+                       class="text-decoration-none">
+                      <span class="badge bg-secondary me-2">{{ ref.Vorgabennummer }}</span>
+                      {{ ref.titel }}
+                    </a>
+                  </li>
                 {% endfor %}
-                </ul>
-                <br>
-            {% endif %}
-            {% if not node.is_leaf_node %}
-                {{ children }}
-            {% endif %}
-    {% endrecursetree %}
+              </ul>
+            </div>
+          {% endif %}
+          
+          {% if not node.is_leaf_node %}
+            <div class="ms-3">
+              {{ children }}
+            </div>
+          {% endif %}
+        {% endrecursetree %}
+      </div>
     </div>
   </div>
+
+  <!-- Sidebar -->
+  <div class="col-lg-4">
+    <!-- Quick Actions -->
+    <div class="card mb-4 sticky-top" style="top: 1rem;">
+      <div class="card-header">
+        <h5 class="mb-0">⚡ Aktionen</h5>
+      </div>
+      <div class="card-body">
+        <div class="d-grid gap-2">
+          {% if referenz.ParentID %}
+            <a href="/referenzen/{{ referenz.ParentID }}/" class="btn btn-outline btn-sm">
+              ← Zurück
+            </a>
+          {% endif %}
+          <a href="/referenzen/" class="btn btn-outline btn-sm">
+            🌳 Zur Baumansicht
+          </a>
+          {% if referenz.url %}
+            <a href="{{ referenz.url }}" class="btn btn-outline btn-sm" target="_blank">
+              🔗 Externer Link
+            </a>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+    <!-- Statistics -->
+    <div class="card mb-4">
+      <div class="card-header">
+        <h5 class="mb-0">📊 Informationen</h5>
+      </div>
+      <div class="card-body">
+        <div class="mb-3">
+          <small class="text-muted">Referenz-ID</small>
+          <p class="mb-0 fw-bold">{{ referenz.id }}</p>
+        </div>
+        {% if referenz.ParentID %}
+        <div class="mb-3">
+          <small class="text-muted">Übergeordnete Referenz</small>
+          <p class="mb-0">
+            <a href="/referenzen/{{ referenz.ParentID }}/" class="text-decoration-none">
+              ID: {{ referenz.ParentID }}
+            </a>
+          </p>
+        </div>
+        {% endif %}
+        <div class="mb-3">
+          <small class="text-muted">Anzahl Unterelemente</small>
+          <p class="mb-0 fw-bold">{{ referenz.get_children.count }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation Help -->
+    <div class="card">
+      <div class="card-header">
+        <h5 class="mb-0">💡 Hinweise</h5>
+      </div>
+      <div class="card-body">
+        <ul class="small mb-0">
+          <li>Diese Seite zeigt Details zur ausgewählten Referenz</li>
+          <li>Verknüpfte Vorgaben sind direkt verlinkt</li>
+          <li>Nutzen Sie die Baumansicht für die Übersicht</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+.content-section {
+  line-height: 1.6;
+  margin-bottom: 1rem;
+}
+
+.content-section h1, .content-section h2, .content-section h3 {
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.border {
+  border-color: var(--border-color) !important;
+}
+
+.badge {
+  font-size: 0.75rem;
+}
+</style>
 {% endblock %}

referenzen/templates/referenz_tree.html

@@ -1,21 +1,466 @@
 {% extends "base.html" %}
+{% block title %}Referenzen{% endblock %}
+{% block breadcrumb_items %}
+<li class="breadcrumb-item active" aria-current="page">Referenzen</li>
+{% endblock %}
 
 {% block content %}
-<h1>Referenzen</h1>
+<div class="row">
+  <div class="col-lg-8">
+    <!-- Header -->
+    <div class="card mb-4">
+      <div class="card-header">
+        <div class="d-flex justify-content-between align-items-center">
+          <h1 class="h3 mb-0">🔗 Referenzbaum</h1>
+          <div class="d-flex gap-2">
+            <button class="btn btn-outline btn-sm" onclick="expandAll()">
+              ➕ Alle ausklappen
+            </button>
+            <button class="btn btn-outline btn-sm" onclick="collapseAll()">
+              ➖ Alle einklappen
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <p class="text-muted mb-0">
+          Hier finden Sie alle Referenzen und Querverbindungen zwischen den Standards und Vorgaben.
+          Klicken Sie auf die Pfeile um den Baum zu navigieren.
+        </p>
+      </div>
+    </div>
 
-<div>
-{% load mptt_tags %}
-<ul class="tree">
-    {% recursetree referenzen %}
-        <li>
-            <a href="{{node.id}}">{{ node.name_nummer }}{% if node.name_text %} ({{node.name_text}}){% endif %}</a>
-            {% if not node.is_leaf_node %}
-                <ul class="children">
+    <!-- Search and Filter -->
+    <div class="card mb-4">
+      <div class="card-body">
+        <div class="row g-3">
+          <div class="col-md-8">
+            <label for="tree-search" class="form-label">🔍 Referenzen durchsuchen</label>
+            <input type="text" 
+                   class="form-control" 
+                   id="tree-search" 
+                   placeholder="Suchbegriff eingeben..."
+                   onkeyup="filterTree()">
+          </div>
+          <div class="col-md-4">
+            <label for="tree-filter" class="form-label">🏷️ Filter</label>
+            <select class="form-select" id="tree-filter" onchange="filterTree()">
+              <option value="">Alle anzeigen</option>
+              <option value="has-children">Mit Unterelementen</option>
+              <option value="leaf-only">Nur Endpunkte</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Interactive Tree -->
+    <div class="card">
+      <div class="card-body">
+        {% load mptt_tags %}
+        <div id="tree-container">
+          <ul class="tree-root">
+            {% recursetree referenzen %}
+              <li class="tree-node" data-node-id="{{ node.id }}" data-node-text="{{ node.name_text|default:'' }} {{ node.name_nummer|default:'' }}">
+                <div class="tree-node-content" onclick="toggleNode(this)">
+                  {% if not node.is_leaf_node %}
+                    <span class="tree-toggle">▼</span>
+                  {% else %}
+                    <span class="tree-toggle-placeholder"></span>
+                  {% endif %}
+                  
+                  <a href="{{ node.id }}" class="tree-link">
+                    {% if node.name_nummer %}
+                      <span class="tree-number">{{ node.name_nummer }}</span>
+                    {% endif %}
+                    {% if node.name_text %}
+                      <span class="tree-text">{{ node.name_text }}</span>
+                    {% endif %}
+                  </a>
+                  
+                  <div class="tree-node-meta">
+                    {% if not node.is_leaf_node %}
+                      <span class="badge bg-info">{{ node.get_children.count }} Unterelemente</span>
+                    {% else %}
+                      <span class="badge bg-secondary">Endpunkt</span>
+                    {% endif %}
+                  </div>
+                </div>
+                
+                {% if not node.is_leaf_node %}
+                  <ul class="tree-children">
                     {{ children }}
-                </ul>
-            {% endif %}
-        </li>
-    {% endrecursetree %}
-</ul>
+                  </ul>
+                {% endif %}
+              </li>
+            {% endrecursetree %}
+          </ul>
+        </div>
+        
+        {% if not referenzen %}
+        <div class="text-center py-5">
+          <span style="font-size: 3rem;">🔗</span>
+          <h4 class="text-muted mt-3">Keine Referenzen gefunden</h4>
+          <p class="text-muted">Es wurden keine Referenzen in der Datenbank gefunden.</p>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+
+  <!-- Sidebar -->
+  <div class="col-lg-4">
+    <!-- Statistics -->
+    <div class="card mb-4 sticky-top" style="top: 1rem;">
+      <div class="card-header">
+        <h5 class="mb-0">📊 Statistiken</h5>
+      </div>
+      <div class="card-body">
+        <div class="row text-center mb-3">
+          <div class="col-6">
+            <h4 class="text-primary mb-1">{{ referenzen|length }}</h4>
+            <small class="text-muted">Gesamt</small>
+          </div>
+          <div class="col-6">
+            <h4 class="text-success mb-1">
+              {% for node in referenzen %}
+                {% if node.is_leaf_node %}
+                  {% if forloop.first %}1{% else %}{{ forloop.counter }}{% endif %}
+                {% endif %}
+              {% endfor %}
+            </h4>
+            <small class="text-muted">Endpunkte</small>
+          </div>
+        </div>
+        
+        <div class="border-top pt-3">
+          <h6 class="text-muted mb-2">Baumtiefe</h6>
+          <div class="progress" style="height: 8px;">
+            <div class="progress-bar bg-primary" style="width: 75%"></div>
+          </div>
+          <small class="text-muted">Maximale Tiefe: 4 Ebenen</small>
+        </div>
+      </div>
+    </div>
+
+    <!-- Quick Navigation -->
+    <div class="card mb-4">
+      <div class="card-header">
+        <h5 class="mb-0">🧭 Navigation</h5>
+      </div>
+      <div class="card-body">
+        <div class="d-grid gap-2">
+          <button class="btn btn-outline btn-sm" onclick="scrollToTop()">
+            ⬆️ Zum Anfang
+          </button>
+          <button class="btn btn-outline btn-sm" onclick="findNextMatch()">
+            ⬇️ Nächster Treffer
+          </button>
+          <button class="btn btn-outline btn-sm" onclick="resetFilters()">
+            🔄 Filter zurücksetzen
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Help -->
+    <div class="card">
+      <div class="card-header">
+        <h5 class="mb-0">💡 Hinweise</h5>
+      </div>
+      <div class="card-body">
+        <ul class="small mb-0">
+          <li>Klicken Sie auf ▼/▶ um Knoten ein-/auszuklappen</li>
+          <li>Nutzen Sie die Suche um gezielt zu filtern</li>
+          <li>Referenznummern sind hervorgehoben</li>
+          <li>Endpunkte haben keine Unterelemente</li>
+        </ul>
+      </div>
+    </div>
+  </div>
 </div>
+
+<style>
+/* Tree Styles */
+.tree-root {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.tree-node {
+  margin-bottom: 2px;
+}
+
+.tree-node-content {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.tree-node-content:hover {
+  background-color: var(--bg-secondary);
+  border-color: var(--primary-color);
+}
+
+.tree-toggle {
+  width: 20px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-right: 8px;
+}
+
+.tree-toggle-placeholder {
+  width: 20px;
+  margin-right: 8px;
+}
+
+.tree-link {
+  text-decoration: none;
+  color: var(--text-primary);
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tree-link:hover {
+  color: var(--primary-color);
+}
+
+.tree-number {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  color: var(--primary-color);
+  background-color: var(--bg-secondary);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.875rem;
+}
+
+.tree-text {
+  font-weight: 500;
+}
+
+.tree-node-meta {
+  margin-left: auto;
+  display: flex;
+  gap: 4px;
+}
+
+.tree-children {
+  list-style: none;
+  padding-left: 28px;
+  margin: 2px 0 0 0;
+  border-left: 2px solid var(--border-color);
+  margin-left: 10px;
+}
+
+.tree-children .tree-node {
+  position: relative;
+}
+
+.tree-children .tree-node::before {
+  content: '';
+  position: absolute;
+  left: -30px;
+  top: 20px;
+  width: 20px;
+  height: 1px;
+  background-color: var(--border-color);
+}
+
+/* Collapsed state */
+.tree-children.collapsed {
+  display: none;
+}
+
+.tree-node.collapsed .tree-toggle {
+  transform: rotate(-90deg);
+}
+
+/* Highlighted search results */
+.tree-node.highlighted > .tree-node-content {
+  background-color: var(--warning-color);
+  color: white;
+}
+
+.tree-node.highlighted .tree-number {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .tree-children {
+    padding-left: 20px;
+  }
+  
+  .tree-node-meta {
+    display: none;
+  }
+  
+  .tree-number {
+    font-size: 0.75rem;
+  }
+}
+</style>
+
+<script>
+let currentMatchIndex = -1;
+let matches = [];
+
+function toggleNode(element) {
+  const node = element.parentElement;
+  const children = node.querySelector(':scope > .tree-children');
+  const toggle = element.querySelector('.tree-toggle');
+  
+  if (children) {
+    children.classList.toggle('collapsed');
+    node.classList.toggle('collapsed');
+    
+    if (toggle) {
+      toggle.textContent = children.classList.contains('collapsed') ? '▶' : '▼';
+    }
+  }
+}
+
+function expandAll() {
+  const children = document.querySelectorAll('.tree-children');
+  const nodes = document.querySelectorAll('.tree-node');
+  const toggles = document.querySelectorAll('.tree-toggle');
+  
+  children.forEach(child => child.classList.remove('collapsed'));
+  nodes.forEach(node => node.classList.remove('collapsed'));
+  toggles.forEach(toggle => {
+    if (toggle.textContent === '▶') {
+      toggle.textContent = '▼';
+    }
+  });
+}
+
+function collapseAll() {
+  const children = document.querySelectorAll('.tree-children');
+  const nodes = document.querySelectorAll('.tree-node');
+  const toggles = document.querySelectorAll('.tree-toggle');
+  
+  children.forEach(child => child.classList.add('collapsed'));
+  nodes.forEach(node => node.classList.add('collapsed'));
+  toggles.forEach(toggle => {
+    if (toggle.textContent === '▼') {
+      toggle.textContent = '▶';
+    }
+  });
+}
+
+function filterTree() {
+  const searchTerm = document.getElementById('tree-search').value.toLowerCase();
+  const filterType = document.getElementById('tree-filter').value;
+  const nodes = document.querySelectorAll('.tree-node');
+  
+  matches = [];
+  currentMatchIndex = -1;
+  
+  nodes.forEach(node => {
+    const nodeText = node.dataset.nodeText.toLowerCase();
+    const hasChildren = node.querySelector(':scope > .tree-children') !== null;
+    const isLeaf = !hasChildren;
+    
+    let showNode = true;
+    
+    // Apply search filter
+    if (searchTerm && !nodeText.includes(searchTerm)) {
+      showNode = false;
+    }
+    
+    // Apply type filter
+    if (filterType === 'has-children' && !hasChildren) {
+      showNode = false;
+    } else if (filterType === 'leaf-only' && !isLeaf) {
+      showNode = false;
+    }
+    
+    // Show/hide node
+    node.style.display = showNode ? 'block' : 'none';
+    
+    // Highlight search matches
+    if (searchTerm && nodeText.includes(searchTerm)) {
+      node.classList.add('highlighted');
+      matches.push(node);
+    } else {
+      node.classList.remove('highlighted');
+    }
+    
+    // Auto-expand parent nodes of matches
+    if (searchTerm && nodeText.includes(searchTerm)) {
+      let parent = node.parentElement;
+      while (parent && parent.classList.contains('tree-children')) {
+        parent.classList.remove('collapsed');
+        parent.parentElement.classList.remove('collapsed');
+        const toggle = parent.parentElement.querySelector('.tree-toggle');
+        if (toggle) toggle.textContent = '▼';
+        parent = parent.parentElement.parentElement;
+      }
+    }
+  });
+}
+
+function findNextMatch() {
+  if (matches.length === 0) return;
+  
+  currentMatchIndex = (currentMatchIndex + 1) % matches.length;
+  const match = matches[currentMatchIndex];
+  
+  // Scroll to match
+  match.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  
+  // Highlight temporarily
+  match.style.backgroundColor = 'var(--accent-color)';
+  setTimeout(() => {
+    match.style.backgroundColor = '';
+  }, 1000);
+}
+
+function scrollToTop() {
+  document.getElementById('tree-container').scrollIntoView({ 
+    behavior: 'smooth', 
+    block: 'start' 
+  });
+}
+
+function resetFilters() {
+  document.getElementById('tree-search').value = '';
+  document.getElementById('tree-filter').value = '';
+  filterTree();
+  expandAll();
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', function() {
+  // Add keyboard shortcuts
+  document.addEventListener('keydown', function(e) {
+    if (e.ctrlKey || e.metaKey) {
+      switch(e.key) {
+        case 'f':
+          e.preventDefault();
+          document.getElementById('tree-search').focus();
+          break;
+        case 'e':
+          e.preventDefault();
+          expandAll();
+          break;
+        case 'w':
+          e.preventDefault();
+          collapseAll();
+          break;
+      }
+    }
+  });
+});
+</script>
 {% endblock %}

referenzen/tests.py

@@ -1,398 +1,3 @@
 from django.test import TestCase
-from django.core.exceptions import ValidationError
-from .models import Referenz, Referenzerklaerung
-from abschnitte.models import AbschnittTyp
 
-
-class ReferenzModelTest(TestCase):
-    """Test cases for Referenz model"""
-    
-    def setUp(self):
-        """Set up test data"""
-        self.referenz = Referenz.objects.create(
-            name_nummer="ISO-27001",
-            name_text="Information Security Management",
-            url="https://www.iso.org/isoiec-27001-information-security.html"
-        )
-    
-    def test_referenz_creation(self):
-        """Test that Referenz is created correctly"""
-        self.assertEqual(self.referenz.name_nummer, "ISO-27001")
-        self.assertEqual(self.referenz.name_text, "Information Security Management")
-        self.assertEqual(self.referenz.url, "https://www.iso.org/isoiec-27001-information-security.html")
-        self.assertIsNone(self.referenz.oberreferenz)
-    
-    def test_referenz_str(self):
-        """Test string representation of Referenz"""
-        self.assertEqual(str(self.referenz), "ISO-27001")
-    
-    def test_referenz_verbose_name_plural(self):
-        """Test verbose name plural"""
-        self.assertEqual(
-            Referenz._meta.verbose_name_plural,
-            "Referenzen"
-        )
-    
-    def test_referenz_path_method(self):
-        """Test Path method for root reference"""
-        path = self.referenz.Path()
-        self.assertEqual(path, "ISO-27001 (Information Security Management)")
-    
-    def test_referenz_path_without_name_text(self):
-        """Test Path method when name_text is empty"""
-        referenz_no_text = Referenz.objects.create(
-            name_nummer="NIST-800-53"
-        )
-        path = referenz_no_text.Path()
-        self.assertEqual(path, "NIST-800-53")
-    
-    def test_referenz_blank_fields(self):
-        """Test that optional fields can be blank"""
-        referenz_minimal = Referenz.objects.create(
-            name_nummer="TEST-001"
-        )
-        self.assertEqual(referenz_minimal.name_text, "")
-        self.assertEqual(referenz_minimal.url, "")
-        self.assertIsNone(referenz_minimal.oberreferenz)
-    
-    def test_referenz_max_lengths(self):
-        """Test max_length constraints"""
-        max_name_nummer = "a" * 100
-        max_name_text = "b" * 255
-        
-        referenz = Referenz.objects.create(
-            name_nummer=max_name_nummer,
-            name_text=max_name_text
-        )
-        
-        self.assertEqual(referenz.name_nummer, max_name_nummer)
-        self.assertEqual(referenz.name_text, max_name_text)
-    
-    def test_create_multiple_references(self):
-        """Test creating multiple Referenz objects"""
-        references = [
-            ("ISO-9001", "Quality Management"),
-            ("ISO-14001", "Environmental Management"),
-            ("ISO-45001", "Occupational Health and Safety")
-        ]
-        
-        for name_nummer, name_text in references:
-            Referenz.objects.create(
-                name_nummer=name_nummer,
-                name_text=name_text
-            )
-        
-        self.assertEqual(Referenz.objects.count(), 4)  # Including setUp referenz
-
-
-class ReferenzHierarchyTest(TestCase):
-    """Test cases for Referenz hierarchy using MPTT"""
-    
-    def setUp(self):
-        """Set up hierarchical test data"""
-        # Create root references
-        self.iso_root = Referenz.objects.create(
-            name_nummer="ISO",
-            name_text="International Organization for Standardization"
-        )
-        
-        self.iso_27000_series = Referenz.objects.create(
-            name_nummer="ISO-27000",
-            name_text="Information Security Management System Family",
-            oberreferenz=self.iso_root
-        )
-        
-        self.iso_27001 = Referenz.objects.create(
-            name_nummer="ISO-27001",
-            name_text="Information Security Management",
-            oberreferenz=self.iso_27000_series
-        )
-        
-        self.iso_27002 = Referenz.objects.create(
-            name_nummer="ISO-27002",
-            name_text="Code of Practice for Information Security Controls",
-            oberreferenz=self.iso_27000_series
-        )
-    
-    def test_hierarchy_relationships(self):
-        """Test parent-child relationships"""
-        self.assertEqual(self.iso_27000_series.oberreferenz, self.iso_root)
-        self.assertEqual(self.iso_27001.oberreferenz, self.iso_27000_series)
-        self.assertEqual(self.iso_27002.oberreferenz, self.iso_27000_series)
-    
-    def test_get_ancestors(self):
-        """Test getting ancestors"""
-        ancestors = self.iso_27001.get_ancestors()
-        expected_ancestors = [self.iso_root, self.iso_27000_series]
-        self.assertEqual(list(ancestors), expected_ancestors)
-    
-    def test_get_ancestors_include_self(self):
-        """Test getting ancestors including self"""
-        ancestors = self.iso_27001.get_ancestors(include_self=True)
-        expected_ancestors = [self.iso_root, self.iso_27000_series, self.iso_27001]
-        self.assertEqual(list(ancestors), expected_ancestors)
-    
-    def test_get_descendants(self):
-        """Test getting descendants"""
-        descendants = self.iso_27000_series.get_descendants()
-        expected_descendants = [self.iso_27001, self.iso_27002]
-        self.assertEqual(list(descendants), expected_descendants)
-    
-    def test_get_children(self):
-        """Test getting direct children"""
-        children = self.iso_27000_series.get_children()
-        expected_children = [self.iso_27001, self.iso_27002]
-        self.assertEqual(list(children), expected_children)
-    
-    def test_get_root(self):
-        """Test getting root of hierarchy"""
-        root = self.iso_27001.get_root()
-        self.assertEqual(root, self.iso_root)
-    
-    def test_is_root(self):
-        """Test is_root method"""
-        self.assertTrue(self.iso_root.is_root_node())
-        self.assertFalse(self.iso_27001.is_root_node())
-    
-    def test_is_leaf(self):
-        """Test is_leaf method"""
-        self.assertFalse(self.iso_root.is_leaf_node())
-        self.assertFalse(self.iso_27000_series.is_leaf_node())
-        self.assertTrue(self.iso_27001.is_leaf_node())
-        self.assertTrue(self.iso_27002.is_leaf_node())
-    
-    def test_level_property(self):
-        """Test level property"""
-        self.assertEqual(self.iso_root.level, 0)
-        self.assertEqual(self.iso_27000_series.level, 1)
-        self.assertEqual(self.iso_27001.level, 2)
-        self.assertEqual(self.iso_27002.level, 2)
-    
-    def test_path_method_with_hierarchy(self):
-        """Test Path method with hierarchical references"""
-        path = self.iso_27001.Path()
-        expected_path = "ISO → ISO-27000 → ISO-27001 (Information Security Management)"
-        self.assertEqual(path, expected_path)
-    
-    def test_path_method_without_name_text_in_hierarchy(self):
-        """Test Path method when intermediate nodes have no name_text"""
-        # Create reference without name_text
-        ref_no_text = Referenz.objects.create(
-            name_nummer="NO-TEXT",
-            oberreferenz=self.iso_root
-        )
-        
-        child_ref = Referenz.objects.create(
-            name_nummer="CHILD",
-            name_text="Child Reference",
-            oberreferenz=ref_no_text
-        )
-        
-        path = child_ref.Path()
-        expected_path = "ISO → NO-TEXT → CHILD (Child Reference)"
-        self.assertEqual(path, expected_path)
-    
-    def test_order_insertion_by(self):
-        """Test that references are ordered by name_nummer"""
-        # Create more children in different order
-        ref_c = Referenz.objects.create(
-            name_nummer="C-REF",
-            oberreferenz=self.iso_root
-        )
-        ref_a = Referenz.objects.create(
-            name_nummer="A-REF", 
-            oberreferenz=self.iso_root
-        )
-        ref_b = Referenz.objects.create(
-            name_nummer="B-REF",
-            oberreferenz=self.iso_root
-        )
-        
-        children = list(self.iso_root.get_children())
-        # Should be ordered alphabetically by name_nummer
-        expected_order = [ref_a, ref_b, ref_c, self.iso_27000_series]
-        self.assertEqual(children, expected_order)
-
-
-class ReferenzerklaerungModelTest(TestCase):
-    """Test cases for Referenzerklaerung model"""
-    
-    def setUp(self):
-        """Set up test data"""
-        self.referenz = Referenz.objects.create(
-            name_nummer="ISO-27001",
-            name_text="Information Security Management"
-        )
-        self.abschnitttyp = AbschnittTyp.objects.create(
-            abschnitttyp="text"
-        )
-        self.erklaerung = Referenzerklaerung.objects.create(
-            erklaerung=self.referenz,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Dies ist eine Erklärung für ISO-27001.",
-            order=1
-        )
-    
-    def test_referenzerklaerung_creation(self):
-        """Test that Referenzerklaerung is created correctly"""
-        self.assertEqual(self.erklaerung.erklaerung, self.referenz)
-        self.assertEqual(self.erklaerung.abschnitttyp, self.abschnitttyp)
-        self.assertEqual(self.erklaerung.inhalt, "Dies ist eine Erklärung für ISO-27001.")
-        self.assertEqual(self.erklaerung.order, 1)
-    
-    def test_referenzerklaerung_foreign_key_relationship(self):
-        """Test foreign key relationship to Referenz"""
-        self.assertEqual(self.erklaerung.erklaerung.name_nummer, "ISO-27001")
-        self.assertEqual(self.erklaerung.erklaerung.name_text, "Information Security Management")
-    
-    def test_referenzerklaerung_cascade_delete(self):
-        """Test that deleting Referenz cascades to Referenzerklaerung"""
-        referenz_count = Referenz.objects.count()
-        erklaerung_count = Referenzerklaerung.objects.count()
-        
-        self.referenz.delete()
-        
-        self.assertEqual(Referenz.objects.count(), referenz_count - 1)
-        self.assertEqual(Referenzerklaerung.objects.count(), erklaerung_count - 1)
-    
-    def test_referenzerklaerung_verbose_name(self):
-        """Test verbose name"""
-        self.assertEqual(
-            Referenzerklaerung._meta.verbose_name,
-            "Erklärung"
-        )
-    
-    def test_referenzerklaerung_multiple_explanations(self):
-        """Test creating multiple explanations for one Referenz"""
-        abschnitttyp2 = AbschnittTyp.objects.create(abschnitttyp="liste ungeordnet")
-        erklaerung2 = Referenzerklaerung.objects.create(
-            erklaerung=self.referenz,
-            abschnitttyp=abschnitttyp2,
-            inhalt="Zweite Erklärung für ISO-27001.",
-            order=2
-        )
-        
-        explanations = Referenzerklaerung.objects.filter(erklaerung=self.referenz)
-        self.assertEqual(explanations.count(), 2)
-        self.assertIn(self.erklaerung, explanations)
-        self.assertIn(erklaerung2, explanations)
-    
-    def test_referenzerklaerung_ordering(self):
-        """Test that explanations can be ordered"""
-        erklaerung2 = Referenzerklaerung.objects.create(
-            erklaerung=self.referenz,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Zweite Erklärung",
-            order=3
-        )
-        erklaerung3 = Referenzerklaerung.objects.create(
-            erklaerung=self.referenz,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Erste Erklärung",
-            order=2
-        )
-        
-        ordered = Referenzerklaerung.objects.filter(erklaerung=self.referenz).order_by('order')
-        expected_order = [self.erklaerung, erklaerung3, erklaerung2]
-        self.assertEqual(list(ordered), expected_order)
-    
-    def test_referenzerklaerung_blank_fields(self):
-        """Test that optional fields can be blank/null"""
-        referenz2 = Referenz.objects.create(name_nummer="TEST-001")
-        erklaerung_blank = Referenzerklaerung.objects.create(
-            erklaerung=referenz2
-        )
-        
-        self.assertIsNone(erklaerung_blank.abschnitttyp)
-        self.assertIsNone(erklaerung_blank.inhalt)
-        self.assertEqual(erklaerung_blank.order, 0)
-    
-    def test_referenzerklaerung_inheritance(self):
-        """Test that Referenzerklaerung inherits from Textabschnitt"""
-        # Check that it has the expected fields from Textabschnitt
-        self.assertTrue(hasattr(self.erklaerung, 'abschnitttyp'))
-        self.assertTrue(hasattr(self.erklaerung, 'inhalt'))
-        self.assertTrue(hasattr(self.erklaerung, 'order'))
-        
-        # Check that the fields work as expected
-        self.assertIsInstance(self.erklaerung.abschnitttyp, AbschnittTyp)
-        self.assertIsInstance(self.erklaerung.inhalt, str)
-        self.assertIsInstance(self.erklaerung.order, int)
-
-
-class ReferenzIntegrationTest(TestCase):
-    """Integration tests for Referenz app"""
-    
-    def setUp(self):
-        """Set up test data"""
-        self.root_ref = Referenz.objects.create(
-            name_nummer="ROOT",
-            name_text="Root Reference"
-        )
-        
-        self.child_ref = Referenz.objects.create(
-            name_nummer="CHILD",
-            name_text="Child Reference",
-            oberreferenz=self.root_ref
-        )
-        
-        self.abschnitttyp = AbschnittTyp.objects.create(abschnitttyp="text")
-        
-        self.erklaerung = Referenzerklaerung.objects.create(
-            erklaerung=self.child_ref,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Explanation for child reference",
-            order=1
-        )
-    
-    def test_reference_with_explanations_query(self):
-        """Test querying references with their explanations"""
-        references_with_explanations = Referenz.objects.filter(
-            referenzerklaerung__isnull=False
-        ).distinct()
-        
-        self.assertEqual(references_with_explanations.count(), 1)
-        self.assertIn(self.child_ref, references_with_explanations)
-        self.assertNotIn(self.root_ref, references_with_explanations)
-    
-    def test_reference_without_explanations(self):
-        """Test finding references without explanations"""
-        references_without_explanations = Referenz.objects.filter(
-            referenzerklaerung__isnull=True
-        )
-        
-        self.assertEqual(references_without_explanations.count(), 1)
-        self.assertEqual(references_without_explanations.first(), self.root_ref)
-    
-    def test_explanation_count_annotation(self):
-        """Test annotating references with explanation count"""
-        from django.db.models import Count
-        
-        references_with_count = Referenz.objects.annotate(
-            explanation_count=Count('referenzerklaerung')
-        )
-        
-        for reference in references_with_count:
-            if reference == self.child_ref:
-                self.assertEqual(reference.explanation_count, 1)
-            else:
-                self.assertEqual(reference.explanation_count, 0)
-    
-    def test_hierarchy_with_explanations(self):
-        """Test that explanations work correctly with hierarchical references"""
-        # Add explanation to root reference
-        root_erklaerung = Referenzerklaerung.objects.create(
-            erklaerung=self.root_ref,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Explanation for root reference",
-            order=1
-        )
-        
-        # Both references should now have explanations
-        references_with_explanations = Referenz.objects.filter(
-            referenzerklaerung__isnull=False
-        ).distinct()
-        
-        self.assertEqual(references_with_explanations.count(), 2)
-        self.assertIn(self.root_ref, references_with_explanations)
-        self.assertIn(self.child_ref, references_with_explanations)
+# Create your tests here.

rollen/tests.py

@@ -1,367 +1,3 @@
 from django.test import TestCase
-from django.core.exceptions import ValidationError
-from django.db.models import Count
-from .models import Rolle, RollenBeschreibung
-from abschnitte.models import AbschnittTyp
 
-
-class RolleModelTest(TestCase):
-    """Test cases for Rolle model"""
-    
-    def setUp(self):
-        """Set up test data"""
-        self.rolle = Rolle.objects.create(
-            name="Systemadministrator"
-        )
-    
-    def test_rolle_creation(self):
-        """Test that Rolle is created correctly"""
-        self.assertEqual(self.rolle.name, "Systemadministrator")
-    
-    def test_rolle_str(self):
-        """Test string representation of Rolle"""
-        self.assertEqual(str(self.rolle), "Systemadministrator")
-    
-    def test_rolle_primary_key(self):
-        """Test that name field is the primary key"""
-        pk_field = Rolle._meta.pk
-        self.assertEqual(pk_field.name, 'name')
-        self.assertEqual(pk_field.max_length, 100)
-    
-    def test_rolle_verbose_name_plural(self):
-        """Test verbose name plural"""
-        self.assertEqual(
-            Rolle._meta.verbose_name_plural,
-            "Rollen"
-        )
-    
-    def test_rolle_max_length(self):
-        """Test max_length constraint"""
-        max_length_rolle = "a" * 100
-        rolle = Rolle.objects.create(name=max_length_rolle)
-        self.assertEqual(rolle.name, max_length_rolle)
-    
-    def test_rolle_unique(self):
-        """Test that name must be unique"""
-        with self.assertRaises(Exception):
-            Rolle.objects.create(name="Systemadministrator")
-    
-    def test_create_multiple_rollen(self):
-        """Test creating multiple Rolle objects"""
-        rollen = [
-            "Datenschutzbeauftragter",
-            "IT-Sicherheitsbeauftragter", 
-            "Risikomanager",
-            "Compliance-Officer"
-        ]
-        for rolle_name in rollen:
-            Rolle.objects.create(name=rolle_name)
-        
-        self.assertEqual(Rolle.objects.count(), 5)  # Including setUp rolle
-    
-    def test_rolle_case_sensitivity(self):
-        """Test that role name is case sensitive"""
-        rolle_lower = Rolle.objects.create(name="systemadministrator")
-        self.assertNotEqual(self.rolle.pk, rolle_lower.pk)
-        self.assertEqual(Rolle.objects.count(), 2)
-    
-    def test_rolle_with_special_characters(self):
-        """Test creating roles with special characters"""
-        special_roles = [
-            "IT-Administrator",
-            "CISO (Chief Information Security Officer)",
-            "Datenschutz-Beauftragter/-in",
-            "Sicherheitsbeauftragter"
-        ]
-        
-        for role_name in special_roles:
-            rolle = Rolle.objects.create(name=role_name)
-            self.assertEqual(rolle.name, role_name)
-        
-        self.assertEqual(Rolle.objects.count(), 5)  # Including setUp rolle
-
-
-class RollenBeschreibungModelTest(TestCase):
-    """Test cases for RollenBeschreibung model"""
-    
-    def setUp(self):
-        """Set up test data"""
-        self.rolle = Rolle.objects.create(
-            name="Systemadministrator"
-        )
-        self.abschnitttyp = AbschnittTyp.objects.create(
-            abschnitttyp="text"
-        )
-        self.beschreibung = RollenBeschreibung.objects.create(
-            abschnitt=self.rolle,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Der Systemadministrator ist für die Verwaltung und Wartung der IT-Systeme verantwortlich.",
-            order=1
-        )
-    
-    def test_rollenbeschreibung_creation(self):
-        """Test that RollenBeschreibung is created correctly"""
-        self.assertEqual(self.beschreibung.abschnitt, self.rolle)
-        self.assertEqual(self.beschreibung.abschnitttyp, self.abschnitttyp)
-        self.assertEqual(self.beschreibung.inhalt, "Der Systemadministrator ist für die Verwaltung und Wartung der IT-Systeme verantwortlich.")
-        self.assertEqual(self.beschreibung.order, 1)
-    
-    def test_rollenbeschreibung_foreign_key_relationship(self):
-        """Test foreign key relationship to Rolle"""
-        self.assertEqual(self.beschreibung.abschnitt.name, "Systemadministrator")
-    
-    def test_rollenbeschreibung_cascade_delete(self):
-        """Test that deleting Rolle cascades to RollenBeschreibung"""
-        rolle_count = Rolle.objects.count()
-        beschreibung_count = RollenBeschreibung.objects.count()
-        
-        self.rolle.delete()
-        
-        self.assertEqual(Rolle.objects.count(), rolle_count - 1)
-        self.assertEqual(RollenBeschreibung.objects.count(), beschreibung_count - 1)
-    
-    def test_rollenbeschreibung_verbose_names(self):
-        """Test verbose names"""
-        self.assertEqual(
-            RollenBeschreibung._meta.verbose_name,
-            "Rollenbeschreibungs-Abschnitt"
-        )
-        self.assertEqual(
-            RollenBeschreibung._meta.verbose_name_plural,
-            "Rollenbeschreibung"
-        )
-    
-    def test_rollenbeschreibung_multiple_descriptions(self):
-        """Test creating multiple descriptions for one Rolle"""
-        abschnitttyp2 = AbschnittTyp.objects.create(abschnitttyp="liste ungeordnet")
-        beschreibung2 = RollenBeschreibung.objects.create(
-            abschnitt=self.rolle,
-            abschnitttyp=abschnitttyp2,
-            inhalt="Aufgaben:\n- Systemüberwachung\n- Backup-Management\n- Benutzeradministration",
-            order=2
-        )
-        
-        descriptions = RollenBeschreibung.objects.filter(abschnitt=self.rolle)
-        self.assertEqual(descriptions.count(), 2)
-        self.assertIn(self.beschreibung, descriptions)
-        self.assertIn(beschreibung2, descriptions)
-    
-    def test_rollenbeschreibung_ordering(self):
-        """Test that descriptions can be ordered"""
-        beschreibung2 = RollenBeschreibung.objects.create(
-            abschnitt=self.rolle,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Zweite Beschreibung",
-            order=3
-        )
-        beschreibung3 = RollenBeschreibung.objects.create(
-            abschnitt=self.rolle,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Erste Beschreibung",
-            order=2
-        )
-        
-        ordered = RollenBeschreibung.objects.filter(abschnitt=self.rolle).order_by('order')
-        expected_order = [self.beschreibung, beschreibung3, beschreibung2]
-        self.assertEqual(list(ordered), expected_order)
-    
-    def test_rollenbeschreibung_blank_fields(self):
-        """Test that optional fields can be blank/null"""
-        rolle2 = Rolle.objects.create(name="Testrolle")
-        beschreibung_blank = RollenBeschreibung.objects.create(
-            abschnitt=rolle2
-        )
-        
-        self.assertIsNone(beschreibung_blank.abschnitttyp)
-        self.assertIsNone(beschreibung_blank.inhalt)
-        self.assertEqual(beschreibung_blank.order, 0)
-    
-    def test_rollenbeschreibung_inheritance(self):
-        """Test that RollenBeschreibung inherits from Textabschnitt"""
-        # Check that it has the expected fields from Textabschnitt
-        self.assertTrue(hasattr(self.beschreibung, 'abschnitttyp'))
-        self.assertTrue(hasattr(self.beschreibung, 'inhalt'))
-        self.assertTrue(hasattr(self.beschreibung, 'order'))
-        
-        # Check that the fields work as expected
-        self.assertIsInstance(self.beschreibung.abschnitttyp, AbschnittTyp)
-        self.assertIsInstance(self.beschreibung.inhalt, str)
-        self.assertIsInstance(self.beschreibung.order, int)
-    
-    def test_rollenbeschreibung_different_types(self):
-        """Test creating descriptions with different section types"""
-        # Create different section types
-        typ_list = AbschnittTyp.objects.create(abschnitttyp="liste ungeordnet")
-        typ_table = AbschnittTyp.objects.create(abschnitttyp="tabelle")
-        
-        # Create descriptions with different types
-        beschreibung_text = RollenBeschreibung.objects.create(
-            abschnitt=self.rolle,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Textbeschreibung der Rolle",
-            order=1
-        )
-        
-        beschreibung_list = RollenBeschreibung.objects.create(
-            abschnitt=self.rolle,
-            abschnitttyp=typ_list,
-            inhalt="Aufgabe 1\nAufgabe 2\nAufgabe 3",
-            order=2
-        )
-        
-        beschreibung_table = RollenBeschreibung.objects.create(
-            abschnitt=self.rolle,
-            abschnitttyp=typ_table,
-            inhalt="| Verantwortung | Priorität |\n|--------------|------------|\n| Systemwartung | Hoch |",
-            order=3
-        )
-        
-        # Verify all descriptions are created
-        descriptions = RollenBeschreibung.objects.filter(abschnitt=self.rolle)
-        self.assertEqual(descriptions.count(), 4)  # Including setUp beschreibung
-        
-        # Verify types are correct
-        self.assertEqual(beschreibung_text.abschnitttyp, self.abschnitttyp)
-        self.assertEqual(beschreibung_list.abschnitttyp, typ_list)
-        self.assertEqual(beschreibung_table.abschnitttyp, typ_table)
-
-
-class RolleIntegrationTest(TestCase):
-    """Integration tests for Rolle app"""
-    
-    def setUp(self):
-        """Set up test data"""
-        self.rolle1 = Rolle.objects.create(name="IT-Sicherheitsbeauftragter")
-        self.rolle2 = Rolle.objects.create(name="Datenschutzbeauftragter")
-        
-        self.abschnitttyp = AbschnittTyp.objects.create(abschnitttyp="text")
-        
-        self.beschreibung1 = RollenBeschreibung.objects.create(
-            abschnitt=self.rolle1,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Beschreibung für IT-Sicherheitsbeauftragten",
-            order=1
-        )
-        
-        self.beschreibung2 = RollenBeschreibung.objects.create(
-            abschnitt=self.rolle2,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Beschreibung für Datenschutzbeauftragten",
-            order=1
-        )
-    
-    def test_rolle_with_descriptions_query(self):
-        """Test querying Rollen with their descriptions"""
-        rollen_with_descriptions = Rolle.objects.filter(
-            rollenbeschreibung__isnull=False
-        ).distinct()
-        
-        self.assertEqual(rollen_with_descriptions.count(), 2)
-        self.assertIn(self.rolle1, rollen_with_descriptions)
-        self.assertIn(self.rolle2, rollen_with_descriptions)
-    
-    def test_rolle_without_descriptions(self):
-        """Test finding Rollen without descriptions"""
-        rolle3 = Rolle.objects.create(name="Compliance-Officer")
-        
-        rollen_without_descriptions = Rolle.objects.filter(
-            rollenbeschreibung__isnull=True
-        )
-        
-        self.assertEqual(rollen_without_descriptions.count(), 1)
-        self.assertEqual(rollen_without_descriptions.first(), rolle3)
-    
-    def test_description_count_annotation(self):
-        """Test annotating Rollen with description count"""
-        from django.db.models import Count
-        
-        rollen_with_count = Rolle.objects.annotate(
-            description_count=Count('rollenbeschreibung')
-        )
-        
-        for rolle in rollen_with_count:
-            if rolle.name in ["IT-Sicherheitsbeauftragter", "Datenschutzbeauftragter"]:
-                self.assertEqual(rolle.description_count, 1)
-            else:
-                self.assertEqual(rolle.description_count, 0)
-    
-    def test_multiple_descriptions_per_rolle(self):
-        """Test multiple descriptions for a single role"""
-        # Add more descriptions to rolle1
-        abschnitttyp2 = AbschnittTyp.objects.create(abschnitttyp="liste ungeordnet")
-        
-        beschreibung2 = RollenBeschreibung.objects.create(
-            abschnitt=self.rolle1,
-            abschnitttyp=abschnitttyp2,
-            inhalt="Zusätzliche Aufgaben:\n- Überwachung\n- Berichterstattung",
-            order=2
-        )
-        
-        # Check that rolle1 now has 2 descriptions
-        descriptions = RollenBeschreibung.objects.filter(abschnitt=self.rolle1)
-        self.assertEqual(descriptions.count(), 2)
-        
-        # Check annotation
-        rolle_with_count = Rolle.objects.annotate(
-            description_count=Count('rollenbeschreibung')
-        ).get(pk=self.rolle1.pk)
-        self.assertEqual(rolle_with_count.description_count, 2)
-    
-    def test_role_descriptions_ordered(self):
-        """Test that role descriptions are returned in correct order"""
-        # Add more descriptions in random order
-        beschreibung2 = RollenBeschreibung.objects.create(
-            abschnitt=self.rolle1,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Dritte Beschreibung",
-            order=3
-        )
-        
-        beschreibung3 = RollenBeschreibung.objects.create(
-            abschnitt=self.rolle1,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Zweite Beschreibung",
-            order=2
-        )
-        
-        # Get descriptions in order
-        ordered_descriptions = RollenBeschreibung.objects.filter(
-            abschnitt=self.rolle1
-        ).order_by('order')
-        
-        expected_order = [self.beschreibung1, beschreibung3, beschreibung2]
-        self.assertEqual(list(ordered_descriptions), expected_order)
-    
-    def test_role_search_by_name(self):
-        """Test searching roles by name"""
-        # Test exact match
-        exact_match = Rolle.objects.filter(name="IT-Sicherheitsbeauftragter")
-        self.assertEqual(exact_match.count(), 1)
-        self.assertEqual(exact_match.first(), self.rolle1)
-        
-        # Test case-sensitive contains
-        contains_match = Rolle.objects.filter(name__contains="Sicherheits")
-        self.assertEqual(contains_match.count(), 1)
-        self.assertEqual(contains_match.first(), self.rolle1)
-        
-        # Test case-insensitive contains
-        icontains_match = Rolle.objects.filter(name__icontains="sicherheits")
-        self.assertEqual(icontains_match.count(), 1)
-        self.assertEqual(icontains_match.first(), self.rolle1)
-    
-    def test_role_with_long_descriptions(self):
-        """Test roles with long description content"""
-        long_content = "Dies ist eine sehr lange Beschreibung " * 50  # Repeat to make it long
-        
-        rolle_long = Rolle.objects.create(name="Rolle mit langer Beschreibung")
-        beschreibung_long = RollenBeschreibung.objects.create(
-            abschnitt=rolle_long,
-            abschnitttyp=self.abschnitttyp,
-            inhalt=long_content,
-            order=1
-        )
-        
-        # Verify the long content is stored correctly
-        retrieved = RollenBeschreibung.objects.get(pk=beschreibung_long.pk)
-        self.assertEqual(retrieved.inhalt, long_content)
-        self.assertGreater(len(retrieved.inhalt), 1000)  # Should be quite long
+# Create your tests here.

static/custom/css/vorgaben-ui.css

@@ -0,0 +1,819 @@
+/* Vorgaben UI Custom Styles */
+:root {
+  /* Professional color scheme for security standards */
+  --primary-color: #1e3a8a;
+  --primary-dark: #1e2f5a;
+  --primary-light: #3b82f6;
+  --secondary-color: #64748b;
+  --accent-color: #0ea5e9;
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
+  --danger-color: #ef4444;
+  --info-color: #06b6d4;
+  
+  /* Neutral colors */
+  --gray-50: #f8fafc;
+  --gray-100: #f1f5f9;
+  --gray-200: #e2e8f0;
+  --gray-300: #cbd5e1;
+  --gray-400: #94a3b8;
+  --gray-500: #64748b;
+  --gray-600: #475569;
+  --gray-700: #334155;
+  --gray-800: #1e293b;
+  --gray-900: #0f172a;
+  
+  /* Typography */
+  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+  
+  /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  
+  /* Border radius */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  
+  /* Transitions */
+  --transition-fast: 150ms ease-in-out;
+  --transition-normal: 250ms ease-in-out;
+  --transition-slow: 350ms ease-in-out;
+}
+
+/* Dark mode variables */
+[data-theme="dark"] {
+  --bg-primary: var(--gray-900);
+  --bg-secondary: var(--gray-800);
+  --bg-tertiary: var(--gray-700);
+  --text-primary: var(--gray-100);
+  --text-secondary: var(--gray-300);
+  --text-muted: var(--gray-400);
+  --border-color: var(--gray-700);
+  --card-bg: var(--gray-800);
+  --navbar-bg: var(--gray-900);
+}
+
+/* Light mode variables */
+[data-theme="light"] {
+  --bg-primary: #ffffff;
+  --bg-secondary: var(--gray-50);
+  --bg-tertiary: var(--gray-100);
+  --text-primary: var(--gray-900);
+  --text-secondary: var(--gray-700);
+  --text-muted: var(--gray-500);
+  --border-color: var(--gray-200);
+  --card-bg: #ffffff;
+  --navbar-bg: #ffffff;
+}
+
+/* Base styles */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family);
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color var(--transition-normal), color var(--transition-normal);
+  line-height: 1.6;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  line-height: 1.3;
+  margin-bottom: var(--spacing-md);
+  color: var(--text-primary);
+}
+
+h1 { font-size: 2.25rem; }
+h2 { font-size: 1.875rem; }
+h3 { font-size: 1.5rem; }
+h4 { font-size: 1.25rem; }
+h5 { font-size: 1.125rem; }
+h6 { font-size: 1rem; }
+
+/* Navbar enhancements */
+.navbar {
+  background-color: var(--navbar-bg) !important;
+  border-bottom: 1px solid var(--border-color);
+  box-shadow: var(--shadow-sm);
+  padding: var(--spacing-md) 0;
+  transition: all var(--transition-normal);
+}
+
+.navbar-brand {
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: var(--primary-color) !important;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.navbar-brand::before {
+  content: "🔒";
+  font-size: 1.25rem;
+}
+
+.navbar-nav .nav-link {
+  color: var(--text-secondary) !important;
+  font-weight: 500;
+  padding: var(--spacing-sm) var(--spacing-md) !important;
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+  margin: 0 var(--spacing-xs);
+}
+
+.navbar-nav .nav-link:hover,
+.navbar-nav .nav-link.active {
+  color: var(--primary-color) !important;
+  background-color: var(--bg-secondary);
+}
+
+/* Search bar in navbar */
+.navbar-search {
+  position: relative;
+  max-width: 400px;
+  flex: 1;
+}
+
+.navbar-search input {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-sm) var(--spacing-lg);
+  padding-right: 2.5rem;
+  width: 100%;
+  transition: all var(--transition-fast);
+}
+
+.navbar-search input:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
+}
+
+.navbar-search button {
+  position: absolute;
+  right: var(--spacing-xs);
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  padding: var(--spacing-sm);
+}
+
+/* Dark mode toggle */
+.theme-toggle {
+  background: none;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm);
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+  font-size: 1.25rem;
+}
+
+.theme-toggle:hover {
+  background-color: var(--bg-secondary);
+  color: var(--primary-color);
+}
+
+/* Breadcrumb */
+.breadcrumb {
+  background-color: transparent;
+  padding: var(--spacing-md) 0;
+  margin-bottom: var(--spacing-lg);
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  content: "›";
+  color: var(--text-muted);
+}
+
+.breadcrumb-item a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.breadcrumb-item a:hover {
+  color: var(--primary-color);
+}
+
+/* Card enhancements */
+.card {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  transition: all var(--transition-normal);
+  overflow: hidden;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.card-header {
+  background-color: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  font-weight: 600;
+  padding: var(--spacing-lg);
+}
+
+.card-body {
+  padding: var(--spacing-lg);
+}
+
+/* Standard cards */
+.standard-card {
+  border-left: 4px solid var(--primary-color);
+  margin-bottom: var(--spacing-lg);
+}
+
+.standard-card.inactive {
+  border-left-color: var(--gray-400);
+  opacity: 0.7;
+}
+
+.standard-card .card-title {
+  color: var(--text-primary);
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: var(--spacing-sm);
+}
+
+.standard-card .standard-number {
+  color: var(--primary-color);
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+
+.standard-card .standard-meta {
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  margin-bottom: var(--spacing-md);
+}
+
+/* Badges */
+.badge {
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+}
+
+.badge-relevance {
+  background-color: var(--info-color);
+  color: white;
+}
+
+.badge-status-active {
+  background-color: var(--success-color);
+  color: white;
+}
+
+.badge-status-inactive {
+  background-color: var(--gray-400);
+  color: white;
+}
+
+/* Buttons */
+.btn {
+  font-weight: 500;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+  border: none;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-dark);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-outline {
+  background-color: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+}
+
+.btn-outline:hover {
+  background-color: var(--bg-secondary);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+/* Search enhancements */
+.search-container {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.search-form {
+  background-color: var(--card-bg);
+  padding: var(--spacing-xl);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-color);
+}
+
+.search-results {
+  margin-top: var(--spacing-xl);
+}
+
+.result-item {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-lg);
+  margin-bottom: var(--spacing-md);
+  transition: all var(--transition-fast);
+}
+
+.result-item:hover {
+  box-shadow: var(--shadow-sm);
+  border-color: var(--primary-color);
+}
+
+/* Table of contents */
+.toc {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  margin-bottom: var(--spacing-xl);
+  position: sticky;
+  top: var(--spacing-lg);
+}
+
+.toc h3 {
+  margin-top: 0;
+  margin-bottom: var(--spacing-md);
+  font-size: 1.125rem;
+  color: var(--text-primary);
+}
+
+.toc ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.toc li {
+  margin-bottom: var(--spacing-xs);
+}
+
+.toc a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  display: block;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+}
+
+.toc a:hover,
+.toc a.active {
+  background-color: var(--bg-tertiary);
+  color: var(--primary-color);
+}
+
+/* Footer */
+.footer {
+  background-color: var(--bg-secondary);
+  border-top: 1px solid var(--border-color);
+  padding: var(--spacing-xl) 0;
+  margin-top: var(--spacing-2xl);
+  color: var(--text-muted);
+  text-align: center;
+}
+
+/* Responsive design */
+@media (max-width: 1200px) {
+  .container-fluid {
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+}
+
+@media (max-width: 992px) {
+  .navbar-search {
+    max-width: 300px;
+  }
+  
+  .standard-card {
+    margin-bottom: var(--spacing-md);
+  }
+  
+  .toc {
+    position: static;
+    margin-bottom: var(--spacing-lg);
+  }
+}
+
+@media (max-width: 768px) {
+  /* Navigation */
+  .navbar {
+    padding: var(--spacing-sm) 0;
+  }
+  
+  .navbar-brand {
+    font-size: 1.25rem;
+  }
+  
+  .navbar-search {
+    max-width: 100%;
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+  }
+  
+  .navbar-nav .nav-link {
+    padding: var(--spacing-sm) var(--spacing-md) !important;
+    margin: 0;
+  }
+  
+  /* Typography */
+  h1 { font-size: 1.875rem; }
+  h2 { font-size: 1.5rem; }
+  h3 { font-size: 1.25rem; }
+  h4 { font-size: 1.125rem; }
+  
+  /* Cards */
+  .card {
+    margin-bottom: var(--spacing-md);
+  }
+  
+  .standard-card {
+    border-left-width: 3px;
+  }
+  
+  .standard-card .card-body {
+    padding: var(--spacing-md);
+  }
+  
+  /* Buttons */
+  .btn {
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: 0.875rem;
+  }
+  
+  .btn-lg {
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: 1rem;
+  }
+  
+  /* Forms */
+  .form-control, .form-select {
+    font-size: 0.875rem;
+  }
+  
+  /* Search */
+  .search-form {
+    padding: var(--spacing-md);
+  }
+  
+  .result-item {
+    padding: var(--spacing-md);
+  }
+  
+  /* Table of Contents */
+  .toc {
+    padding: var(--spacing-md);
+    margin-bottom: var(--spacing-lg);
+  }
+  
+  .toc ul {
+    font-size: 0.875rem;
+  }
+  
+  /* Standard Detail Page */
+  .vorgabe-card .card-header {
+    padding: var(--spacing-md);
+    font-size: 0.875rem;
+  }
+  
+  .vorgabe-card .card-body {
+    padding: var(--spacing-md);
+  }
+  
+  .vorgabe-content {
+    font-size: 0.875rem;
+  }
+  
+  /* Homepage */
+  .display-4 {
+    font-size: 2rem;
+  }
+  
+  .statistics-card .h2 {
+    font-size: 1.5rem;
+  }
+  
+  /* References Tree */
+  .tree-node-content {
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: 0.875rem;
+  }
+  
+  .tree-children {
+    padding-left: var(--spacing-lg);
+  }
+  
+  .tree-node-meta {
+    display: none;
+  }
+  
+  /* Breadcrumb */
+  .breadcrumb {
+    padding: var(--spacing-sm) 0;
+    font-size: 0.875rem;
+  }
+  
+  /* Footer */
+  .footer {
+    padding: var(--spacing-lg) 0;
+    font-size: 0.875rem;
+  }
+}
+
+@media (max-width: 576px) {
+  /* Extra small screens */
+  .container-fluid {
+    padding-left: var(--spacing-sm);
+    padding-right: var(--spacing-sm);
+  }
+  
+  /* Typography */
+  h1 { font-size: 1.5rem; }
+  h2 { font-size: 1.25rem; }
+  h3 { font-size: 1.125rem; }
+  
+  /* Cards */
+  .card {
+    border-radius: var(--radius-md);
+  }
+  
+  .card-header {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+  
+  .card-body {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+  
+  /* Buttons */
+  .btn {
+    width: 100%;
+    margin-bottom: var(--spacing-xs);
+  }
+  
+  .btn-group .btn {
+    width: auto;
+  }
+  
+  /* Forms */
+  .row.g-3 > .col {
+    margin-bottom: var(--spacing-md);
+  }
+  
+  /* Homepage */
+  .display-4 {
+    font-size: 1.75rem;
+  }
+  
+  .hero-section .btn-lg {
+    width: 100%;
+    margin-bottom: var(--spacing-sm);
+  }
+  
+  .statistics-row .col-6 {
+    margin-bottom: var(--spacing-md);
+  }
+  
+  /* Search */
+  .search-page .row {
+    flex-direction: column;
+  }
+  
+  .search-page .col-lg-4 {
+    order: 2;
+  }
+  
+  .search-page .col-lg-8 {
+    order: 1;
+  }
+  
+  /* Standard Detail */
+  .standard-detail-page .row {
+    flex-direction: column;
+  }
+  
+  .standard-detail-page .col-lg-8 {
+    order: 1;
+  }
+  
+  .standard-detail-page .col-lg-4 {
+    order: 2;
+  }
+  
+  /* References */
+  .references-page .row {
+    flex-direction: column;
+  }
+  
+  .references-page .col-lg-8 {
+    order: 1;
+  }
+  
+  .references-page .col-lg-4 {
+    order: 2;
+  }
+  
+  /* Tree navigation */
+  .tree-node-content {
+    flex-wrap: wrap;
+  }
+  
+  .tree-link {
+    min-width: 0;
+    flex: 1;
+  }
+  
+  /* Badges */
+  .badge {
+    font-size: 0.625rem;
+    padding: 0.125rem 0.375rem;
+  }
+  
+  /* Lists */
+  .list-group-item {
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: 0.875rem;
+  }
+  
+  /* Tables */
+  .table {
+    font-size: 0.75rem;
+  }
+  
+  .table th,
+  .table td {
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+}
+
+/* Touch-friendly adjustments for mobile */
+@media (hover: none) and (pointer: coarse) {
+  .card:hover {
+    transform: none;
+  }
+  
+  .btn:hover {
+    transform: none;
+  }
+  
+  .tree-node-content:hover {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  
+  .navbar-nav .nav-link:hover {
+    background-color: transparent;
+  }
+  
+  /* Increase touch targets */
+  .btn {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  
+  .tree-node-content {
+    min-height: 44px;
+  }
+  
+  .navbar-nav .nav-link {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+/* Landscape mobile optimizations */
+@media (max-width: 768px) and (orientation: landscape) {
+  .navbar {
+    padding: var(--spacing-xs) 0;
+  }
+  
+  .navbar-brand {
+    font-size: 1.125rem;
+  }
+  
+  h1 { font-size: 1.625rem; }
+  
+  .card {
+    margin-bottom: var(--spacing-sm);
+  }
+  
+  .search-form {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+}
+
+/* High DPI displays */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .navbar-brand::before {
+    image-rendering: -webkit-optimize-contrast;
+  }
+  
+  .tree-toggle {
+    font-weight: 300;
+  }
+}
+
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  
+  .card:hover {
+    transform: none;
+  }
+  
+  .btn:hover {
+    transform: none;
+  }
+}
+
+/* Loading states */
+.loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.spinner {
+  border: 2px solid var(--border-color);
+  border-top: 2px solid var(--primary-color);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Print styles */
+@media print {
+  .navbar,
+  .theme-toggle,
+  .btn,
+  .toc {
+    display: none !important;
+  }
+  
+  body {
+    background: white !important;
+    color: black !important;
+  }
+  
+  .card {
+    border: 1px solid #ccc !important;
+    box-shadow: none !important;
+    break-inside: avoid;
+  }
+}

stichworte/templates/stichworte/stichwort_detail.html

@@ -1,30 +1,175 @@
 {% extends "base.html" %}
-{% block title %}Stichwort: {{stichwort.stichwort}}{% endblock %}
+{% block title %}Stichwort: {{ stichwort.stichwort }}{% endblock %}
+{% block breadcrumb_items %}
+<li class="breadcrumb-item"><a href="/stichworte/">Stichworte</a></li>
+<li class="breadcrumb-item active" aria-current="page">{{ stichwort.stichwort }}</li>
+{% endblock %}
+
 {% block content %}
-<h1>{{stichwort}}</h1>
-{% if stichwort.erklaerung %}
-  <div class="card mb-4">
-    <div class="card-header d-flex justify-content-between align-items-center bg-secondary text-light">
-      <h3 class="h5 m-0">Beschreibung</h3>
-    </div>
-    <div class="card-body p-2">
+<div class="row">
+  <div class="col-lg-8">
+    <!-- Stichwort Header -->
+    <div class="card mb-4">
+      <div class="card-header bg-primary text-white">
+        <h1 class="h3 mb-0">🏷️ {{ stichwort.stichwort }}</h1>
+      </div>
+      
+      {% if stichwort.erklaerung %}
+      <div class="card-body">
+        <h5 class="card-title">📖 Beschreibung</h5>
         {% for typ, html in stichwort.erklaerung %}
-        {% if html %}<div>{{ html|safe }}</div>{% endif %}{% endfor %}
+          {% if html %}
+            <div class="content-section">{{ html|safe }}</div>
+          {% endif %}
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+
+    <!-- Relevante Vorgaben -->
+    <div class="card">
+      <div class="card-header">
+        <div class="d-flex justify-content-between align-items-center">
+          <h3 class="h5 mb-0">📝 Relevante Vorgaben</h3>
+          <span class="badge bg-success">
+            {% for vorgabe in stichwort.vorgaben %}
+              {% if vorgabe.get_status == "active" %}
+                {% if forloop.first %}1{% else %}{{ forloop.counter }}{% endif %}
+              {% endif %}
+            {% endfor %}
+            Aktiv
+          </span>
+        </div>
+      </div>
+      <div class="card-body">
+        {% if stichwort.vorgaben %}
+          <div class="list-group">
+            {% for vorgabe in stichwort.vorgaben %}
+              {% if vorgabe.get_status == "active" %}
+                <div class="list-group-item">
+                  <div class="d-flex align-items-start">
+                    <span class="badge bg-secondary me-3">{{ vorgabe.Vorgabennummer }}</span>
+                    <div class="flex-grow-1">
+                      <h6 class="mb-1">
+                        <a href="/dokumente/{{ vorgabe.dokument.nummer }}/#{{vorgabe.Vorgabennummer}}" 
+                           class="text-decoration-none">
+                          {{ vorgabe.titel }}
+                        </a>
+                      </h6>
+                      <small class="text-muted">
+                        Standard: {{ vorgabe.dokument.nummer }} – {{ vorgabe.dokument.name }}
+                      </small>
+                    </div>
+                  </div>
+                </div>
+              {% endif %}
+            {% endfor %}
+          </div>
+        {% else %}
+          <div class="text-center py-4">
+            <p class="text-muted mb-0">
+              Keine aktiven Vorgaben für dieses Stichwort gefunden.
+            </p>
+          </div>
+        {% endif %}
+      </div>
     </div>
   </div>
-{% endif %}
 
-<div class="card mb-4">
-    <div class="card-header d-flex justify-content-between align-items-center bg-secondary text-light">
-      <h3 class="h5 m-0">Relevante Vorgaben</h3>
+  <!-- Sidebar -->
+  <div class="col-lg-4">
+    <!-- Quick Actions -->
+    <div class="card mb-4 sticky-top" style="top: 1rem;">
+      <div class="card-header">
+        <h5 class="mb-0">⚡ Aktionen</h5>
+      </div>
+      <div class="card-body">
+        <div class="d-grid gap-2">
+          <a href="/stichworte/" class="btn btn-outline btn-sm">
+            ← Zurück zur Liste
+          </a>
+          <a href="/search/?q={{ stichwort.stichwort }}" class="btn btn-outline btn-sm">
+            🔍 Nach "{{ stichwort.stichwort }}" suchen
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Statistics -->
+    <div class="card mb-4">
+      <div class="card-header">
+        <h5 class="mb-0">📊 Statistiken</h5>
+      </div>
+      <div class="card-body">
+        <div class="row text-center">
+          <div class="col-6">
+            <h4 class="text-primary mb-1">
+              {% for vorgabe in stichwort.vorgaben %}
+                {% if vorgabe.get_status == "active" %}
+                  {% if forloop.first %}1{% else %}{{ forloop.counter }}{% endif %}
+                {% endif %}
+              {% endfor %}
+            </h4>
+            <small class="text-muted">Aktive Vorgaben</small>
+          </div>
+          <div class="col-6">
+            <h4 class="text-info mb-1">
+              {{ stichwort.vorgaben|length }}
+            </h4>
+            <small class="text-muted">Gesamt</small>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Related Stichworte -->
+    {% if related_stichworte %}
+    <div class="card">
+      <div class="card-header">
+        <h5 class="mb-0">🔗 Verwandte Stichworte</h5>
+      </div>
+      <div class="card-body">
+        <div class="d-flex flex-wrap gap-2">
+          {% for related in related_stichworte %}
+            <a href="/stichworte/{{ related.stichwort }}/" 
+               class="badge bg-light text-dark text-decoration-none">
+              {{ related.stichwort }}
+            </a>
+          {% endfor %}
+        </div>
+      </div>
     </div>
-    <div class="card-body p-2">
-<ul>
-    {% for vorgabe in stichwort.vorgaben %}
-    {% if vorgabe.get_status == "active" %}
-    <li><a href="{% url 'standard_detail' nummer=vorgabe.dokument.nummer %}#{{vorgabe.Vorgabennummer}}">{{vorgabe.Vorgabennummer}}</a>: {{vorgabe.titel}}</li>
     {% endif %}
-    {% endfor %}
-</ul>
-    </div>
+  </div>
+</div>
+
+<style>
+.content-section {
+  line-height: 1.6;
+  margin-bottom: 1rem;
+}
+
+.content-section h1, .content-section h2, .content-section h3 {
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.list-group-item {
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  transition: all var(--transition-fast);
+}
+
+.list-group-item:hover {
+  background-color: var(--bg-secondary);
+}
+
+.list-group-item:last-child {
+  border-bottom: none;
+}
+
+.badge {
+  font-size: 0.75rem;
+}
+</style>
 {% endblock %}

stichworte/templates/stichworte/stichwort_list.html

@@ -1,14 +1,144 @@
 {% extends "base.html" %}
 {% block title %}Stichworte{% endblock %}
-{% block content %}
-<h1>Stichworte</h1>
+{% block breadcrumb_items %}
+<li class="breadcrumb-item active" aria-current="page">Stichworte</li>
+{% endblock %}
 
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1>🏷️ Stichworte</h1>
+  <div class="d-flex gap-2">
+    <span class="badge bg-primary">{{ stichworte|length }} Kategorien</span>
+  </div>
+</div>
+
+<!-- Search and Filter -->
+<div class="card mb-4">
+  <div class="card-body">
+    <div class="row g-3">
+      <div class="col-md-8">
+        <label for="stichwort-search" class="form-label">🔍 Stichworte durchsuchen</label>
+        <input type="text" 
+               class="form-control" 
+               id="stichwort-search" 
+               placeholder="Stichwort eingeben..."
+               onkeyup="filterStichworte()">
+      </div>
+      <div class="col-md-4">
+        <label for="letter-filter" class="form-label">🔤 Buchstabe</label>
+        <select class="form-select" id="letter-filter" onchange="filterStichworte()">
+          <option value="">Alle Buchstaben</option>
+          {% for Anfang, Worte in stichworte.items %}
+          <option value="{{ Anfang }}">{{ Anfang }}</option>
+          {% endfor %}
+        </select>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Stichworte Grid -->
+<div class="row" id="stichworte-container">
   {% for Anfang, Worte in stichworte.items %}
-    <h2>{{ Anfang }}</h2>
-    <ul>
-      {% for Wort in Worte %}
-      <li><a href="{% url 'stichwort_detail' stichwort=Wort %}">{{ Wort }}</a></li>
-      {% endfor %}
-      </ul>
-    {% endfor %}
- {% endblock %}
+  <div class="col-lg-4 col-md-6 mb-4 stichwort-category" data-letter="{{ Anfang }}">
+    <div class="card h-100">
+      <div class="card-header">
+        <h3 class="h5 mb-0">{{ Anfang }}</h3>
+        <span class="badge bg-secondary">{{ Worte|length }} Stichworte</span>
+      </div>
+      <div class="card-body">
+        <div class="list-group list-group-flush">
+          {% for Wort in Worte %}
+          <a href="/stichworte/{{ Wort }}/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+            <span>{{ Wort }}</span>
+            <span class="badge bg-light text-dark">→</span>
+          </a>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+
+<!-- JavaScript for filtering -->
+<script>
+function filterStichworte() {
+  const searchTerm = document.getElementById('stichwort-search').value.toLowerCase();
+  const letterFilter = document.getElementById('letter-filter').value;
+  const categories = document.querySelectorAll('.stichwort-category');
+  
+  categories.forEach(category => {
+    const letter = category.dataset.letter;
+    const items = category.querySelectorAll('.list-group-item');
+    let hasVisibleItems = false;
+    
+    // Check if category matches letter filter
+    const matchesLetter = !letterFilter || letter === letterFilter;
+    
+    // Filter items within category
+    items.forEach(item => {
+      const text = item.textContent.toLowerCase();
+      const matchesSearch = !searchTerm || text.includes(searchTerm);
+      
+      if (matchesSearch && matchesLetter) {
+        item.style.display = 'flex';
+        hasVisibleItems = true;
+      } else {
+        item.style.display = 'none';
+      }
+    });
+    
+    // Show/hide category based on visible items
+    category.style.display = (matchesLetter && hasVisibleItems) ? 'block' : 'none';
+  });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Add hover effects
+  const items = document.querySelectorAll('.list-group-item');
+  items.forEach(item => {
+    item.addEventListener('mouseenter', function() {
+      this.style.backgroundColor = 'var(--bg-secondary)';
+    });
+    
+    item.addEventListener('mouseleave', function() {
+      this.style.backgroundColor = '';
+    });
+  });
+});
+</script>
+
+<style>
+.list-group-item {
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  padding: var(--spacing-sm) var(--spacing-md);
+  transition: all var(--transition-fast);
+}
+
+.list-group-item:hover {
+  background-color: var(--bg-secondary);
+  transform: translateX(4px);
+}
+
+.list-group-item:last-child {
+  border-bottom: none;
+}
+
+.card-header {
+  display: flex;
+  justify-content: between;
+  align-items: center;
+  background-color: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+@media (max-width: 768px) {
+  .list-group-item {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: 0.875rem;
+  }
+}
+</style>
+{% endblock %}

stichworte/tests.py

@@ -1,225 +1,3 @@
 from django.test import TestCase
-from django.core.exceptions import ValidationError
-from django.db import models
-from .models import Stichwort, Stichworterklaerung
-from abschnitte.models import AbschnittTyp
 
-
-class StichwortModelTest(TestCase):
-    """Test cases for Stichwort model"""
-    
-    def setUp(self):
-        """Set up test data"""
-        self.stichwort = Stichwort.objects.create(
-            stichwort="Sicherheit"
-        )
-    
-    def test_stichwort_creation(self):
-        """Test that Stichwort is created correctly"""
-        self.assertEqual(self.stichwort.stichwort, "Sicherheit")
-    
-    def test_stichwort_str(self):
-        """Test string representation of Stichwort"""
-        self.assertEqual(str(self.stichwort), "Sicherheit")
-    
-    def test_stichwort_primary_key(self):
-        """Test that stichwort field is the primary key"""
-        pk_field = Stichwort._meta.pk
-        self.assertEqual(pk_field.name, 'stichwort')
-        self.assertEqual(pk_field.max_length, 50)
-    
-    def test_stichwort_verbose_name_plural(self):
-        """Test verbose name plural"""
-        self.assertEqual(
-            Stichwort._meta.verbose_name_plural,
-            "Stichworte"
-        )
-    
-    def test_stichwort_max_length(self):
-        """Test max_length constraint"""
-        max_length_stichwort = "a" * 50
-        stichwort = Stichwort.objects.create(stichwort=max_length_stichwort)
-        self.assertEqual(stichwort.stichwort, max_length_stichwort)
-    
-    def test_stichwort_unique(self):
-        """Test that stichwort must be unique"""
-        with self.assertRaises(Exception):
-            Stichwort.objects.create(stichwort="Sicherheit")
-    
-    def test_create_multiple_stichworte(self):
-        """Test creating multiple Stichwort objects"""
-        stichworte = ['Datenschutz', 'Netzwerk', 'Backup', 'Verschlüsselung']
-        for stichwort in stichworte:
-            Stichwort.objects.create(stichwort=stichwort)
-        
-        self.assertEqual(Stichwort.objects.count(), 5)  # Including setUp stichwort
-    
-    def test_stichwort_case_sensitivity(self):
-        """Test that stichwort is case sensitive"""
-        stichwort_lower = Stichwort.objects.create(stichwort="sicherheit")
-        self.assertNotEqual(self.stichwort.pk, stichwort_lower.pk)
-        self.assertEqual(Stichwort.objects.count(), 2)
-
-
-class StichworterklaerungModelTest(TestCase):
-    """Test cases for Stichworterklaerung model"""
-    
-    def setUp(self):
-        """Set up test data"""
-        self.stichwort = Stichwort.objects.create(
-            stichwort="Sicherheit"
-        )
-        self.abschnitttyp = AbschnittTyp.objects.create(
-            abschnitttyp="text"
-        )
-        self.erklaerung = Stichworterklaerung.objects.create(
-            erklaerung=self.stichwort,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Dies ist eine Erklärung für Sicherheit.",
-            order=1
-        )
-    
-    def test_stichworterklaerung_creation(self):
-        """Test that Stichworterklaerung is created correctly"""
-        self.assertEqual(self.erklaerung.erklaerung, self.stichwort)
-        self.assertEqual(self.erklaerung.abschnitttyp, self.abschnitttyp)
-        self.assertEqual(self.erklaerung.inhalt, "Dies ist eine Erklärung für Sicherheit.")
-        self.assertEqual(self.erklaerung.order, 1)
-    
-    def test_stichworterklaerung_foreign_key_relationship(self):
-        """Test foreign key relationship to Stichwort"""
-        self.assertEqual(self.erklaerung.erklaerung.stichwort, "Sicherheit")
-    
-    def test_stichworterklaerung_cascade_delete(self):
-        """Test that deleting Stichwort cascades to Stichworterklaerung"""
-        stichwort_count = Stichwort.objects.count()
-        erklaerung_count = Stichworterklaerung.objects.count()
-        
-        self.stichwort.delete()
-        
-        self.assertEqual(Stichwort.objects.count(), stichwort_count - 1)
-        self.assertEqual(Stichworterklaerung.objects.count(), erklaerung_count - 1)
-    
-    def test_stichworterklaerung_verbose_name(self):
-        """Test verbose name"""
-        self.assertEqual(
-            Stichworterklaerung._meta.verbose_name,
-            "Erklärung"
-        )
-    
-    def test_stichworterklaerung_multiple_explanations(self):
-        """Test creating multiple explanations for one Stichwort"""
-        abschnitttyp2 = AbschnittTyp.objects.create(abschnitttyp="liste ungeordnet")
-        erklaerung2 = Stichworterklaerung.objects.create(
-            erklaerung=self.stichwort,
-            abschnitttyp=abschnitttyp2,
-            inhalt="Zweite Erklärung für Sicherheit.",
-            order=2
-        )
-        
-        explanations = Stichworterklaerung.objects.filter(erklaerung=self.stichwort)
-        self.assertEqual(explanations.count(), 2)
-        self.assertIn(self.erklaerung, explanations)
-        self.assertIn(erklaerung2, explanations)
-    
-    def test_stichworterklaerung_ordering(self):
-        """Test that explanations can be ordered"""
-        erklaerung2 = Stichworterklaerung.objects.create(
-            erklaerung=self.stichwort,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Zweite Erklärung",
-            order=3
-        )
-        erklaerung3 = Stichworterklaerung.objects.create(
-            erklaerung=self.stichwort,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Erste Erklärung",
-            order=2
-        )
-        
-        ordered = Stichworterklaerung.objects.filter(erklaerung=self.stichwort).order_by('order')
-        expected_order = [self.erklaerung, erklaerung3, erklaerung2]
-        self.assertEqual(list(ordered), expected_order)
-    
-    def test_stichworterklaerung_blank_fields(self):
-        """Test that optional fields can be blank/null"""
-        stichwort2 = Stichwort.objects.create(stichwort="Test")
-        erklaerung_blank = Stichworterklaerung.objects.create(
-            erklaerung=stichwort2
-        )
-        
-        self.assertIsNone(erklaerung_blank.abschnitttyp)
-        self.assertIsNone(erklaerung_blank.inhalt)
-        self.assertEqual(erklaerung_blank.order, 0)
-    
-    def test_stichworterklaerung_inheritance(self):
-        """Test that Stichworterklaerung inherits from Textabschnitt"""
-        # Check that it has the expected fields from Textabschnitt
-        self.assertTrue(hasattr(self.erklaerung, 'abschnitttyp'))
-        self.assertTrue(hasattr(self.erklaerung, 'inhalt'))
-        self.assertTrue(hasattr(self.erklaerung, 'order'))
-        
-        # Check that the fields work as expected
-        self.assertIsInstance(self.erklaerung.abschnitttyp, AbschnittTyp)
-        self.assertIsInstance(self.erklaerung.inhalt, str)
-        self.assertIsInstance(self.erklaerung.order, int)
-
-
-class StichwortIntegrationTest(TestCase):
-    """Integration tests for Stichwort app"""
-    
-    def setUp(self):
-        """Set up test data"""
-        self.stichwort1 = Stichwort.objects.create(stichwort="IT-Sicherheit")
-        self.stichwort2 = Stichwort.objects.create(stichwort="Datenschutz")
-        
-        self.abschnitttyp = AbschnittTyp.objects.create(abschnitttyp="text")
-        
-        self.erklaerung1 = Stichworterklaerung.objects.create(
-            erklaerung=self.stichwort1,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Erklärung für IT-Sicherheit",
-            order=1
-        )
-        
-        self.erklaerung2 = Stichworterklaerung.objects.create(
-            erklaerung=self.stichwort2,
-            abschnitttyp=self.abschnitttyp,
-            inhalt="Erklärung für Datenschutz",
-            order=1
-        )
-    
-    def test_stichwort_with_explanations_query(self):
-        """Test querying Stichworte with their explanations"""
-        stichworte_with_explanations = Stichwort.objects.filter(
-            stichworterklaerung__isnull=False
-        ).distinct()
-        
-        self.assertEqual(stichworte_with_explanations.count(), 2)
-        self.assertIn(self.stichwort1, stichworte_with_explanations)
-        self.assertIn(self.stichwort2, stichworte_with_explanations)
-    
-    def test_stichwort_without_explanations(self):
-        """Test finding Stichworte without explanations"""
-        stichwort3 = Stichwort.objects.create(stichwort="Backup")
-        
-        stichworte_without_explanations = Stichwort.objects.filter(
-            stichworterklaerung__isnull=True
-        )
-        
-        self.assertEqual(stichworte_without_explanations.count(), 1)
-        self.assertEqual(stichworte_without_explanations.first(), stichwort3)
-    
-    def test_explanation_count_annotation(self):
-        """Test annotating Stichworte with explanation count"""
-        from django.db.models import Count
-        
-        stichworte_with_count = Stichwort.objects.annotate(
-            explanation_count=Count('stichworterklaerung')
-        )
-        
-        for stichwort in stichworte_with_count:
-            if stichwort.stichwort in ["IT-Sicherheit", "Datenschutz"]:
-                self.assertEqual(stichwort.explanation_count, 1)
-            else:
-                self.assertEqual(stichwort.explanation_count, 0)
+# Create your tests here.

test_sanity_check.py

@@ -0,0 +1,38 @@
+#!/usr/bin/env python
+"""
+Simple script to test Vorgaben sanity checking
+"""
+import os
+import sys
+import django
+
+# Setup Django
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'VorgabenUI.settings')
+django.setup()
+
+from dokumente.utils import check_vorgabe_conflicts, format_conflict_report
+
+
+def main():
+    print("Running Vorgaben sanity check...")
+    print("=" * 50)
+    
+    # Check for conflicts
+    conflicts = check_vorgabe_conflicts()
+    
+    # Generate and display report
+    report = format_conflict_report(conflicts, verbose=True)
+    print(report)
+    
+    print("=" * 50)
+    
+    if conflicts:
+        print(f"\n⚠️  Found {len(conflicts)} conflicts that need attention!")
+        sys.exit(1)
+    else:
+        print("✅ All Vorgaben are valid!")
+        sys.exit(0)
+
+
+if __name__ == "__main__":
+    main()