/* SINUS Connect — Basis-Styles (öffentlich: Anmeldung, Registrierung, Dialoge) */
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;
  src:url('/outfit-600.woff2') format('woff2')}
:root{--acc:#2596be;--acc-d:#1d7a9c;--bg:#f1f5f9;--card:#fff;--txt:#0f172a;--mut:#64748b;--line:#e2e8f0}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--txt);min-height:100vh}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
.hidden{display:none!important}

/* ── Logo ── */
.logo{display:flex;align-items:center;gap:10px}
.logo .slogo{width:28px;height:28px;border-radius:8px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:Arial,sans-serif;font-weight:800;font-size:17px;font-style:normal}
.logo .brand{font-family:'Outfit',sans-serif;font-weight:600;font-size:17px;letter-spacing:.2px}

/* ── Auth-Karte ── */
.authwrap{display:flex;width:100%;min-height:100vh;padding:20px}
.auth{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 50px rgba(15,23,42,.08);
  padding:34px 32px;width:100%;max-width:400px;margin:auto}
.auth .logo{justify-content:center;margin-bottom:6px}
.auth .logo .slogo{width:38px;height:38px;border-radius:11px;font-size:23px}
.auth .logo .brand{font-size:22px}
.chkrow{display:flex;align-items:center;gap:8px;margin:2px 0 10px;font-size:13px;color:#475569;cursor:pointer;user-select:none}
.chkrow input{width:16px;height:16px;accent-color:var(--acc)}
.auth p.sub{text-align:center;color:var(--mut);font-size:13px;margin-bottom:24px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:11.5px;font-weight:700;color:#475569;margin-bottom:6px}
.fld input{width:100%;height:44px;border:1.5px solid var(--line);border-radius:11px;padding:0 14px;font-size:14px;outline:none;background:#fbfdfe}
.fld input:focus{border-color:var(--acc)}
.btn{width:100%;height:46px;border:0;border-radius:12px;background:var(--acc);color:#fff;font-size:14.5px;font-weight:700;margin-top:6px}
.btn:hover{background:var(--acc-d)}
.btn.sec{background:#fff;border:1.5px solid var(--line);color:#475569}
.btn.sec:hover{background:#f8fafc}
.auth .sw{text-align:center;margin-top:16px;font-size:13px;color:var(--mut)}
.auth .sw a{color:var(--acc);font-weight:700;cursor:pointer;text-decoration:none}
.err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:10px;padding:9px 12px;font-size:12.5px;margin-bottom:14px}
.row2f{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.captchabox{background:#f8fafc;border:1.5px dashed var(--line);border-radius:12px;padding:12px 14px 4px}
.captchabox label{font-size:12.5px}
.captchabox b{color:var(--acc);font-size:14px}
.okmsg{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;border-radius:10px;padding:9px 12px;font-size:12.5px;margin-bottom:14px}

/* ── Dialog ── */
/* Dialog-Zentrierung über margin:auto im scrollbaren Overlay — bewusst OHNE
   vh-Höhen und ohne align-items:center: Android-WebViews berechnen vh falsch
   und lassen den Dialog sonst auf Miniaturhöhe zusammenfallen. Ist der Dialog
   höher als der Bildschirm, scrollt das Overlay als Ganzes. */
.ovl{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;z-index:50;padding:16px;overflow-y:auto}
.dlg{background:#fff;border-radius:20px;padding:24px;width:100%;max-width:420px;box-shadow:0 24px 60px rgba(15,23,42,.25);
  margin:auto;height:-webkit-fit-content;height:fit-content}
.dlg h3{font-size:16px;font-weight:800;margin-bottom:4px}
.dlg p.hint{font-size:12.5px;color:var(--mut);margin-bottom:16px}
.dlg .row2{display:flex;gap:10px;margin-top:4px}
.dlg .row2 .btn{margin-top:10px}

@media (max-width:520px){
  .dlg{max-width:calc(100vw - 24px)}
}