From a69d51b9086226695073dd1fafa696479c616506 Mon Sep 17 00:00:00 2001
From: Michael Hoennig <michael@hoennig.de>
Date: Tue, 21 Jul 2026 11:24:44 +0200
Subject: [PATCH] frontend: Darstellungs-Umschalter mit Icons statt Text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Segment-Buttons zeigen jetzt schematische Baum-Icons in der Reihenfolge
horizontal · kompakt · vertikal, jeweils mit Tooltip (title) und
aria-label. SPEC §9 entsprechend ergänzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/SPEC.md        |  5 +++--
 frontend/index.html | 19 ++++++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/docs/SPEC.md b/docs/SPEC.md
index a1d67d4..15f05fe 100644
--- a/docs/SPEC.md
+++ b/docs/SPEC.md
@@ -95,8 +95,9 @@ Codiert als Checkbox nach dem Zeichen (Erweiterung der Markdown-Task-Syntax):
 
 ## 9. Darstellung
 
-Drei Modi, umschaltbar über „horizontal / vertikal / kompakt“. Der Modus wählt
-zugleich die Seitenanordnung: **horizontal** stellt Diagramm über den Editor
+Drei Modi, im Editor umschaltbar über Icon-Buttons (Reihenfolge
+**horizontal · kompakt · vertikal**, je mit Tooltip). Der Modus wählt zugleich
+die Seitenanordnung: **horizontal** stellt Diagramm über den Editor
 (volle Breite), **vertikal** und **kompakt** stellen Editor und Diagramm
 nebeneinander (schmales Diagramm rechts).
 
diff --git a/frontend/index.html b/frontend/index.html
index 90e522d..041743c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -185,10 +185,10 @@
   .seg label{display:flex;cursor:pointer}
   .seg input{position:absolute;opacity:0;width:0;height:0}
   .seg span{
-    padding:4px 12px;
-    font-family:'IBM Plex Sans',sans-serif;font-size:.75rem;color:var(--muted);
+    display:grid;place-items:center;padding:4px 10px;color:var(--muted);
     transition:background .15s,color .15s;
   }
+  .seg span svg{display:block}
   .seg label + label span{border-left:1px solid rgba(36,52,71,.14)}
   .seg input:checked + span{background:var(--or);color:#fff}
   .seg input:focus-visible + span{outline:2px solid var(--or);outline-offset:-2px}
@@ -483,9 +483,18 @@
         <input type="checkbox" id="showc"><i></i>verworfene
       </label>
       <div class="seg" role="radiogroup" aria-label="Darstellung">
-        <label><input type="radio" name="layout" value="horizontal" checked><span>horizontal</span></label>
-        <label><input type="radio" name="layout" value="vertikal"><span>vertikal</span></label>
-        <label><input type="radio" name="layout" value="kompakt"><span>kompakt</span></label>
+        <label title="Horizontal – Organigramm, Diagramm über dem Editor">
+          <input type="radio" name="layout" value="horizontal" checked aria-label="Horizontal – Organigramm">
+          <span><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="4" rx="1"/><rect x="2.5" y="17" width="6" height="4" rx="1"/><rect x="15.5" y="17" width="6" height="4" rx="1"/><path d="M12 7V13M5.5 13H18.5M5.5 13V17M18.5 13V17"/></svg></span>
+        </label>
+        <label title="Kompakt – alles nach unten, platzsparend">
+          <input type="radio" name="layout" value="kompakt" aria-label="Kompakt – alles nach unten">
+          <span><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="6" height="4" rx="1"/><path d="M6 7V20"/><path d="M6 11H10M6 17H10"/><rect x="10" y="9" width="9" height="4" rx="1"/><rect x="10" y="15" width="9" height="4" rx="1"/></svg></span>
+        </label>
+        <label title="Vertikal – Baum nach rechts, Diagramm neben dem Editor">
+          <input type="radio" name="layout" value="vertikal" aria-label="Vertikal – Baum nach rechts">
+          <span><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.5" y="9.5" width="5" height="5" rx="1"/><rect x="16" y="3" width="6" height="4" rx="1"/><rect x="16" y="17" width="6" height="4" rx="1"/><path d="M7.5 12H12M12 5V19M12 5H16M12 19H16"/></svg></span>
+        </label>
       </div>
       <div class="winbtns" aria-label="Diagramm-Größe">
         <button type="button" class="winbtn" data-state="a" title="minimieren">—</button>