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

.intro--automation {
    background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/Automation_Vernetzungstechnik.webp');
    background-position: center;
    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--automation h5 {
    color: var(--color-white);
}

.intro--automation h1 {
    padding-top: 15px; 
    color: var(--color-white);
    padding-bottom: 30px;
}




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


.gebäudetechnik-container {
    max-width: 1240px;
    padding: 0px 120px;
    margin-top: 120px;
}
.gebäudetechnik-container-flex {
    display: flex;
    margin-top: 40px;
    gap: calc(20px + 5%);
}
.gebäudetechnik-content {
    width: 47%
}
/*  --------------  */
/*  DIVIDING BANNER   */

.banner-elements {
    max-width: 1240px;
    margin-top: 70px;
    height: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-inline: 120px;
    margin-bottom: 0px;
}
.div-banner-element img{
    width: 18px;
}

.div-banner-element {
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner-elements ul{
    list-style-type: none; /* Remove the default bullet */
    padding-left: 0px; /* Adjust space for the image */
}

.banner-elements li {
    display: inline-block;
    margin-right: 50px;
    line-height: 2rem;
}
.banner-elements ul li {
    font-weight: 700;
    background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/Check_mark_green.svg');
    background-repeat: no-repeat;
    background-position: 0 5px; /* Adjust the position of the image */
    background-size: 20px 20px; /* Control the width and height of the image */
    padding-left: 25px; /* Space between the image and the text */
}


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

.schaltschrankbau-flex-50-50 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    max-width: 1240px;
    height: 480px;
    padding: 0px 120px;
    margin-inline: auto;
    margin-top: 120px;
    gap: 0px;
    position: relative; /* So that the absolute right container can reference it */
    z-index: 1; /* Ensure content is above the background */
}
.schaltschrankbau-flex-50-50--right {
    width: 50%;
    padding: 0px 0 0 80px;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content */
    height: 100%;
    
}
.schaltschrankbau-flex-50-50--right h5,
.schaltschrankbau-flex-50-50--right h2,
.schaltschrankbau-flex-50-50--right p {
    margin-left: 0;
}
.schaltschrankbau-text {
    margin-top: 30px;
}
.schaltschrankbau-flex-50-50--left {
    position: absolute;
    top: 0;
    right: 50%; /* Start from the center */
    left: 0; /* Stretch to the right end of the screen */
    background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/Automation_Vernetzungstechnik_2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 480px; /* Match the height of the left side */
    z-index: 0; /* Ensure the background image stays behind the content */
}

/*  --------------  */
.eplan-flex-50-50 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    max-width: 1240px;
    height: 400px;
    padding: 0px 120px;
    margin-inline:  auto;
    margin-bottom: 120px;
    gap: 0px;
    position: relative; /* So that the absolute right container can reference it */
    z-index: 1; /* Ensure content is above the background */   
}
.eplan-flex-50-50--left {
    width: 50%;
    padding: 60px 60px 0 0;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content */
    height: 100%;
}
.eplan-flex-50-50--left img {
    width: 40px;
    margin-left: 0;
    padding-bottom: 20px;
}
.eplan-flex-50-50--left h5,
.eplan-flex-50-50--left h2,
.eplan-flex-50-50--left p {
    margin-left: 0;
}
.eplan-text {
    margin-top: 30px;
}

.eplan-flex-50-50--right {
    position: absolute;
    top: 0;
    left: 50%; /* Start from the center */
    right: 0; /* Stretch to the right end of the screen */
    background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/Automation_Vernetzungstechnik_3.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 480px; /* Match the height of the left side */
    z-index: 0; /* Ensure the background image stays behind the content */
}



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

.container-smart-home {
    background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/Automation_Vernetzungstechnik_8.webp');
    background-position: 50% 10%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 250px;
    margin-bottom: 60px;
    padding-block: 100px;
    position: relative; 
}
.smart-home-flex-50-50 {
    max-width: 1240px;
    padding: 0px 120px;
    display: flex;
    position: relative; /* So that the absolute right container can reference it */
    z-index: 1; /* Ensure content is above the background */
}
.smart-home-flex-50-50--left {
    width: 50%;
    padding: 0px 60px 0 0;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content */
    height: 100%;   
}
.smart-home-flex-50-50--left h5,
.smart-home-flex-50-50--left h2,
.smart-home-flex-50-50--left p {
    color: var(--color-text);
    margin-left: 0;
}
.smart-home-text {
    margin-top: 30px;
}

.smart-home-flex-50-50--left h2 {
    color: var(--color-accent1);
}
.smart-home-flex-50-50--right {
    display: none;
}
/*  --------------  */

