/* ==========================================================
   parallax.css – Parallax-Effekt für Banner und Bildband
   Bild einsetzen: pix/parallax.jpg ablegen (empfohlen 2400×1200)
   Ohne Bild wird automatisch der Farbverlauf angezeigt.
   ========================================================== */

/* ---- Banner: Foto bewegt sich langsamer als die Seite ---- */
.banner{overflow:hidden}
html.par-on .banner-img{
  transform:translate3d(0,var(--py,0px),0) scale(1.3);
  will-change:transform;
}

/* ---- Parallax-Bildband ---- */
.parallax{
  position:relative;
  overflow:hidden;
  min-height:clamp(280px,42vw,480px);
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  isolation:isolate;
  background:#0f1a22;
}
.parallax-bg{
  position:absolute;
  inset:-15% 0;
  z-index:-2;
  background-image:var(--par-img,url('../pixwebsite/ki.jpg')),linear-gradient(150deg,#0f1a22,#123a44 60%,#0b596f);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(5px);
}
html.par-on .parallax-bg{
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}
.parallax::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(8,13,20,.35),rgba(8,13,20,.60));
}
.parallax-text{padding:2rem clamp(1.2rem,4vw,2.4rem);max-width:820px}
.parallax-text h2{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.5)}
.parallax-text p{margin:1rem 0 0;font-size:1.15rem;opacity:.92}

@media (prefers-reduced-motion:reduce){
  html.par-on .banner-img,
  html.par-on .parallax-bg{transform:none}
  .banner-img{transform:none}
}