From 894144a2c03d4ee68a6c0b73d0a6f0aa568a929f Mon Sep 17 00:00:00 2001
From: Johannes Baumeister <jba@enwelo.de>
Date: Fri, 3 Jul 2026 20:55:06 +0200
Subject: [PATCH] feat: Move WEA configuration to a collapsible accordion

---
 index.html | 130 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 68 insertions(+), 62 deletions(-)

diff --git a/index.html b/index.html
index ffd0ff4..3c181e7 100644
--- a/index.html
+++ b/index.html
@@ -60,71 +60,77 @@
                 </div>
             </div>
 
+            <details class="section wea-accordion">
+                <summary style="font-weight: bold; font-size: 1.1rem; color: var(--primary-color); display: flex; align-items: center; gap: 8px; cursor: pointer;">
+                    <span>🌀</span> WEA Konfiguration <span style="margin-left: auto;">+</span>
+                </summary>
+                <div style="margin-top: 12px; cursor: default;">
+                    <div style="display: flex; gap: 8px; margin-bottom: 6px;">
+                        <div style="flex: 1;">
+                            <label for="turbineManufacturer" class="label-small">Hersteller</label>
+                            <select id="turbineManufacturer" class="input-styled input-small">
+                                <option value="Enercon">Enercon</option>
+                                <option value="Nordex">Nordex</option>
+                                <option value="Vestas">Vestas</option>
+                                <option value="GE">GE</option>
+                            </select>
+                        </div>
+                        <div style="flex: 1;">
+                            <label for="turbineType" class="label-small">Anlagentyp</label>
+                            <input type="text" id="turbineType" class="input-styled input-small" placeholder="z.B. V162">
+                        </div>
+                    </div>
+                    <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
+                        <label for="rotorDiameter" class="label-small" style="flex: 1; margin: 0;">Rotordurchmesser (m)</label>
+                        <input type="number" id="rotorDiameter" class="input-styled input-small" value="160" style="width: 60px;">
+                    </div>
+                    <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
+                        <label for="hubHeight" class="label-small" style="flex: 1; margin: 0;">Nabenhöhe (m)</label>
+                        <input type="number" id="hubHeight" class="input-styled input-small" value="165" style="width: 60px;">
+                    </div>
+                    <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
+                        <label for="foundationRadius" class="label-small" style="flex: 1; margin: 0;">Fundament Radius (m)</label>
+                        <input type="number" id="foundationRadius" class="input-styled input-small" value="15" style="width: 60px;">
+                    </div>
+
+                    <div style="margin-top: 12px;">
+                        <button class="btn-primary btn-mini" id="btnPlaceTurbine" style="width: 100%;">
+                            <span>📍</span> Anlage per Klick setzen
+                        </button>
+                    </div>
+
+                    <div style="margin-top: 12px; border-top: 1px solid var(--border-color); padding-top: 12px;">
+                        <h3 style="margin-bottom: 6px; font-size: 0.9rem; color: var(--text-dim);">Eingabe durch Koordinaten (UTM)</h3>
+                        <div style="display: flex; gap: 6px; margin-bottom: 6px;">
+                            <div style="flex: 1;">
+                                <label for="utm-e" class="label-small">Rechts (E)</label>
+                                <input type="number" id="utm-e" class="input-styled input-small" placeholder="32..." step="0.01">
+                            </div>
+                            <div style="flex: 1;">
+                                <label for="utm-n" class="label-small">Hoch (N)</label>
+                                <input type="number" id="utm-n" class="input-styled input-small" placeholder="5..." step="0.01">
+                            </div>
+                        </div>
+                        <button class="btn-secondary btn-mini" id="btnCreateAtUTM" style="width: 100%;">
+                            An UTM erzeugen
+                        </button>
+                    </div>
+                </div>
+            </details>
+
             <div class="section">
