/* ============================= */
/* ✅ LOGIN-POPUP */
/* ============================= */

.popup {
  display: none; /* Standardmäßig versteckt */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 360px;
  background: rgba(41, 41, 41, 0.85); /* Glassmorphismus */
  backdrop-filter: blur(10px);
  color: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
}

.popup.show {
  display: flex !important; /* Popup sichtbar machen, wenn die Klasse "show" hinzugefügt wird */
  justify-content: center;
  align-items: center;
}


.popup h2 {
  font-size: 22px;
  margin-bottom: 10px;
  text-align: center;
  color: #FFD700; /* Gold-Farbe */
}

/* 🛠 ALLES ZENTRIERT IM POPUP */
.input-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert alles */
  width: 100%;
  margin-bottom: 15px;
}

/* Labels OBEN über den Eingabefeldern */
.input-container label {
  font-size: 14px;
  color: #FFD700; /* Goldene Farbe */
  font-weight: bold;
  text-align: center;
  width: 100%;
  margin-bottom: 5px; /* Abstand zum Eingabefeld */
}

/* Eingabefelder */
.input-container input {
  width: 90%; /* Etwas schmaler für schöne Optik */
  padding: 10px;
  border: 2px solid #FFD700; /* Goldene Umrandung */
  border-radius: 5px;
  background: #1E1E1E; /* Dunkler Hintergrund */
  color: white;
  font-size: 16px;
  outline: none;
  text-align: center; /* Zentrierter Text */
}

/* Falls Autofill reinhaut, Farbe fixen */
input:-webkit-autofill {
  background: #1E1E1E !important;
  color: white !important;
}



/* 🔥 Begrüßungstext kleiner & kompakter */
.login-subtext {
  font-size: 12px;
  text-align: center;
  color: gray;
  margin-bottom: 8px;
  line-height: 1.2;
}


/* 🔹 Passwort-Icon */
.password-container {
  position: relative;
}

/* 🔹 Fix: Icon exakt am Rand platzieren */
.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: gray;
  font-size: 18px;
  transition: color 0.3s;
}

.toggle-password:hover {
  color: white;
}


/* 🔹 Login-Button mit Glow-Effekt */
.popup-content button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(45deg, #D32F2F, #FF3D00);
    color: white;
    border: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 0 10px rgba(255, 61, 0, 0.5);
}
.popup-content button:hover {
  background: linear-gradient(45deg, #FF3D00, #D32F2F);
  box-shadow: 0 0 15px rgba(255, 61, 0, 0.8);
  transform: scale(1.05);
}

/* 🔹 Schließen-Button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 18px;
  cursor: pointer;
  color: white;
}

/* 🛠 Passwort vergessen */
.forgot-password {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: gray;
  transition: color 0.3s;
}

.forgot-password:hover {
  color: white;
}

/* ✨ Rudel beitreten */
.register-link {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 16px;
    color: #FFD700;
    font-weight: bold;
    transition: color 0.3s;
}

.register-link:hover {
  color: white;
}

/* 🔹 Hintergrund für aktives Popup */
body.popup-active::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* ✅ Mobiler Login-Link */
.mobile-login-link {
  text-align: center;
  padding: 10px;
  background: #222;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.mobile-login-link a {
  color: white;
  font-size: 16px;
  text-decoration: none;
}

.mobile-login-link a:hover {
  text-decoration: underline;
}

/* 🔹 Mobile Optimierung */
@media (max-width: 480px) {
  .popup {
    width: 90%;
    max-width: 320px;
  }
}