/* ==========================================================================
   PAGEBUILDER: textbox_with_cta_box
   shared section styles (.pb-section, .pb-content, .pb-headline, .pb-columns) are in style.css.
   ========================================================================== */

/* live site: 75px below the box (instead of the usual 110px). */
.pb-textbox-with-cta-box {
    padding-bottom: 75px;
}

.pb-cta-box {
    margin-top: 40px;
    padding: 58px 28px 39px;
    border: 1px solid var(--color-grey-175);
    background: var(--color-green-dark);
    color: var(--color-white);
    text-align: center;
}

.pb-cta-box-dachzeile {
    margin: 0 0 20px;
    font-size: 12.75px;
    font-weight: 600;
    line-height: 1.5;
}

.pb-cta-box-headline {
    margin: 0 0 20px;
    font-size: 22.32px;
    font-weight: 600;
    line-height: 1.5;
}

.pb-cta-box-text {
    font-weight: 300;
    line-height: 1.5;
}

.pb-cta-box-text a {
    color: inherit;
}

.pb-cta-box-button {
    display: block;
    width: fit-content;
    margin: 20px auto 0;
    padding: 10px;
    border: 2px solid var(--color-white);
    color: var(--color-white);
    font-weight: 300;
    line-height: 20px;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

/* inverted colors. keyboard focus additionally gets an outline outside the border. */
.pb-cta-box-button:is(:hover, :focus-visible) {
    background: var(--color-white);
    color: var(--color-green-dark);
}

.pb-cta-box-button:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .pb-cta-box-button {
        transition: none;
    }
}