feat: Modal zum manuellen Erstellen von Farbschemata

style.css

@@ -167,6 +167,64 @@ button.action-btn:hover { background: #f0f0f0; }
   gap: 0.5rem;
 }
 
+/* --- Modal --- */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.45);
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.modal {
+  background: #fff;
+  border-radius: 12px;
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 460px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+}
+
+.modal-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  margin-bottom: 0.75rem;
+}
+
+.modal-field label { font-size: 0.75rem; color: #666; text-transform: uppercase; }
+.modal-field input {
+  padding: 0.4rem 0.6rem;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 0.9rem;
+}
+
+.schema-farben-preview {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  min-height: 20px;
+  margin-bottom: 1rem;
+}
+
+.schema-dropzone {
+  border: 2px dashed #ccc;
+  border-radius: 8px;
+  padding: 1rem;
+  text-align: center;
+  background: #fafafa;
+  font-size: 0.85rem;
+  color: #666;
+}
+
+.schema-dropzone p { margin-bottom: 0.5rem; }
+
 /* --- Finale Styles --- */
 h2 { font-size: 1.1rem; margin-bottom: 1rem; }
 h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }