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

/*   About Us PAGE   */

.intro--ueber-uns {
    background-image: url("https://awstorageus1.blob.core.windows.net/meurer-public/images/Robert-Meurer-Office.jpg");
    background-position: 50% 70%;
    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-white);
    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--ueber-uns h5 {
    color: var(--color-white);
}
.intro--ueber-uns h1 {
    padding-top: 15px; 
    color: var(--color-white);
    padding-bottom: 30px;
}


/*---------------*/
.container--philosophie-flex {
    padding-block: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1240px;
    padding: 80px 120px;
    margin: auto;
    gap: 40px;
}
.left-title {
    width: 30%;
    margin-left: 0;
    
}
.left-title h5 {
    color: var(--color-text)
}
.right-text {
    width: 70%;
}


/*------------------*/
.accordion-container {
    max-width: 1240px;
    padding-inline: 120px;
}


.faq__accordion {
    
    border-bottom: 1px solid #011038;
  }
  .faq__accordion-q {
    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;
  }
  
  .faq__accordion h4 {
    margin-left: 0;
    margin-right: 20px;
    font-family: "inter-bold";
    color: var(--color-text)
    
  }
  
  .faq__accordion svg {
    margin-left: 0;
  }
  .faq__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;
  }
  .faq__accordion.active .panel {
    max-height: 300px;
    animation: fade 0.5s ease-in-out;
  }
  .faq__accordion .panel p {
    font-family: "inter-reg";
    padding: 0px 0px 35px 0px;
    
  }
  @keyframes fade {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  /*  End of  FAQ-ACCORDION  */
  
  .mobile-faq-container {
    display: none;
  }
  
  
/*------------------*/
.historie {
    max-width: 1240px;
    height: auto;
    padding-inline: 120px;
    text-align: center;
    padding-top: 80px;
    margin-bottom: 100px;
    
}

.timeline-container {
    position: relative;
    padding-block: 40px;
    margin-bottom: 50px;
    width: 100%;
    margin: 0 auto;
    height: 50px; /* Ensure the container has enough height */
}

.timeline-line {
    position: absolute;
    top: 85px; /* Position the line centrally relative to the circles */
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-accent1); /* Make sure the color is visible */
    z-index: 1; /* Ensure the line appears below the circles */
}

.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2; /* Ensure the circles are above the line */
}

.timeline li {
    position: relative;
    cursor: pointer;
    text-align: center;
    color: var(--color-accent1);
    transition: color 0.3s;
    
}

.timeline li::before {
    content: '';
    position: absolute;
    top: 38px; /* Position the on the line */
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    background-color: var(--color-accent1);
    border-radius: 50%;
    z-index: 2; /* Ensure the circle is above the line */
}

.timeline li.active::before {
    background-color: var(--color-accent2);
    position: absolute;
    top: 36px; /* Position the on the line */
    width: 20px;
    height: 20px;
}

.timeline li.active {
    color: var(--color-text);
}

.timeline li[data-slide="1"] {
    flex-grow: 0;
    flex-basis: 5%; /* Adjust to match timeline scale */
}

.timeline li[data-slide="2"] {
    flex-grow: 0;
    flex-basis: 10%;
}

.timeline li[data-slide="3"] {
    flex-grow: 0;
    flex-basis: 15%;
}

.timeline li[data-slide="4"] {
    flex-grow: 0;
    flex-basis: 30%;
}

.timeline li[data-slide="5"] {
    flex-grow: 0;
    flex-basis: 20%;
}

.timeline li[data-slide="6"] {
    flex-grow: 0;
    flex-basis: 10%;
}

.timeline li[data-slide="7"] {
    flex-grow: 0;
    flex-basis: 10%;
}

.slider-container {
    max-width: 1240px;
    position: relative;
    width: 100%;
    margin: 0;
    padding-bottom: 40px;
    height: auto;
    overflow: hidden;
}

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

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

.text-side, .image-side {
    box-sizing: border-box;
}
.text-side {
    text-align: left;
    width: 55%;
    padding: 50px 20px 20px 0px;
}
.image-side {
    width: 45%;
    padding: 20px 0px 20px 20px;
}
.image-side img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.controls {
    position: absolute;
    bottom: 0%; /* Adjust for visibility */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    z-index: 10; /* Ensures buttons are above other elements */
}

.controls button {
    border: none;
    padding: 10px; /* Simplified padding */
    cursor: pointer;
    background: transparent;
}

