/* HBN_SELF_REGISTER_MOBILE_V30
   Mobile Registrierung / Einladungs-Anmeldung – reine UI-Optimierung.
   Die Registrierungslogik in register.php bleibt unverändert. */
:root{
  --sr-bg:#f4f8f4;
  --sr-card:#ffffff;
  --sr-text:#20312d;
  --sr-muted:#66756f;
  --sr-line:rgba(18,61,54,.14);
  --sr-accent:#123d36;
  --sr-accent-soft:#dff3e6;
  --sr-danger:#9b2f42;
  --sr-ok:#20624a;
  --sr-shadow:0 24px 70px rgba(30,48,40,.16);
}

html,body{
  min-height:100%;
}

body.login-body{
  min-height:100dvh;
  margin:0;
  overflow:auto!important;
  display:grid;
  place-items:center;
  padding:clamp(14px, 3vw, 28px);
  padding-top:max(16px, env(safe-area-inset-top, 0px));
  padding-bottom:max(18px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at top left, rgba(207,232,215,.78), transparent 26rem),
    radial-gradient(circle at bottom right, rgba(247,234,216,.72), transparent 24rem),
    var(--sr-bg);
  color:var(--sr-text);
}

.self-register-card,
.invite-card{
  width:min(500px, 100%)!important;
  margin:auto!important;
  padding:clamp(20px, 5vw, 32px)!important;
  border-radius:28px!important;
  border:1px solid var(--sr-line)!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:var(--sr-shadow)!important;
}

.self-register-card .login-logo,
.invite-card .login-logo{
  width:58px;
  height:58px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(135deg, var(--sr-accent-soft), #f7ead8);
  font-size:30px;
}

.self-register-card h1,
.invite-card h1{
  margin:0 0 8px;
  text-align:center;
  font-size:clamp(24px, 6vw, 34px);
  line-height:1.08;
}

.self-register-card > p,
.invite-card > p{
  margin:0 0 18px;
  color:var(--sr-muted);
  text-align:center;
  line-height:1.45;
}

.self-register-card .login-form,
.invite-card .login-form{
  display:grid!important;
  gap:13px!important;
  margin-top:16px!important;
}

.self-register-card .login-form label,
.invite-card .login-form label{
  display:grid;
  gap:7px;
  color:var(--sr-text);
  font-weight:850;
  font-size:14px;
}

.self-register-card .login-form input,
.invite-card .login-form input{
  width:100%;
  min-height:50px!important;
  padding:12px 14px!important;
  border:1px solid var(--sr-line)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.96)!important;
  color:var(--sr-text)!important;
  outline:none!important;
  font-size:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

.self-register-card .login-form input:focus,
.invite-card .login-form input:focus{
  border-color:rgba(18,61,54,.46)!important;
  box-shadow:0 0 0 4px rgba(18,61,54,.12)!important;
}

.self-register-card .login-form button,
.invite-card .login-form button{
  min-height:52px;
  margin-top:4px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg, #8fb9a0, #123d36);
  color:#fff;
  font-weight:950;
  font-size:16px;
  box-shadow:0 14px 34px rgba(18,61,54,.22);
}

.self-register-card .login-form button:active,
.invite-card .login-form button:active{
  transform:translateY(1px);
}

.self-register-card .chat-notice,
.invite-card .chat-notice{
  margin:12px 0!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  text-align:left!important;
  line-height:1.4;
}

.self-register-card .chat-notice.error,
.invite-card .chat-notice.error{
  background:rgba(155,47,66,.10)!important;
  color:var(--sr-danger)!important;
  border:1px solid rgba(155,47,66,.18)!important;
}

.self-register-card .chat-notice.success,
.invite-card .chat-notice.success{
  background:rgba(32,98,74,.10)!important;
  color:var(--sr-ok)!important;
  border:1px solid rgba(32,98,74,.18)!important;
}

.self-register-card .soft-link,
.invite-card .soft-link{
  margin-top:14px;
  width:100%;
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  background:rgba(255,255,255,.76);
  border:1px solid var(--sr-line);
}

@media(max-width:520px){
  body.login-body{
    display:block;
    padding:10px;
    padding-top:max(10px, env(safe-area-inset-top, 0px));
    padding-bottom:max(14px, env(safe-area-inset-bottom, 0px));
  }

  .self-register-card,
.invite-card{
    min-height:calc(100dvh - 20px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-radius:24px!important;
  }

  .self-register-card .login-form,
.invite-card .login-form{
    gap:11px!important;
  }

  .self-register-card .login-form input,
  .self-register-card .login-form button,
.invite-card .login-form button{
    min-height:52px!important;
  }
}