.hero{--auftritt: cubic-bezier(.16, 1, .3, 1);position:sticky;top:0;perspective:1200px;perspective-origin:30% 40%}.js .hero__media,.js .hero__sig,.js .hero__count,.js .hero__scroll,.js .hero__cta,.js .mt-band--hero,.js .hero__zweit,.js .vertical{opacity:0}.hero__media{--freilegen: 100%;transform:translate3d(var(--hero-x, 0px),var(--hero-y, 0px),0)}.hero__media img,.hero__media>.platzhalter{clip-path:inset(0 0 var(--freilegen) 0);transform:scale(1.08)}.hero.gestartet .hero__media{opacity:1;transition:opacity .5s ease .15s}.hero.gestartet .hero__media img,.hero.gestartet .hero__media>.platzhalter{--freilegen: 0%;transform:scale(1);transition:clip-path 1.5s var(--auftritt) .15s,transform 2.2s var(--auftritt) .15s}.hero__title{transform:translate3d(var(--hero-x, 0px),var(--hero-y, 0px),0)}.zeile>span{transform:translateY(104%) rotateX(-38deg);transform-origin:50% 0%}.hero.gestartet .zeile>span{transform:translateY(0) rotateX(0);transition:transform .8s var(--auftritt);transition-delay:var(--verzug, .95s)}.hero.gestartet .zeile.row2>span{--verzug: 1.75s}.hero__ansage{margin:0 0 -2rem .5em;color:var(--gruen);font-size:clamp(.84rem,1.35vw,1.08rem);letter-spacing:.3em;text-transform:uppercase;position:relative;z-index:2;transform:translate3d(var(--hero-x, 0px),var(--hero-y, 0px),0);-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--tinte, 0%) - 12%),transparent var(--tinte, 0%));mask-image:linear-gradient(90deg,#000 calc(var(--tinte, 0%) - 12%),transparent var(--tinte, 0%));--tinte: 0%}.hero.gestartet .hero__ansage{--tinte: 112%;transition:--tinte 1.25s cubic-bezier(.25,.8,.3,1) .45s}.hero__sig{--tinte: 0%;transform:rotate(var(--neigung, -7deg)) skewY(var(--scherung, -6deg)) translate3d(var(--hero-x, 0px),calc(var(--hero-y, 0px) + var(--verzug-y, .06em)),0)}.hero.gestartet .hero__sig{opacity:1;transition:opacity .3s ease 1.1s}.hero__sig>span{display:block;-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--tinte, 0%) - 9%),transparent var(--tinte, 0%));mask-image:linear-gradient(90deg,#000 calc(var(--tinte, 0%) - 9%),transparent var(--tinte, 0%));--tinte: 0%}.hero.gestartet .hero__sig>.hero__zeile2{--tinte: 109%;transition:--tinte 1.05s cubic-bezier(.3,.1,.2,1) 2.6s}@property --tinte{syntax: "<percentage>"; inherits: false; initial-value: 0%;}.hero.gestartet .hero__count,.hero.gestartet .hero__scroll,.hero.gestartet .hero__cta,.hero.gestartet .mt-band--hero,.hero.gestartet .hero__zweit,.hero.gestartet .vertical{opacity:1;transition:opacity .9s ease 3.25s}.hero.gestartet .hero__media img{animation:atmen 22s ease-in-out 2.4s infinite}@keyframes atmen{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.04) translateY(-.6%)}}.hero__watermark{transform:translate3d(calc(-50% + var(--hero-x, 0px)),calc(-50% + var(--hero-y, 0px)),0)}.hero__title,.hero__ansage,.hero__sig{will-change:transform}.hero.faehrt .hero__ansage{transform:translate3d(var(--hero-x, 0px),calc(var(--hero-y, 0px) - var(--fortschritt, 0) * 130px),0);opacity:calc(1 - var(--fortschritt, 0) * 1.7)}.hero.faehrt .hero__title{transform:translate3d(var(--hero-x, 0px),calc(var(--hero-y, 0px) - var(--fortschritt, 0) * 130px),0);opacity:calc(1 - var(--fortschritt, 0) * 1.6)}.hero.faehrt .hero__sig{--tinte: calc(108% - var(--fortschritt, 0) * 128%);transform:rotate(var(--neigung, -7deg)) skewY(var(--scherung, -6deg)) translate3d(var(--hero-x, 0px),calc(var(--hero-y, 0px) + var(--verzug-y, .06em) - var(--fortschritt, 0) * 46px),0);opacity:calc(1 - var(--fortschritt, 0) * 1.15)}.hero.bereit .hero__sig{transition:none}.hero.faehrt .hero__scroll,.hero.faehrt .hero__count,.hero.faehrt .hero__cta,.hero.faehrt .mt-band--hero,.hero.faehrt .hero__zweit,.hero.faehrt .vertical{opacity:calc(1 - var(--fortschritt, 0) * 2.4)}.hero__count .jetzt{display:inline-block;transition:transform .4s var(--auftritt),color .3s ease}.hero__count.wechselt .jetzt{transform:translateY(-100%);opacity:0}@media(max-width:62rem){.hero{perspective:800px}.zeile>span{transform:translateY(104%) rotateX(-22deg)}.hero.gestartet .hero__media img{animation-duration:26s}}@media(prefers-reduced-motion:reduce){.js .hero__media,.js .hero__sig,.js .hero__ansage,.js .hero__count,.js .hero__scroll,.js .hero__cta,.js .mt-band--hero,.js .vertical{opacity:1}.hero__media img,.hero__media>.platzhalter{clip-path:none!important;transform:none!important;animation:none!important}.zeile>span{transform:none!important}.hero__sig,.hero__sig>span,.hero__ansage{-webkit-mask-image:none!important;mask-image:none!important}.hero__sig:after{display:none}.hero.faehrt .hero__ansage,.hero.faehrt .hero__title,.hero.faehrt .hero__sig{transform:none!important;opacity:1!important}.hero.faehrt .hero__scroll,.hero.faehrt .hero__count,.hero.faehrt .hero__cta,.hero.faehrt .mt-band--hero,.hero.faehrt .vertical{opacity:1!important}}.hero__hand--1{display:block;height:100%}.hero__hand--2{position:absolute;inset:0;display:block}.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% center;display:block}@media(max-width:62rem){.hero__media img{object-position:72% center}}@media(max-height:30rem)and (orientation:landscape){.hero__media img{object-position:68% 62%}}.tropfen{position:relative;display:block;width:1px;height:2.4rem;margin:0 auto;background:linear-gradient(transparent,var(--line) 30%,transparent)}.tropfen i{position:absolute;left:50%;top:0;width:4px;height:4px;margin-left:-2px;border-radius:50% 50% 55% 55%;background:var(--acid);animation:tropfenFaellt 3.2s cubic-bezier(.55,0,.85,.3) infinite}@keyframes tropfenFaellt{0%{transform:translateY(0) scale(.6);opacity:0}12%{transform:translateY(0) scale(1);opacity:1}28%{transform:translateY(.15rem) scaleY(1.35) scaleX(.85);opacity:1}62%{transform:translateY(2rem) scaleY(1.1) scaleX(.95);opacity:1}78%,to{transform:translateY(2.4rem) scale(.5);opacity:0}}.hero__scroll:hover .tropfen i{animation-duration:1.6s}.hero__scroll.faellt .tropfen i{animation:tropfenLoest .58s cubic-bezier(.45,0,.85,.35) forwards}@keyframes tropfenLoest{0%{transform:translateY(0) scale(1);opacity:1}70%{transform:translateY(2.1rem) scale(.85,1.3);opacity:1}to{transform:translateY(2.8rem) scale(.4,1.6);opacity:0}}.hero__scroll.faellt .hero__scroll-text{animation:hinweisSinkt .58s var(--ease)}@keyframes hinweisSinkt{0%{transform:translateY(0);opacity:1}45%{transform:translateY(4px);opacity:.45}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.hero__scroll.faellt .tropfen i,.hero__scroll.faellt .hero__scroll-text{animation:none}}@media(prefers-reduced-motion:reduce){.tropfen i{animation:none!important;opacity:1;transform:translateY(.6rem)}}.nagel:hover .nagel__lack,.nagel:hover .nagel__form,.nagel:hover .nagel__kontur,.nagel:hover .nagel__ader,.nagel:hover .nagel__tropfen,.nagel:hover .nagel__lackschrift,.partikel{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6;opacity:calc(1 - var(--fortschritt, 0) * 1.4)}.partikel span{position:absolute;left:var(--x);bottom:var(--y);width:var(--gr);height:var(--gr);border-radius:50%;background:var(--gruen);opacity:0;will-change:transform;animation-duration:var(--dauer);animation-delay:var(--verzug);animation-timing-function:ease-in-out;animation-iteration-count:infinite}.partikel .p0{animation-name:schwebenFern}.partikel .p1{animation-name:schweben}.partikel .p2{animation-name:schwebenNah;width:calc(var(--gr) * 3);height:calc(var(--gr) * 3);background:radial-gradient(circle,var(--gruen-hell) 0%,var(--gruen) 22%,rgba(53,160,106,.35) 38%,rgba(53,160,106,0) 70%)}@keyframes schwebenFern{0%{transform:translateZ(0);opacity:0}20%{opacity:.22}80%{opacity:.12}to{transform:translate3d(5px,-38px,0);opacity:0}}@keyframes schweben{0%{transform:translateZ(0);opacity:0}18%{opacity:.42}82%{opacity:.2}to{transform:translate3d(11px,-70px,0);opacity:0}}@keyframes schwebenNah{0%{transform:translateZ(0);opacity:0}15%{opacity:.75}85%{opacity:.32}to{transform:translate3d(20px,-115px,0);opacity:0}}@media(max-width:62rem){.partikel .p0:nth-child(3n){display:none}.partikel .p2{width:calc(var(--gr) * 2);height:calc(var(--gr) * 2)}}@media(prefers-reduced-motion:reduce){.partikel{display:none}}.hero.hand-bereit .hero__hand--1{opacity:clamp(0,calc(1 - (var(--tausch, 0) - .55) / .3),1)}.hero__hand--2{opacity:0}.hero.hand-bereit .hero__hand--2{opacity:clamp(0,calc((var(--tausch, 0) - .12) / .5),1);will-change:opacity}.hero.hand-weich .hero__hand--1,.hero.hand-weich .hero__hand--2{transition:opacity .3s linear}@media(prefers-reduced-motion:reduce){.hero.hand-bereit .hero__hand--1,.hero.hand-bereit .hero__hand--2{transition:none}}
