From be19bac84ff295f4d087ac64ec16405bf674ce9b Mon Sep 17 00:00:00 2001
From: Michael Hoennig <michael@hoennig.de>
Date: Tue, 21 Jul 2026 10:03:50 +0200
Subject: [PATCH] =?UTF-8?q?frontend:=20Toggle=20=E2=80=9Evertikal"=20schal?=
 =?UTF-8?q?tet=20Seitenlayout=20mit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der „vertikal"-Umschalter steuert jetzt zusätzlich zur Baumausrichtung
die Anordnung von Editor und Diagramm:

- aktiv (vertikal): Editor links, Diagramm rechts — der schmale,
  transponierte Baum passt in die rechte Spalte.
- inaktiv (horizontal): Diagramm oben und Editor unten, je volle Breite;
  die Agenda (Legende/Hilfe) sitzt rechts im Editor als aufklappbares
  <details>.

Umgesetzt via CSS-Grid mit grid-template-areas und .side-Klasse; die
.hint-Legende wandert in ein <details class="agenda">, der Editor-Body
wird zum Flex-Container (horizontal Zeile, vertikal Spalte).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/index.html | 53 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 48 insertions(+), 5 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 158da46..b552b2b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -33,12 +33,48 @@
   h1{font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
   header p{margin-top:4px;color:var(--muted);font-size:.9rem}
 
+  /* Horizontal (Toggle aus): Diagramm oben, Editor unten — je volle Breite.
+     Vertikal (Toggle an, .side): Editor links, Diagramm rechts. */
   .app{
     max-width:1200px;margin:0 auto;
-    display:grid;grid-template-columns:360px 1fr;gap:20px;
+    display:grid;grid-template-columns:1fr;gap:20px;
+    grid-template-areas:"diagram" "editor";
     align-items:start;
   }
-  @media (max-width:820px){ .app{grid-template-columns:1fr} }
+  .app.side{
+    grid-template-columns:360px 1fr;
+    grid-template-areas:"editor diagram";
+  }
+  .panel.editor{grid-area:editor}
+  .panel.right{grid-area:diagram}
+  @media (max-width:820px){
+    .app.side{grid-template-columns:1fr;grid-template-areas:"editor" "diagram"}
+  }
+
+  /* Editor-Innenaufbau: Textarea + aufklappbare Agenda.
+     Horizontal nebeneinander, vertikal (.side) untereinander. */
+  .editor-body{display:flex;align-items:stretch}
+  .editor-body textarea{flex:1 1 auto;min-width:0}
+  .agenda{
+    flex:0 0 auto;
+    border-left:1px dashed rgba(36,52,71,.18);
+    display:flex;flex-direction:column;
+  }
+  .agenda[open]{width:300px}
+  .agenda>summary{
+    list-style:none;cursor:pointer;white-space:nowrap;
+    padding:10px 16px;
+    font-family:'IBM Plex Mono',monospace;
+    font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
+    display:flex;align-items:center;gap:7px;
+  }
+  .agenda>summary::-webkit-details-marker{display:none}
+  .agenda>summary::before{content:'▸';display:inline-block;transition:transform .15s}
+  .agenda[open]>summary::before{transform:rotate(90deg)}
+  .agenda .hint{border-top:0;overflow:auto}
+  .side .editor-body{flex-direction:column;align-items:stretch}
+  .side .agenda{border-left:0;border-top:1px dashed rgba(36,52,71,.18)}
+  .side .agenda[open]{width:auto}
 
   .panel{
     background:var(--card);
@@ -271,13 +307,16 @@
     </svg>
     <span>Werk<span style="color:var(--or)">baum</span></span>
   </h1>
-  <p>Links die textuelle Struktur bearbeiten — rechts entsteht das Diagramm live.</p>
+  <p>Struktur als Text bearbeiten — das Diagramm entsteht live. Umschalter „vertikal“ ordnet Editor und Diagramm nebeneinander an.</p>
 </header>
 
-<div class="app">
-  <div class="panel">
+<div class="app" id="app">
+  <div class="panel editor">
     <div class="panel-head">Struktur (Text)</div>
+    <div class="editor-body">
     <textarea id="src" spellcheck="false"></textarea>
+    <details class="agenda">
+      <summary>Agenda</summary>
     <div class="hint">
       Einrückung (2 Leerzeichen oder Tab) definiert die Hierarchie.<br>
       <code>-</code>&nbsp; Teilpaket, alle erforderlich <em>(all of)</em><br>
@@ -299,6 +338,8 @@
       Kommentare mit <code>%%</code> — als ganze Zeile oder am Zeilenende.
       Personen mit <code>@name</code> — erscheinen unten rechts am Knoten.
     </div>
+    </details>
+    </div>
   </div>
 
   <div class="panel right">
@@ -478,9 +519,11 @@ src.addEventListener('keydown', e => {
 
 src.addEventListener('input', render);
 
+const app = document.getElementById('app');
 const vert = document.getElementById('vert');
 vert.addEventListener('change', () => {
   out.classList.toggle('vertical', vert.checked);
+  app.classList.toggle('side', vert.checked);
 });
 
 const showc = document.getElementById('showc');