/*
Theme Name:   UserMindTheme
Description:  Schreibe hier eine kurze Beschreibung über dein Child-Theme
Author:       usermind
Author URL:   https://www.user-mind.de/
Template:     hello-elementor
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  UserMindTheme
*/

/* Schreibe hier dein eigenes persönliches Stylesheet */

p, h1, h2, h3, h4, h5, h6 {
    margin: 0 !important;
    padding: 0 !important;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

a {
    hyphens: manual;
}


b, strong {
    font-weight: 700 !important;
}

ul {
    padding-inline-start: 20px;
}

.elementor-field-subgroup:not(.elementor-subgroup-inline) .elementor-field-option {
    margin: 7px 0 10px 4px;
}

:where(.elementor-widget-n-accordion .e-n-accordion-item>.e-con) {
    border: none !important;
}

/* nm | 24-01-2025 */
/*label {*/

/*    padding-left: 6px;*/
/*    vertical-align: baseline !important;*/
/*}*/


/* =================================================================
 * System
   ================================================================= */

.elementor-editor-active main{
    margin-top: 152px;
}


/* ==========================================================================
   GLOBAL CLASSES
   ========================================================================== */

/* mobile menu */

.mobile-menu-toggle {

    .elementor-icon-wrapper {
        display: flex;
    }

    &:before {
        content: "";
        height: calc(100% + 16px);
        width: calc(100% + 40px);
        top: 50%;
        left: -16px;
        background: white;
        position: absolute;
        transform: translateY(-50%);
        border-radius: 120px 0 0 120px;
    }
}

.mobile-menu-level-1 {

    summary {
        display: flex;
        justify-content: center !important;
        align-content: center;
        position: relative;

        .e-n-accordion-item-title-icon {
            position: absolute;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .mobile-menu-list {
        .elementor-icon-list-items .elementor-icon-list-item {
            padding: 12px 40px !important;
            background: #CCE7F1;

            &:hover {
                background: #88A8B6;
                color: white;
            }
        }
    }

    .mobile-menu-level-2 {

        &:before {
            content: "";
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 32px solid transparent;
            border-right: 32px solid transparent;
            border-bottom: 20px solid white;
        }


        #trinkwasserbehandlung-mobile {
            summary {
                border-radius: 24px 24px 0 0;
            }
        }
    }
}

.menu-list-item-hover {

    li {
        margin: 0 !important;
        padding-block: 8px !important;

        &:hover {
            background-color: #CCE7F1;
            color: white;
        }

    }
}


/* remote Carousel navigation */
.ue-remote-carousel-navigation-wrapper {
    justify-content: center !important;
    padding: 0 40px;

    @media screen and (max-width: 760px) {
        padding: 0 24px;

    }

    .ue-remote-carousel-navigation {
        max-width: 100vw;
        width: 100%;
        justify-content: space-between;
    }
}

.um-last-section {
    margin-bottom: 114px !important;
}

.elementor-element:has(+ .seperator-wave-white, + .seperator-wave-blue) {
    padding-bottom: 120px !important;
}

.seperator-wave-white, .seperator-wave-blue {
    position: relative;

    &:before {
        position: absolute;
        top: 0;
        right: 0;
        height: 256px !important;
        left: 0;
        display: block !important;
        width: 100vw;
        /*min-width: 1024px;*/

        max-height: 214px;
        content: "" !important;
        transform: translate(0, -99%);

        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;

        @media screen and (max-width: 1440px) {
            max-height: 160px;
        }

        @media screen and (max-width: 1024px) {
            max-height: 128px;
        }

        @media screen and (max-width: 768px) {
            max-height: 96px;
            background-size: 1024px 100%;
        }
    }
}

.seperator-wave-white:before {
    background-image: url(https://permatrade.um-dev.de/wp-content/uploads/2024/10/Welle_Hero_white.png);
}

.seperator-wave-blue:before {
    background-image: url(https://permatrade.um-dev.de/wp-content/uploads/2021/12/Welle_Footer_2024.png);

}

/* Tool tips */

.e-hotspot__tooltip {
    margin-bottom: 16px;

    &:before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        bottom: 6px;
        left: 50%;
        background: white;
        transform-origin: center;
        transform: rotate(45deg) translate(25%, 100%);
    }
}

/* =================================================================
 * 1.0 - HEADER HIDE ON SCROLL
 * ================================================================= */

#stickyheaders {
    -o-transition: transform 0.34s ease;
    -webkit-transition: -webkit-transform 0.34s ease;
    transition: -webkit-transform 0.34s ease;
    transition: transform 0.34s ease;
    transition: transform 0.34s ease, -webkit-transform 0.34s ease;
}

.headerup {
    -ms-transform: translateY(-140px);
    -webkit-transform: translateY(-140px);
    transform: translateY(-140px); /*adjust this value to the height of your header*/
}

/* ==========================================================================
   um_nested-menu
   ========================================================================== */
#um_nested-menu {
    .e-n-menu-item {
        position: static;
        z-index: 10100;

        .e-n-menu-title {
            box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.2);
        }

        .e-n-menu-content {
            right: 0;
            /*top: -24px;*/
            /*padding-top: 80px;*/
            left: unset;
            width: unset;
            z-index: 10010;

            @media screen and (max-width: 1240px) {
                width: calc(100vw - 100px);
            }
            @media screen and (max-width: 1024px) {
                width: unset;
            }

            & > .elementor-element {
                left: unset !important;
            }
        }
    }

    #lang-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        border-radius: 80px;

        .e-n-menu-dropdown-icon {
            display: none;
        }

        .e-n-menu-title-text {
            display: none!important;
        }

        .e-n-menu-title-container {
            justify-content: center !important;
            align-items: center !important;
        }

        & + .e-n-menu-content {
            right: unset!important;
            width: fit-content;
        }
    }
}

