@import '/styles/global.css';
@import '/styles/HeaderManager.css';
@import '/styles/FooterManager.css';

.intro--karriere {
    background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/D_Karriere_1.webp');
    background-position: 50% 60%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 105px;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-text);
    height: 500px;
    border-bottom: 5px solid transparent;
    border-image: var(--color-gradient);
    border-image-slice: 1;
    text-shadow: 1px 1px 2px var(--light-black-shadowing-text);
}
.intro--karriere h5 {
    color: var(--color-white);
}
.intro--karriere h1 {
    padding-top: 15px; 
    color: var(--color-white);
    padding-bottom: 30px;
}


/*  --------------  */

.wir-suchen-container {
    text-align: center;
    max-width: 1240px;
    padding-inline: 120px;
    margin-top: 120px;
    margin-bottom: 0px;
}
/*  --------------  */
.careers__gallery {
    max-width: 1240px;
    padding-inline: 120px;
    margin-top: 60px;
}
.careers__gallery img {
    width: 100%;
}
.smaller-screens {
    display: none;
}
/*  --------------  */

.container__left-orentation {
    max-width: 1240px;
    padding-inline: 120px;
    margin-top: 120px;
}


.benefits-text {
    margin-top: 30px;
}
.icon-box-container {
    max-width: 1240px;
    padding-inline: 120px;
    margin-bottom: 120px;
}
.icon-box-flex {
    display: flex;
    flex-wrap: wrap;
}
.icon-box-item {
    width: 33%;
    padding: 40px 20px;
    text-align: center;
}
.icon-box-item img {
    width: 30px;
}

.icon-box-item h4 {
    padding-top: 10px;
    padding-bottom: 20px;
}

.icon-box-item p {
    line-height: 1.3rem;
}
.accordion-container {
    display: none;
}


/*  --------------  */
.employee-slider {
    background-color: var(--color-dropdowns-backgrd);
    width: 100%;
    height: auto;
    padding-inline:  max(0px, calc((100% - 1200px) / 2));
    position: relative;
}
.slider-container {
    max-width: 1240px;
    position: relative;
    width: 100%;
    margin: 0;
    height: auto;
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.slide {
    min-width: 100%;
    display: flex;
    align-items: center;
    padding-block: 60px;
}

.text-side, .image-side {
    box-sizing: border-box;
}
.text-side {
    text-align: left;
    width: 47%;
    padding: 20px 20px 20px 0px;
    margin-right: 0;
    margin-left: 100px;
}
.image-side {
    width: 47%;
    padding: 20px 0px 20px 20px;
    margin-left: 0;
    margin-right: 100px;
}

.image-side img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.controls {
    position: absolute;
    bottom: 50%;
    left: 40px;
    right: 40px;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%); 
}

.controls button {
    background-color: transparent;
    color: var(--color-text-light-grey);
    border: none;
    padding: 10px 0px;
    cursor: pointer; 
}
.prev {
    margin-left: 0;

}
.next {
    margin-right: 0;
}
.indicator-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.indicator-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #C4C6C7;
    transition: background-color 0.3s ease;
}

.indicator-dots .dot.active {
    background-color: var(--color-text);
}

/*-----------------*/

/*-----------------*/
.ausbildung-mobile {
    display: none;
}
.ausbildung-section {
    max-width: 1500px;
    padding-inline: 120px;
}
.ausbildung-container {
    max-width: 1240px;
    margin-top: 120px;
    margin-bottom: 120px;
    background-color: var(--color-accent1);
    height: 160px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
}
.ausbildung-container img{
    height: 160px;
    margin-left: 0;
}
.ausbildung-container h6,
.ausbildung-container h3 {
    color: var(--color-white);
    padding-bottom: 8px;
}
.ausbildung-container h3 {
    line-height: 1.6rem;
}
.IHK-banner-btn {
    
    font-family: "inter-bold";
    padding: 8px 25px;
}


