/* === CONTAINER === */

/* == GENERAL == */

.cntnr-content__cols {
    width: 100%;
    display: flex;
    flex-flow: row;
    gap: var(--grid__small);
}

@media screen and (max-width: 1023px) {
    .cntnr-content__cols {
        flex-flow: column;
    }
}

.cntnr-content__cols-inline {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--grid__small);
}

/* == ALIGNMENTS == */

.top-center {
    justify-content: start;
    align-items: center;
}

.top-right {
    justify-content: end;
    align-items: center;
}

.top-left {
    justify-content: start;
    align-items: start;
}

.center-left {
    justify-content: center;
    align-items: left;
}

.center-right {
    justify-content: end;
    align-items: center;
}

.center-center {
    justify-content: center;
    align-items: center;
}

/* == SIZES == */

.w50 {
    width: 50% !important;
}

.w75 {
    width: 75% !important;
}

.w100 {
    width: 100% !important;
}

/* == ACCEPT == */

.accept, .accept * {
    border-color: var(--color-accept) !important;
}

.highlight.accept {
    color: var(--color-accept) !important;
}

.divider.accept {
    background-color: var(--color-accept) !important;
}

/* == STYLING == */

.sec-hero > .cntnr-img-bckgrnd,
.gradient-border {
    position: relative;
    overflow: hidden !important;
}

.sec-hero > .cntnr-img-bckgrnd::after,
.gradient-border::after {
    content: '';
    position: absolute;
    top: 0px;        /* exakt über die fehlende border-top */
    left: 0px;       /* border-width ausgleichen */
    right: 0px;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, var(--brand-color-main) 50%, transparent 100%);
}

/* = BACKGROUNDS = */