/*-----------------------------------------------------------------------------------*/
/*---------------------ROOT---------------------*/
/*-----------------------------------------------------------------------------------*/

:root {
    --global-kb-spacing-xxs: 5px;
    --global-kb-spacing-xs: 10px;
    --global-kb-spacing-sm: 20px;
    --global-kb-spacing-md: 40px;
    --global-kb-spacing-lg: 60px;
    --global-kb-spacing-xl: 80px;
    --global-kb-spacing-xxl: 100px;
    --global-kb-spacing-3xl: 120px;
    --global-kb-spacing-5xl: 160px;

    /* --global-font-size-small: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
    --global-font-size-medium: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
    --global-font-size-large: clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
    --global-font-size-larger: clamp(2rem, 1.6rem + 1vw, 2.5rem);
    --global-font-size-xxlarge: clamp(2.25rem, 1.728rem + 1.63vw, 3rem); */
}
/*-----------------------------------------------------------------------------------*/
/*---------------------GENERAL---------------------*/
/*-----------------------------------------------------------------------------------*/
.button.kb-btn-global-outline:not(.has-background):hover {
    background-color: var(--global-palette1);
}
.button.button-style-outline:not(.has-background):hover, #main-header .header-button.button-style-outline:hover {
    background-color: var(--global-palette1) !important;
}
.mobile-header-button-wrap .mobile-header-button-inner-wrap .mobile-header-button.button-style-outline {
    border: 2px solid var(--global-palette1);
}
.button.kb-btn-global-fill {
    font-weight: 700;
    border-radius: 0;
    padding: .2em;
    gap: .2em;
    background: linear-gradient(
        transparent 0%, transparent 60%, 
        var(--global-palette-btn-bg) 60%, var(--global-palette-btn-bg) 90%,
        transparent 90%, transparent 100% 
        );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 200% 50%;
    transition: all ease-in .3s;
}
/* FIXME: hover ani doesn't work, cuz we need to set background again on hover; otherwise f'ing kadence applies other bg */
.button.kb-btn-global-fill:hover {
    color: var(--global-palette3);
    background: linear-gradient(
        transparent 0%, transparent 60%, 
        var(--global-palette-btn-bg) 60%, var(--global-palette-btn-bg) 90%,
        transparent 90%, transparent 100% 
        );
    background-position: 100% 50%;
}


.bordered-section > *:first-child {
    border-left: 1px solid var(--global-palette4);
}
.bordered-section > *:last-child {
    border-right: 1px solid var(--global-palette4);
}
.bordered-grid .kb-query-grid-wrap > *,
.bordered-grid .kt-row-column-wrap > * {
    margin-bottom: -1px;
    margin-right: -1px;
}
/* last two elements for 2col view */
.bordered-grid .kb-query-grid-wrap > *:nth-last-child(1), 
.bordered-grid .kb-query-grid-wrap > *:nth-last-child(1):nth-child(odd),
.bordered-grid .kb-query-grid-wrap > *:nth-last-child(2):nth-child(odd) {
       margin-bottom: 0;
}
.bordered-grid .kt-row-column-wrap > *:nth-last-child(1), 
.bordered-grid .kt-row-column-wrap > *:nth-last-child(1):nth-child(odd),
.bordered-grid .kt-row-column-wrap > *:nth-last-child(2):nth-child(odd) {
       margin-bottom: 0;
}
.error404 .content-area {
    margin: 0;
}
/*-----------------------------------------------------------------------------------*/
/*---------------------KEYVISUAL---------------------*/
/*-----------------------------------------------------------------------------------*/
/* Hero */
.content-wrap #hero-sun .kt-row-overlay-normal {
    background-size: 200% 120%;
    background-position: -40% 50%;
    transform: scaleX(0) translateX(100px);
    opacity: 0;
    transform-origin: 100% 50%;
    transition: all 3s ease-in-out;
}
@media (min-width: 768px) {
    .content-wrap #hero-sun .kt-row-overlay-normal {
        background-size: 200% 200%;
        background-position: -30% 50%;
    }
    
}
.content-wrap #hero-sun.animate .kt-row-overlay-normal {
    transform: scaleX(1) translateX(0);
    opacity: 1;
}

/* BG Bottom */
.bg-sun-bottom.kt-row-has-bg > .kt-row-layout-overlay {
    background-position: 50% -90%;
}

/*-----------------------------------------------------------------------------------*/
/*---------------------Leistungen Cards---------------------*/
/*-----------------------------------------------------------------------------------*/
.leistungen-card-inner > .kt-inside-inner-col {
    overflow: hidden;
}
.leistungen-card-inner > .kt-inside-inner-col::before {
    background-position: 135% 50%;
    transform-origin: 0 50%;
    transform: scaleX(0) translateX(-100px);
    opacity: 0;
    transition: all .6s ease-in-out;
}
.leistungen-card-inner:hover > .kt-inside-inner-col::before {
    transform: scaleX(1) translateX(0);
    opacity: .5;
}
/*-----------------------------------------------------------------------------------*/
/*---------------------TESTIMONIAL SLIDER---------------------*/
/*-----------------------------------------------------------------------------------*/
.testimonial-slider {
    backdrop-filter: blur(40px);
}
.testimonial-slider li[aria-hidden="true"] {
    opacity: .5;
}

