/* Anmeldeseite. Früher ein <style>-Block in login.html; ausgelagert, damit die
   Content-Security-Policy ohne 'unsafe-inline' für Stile auskommt. */
html,body{height:100%}
.login{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.side{background:var(--accent-soft);padding:48px 40px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow:hidden}
.side .claim{max-width:36ch}
.side .brand{font-size:15px}
.side h1{font-size:clamp(28px,3.4vw,40px);margin-top:28px}
.side p{color:var(--text2);margin:12px 0 0;font-size:15.5px;max-width:38ch}
.side > svg{width:100%;max-width:520px;height:auto;display:block}
.side .foot{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.formwrap{display:grid;place-items:center;padding:48px 20px}
/* Eigene IP: eigene, dezente Infobox unter der Anmeldung */
.formwrap{align-content:center}
.myip{width:min(380px,100%);margin-top:18px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
      display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:12.5px;color:var(--muted)}
.myip .lbl{flex-basis:100%;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.myip code{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--text);background:none;padding:0;word-break:break-all}
.myip .tag{font-family:var(--mono);font-size:10.5px;padding:1px 6px;border-radius:4px;background:var(--panel2);color:var(--muted)}
.myip .sub{flex-basis:100%;font-size:11.5px;color:var(--muted);word-break:break-all;margin-top:2px}
.myip button{margin-left:auto;border:0;background:transparent;color:var(--accent);font-size:12px;padding:0;cursor:pointer}
.myip button:hover{text-decoration:underline}
.myip .ibtn{margin-left:0;width:18px;height:18px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);font:600 11px/16px var(--sans,inherit);font-style:italic;text-align:center;padding:0;flex:none}
.myip .ibtn:hover,.myip .ibtn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent);text-decoration:none}
.clihelp{flex-basis:100%;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--muted)}
.clihelp b{color:var(--text);font-weight:600}
.clihelp p{margin:0 0 6px}
.clihelp dl{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:0}
.clihelp dt{margin-top:4px}
.clihelp dd{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px}
.clihelp dd code{font-size:12px;font-weight:500;word-break:break-all}
.clihelp dd button{margin-left:0;font-size:11px}
form.card-login{width:min(380px,100%);display:grid;gap:16px}
form.card-login h2{margin:0;font-size:22px;font-weight:600}
form.card-login .lead{margin:-8px 0 4px;color:var(--muted);font-size:14px}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input{padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel);font-size:15px;color:var(--text)}
.field input:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:0}
.pw{position:relative}
.pw input{width:100%;padding-right:78px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;padding:6px}
.pw button:hover{color:var(--text)}
.caps{font-size:12.5px;color:var(--warn)}
.submit{padding:10px 14px;font-size:15px;justify-content:center}
/* Anmeldung mit Microsoft 365 */
.msbtn{gap:10px;color:var(--text);font-weight:500}
.msbtn + .pkor{margin:0}
/* Zwischenseite nach der Rückkehr von Microsoft (siehe _m365_seite in app.py) */
.zwischen{min-height:100%;display:grid;place-items:center;padding:48px 20px}
.zwischen .karte{width:min(420px,100%);display:grid;gap:14px}
.zwischen h2{margin:0;font-size:22px;font-weight:600}
.zwischen p{margin:0;color:var(--text2);font-size:15px;line-height:1.5}
.msg{border-radius:6px;padding:10px 12px;font-size:14px;background:var(--warn-soft)}
.note-small{font-size:12.5px;color:var(--muted)}
.linkbtn{border:0;background:transparent;color:var(--accent);padding:0;cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:2px}
@media (max-width:820px){ .login{grid-template-columns:minmax(0,1fr)} .side{padding:28px 20px} .side > svg{display:none} }