/**
 * NetzdienstFX – Hero-Parallax: Basis-Struktur
 * ---------------------------------------------
 * Nur strukturell Nötiges (Positionierung, Stacking). Optische Werte wie Section-Höhe,
 * Bildausschnitt, object-fit etc. gehören in die Kunden-styles.css und dürfen diese
 * Regeln dort überschreiben.
 */
.parallax-section {
  position: relative;
  overflow: hidden;
}

.parallax-bg,
.parallax-fg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.parallax-bg {
  z-index: 1;
}

.parallax-fg {
  z-index: 2;
  pointer-events: none;
}

/*
  Einfachster Fall (Standard): .parallax-bg/.parallax-fg sitzt direkt auf einem <img>.
  object-fit ist deshalb tag-qualifiziert, damit die Regel im Container-Fall weiter unten
  nicht ins Leere läuft (ein <div> hat kein object-fit).
*/
img.parallax-bg {
  object-fit: cover;
  object-position: center;
}

img.parallax-fg {
  /* Freigestelltes Motiv i.d.R. nicht zuschneiden */
  object-fit: contain;
  object-position: center;
}

/*
  Container-Fall: .parallax-bg/.parallax-fg ist ein <div>, das neben dem eigentlichen Bild
  (.parallax-media) weitere Kind-Elemente aufnimmt, die automatisch denselben Scroll-Transform
  erben sollen (z.B. blinking-lights.js – siehe blinking-lights.css). .parallax-media
  übernimmt dann object-fit/-position, die im einfachen Fall oben direkt auf
  .parallax-bg/.parallax-fg liegen.

  Beispiel:
    <div class="parallax-fg" data-speed="0.2">
      <img class="parallax-media" src="konsole.jpg" alt="">
      <div class="blinking-light" style="left: 13%; top: 44%;"></div>
    </div>
*/
.parallax-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.parallax-fg .parallax-media {
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .parallax-bg,
  .parallax-fg {
    will-change: auto;
  }
}