.telefoon{--tf-b:calc(var(--spacing) * 22);--tf-h:calc(var(--spacing) * 37);width:var(--tf-b);padding-bottom:calc(var(--spacing) * 3);--tf-ronde:7s;justify-items:center;margin-inline:auto;display:grid;position:relative}@property --glans{syntax:"<percentage>";inherits:true;initial-value:50%}.telefoon-zweef{perspective:520px}.telefoon-op,.telefoon-zwaai{transform-style:preserve-3d}.telefoon-laag{border-radius:calc(var(--spacing) * 4.5);background:color-mix(in srgb, var(--color-echo) calc(16% + var(--z) * 4%), var(--color-surface));border:1px solid color-mix(in srgb, var(--color-echo) 35%, var(--color-border));transform:translateZ(calc(var(--z) * -1.2px));position:absolute;inset:0}.dark .telefoon-laag{background:color-mix(in srgb, var(--color-echo) calc(12% + var(--z) * 3%), var(--color-canvas))}.telefoon-kantel{transform-style:preserve-3d;position:relative}.telefoon-ring-burst{border-radius:inherit;border:2px solid var(--color-echo);opacity:0;pointer-events:none;position:absolute;inset:-2px}.telefoon-glans{pointer-events:none;background:linear-gradient(115deg, transparent calc(var(--glans) - 28%), #ffffff57 var(--glans), transparent calc(var(--glans) + 22%));mix-blend-mode:soft-light;opacity:.9;position:absolute;inset:0;overflow:hidden}.dark .telefoon-glans{background:linear-gradient(115deg, transparent calc(var(--glans) - 28%), #ffffff24 var(--glans), transparent calc(var(--glans) + 22%));mix-blend-mode:normal}.telefoon-lijf{width:var(--tf-b);height:var(--tf-h);border-radius:calc(var(--spacing) * 4.5);padding:calc(var(--spacing) * 1.5);background:linear-gradient(160deg, color-mix(in srgb, var(--color-surface) 92%, var(--color-echo)) 0%, color-mix(in srgb, var(--color-surface) 70%, transparent) 100%);border:1px solid color-mix(in srgb, var(--color-echo) 28%, var(--color-border));box-shadow:inset 0 1px 0 #ffffff8c, 0 14px 34px -14px color-mix(in srgb, var(--color-echo) 55%, transparent);transition:border-color .32s,box-shadow .42s;position:relative;transform:translateZ(.5px)}.dark .telefoon-lijf{box-shadow:inset 0 1px 0 #ffffff1a, 0 14px 34px -12px color-mix(in srgb, var(--color-echo) 60%, transparent)}.telefoon-notch{top:calc(var(--spacing) * 2.5);width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 1.25);background:color-mix(in srgb, var(--color-text) 16%, transparent);z-index:1;border-radius:9999px;position:absolute;left:50%;translate:-50%}.telefoon-scherm{border-radius:calc(var(--spacing) * 3.25);justify-content:center;gap:calc(var(--spacing) * 2.5);height:100%;padding-inline:calc(var(--spacing) * 1.5);background:radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--color-echo) 16%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--color-canvas) 88%, var(--color-echo));flex-direction:column;display:flex;position:relative;overflow:hidden}.telefoon-app{align-items:center;gap:calc(var(--spacing) * 1.25);display:flex}.telefoon-merk{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5);border-radius:calc(var(--spacing) * .75);background:var(--color-echo);flex:none}.telefoon-regel{height:calc(var(--spacing) * 1);background:color-mix(in srgb, var(--color-text) 16%, transparent);border-radius:9999px;flex:1}.telefoon-regel-kort{opacity:.7;flex:none;width:55%;margin-inline:auto}.telefoon-ring{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5);flex:none;rotate:-90deg}.telefoon-ring circle{fill:none;stroke-width:3px}.telefoon-ring-baan{stroke:color-mix(in srgb, var(--color-text) 14%, transparent)}.telefoon-ring-tijd{stroke:var(--color-echo-text);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:.35px}.telefoon-code{grid-template-columns:repeat(3, 1fr) calc(var(--spacing) * .5) repeat(3, 1fr);gap:calc(var(--spacing) * .5);height:calc(var(--spacing) * 4);align-items:center;display:grid;position:relative}.telefoon-cijfer{height:calc(var(--spacing) * 4);border-radius:calc(var(--spacing) * .75);background:color-mix(in srgb, var(--color-text) 14%, transparent);transition:background-color .22s,box-shadow .22s,scale .26s cubic-bezier(.2,.9,.3,1.3),opacity .22s;position:relative}.telefoon-cijfer:nth-child(4){grid-column:5}.telefoon-cijfer[data-aan]{background:var(--color-echo);box-shadow:0 0 calc(var(--spacing) * 2) -2px color-mix(in srgb, var(--color-echo) 80%, transparent)}.telefoon-vink{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);opacity:0;margin:auto;position:absolute;inset:0}.telefoon-vink path{fill:none;stroke:var(--color-echo-text);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px}.telefoon-schaduw{width:70%;height:calc(var(--spacing) * 2);background:radial-gradient(closest-side, color-mix(in srgb, var(--color-echo) 30%, transparent), transparent);border-radius:50%;position:absolute;bottom:0}.telefoon-flits{inset:calc(var(--spacing) * -5);pointer-events:none;opacity:0;background:radial-gradient(closest-side, color-mix(in srgb, var(--flits-kleur,var(--color-danger)) 55%, transparent) 60%, transparent 100%);position:absolute;transform:translateZ(-8px)}.telefoon[data-stand=verified] .telefoon-ring-tijd{stroke-dashoffset:0;animation:none}.telefoon[data-stand=verified] .telefoon-ring{opacity:0;transition:opacity .32s}.telefoon[data-stand=verified] .telefoon-cijfer{opacity:0;scale:.4}.telefoon[data-stand=verified] .telefoon-vink{opacity:1}.telefoon[data-stand=verified] .telefoon-vink path{stroke-dashoffset:0;stroke:color-mix(in srgb, var(--color-success) 80%, var(--color-text))}.telefoon[data-stand=verified] .telefoon-ring-burst{border-color:var(--color-success)}.telefoon[data-stand=verified] .telefoon-flits{--flits-kleur:var(--color-success)}@media (prefers-reduced-motion:no-preference){.telefoon{animation:telefoon-dek .36s ease-out var(--deur-kaart-in,.95s) both}.telefoon-op{animation:telefoon-op .76s cubic-bezier(.16, 1, .3, 1) var(--deur-kaart-in,.95s) both}.telefoon-zwaai{animation:8s ease-in-out 1.8s infinite alternate both telefoon-zwaai}.telefoon-scherm>:not(.telefoon-glans){animation:.42s ease-out both telefoon-scherm-aan}.telefoon-app{animation-delay:calc(var(--deur-kaart-in,.95s) + .5s)!important}.telefoon-code{animation-delay:calc(var(--deur-kaart-in,.95s) + .58s)!important}.telefoon-regel-kort{animation-delay:calc(var(--deur-kaart-in,.95s) + .66s)!important}.telefoon-glans:after{content:"";background:linear-gradient(105deg,#0000 38%,#ffffff73 50%,#0000 62%);animation:6.5s cubic-bezier(.45,0,.3,1) 1.8s infinite both telefoon-veeg;position:absolute;inset:-20% 0}.telefoon-cijfer[data-aan]:after{content:"";border-radius:inherit;border:1.5px solid var(--color-echo);pointer-events:none;animation:.52s ease-out both telefoon-rimpel;position:absolute;inset:-2px}.telefoon[data-stand=verified] .telefoon-ring-burst{animation:.9s cubic-bezier(.2,.7,.3,1) .12s both telefoon-burst}.telefoon-zweef{animation:4.4s ease-in-out infinite telefoon-zweef}.telefoon-schaduw{animation:4.4s ease-in-out infinite telefoon-schaduw}.telefoon-ring-tijd{animation:telefoon-aftel var(--tf-ronde) linear both}.telefoon[data-nieuw]:is([data-stand=idle],[data-stand=invalid]) .telefoon-cijfer:not([data-aan]){animation:.52s ease-in-out both telefoon-nieuwe-code;animation-delay:calc(var(--i) * 55ms)}.telefoon-cijfer[data-aan]{animation:.28s cubic-bezier(.2,.9,.3,1.3) telefoon-cijfer-aan}.telefoon[data-stand=busy] .telefoon-cijfer{animation:.9s ease-in-out infinite telefoon-golf;animation-delay:calc(var(--i) * 90ms)}.telefoon[data-stand=invalid] .telefoon-zweef{animation:.44s cubic-bezier(.36,.07,.19,.97) both telefoon-nee}.telefoon[data-stand=invalid] .telefoon-flits{animation:.9s ease-out both telefoon-flits}.telefoon[data-stand=verified] .telefoon-flits{animation:1.1s ease-out .12s both telefoon-flits}.telefoon[data-stand=verified] .telefoon-cijfer{transition-delay:calc(var(--i) * 30ms)}.telefoon[data-stand=verified] .telefoon-vink{transition:opacity .16s .18s}.telefoon[data-stand=verified] .telefoon-vink path{transition:stroke-dashoffset .36s cubic-bezier(.65,0,.35,1) .2s}.telefoon[data-stand=verified] .telefoon-zweef{animation:.62s cubic-bezier(.2,.9,.3,1.2) both telefoon-gelukt}}@keyframes telefoon-zweef{0%,to{translate:0;rotate:-1.5deg}50%{translate:0 calc(var(--spacing) * -1.5);rotate:1.5deg}}@keyframes telefoon-schaduw{0%,to{opacity:1;scale:1}50%{opacity:.65;scale:.82}}@keyframes telefoon-aftel{0%{stroke-dashoffset:0}to{stroke-dashoffset:-1px}}@keyframes telefoon-cijfer-aan{0%{scale:.6}60%{scale:1.12}to{scale:1}}@keyframes telefoon-golf{0%,to{opacity:1;translate:0}40%{translate:0 calc(var(--spacing) * -.75);opacity:.6}}@keyframes telefoon-nee{0%,to{translate:0}18%{translate:-5px}40%{translate:5px}62%{translate:-2.5px}82%{translate:1px}}@keyframes telefoon-gelukt{0%{translate:0;scale:1}35%{scale:1.07;translate:0 calc(var(--spacing) * -2.5)}70%{scale:.99;translate:0 calc(var(--spacing) * .5)}to{translate:0;scale:1}}@keyframes telefoon-flits{0%{opacity:0}18%{opacity:1}to{opacity:0}}@keyframes telefoon-dek{0%{opacity:0}to{opacity:1}}@keyframes telefoon-op{0%{transform:translateY(calc(var(--spacing) * 3)) rotateY(-70deg) scale(.92)}to{transform:none}}@keyframes telefoon-zwaai{0%{--glans:30%;transform:rotateY(-9deg)rotateX(3deg)}to{--glans:70%;transform:rotateY(9deg)rotateX(-2deg)}}@keyframes telefoon-scherm-aan{0%{opacity:0;translate:0 3px}to{opacity:1;translate:0}}@keyframes telefoon-veeg{0%,62%{translate:-130%}to{translate:130%}}@keyframes telefoon-nieuwe-code{0%{transform:rotateX(0)}45%{background-color:color-mix(in srgb, var(--color-echo) 25%, transparent);transform:rotateX(90deg)}70%{background-color:color-mix(in srgb, var(--color-echo) 50%, transparent);transform:rotateX(0)}to{transform:rotateX(0)}}@keyframes telefoon-rimpel{0%{opacity:.9;scale:1}to{opacity:0;scale:1.9}}@keyframes telefoon-burst{0%{opacity:.8;scale:1}to{opacity:0;scale:1.45}}