Integrate symbols/ into main repo

- Added symbols/ folder (previously separate repo)
- Removed symbols/ from .gitignore
- Updated CLAUDE.md documentation
- Deleted separate Symbols repo on Gitea

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
architeur
2025-12-14 20:53:14 +01:00
parent e43d4bde1f
commit 7672653254
19 changed files with 9497 additions and 4 deletions

1
.gitignore vendored
View File

@@ -13,7 +13,6 @@ node_modules/
# Temp files # Temp files
*.tmp *.tmp
*.bak *.bak
symbols/
kostenschaetzung/ kostenschaetzung/
schadendokumentation/ schadendokumentation/
zeitwert/ zeitwert/

View File

@@ -30,10 +30,10 @@ Dieses Repository enthält die Landing Page und kleine SPAs für **docs.artetui.
├── fotoupload/ # Foto-Upload SPA ├── fotoupload/ # Foto-Upload SPA
├── geo-calc/ # Geo-Rechner SPA ├── geo-calc/ # Geo-Rechner SPA
├── legal/ # Impressum & Datenschutz ├── legal/ # Impressum & Datenschutz
├── symbols/ # Gutachter Symbolbibliothek
├── zeitutility/ # Zeit-Utilities SPA ├── zeitutility/ # Zeit-Utilities SPA
# Separate Git-Repositories (nicht in diesem Repo): # Separate Git-Repositories (nicht in diesem Repo):
├── symbols/ # → git.artetui.de/admin/Symbols
├── kostenschaetzung/ # → eigenes Repo ├── kostenschaetzung/ # → eigenes Repo
├── schadendokumentation/ # → eigenes Repo ├── schadendokumentation/ # → eigenes Repo
└── zeitwert/ # → eigenes Repo └── zeitwert/ # → eigenes Repo
@@ -78,14 +78,14 @@ git push
| Repository | URL | Beschreibung | | Repository | URL | Beschreibung |
|------------|-----|--------------| |------------|-----|--------------|
| **server-config** | git.artetui.de/admin/server-config | Server-Administration | | **server-config** | git.artetui.de/admin/server-config | Server-Administration |
| **Symbols** | git.artetui.de/admin/Symbols | Gutachter Symbolbibliothek |
| **SPA-landing** | git.artetui.de/admin/SPA-landing | Dieses Repo | | **SPA-landing** | git.artetui.de/admin/SPA-landing | Dieses Repo |
## Hinweise ## Hinweise
- Die Subprojekte (symbols, kostenschaetzung, etc.) haben eigene Git-Repos - Die Subprojekte (kostenschaetzung, schadendokumentation, zeitwert) haben eigene Git-Repos
- Sie sind in `.gitignore` ausgeschlossen - Sie sind in `.gitignore` ausgeschlossen
- Änderungen an diesen müssen in deren jeweiligen Repos gemacht werden - Änderungen an diesen müssen in deren jeweiligen Repos gemacht werden
- `symbols/` ist jetzt Teil dieses Repos
--- ---
**Letzte Aktualisierung:** 2025-12-14 **Letzte Aktualisierung:** 2025-12-14

11
symbols/.gitignore vendored Normal file
View File

@@ -0,0 +1,11 @@
# OS files
.DS_Store
Thumbs.db
# IDE
.vscode/
.idea/
# Temporary files
*.tmp
*.bak

67
symbols/README.md Normal file
View File

@@ -0,0 +1,67 @@
# Gutachter Symbolbibliothek
Webanwendung für die Erstellung von Symbolen für Gutachten.
## Live-URL
https://docs.artetui.de/symbols/
## Seiten
- **index.html** - Hauptseite mit Symbol-Bibliothek
- **index4.html** - Text-Generator (neue SVG.js Version)
## Features
### Symbol-Bibliothek (index.html)
- Vordefinierte CAD-Symbole für Gutachten
- Suche und Filterung
- Export als SVG, PNG, JPG, DXF
### Text-Generator (index4.html)
- Erstellt Text-Symbole mit Rahmen und Pfeilen
- Verschiedene Rahmenformen (Rechteck, Abgerundet, Oval, Raute)
- Konfigurierbare Pfeile mit Winkel und Knick
- Asymmetrisches Padding für Text-Positionierung
- Standalone-Pfeil Export
- Export in verschiedenen Formaten
## Technologie
- **SVG.js** - Vector Graphics Library
- **Vanilla JavaScript** - Kein Framework
- **Modular Architecture** (Text-Generator):
- state.js - State Management
- svg-generator.js - SVG-Generierung
- ui-bindings.js - UI Event Bindings
- export.js - Export-Funktionen
## Verzeichnisstruktur
symbols/
├── index.html # Symbol-Bibliothek
├── index4.html # Text-Generator (SVG.js)
├── symbols.js # Symbol-Definitionen
├── css/ # Stylesheets
├── lib/
│ └── svg.min.js # SVG.js Library
└── js/
└── text-generator/
├── state.js
├── svg-generator.js
├── ui-bindings.js
└── export.js
## Entwicklung
# Auf dem Server
cd /opt/stacks/spa-hosting/html/symbols
# Änderungen committen
git add .
git commit -m Beschreibung
git push origin master
## Lizenz
Intern - ArTeTui

1248
symbols/css/styles.css Normal file

File diff suppressed because it is too large Load Diff

385
symbols/index.html Normal file
View File

