/* BLOCKS CSS  */

/*************************************************************************/
/* Slider Content  */

body {

    .res-slider-content {

        --slider-content-button-size: 50px;

        .slider-text {
            a {
                color: var(--text-color);

                &.btn-primary {
                    color: #FFF;
                }

                &.btn-outline {
                    color: var(--accent-color);
                }
            }


            h1, h2, h3, h4, h5, h6 {
                /*hyphens: auto;*/
            }
        }
        .slider {
            /* ------------  Equal Height ---------------- */
            &.equal-boxheight {
                .box-item {
                    .box-inner {
                        height: 100%;
                        a {
                            height: 100%;
                            display: block;
                        }
                        .postBox {
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            .postImg {
                                flex-shrink: 0;
                            }
                            .postContent {
                                flex-grow: 1;
                                display: flex;
                                flex-direction: column;
                                color: var(--text-color);

                                h1, h2, h3, h4, h5, h6 {
                                    /*hyphens: auto;*/
                                }
                            }
                        }
                    }
                }
            }

            .box-item {

                /* ------------  Standard-Stylings ---------------- */
                .postContent {
                    padding: var(--padding-boxes);

                    .vorschau-text {
                        line-height: var(--line-height-boxes-text);
                        font-size: var(--font-size-boxes-text);

                        p:last-child {
                            margin-bottom: 0;
                        }
                    }

                    .button-container,
                    .arrow-container {
                        margin-top: auto;
                        padding-top: 0.75em;
                        line-height: 1;
                        transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;

                        i {
                            transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
                        }
                        span.btn-arrow,
                        span.btn-text-link {
                            line-height: 1;
                        }
                    }
                    .arrow-container {
                        text-align: right;
                    }
                }

                &:hover {
                    .arrow-container {
                        text-align: right;

                        i {
                            color: var(--accent-color);
                            font-weight: 600;
                        }
                    }
                    .button-container {
                        span.btn-arrow,
                        span.btn-text-link {
                            color: var(--accent-color);
                        }
                    }
                }

                .box-inner {

                    /* ------------  Box Design: mit Rand ---------------- */
                    &.border {
                        border-width: 2px !important;
                        border-color: var(--light-grey) !important;
                    }
                    &.shadow {
                        transition: box-shadow 0.3s ease-in-out;
                    }
                    &.bg-light {
                        background-color: var(--light-grey) !important;
                    }
                    &.darkmode {
                        background-color: #000;
                        .postContent {
                            color: #FFF;
                        }
                    }
                    &.box-custom {

                        background-color: var(--light-grey);
                        border-radius: 0px 0px 30px 0px;
                        box-shadow: var(--boxshadow);
                        border: 1px solid var(--light-grey);
                        overflow: hidden;

                        .Grau & {
                            background-color: #FFF;
                        }
                    }
                }
            }

            .team-item {
                .team-contact-icon-link {
                    line-height: 1.5;
                    font-size: calc(var(--font-size-boxes-text) * 0.9);
                    transition: color 0.3s ease-in-out;
                    i {
                        transition: color 0.3s ease-in-out;
                        font-size: var(--font-size-boxes-text);
                        margin-right: 0.5em;
                        margin-bottom: 0.5em;
                    }
                }
                &:hover {
                    .team-contact-icon-link {
                        &:hover {
                            color: var(--accent-color);
                        }
                        i {
                            color: var(--accent-color);
                        }
                    }
                }
            }
            /* ------------  Layout 1: Text oberhalb Bild ---------------- */
            .boxlayout01 {

                .style-01 & {

                    .postContent {

                        padding: calc(var(--padding-boxes) * 1.2);

                        .vorschau-text {
                            line-height: 1.4;

                            &.with-img {
                                display: flex;
                                gap: 5%;

                                .text-container {
                                    order: 1;
                                    flex-grow: 1;
                                }

                                .postImg {
                                    max-width: 150px;
                                    width: 30%;
                                    margin: 0;
                                    order: 2;
                                    flex-shrink: 0;
                                }


                                .row-cols-md-4 & {

                                    flex-grow: 1;

                                    @media (max-width: 1680px) {

                                        flex-direction: column;
                                        gap: 0;

                                        .text-container {
                                            order: 2;
                                        }

                                        .postImg {
                                            order: 1;
                                            margin-bottom: 1em;
                                        }
                                    }

                                    @media (max-width: 1200px) {

                                        flex-direction: row;
                                        gap: 5%;

                                        .text-container {
                                            order: 1;
                                        }

                                        .postImg {
                                            order: 2;
                                        }
                                    }
                                }
                            }

                            .teaser-txt {
                                display: flex;
                                flex-direction: column;
                            }
                        }

                        .arrow-container {
                            line-height: 1;
                            display: block;

                            i {
                                margin-top: auto;
                                line-height: 1;
                            }
                        }
                    }

                    &.alignfull {
                        .container-fluid {


                        }
                    }

                    &:not(.alignfull) {

                        .container-fluid {
                            .row-cols-md-4 {

                                h3, h4 {
                                    font-size: 1em;
                                }

                                .postContent {
                                    font-size: 0.8em;
                                }

                                .with-img {
                                    @media (max-width: 1980px) {

                                        flex-direction: column;

                                        .text-container {
                                            order: 2;
                                        }

                                        .postImg {
                                            order: 1;
                                        }
                                    }

                                    @media (max-width: 1200px) {

                                        flex-direction: row;

                                        .text-container {
                                            order: 1;
                                        }

                                        .postImg {
                                            order: 2;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            /* ------------  Layout 2: Text überlagert Bild  ---------------- */
            .boxlayout02 {

                .box-overlayer {
                    opacity: 1;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    color: #fff;
                    height: 100%;
                    width: 100%;
                    margin: 0;
                    padding: var(--padding-boxes);

                    span.btn-arrow {
                        color: #FFF;
                    }
                }
                .vorschau-text {
                    font-size: 85%;
                    line-height: var(--line-height-boxes-text);
                    margin-bottom: 1em;
                }

            }


            /* ------------  Hover-Effekte ---------------- */
            .scale-box {
                transition: transform 0.3s ease-in-out;
                &:hover {
                    transform: scale(1.024);
                }
            }
            .scale-boximg {
                img {
                    transition: transform .3s ease-in-out;
                    transform: scale(1.01);
                }
                &:hover {
                    img {
                        transform: scale(1.048);
                    }
                }
            }
            .effect-individual {
                img {
                    transition: transform .3s ease-in-out;
                    transform: scale(1.01);
                }
                &:hover {
                    img {
                        transform: scale(1.048);
                    }
                }
                &.shadow:hover {
                    box-shadow: var(--boxshadow-hover) !important;
                }
                &.box-custom {
                    transition: box-shadow .3s ease-in-out, border-color 0.3s ease-in-out;
                    &:hover {
                        border-color: var(--medium-grey);
                        box-shadow: var(--boxshadow-hover) !important;
                    }
                }
            }
        }

        &:has(.slick-prev) {
            @media(max-width: 1200px) {
                padding-bottom: 80px !important;
            }
        }

    }

    /* Slider ------------ */
    /* Slider Settings -------------------  */
    .slick-prev,
    .slick-next {
        font-size: 0;
        line-height: 0;

        position: absolute;
        top: 100%;

        display: block;

        width: var(--slider-content-button-size);
        height: var(--slider-content-button-size);
        padding: 0;

        cursor: pointer;

        color: transparent;
        border: 1px solid var(--medium-grey);
        outline: none;
        background: #FFF;
        border-radius: 100%;
        overflow: hidden;
        transition: all 0.3s ease-in-out;

        &:not(.slick-disabled):hover {
            outline: none;
            box-shadow: var(--boxshadow);
            background-color: var(--accent-color);
            border-color: var(--accent-color);
        }
        &:not(.slick-disabled):hover:before {
            opacity: 1;
            color: #FFF;
            font-weight: 600;
        }

        &.slick-disabled {
            opacity: 0.5;
            cursor: default;
        }
    }

    .slick-prev {
        left: 0;

        &:before {
            font-size: 1.5rem;
            line-height: 1;
            content: "\f177";
            font-family: "Font Awesome 6 Pro";
            color: var(--accent-color);
            font-weight: 300;
            transition: color 0.3s ease-in-out;
        }
        @media(max-width: 1024px) {
            left: calc(50% - var(--slider-content-button-size) - (var(--grid-gap) / 2));
        }
    }

    .slick-next {

        left: calc(var(--slider-content-button-size) * 1.8);

        &:before {
            font-size: 1.5rem;
            line-height: 1;
            content: "\f178";
            font-family: "Font Awesome 6 Pro";
            color: var(--accent-color);
            font-weight: 300;
            transition: color 0.3s ease-in-out;
        }
        @media(max-width: 1024px) {
            left: calc(50% + (var(--grid-gap) / 2));
        }
    }

    /* Dots */
    .slick-dotted.slick-slider {
        margin-bottom: 30px;
    }

    .slick-dots {
        display: block;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
    }

    .slick-dots li {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
    }

    .slick-dots li button {
        font-size: 0;
        line-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
        margin: 0;
        padding: 0;
    }

    .slick-dots li button:hover,
    .slick-dots li button:focus {
        outline: none;
    }

    .slick-dots li button:hover:before,
    .slick-dots li button:focus:before {
        background-color: var(--medium-grey);
    }

    .slick-dots li button:before {
        content: '';
        font-family: 'slick';
        font-size: 6px;
        line-height: 20px;

        //position: absolute;
        //top: 0;
        //left: 0;

        width: 100%;
        height: 100%;
        border-radius: 100%;
        overflow: hidden;

        background-color: var(--light-grey);

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        transition: background-color 0.3s ease-in-out;
    }

    .slick-dots li.slick-active button:before {
        background-color: var(--accent-color);
    }

    section.Grau[style*="#F2F4F5"] {
        .slick-dots li button:before {
            background-color: #FFF;
        }
        .slick-dots li.slick-active button:before {
            background-color: var(--accent-color);
        }
        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before {
            background-color: var(--medium-grey);
        }
    }


    /* --------- Slider CSS Basic  --------------- */
    .slick-slider {
        position: relative;

        display: block;
        box-sizing: border-box;

        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
    }

    .slick-list {
        position: relative;

        display: block;
        overflow: hidden;

        margin: 0;
        padding: 0;
    }

    .slick-list:focus {
        outline: none;
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand;
    }

    .slick-slider .slick-track,
    .slick-slider .slick-list {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .slick-track {
        position: relative;
        top: 0;
        left: 0;
        display: flex;
        align-items: stretch;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 20px;
    }

    .slick-track:before,
    .slick-track:after {
        display: table;
        content: '';
    }
    .slick-track:after {
        clear: both;
    }
    .slick-loading .slick-track {
        visibility: hidden;
    }
    .slick-slide {
        float: left;
        display: none;
        min-height: 1px;
    }
    .slick-slide img {
        display: block;
    }
    .slick-slide.slick-loading img {
        display: none;
    }
    .slick-slide.dragging img {
        pointer-events: none;
    }
    .slick-initialized .slick-slide {
        display: block;
    }
    .slick-loading .slick-slide {
        visibility: hidden;
    }
    .slick-vertical .slick-slide {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
    .slick-arrow.slick-hidden {
        display: none;
    }
}