/* Die Haustür (js/anmeldung.js).

   Eine eigene Datei aus demselben Grund, aus dem sie im Hauptprojekt
   `eintritt.css` heisst: Diese Ansicht ist **draussen**. Sie bringt zwei
   Materialien mit, die es sonst nirgends in dieser Seite gibt — Verputz und
   Email —, und beide hören auf, sobald man drin ist. Ein Eintritt aus Holz
   und Tafelgrün wäre schon die Garderobe, und dann bedeutete das Hineingehen
   nichts mehr.

   Es ist dieselbe Mauer wie auf schulpult.ch (Designguide Kapitel E,
   src/styles/eintritt.css im Hauptprojekt): dasselbe Schulhaus, dieselbe
   Wand. Die Masse sind kleiner, weil diese Seite zuerst ein Handy ist. */

.an-wand {
  --an-verputz-hell: #ded7cb;
  --an-verputz: #d3cbbd;
  --an-verputz-dunkel: #c7beae;
  --an-blau: #1f5fa8;
  --an-blau-tief: #17497e;
  --an-metall: #4a4f55;
  --an-papier: #f4efe4;
  --an-papier-schatten: #e3dbcb;
  --an-neutral: #e8e1d4;
  --an-tinte: #2a2721;
  --an-tinte-gedimmt: #5c554a;
  --an-richtig: #1f6f45;
  --an-falsch: #a8321f;

  position: fixed;
  inset: 0;
  z-index: 800;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--an-tinte);
  background: linear-gradient(180deg, var(--an-verputz-hell) 0%, var(--an-verputz) 46%, var(--an-verputz-dunkel) 100%);
}

.an-wand *, .an-wand *::before, .an-wand *::after { box-sizing: border-box; }

/* Körnung aus vier Punktrastern statt aus einem Bild: ein Verputz, der 40 KB
   kostet, ist auf einem Handy im Mobilfunknetz der erste Fehler. */
