From c0ae55a597079e565640b0fb8d43d1a660f3da9d Mon Sep 17 00:00:00 2001
From: architeur <lars.munkes@artetui.de>
Date: Sun, 14 Dec 2025 21:09:39 +0100
Subject: [PATCH] Refactor symbols app: cleanup and fix issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed duplicate files (index2/3/4.html, symbols.js duplicates)
- Kept index4.html as the main index.html (modular version)
- Removed old text-generator.js (replaced by modular version)
- Fixed ID mismatch in ui-bindings.js to match HTML
- Added square and circle shape support in svg-generator.js
- Added legend preview with copy functionality
- Removed 580 lines of obsolete text-generator v4 code from app.js
- Added addTextToLegend and addStandaloneArrowToLegend to export.js

Still TODO: Split large files to comply with 300 line limit
- app.js: 1219 lines
- styles.css: 1319 lines
- symbols.js: 870 lines

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 symbols/css/styles.css                     |   71 ++
 symbols/index.html                         |   29 +-
 symbols/index2.html                        |  385 -------
 symbols/index3.html                        |  385 -------
 symbols/index4.html                        |  390 -------
 symbols/js/app.js                          |  713 +++---------
 symbols/js/symbols.js.backup3              |  859 ---------------
 symbols/js/text-generator.js               | 1154 --------------------
 symbols/js/text-generator/export.js        |   41 +
 symbols/js/text-generator/svg-generator.js |   10 +
 symbols/js/text-generator/ui-bindings.js   |   30 +-
 symbols/symbols.js                         |  912 ----------------
 12 files changed, 286 insertions(+), 4693 deletions(-)
 delete mode 100644 symbols/index2.html
 delete mode 100644 symbols/index3.html
 delete mode 100644 symbols/index4.html
 delete mode 100644 symbols/js/symbols.js.backup3
 delete mode 100644 symbols/js/text-generator.js
 delete mode 100644 symbols/symbols.js

diff --git a/symbols/css/styles.css b/symbols/css/styles.css
index e72b71f..3bb348c 100644
--- a/symbols/css/styles.css
+++ b/symbols/css/styles.css
@@ -1246,3 +1246,74 @@ input[type="range"]::-moz-range-thumb {
 [data-theme="dark"] .standalone-arrow-section .section-header h4 {
     color: #f5f1e8;
 }
+
+/* Legenden-Modal mit Vorschau */
+.modal-wide {
+    max-width: 1000px;
+    width: 95%;
+}
+
+.legend-modal-body {
+    display: flex;
+    gap: 1.5rem;
+    min-height: 400px;
+}
+
+.legend-editor {
+    flex: 1;
+    min-width: 0;
+}
+
+.legend-editor h3,
+.legend-preview-section h3 {
+    margin: 0 0 1rem 0;
+    font-size: 1rem;
+    color: #374151;
+    border-bottom: 1px solid #e5e7eb;
+    padding-bottom: 0.5rem;
+}
+
+.legend-preview-section {
+    flex: 0 0 350px;
+    display: flex;
+    flex-direction: column;
+}
+
+.legend-preview-box {
+    flex: 1;
+    background: #ffffff;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 1rem;
+    overflow: auto;
+    min-height: 300px;
+}
+
+.legend-preview-box svg {
+    max-width: 100%;
+    height: auto;
+}
+
+.legend-preview-actions {
+    margin-top: 0.75rem;
+    display: flex;
+    justify-content: center;
+}
+
+.legend-preview-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: #9ca3af;
+    font-style: italic;
+}
+
+@media (max-width: 768px) {
+    .legend-modal-body {
+        flex-direction: column;
+    }
+    .legend-preview-section {
+        flex: none;
+    }
+}
diff --git a/symbols/index.html b/symbols/index.html
index 25f4322..fba5df0 100644
--- a/symbols/index.html
+++ b/symbols/index.html
@@ -159,7 +159,7 @@
             <div class="text-generator-row" id="arrowDetailsRow" style="display: none;">
                 <div class="text-input-group">
                     <label>Pfeil-Laenge:</label>
-                    <input type="range" id="arrowLength" min="20" max="100" value="40">
+                    <input type="range" id="arrowLength" min="20" max="200" value="40">
                     <span id="arrowLengthValue">40px</span>
                 </div>
                 <div class="text-input-group">
@@ -298,14 +298,26 @@
 
     <!-- LEGENDE MODAL -->
     <div class="modal" id="legendModal">
-        <div class="modal-content">
+        <div class="modal-content modal-wide">
             <div class="modal-header">
                 <h2>Legende bearbeiten</h2>
                 <button class="modal-close" onclick="closeLegendModal()">X</button>
             </div>
-            <div class="modal-body">
-                <div class="legend-items" id="legendItems">
-                    <!-- Legende-Eintraege werden per JavaScript eingefuegt -->
+            <div class="modal-body legend-modal-body">
+                <div class="legend-editor">
+                    <h3>Eintraege</h3>
+                    <div class="legend-items" id="legendItems">
+                        <!-- Legende-Eintraege werden per JavaScript eingefuegt -->
+                    </div>
+                </div>
+                <div class="legend-preview-section">
+                    <h3>Vorschau</h3>
+                    <div class="legend-preview-box" id="legendPreviewBox">
+                        <!-- Vorschau wird per JavaScript generiert -->
+                    </div>
+                    <div class="legend-preview-actions">
+                        <button class="btn-action btn-copy" onclick="copyLegendAsImage()" title="Vorschau kopieren">Kopieren</button>
+                    </div>
                 </div>
             </div>
             <div class="modal-footer">
