/*theme_custom_elements*/

.hoverboxen {
    margin: calc(var(--gap-m) * 2) 0;
}

.hoverbox>.vc_column-inner {
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.hoverbox-headline h4,
.hoverbox-headline h4 a {
    text-decoration: none !important;
    color: var(--ast-global-color-5);
    font-size: var(--h5-font-size);
    font-weight: 500;
    line-height: 0.8;
    letter-spacing: -0.02em;
    text-transform: none;
}

.wpb_text_column.hoverbox-txt .wpb_wrapper p {
    color: var(--ast-global-color-5);
    font-size: var(--h4-font-size);
    font-weight: 500;
    line-height: 1.47;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hoverbox {
    position: relative;
}

.hoverbox * {
    margin: 0 !important;
    padding: 0 !important;
}

.hoverbox .hoverbox-headline h4 {
    transition: all 0.2s ease-in-out;
}

.hoverbox .wpb_single_image .vc_single_image-wrapper {
    width: 100%;
}

.hoverbox .wpb_single_image .vc_figure {
    width: 100% !important;
}

.hoverbox-img {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    margin: auto !important;
    max-width: 440px;
    width: 100%;
    /** Quadratischen Form basierend auf der Höhe */
    aspect-ratio: 1/1;
}

.hoverbox-img.wpb_single_image img {
    width: 100% !important;
}

.hoverbox-img:after {
    content: "";
    background: rgba(0, 0, 0, 0.35);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
}

.hoverbox:hover .hoverbox-img:after,
.hoverbox:focus .hoverbox-img:after {
    background: var(--ast-global-color-2);
}

.hoverbox:hover .hoverbox-headline h4 a {
    color: var(--ast-global-color-6);
    scale: 1.2;
}

.hoverbox:hover .hoverbox-headline {
    bottom: 36%;
    transition: all 0.2s ease-in-out;
    transform: translate(-50%, 20%);
}

.hoverbox-headline {
    bottom: 15%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 60%);
    width: 100%;
}

.hoverbox-icon,
.hoverbox-txt {
    position: absolute;
    width: max-content;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.hoverbox-icon {
    top: 41%;
    left: 50%;
    transform: translate(-50%, -72%);
}

.hoverbox-txt {
    top: 70%;
    transform: translate(-50%, -32%);
    left: 50%;
}

.hoverbox:hover .hoverbox-icon,
.hoverbox:focus .hoverbox-icon,
.hoverbox:hover .hoverbox-txt,
.hoverbox:focus .hoverbox-txt {
    opacity: 1;
}

@media all and (max-width: 1023px) {
    .hoverbox {
        width: 50% !important;
        margin: auto !important;
        margin-bottom: 35px !important;
    }
}

@media all and (max-width: 767px) {
    .hoverbox {
        width: 80% !important;
        margin: auto !important;
        margin-bottom: 30px !important;
    }
    .hoverbox figure.wpb_wrapper.vc_figure,
    .hoverbox figure.wpb_wrapper.vc_figure a {
        width: 100%;
        height: 100%;
    }
}

@media all and (max-width: 576px) {
    .hoverbox {
        width: 100% !important;
        margin: auto !important;
        margin-bottom: 30px !important;
    }
}

@media all and (max-width: 424px) {}