.paragraph.banner .column-content {
    color: var(--color-white);
}

/* Headine with line for banner with backgrounds */
.img-banner .head-line h2::after {
    background: var(--color-white);
}

.bg-image .head-line h2::after {
    background: var(--color-white);
}

.img-banner .column-content p {
    color: white;
    font-size: var(--font-size-h3);
    text-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
}

.paragraph.banner .column-content :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-white);
    text-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
}

.paragraph.banner {
    padding: var(--section-inner-side-padding);
    border-radius: var(--border-radius);
}

.bg-grey {
    background: var(--color-grey-light) !important;
    border-radius: var(--border-radius);
}

.bg-white {
    background: var(--color-white) !important;
    border-radius: var(--border-radius);
}

/* Corporate Background Banners - with Gradient */
/* red */
.bg-primary {
    background: var(--color-primary) !important;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}

.bg-primary:after,
.bg-green:after,
.bg-blue:after,
.bg-orange:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    z-index: 1;
}

.bg-primary .head-line h2::after {
    background: var(--color-white);
}

/* green */
.bg-green {
    background: var(--color-green) !important;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}

.bg-green .head-line h2::after {
    background: var(--color-white);
}

/* blue */
.bg-blue {
    background: var(--color-blue) !important;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}

.bg-blue .head-line h2::after {
    background: var(--color-white);
}

/* orange */
.bg-orange {
    background: var(--color-orange) !important;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}

.bg-orange .head-line h2::after {
    background: var(--color-white);
}

/* box with background image */

.bg-image {
    display: grid;
    grid-column: span 12;
    grid-column-gap: var(--grid-gap);
    border-radius: var(--border-radius);
    padding: calc(var(--section-inner-side-padding)* 1.5) var(--section-inner-side-padding);
    position: relative;
    overflow: hidden;
}

.bg-image .image-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    z-index: 1;
}

.paragraph.banner.bg-image.columns-view .image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.paragraph.banner.bg-image.columns-view img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

.paragraph.banner.bg-image.columns-view .flex-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100%;
}

/*
    ---------------------
    CTA BANNER(s)
    ---------------------
    */

/* CTA Banner - Layout with Image */

.paragraph.cta.layout-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--section-inner-side-padding);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: transparent;
}

.paragraph.cta.layout-banner .image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.layout-banner .image-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.paragraph.cta.layout-banner img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

.paragraph.cta.layout-banner .column {
    position: relative;
    z-index: 2;
    color: var(--color-white);
}

.paragraph.cta.layout-banner h2,
.paragraph.cta.layout-banner p {
    margin: 0 0 1rem 0;
}

.paragraph.cta.layout-banner h2 {
    font-size: 4em;
    font-weight: 400;
}

@media (max-width: 767px) {
    .paragraph.cta.layout-banner h2 {
        font-size: 2.5em;
    }
}

.paragraph.cta.layout-banner a {
    color: var(--color-white);
    text-decoration: none;
}

.paragraph.cta.layout-banner a:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

@media (max-width: 991px) {
    .paragraph.cta.layout-banner {
        flex-direction: column;
    }

    .paragraph.cta.layout-banner .column {
        width: 100%;
    }
}

/* CTA Banner mit Text und Button */

