/* BOX UNIT - QUOTE

01	GENERAL
02	ICON
03	TEXT

*/

/* -----------------------------------------------------------------------
	01	GENERAL
/* ---------------------------------------------------------------------*/

.wfbb_quote .paragraph,
.wfbb_text_optional_icon_link .paragraph {
    background-color: var(--color-primary);
    border-radius: var(--border-radius);
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: var(--grid-columns);
    padding: var(--section-inner-side-padding);
}

@media (max-width: 767px) {

    .wfbb_quote .paragraph, .wfbb_text_optional_icon_link .paragraph {
        padding: calc(var(--section-inner-side-padding) * 2);
    }

}

/* -----------------------------------------------------------------------
	02	ICON
/* ---------------------------------------------------------------------*/

.wfbb_quote .field--name-field-icon-wfbb-quote,
.wfbb_text_optional_icon_link .field--name-field-icon-wfbb-text-optional-ic {
    grid-column: 2 / 4;;
    padding-right: 5rem;
}

.wfbb_quote .group-text-wfbb-quote {
    position: relative;
}

.wfbb_quote .group-text-wfbb-quote:before {
    display: block;
    content: '';
    height: 5rem;
    width: 5rem;
    position: absolute;
    top: 0;
    left: calc(var(--grid-gap) * -1 - 5rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61.516' height='51.834' viewBox='0 0 61.516 51.834'%3E%3Cg id='Gruppe_21' data-name='Gruppe 21' transform='translate(-200.456 -140.113)'%3E%3Crect id='Rechteck_64' data-name='Rechteck 64' width='14' height='50' rx='7' transform='translate(216.734 140.113) rotate(19)' fill='%23fff'/%3E%3Crect id='Rechteck_65' data-name='Rechteck 65' width='14' height='50' rx='7' transform='translate(248.734 140.113) rotate(19)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 100%;
}

@media (max-width: 1400px) {

    .wfbb_quote .group-text-wfbb-quote:before {
        width: 4rem;
        height: 4rem;
    }

}

@media (max-width: 767px) {

    .wfbb_quote .field--name-field-icon-wfbb-quote, .wfbb_text_optional_icon_link .field--name-field-icon-wfbb-text-optional-ic {
        grid-column: 1 / 9;
        height: 8rem;
    }

    .wfbb_quote .field--name-field-icon-wfbb-quote div, .wfbb_text_optional_icon_link .field--name-field-icon-wfbb-text-optional-ic div {
        height: 100%;
    }

    .wfbb_quote .field--name-field-icon-wfbb-quote img, .wfbb_text_optional_icon_link .field--name-field-icon-wfbb-text-optional-ic img {
        height: 100%;
        object-fit: contain;
        width: auto;
    }

    .wfbb_quote .group-text-wfbb-quote,
    .wfbb_text_optional_icon_link .group-text-wfbb-text-optional-icon-link {
        grid-column: 2 / 13;
    }

    .wfbb_quote .group-text-wfbb-quote:before {
        width: 2rem;
        height: 2rem;
        left: calc(var(--grid-gap) * -1 - 2rem);
    }

}


/* -----------------------------------------------------------------------
	03	TEXT
/* ---------------------------------------------------------------------*/

.wfbb_quote .group-text-wfbb-quote,
.wfbb_text_optional_icon_link .group-text-wfbb-text-optional-icon-link {
    color: #fff;
    grid-column: 3 / 11;
}

.wfbb_quote .field--name-field-icon-wfbb-quote + .group-text-wfbb-quote,
.wfbb_text_optional_icon_link .field--name-field-icon-wfbb-text-optional-ic + .group-text-wfbb-text-optional-icon-link {
    grid-column: 4 / 11;
}

.wfbb_quote .field--name-field-footer-wfbb-quote {
    font-size: 1rem;
    margin-top: 1rem;
}


@media (max-width: 991px) {

    .wfbb_quote .group-text-wfbb-quote,
    .wfbb_text_optional_icon_link .group-text-wfbb-text-optional-icon-link {
      grid-column: 3 / 13;
    }

}

@media (max-width: 767px) {

    .wfbb_quote .paragraph, .wfbb_text_optional_icon_link .paragraph {
        padding: calc(var(--section-inner-side-padding) * 2);
    }

    .wfbb_quote .group-text-wfbb-quote,
    .wfbb_text_optional_icon_link .group-text-wfbb-text-optional-icon-link,
    .wfbb_quote .field--name-field-icon-wfbb-quote + .group-text-wfbb-quote,
    .wfbb_text_optional_icon_link .field--name-field-icon-wfbb-text-optional-ic + .group-text-wfbb-text-optional-icon-link {
        grid-column: span 12;
    }

}

@media (max-width: 500px) {

    .wfbb_quote .group-text-wfbb-quote,
    .wfbb_text_optional_icon_link .group-text-wfbb-text-optional-icon-link {
        grid-column: 2 / 13;
    }

}

/* -----------------------------------------------------------------------
	04	BUTTON
/* ---------------------------------------------------------------------*/

.wfbb_text_optional_icon_link .btn-wfbb {
    border-color: #fff;
    color: #fff;
}

.wfbb_text_optional_icon_link .btn-wfbb:after {
    background-image: var(--arrow-next-white);
}

.wfbb_text_optional_icon_link .btn-wfbb:hover {
    background: #fff;
    color: var(--color-primary);
}

.wfbb_text_optional_icon_link .btn-wfbb:hover:after {
    background-image: var(--arrow-next-primary);
}


/* -----------------------------------------------------------------------
	05	IMAGE
/* ---------------------------------------------------------------------*/

.field--name-field-wfbb-boxen {
    display: grid;
    grid-template-columns: var(--grid-columns);
    grid-column-gap: var(--grid-gap);
}

.field--name-field-wfbb-boxen > .field__item {
    border-radius: var(--border-radius);
    box-shadow: 0 15px 30px rgb(0 0 0 / 15%);
    padding: var(--page-gap) var(--section-inner-side-padding);
    grid-column: span 6;
}

.paragraph--type--wfbb-box-element-logo-text-link {
    display: flex;
}

.field--name-field-icon-logo-image-box-elemen {
    width: 30%;
}

.field--name-field-icon-logo-image-box-elemen > div {
    position: relative;
}

.paragraph--type--wfbb-box-element-logo-text-link p {
    font-size: 1.5rem;
}

.paragraph--type--wfbb-box-element-logo-text-link .btn-wfbb {
    margin-top: 1rem;
}

.paragraph--type--wfbb-box-element-logo-text-link > div:last-child {
    padding-left: 2rem;
    width: 70%;
}

@media (max-width: 991px) {

    .paragraph--type--wfbb-box-element-logo-text-link {
        flex-direction: column;
        align-items: center;
    }

    .field--name-field-icon-logo-image-box-elemen {
        width: 70%;
        margin-bottom: var(--grid-gap);
    }

    .paragraph--type--wfbb-box-element-logo-text-link > div:last-child {
        text-align: center;
        padding: 0;
        width: 100%;
    }

}

@media (max-width: 767px) {

    .field--name-field-wfbb-boxen {
        grid-row-gap: var(--grid-gap);
    }

    .field--name-field-wfbb-boxen > .field__item {
        box-shadow: 0 7px 15px rgb(0 0 0 / 15%);
        grid-column: span 12;
        padding: var(--page-gap)var(--grid-gap);
    }

}