/* HBN_LOGIN_MOBILE_POLISH_V36B
   Mobile Login-Ansicht wieder als echte Teamchat/PWA-Karte darstellen. */
:root{
  --hbn-login-bg:#07140f;
  --hbn-login-card:rgba(255,255,255,.88);
  --hbn-login-card-dark:rgba(10,18,31,.92);
  --hbn-login-text:#182230;
  --hbn-login-muted:#667085;
  --hbn-login-line:rgba(18,61,54,.14);
  --hbn-login-gold:#e9bd45;
  --hbn-login-green:#123d36;
  --hbn-login-shadow:0 24px 90px rgba(15,23,42,.18);
}

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

body.login-body{
  min-height:100dvh;
  margin:0;
  padding:clamp(18px,4vw,44px);
  display:grid;
  place-items:center;
  overflow:auto;
  color:var(--hbn-login-text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(207,232,215,.86), transparent 28rem),
    radial-gradient(circle at 90% 86%, rgba(247,234,216,.78), transparent 34rem),
    linear-gradient(135deg,#edf7f0,#fff9ec 58%,#eef5ff);
  -webkit-text-size-adjust:100%;
}

.login-card{
  width:min(520px,100%);
  padding:clamp(22px,4vw,34px);
  border-radius:30px;
  border:1px solid rgba(18,61,54,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78));
  box-shadow:var(--hbn-login-shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.login-logo{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:linear-gradient(135deg,#123d36,#20624a);
  color:#fff;
  font-size:30px;
  box-shadow:0 16px 34px rgba(18,61,54,.24);
  margin-bottom:16px;
}

.login-card h1{
  margin:0;
  font-size:clamp(34px,8vw,56px);
  line-height:.98;
  letter-spacing:-.055em;
  color:#182230;
}

.login-card > p{
  margin:14px 0 22px;
  color:var(--hbn-login-muted);
  font-size:clamp(16px,3.8vw,19px);
  line-height:1.42;
}

.login-form{
  display:grid;
  gap:14px;
}

.login-form label:not(.remember-check){
  display:grid;
  gap:7px;
  color:#26352b;
  font-weight:900;
  font-size:14px;
}

.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[name="username"],
.login-form input[name="password"]{
  width:100%;
  min-height:54px;
  padding:0 16px;
  border-radius:18px;
  border:1px solid rgba(18,61,54,.18);
  background:rgba(255,255,255,.88);
  color:#182230;
  font:inherit;
  font-size:17px;
  font-weight:750;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.login-form input:focus{
  border-color:rgba(32,98,74,.70);
  box-shadow:0 0 0 4px rgba(32,98,74,.14), inset 0 1px 0 rgba(255,255,255,.75);
}

.remember-check{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(18,61,54,.10);
  background:rgba(255,255,255,.58);
  color:#344054;
  font-weight:850;
}

.remember-check input{
  width:22px;
  height:22px;
  accent-color:#20624a;
  flex:0 0 auto;
}

.login-form button[type="submit"]{
  min-height:54px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,#e9bd45,#f5cd49);
  color:#07140f;
  font:inherit;
  font-weight:950;
  font-size:17px;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(198,151,37,.24);
}

.login-form button[type="submit"]:active{
  transform:translateY(1px);
}

.chat-notice.error{
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(155,47,66,.20);
  background:rgba(155,47,66,.10);
  color:#7f1d1d;
  font-weight:850;
  line-height:1.35;
}

.register-soft-link,
.login-card .soft-link.register-soft-link{
  width:100%;
  min-height:52px;
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:#17342e;
  border:1px solid rgba(18,61,54,.12);
  text-decoration:none;
  font-weight:950;
  font-size:17px;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
}

/* Installationskarte farblich an Login-Karte anbinden */
.hbn-login-install-v33d{
  border-color:rgba(18,61,54,.13)!important;
  background:linear-gradient(135deg,rgba(207,232,215,.78),rgba(247,234,216,.64))!important;
  box-shadow:0 14px 34px rgba(46,64,55,.10)!important;
}

/* Dark-/PWA-Standalone wirkt auf manchen Android-Systemen besser ohne grellen Weißeindruck */
@media (prefers-color-scheme: dark){
  body.login-body{
    background:
      radial-gradient(circle at 22% 10%, rgba(32,98,74,.24), transparent 28rem),
      radial-gradient(circle at 86% 86%, rgba(233,189,69,.12), transparent 30rem),
      linear-gradient(135deg,#040b12,#07140f 56%,#0b1220);
    color:#edf7f1;
  }
  .login-card{
    background:linear-gradient(180deg,rgba(13,24,39,.94),rgba(8,17,29,.86));
    border-color:rgba(226,232,240,.12);
    color:#edf7f1;
    box-shadow:0 28px 90px rgba(0,0,0,.35);
  }
  .login-card h1{color:#f8fafc;}
  .login-card > p{color:#aebed3;}
  .login-form label:not(.remember-check){color:#e8eef8;}
  .login-form input[type="text"],
  .login-form input[type="password"],
  .login-form input[name="username"],
  .login-form input[name="password"]{
    background:#0b1220;
    border-color:rgba(226,232,240,.16);
    color:#f8fafc;
  }
  .remember-check{
    background:rgba(255,255,255,.05);
    border-color:rgba(226,232,240,.11);
    color:#e8eef8;
  }
  .register-soft-link,
  .login-card .soft-link.register-soft-link{
    background:rgba(255,255,255,.08);
    color:#edf7f1;
    border-color:rgba(226,232,240,.12);
  }
  .hbn-login-install-v33d{
    background:linear-gradient(135deg,rgba(18,61,54,.70),rgba(15,23,42,.78))!important;
    border-color:rgba(125,211,252,.14)!important;
    color:#f8fafc!important;
  }
  .hbn-login-install-text span,
  .hbn-login-install-v33d small{color:rgba(226,232,240,.74)!important;}
  .hbn-login-install-icon{background:rgba(255,255,255,.10)!important;}
  .hbn-login-install-actions a{background:rgba(255,255,255,.09)!important;color:#f8fafc!important;border-color:rgba(226,232,240,.12)!important;}
}

@media(max-width:560px){
  body.login-body{
    display:block;
    padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(24px + env(safe-area-inset-bottom,0px));
  }
  .login-card{
    width:100%;
    margin:0 auto;
    border-radius:26px;
    padding:22px 16px 18px;
  }
  .login-logo{
    width:52px;
    height:52px;
    border-radius:18px;
    font-size:27px;
  }
  .login-card h1{
    font-size:clamp(36px,11vw,48px);
  }
  .login-form{
    gap:12px;
  }
  .login-form input[type="text"],
  .login-form input[type="password"],
  .login-form input[name="username"],
  .login-form input[name="password"],
  .login-form button[type="submit"]{
    min-height:52px;
    border-radius:17px;
  }
  .remember-check{
    min-height:50px;
  }
}