diff --git a/symbols/css/base.css b/symbols/css/base.css
new file mode 100644
index 0000000..c5c9ef3
--- /dev/null
+++ b/symbols/css/base.css
@@ -0,0 +1,131 @@
+/* ============================================
+ BASE - Variablen, Reset, Header
+ ============================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+ --primary: #2563eb;
+ --primary-dark: #1d4ed8;
+ --danger: #dc2626;
+ --success: #16a34a;
+ --warning: #f59e0b;
+ --gray-50: #f9fafb;
+ --gray-100: #f3f4f6;
+ --gray-200: #e5e7eb;
+ --gray-300: #d1d5db;
+ --gray-400: #9ca3af;
+ --gray-500: #6b7280;
+ --gray-600: #4b5563;
+ --gray-700: #374151;
+ --gray-800: #1f2937;
+ --gray-900: #111827;
+ --radius: 12px;
+ --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+ background: var(--gray-100);
+ color: var(--gray-800);
+ line-height: 1.5;
+}
+
+/* ========== HEADER ========== */
+.header {
+ background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
+ color: white;
+ padding: 1.5rem 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ box-shadow: var(--shadow-lg);
+}
+
+.header-content h1 {
+ font-size: 1.5rem;
+ font-weight: 700;
+ margin-bottom: 0.25rem;
+}
+
+.header-content .subtitle {
+ color: var(--gray-400);
+ font-size: 0.85rem;
+}
+
+.header-actions {
+ display: flex;
+ gap: 0.75rem;
+}
+
+.btn-header {
+ background: rgba(255,255,255,0.1);
+ color: white;
+ border: 1px solid rgba(255,255,255,0.2);
+ padding: 0.6rem 1rem;
+ border-radius: var(--radius);
+ cursor: pointer;
+ font-size: 0.85rem;
+ font-weight: 500;
+ transition: all 0.2s;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.btn-header:hover {
+ background: rgba(255,255,255,0.2);
+ border-color: rgba(255,255,255,0.3);
+}
+
+.btn-header .badge {
+ background: var(--primary);
+ padding: 0.1rem 0.5rem;
+ border-radius: 10px;
+ font-size: 0.75rem;
+}
+
+/* ========== NOTIFICATIONS ========== */
+.notification {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ padding: 1rem 1.5rem;
+ border-radius: var(--radius);
+ color: white;
+ font-weight: 500;
+ z-index: 1000;
+ transform: translateY(100px);
+ opacity: 0;
+ transition: all 0.3s;
+}
+
+.notification.show {
+ transform: translateY(0);
+ opacity: 1;
+}
+
+.notification.success { background: var(--success); }
+.notification.error { background: var(--danger); }
+.notification.info { background: var(--primary); }
+
+/* ========== FOOTER ========== */
+.footer {
+ text-align: center;
+ padding: 2rem;
+ color: var(--gray-500);
+ font-size: 0.85rem;
+}
+
+.footer a {
+ color: var(--primary);
+ text-decoration: none;
+}
diff --git a/symbols/css/components.css b/symbols/css/components.css
new file mode 100644
index 0000000..3b9b3d1
--- /dev/null
+++ b/symbols/css/components.css
@@ -0,0 +1,209 @@
+/* ============================================
+ COMPONENTS - Buttons, Forms, etc.
+ ============================================ */
+
+/* ========== SAVE BUTTON ========== */
+.btn-save {
+ background: linear-gradient(135deg, #10b981, #059669) !important;
+}
+
+.btn-save:hover {
+ background: linear-gradient(135deg, #059669, #047857) !important;
+}
+
+/* ========== PNG/JPG BUTTONS ========== */
+.btn-png {
+ background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
+}
+
+.btn-png:hover {
+ background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
+}
+
+.btn-jpg {
+ background: linear-gradient(135deg, #f59e0b, #d97706) !important;
+}
+
+.btn-jpg:hover {
+ background: linear-gradient(135deg, #d97706, #b45309) !important;
+}
+
+/* ========== SAVE FORM ========== */
+.save-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.form-group label {
+ font-weight: 500;
+ color: var(--gray-700);
+}
+
+.form-group input[type="text"] {
+ padding: 0.75rem;
+ border: 1px solid var(--gray-300);
+ border-radius: 6px;
+ font-size: 1rem;
+}
+
+.form-group input[type="text"]:focus {
+ outline: none;
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+/* ========== CUSTOM SYMBOLS BADGE ========== */
+.filter-pill[data-filter="custom"] {
+ background: linear-gradient(135deg, #10b981, #059669);
+ color: white;
+ border-color: #059669;
+}
+
+.filter-pill[data-filter="custom"]:hover {
+ background: linear-gradient(135deg, #059669, #047857);
+}
+
+/* ========== SYMBOL CARD DELETE BUTTON ========== */
+.symbol-card .btn-delete {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: #ef4444;
+ color: white;
+ border: none;
+ cursor: pointer;
+ font-size: 12px;
+ line-height: 1;
+ display: none;
+ z-index: 10;
+}
+
+.symbol-card:hover .btn-delete {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.symbol-card .btn-delete:hover {
+ background: #dc2626;
+}
+
+/* ========== IMPRESSUM ========== */
+.impressum-content {
+ text-align: left;
+ line-height: 1.6;
+}
+
+.impressum-content h3 {
+ color: var(--primary);
+ margin-bottom: 1.5rem;
+ font-size: 1.4rem;
+}
+
+.impressum-content h4 {
+ color: var(--gray-700);
+ margin-top: 1.5rem;
+ margin-bottom: 0.75rem;
+ font-size: 1.1rem;
+}
+
+.impressum-content p {
+ margin-bottom: 1rem;
+ color: var(--gray-600);
+}
+
+.impressum-content strong {
+ color: var(--gray-800);
+}
+
+.impressum-content a {
+ color: var(--primary);
+ text-decoration: none;
+}
+
+.impressum-content a:hover {
+ text-decoration: underline;
+}
+
+.impressum-content hr {
+ border: none;
+ border-top: 1px solid var(--gray-200);
+ margin: 1.5rem 0;
+}
+
+.impressum-content .copyright {
+ margin-top: 1.5rem;
+ padding-top: 1rem;
+ border-top: 1px solid var(--gray-200);
+ text-align: center;
+ font-size: 0.9rem;
+ color: var(--gray-500);
+}
+
+/* ========== FOOTER ========== */
+.footer-links {
+ margin-top: 0.5rem;
+}
+
+.footer-links a {
+ color: var(--gray-400);
+ text-decoration: none;
+ font-size: 0.85rem;
+ transition: color 0.2s;
+}
+
+.footer-links a:hover {
+ color: white;
+ text-decoration: underline;
+}
+
+/* ========== NO RESULTS ========== */
+.no-results {
+ grid-column: 1 / -1;
+ text-align: center;
+ padding: 3rem;
+ color: var(--gray-500);
+ font-size: 1rem;
+ line-height: 1.6;
+}
+
+/* ========== DARK MODE ========== */
+[data-theme="dark"] .btn-reset {
+ background: #dc2626;
+}
+
+[data-theme="dark"] .btn-reset:hover {
+ background: #b91c1c;
+}
+
+[data-theme="dark"] .standalone-arrow-section {
+ border-top-color: #3e3126;
+}
+
+[data-theme="dark"] .standalone-arrow-preview {
+ background: #2a2319;
+ border-color: #3e3126;
+}
+
+[data-theme="dark"] #arrowDetailsRow,
+[data-theme="dark"] #arrowDetailsRow2 {
+ background: #2a2319;
+}
+
+[data-theme="dark"] .padding-group label {
+ color: #9ca3af;
+}
+
+[data-theme="dark"] .standalone-arrow-section .section-header h4 {
+ color: #f5f1e8;
+}
diff --git a/symbols/css/layout.css b/symbols/css/layout.css
new file mode 100644
index 0000000..c835df6
--- /dev/null
+++ b/symbols/css/layout.css
@@ -0,0 +1,276 @@
+/* ============================================
+ LAYOUT - Search, Grid, Cards
+ ============================================ */
+
+/* ========== SEARCH & FILTER ========== */
+.search-container {
+ background: white;
+ padding: 1rem 2rem;
+ border-bottom: 1px solid var(--gray-200);
+ position: sticky;
+ top: 72px;
+ z-index: 90;
+}
+
+.search-box {
+ position: relative;
+ max-width: 400px;
+ margin-bottom: 1rem;
+}
+
+.search-box input {
+ width: 100%;
+ padding: 0.75rem 1rem 0.75rem 2.5rem;
+ border: 2px solid var(--gray-200);
+ border-radius: var(--radius);
+ font-size: 0.9rem;
+ transition: border-color 0.2s;
+}
+
+.search-box input:focus {
+ outline: none;
+ border-color: var(--primary);
+}
+
+.search-box .search-icon {
+ position: absolute;
+ left: 0.75rem;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.filter-pills {
+ display: flex;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.filter-pill {
+ padding: 0.5rem 1rem;
+ border: 2px solid var(--gray-200);
+ border-radius: 20px;
+ background: white;
+ cursor: pointer;
+ font-size: 0.8rem;
+ font-weight: 500;
+ transition: all 0.2s;
+}
+
+.filter-pill:hover {
+ border-color: var(--primary);
+ color: var(--primary);
+}
+
+.filter-pill.active {
+ background: var(--primary);
+ border-color: var(--primary);
+ color: white;
+}
+
+.filter-divider {
+ color: var(--gray-300);
+ margin: 0 0.25rem;
+}
+
+.filter-label {
+ font-size: 0.75rem;
+ color: var(--gray-500);
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+/* ========== MAIN CONTENT ========== */
+.main-content {
+ max-width: 1600px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+/* ========== SYMBOL GRID ========== */
+.symbol-grid {
+ display: flex;
+ flex-direction: column;
+ gap: 2.5rem;
+}
+
+/* ========== CATEGORY HEADER ========== */
+.category-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.75rem 1rem;
+ background: linear-gradient(90deg, var(--gray-200), transparent);
+ border-radius: var(--radius);
+ margin-bottom: 1rem;
+}
+
+.category-header span:first-child {
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: var(--gray-800);
+}
+
+.category-count {
+ background: var(--gray-300);
+ color: var(--gray-700);
+ padding: 0.25rem 0.75rem;
+ border-radius: 20px;
+ font-size: 0.75rem;
+ font-weight: 600;
+}
+
+/* ========== CATEGORY GRID ========== */
+.category-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 1rem;
+}
+
+.category-grid .symbol-card {
+ height: 100%;
+ min-height: 200px;
+}
+
+/* ========== SYMBOL CARD ========== */
+.symbol-card {
+ background: white;
+ border: 2px solid var(--gray-200);
+ border-radius: var(--radius);
+ padding: 1.25rem 1rem;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ position: relative;
+}
+
+.symbol-card:hover {
+ border-color: var(--primary);
+ box-shadow: var(--shadow-lg);
+ transform: translateY(-4px);
+}
+
+.symbol-card svg {
+ width: 64px;
+ height: 64px;
+ margin-bottom: 0.75rem;
+}
+
+.symbol-name {
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: var(--gray-700);
+ line-height: 1.3;
+ margin-bottom: 0.5rem;
+}
+
+/* ========== SYMBOL ACTIONS ========== */
+.symbol-actions {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.3rem;
+ margin-top: auto;
+ padding-top: 0.75rem;
+ width: 100%;
+ opacity: 0;
+ transition: opacity 0.2s;
+}
+
+.symbol-card:hover .symbol-actions {
+ opacity: 1;
+}
+
+.btn-action {
+ padding: 0.35rem 0.4rem;
+ border: 1px solid var(--gray-300);
+ border-radius: 6px;
+ background: white;
+ cursor: pointer;
+ font-size: 0.65rem;
+ transition: all 0.15s;
+ white-space: nowrap;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.btn-action:hover {
+ background: var(--gray-100);
+}
+
+.btn-copy:hover { background: #dcfce7; border-color: #22c55e; }
+.btn-svg:hover { background: #dbeafe; border-color: #3b82f6; }
+.btn-dxf:hover { background: #fef3c7; border-color: #f59e0b; }
+.btn-legend:hover { background: #fce7f3; border-color: #ec4899; }
+.btn-legend.active { background: #fce7f3; border-color: #ec4899; }
+
+/* ========== CHECKBOX ========== */
+.symbol-checkbox {
+ position: absolute;
+ top: 0.5rem;
+ right: 0.5rem;
+ width: 22px;
+ height: 22px;
+ border: 2px solid var(--gray-300);
+ border-radius: 6px;
+ background: white;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.75rem;
+ transition: all 0.2s;
+ opacity: 0;
+}
+
+.symbol-card:hover .symbol-checkbox {
+ opacity: 1;
+}
+
+.symbol-checkbox.checked {
+ opacity: 1;
+ background: var(--primary);
+ border-color: var(--primary);
+ color: white;
+}
+
+.no-results {
+ text-align: center;
+ padding: 3rem;
+ color: var(--gray-500);
+ font-size: 1rem;
+}
+
+/* ========== RESPONSIVE ========== */
+@media (max-width: 768px) {
+ .header {
+ padding: 1rem;
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .search-container {
+ padding: 1rem;
+ top: auto;
+ position: static;
+ }
+
+ .main-content {
+ padding: 1rem;
+ }
+
+ .category-grid {
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+ }
+
+ .symbol-actions {
+ opacity: 1;
+ }
+}
+
+.hidden {
+ display: none !important;
+}
diff --git a/symbols/css/legend.css b/symbols/css/legend.css
new file mode 100644
index 0000000..db34d52
--- /dev/null
+++ b/symbols/css/legend.css
@@ -0,0 +1,85 @@
+/* ============================================
+ LEGEND - Legenden-Modal und Preview
+ ============================================ */
+
+/* ========== MODAL WIDE ========== */
+.modal-wide {
+ max-width: 1000px;
+ width: 95%;
+}
+
+.modal-medium {
+ max-width: 600px;
+}
+
+.modal-small {
+ max-width: 400px;
+}
+
+/* ========== LEGEND MODAL BODY ========== */
+.legend-modal-body {
+ display: flex;
+ gap: 1.5rem;
+ min-height: 400px;
+}
+
+.legend-editor {
+ flex: 1;
+ min-width: 0;
+}
+
+.legend-editor h3,
+.legend-preview-section h3 {
+ margin: 0 0 1rem 0;
+ font-size: 1rem;
+ color: #374151;
+ border-bottom: 1px solid #e5e7eb;
+ padding-bottom: 0.5rem;
+}
+
+/* ========== LEGEND PREVIEW ========== */
+.legend-preview-section {
+ flex: 0 0 350px;
+ display: flex;
+ flex-direction: column;
+}
+
+.legend-preview-box {
+ flex: 1;
+ background: #ffffff;
+ border: 2px solid #e5e7eb;
+ border-radius: 8px;
+ padding: 1rem;
+ overflow: auto;
+ min-height: 300px;
+}
+
+.legend-preview-box svg {
+ max-width: 100%;
+ height: auto;
+}
+
+.legend-preview-actions {
+ margin-top: 0.75rem;
+ display: flex;
+ justify-content: center;
+}
+
+.legend-preview-empty {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: #9ca3af;
+ font-style: italic;
+}
+
+/* ========== RESPONSIVE ========== */
+@media (max-width: 768px) {
+ .legend-modal-body {
+ flex-direction: column;
+ }
+ .legend-preview-section {
+ flex: none;
+ }
+}
diff --git a/symbols/css/modal.css b/symbols/css/modal.css
new file mode 100644
index 0000000..496b154
--- /dev/null
+++ b/symbols/css/modal.css
@@ -0,0 +1,316 @@
+/* ============================================
+ MODAL & BUTTONS
+ ============================================ */
+
+/* ========== MODAL ========== */
+.modal {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0,0,0,0.5);
+ z-index: 1000;
+ align-items: center;
+ justify-content: center;
+}
+
+.modal.open, .modal.active {
+ display: flex;
+}
+
+.modal-content {
+ background: white;
+ border-radius: var(--radius);
+ width: 90%;
+ max-width: 600px;
+ max-height: 80vh;
+ display: flex;
+ flex-direction: column;
+ box-shadow: var(--shadow-lg);
+}
+
+.modal-small {
+ max-width: 400px;
+}
+
+.modal-header {
+ padding: 1.25rem 1.5rem;
+ border-bottom: 1px solid var(--gray-200);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.modal-header h2 {
+ font-size: 1.1rem;
+ font-weight: 600;
+}
+
+.modal-close {
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: var(--gray-500);
+ padding: 0.25rem;
+ line-height: 1;
+}
+
+.modal-close:hover {
+ color: var(--gray-800);
+}
+
+.modal-body {
+ flex: 1;
+ overflow-y: auto;
+ padding: 1.5rem;
+}
+
+.modal-footer {
+ padding: 1rem 1.5rem;
+ border-top: 1px solid var(--gray-200);
+ display: flex;
+ gap: 0.75rem;
+ justify-content: flex-end;
+}
+
+/* ========== BUTTONS ========== */
+.btn-primary {
+ background: var(--primary);
+ color: white;
+ border: none;
+ padding: 0.6rem 1.25rem;
+ border-radius: var(--radius);
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 0.85rem;
+ transition: background 0.2s;
+}
+
+.btn-primary:hover {
+ background: var(--primary-dark);
+}
+
+.btn-secondary {
+ background: var(--gray-100);
+ color: var(--gray-700);
+ border: 1px solid var(--gray-300);
+ padding: 0.6rem 1.25rem;
+ border-radius: var(--radius);
+ cursor: pointer;
+ font-weight: 500;
+ font-size: 0.85rem;
+ transition: all 0.2s;
+}
+
+.btn-secondary:hover {
+ background: var(--gray-200);
+}
+
+.btn-remove {
+ background: var(--danger);
+ color: white;
+ border: none;
+}
+
+.btn-remove:hover {
+ background: #b91c1c;
+}
+
+.btn-delete {
+ position: absolute;
+ top: 0.5rem;
+ right: 0.5rem;
+ background: var(--danger);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ padding: 0.25rem 0.5rem;
+ cursor: pointer;
+ font-size: 0.7rem;
+}
+
+/* ========== LEGEND ITEMS ========== */
+.legend-items {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem;
+ background: var(--gray-50);
+ border-radius: 8px;
+ border: 1px solid var(--gray-200);
+}
+
+.legend-item svg,
+.legend-item-preview svg {
+ width: 40px;
+ height: 40px;
+ flex-shrink: 0;
+}
+
+.legend-item-preview {
+ width: 50px;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.legend-item-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.legend-item-name,
+.legend-item-desc {
+ width: 100%;
+ padding: 0.4rem 0.6rem;
+ border: 1px solid var(--gray-300);
+ border-radius: 6px;
+ font-size: 0.85rem;
+}
+
+.legend-item-name:focus,
+.legend-item-desc:focus {
+ outline: none;
+ border-color: var(--primary);
+}
+
+.legend-item-actions {
+ display: flex;
+ gap: 0.25rem;
+}
+
+.legend-item-actions button {
+ padding: 0.4rem 0.6rem;
+ border: 1px solid var(--gray-300);
+ border-radius: 4px;
+ background: white;
+ cursor: pointer;
+ font-size: 0.75rem;
+}
+
+.legend-item-actions button:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.legend-item-remove {
+ background: var(--danger);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ width: 28px;
+ height: 28px;
+ cursor: pointer;
+ font-size: 1rem;
+}
+
+.legend-empty {
+ text-align: center;
+ color: var(--gray-400);
+ padding: 2rem;
+}
+
+/* ========== LEGEND PREVIEW ========== */
+.modal-wide {
+ max-width: 1000px;
+ width: 95%;
+}
+
+.legend-modal-body {
+ display: flex;
+ gap: 1.5rem;
+ min-height: 400px;
+}
+
+.legend-editor {
+ flex: 1;
+ min-width: 0;
+}
+
+.legend-editor h3,
+.legend-preview-section h3 {
+ margin: 0 0 1rem 0;
+ font-size: 1rem;
+ color: var(--gray-700);
+ border-bottom: 1px solid var(--gray-200);
+ padding-bottom: 0.5rem;
+}
+
+.legend-preview-section {
+ flex: 0 0 350px;
+ display: flex;
+ flex-direction: column;
+}
+
+.legend-preview-box {
+ flex: 1;
+ background: #ffffff;
+ border: 2px solid var(--gray-200);
+ border-radius: 8px;
+ padding: 1rem;
+ overflow: auto;
+ min-height: 300px;
+}
+
+.legend-preview-box svg {
+ max-width: 100%;
+ height: auto;
+}
+
+.legend-preview-actions {
+ margin-top: 0.75rem;
+ display: flex;
+ justify-content: center;
+}
+
+.legend-preview-empty {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: var(--gray-400);
+ font-style: italic;
+}
+
+@media (max-width: 768px) {
+ .legend-modal-body {
+ flex-direction: column;
+ }
+ .legend-preview-section {
+ flex: none;
+ }
+}
+
+/* ========== TOAST ========== */
+.toast {
+ position: fixed;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%) translateY(100px);
+ background: var(--gray-800);
+ color: white;
+ padding: 1rem 2rem;
+ border-radius: var(--radius);
+ font-weight: 500;
+ box-shadow: var(--shadow-lg);
+ opacity: 0;
+ transition: all 0.3s;
+ z-index: 1100;
+}
+
+.toast.show {
+ transform: translateX(-50%) translateY(0);
+ opacity: 1;
+}
diff --git a/symbols/css/styles.css b/symbols/css/styles.css
deleted file mode 100644
index 3bb348c..0000000
--- a/symbols/css/styles.css
+++ /dev/null
@@ -1,1319 +0,0 @@
-/* ============================================
- GUTACHTER SYMBOLBIBLIOTHEK - Styles v2.0
- ============================================ */
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
-:root {
- --primary: #2563eb;
- --primary-dark: #1d4ed8;
- --danger: #dc2626;
- --success: #16a34a;
- --warning: #f59e0b;
- --gray-50: #f9fafb;
- --gray-100: #f3f4f6;
- --gray-200: #e5e7eb;
- --gray-300: #d1d5db;
- --gray-400: #9ca3af;
- --gray-500: #6b7280;
- --gray-600: #4b5563;
- --gray-700: #374151;
- --gray-800: #1f2937;
- --gray-900: #111827;
- --radius: 12px;
- --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-}
-
-* { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
- background: var(--gray-100);
- color: var(--gray-800);
- line-height: 1.5;
-}
-
-/* ========== HEADER ========== */
-.header {
- background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
- color: white;
- padding: 1.5rem 2rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
- gap: 1rem;
- position: sticky;
- top: 0;
- z-index: 100;
- box-shadow: var(--shadow-lg);
-}
-
-.header-content h1 {
- font-size: 1.5rem;
- font-weight: 700;
- margin-bottom: 0.25rem;
-}
-
-.header-content .subtitle {
- color: var(--gray-400);
- font-size: 0.85rem;
-}
-
-.header-actions {
- display: flex;
- gap: 0.75rem;
-}
-
-.btn-header {
- background: rgba(255,255,255,0.1);
- color: white;
- border: 1px solid rgba(255,255,255,0.2);
- padding: 0.6rem 1rem;
- border-radius: var(--radius);
- cursor: pointer;
- font-size: 0.85rem;
- font-weight: 500;
- transition: all 0.2s;
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
-
-.btn-header:hover {
- background: rgba(255,255,255,0.2);
- border-color: rgba(255,255,255,0.3);
-}
-
-.btn-header .badge {
- background: var(--primary);
- padding: 0.1rem 0.5rem;
- border-radius: 10px;
- font-size: 0.75rem;
-}
-
-/* ========== SEARCH & FILTER ========== */
-.search-container {
- background: white;
- padding: 1rem 2rem;
- border-bottom: 1px solid var(--gray-200);
- position: sticky;
- top: 72px;
- z-index: 90;
-}
-
-.search-box {
- position: relative;
- max-width: 400px;
- margin-bottom: 1rem;
-}
-
-.search-box input {
- width: 100%;
- padding: 0.75rem 1rem 0.75rem 2.5rem;
- border: 2px solid var(--gray-200);
- border-radius: var(--radius);
- font-size: 0.9rem;
- transition: border-color 0.2s;
-}
-
-.search-box input:focus {
- outline: none;
- border-color: var(--primary);
-}
-
-.search-box .search-icon {
- position: absolute;
- left: 0.75rem;
- top: 50%;
- transform: translateY(-50%);
-}
-
-.filter-pills {
- display: flex;
- gap: 0.5rem;
- flex-wrap: wrap;
- align-items: center;
-}
-
-.filter-pill {
- padding: 0.5rem 1rem;
- border: 2px solid var(--gray-200);
- border-radius: 20px;
- background: white;
- cursor: pointer;
- font-size: 0.8rem;
- font-weight: 500;
- transition: all 0.2s;
-}
-
-.filter-pill:hover {
- border-color: var(--primary);
- color: var(--primary);
-}
-
-.filter-pill.active {
- background: var(--primary);
- border-color: var(--primary);
- color: white;
-}
-
-.filter-divider {
- color: var(--gray-300);
- margin: 0 0.25rem;
-}
-
-.filter-label {
- font-size: 0.75rem;
- color: var(--gray-500);
- font-weight: 600;
- text-transform: uppercase;
-}
-
-/* ========== MAIN CONTENT ========== */
-.main-content {
- max-width: 1600px;
- margin: 0 auto;
- padding: 2rem;
-}
-
-/* ========== SYMBOL GRID (Container) ========== */
-.symbol-grid {
- display: flex;
- flex-direction: column;
- gap: 2.5rem;
-}
-
-/* ========== CATEGORY HEADER ========== */
-.category-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0.75rem 1rem;
- background: linear-gradient(90deg, var(--gray-200), transparent);
- border-radius: var(--radius);
- margin-bottom: 1rem;
-}
-
-.category-header span:first-child {
- font-size: 1.1rem;
- font-weight: 600;
- color: var(--gray-800);
-}
-
-.category-count {
- background: var(--gray-300);
- color: var(--gray-700);
- padding: 0.25rem 0.75rem;
- border-radius: 20px;
- font-size: 0.75rem;
- font-weight: 600;
-}
-
-/* ========== CATEGORY GRID ========== */
-.category-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
- gap: 1rem;
-}
-
-/* Gleichmäßige Kartenhöhe */
-.category-grid .symbol-card {
- height: 100%;
- min-height: 200px;
-}
-
-/* ========== SYMBOL CARD ========== */
-.symbol-card {
- background: white;
- border: 2px solid var(--gray-200);
- border-radius: var(--radius);
- padding: 1.25rem 1rem;
- cursor: pointer;
- transition: all 0.2s ease;
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- position: relative;
-}
-
-.symbol-card:hover {
- border-color: var(--primary);
- box-shadow: var(--shadow-lg);
- transform: translateY(-4px);
-}
-
-.symbol-card svg {
- width: 64px;
- height: 64px;
- margin-bottom: 0.75rem;
-}
-
-.symbol-name {
- font-size: 0.8rem;
- font-weight: 600;
- color: var(--gray-700);
- line-height: 1.3;
- margin-bottom: 0.5rem;
-}
-
-/* ========== SYMBOL ACTIONS ========== */
-.symbol-actions {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 0.3rem;
- margin-top: auto;
- padding-top: 0.75rem;
- width: 100%;
- opacity: 0;
- transition: opacity 0.2s;
-}
-
-.symbol-card:hover .symbol-actions {
- opacity: 1;
-}
-
-.btn-action {
- padding: 0.35rem 0.4rem;
- border: 1px solid var(--gray-300);
- border-radius: 6px;
- background: white;
- cursor: pointer;
- font-size: 0.65rem;
- transition: all 0.15s;
- white-space: nowrap;
- text-align: center;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.btn-action:hover {
- background: var(--gray-100);
-}
-
-.btn-copy:hover { background: #dcfce7; border-color: #22c55e; }
-.btn-svg:hover { background: #dbeafe; border-color: #3b82f6; }
-.btn-dxf:hover { background: #fef3c7; border-color: #f59e0b; }
-.btn-legend:hover { background: #fce7f3; border-color: #ec4899; }
-.btn-legend.active { background: #fce7f3; border-color: #ec4899; }
-
-/* ========== CHECKBOX ========== */
-.symbol-checkbox {
- position: absolute;
- top: 0.5rem;
- right: 0.5rem;
- width: 22px;
- height: 22px;
- border: 2px solid var(--gray-300);
- border-radius: 6px;
- background: white;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 0.75rem;
- transition: all 0.2s;
- opacity: 0;
-}
-
-.symbol-card:hover .symbol-checkbox {
- opacity: 1;
-}
-
-.symbol-checkbox.checked {
- opacity: 1;
- background: var(--primary);
- border-color: var(--primary);
- color: white;
-}
-
-/* ========== MODAL ========== */
-.modal {
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0,0,0,0.5);
- z-index: 1000;
- align-items: center;
- justify-content: center;
-}
-
-.modal.open {
- display: flex;
-}
-
-.modal-content {
- background: white;
- border-radius: var(--radius);
- width: 90%;
- max-width: 600px;
- max-height: 80vh;
- display: flex;
- flex-direction: column;
- box-shadow: var(--shadow-lg);
-}
-
-.modal-header {
- padding: 1.25rem 1.5rem;
- border-bottom: 1px solid var(--gray-200);
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.modal-header h2 {
- font-size: 1.1rem;
- font-weight: 600;
-}
-
-.modal-close {
- background: none;
- border: none;
- font-size: 1.5rem;
- cursor: pointer;
- color: var(--gray-500);
- padding: 0.25rem;
- line-height: 1;
-}
-
-.modal-close:hover {
- color: var(--gray-800);
-}
-
-.modal-body {
- flex: 1;
- overflow-y: auto;
- padding: 1.5rem;
-}
-
-.modal-footer {
- padding: 1rem 1.5rem;
- border-top: 1px solid var(--gray-200);
- display: flex;
- gap: 0.75rem;
- justify-content: flex-end;
-}
-
-/* ========== BUTTONS ========== */
-.btn-primary {
- background: var(--primary);
- color: white;
- border: none;
- padding: 0.6rem 1.25rem;
- border-radius: var(--radius);
- cursor: pointer;
- font-weight: 600;
- font-size: 0.85rem;
- transition: background 0.2s;
-}
-
-.btn-primary:hover {
- background: var(--primary-dark);
-}
-
-.btn-secondary {
- background: var(--gray-100);
- color: var(--gray-700);
- border: 1px solid var(--gray-300);
- padding: 0.6rem 1.25rem;
- border-radius: var(--radius);
- cursor: pointer;
- font-weight: 500;
- font-size: 0.85rem;
- transition: all 0.2s;
-}
-
-.btn-secondary:hover {
- background: var(--gray-200);
-}
-
-/* ========== LEGEND ITEMS ========== */
-.legend-items {
- display: flex;
- flex-direction: column;
- gap: 0.75rem;
-}
-
-.legend-item {
- display: flex;
- align-items: center;
- gap: 0.75rem;
- padding: 0.75rem;
- background: var(--gray-50);
- border-radius: 8px;
- border: 1px solid var(--gray-200);
-}
-
-.legend-item svg {
- width: 40px;
- height: 40px;
- flex-shrink: 0;
-}
-
-.legend-item-content {
- flex: 1;
-}
-
-.legend-item-name {
- font-size: 0.75rem;
- color: var(--gray-500);
- margin-bottom: 0.25rem;
-}
-
-.legend-item-input {
- width: 100%;
- padding: 0.4rem 0.6rem;
- border: 1px solid var(--gray-300);
- border-radius: 6px;
- font-size: 0.85rem;
-}
-
-.legend-item-input:focus {
- outline: none;
- border-color: var(--primary);
-}
-
-.legend-item-remove {
- background: var(--danger);
- color: white;
- border: none;
- border-radius: 6px;
- width: 28px;
- height: 28px;
- cursor: pointer;
- font-size: 1rem;
-}
-
-.legend-empty {
- text-align: center;
- color: var(--gray-400);
- padding: 2rem;
-}
-
-/* ========== TOAST ========== */
-.toast {
- position: fixed;
- bottom: 2rem;
- left: 50%;
- transform: translateX(-50%) translateY(100px);
- background: var(--gray-800);
- color: white;
- padding: 1rem 2rem;
- border-radius: var(--radius);
- font-weight: 500;
- box-shadow: var(--shadow-lg);
- opacity: 0;
- transition: all 0.3s;
- z-index: 1100;
-}
-
-.toast.show {
- transform: translateX(-50%) translateY(0);
- opacity: 1;
-}
-
-/* ========== FOOTER ========== */
-.footer {
- text-align: center;
- padding: 2rem;
- color: var(--gray-500);
- font-size: 0.85rem;
- border-top: 1px solid var(--gray-200);
- background: white;
- margin-top: 2rem;
-}
-
-/* ========== RESPONSIVE ========== */
-@media (max-width: 768px) {
- .header {
- flex-direction: column;
- text-align: center;
- padding: 1rem;
- }
-
- .search-container {
- padding: 1rem;
- top: auto;
- position: relative;
- }
-
- .search-box {
- max-width: 100%;
- }
-
- .main-content {
- padding: 1rem;
- }
-
- .symbol-grid {
- grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
- gap: 0.75rem;
- }
-
- .symbol-card {
- padding: 1rem 0.75rem;
- }
-
- .symbol-actions {
- opacity: 1;
- flex-wrap: wrap;
- justify-content: center;
- }
-}
-
-/* ========== HIDDEN ========== */
-.hidden {
- display: none !important;
-}
-
-/* ========== TEXT-GENERATOR ========== */
-.text-generator {
- background: white;
- margin: 1rem 2rem;
- border-radius: var(--radius);
- box-shadow: var(--shadow);
- overflow: hidden;
-}
-
-.text-generator-header {
- background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
- color: white;
- padding: 0.75rem 1.25rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
- cursor: pointer;
- user-select: none;
-}
-
-.text-generator-header h3 {
- font-size: 1rem;
- font-weight: 600;
- margin: 0;
-}
-
-.collapse-btn {
- background: none;
- border: none;
- color: white;
- font-size: 1rem;
- cursor: pointer;
- transition: transform 0.3s;
- padding: 0.25rem;
-}
-
-.text-generator.collapsed .collapse-btn {
- transform: rotate(-90deg);
-}
-
-.text-generator-body {
- padding: 1.25rem;
- display: flex;
- flex-direction: column;
- gap: 1rem;
- transition: all 0.3s;
-}
-
-.text-generator.collapsed .text-generator-body {
- display: none;
-}
-
-.text-generator-row {
- display: flex;
- gap: 2rem;
- flex-wrap: wrap;
-}
-
-.text-input-group {
- display: flex;
- align-items: center;
- gap: 0.75rem;
- flex-wrap: wrap;
-}
-
-.text-input-group label {
- font-weight: 500;
- font-size: 0.85rem;
- color: var(--gray-700);
- min-width: 90px;
-}
-
-.text-input-group input[type="text"] {
- padding: 0.5rem 0.75rem;
- border: 1px solid var(--gray-300);
- border-radius: 6px;
- font-size: 0.9rem;
- width: 180px;
- transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.text-input-group input[type="text"]:focus {
- outline: none;
- border-color: var(--primary);
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-}
-
-.text-input-group input[type="range"] {
- width: 120px;
- cursor: pointer;
-}
-
-#fontSizeValue {
- font-size: 0.8rem;
- color: var(--gray-500);
- min-width: 35px;
-}
-
-/* Shape, Line Style, Weight Buttons */
-.shape-options,
-.line-style-options,
-.line-weight-options {
- display: flex;
- gap: 0.35rem;
-}
-
-.shape-btn,
-.line-btn,
-.weight-btn {
- padding: 0.4rem 0.65rem;
- border: 1px solid var(--gray-300);
- background: white;
- border-radius: 6px;
- cursor: pointer;
- font-size: 0.8rem;
- transition: all 0.2s;
- color: var(--gray-600);
-}
-
-.shape-btn:hover,
-.line-btn:hover,
-.weight-btn:hover {
- border-color: var(--primary);
- color: var(--primary);
-}
-
-.shape-btn.active,
-.line-btn.active,
-.weight-btn.active {
- background: var(--primary);
- color: white;
- border-color: var(--primary);
-}
-
-/* Preview */
-.text-generator-preview {
- display: flex;
- align-items: center;
- gap: 1.5rem;
- padding-top: 1rem;
- border-top: 1px solid var(--gray-200);
- flex-wrap: wrap;
-}
-
-.preview-label {
- font-weight: 500;
- font-size: 0.85rem;
- color: var(--gray-700);
-}
-
-.preview-box {
- width: 100px;
- height: 100px;
- border: 2px dashed var(--gray-300);
- border-radius: 8px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--gray-50);
-}
-
-.preview-box svg {
- max-width: 80px;
- max-height: 80px;
-}
-
-.preview-actions {
- display: flex;
- gap: 0.5rem;
- flex-wrap: wrap;
-}
-
-/* Textarea fuer Text-Generator */
-.text-input-wide {
- flex: 1;
- min-width: 250px;
-}
-
-.text-input-group textarea {
- padding: 0.5rem 0.75rem;
- border: 1px solid var(--gray-300);
- border-radius: 6px;
- font-size: 0.9rem;
- font-family: inherit;
- width: 100%;
- min-width: 200px;
- resize: vertical;
- transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.text-input-group textarea:focus {
- outline: none;
- border-color: var(--primary);
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-}
-
-/* Preview-Box dynamische Groesse */
-.preview-box {
- min-width: 100px;
- min-height: 80px;
- width: auto;
- height: auto;
- max-width: 300px;
- max-height: 200px;
- padding: 10px;
-}
-
-.preview-box svg {
- max-width: 100%;
- max-height: 100%;
- width: auto;
- height: auto;
-}
-/* ========== TEXT-GENERATOR v3 ADDITIONS ========== */
-
-/* Color Picker */
-.color-picker-wrap {
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
-
-.color-picker-wrap input[type="color"] {
- -webkit-appearance: none;
- appearance: none;
- width: 40px;
- height: 32px;
- border: 1px solid var(--gray-300);
- border-radius: 4px;
- cursor: pointer;
- padding: 2px;
-}
-
-.color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper {
- padding: 0;
-}
-
-.color-picker-wrap input[type="color"]::-webkit-color-swatch {
- border: none;
- border-radius: 2px;
-}
-
-.color-value {
- font-family: monospace;
- font-size: 0.85rem;
- color: var(--gray-600);
-}
-
-/* Arrow Options */
-.arrow-options {
- display: flex;
- gap: 0.25rem;
- flex-wrap: wrap;
-}
-
-.arrow-btn {
- padding: 0.4rem 0.6rem;
- border: 1px solid var(--gray-300);
- background: white;
- border-radius: 4px;
- cursor: pointer;
- font-size: 0.8rem;
- transition: all 0.2s;
-}
-
-.arrow-btn:hover {
- border-color: var(--primary);
- background: var(--primary-light);
-}
-
-.arrow-btn.active {
- background: var(--primary);
- color: white;
- border-color: var(--primary);
-}
-
-/* Arrow Details Row */
-#arrowDetailsRow {
- background: var(--gray-50);
- padding: 0.75rem;
- border-radius: 6px;
- margin-top: 0.5rem;
-}
-
-#arrowDetailsRow .text-input-group {
- flex: 1;
- min-width: 120px;
-}
-
-/* Save Button */
-.btn-save {
- background: linear-gradient(135deg, #10b981, #059669) !important;
-}
-
-.btn-save:hover {
- background: linear-gradient(135deg, #059669, #047857) !important;
-}
-
-/* Save Modal */
-.modal-small {
- max-width: 400px;
-}
-
-.save-form {
- display: flex;
- flex-direction: column;
- gap: 1rem;
-}
-
-.form-group {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-}
-
-.form-group label {
- font-weight: 500;
- color: var(--gray-700);
-}
-
-.form-group input[type="text"] {
- padding: 0.75rem;
- border: 1px solid var(--gray-300);
- border-radius: 6px;
- font-size: 1rem;
-}
-
-.form-group input[type="text"]:focus {
- outline: none;
- border-color: var(--primary);
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-}
-
-/* Custom Symbols Badge */
-.filter-pill[data-filter="custom"] {
- background: linear-gradient(135deg, #10b981, #059669);
- color: white;
- border-color: #059669;
-}
-
-.filter-pill[data-filter="custom"]:hover {
- background: linear-gradient(135deg, #059669, #047857);
-}
-
-/* Symbol Card Delete Button for custom symbols */
-.symbol-card .btn-delete {
- position: absolute;
- top: 4px;
- right: 4px;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- background: #ef4444;
- color: white;
- border: none;
- cursor: pointer;
- font-size: 12px;
- line-height: 1;
- display: none;
- z-index: 10;
-}
-
-.symbol-card:hover .btn-delete {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.symbol-card .btn-delete:hover {
- background: #dc2626;
-}
-
-/* Improved range inputs */
-input[type="range"] {
- -webkit-appearance: none;
- appearance: none;
- height: 6px;
- background: var(--gray-200);
- border-radius: 3px;
- outline: none;
-}
-
-input[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 16px;
- height: 16px;
- background: var(--primary);
- border-radius: 50%;
- cursor: pointer;
- transition: transform 0.2s;
-}
-
-input[type="range"]::-webkit-slider-thumb:hover {
- transform: scale(1.2);
-}
-
-input[type="range"]::-moz-range-thumb {
- width: 16px;
- height: 16px;
- background: var(--primary);
- border-radius: 50%;
- cursor: pointer;
- border: none;
-}
-
-/* Preview Box Dynamic Size */
-.preview-box {
- min-width: 100px;
- min-height: 80px;
- width: auto;
- height: auto;
- max-width: 400px;
- max-height: 300px;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: auto;
-}
-
-.preview-box svg {
- max-width: 100%;
- max-height: 100%;
-}
-
-/* ========== TEXT-GENERATOR v4 CSS ADDITIONS ========== */
-
-/* PNG Button */
-.btn-png {
- background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
-}
-
-.btn-png:hover {
- background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
-}
-
-/* JPG Button */
-.btn-jpg {
- background: linear-gradient(135deg, #f59e0b, #d97706) !important;
-}
-
-.btn-jpg:hover {
- background: linear-gradient(135deg, #d97706, #b45309) !important;
-}
-
-/* Modal Medium Size */
-.modal-medium {
- max-width: 600px;
-}
-
-/* Impressum Content */
-.impressum-content {
- text-align: left;
- line-height: 1.6;
-}
-
-.impressum-content h3 {
- color: var(--primary);
- margin-bottom: 1.5rem;
- font-size: 1.4rem;
-}
-
-.impressum-content h4 {
- color: var(--gray-700);
- margin-top: 1.5rem;
- margin-bottom: 0.75rem;
- font-size: 1.1rem;
-}
-
-.impressum-content p {
- margin-bottom: 1rem;
- color: var(--gray-600);
-}
-
-.impressum-content strong {
- color: var(--gray-800);
-}
-
-.impressum-content a {
- color: var(--primary);
- text-decoration: none;
-}
-
-.impressum-content a:hover {
- text-decoration: underline;
-}
-
-.impressum-content hr {
- border: none;
- border-top: 1px solid var(--gray-200);
- margin: 1.5rem 0;
-}
-
-.impressum-content .copyright {
- margin-top: 1.5rem;
- padding-top: 1rem;
- border-top: 1px solid var(--gray-200);
- text-align: center;
- font-size: 0.9rem;
- color: var(--gray-500);
-}
-
-/* Footer Links */
-.footer-links {
- margin-top: 0.5rem;
-}
-
-.footer-links a {
- color: var(--gray-400);
- text-decoration: none;
- font-size: 0.85rem;
- transition: color 0.2s;
-}
-
-.footer-links a:hover {
- color: white;
- text-decoration: underline;
-}
-
-/* No Results Message */
-.no-results {
- grid-column: 1 / -1;
- text-align: center;
- padding: 3rem;
- color: var(--gray-500);
- font-size: 1rem;
- line-height: 1.6;
-}
-/* ========== TEXT-GENERATOR v5 Additions ========== */
-
-/* Reset Button im Header */
-.text-generator-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.text-generator-header .header-buttons {
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
-
-.btn-reset {
- background: #ef4444;
- color: white;
- border: none;
- padding: 0.35rem 0.75rem;
- border-radius: 6px;
- font-size: 0.8rem;
- cursor: pointer;
- transition: background 0.2s;
-}
-
-.btn-reset:hover {
- background: #dc2626;
-}
-
-/* Padding Row mit 4 Feldern */
-.padding-row {
- display: flex;
- flex-wrap: wrap;
- gap: 0.75rem;
-}
-
-.padding-group {
- flex: 1;
- min-width: 120px;
-}
-
-.padding-group label {
- font-size: 0.75rem;
- color: #6b7280;
-}
-
-.padding-group input[type="range"] {
- width: 100%;
-}
-
-/* Standalone Arrow Section */
-.standalone-arrow-section {
- margin-top: 1.5rem;
- padding-top: 1.5rem;
- border-top: 2px dashed #e5e7eb;
-}
-
-.standalone-arrow-section .section-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 1rem;
-}
-
-.standalone-arrow-section .section-header h4 {
- margin: 0;
- font-size: 1rem;
- color: #374151;
-}
-
-.standalone-arrow-section .section-hint {
- font-size: 0.75rem;
- color: #9ca3af;
- font-style: italic;
-}
-
-.standalone-arrow-content {
- display: flex;
- align-items: center;
- gap: 1.5rem;
- flex-wrap: wrap;
-}
-
-.standalone-arrow-preview {
- min-width: 150px;
- min-height: 60px;
- max-width: 200px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: #f9fafb;
- border: 1px solid #e5e7eb;
- border-radius: 8px;
- padding: 1rem;
-}
-
-.standalone-arrow-preview svg {
- max-width: 100%;
- max-height: 50px;
-}
-
-.standalone-arrow-content .preview-actions {
- display: flex;
- flex-wrap: wrap;
- gap: 0.5rem;
-}
-
-/* Verbessertes Layout fuer Pfeil-Details */
-#arrowDetailsRow,
-#arrowDetailsRow2 {
- background: #f9fafb;
- border-radius: 8px;
- padding: 0.75rem;
- margin: 0.5rem 0;
-}
-
-/* Dark Mode Anpassungen */
-[data-theme="dark"] .btn-reset {
- background: #dc2626;
-}
-
-[data-theme="dark"] .btn-reset:hover {
- background: #b91c1c;
-}
-
-[data-theme="dark"] .standalone-arrow-section {
- border-top-color: #3e3126;
-}
-
-[data-theme="dark"] .standalone-arrow-preview {
- background: #2a2319;
- border-color: #3e3126;
-}
-
-[data-theme="dark"] #arrowDetailsRow,
-[data-theme="dark"] #arrowDetailsRow2 {
- background: #2a2319;
-}
-
-[data-theme="dark"] .padding-group label {
- color: #9ca3af;
-}
-
-[data-theme="dark"] .standalone-arrow-section .section-header h4 {
- color: #f5f1e8;
-}
-
-/* Legenden-Modal mit Vorschau */
-.modal-wide {
- max-width: 1000px;
- width: 95%;
-}
-
-.legend-modal-body {
- display: flex;
- gap: 1.5rem;
- min-height: 400px;
-}
-
-.legend-editor {
- flex: 1;
- min-width: 0;
-}
-
-.legend-editor h3,
-.legend-preview-section h3 {
- margin: 0 0 1rem 0;
- font-size: 1rem;
- color: #374151;
- border-bottom: 1px solid #e5e7eb;
- padding-bottom: 0.5rem;
-}
-
-.legend-preview-section {
- flex: 0 0 350px;
- display: flex;
- flex-direction: column;
-}
-
-.legend-preview-box {
- flex: 1;
- background: #ffffff;
- border: 2px solid #e5e7eb;
- border-radius: 8px;
- padding: 1rem;
- overflow: auto;
- min-height: 300px;
-}
-
-.legend-preview-box svg {
- max-width: 100%;
- height: auto;
-}
-
-.legend-preview-actions {
- margin-top: 0.75rem;
- display: flex;
- justify-content: center;
-}
-
-.legend-preview-empty {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- color: #9ca3af;
- font-style: italic;
-}
-
-@media (max-width: 768px) {
- .legend-modal-body {
- flex-direction: column;
- }
- .legend-preview-section {
- flex: none;
- }
-}
diff --git a/symbols/css/text-generator.css b/symbols/css/text-generator.css
new file mode 100644
index 0000000..94d1730
--- /dev/null
+++ b/symbols/css/text-generator.css
@@ -0,0 +1,415 @@
+/* ============================================
+ TEXT-GENERATOR STYLES
+ ============================================ */
+
+/* ========== BASE ========== */
+.text-generator {
+ background: white;
+ margin: 1rem 2rem;
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+ overflow: hidden;
+}
+
+.text-generator-header {
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+ color: white;
+ padding: 0.75rem 1.25rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ cursor: pointer;
+ user-select: none;
+}
+
+.text-generator-header h3 {
+ font-size: 1rem;
+ font-weight: 600;
+ margin: 0;
+}
+
+.text-generator-header .header-buttons {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.collapse-btn {
+ background: none;
+ border: none;
+ color: white;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: transform 0.3s;
+ padding: 0.25rem;
+}
+
+.text-generator.collapsed .collapse-btn {
+ transform: rotate(-90deg);
+}
+
+.text-generator-body {
+ padding: 1.25rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ transition: all 0.3s;
+}
+
+.text-generator.collapsed .text-generator-body {
+ display: none;
+}
+
+.text-generator-row {
+ display: flex;
+ gap: 2rem;
+ flex-wrap: wrap;
+}
+
+/* ========== INPUT GROUPS ========== */
+.text-input-group {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ flex-wrap: wrap;
+}
+
+.text-input-group label {
+ font-weight: 500;
+ font-size: 0.85rem;
+ color: var(--gray-700);
+ min-width: 90px;
+}
+
+.text-input-group input[type="text"] {
+ padding: 0.5rem 0.75rem;
+ border: 1px solid var(--gray-300);
+ border-radius: 6px;
+ font-size: 0.9rem;
+ width: 180px;
+ transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.text-input-group input[type="text"]:focus {
+ outline: none;
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.text-input-group input[type="range"] {
+ width: 120px;
+ cursor: pointer;
+}
+
+#fontSizeValue {
+ font-size: 0.8rem;
+ color: var(--gray-500);
+ min-width: 35px;
+}
+
+.text-input-wide {
+ flex: 1;
+ min-width: 250px;
+}
+
+.text-input-group textarea {
+ padding: 0.5rem 0.75rem;
+ border: 1px solid var(--gray-300);
+ border-radius: 6px;
+ font-size: 0.9rem;
+ font-family: inherit;
+ width: 100%;
+ min-width: 200px;
+ resize: vertical;
+ transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.text-input-group textarea:focus {
+ outline: none;
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+/* ========== SHAPE/LINE/WEIGHT BUTTONS ========== */
+.shape-options,
+.line-style-options,
+.line-weight-options {
+ display: flex;
+ gap: 0.35rem;
+}
+
+.shape-btn,
+.line-btn,
+.weight-btn {
+ padding: 0.4rem 0.65rem;
+ border: 1px solid var(--gray-300);
+ background: white;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 0.8rem;
+ transition: all 0.2s;
+ color: var(--gray-600);
+}
+
+.shape-btn:hover,
+.line-btn:hover,
+.weight-btn:hover {
+ border-color: var(--primary);
+ color: var(--primary);
+}
+
+.shape-btn.active,
+.line-btn.active,
+.weight-btn.active {
+ background: var(--primary);
+ color: white;
+ border-color: var(--primary);
+}
+
+/* ========== PREVIEW ========== */
+.text-generator-preview {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
+ padding-top: 1rem;
+ border-top: 1px solid var(--gray-200);
+ flex-wrap: wrap;
+}
+
+.preview-label {
+ font-weight: 500;
+ font-size: 0.85rem;
+ color: var(--gray-700);
+}
+
+.preview-box {
+ min-width: 100px;
+ min-height: 80px;
+ width: auto;
+ height: auto;
+ max-width: 400px;
+ max-height: 300px;
+ border: 2px dashed var(--gray-300);
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--gray-50);
+ padding: 10px;
+ overflow: auto;
+}
+
+.preview-box svg {
+ max-width: 100%;
+ max-height: 100%;
+ width: auto;
+ height: auto;
+}
+
+.preview-actions {
+ display: flex;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+}
+
+/* ========== COLOR PICKER ========== */
+.color-picker-wrap {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.color-picker-wrap input[type="color"] {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 40px;
+ height: 32px;
+ border: 1px solid var(--gray-300);
+ border-radius: 4px;
+ cursor: pointer;
+ padding: 2px;
+}
+
+.color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper {
+ padding: 0;
+}
+
+.color-picker-wrap input[type="color"]::-webkit-color-swatch {
+ border: none;
+ border-radius: 2px;
+}
+
+.color-value {
+ font-family: monospace;
+ font-size: 0.85rem;
+ color: var(--gray-600);
+}
+
+/* ========== ARROW OPTIONS ========== */
+.arrow-options {
+ display: flex;
+ gap: 0.25rem;
+ flex-wrap: wrap;
+}
+
+.arrow-btn {
+ padding: 0.4rem 0.6rem;
+ border: 1px solid var(--gray-300);
+ background: white;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.8rem;
+ transition: all 0.2s;
+}
+
+.arrow-btn:hover {
+ border-color: var(--primary);
+ background: var(--primary-light);
+}
+
+.arrow-btn.active {
+ background: var(--primary);
+ color: white;
+ border-color: var(--primary);
+}
+
+#arrowDetailsRow,
+#arrowDetailsRow2 {
+ background: var(--gray-50);
+ border-radius: 8px;
+ padding: 0.75rem;
+ margin: 0.5rem 0;
+}
+
+#arrowDetailsRow .text-input-group {
+ flex: 1;
+ min-width: 120px;
+}
+
+/* ========== RANGE INPUTS ========== */
+input[type="range"] {
+ -webkit-appearance: none;
+ appearance: none;
+ height: 6px;
+ background: var(--gray-200);
+ border-radius: 3px;
+ outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 16px;
+ height: 16px;
+ background: var(--primary);
+ border-radius: 50%;
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+ transform: scale(1.2);
+}
+
+input[type="range"]::-moz-range-thumb {
+ width: 16px;
+ height: 16px;
+ background: var(--primary);
+ border-radius: 50%;
+ cursor: pointer;
+ border: none;
+}
+
+/* ========== RESET BUTTON ========== */
+.btn-reset {
+ background: #ef4444;
+ color: white;
+ border: none;
+ padding: 0.35rem 0.75rem;
+ border-radius: 6px;
+ font-size: 0.8rem;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.btn-reset:hover {
+ background: #dc2626;
+}
+
+/* ========== PADDING ROW ========== */
+.padding-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+}
+
+.padding-group {
+ flex: 1;
+ min-width: 120px;
+}
+
+.padding-group label {
+ font-size: 0.75rem;
+ color: #6b7280;
+}
+
+.padding-group input[type="range"] {
+ width: 100%;
+}
+
+/* ========== STANDALONE ARROW SECTION ========== */
+.standalone-arrow-section {
+ margin-top: 1.5rem;
+ padding-top: 1.5rem;
+ border-top: 2px dashed #e5e7eb;
+}
+
+.standalone-arrow-section .section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.standalone-arrow-section .section-header h4 {
+ margin: 0;
+ font-size: 1rem;
+ color: #374151;
+}
+
+.standalone-arrow-section .section-hint {
+ font-size: 0.75rem;
+ color: #9ca3af;
+ font-style: italic;
+}
+
+.standalone-arrow-content {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
+ flex-wrap: wrap;
+}
+
+.standalone-arrow-preview {
+ min-width: 150px;
+ min-height: 60px;
+ max-width: 200px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #f9fafb;
+ border: 1px solid #e5e7eb;
+ border-radius: 8px;
+ padding: 1rem;
+}
+
+.standalone-arrow-preview svg {
+ max-width: 100%;
+ max-height: 50px;
+}
+
+.standalone-arrow-content .preview-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
diff --git a/symbols/index.html b/symbols/index.html
index fba5df0..01dadc5 100644
--- a/symbols/index.html
+++ b/symbols/index.html
@@ -4,7 +4,13 @@
Gutachter Symbolbibliothek v2.2
-
+
+
+
+
+
+
+
@@ -390,13 +396,34 @@ document.addEventListener("keydown",function(e){if(e.key==="Escape"){closeImpres
});
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-