/*
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 {*/
/*  -moz-hyphens: auto;*/
/*  -o-hyphens: auto;*/
/*  -webkit-hyphens: auto;*/
/*  -ms-hyphens: auto;*/
/*  hyphens: auto;*/
/*}*/


:root {
    --_col-padding-left: calc(40px + 4vw);
    --_col-padding-right: calc(40px + 2vw);

    --_padding-inline: 40px;

    --_padding-top-hero: 152px;
    --_padding-bottom-hero: 152px;

    --_padding-top-primary: 128px;
    --_padding-bottom-primary: 128px;

    --_padding-top-large: 96px;
    --_padding-bottom-large: 96px;

    --_padding-top-standard: 56px;
    --_padding-bottom-standard: 56px;

    --_padding-top-small: 16px;
    --_padding-bottom-small: 16px;

    @media (max-width: 1023px) {
        --_padding-inline: 24px;

        --_padding-top-hero: 128px;
        --_padding-bottom-hero: 56px;

        --_padding-top-primary: 80px;
        --_padding-bottom-primary: 80px;

        --_padding-top-large: 56px;
        --_padding-bottom-large: 56px;

        --_padding-top-standard: 32px;
        --_padding-bottom-standard: 32px;

        --_padding-top-small: 16px;
        --_padding-bottom-small: 16px;
    }

    @media (max-width: 767px) {
        --_padding-inline: 24px;

        --_padding-top-hero: 128px;
        --_padding-bottom-hero: 56px;

        --_padding-top-primary: 80px;
        --_padding-bottom-primary: 80px;

        --_padding-top-large: 56px;
        --_padding-bottom-large: 56px;

        --_padding-top-standard: 32px;
        --_padding-bottom-standard: 32px;

        --_padding-top-small: 16px;
        --_padding-bottom-small: 16px;
    }
}

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

p {
    margin: 0 !important;
}


label {
    padding-left: 16px;
    vertical-align: baseline !important;
}

.hyphens-auto * {
    hyphens: auto;
}

.hyphens-manual * {
    hyphens: manual;
}

.elementor-field-group .elementor-field-textual:focus {
    box-shadow: none !important;
}

/* =================================================================
 * General
   ================================================================= */

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


/* =================================================================
 * Global Classes
   ================================================================= */

.video-section {
    @media (min-width: var(--container-max-width)) {
        aspect-ratio: 32 / 9;
    }
}

.blur-section {
    @media (min-width: 1800px) {
        aspect-ratio: 14 / 8;
    }
}

.elementor .e-con > .elementor-widget.text-max-width {
    max-width: 768px !important;
}

.elementor .e-con .elementor-widget.text-width-960 {
    max-width: 960px;
}

.elementor .e-con > .elementor-widget.text-width-760 {
    max-width: 760px !important;
}

.elementor .e-con > .elementor-widget.text-width-520 {
    max-width: 520px !important;
}

.color-primary {
    color: var(--e-global-color-primary);
}


.section-tablet-relative {
    @media (max-width: 1024px) {
        position: relative !important;
    }
}

.section-mobile-relative {
    @media (max-width: 767px) {
        position: relative !important;
    }
}

.elementor-field-group .elementor-field-textual::placeholder {
    opacity: 1 !important;
}


/* =================================================================
 * Formular
   ================================================================= */
#contactform, #schnellbewerbungform {

    form.elementor-form {
        .elementor-field-type-textarea {

            label {
                height: auto;
                margin: 0 0 8px 0;
                overflow: visible;
                padding: 6px 16px;
                position: relative;
                top: unset;
                width: auto;
                clip: unset;
                border: 0;
            }

            textarea.elementor-field-textual.elementor-field {
                background: white;
                border-width: 3px !important;
                border-color: var(--e-global-color-94abe14);
                border-radius: 10px;
            }
        }

        input[type="checkbox"] {
            width: 0 !important;
            height: 0 !important;
            visibility: hidden;
            overflow: hidden;

            & ~ label {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 0 !important;


                &:before {
                    content: "";
                    display: block;
                    width: 24px;
                    height: 24px;
                    border: 2px solid var(--e-global-color-94abe14);
                    cursor: pointer;
                }

                &.checked:before {
                    background: var(--e-global-color-94abe14);
                }
            }
        }

        .elementor-field-type-upload {

            position: relative;
            margin-bottom: 40px;

            input {
                width: 0 !important;
                height: 0 !important;
                visibility: hidden;
                overflow: hidden;
                margin: -1px;
                padding: 0;
                position: absolute;
                top: -10000em;
                clip: rect(0, 0, 0, 0);
            }

            .selected-file-name {
                padding-inline-start: 24px;
                position: absolute;
                top: calc(100% + 8px);
                font-size: 0.8em;
            }

            label {

                display: flex;
                align-items: center;

                height: auto;
                position: static;
                width: fit-content;
                overflow: hidden;
                margin: 0;
                clip: unset;

                font-family: var(--e-global-typography-b68132f-font-family);
                font-size: var(--e-global-typography-b68132f-font-size);
                font-weight: var(--e-global-typography-b68132f-font-weight);
                text-transform: var(--e-global-typography-b68132f-text-transform);
                font-style: var(--e-global-typography-b68132f-font-style);
                line-height: var(--e-global-typography-b68132f-line-height);
                border-style: none;
                border-radius: 32px 32px 32px 32px;
                padding: 12px 24px!important;
                background-color: var(--e-global-color-b60b4bb);
                color: var(--e-global-color-823013a);

                &:hover {
                    background: var(--e-global-color-4d71f52);
                }

            }
        }

    }
}

/*#schnellbewerbungform {*/
/*    form.elementor-form {*/


