.main-advantages{--teaser-width: 360px;--scroll-stop: 100px;--cube-width: 40%;--top: 0;--rotate-x: 0deg;--rotate-y: 0deg;--rotate-z: 0deg;--scroll-delay: 0.1s;position:relative;display:block;min-height:200vh}.main-advantages .overview{--offset: calc(var(--pillar-1-scroll, 0) * -30%);margin-top:calc(var(--section-margin) - var(--container-padding));min-height:calc(100vh - var(--header-height));padding-bottom:var(--container-padding);transform:translateY(var(--offset))}.main-advantages .intro{font-size:var(--font-size-md);padding:var(--container-padding) var(--container-padding) 0;max-width:var(--intro-width)}@media(min-width: 1500px){.main-advantages .intro{margin-bottom:-20px}}.main-advantages .intro-headline{max-width:var(--intro-headline-width)}.main-advantages .kicker{margin-top:-0.2em}.main-advantages .observable{display:block}.main-advantages .teasers{position:relative;display:flex;margin:0 var(--container-padding);gap:calc(var(--grid-padding));flex-grow:1}.main-advantages .teasers[data-visible=true] .teaser{transform:translate3d(0, 0, 0);opacity:1;transition:.4s var(--ease-out-quad) var(--delay)}.main-advantages .teasers[data-visible=true] .observable{top:0}.main-advantages .teaser{position:relative;display:flex;align-items:flex-end;flex:1 1 100%;padding:1.6em;text-decoration:none;color:var(--color-white);transform:translate3d(0, 50%, 0);opacity:0;aspect-ratio:3/4;min-width:290px;max-width:360px;hyphens:auto;hyphenate-limit-chars:10 4 4}.main-advantages .teaser:nth-child(1){--delay: 0.1s}.main-advantages .teaser:nth-child(2){--delay: 0.2s}.main-advantages .teaser:nth-child(3){--delay: 0.3s}.main-advantages .teaser:nth-child(4){--delay: 0.4s}.main-advantages .teaser:nth-child(5){--delay: 0.5s}.main-advantages .teaser::before{content:"";position:absolute;right:20%;top:-50vh;bottom:-50vh;width:2px;background:linear-gradient(0deg, rgba(var(--color-dark-rgb), 0) 0%, rgba(var(--color-dark-rgb), 0.1) 30%, rgba(var(--color-dark-rgb), 0.1) 50%, rgba(var(--color-dark-rgb), 0) 100%)}.main-advantages .teaser::after{content:"";content:"";display:inline-block;vertical-align:text-top;background-color:var(--icon-color, var(--text-color));width:var(--icon-size, 1em);height:var(--icon-size, 1em);-webkit-mask-size:contain;mask-size:contain;-webkit-mask:var(--icon) no-repeat center;mask:var(--icon) no-repeat center;--icon: var(--icon-arrow-right);--icon-size: 30px;--icon-color: var(--color-white);position:absolute;right:0;top:0;margin:6%;transform:rotate(-45deg);transition:.3s ease;pointer-events:none}.main-advantages .teaser h3{font-size:var(--font-size-md);font-weight:600}.main-advantages .teaser .video-box{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;overflow:hidden;border-radius:var(--border-radius-md)}.main-advantages .teaser .video-box::before,.main-advantages .teaser .video-box::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity .2s ease}.main-advantages .teaser .video-box::before{mix-blend-mode:overlay;background-color:var(--color-white)}.main-advantages .teaser .video-box::after{mix-blend-mode:color;background-color:var(--color-neongreen)}.main-advantages .teaser:hover::after{margin:-7%}.main-advantages .teaser:hover .video-box::before{opacity:.7}.main-advantages .teaser:hover .video-box::after{opacity:1}.main-advantages .teaser video{display:block;width:100%;height:100%;object-fit:cover}.main-advantages .teaser .text-box{position:relative}.main-advantages .contents{padding:var(--container-padding) 0;min-height:250vh}.main-advantages .video-wrapper{--translate-z: calc(var(--width) / 2);--translate-back: calc(var(--width) / -2);position:sticky;top:calc(var(--header-height) + var(--container-padding));width:calc(var(--cube-width) - var(--container-padding));aspect-ratio:1;margin-left:var(--container-padding);perspective:2000px;transition:var(--scroll-delay) ease;z-index:1}.main-advantages .video-wrapper>.side-content{position:absolute;top:0;left:0;right:0;bottom:0}.main-advantages .video-wrapper:has(>.side-content) .cube-wrapper{opacity:0}.main-advantages .cube-wrapper{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;opacity:1;transform:translateZ(var(--translate-back));transition:transform var(--scroll-delay) ease}.main-advantages .cube-side{position:relative;display:block;width:100%}.main-advantages .side-content{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:var(--border-radius-md);overflow:hidden}.main-advantages .side-content img,.main-advantages .side-content .video-player{position:absolute;width:100%;height:100%;object-fit:cover}.main-advantages .side-content video{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease 0s,visibility 0s ease 0.3s,z-index .3s linear 0s,transform .3s ease 0s}.main-advantages video{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--border-radius-md)}.main-advantages .video-player{cursor:pointer}.main-advantages .video-player[data-playing=true] video{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease 0s,visibility 0s ease 0s,z-index .3s linear 0s,transform .3s ease 0s}.main-advantages .video-player[data-playing=true] .video-play{transform:translate3d(0, 0, 0) scale(0.8)}.main-advantages .show-video .video-controls{opacity:1}.main-advantages .video-controls{opacity:0;transition:.4s ease}.main-advantages[data-current="0"]{--rotate-x: calc(45deg - 45deg * var(--text-1-scroll));--rotate-y: calc(-45deg + 45deg * var(--text-1-scroll));--top: calc(30vh - 30vh * var(--text-1-scroll));--left: calc(-15vw + 15vw * var(--text-1-scroll))}.main-advantages[data-current="1"]{--rotate-x: calc(-90deg * var(--text-2-scroll));--rotate-y: calc(-90deg * var(--text-2-scroll));--left: calc(150% * var(--text-2-scroll) + var(--container-padding) * 0.5 * var(--text-2-scroll))}.main-advantages[data-current="2"]{--rotate-x: calc(-90deg * var(--text-3-scroll) - 90deg);--rotate-y: calc(var(--text-3-scroll) * 90deg - 90deg);--left: calc(150% + var(--container-padding) * 0.5 - 150% * var(--text-3-scroll) - var(--container-padding) * 0.5 * var(--text-3-scroll))}.main-advantages[data-current="0"] .cube-wrapper{top:var(--top)}@media(min-width: 1000px){.main-advantages .video-wrapper{transform:translateX(var(--left, 0))}}.main-advantages .video-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(var(--rotate-z));transition:var(--scroll-delay) ease}.main-advantages .video-cube::before,.main-advantages .video-cube::after{content:"";position:absolute;display:block;width:98%;height:98%;border-radius:var(--border-radius-md);pointer-events:none}.main-advantages .video-cube::after{transform:rotateX(90deg)}.main-advantages .video-cube .cube-side{position:absolute;display:block;width:100%;height:100%;border-radius:var(--border-radius-md);transform-style:preserve-3d}.main-advantages .video-cube .cube-side[data-index="0"]{transform:translateZ(var(--translate-z))}.main-advantages .video-cube .cube-side[data-index="1"]{transform:rotateY(-90deg) rotateZ(180deg) translateZ(var(--translate-z))}.main-advantages .video-cube .cube-side[data-index="2"]{transform:rotateX(90deg) rotateZ(270deg) translateZ(var(--translate-z))}.main-advantages .video-cube .cube-side[data-index="3"]{transform:rotateX(-90deg) rotateZ(90deg) translateZ(var(--translate-z))}.main-advantages .video-cube .cube-side[data-index="4"]{transform:translateZ(var(--translate-back)) rotateX(180deg)}.main-advantages .video-cube .cube-side[data-index="5"]{transform:rotateY(90deg) translateZ(var(--translate-z))}.main-advantages .video-cube video{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease 0s,visibility 0s ease 0.3s,z-index .3s linear 0s,transform .3s ease 0s}.main-advantages .scroll-tracker{position:absolute;top:0;height:60vh;width:10px;pointer-events:none}@media(min-width: 768px),(orientation: landscape){.main-advantages h2{min-width:12em}.main-advantages .text-wrapper{margin-top:-50vh}.main-advantages .text-content{position:relative;width:calc(100% - var(--cube-width));padding:6vw var(--container-padding) 12vw var(--container-padding);min-height:100vh;display:flex;flex-direction:column;justify-content:center;margin-left:auto;margin-bottom:20vh}.main-advantages .text-content:nth-child(2){margin-left:0}.main-advantages .text-content:last-child{margin-bottom:0}.main-advantages .text-content .button{margin-top:1em}.main-advantages .teasers{max-width:calc(600px + 30vw);margin-left:auto;margin-top:40px;justify-self:flex-end}}@media(min-width: 1580px){.main-advantages .teasers{max-width:calc(var(--teaser-width)*3 + var(--grid-padding)*2);margin-top:0}.main-advantages .text-content{padding-right:calc(var(--container-padding)*2)}}@media(max-width: 767px)and (orientation: portrait){.main-advantages{--left: 0}.main-advantages[data-current="0"]{--left: calc(-70vw + 70vw * var(--text-1-scroll))}.main-advantages[data-current="1"]{--left: calc(75% * var(--text-2-scroll))}.main-advantages[data-current="2"]{--left: calc(75% - 75% * var(--text-3-scroll))}.main-advantages .teasers{padding:var(--container-padding);margin:20px 0}.main-advantages .text-wrapper{position:relative;z-index:0;padding:0 var(--container-padding)}.main-advantages .text-content+.text-content{position:relative;margin-top:25vw}.main-advantages .video-wrapper{width:calc(50% - var(--container-padding)*2);margin-bottom:25vw;top:calc(var(--header-height) + var(--container-padding)*2);margin-top:var(--header-height)}.main-advantages .video-wrapper::before{content:"";position:sticky;display:block;top:var(--header-height);background:linear-gradient(0deg, rgba(var(--color-dark-rgb), 0), var(--color-dark));box-shadow:0 calc(var(--container-padding)*-1) 0 0 var(--color-dark);width:100vw;height:45vw;margin:calc(var(--container-padding)*-1)}.main-advantages .cube-wrapper{margin-top:-45vw}}@media(max-width: 999px)and (orientation: portrait){.main-advantages .teasers{overflow-x:auto;overflow-y:hidden;padding-bottom:calc(var(--container-padding) + 10px);margin-bottom:0;scroll-snap-type:x mandatory}.main-advantages .teasers::after{content:"";display:block;min-width:100px}.main-advantages .teaser{scroll-snap-align:center}.main-advantages .teaser::before{display:none}.main-advantages h3{font-size:var(--font-size-xxl)}}@media(max-width: 1199px){.main-advantages{--cube-width: 30%}}
