/*
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.1
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;
}

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

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;
}

.aspect-ratio-320-181 {
    aspect-ratio: 320 / 181;
}


/* =================================================================
 * 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;
    }
}


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

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

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

            textarea.elementor-field-textual.elementor-field {
                background: #F7F7F7;
                border: 2px solid;
            }
        }

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

            & ~ label {
                display: flex;
                align-items: center;
                gap: 8px;

                @media (max-width: 767px) {
                    display: inline;
                }

                &:before {
                    content: "";
                    display: block;
                    width: 16px;
                    height: 16px;
                    border: 2px solid #FF0000;
                    cursor: pointer;
                }

                &.checked:before {
                    background: #FF0000;
                }
            }
        }

    }
}

#schnellbewerbungform {
    form.elementor-form {


        input[type="checkbox"] {


            & ~ label {


                &:before {

                    border: 2px solid white;
                }

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

    }
}

#filter-stellenangebote {

    .filter-title {
        margin: 0
    }

    .bpfwe-taxonomy-wrapper {
        margin: 0;

        &:after {
            content: "";
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-100%);
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid rgb(255, 255, 255);
            pointer-events: none;
        }
    }

    .flex-wrapper {
        position: relative
    }

    select {
        background: red !important;
        color: white;
        font-weight: bold;
        border: 2px solid black;
    }

    .form-tax {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;

        .flex-wrapper {

            @media (min-width: 767px) {
                width: unset;
            }
        }
    }
}

/* ================================================================
 * 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;
    }
}


/* um|pg Button Styles: */
.elementor-widget-button .elementor-widget-container .elementor-button-wrapper a.elementor-button {
    background-color: var(--e-global-color-5f8e313); /* red */
}

.elementor-widget-button .elementor-widget-container .elementor-button-wrapper a.elementor-button:hover {
    background-color: var(--e-global-color-46b0254); /* black */
    color: var(--e-global-color-823013a); /* white */
    border-color: var(--e-global-color-46b0254); /* black */
}

.elementor-widget-button.elementor-button-info .elementor-button-wrapper a.elementor-button {
    background-color: var(--e-global-color-823013a); /* white */
    border-color: var(--e-global-color-5f8e313); /* red */
    color: var(--e-global-color-46b0254); /* black */
}

.elementor-widget-button.elementor-button-info .elementor-button-wrapper a.elementor-button:hover {
    background-color: var(--e-global-color-5f8e313); /* red */
    color: var(--e-global-color-823013a); /* white */
    border-color: var(--e-global-color-5f8e313); /* red */
}

.elementor-widget-button.elementor-button-success .elementor-button-wrapper a.elementor-button {
    background-color: var(--e-global-color-46b0254); /* black */
    color: var(--e-global-color-823013a); /* white */
    border-color: var(--e-global-color-5f8e313); /* red */
}

.elementor-widget-button.elementor-button-success .elementor-button-wrapper a.elementor-button:hover {
    background-color: var(--e-global-color-5f8e313); /* red */
    color: var(--e-global-color-823013a); /* white */
    border-color: var(--e-global-color-5f8e313); /* red */
}

/* WPML Language Switcher - Show Only Language Code (Header Only) */
#stickyheaders .wpml-ls-native {
    font-size: 0 !important;
    line-height: 0 !important;
}

#stickyheaders .wpml-ls-native::before {
    content: attr(lang);
    font-size: 15px;
    line-height: normal;
    text-transform: uppercase;
}

/* For active languages */
#stickyheaders .wpml-ls-item-de .wpml-ls-native::before {
    content: "DE";
}

#stickyheaders .wpml-ls-item-en .wpml-ls-native::before {
    content: "EN";
}

/* Style for current/active language */
#stickyheaders .wpml-ls-current-language .wpml-ls-native::before {
    text-decoration: underline;
}

#stickyheaders .wpml-ls-item:not(.wpml-ls-current-language) .wpml-ls-native::before {
    color: #707070;
}