*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--hinweis:#8a3a75;--hinweis-tint:#f4ebf2;
  --bg:#f2ede4;--surface:#fff;--surface-2:#faf8f4;
  --border:rgba(80,60,30,0.11);--border-mid:rgba(80,60,30,0.16);
  --text:#28231c;--text-soft:#3d3529;--text-muted:#7a7268;--text-faint:#aea89f;
  --blue:#1a5296;--blue-hover:#14437c;--blue-light:#e6eef8;--blue-mid:#4878bc;--blue-faint:#eef3fb;
  --red:#c70d2d;--green:#3d6e1a;--teal:#0e7490;--teal-hover:#0b6277;
  --r:8px;--r-sm:5px;
  --font-serif:'Lora',Georgia,serif;
  --font-sans:'Source Sans 3','Gill Sans',sans-serif;
}
html,body{
  height:100%;font-family:var(--font-sans);background:var(--bg);
  color:var(--text);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body{display:flex;align-items:center;justify-content:center;min-height:100vh}

/* ── LOGIN CARD ────────────────────────────── */
.login-wrap{width:100%;max-width:400px;padding:24px}

.login-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:44px 44px 40px;
  box-shadow:0 4px 24px rgba(40,30,10,0.09),0 1px 4px rgba(40,30,10,0.05);
}

.login-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:32px;padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
.login-icon{
  width:38px;height:38px;flex-shrink:0;
}
.login-title{
  font-family:var(--font-serif);font-weight:600;font-size:20px;
  letter-spacing:.06em;color:var(--text);
}
.login-subtitle{
  font-size:11.5px;color:var(--text-muted);margin-top:2px;
}

.field{margin-bottom:18px}
.field-label{
  display:block;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;
}
.field-input{
  width:100%;padding:10px 13px;font-size:13.5px;
  font-family:var(--font-sans);color:var(--text);
  background:var(--surface-2);border:1px solid var(--border-mid);
  border-radius:var(--r-sm);outline:none;transition:border-color .15s,background .15s;
}
.field-input:focus{border-color:var(--blue-mid);background:var(--surface)}
.field-input::placeholder{color:var(--text-faint)}

.login-btn{
  width:100%;padding:11px;margin-top:8px;
  font-size:13.5px;font-weight:600;font-family:var(--font-sans);
  background:var(--blue);color:#fff;border:none;
  border-radius:var(--r-sm);cursor:pointer;
  transition:background .15s;letter-spacing:.01em;
}
.login-btn:hover{background:var(--blue-hover)}
.login-btn:active{transform:translateY(1px)}
.login-btn:disabled{background:var(--text-faint);cursor:default}

/* ── LDAP-Button ───────────────────────────── */
.ldap-btn{
  width:100%;padding:11px;margin-top:10px;
  font-size:13.5px;font-weight:600;font-family:var(--font-sans);
  background:var(--teal);color:#fff;border:none;
  border-radius:var(--r-sm);cursor:pointer;
  transition:background .15s;letter-spacing:.01em;
  display:none;
}
.ldap-btn:hover{background:var(--teal-hover)}
.ldap-btn:active{transform:translateY(1px)}
.ldap-btn:disabled{background:var(--text-faint);cursor:default}

/* ── SAML-Button ───────────────────────────── */
.saml-btn{
  width:100%;padding:11px;margin-top:10px;
  font-size:13.5px;font-weight:600;font-family:var(--font-sans);
  background:var(--surface);color:var(--blue);
  border:1.5px solid var(--blue);
  border-radius:var(--r-sm);cursor:pointer;
  transition:background .15s,color .15s;letter-spacing:.01em;
  display:none;
}
.saml-btn:hover{background:var(--blue-faint)}
.saml-btn:active{transform:translateY(1px)}

/* ── SSO-Trenner ───────────────────────────── */
.sso-divider{
  display:none;
  align-items:center;gap:10px;
  margin:16px 0 4px;
  font-size:11px;color:var(--text-faint);
}
.sso-divider::before,.sso-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}
.sso-divider.visible{display:flex}

/* ── Feststelltaste-Hinweis (Caps Lock) ── */
.caps-hint{
  display:none;margin-top:6px;font-size:11.5px;font-weight:500;
  color:var(--hinweis);letter-spacing:.01em;
}
.caps-hint.visible{display:block}

.login-error{
  display:none;margin-top:14px;padding:9px 12px;
  background:color-mix(in oklch,var(--red) 8%,var(--surface));
  border:1px solid color-mix(in oklch,var(--red) 20%,var(--border));
  border-radius:var(--r-sm);font-size:12px;color:var(--red);
}
.login-error.visible{display:block}

.login-footer{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.login-footer-label{font-size:11px;color:var(--text-faint)}
.admin-link{
  font-size:11px;color:var(--blue);text-decoration:none;
  font-weight:500;transition:opacity .15s;
}
.admin-link:hover{opacity:.75}

/* ── LOADING STATE ─────────────────────────── */
.login-btn.loading::after,
.ldap-btn.loading::after{
  content:'';display:inline-block;width:12px;height:12px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;
  margin-left:8px;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── ERIS WORDMARK (unten) ─────────────────── */
.eris-stamp{
  text-align:center;margin-top:28px;
  font-family:var(--font-serif);font-size:11px;
  letter-spacing:.15em;color:var(--text-faint);
  text-transform:uppercase;
}

/* ── Passwort-Sichtbarkeits-Toggle (Auge) ── */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:38px}
.pw-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:inline-flex;
  align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;
  background:none;color:var(--text-muted);cursor:pointer;border-radius:5px;opacity:.65}
.pw-eye:hover{opacity:1;color:var(--blue)}
.pw-eye::after{content:'';position:absolute;left:4px;right:4px;top:50%;height:2px;
  background:currentColor;transform:rotate(-18deg);opacity:0;border-radius:2px}
.pw-eye.pw-eye--on::after{opacity:1}