# verbeworte · Wireframe mit Headernavigation

Stand: 19. Oktober 2026. Dies ist ein interaktiver Struktur- und Funktionsentwurf, keine fertige Markengestaltung. Die neutralen Linien, Abstände und nativen Texte dienen allein der Lesbarkeit. Farben, Schriften, Icons und dekorative Elemente sind nicht als Gestaltungsvorgaben zu verstehen.

Diese separate Variante übernimmt alle Inhalte und Interaktionen der ursprünglichen Fassung. Geändert wurden ausschließlich die Navigation und die davon betroffene Flächenaufteilung; die ursprüngliche Version bleibt erhalten.

## Öffnen und prüfen

`index.html` öffnet die Prüfoberfläche mit sechs Zuständen, Geräteumschaltung und Funktionshinweisen. `site.html` öffnet die Website ohne diese Prüfoberfläche. Beide Dateien lassen sich direkt im Browser öffnen; zum Betrieb ist kein Build nötig. Bei blockierten lokalen Frames die Datei über einen lokalen HTTP-Server öffnen. Alle Inhalte sind eingebettet; keine externen Schrift-, Script- oder Inhaltsabrufe.

Die Smartphonesimulation zeigt 390 Pixel Breite innerhalb der Prüfoberfläche. Für echte Gerätebreiten oder einen kleineren Browser `site.html` einzeln öffnen. Auch 320 Pixel sind berücksichtigt. Auch auf dem Smartphone stehen Chat, Blog und Kontakt im Header. Die linke Menüleiste entfällt vollständig.

## Informationsstruktur

- Chat: Landingpage und fortlaufendes Gespräch am selben Ort.
- Blog: reine Titelliste mit Beiträgen in modalen Dialogen.
- Kontakt: Name, E-Mail und Telefon, ohne Formular.
- Impressum / Datenschutz: außerhalb des Chatinhalts im Footer, auf die bestehenden Rechtstextseiten verlinkt.

Das Logo steht wie im vorhandenen PHP-Entwurf oben links in der Kopfzeile. Die neutrale Textwortmarke vertritt das endgültige Logo; ihre Schreibweise und Typografie sind nicht verbindlich. „Adele-KI 1.0“ steht daneben. Chat und Blog stehen als gleichwertige Links mittig in der Kopfzeile. Rechts im Header steht der Kontaktbutton. Der gesamte Inhalt nutzt die verfügbare Seitenbreite ohne linke Menüleiste. Aktive Ziele werden visuell und über `aria-current` gekennzeichnet. Auf Kontakt ist der Kontaktbutton aktiv; im Chat/Blog-Umschalter ist dann keine Option aktiv.

## Sechs Prüfzustände

| Zustand | Desktop und Smartphone | Prüfmöglichkeit |
| --- | --- | --- |
| 01 Landingpage | Kernfrage, Eingabe mit internem Sendebutton, drei Gesprächseinstiege | Nachricht eingeben, Enter, Shift+Enter, Vorschlag anklicken |
| 02 Denkpause | Besuchernachricht, Denkstatus und gesperrte Eingabe | Stabile Prüfansicht; „Denkpause beenden“ in der äußeren Dokumentationsleiste |
| 03 Gesprächsverlauf | Drei Nachrichten mit jeweils einer Antwort | Von oben nach unten lesen, scrollen, unten weiterschreiben |
| 04 Blogübersicht | Jede Titelzeile ist ein Button | Titel anklicken oder per Tab und Enter öffnen |
| 05 Blog-Pop-up | Vollständiger Entwurf über der Titelliste | Schließen-Button, Escape, Hintergrundklick, Tastatur und interner Scrollbereich |
| 06 Kontakt | Adelheid Schardt mit Mail- und Telefonlink | Mailprogramm beziehungsweise Telefonfunktion öffnen |

Die URL-Parameter `?state=landing`, `thinking`, `conversation`, `blog`, `modal` und `kontakt` dienen ausschließlich der Wireframe-Prüfung. Der normale Chat verwendet keine vorbelegten Besuchernachrichten.

## Chatablauf