-                <h2>Anlagen-Konfiguration</h2>
-                <div style="display: flex; gap: 8px; margin-bottom: 6px;">
-                    <div style="flex: 1;">
-                        <label for="turbineManufacturer" class="label-small">Hersteller</label>
-                        <select id="turbineManufacturer" class="input-styled input-small">
-                            <option value="Enercon">Enercon</option>
-                            <option value="Nordex">Nordex</option>
-                            <option value="Vestas">Vestas</option>
-                            <option value="GE">GE</option>
-                        </select>
-                    </div>
-                    <div style="flex: 1;">
-                        <label for="turbineType" class="label-small">Anlagentyp</label>
-                        <input type="text" id="turbineType" class="input-styled input-small" placeholder="z.B. V162">
-                    </div>
-                </div>
-                <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
-                    <label for="rotorDiameter" class="label-small" style="flex: 1; margin: 0;">Rotordurchmesser (m)</label>
-                    <input type="number" id="rotorDiameter" class="input-styled input-small" value="160" style="width: 60px;">
-                </div>
-                <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
-                    <label for="hubHeight" class="label-small" style="flex: 1; margin: 0;">Nabenhöhe (m)</label>
-                    <input type="number" id="hubHeight" class="input-styled input-small" value="165" style="width: 60px;">
-                </div>
-                <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
-                    <label for="foundationRadius" class="label-small" style="flex: 1; margin: 0;">Fundament Radius (m)</label>
-                    <input type="number" id="foundationRadius" class="input-styled input-small" value="15" style="width: 60px;">
+                <h2>Werkzeuge</h2>
+                <div class="control-group" style="display: flex; gap: 6px; flex-wrap: wrap;">
+                    <button class="btn-secondary btn-mini" id="btnManageOwners"
+                        style="flex: 1.2; min-width: 100px; margin-top: 0;">
+                        <span>👥</span> Eigentümer
+                    </button>
+                    <button class="btn-secondary btn-mini" id="btnMeasureDist" title="Distanz messen"
+                        style="flex: 0.4; padding: 6px; margin-top: 0;">📏</button>
+                    <button class="btn-secondary btn-mini" id="btnMeasureArea" title="Fläche messen"
+                        style="flex: 0.4; padding: 6px; margin-top: 0;">📐</button>
                 </div>
             </div>
-                <div class="section">
-                    <h2>Werkzeuge</h2>
-                    <div class="control-group" style="display: flex; gap: 6px; flex-wrap: wrap;">
-                        <button class="btn-primary btn-mini" id="btnPlaceTurbine" style="flex: 1.2; min-width: 100px;">
-                            <span>📍</span> Anlage setzen
-                        </button>
-                        <button class="btn-secondary btn-mini" id="btnManageOwners"
-                            style="flex: 1.2; min-width: 100px; margin-top: 0;">
-                            <span>👥</span> Eigentümer
-                        </button>
-                        <button class="btn-secondary btn-mini" id="btnMeasureDist" title="Distanz messen"
-                            style="flex: 0.4; padding: 6px; margin-top: 0;">📏</button>
-                        <button class="btn-secondary btn-mini" id="btnMeasureArea" title="Fläche messen"
-                            style="flex: 0.4; padding: 6px; margin-top: 0;">📐</button>
-                    </div>
-                </div>
-
-                <!-- UTM Coordinate Input -->
-                <div class="section"
-                    style="border: 1px solid var(--border-color); padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.02);">
-                    <h2 style="margin-bottom: 6px;">UTM-Position</h2>
-                    <div style="display: flex; gap: 6px; margin-bottom: 6px;">
-                        <div style="flex: 1;">
-                            <label for="utm-e" class="label-small">Rechts (E)</label>
-                            <input type="number" id="utm-e" class="input-styled input-small" placeholder="32..." step="0.01">
-                        </div>
-                        <div style="flex: 1;">
-                            <label for="utm-n" class="label-small">Hoch (N)</label>
-                            <input type="number" id="utm-n" class="input-styled input-small" placeholder="5..." step="0.01">
-                        </div>
-                    </div>
-                    <button class="btn-primary btn-mini" id="btnCreateAtUTM" style="font-size: 0.75rem;">
-                        An UTM erzeugen
-                    </button>
-                </div>