#um_nested-menue div.e-n-menu-title:hover a {
    color: unset !important;
}

#um_nested-menue div.e-n-menu-title a {
    color: unset !important;
}

/*.elementor-kit-547 .elementor-widget-container *:not(.menu-item):not(.elementor-tab-title):not(.elementor-image-box-title):not(.elementor-icon-box-title):not(.elementor-icon-box-icon):not(.elementor-post__title):not(.elementor-heading-title) > a:not(:hover):not(:active):not(.elementor-item-active):not([role="button"]):not(.button):not(.elementor-button):not(.elementor-post__read-more):not(.elementor-post-info__terms-list-item):not([role="link"]):not(.elementor-icon), .elementor-kit-547 .elementor-widget-container a:not([class]) a:not(.ue_hotspot-item) {*/
/*    color: unset !important;*/
/*}*/

/**
 Generelle Styling Klassen
*/
.ci_um_secondary {
    color: var(--e-global-color-secondary);
}


/**
 UserMind:
 Zusätzliche Mobile Breakpoints absteigend einordnen
 Keine Breakpoints im regulaeren CSS einbinden !!!
*/

/* ==========================================================================
   Agile Store Locator
   ========================================================================== */

body #asl-storelocator.asl-cont .asl-wrapper .Filter_section .search_filter label,
body #asl-storelocator.asl-cont .asl-wrapper .Filter_section .asl-name-search label {
    font-weight: 400;
}

.asl-search-address::placeholder {
    font-size: var(--sl-font-size, 13px) !important;
}

.multiselect-container.adropdown-menu li label.checkbox {
    color: var(--sl-color, #000000);
}

body #asl-storelocator.asl-cont .asl-wrapper .asl-ddl-filters .rangeFilter .rad-unit {
    color: var(--sl-color, #000000);
}

.sl-item {
    position: relative;
    padding: 0 !important;

    .sl-addr-sec {
        padding: 20px;
    }


    &.top-partner {


        box-sizing: border-box;
        background: #CCE7F182 !important;

        &:before {
            content: "empfohlener Partner";
            position: absolute;
            top: 0;
            right: 0;
            padding: 8px 12px;
            background: var(--sl-action-btn-bg);
            border-radius: 0 0 0 8px;
            color: white;
            font-weight: 700;
        }
    }
}

.sl-item *, .infowindowContent * {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#asl-no-map {
    max-width: 400px !important;

    .asl-map {
        display: none;
        visibility: hidden;
        height: 0;
        width: 0;
        border: none;
    }

    #asl-panel {
        min-height: 500px;
        width: 100% !important;
        max-width: unset !important;
    }

    .Filter_section {
        flex-direction: column;
    }

    * {
        flex-basis: unset !important;
        max-width: 400px !important;
        /*width: 100%;*/
        /*min-width: 300px;*/
    }
}

