/* Anmeldeseite — gleiche Sprache wie das Dashboard (Schwarz, Glas, Geist), ruhig, ein Bewegungsmoment */
#login { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.login-box { width: min(340px, 100%); display: flex; flex-direction: column; gap: 14px; }
.login-box .marke { margin-bottom: 10px; }
.login-box .marke-punkt { width: 11px; height: 11px; animation: atmen 5s ease-in-out infinite; }
@keyframes atmen { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 0 0 0 rgba(157,180,255,0); } 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.45), 0 0 0 9px rgba(157,180,255,.07); } }
.login-text { margin: 0; color: var(--text2); font: 400 13px/1.55 var(--sans); min-height: 40px; }
.login-knopf { font: 500 13px var(--sans); color: var(--text); background: var(--glas); border: 1px solid rgba(157,180,255,.35); border-radius: 12px; padding: 13px 16px; cursor: pointer;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: border-color .2s, background .2s; }
.login-knopf:hover:not(:disabled) { border-color: rgba(157,180,255,.7); background: rgba(157,180,255,.08); }
.login-knopf:disabled { opacity: .4; cursor: default; }
.login-knopf.zweit { border-color: var(--glas-rand); color: var(--text2); font-weight: 400; padding: 10px 14px; }
.login-knopf[hidden] { display: none; }
.login-hinweis { margin: 4px 0 0; min-height: 16px; word-break: break-word; }
.login-hinweis.fehler { color: var(--rot); }
/* QR-Login (nur auf der öffentlichen Adresse): weiße Kachel, damit jede Kamera den Code sicher liest */
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qr-bild { width: 208px; height: 208px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 50px rgba(0,0,0,.5); transition: opacity .25s; }
.qr-box.alt .qr-bild { opacity: .18; }
.qr-text { margin: 0; text-align: center; font-variant-numeric: tabular-nums; min-height: 18px; }
.qr-code { color: var(--text); font: 500 15px var(--mono); letter-spacing: .14em; }
.frei-karte { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--glas-rand); border-radius: 14px; background: var(--glas); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.frei-karte .frei-zeile { display: flex; justify-content: space-between; gap: 12px; color: var(--text2); font: 400 12px/1.5 var(--sans); }
.frei-karte .frei-zeile b { color: var(--text); font-weight: 500; text-align: right; word-break: break-word; }
.frei-karte .frei-gross { align-self: center; color: var(--text); font: 500 30px var(--mono); letter-spacing: .22em; padding: 6px 0 2px; }
.frei-karte[hidden], .qr-box[hidden] { display: none; }
.login-ok { color: var(--sonnet); }
@media (prefers-reduced-motion: reduce) { .login-box .marke-punkt { animation: none; } }