/* STEUERPULT 2 -- die Anmeldeseite (Vertrag P2-7, 2026-09-20).
   Token und Schrift kommen aus /tokens.css (davor geladen). Die vier
   Bausteine (Kopf, Block, Feld, Taste) stehen hier noch einmal, weil
   pult.css hinter der Schranke bleibt (P2-4.4) und ein drittes Blatt fuer
   vier Regeln nicht lohnt. Masse und Farben sind dieselben wie dort. */

* { box-sizing: border-box; }
html { height: 100%; }
body.anmeldung {
  margin: 0; min-height: 100svh;
  background: var(--p-grund); color: var(--p-schrift);
  font: 400 var(--p-t-grund)/1.35 var(--p-font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: grid; place-items: center;
  padding: calc(var(--p-rand) + env(safe-area-inset-top, 0px)) var(--p-rand) calc(var(--p-rand) + env(safe-area-inset-bottom, 0px));
}
.anmelde-main { width: 100%; max-width: 24rem; display: grid; gap: var(--p-block-zu-block); }
:focus-visible { outline: 2px solid var(--p-fokus); outline-offset: 2px; }

/* ---- Kopf ------------------------------------------------------------- */
.kopf { display: grid; gap: 2px; padding: 8px 4px 4px; }
.titel { margin: 0; font-size: var(--p-t-titel); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.unter { margin: 0; color: var(--p-neben); font-size: var(--p-t-neben); text-wrap: pretty; }

/* ---- Block: Feld, Satz, Taste ----------------------------------------- */
.block { background: var(--p-block); border-radius: var(--p-r-block); padding: var(--p-block-innen); margin: 0; }
.block form { display: grid; gap: var(--p-zeile); }

/* Das PIN-Feld ist das eine grosse Ding auf der Seite: sechs Ziffern,
   tabellarisch, mit Luft dazwischen. text-indent gleicht den Abstand nach
   der letzten Ziffer aus, sonst steht die Zahl links der Mitte. */
.feld.pin {
  width: 100%; min-height: 60px; border: 0; border-radius: var(--p-r-taste);
  background: var(--p-tief); color: var(--p-schrift);
  font: 600 28px/1 var(--p-font); font-variant-numeric: tabular-nums;
  letter-spacing: .4em; text-indent: .4em; text-align: center; padding: 0 14px;
}
.feld.pin::placeholder { color: var(--p-neben); opacity: .6; }
.feld.pin:focus-visible { outline-offset: 0; }

/* Der Satz unter dem Feld ist immer da; leer waere er eine Luecke, die
   beim ersten Fehler springt. Rot heisst hier: abgewiesen, und der Satz
   sagt, was als Naechstes zu tun ist. */
.hinweis { margin: 0; min-height: calc(2 * 1.4 * var(--p-t-neben)); padding: 0 4px; color: var(--p-neben); font-size: var(--p-t-neben); line-height: 1.4; text-wrap: pretty; }
.hinweis.error { color: var(--p-rot); }

/* ---- Tasten ----------------------------------------------------------- */
.taste {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 var(--p-t-grund) var(--p-font); min-height: var(--p-tap); padding: 0 18px;
  border-radius: var(--p-r-taste); border: 0; background: var(--p-taste); color: var(--p-auf-taste);
  width: 100%; cursor: pointer;
  transition: filter var(--p-druck) var(--p-ease);
}
.taste.leise { background: var(--p-kante); color: var(--p-schrift); }
.taste:active { filter: brightness(.92); }
.taste:disabled { opacity: .45; cursor: not-allowed; }
.taste[hidden] { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}