Refactor symbols app: cleanup and fix issues

- 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

@@ -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;
+    }
+}