.login{--l-basis:#050912;--l-1:#2a62d4;--l-2:#ff7a2f;--l-3:#3f8cff;--l-1-sterkte:.6;--l-2-sterkte:.22;--l-3-sterkte:.32;--l-halo:63 140 255;--l-ease:cubic-bezier(.22, 1, .36, 1);--l-veer:cubic-bezier(.34, 1.4, .64, 1);isolation:isolate;background:var(--l-basis);min-height:100dvh;color:var(--color-fg);display:flex;position:relative;overflow:hidden}:root[data-accent=oranje] .login{--l-basis:#0a0908;--l-1:#ff7a2f;--l-2:#c8420c;--l-3:#2b3550;--l-1-sterkte:.55;--l-2-sterkte:.42;--l-3-sterkte:.5;--l-halo:255 122 47}.login-achtergrond{z-index:-1;pointer-events:none;position:fixed;inset:0}.login-aurora>span{mix-blend-mode:screen;will-change:transform;border-radius:50%;position:absolute}.login-aurora>.a1{aspect-ratio:1.45;background:radial-gradient(closest-side, color-mix(in srgb, var(--l-1) calc(var(--l-1-sterkte) * 100%), transparent), transparent);opacity:.42;width:min(880px,160vw);animation:login-drift-1 26s var(--l-ease) infinite alternate;margin-top:calc(min(880px,160vw)/-2.9);margin-left:calc(min(880px,160vw)/-2);top:26%;left:50%}.login-aurora>.a2{aspect-ratio:1;background:radial-gradient(closest-side, color-mix(in srgb, var(--l-2) calc(var(--l-2-sterkte) * 100%), transparent), transparent);opacity:.32;width:min(640px,110vw);animation:login-drift-2 32s var(--l-ease) infinite alternate;top:-12%;left:62%}.login-aurora>.a3{aspect-ratio:1.2;background:radial-gradient(closest-side, color-mix(in srgb, var(--l-3) calc(var(--l-3-sterkte) * 100%), transparent), transparent);opacity:.7;width:min(900px,140vw);animation:login-drift-3 38s var(--l-ease) infinite alternate;top:38%;left:-18%}@keyframes login-drift-1{0%{transform:translate(-3%,-2%)scale(1)}to{transform:translate(3%,3%)scale(1.08)}}@keyframes login-drift-2{0%{transform:translate(0,0)scale(1)}to{transform:translate(-14%,10%)scale(1.15)}}@keyframes login-drift-3{0%{transform:translate(0,0)scale(1.05)}to{transform:translate(12%,-8%)scale(.95)}}.login-raster{background-image:radial-gradient(#ffffff13 1px,#0000 1.3px);background-position:50%;background-size:26px 26px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(60% 52% at 50% 34%,#000 0%,#0000 75%);mask-image:radial-gradient(60% 52% at 50% 34%,#000 0%,#0000 75%)}.login-horizon{background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--l-1) 70%, white 20%) 50%, transparent);opacity:.45;pointer-events:none;width:300px;height:1px;margin-left:-150px;position:absolute;bottom:2px;left:50%}.login-ruis{opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:-50%}.login-vignet{background:radial-gradient(90% 75% at 50% 36%,#0000 35%,#000000b8 100%),linear-gradient(#0000 60%,#00000059);position:absolute;inset:0}.login-inhoud{width:100%;min-height:100dvh;padding:max(40px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.login-kolom{width:100%;max-width:400px}.login-merk{text-align:center;flex-direction:column;align-items:center;margin-bottom:32px;display:flex}.login-teken{place-items:center;width:128px;height:128px;margin-bottom:26px;display:grid;position:relative}.login-halo{background:radial-gradient(closest-side, rgb(var(--l-halo) / .42), rgb(var(--l-halo) / .12) 55%, transparent);will-change:transform, opacity;border-radius:50%;animation:5.6s ease-in-out infinite login-adem;position:absolute;inset:-46px}.login-teken svg{filter:drop-shadow(0 10px 24px #0000008c);position:relative}.login-glans{pointer-events:none;border-radius:26px;position:absolute;inset:0;overflow:hidden;-webkit-mask-image:radial-gradient(closest-side,#000 70%,#0000);mask-image:radial-gradient(closest-side,#000 70%,#0000)}.login-glans:before{content:"";animation:login-glans 1.6s .5s var(--l-ease) both;background:linear-gradient(105deg,#0000 40%,#ffffff29 50%,#0000 60%);position:absolute;inset:-20% -60%;transform:translate(-60%)}@keyframes login-adem{0%,to{opacity:.7;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}@keyframes login-glans{to{transform:translate(60%)}}.login-naam{letter-spacing:-.02em;color:#0000;-webkit-text-fill-color:transparent;background:linear-gradient(#fff 15%,#b3b8c6 100%);-webkit-background-clip:text;background-clip:text;margin-bottom:-.1em;padding-bottom:.18em;font-size:44px;font-weight:650;line-height:1.25}.login-ondertitel{letter-spacing:.34em;text-transform:uppercase;color:#ebebf58c;margin-top:6px;margin-right:-.34em;padding-bottom:2px;font-size:11px;font-weight:500;line-height:1.5}.login-kaart{-webkit-backdrop-filter:blur(28px)saturate(160%);transition:opacity .28s var(--l-ease), transform .28s var(--l-ease), filter .28s var(--l-ease);background:linear-gradient(#fff1,#ffffff06 60%,#ffffff08);border-radius:24px;padding:28px;position:relative;box-shadow:inset 0 1px #ffffff12,inset 0 -1px #00000040,0 1px 1px #0000004d,0 30px 80px -20px #000000bf}.login-kaart:before{content:"";border-radius:inherit;background:linear-gradient(165deg, #ffffff47, #ffffff12 28%, #ffffff0a 62%, color-mix(in srgb, var(--color-accent) 38%, transparent));-webkit-mask-composite:xor;pointer-events:none;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.login-kaart:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff8c,#0000);height:1px;position:absolute;top:0;left:14%;right:14%}.login-kaart[data-schud=ja]{animation:.44s cubic-bezier(.36,.07,.19,.97) both login-schud}@keyframes login-schud{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(3px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}.login-kop h2{letter-spacing:-.02em;color:var(--color-fg);font-size:22px;font-weight:650;line-height:1.2}.login-kop p{color:#ebebf599;margin-top:6px;font-size:14px}.login-velden{gap:10px;margin-top:22px;display:grid}.login-veld{min-height:58px;transition:box-shadow .18s var(--l-ease), background-color .18s var(--l-ease);background:#00000052;border-radius:14px;align-items:center;display:flex;position:relative;box-shadow:inset 0 0 0 1px #ffffff1a,inset 0 1px 2px #00000059}@media (hover:hover){.login-veld:hover{box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 1px 2px #00000059}}.login-veld:focus-within{box-shadow:inset 0 0 0 1.5px var(--color-accent), 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent);background:#0000006b}.login-veld input{min-width:0;height:58px;color:var(--color-fg);letter-spacing:-.01em;caret-color:var(--color-accent);background:0 0;border:0;border-radius:14px;outline:none;flex:1;padding:24px 16px 4px;font-size:17px}.login-veld input[type=password]{letter-spacing:.12em}.login-veld input:-webkit-autofill{-webkit-text-fill-color:var(--color-fg);transition:background-color 9999s;-webkit-box-shadow:inset 0 0 0 100px #16161a}.login-veld input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-fg);transition:background-color 9999s;-webkit-box-shadow:inset 0 0 0 100px #16161a}.login-veld input:-webkit-autofill:focus{-webkit-text-fill-color:var(--color-fg);transition:background-color 9999s;-webkit-box-shadow:inset 0 0 0 100px #16161a}.login-veld label{color:#ebebf58c;pointer-events:none;transform-origin:0;transition:transform .22s var(--l-veer), color .16s ease;font-size:17px;position:absolute;top:50%;left:16px;transform:translateY(-50%)}:-webkit-any(.login-veld input:focus+label,.login-veld input:not(:placeholder-shown)+label,.login-veld input:-webkit-autofill+label){color:#ebebf599;transform:translateY(calc(-50% - 13px))scale(.72)}:is(.login-veld input:focus+label,.login-veld input:not(:placeholder-shown)+label,.login-veld input:autofill+label){color:#ebebf599;transform:translateY(calc(-50% - 13px))scale(.72)}.login-veld input:focus+label{color:var(--color-accent-soft)}.login-oog{color:#ebebf58c;width:44px;height:44px;transition:color .15s ease, background-color .15s ease, transform .15s var(--l-veer);border-radius:10px;flex:none;place-items:center;margin-right:7px;display:grid}@media (hover:hover){.login-oog:hover{color:var(--color-fg);background:#ffffff0f}}.login-oog:active{transform:scale(.92)}.login-oog:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.login-melding{opacity:0;transition:grid-template-rows .24s var(--l-ease), opacity .2s ease, margin .24s var(--l-ease);grid-template-rows:0fr;margin-top:0;display:grid}.login-melding[data-open=ja]{opacity:1;grid-template-rows:1fr;margin-top:14px}.login-melding>div{overflow:hidden}.login-melding-inhoud{color:var(--color-fg);background:#ff453a1a;border-radius:12px;align-items:flex-start;gap:10px;padding:11px 13px;font-size:14px;line-height:1.4;display:flex;box-shadow:inset 0 0 0 1px #ff453a47}.login-melding-inhoud svg{color:var(--color-danger-soft);flex:none;margin-top:1px}.login-melding-inhoud[data-soort=wacht]{background:#ff9f0a1a;box-shadow:inset 0 0 0 1px #ff9f0a4d}.login-melding-inhoud[data-soort=wacht] svg{color:var(--color-warning-soft)}.login-teller{font-variant-numeric:tabular-nums;font-weight:600}.login-knop{letter-spacing:-.01em;color:#fff;background:linear-gradient(180deg, color-mix(in srgb, white 10%, var(--color-accent-strong)), var(--color-accent-strong) 55%, color-mix(in srgb, black 6%, var(--color-accent-strong)));width:100%;height:54px;box-shadow:inset 0 1px 0 #ffffff47, inset 0 -1px 0 #0003, 0 10px 28px -10px color-mix(in srgb, var(--color-accent-strong) 85%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-accent-strong) 60%, black);transition:transform .18s var(--l-veer), box-shadow .2s ease, filter .2s ease, opacity .2s ease;border-radius:14px;justify-content:center;align-items:center;gap:10px;margin-top:18px;font-size:16px;font-weight:600;display:flex;position:relative;overflow:hidden}.login-knop:before{content:"";transition:transform .7s var(--l-ease);background:linear-gradient(105deg,#0000 35%,#ffffff2e 50%,#0000 65%);position:absolute;inset:0;transform:translate(-100%)}@media (hover:hover){.login-knop:hover:not(:disabled):before{transform:translate(100%)}.login-knop:hover:not(:disabled){filter:brightness(1.06);box-shadow:inset 0 1px 0 #ffffff4d, inset 0 -1px 0 #0003, 0 14px 34px -10px color-mix(in srgb, var(--color-accent-strong) 95%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-accent-strong) 60%, black)}.login-knop:hover:not(:disabled) .login-pijl{transform:translate(3px)}}.login-knop:active:not(:disabled){filter:brightness(.94);transform:scale(.975)}.login-knop:focus-visible{outline:2px solid var(--color-accent-soft);outline-offset:3px}.login-knop:disabled{cursor:default}.login-knop[data-wacht=ja]{opacity:.5}.login-knop[aria-busy=true]{filter:brightness(.96)}.login-pijl{transition:transform .2s var(--l-veer)}.login-knop .spinner{border-color:#fff #ffffff59 #ffffff59;width:16px;height:16px}.login-voet{letter-spacing:.02em;color:#ebebf561;justify-content:center;align-items:center;gap:6px;margin-top:28px;font-size:12px;display:flex}.login-in{animation:login-in .7s var(--l-ease) both}.login-in-2{animation-delay:80ms}.login-in-3{animation-delay:.16s}.login-in-4{animation-delay:.26s}@keyframes login-in{0%{opacity:0;transform:translateY(10px)scale(.985)}}.login[data-staat=gelukt] .login-kaart{opacity:0;filter:blur(4px);transform:translateY(-6px)scale(.97)}.login[data-staat=gelukt] .login-halo{opacity:1;transition:transform .42s var(--l-ease), opacity .42s var(--l-ease);animation:none;transform:scale(1.35)}.login[data-staat=gelukt] .login-voet{opacity:0;transition:opacity .2s}@media (max-width:480px){.login-teken{width:92px;height:92px;margin-bottom:18px}.login-merk{margin-bottom:26px}.login-kaart{border-radius:22px;padding:22px 18px 20px}}@media (max-height:640px){.login-merk{margin-bottom:18px}.login-teken{width:72px;height:72px;margin-bottom:12px}}@media (prefers-reduced-motion:reduce){.login-aurora>span,.login-halo,.login-glans:before,.login-in{animation:none!important}.login-glans{display:none}.login-kaart[data-schud=ja]{animation:none!important}.login-knop:before{display:none}}