.container-homematic {
    max-width: 1240px;
    padding-inline: 120px;
}
.homematic-flex-50-50 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    gap: 0px; 
}
.homematic-flex-50-50--left {
    width: 55%;
    padding-right: 50px;
}
.homematic-flex-50-50--left img {
    width: 200px;
    margin-left: 0;
    padding-bottom: 20px;
}
.homematic-flex-50-50--left h3 {
    padding-bottom: 30px;
}
.homematic-flex-50-50--left h5,
.homematic-flex-50-50--left h3,
.homematic-flex-50-50--left p {
    margin-left: 0;
}
.homematic-flex-50-50--left p {
    padding-top: 15px;
}



.homematic-flex-50-50--right {
    width: 45%;
    background-color: var(--color-accent1);
}


.homematic-flex-50-50--right li {
    color: var(--color-white);
    text-align: left;
    padding-bottom: 15px;
}

.homematic-flex-50-50--right ul {
    list-style-type: none; /* Remove the default bullet */
    padding: 50px;
}


.homematic-flex-50-50--right ul li {
    font-weight: 700;
    background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/Check_mark_white.svg');
    background-repeat: no-repeat;
    background-position: 0 5px; /* Adjust the position of the image */
    background-size: 20px 20px; /* Control the width and height of the image */
    padding-left: 30px; /* Space between the image and the text */
}

/*  --------------  */
.container-knx-responsive {
    display: none;
}
.container-knx {
    background-color: var(--color-accent1);
    margin-top: 200px;
    padding-block: 0;
    position: relative; 
}
.knx-flex-50-50 {
    display: flex;
    flex-direction: row-reverse; /* Reverse the row direction to switch sides */
    justify-content: space-between;
    align-items: stretch;
    max-width: 1240px;
    height: 480px;
    padding: 0px 120px;
    margin: auto;
    gap: 0px;
    position: relative; /* So that the absolute left container can reference it */
    z-index: 1; /* Ensure content is above the background */
}
.knx-flex-50-50--right {
    width: 50%; /* Adjust width for flexibility */
    padding: 0 0 0 60px; /* Add padding to the left */
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content */
    height: 100%;
    z-index: 1; /* Ensure content is above the background */
}
.knx-flex-50-50--right h5,
.knx-flex-50-50--right h2,
.knx-flex-50-50--right p {
    color: var(--color-white);
    margin-left: 0;
}
.knx-text {
    padding-top: 30px;
}
.knx-flex-50-50--left {
    position: absolute;
    top: 0;
    right: 50%; /* Start from the center */
    left: 0; /* Stretch to the left end of the screen */
    background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/Automation_Vernetzungstechnik_7.webp');
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    height: 480px; /* Match the height of the right side */
    z-index: 0; /* Ensure the background image stays behind the content */
}

/*-----------------*/
@media(min-width: 1400px) {
    .intro--automation {
        margin-top: 105px;
    }
}
@media(max-width: 1220px) {
    .schaltschrankbau-flex-50-50--right {
        padding: 0px 0 0 60px;
    }
}



@media(max-width: 1024px) {
    .intro--automation {
        margin-top: 70px;
    }
    .gebäudetechnik-container {
        margin-top: 40px;
    }
    .gebäudetechnik-container {
        max-width: 1240px;
        padding: 80px 20px 60px 20px;
    }

    /*  DIVIDING BANNER   */
    .banner-elements {
        padding-inline: 20px;
        padding-bottom: 100px;
        margin-top: 10px;
    }

    /*------------*/
    .schaltschrankbau-flex-50-50 {
        padding: 0px 20px;
    }
    .schaltschrankbau-flex-50-50--right {
        padding: 0px 0 0 40px;
    }
    /*  --------------  */
    .eplan-flex-50-50 {
        padding: 0px 20px;
    }
    .smart-home-flex-50-50 {
        padding: 0px 20px;
    }
    .smart-home-flex-50-50--left {
        width: 50%;
        padding: 0px;
    }
    .container-homematic {
        max-width: 1240px;
        padding-inline: 20px;
    }
   
    .knx-flex-50-50 {
        padding: 0px 20px;
    }
    .knx-flex-50-50--right {
        width: 60%; /* Adjust width for flexibility */
        padding: 0 0 0 60px; /* Add padding to the left */
    }
}

