.login-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }

.login-huelle { width: 100%; max-width: 410px; }

.login-karte { padding: 38px 34px 30px; border-radius: var(--r-xl); text-align: center; }

.login-marke {
  width: 66px; height: 66px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 22px;
  background: var(--stift-hell);
  animation: pulsen 3.5s var(--sanft) infinite;
}
.login-marke svg { width: 36px; height: 36px; }
@keyframes pulsen {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(228,112,92,.28); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(228,112,92,0); }
}

.login-karte h1 { font-size: 2.2rem; margin-bottom: 18px; line-height: 1.1; }

.login-karte .feld { text-align: left; }

.pw-zeile { position: relative; }
.pw-zeile input { padding-right: 50px; }
.pw-auge {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--tinte-weich);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.pw-auge:hover { color: var(--stift); background: var(--stift-hell); }
.pw-auge.offen { color: var(--stift); }

.login-knopf { width: 100%; margin-top: 8px; }
.login-knopf.laedt .knopf-text { visibility: hidden; }
.login-knopf.laedt::after {
  content: "";
  position: absolute;
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: drehen .7s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

.login-zurueck {
  display: inline-block;
  margin-top: 20px;
  font-size: .85rem;
  color: var(--tinte-weich);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.login-zurueck:hover { color: var(--stift); border-color: var(--stift); }

/* Rütteln bei falschem Passwort */
.ruettel { animation: ruettel .45s var(--sanft); }
@keyframes ruettel {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}