/* =========================================================================
   DL Service · Login — TMDL-Group-CI (hell, Navy/Gold, Serif)
   ========================================================================= */
:root{
  --cream:#f5f2ea; --cream2:#efeae0; --paper:#ffffff;
  --ink:#16273f; --ink2:#1f3454; --ink-soft:#36465f;
  --slate:#5f6b7e; --slate2:#7d889a;
  --gold:#1e3a5f; --gold-lt:#2c4a72; --gold-dp:#16273f;
  --line:#e6e0d2; --line2:#d9d2c1;
  --red:#b4452f; --red-bg:#fbece7; --red-bd:#eccabf;
  --radius:10px;
  --ui:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Montserrat",system-ui,sans-serif;
  color-scheme:light;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--ui); color:var(--ink);
  background:
    radial-gradient(900px 600px at 50% -10%, #fbf9f3, transparent 60%),
    var(--cream);
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 18px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Premium Login-Karte — Navy-Hintergrund, sein weißes Wortmarken-Logo schwebt elegant darauf. */
.login-box{
  width:100%; max-width:430px;
  background:#16273f;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow:0 30px 70px rgba(22,39,63,.28), 0 2px 8px rgba(22,39,63,.06);
  padding:42px 42px 30px;
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both;
  color:#fff;
}
.login-logo{
  width:min(260px, 70%); height:auto; display:block;
  margin:0 auto 30px;
  animation:rise .55s cubic-bezier(.2,.7,.2,1) both;
}
@media (max-width:480px){
  .login-box{ padding:32px 26px 24px; }
  .login-logo{ width:min(210px, 75%); margin-bottom:24px; }
}
@keyframes rise{ from{opacity:0; transform:translateY(10px);} to{opacity:1;} }

.brand-line{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-bottom:24px;
}
.brand-line .emb{ width:26px; height:26px; flex:none; }
.login-emb{ width:54px; height:54px; flex:none; }
.lm-text{ display:flex; flex-direction:column; line-height:1; }
.lm-word{ font-size:22px; font-weight:700; letter-spacing:.05em; color:var(--ink); }
.lm-sub{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--slate); margin-top:6px; }
.login-title{
  font-family:var(--serif); font-weight:600; font-size:40px; line-height:1.02;
  color:var(--ink); letter-spacing:.2px;
}
.login-lead{
  font-size:14px; color:rgba(255,255,255,.6); margin-bottom:28px; text-align:center;
}

.alert{
  display:flex; align-items:center; gap:9px;
  background:rgba(220,68,52,.16); border:1px solid rgba(220,68,52,.4); color:#ffb4a8;
  padding:11px 14px; border-radius:9px; font-size:13.5px; margin-bottom:20px;
}
.alert svg{ flex:none; color:#ff8a78; }

.field{ margin-bottom:18px; }
.lbl{
  display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:rgba(255,255,255,.55); margin-bottom:8px;
}
input[type=text], input[type=password]{
  width:100%; font:inherit; font-size:15px; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px;
  padding:13px 14px; transition:border-color .15s, background .15s, box-shadow .15s;
}
input::placeholder{ color:rgba(255,255,255,.32); }
input:focus{ outline:none; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.10); box-shadow:0 0 0 3px rgba(255,255,255,.08); }
input:-webkit-autofill, input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px #1e3454 inset !important; -webkit-text-fill-color:#fff !important; caret-color:#fff; }

.control{ position:relative; display:flex; align-items:center; }
.control input{ padding-right:44px; }
.eye{
  position:absolute; right:6px; display:grid; place-items:center;
  width:32px; height:32px; border:0; background:transparent; color:rgba(255,255,255,.5);
  cursor:pointer; border-radius:6px; transition:color .15s, background .15s;
}
.eye:hover{ color:#fff; background:rgba(255,255,255,.08); }

/* remembered user */
.remembered{
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:9px; padding:10px 12px;
}
.avatar{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  text-transform:uppercase; font-weight:700; font-size:15px; color:#16273f;
  background:#fff;
}
.rm-name{ font-size:14.5px; font-weight:600; color:#fff; word-break:break-all; }
.link-sm{ font-size:12.5px; color:rgba(255,255,255,.6); text-decoration:none; transition:color .12s; }
.link-sm:hover{ color:#fff; text-decoration:underline; }
#rememberedBox .link-sm{ display:inline-block; margin-top:9px; }

.row{ display:flex; align-items:center; justify-content:space-between; margin:18px 0 22px; }
.check{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:rgba(255,255,255,.78); cursor:pointer; user-select:none; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check .box{
  width:18px; height:18px; border-radius:5px; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06); display:grid; place-items:center; color:transparent; transition:.15s;
}
.check input:checked + .box{ background:#fff; border-color:#fff; color:#16273f; }
.check input:focus-visible + .box{ box-shadow:0 0 0 3px rgba(255,255,255,.18); }

.btn-primary{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; color:#16273f; border:0; border-radius:9px;
  padding:14px; cursor:pointer; font:inherit;
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  transition:background .15s, transform .08s, box-shadow .15s;
}
.btn-primary:hover{ background:#f5f2ea; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.btn-primary:active{ transform:translateY(1px); }
.btn-primary.sm{ width:auto; padding:11px 22px; }

.divider{
  display:flex; align-items:center; gap:12px;
  margin:24px 0 16px; color:var(--slate2); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--line); }

.btn-ms{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:12px; text-decoration:none; color:var(--ink);
  font-size:14px; font-weight:500; background:#fff;
  border:1px solid var(--line2); border-radius:7px; transition:border-color .15s, background .15s;
}
.btn-ms:hover{ background:#faf8f2; border-color:var(--gold); }

.login-foot{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
  font-size:12px; color:var(--slate2);
}
.login-foot a{ color:var(--slate); text-decoration:none; }
.login-foot a:hover{ color:var(--ink); }
.login-brand{
  text-align:center; margin-top:18px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.45); font-weight:600;
}

/* modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(22,39,63,.4); backdrop-filter:blur(3px); z-index:100; padding:18px; }
.modal.open{ display:flex; }
.modal-card{ width:100%; max-width:400px; background:#fff; border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:12px; overflow:hidden; box-shadow:0 24px 56px rgba(22,39,63,.22); animation:rise .3s ease both; }
.modal-head{ display:flex; align-items:center; gap:11px; padding:20px 22px 6px; }
.modal-head .emb{ width:30px; height:30px; }
.modal-head h3{ font-family:var(--serif); font-size:21px; font-weight:600; color:var(--ink); }
.modal-body{ padding:4px 22px 16px; font-size:14px; line-height:1.55; color:var(--ink-soft); }
.modal-foot{ padding:0 22px 20px; display:flex; justify-content:flex-end; }

@media (max-width:480px){ .login-box{ padding:30px 24px 26px; } .login-title{ font-size:34px; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition-duration:.01ms!important; } }