/* css/login.css */

.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(145deg, #dce8f5 0%, #eef1f7 50%, #e8f0f8 100%);
  overflow: hidden;
  position: relative;
}

/* Dekorative Hintergrund-Ellipsen */
.bg-blobs { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .45;
  animation: blobFloat 8s ease-in-out infinite alternate;
}
.blob-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #b8d4ec 0%, transparent 70%);
  top: -120px; left: -100px;
  animation-delay: 0s;
}
.blob-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #d4e6f5 0%, transparent 70%);
  bottom: -80px; right: -60px;
  animation-delay: -3s;
}
.blob-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #c5d8ed 0%, transparent 70%);
  top: 50%; left: 60%;
  animation-delay: -6s;
}
@keyframes blobFloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(20px,30px) scale(1.05); }
}

/* Layout */
.login-wrap {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  width: min(440px, 94vw);
  padding: 2rem 0;
}

/* Branding */
.login-brand { text-align: center; }

.brand-icon {
  font-size: 3.5rem; line-height: 1;
  margin-bottom: .6rem;
  animation: iconBounce .6s var(--transition-spring);
}
@keyframes iconBounce {
  0%   { transform: scale(0) rotate(-20deg); }
  80%  { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

.login-brand h1 {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  color: var(--blue-700);
  font-weight: 800;
  letter-spacing: -.02em;
}
.login-brand p {
  color: var(--gray-400);
  font-size: 1rem;
  margin-top: .2rem;
}

/* Card */
.login-card {
  width: 100%;
  padding: 2rem 2.25rem;
  animation: cardReveal .5s var(--transition-spring);
}
.login-card h2 {
  font-size: 1.3rem;
  margin-bottom: .25rem;
  color: var(--gray-800);
}
@keyframes cardReveal {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Form */
.form-stack { display: flex; flex-direction: column; gap: 1rem; }

.form-error {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid #fed7d7;
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  font-size: .88rem; font-weight: 500;
  margin-bottom: .5rem;
}

/* Passwort-Eingabe mit Toggle */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 2.8rem; }
.pw-toggle {
  position: absolute; right: .75rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--gray-400); padding: .25rem;
  display: flex; align-items: center;
  transition: color var(--transition);
}
.pw-toggle:hover { color: var(--blue-500); }

/* Passwort-Stärke */
.pw-strength-bar { display: flex; flex-direction: column; gap: .3rem; }
.strength-track {
  height: 5px; border-radius: 3px;
  background: var(--gray-200); overflow: hidden;
}
.strength-fill {
  height: 100%; border-radius: 3px;
  width: 0; transition: width .4s ease, background .3s ease;
}
.strength-fill.weak   { background: var(--danger);  }
.strength-fill.fair   { background: var(--warning); }
.strength-fill.good   { background: #68d391; }
.strength-fill.strong { background: var(--success); }
.strength-label { font-size: .78rem; color: var(--gray-400); align-self: flex-end; }

/* Change-PW Icon */
.change-pw-icon { font-size: 2.5rem; margin-bottom: .75rem; }

/* Footer */
.login-footer { color: var(--gray-400); }
.login-footer small { font-size: .78rem; }

/* Mobile */
@media (max-width: 480px) {
  .login-card { padding: 1.5rem 1.25rem; }
}