@media(max-width: 850px) {

    .intro--automation {
        margin-top: 63px;
    }

    .schaltschrankbau-flex-50-50--right {
        padding: 0px 0 0 20px;
    }
    .eplan-flex-50-50--left {
        width: 50%;
        padding: 60px 40px 0 0;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Vertically center the content */
        height: 100%;
    }
    
    
    .smart-home-flex-50-50--left {
        width: 59%;
        padding: 0px;
    }
    .homematic-flex-50-50--right ul {
        padding: 30px;
    }
} 



    
/* Add media query for smaller screens */
@media (max-width: 768px) {
    .gebäudetechnik-container {
        margin-top: 0px;
    }
    .schaltschrankbau-flex-50-50 {
        display: flex;
        flex-direction: column-reverse; /* Switch to column layout with images below */
        padding: 0 0px; /* Reduce padding for smaller screens */
        height: auto; /* Allow height to adjust dynamically */
        margin-top: 70px;
    }

    .schaltschrankbau-flex-50-50--left {
        position: relative; /* Reset position to static for proper stacking */
        width: 100%; /* Make images span full width */
        height: 400px; /* Adjust height to keep proportions */
        background-size: cover;
        background-position: center;
    }

    .schaltschrankbau-flex-50-50--right {
        width: 100%; /* Make text span full width */
        padding: 0px 20px; /* Add padding for readability */
        padding-bottom: 30px;
    }

    .schaltschrankbau-flex-50-50--right h5,
    .schaltschrankbau-flex-50-50--right h2,
    .schaltschrankbau-flex-50-50--right p {
        margin-left: 0; /* Ensure text aligns to the left */
    }
    
    .eplan-flex-50-50 {
        display: flex;
        flex-direction: column; /* Switch to column layout with images below */
        padding: 60px 0px 30px 0px; /* Reduce padding for smaller screens */
        height: auto; /* Allow height to adjust dynamically */
        margin-bottom: 0px;
        width: 100%;
    }

    
    .eplan-flex-50-50--right {
        position: relative; /* Reset position to static for proper stacking */
        width: 100vw; /* Make images span full width */
        height: 400px; /* Adjust height to keep proportions */
        background-size: cover;
        background-position: center;
        left:0;
        margin: 0;
    }

    
    .eplan-flex-50-50--left {
        width: 100%; /* Make text span full width */
        padding: 0px 20px 30px 20px;
    }

    
    .eplan-flex-50-50--left h5,
    .eplan-flex-50-50--left h2,
    .eplan-flex-50-50--left p {
        margin-left: 0; /* Ensure text aligns to the left */
    }
    .container-smart-home {
        background-image: none;
        margin-top: 80px;
        padding-block: 0px;
    }
   
    .smart-home-flex-50-50 {
        display: flex;
        flex-direction: column; /* Stack text and image vertically */
         /* Adjust padding for smaller screens */
         /* Allow height to adjust dynamically */
        padding-inline: 0;
        margin-top: 0;
        background-image: none;
    }

    .smart-home-flex-50-50--left {
        width: 100%; /* Text spans full width */
        padding: 0px 20px 30px; /* Remove left padding for full-width text */

    }

    .smart-home-flex-50-50--right {
        display: block;
        height: fit-content; /* Adjust height for the background image */
        margin: 0; /* Remove any default margins */
    }
    .smart-home-flex-50-50--right img {
        margin-inline: 0px;
        width: 100%;
    }

    .homematic-flex-50-50 {
        flex-direction: column;
    }
    .homematic-flex-50-50--left {
        width: 100%;
        padding-right: 0px;
        padding-bottom: 30px;
    }
    .homematic-flex-50-50--right {
        width: 100%;
    }
}
    

@media(max-width: 650px) {
    .intro--automation {
        margin-top: 55px;
    }
    .gebäudetechnik-container-flex {
        flex-direction: column;
        gap: 0;
    }
    .gebäudetechnik-content {
        width: 100%
    }
    .homematic-flex-50-50--left img {
        width: 170px;
    }
    .container-knx {
        display: none;
    }
    .container-knx-responsive {
        margin-top: 100px;
        display: block;
        background-color: var(--color-accent1);
    }
    .container-knx-responsive img {
        padding: 70px;
    }
    .knx-responsive-text {
        padding-inline: 20px;
        padding-bottom: 60px;
    }
    .knx-text-responsive {
        margin-top: 30px;
    }
    .knx-responsive-text h5,
    .knx-responsive-text h2,
    .knx-responsive-text p {
        color: var(--color-white);
    }
}

@media (max-width: 600px) {
    .gebäudetechnik-container {
        padding: 60px 20px 30px 20px;
    }
    .gebäudetechnik-container-flex {
        flex-direction: column;
        gap: 0;
    }
    


    /*  DIVIDING BANNER   */

    .banner-elements {
        flex-direction: column;
        padding-inline: 20px;
        padding-bottom: 130px;
    }
    .div-banner-element {
        margin-left: 0;
    }
    .div-banner-element img {
        margin-right: 9px;
    }


}