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/js/app/utils.js

@@ -0,0 +1,63 @@
+// ============================================
+// UTILS - Hilfsfunktionen
+// ============================================
+
+// ========== BENACHRICHTIGUNGEN ==========
+function showNotification(message, type = 'success') {
+    const existing = document.querySelector('.notification');
+    if (existing) existing.remove();
+
+    const notification = document.createElement('div');
+    notification.className = `notification ${type}`;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+
+    setTimeout(() => {
+        notification.classList.add('show');
+    }, 10);
+
+    setTimeout(() => {
+        notification.classList.remove('show');
+        setTimeout(() => notification.remove(), 300);
+    }, 2500);
+}
+
+// ========== HTML ESCAPING ==========
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// ========== SVG ZU CANVAS ==========
+window.svgToCanvas = async function(svg, scale) {
+    var parser = new DOMParser();
+    var svgDoc = parser.parseFromString(svg, 'image/svg+xml');
+    var svgEl = svgDoc.documentElement;
+    var svgWidth = parseFloat(svgEl.getAttribute('width')) || parseFloat(svgEl.getAttribute('viewBox')?.split(' ')[2]) || 64;
+    var svgHeight = parseFloat(svgEl.getAttribute('height')) || parseFloat(svgEl.getAttribute('viewBox')?.split(' ')[3]) || 64;
+
+    if (!scale) scale = 2;
+    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;
+};