@@ -0,0 +1,385 @@
<!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="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"></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=12"></script>
<script src="js/app.js?v=25"></script>
</body>
</html>

385
symbols/index2.html Normal file
View File

@@ -0,0 +1,385 @@
<!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"></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>

385
symbols/index3.html Normal file
View File

@@ -0,0 +1,385 @@
<!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"></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>

390
symbols/index4.html Normal file
View File

@@ -0,0 +1,390 @@
<!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"></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>

1684
symbols/js/app.js Normal file

File diff suppressed because it is too large Load Diff

870
symbols/js/symbols.js Normal file
View File

@@ -0,0 +1,870 @@
// ============================================
// 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>`,
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>`;
}
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)
});
}

View File

@@ -0,0 +1,859 @@
// ============================================
// 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)
});
}

1154
symbols/js/text-generator.js Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,321 @@
/**
* Export-Funktionen fuer Text-Symbole
*/
var TextExport = {
// SVG zu Canvas rendern
svgToCanvas: function(svgString, scale) {
return new Promise(function(resolve, reject) {
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var parser = new DOMParser();
var svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
var svgEl = svgDoc.documentElement;
var width = parseFloat(svgEl.getAttribute('width')) || 200;
var height = parseFloat(svgEl.getAttribute('height')) || 100;
canvas.width = width * scale;
canvas.height = height * scale;
var blob = new Blob([svgString], { type: 'image/svg+xml' });
var url = URL.createObjectURL(blob);
img.onload = function() {
ctx.scale(scale, scale);
ctx.drawImage(img, 0, 0);
URL.revokeObjectURL(url);
resolve(canvas);
};
img.onerror = function(e) {
URL.revokeObjectURL(url);
reject(e);
};
img.src = url;
});
},
// In Zwischenablage kopieren (als PNG)
copyAsImage: function(svgString, scale) {
var self = this;
scale = scale || 3;
return this.svgToCanvas(svgString, scale).then(function(canvas) {
return new Promise(function(resolve, reject) {
canvas.toBlob(function(blob) {
if (!blob) {
reject(new Error('Canvas toBlob failed'));
return;
}
navigator.clipboard.write([
new ClipboardItem({ 'image/png': blob })
]).then(resolve).catch(reject);
}, 'image/png');
});
});
},
// SVG in Zwischenablage
copySvg: function(svgString) {
return navigator.clipboard.writeText(svgString);
},
// SVG herunterladen
downloadSvg: function(svgString, filename) {
var blob = new Blob([svgString], { type: 'image/svg+xml' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = filename || 'symbol.svg';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
},
// PNG herunterladen
downloadPng: function(svgString, filename, scale) {
scale = scale || 3;
return this.svgToCanvas(svgString, scale).then(function(canvas) {
var url = canvas.toDataURL('image/png');
var a = document.createElement('a');
a.href = url;
a.download = filename || 'symbol.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
},
// JPG herunterladen
downloadJpg: function(svgString, filename, scale, bgColor) {
scale = scale || 3;
bgColor = bgColor || '#ffffff';
return this.svgToCanvas(svgString, scale).then(function(canvas) {
// Neues Canvas mit Hintergrund
var bgCanvas = document.createElement('canvas');
bgCanvas.width = canvas.width;
bgCanvas.height = canvas.height;
var ctx = bgCanvas.getContext('2d');
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, bgCanvas.width, bgCanvas.height);
ctx.drawImage(canvas, 0, 0);
var url = bgCanvas.toDataURL('image/jpeg', 0.95);
var a = document.createElement('a');
a.href = url;
a.download = filename || 'symbol.jpg';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
},
// DXF generieren (vereinfacht - nur Linien)
svgToDxf: function(svgString) {
var parser = new DOMParser();
var svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
var svgEl = svgDoc.documentElement;
var width = parseFloat(svgEl.getAttribute('width')) || 200;
var height = parseFloat(svgEl.getAttribute('height')) || 100;
var dxf = '0\nSECTION\n2\nENTITIES\n';
// Rechtecke
var rects = svgEl.querySelectorAll('rect');
rects.forEach(function(rect) {
var x = parseFloat(rect.getAttribute('x')) || 0;
var y = parseFloat(rect.getAttribute('y')) || 0;
var w = parseFloat(rect.getAttribute('width')) || 0;
var h = parseFloat(rect.getAttribute('height')) || 0;
var fy = height - y;
dxf += '0\nLINE\n8\n0\n';
dxf += '10\n' + x + '\n20\n' + fy + '\n30\n0\n';
dxf += '11\n' + (x + w) + '\n21\n' + fy + '\n31\n0\n';
dxf += '0\nLINE\n8\n0\n';
dxf += '10\n' + (x + w) + '\n20\n' + fy + '\n30\n0\n';
dxf += '11\n' + (x + w) + '\n21\n' + (fy - h) + '\n31\n0\n';
dxf += '0\nLINE\n8\n0\n';
dxf += '10\n' + (x + w) + '\n20\n' + (fy - h) + '\n30\n0\n';
dxf += '11\n' + x + '\n21\n' + (fy - h) + '\n31\n0\n';
dxf += '0\nLINE\n8\n0\n';
dxf += '10\n' + x + '\n20\n' + (fy - h) + '\n30\n0\n';
dxf += '11\n' + x + '\n21\n' + fy + '\n31\n0\n';
});
// Pfade (vereinfacht)
var paths = svgEl.querySelectorAll('path');
paths.forEach(function(path) {
var d = path.getAttribute('d');
if (!d) return;
var points = [];
var parts = d.match(/[ML]\s*[\d.-]+\s+[\d.-]+/g);
if (parts) {
parts.forEach(function(part) {
var nums = part.match(/[\d.-]+/g);
if (nums && nums.length >= 2) {
points.push({ x: parseFloat(nums[0]), y: parseFloat(nums[1]) });
}
});
}
for (var i = 0; i < points.length - 1; i++) {
dxf += '0\nLINE\n8\n0\n';
dxf += '10\n' + points[i].x + '\n20\n' + (height - points[i].y) + '\n30\n0\n';
dxf += '11\n' + points[i + 1].x + '\n21\n' + (height - points[i + 1].y) + '\n31\n0\n';
}
});
// Text (als Hinweis)
var texts = svgEl.querySelectorAll('text');
texts.forEach(function(text) {
var x = parseFloat(text.getAttribute('x')) || 0;
var y = parseFloat(text.getAttribute('y')) || 0;
var content = text.textContent || '';
dxf += '0\nTEXT\n8\n0\n';
dxf += '10\n' + x + '\n20\n' + (height - y) + '\n30\n0\n';
dxf += '40\n10\n1\n' + content + '\n';
});
dxf += '0\nENDSEC\n0\nEOF\n';
return dxf;
},
// DXF herunterladen
downloadDxf: function(svgString, filename) {
var dxf = this.svgToDxf(svgString);
var blob = new Blob([dxf], { type: 'application/dxf' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = filename || 'symbol.dxf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
},
// Feedback anzeigen
showFeedback: function(message, isError) {
var existing = document.querySelector('.export-feedback');
if (existing) existing.remove();
var feedback = document.createElement('div');
feedback.className = 'export-feedback';
feedback.style.cssText = 'position: fixed; bottom: 20px; right: 20px; padding: 12px 20px; border-radius: 8px; font-size: 14px; z-index: 10000; animation: fadeIn 0.3s;';
feedback.style.background = isError ? '#ef4444' : '#10b981';
feedback.style.color = 'white';
feedback.textContent = message;
document.body.appendChild(feedback);
setTimeout(function() {
feedback.style.opacity = '0';
feedback.style.transition = 'opacity 0.3s';
setTimeout(function() { feedback.remove(); }, 300);
}, 2000);
}
};
window.TextExport = TextExport;
// Globale Export-Funktionen fuer onclick-Handler
window.copyTextAsImage = function() {
var svg = window.SvgGenerator.generate(window.TextGenState.current);
window.TextExport.copyAsImage(svg).then(function() {
window.TextExport.showFeedback('Als PNG kopiert!');
}).catch(function(e) {
window.TextExport.showFeedback('Fehler: ' + e.message, true);
});
};
window.copyTextSVG = function() {
var svg = window.SvgGenerator.generate(window.TextGenState.current);
window.TextExport.copySvg(svg).then(function() {
window.TextExport.showFeedback('SVG kopiert!');
});
};
window.downloadTextPNG = function() {
var svg = window.SvgGenerator.generate(window.TextGenState.current);
window.TextExport.downloadPng(svg, 'text-symbol.png');
};
window.downloadTextJPG = function() {
var svg = window.SvgGenerator.generate(window.TextGenState.current);
window.TextExport.downloadJpg(svg, 'text-symbol.jpg');
};
window.downloadTextSVG = function() {
var svg = window.SvgGenerator.generate(window.TextGenState.current);
window.TextExport.downloadSvg(svg, 'text-symbol.svg');
};
window.downloadTextDXF = function() {
var svg = window.SvgGenerator.generate(window.TextGenState.current);
window.TextExport.downloadDxf(svg, 'text-symbol.dxf');
};
window.resetToDefaults = function() {
window.UiBindings.resetToDefaults();
};
// Standalone-Pfeil Funktionen
window.copyStandaloneArrow = function() {
var svg = window.SvgGenerator.generateArrowOnly(window.TextGenState.current);
if (svg) {
window.TextExport.copyAsImage(svg).then(function() {
window.TextExport.showFeedback('Pfeil als PNG kopiert!');
});
}
};
window.copyStandaloneArrowSVG = function() {
var svg = window.SvgGenerator.generateArrowOnly(window.TextGenState.current);
if (svg) {
window.TextExport.copySvg(svg).then(function() {
window.TextExport.showFeedback('Pfeil-SVG kopiert!');
});
}
};
window.downloadStandaloneArrowSVG = function() {
var svg = window.SvgGenerator.generateArrowOnly(window.TextGenState.current);
if (svg) {
window.TextExport.downloadSvg(svg, 'pfeil.svg');
}
};
window.downloadStandaloneArrowPNG = function() {
var svg = window.SvgGenerator.generateArrowOnly(window.TextGenState.current);
if (svg) {
window.TextExport.downloadPng(svg, 'pfeil.png');
}
};
window.downloadStandaloneArrowJPG = function() {
var svg = window.SvgGenerator.generateArrowOnly(window.TextGenState.current);
if (svg) {
window.TextExport.downloadJpg(svg, 'pfeil.jpg');
}
};
window.downloadStandaloneArrowDXF = function() {
var svg = window.SvgGenerator.generateArrowOnly(window.TextGenState.current);
if (svg) {
window.TextExport.downloadDxf(svg, 'pfeil.dxf');
}
};

View File

@@ -0,0 +1,95 @@
/**
* Text-Generator State Management
* Zentrale Zustandsverwaltung für alle Text-Symbol-Einstellungen
*/
const TextGenState = {
// Aktuelle Werte
current: {
text: 'Text',
fontSize: 14,
textColor: '#000000',
frameColor: '#000000',
shape: 'rect',
frameScale: 120,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 10,
lineStyle: 'solid',
lineWeight: 2,
arrow: 'none',
arrowLength: 40,
arrowAngle: 0,
arrowBend: 50,
arrowSize: 10,
arrowTipLength: 15
},
// Standardwerte für Reset
defaults: {
text: 'Text',
fontSize: 14,
textColor: '#000000',
frameColor: '#000000',
shape: 'rect',
frameScale: 120,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 10,
lineStyle: 'solid',
lineWeight: 2,
arrow: 'none',
arrowLength: 40,
arrowAngle: 0,
arrowBend: 50,
arrowSize: 10,
arrowTipLength: 15
},
// State aktualisieren
set(key, value) {
if (key in this.current) {
this.current[key] = value;
this.onChange(key, value);
}
},
// Mehrere Werte setzen
setMultiple(updates) {
Object.entries(updates).forEach(([key, value]) => {
if (key in this.current) {
this.current[key] = value;
}
});
this.onChange('multiple', updates);
},
// Auf Defaults zurücksetzen
reset() {
this.current = { ...this.defaults };
this.onChange('reset', this.current);
},
// Getter
get(key) {
return this.current[key];
},
// Alle Werte
getAll() {
return { ...this.current };
},
// Change-Callback (wird von außen gesetzt)
onChange: function(key, value) {
// Wird von ui-bindings überschrieben
}
};
// Export für ES6 Module und globalen Zugriff
if (typeof module !== 'undefined' && module.exports) {
module.exports = TextGenState;
}
window.TextGenState = TextGenState;

View File

@@ -0,0 +1,371 @@
/**
* SVG Generator mit SVG.js
* Erzeugt Text-Symbole mit Rahmen und Pfeilen
*/
var SvgGenerator = {
getDashArray: function(style, weight) {
switch(style) {
case 'dashed': return (weight * 4) + ',' + (weight * 2);
case 'dotted': return weight + ',' + (weight * 1.5);
default: return null;
}
},
measureText: function(text, fontSize) {
var lines = text.split('\n');
var charWidth = fontSize * 0.6;
var lineHeight = fontSize * 1.3;
var maxLength = 0;
for (var i = 0; i < lines.length; i++) {
if (lines[i].length > maxLength) maxLength = lines[i].length;
}
if (maxLength === 0) maxLength = 4;
return {
lines: lines,
width: maxLength * charWidth,
height: lines.length * lineHeight,
lineHeight: lineHeight,
charWidth: charWidth
};
},
createShape: function(draw, shape, x, y, width, height, style) {
var shapeEl;
var halfW = width / 2;
var halfH = height / 2;
var cx = x + halfW;
var cy = y + halfH;
switch(shape) {
case 'rect':
shapeEl = draw.rect(width, height).move(x, y).radius(4);
break;
case 'rounded':
shapeEl = draw.rect(width, height).move(x, y).radius(Math.min(halfW, halfH) * 0.5);
break;
case 'oval':
shapeEl = draw.ellipse(width, height).center(cx, cy);
break;
case 'diamond':
shapeEl = draw.polygon([
[cx, y],
[x + width, cy],
[cx, y + height],
[x, cy]
]);
break;
default:
return null;
}
if (shapeEl) {
shapeEl.fill('none').stroke({ color: style.color, width: style.weight });
if (style.dashArray) {
shapeEl.attr('stroke-dasharray', style.dashArray);
}
}
return shapeEl;
},
calculateArrowHead: function(endX, endY, prevX, prevY, size, tipLength) {
// Berechne den Winkel der Pfeilrichtung
var angle = Math.atan2(endY - prevY, endX - prevX);
// Die zwei hinteren Punkte der Pfeilspitze:
// - tipLength zurueck in Pfeilrichtung
// - size/2 seitlich (links und rechts)
var baseX = endX - tipLength * Math.cos(angle);
var baseY = endY - tipLength * Math.sin(angle);
// Senkrecht zur Pfeilrichtung (90 Grad = PI/2)
var perpAngle = angle + Math.PI / 2;
var halfWidth = size / 2;
return [
[endX, endY], // Spitze
[baseX + halfWidth * Math.cos(perpAngle), baseY + halfWidth * Math.sin(perpAngle)], // Links
[baseX - halfWidth * Math.cos(perpAngle), baseY - halfWidth * Math.sin(perpAngle)] // Rechts
];
},
createArrow: function(draw, direction, frameRect, options) {
var length = options.length;
var angle = options.angle;
var bendPos = options.bendPos;
var color = options.color;
var weight = options.weight;
var dashArray = options.dashArray;
var arrowSize = options.arrowSize;
var tipLength = options.tipLength;
var angleRad = angle * Math.PI / 180;
var bend = bendPos / 100;
var startX, startY, midX, midY, endX, endY;
var fx = frameRect.x;
var fy = frameRect.y;
var fw = frameRect.width;
var fh = frameRect.height;
// Fuer Standalone-Pfeile (width=0, height=0) ist fx,fy der Startpunkt
var isStandalone = (fw === 0 && fh === 0);
var cx = isStandalone ? fx : fx + fw / 2;
var cy = isStandalone ? fy : fy + fh / 2;
switch(direction) {
case 'top':
startX = cx;
startY = isStandalone ? fy : fy;
midX = startX; midY = startY - length * bend;
endX = midX + Math.sin(angleRad) * (length * (1 - bend));
endY = midY - Math.cos(angleRad) * (length * (1 - bend));
break;
case 'bottom':
startX = cx;
startY = isStandalone ? fy : fy + fh;
midX = startX; midY = startY + length * bend;
endX = midX + Math.sin(angleRad) * (length * (1 - bend));
endY = midY + Math.cos(angleRad) * (length * (1 - bend));
break;
case 'left':
startX = isStandalone ? fx : fx;
startY = cy;
midX = startX - length * bend; midY = startY;
endX = midX - Math.cos(angleRad) * (length * (1 - bend));
endY = midY + Math.sin(angleRad) * (length * (1 - bend));
break;
case 'right':
startX = fx + fw; startY = cy;
midX = startX + length * bend; midY = startY;
endX = midX + Math.cos(angleRad) * (length * (1 - bend));
endY = midY + Math.sin(angleRad) * (length * (1 - bend));
break;
default:
return null;
}
var points = (angle !== 0 && bend > 0 && bend < 1)
? [[startX, startY], [midX, midY], [endX, endY]]
: [[startX, startY], [endX, endY]];
var pathData = '';
for (var i = 0; i < points.length; i++) {
pathData += (i === 0 ? 'M' : 'L') + points[i][0] + ' ' + points[i][1] + ' ';
}
var line = draw.path(pathData).fill('none').stroke({ color: color, width: weight });
if (dashArray) line.attr('stroke-dasharray', dashArray);
var lastPoint = points[points.length - 1];
var prevPoint = points[points.length - 2];
var headPoints = this.calculateArrowHead(lastPoint[0], lastPoint[1], prevPoint[0], prevPoint[1], arrowSize, tipLength);
var arrowHead = draw.polygon(headPoints).fill(color).stroke({ color: color, width: 1 });
return draw.group().add(line).add(arrowHead);
},
createText: function(draw, text, x, y, options) {
var fontSize = options.fontSize;
var color = options.color;
var lines = options.lines;
var lineHeight = options.lineHeight;
var group = draw.group();
var totalHeight = lines.length * lineHeight;
var startY = y - (totalHeight / 2) + (fontSize * 0.8);
for (var i = 0; i < lines.length; i++) {
var lineY = startY + (i * lineHeight);
var lineText = lines[i] || ' ';
// Verwende plain SVG text element fuer bessere Kontrolle
var textEl = draw.plain(lineText)
.font({
family: 'Arial, sans-serif',
size: fontSize,
anchor: 'middle'
})
.fill(color)
.attr('x', x)
.attr('y', lineY)
.attr('text-anchor', 'middle');
group.add(textEl);
}
return group;
},
generate: function(state) {
var s = state;
var textMetrics = this.measureText(s.text || 'Text', s.fontSize);
var frameScale = s.frameScale / 100;
var frameWidth = (textMetrics.width + s.paddingLeft + s.paddingRight) * frameScale;
var frameHeight = (textMetrics.height + s.paddingTop + s.paddingBottom) * frameScale;
var minWidth = Math.max(frameWidth, 40);
var minHeight = Math.max(frameHeight, 30);
// Pfeil-Raum berechnen inkl. Winkel-Abweichung
var arrowSpace = 0;
var arrowSideSpace = 0;
if (s.arrow !== 'none') {
var angleRad = Math.abs(s.arrowAngle) * Math.PI / 180;
var bendFactor = s.arrowBend / 100;
var effectiveLength = s.arrowLength * (1 - bendFactor);
// Hauptrichtung: volle Laenge + Spitze + Puffer
arrowSpace = s.arrowLength + s.arrowTipLength + 20;
// Seitliche Abweichung durch Winkel
arrowSideSpace = Math.abs(Math.sin(angleRad) * effectiveLength) + s.arrowSize + 10;
}
var svgWidth = minWidth;
var svgHeight = minHeight;
var offsetX = 0, offsetY = 0;
switch(s.arrow) {
case 'left':
svgWidth += arrowSpace;
svgHeight = Math.max(svgHeight, minHeight + arrowSideSpace * 2);
offsetX = arrowSpace;
offsetY = (svgHeight - minHeight) / 2;
break;
case 'right':
svgWidth += arrowSpace;
svgHeight = Math.max(svgHeight, minHeight + arrowSideSpace * 2);
offsetY = (svgHeight - minHeight) / 2;
break;
case 'top':
svgHeight += arrowSpace;
svgWidth = Math.max(svgWidth, minWidth + arrowSideSpace * 2);
offsetY = arrowSpace;
offsetX = (svgWidth - minWidth) / 2;
break;
case 'bottom':
svgHeight += arrowSpace;
svgWidth = Math.max(svgWidth, minWidth + arrowSideSpace * 2);
offsetX = (svgWidth - minWidth) / 2;
break;
}
var draw = SVG().size(svgWidth, svgHeight);
var frameX = offsetX;
var frameY = offsetY;
var frameCx = frameX + minWidth / 2;
var frameCy = frameY + minHeight / 2;
// Text-Verschiebung basierend auf asymmetrischem Padding
// Wenn links mehr Padding ist, verschiebt sich der Text nach rechts
var textOffsetX = (s.paddingLeft - s.paddingRight) / 2;
var textOffsetY = (s.paddingTop - s.paddingBottom) / 2;
var textCx = frameCx + textOffsetX;
var textCy = frameCy + textOffsetY;
var dashArray = this.getDashArray(s.lineStyle, s.lineWeight);
var strokeStyle = { color: s.frameColor, weight: s.lineWeight, dashArray: dashArray };
if (s.shape !== 'none') {
this.createShape(draw, s.shape, frameX, frameY, minWidth, minHeight, strokeStyle);
}
if (s.arrow !== 'none') {
this.createArrow(draw, s.arrow, {
x: frameX, y: frameY, width: minWidth, height: minHeight
}, {
length: s.arrowLength, angle: s.arrowAngle, bendPos: s.arrowBend,
color: s.frameColor, weight: s.lineWeight, dashArray: dashArray,
arrowSize: s.arrowSize, tipLength: s.arrowTipLength
});
}
this.createText(draw, s.text, textCx, textCy, {
fontSize: s.fontSize, color: s.textColor,
lines: textMetrics.lines, lineHeight: textMetrics.lineHeight
});
return draw.svg();
},
generateArrowOnly: function(state) {
var s = state;
if (s.arrow === 'none') return null;
var length = s.arrowLength;
var tipLength = s.arrowTipLength;
var arrowSize = s.arrowSize;
var padding = 40;
// Berechne die tatsaechlichen Endpunkte des Pfeils
var angleRad = s.arrowAngle * Math.PI / 180;
var bendFactor = s.arrowBend / 100;
var straightPart = length * bendFactor;
var angledPart = length * (1 - bendFactor);
// Seitliche Ausdehnung durch den Winkel (mit Vorzeichen)
var sideExtent = Math.sin(angleRad) * angledPart;
var mainExtent = Math.cos(angleRad) * angledPart;
// Mindestgroesse fuer die seitliche Ausdehnung
var minSideSpace = Math.abs(sideExtent) + arrowSize + tipLength + padding;
var width, height, startX, startY;
switch(s.arrow) {
case 'right':
width = straightPart + mainExtent + tipLength + padding * 2;
height = Math.max(arrowSize * 4, minSideSpace * 2);
startX = padding;
// Bei positivem Winkel geht der Pfeil nach unten, also Start weiter oben
startY = height / 2 - sideExtent / 2;
break;
case 'left':
width = straightPart + mainExtent + tipLength + padding * 2;
height = Math.max(arrowSize * 4, minSideSpace * 2);
startX = width - padding;
startY = height / 2 + sideExtent / 2;
break;
case 'bottom':
width = Math.max(arrowSize * 4, minSideSpace * 2);
height = straightPart + mainExtent + tipLength + padding * 2;
startX = width / 2 - sideExtent / 2;
startY = padding;
break;
case 'top':
width = Math.max(arrowSize * 4, minSideSpace * 2);
height = straightPart + mainExtent + tipLength + padding * 2;
startX = width / 2 + sideExtent / 2;
startY = height - padding;
break;
}
// Stelle sicher, dass alle Werte positiv sind
width = Math.max(width, 80);
height = Math.max(height, 60);
var draw = SVG().size(width, height);
// Simuliere einen Rahmen-Punkt als Startpunkt
var frameRect = {
x: startX,
y: startY,
width: 0,
height: 0
};
this.createArrow(draw, s.arrow, frameRect, {
length: s.arrowLength, angle: s.arrowAngle, bendPos: s.arrowBend,
color: s.frameColor, weight: s.lineWeight,
dashArray: this.getDashArray(s.lineStyle, s.lineWeight),
arrowSize: s.arrowSize, tipLength: s.arrowTipLength
});
return draw.svg();
}
};
window.SvgGenerator = SvgGenerator;

View File

@@ -0,0 +1,344 @@
/**
* UI Bindings - Verbindet HTML-Elemente mit dem State
*/
var UiBindings = {
elements: {},
init: function() {
this.cacheElements();
this.bindEvents();
this.syncFromState();
this.updateVisibility();
this.updatePreview();
this.updateStandaloneArrowPreview();
},
cacheElements: function() {
var e = this.elements;
// Text & Farben
e.textInput = document.getElementById('textInput');
e.fontSizeInput = document.getElementById('fontSize');
e.fontSizeValue = document.getElementById('fontSizeValue');
e.textColorInput = document.getElementById('textColor');
e.frameColorInput = document.getElementById('frameColor');
// Rahmen
e.frameScaleInput = document.getElementById('frameScale');
e.frameScaleValue = document.getElementById('frameScaleValue');
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.paddingAllRow = document.getElementById('framePaddingAllRow');
e.paddingRow = document.getElementById('framePaddingRow');
// Pfeil
e.arrowLengthInput = document.getElementById('arrowLength');
e.arrowLengthValue = document.getElementById('arrowLengthValue');
e.arrowAngleInput = document.getElementById('arrowAngle');
e.arrowAngleValue = document.getElementById('arrowAngleValue');
e.arrowBendInput = document.getElementById('arrowBend');
e.arrowBendValue = document.getElementById('arrowBendValue');
e.arrowSizeInput = document.getElementById('arrowSize');
e.arrowSizeValue = document.getElementById('arrowSizeValue');
e.arrowTipLengthInput = document.getElementById('arrowTipLength');
e.arrowTipLengthValue = document.getElementById('arrowTipLengthValue');
e.arrowDetailsRow = document.getElementById('arrowDetailsRow');
e.arrowDetailsRow2 = document.getElementById('arrowDetailsRow2');
// Vorschau
e.textPreview = document.getElementById('textPreview');
e.standaloneArrowPreview = document.getElementById('standaloneArrowPreview');
// 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');
},
bindEvents: function() {
var self = this;
var e = this.elements;
var state = window.TextGenState;
// Text-Input
if (e.textInput) {
e.textInput.addEventListener('input', function(ev) {
state.set('text', ev.target.value);
self.updatePreview();
});
}
// Schriftgroesse
if (e.fontSizeInput) {
e.fontSizeInput.addEventListener('input', function(ev) {
var val = parseInt(ev.target.value);
state.set('fontSize', val);
if (e.fontSizeValue) e.fontSizeValue.textContent = val + 'px';
self.updatePreview();
});
}
// Farben
if (e.textColorInput) {
e.textColorInput.addEventListener('input', function(ev) {
state.set('textColor', ev.target.value);
self.updatePreview();
});
}
if (e.frameColorInput) {
e.frameColorInput.addEventListener('input', function(ev) {
state.set('frameColor', ev.target.value);
self.updatePreview();
});
}
// Rahmen-Skalierung
if (e.frameScaleInput) {
e.frameScaleInput.addEventListener('input', function(ev) {
var val = parseInt(ev.target.value);
state.set('frameScale', val);
if (e.frameScaleValue) e.frameScaleValue.textContent = val + '%';
self.updatePreview();
});
}
// Gesamt-Padding
if (e.paddingAllInput) {
e.paddingAllInput.addEventListener('input', function(ev) {
var val = parseInt(ev.target.value);
state.setMultiple({
paddingTop: val,
paddingRight: val,
paddingBottom: val,
paddingLeft: val
});
if (e.paddingAllValue) e.paddingAllValue.textContent = val + 'px';
// Einzelne Slider synchronisieren
if (e.paddingTopInput) e.paddingTopInput.value = val;
if (e.paddingTopValue) e.paddingTopValue.textContent = val + 'px';
if (e.paddingRightInput) e.paddingRightInput.value = val;
if (e.paddingRightValue) e.paddingRightValue.textContent = val + 'px';
if (e.paddingBottomInput) e.paddingBottomInput.value = val;
if (e.paddingBottomValue) e.paddingBottomValue.textContent = val + 'px';
if (e.paddingLeftInput) e.paddingLeftInput.value = val;
if (e.paddingLeftValue) e.paddingLeftValue.textContent = val + 'px';
self.updatePreview();
});
}
// Einzelne Paddings
this.bindPaddingSlider('paddingTopInput', 'paddingTopValue', 'paddingTop');
this.bindPaddingSlider('paddingRightInput', 'paddingRightValue', 'paddingRight');
this.bindPaddingSlider('paddingBottomInput', 'paddingBottomValue', 'paddingBottom');
this.bindPaddingSlider('paddingLeftInput', 'paddingLeftValue', 'paddingLeft');
// Pfeil-Slider
this.bindSlider('arrowLengthInput', 'arrowLengthValue', 'arrowLength', 'px');
this.bindSlider('arrowAngleInput', 'arrowAngleValue', 'arrowAngle', '\u00B0');
this.bindSlider('arrowBendInput', 'arrowBendValue', 'arrowBend', '%');
this.bindSlider('arrowSizeInput', 'arrowSizeValue', 'arrowSize', 'px');
this.bindSlider('arrowTipLengthInput', 'arrowTipLengthValue', 'arrowTipLength', 'px');
// Shape-Buttons
e.shapeButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
e.shapeButtons.forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
state.set('shape', btn.dataset.shape);
self.updateVisibility();
self.updatePreview();
});
});
// Arrow-Buttons
e.arrowButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
e.arrowButtons.forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
state.set('arrow', btn.dataset.arrow);
self.updateVisibility();
self.updatePreview();
self.updateStandaloneArrowPreview();
});
});
// Line-Style-Buttons
e.lineStyleButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
e.lineStyleButtons.forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
state.set('lineStyle', btn.dataset.style);
self.updatePreview();
});
});
// Line-Weight-Buttons
e.lineWeightButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
e.lineWeightButtons.forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
state.set('lineWeight', parseInt(btn.dataset.weight));
self.updatePreview();
});
});
},
bindSlider: function(inputKey, valueKey, stateKey, unit) {
var self = this;
var input = this.elements[inputKey];
var valueEl = this.elements[valueKey];
var state = window.TextGenState;
if (input) {
input.addEventListener('input', function(ev) {
var val = parseInt(ev.target.value);
state.set(stateKey, val);
if (valueEl) valueEl.textContent = val + unit;
self.updatePreview();
if (stateKey.indexOf('arrow') === 0) {
self.updateStandaloneArrowPreview();
}
});
}
},
bindPaddingSlider: function(inputKey, valueKey, stateKey) {
var self = this;
var input = this.elements[inputKey];
var valueEl = this.elements[valueKey];
var state = window.TextGenState;
if (input) {
input.addEventListener('input', function(ev) {
var val = parseInt(ev.target.value);
state.set(stateKey, val);
if (valueEl) valueEl.textContent = val + 'px';
self.updatePreview();
});
}
},
syncFromState: function() {
var e = this.elements;
var s = window.TextGenState.current;
if (e.textInput) e.textInput.value = s.text;
if (e.fontSizeInput) e.fontSizeInput.value = s.fontSize;
if (e.fontSizeValue) e.fontSizeValue.textContent = s.fontSize + 'px';
if (e.textColorInput) e.textColorInput.value = s.textColor;
if (e.frameColorInput) e.frameColorInput.value = s.frameColor;
if (e.frameScaleInput) e.frameScaleInput.value = s.frameScale;
if (e.frameScaleValue) e.frameScaleValue.textContent = s.frameScale + '%';
// Padding
if (e.paddingAllInput) e.paddingAllInput.value = s.paddingTop;
if (e.paddingAllValue) e.paddingAllValue.textContent = s.paddingTop + 'px';
if (e.paddingTopInput) e.paddingTopInput.value = s.paddingTop;
if (e.paddingTopValue) e.paddingTopValue.textContent = s.paddingTop + 'px';
if (e.paddingRightInput) e.paddingRightInput.value = s.paddingRight;
if (e.paddingRightValue) e.paddingRightValue.textContent = s.paddingRight + 'px';
if (e.paddingBottomInput) e.paddingBottomInput.value = s.paddingBottom;
if (e.paddingBottomValue) e.paddingBottomValue.textContent = s.paddingBottom + 'px';
if (e.paddingLeftInput) e.paddingLeftInput.value = s.paddingLeft;
if (e.paddingLeftValue) e.paddingLeftValue.textContent = s.paddingLeft + 'px';
// Pfeil
if (e.arrowLengthInput) e.arrowLengthInput.value = s.arrowLength;
if (e.arrowLengthValue) e.arrowLengthValue.textContent = s.arrowLength + 'px';
if (e.arrowAngleInput) e.arrowAngleInput.value = s.arrowAngle;
if (e.arrowAngleValue) e.arrowAngleValue.textContent = s.arrowAngle + '\u00B0';
if (e.arrowBendInput) e.arrowBendInput.value = s.arrowBend;
if (e.arrowBendValue) e.arrowBendValue.textContent = s.arrowBend + '%';
if (e.arrowSizeInput) e.arrowSizeInput.value = s.arrowSize;
if (e.arrowSizeValue) e.arrowSizeValue.textContent = s.arrowSize + 'px';
if (e.arrowTipLengthInput) e.arrowTipLengthInput.value = s.arrowTipLength;
if (e.arrowTipLengthValue) e.arrowTipLengthValue.textContent = s.arrowTipLength + 'px';
// Buttons aktivieren
this.activateButton(e.shapeButtons, 'shape', s.shape);
this.activateButton(e.arrowButtons, 'arrow', s.arrow);
this.activateButton(e.lineStyleButtons, 'style', s.lineStyle);
this.activateButtonByValue(e.lineWeightButtons, 'weight', s.lineWeight);
},
activateButton: function(buttons, dataAttr, value) {
buttons.forEach(function(btn) {
btn.classList.remove('active');
if (btn.dataset[dataAttr] === value) {
btn.classList.add('active');
}
});
},
activateButtonByValue: function(buttons, dataAttr, value) {
buttons.forEach(function(btn) {
btn.classList.remove('active');
if (parseInt(btn.dataset[dataAttr]) === value) {
btn.classList.add('active');
}
});
},
updateVisibility: function() {
var e = this.elements;
var s = window.TextGenState.current;
var hasShape = s.shape !== 'none';
var hasArrow = s.arrow !== 'none';
if (e.frameScaleRow) e.frameScaleRow.style.display = hasShape ? 'flex' : 'none';
if (e.paddingAllRow) e.paddingAllRow.style.display = hasShape ? 'flex' : 'none';
if (e.paddingRow) e.paddingRow.style.display = hasShape ? 'flex' : 'none';
if (e.arrowDetailsRow) e.arrowDetailsRow.style.display = hasArrow ? 'flex' : 'none';
if (e.arrowDetailsRow2) e.arrowDetailsRow2.style.display = hasArrow ? 'flex' : 'none';
},
updatePreview: function() {
var e = this.elements;
if (e.textPreview && window.SvgGenerator) {
var svg = window.SvgGenerator.generate(window.TextGenState.current);
e.textPreview.innerHTML = svg;
}
},
updateStandaloneArrowPreview: function() {
var e = this.elements;
var s = window.TextGenState.current;
if (!e.standaloneArrowPreview) return;
if (s.arrow === 'none') {
e.standaloneArrowPreview.innerHTML = '<p style="color: #9ca3af; font-size: 0.9rem;">Waehle einen Pfeil aus</p>';
return;
}
if (window.SvgGenerator) {
var svg = window.SvgGenerator.generateArrowOnly(s);
if (svg) {
e.standaloneArrowPreview.innerHTML = svg;
}
}
},
resetToDefaults: function() {
window.TextGenState.reset();
this.syncFromState();
this.updateVisibility();
this.updatePreview();
this.updateStandaloneArrowPreview();
}
};
window.UiBindings = UiBindings;

13
symbols/lib/svg.min.js vendored Normal file

File diff suppressed because one or more lines are too long

912
symbols/symbols.js Normal file
View File

@@ -0,0 +1,912 @@
// ============================================
// 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)
});
}