@layer layout {
    .section20, .sectionFull20 {
        position: relative;
        color: var(--text-color);
        background: none;
    }

    swiper-slide .section20,
    swiper-slide .sectionFull20 {
        background: none;
    }

    :where(.section20, .sectionFull20) > .background-wrapper {
        position: absolute;
        z-index: -1;
        inset: 0;
        overflow: hidden;
        background: linear-gradient(
                180deg,
                var(--background-color),
                var(--gradiant-background-color, var(--background-color))
        );
    }

    :where(.section20, .sectionFull20) > .background-wrapper:has(img) {
        position: absolute;
        inset: 0;
        overflow: hidden;
        background: none;
    }

    :where(.section20, .sectionFull20) > .background-wrapper:has(img)::after {
      content: '';
      position: absolute;
      left: 0; 
      top: 0;
      width: 100%; 
      height: 100%;
      display: inline-block;
      background: linear-gradient(
        var(--image-overlay-gradient-direction, 180deg),
        var(--image-overlay-color) 0,
        var(--image-overlay-gradiant-color, var(--image-overlay-color)) 100%);
    };

    :where(.section20, .sectionFull20) > .background-wrapper:has(img)::before {
      content: '';
      position: absolute;
      left: 0; 
      top: 0;
      width: 100%; 
      height: 100%;
      display: inline-block;
      background: radial-gradient(circle,
      var(--image-overlay-radial-color-inner),
      var(--image-overlay-radial-color-outer, var(--image-overlay-radial-inner)));
    };

}

    :where(.section20, .sectionFull20) .image-background,
    :where(.section20, .sectionFull20) .video-background {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .section20__article {
        display: grid;
        --_content-inline-padding: 24px;
        --_content-width: calc(100vw - 2 * var(--_content-inline-padding, 24px));
        --_column-count: 3;
        grid-template-columns:
                [full-start padding_left-start]
                    var(--_content-inline-padding)
                [content-start padding_left-end]
                    var(--_content-width)
                [content-end padding_right-start]
                    var(--_content-inline-padding)
                [full-end padding_right-end];

        margin: 0 auto;
        padding: var(--section-padding-top) 0 var(--section-padding-bottom);
        width: 100%;
        row-gap: var(--module-gap);
        container-type: inline-size;
    }

    .section20__article:has(.headerSlider20) {
        padding-top: 0;
    }

    .section20 {
        /*On Mobile fallback to Fullwidth*/
        --_bg-width: 100%;
    }

    /* Padding-top auf 0 setzen für Section, die auf Headline für Related-Content folgt */
    section:has(#related) + section > .section20__article {
      padding-top: 0;
  }

    @media (min-width: 576px) {
        .section20__article {
            --_content-inline-padding: 39px;
        }
    }

    @media (min-width: 768px) {
        .section20__article {
            --_content-inline-padding: 1fr;
            --_content-width: 720px; /* --_content-width: 738px; for .module-full .module-content prev. incase something breaks */
        }

        .section20 {
            --_bg-width: 720px;
        }
    }

    @media (min-width: 992px) {
        .section20__article {
            --_content-width: 960px;
        }

        .section20 {
            --_bg-width: 960px;
        }
    }

    @media (min-width: 1200px) {
        .section20__article {
            --_content-width: 1110px;
        }

        .section20 {
            --_bg-width: 1110px;
        }
    }

    .section20__article--content-width > *,
    .section20__article--content-width .section20__inherit-width {
        grid-column: content;
    }

    .section20__article--full-width > *,
    .section20__article--full-width .section20__inherit-width {
        grid-column: full;
    }

    .section20__pass-width-down {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span var(--_column-count);
    }

    .section20__article > *:has(.barlayout20) {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span var(--_column-count);
    }