/* ==========================================================================
   modern events calendar archive page
   ========================================================================== */

.mec-container {
    min-width: 80%;
    padding-block: 200px;

    input[type="search"], .mec-date-search * {
        border: none !important;
        border-radius: 0 !important;
    }

    .mec-event-image img {
        width: 100%;
    }
}


.mec-single-event .mec-event-meta h6, .mec-single-event-sponsor span {
    color: white;
}

/* ==========================================================================
   modern events calender single event page
   ========================================================================== */

.mec-container {
    --_gradient: linear-gradient(155deg, #003872, #009DDD);

    .mec-search-form {
        margin-top: 2rem;
        background: var(--_gradient, white);

        .mec-totalcalview-selected {
            color: #FFFFFF !important;
            border: none !important;
            background: #55BA4F !important;
        }
    }

    .mec-event-info-desktop {
        margin: 0;
        background: var(--_gradient) !important;

        i:before, h3, span, abbr, dt, a {
            color: white !important;
        }
    }

    .mec-event-content-wrap {
        padding: 1rem;
        background: var(--_gradient) !important;

        .mec-event-description {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            color: white;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        h3.mec-event-title a {
            color: white;
        }
    }

    .mec-event-image-wrap {
        padding: 0;
    }


    .mec-events-button {
        white-space: nowrap;
    }

    .mec-booking-button {
        font-size: 14px;
        line-height: 1.4;
        padding: 10px 15px;
        transition: all 0.3s ease;
        text-transform: none;
        color: white;
        border: none;
        border-radius: 4px;
        background: #55BA4F;

        &:hover {
            background-color: #55BA4F;

            scale: 1.1;
        }
    }

    .mec-event-sharing-wrap {

        &:hover .mec-event-share {
            background-color: #55BA4F;

            i:before {
                color: white;
            }
        }

        .mec-event-share {
            border-color: #55BA4F !important;
            border-radius: 4px;

            i:before {
                color: #55BA4F;
            }

        }
    }

    #comments {
        display: none;
    }
}

/* ==========================================================================
   Product slider
   ========================================================================== */

.e-hotspot__tooltip {
    border-radius: 6px !important;

    img {
        border-radius: 6px;
    }
}

.ue-content-holder {
    min-height: unset !important;
    background: none !important;

    .owl-item {
        max-height: 740px;
    }
}

@media all and (max-width: 767px) {
    .slider-product-image {
        position: absolute !important;
        right: 0;
        bottom: -300px;

        img {
            float: right;
        }
    }
}

/* ==========================================================================
   Blog archive
   ========================================================================== */

.um-g-text-1 h1, .um-g-text-1 h2, .um-g-text-1 h3, .um-g-text-1 h4, .um-g-text-1 h5, .um-g-text-1 h6, .um-g-text-1 p, .um-g-text-1 a {
    background: -webkit-linear-gradient(180deg, #009DDD 0%, #92DCFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.um-frosted {
    backdrop-filter: blur(20px);
}

.um-post-archive .elementor-loop-container.elementor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;

    & > div.e-loop-item > div {
        height: 100% !important;

        h3 {
            font-family: "Open Sans", sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1.2;
        }
    }

    > div:nth-of-type(8n+1) {
        min-height: 658px;
        grid-area: 1 / 1 / 3 / 3;

        h3 {
            font-size: 1.75rem !important;
            font-weight: 800 !important;
        }
    }

    div:nth-of-type(8n+2) {
        grid-area: 1 / 3 / 2 / 4;
    }

    div:nth-of-type(8n+3) {
        grid-area: 1 / 4 / 2 / 5;
    }

    div:nth-of-type(8n+4) {
        grid-area: 2 / 3 / 3 / 5;
    }

    div:nth-of-type(8n+5) {
        grid-area: 3 / 1 / 4 / 2;
    }

    div:nth-of-type(8n+6) {
        grid-area: 3 / 2 / 4 / 3;
    }

    div:nth-of-type(8n+7) {
        grid-area: 4 / 1 / 5 / 3;
    }

    > div:nth-of-type(8n+8) {
        min-height: 658px;
        grid-area: 3 / 3 / 5 / 5;

        h3 {
            font-size: 1.75rem !important;
            font-weight: 800 !important;
        }
    }

    /* For items beyond the first 8 */

    & > div.e-loop-item:nth-of-type(n+9) {
        min-height: 300px;
        grid-column: span 2;
        grid-row: span 1;
    }

    .um-post-archive .elementor-loop-container.elementor-grid > div.e-loop-item > div {
        position: relative;
        transition: all 0.3s ease-out;
    }

    .elementor-widget-button {
        display: block;
        overflow: hidden;
        max-height: 0;
        transition: all 0.3s ease-out, max-height 0.3s ease-out, opacity 0.3s ease-out;
        opacity: 0;
    }

    .um-blog-item-active-hover {
        .um-blog-item-bg-img {
            scale: 1.1;
        }

        .um-blog-item-content {
            /* You may need to adjust this if you want to create space for the button */
        }

        .elementor-widget-button {
            max-height: 50px; /* Adjust this value based on your button's actual height */
            opacity: 1;
        }
    }
}


.um-blog-item-bg-img {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: all .4s ease;

    img {
        height: 100% !important;
        object-fit: cover;
    }
}

.elementor-kit-547 button:not(.adropdown-toggle):not(.span-geo):hover, .elementor-kit-547 button:not(.adropdown-toggle):not(.span-geo):focus, .elementor-kit-547 input[type="button"]:not(.adropdown-toggle):not(.span-geo):hover, .elementor-kit-547 input[type="button"]:not(.adropdown-toggle):not(.span-geo):focus, .elementor-kit-547 input[type="submit"]:hover, .elementor-kit-547 input[type="submit"]:focus, .elementor-kit-547 .elementor-button:hover, .elementor-kit-547 .elementor-button:focus {
    border-radius: 120px !important;
}

/* categories filter */

.elementor-widget-taxonomy-filter .e-filter {
    justify-content: stretch !important;

    .e-filter-item {
        flex-grow: 1;
    }
}

/* ==========================================================================
   Ajax Search Pro
   ========================================================================== */

/* Search Icon */

.probox {
    justify-content: center;
}

#ajaxsearchpro1_1 .probox .promagnifier .innericon, #ajaxsearchpro1_2 .probox .promagnifier .innericon, div.asp_m.asp_m_1 .probox .promagnifier .innericon {
    float: unset;
    width: unset;
    height: unset;
}