/*        input[type="checkbox"] {*/


/*            & ~ label {*/


/*                &:before {*/

/*                    border: 2px solid white;*/
/*                }*/

/*                &.checked:before {*/
/*                    background: white;*/
/*                }*/
/*            }*/
/*        }*/

/*    }*/
/*}*/

/* =================================================================
 * Button
   ================================================================= */

.uc_more_btn:has(.icon-btn),
.elementor-button:has(.icon-btn) {

    .elementor-button-content-wrapper {
        align-items: center;
        gap: 12px;
    }

    display: flex !important;
    width: fit-content;
    gap: 12px;
    align-items: center;

    svg {
        fill: none !important;
        width: 24px;
        aspect-ratio: 1;
        margin-right: -12px;

        path:not(:last-child) {
            fill: none !important;
        }

    }


    svg.icon-btn path {
        transition: transform 0.3s ease;
    }

    &:hover {
        svg.icon-btn {
            path:first-child {
                transform: translateX(4px);
            }
        }

    }
}

.elementor-field-label:has(.icon-btn) {

    .elementor-button-content-wrapper {
        align-items: center;
        gap: 12px;
    }

    display: flex !important;
    width: fit-content;
    gap: 12px;
    align-items: center;

    svg {
        fill: none !important;
        width: 24px;
        aspect-ratio: 1;
        margin-right: -12px;
        margin-block-start: -8px;


        path:not(:last-child) {
            fill: none !important;
        }

    }


    svg.icon-btn path {
        transition: transform 0.3s ease;
    }

    &:hover {
        svg.icon-btn {
            path:last-child {
                transform: translateY(-4px);
            }
        }

    }
}

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

#stickyheaders {
    -webkit-transition: all 0.34s ease;
    transition: all 0.34s ease;
    -o-transition: all 0.34s ease;
    transition: all 0.34s ease;
    transition: all 0.34s ease, -webkit-transform 0.34s ease;
    width: 100% !important;

    .e-con-inner {
        transition: all 0.34s ease, -webkit-transform 0.34s ease;

        .um_logo, .um_icon-burger {
            transition: all 0.34s ease, -webkit-transform 0.34s ease;
        }
    }
}

.headerup {

    min-height: unset !important;

    .e-con-inner {
        padding-block: 4px !important;

        .um_logo, .um_icon-burger {
            scale: 0.8;
        }
    }

}

.scrolled-up {
    background: transparent !important;
}


/* =================================================================
 * NAVBAR
   ================================================================= */
.elementor-element-d228ec8 ul > li > ul > li {
    font-size: var(--e-global-typography-02e1640-font-size);
}


/* =================================================================
 * Background Blur Gradient Class (um|pg)
   ================================================================= */
.elementor-element.background-blur::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 0;

    /* Standard: rechteckige Maske */
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: destination-in;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    mask-composite: intersect;

}

/* =================================================================
 * Card Carousel
   ================================================================= */

.owl-stage {
    display: flex;
    align-items: stretch;

    .owl-item {
        display: flex;
        align-items: stretch;

        .ue-carousel-item {
            display: flex;
            flex-direction: column;
            height: 100%;

            .uc_classic_carousel_content {
                height: 100%;
                justify-content: space-between;
            }
        }
    }
}


/* outfit-100 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Outfit";
    font-style: normal;
    font-weight: 100;
    src: url("fonts/outfit-v14-latin-100.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-200 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Outfit";
    font-style: normal;
    font-weight: 200;
    src: url("fonts/outfit-v14-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300;
    src: url("fonts/outfit-v14-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Outfit";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/outfit-v14-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Outfit";
    font-style: normal;
    font-weight: 500;
    src: url("fonts/outfit-v14-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Outfit";
    font-style: normal;
    font-weight: 600;
    src: url("fonts/outfit-v14-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Outfit";
    font-style: normal;
    font-weight: 700;
    src: url("fonts/outfit-v14-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Outfit";
    font-style: normal;
    font-weight: 800;
    src: url("fonts/outfit-v14-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-900 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Outfit";
    font-style: normal;
    font-weight: 900;
    src: url("fonts/outfit-v14-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Basis-Style für UL und OL */
ul,
ol {
    padding-top: 16px;
    padding-bottom: 16px;
    margin: 0;
}

/* ---------- Tick-Variante ---------- */
ul.tick,
ol.tick {
    list-style: none; /* normale Bullets/Zahlen entfernen */
    padding-left: 0;
}

ul.tick li,
ol.tick li {
    position: relative;
    padding-left: 1.5em;
}

ul.tick li::before,
ol.tick li::before {
    content: "\f00c"; /* Font Awesome Häkchen */
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* notwendig für Solid Icons */
    position: absolute;
    left: 12px; /* dein gewünschter Abstand */
    top: 0;
}

/* Farbklassen nur für Häkchen */
.listitemred.tick li::before {
    color: var(--e-global-color-primary);
}

.listitemwhite.tick li::before {
    color: var(--e-global-color-secondary);
}

.listitemblack.tick li::before {
    color: var(--e-global-color-text);
}

/* ---------- Nicht-Tick-Variante ---------- */
/* ::marker färbt die Standard-Bullets/Zahlen */
.listitemred:not(.tick) li::marker {
    color: var(--e-global-color-primary);
}

.listitemwhite:not(.tick) li::marker {
    color: var(--e-global-color-secondary);
}

.listitemblack:not(.tick) li::marker {
    color: var(--e-global-color-text);
}


.header_color_hover {
    img {
        filter: brightness(100%) contrast(100%) saturate(0%) blur(0px) hue-rotate(0deg);

        &:hover {
            filter: none;
        }

        transition: all 300ms;
    }
}