/* Login/Setup – design_handoff_login. Barlow-@font-face zentral in inforo.css. */
@keyframes orbspin { to { transform: rotate(360deg); } }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px; background: #fff; }
.login-col { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 44px; }
.login-orb { width: min(460px, 82vw, 56vh); height: min(460px, 82vw, 56vh); flex: 0 0 auto; }
.login-orb path { transform-origin: 260px 260px; }
.login-word { font-family: 'Barlow', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 60px; font-weight: 600; letter-spacing: -0.04em; color: #161616; line-height: 1; }
.login-body { width: 100%; font-family: 'Barlow', "Helvetica Neue", Helvetica, Arial, sans-serif; }
.login-label { display: block; font-family: "SFMono-Regular", "Menlo", "Consolas", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #9b9b9b; margin-bottom: 9px; }
.login-input { width: 100%; height: 40px; padding: 0 2px; border: none; border-bottom: 1.5px solid #161616; font-size: 16px; background: transparent; color: #161616; }
.login-input:focus { outline: none; border-bottom-width: 2.5px; }
/* Ghost-Aktion nach Vorlage: transparent, Ink-Text, Pfeil-Gap weitet bei Hover. */
.login-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: transparent; color: #161616; border: none; height: 44px; font-family: 'Barlow', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 500; cursor: pointer; letter-spacing: -0.01em; transition: gap .15s; }
.login-btn:hover { gap: 14px; }
.login-status { font-family: "SFMono-Regular", "Menlo", "Consolas", monospace; color: #161616; margin-top: 22px; font-size: 12px; text-align: center; }

@media (prefers-reduced-motion: reduce) { .login-orb path { animation: none !important; } }