@@ -379,7 +391,12 @@ document.addEventListener("keydown",function(e){if(e.key==="Escape"){closeImpres
 </script>
 
     <script src="js/symbols.js?v=10"></script>
-    <script src="js/text-generator.js?v=12"></script>
+    <script src="lib/svg.min.js"></script>
+    <script src="js/text-generator/state.js?v=1"></script>
+    <script src="js/text-generator/svg-generator.js?v=7"></script>
+    <script src="js/text-generator/ui-bindings.js?v=4"></script>
+    <script src="js/text-generator/export.js?v=1"></script>
+    <script>document.addEventListener("DOMContentLoaded", function() { UiBindings.init(); });</script>
     <script src="js/app.js?v=25"></script>
 </body>
 </html>
diff --git a/symbols/index2.html b/symbols/index2.html
deleted file mode 100644
index 62588fe..0000000
--- a/symbols/index2.html
+++ /dev/null
@@ -1,385 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Gutachter Symbolbibliothek v2.2</title>
-    <link rel="stylesheet" href="css/styles.css?v=16">
-</head>
-<body>
-    <!-- HEADER -->
-    <header class="header">
-        <div class="header-content">
-            <h1>Gutachter Symbolbibliothek</h1>
-            <p class="subtitle">SVG & DXF Symbole fuer Schadensgutachten und Vermessung</p>
-        </div>
-        <div class="header-actions">
-            <button class="btn-header" onclick="openLegendModal()">
-                Legende <span class="badge" id="legendCount">0</span>
-            </button>
-            <button class="btn-header" onclick="downloadAllAsZip()">
-                Alle herunterladen
-            </button>
-        </div>
-    </header>
-
-    <!-- TEXT-GENERATOR v5 -->
-    <div class="text-generator">
-        <div class="text-generator-header" onclick="toggleTextGenerator()">
-            <h3>Text-Symbol erstellen</h3>
-            <div class="header-buttons">
-                <button class="btn-reset" onclick="event.stopPropagation(); resetToDefaults();" title="Auf Standard zuruecksetzen">Reset</button>
-                <button class="collapse-btn" id="collapseBtn">&#9660;</button>
-            </div>
-        </div>
-        <div class="text-generator-body" id="textGeneratorBody">
-            <!-- Zeile 1: Text und Schriftgroesse -->
-            <div class="text-generator-row">
-                <div class="text-input-group text-input-wide">
-                    <label>Text:</label>
-                    <textarea id="customText" placeholder="Text eingeben... (Enter fuer neue Zeile)" rows="3"></textarea>
-                </div>
-                <div class="text-input-group">
-                    <label>Schriftgroesse:</label>
-                    <input type="range" id="fontSize" min="8" max="48" value="16">
-                    <span id="fontSizeValue">16px</span>
-                </div>
-            </div>
-
-            <!-- Zeile 2: Farben -->
-            <div class="text-generator-row">
-                <div class="text-input-group">
-                    <label>Textfarbe:</label>
-                    <div class="color-picker-wrap">
-                        <input type="color" id="textColor" value="#000000">
-                        <span class="color-value" id="textColorValue">#000000</span>
-                    </div>
-                </div>
-                <div class="text-input-group">
-                    <label>Rahmenfarbe:</label>
-                    <div class="color-picker-wrap">
-                        <input type="color" id="frameColor" value="#000000">
-                        <span class="color-value" id="frameColorValue">#000000</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Zeile 3: Rahmenform -->
-            <div class="text-generator-row">
-                <div class="text-input-group">
-                    <label>Rahmenform:</label>
-                    <div class="shape-options">
-                        <button class="shape-btn active" data-shape="none" title="Kein Rahmen">Keiner</button>
-                        <button class="shape-btn" data-shape="rect" title="Rechteck">Rechteck</button>
-                        <button class="shape-btn" data-shape="square" title="Quadrat">Quadrat</button>
-                        <button class="shape-btn" data-shape="circle" title="Kreis">Kreis</button>
-                        <button class="shape-btn" data-shape="oval" title="Oval">Oval</button>
-                        <button class="shape-btn" data-shape="diamond" title="Raute">Raute</button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Zeile 4: Rahmen-Skalierung -->
-            <div class="text-generator-row" id="frameScaleRow" style="display: none;">
-                <div class="text-input-group">
-                    <label>Rahmen-Skalierung:</label>
-                    <input type="range" id="frameScale" min="100" max="300" value="100">
-                    <span id="frameScaleValue">100%</span>
-                </div>
-            </div>
-
-            <!-- Zeile 4b: Gesamt-Padding -->
-            <div class="text-generator-row" id="framePaddingAllRow" style="display: none;">
-                <div class="text-input-group">
-                    <label>Gesamt-Padding (alle Kanten):</label>
-                    <input type="range" id="paddingAll" min="0" max="50" value="10">
-                    <span id="paddingAllValue">10px</span>
-                </div>
-            </div>
-
-            <!-- Zeile 4c: Separate Padding (4 Kanten) -->
-            <div class="text-generator-row padding-row" id="framePaddingRow" style="display: none;">
-                <div class="text-input-group padding-group">
-                    <label>Padding Oben:</label>
-                    <input type="range" id="paddingTop" min="0" max="50" value="10">
-                    <span id="paddingTopValue">10px</span>
-                </div>
-                <div class="text-input-group padding-group">
-                    <label>Rechts:</label>
-                    <input type="range" id="paddingRight" min="0" max="50" value="10">
-                    <span id="paddingRightValue">10px</span>
-                </div>
-                <div class="text-input-group padding-group">
-                    <label>Unten:</label>
-                    <input type="range" id="paddingBottom" min="0" max="50" value="10">
-                    <span id="paddingBottomValue">10px</span>
-                </div>
-                <div class="text-input-group padding-group">
-                    <label>Links:</label>
-                    <input type="range" id="paddingLeft" min="0" max="50" value="10">
-                    <span id="paddingLeftValue">10px</span>
-                </div>
-            </div>
-
-            <!-- Zeile 5: Linienstil und Staerke -->
-            <div class="text-generator-row">
-                <div class="text-input-group">
-                    <label>Linienstil:</label>
-                    <div class="line-style-options">
-                        <button class="line-btn active" data-style="solid" title="Durchgezogen">Durchgezogen</button>
-                        <button class="line-btn" data-style="dashed" title="Gestrichelt">Gestrichelt</button>
-                        <button class="line-btn" data-style="dotted" title="Gepunktet">Gepunktet</button>
-                    </div>
-                </div>
-                <div class="text-input-group">
-                    <label>Linienstaerke:</label>
-                    <div class="line-weight-options">
-                        <button class="weight-btn" data-weight="1" title="Duenn">Duenn</button>
-                        <button class="weight-btn active" data-weight="2" title="Mittel">Mittel</button>
-                        <button class="weight-btn" data-weight="3" title="Fett">Fett</button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Zeile 6: Pfeil-Optionen -->
-            <div class="text-generator-row">
-                <div class="text-input-group">
-                    <label>Pfeil am Text:</label>
-                    <div class="arrow-options">
-                        <button class="arrow-btn active" data-arrow="none" title="Kein Pfeil">Keiner</button>
-                        <button class="arrow-btn" data-arrow="top" title="Pfeil oben">Oben</button>
-                        <button class="arrow-btn" data-arrow="right" title="Pfeil rechts">Rechts</button>
-                        <button class="arrow-btn" data-arrow="bottom" title="Pfeil unten">Unten</button>
-                        <button class="arrow-btn" data-arrow="left" title="Pfeil links">Links</button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Zeile 7: Pfeil-Details (nur sichtbar wenn Pfeil aktiv) -->
-            <div class="text-generator-row" id="arrowDetailsRow" style="display: none;">
-                <div class="text-input-group">
-                    <label>Pfeil-Laenge:</label>
-                    <input type="range" id="arrowLength" min="20" max="100" value="40">
-                    <span id="arrowLengthValue">40px</span>
-                </div>
-                <div class="text-input-group">
-                    <label>Knick-Winkel:</label>
-                    <input type="range" id="arrowAngle" min="-90" max="90" value="0">
-                    <span id="arrowAngleValue">0°</span>
-                </div>
-                <div class="text-input-group">
-                    <label>Knick-Position:</label>
-                    <input type="range" id="arrowBend" min="0" max="100" value="50">
-                    <span id="arrowBendValue">50%</span>
-                </div>
-            </div>
-
-            <!-- Zeile 7b: Pfeilspitzen-Details -->
-            <div class="text-generator-row" id="arrowDetailsRow2" style="display: none;">
-                <div class="text-input-group">
-                    <label>Pfeilspitzen-Breite:</label>
-                    <input type="range" id="arrowSize" min="5" max="30" value="10">
-                    <span id="arrowSizeValue">10px</span>
-                </div>
-                <div class="text-input-group">
-                    <label>Pfeilspitzen-Laenge:</label>
-                    <input type="range" id="arrowTipLength" min="5" max="40" value="15">
-                    <span id="arrowTipLengthValue">15px</span>
-                </div>
-            </div>
-
-            <!-- Vorschau -->
-            <div class="text-generator-preview">
-                <div class="preview-label">Vorschau:</div>
-                <div class="preview-box" id="textPreview">
-                    <!-- SVG Preview -->
-                </div>
-                <div class="preview-actions">
-                    <button class="btn-action btn-copy" onclick="copyTextAsImage()" title="Als Bild kopieren">
-                        Kopieren
-                    </button>
-                    <button class="btn-action btn-svg" onclick="downloadTextSVG()" title="SVG herunterladen">
-                        SVG
-                    </button>
-                    <button class="btn-action btn-png" onclick="downloadTextPNG()" title="PNG herunterladen (transparent)">
-                        PNG
-                    </button>
-                    <button class="btn-action btn-jpg" onclick="downloadTextJPG()" title="JPG herunterladen">
-                        JPG
-                    </button>
-                    <button class="btn-action btn-dxf" onclick="downloadTextDXF()" title="DXF herunterladen">
-                        DXF
-                    </button>
-                    <button class="btn-action btn-legend" onclick="addTextToLegend()" title="Zur Legende hinzufuegen">
-                        Legende
-                    </button>
-                    <button class="btn-action btn-save" onclick="openSaveModal()" title="Als eigenes Symbol speichern">
-                        Speichern
-                    </button>
-                </div>
-            </div>
-
-            <!-- Einzelner Pfeil (Standalone Arrow) -->
-            <div class="standalone-arrow-section">
-                <div class="section-header">
-                    <h4>Einzelner Pfeil (ohne Text)</h4>
-                    <span class="section-hint">Verwendet die gleichen Pfeil-Einstellungen</span>
-                </div>
-                <div class="standalone-arrow-content">
-                    <div class="preview-box standalone-arrow-preview" id="standaloneArrowPreview">
-                        <!-- Pfeil-SVG Preview -->
-                    </div>
-                    <div class="preview-actions">
-                        <button class="btn-action btn-copy" onclick="copyStandaloneArrow()" title="Pfeil kopieren">
-                            Kopieren
-                        </button>
-                        <button class="btn-action btn-svg" onclick="downloadStandaloneArrowSVG()" title="SVG">
-                            SVG
-                        </button>
-                        <button class="btn-action btn-png" onclick="downloadStandaloneArrowPNG()" title="PNG">
-                            PNG
-                        </button>
-                        <button class="btn-action btn-jpg" onclick="downloadStandaloneArrowJPG()" title="JPG">
-                            JPG
-                        </button>
-                        <button class="btn-action btn-dxf" onclick="downloadStandaloneArrowDXF()" title="DXF">
-                            DXF
-                        </button>
-                        <button class="btn-action btn-legend" onclick="addStandaloneArrowToLegend()" title="Zur Legende">
-                            Legende
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- SUCHE & FILTER -->
-    <div class="search-container">
-        <div class="search-box">
-            <input type="text" id="searchInput" placeholder="Symbole suchen... (z.B. Schaden, Hydrant, Mast)">
-            <span class="search-icon">&#128269;</span>
-        </div>
-
-        <div class="filter-pills">
-            <button class="filter-pill active" data-filter="all">Alle</button>
-            <span class="filter-divider">|</span>
-            <span class="filter-label">Gutachten:</span>
-            <button class="filter-pill" data-filter="schaeden">Schaeden</button>
-            <button class="filter-pill" data-filter="werkzeuge">Werkzeuge</button>
-            <button class="filter-pill" data-filter="bauteile">Bauteile</button>
-            <button class="filter-pill" data-filter="moebel">Moebel</button>
-            <button class="filter-pill" data-filter="bad">Bad</button>
-            <button class="filter-pill" data-filter="kueche">Kueche</button>
-            <button class="filter-pill" data-filter="pfeile">Pfeile</button>
-            <button class="filter-pill" data-filter="kompass">Kompass</button>
-            <span class="filter-divider">|</span>
-            <span class="filter-label">Vermessung:</span>
-            <button class="filter-pill" data-filter="vermessung_status">Status</button>
-            <button class="filter-pill" data-filter="vermessung_grenzen">Grenzen</button>
-            <button class="filter-pill" data-filter="vermessung_wasser">Wasser</button>
-            <button class="filter-pill" data-filter="vermessung_abwasser">Abwasser</button>
-            <button class="filter-pill" data-filter="vermessung_strom">Strom</button>
-            <button class="filter-pill" data-filter="vermessung_gas">Gas</button>
-            <button class="filter-pill" data-filter="vermessung_verkehr">Verkehr</button>
-            <button class="filter-pill" data-filter="vermessung_topografie">Topografie</button>
-            <span class="filter-divider">|</span>
-            <span class="filter-label">Eigene:</span>
-            <button class="filter-pill" data-filter="custom">Meine Symbole</button>
-        </div>
-    </div>
-
-    <!-- SYMBOL-GRID -->
-    <main class="main-content">
-        <div class="symbol-grid" id="symbolGrid">
-            <!-- Symbole werden per JavaScript eingefuegt -->
-        </div>
-    </main>
-
-    <!-- LEGENDE MODAL -->
-    <div class="modal" id="legendModal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h2>Legende bearbeiten</h2>
-                <button class="modal-close" onclick="closeLegendModal()">X</button>
-            </div>
-            <div class="modal-body">
-                <div class="legend-items" id="legendItems">
-                    <!-- Legende-Eintraege werden per JavaScript eingefuegt -->
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn-secondary" onclick="clearLegend()">Leeren</button>
-                <button class="btn-secondary" onclick="exportLegendSVG()">SVG</button>
-                <button class="btn-secondary" onclick="exportLegendPNG()">PNG</button>
-                <button class="btn-primary" onclick="closeLegendModal()">Schliessen</button>
-            </div>
-        </div>
-    </div>
-
-    <!-- SAVE MODAL -->
-    <div class="modal" id="saveModal">
-        <div class="modal-content modal-small">
-            <div class="modal-header">
-                <h2>Symbol speichern</h2>
-                <button class="modal-close" onclick="closeSaveModal()">X</button>
-            </div>
-            <div class="modal-body">
-                <div class="save-form">
-                    <div class="form-group">
-                        <label for="symbolName">Symbolname:</label>
-                        <input type="text" id="symbolName" placeholder="z.B. Hinweis Wasserschaden">
-                    </div>
-                    <div class="form-group">
-                        <label for="symbolDescription">Beschreibung (optional):</label>
-                        <input type="text" id="symbolDescription" placeholder="Kurze Beschreibung...">
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn-secondary" onclick="closeSaveModal()">Abbrechen</button>
-                <button class="btn-primary" onclick="saveCustomSymbol()">Speichern</button>
-            </div>
-        </div>
-    </div>
-
-    
-<!-- IMPRESSUM MODAL -->
-<div class="legal-modal" id="impressumModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
-    <div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
-        <div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
-            <h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Impressum</h2>
-            <button onclick="closeImpressum()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">&times;</button>
-        </div>
-        <iframe src="/legal/impressum.html" style="flex:1;width:100%;border:none;"></iframe>
-    </div>
-</div>
-
-<!-- DATENSCHUTZ MODAL -->
-<div class="legal-modal" id="datenschutzModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
-    <div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
-        <div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
-            <h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Datenschutz</h2>
-            <button onclick="closeDatenschutz()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">&times;</button>
-        </div>
-        <iframe src="/legal/datenschutz.html" style="flex:1;width:100%;border:none;"></iframe>
-    </div>
-</div>
-
-<script>
-function openImpressum(){document.getElementById("impressumModal").style.display="flex";}
-function closeImpressum(){document.getElementById("impressumModal").style.display="none";}
-function openDatenschutz(){document.getElementById("datenschutzModal").style.display="flex";}
-function closeDatenschutz(){document.getElementById("datenschutzModal").style.display="none";}
-document.addEventListener("keydown",function(e){if(e.key==="Escape"){closeImpressum();closeDatenschutz();}});
-["impressumModal","datenschutzModal"].forEach(function(id){
-    var el=document.getElementById(id);
-    if(el)el.addEventListener("click",function(e){if(e.target===this)this.style.display="none";});
-});
-</script>
-
-    <script src="js/symbols.js?v=10"></script>
-    <script src="js/text-generator.js?v=12"></script>
-    <script src="js/app.js?v=25"></script>
-</body>
-</html>
diff --git a/symbols/index3.html b/symbols/index3.html
deleted file mode 100644
index 425a949..0000000
--- a/symbols/index3.html
+++ /dev/null
@@ -1,385 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Gutachter Symbolbibliothek v2.2</title>
-    <link rel="stylesheet" href="css/styles.css?v=16">
-</head>
-<body>
-    <!-- HEADER -->
-    <header class="header">
-        <div class="header-content">
-            <h1>Gutachter Symbolbibliothek</h1>
-            <p class="subtitle">SVG & DXF Symbole fuer Schadensgutachten und Vermessung</p>
-        </div>
-        <div class="header-actions">
-            <button class="btn-header" onclick="openLegendModal()">
-                Legende <span class="badge" id="legendCount">0</span>
-            </button>
-            <button class="btn-header" onclick="downloadAllAsZip()">
-                Alle herunterladen
-            </button>
-        </div>
-    </header>
-
-    <!-- TEXT-GENERATOR v5 -->
-    <div class="text-generator">
-        <div class="text-generator-header" onclick="toggleTextGenerator()">
-            <h3>Text-Symbol erstellen</h3>
-            <div class="header-buttons">
-                <button class="btn-reset" onclick="event.stopPropagation(); resetToDefaults();" title="Auf Standard zuruecksetzen">Reset</button>
-                <button class="collapse-btn" id="collapseBtn">&#9660;</button>
-            </div>
-        </div>
-        <div class="text-generator-body" id="textGeneratorBody">
-            <!-- Zeile 1: Text und Schriftgroesse -->
-            <div class="text-generator-row">
-                <div class="text-input-group text-input-wide">
-                    <label>Text:</label>
-                    <textarea id="customText" placeholder="Text eingeben... (Enter fuer neue Zeile)" rows="3"></textarea>
-                </div>
-                <div class="text-input-group">
-                    <label>Schriftgroesse:</label>
-                    <input type="range" id="fontSize" min="8" max="48" value="16">
-                    <span id="fontSizeValue">16px</span>
-                </div>
-            </div>
-
-            <!-- Zeile 2: Farben -->
-            <div class="text-generator-row">
-                <div class="text-input-group">
-                    <label>Textfarbe:</label>
-                    <div class="color-picker-wrap">
-                        <input type="color" id="textColor" value="#000000">
-                        <span class="color-value" id="textColorValue">#000000</span>
-                    </div>
-                </div>
-                <div class="text-input-group">
-                    <label>Rahmenfarbe:</label>
-                    <div class="color-picker-wrap">
-                        <input type="color" id="frameColor" value="#000000">
-                        <span class="color-value" id="frameColorValue">#000000</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Zeile 3: Rahmenform -->
-            <div class="text-generator-row">
-                <div class="text-input-group">
-                    <label>Rahmenform:</label>
-                    <div class="shape-options">
-                        <button class="shape-btn active" data-shape="none" title="Kein Rahmen">Keiner</button>
-                        <button class="shape-btn" data-shape="rect" title="Rechteck">Rechteck</button>
-                        <button class="shape-btn" data-shape="square" title="Quadrat">Quadrat</button>
-                        <button class="shape-btn" data-shape="circle" title="Kreis">Kreis</button>
-                        <button class="shape-btn" data-shape="oval" title="Oval">Oval</button>
-                        <button class="shape-btn" data-shape="diamond" title="Raute">Raute</button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Zeile 4: Rahmen-Skalierung -->
-            <div class="text-generator-row" id="frameScaleRow" style="display: none;">
-                <div class="text-input-group">
-                    <label>Rahmen-Skalierung:</label>
-                    <input type="range" id="frameScale" min="100" max="300" value="100">
-                    <span id="frameScaleValue">100%</span>
-                </div>
-            </div>
-
-            <!-- Zeile 4b: Gesamt-Padding -->
-            <div class="text-generator-row" id="framePaddingAllRow">
-                <div class="text-input-group">
-                    <label>Gesamt-Padding (alle Kanten):</label>
-                    <input type="range" id="paddingAll" min="0" max="50" value="10">
-                    <span id="paddingAllValue">10px</span>
-                </div>
-            </div>
-
-            <!-- Zeile 4c: Separate Padding (4 Kanten) -->
-            <div class="text-generator-row padding-row" id="framePaddingRow">
-                <div class="text-input-group padding-group">
-                    <label>Padding Oben:</label>
-                    <input type="range" id="paddingTop" min="0" max="50" value="10">
-                    <span id="paddingTopValue">10px</span>
-                </div>
-                <div class="text-input-group padding-group">
-                    <label>Rechts:</label>
-                    <input type="range" id="paddingRight" min="0" max="50" value="10">
-                    <span id="paddingRightValue">10px</span>
-                </div>
-                <div class="text-input-group padding-group">
-                    <label>Unten:</label>
-                    <input type="range" id="paddingBottom" min="0" max="50" value="10">
-                    <span id="paddingBottomValue">10px</span>
-                </div>
-                <div class="text-input-group padding-group">
-                    <label>Links:</label>
-                    <input type="range" id="paddingLeft" min="0" max="50" value="10">
-                    <span id="paddingLeftValue">10px</span>
-                </div>
-            </div>
-
-            <!-- Zeile 5: Linienstil und Staerke -->
-            <div class="text-generator-row">
-                <div class="text-input-group">
-                    <label>Linienstil:</label>
-                    <div class="line-style-options">
-                        <button class="line-btn active" data-style="solid" title="Durchgezogen">Durchgezogen</button>
-                        <button class="line-btn" data-style="dashed" title="Gestrichelt">Gestrichelt</button>
-                        <button class="line-btn" data-style="dotted" title="Gepunktet">Gepunktet</button>
-                    </div>
-                </div>
-                <div class="text-input-group">
-                    <label>Linienstaerke:</label>
-                    <div class="line-weight-options">
-                        <button class="weight-btn" data-weight="1" title="Duenn">Duenn</button>
-                        <button class="weight-btn active" data-weight="2" title="Mittel">Mittel</button>
-                        <button class="weight-btn" data-weight="3" title="Fett">Fett</button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Zeile 6: Pfeil-Optionen -->
-            <div class="text-generator-row">
-                <div class="text-input-group">
-                    <label>Pfeil am Text:</label>
-                    <div class="arrow-options">
-                        <button class="arrow-btn active" data-arrow="none" title="Kein Pfeil">Keiner</button>
-                        <button class="arrow-btn" data-arrow="top" title="Pfeil oben">Oben</button>
-                        <button class="arrow-btn" data-arrow="right" title="Pfeil rechts">Rechts</button>
-                        <button class="arrow-btn" data-arrow="bottom" title="Pfeil unten">Unten</button>
-                        <button class="arrow-btn" data-arrow="left" title="Pfeil links">Links</button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Zeile 7: Pfeil-Details (nur sichtbar wenn Pfeil aktiv) -->
-            <div class="text-generator-row" id="arrowDetailsRow" style="display: none;">
-                <div class="text-input-group">
-                    <label>Pfeil-Laenge:</label>
-                    <input type="range" id="arrowLength" min="20" max="200" value="40">
-                    <span id="arrowLengthValue">40px</span>
-                </div>
-                <div class="text-input-group">
-                    <label>Knick-Winkel:</label>
-                    <input type="range" id="arrowAngle" min="-90" max="90" value="0">
-                    <span id="arrowAngleValue">0°</span>
-                </div>
-                <div class="text-input-group">
-                    <label>Knick-Position:</label>
-                    <input type="range" id="arrowBend" min="0" max="100" value="50">
-                    <span id="arrowBendValue">50%</span>
-                </div>
-            </div>
-
-            <!-- Zeile 7b: Pfeilspitzen-Details -->
-            <div class="text-generator-row" id="arrowDetailsRow2">
-                <div class="text-input-group">
-                    <label>Pfeilspitzen-Breite:</label>
-                    <input type="range" id="arrowSize" min="5" max="30" value="10">
-                    <span id="arrowSizeValue">10px</span>
-                </div>
-                <div class="text-input-group">
-                    <label>Pfeilspitzen-Laenge:</label>
-                    <input type="range" id="arrowTipLength" min="5" max="40" value="15">
-                    <span id="arrowTipLengthValue">15px</span>
-                </div>
-            </div>
-
-            <!-- Vorschau -->
-            <div class="text-generator-preview">
-                <div class="preview-label">Vorschau:</div>
-                <div class="preview-box" id="textPreview">
-                    <!-- SVG Preview -->
-                </div>
-                <div class="preview-actions">
-                    <button class="btn-action btn-copy" onclick="copyTextAsImage()" title="Als Bild kopieren">
-                        Kopieren
-                    </button>
-                    <button class="btn-action btn-svg" onclick="downloadTextSVG()" title="SVG herunterladen">
-                        SVG
-                    </button>
-                    <button class="btn-action btn-png" onclick="downloadTextPNG()" title="PNG herunterladen (transparent)">
-                        PNG
-                    </button>
-                    <button class="btn-action btn-jpg" onclick="downloadTextJPG()" title="JPG herunterladen">
-                        JPG
-                    </button>
-                    <button class="btn-action btn-dxf" onclick="downloadTextDXF()" title="DXF herunterladen">
-                        DXF
-                    </button>
-                    <button class="btn-action btn-legend" onclick="addTextToLegend()" title="Zur Legende hinzufuegen">
-                        Legende
-                    </button>
-                    <button class="btn-action btn-save" onclick="openSaveModal()" title="Als eigenes Symbol speichern">
-                        Speichern
-                    </button>
-                </div>
-            </div>
-
-            <!-- Einzelner Pfeil (Standalone Arrow) -->
-            <div class="standalone-arrow-section">
-                <div class="section-header">
-                    <h4>Einzelner Pfeil (ohne Text)</h4>
-                    <span class="section-hint">Verwendet die gleichen Pfeil-Einstellungen</span>
-                </div>
-                <div class="standalone-arrow-content">
-                    <div class="preview-box standalone-arrow-preview" id="standaloneArrowPreview">
-                        <!-- Pfeil-SVG Preview -->
-                    </div>
-                    <div class="preview-actions">
-                        <button class="btn-action btn-copy" onclick="copyStandaloneArrow()" title="Pfeil kopieren">
-                            Kopieren
-                        </button>
-                        <button class="btn-action btn-svg" onclick="downloadStandaloneArrowSVG()" title="SVG">
-                            SVG
-                        </button>
-                        <button class="btn-action btn-png" onclick="downloadStandaloneArrowPNG()" title="PNG">
-                            PNG
-                        </button>
-                        <button class="btn-action btn-jpg" onclick="downloadStandaloneArrowJPG()" title="JPG">
-                            JPG
-                        </button>
-                        <button class="btn-action btn-dxf" onclick="downloadStandaloneArrowDXF()" title="DXF">
-                            DXF
-                        </button>
-                        <button class="btn-action btn-legend" onclick="addStandaloneArrowToLegend()" title="Zur Legende">
-                            Legende
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- SUCHE & FILTER -->
-    <div class="search-container">
-        <div class="search-box">
-            <input type="text" id="searchInput" placeholder="Symbole suchen... (z.B. Schaden, Hydrant, Mast)">
-            <span class="search-icon">&#128269;</span>
-        </div>
-
-        <div class="filter-pills">
-            <button class="filter-pill active" data-filter="all">Alle</button>
-            <span class="filter-divider">|</span>
-            <span class="filter-label">Gutachten:</span>
-            <button class="filter-pill" data-filter="schaeden">Schaeden</button>
-            <button class="filter-pill" data-filter="werkzeuge">Werkzeuge</button>
-            <button class="filter-pill" data-filter="bauteile">Bauteile</button>
-            <button class="filter-pill" data-filter="moebel">Moebel</button>
-            <button class="filter-pill" data-filter="bad">Bad</button>
-            <button class="filter-pill" data-filter="kueche">Kueche</button>
-            <button class="filter-pill" data-filter="pfeile">Pfeile</button>
-            <button class="filter-pill" data-filter="kompass">Kompass</button>
-            <span class="filter-divider">|</span>
-            <span class="filter-label">Vermessung:</span>
-            <button class="filter-pill" data-filter="vermessung_status">Status</button>
-            <button class="filter-pill" data-filter="vermessung_grenzen">Grenzen</button>
-            <button class="filter-pill" data-filter="vermessung_wasser">Wasser</button>
-            <button class="filter-pill" data-filter="vermessung_abwasser">Abwasser</button>
-            <button class="filter-pill" data-filter="vermessung_strom">Strom</button>
-            <button class="filter-pill" data-filter="vermessung_gas">Gas</button>
-            <button class="filter-pill" data-filter="vermessung_verkehr">Verkehr</button>
-            <button class="filter-pill" data-filter="vermessung_topografie">Topografie</button>
-            <span class="filter-divider">|</span>
-            <span class="filter-label">Eigene:</span>
-            <button class="filter-pill" data-filter="custom">Meine Symbole</button>
-        </div>
-    </div>
-
-    <!-- SYMBOL-GRID -->
-    <main class="main-content">
-        <div class="symbol-grid" id="symbolGrid">
-            <!-- Symbole werden per JavaScript eingefuegt -->
-        </div>
-    </main>
-
-    <!-- LEGENDE MODAL -->
-    <div class="modal" id="legendModal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h2>Legende bearbeiten</h2>
-                <button class="modal-close" onclick="closeLegendModal()">X</button>
-            </div>
-            <div class="modal-body">
-                <div class="legend-items" id="legendItems">
-                    <!-- Legende-Eintraege werden per JavaScript eingefuegt -->
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn-secondary" onclick="clearLegend()">Leeren</button>
-                <button class="btn-secondary" onclick="exportLegendSVG()">SVG</button>
-                <button class="btn-secondary" onclick="exportLegendPNG()">PNG</button>
-                <button class="btn-primary" onclick="closeLegendModal()">Schliessen</button>
-            </div>
-        </div>
-    </div>
-
-    <!-- SAVE MODAL -->
-    <div class="modal" id="saveModal">
-        <div class="modal-content modal-small">
-            <div class="modal-header">
-                <h2>Symbol speichern</h2>
-                <button class="modal-close" onclick="closeSaveModal()">X</button>
-            </div>
-            <div class="modal-body">
-                <div class="save-form">
-                    <div class="form-group">
-                        <label for="symbolName">Symbolname:</label>
-                        <input type="text" id="symbolName" placeholder="z.B. Hinweis Wasserschaden">
-                    </div>
-                    <div class="form-group">
-                        <label for="symbolDescription">Beschreibung (optional):</label>
-                        <input type="text" id="symbolDescription" placeholder="Kurze Beschreibung...">
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn-secondary" onclick="closeSaveModal()">Abbrechen</button>
-                <button class="btn-primary" onclick="saveCustomSymbol()">Speichern</button>
-            </div>
-        </div>
-    </div>
-
-    
-<!-- IMPRESSUM MODAL -->
-<div class="legal-modal" id="impressumModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
-    <div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
-        <div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
-            <h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Impressum</h2>
-            <button onclick="closeImpressum()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">&times;</button>
-        </div>
-        <iframe src="/legal/impressum.html" style="flex:1;width:100%;border:none;"></iframe>
-    </div>
-</div>
-
-<!-- DATENSCHUTZ MODAL -->
-<div class="legal-modal" id="datenschutzModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
-    <div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
-        <div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
-            <h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Datenschutz</h2>
-            <button onclick="closeDatenschutz()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">&times;</button>
-        </div>
-        <iframe src="/legal/datenschutz.html" style="flex:1;width:100%;border:none;"></iframe>
-    </div>
-</div>
-
-<script>
-function openImpressum(){document.getElementById("impressumModal").style.display="flex";}
-function closeImpressum(){document.getElementById("impressumModal").style.display="none";}
-function openDatenschutz(){document.getElementById("datenschutzModal").style.display="flex";}
-function closeDatenschutz(){document.getElementById("datenschutzModal").style.display="none";}
-document.addEventListener("keydown",function(e){if(e.key==="Escape"){closeImpressum();closeDatenschutz();}});
-["impressumModal","datenschutzModal"].forEach(function(id){
-    var el=document.getElementById(id);
-    if(el)el.addEventListener("click",function(e){if(e.target===this)this.style.display="none";});
-});
-</script>
-
-    <script src="js/symbols.js?v=10"></script>
-    <script src="js/text-generator.js?v=15"></script>
-    <script src="js/app.js?v=25"></script>
-</body>
-</html>
diff --git a/symbols/index4.html b/symbols/index4.html
deleted file mode 100644
index 97f6f15..0000000
--- a/symbols/index4.html
+++ /dev/null
@@ -1,390 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Gutachter Symbolbibliothek v2.2</title>
-    <link rel="stylesheet" href="css/styles.css?v=16">
-</head>
-<body>
-    <!-- HEADER -->
-    <header class="header">
-        <div class="header-content">
-            <h1>Gutachter Symbolbibliothek</h1>
-            <p class="subtitle">SVG & DXF Symbole fuer Schadensgutachten und Vermessung</p>
-        </div>
-        <div class="header-actions">
-            <button class="btn-header" onclick="openLegendModal()">
-                Legende <span class="badge" id="legendCount">0</span>
-            </button>
-            <button class="btn-header" onclick="downloadAllAsZip()">
-                Alle herunterladen
-            </button>
-        </div>
-    </header>
-
-    <!-- TEXT-GENERATOR v5 -->
-    <div class="text-generator">
-        <div class="text-generator-header" onclick="toggleTextGenerator()">
-            <h3>Text-Symbol erstellen</h3>
-            <div class="header-buttons">
-                <button class="btn-reset" onclick="event.stopPropagation(); resetToDefaults();" title="Auf Standard zuruecksetzen">Reset</button>
-                <button class="collapse-btn" id="collapseBtn">&#9660;</button>
-            </div>
-        </div>
-        <div class="text-generator-body" id="textGeneratorBody">
-            <!-- Zeile 1: Text und Schriftgroesse -->
-            <div class="text-generator-row">
-                <div class="text-input-group text-input-wide">
-                    <label>Text:</label>
-                    <textarea id="customText" placeholder="Text eingeben... (Enter fuer neue Zeile)" rows="3"></textarea>
-                </div>
-                <div class="text-input-group">
-                    <label>Schriftgroesse:</label>
-                    <input type="range" id="fontSize" min="8" max="48" value="16">
-                    <span id="fontSizeValue">16px</span>
-                </div>
-            </div>
-
-            <!-- Zeile 2: Farben -->
-            <div class="text-generator-row">
-                <div class="text-input-group">
-                    <label>Textfarbe:</label>
-                    <div class="color-picker-wrap">
-                        <input type="color" id="textColor" value="#000000">
-                        <span class="color-value" id="textColorValue">#000000</span>
-                    </div>
-                </div>
-                <div class="text-input-group">
-                    <label>Rahmenfarbe:</label>
-                    <div class="color-picker-wrap">
-                        <input type="color" id="frameColor" value="#000000">
-                        <span class="color-value" id="frameColorValue">#000000</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Zeile 3: Rahmenform -->
-            <div class="text-generator-row">
-                <div class="text-input-group">
-                    <label>Rahmenform:</label>
-                    <div class="shape-options">
-                        <button class="shape-btn active" data-shape="none" title="Kein Rahmen">Keiner</button>
-                        <button class="shape-btn" data-shape="rect" title="Rechteck">Rechteck</button>
-                        <button class="shape-btn" data-shape="square" title="Quadrat">Quadrat</button>
-                        <button class="shape-btn" data-shape="circle" title="Kreis">Kreis</button>
-                        <button class="shape-btn" data-shape="oval" title="Oval">Oval</button>
-                        <button class="shape-btn" data-shape="diamond" title="Raute">Raute</button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Zeile 4: Rahmen-Skalierung -->
-            <div class="text-generator-row" id="frameScaleRow" style="display: none;">
-                <div class="text-input-group">
-                    <label>Rahmen-Skalierung:</label>
-                    <input type="range" id="frameScale" min="100" max="300" value="100">
-                    <span id="frameScaleValue">100%</span>
-                </div>
-            </div>
-
-            <!-- Zeile 4b: Gesamt-Padding -->
-            <div class="text-generator-row" id="framePaddingAllRow">
-                <div class="text-input-group">
-                    <label>Gesamt-Padding (alle Kanten):</label>
-                    <input type="range" id="paddingAll" min="0" max="50" value="10">
-                    <span id="paddingAllValue">10px</span>
-                </div>
-            </div>
-
-            <!-- Zeile 4c: Separate Padding (4 Kanten) -->
-            <div class="text-generator-row padding-row" id="framePaddingRow">
-                <div class="text-input-group padding-group">
-                    <label>Padding Oben:</label>
-                    <input type="range" id="paddingTop" min="0" max="50" value="10">
-                    <span id="paddingTopValue">10px</span>
-                </div>
-                <div class="text-input-group padding-group">
-                    <label>Rechts:</label>
-                    <input type="range" id="paddingRight" min="0" max="50" value="10">
-                    <span id="paddingRightValue">10px</span>
-                </div>
-                <div class="text-input-group padding-group">
-                    <label>Unten:</label>
-                    <input type="range" id="paddingBottom" min="0" max="50" value="10">
-                    <span id="paddingBottomValue">10px</span>
-                </div>
-                <div class="text-input-group padding-group">
-                    <label>Links:</label>
-                    <input type="range" id="paddingLeft" min="0" max="50" value="10">
-                    <span id="paddingLeftValue">10px</span>
-                </div>
-            </div>
-
-            <!-- Zeile 5: Linienstil und Staerke -->
-            <div class="text-generator-row">
-                <div class="text-input-group">
-                    <label>Linienstil:</label>
-                    <div class="line-style-options">
-                        <button class="line-btn active" data-style="solid" title="Durchgezogen">Durchgezogen</button>
-                        <button class="line-btn" data-style="dashed" title="Gestrichelt">Gestrichelt</button>
-                        <button class="line-btn" data-style="dotted" title="Gepunktet">Gepunktet</button>
-                    </div>
-                </div>
-                <div class="text-input-group">
-                    <label>Linienstaerke:</label>
-                    <div class="line-weight-options">
-                        <button class="weight-btn" data-weight="1" title="Duenn">Duenn</button>
-                        <button class="weight-btn active" data-weight="2" title="Mittel">Mittel</button>
-                        <button class="weight-btn" data-weight="3" title="Fett">Fett</button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Zeile 6: Pfeil-Optionen -->
-            <div class="text-generator-row">
-                <div class="text-input-group">
-                    <label>Pfeil am Text:</label>
-                    <div class="arrow-options">
-                        <button class="arrow-btn active" data-arrow="none" title="Kein Pfeil">Keiner</button>
-                        <button class="arrow-btn" data-arrow="top" title="Pfeil oben">Oben</button>
-                        <button class="arrow-btn" data-arrow="right" title="Pfeil rechts">Rechts</button>
-                        <button class="arrow-btn" data-arrow="bottom" title="Pfeil unten">Unten</button>
-                        <button class="arrow-btn" data-arrow="left" title="Pfeil links">Links</button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Zeile 7: Pfeil-Details (nur sichtbar wenn Pfeil aktiv) -->
-            <div class="text-generator-row" id="arrowDetailsRow" style="display: none;">
-                <div class="text-input-group">
-                    <label>Pfeil-Laenge:</label>
-                    <input type="range" id="arrowLength" min="20" max="200" value="40">
-                    <span id="arrowLengthValue">40px</span>
-                </div>
-                <div class="text-input-group">
-                    <label>Knick-Winkel:</label>
-                    <input type="range" id="arrowAngle" min="-90" max="90" value="0">
-                    <span id="arrowAngleValue">0°</span>
-                </div>
-                <div class="text-input-group">
-                    <label>Knick-Position:</label>
-                    <input type="range" id="arrowBend" min="0" max="100" value="50">
-                    <span id="arrowBendValue">50%</span>
-                </div>
-            </div>
-
-            <!-- Zeile 7b: Pfeilspitzen-Details -->
-            <div class="text-generator-row" id="arrowDetailsRow2">
-                <div class="text-input-group">
-                    <label>Pfeilspitzen-Breite:</label>
-                    <input type="range" id="arrowSize" min="5" max="30" value="10">
-                    <span id="arrowSizeValue">10px</span>
-                </div>
-                <div class="text-input-group">
-                    <label>Pfeilspitzen-Laenge:</label>
-                    <input type="range" id="arrowTipLength" min="5" max="40" value="15">
-                    <span id="arrowTipLengthValue">15px</span>
-                </div>
-            </div>
-
-            <!-- Vorschau -->
-            <div class="text-generator-preview">
-                <div class="preview-label">Vorschau:</div>
-                <div class="preview-box" id="textPreview">
-                    <!-- SVG Preview -->
-                </div>
-                <div class="preview-actions">
-                    <button class="btn-action btn-copy" onclick="copyTextAsImage()" title="Als Bild kopieren">
-                        Kopieren
-                    </button>
-                    <button class="btn-action btn-svg" onclick="downloadTextSVG()" title="SVG herunterladen">
-                        SVG
-                    </button>
-                    <button class="btn-action btn-png" onclick="downloadTextPNG()" title="PNG herunterladen (transparent)">
-                        PNG
-                    </button>
-                    <button class="btn-action btn-jpg" onclick="downloadTextJPG()" title="JPG herunterladen">
-                        JPG
-                    </button>
-                    <button class="btn-action btn-dxf" onclick="downloadTextDXF()" title="DXF herunterladen">
-                        DXF
-                    </button>
-                    <button class="btn-action btn-legend" onclick="addTextToLegend()" title="Zur Legende hinzufuegen">
-                        Legende
-                    </button>
-                    <button class="btn-action btn-save" onclick="openSaveModal()" title="Als eigenes Symbol speichern">
-                        Speichern
-                    </button>
-                </div>
-            </div>
-
-            <!-- Einzelner Pfeil (Standalone Arrow) -->
-            <div class="standalone-arrow-section">
-                <div class="section-header">
-                    <h4>Einzelner Pfeil (ohne Text)</h4>
-                    <span class="section-hint">Verwendet die gleichen Pfeil-Einstellungen</span>
-                </div>
-                <div class="standalone-arrow-content">
-                    <div class="preview-box standalone-arrow-preview" id="standaloneArrowPreview">
-                        <!-- Pfeil-SVG Preview -->
-                    </div>
-                    <div class="preview-actions">
-                        <button class="btn-action btn-copy" onclick="copyStandaloneArrow()" title="Pfeil kopieren">
-                            Kopieren
-                        </button>
-                        <button class="btn-action btn-svg" onclick="downloadStandaloneArrowSVG()" title="SVG">
-                            SVG
-                        </button>
-                        <button class="btn-action btn-png" onclick="downloadStandaloneArrowPNG()" title="PNG">
-                            PNG
-                        </button>
-                        <button class="btn-action btn-jpg" onclick="downloadStandaloneArrowJPG()" title="JPG">
-                            JPG
-                        </button>
-                        <button class="btn-action btn-dxf" onclick="downloadStandaloneArrowDXF()" title="DXF">
-                            DXF
-                        </button>
-                        <button class="btn-action btn-legend" onclick="addStandaloneArrowToLegend()" title="Zur Legende">
-                            Legende
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- SUCHE & FILTER -->
-    <div class="search-container">
-        <div class="search-box">
-            <input type="text" id="searchInput" placeholder="Symbole suchen... (z.B. Schaden, Hydrant, Mast)">
-            <span class="search-icon">&#128269;</span>
-        </div>
-
-        <div class="filter-pills">
-            <button class="filter-pill active" data-filter="all">Alle</button>
-            <span class="filter-divider">|</span>
-            <span class="filter-label">Gutachten:</span>
-            <button class="filter-pill" data-filter="schaeden">Schaeden</button>
-            <button class="filter-pill" data-filter="werkzeuge">Werkzeuge</button>
-            <button class="filter-pill" data-filter="bauteile">Bauteile</button>
-            <button class="filter-pill" data-filter="moebel">Moebel</button>
-            <button class="filter-pill" data-filter="bad">Bad</button>
-            <button class="filter-pill" data-filter="kueche">Kueche</button>
-            <button class="filter-pill" data-filter="pfeile">Pfeile</button>
-            <button class="filter-pill" data-filter="kompass">Kompass</button>
-            <span class="filter-divider">|</span>
-            <span class="filter-label">Vermessung:</span>
-            <button class="filter-pill" data-filter="vermessung_status">Status</button>
-            <button class="filter-pill" data-filter="vermessung_grenzen">Grenzen</button>
-            <button class="filter-pill" data-filter="vermessung_wasser">Wasser</button>
-            <button class="filter-pill" data-filter="vermessung_abwasser">Abwasser</button>
-            <button class="filter-pill" data-filter="vermessung_strom">Strom</button>
-            <button class="filter-pill" data-filter="vermessung_gas">Gas</button>
-            <button class="filter-pill" data-filter="vermessung_verkehr">Verkehr</button>
-            <button class="filter-pill" data-filter="vermessung_topografie">Topografie</button>
-            <span class="filter-divider">|</span>
-            <span class="filter-label">Eigene:</span>
-            <button class="filter-pill" data-filter="custom">Meine Symbole</button>
-        </div>
-    </div>
-
-    <!-- SYMBOL-GRID -->
-    <main class="main-content">
-        <div class="symbol-grid" id="symbolGrid">
-            <!-- Symbole werden per JavaScript eingefuegt -->
-        </div>
-    </main>
-
-    <!-- LEGENDE MODAL -->
-    <div class="modal" id="legendModal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h2>Legende bearbeiten</h2>
-                <button class="modal-close" onclick="closeLegendModal()">X</button>
-            </div>
-            <div class="modal-body">
-                <div class="legend-items" id="legendItems">
-                    <!-- Legende-Eintraege werden per JavaScript eingefuegt -->
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn-secondary" onclick="clearLegend()">Leeren</button>
-                <button class="btn-secondary" onclick="exportLegendSVG()">SVG</button>
-                <button class="btn-secondary" onclick="exportLegendPNG()">PNG</button>
-                <button class="btn-primary" onclick="closeLegendModal()">Schliessen</button>
-            </div>
-        </div>
-    </div>
-
-    <!-- SAVE MODAL -->
-    <div class="modal" id="saveModal">
-        <div class="modal-content modal-small">
-            <div class="modal-header">
-                <h2>Symbol speichern</h2>
-                <button class="modal-close" onclick="closeSaveModal()">X</button>
-            </div>
-            <div class="modal-body">
-                <div class="save-form">
-                    <div class="form-group">
-                        <label for="symbolName">Symbolname:</label>
-                        <input type="text" id="symbolName" placeholder="z.B. Hinweis Wasserschaden">
-                    </div>
-                    <div class="form-group">
-                        <label for="symbolDescription">Beschreibung (optional):</label>
-                        <input type="text" id="symbolDescription" placeholder="Kurze Beschreibung...">
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn-secondary" onclick="closeSaveModal()">Abbrechen</button>
-                <button class="btn-primary" onclick="saveCustomSymbol()">Speichern</button>
-            </div>
-        </div>
-    </div>
-
-    
-<!-- IMPRESSUM MODAL -->
-<div class="legal-modal" id="impressumModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
-    <div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
-        <div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
-            <h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Impressum</h2>
-            <button onclick="closeImpressum()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">&times;</button>
-        </div>
-        <iframe src="/legal/impressum.html" style="flex:1;width:100%;border:none;"></iframe>
-    </div>
-</div>
-
-<!-- DATENSCHUTZ MODAL -->
-<div class="legal-modal" id="datenschutzModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
-    <div style="background:white;width:90%;max-width:900px;height:90vh;border-radius:12px;margin:20px;overflow:hidden;display:flex;flex-direction:column;">
-        <div style="padding:0.75rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">
-            <h2 style="margin:0;font-size:1.25rem;color:#1f2937;">Datenschutz</h2>
-            <button onclick="closeDatenschutz()" style="background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;line-height:1;">&times;</button>
-        </div>
-        <iframe src="/legal/datenschutz.html" style="flex:1;width:100%;border:none;"></iframe>
-    </div>
-</div>
-
-<script>
-function openImpressum(){document.getElementById("impressumModal").style.display="flex";}
-function closeImpressum(){document.getElementById("impressumModal").style.display="none";}
-function openDatenschutz(){document.getElementById("datenschutzModal").style.display="flex";}
-function closeDatenschutz(){document.getElementById("datenschutzModal").style.display="none";}
-document.addEventListener("keydown",function(e){if(e.key==="Escape"){closeImpressum();closeDatenschutz();}});
-["impressumModal","datenschutzModal"].forEach(function(id){
-    var el=document.getElementById(id);
-    if(el)el.addEventListener("click",function(e){if(e.target===this)this.style.display="none";});
-});
-</script>
-
-    <script src="js/symbols.js?v=10"></script>
-    <script src="lib/svg.min.js"></script>
-    <script src="js/text-generator/state.js?v=1"></script>
-    <script src="js/text-generator/svg-generator.js?v=7"></script>
-    <script src="js/text-generator/ui-bindings.js?v=4"></script>
-    <script src="js/text-generator/export.js?v=1"></script>
-    <script>document.addEventListener("DOMContentLoaded", function() { UiBindings.init(); });</script>
-    <script src="js/app.js?v=25"></script>
-</body>
-</html>
diff --git a/symbols/js/app.js b/symbols/js/app.js
index ebc70dd..9e31d6e 100644
--- a/symbols/js/app.js
+++ b/symbols/js/app.js
@@ -445,6 +445,7 @@ function openLegendModal() {
     const modal = document.getElementById('legendModal');
     modal.classList.add('active');
     renderLegendEditor();
+    updateLegendPreview();
 }
 
 function closeLegendModal() {
@@ -454,34 +455,38 @@ function closeLegendModal() {
 
 function renderLegendEditor() {
     const container = document.getElementById('legendItems');
-    
+
     if (legendItems.length === 0) {
         container.innerHTML = '<div class="legend-empty">Keine Symbole in der Legende. Klicken Sie auf 📑 bei einem Symbol, um es hinzuzufügen.</div>';
+        updateLegendPreview();
         return;
     }
-    
+
     container.innerHTML = legendItems.map((item, index) => `
         <div class="legend-item" data-index="${index}">
             <div class="legend-item-preview">${item.svg}</div>
             <div class="legend-item-content">
-                <input type="text" class="legend-item-name" value="${item.name}" 
-                    onchange="updateLegendItem(${index}, 'name', this.value)" placeholder="Name">
-                <input type="text" class="legend-item-desc" value="${item.description || ''}" 
-                    onchange="updateLegendItem(${index}, 'description', this.value)" placeholder="Beschreibung (optional)">
+                <input type="text" class="legend-item-name" value="${item.name}"
+                    oninput="updateLegendItem(${index}, 'name', this.value)" placeholder="Name">
+                <input type="text" class="legend-item-desc" value="${item.description || ''}"
+                    oninput="updateLegendItem(${index}, 'description', this.value)" placeholder="Beschreibung (optional)">
             </div>
             <div class="legend-item-actions">
-                <button onclick="moveLegendItem(${index}, -1)" title="Nach oben" ${index === 0 ? 'disabled' : ''}>▲</button>
-                <button onclick="moveLegendItem(${index}, 1)" title="Nach unten" ${index === legendItems.length - 1 ? 'disabled' : ''}>▼</button>
-                <button onclick="removeLegendItem(${index})" title="Entfernen" class="btn-remove">✕</button>
+                <button type="button" onclick="moveLegendItem(${index}, -1)" title="Nach oben" ${index === 0 ? 'disabled' : ''}>▲</button>
+                <button type="button" onclick="moveLegendItem(${index}, 1)" title="Nach unten" ${index === legendItems.length - 1 ? 'disabled' : ''}>▼</button>
+                <button type="button" onclick="removeLegendItem(${index})" title="Entfernen" class="btn-remove">✕</button>
             </div>
         </div>
     `).join('');
+
+    updateLegendPreview();
 }
 
 function updateLegendItem(index, field, value) {
     if (legendItems[index]) {
         legendItems[index][field] = value;
         saveLegendToStorage();
+        updateLegendPreview();
     }
 }
 
@@ -547,28 +552,130 @@ function loadLegendFromStorage() {
     }
 }
 
+// ========== LEGENDE VORSCHAU ==========
+function generateLegendSVG() {
+    if (legendItems.length === 0) return null;
+
+    const itemHeight = 50;
+    const width = 320;
+    const height = legendItems.length * itemHeight + 60;
+
+    let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
+        <rect width="${width}" height="${height}" fill="white"/>
+        <text x="20" y="30" font-family="Arial" font-size="18" font-weight="bold">Legende</text>
+        <line x1="20" y1="40" x2="${width - 20}" y2="40" stroke="#ccc" stroke-width="1"/>`;
+
+    legendItems.forEach((item, index) => {
+        const y = 60 + index * itemHeight;
+        svg += `<g transform="translate(20, ${y})">
+            <g transform="scale(0.5)">${item.svg.replace(/<svg[^>]*>/, '').replace('</svg>', '')}</g>
+            <text x="50" y="20" font-family="Arial" font-size="14" font-weight="bold">${escapeHtml(item.name)}</text>
+            ${item.description ? `<text x="50" y="35" font-family="Arial" font-size="11" fill="#666">${escapeHtml(item.description)}</text>` : ''}
+        </g>`;
+    });
+
+    svg += '</svg>';
+    return svg;
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+function updateLegendPreview() {
+    const previewBox = document.getElementById('legendPreviewBox');
+    if (!previewBox) return;
+
+    if (legendItems.length === 0) {
+        previewBox.innerHTML = '<div class="legend-preview-empty">Keine Eintraege vorhanden</div>';
+        return;
+    }
+
+    const svg = generateLegendSVG();
+    if (svg) {
+        previewBox.innerHTML = svg;
+    }
+}
+
+async function copyLegendAsImage() {
+    if (legendItems.length === 0) {
+        showNotification('Legende ist leer', 'error');
+        return;
+    }
+
+    const svg = generateLegendSVG();
+    if (!svg) return;
+
+    try {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const itemHeight = 50;
+        const width = 320;
+        const height = legendItems.length * itemHeight + 60;
+
+        canvas.width = width * 2;
+        canvas.height = height * 2;
+        ctx.scale(2, 2);
+        ctx.fillStyle = 'white';
+        ctx.fillRect(0, 0, width, height);
+
+        const img = new Image();
+        const svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(svgBlob);
+
+        await new Promise((resolve, reject) => {
+            img.onload = resolve;
+            img.onerror = reject;
+            img.src = url;
+        });
+
+        ctx.drawImage(img, 0, 0, width, height);
+        URL.revokeObjectURL(url);
+
+        canvas.toBlob(async (blob) => {
+            try {
+                await navigator.clipboard.write([
+                    new ClipboardItem({ 'image/png': blob })
+                ]);
+                showNotification('Legende in Zwischenablage kopiert!');
+            } catch (err) {
+                const link = document.createElement('a');
+                link.href = URL.createObjectURL(blob);
+                link.download = 'legende.png';
+                link.click();
+                showNotification('Legende als PNG heruntergeladen');
+            }
+        }, 'image/png');
+    } catch (err) {
+        console.error('Fehler beim Kopieren:', err);
+        showNotification('Fehler beim Kopieren', 'error');
+    }
+}
+
 // ========== LEGENDE EXPORTIEREN ==========
 function exportLegendSVG() {
     if (legendItems.length === 0) {
         showNotification('Legende ist leer', 'error');
         return;
     }
-    
+
     const itemHeight = 50;
     const width = 400;
     const height = legendItems.length * itemHeight + 60;
-    
+
     let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
         <rect width="${width}" height="${height}" fill="white"/>
         <text x="20" y="30" font-family="Arial" font-size="18" font-weight="bold">Legende</text>
         <line x1="20" y1="40" x2="${width - 20}" y2="40" stroke="#ccc" stroke-width="1"/>`;
-    
+
     legendItems.forEach((item, index) => {
         const y = 60 + index * itemHeight;
         svg += `<g transform="translate(20, ${y})">
             <g transform="scale(0.5)">${item.svg.replace(/<svg[^>]*>/, '').replace('</svg>', '')}</g>
-            <text x="50" y="20" font-family="Arial" font-size="14" font-weight="bold">${item.name}</text>
-            ${item.description ? `<text x="50" y="35" font-family="Arial" font-size="11" fill="#666">${item.description}</text>` : ''}
+            <text x="50" y="20" font-family="Arial" font-size="14" font-weight="bold">${escapeHtml(item.name)}</text>
+            ${item.description ? `<text x="50" y="35" font-family="Arial" font-size="11" fill="#666">${escapeHtml(item.description)}</text>` : ''}
         </g>`;
     });
     
@@ -838,586 +945,14 @@ function parseSvgPath(d, scaleX, flipY) {
 }
 
 
-// ========== TEXT-GENERATOR v4 ==========
-// Features: Farben, Skalierung, abknickbare Pfeile (korrigiert), Pfeilspitzengroesse, PNG/JPG, Speichern
-
-var textGenState = {
-    text: '',
-    fontSize: 16,
-    textColor: '#000000',
-    frameColor: '#000000',
-    shape: 'none',
-    frameScale: 100,
-    framePadding: 10,
-    lineStyle: 'solid',
-    lineWeight: 2,
-    arrow: 'none',
-    arrowLength: 40,
-    arrowAngle: 0,
-    arrowBend: 50,
-    arrowSize: 10
-};
-
-// Custom Symbols aus localStorage
-var customSymbols = [];
-
-function initTextGenerator() {
-    // Load custom symbols
-    loadCustomSymbols();
-
-    var textInput = document.getElementById('customText');
-    var fontSizeInput = document.getElementById('fontSize');
-    var fontSizeValue = document.getElementById('fontSizeValue');
-    var textColorInput = document.getElementById('textColor');
-    var textColorValue = document.getElementById('textColorValue');
-    var frameColorInput = document.getElementById('frameColor');
-    var frameColorValue = document.getElementById('frameColorValue');
-    var frameScaleInput = document.getElementById('frameScale');
-    var frameScaleValue = document.getElementById('frameScaleValue');
-    var framePaddingInput = document.getElementById('framePadding');
-    var framePaddingValue = document.getElementById('framePaddingValue');
-    var arrowLengthInput = document.getElementById('arrowLength');
-    var arrowLengthValue = document.getElementById('arrowLengthValue');
-    var arrowAngleInput = document.getElementById('arrowAngle');
-    var arrowAngleValue = document.getElementById('arrowAngleValue');
-    var arrowBendInput = document.getElementById('arrowBend');
-    var arrowBendValue = document.getElementById('arrowBendValue');
-    var arrowSizeInput = document.getElementById('arrowSize');
-    var arrowSizeValue = document.getElementById('arrowSizeValue');
-
-    // Text input
-    if (textInput) {
-        textInput.addEventListener('input', function(e) {
-            textGenState.text = e.target.value;
-            updateTextPreview();
-        });
-    }
-
-    // Font size
-    if (fontSizeInput) {
-        fontSizeInput.addEventListener('input', function(e) {
-            textGenState.fontSize = parseInt(e.target.value);
-            fontSizeValue.textContent = e.target.value + 'px';
-            updateTextPreview();
-        });
-    }
-
-    // Text color
-    if (textColorInput) {
-        textColorInput.addEventListener('input', function(e) {
-            textGenState.textColor = e.target.value;
-            textColorValue.textContent = e.target.value;
-            updateTextPreview();
-        });
-    }
-
-    // Frame color
-    if (frameColorInput) {
-        frameColorInput.addEventListener('input', function(e) {
-            textGenState.frameColor = e.target.value;
-            frameColorValue.textContent = e.target.value;
-            updateTextPreview();
-        });
-    }
-
-    // Frame scale
-    if (frameScaleInput) {
-        frameScaleInput.addEventListener('input', function(e) {
-            textGenState.frameScale = parseInt(e.target.value);
-            frameScaleValue.textContent = e.target.value + '%';
-            updateTextPreview();
-        });
-    }
-
-    // Frame padding
-    if (framePaddingInput) {
-        framePaddingInput.addEventListener('input', function(e) {
-            textGenState.framePadding = parseInt(e.target.value);
-            framePaddingValue.textContent = e.target.value + 'px';
-            updateTextPreview();
-        });
-    }
-
-    // Arrow length
-    if (arrowLengthInput) {
-        arrowLengthInput.addEventListener('input', function(e) {
-            textGenState.arrowLength = parseInt(e.target.value);
-            arrowLengthValue.textContent = e.target.value + 'px';
-            updateTextPreview();
-        });
-    }
-
-    // Arrow angle
-    if (arrowAngleInput) {
-        arrowAngleInput.addEventListener('input', function(e) {
-            textGenState.arrowAngle = parseInt(e.target.value);
-            arrowAngleValue.textContent = e.target.value + '\u00B0';
-            updateTextPreview();
-        });
-    }
-
-    // Arrow bend position
-    if (arrowBendInput) {
-        arrowBendInput.addEventListener('input', function(e) {
-            textGenState.arrowBend = parseInt(e.target.value);
-            arrowBendValue.textContent = e.target.value + '%';
-            updateTextPreview();
-        });
-    }
-
-    // Arrow size
-    if (arrowSizeInput) {
-        arrowSizeInput.addEventListener('input', function(e) {
-            textGenState.arrowSize = parseInt(e.target.value);
-            arrowSizeValue.textContent = e.target.value + 'px';
-            updateTextPreview();
-        });
-    }
-
-    // Shape buttons
-    document.querySelectorAll('.shape-btn').forEach(function(btn) {
-        btn.addEventListener('click', function() {
-            document.querySelectorAll('.shape-btn').forEach(function(b) { b.classList.remove('active'); });
-            btn.classList.add('active');
-            textGenState.shape = btn.dataset.shape;
-            updateFrameScaleVisibility();
-            updateTextPreview();
-        });
-    });
-
-    // Line style buttons
-    document.querySelectorAll('.line-btn').forEach(function(btn) {
-        btn.addEventListener('click', function() {
-            document.querySelectorAll('.line-btn').forEach(function(b) { b.classList.remove('active'); });
-            btn.classList.add('active');
-            textGenState.lineStyle = btn.dataset.style;
-            updateTextPreview();
-        });
-    });
-
-    // Line weight buttons
-    document.querySelectorAll('.weight-btn').forEach(function(btn) {
-        btn.addEventListener('click', function() {
-            document.querySelectorAll('.weight-btn').forEach(function(b) { b.classList.remove('active'); });
-            btn.classList.add('active');
-            textGenState.lineWeight = parseInt(btn.dataset.weight);
-            updateTextPreview();
-        });
-    });
-
-    // Arrow buttons
-    document.querySelectorAll('.arrow-btn').forEach(function(btn) {
-        btn.addEventListener('click', function() {
-            document.querySelectorAll('.arrow-btn').forEach(function(b) { b.classList.remove('active'); });
-            btn.classList.add('active');
-            textGenState.arrow = btn.dataset.arrow;
-            updateArrowDetailsVisibility();
-            updateTextPreview();
-        });
-    });
-
-    updateFrameScaleVisibility();
-    updateArrowDetailsVisibility();
-    updateTextPreview();
-}
-
-function updateFrameScaleVisibility() {
-    var row = document.getElementById('frameScaleRow');
-    if (row) {
-        row.style.display = textGenState.shape === 'none' ? 'none' : 'flex';
-    }
-}
-
-function updateArrowDetailsVisibility() {
-    var row = document.getElementById('arrowDetailsRow');
-    if (row) {
-        row.style.display = textGenState.arrow === 'none' ? 'none' : 'flex';
-    }
-}
-
+// ========== TEXT-GENERATOR UI ==========
 function toggleTextGenerator() {
     var generator = document.querySelector('.text-generator');
     generator.classList.toggle('collapsed');
 }
 
-function getStrokeDasharray(style) {
-    switch(style) {
-        case 'dashed': return '8,4';
-        case 'dotted': return '2,3';
-        default: return 'none';
-    }
-}
-
-function generateTextSVG() {
-    var text = textGenState.text || 'Text';
-    var fontSize = textGenState.fontSize;
-    var textColor = textGenState.textColor;
-    var frameColor = textGenState.frameColor;
-    var shape = textGenState.shape;
-    var frameScale = textGenState.frameScale / 100;
-    var padding = textGenState.framePadding;
-    var lineStyle = textGenState.lineStyle;
-    var lineWeight = textGenState.lineWeight;
-    var arrow = textGenState.arrow;
-    var arrowLength = textGenState.arrowLength;
-    var arrowAngle = textGenState.arrowAngle;
-    var arrowBend = textGenState.arrowBend / 100;
-    var arrowSize = textGenState.arrowSize;
-
-    // Zeilen aufteilen
-    var lines = text.split('\n');
-    if (lines.length === 0) lines = ['Text'];
-
-    // Berechne die laengste Zeile
-    var maxLineLength = 0;
-    for (var i = 0; i < lines.length; i++) {
-        if (lines[i].length > maxLineLength) {
-            maxLineLength = lines[i].length;
-        }
-    }
-    if (maxLineLength === 0) maxLineLength = 4;
-
-    // Dimensionen berechnen
-    var charWidth = fontSize * 0.6;
-    var lineHeight = fontSize * 1.3;
-    var textWidth = maxLineLength * charWidth;
-    var textHeight = lines.length * lineHeight;
-
-    // Basis-SVG-Groesse (Text + Padding)
-    var baseWidth = textWidth + (padding * 2);
-    var baseHeight = textHeight + (padding * 2);
-
-    // Rahmen mit Skalierung
-    var frameWidth = baseWidth * frameScale;
-    var frameHeight = baseHeight * frameScale;
-
-    // Mindestgroesse
-    if (frameWidth < 40) frameWidth = 40;
-    if (frameHeight < 30) frameHeight = 30;
-
-    // Pfeil-Raum berechnen (inkl. Pfeilspitze)
-    var arrowSpace = (arrow !== 'none') ? arrowLength + arrowSize + 5 : 0;
-
-    // SVG-Groesse mit Pfeil-Raum
-    var svgWidth = frameWidth;
-    var svgHeight = frameHeight;
-    var offsetX = 0;
-    var offsetY = 0;
-
-    if (arrow === 'left') {
-        svgWidth += arrowSpace;
-        offsetX = arrowSpace;
-    } else if (arrow === 'right') {
-        svgWidth += arrowSpace;
-    } else if (arrow === 'top') {
-        svgHeight += arrowSpace;
-        offsetY = arrowSpace;
-    } else if (arrow === 'bottom') {
-        svgHeight += arrowSpace;
-    }
-
-    var cx = offsetX + frameWidth / 2;
-    var cy = offsetY + frameHeight / 2;
-
-    var dashArray = getStrokeDasharray(lineStyle);
-    var dashAttr = dashArray !== 'none' ? ' stroke-dasharray="' + dashArray + '"' : '';
-
-    var shapeSvg = '';
-    var shapeX = offsetX + lineWeight / 2;
-    var shapeY = offsetY + lineWeight / 2;
-    var shapeW = frameWidth - lineWeight;
-    var shapeH = frameHeight - lineWeight;
-
-    switch(shape) {
-        case 'rect':
-            shapeSvg = '<rect x="' + shapeX + '" y="' + shapeY + '" width="' + shapeW + '" height="' + shapeH + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
-            break;
-        case 'square':
-            var squareSize = Math.max(shapeW, shapeH);
-            var sqX = cx - squareSize / 2;
-            var sqY = cy - squareSize / 2;
-            shapeSvg = '<rect x="' + sqX + '" y="' + sqY + '" width="' + squareSize + '" height="' + squareSize + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
-            break;
-        case 'circle':
-            var radius = Math.max(shapeW, shapeH) / 2;
-            shapeSvg = '<circle cx="' + cx + '" cy="' + cy + '" r="' + (radius - lineWeight / 2) + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
-            break;
-        case 'oval':
-            var rx = shapeW / 2;
-            var ry = shapeH / 2;
-            shapeSvg = '<ellipse cx="' + cx + '" cy="' + cy + '" rx="' + (rx - lineWeight / 2) + '" ry="' + (ry - lineWeight / 2) + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
-            break;
-        case 'diamond':
-            var halfW = shapeW / 2;
-            var halfH = shapeH / 2;
-            shapeSvg = '<polygon points="' + cx + ',' + (cy - halfH) + ' ' + (cx + halfW) + ',' + cy + ' ' + cx + ',' + (cy + halfH) + ' ' + (cx - halfW) + ',' + cy + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
-            break;
-    }
-
-    // Pfeil generieren
-    var arrowSvg = '';
-    if (arrow !== 'none') {
-        arrowSvg = generateArrowPath(arrow, cx, cy, frameWidth, frameHeight, offsetX, offsetY, arrowLength, arrowAngle, arrowBend, frameColor, lineWeight, dashAttr, arrowSize);
-    }
-
-    // Text-Elemente erzeugen
-    var textSvg = '<text x="' + cx + '" font-family="Arial, sans-serif" font-size="' + fontSize + '" fill="' + textColor + '" text-anchor="middle">';
-
-    var totalTextHeight = lines.length * lineHeight;
-    var startY = cy - (totalTextHeight / 2) + (fontSize * 0.8);
-
-    for (var j = 0; j < lines.length; j++) {
-        var lineY = startY + (j * lineHeight);
-        var lineText = lines[j] || ' ';
-        lineText = lineText.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-        textSvg += '<tspan x="' + cx + '" y="' + lineY + '">' + lineText + '</tspan>';
-    }
-    textSvg += '</text>';
-
-    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + svgWidth + ' ' + svgHeight + '" width="' + svgWidth + '" height="' + svgHeight + '">' + shapeSvg + arrowSvg + textSvg + '</svg>';
-}
-
-function generateArrowPath(direction, cx, cy, frameWidth, frameHeight, offsetX, offsetY, length, angle, bendPos, color, weight, dashAttr, arrowSize) {
-    var startX, startY, midX, midY, endX, endY;
-    var angleRad = angle * Math.PI / 180;
-
-    // Startpunkt am Rahmen
-    switch(direction) {
-        case 'top':
-            startX = cx;
-            startY = offsetY;
-            // Erster Teil geht gerade nach oben bis zum Knickpunkt
-            midX = startX;
-            midY = startY - length * bendPos;
-            // Zweiter Teil knickt ab
-            endX = midX + Math.sin(angleRad) * (length * (1 - bendPos));
-            endY = midY - Math.cos(angleRad) * (length * (1 - bendPos));
-            break;
-        case 'bottom':
-            startX = cx;
-            startY = offsetY + frameHeight;
-            midX = startX;
-            midY = startY + length * bendPos;
-            endX = midX + Math.sin(angleRad) * (length * (1 - bendPos));
-            endY = midY + Math.cos(angleRad) * (length * (1 - bendPos));
-            break;
-        case 'left':
-            startX = offsetX;
-            startY = cy;
-            midX = startX - length * bendPos;
-            midY = startY;
-            endX = midX - Math.cos(angleRad) * (length * (1 - bendPos));
-            endY = midY + Math.sin(angleRad) * (length * (1 - bendPos));
-            break;
-        case 'right':
-            startX = offsetX + frameWidth;
-            startY = cy;
-            midX = startX + length * bendPos;
-            midY = startY;
-            endX = midX + Math.cos(angleRad) * (length * (1 - bendPos));
-            endY = midY + Math.sin(angleRad) * (length * (1 - bendPos));
-            break;
-    }
-
-    // Pfad erstellen
-    var pathD;
-    if (angle !== 0 && bendPos > 0 && bendPos < 1) {
-        // Mit Knick
-        pathD = 'M ' + startX + ' ' + startY + ' L ' + midX + ' ' + midY + ' L ' + endX + ' ' + endY;
-    } else {
-        // Ohne Knick - gerade Linie
-        pathD = 'M ' + startX + ' ' + startY + ' L ' + endX + ' ' + endY;
-    }
-
-    // Pfeilspitze: Richtung basiert auf dem LETZTEN Segment
-    var lastSegmentStartX, lastSegmentStartY;
-    if (angle !== 0 && bendPos > 0 && bendPos < 1) {
-        // Letztes Segment ist von mid zu end
-        lastSegmentStartX = midX;
-        lastSegmentStartY = midY;
-    } else {
-        // Letztes Segment ist von start zu end
-        lastSegmentStartX = startX;
-        lastSegmentStartY = startY;
-    }
-
-    // Winkel des letzten Segments berechnen
-    var arrowHeadAngle = Math.atan2(endY - lastSegmentStartY, endX - lastSegmentStartX);
-
-    // Pfeilspitze Punkte
-    var ah1x = endX - arrowSize * Math.cos(arrowHeadAngle - Math.PI / 6);
-    var ah1y = endY - arrowSize * Math.sin(arrowHeadAngle - Math.PI / 6);
-    var ah2x = endX - arrowSize * Math.cos(arrowHeadAngle + Math.PI / 6);
-    var ah2y = endY - arrowSize * Math.sin(arrowHeadAngle + Math.PI / 6);
-
-    var arrowHead = '<polygon points="' + endX + ',' + endY + ' ' + ah1x + ',' + ah1y + ' ' + ah2x + ',' + ah2y + '" fill="' + color + '"/>';
-
-    return '<path d="' + pathD + '" fill="none" stroke="' + color + '" stroke-width="' + weight + '"' + dashAttr + '/>' + arrowHead;
-}
-
-function updateTextPreview() {
-    var preview = document.getElementById('textPreview');
-    if (preview) {
-        preview.innerHTML = generateTextSVG();
-    }
-}
-
-// Hilfsfunktion: SVG zu Canvas rendern
-async function svgToCanvas(svg, scale) {
-    var parser = new DOMParser();
-    var svgDoc = parser.parseFromString(svg, 'image/svg+xml');
-    var svgEl = svgDoc.documentElement;
-    var svgWidth = parseFloat(svgEl.getAttribute('width')) || 100;
-    var svgHeight = parseFloat(svgEl.getAttribute('height')) || 100;
-
-    if (!scale) {
-        scale = Math.max(200 / Math.min(svgWidth, svgHeight), 1);
-        scale = Math.min(scale, 512 / Math.max(svgWidth, svgHeight));
-    }
-
-    var canvasWidth = Math.round(svgWidth * scale);
-    var canvasHeight = Math.round(svgHeight * scale);
-
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d');
-    canvas.width = canvasWidth;
-    canvas.height = canvasHeight;
-
-    var img = new Image();
-    var svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
-    var url = URL.createObjectURL(svgBlob);
-
-    await new Promise(function(resolve, reject) {
-        img.onload = resolve;
-        img.onerror = reject;
-        img.src = url;
-    });
-
-    ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
-    URL.revokeObjectURL(url);
-
-    return canvas;
-}
-
-async function copyTextAsImage() {
-    var svg = generateTextSVG();
-
-    try {
-        var canvas = await svgToCanvas(svg);
-
-        canvas.toBlob(async function(blob) {
-            try {
-                await navigator.clipboard.write([
-                    new ClipboardItem({ 'image/png': blob })
-                ]);
-                showNotification('In Zwischenablage kopiert!');
-            } catch (err) {
-                var link = document.createElement('a');
-                link.href = URL.createObjectURL(blob);
-                link.download = 'text-symbol.png';
-                link.click();
-                showNotification('PNG heruntergeladen');
-            }
-        }, 'image/png');
-    } catch (err) {
-        console.error('Fehler:', err);
-        showNotification('Fehler beim Kopieren', 'error');
-    }
-}
-
-function downloadTextSVG() {
-    var svg = generateTextSVG();
-    var blob = new Blob([svg], { type: 'image/svg+xml' });
-    var url = URL.createObjectURL(blob);
-    var link = document.createElement('a');
-    link.href = url;
-    var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol';
-    link.download = 'text-' + filename + '.svg';
-    link.click();
-    URL.revokeObjectURL(url);
-    showNotification('SVG heruntergeladen!');
-}
-
-async function downloadTextPNG() {
-    var svg = generateTextSVG();
-    try {
-        var canvas = await svgToCanvas(svg, 2); // 2x Skalierung fuer bessere Qualitaet
-
-        canvas.toBlob(function(blob) {
-            var link = document.createElement('a');
-            link.href = URL.createObjectURL(blob);
-            var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol';
-            link.download = 'text-' + filename + '.png';
-            link.click();
-            URL.revokeObjectURL(link.href);
-            showNotification('PNG heruntergeladen!');
-        }, 'image/png');
-    } catch (err) {
-        console.error('Fehler:', err);
-        showNotification('Fehler beim PNG-Export', 'error');
-    }
-}
-
-async function downloadTextJPG() {
-    var svg = generateTextSVG();
-    try {
-        var canvas = await svgToCanvas(svg, 2);
-        var ctx = canvas.getContext('2d');
-
-        // Weisser Hintergrund fuer JPG
-        var tempCanvas = document.createElement('canvas');
-        tempCanvas.width = canvas.width;
-        tempCanvas.height = canvas.height;
-        var tempCtx = tempCanvas.getContext('2d');
-        tempCtx.fillStyle = '#FFFFFF';
-        tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
-        tempCtx.drawImage(canvas, 0, 0);
-
-        tempCanvas.toBlob(function(blob) {
-            var link = document.createElement('a');
-            link.href = URL.createObjectURL(blob);
-            var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol';
-            link.download = 'text-' + filename + '.jpg';
-            link.click();
-            URL.revokeObjectURL(link.href);
-            showNotification('JPG heruntergeladen!');
-        }, 'image/jpeg', 0.95);
-    } catch (err) {
-        console.error('Fehler:', err);
-        showNotification('Fehler beim JPG-Export', 'error');
-    }
-}
-
-function downloadTextDXF() {
-    var svg = generateTextSVG();
-    var dxf = svgToDxf(svg, 1);
-    var blob = new Blob([dxf], { type: 'application/dxf' });
-    var url = URL.createObjectURL(blob);
-    var link = document.createElement('a');
-    link.href = url;
-    var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol';
-    link.download = 'text-' + filename + '.dxf';
-    link.click();
-    URL.revokeObjectURL(url);
-    showNotification('DXF heruntergeladen!');
-}
-
-function addTextToLegend() {
-    var svg = generateTextSVG();
-    var text = textGenState.text || 'Text';
-    var displayName = text.replace(/\n/g, ' ').substring(0, 30);
-
-    legendItems.push({
-        id: 'custom_text_' + Date.now(),
-        name: displayName,
-        svg: svg,
-        description: ''
-    });
-
-    updateLegendCount();
-    saveLegendToStorage();
-    showNotification('Zur Legende hinzugefuegt!');
-}
+// Custom Symbols aus localStorage
+var customSymbols = [];
 
 // ========== CUSTOM SYMBOLS STORAGE ==========
 
diff --git a/symbols/js/symbols.js.backup3 b/symbols/js/symbols.js.backup3
deleted file mode 100644
index 88cf58b..0000000
--- a/symbols/js/symbols.js.backup3
+++ /dev/null
@@ -1,859 +0,0 @@
-// ============================================
-// SYMBOL-DEFINITIONEN
-// Gutachter Symbolbibliothek v2.0
-// ============================================
-
-const SYMBOLS = {
-    // ========== SCHADENSARTEN ==========
-    schaeden: {
-        name: "Schadensarten",
-        icon: "🔥",
-        items: [
-            {
-                id: "wasserschaden",
-                name: "Wasserschaden",
-                filename: "wasserschaden_symbol.svg",
-                tags: ["wasser", "feuchtigkeit", "nass"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 4 C32 4 12 28 12 42 C12 53 21 60 32 60 C43 60 52 53 52 42 C52 28 32 4 32 4 Z" fill="#3b82f6" stroke="#2563eb" stroke-width="2"/><ellipse cx="24" cy="38" rx="6" ry="10" fill="#93c5fd" opacity="0.5"/><circle cx="22" cy="32" r="3" fill="#dbeafe" opacity="0.7"/></svg>`
-            },
-            {
-                id: "brandschaden",
-                name: "Brandschaden",
-                filename: "brandschaden_symbol.svg",
-                tags: ["feuer", "brand", "flamme"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 2 C32 2 18 18 18 34 C18 42 22 50 28 54 C24 48 24 40 28 34 C28 42 32 48 38 50 C34 44 36 36 40 32 C40 40 44 46 48 48 C50 44 52 38 52 34 C52 18 32 2 32 2 Z" fill="#f97316" stroke="#ea580c" stroke-width="1"/><path d="M32 14 C32 14 22 26 22 38 C22 44 26 50 32 52 C28 48 28 42 32 38 C32 44 36 48 40 48 C44 44 46 40 46 36 C46 26 32 14 32 14 Z" fill="#fb923c"/><path d="M32 26 C32 26 26 34 26 42 C26 46 28 50 32 52 C30 48 30 44 32 42 C34 46 36 48 38 48 C40 46 42 44 42 42 C42 34 32 26 32 26 Z" fill="#fbbf24"/><ellipse cx="32" cy="48" rx="4" ry="6" fill="#fef08a"/></svg>`
-            },
-            {
-                id: "rauchschaden",
-                name: "Rauchschaden",
-                filename: "rauchschaden_symbol.svg",
-                tags: ["rauch", "russ", "qualm"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="54" rx="14" ry="6" fill="#4b5563" opacity="0.9"/><ellipse cx="24" cy="42" rx="10" ry="8" fill="#6b7280" opacity="0.8"/><ellipse cx="40" cy="40" rx="12" ry="9" fill="#6b7280" opacity="0.75"/><ellipse cx="32" cy="28" rx="14" ry="10" fill="#9ca3af" opacity="0.7"/><ellipse cx="20" cy="24" rx="8" ry="7" fill="#9ca3af" opacity="0.6"/><ellipse cx="44" cy="26" rx="9" ry="7" fill="#9ca3af" opacity="0.6"/><ellipse cx="32" cy="14" rx="10" ry="7" fill="#d1d5db" opacity="0.5"/></svg>`
-            },
-            {
-                id: "leitungswasser",
-                name: "Leitungswasser / Rohrbruch",
-                filename: "leitungswasserschaden_symbol.svg",
-                tags: ["rohr", "leitung", "bruch", "wasser"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="2" y="24" width="22" height="16" rx="2" fill="#71717a" stroke="#52525b" stroke-width="2"/><rect x="20" y="22" width="6" height="20" rx="1" fill="#a1a1aa" stroke="#71717a" stroke-width="1"/><rect x="40" y="24" width="22" height="16" rx="2" fill="#71717a" stroke="#52525b" stroke-width="2"/><rect x="38" y="22" width="6" height="20" rx="1" fill="#a1a1aa" stroke="#71717a" stroke-width="1"/><path d="M26 22 L28 28 L26 32 L28 36 L26 42" stroke="#dc2626" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M38 22 L36 28 L38 32 L36 36 L38 42" stroke="#dc2626" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M30 28 Q34 20 38 10" stroke="#3b82f6" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M31 32 Q36 32 42 28" stroke="#3b82f6" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M30 36 Q34 44 38 54" stroke="#3b82f6" stroke-width="3" fill="none" stroke-linecap="round"/><circle cx="40" cy="8" r="3" fill="#60a5fa"/><circle cx="36" cy="56" r="3" fill="#60a5fa"/></svg>`
-            },
-            {
-                id: "schimmel",
-                name: "Schimmelschaden",
-                filename: "schimmelschaden_symbol.svg",
-                tags: ["schimmel", "pilz", "feucht", "sporen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="34" rx="24" ry="20" fill="#1f2937" opacity="0.3"/><ellipse cx="24" cy="28" rx="10" ry="8" fill="#166534"/><ellipse cx="38" cy="32" rx="12" ry="10" fill="#15803d"/><ellipse cx="28" cy="40" rx="9" ry="7" fill="#166534"/><ellipse cx="42" cy="24" rx="7" ry="6" fill="#14532d"/><ellipse cx="18" cy="38" rx="6" ry="5" fill="#15803d"/><circle cx="20" cy="26" r="2" fill="#052e16"/><circle cx="30" cy="30" r="2.5" fill="#052e16"/><circle cx="40" cy="28" r="2" fill="#052e16"/><circle cx="35" cy="38" r="2" fill="#052e16"/><circle cx="52" cy="12" r="10" fill="#dc2626"/><text x="52" y="17" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle">!</text></svg>`
-            },
-            {
-                id: "sturm",
-                name: "Sturmschaden",
-                filename: "sturmschaden_symbol.svg",
-                tags: ["sturm", "wind", "dach", "unwetter"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="32" width="28" height="24" fill="#78716c" stroke="#57534e" stroke-width="2"/><polygon points="10,32 28,14 50,32" fill="#991b1b" stroke="#7f1d1d" stroke-width="2"/><polygon points="38,18 46,26 50,22 42,14" fill="#78716c" stroke="#57534e" stroke-width="1"/><rect x="18" y="38" width="8" height="8" fill="#bfdbfe" stroke="#57534e" stroke-width="1"/><rect x="30" y="38" width="8" height="8" fill="#bfdbfe" stroke="#57534e" stroke-width="1"/><rect x="24" y="46" width="8" height="10" fill="#44403c"/><path d="M48 10 Q56 10 54 6" stroke="#6b7280" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M50 18 Q60 18 58 14" stroke="#6b7280" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M52 26 Q62 26 60 22" stroke="#6b7280" stroke-width="2" fill="none" stroke-linecap="round"/><rect x="54" y="8" width="6" height="3" fill="#991b1b" transform="rotate(25 57 9)"/></svg>`
-            },
-            {
-                id: "einbruch",
-                name: "Einbruchschaden",
-                filename: "einbruchschaden_symbol.svg",
-                tags: ["einbruch", "diebstahl", "fenster", "tür"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="8" width="48" height="48" fill="none" stroke="#57534e" stroke-width="4" rx="2"/><line x1="32" y1="8" x2="32" y2="56" stroke="#57534e" stroke-width="3"/><line x1="8" y1="32" x2="56" y2="32" stroke="#57534e" stroke-width="3"/><polygon points="12,12 20,20 12,28 18,20" fill="#bfdbfe" stroke="#93c5fd" stroke-width="1"/><polygon points="20,14 28,12 24,24 16,20" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/><polygon points="10,36 18,42 12,52 8,44" fill="#bfdbfe" stroke="#93c5fd" stroke-width="1"/><rect x="36" y="16" width="4" height="32" rx="1" fill="#1f2937" transform="rotate(20 38 32)"/><rect x="34" y="14" width="8" height="6" rx="1" fill="#1f2937" transform="rotate(20 38 17)"/><circle cx="52" cy="52" r="8" fill="#dc2626"/><line x1="48" y1="48" x2="56" y2="56" stroke="white" stroke-width="2" stroke-linecap="round"/><line x1="56" y1="48" x2="48" y2="56" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>`
-            },
-            {
-                id: "elektro",
-                name: "Elektroschaden",
-                filename: "elektroschaden_symbol.svg",
-                tags: ["elektro", "strom", "blitz", "kurzschluss"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="36,2 20,28 30,28 24,46 44,18 34,18" fill="#fbbf24" stroke="#f59e0b" stroke-width="2" stroke-linejoin="round"/><rect x="12" y="38" width="24" height="22" rx="3" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/><circle cx="20" cy="46" r="3" fill="#1f2937"/><circle cx="28" cy="46" r="3" fill="#1f2937"/><rect x="22" y="52" width="4" height="4" rx="1" fill="#1f2937"/><line x1="40" y1="42" x2="48" y2="38" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><line x1="42" y1="48" x2="52" y2="46" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><line x1="40" y1="54" x2="50" y2="56" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><polygon points="50,36 46,42 48,42 46,48 52,40 50,40" fill="#fbbf24"/></svg>`
-            },
-            {
-                id: "hagel",
-                name: "Hagelschaden",
-                filename: "hagelschaden_symbol.svg",
-                tags: ["hagel", "eis", "dellen", "unwetter"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="20" rx="24" ry="14" fill="#6b7280"/><ellipse cx="32" cy="18" rx="22" ry="12" fill="#9ca3af"/><circle cx="14" cy="36" r="6" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="32" cy="40" r="7" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="50" cy="34" r="5" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="22" cy="52" r="6" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="44" cy="50" r="5" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><line x1="14" y1="26" x2="14" y2="30" stroke="#7dd3fc" stroke-width="2"/><line x1="32" y1="24" x2="32" y2="32" stroke="#7dd3fc" stroke-width="2"/><line x1="50" y1="26" x2="50" y2="28" stroke="#7dd3fc" stroke-width="2"/><line x1="22" y1="28" x2="22" y2="46" stroke="#7dd3fc" stroke-width="1.5"/><line x1="44" y1="28" x2="44" y2="44" stroke="#7dd3fc" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "vandalismus",
-                name: "Vandalismus",
-                filename: "vandalismus_symbol.svg",
-                tags: ["vandalismus", "graffiti", "zerstörung", "sachbeschädigung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="20" width="56" height="40" fill="#d6d3d1" stroke="#78716c" stroke-width="2"/><path d="M10 30 Q20 25 30 35 Q40 45 50 30" stroke="#dc2626" stroke-width="4" fill="none" stroke-linecap="round"/><path d="M15 45 Q25 55 35 40 Q45 25 55 45" stroke="#2563eb" stroke-width="3" fill="none" stroke-linecap="round"/><text x="32" y="54" font-family="Arial" font-size="10" fill="#000" text-anchor="middle" font-style="italic">TAG</text><circle cx="52" cy="12" r="10" fill="#dc2626"/><line x1="48" y1="8" x2="56" y2="16" stroke="white" stroke-width="2.5" stroke-linecap="round"/><line x1="56" y1="8" x2="48" y2="16" stroke="white" stroke-width="2.5" stroke-linecap="round"/></svg>`
-            }
-        ]
-    },
-
-    // ========== WERKZEUGE & MARKIERUNGEN ==========
-    werkzeuge: {
-        name: "Werkzeuge & Markierungen",
-        icon: "🔧",
-        items: [
-            {
-                id: "massstab",
-                name: "Maßstab 1m",
-                filename: "massstab_1m.svg",
-                tags: ["maßstab", "meter", "lineal", "messen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="16" fill="#fef3c7" stroke="#f59e0b" stroke-width="2"/><g stroke="#92400e" stroke-width="1"><line x1="4" y1="28" x2="4" y2="36"/><line x1="10" y1="30" x2="10" y2="34"/><line x1="16" y1="30" x2="16" y2="34"/><line x1="22" y1="30" x2="22" y2="34"/><line x1="28" y1="30" x2="28" y2="34"/><line x1="32" y1="28" x2="32" y2="36"/><line x1="38" y1="30" x2="38" y2="34"/><line x1="44" y1="30" x2="44" y2="34"/><line x1="50" y1="30" x2="50" y2="34"/><line x1="56" y1="30" x2="56" y2="34"/><line x1="60" y1="28" x2="60" y2="36"/></g><text x="8" y="22" font-family="Arial" font-size="8" fill="#92400e">0</text><text x="28" y="22" font-family="Arial" font-size="8" fill="#92400e">50</text><text x="54" y="22" font-family="Arial" font-size="8" fill="#92400e">100</text><text x="32" y="48" font-family="Arial" font-size="10" fill="#92400e" text-anchor="middle">1 Meter</text></svg>`
-            },
-            {
-                id: "messpunkt",
-                name: "Messpunkt",
-                filename: "messpunkt.svg",
-                tags: ["messpunkt", "markierung", "punkt", "messen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#dc2626" stroke-width="3"/><circle cx="32" cy="32" r="16" fill="none" stroke="#dc2626" stroke-width="2"/><circle cx="32" cy="32" r="6" fill="#dc2626"/><line x1="32" y1="2" x2="32" y2="14" stroke="#dc2626" stroke-width="2"/><line x1="32" y1="50" x2="32" y2="62" stroke="#dc2626" stroke-width="2"/><line x1="2" y1="32" x2="14" y2="32" stroke="#dc2626" stroke-width="2"/><line x1="50" y1="32" x2="62" y2="32" stroke="#dc2626" stroke-width="2"/></svg>`
-            },
-            {
-                id: "kamera",
-                name: "Fotostandpunkt",
-                filename: "fotostandpunkt.svg",
-                tags: ["foto", "kamera", "standpunkt", "aufnahme"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="20" width="48" height="32" rx="4" fill="#374151" stroke="#1f2937" stroke-width="2"/><circle cx="32" cy="36" r="12" fill="#1f2937" stroke="#6b7280" stroke-width="2"/><circle cx="32" cy="36" r="8" fill="#3b82f6"/><circle cx="32" cy="36" r="4" fill="#1e3a5f"/><rect x="20" y="14" width="24" height="8" rx="2" fill="#4b5563"/><circle cx="48" cy="26" r="3" fill="#fbbf24"/><rect x="10" y="26" width="6" height="4" rx="1" fill="#6b7280"/></svg>`
-            },
-            {
-                id: "lupe",
-                name: "Detailbereich",
-                filename: "detailbereich.svg",
-                tags: ["detail", "lupe", "vergrößerung", "zoom"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="26" cy="26" r="20" fill="#dbeafe" stroke="#3b82f6" stroke-width="3"/><circle cx="26" cy="26" r="14" fill="white" stroke="#93c5fd" stroke-width="2"/><line x1="40" y1="40" x2="58" y2="58" stroke="#3b82f6" stroke-width="6" stroke-linecap="round"/><line x1="40" y1="40" x2="56" y2="56" stroke="#60a5fa" stroke-width="3" stroke-linecap="round"/><text x="26" y="30" font-family="Arial" font-size="14" fill="#3b82f6" text-anchor="middle" font-weight="bold">+</text></svg>`
-            },
-            {
-                id: "notiz",
-                name: "Notiz / Hinweis",
-                filename: "notiz_hinweis.svg",
-                tags: ["notiz", "hinweis", "anmerkung", "text"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M8 4 L56 4 L56 48 L40 48 L40 60 L8 60 Z" fill="#fef3c7" stroke="#f59e0b" stroke-width="2"/><path d="M40 48 L56 48 L40 60 Z" fill="#fcd34d" stroke="#f59e0b" stroke-width="2"/><line x1="14" y1="16" x2="50" y2="16" stroke="#d97706" stroke-width="2"/><line x1="14" y1="26" x2="50" y2="26" stroke="#d97706" stroke-width="2"/><line x1="14" y1="36" x2="50" y2="36" stroke="#d97706" stroke-width="2"/><line x1="14" y1="46" x2="34" y2="46" stroke="#d97706" stroke-width="2"/></svg>`
-            },
-            {
-                id: "warnung",
-                name: "Warnung / Achtung",
-                filename: "warnung_achtung.svg",
-                tags: ["warnung", "achtung", "gefahr", "vorsicht"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 60,56 4,56" fill="#fbbf24" stroke="#f59e0b" stroke-width="2" stroke-linejoin="round"/><polygon points="32,10 54,52 10,52" fill="#fef3c7"/><text x="32" y="46" font-family="Arial" font-size="32" fill="#92400e" text-anchor="middle" font-weight="bold">!</text></svg>`
-            },
-            {
-                id: "info",
-                name: "Information",
-                filename: "information.svg",
-                tags: ["info", "information", "hinweis", "details"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#3b82f6" stroke="#2563eb" stroke-width="2"/><circle cx="32" cy="16" r="4" fill="white"/><rect x="28" y="26" width="8" height="24" rx="2" fill="white"/></svg>`
-            },
-            {
-                id: "haken",
-                name: "Erledigt / OK",
-                filename: "erledigt_ok.svg",
-                tags: ["ok", "erledigt", "fertig", "haken", "check"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#22c55e" stroke="#16a34a" stroke-width="2"/><polyline points="18,32 28,42 46,22" fill="none" stroke="white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></svg>`
-            },
-            {
-                id: "kreuz",
-                name: "Fehler / Mangel",
-                filename: "fehler_mangel.svg",
-                tags: ["fehler", "mangel", "falsch", "kreuz"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#dc2626" stroke="#b91c1c" stroke-width="2"/><line x1="20" y1="20" x2="44" y2="44" stroke="white" stroke-width="6" stroke-linecap="round"/><line x1="44" y1="20" x2="20" y2="44" stroke="white" stroke-width="6" stroke-linecap="round"/></svg>`
-            },
-            {
-                id: "fragezeichen",
-                name: "Unklar / Prüfen",
-                filename: "unklar_pruefen.svg",
-                tags: ["unklar", "prüfen", "frage", "unbekannt"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#f59e0b" stroke="#d97706" stroke-width="2"/><text x="32" y="44" font-family="Arial" font-size="36" fill="white" text-anchor="middle" font-weight="bold">?</text></svg>`
-            }
-        ]
-    },
-
-    // ========== BAUTEILE ==========
-    bauteile: {
-        name: "Bauteile",
-        icon: "🏗️",
-        items: [
-            {
-                id: "fenster",
-                name: "Fenster",
-                filename: "bauteil_fenster.svg",
-                tags: ["fenster", "verglasung", "rahmen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" fill="#bfdbfe" stroke="#3b82f6" stroke-width="3"/><line x1="32" y1="4" x2="32" y2="60" stroke="#3b82f6" stroke-width="3"/><line x1="8" y1="32" x2="56" y2="32" stroke="#3b82f6" stroke-width="3"/><rect x="12" y="8" width="16" height="20" fill="#dbeafe"/><rect x="36" y="8" width="16" height="20" fill="#dbeafe"/><rect x="12" y="36" width="16" height="20" fill="#dbeafe"/><rect x="36" y="36" width="16" height="20" fill="#dbeafe"/><circle cx="28" cy="32" r="2" fill="#1e40af"/><circle cx="36" cy="32" r="2" fill="#1e40af"/></svg>`
-            },
-            {
-                id: "tuer",
-                name: "Tür",
-                filename: "bauteil_tuer.svg",
-                tags: ["tür", "türblatt", "eingang"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="12" y="4" width="40" height="56" fill="#92400e" stroke="#78350f" stroke-width="3"/><rect x="16" y="8" width="14" height="20" fill="#a16207" rx="1"/><rect x="34" y="8" width="14" height="20" fill="#a16207" rx="1"/><rect x="16" y="32" width="14" height="20" fill="#a16207" rx="1"/><rect x="34" y="32" width="14" height="20" fill="#a16207" rx="1"/><circle cx="44" cy="34" r="3" fill="#fbbf24" stroke="#92400e" stroke-width="1"/></svg>`
-            },
-            {
-                id: "wand",
-                name: "Wand (Mauerwerk)",
-                filename: "bauteil_wand.svg",
-                tags: ["wand", "mauer", "mauerwerk", "ziegel"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#fca5a5" stroke="#dc2626" stroke-width="2"/><g stroke="#b91c1c" stroke-width="1"><line x1="4" y1="12" x2="60" y2="12"/><line x1="4" y1="20" x2="60" y2="20"/><line x1="4" y1="28" x2="60" y2="28"/><line x1="4" y1="36" x2="60" y2="36"/><line x1="4" y1="44" x2="60" y2="44"/><line x1="4" y1="52" x2="60" y2="52"/><line x1="18" y1="4" x2="18" y2="12"/><line x1="40" y1="4" x2="40" y2="12"/><line x1="8" y1="12" x2="8" y2="20"/><line x1="30" y1="12" x2="30" y2="20"/><line x1="52" y1="12" x2="52" y2="20"/><line x1="18" y1="20" x2="18" y2="28"/><line x1="40" y1="20" x2="40" y2="28"/><line x1="8" y1="28" x2="8" y2="36"/><line x1="30" y1="28" x2="30" y2="36"/><line x1="52" y1="28" x2="52" y2="36"/><line x1="18" y1="36" x2="18" y2="44"/><line x1="40" y1="36" x2="40" y2="44"/><line x1="8" y1="44" x2="8" y2="52"/><line x1="30" y1="44" x2="30" y2="52"/><line x1="52" y1="44" x2="52" y2="52"/><line x1="18" y1="52" x2="18" y2="60"/><line x1="40" y1="52" x2="40" y2="60"/></g></svg>`
-            },
-            {
-                id: "wand_beton",
-                name: "Wand (Beton)",
-                filename: "bauteil_wand_beton.svg",
-                tags: ["wand", "beton", "stahlbeton", "massiv"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#9ca3af" stroke="#6b7280" stroke-width="2"/><circle cx="12" cy="14" r="2" fill="#6b7280" opacity="0.5"/><circle cx="28" cy="8" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="48" cy="18" r="2.5" fill="#6b7280" opacity="0.5"/><circle cx="8" cy="36" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="38" cy="28" r="2" fill="#6b7280" opacity="0.5"/><circle cx="54" cy="42" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="18" cy="48" r="2" fill="#6b7280" opacity="0.5"/><circle cx="44" cy="52" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="32" cy="44" r="2.5" fill="#6b7280" opacity="0.5"/></svg>`
-            },
-            {
-                id: "boden_fliesen",
-                name: "Fliesen",
-                filename: "bauteil_fliesen.svg",
-                tags: ["fliesen", "boden", "wand", "keramik", "kacheln"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#e7e5e4" stroke="#78716c" stroke-width="2"/><g stroke="#a8a29e" stroke-width="2"><line x1="4" y1="18" x2="60" y2="18"/><line x1="4" y1="32" x2="60" y2="32"/><line x1="4" y1="46" x2="60" y2="46"/><line x1="18" y1="4" x2="18" y2="60"/><line x1="32" y1="4" x2="32" y2="60"/><line x1="46" y1="4" x2="46" y2="60"/></g><rect x="6" y="6" width="10" height="10" fill="#f5f5f4"/><rect x="34" y="20" width="10" height="10" fill="#f5f5f4"/><rect x="20" y="34" width="10" height="10" fill="#f5f5f4"/><rect x="48" y="48" width="10" height="10" fill="#f5f5f4"/></svg>`
-            },
-            {
-                id: "boden_parkett",
-                name: "Parkett / Holzboden",
-                filename: "bauteil_parkett.svg",
-                tags: ["parkett", "holz", "boden", "laminat", "dielen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#d4a574" stroke="#92400e" stroke-width="2"/><g stroke="#b8860b" stroke-width="1"><rect x="4" y="4" width="14" height="28" fill="#deb887"/><rect x="18" y="4" width="14" height="28" fill="#d4a574"/><rect x="32" y="4" width="14" height="28" fill="#c9a066"/><rect x="46" y="4" width="14" height="28" fill="#deb887"/><rect x="4" y="32" width="14" height="28" fill="#c9a066"/><rect x="18" y="32" width="14" height="28" fill="#deb887"/><rect x="32" y="32" width="14" height="28" fill="#d4a574"/><rect x="46" y="32" width="14" height="28" fill="#c9a066"/></g></svg>`
-            },
-            {
-                id: "dach",
-                name: "Dach",
-                filename: "bauteil_dach.svg",
-                tags: ["dach", "dachstuhl", "ziegel", "bedachung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 4,40 60,40" fill="#991b1b" stroke="#7f1d1d" stroke-width="2"/><polygon points="32,10 10,38 54,38" fill="#b91c1c"/><g stroke="#7f1d1d" stroke-width="1"><line x1="12" y1="36" x2="52" y2="36"/><line x1="16" y1="32" x2="48" y2="32"/><line x1="20" y1="28" x2="44" y2="28"/><line x1="24" y1="24" x2="40" y2="24"/><line x1="28" y1="20" x2="36" y2="20"/></g><rect x="4" y="40" width="56" height="8" fill="#78716c" stroke="#57534e" stroke-width="1"/></svg>`
-            },
-            {
-                id: "treppe",
-                name: "Treppe",
-                filename: "bauteil_treppe.svg",
-                tags: ["treppe", "stufen", "aufgang", "treppenhaus"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="#d6d3d1" stroke="#78716c" stroke-width="2"><rect x="4" y="52" width="56" height="8"/><rect x="4" y="44" width="48" height="8"/><rect x="4" y="36" width="40" height="8"/><rect x="4" y="28" width="32" height="8"/><rect x="4" y="20" width="24" height="8"/><rect x="4" y="12" width="16" height="8"/><rect x="4" y="4" width="8" height="8"/></g><path d="M8 8 L8 56 L58 56" stroke="#57534e" stroke-width="3" fill="none"/></svg>`
-            },
-            {
-                id: "daemmung",
-                name: "Dämmung / Isolierung",
-                filename: "bauteil_daemmung.svg",
-                tags: ["dämmung", "isolierung", "wärme", "kälte"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#fef08a" stroke="#eab308" stroke-width="2"/><g stroke="#ca8a04" stroke-width="1"><path d="M4 14 Q16 10 28 14 Q40 18 52 14 L60 14"/><path d="M4 24 Q14 28 26 24 Q38 20 50 24 L60 24"/><path d="M4 34 Q16 30 28 34 Q40 38 52 34 L60 34"/><path d="M4 44 Q14 48 26 44 Q38 40 50 44 L60 44"/><path d="M4 54 Q16 50 28 54 Q40 58 52 54 L60 54"/></g><circle cx="12" cy="20" r="2" fill="#facc15"/><circle cx="32" cy="30" r="2" fill="#facc15"/><circle cx="50" cy="40" r="2" fill="#facc15"/><circle cx="20" cy="50" r="2" fill="#facc15"/></svg>`
-            },
-            {
-                id: "rohr",
-                name: "Rohrleitung",
-                filename: "bauteil_rohr.svg",
-                tags: ["rohr", "leitung", "rohrleitung", "installation"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="26" width="56" height="12" fill="#6b7280" stroke="#4b5563" stroke-width="2"/><ellipse cx="4" cy="32" rx="3" ry="8" fill="#9ca3af" stroke="#4b5563" stroke-width="1"/><ellipse cx="60" cy="32" rx="3" ry="8" fill="#9ca3af" stroke="#4b5563" stroke-width="1"/><line x1="14" y1="26" x2="14" y2="38" stroke="#4b5563" stroke-width="1"/><line x1="32" y1="26" x2="32" y2="38" stroke="#4b5563" stroke-width="1"/><line x1="50" y1="26" x2="50" y2="38" stroke="#4b5563" stroke-width="1"/><rect x="20" y="22" width="8" height="20" rx="1" fill="#ef4444" stroke="#dc2626" stroke-width="1"/><polygon points="24,18 20,22 28,22" fill="#ef4444"/></svg>`
-            }
-        ]
-    },
-
-    // ========== MÖBEL ==========
-    moebel: {
-        name: "Möbel",
-        icon: "🛋️",
-        items: [
-            {
-                id: "sofa",
-                name: "Sofa / Couch",
-                filename: "moebel_sofa.svg",
-                tags: ["sofa", "couch", "sitzmoebel", "wohnzimmer"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="28" rx="4" fill="#78716c" stroke="#57534e" stroke-width="2"/><rect x="8" y="20" width="48" height="20" rx="3" fill="#a8a29e" stroke="#78716c" stroke-width="1"/><rect x="4" y="28" width="10" height="20" rx="2" fill="#78716c" stroke="#57534e" stroke-width="1"/><rect x="50" y="28" width="10" height="20" rx="2" fill="#78716c" stroke="#57534e" stroke-width="1"/><rect x="6" y="52" width="6" height="6" rx="1" fill="#57534e"/><rect x="52" y="52" width="6" height="6" rx="1" fill="#57534e"/><line x1="22" y1="24" x2="22" y2="40" stroke="#57534e" stroke-width="1" opacity="0.5"/><line x1="42" y1="24" x2="42" y2="40" stroke="#57534e" stroke-width="1" opacity="0.5"/></svg>`
-            },
-            {
-                id: "tisch",
-                name: "Tisch",
-                filename: "moebel_tisch.svg",
-                tags: ["tisch", "esstisch", "schreibtisch", "möbel"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="20" width="52" height="6" rx="1" fill="#92400e" stroke="#78350f" stroke-width="2"/><rect x="10" y="26" width="4" height="30" fill="#a16207"/><rect x="50" y="26" width="4" height="30" fill="#a16207"/><rect x="8" y="54" width="8" height="4" rx="1" fill="#78350f"/><rect x="48" y="54" width="8" height="4" rx="1" fill="#78350f"/><line x1="14" y1="40" x2="50" y2="40" stroke="#a16207" stroke-width="2"/></svg>`
-            },
-            {
-                id: "stuhl",
-                name: "Stuhl",
-                filename: "moebel_stuhl.svg",
-                tags: ["stuhl", "sitz", "möbel", "esszimmer"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="4" width="36" height="32" rx="2" fill="#a16207" stroke="#92400e" stroke-width="2"/><rect x="18" y="8" width="28" height="24" rx="1" fill="#ca8a04"/><rect x="14" y="36" width="36" height="6" rx="1" fill="#92400e" stroke="#78350f" stroke-width="1"/><rect x="16" y="42" width="4" height="18" fill="#78350f"/><rect x="44" y="42" width="4" height="18" fill="#78350f"/><rect x="14" y="58" width="8" height="3" rx="1" fill="#57534e"/><rect x="42" y="58" width="8" height="3" rx="1" fill="#57534e"/></svg>`
-            },
-            {
-                id: "schrank",
-                name: "Schrank",
-                filename: "moebel_schrank.svg",
-                tags: ["schrank", "kleiderschrank", "möbel", "stauraum"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="54" rx="2" fill="#a16207" stroke="#92400e" stroke-width="2"/><line x1="32" y1="4" x2="32" y2="58" stroke="#92400e" stroke-width="2"/><rect x="10" y="8" width="18" height="46" fill="#ca8a04" rx="1"/><rect x="36" y="8" width="18" height="46" fill="#ca8a04" rx="1"/><circle cx="26" cy="32" r="2" fill="#78350f"/><circle cx="38" cy="32" r="2" fill="#78350f"/><rect x="8" y="58" width="6" height="4" fill="#78350f"/><rect x="50" y="58" width="6" height="4" fill="#78350f"/></svg>`
-            },
-            {
-                id: "bett",
-                name: "Bett",
-                filename: "moebel_bett.svg",
-                tags: ["bett", "schlafzimmer", "möbel", "schlafen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="20" width="56" height="32" rx="2" fill="#78716c" stroke="#57534e" stroke-width="2"/><rect x="8" y="16" width="14" height="12" rx="2" fill="#a8a29e" stroke="#78716c" stroke-width="1"/><rect x="42" y="16" width="14" height="12" rx="2" fill="#a8a29e" stroke="#78716c" stroke-width="1"/><rect x="8" y="24" width="48" height="24" fill="#e7e5e4" stroke="#d6d3d1" stroke-width="1"/><rect x="4" y="52" width="8" height="8" rx="1" fill="#57534e"/><rect x="52" y="52" width="8" height="8" rx="1" fill="#57534e"/><path d="M12 28 Q32 20 52 28" stroke="#d6d3d1" stroke-width="1" fill="none"/></svg>`
-            },
-            {
-                id: "regal",
-                name: "Regal",
-                filename: "moebel_regal.svg",
-                tags: ["regal", "bücherregal", "möbel", "stauraum"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" fill="none" stroke="#92400e" stroke-width="3"/><line x1="8" y1="18" x2="56" y2="18" stroke="#92400e" stroke-width="2"/><line x1="8" y1="32" x2="56" y2="32" stroke="#92400e" stroke-width="2"/><line x1="8" y1="46" x2="56" y2="46" stroke="#92400e" stroke-width="2"/><rect x="12" y="8" width="6" height="8" fill="#3b82f6" rx="1"/><rect x="20" y="6" width="5" height="10" fill="#22c55e" rx="1"/><rect x="28" y="8" width="8" height="8" fill="#f59e0b" rx="1"/><rect x="14" y="22" width="10" height="8" fill="#a8a29e" rx="1"/><rect x="30" y="20" width="6" height="10" fill="#ef4444" rx="1"/><rect x="44" y="22" width="8" height="8" fill="#8b5cf6" rx="1"/><rect x="12" y="36" width="12" height="8" fill="#06b6d4" rx="1"/><rect x="40" y="34" width="10" height="10" fill="#ec4899" rx="1"/></svg>`
-            }
-        ]
-    },
-
-    // ========== KÜCHE ==========
-    kueche: {
-
-    // ========== BAD / SANITÄR ==========
-    bad: {
-        name: "Bad & Sanitär",
-        icon: "🚿",
-        items: [
-            {
-                id: "wc",
-                name: "WC / Toilette",
-                filename: "wc_draufsicht.svg",
-                tags: ["wc", "toilette", "klo", "bad", "sanitär"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="38" rx="14" ry="18" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="32" cy="38" rx="8" ry="12" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><rect x="22" y="8" width="20" height="16" rx="3" fill="#f5f5f5" stroke="#333" stroke-width="2"/><rect x="26" y="10" width="12" height="6" rx="1" fill="#ddd" stroke="#333" stroke-width="1"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="38" rx="14" ry="18" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="32" cy="38" rx="8" ry="12" fill="none" stroke="#000" stroke-width="1"/><rect x="22" y="8" width="20" height="16" rx="0" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "waschbecken",
-                name: "Waschbecken",
-                filename: "waschbecken_draufsicht.svg",
-                tags: ["waschbecken", "waschtisch", "bad", "sanitär", "lavabo"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="16" width="48" height="40" rx="4" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="32" cy="36" rx="16" ry="12" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><circle cx="32" cy="40" r="3" fill="#333"/><rect x="30" y="18" width="4" height="8" rx="1" fill="#999" stroke="#333" stroke-width="1"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="16" width="48" height="40" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="32" cy="36" rx="16" ry="12" fill="none" stroke="#000" stroke-width="1"/><circle cx="32" cy="40" r="3" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "badewanne",
-                name: "Badewanne",
-                filename: "badewanne_draufsicht.svg",
-                tags: ["badewanne", "wanne", "bad", "sanitär", "baden"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" rx="8" fill="#f5f5f5" stroke="#333" stroke-width="2"/><rect x="8" y="12" width="48" height="40" rx="6" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><circle cx="50" cy="18" r="3" fill="#999" stroke="#333" stroke-width="1"/><ellipse cx="50" cy="46" rx="4" ry="3" fill="#999" stroke="#333" stroke-width="1"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" rx="0" fill="none" stroke="#000" stroke-width="1"/><rect x="8" y="12" width="48" height="40" rx="0" fill="none" stroke="#000" stroke-width="1"/><circle cx="50" cy="18" r="3" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="50" cy="46" rx="4" ry="3" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "dusche",
-                name: "Dusche",
-                filename: "dusche_draufsicht.svg",
-                tags: ["dusche", "duschwanne", "bad", "sanitär", "brause"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" rx="2" fill="#f5f5f5" stroke="#333" stroke-width="2"/><rect x="8" y="8" width="48" height="48" rx="1" fill="#e0f2fe" stroke="#333" stroke-width="1"/><circle cx="52" cy="12" r="4" fill="#999" stroke="#333" stroke-width="1"/><line x1="8" y1="8" x2="56" y2="56" stroke="#333" stroke-width="1" stroke-dasharray="4,2"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="none" stroke="#000" stroke-width="1"/><circle cx="52" cy="12" r="4" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="4" x2="60" y2="60" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "bidet",
-                name: "Bidet",
-                filename: "bidet_draufsicht.svg",
-                tags: ["bidet", "bad", "sanitär"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="32" rx="14" ry="20" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="32" cy="32" rx="8" ry="14" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><circle cx="32" cy="18" r="2" fill="#999" stroke="#333" stroke-width="1"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="32" rx="14" ry="20" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="32" cy="32" rx="8" ry="14" fill="none" stroke="#000" stroke-width="1"/><circle cx="32" cy="18" r="2" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "doppelwaschbecken",
-                name: "Doppelwaschbecken",
-                filename: "doppelwaschbecken_draufsicht.svg",
-                tags: ["doppelwaschbecken", "waschtisch", "bad", "sanitär", "doppel"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="2" y="16" width="60" height="32" rx="2" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="18" cy="32" rx="10" ry="8" fill="#e0f2fe" stroke="#333" stroke-width="1"/><ellipse cx="46" cy="32" rx="10" ry="8" fill="#e0f2fe" stroke="#333" stroke-width="1"/><circle cx="18" cy="34" r="2" fill="#333"/><circle cx="46" cy="34" r="2" fill="#333"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="2" y="16" width="60" height="32" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="18" cy="32" rx="10" ry="8" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="46" cy="32" rx="10" ry="8" fill="none" stroke="#000" stroke-width="1"/><circle cx="18" cy="34" r="2" fill="none" stroke="#000" stroke-width="1"/><circle cx="46" cy="34" r="2" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            }
-        ]
-    },
-        name: "Küche",
-        icon: "🍳",
-        items: [
-            {
-                id: "herd",
-                name: "Herd / Kochfeld",
-                filename: "kueche_herd.svg",
-                tags: ["herd", "kochfeld", "küche", "kochen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" rx="3" fill="#1f2937" stroke="#111827" stroke-width="2"/><rect x="8" y="8" width="48" height="48" fill="#374151" rx="2"/><circle cx="22" cy="22" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="42" cy="22" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="22" cy="42" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="42" cy="42" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="22" cy="22" r="4" fill="#dc2626" opacity="0.8"/><circle cx="42" cy="22" r="4" fill="#dc2626" opacity="0.8"/><circle cx="22" cy="42" r="4" fill="#dc2626" opacity="0.4"/><circle cx="42" cy="42" r="4" fill="#dc2626" opacity="0.4"/></svg>`
-            },
-            {
-                id: "spuele",
-                name: "Spüle",
-                filename: "kueche_spuele.svg",
-                tags: ["spüle", "waschbecken", "küche", "abwasch"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" rx="3" fill="#9ca3af" stroke="#6b7280" stroke-width="2"/><rect x="8" y="12" width="24" height="32" rx="4" fill="#4b5563" stroke="#374151" stroke-width="2"/><rect x="36" y="12" width="20" height="32" rx="4" fill="#4b5563" stroke="#374151" stroke-width="2"/><circle cx="20" cy="28" r="3" fill="#1f2937"/><ellipse cx="46" cy="28" rx="6" ry="8" fill="#374151"/><circle cx="50" cy="6" r="4" fill="#6b7280" stroke="#4b5563" stroke-width="1"/><rect x="48" y="6" width="4" height="8" fill="#6b7280"/></svg>`
-            },
-            {
-                id: "kuehlschrank",
-                name: "Kühlschrank",
-                filename: "kueche_kuehlschrank.svg",
-                tags: ["kühlschrank", "kühlen", "küche", "elektrogerät"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="10" y="4" width="44" height="56" rx="3" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/><line x1="10" y1="24" x2="54" y2="24" stroke="#9ca3af" stroke-width="2"/><rect x="46" y="10" width="4" height="8" rx="1" fill="#6b7280"/><rect x="46" y="30" width="4" height="12" rx="1" fill="#6b7280"/><rect x="16" y="8" width="8" height="4" fill="#bfdbfe" rx="1"/><rect x="28" y="8" width="12" height="4" fill="#bfdbfe" rx="1"/><circle cx="20" cy="16" r="3" fill="#fbbf24"/><rect x="16" y="30" width="12" height="8" fill="#bbf7d0" rx="1"/><rect x="16" y="42" width="8" height="10" fill="#fecaca" rx="1"/><rect x="28" y="38" width="14" height="6" fill="#e0f2fe" rx="1"/></svg>`
-            },
-            {
-                id: "backofen",
-                name: "Backofen",
-                filename: "kueche_backofen.svg",
-                tags: ["backofen", "ofen", "küche", "backen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="56" rx="3" fill="#1f2937" stroke="#111827" stroke-width="2"/><rect x="10" y="18" width="44" height="38" rx="2" fill="#111827" stroke="#374151" stroke-width="2"/><rect x="14" y="22" width="36" height="30" fill="#292524" stroke="#4b5563" stroke-width="1"/><line x1="14" y1="32" x2="50" y2="32" stroke="#4b5563" stroke-width="1"/><line x1="14" y1="42" x2="50" y2="42" stroke="#4b5563" stroke-width="1"/><circle cx="16" cy="10" r="3" fill="#4b5563"/><circle cx="28" cy="10" r="3" fill="#4b5563"/><circle cx="40" cy="10" r="3" fill="#4b5563"/><rect x="46" y="8" width="8" height="4" rx="1" fill="#22c55e"/></svg>`
-            },
-            {
-                id: "spuelmaschine",
-                name: "Spülmaschine",
-                filename: "kueche_spuelmaschine.svg",
-                tags: ["spülmaschine", "geschirrspüler", "küche", "elektrogerät"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="56" rx="3" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/><rect x="10" y="16" width="44" height="40" rx="2" fill="#d1d5db" stroke="#9ca3af" stroke-width="1"/><rect x="10" y="8" width="44" height="6" fill="#9ca3af" rx="1"/><circle cx="16" cy="11" r="2" fill="#4b5563"/><rect x="22" y="9" width="12" height="4" rx="1" fill="#1f2937"/><circle cx="48" cy="11" r="2" fill="#22c55e"/><ellipse cx="32" cy="36" rx="16" ry="14" fill="#93c5fd" stroke="#3b82f6" stroke-width="2"/><line x1="32" y1="24" x2="32" y2="48" stroke="#3b82f6" stroke-width="1" stroke-dasharray="2,2"/><line x1="18" y1="36" x2="46" y2="36" stroke="#3b82f6" stroke-width="1" stroke-dasharray="2,2"/></svg>`
-            },
-            {
-                id: "dunstabzug",
-                name: "Dunstabzugshaube",
-                filename: "kueche_dunstabzug.svg",
-                tags: ["dunstabzug", "dunstabzugshaube", "küche", "abzug"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="8,32 56,32 52,56 12,56" fill="#9ca3af" stroke="#6b7280" stroke-width="2"/><rect x="20" y="4" width="24" height="28" fill="#78716c" stroke="#57534e" stroke-width="2"/><rect x="24" y="8" width="16" height="8" fill="#57534e" rx="1"/><rect x="14" y="36" width="36" height="4" fill="#6b7280"/><rect x="14" y="44" width="36" height="4" fill="#6b7280"/><circle cx="32" cy="52" r="2" fill="#4b5563"/><g stroke="#d1d5db" stroke-width="1" opacity="0.5"><path d="M20 20 Q24 16 28 20" fill="none"/><path d="M36 20 Q40 16 44 20" fill="none"/></g></svg>`
-            }
-        ]
-    },
-
-    // ========== PFEILE (dynamisch) ==========
-    pfeile: {
-        name: "Richtungspfeile (Rot)",
-        icon: "➡️",
-        items: []
-    },
-
-    // ========== KOMPASS (dynamisch) ==========
-    kompass: {
-        name: "Nordpfeile / Kompass",
-        icon: "🧭",
-        items: []
-    },
-
-    // ========== VERMESSUNG - STATUS ==========
-    vermessung_status: {
-        name: "Vermessung - Status",
-        icon: "📋",
-        items: [
-            {
-                id: "vm_reparatur",
-                name: "Reparatur",
-                filename: "vermessung_reparatur.svg",
-                tags: ["reparatur", "instandsetzung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">R</text></svg>`
-            },
-            {
-                id: "vm_neu",
-                name: "Neu",
-                filename: "vermessung_neu.svg",
-                tags: ["neu", "neubau", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">N</text></svg>`
-            },
-            {
-                id: "vm_bestand",
-                name: "Bestand",
-                filename: "vermessung_bestand.svg",
-                tags: ["bestand", "bestehend", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">B</text></svg>`
-            },
-            {
-                id: "vm_abriss",
-                name: "Abriss",
-                filename: "vermessung_abriss.svg",
-                tags: ["abriss", "rückbau", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><line x1="12" y1="12" x2="52" y2="52" stroke="#000" stroke-width="2"/><line x1="52" y1="12" x2="12" y2="52" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_geplant",
-                name: "Geplant",
-                filename: "vermessung_geplant.svg",
-                tags: ["geplant", "planung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2" stroke-dasharray="6,4"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">P</text></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - GRENZEN ==========
-    vermessung_grenzen: {
-        name: "Vermessung - Grenzen",
-        icon: "📍",
-        items: [
-            {
-                id: "vm_grundstuecksgrenze",
-                name: "Grundstücksgrenze",
-                filename: "vermessung_grundstuecksgrenze.svg",
-                tags: ["grundstück", "grenze", "flurstück", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><line x1="12" y1="26" x2="12" y2="38" stroke="#000" stroke-width="2"/><line x1="52" y1="26" x2="52" y2="38" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_grenzpunkt_vermarkt",
-                name: "Grenzpunkt (vermarkt)",
-                filename: "vermessung_grenzpunkt_vermarkt.svg",
-                tags: ["grenzpunkt", "grenzstein", "vermarkt", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="12" fill="#000"/><circle cx="32" cy="32" r="6" fill="#fff"/></svg>`
-            },
-            {
-                id: "vm_grenzpunkt_unvermarkt",
-                name: "Grenzpunkt (unvermarkt)",
-                filename: "vermessung_grenzpunkt_unvermarkt.svg",
-                tags: ["grenzpunkt", "unvermarkt", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="10" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="22" x2="32" y2="42" stroke="#000" stroke-width="2"/><line x1="22" y1="32" x2="42" y2="32" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_flurstucksgrenze",
-                name: "Flurstücksgrenze",
-                filename: "vermessung_flurstucksgrenze.svg",
-                tags: ["flurstück", "grenze", "kataster", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="12,4"/></svg>`
-            },
-            {
-                id: "vm_zaun",
-                name: "Zaun",
-                filename: "vermessung_zaun.svg",
-                tags: ["zaun", "einfriedung", "grenze", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="1.5"/><line x1="12" y1="24" x2="12" y2="40" stroke="#000" stroke-width="1.5"/><line x1="24" y1="24" x2="24" y2="40" stroke="#000" stroke-width="1.5"/><line x1="36" y1="24" x2="36" y2="40" stroke="#000" stroke-width="1.5"/><line x1="48" y1="24" x2="48" y2="40" stroke="#000" stroke-width="1.5"/><line x1="12" y1="28" x2="24" y2="28" stroke="#000" stroke-width="1"/><line x1="24" y1="28" x2="36" y2="28" stroke="#000" stroke-width="1"/><line x1="36" y1="28" x2="48" y2="28" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "vm_mauer",
-                name: "Mauer",
-                filename: "vermessung_mauer.svg",
-                tags: ["mauer", "wand", "einfriedung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="26" width="56" height="12" fill="none" stroke="#000" stroke-width="2"/><line x1="16" y1="26" x2="16" y2="38" stroke="#000" stroke-width="1"/><line x1="28" y1="26" x2="28" y2="38" stroke="#000" stroke-width="1"/><line x1="40" y1="26" x2="40" y2="38" stroke="#000" stroke-width="1"/><line x1="52" y1="26" x2="52" y2="38" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "vm_hecke",
-                name: "Hecke",
-                filename: "vermessung_hecke.svg",
-                tags: ["hecke", "grün", "bepflanzung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="38" x2="60" y2="38" stroke="#000" stroke-width="1.5"/><circle cx="12" cy="32" r="6" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="24" cy="30" r="7" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="38" cy="31" r="6" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="52" cy="32" r="6" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - WASSER ==========
-    vermessung_wasser: {
-        name: "Vermessung - Wasser",
-        icon: "💧",
-        items: [
-            {
-                id: "vm_hydrant_unterflur",
-                name: "Hydrant (Unterflur)",
-                filename: "vermessung_hydrant_unterflur.svg",
-                tags: ["hydrant", "unterflur", "wasser", "feuerwehr", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="16" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="16" x2="32" y2="48" stroke="#000" stroke-width="2"/><line x1="16" y1="32" x2="48" y2="32" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="4" fill="#000"/></svg>`
-            },
-            {
-                id: "vm_hydrant_ueberflur",
-                name: "Hydrant (Überflur)",
-                filename: "vermessung_hydrant_ueberflur.svg",
-                tags: ["hydrant", "überflur", "wasser", "feuerwehr", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,8 48,24 48,56 16,56 16,24" fill="none" stroke="#000" stroke-width="2"/><line x1="16" y1="36" x2="48" y2="36" stroke="#000" stroke-width="2"/><circle cx="32" cy="46" r="4" fill="#000"/></svg>`
-            },
-            {
-                id: "vm_wasserschacht",
-                name: "Trinkwasserschacht",
-                filename: "vermessung_wasserschacht.svg",
-                tags: ["schacht", "wasser", "trinkwasser", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="16" y="16" width="32" height="32" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">W</text></svg>`
-            },
-            {
-                id: "vm_wasserschieber",
-                name: "Wasserschieber",
-                filename: "vermessung_wasserschieber.svg",
-                tags: ["schieber", "absperrer", "wasser", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2"/><line x1="32" y1="20" x2="32" y2="44" stroke="#000" stroke-width="3"/><circle cx="32" cy="32" r="6" fill="none" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_brunnen",
-                name: "Brunnen",
-                filename: "vermessung_brunnen.svg",
-                tags: ["brunnen", "wasser", "quelle", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="20" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="8" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="12" x2="32" y2="4" stroke="#000" stroke-width="2"/><line x1="32" y1="52" x2="32" y2="60" stroke="#000" stroke-width="2"/><line x1="12" y1="32" x2="4" y2="32" stroke="#000" stroke-width="2"/><line x1="52" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_wasserleitung",
-                name: "Wasserleitung",
-                filename: "vermessung_wasserleitung.svg",
-                tags: ["leitung", "wasser", "rohr", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><text x="32" y="24" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">W</text></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - ABWASSER ==========
-    vermessung_abwasser: {
-        name: "Vermessung - Abwasser",
-        icon: "🚰",
-        items: [
-            {
-                id: "vm_abwasserschacht",
-                name: "Abwasserschacht",
-                filename: "vermessung_abwasserschacht.svg",
-                tags: ["schacht", "abwasser", "kanal", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="16" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">S</text></svg>`
-            },
-            {
-                id: "vm_schacht_rund",
-                name: "Schacht (rund)",
-                filename: "vermessung_schacht_rund.svg",
-                tags: ["schacht", "rund", "kanal", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="18" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="10" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "vm_schacht_eckig",
-                name: "Schacht (eckig)",
-                filename: "vermessung_schacht_eckig.svg",
-                tags: ["schacht", "eckig", "kanal", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="14" width="36" height="36" fill="none" stroke="#000" stroke-width="2"/><rect x="22" y="22" width="20" height="20" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "vm_einlauf",
-                name: "Einlauf / Gully",
-                filename: "vermessung_einlauf.svg",
-                tags: ["einlauf", "gully", "straßenablauf", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="18" y="18" width="28" height="28" fill="none" stroke="#000" stroke-width="2"/><line x1="22" y1="26" x2="42" y2="26" stroke="#000" stroke-width="1.5"/><line x1="22" y1="32" x2="42" y2="32" stroke="#000" stroke-width="1.5"/><line x1="22" y1="38" x2="42" y2="38" stroke="#000" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "vm_abwasserleitung",
-                name: "Abwasserleitung",
-                filename: "vermessung_abwasserleitung.svg",
-                tags: ["leitung", "abwasser", "kanal", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="10,4"/></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - STROM ==========
-    vermessung_strom: {
-        name: "Vermessung - Strom",
-        icon: "⚡",
-        items: [
-            {
-                id: "vm_hausanschluss_elektro",
-                name: "Hausanschluss Elektro",
-                filename: "vermessung_hausanschluss_elektro.svg",
-                tags: ["hausanschluss", "elektro", "strom", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="14" fill="none" stroke="#000" stroke-width="2"/><polygon points="32,20 26,34 30,34 28,44 38,30 34,30" fill="#000"/></svg>`
-            },
-            {
-                id: "vm_laterne",
-                name: "Laterne / Mast",
-                filename: "vermessung_laterne.svg",
-                tags: ["laterne", "mast", "beleuchtung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="4" fill="#000"/><line x1="32" y1="8" x2="32" y2="28" stroke="#000" stroke-width="2"/><line x1="32" y1="36" x2="32" y2="56" stroke="#000" stroke-width="2"/><line x1="8" y1="32" x2="28" y2="32" stroke="#000" stroke-width="2"/><line x1="36" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_stromkabel",
-                name: "Stromkabel",
-                filename: "vermessung_stromkabel.svg",
-                tags: ["kabel", "strom", "leitung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><text x="32" y="24" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">E</text></svg>`
-            },
-            {
-                id: "vm_schaltkasten",
-                name: "Schaltkasten",
-                filename: "vermessung_schaltkasten.svg",
-                tags: ["schaltkasten", "verteiler", "strom", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="16" y="12" width="32" height="40" fill="none" stroke="#000" stroke-width="2"/><line x1="16" y1="24" x2="48" y2="24" stroke="#000" stroke-width="1"/><text x="32" y="42" font-family="Arial" font-size="12" fill="#000" text-anchor="middle">E</text></svg>`
-            },
-            {
-                id: "vm_trafostation",
-                name: "Trafostation",
-                filename: "vermessung_trafostation.svg",
-                tags: ["trafo", "station", "umspanner", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="12" y="12" width="40" height="40" fill="none" stroke="#000" stroke-width="2"/><line x1="12" y1="12" x2="52" y2="52" stroke="#000" stroke-width="2"/><line x1="52" y1="12" x2="12" y2="52" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_mast_holz",
-                name: "Mast (Holz)",
-                filename: "vermessung_mast_holz.svg",
-                tags: ["mast", "holz", "freileitung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="12" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" fill="#000" text-anchor="middle">H</text></svg>`
-            },
-            {
-                id: "vm_mast_beton",
-                name: "Mast (Beton)",
-                filename: "vermessung_mast_beton.svg",
-                tags: ["mast", "beton", "freileitung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="12" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="6" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "vm_mast_stahl",
-                name: "Mast (Stahl)",
-                filename: "vermessung_mast_stahl.svg",
-                tags: ["mast", "stahl", "freileitung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="20" y="20" width="24" height="24" fill="none" stroke="#000" stroke-width="2"/></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - GAS ==========
-    vermessung_gas: {
-        name: "Vermessung - Gas",
-        icon: "🔥",
-        items: [
-            {
-                id: "vm_gasschieber",
-                name: "Gasschieber",
-                filename: "vermessung_gasschieber.svg",
-                tags: ["schieber", "absperrer", "gas", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="8,4"/><line x1="32" y1="20" x2="32" y2="44" stroke="#000" stroke-width="3"/><text x="32" y="56" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">G</text></svg>`
-            },
-            {
-                id: "vm_gasleitung",
-                name: "Gasleitung",
-                filename: "vermessung_gasleitung.svg",
-                tags: ["leitung", "gas", "rohr", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="8,4"/><text x="32" y="24" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">G</text></svg>`
-            },
-            {
-                id: "vm_hausanschluss_gas",
-                name: "Hausanschluss Gas",
-                filename: "vermessung_hausanschluss_gas.svg",
-                tags: ["hausanschluss", "gas", "anschluss", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="18" y="18" width="28" height="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">G</text></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - VERKEHR ==========
-    vermessung_verkehr: {
-        name: "Vermessung - Verkehr",
-        icon: "🚗",
-        items: [
-            {
-                id: "vm_gleise",
-                name: "Gleise / Schienen",
-                filename: "vermessung_gleise.svg",
-                tags: ["gleise", "schienen", "bahn", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="24" x2="60" y2="24" stroke="#000" stroke-width="2"/><line x1="4" y1="40" x2="60" y2="40" stroke="#000" stroke-width="2"/><line x1="12" y1="24" x2="12" y2="40" stroke="#000" stroke-width="1.5"/><line x1="24" y1="24" x2="24" y2="40" stroke="#000" stroke-width="1.5"/><line x1="36" y1="24" x2="36" y2="40" stroke="#000" stroke-width="1.5"/><line x1="48" y1="24" x2="48" y2="40" stroke="#000" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "vm_prellbock",
-                name: "Prellbock",
-                filename: "vermessung_prellbock.svg",
-                tags: ["prellbock", "gleisende", "bahn", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="40" y2="32" stroke="#000" stroke-width="2"/><line x1="40" y1="16" x2="40" y2="48" stroke="#000" stroke-width="4"/><line x1="44" y1="20" x2="56" y2="20" stroke="#000" stroke-width="2"/><line x1="44" y1="44" x2="56" y2="44" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_verkehrsschild",
-                name: "Verkehrsschild",
-                filename: "vermessung_verkehrsschild.svg",
-                tags: ["schild", "verkehr", "straße", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="32" y1="36" x2="32" y2="60" stroke="#000" stroke-width="2"/><polygon points="32,8 50,24 50,36 14,36 14,24" fill="none" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_ampel",
-                name: "Ampel",
-                filename: "vermessung_ampel.svg",
-                tags: ["ampel", "signal", "verkehr", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="22" y="8" width="20" height="40" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="18" r="5" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="32" cy="28" r="5" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="32" cy="38" r="5" fill="none" stroke="#000" stroke-width="1.5"/><line x1="32" y1="48" x2="32" y2="60" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_haltestelle",
-                name: "Haltestelle",
-                filename: "vermessung_haltestelle.svg",
-                tags: ["haltestelle", "bus", "bahn", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="20" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">H</text></svg>`
-            },
-            {
-                id: "vm_parkplatz",
-                name: "Parkplatz",
-                filename: "vermessung_parkplatz.svg",
-                tags: ["parkplatz", "parken", "stellplatz", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="14" width="36" height="36" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="40" font-family="Arial" font-size="24" font-weight="bold" fill="#000" text-anchor="middle">P</text></svg>`
-            },
-            {
-                id: "vm_schranke",
-                name: "Schranke",
-                filename: "vermessung_schranke.svg",
-                tags: ["schranke", "bahnübergang", "absperrung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="12" cy="32" r="6" fill="none" stroke="#000" stroke-width="2"/><line x1="18" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><line x1="24" y1="28" x2="28" y2="36" stroke="#000" stroke-width="2"/><line x1="36" y1="28" x2="40" y2="36" stroke="#000" stroke-width="2"/><line x1="48" y1="28" x2="52" y2="36" stroke="#000" stroke-width="2"/></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - TOPOGRAFIE ==========
-    vermessung_topografie: {
-        name: "Vermessung - Topografie",
-        icon: "🌳",
-        items: [
-            {
-                id: "vm_laubbaum",
-                name: "Laubbaum",
-                filename: "vermessung_laubbaum.svg",
-                tags: ["baum", "laubbaum", "vegetation", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="28" r="18" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="46" x2="32" y2="60" stroke="#000" stroke-width="3"/></svg>`
-            },
-            {
-                id: "vm_nadelbaum",
-                name: "Nadelbaum",
-                filename: "vermessung_nadelbaum.svg",
-                tags: ["baum", "nadelbaum", "tanne", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 48,28 40,28 52,48 12,48 24,28 16,28" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="48" x2="32" y2="60" stroke="#000" stroke-width="3"/></svg>`
-            },
-            {
-                id: "vm_gebaeude",
-                name: "Gebäude",
-                filename: "vermessung_gebaeude.svg",
-                tags: ["gebäude", "haus", "bauwerk", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="12" y="20" width="40" height="36" fill="none" stroke="#000" stroke-width="2"/><line x1="12" y1="20" x2="32" y2="8" stroke="#000" stroke-width="2"/><line x1="52" y1="20" x2="32" y2="8" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_hoehenpunkt",
-                name: "Höhenpunkt",
-                filename: "vermessung_hoehenpunkt.svg",
-                tags: ["höhe", "nivellement", "punkt", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="22" y1="42" x2="42" y2="42" stroke="#000" stroke-width="2"/><line x1="32" y1="42" x2="32" y2="22" stroke="#000" stroke-width="2"/><circle cx="32" cy="22" r="4" fill="#000"/><text x="46" y="28" font-family="Arial" font-size="10" fill="#000">HP</text></svg>`
-            },
-            {
-                id: "vm_boeschung",
-                name: "Böschung",
-                filename: "vermessung_boeschung.svg",
-                tags: ["böschung", "hang", "gelände", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="20" x2="56" y2="20" stroke="#000" stroke-width="2"/><line x1="8" y1="44" x2="56" y2="44" stroke="#000" stroke-width="2"/><line x1="12" y1="20" x2="8" y2="44" stroke="#000" stroke-width="1"/><line x1="20" y1="20" x2="16" y2="44" stroke="#000" stroke-width="1"/><line x1="28" y1="20" x2="24" y2="44" stroke="#000" stroke-width="1"/><line x1="36" y1="20" x2="32" y2="44" stroke="#000" stroke-width="1"/><line x1="44" y1="20" x2="40" y2="44" stroke="#000" stroke-width="1"/><line x1="52" y1="20" x2="48" y2="44" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "vm_fliessrichtung",
-                name: "Fließrichtung",
-                filename: "vermessung_fliessrichtung.svg",
-                tags: ["fließrichtung", "gewässer", "bach", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="32" x2="48" y2="32" stroke="#000" stroke-width="2"/><polygon points="56,32 44,24 44,40" fill="#000"/></svg>`
-            },
-            {
-                id: "vm_quelle",
-                name: "Quelle",
-                filename: "vermessung_quelle.svg",
-                tags: ["quelle", "wasser", "ursprung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="16" fill="none" stroke="#000" stroke-width="2"/><path d="M32 24 Q36 28 32 32 Q28 36 32 40" stroke="#000" stroke-width="2" fill="none"/></svg>`
-            },
-            {
-                id: "vm_durchlass",
-                name: "Durchlass",
-                filename: "vermessung_durchlass.svg",
-                tags: ["durchlass", "rohr", "kanal", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="24" width="48" height="16" fill="none" stroke="#000" stroke-width="2"/><line x1="8" y1="32" x2="0" y2="32" stroke="#000" stroke-width="2"/><line x1="56" y1="32" x2="64" y2="32" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_kilometerstein",
-                name: "Kilometerstein",
-                filename: "vermessung_kilometerstein.svg",
-                tags: ["kilometer", "stein", "markierung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,8 44,20 44,56 20,56 20,20" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="42" font-family="Arial" font-size="12" fill="#000" text-anchor="middle">km</text></svg>`
-            },
-            {
-                id: "vm_poller",
-                name: "Poller",
-                filename: "vermessung_poller.svg",
-                tags: ["poller", "absperrung", "pfosten", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="10" fill="#000"/><circle cx="32" cy="32" r="4" fill="#fff"/></svg>`
-            }
-        ]
-    }
-};
-
-// ========== DYNAMISCHE PFEILE GENERIEREN ==========
-function generateArrowSVG(angle) {
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="rotate(${angle}, 32, 32)"><rect x="28" y="20" width="8" height="30" fill="#dc2626"/><polygon points="32,4 16,24 24,24 24,20 40,20 40,24 48,24" fill="#dc2626"/></g></svg>`;
-}
-
-function generateNorthArrowSVG(angle) {
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="rotate(${angle}, 32, 32)"><circle cx="32" cy="32" r="28" fill="none" stroke="#374151" stroke-width="2"/><polygon points="32,6 26,32 32,28 38,32" fill="#dc2626"/><polygon points="32,58 26,32 32,36 38,32" fill="#ffffff" stroke="#374151" stroke-width="1"/><text x="32" y="18" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#1f2937" text-anchor="middle">N</text></g></svg>`;
-}
-
-// Pfeile und Kompass generieren
-for (let angle = 0; angle < 360; angle += 15) {
-    SYMBOLS.pfeile.items.push({
-        id: `pfeil_${angle}`,
-        name: `${angle}°`,
-        filename: `richtungspfeil_rot_${angle}grad.svg`,
-        tags: ["pfeil", "richtung", "rot", angle.toString()],
-        svg: generateArrowSVG(angle)
-    });
-    
-    SYMBOLS.kompass.items.push({
-        id: `nord_${angle}`,
-        name: `${angle}°`,
-        filename: `kompass_nord_${angle}grad.svg`,
-        tags: ["nord", "kompass", "himmelsrichtung", angle.toString()],
-        svg: generateNorthArrowSVG(angle)
-    });
-}
diff --git a/symbols/js/text-generator.js b/symbols/js/text-generator.js
deleted file mode 100644
index 67754a0..0000000
--- a/symbols/js/text-generator.js
+++ /dev/null
@@ -1,1154 +0,0 @@
-
-// ========== TEXT-GENERATOR v5 ==========
-// Features: Separate Padding pro Kante, Reset-Button, Einzelner Pfeil-Export, Pfeilspitzenlaenge
-
-var textGenDefaults = {
-    text: '',
-    fontSize: 16,
-    textColor: '#000000',
-    frameColor: '#000000',
-    shape: 'none',
-    frameScale: 100,
-    paddingTop: 10,
-    paddingRight: 10,
-    paddingBottom: 10,
-    paddingLeft: 10,
-    lineStyle: 'solid',
-    lineWeight: 2,
-    arrow: 'none',
-    arrowLength: 40,
-    arrowAngle: 0,
-    arrowBend: 50,
-    arrowSize: 10,
-    arrowTipLength: 15
-};
-
-var textGenState = JSON.parse(JSON.stringify(textGenDefaults));
-
-// Custom Symbols aus localStorage
-var customSymbols = [];
-
-function initTextGenerator() {
-    loadCustomSymbols();
-
-    var textInput = document.getElementById('customText');
-    var fontSizeInput = document.getElementById('fontSize');
-    var fontSizeValue = document.getElementById('fontSizeValue');
-    var textColorInput = document.getElementById('textColor');
-    var textColorValue = document.getElementById('textColorValue');
-    var frameColorInput = document.getElementById('frameColor');
-    var frameColorValue = document.getElementById('frameColorValue');
-    var frameScaleInput = document.getElementById('frameScale');
-    var frameScaleValue = document.getElementById('frameScaleValue');
-
-    // Gesamt-Padding Input
-    var paddingAllInput = document.getElementById("paddingAll");
-    var paddingAllValueEl = document.getElementById("paddingAllValue");
-
-    // Separate Padding Inputs
-    var paddingTopInput = document.getElementById('paddingTop');
-    var paddingTopValue = document.getElementById('paddingTopValue');
-    var paddingRightInput = document.getElementById('paddingRight');
-    var paddingRightValue = document.getElementById('paddingRightValue');
-    var paddingBottomInput = document.getElementById('paddingBottom');
-    var paddingBottomValue = document.getElementById('paddingBottomValue');
-    var paddingLeftInput = document.getElementById('paddingLeft');
-    var paddingLeftValue = document.getElementById('paddingLeftValue');
-
-    var arrowLengthInput = document.getElementById('arrowLength');
-    var arrowLengthValue = document.getElementById('arrowLengthValue');
-    var arrowAngleInput = document.getElementById('arrowAngle');
-    var arrowAngleValue = document.getElementById('arrowAngleValue');
-    var arrowBendInput = document.getElementById('arrowBend');
-    var arrowBendValue = document.getElementById('arrowBendValue');
-    var arrowSizeInput = document.getElementById('arrowSize');
-    var arrowSizeValue = document.getElementById('arrowSizeValue');
-    var arrowTipLengthInput = document.getElementById('arrowTipLength');
-    var arrowTipLengthValue = document.getElementById('arrowTipLengthValue');
-
-    // Text input
-    if (textInput) {
-        textInput.addEventListener('input', function(e) {
-            textGenState.text = e.target.value;
-            updateTextPreview();
-        });
-    }
-
-    // Font size
-    if (fontSizeInput) {
-        fontSizeInput.addEventListener('input', function(e) {
-            textGenState.fontSize = parseInt(e.target.value);
-            fontSizeValue.textContent = e.target.value + 'px';
-            updateTextPreview();
-        });
-    }
-
-    // Text color
-    if (textColorInput) {
-        textColorInput.addEventListener('input', function(e) {
-            textGenState.textColor = e.target.value;
-            textColorValue.textContent = e.target.value;
-            updateTextPreview();
-        });
-    }
-
-    // Frame color
-    if (frameColorInput) {
-        frameColorInput.addEventListener('input', function(e) {
-            textGenState.frameColor = e.target.value;
-            frameColorValue.textContent = e.target.value;
-            updateTextPreview();
-        });
-    }
-
-    // Frame scale
-    if (frameScaleInput) {
-        frameScaleInput.addEventListener('input', function(e) {
-            textGenState.frameScale = parseInt(e.target.value);
-            frameScaleValue.textContent = e.target.value + '%';
-            updateTextPreview();
-        });
-    }
-
-    // Gesamt-Padding handler (setzt alle 4 Seiten)
-    if (paddingAllInput) {
-        paddingAllInput.addEventListener("input", function(e) {
-            var val = parseInt(e.target.value);
-            textGenState.paddingTop = val;
-            textGenState.paddingRight = val;
-            textGenState.paddingBottom = val;
-            textGenState.paddingLeft = val;
-            paddingAllValueEl.textContent = val + "px";
-            // Update einzelne Slider
-            if (paddingTopInput) { paddingTopInput.value = val; paddingTopValue.textContent = val + "px"; }
-            if (paddingRightInput) { paddingRightInput.value = val; paddingRightValue.textContent = val + "px"; }
-            if (paddingBottomInput) { paddingBottomInput.value = val; paddingBottomValue.textContent = val + "px"; }
-            if (paddingLeftInput) { paddingLeftInput.value = val; paddingLeftValue.textContent = val + "px"; }
-            updateTextPreview();
-        });
-    }
-
-    // Separate Padding handlers
-    if (paddingTopInput) {
-        paddingTopInput.addEventListener('input', function(e) {
-            textGenState.paddingTop = parseInt(e.target.value);
-            paddingTopValue.textContent = e.target.value + 'px';
-            updateTextPreview();
-        });
-    }
-    if (paddingRightInput) {
-        paddingRightInput.addEventListener('input', function(e) {
-            textGenState.paddingRight = parseInt(e.target.value);
-            paddingRightValue.textContent = e.target.value + 'px';
-            updateTextPreview();
-        });
-    }
-    if (paddingBottomInput) {
-        paddingBottomInput.addEventListener('input', function(e) {
-            textGenState.paddingBottom = parseInt(e.target.value);
-            paddingBottomValue.textContent = e.target.value + 'px';
-            updateTextPreview();
-        });
-    }
-    if (paddingLeftInput) {
-        paddingLeftInput.addEventListener('input', function(e) {
-            textGenState.paddingLeft = parseInt(e.target.value);
-            paddingLeftValue.textContent = e.target.value + 'px';
-            updateTextPreview();
-        });
-    }
-
-    // Arrow length
-    if (arrowLengthInput) {
-        arrowLengthInput.addEventListener('input', function(e) {
-            textGenState.arrowLength = parseInt(e.target.value);
-            arrowLengthValue.textContent = e.target.value + 'px';
-            updateTextPreview();
-            try { updateStandaloneArrowPreview(); } catch(e) { console.log("Standalone arrow preview error:", e); }
-        });
-    }
-
-    // Arrow angle
-    if (arrowAngleInput) {
-        arrowAngleInput.addEventListener('input', function(e) {
-            textGenState.arrowAngle = parseInt(e.target.value);
-            arrowAngleValue.textContent = e.target.value + '\u00B0';
-            updateTextPreview();
-            try { updateStandaloneArrowPreview(); } catch(e) { console.log("Standalone arrow preview error:", e); }
-        });
-    }
-
-    // Arrow bend position
-    if (arrowBendInput) {
-        arrowBendInput.addEventListener('input', function(e) {
-            textGenState.arrowBend = parseInt(e.target.value);
-            arrowBendValue.textContent = e.target.value + '%';
-            updateTextPreview();
-            try { updateStandaloneArrowPreview(); } catch(e) { console.log("Standalone arrow preview error:", e); }
-        });
-    }
-
-    // Arrow size (width)
-    if (arrowSizeInput) {
-        arrowSizeInput.addEventListener('input', function(e) {
-            textGenState.arrowSize = parseInt(e.target.value);
-            arrowSizeValue.textContent = e.target.value + 'px';
-            updateTextPreview();
-            try { updateStandaloneArrowPreview(); } catch(e) { console.log("Standalone arrow preview error:", e); }
-        });
-    }
-
-    // Arrow tip length (laenger = schmaler)
-    if (arrowTipLengthInput) {
-        arrowTipLengthInput.addEventListener('input', function(e) {
-            textGenState.arrowTipLength = parseInt(e.target.value);
-            arrowTipLengthValue.textContent = e.target.value + 'px';
-            updateTextPreview();
-            try { updateStandaloneArrowPreview(); } catch(e) { console.log("Standalone arrow preview error:", e); }
-        });
-    }
-
-    // Shape buttons
-    document.querySelectorAll('.shape-btn').forEach(function(btn) {
-        btn.addEventListener('click', function() {
-            document.querySelectorAll('.shape-btn').forEach(function(b) { b.classList.remove('active'); });
-            btn.classList.add('active');
-            textGenState.shape = btn.dataset.shape;
-            updateFrameScaleVisibility();
-            updateTextPreview();
-        });
-    });
-
-    // Line style buttons
-    document.querySelectorAll('.line-btn').forEach(function(btn) {
-        btn.addEventListener('click', function() {
-            document.querySelectorAll('.line-btn').forEach(function(b) { b.classList.remove('active'); });
-            btn.classList.add('active');
-            textGenState.lineStyle = btn.dataset.style;
-            updateTextPreview();
-            try { updateStandaloneArrowPreview(); } catch(e) { console.log("Standalone arrow preview error:", e); }
-        });
-    });
-
-    // Line weight buttons
-    document.querySelectorAll('.weight-btn').forEach(function(btn) {
-        btn.addEventListener('click', function() {
-            document.querySelectorAll('.weight-btn').forEach(function(b) { b.classList.remove('active'); });
-            btn.classList.add('active');
-            textGenState.lineWeight = parseInt(btn.dataset.weight);
-            updateTextPreview();
-            try { updateStandaloneArrowPreview(); } catch(e) { console.log("Standalone arrow preview error:", e); }
-        });
-    });
-
-    // Arrow buttons
-    document.querySelectorAll('.arrow-btn').forEach(function(btn) {
-        btn.addEventListener('click', function() {
-            document.querySelectorAll('.arrow-btn').forEach(function(b) { b.classList.remove('active'); });
-            btn.classList.add('active');
-            textGenState.arrow = btn.dataset.arrow;
-            updateArrowDetailsVisibility();
-            updateTextPreview();
-        });
-    });
-
-    updateFrameScaleVisibility();
-    updateArrowDetailsVisibility();
-    updateTextPreview();
-    try { updateStandaloneArrowPreview(); } catch(e) { console.log("Standalone arrow preview error:", e); }
-}
-
-// ========== RESET FUNCTION ==========
-function resetToDefaults() {
-    textGenState = JSON.parse(JSON.stringify(textGenDefaults));
-
-    // Update all UI elements
-    var textInput = document.getElementById('customText');
-    if (textInput) textInput.value = '';
-
-    var fontSizeInput = document.getElementById('fontSize');
-    var fontSizeValue = document.getElementById('fontSizeValue');
-    if (fontSizeInput) fontSizeInput.value = textGenDefaults.fontSize;
-    if (fontSizeValue) fontSizeValue.textContent = textGenDefaults.fontSize + 'px';
-
-    var textColorInput = document.getElementById('textColor');
-    var textColorValue = document.getElementById('textColorValue');
-    if (textColorInput) textColorInput.value = textGenDefaults.textColor;
-    if (textColorValue) textColorValue.textContent = textGenDefaults.textColor;
-
-    var frameColorInput = document.getElementById('frameColor');
-    var frameColorValue = document.getElementById('frameColorValue');
-    if (frameColorInput) frameColorInput.value = textGenDefaults.frameColor;
-    if (frameColorValue) frameColorValue.textContent = textGenDefaults.frameColor;
-
-    var frameScaleInput = document.getElementById('frameScale');
-    var frameScaleValue = document.getElementById('frameScaleValue');
-    if (frameScaleInput) frameScaleInput.value = textGenDefaults.frameScale;
-    if (frameScaleValue) frameScaleValue.textContent = textGenDefaults.frameScale + '%';
-
-    // Reset Gesamt-Padding
-    var paddingAllInput = document.getElementById('paddingAll');
-    var paddingAllValue = document.getElementById('paddingAllValue');
-    if (paddingAllInput) paddingAllInput.value = textGenDefaults.paddingTop;
-    if (paddingAllValue) paddingAllValue.textContent = textGenDefaults.paddingTop + 'px';
-
-    // Reset separate padding
-    ['Top', 'Right', 'Bottom', 'Left'].forEach(function(side) {
-        var input = document.getElementById('padding' + side);
-        var value = document.getElementById('padding' + side + 'Value');
-        var defaultVal = textGenDefaults['padding' + side];
-        if (input) input.value = defaultVal;
-        if (value) value.textContent = defaultVal + 'px';
-    });
-
-    var arrowLengthInput = document.getElementById('arrowLength');
-    var arrowLengthValue = document.getElementById('arrowLengthValue');
-    if (arrowLengthInput) arrowLengthInput.value = textGenDefaults.arrowLength;
-    if (arrowLengthValue) arrowLengthValue.textContent = textGenDefaults.arrowLength + 'px';
-
-    var arrowAngleInput = document.getElementById('arrowAngle');
-    var arrowAngleValue = document.getElementById('arrowAngleValue');
-    if (arrowAngleInput) arrowAngleInput.value = textGenDefaults.arrowAngle;
-    if (arrowAngleValue) arrowAngleValue.textContent = textGenDefaults.arrowAngle + '\u00B0';
-
-    var arrowBendInput = document.getElementById('arrowBend');
-    var arrowBendValue = document.getElementById('arrowBendValue');
-    if (arrowBendInput) arrowBendInput.value = textGenDefaults.arrowBend;
-    if (arrowBendValue) arrowBendValue.textContent = textGenDefaults.arrowBend + '%';
-
-    var arrowSizeInput = document.getElementById('arrowSize');
-    var arrowSizeValue = document.getElementById('arrowSizeValue');
-    if (arrowSizeInput) arrowSizeInput.value = textGenDefaults.arrowSize;
-    if (arrowSizeValue) arrowSizeValue.textContent = textGenDefaults.arrowSize + 'px';
-
-    var arrowTipLengthInput = document.getElementById('arrowTipLength');
-    var arrowTipLengthValue = document.getElementById('arrowTipLengthValue');
-    if (arrowTipLengthInput) arrowTipLengthInput.value = textGenDefaults.arrowTipLength;
-    if (arrowTipLengthValue) arrowTipLengthValue.textContent = textGenDefaults.arrowTipLength + 'px';
-
-    // Reset buttons
-    document.querySelectorAll('.shape-btn').forEach(function(btn) {
-        btn.classList.toggle('active', btn.dataset.shape === 'none');
-    });
-    document.querySelectorAll('.line-btn').forEach(function(btn) {
-        btn.classList.toggle('active', btn.dataset.style === 'solid');
-    });
-    document.querySelectorAll('.weight-btn').forEach(function(btn) {
-        btn.classList.toggle('active', btn.dataset.weight === '2');
-    });
-    document.querySelectorAll('.arrow-btn').forEach(function(btn) {
-        btn.classList.toggle('active', btn.dataset.arrow === 'none');
-    });
-
-    updateFrameScaleVisibility();
-    updateArrowDetailsVisibility();
-    updateTextPreview();
-    try { updateStandaloneArrowPreview(); } catch(e) { console.log("Standalone arrow preview error:", e); }
-
-    showNotification('Auf Standard zurueckgesetzt');
-}
-
-function updateFrameScaleVisibility() {
-    console.log("updateFrameScaleVisibility called, shape:", textGenState.shape);
-    var row = document.getElementById('frameScaleRow');
-    var paddingAllRow = document.getElementById('framePaddingAllRow');
-    var paddingRow = document.getElementById('framePaddingRow');
-    if (row) {
-        row.style.display = textGenState.shape === 'none' ? 'none' : 'flex';
-    }
-    if (paddingAllRow) {
-        paddingAllRow.style.display = textGenState.shape === 'none' ? 'none' : 'flex';
-    }
-    if (paddingRow) {
-        paddingRow.style.display = textGenState.shape === 'none' ? 'none' : 'flex';
-    }
-}
-
-function updateArrowDetailsVisibility() {
-    var row = document.getElementById('arrowDetailsRow');
-    var row2 = document.getElementById('arrowDetailsRow2');
-    if (row) {
-        row.style.display = textGenState.arrow === 'none' ? 'none' : 'flex';
-    }
-    if (row2) {
-        row2.style.display = textGenState.arrow === 'none' ? 'none' : 'flex';
-    }
-}
-
-function toggleTextGenerator() {
-    var generator = document.querySelector('.text-generator');
-    generator.classList.toggle('collapsed');
-}
-
-function getStrokeDasharray(style) {
-    switch(style) {
-        case 'dashed': return '8,4';
-        case 'dotted': return '2,3';
-        default: return 'none';
-    }
-}
-
-function generateTextSVG() {
-    var text = textGenState.text || 'Text';
-    var fontSize = textGenState.fontSize;
-    var textColor = textGenState.textColor;
-    var frameColor = textGenState.frameColor;
-    var shape = textGenState.shape;
-    var frameScale = textGenState.frameScale / 100;
-    var paddingTop = textGenState.paddingTop;
-    var paddingRight = textGenState.paddingRight;
-    var paddingBottom = textGenState.paddingBottom;
-    var paddingLeft = textGenState.paddingLeft;
-    var lineStyle = textGenState.lineStyle;
-    var lineWeight = textGenState.lineWeight;
-    var arrow = textGenState.arrow;
-    var arrowLength = textGenState.arrowLength;
-    var arrowAngle = textGenState.arrowAngle;
-    var arrowBend = textGenState.arrowBend / 100;
-    var arrowSize = textGenState.arrowSize;
-    var arrowTipLength = textGenState.arrowTipLength;
-
-    var lines = text.split('\n');
-    if (lines.length === 0) lines = ['Text'];
-
-    var maxLineLength = 0;
-    for (var i = 0; i < lines.length; i++) {
-        if (lines[i].length > maxLineLength) maxLineLength = lines[i].length;
-    }
-    if (maxLineLength === 0) maxLineLength = 4;
-
-    var charWidth = fontSize * 0.6;
-    var lineHeight = fontSize * 1.3;
-    var textWidth = maxLineLength * charWidth;
-    var textHeight = lines.length * lineHeight;
-
-    var frameWidth = (textWidth + paddingLeft + paddingRight) * frameScale;
-    var frameHeight = (textHeight + paddingTop + paddingBottom) * frameScale;
-    if (frameWidth < 40) frameWidth = 40;
-    if (frameHeight < 30) frameHeight = 30;
-
-    var arrowSpace = (arrow !== 'none') ? arrowLength + arrowTipLength + 5 : 0;
-    var svgWidth = frameWidth;
-    var svgHeight = frameHeight;
-    var offsetX = 0, offsetY = 0;
-
-    if (arrow === 'left') { svgWidth += arrowSpace; offsetX = arrowSpace; }
-    else if (arrow === 'right') { svgWidth += arrowSpace; }
-    else if (arrow === 'top') { svgHeight += arrowSpace; offsetY = arrowSpace; }
-    else if (arrow === 'bottom') { svgHeight += arrowSpace; }
-
-    var frameCx = offsetX + frameWidth / 2;
-    var frameCy = offsetY + frameHeight / 2;
-
-    // Text-Verschiebung durch asymmetrisches Padding
-    var textOffsetX = ((paddingLeft - paddingRight) / 2) * frameScale;
-    var textOffsetY = ((paddingTop - paddingBottom) / 2) * frameScale;
-    var textCx = frameCx + textOffsetX;
-    var textCy = frameCy + textOffsetY;
-
-    var dashArray = getStrokeDasharray(lineStyle);
-    var dashAttr = dashArray !== 'none' ? ' stroke-dasharray="' + dashArray + '"' : '';
-
-    var shapeSvg = '';
-    var shapeX = offsetX + lineWeight / 2;
-    var shapeY = offsetY + lineWeight / 2;
-    var shapeW = frameWidth - lineWeight;
-    var shapeH = frameHeight - lineWeight;
-
-    switch(shape) {
-        case 'rect':
-            shapeSvg = '<rect x="' + shapeX + '" y="' + shapeY + '" width="' + shapeW + '" height="' + shapeH + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
-            break;
-        case 'square':
-            var squareSize = Math.max(shapeW, shapeH);
-            shapeSvg = '<rect x="' + (frameCx - squareSize/2) + '" y="' + (frameCy - squareSize/2) + '" width="' + squareSize + '" height="' + squareSize + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
-            break;
-        case 'circle':
-            var radius = Math.max(shapeW, shapeH) / 2;
-            shapeSvg = '<circle cx="' + frameCx + '" cy="' + frameCy + '" r="' + (radius - lineWeight/2) + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
-            break;
-        case 'oval':
-            shapeSvg = '<ellipse cx="' + frameCx + '" cy="' + frameCy + '" rx="' + (shapeW/2 - lineWeight/2) + '" ry="' + (shapeH/2 - lineWeight/2) + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
-            break;
-        case 'diamond':
-            var halfW = shapeW / 2, halfH = shapeH / 2;
-            shapeSvg = '<polygon points="' + frameCx + ',' + (frameCy - halfH) + ' ' + (frameCx + halfW) + ',' + frameCy + ' ' + frameCx + ',' + (frameCy + halfH) + ' ' + (frameCx - halfW) + ',' + frameCy + '" fill="none" stroke="' + frameColor + '" stroke-width="' + lineWeight + '"' + dashAttr + '/>';
-            break;
-    }
-
-    var arrowSvg = '';
-    if (arrow !== 'none') {
-        arrowSvg = generateArrowPath(arrow, frameCx, frameCy, frameWidth, frameHeight, offsetX, offsetY, arrowLength, arrowAngle, arrowBend, frameColor, lineWeight, dashAttr, arrowSize, arrowTipLength);
-    }
-
-    var textSvg = '<text x="' + textCx + '" font-family="Arial, sans-serif" font-size="' + fontSize + '" fill="' + textColor + '" text-anchor="middle">';
-    var totalTextHeight = lines.length * lineHeight;
-    var startY = textCy - (totalTextHeight / 2) + (fontSize * 0.8);
-
-    for (var j = 0; j < lines.length; j++) {
-        var lineY = startY + (j * lineHeight);
-        var lineText = lines[j] || ' ';
-        lineText = lineText.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-        textSvg += '<tspan x="' + textCx + '" y="' + lineY + '">' + lineText + '</tspan>';
-    }
-    textSvg += '</text>';
-
-    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + svgWidth + ' ' + svgHeight + '" width="' + svgWidth + '" height="' + svgHeight + '">' + shapeSvg + arrowSvg + textSvg + '</svg>';
-}
-
-
-function generateArrowPath(direction, cx, cy, frameWidth, frameHeight, offsetX, offsetY, length, angle, bendPos, color, weight, dashAttr, arrowSize, tipLength) {
-    var startX, startY, midX, midY, endX, endY;
-    var angleRad = angle * Math.PI / 180;
-
-    // Startpunkt am Rahmen
-    switch(direction) {
-        case 'top':
-            startX = cx;
-            startY = offsetY;
-            midX = startX;
-            midY = startY - length * bendPos;
-            endX = midX + Math.sin(angleRad) * (length * (1 - bendPos));
-            endY = midY - Math.cos(angleRad) * (length * (1 - bendPos));
-            break;
-        case 'bottom':
-            startX = cx;
-            startY = offsetY + frameHeight;
-            midX = startX;
-            midY = startY + length * bendPos;
-            endX = midX + Math.sin(angleRad) * (length * (1 - bendPos));
-            endY = midY + Math.cos(angleRad) * (length * (1 - bendPos));
-            break;
-        case 'left':
-            startX = offsetX;
-            startY = cy;
-            midX = startX - length * bendPos;
-            midY = startY;
-            endX = midX - Math.cos(angleRad) * (length * (1 - bendPos));
-            endY = midY + Math.sin(angleRad) * (length * (1 - bendPos));
-            break;
-        case 'right':
-            startX = offsetX + frameWidth;
-            startY = cy;
-            midX = startX + length * bendPos;
-            midY = startY;
-            endX = midX + Math.cos(angleRad) * (length * (1 - bendPos));
-            endY = midY + Math.sin(angleRad) * (length * (1 - bendPos));
-            break;
-    }
-
-    // Pfad erstellen
-    var pathD;
-    if (angle !== 0 && bendPos > 0 && bendPos < 1) {
-        pathD = 'M ' + startX + ' ' + startY + ' L ' + midX + ' ' + midY + ' L ' + endX + ' ' + endY;
-    } else {
-        pathD = 'M ' + startX + ' ' + startY + ' L ' + endX + ' ' + endY;
-    }
-
-    // Pfeilspitze: Richtung basiert auf dem LETZTEN Segment
-    var lastSegmentStartX, lastSegmentStartY;
-    if (angle !== 0 && bendPos > 0 && bendPos < 1) {
-        lastSegmentStartX = midX;
-        lastSegmentStartY = midY;
-    } else {
-        lastSegmentStartX = startX;
-        lastSegmentStartY = startY;
-    }
-
-    // Winkel des letzten Segments berechnen
-    var arrowHeadAngle = Math.atan2(endY - lastSegmentStartY, endX - lastSegmentStartX);
-
-    // Pfeilspitze Punkte - tipLength bestimmt wie lang (und damit schmaler) die Spitze ist
-    // arrowSize bestimmt die Breite an der Basis
-    // Je laenger tipLength, desto spitzer/schmaler wird der Pfeil
-    var tipHalfWidth = arrowSize / 2;
-
-    // Basis der Pfeilspitze (zurueck von der Spitze)
-    var baseX = endX - tipLength * Math.cos(arrowHeadAngle);
-    var baseY = endY - tipLength * Math.sin(arrowHeadAngle);
-
-    // Seitenpunkte der Pfeilspitze
-    var perpAngle = arrowHeadAngle + Math.PI / 2;
-    var ah1x = baseX + tipHalfWidth * Math.cos(perpAngle);
-    var ah1y = baseY + tipHalfWidth * Math.sin(perpAngle);
-    var ah2x = baseX - tipHalfWidth * Math.cos(perpAngle);
-    var ah2y = baseY - tipHalfWidth * Math.sin(perpAngle);
-
-    var arrowHead = '<polygon points="' + endX + ',' + endY + ' ' + ah1x + ',' + ah1y + ' ' + ah2x + ',' + ah2y + '" fill="' + color + '"/>';
-
-    return '<path d="' + pathD + '" fill="none" stroke="' + color + '" stroke-width="' + weight + '"' + dashAttr + '/>' + arrowHead;
-}
-
-// ========== STANDALONE ARROW (Einzelner loser Pfeil) ==========
-
-function generateStandaloneArrowSVG() {
-    var length = textGenState.arrowLength;
-    var angle = textGenState.arrowAngle;
-    var bendPos = textGenState.arrowBend / 100;
-    var color = textGenState.frameColor;
-    var weight = textGenState.lineWeight;
-    var lineStyle = textGenState.lineStyle;
-    var arrowSize = textGenState.arrowSize;
-    var tipLength = textGenState.arrowTipLength;
-
-    var dashArray = getStrokeDasharray(lineStyle);
-    var dashAttr = dashArray !== 'none' ? ' stroke-dasharray="' + dashArray + '"' : '';
-
-    // Padding fuer SVG
-    var padding = Math.max(arrowSize, tipLength) + 5;
-    var angleRad = angle * Math.PI / 180;
-
-    // Pfeil geht von links nach rechts
-    var startX = padding;
-    var startY = padding + length / 2;
-
-    // Knickpunkt
-    var midX = startX + length * bendPos;
-    var midY = startY;
-
-    // Endpunkt mit Winkel
-    var endX, endY;
-    if (angle !== 0 && bendPos > 0 && bendPos < 1) {
-        endX = midX + Math.cos(angleRad) * (length * (1 - bendPos));
-        endY = midY - Math.sin(angleRad) * (length * (1 - bendPos));
-    } else {
-        endX = startX + length;
-        endY = startY;
-    }
-
-    // SVG Dimensionen berechnen
-    var minX = Math.min(startX, midX, endX) - padding;
-    var maxX = Math.max(startX, midX, endX) + padding + tipLength;
-    var minY = Math.min(startY, midY, endY) - padding - arrowSize;
-    var maxY = Math.max(startY, midY, endY) + padding + arrowSize;
-
-    var svgWidth = maxX - minX;
-    var svgHeight = maxY - minY;
-
-    // Offset korrigieren
-    var offsetX = -minX;
-    var offsetY = -minY;
-
-    startX += offsetX;
-    startY += offsetY;
-    midX += offsetX;
-    midY += offsetY;
-    endX += offsetX;
-    endY += offsetY;
-
-    // Pfad erstellen
-    var pathD;
-    if (angle !== 0 && bendPos > 0 && bendPos < 1) {
-        pathD = 'M ' + startX + ' ' + startY + ' L ' + midX + ' ' + midY + ' L ' + endX + ' ' + endY;
-    } else {
-        pathD = 'M ' + startX + ' ' + startY + ' L ' + endX + ' ' + endY;
-    }
-
-    // Pfeilspitze
-    var lastSegmentStartX, lastSegmentStartY;
-    if (angle !== 0 && bendPos > 0 && bendPos < 1) {
-        lastSegmentStartX = midX;
-        lastSegmentStartY = midY;
-    } else {
-        lastSegmentStartX = startX;
-        lastSegmentStartY = startY;
-    }
-
-    var arrowHeadAngle = Math.atan2(endY - lastSegmentStartY, endX - lastSegmentStartX);
-
-    var tipHalfWidth = arrowSize / 2;
-    var baseX = endX - tipLength * Math.cos(arrowHeadAngle);
-    var baseY = endY - tipLength * Math.sin(arrowHeadAngle);
-
-    var perpAngle = arrowHeadAngle + Math.PI / 2;
-    var ah1x = baseX + tipHalfWidth * Math.cos(perpAngle);
-    var ah1y = baseY + tipHalfWidth * Math.sin(perpAngle);
-    var ah2x = baseX - tipHalfWidth * Math.cos(perpAngle);
-    var ah2y = baseY - tipHalfWidth * Math.sin(perpAngle);
-
-    var arrowHead = '<polygon points="' + endX + ',' + endY + ' ' + ah1x + ',' + ah1y + ' ' + ah2x + ',' + ah2y + '" fill="' + color + '"/>';
-    var pathSvg = '<path d="' + pathD + '" fill="none" stroke="' + color + '" stroke-width="' + weight + '"' + dashAttr + '/>';
-
-    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + svgWidth + ' ' + svgHeight + '" width="' + svgWidth + '" height="' + svgHeight + '">' + pathSvg + arrowHead + '</svg>';
-}
-
-function updateStandaloneArrowPreview() {
-    // Nur anzeigen wenn Pfeil ausgewaehlt
-    if (textGenState.arrow === "none") {
-        var preview = document.getElementById("standaloneArrowPreview");
-        if (preview) preview.innerHTML = '<p style="color:#999;font-size:12px;text-align:center;">Waehle einen Pfeil aus</p>';
-        return;
-    }
-    var preview = document.getElementById('standaloneArrowPreview');
-    if (preview) {
-        preview.innerHTML = generateStandaloneArrowSVG();
-    }
-}
-
-async function copyStandaloneArrow() {
-    var svg = generateStandaloneArrowSVG();
-    try {
-        var canvas = await svgToCanvas(svg, 2);
-        canvas.toBlob(async function(blob) {
-            try {
-                await navigator.clipboard.write([
-                    new ClipboardItem({ 'image/png': blob })
-                ]);
-                showNotification('Pfeil in Zwischenablage kopiert!');
-            } catch (err) {
-                downloadStandaloneArrowPNG();
-            }
-        }, 'image/png');
-    } catch (err) {
-        showNotification('Fehler beim Kopieren', 'error');
-    }
-}
-
-function downloadStandaloneArrowSVG() {
-    var svg = generateStandaloneArrowSVG();
-    var blob = new Blob([svg], { type: 'image/svg+xml' });
-    var url = URL.createObjectURL(blob);
-    var link = document.createElement('a');
-    link.href = url;
-    link.download = 'pfeil.svg';
-    link.click();
-    URL.revokeObjectURL(url);
-    showNotification('Pfeil SVG heruntergeladen!');
-}
-
-async function downloadStandaloneArrowPNG() {
-    var svg = generateStandaloneArrowSVG();
-    try {
-        var canvas = await svgToCanvas(svg, 2);
-        canvas.toBlob(function(blob) {
-            var link = document.createElement('a');
-            link.href = URL.createObjectURL(blob);
-            link.download = 'pfeil.png';
-            link.click();
-            URL.revokeObjectURL(link.href);
-            showNotification('Pfeil PNG heruntergeladen!');
-        }, 'image/png');
-    } catch (err) {
-        showNotification('Fehler beim PNG-Export', 'error');
-    }
-}
-
-async function downloadStandaloneArrowJPG() {
-    var svg = generateStandaloneArrowSVG();
-    try {
-        var canvas = await svgToCanvas(svg, 2);
-        var tempCanvas = document.createElement('canvas');
-        tempCanvas.width = canvas.width;
-        tempCanvas.height = canvas.height;
-        var tempCtx = tempCanvas.getContext('2d');
-        tempCtx.fillStyle = '#FFFFFF';
-        tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
-        tempCtx.drawImage(canvas, 0, 0);
-
-        tempCanvas.toBlob(function(blob) {
-            var link = document.createElement('a');
-            link.href = URL.createObjectURL(blob);
-            link.download = 'pfeil.jpg';
-            link.click();
-            URL.revokeObjectURL(link.href);
-            showNotification('Pfeil JPG heruntergeladen!');
-        }, 'image/jpeg', 0.95);
-    } catch (err) {
-        showNotification('Fehler beim JPG-Export', 'error');
-    }
-}
-
-function downloadStandaloneArrowDXF() {
-    var svg = generateStandaloneArrowSVG();
-    var dxf = svgToDxf(svg, 1);
-    var blob = new Blob([dxf], { type: 'application/dxf' });
-    var url = URL.createObjectURL(blob);
-    var link = document.createElement('a');
-    link.href = url;
-    link.download = 'pfeil.dxf';
-    link.click();
-    URL.revokeObjectURL(url);
-    showNotification('Pfeil DXF heruntergeladen!');
-}
-
-function addStandaloneArrowToLegend() {
-    var svg = generateStandaloneArrowSVG();
-    legendItems.push({
-        id: 'arrow_' + Date.now(),
-        name: 'Pfeil',
-        svg: svg,
-        description: ''
-    });
-    updateLegendCount();
-    saveLegendToStorage();
-    showNotification('Pfeil zur Legende hinzugefuegt!');
-}
-
-function updateTextPreview() {
-    console.log("updateTextPreview called");
-    var preview = document.getElementById('textPreview');
-    if (preview) {
-        var svg = generateTextSVG(); console.log("Generated SVG length:", svg.length); preview.innerHTML = svg;
-    }
-}
-
-// Hilfsfunktion: SVG zu Canvas rendern
-async function svgToCanvas(svg, scale) {
-    var parser = new DOMParser();
-    var svgDoc = parser.parseFromString(svg, 'image/svg+xml');
-    var svgEl = svgDoc.documentElement;
-    var svgWidth = parseFloat(svgEl.getAttribute('width')) || 100;
-    var svgHeight = parseFloat(svgEl.getAttribute('height')) || 100;
-
-    if (!scale) {
-        scale = Math.max(200 / Math.min(svgWidth, svgHeight), 1);
-        scale = Math.min(scale, 512 / Math.max(svgWidth, svgHeight));
-    }
-
-    var canvasWidth = Math.round(svgWidth * scale);
-    var canvasHeight = Math.round(svgHeight * scale);
-
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d');
-    canvas.width = canvasWidth;
-    canvas.height = canvasHeight;
-
-    var img = new Image();
-    var svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
-    var url = URL.createObjectURL(svgBlob);
-
-    await new Promise(function(resolve, reject) {
-        img.onload = resolve;
-        img.onerror = reject;
-        img.src = url;
-    });
-
-    ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
-    URL.revokeObjectURL(url);
-
-    return canvas;
-}
-
-async function copyTextAsImage() {
-    var svg = generateTextSVG();
-
-    try {
-        var canvas = await svgToCanvas(svg);
-
-        canvas.toBlob(async function(blob) {
-            try {
-                await navigator.clipboard.write([
-                    new ClipboardItem({ 'image/png': blob })
-                ]);
-                showNotification('In Zwischenablage kopiert!');
-            } catch (err) {
-                var link = document.createElement('a');
-                link.href = URL.createObjectURL(blob);
-                link.download = 'text-symbol.png';
-                link.click();
-                showNotification('PNG heruntergeladen');
-            }
-        }, 'image/png');
-    } catch (err) {
-        console.error('Fehler:', err);
-        showNotification('Fehler beim Kopieren', 'error');
-    }
-}
-
-function downloadTextSVG() {
-    var svg = generateTextSVG();
-    var blob = new Blob([svg], { type: 'image/svg+xml' });
-    var url = URL.createObjectURL(blob);
-    var link = document.createElement('a');
-    link.href = url;
-    var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol';
-    link.download = 'text-' + filename + '.svg';
-    link.click();
-    URL.revokeObjectURL(url);
-    showNotification('SVG heruntergeladen!');
-}
-
-async function downloadTextPNG() {
-    var svg = generateTextSVG();
-    try {
-        var canvas = await svgToCanvas(svg, 2);
-
-        canvas.toBlob(function(blob) {
-            var link = document.createElement('a');
-            link.href = URL.createObjectURL(blob);
-            var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol';
-            link.download = 'text-' + filename + '.png';
-            link.click();
-            URL.revokeObjectURL(link.href);
-            showNotification('PNG heruntergeladen!');
-        }, 'image/png');
-    } catch (err) {
-        console.error('Fehler:', err);
-        showNotification('Fehler beim PNG-Export', 'error');
-    }
-}
-
-async function downloadTextJPG() {
-    var svg = generateTextSVG();
-    try {
-        var canvas = await svgToCanvas(svg, 2);
-        var ctx = canvas.getContext('2d');
-
-        var tempCanvas = document.createElement('canvas');
-        tempCanvas.width = canvas.width;
-        tempCanvas.height = canvas.height;
-        var tempCtx = tempCanvas.getContext('2d');
-        tempCtx.fillStyle = '#FFFFFF';
-        tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
-        tempCtx.drawImage(canvas, 0, 0);
-
-        tempCanvas.toBlob(function(blob) {
-            var link = document.createElement('a');
-            link.href = URL.createObjectURL(blob);
-            var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol';
-            link.download = 'text-' + filename + '.jpg';
-            link.click();
-            URL.revokeObjectURL(link.href);
-            showNotification('JPG heruntergeladen!');
-        }, 'image/jpeg', 0.95);
-    } catch (err) {
-        console.error('Fehler:', err);
-        showNotification('Fehler beim JPG-Export', 'error');
-    }
-}
-
-function downloadTextDXF() {
-    var svg = generateTextSVG();
-    var dxf = svgToDxf(svg, 1);
-    var blob = new Blob([dxf], { type: 'application/dxf' });
-    var url = URL.createObjectURL(blob);
-    var link = document.createElement('a');
-    link.href = url;
-    var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol';
-    link.download = 'text-' + filename + '.dxf';
-    link.click();
-    URL.revokeObjectURL(url);
-    showNotification('DXF heruntergeladen!');
-}
-
-function addTextToLegend() {
-    var svg = generateTextSVG();
-    var text = textGenState.text || 'Text';
-    var displayName = text.replace(/\n/g, ' ').substring(0, 30);
-
-    legendItems.push({
-        id: 'custom_text_' + Date.now(),
-        name: displayName,
-        svg: svg,
-        description: ''
-    });
-
-    updateLegendCount();
-    saveLegendToStorage();
-    showNotification('Zur Legende hinzugefuegt!');
-}
-
-// ========== CUSTOM SYMBOLS STORAGE ==========
-
-function loadCustomSymbols() {
-    try {
-        var stored = localStorage.getItem('customSymbols');
-        if (stored) {
-            customSymbols = JSON.parse(stored);
-        }
-    } catch (e) {
-        console.error('Fehler beim Laden der eigenen Symbole:', e);
-        customSymbols = [];
-    }
-}
-
-function saveCustomSymbols() {
-    try {
-        localStorage.setItem('customSymbols', JSON.stringify(customSymbols));
-    } catch (e) {
-        console.error('Fehler beim Speichern der eigenen Symbole:', e);
-    }
-}
-
-function openSaveModal() {
-    var modal = document.getElementById('saveModal');
-    var nameInput = document.getElementById('symbolName');
-    var descInput = document.getElementById('symbolDescription');
-
-    var suggestedName = textGenState.text ? textGenState.text.replace(/\n/g, ' ').substring(0, 30) : '';
-    nameInput.value = suggestedName;
-    descInput.value = '';
-
-    modal.style.display = 'flex';
-    nameInput.focus();
-}
-
-function closeSaveModal() {
-    var modal = document.getElementById('saveModal');
-    modal.style.display = 'none';
-}
-
-function saveCustomSymbol() {
-    var nameInput = document.getElementById('symbolName');
-    var descInput = document.getElementById('symbolDescription');
-
-    var name = nameInput.value.trim();
-    if (!name) {
-        showNotification('Bitte einen Namen eingeben!', 'error');
-        return;
-    }
-
-    var svg = generateTextSVG();
-
-    var newSymbol = {
-        id: 'custom_' + Date.now(),
-        name: name,
-        description: descInput.value.trim(),
-        svg: svg,
-        category: 'custom',
-        tags: ['eigene', 'custom', name.toLowerCase()],
-        createdAt: new Date().toISOString(),
-        state: JSON.parse(JSON.stringify(textGenState))
-    };
-
-    customSymbols.push(newSymbol);
-    saveCustomSymbols();
-
-    closeSaveModal();
-    showNotification('Symbol "' + name + '" gespeichert!');
-
-    var activeFilter = document.querySelector('.filter-pill.active');
-    if (activeFilter && activeFilter.dataset.filter === 'custom') {
-        renderSymbolGrid();
-    }
-}
-
-function deleteCustomSymbol(id) {
-    if (!confirm('Symbol wirklich loeschen?')) return;
-
-    customSymbols = customSymbols.filter(function(s) { return s.id !== id; });
-    saveCustomSymbols();
-    renderSymbolGrid();
-    showNotification('Symbol geloescht');
-}
-
-var originalRenderSymbolGrid = typeof renderSymbolGrid === 'function' ? renderSymbolGrid : null;
-
-function renderSymbolGridWithCustom() {
-    var activeFilter = document.querySelector('.filter-pill.active');
-    var filter = activeFilter ? activeFilter.dataset.filter : 'all';
-
-    if (filter === 'custom') {
-        renderCustomSymbolsOnly();
-    } else if (originalRenderSymbolGrid) {
-        originalRenderSymbolGrid();
-        if (filter === 'all') {
-            appendCustomSymbols();
-        }
-    }
-}
-
-function renderCustomSymbolsOnly() {
-    var grid = document.getElementById('symbolGrid');
-    if (!grid) return;
-
-    grid.innerHTML = '';
-
-    if (customSymbols.length === 0) {
-        grid.innerHTML = '<div class="no-results">Noch keine eigenen Symbole gespeichert.<br>Erstelle ein Text-Symbol und klicke auf "Speichern".</div>';
-        return;
-    }
-
-    customSymbols.forEach(function(symbol) {
-        var card = createCustomSymbolCard(symbol);
-        grid.appendChild(card);
-    });
-}
-
-function appendCustomSymbols() {
-    var grid = document.getElementById('symbolGrid');
-    if (!grid || customSymbols.length === 0) return;
-
-    customSymbols.forEach(function(symbol) {
-        var card = createCustomSymbolCard(symbol);
-        grid.appendChild(card);
-    });
-}
-
-function createCustomSymbolCard(symbol) {
-    var card = document.createElement('div');
-    card.className = 'symbol-card';
-    card.innerHTML =
-        '<button class="btn-delete" onclick="event.stopPropagation(); deleteCustomSymbol(\'' + symbol.id + '\')" title="Loeschen">X</button>' +
-        '<div class="symbol-preview">' + symbol.svg + '</div>' +
-        '<div class="symbol-name">' + escapeHtml(symbol.name) + '</div>' +
-        '<div class="symbol-actions">' +
-            '<button class="btn-action btn-copy" onclick="copySymbolAsImage(\'' + symbol.id + '\', true)" title="Kopieren">Kopieren</button>' +
-            '<button class="btn-action btn-svg" onclick="downloadSymbolSVG(\'' + symbol.id + '\', true)" title="SVG">SVG</button>' +
-            '<button class="btn-action btn-dxf" onclick="downloadSymbolDXF(\'' + symbol.id + '\', true)" title="DXF">DXF</button>' +
-            '<button class="btn-action btn-legend" onclick="addSymbolToLegend(\'' + symbol.id + '\', true)" title="Legende">+</button>' +
-        '</div>';
-    return card;
-}
-
-function escapeHtml(text) {
-    var div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-}
-
-function getSymbolById(id, isCustom) {
-    if (isCustom) {
-        return customSymbols.find(function(s) { return s.id === id; });
-    }
-    return allSymbols.find(function(s) { return s.id === id; });
-}
-
-// ========== IMPRESSUM & DATENSCHUTZ ==========
-function openImpressum() {
-    var modal = document.getElementById('impressumModal');
-    if (modal) modal.style.display = 'flex';
-}
-
-function closeImpressum() {
-    var modal = document.getElementById('impressumModal');
-    if (modal) modal.style.display = 'none';
-}
-
-function openDatenschutz() {
-    var modal = document.getElementById('datenschutzModal');
-    if (modal) modal.style.display = 'flex';
-}
-
-function closeDatenschutz() {
-    var modal = document.getElementById('datenschutzModal');
-    if (modal) modal.style.display = 'none';
-}
-
-// Init beim Laden
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initTextGenerator);
-} else {
-    initTextGenerator();
-}
-
-// ========== GLOBAL EXPORTS fuer onclick Handler ==========
-window.resetToDefaults = resetToDefaults;
-window.copyStandaloneArrow = copyStandaloneArrow;
-window.downloadStandaloneArrowSVG = downloadStandaloneArrowSVG;
-window.downloadStandaloneArrowPNG = downloadStandaloneArrowPNG;
-window.downloadStandaloneArrowJPG = downloadStandaloneArrowJPG;
-window.downloadStandaloneArrowDXF = downloadStandaloneArrowDXF;
-window.addStandaloneArrowToLegend = addStandaloneArrowToLegend;
-window.generateTextSVG = generateTextSVG;
-window.copyTextAsImage = copyTextAsImage;
-window.downloadTextSVG = downloadTextSVG;
-window.downloadTextPNG = downloadTextPNG;
-window.downloadTextJPG = downloadTextJPG;
-window.downloadTextDXF = downloadTextDXF;
-window.addTextToLegend = addTextToLegend;
-window.toggleTextGenerator = toggleTextGenerator;
-window.openImpressum = openImpressum;
-window.closeImpressum = closeImpressum;
-window.openDatenschutz = openDatenschutz;
-window.closeDatenschutz = closeDatenschutz;
diff --git a/symbols/js/text-generator/export.js b/symbols/js/text-generator/export.js
index 3b77d10..f7532f7 100644
--- a/symbols/js/text-generator/export.js
+++ b/symbols/js/text-generator/export.js
@@ -319,3 +319,44 @@ window.downloadStandaloneArrowDXF = function() {
         window.TextExport.downloadDxf(svg, 'pfeil.dxf');
     }
 };
+
+// Zur Legende hinzufuegen
+window.addTextToLegend = function() {
+    var state = window.TextGenState.current;
+    var svg = window.SvgGenerator.generate(state);
+    var name = state.text || 'Text-Symbol';
+
+    if (typeof legendItems !== 'undefined' && typeof updateLegendCount === 'function') {
+        legendItems.push({
+            id: 'text_' + Date.now(),
+            name: name.split('\n')[0].substring(0, 30),
+            svg: svg,
+            description: ''
+        });
+        updateLegendCount();
+        saveLegendToStorage();
+        if (typeof showNotification === 'function') {
+            showNotification('Zur Legende hinzugefuegt!');
+        }
+    }
+};
+
+window.addStandaloneArrowToLegend = function() {
+    var state = window.TextGenState.current;
+    var svg = window.SvgGenerator.generateArrowOnly(state);
+    if (!svg) return;
+
+    if (typeof legendItems !== 'undefined' && typeof updateLegendCount === 'function') {
+        legendItems.push({
+            id: 'arrow_' + Date.now(),
+            name: 'Pfeil ' + state.arrow,
+            svg: svg,
+            description: ''
+        });
+        updateLegendCount();
+        saveLegendToStorage();
+        if (typeof showNotification === 'function') {
+            showNotification('Pfeil zur Legende hinzugefuegt!');
+        }
+    }
+};
diff --git a/symbols/js/text-generator/svg-generator.js b/symbols/js/text-generator/svg-generator.js
index c3aabbe..65938fc 100644
--- a/symbols/js/text-generator/svg-generator.js
+++ b/symbols/js/text-generator/svg-generator.js
@@ -44,9 +44,19 @@ var SvgGenerator = {
             case 'rect':
                 shapeEl = draw.rect(width, height).move(x, y).radius(4);
                 break;
+            case 'square':
+                var squareSize = Math.max(width, height);
+                var squareX = x - (squareSize - width) / 2;
+                var squareY = y - (squareSize - height) / 2;
+                shapeEl = draw.rect(squareSize, squareSize).move(squareX, squareY).radius(4);
+                break;
             case 'rounded':
                 shapeEl = draw.rect(width, height).move(x, y).radius(Math.min(halfW, halfH) * 0.5);
                 break;
+            case 'circle':
+                var circleRadius = Math.max(halfW, halfH);
+                shapeEl = draw.circle(circleRadius * 2).center(cx, cy);
+                break;
             case 'oval':
                 shapeEl = draw.ellipse(width, height).center(cx, cy);
                 break;
diff --git a/symbols/js/text-generator/ui-bindings.js b/symbols/js/text-generator/ui-bindings.js
index 72740c5..0e6a16d 100644
--- a/symbols/js/text-generator/ui-bindings.js
+++ b/symbols/js/text-generator/ui-bindings.js
@@ -18,11 +18,13 @@ var UiBindings = {
         var e = this.elements;
 
         // Text & Farben
-        e.textInput = document.getElementById('textInput');
+        e.textInput = document.getElementById('customText');
         e.fontSizeInput = document.getElementById('fontSize');
         e.fontSizeValue = document.getElementById('fontSizeValue');
         e.textColorInput = document.getElementById('textColor');
+        e.textColorValue = document.getElementById('textColorValue');
         e.frameColorInput = document.getElementById('frameColor');
+        e.frameColorValue = document.getElementById('frameColorValue');
 
         // Rahmen
         e.frameScaleInput = document.getElementById('frameScale');
@@ -30,16 +32,16 @@ var UiBindings = {
         e.frameScaleRow = document.getElementById('frameScaleRow');
 
         // Padding
-        e.paddingAllInput = document.getElementById('framePaddingAll');
-        e.paddingAllValue = document.getElementById('framePaddingAllValue');
-        e.paddingTopInput = document.getElementById('framePaddingTop');
-        e.paddingTopValue = document.getElementById('framePaddingTopValue');
-        e.paddingRightInput = document.getElementById('framePaddingRight');
-        e.paddingRightValue = document.getElementById('framePaddingRightValue');
-        e.paddingBottomInput = document.getElementById('framePaddingBottom');
-        e.paddingBottomValue = document.getElementById('framePaddingBottomValue');
-        e.paddingLeftInput = document.getElementById('framePaddingLeft');
-        e.paddingLeftValue = document.getElementById('framePaddingLeftValue');
+        e.paddingAllInput = document.getElementById('paddingAll');
+        e.paddingAllValue = document.getElementById('paddingAllValue');
+        e.paddingTopInput = document.getElementById('paddingTop');
+        e.paddingTopValue = document.getElementById('paddingTopValue');
+        e.paddingRightInput = document.getElementById('paddingRight');
+        e.paddingRightValue = document.getElementById('paddingRightValue');
+        e.paddingBottomInput = document.getElementById('paddingBottom');
+        e.paddingBottomValue = document.getElementById('paddingBottomValue');
+        e.paddingLeftInput = document.getElementById('paddingLeft');
+        e.paddingLeftValue = document.getElementById('paddingLeftValue');
         e.paddingAllRow = document.getElementById('framePaddingAllRow');
         e.paddingRow = document.getElementById('framePaddingRow');
 
@@ -64,8 +66,8 @@ var UiBindings = {
         // Buttons
         e.shapeButtons = document.querySelectorAll('.shape-btn');
         e.arrowButtons = document.querySelectorAll('.arrow-btn');
-        e.lineStyleButtons = document.querySelectorAll('.line-style-btn');
-        e.lineWeightButtons = document.querySelectorAll('.line-weight-btn');
+        e.lineStyleButtons = document.querySelectorAll('.line-btn');
+        e.lineWeightButtons = document.querySelectorAll('.weight-btn');
     },
 
     bindEvents: function() {
@@ -95,12 +97,14 @@ var UiBindings = {
         if (e.textColorInput) {
             e.textColorInput.addEventListener('input', function(ev) {
                 state.set('textColor', ev.target.value);
+                if (e.textColorValue) e.textColorValue.textContent = ev.target.value;
                 self.updatePreview();
             });
         }
         if (e.frameColorInput) {
             e.frameColorInput.addEventListener('input', function(ev) {
                 state.set('frameColor', ev.target.value);
+                if (e.frameColorValue) e.frameColorValue.textContent = ev.target.value;
                 self.updatePreview();
             });
         }
diff --git a/symbols/symbols.js b/symbols/symbols.js
deleted file mode 100644
index 090d92e..0000000
--- a/symbols/symbols.js
+++ /dev/null
@@ -1,912 +0,0 @@
-// ============================================
-// SYMBOL-DEFINITIONEN
-// Gutachter Symbolbibliothek v2.0
-// ============================================
-
-const SYMBOLS = {
-    // ========== SCHADENSARTEN ==========
-    schaeden: {
-        name: "Schadensarten",
-        icon: "🔥",
-        items: [
-            {
-                id: "wasserschaden",
-                name: "Wasserschaden",
-                filename: "wasserschaden_symbol.svg",
-                tags: ["wasser", "feuchtigkeit", "nass"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 4 C32 4 12 28 12 42 C12 53 21 60 32 60 C43 60 52 53 52 42 C52 28 32 4 32 4 Z" fill="#3b82f6" stroke="#2563eb" stroke-width="2"/><ellipse cx="24" cy="38" rx="6" ry="10" fill="#93c5fd" opacity="0.5"/><circle cx="22" cy="32" r="3" fill="#dbeafe" opacity="0.7"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">W</text></svg>`
-            },
-            {
-                id: "brandschaden",
-                name: "Brandschaden",
-                filename: "brandschaden_symbol.svg",
-                tags: ["feuer", "brand", "flamme"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 2 C32 2 18 18 18 34 C18 42 22 50 28 54 C24 48 24 40 28 34 C28 42 32 48 38 50 C34 44 36 36 40 32 C40 40 44 46 48 48 C50 44 52 38 52 34 C52 18 32 2 32 2 Z" fill="#f97316" stroke="#ea580c" stroke-width="1"/><path d="M32 14 C32 14 22 26 22 38 C22 44 26 50 32 52 C28 48 28 42 32 38 C32 44 36 48 40 48 C44 44 46 40 46 36 C46 26 32 14 32 14 Z" fill="#fb923c"/><path d="M32 26 C32 26 26 34 26 42 C26 46 28 50 32 52 C30 48 30 44 32 42 C34 46 36 48 38 48 C40 46 42 44 42 42 C42 34 32 26 32 26 Z" fill="#fbbf24"/><ellipse cx="32" cy="48" rx="4" ry="6" fill="#fef08a"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">B</text></svg>`
-            },
-            {
-                id: "rauchschaden",
-                name: "Rauchschaden",
-                filename: "rauchschaden_symbol.svg",
-                tags: ["rauch", "russ", "qualm"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="54" rx="14" ry="6" fill="#4b5563" opacity="0.9"/><ellipse cx="24" cy="42" rx="10" ry="8" fill="#6b7280" opacity="0.8"/><ellipse cx="40" cy="40" rx="12" ry="9" fill="#6b7280" opacity="0.75"/><ellipse cx="32" cy="28" rx="14" ry="10" fill="#9ca3af" opacity="0.7"/><ellipse cx="20" cy="24" rx="8" ry="7" fill="#9ca3af" opacity="0.6"/><ellipse cx="44" cy="26" rx="9" ry="7" fill="#9ca3af" opacity="0.6"/><ellipse cx="32" cy="14" rx="10" ry="7" fill="#d1d5db" opacity="0.5"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">R</text></svg>`
-            },
-            {
-                id: "leitungswasser",
-                name: "Leitungswasser / Rohrbruch",
-                filename: "leitungswasserschaden_symbol.svg",
-                tags: ["rohr", "leitung", "bruch", "wasser"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="2" y="24" width="22" height="16" rx="2" fill="#71717a" stroke="#52525b" stroke-width="2"/><rect x="20" y="22" width="6" height="20" rx="1" fill="#a1a1aa" stroke="#71717a" stroke-width="1"/><rect x="40" y="24" width="22" height="16" rx="2" fill="#71717a" stroke="#52525b" stroke-width="2"/><rect x="38" y="22" width="6" height="20" rx="1" fill="#a1a1aa" stroke="#71717a" stroke-width="1"/><path d="M26 22 L28 28 L26 32 L28 36 L26 42" stroke="#dc2626" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M38 22 L36 28 L38 32 L36 36 L38 42" stroke="#dc2626" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M30 28 Q34 20 38 10" stroke="#3b82f6" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M31 32 Q36 32 42 28" stroke="#3b82f6" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M30 36 Q34 44 38 54" stroke="#3b82f6" stroke-width="3" fill="none" stroke-linecap="round"/><circle cx="40" cy="8" r="3" fill="#60a5fa"/><circle cx="36" cy="56" r="3" fill="#60a5fa"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="16" fill="#000" text-anchor="middle">LW</text></svg>`
-            },
-            {
-                id: "schimmel",
-                name: "Schimmelschaden",
-                filename: "schimmelschaden_symbol.svg",
-                tags: ["schimmel", "pilz", "feucht", "sporen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="34" rx="24" ry="20" fill="#1f2937" opacity="0.3"/><ellipse cx="24" cy="28" rx="10" ry="8" fill="#166534"/><ellipse cx="38" cy="32" rx="12" ry="10" fill="#15803d"/><ellipse cx="28" cy="40" rx="9" ry="7" fill="#166534"/><ellipse cx="42" cy="24" rx="7" ry="6" fill="#14532d"/><ellipse cx="18" cy="38" rx="6" ry="5" fill="#15803d"/><circle cx="20" cy="26" r="2" fill="#052e16"/><circle cx="30" cy="30" r="2.5" fill="#052e16"/><circle cx="40" cy="28" r="2" fill="#052e16"/><circle cx="35" cy="38" r="2" fill="#052e16"/><circle cx="52" cy="12" r="10" fill="#dc2626"/><text x="52" y="17" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle">!</text></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">S</text></svg>`
-            },
-            {
-                id: "sturm",
-                name: "Sturmschaden",
-                filename: "sturmschaden_symbol.svg",
-                tags: ["sturm", "wind", "dach", "unwetter"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="32" width="28" height="24" fill="#78716c" stroke="#57534e" stroke-width="2"/><polygon points="10,32 28,14 50,32" fill="#991b1b" stroke="#7f1d1d" stroke-width="2"/><polygon points="38,18 46,26 50,22 42,14" fill="#78716c" stroke="#57534e" stroke-width="1"/><rect x="18" y="38" width="8" height="8" fill="#bfdbfe" stroke="#57534e" stroke-width="1"/><rect x="30" y="38" width="8" height="8" fill="#bfdbfe" stroke="#57534e" stroke-width="1"/><rect x="24" y="46" width="8" height="10" fill="#44403c"/><path d="M48 10 Q56 10 54 6" stroke="#6b7280" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M50 18 Q60 18 58 14" stroke="#6b7280" stroke-width="3" fill="none" stroke-linecap="round"/><path d="M52 26 Q62 26 60 22" stroke="#6b7280" stroke-width="2" fill="none" stroke-linecap="round"/><rect x="54" y="8" width="6" height="3" fill="#991b1b" transform="rotate(25 57 9)"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="16" fill="#000" text-anchor="middle">ST</text></svg>`
-            },
-            {
-                id: "einbruch",
-                name: "Einbruchschaden",
-                filename: "einbruchschaden_symbol.svg",
-                tags: ["einbruch", "diebstahl", "fenster", "tür"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="8" width="48" height="48" fill="none" stroke="#57534e" stroke-width="4" rx="2"/><line x1="32" y1="8" x2="32" y2="56" stroke="#57534e" stroke-width="3"/><line x1="8" y1="32" x2="56" y2="32" stroke="#57534e" stroke-width="3"/><polygon points="12,12 20,20 12,28 18,20" fill="#bfdbfe" stroke="#93c5fd" stroke-width="1"/><polygon points="20,14 28,12 24,24 16,20" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/><polygon points="10,36 18,42 12,52 8,44" fill="#bfdbfe" stroke="#93c5fd" stroke-width="1"/><rect x="36" y="16" width="4" height="32" rx="1" fill="#1f2937" transform="rotate(20 38 32)"/><rect x="34" y="14" width="8" height="6" rx="1" fill="#1f2937" transform="rotate(20 38 17)"/><circle cx="52" cy="52" r="8" fill="#dc2626"/><line x1="48" y1="48" x2="56" y2="56" stroke="white" stroke-width="2" stroke-linecap="round"/><line x1="56" y1="48" x2="48" y2="56" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="16" fill="#000" text-anchor="middle">EB</text></svg>`
-            },
-            {
-                id: "elektro",
-                name: "Elektroschaden",
-                filename: "elektroschaden_symbol.svg",
-                tags: ["elektro", "strom", "blitz", "kurzschluss"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="36,2 20,28 30,28 24,46 44,18 34,18" fill="#fbbf24" stroke="#f59e0b" stroke-width="2" stroke-linejoin="round"/><rect x="12" y="38" width="24" height="22" rx="3" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/><circle cx="20" cy="46" r="3" fill="#1f2937"/><circle cx="28" cy="46" r="3" fill="#1f2937"/><rect x="22" y="52" width="4" height="4" rx="1" fill="#1f2937"/><line x1="40" y1="42" x2="48" y2="38" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><line x1="42" y1="48" x2="52" y2="46" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><line x1="40" y1="54" x2="50" y2="56" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><polygon points="50,36 46,42 48,42 46,48 52,40 50,40" fill="#fbbf24"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">E</text></svg>`
-            },
-            {
-                id: "hagel",
-                name: "Hagelschaden",
-                filename: "hagelschaden_symbol.svg",
-                tags: ["hagel", "eis", "dellen", "unwetter"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="20" rx="24" ry="14" fill="#6b7280"/><ellipse cx="32" cy="18" rx="22" ry="12" fill="#9ca3af"/><circle cx="14" cy="36" r="6" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="32" cy="40" r="7" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="50" cy="34" r="5" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="22" cy="52" r="6" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><circle cx="44" cy="50" r="5" fill="#e0f2fe" stroke="#7dd3fc" stroke-width="2"/><line x1="14" y1="26" x2="14" y2="30" stroke="#7dd3fc" stroke-width="2"/><line x1="32" y1="24" x2="32" y2="32" stroke="#7dd3fc" stroke-width="2"/><line x1="50" y1="26" x2="50" y2="28" stroke="#7dd3fc" stroke-width="2"/><line x1="22" y1="28" x2="22" y2="46" stroke="#7dd3fc" stroke-width="1.5"/><line x1="44" y1="28" x2="44" y2="44" stroke="#7dd3fc" stroke-width="1.5"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">H</text></svg>`
-            },
-            {
-                id: "vandalismus",
-                name: "Vandalismus",
-                filename: "vandalismus_symbol.svg",
-                tags: ["vandalismus", "graffiti", "zerstörung", "sachbeschädigung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="20" width="56" height="40" fill="#d6d3d1" stroke="#78716c" stroke-width="2"/><path d="M10 30 Q20 25 30 35 Q40 45 50 30" stroke="#dc2626" stroke-width="4" fill="none" stroke-linecap="round"/><path d="M15 45 Q25 55 35 40 Q45 25 55 45" stroke="#2563eb" stroke-width="3" fill="none" stroke-linecap="round"/><text x="32" y="54" font-family="Arial" font-size="10" fill="#000" text-anchor="middle" font-style="italic">TAG</text><circle cx="52" cy="12" r="10" fill="#dc2626"/><line x1="48" y1="8" x2="56" y2="16" stroke="white" stroke-width="2.5" stroke-linecap="round"/><line x1="56" y1="8" x2="48" y2="16" stroke="white" stroke-width="2.5" stroke-linecap="round"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="20" fill="#000" text-anchor="middle">V</text></svg>`
-            }
-        ]
-    },
-
-    // ========== WERKZEUGE & MARKIERUNGEN ==========
-    werkzeuge: {
-        name: "Werkzeuge & Markierungen",
-        icon: "🔧",
-        items: [
-            {
-                id: "massstab",
-                name: "Maßstab 1m",
-                filename: "massstab_1m.svg",
-                tags: ["maßstab", "meter", "lineal", "messen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="16" fill="#fef3c7" stroke="#f59e0b" stroke-width="2"/><g stroke="#92400e" stroke-width="1"><line x1="4" y1="28" x2="4" y2="36"/><line x1="10" y1="30" x2="10" y2="34"/><line x1="16" y1="30" x2="16" y2="34"/><line x1="22" y1="30" x2="22" y2="34"/><line x1="28" y1="30" x2="28" y2="34"/><line x1="32" y1="28" x2="32" y2="36"/><line x1="38" y1="30" x2="38" y2="34"/><line x1="44" y1="30" x2="44" y2="34"/><line x1="50" y1="30" x2="50" y2="34"/><line x1="56" y1="30" x2="56" y2="34"/><line x1="60" y1="28" x2="60" y2="36"/></g><text x="8" y="22" font-family="Arial" font-size="8" fill="#92400e">0</text><text x="28" y="22" font-family="Arial" font-size="8" fill="#92400e">50</text><text x="54" y="22" font-family="Arial" font-size="8" fill="#92400e">100</text><text x="32" y="48" font-family="Arial" font-size="10" fill="#92400e" text-anchor="middle">1 Meter</text></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="16" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="28" x2="4" y2="36" stroke="#000" stroke-width="1"/><line x1="32" y1="28" x2="32" y2="36" stroke="#000" stroke-width="1"/><line x1="60" y1="28" x2="60" y2="36" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "messpunkt",
-                name: "Messpunkt",
-                filename: "messpunkt.svg",
-                tags: ["messpunkt", "markierung", "punkt", "messen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#dc2626" stroke-width="3"/><circle cx="32" cy="32" r="16" fill="none" stroke="#dc2626" stroke-width="2"/><circle cx="32" cy="32" r="6" fill="#dc2626"/><line x1="32" y1="2" x2="32" y2="14" stroke="#dc2626" stroke-width="2"/><line x1="32" y1="50" x2="32" y2="62" stroke="#dc2626" stroke-width="2"/><line x1="2" y1="32" x2="14" y2="32" stroke="#dc2626" stroke-width="2"/><line x1="50" y1="32" x2="62" y2="32" stroke="#dc2626" stroke-width="2"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><circle cx="32" cy="32" r="4" fill="none" stroke="#000" stroke-width="1"/><line x1="32" y1="4" x2="32" y2="60" stroke="#000" stroke-width="0.5"/><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="0.5"/></svg>`
-            },
-            {
-                id: "kamera",
-                name: "Fotostandpunkt",
-                filename: "fotostandpunkt.svg",
-                tags: ["foto", "kamera", "standpunkt", "aufnahme"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="20" width="48" height="32" rx="4" fill="#374151" stroke="#1f2937" stroke-width="2"/><circle cx="32" cy="36" r="12" fill="#1f2937" stroke="#6b7280" stroke-width="2"/><circle cx="32" cy="36" r="8" fill="#3b82f6"/><circle cx="32" cy="36" r="4" fill="#1e3a5f"/><rect x="20" y="14" width="24" height="8" rx="2" fill="#4b5563"/><circle cx="48" cy="26" r="3" fill="#fbbf24"/><rect x="10" y="26" width="6" height="4" rx="1" fill="#6b7280"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="38" font-family="Arial" font-size="16" fill="#000" text-anchor="middle">FO</text></svg>`
-            },
-            {
-                id: "lupe",
-                name: "Detailbereich",
-                filename: "detailbereich.svg",
-                tags: ["detail", "lupe", "vergrößerung", "zoom"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="26" cy="26" r="20" fill="#dbeafe" stroke="#3b82f6" stroke-width="3"/><circle cx="26" cy="26" r="14" fill="white" stroke="#93c5fd" stroke-width="2"/><line x1="40" y1="40" x2="58" y2="58" stroke="#3b82f6" stroke-width="6" stroke-linecap="round"/><line x1="40" y1="40" x2="56" y2="56" stroke="#60a5fa" stroke-width="3" stroke-linecap="round"/><text x="26" y="30" font-family="Arial" font-size="14" fill="#3b82f6" text-anchor="middle" font-weight="bold">+</text></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="26" cy="26" r="20" fill="none" stroke="#000" stroke-width="1"/><line x1="40" y1="40" x2="58" y2="58" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "notiz",
-                name: "Notiz / Hinweis",
-                filename: "notiz_hinweis.svg",
-                tags: ["notiz", "hinweis", "anmerkung", "text"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M8 4 L56 4 L56 48 L40 48 L40 60 L8 60 Z" fill="#fef3c7" stroke="#f59e0b" stroke-width="2"/><path d="M40 48 L56 48 L40 60 Z" fill="#fcd34d" stroke="#f59e0b" stroke-width="2"/><line x1="14" y1="16" x2="50" y2="16" stroke="#d97706" stroke-width="2"/><line x1="14" y1="26" x2="50" y2="26" stroke="#d97706" stroke-width="2"/><line x1="14" y1="36" x2="50" y2="36" stroke="#d97706" stroke-width="2"/><line x1="14" y1="46" x2="34" y2="46" stroke="#d97706" stroke-width="2"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" fill="none" stroke="#000" stroke-width="1"/><line x1="14" y1="16" x2="50" y2="16" stroke="#000" stroke-width="0.5"/><line x1="14" y1="26" x2="50" y2="26" stroke="#000" stroke-width="0.5"/><line x1="14" y1="36" x2="50" y2="36" stroke="#000" stroke-width="0.5"/></svg>`
-            },
-            {
-                id: "warnung",
-                name: "Warnung / Achtung",
-                filename: "warnung_achtung.svg",
-                tags: ["warnung", "achtung", "gefahr", "vorsicht"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 60,56 4,56" fill="#fbbf24" stroke="#f59e0b" stroke-width="2" stroke-linejoin="round"/><polygon points="32,10 54,52 10,52" fill="#fef3c7"/><text x="32" y="46" font-family="Arial" font-size="32" fill="#92400e" text-anchor="middle" font-weight="bold">!</text></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 60,56 4,56" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="46" font-family="Arial" font-size="24" fill="#000" text-anchor="middle">!</text></svg>`
-            },
-            {
-                id: "info",
-                name: "Information",
-                filename: "information.svg",
-                tags: ["info", "information", "hinweis", "details"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#3b82f6" stroke="#2563eb" stroke-width="2"/><circle cx="32" cy="16" r="4" fill="white"/><rect x="28" y="26" width="8" height="24" rx="2" fill="white"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="40" font-family="Arial" font-size="28" fill="#000" text-anchor="middle">i</text></svg>`
-            },
-            {
-                id: "haken",
-                name: "Erledigt / OK",
-                filename: "erledigt_ok.svg",
-                tags: ["ok", "erledigt", "fertig", "haken", "check"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#22c55e" stroke="#16a34a" stroke-width="2"/><polyline points="18,32 28,42 46,22" fill="none" stroke="white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><polyline points="18,32 28,42 46,22" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "kreuz",
-                name: "Fehler / Mangel",
-                filename: "fehler_mangel.svg",
-                tags: ["fehler", "mangel", "falsch", "kreuz"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#dc2626" stroke="#b91c1c" stroke-width="2"/><line x1="20" y1="20" x2="44" y2="44" stroke="white" stroke-width="6" stroke-linecap="round"/><line x1="44" y1="20" x2="20" y2="44" stroke="white" stroke-width="6" stroke-linecap="round"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><line x1="20" y1="20" x2="44" y2="44" stroke="#000" stroke-width="1.5"/><line x1="44" y1="20" x2="20" y2="44" stroke="#000" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "fragezeichen",
-                name: "Unklar / Prüfen",
-                filename: "unklar_pruefen.svg",
-                tags: ["unklar", "prüfen", "frage", "unbekannt"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="#f59e0b" stroke="#d97706" stroke-width="2"/><text x="32" y="44" font-family="Arial" font-size="36" fill="white" text-anchor="middle" font-weight="bold">?</text></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="40" font-family="Arial" font-size="28" fill="#000" text-anchor="middle">?</text></svg>`
-            }
-        ]
-    },
-
-    // ========== BAUTEILE ==========
-    bauteile: {
-        name: "Bauteile",
-        icon: "🏗️",
-        items: [
-            {
-                id: "fenster",
-                name: "Fenster",
-                filename: "bauteil_fenster.svg",
-                tags: ["fenster", "verglasung", "rahmen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" fill="#bfdbfe" stroke="#3b82f6" stroke-width="3"/><line x1="32" y1="4" x2="32" y2="60" stroke="#3b82f6" stroke-width="3"/><line x1="8" y1="32" x2="56" y2="32" stroke="#3b82f6" stroke-width="3"/><rect x="12" y="8" width="16" height="20" fill="#dbeafe"/><rect x="36" y="8" width="16" height="20" fill="#dbeafe"/><rect x="12" y="36" width="16" height="20" fill="#dbeafe"/><rect x="36" y="36" width="16" height="20" fill="#dbeafe"/><circle cx="28" cy="32" r="2" fill="#1e40af"/><circle cx="36" cy="32" r="2" fill="#1e40af"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" fill="none" stroke="#000" stroke-width="1"/><line x1="32" y1="4" x2="32" y2="60" stroke="#000" stroke-width="1"/><line x1="8" y1="32" x2="56" y2="32" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "tuer",
-                name: "Tür",
-                filename: "bauteil_tuer.svg",
-                tags: ["tür", "türblatt", "eingang"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="12" y="4" width="40" height="56" fill="#92400e" stroke="#78350f" stroke-width="3"/><rect x="16" y="8" width="14" height="20" fill="#a16207" rx="1"/><rect x="34" y="8" width="14" height="20" fill="#a16207" rx="1"/><rect x="16" y="32" width="14" height="20" fill="#a16207" rx="1"/><rect x="34" y="32" width="14" height="20" fill="#a16207" rx="1"/><circle cx="44" cy="34" r="3" fill="#fbbf24" stroke="#92400e" stroke-width="1"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="1"/><path d="M4 32 A28 28 0 0 1 32 4" fill="none" stroke="#000" stroke-width="0.5"/></svg>`
-            },
-            {
-                id: "wand",
-                name: "Wand (Mauerwerk)",
-                filename: "bauteil_wand.svg",
-                tags: ["wand", "mauer", "mauerwerk", "ziegel"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#fca5a5" stroke="#dc2626" stroke-width="2"/><g stroke="#b91c1c" stroke-width="1"><line x1="4" y1="12" x2="60" y2="12"/><line x1="4" y1="20" x2="60" y2="20"/><line x1="4" y1="28" x2="60" y2="28"/><line x1="4" y1="36" x2="60" y2="36"/><line x1="4" y1="44" x2="60" y2="44"/><line x1="4" y1="52" x2="60" y2="52"/><line x1="18" y1="4" x2="18" y2="12"/><line x1="40" y1="4" x2="40" y2="12"/><line x1="8" y1="12" x2="8" y2="20"/><line x1="30" y1="12" x2="30" y2="20"/><line x1="52" y1="12" x2="52" y2="20"/><line x1="18" y1="20" x2="18" y2="28"/><line x1="40" y1="20" x2="40" y2="28"/><line x1="8" y1="28" x2="8" y2="36"/><line x1="30" y1="28" x2="30" y2="36"/><line x1="52" y1="28" x2="52" y2="36"/><line x1="18" y1="36" x2="18" y2="44"/><line x1="40" y1="36" x2="40" y2="44"/><line x1="8" y1="44" x2="8" y2="52"/><line x1="30" y1="44" x2="30" y2="52"/><line x1="52" y1="44" x2="52" y2="52"/><line x1="18" y1="52" x2="18" y2="60"/><line x1="40" y1="52" x2="40" y2="60"/></g></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="16" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="24" x2="60" y2="40" stroke="#000" stroke-width="0.5"/><line x1="60" y1="24" x2="4" y2="40" stroke="#000" stroke-width="0.5"/></svg>`
-            },
-            {
-                id: "wand_beton",
-                name: "Wand (Beton)",
-                filename: "bauteil_wand_beton.svg",
-                tags: ["wand", "beton", "stahlbeton", "massiv"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#9ca3af" stroke="#6b7280" stroke-width="2"/><circle cx="12" cy="14" r="2" fill="#6b7280" opacity="0.5"/><circle cx="28" cy="8" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="48" cy="18" r="2.5" fill="#6b7280" opacity="0.5"/><circle cx="8" cy="36" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="38" cy="28" r="2" fill="#6b7280" opacity="0.5"/><circle cx="54" cy="42" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="18" cy="48" r="2" fill="#6b7280" opacity="0.5"/><circle cx="44" cy="52" r="1.5" fill="#6b7280" opacity="0.4"/><circle cx="32" cy="44" r="2.5" fill="#6b7280" opacity="0.5"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="16" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "boden_fliesen",
-                name: "Fliesen",
-                filename: "bauteil_fliesen.svg",
-                tags: ["fliesen", "boden", "wand", "keramik", "kacheln"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#e7e5e4" stroke="#78716c" stroke-width="2"/><g stroke="#a8a29e" stroke-width="2"><line x1="4" y1="18" x2="60" y2="18"/><line x1="4" y1="32" x2="60" y2="32"/><line x1="4" y1="46" x2="60" y2="46"/><line x1="18" y1="4" x2="18" y2="60"/><line x1="32" y1="4" x2="32" y2="60"/><line x1="46" y1="4" x2="46" y2="60"/></g><rect x="6" y="6" width="10" height="10" fill="#f5f5f4"/><rect x="34" y="20" width="10" height="10" fill="#f5f5f4"/><rect x="20" y="34" width="10" height="10" fill="#f5f5f4"/><rect x="48" y="48" width="10" height="10" fill="#f5f5f4"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="18" x2="60" y2="18" stroke="#000" stroke-width="0.5"/><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="0.5"/><line x1="4" y1="46" x2="60" y2="46" stroke="#000" stroke-width="0.5"/><line x1="18" y1="4" x2="18" y2="60" stroke="#000" stroke-width="0.5"/><line x1="32" y1="4" x2="32" y2="60" stroke="#000" stroke-width="0.5"/><line x1="46" y1="4" x2="46" y2="60" stroke="#000" stroke-width="0.5"/></svg>`
-            },
-            {
-                id: "boden_parkett",
-                name: "Parkett / Holzboden",
-                filename: "bauteil_parkett.svg",
-                tags: ["parkett", "holz", "boden", "laminat", "dielen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#d4a574" stroke="#92400e" stroke-width="2"/><g stroke="#b8860b" stroke-width="1"><rect x="4" y="4" width="14" height="28" fill="#deb887"/><rect x="18" y="4" width="14" height="28" fill="#d4a574"/><rect x="32" y="4" width="14" height="28" fill="#c9a066"/><rect x="46" y="4" width="14" height="28" fill="#deb887"/><rect x="4" y="32" width="14" height="28" fill="#c9a066"/><rect x="18" y="32" width="14" height="28" fill="#deb887"/><rect x="32" y="32" width="14" height="28" fill="#d4a574"/><rect x="46" y="32" width="14" height="28" fill="#c9a066"/></g></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="none" stroke="#000" stroke-width="1"/><line x1="18" y1="4" x2="18" y2="60" stroke="#000" stroke-width="0.5"/><line x1="32" y1="4" x2="32" y2="60" stroke="#000" stroke-width="0.5"/><line x1="46" y1="4" x2="46" y2="60" stroke="#000" stroke-width="0.5"/><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="0.5"/></svg>`
-            },
-            {
-                id: "dach",
-                name: "Dach",
-                filename: "bauteil_dach.svg",
-                tags: ["dach", "dachstuhl", "ziegel", "bedachung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 4,40 60,40" fill="#991b1b" stroke="#7f1d1d" stroke-width="2"/><polygon points="32,10 10,38 54,38" fill="#b91c1c"/><g stroke="#7f1d1d" stroke-width="1"><line x1="12" y1="36" x2="52" y2="36"/><line x1="16" y1="32" x2="48" y2="32"/><line x1="20" y1="28" x2="44" y2="28"/><line x1="24" y1="24" x2="40" y2="24"/><line x1="28" y1="20" x2="36" y2="20"/></g><rect x="4" y="40" width="56" height="8" fill="#78716c" stroke="#57534e" stroke-width="1"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 4,40 60,40" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="40" x2="60" y2="40" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "treppe",
-                name: "Treppe",
-                filename: "bauteil_treppe.svg",
-                tags: ["treppe", "stufen", "aufgang", "treppenhaus"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="#d6d3d1" stroke="#78716c" stroke-width="2"><rect x="4" y="52" width="56" height="8"/><rect x="4" y="44" width="48" height="8"/><rect x="4" y="36" width="40" height="8"/><rect x="4" y="28" width="32" height="8"/><rect x="4" y="20" width="24" height="8"/><rect x="4" y="12" width="16" height="8"/><rect x="4" y="4" width="8" height="8"/></g><path d="M8 8 L8 56 L58 56" stroke="#57534e" stroke-width="3" fill="none"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M4 60 L4 52 L12 52 L12 44 L20 44 L20 36 L28 36 L28 28 L36 28 L36 20 L44 20 L44 12 L52 12 L52 4 L60 4" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "daemmung",
-                name: "Dämmung / Isolierung",
-                filename: "bauteil_daemmung.svg",
-                tags: ["dämmung", "isolierung", "wärme", "kälte"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="#fef08a" stroke="#eab308" stroke-width="2"/><g stroke="#ca8a04" stroke-width="1"><path d="M4 14 Q16 10 28 14 Q40 18 52 14 L60 14"/><path d="M4 24 Q14 28 26 24 Q38 20 50 24 L60 24"/><path d="M4 34 Q16 30 28 34 Q40 38 52 34 L60 34"/><path d="M4 44 Q14 48 26 44 Q38 40 50 44 L60 44"/><path d="M4 54 Q16 50 28 54 Q40 58 52 54 L60 54"/></g><circle cx="12" cy="20" r="2" fill="#facc15"/><circle cx="32" cy="30" r="2" fill="#facc15"/><circle cx="50" cy="40" r="2" fill="#facc15"/><circle cx="20" cy="50" r="2" fill="#facc15"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="16" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="28" x2="60" y2="28" stroke="#000" stroke-width="0.5"/><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="0.5"/><line x1="4" y1="36" x2="60" y2="36" stroke="#000" stroke-width="0.5"/></svg>`
-            },
-            {
-                id: "rohr",
-                name: "Rohrleitung",
-                filename: "bauteil_rohr.svg",
-                tags: ["rohr", "leitung", "rohrleitung", "installation"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="26" width="56" height="12" fill="#6b7280" stroke="#4b5563" stroke-width="2"/><ellipse cx="4" cy="32" rx="3" ry="8" fill="#9ca3af" stroke="#4b5563" stroke-width="1"/><ellipse cx="60" cy="32" rx="3" ry="8" fill="#9ca3af" stroke="#4b5563" stroke-width="1"/><line x1="14" y1="26" x2="14" y2="38" stroke="#4b5563" stroke-width="1"/><line x1="32" y1="26" x2="32" y2="38" stroke="#4b5563" stroke-width="1"/><line x1="50" y1="26" x2="50" y2="38" stroke="#4b5563" stroke-width="1"/><rect x="20" y="22" width="8" height="20" rx="1" fill="#ef4444" stroke="#dc2626" stroke-width="1"/><polygon points="24,18 20,22 28,22" fill="#ef4444"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="28" x2="60" y2="28" stroke="#000" stroke-width="1"/><line x1="4" y1="36" x2="60" y2="36" stroke="#000" stroke-width="1"/><circle cx="4" cy="32" r="4" fill="none" stroke="#000" stroke-width="1"/><circle cx="60" cy="32" r="4" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            }
-        ]
-    },
-
-    // ========== MÖBEL ==========
-    moebel: {
-        name: "Möbel",
-        icon: "🛋️",
-        items: [
-            {
-                id: "sofa",
-                name: "Sofa / Couch",
-                filename: "moebel_sofa.svg",
-                tags: ["sofa", "couch", "sitzmoebel", "wohnzimmer"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="24" width="56" height="28" rx="4" fill="#78716c" stroke="#57534e" stroke-width="2"/><rect x="8" y="20" width="48" height="20" rx="3" fill="#a8a29e" stroke="#78716c" stroke-width="1"/><rect x="4" y="28" width="10" height="20" rx="2" fill="#78716c" stroke="#57534e" stroke-width="1"/><rect x="50" y="28" width="10" height="20" rx="2" fill="#78716c" stroke="#57534e" stroke-width="1"/><rect x="6" y="52" width="6" height="6" rx="1" fill="#57534e"/><rect x="52" y="52" width="6" height="6" rx="1" fill="#57534e"/><line x1="22" y1="24" x2="22" y2="40" stroke="#57534e" stroke-width="1" opacity="0.5"/><line x1="42" y1="24" x2="42" y2="40" stroke="#57534e" stroke-width="1" opacity="0.5"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="12" width="56" height="40" fill="none" stroke="#000" stroke-width="1"/><rect x="4" y="12" width="8" height="40" fill="none" stroke="#000" stroke-width="1"/><rect x="52" y="12" width="8" height="40" fill="none" stroke="#000" stroke-width="1"/><line x1="22" y1="12" x2="22" y2="52" stroke="#000" stroke-width="0.5"/><line x1="42" y1="12" x2="42" y2="52" stroke="#000" stroke-width="0.5"/></svg>`
-            },
-            {
-                id: "tisch",
-                name: "Tisch",
-                filename: "moebel_tisch.svg",
-                tags: ["tisch", "esstisch", "schreibtisch", "möbel"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="20" width="52" height="6" rx="1" fill="#92400e" stroke="#78350f" stroke-width="2"/><rect x="10" y="26" width="4" height="30" fill="#a16207"/><rect x="50" y="26" width="4" height="30" fill="#a16207"/><rect x="8" y="54" width="8" height="4" rx="1" fill="#78350f"/><rect x="48" y="54" width="8" height="4" rx="1" fill="#78350f"/><line x1="14" y1="40" x2="50" y2="40" stroke="#a16207" stroke-width="2"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="8" width="52" height="48" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "stuhl",
-                name: "Stuhl",
-                filename: "moebel_stuhl.svg",
-                tags: ["stuhl", "sitz", "möbel", "esszimmer"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="4" width="36" height="32" rx="2" fill="#a16207" stroke="#92400e" stroke-width="2"/><rect x="18" y="8" width="28" height="24" rx="1" fill="#ca8a04"/><rect x="14" y="36" width="36" height="6" rx="1" fill="#92400e" stroke="#78350f" stroke-width="1"/><rect x="16" y="42" width="4" height="18" fill="#78350f"/><rect x="44" y="42" width="4" height="18" fill="#78350f"/><rect x="14" y="58" width="8" height="3" rx="1" fill="#57534e"/><rect x="42" y="58" width="8" height="3" rx="1" fill="#57534e"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="20" width="36" height="36" fill="none" stroke="#000" stroke-width="1"/><rect x="14" y="12" width="36" height="8" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "schrank",
-                name: "Schrank",
-                filename: "moebel_schrank.svg",
-                tags: ["schrank", "kleiderschrank", "möbel", "stauraum"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="54" rx="2" fill="#a16207" stroke="#92400e" stroke-width="2"/><line x1="32" y1="4" x2="32" y2="58" stroke="#92400e" stroke-width="2"/><rect x="10" y="8" width="18" height="46" fill="#ca8a04" rx="1"/><rect x="36" y="8" width="18" height="46" fill="#ca8a04" rx="1"/><circle cx="26" cy="32" r="2" fill="#78350f"/><circle cx="38" cy="32" r="2" fill="#78350f"/><rect x="8" y="58" width="6" height="4" fill="#78350f"/><rect x="50" y="58" width="6" height="4" fill="#78350f"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="8" width="52" height="48" fill="none" stroke="#000" stroke-width="1"/><line x1="32" y1="8" x2="32" y2="56" stroke="#000" stroke-width="0.5"/></svg>`
-            },
-            {
-                id: "bett",
-                name: "Bett",
-                filename: "moebel_bett.svg",
-                tags: ["bett", "schlafzimmer", "möbel", "schlafen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="20" width="56" height="32" rx="2" fill="#78716c" stroke="#57534e" stroke-width="2"/><rect x="8" y="16" width="14" height="12" rx="2" fill="#a8a29e" stroke="#78716c" stroke-width="1"/><rect x="42" y="16" width="14" height="12" rx="2" fill="#a8a29e" stroke="#78716c" stroke-width="1"/><rect x="8" y="24" width="48" height="24" fill="#e7e5e4" stroke="#d6d3d1" stroke-width="1"/><rect x="4" y="52" width="8" height="8" rx="1" fill="#57534e"/><rect x="52" y="52" width="8" height="8" rx="1" fill="#57534e"/><path d="M12 28 Q32 20 52 28" stroke="#d6d3d1" stroke-width="1" fill="none"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="none" stroke="#000" stroke-width="1"/><rect x="8" y="4" width="20" height="12" fill="none" stroke="#000" stroke-width="0.5"/><rect x="36" y="4" width="20" height="12" fill="none" stroke="#000" stroke-width="0.5"/></svg>`
-            },
-            {
-                id: "regal",
-                name: "Regal",
-                filename: "moebel_regal.svg",
-                tags: ["regal", "bücherregal", "möbel", "stauraum"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" fill="none" stroke="#92400e" stroke-width="3"/><line x1="8" y1="18" x2="56" y2="18" stroke="#92400e" stroke-width="2"/><line x1="8" y1="32" x2="56" y2="32" stroke="#92400e" stroke-width="2"/><line x1="8" y1="46" x2="56" y2="46" stroke="#92400e" stroke-width="2"/><rect x="12" y="8" width="6" height="8" fill="#3b82f6" rx="1"/><rect x="20" y="6" width="5" height="10" fill="#22c55e" rx="1"/><rect x="28" y="8" width="8" height="8" fill="#f59e0b" rx="1"/><rect x="14" y="22" width="10" height="8" fill="#a8a29e" rx="1"/><rect x="30" y="20" width="6" height="10" fill="#ef4444" rx="1"/><rect x="44" y="22" width="8" height="8" fill="#8b5cf6" rx="1"/><rect x="12" y="36" width="12" height="8" fill="#06b6d4" rx="1"/><rect x="40" y="34" width="10" height="10" fill="#ec4899" rx="1"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="8" width="48" height="12" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            }
-        ]
-    },
-
-    // ========== BAD / SANITÄR ==========
-    bad: {
-        name: "Bad & Sanitär",
-        icon: "🚿",
-        items: [
-            {
-                id: "wc",
-                name: "WC / Toilette",
-                filename: "wc_draufsicht.svg",
-                tags: ["wc", "toilette", "klo", "bad", "sanitär"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="38" rx="14" ry="18" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="32" cy="38" rx="8" ry="12" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><rect x="22" y="8" width="20" height="16" rx="3" fill="#f5f5f5" stroke="#333" stroke-width="2"/><rect x="26" y="10" width="12" height="6" rx="1" fill="#ddd" stroke="#333" stroke-width="1"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="38" rx="14" ry="18" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="32" cy="38" rx="8" ry="12" fill="none" stroke="#000" stroke-width="1"/><rect x="22" y="8" width="20" height="16" rx="0" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "waschbecken",
-                name: "Waschbecken",
-                filename: "waschbecken_draufsicht.svg",
-                tags: ["waschbecken", "waschtisch", "bad", "sanitär", "lavabo"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="16" width="48" height="40" rx="4" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="32" cy="36" rx="16" ry="12" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><circle cx="32" cy="40" r="3" fill="#333"/><rect x="30" y="18" width="4" height="8" rx="1" fill="#999" stroke="#333" stroke-width="1"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="16" width="48" height="40" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="32" cy="36" rx="16" ry="12" fill="none" stroke="#000" stroke-width="1"/><circle cx="32" cy="40" r="3" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "badewanne",
-                name: "Badewanne",
-                filename: "badewanne_draufsicht.svg",
-                tags: ["badewanne", "wanne", "bad", "sanitär", "baden"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" rx="8" fill="#f5f5f5" stroke="#333" stroke-width="2"/><rect x="8" y="12" width="48" height="40" rx="6" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><circle cx="50" cy="18" r="3" fill="#999" stroke="#333" stroke-width="1"/><ellipse cx="50" cy="46" rx="4" ry="3" fill="#999" stroke="#333" stroke-width="1"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" rx="0" fill="none" stroke="#000" stroke-width="1"/><rect x="8" y="12" width="48" height="40" rx="0" fill="none" stroke="#000" stroke-width="1"/><circle cx="50" cy="18" r="3" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="50" cy="46" rx="4" ry="3" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "dusche",
-                name: "Dusche",
-                filename: "dusche_draufsicht.svg",
-                tags: ["dusche", "duschwanne", "bad", "sanitär", "brause"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" rx="2" fill="#f5f5f5" stroke="#333" stroke-width="2"/><rect x="8" y="8" width="48" height="48" rx="1" fill="#e0f2fe" stroke="#333" stroke-width="1"/><circle cx="52" cy="12" r="4" fill="#999" stroke="#333" stroke-width="1"/><line x1="8" y1="8" x2="56" y2="56" stroke="#333" stroke-width="1" stroke-dasharray="4,2"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="none" stroke="#000" stroke-width="1"/><circle cx="52" cy="12" r="4" fill="none" stroke="#000" stroke-width="1"/><line x1="4" y1="4" x2="60" y2="60" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "bidet",
-                name: "Bidet",
-                filename: "bidet_draufsicht.svg",
-                tags: ["bidet", "bad", "sanitär"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="32" rx="14" ry="20" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="32" cy="32" rx="8" ry="14" fill="#e0f2fe" stroke="#333" stroke-width="1.5"/><circle cx="32" cy="18" r="2" fill="#999" stroke="#333" stroke-width="1"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><ellipse cx="32" cy="32" rx="14" ry="20" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="32" cy="32" rx="8" ry="14" fill="none" stroke="#000" stroke-width="1"/><circle cx="32" cy="18" r="2" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "doppelwaschbecken",
-                name: "Doppelwaschbecken",
-                filename: "doppelwaschbecken_draufsicht.svg",
-                tags: ["doppelwaschbecken", "waschtisch", "bad", "sanitär", "doppel"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="2" y="16" width="60" height="32" rx="2" fill="#f5f5f5" stroke="#333" stroke-width="2"/><ellipse cx="18" cy="32" rx="10" ry="8" fill="#e0f2fe" stroke="#333" stroke-width="1"/><ellipse cx="46" cy="32" rx="10" ry="8" fill="#e0f2fe" stroke="#333" stroke-width="1"/><circle cx="18" cy="34" r="2" fill="#333"/><circle cx="46" cy="34" r="2" fill="#333"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="2" y="16" width="60" height="32" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="18" cy="32" rx="10" ry="8" fill="none" stroke="#000" stroke-width="1"/><ellipse cx="46" cy="32" rx="10" ry="8" fill="none" stroke="#000" stroke-width="1"/><circle cx="18" cy="34" r="2" fill="none" stroke="#000" stroke-width="1"/><circle cx="46" cy="34" r="2" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            }
-        ]
-    },
-    // ========== KÜCHE ==========
-    kueche: {
-        name: "Küche",
-        icon: "🍳",
-        items: [
-            {
-                id: "herd",
-                name: "Herd / Kochfeld",
-                filename: "kueche_herd.svg",
-                tags: ["herd", "kochfeld", "küche", "kochen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" rx="3" fill="#1f2937" stroke="#111827" stroke-width="2"/><rect x="8" y="8" width="48" height="48" fill="#374151" rx="2"/><circle cx="22" cy="22" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="42" cy="22" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="22" cy="42" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="42" cy="42" r="8" fill="#111827" stroke="#4b5563" stroke-width="2"/><circle cx="22" cy="22" r="4" fill="#dc2626" opacity="0.8"/><circle cx="42" cy="22" r="4" fill="#dc2626" opacity="0.8"/><circle cx="22" cy="42" r="4" fill="#dc2626" opacity="0.4"/><circle cx="42" cy="42" r="4" fill="#dc2626" opacity="0.4"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" fill="none" stroke="#000" stroke-width="1"/><circle cx="22" cy="22" r="8" fill="none" stroke="#000" stroke-width="1"/><circle cx="42" cy="22" r="8" fill="none" stroke="#000" stroke-width="1"/><circle cx="22" cy="42" r="8" fill="none" stroke="#000" stroke-width="1"/><circle cx="42" cy="42" r="8" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "spuele",
-                name: "Spüle",
-                filename: "kueche_spuele.svg",
-                tags: ["spüle", "waschbecken", "küche", "abwasch"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" rx="3" fill="#9ca3af" stroke="#6b7280" stroke-width="2"/><rect x="8" y="12" width="24" height="32" rx="4" fill="#4b5563" stroke="#374151" stroke-width="2"/><rect x="36" y="12" width="20" height="32" rx="4" fill="#4b5563" stroke="#374151" stroke-width="2"/><circle cx="20" cy="28" r="3" fill="#1f2937"/><ellipse cx="46" cy="28" rx="6" ry="8" fill="#374151"/><circle cx="50" cy="6" r="4" fill="#6b7280" stroke="#4b5563" stroke-width="1"/><rect x="48" y="6" width="4" height="8" fill="#6b7280"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="8" width="56" height="48" fill="none" stroke="#000" stroke-width="1"/><rect x="8" y="12" width="24" height="32" fill="none" stroke="#000" stroke-width="1"/><rect x="36" y="12" width="20" height="32" fill="none" stroke="#000" stroke-width="1"/><circle cx="20" cy="28" r="2" fill="none" stroke="#000" stroke-width="0.5"/></svg>`
-            },
-            {
-                id: "kuehlschrank",
-                name: "Kühlschrank",
-                filename: "kueche_kuehlschrank.svg",
-                tags: ["kühlschrank", "kühlen", "küche", "elektrogerät"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="10" y="4" width="44" height="56" rx="3" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/><line x1="10" y1="24" x2="54" y2="24" stroke="#9ca3af" stroke-width="2"/><rect x="46" y="10" width="4" height="8" rx="1" fill="#6b7280"/><rect x="46" y="30" width="4" height="12" rx="1" fill="#6b7280"/><rect x="16" y="8" width="8" height="4" fill="#bfdbfe" rx="1"/><rect x="28" y="8" width="12" height="4" fill="#bfdbfe" rx="1"/><circle cx="20" cy="16" r="3" fill="#fbbf24"/><rect x="16" y="30" width="12" height="8" fill="#bbf7d0" rx="1"/><rect x="16" y="42" width="8" height="10" fill="#fecaca" rx="1"/><rect x="28" y="38" width="14" height="6" fill="#e0f2fe" rx="1"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="10" y="4" width="44" height="56" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "backofen",
-                name: "Backofen",
-                filename: "kueche_backofen.svg",
-                tags: ["backofen", "ofen", "küche", "backen"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="56" rx="3" fill="#1f2937" stroke="#111827" stroke-width="2"/><rect x="10" y="18" width="44" height="38" rx="2" fill="#111827" stroke="#374151" stroke-width="2"/><rect x="14" y="22" width="36" height="30" fill="#292524" stroke="#4b5563" stroke-width="1"/><line x1="14" y1="32" x2="50" y2="32" stroke="#4b5563" stroke-width="1"/><line x1="14" y1="42" x2="50" y2="42" stroke="#4b5563" stroke-width="1"/><circle cx="16" cy="10" r="3" fill="#4b5563"/><circle cx="28" cy="10" r="3" fill="#4b5563"/><circle cx="40" cy="10" r="3" fill="#4b5563"/><rect x="46" y="8" width="8" height="4" rx="1" fill="#22c55e"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="56" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "spuelmaschine",
-                name: "Spülmaschine",
-                filename: "kueche_spuelmaschine.svg",
-                tags: ["spülmaschine", "geschirrspüler", "küche", "elektrogerät"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="56" rx="3" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/><rect x="10" y="16" width="44" height="40" rx="2" fill="#d1d5db" stroke="#9ca3af" stroke-width="1"/><rect x="10" y="8" width="44" height="6" fill="#9ca3af" rx="1"/><circle cx="16" cy="11" r="2" fill="#4b5563"/><rect x="22" y="9" width="12" height="4" rx="1" fill="#1f2937"/><circle cx="48" cy="11" r="2" fill="#22c55e"/><ellipse cx="32" cy="36" rx="16" ry="14" fill="#93c5fd" stroke="#3b82f6" stroke-width="2"/><line x1="32" y1="24" x2="32" y2="48" stroke="#3b82f6" stroke-width="1" stroke-dasharray="2,2"/><line x1="18" y1="36" x2="46" y2="36" stroke="#3b82f6" stroke-width="1" stroke-dasharray="2,2"/></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="6" y="4" width="52" height="56" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "dunstabzug",
-                name: "Dunstabzugshaube",
-                filename: "kueche_dunstabzug.svg",
-                tags: ["dunstabzug", "dunstabzugshaube", "küche", "abzug"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="8,32 56,32 52,56 12,56" fill="#9ca3af" stroke="#6b7280" stroke-width="2"/><rect x="20" y="4" width="24" height="28" fill="#78716c" stroke="#57534e" stroke-width="2"/><rect x="24" y="8" width="16" height="8" fill="#57534e" rx="1"/><rect x="14" y="36" width="36" height="4" fill="#6b7280"/><rect x="14" y="44" width="36" height="4" fill="#6b7280"/><circle cx="32" cy="52" r="2" fill="#4b5563"/><g stroke="#d1d5db" stroke-width="1" opacity="0.5"><path d="M20 20 Q24 16 28 20" fill="none"/><path d="M36 20 Q40 16 44 20" fill="none"/></g></svg>`,
-                dxfSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="8" width="48" height="48" fill="none" stroke="#000" stroke-width="1"/></svg>`
-            }
-        ]
-    },
-
-    // ========== PFEILE (dynamisch) ==========
-    pfeile: {
-        name: "Richtungspfeile (Rot)",
-        icon: "➡️",
-        items: []
-    },
-
-    // ========== KOMPASS (dynamisch) ==========
-    kompass: {
-        name: "Nordpfeile / Kompass",
-        icon: "🧭",
-        items: []
-    },
-
-    // ========== VERMESSUNG - STATUS ==========
-    vermessung_status: {
-        name: "Vermessung - Status",
-        icon: "📋",
-        items: [
-            {
-                id: "vm_reparatur",
-                name: "Reparatur",
-                filename: "vermessung_reparatur.svg",
-                tags: ["reparatur", "instandsetzung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">R</text></svg>`
-            },
-            {
-                id: "vm_neu",
-                name: "Neu",
-                filename: "vermessung_neu.svg",
-                tags: ["neu", "neubau", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">N</text></svg>`
-            },
-            {
-                id: "vm_bestand",
-                name: "Bestand",
-                filename: "vermessung_bestand.svg",
-                tags: ["bestand", "bestehend", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">B</text></svg>`
-            },
-            {
-                id: "vm_abriss",
-                name: "Abriss",
-                filename: "vermessung_abriss.svg",
-                tags: ["abriss", "rückbau", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2"/><line x1="12" y1="12" x2="52" y2="52" stroke="#000" stroke-width="2"/><line x1="52" y1="12" x2="12" y2="52" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_geplant",
-                name: "Geplant",
-                filename: "vermessung_geplant.svg",
-                tags: ["geplant", "planung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="2" stroke-dasharray="6,4"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">P</text></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - GRENZEN ==========
-    vermessung_grenzen: {
-        name: "Vermessung - Grenzen",
-        icon: "📍",
-        items: [
-            {
-                id: "vm_grundstuecksgrenze",
-                name: "Grundstücksgrenze",
-                filename: "vermessung_grundstuecksgrenze.svg",
-                tags: ["grundstück", "grenze", "flurstück", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><line x1="12" y1="26" x2="12" y2="38" stroke="#000" stroke-width="2"/><line x1="52" y1="26" x2="52" y2="38" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_grenzpunkt_vermarkt",
-                name: "Grenzpunkt (vermarkt)",
-                filename: "vermessung_grenzpunkt_vermarkt.svg",
-                tags: ["grenzpunkt", "grenzstein", "vermarkt", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="12" fill="#000"/><circle cx="32" cy="32" r="6" fill="#fff"/></svg>`
-            },
-            {
-                id: "vm_grenzpunkt_unvermarkt",
-                name: "Grenzpunkt (unvermarkt)",
-                filename: "vermessung_grenzpunkt_unvermarkt.svg",
-                tags: ["grenzpunkt", "unvermarkt", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="10" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="22" x2="32" y2="42" stroke="#000" stroke-width="2"/><line x1="22" y1="32" x2="42" y2="32" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_flurstucksgrenze",
-                name: "Flurstücksgrenze",
-                filename: "vermessung_flurstucksgrenze.svg",
-                tags: ["flurstück", "grenze", "kataster", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="12,4"/></svg>`
-            },
-            {
-                id: "vm_zaun",
-                name: "Zaun",
-                filename: "vermessung_zaun.svg",
-                tags: ["zaun", "einfriedung", "grenze", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="1.5"/><line x1="12" y1="24" x2="12" y2="40" stroke="#000" stroke-width="1.5"/><line x1="24" y1="24" x2="24" y2="40" stroke="#000" stroke-width="1.5"/><line x1="36" y1="24" x2="36" y2="40" stroke="#000" stroke-width="1.5"/><line x1="48" y1="24" x2="48" y2="40" stroke="#000" stroke-width="1.5"/><line x1="12" y1="28" x2="24" y2="28" stroke="#000" stroke-width="1"/><line x1="24" y1="28" x2="36" y2="28" stroke="#000" stroke-width="1"/><line x1="36" y1="28" x2="48" y2="28" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "vm_mauer",
-                name: "Mauer",
-                filename: "vermessung_mauer.svg",
-                tags: ["mauer", "wand", "einfriedung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="26" width="56" height="12" fill="none" stroke="#000" stroke-width="2"/><line x1="16" y1="26" x2="16" y2="38" stroke="#000" stroke-width="1"/><line x1="28" y1="26" x2="28" y2="38" stroke="#000" stroke-width="1"/><line x1="40" y1="26" x2="40" y2="38" stroke="#000" stroke-width="1"/><line x1="52" y1="26" x2="52" y2="38" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "vm_hecke",
-                name: "Hecke",
-                filename: "vermessung_hecke.svg",
-                tags: ["hecke", "grün", "bepflanzung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="38" x2="60" y2="38" stroke="#000" stroke-width="1.5"/><circle cx="12" cy="32" r="6" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="24" cy="30" r="7" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="38" cy="31" r="6" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="52" cy="32" r="6" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - WASSER ==========
-    vermessung_wasser: {
-        name: "Vermessung - Wasser",
-        icon: "💧",
-        items: [
-            {
-                id: "vm_hydrant_unterflur",
-                name: "Hydrant (Unterflur)",
-                filename: "vermessung_hydrant_unterflur.svg",
-                tags: ["hydrant", "unterflur", "wasser", "feuerwehr", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="16" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="16" x2="32" y2="48" stroke="#000" stroke-width="2"/><line x1="16" y1="32" x2="48" y2="32" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="4" fill="#000"/></svg>`
-            },
-            {
-                id: "vm_hydrant_ueberflur",
-                name: "Hydrant (Überflur)",
-                filename: "vermessung_hydrant_ueberflur.svg",
-                tags: ["hydrant", "überflur", "wasser", "feuerwehr", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,8 48,24 48,56 16,56 16,24" fill="none" stroke="#000" stroke-width="2"/><line x1="16" y1="36" x2="48" y2="36" stroke="#000" stroke-width="2"/><circle cx="32" cy="46" r="4" fill="#000"/></svg>`
-            },
-            {
-                id: "vm_wasserschacht",
-                name: "Trinkwasserschacht",
-                filename: "vermessung_wasserschacht.svg",
-                tags: ["schacht", "wasser", "trinkwasser", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="16" y="16" width="32" height="32" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">W</text></svg>`
-            },
-            {
-                id: "vm_wasserschieber",
-                name: "Wasserschieber",
-                filename: "vermessung_wasserschieber.svg",
-                tags: ["schieber", "absperrer", "wasser", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2"/><line x1="32" y1="20" x2="32" y2="44" stroke="#000" stroke-width="3"/><circle cx="32" cy="32" r="6" fill="none" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_brunnen",
-                name: "Brunnen",
-                filename: "vermessung_brunnen.svg",
-                tags: ["brunnen", "wasser", "quelle", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="20" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="8" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="12" x2="32" y2="4" stroke="#000" stroke-width="2"/><line x1="32" y1="52" x2="32" y2="60" stroke="#000" stroke-width="2"/><line x1="12" y1="32" x2="4" y2="32" stroke="#000" stroke-width="2"/><line x1="52" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_wasserleitung",
-                name: "Wasserleitung",
-                filename: "vermessung_wasserleitung.svg",
-                tags: ["leitung", "wasser", "rohr", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><text x="32" y="24" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">W</text></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - ABWASSER ==========
-    vermessung_abwasser: {
-        name: "Vermessung - Abwasser",
-        icon: "🚰",
-        items: [
-            {
-                id: "vm_abwasserschacht",
-                name: "Abwasserschacht",
-                filename: "vermessung_abwasserschacht.svg",
-                tags: ["schacht", "abwasser", "kanal", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="16" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">S</text></svg>`
-            },
-            {
-                id: "vm_schacht_rund",
-                name: "Schacht (rund)",
-                filename: "vermessung_schacht_rund.svg",
-                tags: ["schacht", "rund", "kanal", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="18" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="10" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "vm_schacht_eckig",
-                name: "Schacht (eckig)",
-                filename: "vermessung_schacht_eckig.svg",
-                tags: ["schacht", "eckig", "kanal", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="14" width="36" height="36" fill="none" stroke="#000" stroke-width="2"/><rect x="22" y="22" width="20" height="20" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "vm_einlauf",
-                name: "Einlauf / Gully",
-                filename: "vermessung_einlauf.svg",
-                tags: ["einlauf", "gully", "straßenablauf", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="18" y="18" width="28" height="28" fill="none" stroke="#000" stroke-width="2"/><line x1="22" y1="26" x2="42" y2="26" stroke="#000" stroke-width="1.5"/><line x1="22" y1="32" x2="42" y2="32" stroke="#000" stroke-width="1.5"/><line x1="22" y1="38" x2="42" y2="38" stroke="#000" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "vm_abwasserleitung",
-                name: "Abwasserleitung",
-                filename: "vermessung_abwasserleitung.svg",
-                tags: ["leitung", "abwasser", "kanal", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="10,4"/></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - STROM ==========
-    vermessung_strom: {
-        name: "Vermessung - Strom",
-        icon: "⚡",
-        items: [
-            {
-                id: "vm_hausanschluss_elektro",
-                name: "Hausanschluss Elektro",
-                filename: "vermessung_hausanschluss_elektro.svg",
-                tags: ["hausanschluss", "elektro", "strom", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="14" fill="none" stroke="#000" stroke-width="2"/><polygon points="32,20 26,34 30,34 28,44 38,30 34,30" fill="#000"/></svg>`
-            },
-            {
-                id: "vm_laterne",
-                name: "Laterne / Mast",
-                filename: "vermessung_laterne.svg",
-                tags: ["laterne", "mast", "beleuchtung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="4" fill="#000"/><line x1="32" y1="8" x2="32" y2="28" stroke="#000" stroke-width="2"/><line x1="32" y1="36" x2="32" y2="56" stroke="#000" stroke-width="2"/><line x1="8" y1="32" x2="28" y2="32" stroke="#000" stroke-width="2"/><line x1="36" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_stromkabel",
-                name: "Stromkabel",
-                filename: "vermessung_stromkabel.svg",
-                tags: ["kabel", "strom", "leitung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><text x="32" y="24" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">E</text></svg>`
-            },
-            {
-                id: "vm_schaltkasten",
-                name: "Schaltkasten",
-                filename: "vermessung_schaltkasten.svg",
-                tags: ["schaltkasten", "verteiler", "strom", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="16" y="12" width="32" height="40" fill="none" stroke="#000" stroke-width="2"/><line x1="16" y1="24" x2="48" y2="24" stroke="#000" stroke-width="1"/><text x="32" y="42" font-family="Arial" font-size="12" fill="#000" text-anchor="middle">E</text></svg>`
-            },
-            {
-                id: "vm_trafostation",
-                name: "Trafostation",
-                filename: "vermessung_trafostation.svg",
-                tags: ["trafo", "station", "umspanner", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="12" y="12" width="40" height="40" fill="none" stroke="#000" stroke-width="2"/><line x1="12" y1="12" x2="52" y2="52" stroke="#000" stroke-width="2"/><line x1="52" y1="12" x2="12" y2="52" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_mast_holz",
-                name: "Mast (Holz)",
-                filename: "vermessung_mast_holz.svg",
-                tags: ["mast", "holz", "freileitung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="12" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" fill="#000" text-anchor="middle">H</text></svg>`
-            },
-            {
-                id: "vm_mast_beton",
-                name: "Mast (Beton)",
-                filename: "vermessung_mast_beton.svg",
-                tags: ["mast", "beton", "freileitung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="12" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="32" r="6" fill="none" stroke="#000" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "vm_mast_stahl",
-                name: "Mast (Stahl)",
-                filename: "vermessung_mast_stahl.svg",
-                tags: ["mast", "stahl", "freileitung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="20" y="20" width="24" height="24" fill="none" stroke="#000" stroke-width="2"/></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - GAS ==========
-    vermessung_gas: {
-        name: "Vermessung - Gas",
-        icon: "🔥",
-        items: [
-            {
-                id: "vm_gasschieber",
-                name: "Gasschieber",
-                filename: "vermessung_gasschieber.svg",
-                tags: ["schieber", "absperrer", "gas", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="8,4"/><line x1="32" y1="20" x2="32" y2="44" stroke="#000" stroke-width="3"/><text x="32" y="56" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">G</text></svg>`
-            },
-            {
-                id: "vm_gasleitung",
-                name: "Gasleitung",
-                filename: "vermessung_gasleitung.svg",
-                tags: ["leitung", "gas", "rohr", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="60" y2="32" stroke="#000" stroke-width="2" stroke-dasharray="8,4"/><text x="32" y="24" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">G</text></svg>`
-            },
-            {
-                id: "vm_hausanschluss_gas",
-                name: "Hausanschluss Gas",
-                filename: "vermessung_hausanschluss_gas.svg",
-                tags: ["hausanschluss", "gas", "anschluss", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="18" y="18" width="28" height="28" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">G</text></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - VERKEHR ==========
-    vermessung_verkehr: {
-        name: "Vermessung - Verkehr",
-        icon: "🚗",
-        items: [
-            {
-                id: "vm_gleise",
-                name: "Gleise / Schienen",
-                filename: "vermessung_gleise.svg",
-                tags: ["gleise", "schienen", "bahn", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="24" x2="60" y2="24" stroke="#000" stroke-width="2"/><line x1="4" y1="40" x2="60" y2="40" stroke="#000" stroke-width="2"/><line x1="12" y1="24" x2="12" y2="40" stroke="#000" stroke-width="1.5"/><line x1="24" y1="24" x2="24" y2="40" stroke="#000" stroke-width="1.5"/><line x1="36" y1="24" x2="36" y2="40" stroke="#000" stroke-width="1.5"/><line x1="48" y1="24" x2="48" y2="40" stroke="#000" stroke-width="1.5"/></svg>`
-            },
-            {
-                id: "vm_prellbock",
-                name: "Prellbock",
-                filename: "vermessung_prellbock.svg",
-                tags: ["prellbock", "gleisende", "bahn", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="4" y1="32" x2="40" y2="32" stroke="#000" stroke-width="2"/><line x1="40" y1="16" x2="40" y2="48" stroke="#000" stroke-width="4"/><line x1="44" y1="20" x2="56" y2="20" stroke="#000" stroke-width="2"/><line x1="44" y1="44" x2="56" y2="44" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_verkehrsschild",
-                name: "Verkehrsschild",
-                filename: "vermessung_verkehrsschild.svg",
-                tags: ["schild", "verkehr", "straße", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="32" y1="36" x2="32" y2="60" stroke="#000" stroke-width="2"/><polygon points="32,8 50,24 50,36 14,36 14,24" fill="none" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_ampel",
-                name: "Ampel",
-                filename: "vermessung_ampel.svg",
-                tags: ["ampel", "signal", "verkehr", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="22" y="8" width="20" height="40" fill="none" stroke="#000" stroke-width="2"/><circle cx="32" cy="18" r="5" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="32" cy="28" r="5" fill="none" stroke="#000" stroke-width="1.5"/><circle cx="32" cy="38" r="5" fill="none" stroke="#000" stroke-width="1.5"/><line x1="32" y1="48" x2="32" y2="60" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_haltestelle",
-                name: "Haltestelle",
-                filename: "vermessung_haltestelle.svg",
-                tags: ["haltestelle", "bus", "bahn", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="20" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="38" font-family="Arial" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">H</text></svg>`
-            },
-            {
-                id: "vm_parkplatz",
-                name: "Parkplatz",
-                filename: "vermessung_parkplatz.svg",
-                tags: ["parkplatz", "parken", "stellplatz", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="14" y="14" width="36" height="36" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="40" font-family="Arial" font-size="24" font-weight="bold" fill="#000" text-anchor="middle">P</text></svg>`
-            },
-            {
-                id: "vm_schranke",
-                name: "Schranke",
-                filename: "vermessung_schranke.svg",
-                tags: ["schranke", "bahnübergang", "absperrung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="12" cy="32" r="6" fill="none" stroke="#000" stroke-width="2"/><line x1="18" y1="32" x2="60" y2="32" stroke="#000" stroke-width="3"/><line x1="24" y1="28" x2="28" y2="36" stroke="#000" stroke-width="2"/><line x1="36" y1="28" x2="40" y2="36" stroke="#000" stroke-width="2"/><line x1="48" y1="28" x2="52" y2="36" stroke="#000" stroke-width="2"/></svg>`
-            }
-        ]
-    },
-
-    // ========== VERMESSUNG - TOPOGRAFIE ==========
-    vermessung_topografie: {
-        name: "Vermessung - Topografie",
-        icon: "🌳",
-        items: [
-            {
-                id: "vm_laubbaum",
-                name: "Laubbaum",
-                filename: "vermessung_laubbaum.svg",
-                tags: ["baum", "laubbaum", "vegetation", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="28" r="18" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="46" x2="32" y2="60" stroke="#000" stroke-width="3"/></svg>`
-            },
-            {
-                id: "vm_nadelbaum",
-                name: "Nadelbaum",
-                filename: "vermessung_nadelbaum.svg",
-                tags: ["baum", "nadelbaum", "tanne", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,4 48,28 40,28 52,48 12,48 24,28 16,28" fill="none" stroke="#000" stroke-width="2"/><line x1="32" y1="48" x2="32" y2="60" stroke="#000" stroke-width="3"/></svg>`
-            },
-            {
-                id: "vm_gebaeude",
-                name: "Gebäude",
-                filename: "vermessung_gebaeude.svg",
-                tags: ["gebäude", "haus", "bauwerk", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="12" y="20" width="40" height="36" fill="none" stroke="#000" stroke-width="2"/><line x1="12" y1="20" x2="32" y2="8" stroke="#000" stroke-width="2"/><line x1="52" y1="20" x2="32" y2="8" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_hoehenpunkt",
-                name: "Höhenpunkt",
-                filename: "vermessung_hoehenpunkt.svg",
-                tags: ["höhe", "nivellement", "punkt", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="22" y1="42" x2="42" y2="42" stroke="#000" stroke-width="2"/><line x1="32" y1="42" x2="32" y2="22" stroke="#000" stroke-width="2"/><circle cx="32" cy="22" r="4" fill="#000"/><text x="46" y="28" font-family="Arial" font-size="10" fill="#000">HP</text></svg>`
-            },
-            {
-                id: "vm_boeschung",
-                name: "Böschung",
-                filename: "vermessung_boeschung.svg",
-                tags: ["böschung", "hang", "gelände", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="20" x2="56" y2="20" stroke="#000" stroke-width="2"/><line x1="8" y1="44" x2="56" y2="44" stroke="#000" stroke-width="2"/><line x1="12" y1="20" x2="8" y2="44" stroke="#000" stroke-width="1"/><line x1="20" y1="20" x2="16" y2="44" stroke="#000" stroke-width="1"/><line x1="28" y1="20" x2="24" y2="44" stroke="#000" stroke-width="1"/><line x1="36" y1="20" x2="32" y2="44" stroke="#000" stroke-width="1"/><line x1="44" y1="20" x2="40" y2="44" stroke="#000" stroke-width="1"/><line x1="52" y1="20" x2="48" y2="44" stroke="#000" stroke-width="1"/></svg>`
-            },
-            {
-                id: "vm_fliessrichtung",
-                name: "Fließrichtung",
-                filename: "vermessung_fliessrichtung.svg",
-                tags: ["fließrichtung", "gewässer", "bach", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><line x1="8" y1="32" x2="48" y2="32" stroke="#000" stroke-width="2"/><polygon points="56,32 44,24 44,40" fill="#000"/></svg>`
-            },
-            {
-                id: "vm_quelle",
-                name: "Quelle",
-                filename: "vermessung_quelle.svg",
-                tags: ["quelle", "wasser", "ursprung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="16" fill="none" stroke="#000" stroke-width="2"/><path d="M32 24 Q36 28 32 32 Q28 36 32 40" stroke="#000" stroke-width="2" fill="none"/></svg>`
-            },
-            {
-                id: "vm_durchlass",
-                name: "Durchlass",
-                filename: "vermessung_durchlass.svg",
-                tags: ["durchlass", "rohr", "kanal", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="8" y="24" width="48" height="16" fill="none" stroke="#000" stroke-width="2"/><line x1="8" y1="32" x2="0" y2="32" stroke="#000" stroke-width="2"/><line x1="56" y1="32" x2="64" y2="32" stroke="#000" stroke-width="2"/></svg>`
-            },
-            {
-                id: "vm_kilometerstein",
-                name: "Kilometerstein",
-                filename: "vermessung_kilometerstein.svg",
-                tags: ["kilometer", "stein", "markierung", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="32,8 44,20 44,56 20,56 20,20" fill="none" stroke="#000" stroke-width="2"/><text x="32" y="42" font-family="Arial" font-size="12" fill="#000" text-anchor="middle">km</text></svg>`
-            },
-            {
-                id: "vm_poller",
-                name: "Poller",
-                filename: "vermessung_poller.svg",
-                tags: ["poller", "absperrung", "pfosten", "vermessung"],
-                svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="10" fill="#000"/><circle cx="32" cy="32" r="4" fill="#fff"/></svg>`
-            }
-        ]
-    }
-};
-
-// ========== DYNAMISCHE PFEILE GENERIEREN ==========
-function generateArrowSVG(angle) {
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="rotate(${angle}, 32, 32)"><rect x="28" y="20" width="8" height="30" fill="#dc2626"/><polygon points="32,4 16,24 24,24 24,20 40,20 40,24 48,24" fill="#dc2626"/></g></svg>`;
-}
-
-// DXF-taugliche Pfeile (nur Linien, keine Füllung)
-function generateArrowDxfSVG(angle) {
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="rotate(${angle}, 32, 32)"><line x1="32" y1="50" x2="32" y2="12" stroke="#000" stroke-width="1"/><polygon points="32,4 22,18 42,18" fill="none" stroke="#000" stroke-width="1"/></g></svg>`;
-}
-
-function generateNorthArrowSVG(angle) {
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="rotate(${angle}, 32, 32)"><circle cx="32" cy="32" r="28" fill="none" stroke="#374151" stroke-width="2"/><polygon points="32,6 26,32 32,28 38,32" fill="#dc2626"/><polygon points="32,58 26,32 32,36 38,32" fill="#ffffff" stroke="#374151" stroke-width="1"/><text x="32" y="18" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#1f2937" text-anchor="middle">N</text></g></svg>`;
-}
-
-// DXF-taugliche Nordpfeile (nur Linien)
-function generateNorthArrowDxfSVG(angle) {
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="rotate(${angle}, 32, 32)"><circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="1"/><polygon points="32,6 26,32 38,32" fill="none" stroke="#000" stroke-width="1"/><polygon points="32,58 26,32 38,32" fill="none" stroke="#000" stroke-width="1"/><text x="32" y="18" font-family="Arial" font-size="10" fill="#000" text-anchor="middle">N</text></g></svg>`;
-}
-
-// Pfeile und Kompass generieren
-for (let angle = 0; angle < 360; angle += 15) {
-    SYMBOLS.pfeile.items.push({
-        id: `pfeil_${angle}`,
-        name: `${angle}°`,
-        filename: `richtungspfeil_rot_${angle}grad.svg`,
-        tags: ["pfeil", "richtung", "rot", angle.toString()],
-        svg: generateArrowSVG(angle),
-        dxfSvg: generateArrowDxfSVG(angle)
-    });
-
-    SYMBOLS.kompass.items.push({
-        id: `nord_${angle}`,
-        name: `${angle}°`,
-        filename: `kompass_nord_${angle}grad.svg`,
-        tags: ["nord", "kompass", "himmelsrichtung", angle.toString()],
-        svg: generateNorthArrowSVG(angle),
-        dxfSvg: generateNorthArrowDxfSVG(angle)
-    });
-}