#ajaxsearchpro1_1 .probox .proinput, #ajaxsearchpro1_2 .probox .proinput, div.asp_m.asp_m_1 .probox .proinput {
    margin: 0 0 0 16px !important;
}

/*@media screen and (max-width: 767px) {*/
/*    .header-logo {*/
/*        top: -100px;*/
/*        transition: all 0.3s ease;*/
/*    }*/

/*    #stickyheaders:has(.proinput.hiddend) .header-logo {*/
/*        top: 0;*/
/*    }*/
/*}*/

.asp-mobile-menu {

    div.asp_main_container {
        box-shadow: none !important;

    }

    .probox {
        border: 1px solid #1698C5 !important;
        border-radius: 80px !important;

        .promagnifier {
            border: 1px solid #1698C5 !important;
        }
    }
}

div[data-asp-compact="open"] {

    box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.2) !important;

    .probox {
        border: 1px solid #1698C5;

        .promagnifier {
            border: none !important;
        }
    }
}

div[data-asp-compact="closed"] {

    box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.2) !important;

    .probox {
        border: none !important;
    }
}


/* ==========================================================================
   MEDIA QUERYS
   ========================================================================== */


@media screen and (max-width: 1239px) {


}


@media screen and (max-width: 1024px) {


}

@media screen and (max-width: 959px) {

    .um-post-archive .elementor-loop-container.elementor-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;

        & > div.e-loop-item > div {
            height: 100% !important;

            h3 {
                font-family: "Open Sans", sans-serif;
                font-size: 1.25rem;
                font-weight: 700;
                line-height: 1.2;
            }
        }

        > div:nth-of-type(8n+1) {
            min-height: 400px;
            grid-area: 1 / 1 / 3 / 5;

            h3 {
                font-size: 1.75rem !important;
                font-weight: 800 !important;
            }
        }

        div:nth-of-type(8n+2) {
            grid-area: 3 / 1 / 4 / 3;
        }

        div:nth-of-type(8n+3) {
            grid-area: 4 / 1 / 5 / 3;
        }

        div:nth-of-type(8n+4) {
            grid-area: 3 / 3 / 5 / 5;
        }

        div:nth-of-type(8n+5) {
            grid-area: 5 / 1 / 7 / 3;
        }

        div:nth-of-type(8n+6) {
            grid-area: 5 / 3 / 6 / 5;
        }

        div:nth-of-type(8n+7) {
            grid-area: 6 / 3 / 7 / 5;
        }

        > div:nth-of-type(8n+8) {
            min-height: 400px;
            grid-area: 7 / 1 / 9 / 5;

            h3 {
                font-size: 1.75rem !important;
                font-weight: 800 !important;
            }
        }

        /* For items beyond the first 8 */

        & > div.e-loop-item:nth-of-type(n+9) {
            min-height: 300px;
            grid-column: span 2;
            grid-row: span 1;
        }

    }


}

