desgin hoehen

public/client.js

@@ -238,6 +238,44 @@ function setupUi() {
     if (btn.id === "btn-calculate") return;
     btn.addEventListener("click", () => onCommandClick(btn));
   });
+
+  // ===== SECTION COLLAPSE/EXPAND =====
+  document.querySelectorAll(".section h2").forEach(heading => {
+    heading.addEventListener("click", () => {
+      const section = heading.closest(".section");
+      if (section) {
+        section.classList.toggle("collapsed");
+      }
+    });
+    heading.style.cursor = "pointer";
+  });
+
+  // Auto-expand when content is written to a collapsed section
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === "childList" || mutation.type === "characterData") {
+        let el = mutation.target;
+        while (el && el !== document.body) {
+          const section = el.closest(".section");
+          if (section && section.classList.contains("collapsed")) {
+            section.classList.remove("collapsed");
+            break;
+          }
+          el = el.parentElement;
+        }
+      }
+    });
+  });
+
+  // Observer auf alle Elemente in Sections anwenden
+  document.querySelectorAll(".section").forEach(section => {
+    observer.observe(section, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      characterDataOldValue: false
+    });
+  });
 }
 
 window.addEventListener("DOMContentLoaded", setupUi);

public/styles.css

@@ -138,6 +138,13 @@ textarea {
   font-size: 12px;
 }
 
+/* Ausgabe / Log: nur wenige Zeilen */
+#log {
+  min-height: 60px;
+  max-height: 150px;
+  resize: vertical;
+}
+
 /* ===== PANEL (alte Struktur wiederhergestellt) ===== */
 
 .panel {
@@ -211,4 +218,10 @@ textarea {
 
 #snapshot-table tbody tr:hover {
   background: #1e293b;
+}
+
+/* ===== SNAPSHOT PICTURES ===== */
+
+#snapshot-info-picture {
+  margin-top: 10px;
 }