/* ==========================================================================
Foto-Hero – gemeinsame Regeln für die seitlich einlaufenden, entsättigten
Hintergrundbilder auf den Produktseiten.

Genutzt von der Einstiegs-Section jeder Produktseite über class="photo-hero"
(aktuell bde.html, mde.html, planung.html, ki.html). Das jeweilige Bild wird
im seitenspezifischen Stylesheet über die Variable --hero-image an der
section-ID gesetzt, z. B.:

  section#bde {
      --hero-image: url('../img/bde.webp');
  }

Neue Produktseite hinzufügen: Section bekommt zusätzlich class="photo-hero",
diese Datei muss dafür nicht angefasst werden.
========================================================================== */

.photo-hero {
    position: relative;

    &:before {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        z-index: -1;

        background-image: linear-gradient(to right, transparent, white 50%),
            var(--hero-image);
        background-size: cover, cover;
        background-position: right center, left center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        filter: saturate(0);
        opacity: 0.9;
    }

    .inner {
        padding-left: 30%;
    }

    .sec-body {
        text-align: right;
    }
}

@media (max-width: 1280px) {
    .photo-hero {
        padding-top: 24em;

        &:before {
            height: 22em;
            width: 100%;
            margin-bottom: 2em;
            background-image: var(--hero-image);
            background-position: left 48%;
            background-size: cover;
            background-attachment: scroll;
        }

        .inner {
            padding-top: 18em;
            padding-left: 0;
        }

        .sec-body {
            text-align: left;
        }
    }
}