.paragraph.cta.layout-default {
    padding: var(--section-inner-side-padding);
    border-radius: var(--border-radius);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.color-cd {
    background: var(--color-primary);
}

.color-red {
  background: var(--color-red);
}

.color-green {
    background: var(--color-green);
}

.color-orange {
    background: var(--color-orange);
}

.color-blue {
    background: var(--color-blue);
}

.paragraph.cta.layout-default .column-1 {
    grid-column: span 10;
    padding: 10px;
    padding-right: 2rem;

}

.paragraph.cta.layout-default h2 {
    margin-top: 0;
}

.paragraph.cta.layout-default p {
    margin-bottom: 0;
}

.paragraph.cta.layout-default .column-2 {
    grid-column-start: 12;
    padding: 10px;
}

@media (max-width: 991px) {
    .paragraph.cta.layout-default .column-1,
    .paragraph.cta.layout-default .column-2 {
        grid-column: span 12;
    }

    .paragraph.cta.layout-default .column-2 a {
      width: fit-content;
    }
}

@media (max-width: 767px) {
    .paragraph.cta.layout-default {
        display: block;
    }

    .paragraph.cta.layout-default .column-1,
    .paragraph.cta.layout-default .column-2 {
        width: 100%;
        padding: 10px 0;
    }

    .paragraph.cta.layout-default .column-2 a {
      width: fit-content;
    }
}

/* CTA Banner - Layout with Image */

.paragraph.cta.layout-box {
  display: grid;
}

/* CTA Banner - Layout Boxes (mit Icon, Text, Button)  */
/* Overwritten styles for bg color issues */
.paragraph.cta.layout-box.color-cd,
.paragraph.cta.layout-box.color-green,
.paragraph.cta.layout-box.color-orange,
.paragraph.cta.layout-box.color-blue {
    background-color: transparent;
}

.cta-box {
    width: 100%;
    grid-column: 1 / -1;
}

.cta-content {
    display: flex;
    flex-direction: row;
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 15px 30px rgb(0 0 0 / 15%);
    padding: var(--page-gap) var(--section-inner-side-padding);
    overflow: hidden;
}

.paragraph.cta.layout-box .img-cta {
    /*display: grid;
    grid-column: span 4;
    width: 30%;*/
  margin-right: 20px;
}

.paragraph.cta.layout-box .img-cta img {
    width: 100%;
    max-height: 200px;
    align-self: flex-start;
}

.paragraph.cta.layout-box .img-cta figure figcaption {
  font-size: .75rem;
  background: rgb(255 255 255 / 40%);
  padding: .25rem .5rem;
  border-radius: calc(var(--border-radius) / 2);
  max-width: calc(100% - 2rem);
  position: relative;
  bottom: 0 !important;
  left: 0 !important;
  max-width: 1.7rem;
  white-space: nowrap;
  overflow: hidden;
  color: transparent;
  z-index: 1000;
  height: auto !important;
}

.paragraph.cta.layout-box .img-cta figcaption:hover {
  max-width: inherit;
  color: var(--color-grey-dark);
  background: rgb(255 255 255 / 100%);
}

.txt-cta {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100%;
    color: #333 !important;
}

.paragraph.cta.layout-box .txt-cta p {
  margin-top: 0 !important;
}

.paragraph.cta.layout-box .txt-cta a {
  margin-top: 20px !important;
  width: fit-content;
}

.paragraph.cta.layout-default.color-cd .column,
.paragraph.cta.layout-default.color-red .column,
.paragraph.cta.layout-default.color-green .column,
.paragraph.cta.layout-default.color-blue .column,
.paragraph.cta.layout-default.color-orange .column {
    color: var(--color-white) !important;
}

.cta-box .button {
    margin: 1rem 0;
}

@media (max-width: 1400px) {
  .paragraph.cta.layout-box .img-cta {
    width: 30%;
    margin-right: 20px;
  }

  .paragraph.cta.layout-box .txt-cta {
    width: 70%;
  }
}

@media (min-width: 991px) {
  .paragraph.cta.layout-box .img-cta {
    width: 30%;
    margin-right: 20px;
  }

  .paragraph.cta.layout-box .txt-cta {
    width: 70%;
  }
}

@media (max-width: 990px) {
    .cta-box {
        grid-column: span 12;
    }

    .cta-content {
        flex-direction: column;
        align-items: center;
    }

    .txt-cta {
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .txt-cta p {
        text-align: center;
    }
}

/* Image Banner (Logos) */

.content-top {
    border: 2px solid var(--color-grey-light);
    border-width: 2px 0;
    margin-top: var(--section-inner-side-padding);
}

.content-top .bg-white {
    display: block;
}

@media (max-width: 991px) {
    .content-top .column-2 .column-content {
        padding: 0;
    }

    .content-top .column-2 .column-content p {
        margin-bottom: 0;
    }
}

.group-logo {
    display: flex;
}

.logo-item {
    padding-right: 2rem;
    flex-basis: fit-content;
}

@media (max-width: 991px) {
    .group-logo {
        margin-top: 20px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .logo-item {
        padding-right: 1rem;
        padding-left: 1rem;
        flex-basis: fit-content;
        padding-bottom: 20px;
        margin: 20px;
    }
}