/* Optional: Standard-Overlay-Deckkraft als Variable */
:root{
  --parallax-overlay: 0.50; /* 0.00 – 1.00 */
}

/* Grundstil (Fallback: normales Scrollen) */
.parallax-bg{
  position: relative;
  color: #fff;

  /* Background */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Höhe nach Bedarf anpassen */
  min-height: 20vh;
}

/* Overlay via Pseudo-Element (statt opacity am Container) */
.parallax-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--parallax-overlay));
  pointer-events: none;
}

/* Inhaltsebene (über Overlay) */
.parallax-bg > .overlay{
  position: relative;
  padding: 5em 0;        /* Innenabstand der Inhalte */
  /* Kein margin hier – Abstände zwischen Sektionen über den Section-Flow steuern */
}

/* Optionaler, nur-Desktop Parallax-Effekt */
.parallax-bg.parallax--fixed{
  background-attachment: fixed;
}

/* Vignette-Variante (weiche Innenkante) */
.parallax-bg.parallax--vignette::before{
  box-shadow: inset 0 0 50px rgba(0,0,0,.5);
}

/* =========================================
   Kompatibilität & Barrierefreiheit
   ========================================= */

/* Mobile/Tablets: fixed-Background deaktivieren */
@media (max-width: 1024px){
  .parallax-bg.parallax--fixed{
    background-attachment: scroll;
  }
}

/* Nutzerpräferenz: Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce){
  .parallax-bg.parallax--fixed{
    background-attachment: scroll;
  }
}

/* Falls innerhalb doch mal <img> genutzt wird */
.parallax-bg img{
  display: block;
  width: 100%;
  height: auto;
}

/* Optional: Feinjustage für sehr kleine Screens */
@media (max-width: 480px){
  .parallax-bg > .overlay{
    padding: 3.5em 0;
  }
}