/****************************************************************************
 * Background Image Section
 *
 * INFO: Das content_image der Section wird wie ein fixiertes Hintergrundbild
 *       (background-attachment: fixed) dargestellt. Der Content liegt darueber,
 *       ein Overlay (.content_image::after) liegt direkt ueber dem Bild.
 *
 * HTML: .content_section.background_image_section
 *          > .row.content_row
 *              > .columns.content_column   (Text)
 *              > figure.columns.content_image (Bild -> wird zum BG)
 ****************************************************************************/

.background_image_section {
    position: relative;
    isolation: isolate;            /* haelt die negativen z-index im Section-Kontext */
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 60vh;
    color: #ffffff;
}

/* Content ueber Bild + Overlay */
.background_image_section > .content_row {
    position: static;
    width: 100%;
    z-index: 20;
}

.background_image_section .content_column {
    text-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.45);
}
.background_image_section .content_title > *,
.background_image_section .content_column p {
    color: #ffffff;
}

/* Bild aus dem Flow nehmen und als Ebene hinter dem Content platzieren */
.background_image_section .content_image {
    position: absolute;
    inset: 0;
    z-index: -2;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    overflow: hidden;
    pointer-events: none;
}
.background_image_section .content_image img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* dezenter Endlos-Zoom (rein/raus) */
    animation: bg-image-zoom 28s ease-in-out infinite;
    will-change: transform;
}

.background_image_section .content_image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:linear-gradient(180deg, rgba(28,38,24,0.68) 0%, rgba(28,38,24,0.72) 55%, rgba(28,38,24,0.78) 100%);
}

@keyframes bg-image-zoom {
    0%,
    100% { transform: scale(1); }
    50%  { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .background_image_section .content_image img {
        animation: none;
    }
}

/****************************************************************************
 * Ab Tablet: echtes "fixes Hintergrundbild" (Parallax-/BG-fixed-Effekt)
 *
 * clip-path auf der Section klippt das position:fixed Bild auf die
 * Section-Box, waehrend es relativ zum Viewport stehen bleibt.
 * (position:fixed BG-Attachment ist auf iOS/Mobile unzuverlaessig -> nur Desktop.)
 ****************************************************************************/
@media screen and (min-width: 40em) {
    .background_image_section {
        min-height: 75vh;
        clip-path: inset(0);
    }

    .background_image_section .content_image {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}