html,body{overflow-x:hidden;overflow-x:clip}
/* Sign-in, registration and password pages: the design's artboards Login, Registrieren and
   Passwort-vergessen. Values are the design's inline styles, moved into classes because the portal's CSP
   allows no inline styles. */

body{margin:0;background:#F6F5FB}
a{color:#4F46E5;text-decoration:none}a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #4F46E5;outline-offset:3px}
.disp{font-family:'Bricolage Grotesque',sans-serif}
/* label above its input – the same spacing as in the app (app.css --label-gap) */
.lbl{display:flex;flex-direction:column;gap:12px;font-size:14px;font-weight:600;color:#1A1838}
.inp{height:52px;border-radius:14px;border:1px solid #DAD7E8;background:#FFFFFF;color:#1A1838;padding:0 16px;font-family:inherit;font-size:16px;font-weight:400;box-sizing:border-box;width:100%}
.inp:focus{border-color:#4F46E5;outline:none;box-shadow:0 0 0 3px #DCD7FF}
.ink a{color:#FFFFFF}
.skip{position:absolute;left:-9999px;top:8px}.skip:focus{left:16px;z-index:99;background:#1A1838;color:#FFFFFF;padding:10px 16px;border-radius:999px}
[hidden]{display:none !important}

/* Frame: dark panel left, form right */
.auth-wrap{box-sizing:border-box;min-height:100vh;display:flex;background:#F6F5FB;font-family:'Plus Jakarta Sans',sans-serif;color:#1A1838}
.auth-panel{flex:0 0 44%;box-sizing:border-box;position:relative;overflow:hidden;background:#1A1838;color:#FFFFFF;padding:40px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:100vh}
.panel-logo{position:relative;z-index:1;align-self:flex-start}
.panel-logo img{height:36px;width:auto;display:block}
.panel-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;max-width:440px}
.panel-title{margin:0;font-size:clamp(30px,3vw,42px);line-height:1.1;font-weight:700;letter-spacing:-0.02em}
.panel-lead{margin:0;font-size:16px;line-height:1.65;color:#C9C6E0}
.panel-seal{position:relative;z-index:1;display:flex;align-items:center;gap:14px;font-size:13px;color:#A9A5C9}
.panel-seal img{width:64px;height:auto}
.panel-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%}
.auth-main{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;padding:48px 24px;box-sizing:border-box}
.auth-col{width:100%;max-width:420px;display:flex;flex-direction:column;gap:24px}

/* Heading and form */
.head{display:flex;flex-direction:column;gap:8px}
.h1{margin:0;font-size:36px;line-height:1.1;font-weight:700;letter-spacing:-0.02em}
.sub{margin:0;font-size:16px;color:#5E5B78}
.sub-long{line-height:1.6}
.form{display:flex;flex-direction:column;gap:16px;margin:0}
.names{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.pw{position:relative;display:block}
.pw .inp{padding-right:52px}
.pw-toggle{position:absolute;right:6px;top:6px;width:40px;height:40px;border:none;background:transparent;color:#5E5B78;border-radius:10px;display:flex;align-items:center;justify-content:center}
.pw-toggle[aria-pressed="true"]{color:#4F46E5}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}
.check{display:flex;align-items:center;gap:8px;color:#3E3B5C}
.check input{width:18px;height:18px;margin:0;accent-color:#4F46E5}
.strong{font-weight:600}
.error{margin:0;font-size:14px;color:#B42318}
.notice{margin:0;padding:12px 16px;border-radius:14px;background:#DCD7FF;color:#1A1838;font-size:14px;line-height:1.5}
.btn-primary{height:54px;border-radius:10px;border:none;background:#4F46E5;color:#FFFFFF;font-size:15px;font-weight:600;width:100%}
.btn-primary:disabled{opacity:.7;cursor:progress}
.btn-secondary{height:48px;border-radius:10px;border:1px solid #DAD7E8;background:#FFFFFF;color:#1A1838;font-size:15px;font-weight:600;width:100%}
.alt{margin:0;font-size:15px;color:#5E5B78;text-align:center}
.back{margin:0;font-size:15px;text-align:center}

/* Sign-in through Google or Microsoft (participants); Apple greyed out until it follows */
.or{display:flex;align-items:center;gap:14px;font-size:13px;color:#5E5B78}
.or::before,.or::after{content:"";flex:1;height:1px;background:#DAD7E8}
.providers{display:flex;flex-direction:column;gap:10px}
.btn-provider{height:48px;border-radius:10px;border:1px solid #DAD7E8;background:#FFFFFF;color:#1A1838;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;text-decoration:none}
a.btn-provider:hover{text-decoration:none;border-color:#4F46E5;background:#F6F5FB}
.btn-provider.is-off{color:#9A97B3;background:#F3F2F8;cursor:not-allowed}
.btn-provider.is-off svg{filter:grayscale(1);opacity:.55}
.btn-provider small{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:#E4E2EF;color:#5E5B78}
.provider-note{margin:0;font-size:13px;line-height:1.55;color:#5E5B78}

/* Password strength (registration) */
.strength{display:flex;flex-direction:column;gap:8px;margin-top:-4px}
.bars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bar{height:6px;border-radius:3px;background:#E4E2EF}
.bar.s1{background:#B42318}.bar.s2{background:#C2410C}.bar.s3{background:#4F46E5}.bar.s4{background:#1F7A4A}
.strength-label{font-size:13px;color:#5E5B78}
.terms{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:#3E3B5C}
.terms input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:#4F46E5}

/* Result states (mail sent, password changed, …) */
.status{display:flex;flex-direction:column;gap:14px}
.status-icon{width:56px;height:56px;border-radius:50%;background:#DCD7FF;display:flex;align-items:center;justify-content:center}
.status-title{margin:0;font-size:32px;font-weight:700}
.status-text{margin:0;font-size:16px;line-height:1.6;color:#5E5B78}
.status-text b{color:#1A1838}
.btn-link{height:54px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;text-decoration:none}
.btn-link:hover{text-decoration:none}
.btn-link.primary{background:#4F46E5;color:#FFFFFF}
.btn-link.secondary{border:1px solid #DAD7E8;background:#FFFFFF;color:#1A1838}

/* Public check of a certificate (/verify/{code}) */
.verify-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:16px;border:1px solid #CDE9D6;background:#F0FAF3;color:#1A1838}
.verify-card.bad{border-color:#F3D2D2;background:#FDF2F2}
.verify-card p{margin:0;font-size:15px;line-height:1.5}
.verify-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:10px 0 0;font-size:14px}
.verify-card dt{color:#5E5B78}
.verify-card dd{margin:0;font-weight:600;overflow-wrap:anywhere}

@media (max-width:900px){.auth-panel{flex:0 0 auto !important;padding:24px !important;min-height:0 !important}.panel-body{display:none !important}.auth-wrap{flex-direction:column !important}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}