/* Ipad*/
@media screen and (max-width: 767px) {


}

/* iPhone 6/7/8 PLUS*/
@media screen and (max-width: 414px) {

    .um-post-archive .elementor-loop-container.elementor-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;

        & > div.e-loop-item > div {
            height: 100% !important;
            min-height: 300px;

            h3 {
                font-family: "Open Sans", sans-serif;
                font-size: 1.25rem;
                font-weight: 700;
                line-height: 1.2;
            }
        }

        > div:nth-of-type(8n+1) {
            min-height: 400px;
            grid-area: 1 / 1 / 3 / 3;

            h3 {
                font-size: 1.75rem !important;
                font-weight: 800 !important;
            }
        }

        div:nth-of-type(8n+2) {
            grid-area: 3 / 1 / 4 / 3;
        }

        div:nth-of-type(8n+3) {
            grid-area: 4 / 1 / 5 / 3;
        }

        div:nth-of-type(8n+4) {
            grid-area: 5 / 1 / 7 / 3;
        }

        div:nth-of-type(8n+5) {
            grid-area: 7 / 1 / 8 / 3;
        }

        div:nth-of-type(8n+6) {
            grid-area: 8 / 1 / 9 / 3;
        }

        div:nth-of-type(8n+7) {
            grid-area: 9 / 1 / 10 / 3;
        }

        > div:nth-of-type(8n+8) {
            min-height: 400px;
            grid-area: 10 / 1 / 11 / 3;

            h3 {
                font-size: 1.75rem !important;
                font-weight: 800 !important;
            }
        }

        /* For items beyond the first 8 */

        & > div.e-loop-item:nth-of-type(n+9) {
            min-height: 300px;
            grid-column: span 2;
            grid-row: span 1;
        }

    }
}


/* ==========================================================================
   GALERIE
   ========================================================================== */

.ug-gallery-wrapper .ug-bullets {
    .ug-bullet {
        border: none;
        background: #EBEEF3;

        &.ug-bullet-active {
            border: none;
            background-color: var(--e-global-color-accent) !important;
        }
    }
}


/* =================================================================
 * ASL
   ================================================================= */

.top-partner {

}

/* =================================================================
 * breadcrumbs
   ================================================================= */

p#breadcrumbs {
    a:not(.breadcrumb_last) {
        color: var(--e-global-color-text);
        text-decoration: underline;
    }
}