From a6cb8ade44c276f96f79dd6c184c316b84ca15f2 Mon Sep 17 00:00:00 2001
From: Eduard Wisch <data@data-it-solution.de>
Date: Wed, 8 Apr 2026 16:32:55 +0200
Subject: [PATCH] =?UTF-8?q?ui:=20Toolbar=20auf=20zwei=20Zeilen,=20einheitl?=
 =?UTF-8?q?iche=20Element-H=C3=B6he=2030px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Zeile 1: Tools (Select/Draw/Rect/Kreis/Pfeil/Text), Farbe, Strich,
  Undo/Redo, Löschen
- Zeile 2: Schrift (Family/Size/Bold/Italic), Zoom, Rotation
- .row-break als flex-basis:100% Element für sauberen Umbruch
- Alle Buttons + Inputs (color, range, number, select) auf height:30px
- Doppelte undo/redo/delete-Buttons entfernt

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
---
 bericht_card.php | 13 ++++++++-----
 css/bericht.css  | 39 +++++++++++++++++++++++++++++++++------
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/bericht_card.php b/bericht_card.php
index 891ab09..b684297 100644
--- a/bericht_card.php
+++ b/bericht_card.php
@@ -272,13 +272,17 @@ if (!$bericht) {
     print '<button type="button" class="tool-btn" data-tool="arrow" title="'.$langs->trans("BerichtToolArrow").'">↗</button>';
     print '<button type="button" class="tool-btn" data-tool="text" title="'.$langs->trans("BerichtToolText").'">T</button>';
     print '<span class="sep"></span>';
-    print '<button type="button" id="btn-undo" title="'.$langs->trans("BerichtUndo").'">↶</button>';
-    print '<button type="button" id="btn-redo" title="'.$langs->trans("BerichtRedo").'">↷</button>';
-    print '<span class="sep"></span>';
     print '<label>'.$langs->trans("BerichtColor").': <input type="color" id="tool-color" value="#ff0000"></label>';
     print '<label>'.$langs->trans("BerichtStrokeWidth").': <input type="range" id="tool-stroke" min="1" max="20" value="3"></label>';
     print '<span class="sep"></span>';
-    // Text-Optionen (nur sichtbar wenn Text-Tool aktiv oder ein Text-Objekt selektiert)
+    print '<button type="button" id="btn-undo" title="'.$langs->trans("BerichtUndo").'">↶</button>';
+    print '<button type="button" id="btn-redo" title="'.$langs->trans("BerichtRedo").'">↷</button>';
+    print '<button type="button" id="btn-delete-selected" title="'.$langs->trans("BerichtToolDelete").'">🗑️</button>';
+
+    // ====== Zweite Zeile ======
+    print '<div class="row-break"></div>';
+
+    // Text-Optionen
     print '<label class="text-tool-option">Schrift: <select id="tool-fontfamily">'
         .'<option value="Helvetica">Helvetica</option>'
         .'<option value="Arial">Arial</option>'
@@ -299,7 +303,6 @@ if (!$bericht) {
     print '<span class="sep"></span>';
     print '<button type="button" id="btn-rotate-left" title="'.$langs->trans("BerichtRotateLeft").'">⟲</button>';
     print '<button type="button" id="btn-rotate-right" title="'.$langs->trans("BerichtRotateRight").'">⟳</button>';
-    print '<button type="button" id="btn-delete-selected" title="'.$langs->trans("BerichtToolDelete").'">🗑️</button>';
     print '</div>';
     print '<div class="bericht-canvas-wrap">';
     print '<canvas id="pdf-canvas"></canvas>';
diff --git a/css/bericht.css b/css/bericht.css
index fbaec24..2628fd2 100644
--- a/css/bericht.css
+++ b/css/bericht.css
@@ -65,7 +65,7 @@
     display: flex; flex-direction: column;
 }
 .bericht-toolbar {
-    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
+    display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
     background: var(--colorbacktitle1, #fff);
     color: var(--colortext, inherit);
     padding: 6px;
@@ -73,16 +73,40 @@
     margin-bottom: 8px;
     border: 1px solid var(--colorboxbordertitle1, transparent);
 }
+/* Einheitliche Höhe für ALLE Steuerelemente in der Toolbar */
+.bericht-toolbar button,
+.bericht-toolbar .tool-btn,
+.bericht-toolbar select,
+.bericht-toolbar input[type="number"],
+.bericht-toolbar input[type="text"],
+.bericht-toolbar input[type="color"],
+.bericht-toolbar input[type="range"] {
+    height: 30px;
+    box-sizing: border-box;
+    line-height: 1;
+    vertical-align: middle;
+    margin: 0;
+}
 .bericht-toolbar button,
 .bericht-toolbar .tool-btn {
-    background: var(--butactionbg, transparent);
+    background: var(--colorbackbody, #2a2a30);
     color: var(--colortext, inherit);
-    border: 1px solid var(--colorboxbordertitle1, #ccc);
+    border: 1px solid var(--colorboxbordertitle1, #555);
     border-radius: 4px;
-    padding: 4px 10px;
+    padding: 0 10px;
     cursor: pointer;
-    font-size: 16px;
+    font-size: 14px;
+    display: inline-flex; align-items: center; justify-content: center;
 }
+.bericht-toolbar input[type="color"] {
+    width: 32px;
+    padding: 2px;
+    border: 1px solid var(--colorboxbordertitle1, #555);
+    background: var(--colorbackbody, #2a2a30);
+    border-radius: 4px;
+    cursor: pointer;
+}
+.bericht-toolbar input[type="range"] { width: 90px; }
 .bericht-toolbar .tool-btn.active {
     background: var(--colorbackhmenu1, #5cb85c);
     color: var(--colortextbackhmenu, #fff);
@@ -92,8 +116,11 @@
     width: 1px;
     background: var(--colorboxbordertitle1, #ddd);
     height: 24px;
-    margin: 0 6px;
+    margin: 0 4px;
+    align-self: center;
 }
+/* Forciert Zeilenumbruch — alle Elemente nach .row-break gehen auf neue Zeile */
+.bericht-toolbar .row-break { flex-basis: 100%; height: 0; margin: 0; }
 .bericht-toolbar label {
     display: flex; align-items: center; gap: 4px;
     font-size: 12px;