.an-wand::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  background-image:
    radial-gradient(circle at 1px 1px, #3b3227 1px, transparent 0),
    radial-gradient(circle at 1px 1px, #3b3227 1px, transparent 0),
    radial-gradient(circle at 1px 1px, #3b3227 1px, transparent 0),
    radial-gradient(circle at 1px 1px, #3b3227 1px, transparent 0);
  background-size: 13px 13px, 19px 19px, 23px 23px, 29px 29px;
}

/* Dachschatten: das Einzige, was sagt, dass über dieser Wand noch etwas ist. */
.an-wand::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 72px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(45, 33, 20, .22), transparent);
}

.an-spalte {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  padding: calc(18px + var(--safe-top)) 18px calc(18px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.an-logo .logo-word { color: var(--an-tinte); }
.an-logo .logo-bubble { background: var(--an-blau); color: #fff; }
.an-logo .logo-bubble::after {
  border-top-color: var(--an-blau);
  border-right-color: var(--an-blau);
}

.an-titel {
  margin: 0;
  font-size: 21px;
  line-height: 26px;
  font-weight: 700;
  text-align: center;
}

/* ------------------------------------------------- Hausnummernschild

   Es trägt die ADRESSE und nicht den Code: ein Nummernschild, dessen Nummer
   beim Tippen wechselt, ist keines mehr. Der Code steht auf der Anzeige des
   Tableaus, wie an einer Gegensprechanlage. */

.an-schild {
  position: relative;
  width: min(100%, 300px);
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--an-blau-tief);
  border-radius: 8px;
  background: linear-gradient(168deg, #2a6cb6 0%, var(--an-blau) 52%, var(--an-blau-tief) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(45, 33, 20, .28);
  color: #fff;
}

/* Die Emaillinie, 2 px, 8 px eingesetzt. */
.an-schild::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 3px;
  pointer-events: none;
}

/* Die zwei Schrauben — daran erkennt man ein Schild als Schild. */
.an-schild::after {
  content: '';
  position: absolute;
  inset: calc(50% - 5px) 14px auto;
  height: 10px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, #dbe7f4 0 40%, #8fa8c4 60%, #5d7590 100%) left center / 10px 10px no-repeat,
    radial-gradient(circle at 50% 40%, #dbe7f4 0 40%, #8fa8c4 60%, #5d7590 100%) right center / 10px 10px no-repeat;
}

.an-strasse { font-size: 13px; letter-spacing: .06em; font-weight: 600; opacity: .95; }
.an-nummer { font-size: 38px; line-height: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------- Klingeltableau */

.an-tableau {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #565c63, var(--an-metall) 40%, #3e434a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 6px rgba(45, 33, 20, .3);
}

/* Die kleine Anzeige über den Tasten. */
.an-anzeige {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #2c3036;
  background: linear-gradient(180deg, #1d2a22, #16211b);
  color: #cfe8d6;
}

.an-stelle {
  position: relative;
  width: 20px;
  height: 34px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.an-zeichen { font-size: 23px; line-height: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Verdeckt wird mit Unschärfe, nie mit Punkten: Punkte löschen den Code,
   Unschärfe verbirgt ihn nur — Länge und Gruppen bleiben lesbar, und genau
   die kontrolliert man beim Abtippen. */
.an-zeichen.ist-verdeckt { filter: blur(5px); opacity: .82; }

.an-marke { width: 100%; height: 3px; border-radius: 2px; background: #3f5c4a; }
.an-stelle.ist-aktiv .an-marke { background: #cfe8d6; }

.an-zaehler {
  margin: 8px 0 10px;
  text-align: center;
  font-size: 12.5px;
  color: #e6e2d8;
  font-variant-numeric: tabular-nums;
}

/* Vier Spalten: die acht Ziffern (2 bis 9) gehen damit in zwei volle Reihen
   auf. Bei drei Spalten bliebe ein Rasterfeld leer, und ein leeres Feld in
   einem Tastenblock sieht aus wie eine fehlende Taste. */
.an-tasten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.an-taste {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 52px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--an-papier), var(--an-papier-schatten));
  box-shadow: 0 3px 0 rgba(0, 0, 0, .34);
  color: var(--an-tinte);
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* Die letzte Reihe: «Löschen» links, «Weiter ›» rechts, je zwei Spalten breit
   und damit gleich gross (Board, 21.09.). Heller als die Ziffern, damit die
   Hand die zwei Sondertasten auch ohne Lesen findet. */
.an-taste--neben {
  grid-column: span 2;
  background: linear-gradient(180deg, var(--an-neutral), #d8d0c2);
  font-size: 15px;
  font-weight: 600;
}

.an-taste-ziffer { font-size: 20px; line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; }
.an-taste-buchstaben { font-size: 11px; line-height: 1.1; letter-spacing: .08em; font-weight: 600; min-height: 12px; }
.an-taste:active { transform: translateY(3px); box-shadow: none; }

/* Die laufende Taste bleibt hervorgehoben, damit sichtbar ist, welcher Zyklus
   gerade offen ist. */
.an-taste.ist-offen { background: var(--an-papier); box-shadow: 0 0 0 2px #fff, 0 3px 0 rgba(0, 0, 0, .34); }

/* «Löschen» sitzt seit dem 21.09. im Raster und nicht mehr hinter einer Fuge
   darunter. Es nimmt damit einen Fehlgriff in Kauf — und löscht deshalb nur
   ein Zeichen; alles weg geht nur mit einem Langdruck. */

.an-eintreten {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 14px;
  background: #a19d97;
  color: #2a2721;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: default;
}

.an-eintreten.ist-aktiv {
  background: var(--an-richtig);
  color: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
  cursor: pointer;
}

.an-eintreten.ist-aktiv:active { transform: translateY(3px); box-shadow: none; }

.an-text-knopf {
  padding: 8px 12px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--an-tinte);
  font: inherit;
  font-size: 14.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.an-hilfe { color: var(--an-tinte-gedimmt); font-size: 13px; }

/* ---------------------------------------------------- Klingelschilder */

.an-schilder {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.an-schilder-zeile { display: flex; align-items: stretch; gap: 8px; }

.an-klingel {
  flex: 1;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #565c63, var(--an-metall) 40%, #3e434a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 5px rgba(45, 33, 20, .28);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.an-klingel-knopf {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #fdf6e6 0 32%, #e0d4b6 58%, #a8996f 100%);
  box-shadow: inset 0 0 0 2px #2f343a, 0 1px 1px rgba(0, 0, 0, .4);
}

.an-etikett { flex: 1; padding: 6px 10px; border-radius: 3px; background: var(--an-papier); }
.an-etikett-name { display: block; font-size: 17px; line-height: 22px; font-weight: 700; color: var(--an-tinte); }
.an-etikett-meta { display: block; font-size: 13px; line-height: 18px; color: var(--an-tinte-gedimmt); }

/* Der Weg hinaus steht NEBEN dem Schild und nicht darauf: ein Kreuz auf dem
   Schild trifft man aus Versehen, wenn man klingeln wollte. */
.an-klingel-weg {
  flex: none;
  width: 54px;
  border: 0;
  border-radius: 10px;
  background: var(--an-neutral);
  color: var(--an-tinte-gedimmt);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* ----------------------------------------------------------- Zettel

   Jede Meldung auf Papier, mit einem Farbbalken links. Rot direkt auf Verputz
   erreicht nur 3.54:1 und ist als Text nicht erlaubt. */

.an-zettelfach:empty { display: none; }

.an-zettel {
  display: block;
  width: 100%;
  padding: 10px 14px 12px 16px;
  border-radius: 4px;
  border-left: 6px solid var(--an-falsch);
  background: var(--an-papier);
  box-shadow: 0 1px 2px rgba(45, 33, 20, .2);
}

.an-zettel--metall { border-left-color: var(--an-metall); }
.an-zettel-titel { display: block; font-size: 16px; line-height: 22px; color: var(--an-tinte); }
.an-zettel-zeile { display: block; font-size: 14px; line-height: 20px; color: var(--an-tinte-gedimmt); }

/* ------------------------------------------------- Die Frage im Sheet */

.an-frage p { margin: 0 0 10px; font-size: 14.5px; line-height: 21px; }
.an-frage-klein { color: var(--muted); font-size: 13px; }
.an-frage-fuss { display: flex; flex-direction: column; gap: 4px; width: 100%; }

/* Der Fuss im Kind-Popup: hier steht, wer drin ist, und hier geht man hinaus. */
.kids-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.kids-wer { font-size: 13px; color: var(--muted); }

.an-wand :focus-visible {
  outline: 3px solid #12325c;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .85);
}

/* Auf einem flachen Bildschirm (Querformat, kleines Notebook) rückt die Spalte
   nach oben statt in die Mitte — sonst läuft «Eintreten» unten aus dem Bild. */
@media (max-height: 700px) {
  .an-wand { align-items: flex-start; }
  .an-spalte { gap: 10px; }
  .an-schild { min-height: 72px; }
  .an-nummer { font-size: 30px; line-height: 32px; }
  .an-taste { min-height: 46px; }
}