/*-----------------*/
/*  OPEN POSITIONS   */
.background-color-positions {
    background-color: var(--light-grey-background);
    padding-block: 80px;
    margin-bottom: 0px
}
.position__outer-container {
    max-width: 1200px;
    text-align: left;
    padding: 0px 120px 0px 120px;
}
.country-selection {
    text-align: left;
    margin-left: 50px;
    margin-top: 30px;
}
.country-selection a {
    margin-left: 0;
    margin-right: 50px;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
}
.country-selection a:hover {
    text-decoration: underline;
}
.onclik {
    background: none;
    border: none;
    color: var(--colr-accent-a);
    font-weight: 700;
    text-align: center;
}
/*-----------------*/
.position__inner-container {
    max-width: 1160px;
    margin: auto;
    margin-top: 30px;
    padding-top: 30px;
}
.position__container {
    background-color: var();
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    margin: 10px 0px;
    border-radius: 3px;
    border-left: 8px solid var(--color-accent1);
    box-shadow: var(--box-shadow-med-grey);
} 
.position__container--left {
   display: block;
   margin-left: 0;
   padding-left: 40px;
   width: 75%;
}
.position__container--left h3 {
    padding-bottom: 15px;
    font-family: "inter-med";
    font-weight: 700;
    text-align: left;  
}
.subsection-flex {
    display: flex;
}
.subsection-flex img {
    display: inline;
    width: 15px;
    margin-right: 10px;
    object-fit: contain;
}
.subsection-flex p {
    display: inline;
    margin-right: 50px;
}
.pos-loc {
    margin-left: 0;
}
.pos-type {
    margin-left: 0;
}
.position__container--right {
    margin-right: 0px;
    padding-right: 40px;
}
.position__container--right a {
    cursor: pointer;
}




/*  --------------  */

.initiativ-container {
    width: 100%;
    text-align: center;
    padding-bottom: 150px;
    background-color: var(--light-grey-background);
    padding-top: 80px;
}
.initiativ-container h2 {
    color: var(--color-accent1);
    padding-bottom: 40px;
    padding-inline: 120px;
}
/*-----------------*/
@media(min-width: 1400px) {
    .intro--karriere {
        background-position: 50% 30%;
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: 105px;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--color-text);
        height: 500px;
        border-bottom: 5px solid transparent;
        border-image: var(--color-gradient);
        border-image-slice: 1;
    }
}

@media(max-width: 1024px) {
    .intro--karriere {
        background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/D_Karriere_1.webp');
        background-position: 50% 60%;
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: 70px;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--color-text);
        height: 500px;
        border-bottom: 5px solid transparent;
        border-image: var(--color-gradient);
        border-image-slice: 1;
    }
    .wir-suchen-container {
        max-width: 1240px;
        padding-inline: 20px;
        margin-top: 70px;
    }
    
    /*  --------------  */
    .careers__gallery {
        max-width: 1240px;
        padding-inline: 20px;
    }
    /*  --------------  */
    .container__left-orentation {
        max-width: 1240px;
        padding-inline: 20px;
        margin-top: 70px;
    }
    .icon-box-container {
        max-width: 1240px;
        padding-inline: 20px;
    }
    .icon-box-item {
        width: 33%;
        padding: 30px;
    }
    /*  --------------  */

    .ausbildung-section {
        max-width: 1500px;
        padding-inline: 20px;
    }
    .employee-slider {
        background-color: var(--color-dropdowns-backgrd);
        width: 100vw;
        padding: 0px 0px;
    }

    .position__outer-container {
        max-width: 1200px;
        text-align: left;
        padding: 0px 20px 0px 20px;
    }

    .initiativ-container h2 {
        padding-bottom: 40px;
        padding-inline: 20px;
    }

}

@media(max-width: 850px) {
    .intro--karriere {
        background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/M_Karriere_Hero.webp');
        background-position: 75% 60%;
        margin-top: 63px;
    }
    .position__container--left {
        display: block;
        margin-left: 0;
        padding-left: 20px;
        width: 75%;
     }
     .position__container--right {
        margin-right: 0px;
        padding-right: 20px;
    }
    .subsection-flex {
        display: flex;
        flex-direction: column;
    }
}

