@property --kp{syntax:"<number>";inherits:false;initial-value:1}@property --wr{syntax:"<length>";inherits:false;initial-value:0}[data-video-fassade] .vf{background:var(--color-white);position:relative;overflow:hidden}[data-video-fassade] .vf__video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}[data-video-fassade] .vf__fassade{cursor:pointer;background:0 0;border:0;width:100%;height:100%;padding:0;display:block;position:absolute;inset:0}[data-video-fassade] .vf__fassade:focus-visible{outline:3px solid var(--color-primary);outline-offset:-3px}[data-video-fassade] .vf__play{aspect-ratio:1;pointer-events:none;justify-content:center;align-items:center;width:clamp(3.2rem,9.6vw,5.6rem);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}[data-video-fassade] .vf__play svg{width:100%;height:100%;fill:var(--color-white)}[data-video-fassade] .vf__play{opacity:1;transition:opacity var(--dur-base,.32s) var(--ease-out,ease)}[data-video-fassade] .vf.is-an .vf__play{opacity:0}@media (hover:hover) and (pointer:fine){[data-video-fassade] .vf__fassade{cursor:none}[data-video-fassade] .vf__play{display:none}}[data-video-fassade] .vf__zeiger{display:none}@media (hover:hover) and (pointer:fine){[data-video-fassade] .vf__zeiger{display:block}}[data-video-fassade] .vf__zeiger{pointer-events:none;will-change:transform;z-index:3;position:absolute;top:0;left:0}[data-video-fassade] .vf__zeigerknopf{transform:translate(-50%, -50%) scale(calc(var(--k,1) * var(--kp,1)));transition:--kp var(--dur-spring) var(--ease-spring);display:block}[data-video-fassade] .vf__zeigerblob{aspect-ratio:1;will-change:transform;width:clamp(2.8rem,7.2vw,4.4rem);display:block;position:relative}[data-video-fassade] .vf__zeigerblob svg{width:100%;height:100%;fill:var(--color-white);transition:opacity .18s,transform .18s;position:absolute;inset:0}[data-video-fassade] .vf__zeigerblob .ico-pause,[data-video-fassade] .vf.is-an .vf__zeigerblob .ico-play{opacity:0;transform:scale(.85)}[data-video-fassade] .vf.is-an .vf__zeigerblob .ico-pause{opacity:1;transform:scale(1)}[data-video-fassade] .vf.is-press .vf__zeigerknopf{--kp:.5;transition:--kp var(--dur-press) var(--ease-out)}[data-video-fassade] .vf.is-an.is-ruhe .vf__zeigerknopf{--kp:0;transition:--kp var(--dur-quick) var(--ease-out)}[data-video-fassade] .vf__welle{pointer-events:none;z-index:2;opacity:0;--wr:36px;-webkit-mask-image:radial-gradient(circle at var(--cx,50%) var(--cy,50%), transparent calc(var(--wr) - var(--rb-i,150px)), #000000d9 calc(var(--wr) - var(--rb-i2,46px)), #000 var(--wr), #0009 calc(var(--wr) + var(--rb-a2,58px)), transparent calc(var(--wr) + var(--rb-a,140px))), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -5.5'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");-webkit-mask-image:radial-gradient(circle at var(--cx,50%) var(--cy,50%), transparent calc(var(--wr) - var(--rb-i,150px)), #000000d9 calc(var(--wr) - var(--rb-i2,46px)), #000 var(--wr), #0009 calc(var(--wr) + var(--rb-a2,58px)), transparent calc(var(--wr) + var(--rb-a,140px))), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -5.5'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");mask-image:radial-gradient(circle at var(--cx,50%) var(--cy,50%), transparent calc(var(--wr) - var(--rb-i,150px)), #000000d9 calc(var(--wr) - var(--rb-i2,46px)), #000 var(--wr), #0009 calc(var(--wr) + var(--rb-a2,58px)), transparent calc(var(--wr) + var(--rb-a,140px))), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -5.5'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");-webkit-mask-composite:source-in;background:#fff;position:absolute;inset:0;-webkit-mask-size:100% 100%,84px 84px;mask-size:100% 100%,84px 84px;-webkit-mask-composite:source-in;mask-composite:intersect}[data-video-fassade] .vf.is-welle .vf__welle{animation:1.3s cubic-bezier(.32,.62,.5,1) forwards vf-welle,1.3s step-end vf-funkel}@keyframes vf-welle{0%{--wr:36px;opacity:0}5%{opacity:.5}55%{opacity:.26}80%{opacity:.09}to{--wr:var(--wr-max,1300px);opacity:0}}@keyframes vf-funkel{0%{-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0}10%{-webkit-mask-position:0 0,37px 19px;mask-position:0 0,37px 19px}20%{-webkit-mask-position:0 0,13px 44px;mask-position:0 0,13px 44px}30%{-webkit-mask-position:0 0,58px 8px;mask-position:0 0,58px 8px}40%{-webkit-mask-position:0 0,26px 31px;mask-position:0 0,26px 31px}50%{-webkit-mask-position:0 0,5px 12px;mask-position:0 0,5px 12px}60%{-webkit-mask-position:0 0,44px 52px;mask-position:0 0,44px 52px}70%{-webkit-mask-position:0 0,19px 3px;mask-position:0 0,19px 3px}80%{-webkit-mask-position:0 0,61px 28px;mask-position:0 0,61px 28px}90%{-webkit-mask-position:0 0,31px 47px;mask-position:0 0,31px 47px}}@media (prefers-reduced-motion:reduce){[data-video-fassade] .vf__zeigerknopf,[data-video-fassade] .vf__zeigerblob svg,[data-video-fassade] .vf__video{transition:none}[data-video-fassade] .vf.is-welle .vf__welle{animation:none}}.vf--hell .vf__play svg,.vf--hell .vf__zeigerblob svg{fill:var(--color-titel)}
