/* Midnight IT – Kundenlogin
   Ergänzt landing.css ausschließlich für die Authentifizierungsseiten. */

.auth-body{
  min-height:100vh;
  background:#041423;
  color:#fff;
}

.auth-main{
  min-height:calc(100vh - 84px - 74px);
  position:relative;
  overflow:hidden;
  background-color:#061727;
  background-image:
    linear-gradient(90deg,#051726 0%,rgba(5,23,38,.985) 37%,rgba(5,23,38,.88) 53%,rgba(5,23,38,.58) 70%,rgba(5,23,38,.3) 100%),
    url("assets/hero-workspace.webp");
  background-repeat:no-repeat;
  background-position:center,right center;
  background-size:100% 100%,auto 100%;
}

.auth-main:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 65%,rgba(3,19,33,.24) 100%);
}

.auth-layout{
  position:relative;
  z-index:1;
  min-height:calc(100vh - 84px - 74px);
  padding:64px 0 74px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 470px;
  gap:92px;
  align-items:center;
}

.auth-intro{max-width:610px}
.auth-kicker{
  margin:0 0 22px;
  color:#3f82ea;
  font-size:13px;
  font-weight:800;
  letter-spacing:.09em;
}
.auth-intro h1{
  margin:0;
  max-width:590px;
  color:#fff;
  font-size:clamp(42px,4.3vw,65px);
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:790;
}
.auth-intro-text{
  margin:24px 0 0;
  max-width:575px;
  color:#d4deea;
  font-size:16px;
  line-height:1.7;
}

