Aufteilung in 2 Tabs

Zugriff auf ionos-Mongo

public/styles.css

@@ -1,3 +1,65 @@
+/* Tab Navigation */
+.tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+.tab-btn {
+  background: #eee;
+  border: none;
+  padding: 0.7rem 2rem;
+  font-size: 1.1rem;
+  border-radius: 6px 6px 0 0;
+  cursor: pointer;
+  color: #333;
+  font-weight: 500;
+  transition: background 0.2s, color 0.2s;
+}
+.tab-btn.active {
+  background: #007bff;
+  color: #fff;
+  font-weight: bold;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+}
+/* Modal Fehlerfenster */
+.custom-modal-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0,0,0,0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.custom-modal-box {
+  background: #fff;
+  padding: 3rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+  text-align: center;
+  min-width: 350px;
+  max-width: 90vw;
+}
+
+.custom-modal-msg {
+  margin-bottom: 2rem;
+  font-size: 1.5rem;
+  color: red;
+}
+
+.custom-modal-btn {
+  padding: 0.8rem 2.5rem;
+  font-size: 1.1rem;
+  background: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
 body {
   font-family: system-ui, sans-serif;
   padding: 20px;
@@ -89,6 +151,10 @@ button:hover {
   background: #0056b3;
 }
 
+#saveBtn {
+  margin-top: 20px;
+}
+
 p.error {
   color: red;
   font-weight: bold;