.login-stage{--tape-h:34px;isolation:isolate}.login-stage>*{z-index:1}.stage-glow{z-index:0;pointer-events:none;background:radial-gradient(640px circle at var(--px,28%) var(--py,58%), var(--color-kobalt-glow), transparent 62%);position:absolute;inset:0}.stage-grid{z-index:0;pointer-events:none;background-image:linear-gradient(var(--color-raster) 1px, transparent 1px), linear-gradient(90deg, var(--color-raster) 1px, transparent 1px);transform:translate3d(calc(var(--mx,0) * -14px), calc(var(--my,0) * -14px), 0);background-position:right 60px bottom 60px;background-size:30px 30px;position:absolute;inset:-60px}.stage-grid--lit{background-image:linear-gradient(var(--color-raster-hell) 1px, transparent 1px), linear-gradient(90deg, var(--color-raster-hell) 1px, transparent 1px);-webkit-mask-image:radial-gradient(240px circle at calc(var(--px,28%) + 60px) calc(var(--py,58%) + 60px), black, transparent 72%);-webkit-mask-image:radial-gradient(240px circle at calc(var(--px,28%) + 60px) calc(var(--py,58%) + 60px), black, transparent 72%);mask-image:radial-gradient(240px circle at calc(var(--px,28%) + 60px) calc(var(--py,58%) + 60px), black, transparent 72%);opacity:0;transition:opacity .5s}.login-stage[data-pointer] .stage-grid--lit{opacity:1}.stage-hairline{top:0;bottom:var(--tape-h);pointer-events:none;background:linear-gradient(transparent, var(--color-raster-hell) 30%, var(--color-kobalt-soft));width:1px;transform:translate3d(var(--px,0), 0, 0);opacity:0;transition:opacity .3s;position:absolute;left:0}.login-stage[data-pointer] .stage-hairline{opacity:1}.stage-copies{transform:translate3d(calc(var(--mx,0) * 10px), calc(var(--my,0) * 6px), 0);display:grid}.stage-copy{grid-area:1/1}.login-stage[data-step=code] .stage-copy--mail,.login-stage[data-step=mail] .stage-copy--code{opacity:0;visibility:hidden}.zollstock{--len:104px;pointer-events:none;width:0;height:0;transform:translate3d(calc(var(--mx,0) * -26px), calc(var(--my,0) * -18px), 0);position:absolute;top:184px;right:72px}@media (max-width:640px){.zollstock{display:none}}.glied{width:var(--len);border:1px solid var(--color-raster-hell);background:linear-gradient(90deg, var(--color-raster-hell) 0 1px, transparent 1px) 7px top / 10px 5px repeat-x;transform-origin:7px;height:14px;transform:rotate(var(--a));border-radius:2px;position:absolute;top:-7px;left:0}.glied .glied{left:calc(var(--len) - 14px);top:-1px}.glied-num{color:var(--color-raster-hell);font-size:7px;font-weight:700;line-height:1;position:absolute;bottom:1px;right:12px}.glied-niete{left:calc(var(--len) - 11px);background:var(--color-gelb);width:6px;height:6px;box-shadow:0 0 0 2px var(--color-nacht);border-radius:9999px;margin-top:-3px;position:absolute;top:50%}.lt,.lt-g{display:inline-block}.lt{position:relative}.rivet-dot{background:var(--color-gelb);width:.2em;height:.2em;box-shadow:0 0 0 .05em var(--color-gelb-glow);border-radius:9999px;margin-left:.05em;display:inline-block;position:relative}.rivet-dot:after{content:"";border:.025em solid var(--color-gelb);opacity:0;border-radius:9999px;position:absolute;inset:0}.tape-track{clip-path:inset(-28px 0 0);position:absolute;inset:0}.tape-roll{background-color:var(--color-gelb);background-image:linear-gradient(90deg, var(--color-strich-stark) 0 1.5px, transparent 1.5px), linear-gradient(90deg, transparent 15px, var(--color-strich) 15px 16px, transparent 16px), repeating-linear-gradient(90deg, var(--color-strich) 0 1px, transparent 1px 3px);will-change:transform;background-position:100% 0;background-repeat:repeat-x;background-size:30px 14px,30px 10px,30px 6px;position:absolute;inset:0}.tape-num{color:var(--color-nacht);font-feature-settings:"tnum" 1;font-size:10px;font-weight:700;line-height:1;position:absolute;top:15px;transform:translate(50%)}.tape-num--dm{background:var(--color-kobalt);color:var(--color-karte);border-radius:2px;padding:1px 2px}.tape-hook{width:6px;height:calc(var(--tape-h) + 7px);background:linear-gradient(90deg, var(--color-stahl), var(--color-text-hell));border-radius:2px 0 0;position:absolute;top:-7px;right:0}.tape-case{width:14px;height:calc(var(--tape-h) + 8px);background:var(--color-kobalt);box-shadow:inset -2px 0 0 var(--color-kobalt-hell);border-radius:0 6px 0 0;position:absolute;bottom:0;left:0}.tape-readout{pointer-events:none;opacity:0;transition:opacity .35s;position:absolute;bottom:calc(100% + 12px);left:0}.login-stage[data-measuring] .tape-readout,.login-stage[data-pointer] .tape-readout{opacity:1}.tape-readout-pill{background:var(--color-kobalt);color:var(--color-flaeche);letter-spacing:.04em;white-space:nowrap;font-feature-settings:"tnum" 1;border-radius:5px;padding:4px 8px;font-size:11px;font-weight:700;display:inline-block;position:relative;transform:translate(-50%)}.tape-readout-pill:after{content:"";background:var(--color-kobalt-soft);width:1px;height:12px;position:absolute;top:100%;left:50%}.field{position:relative}.field input{transition:border-color .2s,box-shadow .2s}.field input:hover{border-color:var(--color-kobalt-soft)}.field input:focus{border-color:var(--color-kobalt)}.field:after{content:"";background:linear-gradient(90deg, var(--color-kobalt) 0 1.5px, transparent 1.5px) left top / 30px 5px repeat-x, repeating-linear-gradient(90deg, var(--color-kobalt-soft) 0 1px, transparent 1px 6px) left top / 100% 3px no-repeat;transform-origin:0;pointer-events:none;height:5px;transition:transform .7s cubic-bezier(.16,1,.3,1);position:absolute;bottom:-8px;left:2px;right:2px;transform:scaleX(0)}.field:focus-within:after{transform:scaleX(1)}.btn-fx{isolation:isolate;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background-color .2s;position:relative;overflow:hidden}.btn-fx:after{content:"";z-index:-1;background:linear-gradient(105deg, transparent 35%, var(--color-glanz) 50%, transparent 65%);pointer-events:none;position:absolute;inset:0;transform:translate(-110%)}.btn-fx:not(:disabled):hover{box-shadow:0 12px 26px -12px var(--color-kobalt-schatten);transform:translateY(-1px)}.btn-fx:not(:disabled):active{box-shadow:none;transform:translateY(0)scale(.985)}.btn-fx .btn-arrow{transition:transform .3s cubic-bezier(.2,.8,.2,1)}.btn-fx:not(:disabled):hover .btn-arrow{transform:translate(3px)}.btn-fx:disabled:before{content:"";z-index:-1;background:linear-gradient(90deg, var(--color-glanz) 0 1.5px, transparent 1.5px) left bottom / 30px 6px repeat-x, repeating-linear-gradient(90deg, var(--color-glanz) 0 1px, transparent 1px 6px) left bottom / 30px 3px repeat-x;height:6px;position:absolute;bottom:0;left:0;right:0}@media (prefers-reduced-motion:no-preference){.stage-grid,.stage-glow{animation:1.6s cubic-bezier(.2,.8,.2,1) both stage-fade}.stage-grid--lit{animation:none}.stage-wordmark .display{animation:1.1s cubic-bezier(.16,1,.3,1) 60ms both wm-in;display:inline-block}.lt:before{content:"";background:var(--color-kobalt);clip-path:inset(100% 0 0);animation:lt-block .68s cubic-bezier(.76, 0, .24, 1) var(--d) both;position:absolute;inset:.06em -.015em .02em}.lt-g{animation:lt-ink .68s var(--d) both}.rivet-dot{animation:rivet-pop .76s cubic-bezier(.34, 1.9, .5, 1) var(--d) both}.rivet-dot:after{animation:rivet-ring 2.8s cubic-bezier(.2, .7, .3, 1) calc(var(--d) + .7s) infinite}.glied{animation:glied-auf .9s cubic-bezier(.65, 0, .2, 1) calc(var(--zd,.9s) + var(--gi) * .12s) both}.glied-niete{animation:rivet-pop .5s cubic-bezier(.34, 1.9, .5, 1) calc(var(--zd,.9s) + var(--gi) * .12s + .5s) both}.stage-sub{animation:.9s cubic-bezier(.16,1,.3,1) 1.05s both rise}.tape-roll{animation:2.1s .24s both tape-out}.tape-case{animation:.6s cubic-bezier(.16,1,.3,1) 80ms both case-in}.stage-copy{transition:opacity .18s ease-out,transform .18s cubic-bezier(.16,1,.3,1),visibility linear}.login-stage[data-step=code] .stage-copy--mail,.login-stage[data-step=mail] .stage-copy--code{transition:opacity .12s ease-in,transform .12s ease-in,visibility 0s linear .12s;transform:translateY(-8px)}.enter{animation:rise .64s cubic-bezier(.16, 1, .3, 1) calc(.14s + var(--s,0) * 70ms) both}.notice-in{animation:.52s cubic-bezier(.36,.07,.19,.97) .2s both notice-shake}.btn-fx:not(:disabled):hover:after{transition:transform .8s cubic-bezier(.2,.8,.2,1);transform:translate(110%)}.btn-fx:disabled:before{animation:.7s linear infinite tape-run}}@keyframes stage-fade{0%{opacity:0}}@keyframes wm-in{0%{opacity:0;letter-spacing:.7em;filter:blur(6px)}}@keyframes lt-block{0%{clip-path:inset(100% 0 0)}46%{clip-path:inset(0)}to{clip-path:inset(0 0 100%)}}@keyframes lt-ink{0%,46%{opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1);transform:translateY(.1em)}to{opacity:1;transform:none}}@keyframes glied-auf{0%{transform:rotate(var(--f));opacity:0}20%{opacity:1}}@keyframes rivet-pop{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes rivet-ring{0%{opacity:.9;transform:scale(1)}70%,to{opacity:0;transform:scale(3.2)}}@keyframes rise{0%{opacity:0;filter:blur(6px);transform:translateY(16px)}}@keyframes tape-out{0%{animation-timing-function:cubic-bezier(.7,0,.12,1);transform:translate(-100%)}82%{animation-timing-function:cubic-bezier(.45,0,.55,1);transform:translate(.9%)}to{transform:translate(0)}}@keyframes case-in{0%{transform:translate(-100%)}}@keyframes notice-shake{0%{opacity:0;transform:translate(0)}20%{opacity:1;transform:translate(-7px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}@keyframes tape-run{to{background-position:30px bottom,30px bottom}}.rivet-dot--still,.rivet-dot--still:after{animation:none!important}