/*
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 */

body {
    margin: 0;
}

p, h1, h2, h3, h4, h5, h6 {
    -moz-hyphens: manual;
    -o-hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}

p {
    padding: 0;
    margin: 0;
}


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

.elementor-field-subgroup:not(.elementor-subgroup-inline) .elementor-field-option {

    margin: 7px 0 10px 4px;
}

label {

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

.cls-1 {
    display: none;
}


/* =================================================================
 * Elementor Classes
   ================================================================= */

/* atomic */

.btn-primary.e-button-base {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 4px;
    color: #000000 !important;

    &:after {
        content: url("https://martin-hron.um-dev.de/wp-content/uploads/2025/09/icon_arrow.svg");
        transition: all 0.33s ease;
        font-size: 0.5em;
    }

    &:hover {
        &:after {
            transform: translateX(4px);
        }
    }
}

.text-large-regular {
    @media screen and (max-width: 1023px) {
        hyphens: auto;
    }
}

.um-mix-blend-mode {
    mix-blend-mode: difference;
    color: white;
}

.show-image:hover img {

    @media screen and (min-width: 768px) {
        display: block;
    }
}

/* headlines */


/* header*/


.header-primary {
    mix-blend-mode: difference;
    color: white;

    a.home {
        opacity: 1;
        transition: opacity 0.4s ease;
        z-index: 10000;

        @media screen and (max-width: 767px) {
            &.menu-open {
                /* TODO: alternative zu opacity and display property finden */
                opacity: 0;
                display: none;
            }
        }


    }


    #menu-toggle {
        cursor: pointer;
        transform-origin: bottom right;
        transition: transform 0.4s ease;
        z-index: 100;

        &.rotated {
            transform: rotate(90deg) translateY(-56%);
        }
    }

    #main-menu {
        right: calc(-100% - var(--spacing-inline));
        transition: right 0.4s ease;
        width: 100%;

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

            nav {
                width: 100%;

                ul {
                    justify-content: space-between;
                    width: 100%;

                    li a {
                        margin: 0;
                    }

                    &:after {
                        display: none !important;
                    }
                }
            }
        }

        nav.elementor-nav-menu--main {

            ul.elementor-nav-menu {
                flex-wrap: nowrap;

                li.menu-item {

                    transition: transform 0.2s ease;

                    &:hover {
                        transform: scale(0.9);
                    }


                }
            }
        }
    }

    #main-menu.active {
        right: 0;

        nav.elementor-nav-menu--main {
            ul.elementor-nav-menu {

                li.menu-item {
                    opacity: 1;
                }
            }
        }
    }
}


/* footer */

.footer-menu {
    ul {
        flex-wrap: nowrap;
        white-space: nowrap;
        justify-content: space-between;
        align-items: flex-end;
    }
}


/* contact form */

.contact-form {

    label[for="form-field-Datenschutz"] {
        font-size: var(--paragraph-small) !important;
    }

    input,
    textarea {
        padding: 0 0 var(--spacing-sm) 0 !important;
        font-family: var(--global-font-family) !important;

        &:focus {
            box-shadow: none !important;
        }
    }

    ::placeholder {
        color: var(--text-black) !important;
        opacity: 1 !important;
    }
}

/* accordion */

.accordion-leistungen-list {
    list-style: none;
    padding-inline-start: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}


.e-n-accordion-item-title {

    svg {
        transition: transform 0.3s ease;
    }

    &:hover {

        svg {
            transform: translateX(4px);

        }
    }
}

/* special Section */

.netzwerk-section {
    svg {
        transition: transform 0.3s ease;
    }

    &:hover {

        svg {
            transform: translateX(4px);

        }
    }
}

.professions-section .greyscale {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}


/* =================================================================
 * Videobackground
   ================================================================= */

.slow-network-message,
.vimeo-message {

    position: absolute;
    bottom: var(--spacing-inline);
    left: var(--spacing-inline);
    padding: 16px 12px;
    border-radius: 8px;
    color: white;
    font-family: var(--global-font-family);
    letter-spacing: 0.6px;
    font-size: 0.68em;


    a {
        color: white !important;
        text-decoration: underline !important;

        &:hover {
            color: black;
        }
    }

    .slow-network-close,
    .vimeo-message-close {
        position: absolute;
        top: 4px;
        right: 8px;
        cursor: pointer;
    }

    @media screen and (max-width: 767px) {
        display: none;
    }
}

button.mute-toggle {
    position: absolute;
    right: var(--spacing-inline);
    bottom: var(--spacing-inline);
    border: none !important;
    border-radius: 80px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 8px !important;

    svg {

        fill: white;
    }

    &:hover,
    &:focus {
        background: unset;
    }

    @media screen and (max-width: 767px) {
        display: none;
    }

}

.background-blur {
    background: none;
    backdrop-filter: blur(16px) saturate(1.4);
}

/* =================================================================
 * questions-and-answers
   ================================================================= */

#questions-and-answers {

    @media screen and (max-width: 1024px) {
        background-size: auto auto, auto auto, 100% auto;

    }

    @media screen and (max-width: 767px) {
        background-size: auto auto, auto auto, 140% auto;

    }
}