1. Eingabe mit beliebigem Text. Nur Leerzeichen gelten als leer; Sendebutton ist deaktiviert. Enter sendet, Shift+Enter erzeugt einen Umbruch; Eingabemethoden mit laufender Zeichenkomposition lösen keine vorzeitige Sendung aus.
2. Ein Vorschlagsbutton sendet exakt seinen sichtbaren Wortlaut. Insbesondere wird „Texte für meine Website?“ unverändert übernommen.
3. Die Nachricht wird als Klartext an das Gespräch angehängt. Kein Reload und keine neue Seite. Kernfrage und Vorschläge verschwinden. Keine zusätzlichen Claims oder Aktionen im zentralen Startbereich.
4. Der Denkstatus „Adele · denkt …“ erscheint. Eingabe und Senden sind gesperrt. Im normalen Ablauf endet die Denkpause nach ungefähr 1,2–1,7 Sekunden. Die stabile Prüfansicht pausiert absichtlich bis zum äußeren Fortsetzen-Button.
5. Eine lokal vorgefertigte Antwort wird ergänzt, mit internem Link zu Blog oder Kontakt. Das Eingabefeld folgt im normalen Dokumentfluss. Es bleibt weder am Bildschirmrand noch innerhalb des Chats sticky.
6. Die Eingabe wird wieder freigegeben. Weitere Nachrichten ergänzen den bestehenden Verlauf. Neue Einträge führen bei Bedarf zum Eingabebereich am Gesprächsende. Die gesamte Website scrollt; ältere Einträge bleiben im Dokument.

17 vorhandene Antworten werden mit Fisher-Yates gemischt und einmalig pro Durchlauf ausgespielt. Auch am Zyklusübergang wird eine direkte Wiederholung verhindert. Die Auswahl hängt nicht von der Eingabe ab. Die Daten befinden sich nur im Arbeitsspeicher des aktuellen Dokuments; kein Cookie, Local Storage, Session Storage, Netzwerkaufruf oder KI-Dienst verarbeitet den Chat. Der Verlauf bleibt bei internen Bereichswechseln erhalten und verschwindet beim Neuladen.

Die Vorschautexte sind aus dem vorhandenen Projekt übernommen und redaktionell vor Veröffentlichung zu prüfen.

## Blog und Dialog

Die Titelliste enthält keine Teaser, Kategorien oder Vorschaukarten. Ein Klick öffnet den kompletten vorhandenen Entwurf. Diese Entwurfskennzeichnung befindet sich im Dialog, außerhalb der reduzierten Übersicht. Es gibt keinen Wechsel auf eine eigene Artikelseite.

Der native HTML-Dialog sperrt Hintergrundinteraktionen, hält den Tastaturfokus im Dialog und schließt auf Escape. Zusätzlich schließen Button und Hintergrundklick. Lange Texte scrollen im inneren Artikelbereich; Dialogtitel und Schließen-Button bleiben erreichbar. Währenddessen ist das Scrollen des Hintergrunddokuments gesperrt. Schließen stellt Scrollposition und Fokus der gewählten Titelzeile wieder her.

## Übergabe an PHP

Empfohlene spätere Struktur ohne Frameworkpflicht:

- `index.php`: gemeinsamer Header mit vollständiger Navigation und Footer; serverseitige Ausgabe der Bereiche.
- `content/site.json`: Name, Mail, Telefon und Rechtstextziele.
- `content/chat.json`: vorgefertigte Antworten; nur der benötigte Antwortvorrat wird sicher als JSON eingebettet.
- `content/blog.json`: Titel, eindeutiger Slug und vollständige Textabsätze; keine Teaser in der Übersicht ausgeben.
- `assets/app.js`: lokale Simulation, Zustandsverwaltung und Dialogsteuerung.
- `assets/style.css`: nach Freigabe eigenständige Gestaltung auf Basis dieser Struktur.

Im Wireframe stehen die bestehenden Daten eingebettet in `site.html`, um auch ohne PHP und ohne Abrufe zu funktionieren. Es werden keine bestehenden PHP-Dateien überschrieben. Bei der Übernahme mit `htmlspecialchars` serverseitige Texte maskieren und eingebettetes JSON mit `JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT` ausgeben. Besuchernachrichten weiterhin mit `textContent` erzeugen, nie als HTML. Das Eingabeformular braucht keinen serverseitigen Nachrichten-Endpunkt.

Chat/Blog können bei einer PHP-Umsetzung serverseitige Bereiche haben; Bereichswechsel mit JavaScript müssen den laufenden Verlauf erhalten, wenn das Verhalten des Wireframes übernommen wird. Chat, Blog und Kontakt sind ausschließlich im Header verlinkt; die Handlungslinks in Chatantworten bleiben zusätzlich erhalten. Die äußere Prüfoberfläche, Zustandsparameter und vorbefüllten Gesprächsbeispiele gehören nicht in die veröffentlichte Website.

Vor der Veröffentlichung Original-Logo und Blogtexte freigeben, Kontaktdaten prüfen und die bestehenden Rechtstextziele erhalten. Die PHP-Laufzeit wird durch diesen HTML-Wireframe noch nicht geprüft.