/* Anmeldung am Tresor. Gleiche Handschrift wie das Büro: Schiefer, Mondlicht,
   Haarlinien statt Kästen. Angelegt 19.09.2026. */
@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;src:url('/inter.woff2') format('woff2')}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;min-height:100svh;display:grid;place-items:center;padding:24px;
  background:#0B0E13;color:#E6EBF2;
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em;
}
main{width:100%;max-width:370px}
.zeichen{display:block;width:250px;max-width:100%;height:auto;margin:0 0 26px}
.schild{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#8D9AAB;
  margin:0 0 28px;
}
label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#8D9AAB;margin:0 0 10px}
input{
  width:100%;font:inherit;font-size:17px;color:#E6EBF2;background:#080A0E;
  border:1px solid #253040;border-radius:10px;padding:14px 16px;
  transition:border-color .18s,background .18s;
}
input:focus{outline:none;border-color:#8FB6D9;background:#0D1219}
button{
  width:100%;margin-top:18px;font:inherit;font-size:15px;font-weight:590;
  color:#0B0E13;background:#8FB6D9;border:none;border-radius:10px;padding:14px;
  cursor:pointer;transition:background .18s;
}
button:hover{background:#A9C8E2}
.fehler{min-height:20px;margin:12px 0 0;font-size:13.5px;color:#E8A9A4}
.fehler:empty{min-height:0}
.fuss{margin:30px 0 0;font-size:12.5px;line-height:1.55;color:#5A6472}

/* Auswahl, wer sich anmeldet. Erscheint erst, wenn es mehr als einen Zugang
   gibt (Dylan, später Mitarbeiter). Niemand soll eine Kennung tippen muessen. */
.wer{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.wer input{position:absolute;opacity:0;pointer-events:none}
.wer label{
  margin:0;padding:10px 16px;border-radius:9px;cursor:pointer;
  font-size:14px;letter-spacing:0;text-transform:none;color:#8D9AAB;
  border:1px solid #253040;background:#080A0E;transition:border-color .16s,color .16s;
}
.wer label:hover{color:#E6EBF2}
.wer input:checked + label{border-color:#8FB6D9;color:#8FB6D9;background:#0D1219}
.wer input:focus-visible + label{outline:2px solid #8FB6D9;outline-offset:2px}

/* Das Wer-Feld ist nicht zum Tippen da, es steht fuer den Apple-Schluesselbund
   drin: ohne ein Feld mit autocomplete="username" bietet Safari das Sichern
   des Passworts gar nicht erst an. */
input.fest{
  color:#8D9AAB;background:#06080B;cursor:default;
}
input.fest:focus{border-color:#253040;background:#06080B}