/* Anmelde-Seiten (login.html, set-password.html): geteilter Bildschirm -
   links Claim/Leistungen (immer dunkel, unabhängig vom Theme), rechts das
   Formular. Auf schmalen Bildschirmen schrumpft der linke Teil zu einem
   kompakten Kopf mit Logo und Slogan. */
.login-split{display:grid;grid-template-columns:1.1fr 1fr;padding:0;align-items:stretch;justify-content:stretch;min-height:100vh;}

.login-hero{
  position:relative;overflow:hidden;color:#EAF3F9;
  background:radial-gradient(120% 90% at 0% 0%,#0f3a55 0%,#0a2433 45%,#07161f 100%);
  padding:48px 56px 36px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;
}
.login-hero-brand{display:flex;align-items:center;gap:10px;}
.login-hero-brand img{height:26px;width:auto;display:block;}
.login-hero-brand span{font-size:11px;font-weight:700;letter-spacing:.16em;color:#5CBAF5;text-transform:uppercase;}
.login-hero-main{max-width:520px;}
.login-hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,3.6vw,46px);line-height:1.1;font-weight:700;letter-spacing:-.02em;margin:0 0 16px;color:#fff;}
.login-hero h1 em{font-style:normal;color:#5CBAF5;}
.login-hero-sub{font-size:15.5px;line-height:1.55;color:#a9c2d1;margin:0 0 28px;max-width:440px;}
.login-hero-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;max-width:440px;}
.login-hero-tile{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#d3e3ed;}
.login-hero-tile i{flex:none;width:34px;height:34px;border-radius:9px;background:rgba(92,186,245,.12);border:1px solid rgba(92,186,245,.22);display:flex;align-items:center;justify-content:center;color:#5CBAF5;}
.login-hero-tile svg{width:18px;height:18px;}
.login-hero-foot{font-size:12px;color:#6f8c9e;}

.login-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;}
.login-split .login-card{background:none;border:0;box-shadow:none;padding:0;max-width:400px;}
.login-title{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em;}
.login-lead{font-size:13.5px;color:var(--text-soft);margin:0 0 22px;}
.login-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;font-size:12px;color:var(--text-soft);}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--line);}
.login-secondary{width:100%;padding:10px;font-size:13.5px;}
.login-help{text-align:center;margin:16px 0 0;font-size:13px;}
.login-help a{color:var(--sky-bright);text-decoration:none;}
.login-help a:hover{text-decoration:underline;}
.login-contact{max-width:400px;width:100%;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-soft);text-align:center;line-height:1.5;}
.login-contact a{color:var(--sky-bright);text-decoration:none;}

/* Handy: Karten-Layout - Logo und Slogan zentriert oben, darunter die
   Anmelde-Karte, dann die Leistungen als Chips und der Hinweis auf den
   Ansprechpartner. Dafür werden Hero und Panel "aufgelöst" (display:contents)
   und ihre Bausteine einzeln in die gewünschte Reihenfolge gebracht. */
@media (max-width:860px){
  .login-split{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:34px 18px 30px;gap:0;
    background:radial-gradient(120% 60% at 50% 0%,#0f3a55 0%,#0a2433 50%,#07161f 100%) fixed;color:#EAF3F9;}
  .login-hero,.login-hero-main,.login-panel{display:contents;}
  .login-hero-brand{order:1;margin-bottom:16px;}
  .login-hero-brand img{height:30px;}
  .login-hero-brand span{display:none;}
  .login-hero h1{order:2;text-align:center;font-size:28px;margin:0 0 6px;}
  .login-hero-sub{order:3;display:block;text-align:center;font-size:13.5px;margin:0 0 22px;max-width:340px;}
  .login-split .login-card{order:4;color:var(--text-strong);background:var(--bg-panel);border:1px solid rgba(92,186,245,.22);box-shadow:0 24px 60px rgba(0,0,0,.45);padding:24px 22px 18px;max-width:400px;}
  .login-hero-tiles{order:5;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px;max-width:400px;}
  .login-hero-tile{font-size:12px;padding:5px 11px;border-radius:20px;background:rgba(92,186,245,.1);border:1px solid rgba(92,186,245,.2);}
  .login-hero-tile i{display:none;}
  .login-contact{order:6;border-top:0;margin-top:14px;padding-top:0;color:#8fa9b8;}
  .login-contact a{color:#5CBAF5;}
  .login-hero-foot{display:none;}
}
.login-split .field-hint{font-size:11.5px;color:var(--text-soft);margin-top:5px;}