@media(max-width: 768px) {
    /*  --------------  */

    .wir-suchen-container {
        text-align: left;
        margin-block: 100px;
        margin-top: 70px;
    }

    /*  --------------  */
    .careers__gallery {
        max-width: 1240px;
        padding-inline: 0px;
    }
    /*  --------------  */
    .icon-box-item {
        width: 50%;
        padding: 20px;
        text-align: center;
    }
    /*---------*/
    .slide {
        min-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .text-side {
        text-align: left;
        width: 100%;
        padding: 0 20px 30px 20px;
        margin-right: 0;
        margin-left: 0px;
    }
    .image-side {
        width: 100%;
        padding: 0 0 30px 0;
        margin-left: 0;
        margin-right: 0px;
    }
    .controls {
        bottom: 0%;
    }
    .prev {
        margin-left: auto;
        margin-right: 10px;
    }
    .next {
        margin-right: auto;
        margin-left: 10px;
    }
    .indicator-dots {
        display: none;
    }
    /*---------*/
    .ausbildung-container {
        display: none;
    }
    .ausbildung-mobile {
        display: block;
        margin-top: 60px;
    }
    .description-mobile {
        background-color: var(--color-accent1);
        text-align: center;
        padding-bottom: 60px;
    }
    .description-mobile h5 {
        padding-top: 40px;
        padding-bottom: 10px;
        color: var(--color-white);
    }
    .description-mobile  h2 {
        padding-bottom: 30px;
        color: var(--color-white);
    }

    /*--------------------*/
    .position__container {
        background-color: var();
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 20px 10px;
        margin: 10px 0px;
        border-radius: 3px;
        border-left: 8px solid var(--color-accent1);
        box-shadow: var(--box-shadow-med-grey);
    }
    .position__container--left {
        display: block;
        margin-left: 0;
        padding-left: 20px;
        width: 100%;
     }
     .position__container--right {
        margin-block: 30px;
        padding-left: 20px;
        width: 100%;
    }
}

@media(max-width: 650px) {
    .intro--karriere {
        margin-top: 55px;
    }
    .larger-screens {
        display: none;
    }
    .smaller-screens {
        display: block;
    }
    .icon-box-container {
        display: none;
    }
    .responsive-benefits-list {
        display: block;
    }
    /*----------------*/
    /*------------------*/
    .accordion-container {
        display: block;
        max-width: 1240px;
        padding-inline: 0px;
        padding-bottom: 60px;
    }
    .benefits__accordion {
        border-bottom: 1px solid var(--light-grey-underline);
    }
    .benefit__accordion-item {
        margin-left: 0;
        margin-right: 0;
        padding: 18px 0px;
        cursor: pointer;
        transition: 0.4s;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 0;
    }
    
    .benefits__accordion h4 {
        margin-left: 0;
        margin-right: 20px;
        padding-inline: 20px;
        font-family: "inter-bold";
        color: var(--color-text)
    }
    
    .benefits__accordion svg {
        margin-right: 20px;
    }
    .benefits__accordion.active svg {
        transform: rotate(180deg);
    }
    svg {
        transition: transform 0.5s ease-in;
    }
    .panel {
        padding: 0px;
        margin: auto;
        max-height: 0;
        overflow: hidden;
        transition: 0.5s ease-in;
    }
    .benefits__accordion.active .panel {
        max-height: 300px;
        animation: fade 0.5s ease-in-out;
    }
    .benefits__accordion .panel p {
        font-family: "inter-reg";
        padding: 0px 20px 35px 20px;
      
    }
    @keyframes fade {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0px);
        }
    }
    /*  End of  FAQ-ACCORDION  */
    /*----------------*/
}
@media(max-width: 480px) {
    /*  --------------  */
    
    .icon-box-item {
        width: 100%;
        padding: 15px 0;
        text-align: left;
    }
    .icon-box-item img {
        width: 30px;
        margin-left: 0;
    }
    .icon-box-item h4 {
        padding: 5px 0 10px 0;
    }
}