/* === MODAL & AUTH UI (Profile modal entfernt) === */

/* Erfolgsbanner vollständig ausblenden (Sicherheitsnetz) */
#modal-success,
.modal-success {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Gemeinsames Modal (nur Login/Registrierung bleiben erhalten) */
.modal,
.modal-success {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  width: 30vw;
  background: #1a1a1a;
  border-radius: 1.2vw;
  box-shadow: 0 0.7vw 2.5vw rgba(0,0,0,0.30), 0 1px 12px #141414;
  z-index: 510;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 2.5vw 2vw 2vw 2vw;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0;
  overflow: visible; /* X-Button darf nicht abgeschnitten werden */
}

/* Fokusrahmen für aktive Modale */
.modal:focus,
.modal:focus-visible {
  outline: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.35), 0 0 0 0.18vw rgba(255,255,255,0.22) !important;
}

/* Sichtbarer Zustand */
.modal.active,
.modal-success.active {
  display: flex;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Schließen-Button (weißes X, kein Hintergrund) */
.modal-x {
  position: absolute;
  top: 2vh;
  right: 2vh;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 3.2vh;
  line-height: 1;
  padding: 0;
  margin: 0;
  width: auto;
  height: auto;
  cursor: pointer;
  z-index: 2000;
}
.modal-x:hover { opacity: 0.9; }
.modal-x:active { transform: scale(0.98); }
.modal-x:focus-visible {
  outline: 2px solid #7aa8ff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Modal-Inhalte (Login/Registrierung) */
.modal-content,
.modal-success-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1vw;
  align-items: stretch;
}
.modal-success-content {
  width: 100%;
  height: 7vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content h2 {
  text-align: center;
  font-size: 1.6vw;
  margin-bottom: 1vw;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03vw;
}
.modal-content form {
  display: flex;
  flex-direction: column;
  gap: 0.15vw;
}
.modal-content label {
  font-size: 1vw;
  margin-bottom: 0.2vw;
  font-weight: 600;
  color: #ddd;
  letter-spacing: 0.01vw;
}
.modal-content input[type="email"],
.modal-content input[type="password"],
.modal-content input[type="text"] {
  padding: 0.7vw 1vw;
  border-radius: 0.7vw;
  border: 1px solid #272727;
  background: #222;
  color: #fff;
  font-size: 1vw;
  outline: none;
  margin-bottom: 0.1vw;
  box-shadow: 0 1px 6px #1111112a;
  transition: background 0.2s, border-color 0.2s;
  appearance: none;
  background-clip: padding-box;
}
.modal-content input[type="email"]:focus,
.modal-content input[type="password"]:focus,
.modal-content input[type="text"]:focus {
  background: #292929;
  border-color: #555;
  box-shadow: 0 0 0 0.18vw rgba(255,255,255,0.22);
}
.modal-content input::placeholder { color: #888; opacity: 1; }
.form-error {
  color: #ff4c4c;
  font-size: 0.95vw;
  margin-bottom: 0.1vw;
  margin-top: 0.1vw;
  min-height: 0.2vw;
  display: block;
}

/* Hinweistext mittig (z. B. im Konto-löschen-Dialog oder Register-Verify) */
.modal-note-center {
  color: #cfcfcf;
  margin: 0 0 0.6vw 0;
  text-align: center;
  line-height: 1.5;
}

/* Autofill: dunkles Theme beibehalten (Chrome/Safari/Edge – WebKit) */
.modal-content input:-webkit-autofill,
.modal-content input:-webkit-autofill:hover {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  box-shadow: 0 0 0px 1000px #222 inset !important;
  -webkit-box-shadow: 0 0 0px 1000px #222 inset !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.modal-content input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  box-shadow: 0 0 0px 1000px #292929 inset !important;
  -webkit-box-shadow: 0 0 0px 1000px #292929 inset !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* Autofill: Firefox */
.modal-content input:-moz-autofill {
  box-shadow: 0 0 0 1000px #222 inset !important;
  -moz-text-fill-color: #fff !important;
  caret-color: #fff;
}
.modal-content input:-moz-autofill:focus {
  box-shadow: 0 0 0 1000px #292929 inset !important;
  -moz-text-fill-color: #fff !important;
  caret-color: #fff;
}

/* Inline-Erfolgsbanner im Modal (für 2FA/Reset) */
.form-success {
  display: none;
  color: #c9f7d7;
  background: rgba(46, 125, 50, 0.18);
  border: 1px solid rgba(129, 199, 132, 0.35);
  border-radius: 0.7vw;
  padding: 0.9vw 1vw;
  font-size: 1vw;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 1px 6px #1111112a;
  margin-top: 0.6vw;
  letter-spacing: 0.01vw;
}

.modal-content button[type="submit"] {
  background: #303030;
  color: #fff;
  border: 1px solid #272727;
  border-radius: 1vw;
  padding: 0.9vw 1vw;
  font-size: 1.05vw;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  margin-top: 2vw;
  box-shadow: 0 1px 7px #1111112a;
  letter-spacing: 0.03vw;
}
.modal-content button[type="submit"]:hover {
  background: #333333;
  color: #eaeaea;
  box-shadow: 0 2px 18px #1111117a;
}
.modal-links {
  display: flex;
  flex-direction: column;
  gap: 0.7vw;
  margin-top: 1vw;
  align-items: center;
  font-size: 1vw;
}
#login-not-registered-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#login-not-registered-container span,
#login-not-registered-container button { font-size: 1vw; }

/* NEU: Zentrierter Footer im Register-Formular */
.register-already-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  gap: 0.35vw;
  margin-top: 0.4vw;
}
.register-already-wrapper span,
.register-already-wrapper button {
  text-align: center;
  align-self: center;
  font-size: 1vw;
}

.modal-link {
  color: #888;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.18s;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0.01vw;
}
.modal-link:hover { color: #fff; }
.modal-link:focus-visible {
  outline: 2px solid #7aa8ff;
  outline-offset: 3px;
  border-radius: 6px;
}
#forgot-password-link { margin-top: 0.7vw; text-align: center; }

/* Checkbox-Label: Links (Datenschutz, AGB) in Weiß statt lila/visited */
.checkbox-label a,
.checkbox-label a:visited {
  color: #ffffff !important;
  text-decoration: underline;
}
.checkbox-label a:hover,
.checkbox-label a:focus {
  color: #eaeaea !important;
}

/* Scrollbars im Modal */
.modal-content form,
.modal-links { margin-bottom: 0.1vw; }
.modal-content form::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  width: 6px;
  background: #181818;
}
.modal-content form::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
  background: #222;
  border-radius: 5px;
}

/* === Header-Avatar (Platzhalter-Ring wenn kein Bild) === */
.profile-avatar-container,
#profile-avatar-container {
  display: none;
  align-items: center;
  position: relative;
}
.profile-avatar-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-avatar-btn:focus-visible {
  outline: 2px solid #7aa8ff;
  outline-offset: 3px;
  border-radius: 50%;
}
.profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.profile-avatar-btn:hover .profile-avatar { border-color: #eaeaea; }

/* === Profil-Dropdown (wie ChatGPT-Stil) === */
.profile-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 280px;
  background: #1b1c1f; /* geändert: dunkler aber nicht komplett schwarz */
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 14px 38px rgba(0,0,0,0.5), 0 2px 12px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 500;
  backdrop-filter: blur(4px) saturate(108%);
  -webkit-backdrop-filter: blur(4px) saturate(108%);
  overflow: visible;
  font-size: 13px;           /* Grundgröße reduziert (kleineres Menü) */
  line-height: 1.3;          /* kompakter */
}

/* Hover-Bridge für stabilen Hover */
.profile-dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

/* Sichtbar, wenn Container gehovered, geöffnet oder fokussiert ist */
#profile-avatar-container.logged-in:hover .profile-dropdown,
#profile-avatar-container.open .profile-dropdown,
#profile-avatar-container.logged-in:focus-within .profile-dropdown,
#profile-avatar-container .profile-dropdown:hover {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.profile-dropdown-header {
  margin: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #eaeaea;
  font-size: 12px;           /* vorher 13px */
  font-weight: 700;
}
.profile-dropdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 4px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #ffffff;
  user-select: none;
  font-size: 12.5px;         /* neu: etwas kleiner */
}
.profile-dropdown-row .label {
  color: #cfcfcf;
  font-weight: 700;
}
.profile-dropdown-row .value {
  color: #ffffff;
  font-weight: 700;
  opacity: 0.95;
}
.profile-dropdown-item {
  width: 100%;
  background: transparent;
  border: none;
  color: #eaeaea;
  text-align: left;
  padding: 9px 10px;         /* leicht enger (vorher 10px 10px) */
  margin: 2px 4px;
  border-radius: 10px;
  font-size: 13px;           /* vorher 14px */
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.profile-dropdown-item:hover,
.profile-dropdown-item:focus {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.profile-dropdown-item:focus-visible {
  outline: 2px solid rgba(255,255,255,0.25);
  outline-offset: 2px;
}
.profile-dropdown-item.is-danger {
  color: #ffd2d2;
}
.profile-dropdown-item.is-danger:hover,
.profile-dropdown-item.is-danger:focus {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}
.profile-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 6px 8px;
  border-radius: 1px;
}

/* === Responsive Skalierung des Profil-Dropdowns für große Viewports (reduziert) === */
@media (min-width: 1400px) {
  .profile-dropdown {
    width: clamp(320px, 18vw, 420px);
    border-radius: 12px;
    padding: 8px;
  }
  .profile-dropdown-header { font-size: 13px; padding: 10px 12px; } /* vorher 14px */
  .profile-dropdown-row { padding: 10px 12px; font-size: 13px; }
  .profile-dropdown-item { font-size: 14px; padding: 11px 12px; }   /* vorher 15px */
  .profile-dropdown-divider { margin: 8px 10px; }
}

@media (min-width: 2000px) {
  .profile-dropdown {
    width: clamp(360px, 16vw, 480px);
    border-radius: 14px;
    padding: 10px;
  }
  .profile-dropdown-header { font-size: 14px; padding: 12px 14px; } /* vorher 15px */
  .profile-dropdown-row { padding: 12px 14px; font-size: 13.5px; }
  .profile-dropdown-item { font-size: 15px; padding: 12px 14px; }   /* vorher 16px */
  .profile-dropdown-divider { margin: 10px 12px; }
}

@media (min-width: 2600px) {
  .profile-dropdown {
    width: clamp(420px, 14vw, 540px);
    border-radius: 16px;
    padding: 12px;
  }
  .profile-dropdown-header { font-size: 15px; padding: 14px 16px; } /* vorher 16px */
  .profile-dropdown-row { padding: 14px 16px; font-size: 14px; }
  .profile-dropdown-item { font-size: 16px; padding: 13px 16px; }   /* vorher 17px */
  .profile-dropdown-divider { margin: 12px 14px; height: 1.5px; }
}

@media (min-width: 3000px) {
  .profile-dropdown {
    width: clamp(480px, 12vw, 600px);
    border-radius: 18px;
    padding: 14px;
  }
  .profile-dropdown-header { font-size: 16px; padding: 16px 18px; border-radius: 10px; } /* vorher 17px */
  .profile-dropdown-row { padding: 16px 18px; border-radius: 12px; font-size: 14.5px; }
  .profile-dropdown-item { font-size: 17px; padding: 14px 18px; border-radius: 12px; }   /* vorher 18px */
  .profile-dropdown-divider { margin: 14px 16px; height: 2px; }
}

/* === 2FA / Reset Modal Styles === */
.twofa-section {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
  align-items: center;
}
.twofa-qr-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4vw;
}
.twofa-qr {
  width: 180px;
  height: 180px;
  background: #fff;
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.twofa-secret-hint {
  color: #cfcfcf;
  font-size: 0.95vw;
  text-align: center;
  word-break: break-word;
}
.twofa-secret-hint code {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 6px;
  background: #242424;
  color: #fff;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}
.twofa-code-input {
  text-align: center;
  letter-spacing: 0.3ch;
  font-weight: 700;
}
.btn-danger {
  background: #4a2020 !important;
  border-color: #5a2a2a !important;
}
.btn-danger:hover {
  background: #5a2a2a !important;
}

/* Während Modal geöffnet ist: Dropdown vollständig deaktivieren und unsichtbar machen */
body.modal-open #profile-avatar-container,
body.modal-open .profile-avatar-container {
  pointer-events: none !important;
}
body.modal-open #profile-avatar-container .profile-dropdown,
body.modal-open .profile-avatar-container .profile-dropdown {
  opacity: 0 !important;
  transform: translateY(-4px) scale(0.98) !important;
  pointer-events: none !important;
}

/* === Responsive === */
@media (max-width: 600px) {
  .modal,
  .modal-success {
    min-width: 90vw;
    max-width: 98vw;
    padding: 6vw 4vw 4vw 4vw;
  }

  .modal-x { top: 2vh; right: 2vh; font-size: 6vw; }
  .modal-content h2 { font-size: 4vw; }

  .modal-content label,
  .modal-content input,
  .modal-content button,
  .modal-links { font-size: 3.5vw; padding: 2vw; }

  .form-error { font-size: 3.2vw; }
  .form-success { font-size: 3.2vw; padding: 2.6vw 3vw; border-radius: 2.6vw; }
  #login-not-registered-container span,
  #login-not-registered-container button { font-size: 3.5vw; }
  #forgot-password-link { font-size: 3vw; }

  .register-already-wrapper span,
  .register-already-wrapper button { font-size: 3.5vw; }

  .profile-dropdown {
    width: min(92vw, 340px);
    right: 0;
    font-size: 12.5px;       /* Mobile: Grundgröße noch etwas kleiner */
    line-height: 1.28;
  }
  .profile-avatar { width: 42px; height: 42px; }

  .profile-dropdown-header { font-size: 12px; padding: 8px 10px; }
  .profile-dropdown-row { font-size: 12px; padding: 8px 10px; }
  .profile-dropdown-item { font-size: 12.5px; padding: 9px 10px; }

  .twofa-qr {
    width: 52vw;
    height: 52vw;
  }
  .twofa-secret-hint { font-size: 3.2vw; }
}

/* Bevorzugt reduzierte Bewegungen */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal-success,
  .profile-dropdown {
    transition: none !important;
  }
}

/* Profil-Modal vollständig deaktivieren (visuell entfernt) */
#modal-profile,
.modal-profile,
.modal-profile-content {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Screenreader-only Utility für A11y-Hinweise (nicht sichtbar) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}