/*-----------------------------------------------------------------------------------*/
/*---------------------JOBS LISTING---------------------*/
/*-----------------------------------------------------------------------------------*/
body .job-listing .no-jobs-available {
    background-color: transparent;
    border: 0;
    padding: 40px;  
    color: var(--global-palette3);
    font-size: 18px;
    font-weight: 700;
}
body .job-listing .job-preview {
    border-width: 1px;
    border-right-width: 0;
    border-left-width: 0;
    border-top-width: 0;
}
body .job-listing .job-preview:last-child {
    border-bottom-width: 0;
}
body .job-listing .job-preview h3 {
    font-size: var(--global-kb-font-size-lg);
    color: var(--global-palette3);
}
body .job-listing .job-preview .job-content {
    padding: 40px 20px 40px 40px;
}
body .job-listing .job-preview .job-content .job-additional-information {
    font-size: 18px;
}
body .job-listing .job-preview .job-cta {
    padding: 40px 40px 40px 20px;
    width: 20%;
    text-transform: none;
}
body .job-listing .job-preview .job-cta .apply-btn {
    padding: 20px;
    line-height: 20px;
    text-transform: none;
    font-size: 18px;
}

@media (max-width: 1024px) {
    body .job-listing .job-preview {
        display: flex;
        flex-direction: column;
    }
    body .job-listing .job-preview .job-cta,
    body .job-listing .job-preview .job-content {
        width: 100%;
        padding: 20px;
    }
    body .job-listing .job-preview .job-cta .apply-btn {
        padding: 12px;
    }
}
/*-----------------------------------------------------------------------------------*/
/*---------------------JOBS SINLGE---------------------*/
/*-----------------------------------------------------------------------------------*/
.position_title .jobs-row-input {
    font-family: var(--global-heading-font-family);
    letter-spacing: -0.04em;
    line-height: 1 !important;
    font-weight: 700;
}

body .job-post .jobs-row .jobs-row-label span {
    border-color: var(--global-palette1) !important;
}
.job-post .jobs-row.position_logo .jobs-row-input img {
    margin-top: 2rem !important;
}
/*-----------------------------------------------------------------------------------*/
/*---------------------JOBS MODAL---------------------*/
/*-----------------------------------------------------------------------------------*/
.job-post .jobs-modal .jobs-modal-content {
    background: var(--global-palette5);
}
.job-post .jobs-modal .modal-close {
    background: transparent;
}
.job-post .jobs-modal-form .modal-title {
    color: var(--global-palette3);
    font-family: var(--global-heading-font-family);
    letter-spacing: -0.03em;
    line-height: 1;
    font-size: var(--global-kb-font-size-lg);
}
body .job-post .jp-apply-button,
.job-post .jobs-modal-form .job-submit {
    text-transform: none;
    font-weight: 400;
}
.job-post .jobs-modal-form .modal-input-text,
.job-post .jobs-modal-form .modal-input-fileinput,
.job-post .jobs-modal-form .modal-input-fileinput.multiple {
    background: var(--global-palette5);
    border: 2px solid var(--global-palette3);
    color: var(--global-palette3);
    border-radius: 0;
    padding: 10px;
    line-height: 20px;
    font-size: 18px;
    height: auto;
}
.job-post .jobs-modal-form .modal-input-text:focus,
.job-post .jobs-modal-form .modal-input-fileinput:focus,
.job-post .jobs-modal-form .modal-input-fileinput.multiple:focus {
    box-shadow: 0 0 10px rgba(0 0 0 / .4);
}
.job-post .jobs-modal-form .modal-input-fileinput,
.job-post .jobs-modal-form .modal-input-fileinput.multiple {
    padding: 2px 4px;
}
.job-post .required_field_notice .input-paragraph {
    color: var(--global-palette3);
}
/*-----------------------------------------------------------------------------------*/
/*---------------------FOOTER---------------------*/
/*-----------------------------------------------------------------------------------*/
.copyright {
    color: var(--global-palette5);
}
@media (max-width: 767px) {
    .copyright {
        font-size: var(--global-kb-font-size-sm);
    }
}
/*-----------------------------------------------------------------------------------*/
/*---------------------DROPDOWN---------------------*/
/*-----------------------------------------------------------------------------------*/
.header-navigation ul ul.sub-menu {
    border: 1px solid var(--global-palette4);
    border-radius: 6px;
    padding: 3px;
}
/*-----------------------------------------------------------------------------------*/
/*---------------------OFFCANVAS MENU---------------------*/
/*-----------------------------------------------------------------------------------*/
.popup-drawer .drawer-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--global-palette4);
}

.drawer-nav-drop-wrap .drawer-sub-toggle {
    font-size: 24px;
}