Mockups: Referenzen-Redesign (2026-07-04)

Statische HTML-Mockups (1440 px, Light Theme, echte Design-Tokens aus src/app.css) für den Split der Referenzen-Funktion in Referenz-Bibliothek, Import-Wizard und Referenz-Studio. Jede Datei ist self-contained (Inline-CSS, Google Fonts Inter/JetBrains Mono); zu jeder HTML-Datei existiert ein PNG-Screenshot.

Navigation (PO-Entscheidung, fixiert): Im Top-Header gibt es nur einen Eintrag „Referenzen". Der Split Bibliothek/Studio passiert auf der Seite selbst über Tabs („Bibliothek" | „Referenz-Studio") am Kopf des Inhaltsbereichs. Die Import-Wizard-Seiten laufen als Unterseiten mit aktivem Nav-Punkt „Referenzen".

01-bibliothek

Die Referenz-Bibliothek unter /references (Tab „Bibliothek" aktiv): alle analysebereiten Referenzen der Organisation als Tabelle mit Name (+ Auftraggeber/LP/BGF-Subline), Quelle-Badge (Hochgeladen / Erstellt / Manuell), Lifecycle-Status (Bereit / Wird verarbeitet / Entwurf, immer Farbe + Text), „In Analyse"-Toggle und letzter Änderung. Primäre Aktion (einziger violetter Button): „Referenzen importieren"; sekundär: „Neue Referenz erstellen" (→ Studio). Segment-Filter „Alle / In Analyse / Nicht in Analyse" macht den Analyse-Scope zur zentralen Facette. Entscheidungen/Fragen: Der Toggle ist während „Wird verarbeitet" deaktiviert — soll eine Referenz nach Verarbeitung automatisch aktiv werden (Mockup 05 sagt ja)? Info-Icon am Spaltenkopf „In Analyse" braucht einen Tooltip-Text. Bulk-Aktionen (mehrere Referenzen aktivieren/deaktivieren) sind bewusst weggelassen — nötig?

02-import-dropzone

Schritt 1 des Import-Wizards als eigene Seite (kein Modal): große Dropzone für Dateien und Ordner, darunter eine ruhige Drei-Spalten-Erklärung, was aus Einzeldateien, Ordnerstrukturen und Excel-Listen wird. Damit wird das heutige Kernproblem („stillschweigend Referenzprojekte pro Ordner") explizit adressiert: Der Nutzer weiß vor dem Upload, was passieren wird, und behält im Schritt 2 die Kontrolle. Entscheidungen/Fragen: Excel läuft über dieselbe Dropzone (keine separate Auswahl vorab) — der Wizard verzweigt nach Dateityp automatisch in 03 oder 04. Stepper-Label wechselt entsprechend („Prüfen & zuordnen" vs. „Spalten zuordnen"). Maximalgrößen/Formate sind Platzhalter.

03-import-review

Schritt 2, Ordner-/Datei-Variante: „6 Referenzen erkannt" aus 3 Ordnern und 14 Dateien. Jede erkannte Referenz ist eine Karte mit editierbarem Namen, Quellpfad, Dateiliste, Checkbox (importieren ja/nein) und Aktionen Teilen/Umbenennen. Systemvorschläge sind sichtbar und rückgängig machbar: Zusammenführung aus Unterordnern (Info-Chip + „Trennen"), Teilungsvorschlag bei vermutlich mehreren Projekten in einer Datei (Amber-Hinweis + „In 2 Referenzen teilen"). Nicht zuordenbare Dateien landen in einem separaten Amber-Block mit „Zuordnen zu …" oder „Nicht importieren". Bereits eindeutige Referenzen sind eingeklappt, um die Seite auf die Entscheidungen zu fokussieren. Entscheidungen/Fragen: Merge per Drag & Drop zwischen Karten wäre die Interaktion im echten Build — im Mockup nur als Chip dargestellt. Wie aggressiv soll die automatische Namensableitung aus Ordnernamen sein (Unterstriche → Leerzeichen etc.)?

04-import-excel-mapping

Schritt 2, Excel-Variante: Datei-Zusammenfassung mit „23 Referenzen erkannt" (Erste Zeile als Überschrift erkannt), darunter das Spalten-Mapping — pro Zeile Spaltenbuchstabe (Mono), Spaltenüberschrift, Beispielwert, Pfeil, Ziel-Feld-Select. Nicht benötigte Spalten stehen auf „Nicht importieren". Datenqualitätshinweise erscheinen inline an der betroffenen Spalte („3 Zeilen ohne Wert"). Die Vorschau zeigt die ersten 3 Zeilen mit der aktuellen Zuordnung. Entscheidungen/Fragen: Auto-Mapping per Spaltenüberschrift (hier bereits vorausgefüllt) — Konfidenz anzeigen oder still vorbelegen? Welche Ziel-Felder sind Pflicht (nur Titel?)? Umgang mit Mehrfachzuordnung (zwei Spalten → ein Feld) ist offen.

05-import-fertig

Schritt 3: Erfolgsbestätigung „6 Referenzen importiert — alle in der Referenz-Fit-Analyse aktiv", mit Liste der importierten Referenzen und Status pro Eintrag (aktiv bzw. „Wird verarbeitet" für laufende Textextraktion). Kernaussage für das heutige Vertrauensproblem: Der Nutzer sieht genau, was angelegt wurde und dass er sofort weiterarbeiten kann. Primär: „Zur Referenz-Bibliothek". Entscheidungen/Fragen: Standard „nach Import automatisch in Analyse aktiv" ist hier gesetzt — soll das eine Option im Schritt 2 sein (z. B. Checkbox „In Analyse aktivieren")?

06-studio

Referenz-Studio im selben Seitenrahmen wie die Bibliothek (H1 „Referenzen", Tab „Referenz-Studio" aktiv): Referenzprojekte als Tabelle im gleichen Stil wie die Bibliothek (PO-Entscheidung gegen das Karten-Grid) — Spalten: Projekt (Name + Subline mit Auftraggeber/Maßnahme), Dokumente, Bilder, Referenzblätter, Zuletzt bearbeitet, Zeilenmenü. Die Spalte „Referenzblätter" verankert das mentale Modell „Studio erzeugt Blätter, die in der Bibliothek landen" (Subline verlinkt die Bibliothek explizit); ein Projekt ohne Blatt zeigt dort direkt den Link „Referenz erstellen". Darunter Vorlagen als Listenzeilen mit schematischen A4-Miniaturen (Standard 2-seitig als Standardvorlage markiert, Kompakt 1-seitig, Detail 2-seitig mit Bildraster). Entscheidungen/Fragen: Reicht der Inline-Link „Referenz erstellen" als Aktivierung oder braucht es einen leeren Zustand mit mehr Führung? Sollen Vorlagen team-weit oder pro Nutzer verwaltet werden?

07-editor-vorschau

Referenz-Editor als WYSIWYG-Vollbild-Modus mit KI-Agent: Es gibt kein separates Formular mehr — die beiden A4-Seiten der gewählten Vorlage sind selbst die Bearbeitungsfläche. Die Seiten stehen vertikal untereinander (Seite 1 oben, Seite 2 darunter) auf einer vertikal scrollenden Arbeitsfläche und nutzen dadurch mehr Breite; der Screenshot zeigt Seite 1 vollständig und den Anfang von Seite 2. Jeder Slot ist direkt klick- und editierbar: Die Kurzbeschreibung auf Seite 1 ist im fokussierten Zustand dargestellt (violetter Fokusring, sichtbarer Cursor, schwebender Zähler-Chip „412/450"); die Detailbeschreibung auf Seite 2 zeigt den Überlaufzustand (Amber-Rahmen, Text läuft in einen Fade, Chip „1.412/1.100 — Text zu lang" plus Inline-Button „Mit KI kürzen"); ein Bild-Slot zeigt das Hover-Overlay „Bild ersetzen"; ein Eckdaten-Feld deutet mit gestrichelter Kontur an, dass alle Felder anfassbar sind. Rechts sitzt die Agent-Seitenleiste (360 px, nach dem bestehenden Agent-Chat-Muster der App): Der Nutzer beauftragt in Sprache („Kürze die Detailbeschreibung …"), der Agent antwortet mit Tool-Aktions-Chips („Detailbeschreibung gekürzt (1.412 → 1.087 Zeichen)", „Passt jetzt in die Layout-Box") und kurzer Rückfrage; Eingabefeld unten. Topbar: Rückweg „Referenzen", Titel, „Gespeichert", Vorlagen-Picker, „PDF exportieren" im Amber-Warnzustand solange Überlauf besteht. Der Screen zeigt bewusst beide Zustände gleichzeitig (Überlauf auf der Seite, erledigte Agent-Aktion im Chat), um beide Mechaniken zu demonstrieren. Offene Frage: Export bei Überlauf blockieren oder nur warnen (Mockup: warnender, aber klickbarer Button)?

Seiten-Chrome (Teil des Vorlagensystems): Basierend auf einem realen Kunden-Referenzblatt enthalten beide A4-Seiten Firmenlogo oben rechts, Footer mit Firmenname links und Seitenzahl („Seite 1/2") rechts, Bildunterschriften mit Bildnachweis („Fahrzeughalle · Foto © Müller & Partner"), auf Seite 2 einen laufenden Titel oben links („Referenz · Neubau Feuerwache Ottobrunn") und auf Seite 1 einen akzentfarbenen Kategorie-Tag („— HOCHBAU") über dem Titel sowie die Eckdaten als dreispaltige Leiste (Auftraggeber/Leistungszeitraum · Leistungsbild · BGF/Auftragsvolumen/Honorar). Logo, Seitenzahl, laufender Titel und Bildnachweis werden von der Vorlage gesteuert, nicht pro Referenz gepflegt.

Übergreifende Designentscheidungen

• Ein Nav-Punkt, Tabs auf der Seite (PO-Entscheidung, fixiert): „Referenzen" im Header; „Bibliothek" | „Referenz-Studio" als Tabs im Inhaltsbereich.
• Ein violetter Signal-Button pro Screen (One-Signal-Regel aus DESIGN.md): Bibliothek → Importieren, Wizard → Weiter/Importieren, Studio → Neues Referenzprojekt. Alles andere Outline/Ghost.
• Status nie nur über Farbe (Status-Plus-Regel): Punkte/Icons immer mit Text; Warnungen amber mit Icon + Klartext.
• Wizard als Seite statt Modal, mit sichtbarem 3-Schritt-Stepper — der heutige Dialog-basierte Bulk-Upload verschwindet.
• Quelle als neutrales Badge (Hochgeladen/Erstellt/Manuell) statt Farbcodierung, um die Palette ruhig zu halten.
• Bilder ausschließlich als neutrale Platzhalterblöcke mit Icon/Label; realistische Inhalte (HOAI-LP, BGF, Mio.-€-Volumen, bayerische Auftraggeber) statt Lorem ipsum.