:root{--orange:#ed7d31;--orange-dark:#df620d;--ink:#202124;--grey:#686d77;--line:#d4d6da;--panel:#f8f8f7;--focus:rgba(237,125,49,.22)}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
.login-layout{display:grid;grid-template-columns:minmax(420px,1fr) minmax(520px,1fr);min-height:100vh}
.login-visual{position:relative;display:flex;align-items:flex-end;min-height:100vh;padding:46px 7vw 48px;background-image:linear-gradient(180deg,rgba(17,33,48,.02) 30%,rgba(13,24,32,.82) 100%),url("img/inloggStart.png");background-position:center bottom;background-size:cover;color:#fff;overflow:hidden}
.visual-copy{position:relative;z-index:1;max-width:560px;text-shadow:0 2px 18px rgba(0,0,0,.24)}
.eyebrow,.panel-eyebrow{margin:0 0 13px;color:var(--orange);font-size:17px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.visual-copy h1{margin:0;font-size:clamp(48px,5vw,72px);line-height:.98;letter-spacing:-.035em}
.visual-intro{margin:16px 0 0;font-size:clamp(17px,1.5vw,21px);font-weight:600;line-height:1.4}
.visual-rule{width:58px;height:4px;margin:27px 0 14px;background:var(--orange)}
.visual-services{margin:0;color:var(--orange);font-size:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.visual-services span{padding:0 8px}
.login-panel{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:30px clamp(36px,7vw,120px);background:radial-gradient(circle at 75% 20%,#fff 0,#fafafa 45%,#f4f4f3 100%)}
.login-card{width:min(100%,520px)}
.login-logo{display:block;width:min(250px,72%);height:auto;margin:0 0 22px}
.panel-eyebrow{margin-bottom:14px}
.login-card h2{margin:0;font-size:clamp(44px,4.5vw,58px);line-height:1;letter-spacing:-.035em}
.panel-intro{margin:15px 0 28px;color:var(--grey);font-size:17px;line-height:1.45}
.field{margin-bottom:17px}.field>label{display:block;margin-bottom:7px;font-size:15px;font-weight:700}
.field input{width:100%;height:54px;border:1px solid #aeb2b9;border-radius:5px;background:rgba(255,255,255,.62);padding:0 18px;color:var(--ink);font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}.field input:focus{border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px var(--focus)}
.password-field{position:relative}.password-field input{padding-right:60px}.password-toggle{position:absolute;top:0;right:0;width:58px;height:54px;border:0;background:transparent;color:#858a93;cursor:pointer}.password-toggle:hover{color:var(--orange)}.password-toggle svg{width:25px;fill:none;stroke:currentColor;stroke-width:1.8}
.remember{display:inline-flex;align-items:center;gap:10px;margin:0 0 19px;cursor:pointer}.remember input{width:20px;height:20px;margin:0;accent-color:var(--orange)}
.login-button,.passkey-button{display:flex;align-items:center;justify-content:center;width:100%;height:54px;border-radius:5px;font-weight:800;letter-spacing:.035em;cursor:pointer;transition:transform .15s,background .15s,border-color .15s}.login-button{gap:30px;border:0;background:linear-gradient(105deg,var(--orange-dark),#f06f16);color:#fff;text-transform:uppercase}.login-button:hover{background:linear-gradient(105deg,#cf5708,#e9670e);transform:translateY(-1px)}.login-button .arrow{font-size:27px;font-weight:400;line-height:1}
.passkey-button{gap:10px;margin-top:13px;border:1px solid #b7bac0;background:transparent;color:#393c42}.passkey-button:hover{border-color:var(--orange);color:var(--orange)}.passkey-icon{font-size:24px}
.forgot-link{display:inline-block;margin-top:18px;color:#656a72;text-decoration:underline;text-underline-offset:3px}.forgot-link:hover{color:var(--orange)}
.passkey-message{min-height:20px;margin-top:10px;color:#5f646c;font-size:14px;text-align:center}
.passkey-button,.passkey-message{display:none}
.login-message{margin:0 0 26px;padding:15px 17px;border-left:4px solid}.login-error{border-color:#b42318;background:#fff0ed;color:#7b241c}.login-message p{margin:0}
.login-footer{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);color:#6d727b;font-size:13px;line-height:1.5}.login-footer p{max-width:440px;margin:0}.login-footer .company{margin-top:24px}.login-footer .company span{padding:0 9px}
@media(max-width:900px){.login-layout{grid-template-columns:1fr}.login-visual{min-height:300px;padding:32px 30px;background-position:center 72%}.visual-copy h1{font-size:43px}.visual-intro,.visual-rule,.visual-services{display:none}.login-panel{min-height:auto;padding:40px 26px 50px}.login-card{max-width:560px}.login-logo{width:220px;margin-bottom:24px}.panel-intro{margin-bottom:28px}.login-footer .company{margin-top:26px}}
@media(max-width:520px){.login-visual{min-height:245px;padding:28px 22px;background-position:center 65%}.eyebrow{font-size:12px}.visual-copy h1{font-size:36px}.login-panel{padding:38px 20px 50px}.login-logo{width:190px;margin-bottom:28px}.login-card h2{font-size:44px}.panel-eyebrow{font-size:14px}.panel-intro{font-size:16px}.field input,.password-toggle,.login-button,.passkey-button{height:56px}.login-footer{margin-top:42px}}
@media(min-width:901px){html,body{height:100%;overflow:hidden}.login-layout,.login-visual,.login-panel{height:100vh;height:100dvh;min-height:0}.login-panel{overflow:auto}}
@media(min-width:901px) and (max-height:900px){.login-visual{padding-bottom:28px}.visual-copy h1{font-size:48px}.visual-intro{margin-top:10px;font-size:16px}.visual-rule{margin:16px 0 10px}.visual-services{font-size:14px}.login-panel{padding-top:14px;padding-bottom:14px}.login-logo{width:190px;margin-bottom:10px}.panel-eyebrow{margin-bottom:6px;font-size:13px}.login-card h2{font-size:40px}.panel-intro{margin:8px 0 14px;font-size:15px}.field{margin-bottom:9px}.field>label{margin-bottom:4px;font-size:14px}.field input,.password-toggle{height:44px}.remember{margin-bottom:9px;font-size:14px}.remember input{width:18px;height:18px}.login-button,.passkey-button{height:44px}.passkey-button{margin-top:7px}.forgot-link{margin-top:8px;font-size:14px}.passkey-message{min-height:14px;margin-top:5px;font-size:12px}.login-footer{margin-top:10px;padding-top:8px;font-size:11px;line-height:1.35}.login-footer .company{margin-top:6px}}
@media(max-width:900px){html,body{height:100%}.login-layout{grid-template-rows:minmax(105px,18dvh) minmax(0,1fr);height:100vh;height:100dvh;min-height:0;overflow:hidden}.login-visual{min-height:0;height:auto;padding:18px 22px;background-position:center 62%}.eyebrow{margin-bottom:5px;font-size:11px}.visual-copy h1{font-size:30px}.login-panel{min-height:0;padding:14px 20px;overflow:auto}.login-logo{width:150px;margin-bottom:9px}.panel-eyebrow{margin-bottom:5px;font-size:12px}.login-card h2{font-size:36px}.panel-intro{margin:7px 0 13px;font-size:14px}.field{margin-bottom:8px}.field>label{margin-bottom:4px;font-size:13px}.field input,.password-toggle{height:43px}.remember{margin-bottom:8px;font-size:13px}.remember input{width:18px;height:18px}.login-button,.passkey-button{height:43px}.passkey-button{margin-top:7px}.forgot-link{margin-top:8px;font-size:13px}.passkey-message{min-height:12px;margin-top:4px;font-size:12px}.login-footer{margin-top:9px;padding-top:7px;font-size:11px;line-height:1.3}.login-footer .company{margin-top:5px}}
@media(max-width:900px) and (max-height:650px){.login-layout{grid-template-rows:82px minmax(0,1fr)}.login-visual{padding:10px 20px}.visual-copy .eyebrow{display:none}.visual-copy h1{font-size:25px}.login-panel{padding-top:8px;padding-bottom:8px}.login-logo{width:125px;margin-bottom:5px}.panel-intro{display:none}.login-footer>p:first-child{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}