Refactor symbols app: split large files (max 300 lines)

- Split styles.css (1319 lines) into 6 CSS modules:
  - base.css, layout.css, modal.css, text-generator.css, components.css, legend.css
- Split app.js (1219 lines) into 8 JS modules:
  - core.js, custom.js, dxf.js, export.js, legend.js, legend-export.js, path-parser.js, utils.js
- Split symbols.js (870 lines) into 10 JS modules:
  - index.js, schaeden.js, werkzeuge.js, bauteile.js, moebel.js, sanitaer.js, vermessung.js, vermessung-infra.js, vermessung-topo.js, init.js
- Updated index.html to load new modular files

All files now comply with 300-line maximum rule.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

symbols/css/legend.css

@@ -0,0 +1,85 @@
+/* ============================================
+   LEGEND - Legenden-Modal und Preview
+   ============================================ */
+
+/* ========== MODAL WIDE ========== */
+.modal-wide {
+    max-width: 1000px;
+    width: 95%;
+}
+
+.modal-medium {
+    max-width: 600px;
+}
+
+.modal-small {
+    max-width: 400px;
+}
+
+/* ========== LEGEND MODAL BODY ========== */
+.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 ========== */
+.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;
+}
+
+/* ========== RESPONSIVE ========== */
+@media (max-width: 768px) {
+    .legend-modal-body {
+        flex-direction: column;
+    }
+    .legend-preview-section {
+        flex: none;
+    }
+}