# Analyse: „Kommentare & Termine" auf dem Smartphone

Frage: Auf dem Smartphone die Journal-Spalte („Kommentare & Termine") ausblenden
und als eigenen Reiter zwischen Details und Dokumente anbieten. Analyse und
Empfehlung; Umsetzung offen.

## Ist-Zustand (mobil)

Der Detailinhalt (`detail/index.php`) ist zweispaltig: `#contentDetail.horizontal`
mit `flex-wrap: wrap`, beide Spalten `min-width: 340px` (`app.css`). Unterhalb von
~680px + Padding passen die 340px nicht mehr nebeneinander → `#wrapperRight`
(Journal) klappt unter `#wrapperLeft` (Formular). Auf dem Handy steht also erst
das ganze Projektformular, dann darunter der komplette Journal-Block — man muss
weit scrollen, um zum Alltagswerkzeug Journal zu kommen.

Wichtig für die Fragestellung: **Beide heutigen Reiter (Details, Dokumente) sind
echte Seiten-Links** (Details = die Detailseite, Dokumente = eigene Seite
`dokumente/index.php`). Ein Reiter-Wechsel ist ein echter HTTP-Seitenwechsel. Das
Journal dagegen liegt **im selben DOM wie Details** (Include von
`detail/comment/index.php`) — es ist keine eigene Seite. Diese Asymmetrie ist der
Kern.

## Die Kern-Inkonsistenz

Reiter sind ein Versprechen: gleichrangige Ansichten mit gleichem Verhalten. Ein
„Journal"-Reiter, der nur auf dem Handy existiert und dort bloss clientseitig eine
Spalte ein-/ausblendet, während „Dokumente" **immer** die Seite wechselt, bricht
dieses Versprechen dreifach (andere Aktion, andere Existenz, anderes
Zurück-Verhalten). Das wirkt wie ein Bug — die naheliegende „Reiter nur mobil"-
Lösung ist deshalb **nicht** empfehlenswert.

## Muster im Vergleich (Kurzfassung)

- **(a) Responsive Reiter nur mobil** — genau die Inkonsistenz oben; abgeraten.
- **(b) Immer drei Reiter Details | Journal | Dokumente** (auch Desktop) — maximale
  Konsistenz (alle Reiter = echte Links auf echte Seiten); sauber, wenn Journal
  eine eigene Seite wird. **Preis:** der Desktop verliert die Zweispaltigkeit
  „Formular + Journal nebeneinander".
- **(c) Accordion/Collapse auf Mobile** — Desktop bleibt zweispaltig; auf dem Handy
  wird das Journal ein einklappbares Panel (der `journal-head` ist der natürliche
  Auslöser). Kein Konsistenzbruch (ein Accordion ist sichtbar kein Reiter),
  minimal/additiv/reversibel. **Schwäche:** Journal bleibt unter dem Formular,
  weniger prominent.
- **(d) Segmented Control** — führt ein drittes Navigationsmuster ein; im
  vorhandenen Reiter-CD ein Fremdkörper; abgeraten.
- **(e) Journal als eigene Seite vs. clientseitiges Umschalten** — die
  Architekturentscheidung hinter (a)–(d): eigene Seite = konsistent mit Dokumente,
  bookmarkbar, sauberer Zurück-Button, kein DOM-Umbau (Preis: Desktop-
  Zweispaltigkeit weg); clientseitig = erhält Zweispaltigkeit, aber inkonsistent.

## Empfehlung

Zwei saubere Wege statt der inkonsistenten Reiter-nur-mobil-Lösung:

1. **(c) Accordion auf dem Handy** — wenn die **Desktop-Zweispaltigkeit** (Formular
   + Journal im Blick) wichtig ist. Risikoarm, reversibel, Desktop unverändert.
2. **(b/e) Journal als vollwertige eigene Ansicht** (drei echte Reiter überall) —
   wenn vor allem zählt, dass das Journal überall gleich prominent und konsistent
   ist. Grösser, ändert den Desktop.

**Entscheidend:** Wie wichtig ist am Desktop die Ansicht „Projekt-Formular und
Journal nebeneinander"? Wichtig → (c); nicht wichtig → (b/e).

### Etappen (bei Wahl von c)

1. Breakpoint bestimmen (naheliegend `max-width: 768px`, konsistent mit der
   bestehenden Detail-nahen Media-Query).
2. `#wrapperRight` unterhalb des Breakpoints als Bootstrap-4-Collapse, `journal-head`
   als Trigger, eingeklappt als Default. Desktop-Regeln via Media-Query unberührt.
3. Optional: mobil sichtbarer Sprung-Button „Zum Journal" oben am Formular, falls
   das eingeklappte Panel zu tief sitzt.
4. Nur falls nötig: Ausbau zu (b/e) — Journal als eigene Seite `public/journal/`
   (analog `dokumente/`, inkl. kanonischer URL-Logik), Reiterleiste überall auf
   `Details | Journal | Dokumente`.