.prev {
    margin-right: 0;
}
.next {
    margin-left: 0;
}
.slide-line {
    position: static; /* Line will appear as a normal block element */
    margin-block: 10px;
    width: 100%;
    border: 1px solid var(--light-grey-underline);
}

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


.unser-team {
    max-width: 1240px;
    padding: 20px 120px 50px 120px;
}
.unser-team h5,
.unser-team h2 {
    text-align: center;
}
.unser-team h5 {
    color: var(--color-text);
}
.unser-team-text p {
    text-align: left;
}
.arbeitgeber-nehmer-flex {
    padding-block: 80px;
    display: flex;
    width: 100%;
    align-items: top;
    margin: auto;
    gap: 40px;
}
.arbeitgeber {width: 50%;}
.arbeitnehmer {width: 50%;}

.arbeitgeber-nehmer-flex-img {
    width: 100%;
}

.arbeitgeber-nehmer-flex h3 {
    padding-top: 40px;
}

.arbeitgeber-nehmer-flex p {
    padding-top: 15px;
    padding-bottom: 15px;
}

.arbeitgeber-nehmer-flex a {
    font-family: 'inter-bold';
}


/* Base styles for both images */
.mobile-image,
.desktop-image {
    width: 100%;
    height: auto;
    display: block;
}

/* By default, hide mobile image */
.mobile-image {
    display: none;
}


/*-----------------*/
@media(min-width: 1400px) {
    .intro--ueber-uns {
        margin-top: 105px;
    }
}

@media(max-width: 1024px) {
   
    .intro--ueber-uns {
        margin-top: 70px;
    }

    /*---------------*/
    .container--philosophie-flex {
        padding-block: 100px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        max-width: 1240px;
        padding: 80px 20px;
        margin: auto;
        gap: 40px;
    }


        /*------------------*/
    .accordion-container {
        max-width: 1240px;
        padding-inline: 20px;
    }

    .unser-team {
        padding: 20px 20px 50px 20px;
    }

        /*------------------*/
    .historie {
        max-width: 1240px;
        padding-inline: 0px;
        text-align: center;
        padding-top: 80px;
        margin-bottom: 100px;
    }
    .timeline-container {
        padding-inline: 20px;
    }
    .text-side {
        text-align: left;
        width: 55%;
        padding: 20px;
    }
    .text-side h5 {
        padding-top: 40px;
    }
    .text-side p {
        padding-bottom: 30px;
    }
    .image-side {
        width: 45%;
        padding: 20px;
    }
}
@media(max-width: 850px) {
    .intro--ueber-uns {
        margin-top: 63px;
    }
}   


@media(max-width: 768px) {
    .container--philosophie-flex {
        padding-block: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        max-width: 1240px;
        padding: 60px 20px 0 20px;
        margin: auto;
        gap: 40px;
    }
    .left-title {
        width: 100%;
        margin-left: 0;
    }
    .right-text {
        width: 100%;
    }
    

    /*---------*/
    .historie {
        max-width: 1240px;
        padding-inline: 0px;
        text-align: center;
        padding-top: 50px;
        margin-bottom: 50px;
    }
    .timeline-container {
        padding-inline: 20px;
    }
    .slide {
        min-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .text-side {
        text-align: left;
        width: 100%;
        padding: 20px;
        margin-right: 0;
        margin-left: 0px;
    }
    .image-side {
        width: 100%;
        padding: 0 0 15px 0;
        margin-left: 0;
        margin-right: 0px;
    }
    .image-side img {
        object-fit: contain;
    }

    .controls {
        top: 95%;
    }
    .prev {
        margin-left: auto;
        margin-right: 10px;
    }
    .next {
        margin-right: auto;
        margin-left: 10px;
    }
    
    /*-------*/
    .unser-team h5,
    .unser-team h2 {
        text-align: left;
    }
    .arbeitgeber-nehmer-flex {
        padding-block: 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin: auto;
        gap: 10px;
    
    }
    .arbeitgeber {
        width: 100%;
        margin-left: 0;
    }
    .arbeitgeber p {
        padding-right: 0px;
    }
    
    
    .arbeitgeber-nehmer-flex-img {
        object-fit: cover;
        margin-left: 0;
        margin-right: 0;
        padding-top: 40px;
    }
    .arbeitnehmer {
        width: 100%;
    }
}
@media(max-width: 650px) {

    .mobile-image {
        display: block;
    }
    .desktop-image {
        display: none;
    }

    .intro--ueber-uns {
        margin-top: 55px;
    }
}
@media(max-width: 480px) {
}