.auth-benefits{
  margin-top:34px;
  padding-top:25px;
  border-top:1px solid rgba(255,255,255,.24);
  display:grid;
  gap:18px;
  max-width:575px;
}
.auth-benefits>div{display:flex;gap:14px;align-items:flex-start}
.auth-benefit-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(108,163,238,.32);
  background:rgba(22,88,184,.14);
  border-radius:50%;
}
.auth-benefit-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:#fff;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.auth-benefits b{display:block;color:#fff;font-size:13px;line-height:1.25}
.auth-benefits small{display:block;margin-top:4px;color:#aebed0;font-size:12px;line-height:1.45}

.auth-card{
  width:100%;
  padding:38px 38px 31px;
  background:#fff;
  color:#071426;
  border:1px solid rgba(219,225,233,.98);
  border-radius:4px;
  box-shadow:0 28px 72px rgba(0,0,0,.34);
}
.auth-card-label{
  display:block;
  margin-bottom:12px;
  color:#1558cf;
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
}
.auth-card-head h2{
  margin:0;
  color:#071426;
  font-size:34px;
  line-height:1.08;
  letter-spacing:-.035em;
}
.auth-card-head p{
  margin:11px 0 0;
  color:#657286;
  font-size:14px;
  line-height:1.55;
}

.auth-alert{
  margin-top:20px;
  border:1px solid #ebbdc4;
  border-left:4px solid #c84053;
  background:#fff4f5;
  color:#8c2332;
  padding:12px 13px;
  font-size:13px;
  line-height:1.5;
}

.auth-form{margin-top:26px}
.auth-field{margin-bottom:19px}
.auth-field label{
  display:block;
  margin-bottom:8px;
  color:#16253a;
  font-size:13px;
  font-weight:730;
}
.auth-label-row{display:flex;align-items:center;justify-content:space-between;gap:15px}
.auth-label-row label{margin-bottom:8px}
.auth-label-row a{
  margin-bottom:8px;
  color:#1457ce;
  font-size:12px;
  font-weight:650;
}
.auth-label-row a:hover{text-decoration:underline}

.auth-field input{
  display:block;
  width:100%;
  height:51px;
  border:1px solid #cad3df;
  border-radius:3px;
  background:#fff;
  color:#0c1b2e;
  padding:0 14px;
  font-size:15px;
  outline:none;
  box-shadow:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.auth-field input::placeholder{color:#8995a6}
.auth-field input:focus{
  border-color:#2b6ed6;
  box-shadow:0 0 0 3px rgba(36,103,210,.11);
}

.auth-password-wrap{position:relative}
.auth-password-wrap input{padding-right:94px}
.auth-password-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  height:35px;
  padding:0 9px;
  border:0;
  background:transparent;
  color:#1558cf;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.auth-password-toggle:hover{text-decoration:underline}
.auth-password-toggle:focus-visible{outline:2px solid #2b6ed6;outline-offset:1px;border-radius:2px}

.auth-submit{
  width:100%;
  height:52px;
  margin-top:3px;
  border:1px solid #276ee0;
  border-radius:3px;
  background:#1558cf;
  color:#fff;
  padding:0 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  font-size:14px;
  font-weight:760;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.auth-submit:hover{background:#0f4bbb;transform:translateY(-1px)}
.auth-submit:focus-visible{outline:3px solid rgba(21,88,207,.25);outline-offset:2px}

.auth-card-foot{
  margin-top:25px;
  padding-top:22px;
  border-top:1px solid #e4e9ef;
}
.auth-security-note{display:flex;align-items:flex-start;gap:11px}
.auth-security-note>span{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eef4ff;
  border:1px solid #d8e5fb;
}
.auth-security-note svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:#1558cf;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.auth-security-note p{margin:0}
.auth-security-note b{display:block;color:#223147;font-size:12px}
.auth-security-note small{display:block;margin-top:3px;color:#778397;font-size:11px;line-height:1.45}
.auth-back-link{
  display:inline-block;
  margin-top:20px;
  color:#1558cf;
  font-size:12px;
  font-weight:680;
}
.auth-back-link:hover{text-decoration:underline}

.auth-footer{min-height:74px;display:flex;align-items:center;padding:20px 0}
.auth-footer .footer-inner{width:100%}

@media (max-width:1080px){
  .auth-layout{grid-template-columns:minmax(0,1fr) 430px;gap:48px}
}

@media (max-width:900px){
  .auth-main{
    min-height:auto;
    background-image:
      linear-gradient(90deg,rgba(5,23,38,.97),rgba(5,23,38,.82)),
      url("assets/hero-workspace.webp");
    background-size:100% 100%,cover;
    background-position:center,65% center;
  }
  .auth-layout{
    min-height:auto;
    grid-template-columns:1fr;
    gap:40px;
    padding:52px 0 64px;
  }
  .auth-intro{max-width:690px}
  .auth-intro h1{font-size:48px}
  .auth-card{max-width:590px}
}

@media (max-width:620px){
  .auth-layout{padding:38px 0 48px;gap:30px}
  .auth-intro h1{font-size:39px;line-height:1.08}
  .auth-intro-text{font-size:15px;margin-top:19px}
  .auth-benefits{margin-top:25px;padding-top:20px;gap:14px}
  .auth-card{padding:29px 22px 24px}
  .auth-card-head h2{font-size:30px}
  .auth-label-row{align-items:flex-start}
  .auth-label-row a{font-size:11px}
  .auth-footer{min-height:auto}
}

@media (prefers-reduced-motion:reduce){
  .auth-submit,.auth-field input{transition:none}
}

/* Passwort vergessen / Passwort zurücksetzen */
.auth-success,
.auth-neutral{
  margin-top:24px;
  padding:16px 16px;
  display:flex;
  align-items:flex-start;
  gap:13px;
  border-radius:3px;
}
.auth-success{
  border:1px solid #bfe3cb;
  background:#f2fbf5;
  color:#185c35;
}
.auth-neutral{
  border:1px solid #d8dee7;
  background:#f6f8fb;
  color:#2b3a50;
}
.auth-success-icon,
.auth-neutral-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:14px;
  font-weight:850;
}
.auth-success-icon{
  background:#dff4e6;
  color:#148447;
  border:1px solid #b7e2c5;
}
.auth-neutral-icon{
  background:#e9eef5;
  color:#476078;
  border:1px solid #d4dce7;
}
.auth-success b,
.auth-neutral b{
  display:block;
  margin-top:1px;
  font-size:13px;
  line-height:1.35;
}
.auth-success p,
.auth-neutral p{
  margin:5px 0 0;
  font-size:12px;
  line-height:1.55;
  color:#51705f;
}
.auth-neutral p{color:#657286}

.auth-inline-actions{
  margin-top:20px;
}
.auth-inline-actions-stack{
  display:grid;
  gap:10px;
}
.auth-action-primary,
.auth-action-secondary{
  min-height:52px;
  padding:0 17px;
  border-radius:3px;
  font-size:14px;
  font-weight:760;
  text-decoration:none;
}
.auth-action-primary{
  width:100%;
  border:1px solid #276ee0;
  background:#1558cf;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  transition:background .18s ease,transform .18s ease;
}
.auth-action-primary:hover{
  background:#0f4bbb;
  transform:translateY(-1px);
  text-decoration:none;
}
.auth-action-secondary{
  border:1px solid #cad3df;
  background:#fff;
  color:#203148;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .18s ease,background .18s ease;
}
.auth-action-secondary:hover{
  border-color:#aeb9c7;
  background:#f7f9fb;
  text-decoration:none;
}
.auth-help{
  margin:-3px 0 17px;
  color:#7b8798;
  font-size:11px;
  line-height:1.5;
}

@media (prefers-reduced-motion:reduce){
  .auth-action-primary,.auth-action-secondary{transition:none}
}