main

public/assets/css/main.css

@@ -965,3 +965,77 @@ body {
 #userMenu button:hover {
   background: rgba(237, 242, 251, 0.95);   /* var(--very-light-gray)-artig */
 }
+
+
+/* --- Logout-Modal Overlay & Panel -------------------------------------- */
+
+#logoutModalBackdrop {
+  /* statt knalligem Schwarz: soften Deep-Gray-Ton mit leichter Transparenz */
+  background: rgba(15, 31, 61, 0.32);  /* angelehnt an var(--deep-gray) */
+  backdrop-filter: blur(4px);
+}
+
+#logoutModalBackdrop > div {
+  background: #ffffff; /* klar und deckend */
+  border-radius: 24px;
+  border: 1px solid rgba(200, 203, 208, 0.85);
+  box-shadow: var(--shadow-soft);
+  padding: 1.8rem 2rem;          /* etwas mehr Luft als die Tailwind-Defaults */
+}
+
+
+#logoutModalBackdrop h2 {
+  font-family: 'Montserrat', system-ui, sans-serif;
+  font-weight: 700;
+  font-size: 1.25rem;
+  color: var(--deep-gray);
+  margin-bottom: 0.4rem;
+}
+
+#logoutModalBackdrop p {
+  font-size: 0.95rem;
+  color: #555;
+}
+
+
+/* Cancel = Outline-Style */
+#logoutCancel {
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--silver);
+  background: #fff;
+  color: #555;
+  font-family: 'Montserrat', system-ui, sans-serif;
+  font-weight: 600;
+  font-size: 0.8rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  padding: 0.45rem 1.4rem;
+  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
+}
+
+#logoutCancel:hover {
+  background: var(--very-light-gray);
+  transform: translateY(-1px);
+}
+
+/* Confirm = „Danger Primary“ */
+#logoutConfirm {
+  border-radius: var(--radius-pill);
+  border: none;
+  background: linear-gradient(135deg, var(--error-red), #ff7a7a);
+  color: #fff;
+  font-family: 'Montserrat', system-ui, sans-serif;
+  font-weight: 600;
+  font-size: 0.8rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  padding: 0.45rem 1.6rem;
+  box-shadow: 0 12px 24px rgba(244, 102, 102, 0.35);
+  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
+}
+
+#logoutConfirm:hover {
+  background: linear-gradient(135deg, #ff7a7a, var(--error-red));
+  box-shadow: 0 16px 30px rgba(244, 102, 102, 0.45);
+  transform: translateY(-1px);
+}