*:has(>.content-image.BildAlsHintergrund) {
    overflow: hidden;
    position: relative;
}
.BildAlsHintergrund {
    &.content-image {
        display: grid;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        min-height: 100vh;
        min-height: 100svh;
        z-index: 0; 
        padding: 0;
            img { 
                width: 100vw; 
                height: 100%;
                min-height: 100vh; 
                object-fit: cover; 
            }
    }
    &.content-text { 
        position: relative;
        figure {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            img { 
                width: 100%; 
                height: 100%; 
                object-fit: cover; 
            }
        }
    }
    &.BildFixiert {
        position: fixed;
        overflow: hidden;
        z-index: 0;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100svh;
        margin: 0;
        padding: 0;
    }
    &.BildNichtVolleHöhe { height: auto; }
    &.BildHalbeBreite { width: 50vw; }
    &.BildRechts { left: auto; right: 0; }
    &.BildMitte { left: 50%; transform: translateX(-50%); }
    &.BildÜberRand {
        overflow: visible;
        figure { 
            overflow: visible;
        }
    }
}
.mod_article:has(.BildFixiert) { overflow: hidden; }

.mod_article .BildImHintergrund {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    overflow: hidden;
    margin-top: 0;
    &.BildMittig { align-items: center; justify-items: center; }
    &.BildUnten { align-items: end; padding-bottom: 50px; }
    &.BildOben { align-items: start; padding-top: 50px; }
    &.BildLinks { justify-items: start; padding-left: 50px; }
    &.BildLinksAußen { justify-items: start; margin-left: -150px; }
    &.BildGanzLinksAußen { justify-items: start; margin-left: -300px; }
    &.BildRechts { justify-items: end; padding-right: 50px; }
    &.BildRechtsAußen { justify-items: end; margin-right: -150px; }
    &.BildGanzRechtsAußen { justify-items: end; margin-right: -300px; }
    figure {
        display: grid;
        align-content: center;
        justify-content: center;
        grid-column: 1 / 13;
        grid-row: 1 / 13;
        .BildLinksMitte & { grid-column: 3 / 5; }
        .BildLinksEnde & { grid-column: 5 / 7; }
        .BildRechtsAnfang & { grid-column: 7 / 9; }
        .BildRechtsMitte & { grid-column: 9 / 11; }
      
        .BildWeiterLinks & { margin-left: -450px; }
        .BildWeiterRechts & { margin-right: -450px; }
          
        .BildVerticalMittig & { grid-row: 6 / 8; }
        .BildHorizontalMittig & { grid-column: 6 / 8; }

        .BildObenMitte & { grid-row: 3 / 5; }
        .BildObenEnde & { grid-row: 5 / 7; }
        .BildUntenAnfang & { grid-row: 7 / 9; }
        .BildUntenMitte & { grid-row:  9/ 11; }
    }
    &.BildHalbtransparent {
        opacity: 0.4;
    }
}