/* Sperrkarte der Anmeldeseite (Sicherheitscenter, 29.09.2026): erscheint, wenn der Server bei POST /api/auth/login
   { locked: true, reason: temporary|admin|disabled, retryAfterSeconds } liefert. Eigene Datei wegen der CSP der Verwaltung
   (kein Inline-Stil, kein Inline-Skript). Animationen: sanftes Einblenden, kurzes „Klopfen“ des Ausrufezeichens, Ring-Welle;
   bei prefers-reduced-motion nur ein ruhiges Einblenden. */
.login-panel.is-locked > h1,
.login-panel.is-locked > p,
.login-panel.is-locked > form { display: none; }
.login-panel.is-locked { border-top-color: #b3261e; }

.login-locked { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 2px 2px; animation: login-locked-in .45s cubic-bezier(.2,.8,.3,1) both; }
.login-locked-icon { position: relative; width: 96px; height: 96px; margin: 4px auto 18px; }
.login-locked-icon svg { position: relative; z-index: 2; width: 96px; height: 96px; display: block; animation: login-locked-knock 1.1s cubic-bezier(.36,.07,.19,.97) .35s 2; transform-origin: 50% 50%; }
.login-locked-disc { fill: #c62828; }
.login-locked-disc-edge { fill: none; stroke: #8e1b16; stroke-width: 2; }
.login-locked-mark { fill: #fff; }
.login-locked-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(198, 40, 40, .55); opacity: 0; animation: login-locked-wave 2.6s ease-out .4s infinite; }
.login-locked-ring-2 { animation-delay: 1.3s; border-color: rgba(198, 40, 40, .35); }

.login-locked h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; color: #8e1b16; }
.login-locked-text { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text, #1d3034); }
.login-locked-countdown { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; background: #fbe9e7; color: #8e1b16; font-size: 14px; }
.login-locked-countdown strong { font-variant-numeric: tabular-nums; font-size: 18px; letter-spacing: .04em; }
.login-locked-countdown.is-ready { background: #e6f3ec; color: #246b48; }
.login-locked-hint { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--muted, #6f667a); }
.login-locked .button { width: 100%; min-height: 39px; }
.login-locked[hidden] { display: none; }

.login-panel form.is-locked-form { position: relative; opacity: .62; }
.login-panel form.is-locked-form::after { content: attr(data-locked-note); display: block; margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #fbe9e7; color: #8e1b16; font-size: 13px; text-align: center; }

@keyframes login-locked-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes login-locked-knock {
  0%, 100% { transform: scale(1) rotate(0); }
  12% { transform: scale(1.12) rotate(-6deg); }
  26% { transform: scale(1.06) rotate(5deg); }
  40% { transform: scale(1.1) rotate(-3deg); }
  55% { transform: scale(1.02) rotate(2deg); }
  70% { transform: scale(1.04) rotate(0); }
}
@keyframes login-locked-wave { 0% { transform: scale(.7); opacity: .85; } 70% { opacity: .15; } 100% { transform: scale(1.9); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .login-locked { animation: login-locked-in .3s ease-out both; }
  .login-locked-icon svg, .login-locked-ring { animation: none; }
  .login-locked-ring { opacity: .35; transform: scale(1.18); }
  .login-locked-ring-2 { opacity: .18; transform: scale(1.36); }
}
@media (max-width: 420px) {
  .login-locked-icon { width: 80px; height: 80px; }
  .login-locked-icon svg { width: 80px; height: 80px; }
  .login-locked h2 { font-size: 20px; }
}