/* ==========================================================================
   uni-PRO – APP/VPN-Verknuepfung
   Ergaenzungen zu /site/assets/css/site.css (Farben und Grundformen von dort)
   ========================================================================== */

.reg{max-width:640px}

/* Registerkarten – nur mit JavaScript sichtbar, ohne stehen alle Formulare untereinander */
.reg-tabs{
  display:flex;gap:4px;padding:4px;margin-bottom:22px;
  background:var(--panel);border-radius:26px;border:1px solid var(--line);
}
.reg-tabs[hidden]{display:none}
.reg-tabs button{
  flex:1 1 auto;min-width:0;white-space:nowrap;background:none;border:0;border-radius:22px;cursor:pointer;
  color:var(--muted);font:inherit;font-size:15.5px;font-weight:600;padding:10px 12px;
}
.reg-tabs button:hover{color:var(--text);background:var(--panel-2)}
.reg-tabs button[aria-selected="true"]{background:var(--green);color:var(--bg)}
.reg-tabs button:focus-visible{outline:2px solid var(--green);outline-offset:2px}

.reg-panel{margin-bottom:30px}
.reg-panel[hidden]{display:none}

.form-title{font-size:23px}
.form-info{margin-bottom:22px}
.form-group{
  font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);
  margin:26px 0 14px;padding-top:18px;border-top:1px solid var(--line);
}
.form-group:first-of-type{margin-top:0;padding-top:0;border-top:0}
.field-hint{margin:7px 0 0}
.field[hidden],.pw-toggle[hidden]{display:none}
.pw-toggle{margin:-4px 0 22px}
.field input[aria-invalid="true"]{border-color:var(--red)}

.form .btn{cursor:pointer;font-family:inherit}
.form .btn[disabled]{opacity:.6;cursor:progress}
.btn-danger{background:var(--red);border-color:var(--red)}
.btn-danger:hover{background:#ea9486;border-color:#ea9486}

.reg-hint p + p{margin-top:8px}

/* Ergebnis */
.reg-result{padding:10px 0 34px}
.reg-result .btn-row{justify-content:center;margin-top:22px}
.thanks .mark.bad{background:rgba(224,122,106,.15);border-color:var(--red)}

/* Vier Karten passen auf dem Handy nicht nebeneinander: zwei mal zwei */
@media (max-width:600px){
  .reg-tabs{display:grid;grid-template-columns:1fr 1fr;border-radius:18px}
  .reg-tabs button{border-radius:14px}
}
@media (max-width:460px){
  .form{padding:22px 18px}
  .reg-tabs button{font-size:14.5px;padding:10px 6px}
}
.forgot{margin:0}
.forgot a{color:var(--green)}
.forgot-field{margin:-10px 0 18px}