/* ---------- Registrierung, im Stil des Login-Screens ----------
   Zwei Schritte in der linken Spalte: E-Mail, dann Lehrperson, Schule
   und Zustimmung. Feld, Knopf und Abstaende kommen aus login.css, hier
   steht nur, was dazukommt. */

/* Fortschritt: zwei Balken, der aktive fuellt sich von links. */
.reg-progress{display:flex;align-items:center;gap:8px;margin-bottom:28px;}
.reg-progress-bar{position:relative;width:56px;height:4px;border-radius:2px;background:var(--tint-strong);overflow:hidden;}
.reg-progress-bar::after{content:"";position:absolute;inset:0;background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform var(--reg-progress-dur) var(--reg-progress-ease);}
.reg-progress-bar.is-done::after{background:var(--green-deep);transform:scaleX(1);}
.reg-progress-bar.is-active::after{transform:scaleX(1);}
.reg-progress-label{margin-left:6px;font-family:var(--font-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);}

/* Vor- und Nachname nebeneinander, schmal untereinander. */
.reg-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:560px){ .reg-row{grid-template-columns:1fr;gap:16px;} }
.reg-field{min-width:0;}

.reg-row + .reg-field{margin-top:16px;}

/* Auswahl der Schule: das Feld aus login.css mit eigenem Pfeil. */
.fig-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;}
.fig-select.is-placeholder{color:#757575;}

/* Zustimmung: eigene Kaestchen, gleiche Kontur wie die Felder. */
.reg-consent{border:0;padding:0;margin:22px 0 4px;display:flex;flex-direction:column;gap:12px;}
.fig-check{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.45;color:var(--ink);cursor:pointer;}
.fig-check input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:22px;height:22px;margin:0;border:2px solid var(--line);border-radius:5px;
  background:var(--paper) center/14px no-repeat;cursor:pointer;
  transition:background-color var(--duration-quick) var(--ease-smooth-out),border-color var(--duration-quick) var(--ease-smooth-out);}
.fig-check input:checked{background-color:var(--amber);border-color:var(--amber);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");}
.fig-check input[aria-invalid="true"]{border-color:var(--red);}
.fig-check a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.fig-check a:hover{color:var(--green-deep);}
.reg-consent .fig-error{margin-left:0;}