.referenz-detail{position:absolute;width:190px;height:155px;z-index:1;pointer-events:none;fill:none;stroke:#727767;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.referenz-detail .detail-linie{stroke-dasharray:1;stroke-dashoffset:1}
.referenz-detail .detail-pousse{opacity:0;transform:translateY(8px);transform-box:fill-box;transform-origin:center bottom}
.referenz-detail.spielt .detail-linie{animation:ref-zeichnen 1.6s ease forwards}
.referenz-detail.spielt .detail-pousse{animation:ref-wachsen .8s ease var(--d,0s) forwards}
.referenz-detail.spielt .detail-samen{animation:ref-fliegen 3.5s ease-in-out var(--d,1s) forwards}
@keyframes ref-zeichnen{to{stroke-dashoffset:0}}
@keyframes ref-wachsen{to{opacity:1;transform:translateY(0)}}
@keyframes ref-fliegen{0%,15%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(8deg)}}
.referenz-detail.ruhig .detail-linie{stroke-dashoffset:0}.referenz-detail.ruhig .detail-pousse{opacity:1;transform:none}
@media(max-width:700px){.referenzweg{gap:112px;padding-bottom:115px}.referenz-detail{width:115px;height:94px}}
@media(prefers-reduced-motion:reduce){.referenz-detail *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important}}

.detail-cut-reveal{transform:scaleX(0);transform-origin:18px 35px}
.detail-cut-head{opacity:0}
.spielt .detail-cut-reveal{animation:ref-cut-reveal 2.4s ease .2s forwards}
.spielt .detail-cut-head{animation:ref-cut-head 2.4s ease .2s forwards}
@keyframes ref-cut-reveal{to{transform:scaleX(1)}}
@keyframes ref-cut-head{0%{opacity:0;transform:translateX(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(154px)}}
.ruhig .detail-cut-reveal{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.detail-cut-head{display:none}}

.paneelweg .detail-fall{opacity:0}
.paneelweg .spielt .detail-fall{animation:ref-fallen 4s ease-in var(--delay,0s) both}
.paneelweg .detail-fall .detail-linie{stroke-dashoffset:0;animation:none}
@keyframes ref-fallen{0%{opacity:0;transform:translate(0,-18px) rotate(0)}15%{opacity:.9}75%{opacity:.8}100%{opacity:0;transform:translate(var(--sway),72px) rotate(var(--turn))}}
@media(prefers-reduced-motion:reduce){.paneelweg .detail-fall{opacity:.7!important;animation:none!important;transform:none!important}}

.paneelweg .detail-fall{transform-box:fill-box;transform-origin:center;backface-visibility:visible}
.paneelweg .spielt .detail-fall{animation-name:ref-segeln;animation-duration:5.4s;animation-timing-function:linear}
@keyframes ref-segeln{
0%{opacity:0;transform:perspective(350px) translate3d(0,-18px,0) rotateX(12deg) rotateY(-20deg) rotateZ(-8deg)}
12%{opacity:.85;transform:perspective(350px) translate3d(10px,-5px,3px) rotateX(30deg) rotateY(35deg) rotateZ(12deg)}
32%{opacity:.9;transform:perspective(350px) translate3d(-12px,15px,8px) rotateX(-20deg) rotateY(95deg) rotateZ(-18deg)}
53%{opacity:.85;transform:perspective(350px) translate3d(15px,36px,0) rotateX(32deg) rotateY(165deg) rotateZ(20deg)}
75%{opacity:.8;transform:perspective(350px) translate3d(-8px,56px,-5px) rotateX(-26deg) rotateY(240deg) rotateZ(-12deg)}
100%{opacity:0;transform:perspective(350px) translate3d(var(--sway),80px,0) rotateX(15deg) rotateY(320deg) rotateZ(var(--turn))}}
@media(prefers-reduced-motion:reduce){.paneelweg .spielt .detail-fall{animation:none!important;transform:none!important}}

.paneelweg .detail-rechtecke.spielt .detail-fall{animation-name:ref-rechteck-fall}
@keyframes ref-rechteck-fall{0%{opacity:0;transform:translateY(-18px)}15%{opacity:.85}80%{opacity:.8}100%{opacity:0;transform:translateY(80px)}}

.paneelweg .detail-rechtecke.mit-kollision .detail-fall{animation:none!important;transform-origin:center}

.detail-facette{opacity:0;fill:var(--bg,#f4f1ea);transform:translate(var(--sx),var(--sy))}
.spielt .detail-facette{animation:ref-facette 1.1s ease var(--delay) forwards}
@keyframes ref-facette{to{opacity:1;transform:translate(0,0)}}
.ruhig .detail-facette{opacity:1;transform:none}

.paneelweg .spielt:not(.detail-rechtecke) .detail-fall{animation-name:ref-segeln-ruhig;animation-duration:9s;animation-timing-function:ease-in-out;animation-delay:calc(var(--delay,0s)*1.7)}
@keyframes ref-segeln-ruhig{
0%{opacity:0;transform:perspective(400px) translate3d(0,-15px,0) rotateY(-15deg) rotateZ(-5deg)}
15%{opacity:.75}
35%{transform:perspective(400px) translate3d(7px,18px,0) rotateX(10deg) rotateY(55deg) rotateZ(8deg)}
65%{opacity:.75;transform:perspective(400px) translate3d(-6px,48px,0) rotateX(-8deg) rotateY(115deg) rotateZ(-7deg)}
100%{opacity:0;transform:perspective(400px) translate3d(5px,80px,0) rotateX(5deg) rotateY(170deg) rotateZ(5deg)}}

.paneelweg .referenz-detail:not(.detail-rechtecke){stroke:#46543b;stroke-width:2.3}

.paneelweg .spielt:not(.detail-rechtecke) .detail-fall{animation-name:ref-segeln-pause;animation-duration:12s;animation-iteration-count:infinite}
@keyframes ref-segeln-pause{
0%{opacity:0;transform:perspective(400px) translate3d(0,-15px,0) rotateY(-15deg) rotateZ(-5deg)}
11%{opacity:.75}
26%{transform:perspective(400px) translate3d(7px,18px,0) rotateX(10deg) rotateY(55deg) rotateZ(8deg)}
49%{opacity:.75;transform:perspective(400px) translate3d(-6px,48px,0) rotateX(-8deg) rotateY(115deg) rotateZ(-7deg)}
75%,100%{opacity:0;transform:perspective(400px) translate3d(5px,80px,0) rotateX(5deg) rotateY(170deg) rotateZ(5deg)}}