/* Parallax-Ebene für die bestehende DESIGNWERK-Startseite.
   Nur ergänzend: nutzt die CSS-Eigenschaft `translate`, damit vorhandene
   `transform`-Animationen der Seite unberührt bleiben. */

[data-plx]{will-change:translate}

/* Hintergrund-Ebenen in den dunklen Abschnitten */
.plx-host{position:relative;overflow:hidden;isolation:isolate}
.plx-host>*:not(.plx-bg){position:relative;z-index:1}
.plx-bg{position:absolute;left:0;right:0;top:-22%;height:144%;z-index:0;pointer-events:none;
  background:var(--img) center/cover no-repeat;opacity:var(--o,.16);filter:saturate(.75)}
.plx-bg::after{content:"";position:absolute;inset:0;background:var(--tint,#173e2c);opacity:.35}

/* Bilder, die sich in ihrem Rahmen bewegen */
.plx-frame{overflow:hidden}
.plx-frame>img,.plx-img{scale:1.16}

/* Vollbild-Band zwischen den Abschnitten */
.plx-band{position:relative;height:min(78vh,760px);overflow:hidden;background:#173e2c;margin:0 auto;border-radius:20px 20px 0 0}
.plx-band .plx-layer{position:absolute;left:0;right:0;top:-25%;height:150%;background:var(--img) center/cover no-repeat}
.plx-band .plx-layer.front{top:auto;bottom:-12%;height:58%;background:linear-gradient(0deg,#f7f6ef 0%,rgba(247,246,239,0) 100%)}
.plx-band figcaption{position:absolute;left:max(24px,calc((100vw - 1180px)/2));bottom:48px;z-index:2;display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:999px;background:#173e2c;color:#f7f6ef;font:600 14px/1.2 "Helvetica Neue",Arial,sans-serif;letter-spacing:.01em}
.plx-band figcaption i{width:8px;height:8px;border-radius:50%;background:#d9ec37;display:block}

/* Fortschrittslinie oben: zeigt, wie weit man ist */
.plx-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;scale:0 1;background:#d9ec37;z-index:200;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  [data-plx]{translate:none!important}
  .plx-frame>img,.plx-img{scale:1;translate:none!important}
  .plx-bg,.plx-band .plx-layer{translate:none!important}
  .plx-progress{display:none}
}