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

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

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



/*  --------------  */
.photvoltaikanlangen-responsive {
    display: none;
}
.photvoltaikanlangen-flex-50-50 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    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 */
}
.photvoltaikanlangen-flex-50-50--right {
    width: 50%;
    padding: 0px 0 0 40px;
    margin-right: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content */
    height: 100%;
}
.photvoltaikanlangen-flex-50-50--right h5,
.photvoltaikanlangen-flex-50-50--right h2,
.photvoltaikanlangen-flex-50-50--right p {
    margin-left: 0;
}
.photvoltaikanlangen-text {
    margin-top: 30px; 
}
.photvoltaikanlangen-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/Erneuerbare_Energien_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 */
}

/*  --------------  */
.stromspeicher-responsive {
    display: none;
    margin-inline: 0;
}
.stromspeicher-flex-50-50 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1240px;
    height: 480px;
    padding: 0px 120px;
    margin:  auto;
    gap: 0px;
    position: relative; /* So that the absolute right container can reference it */
    z-index: 1; /* Ensure content is above the background */
    
}
.stromspeicher-flex-50-50--left {
    width: 50%;
    padding: 0px 30px 0 0;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content */
    height: 100%; 
}
.stromspeicher-flex-50-50--left h5,
.stromspeicher-flex-50-50--left h2,
.stromspeicher-flex-50-50--left p {
    margin-left: 0;
}
.stromspeicher-text {
    margin-top: 30px;
}
.stromspeicher-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/Erneuerbare_Energien_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-waermepumpen-responsive {
    display: none;
}
.container-waermepumpen {
    background-color: var(--color-accent1);
    margin-top: 250px;
    margin-bottom: 80px;
    padding-block: 0;
    position: relative; 
}
.waermepumpe-flex-50-50 {
    display: flex;
    flex-direction: row;
    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 right container can reference it */
    z-index: 1; /* Ensure content is above the background */
}
.waermepumpe-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%; 
}
.waermepumpe-flex-50-50--left h5,
.waermepumpe-flex-50-50--left h2,
.waermepumpe-flex-50-50--left p {
    color: var(--color-white);
    margin-left: 0;
}
.waermepumpe-text {
    margin-top: 30px;
}
.waermepumpe-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/Erneuerbare_Energien_4.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 */
}

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

.elektrofahrzeuge-title {
    max-width: 1240px;
    text-align: center;
    padding-inline: 120px;
    position: relative;
}
.elektrofahrzeuge-title h2 {
    padding-top: 15px; 
}
.text-left {
    text-align: left;
}
.privat-gewerbe-flex {
    max-width: 1240px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
}
.privat-left {
    width: 47%;
    
}
.privat-left img {
    width: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    height: 250px;
    margin-left: 0;
}
.privat-left h4 {
    padding-top: 35px;
    padding-bottom: 15px;
    text-align: left;
    margin-left: 0;
}
.privat-left p {
    text-align: left;
}
.gewerbe-right {
    width: 47%
}
.gewerbe-right img {
    width: 100%;
    object-fit: cover;
    object-position: 50% 10%;
    height: 250px;
    margin-left: 0;
}
.gewerbe-right h4 {
    padding-top: 35px;
    padding-bottom: 15px;
    text-align: left;
    margin-left: 0;
}
.gewerbe-right p {
    text-align: left;
}

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

.container-led-technik-responsive {
    display: none;
}

.container-led-technik {
    background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/Erneuerbare_Energien_7.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    margin-top: 80px;
    margin-bottom: 100px;
    padding-block: 0;
    position: relative; 
}
.led-technik-flex-50-50 {
    display: flex;
    flex-direction: row;
    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 right container can reference it */
    z-index: 1; /* Ensure content is above the background */
}
.led-technik-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%;
    
}
.led-technik-flex-50-50--left h5,
.led-technik-flex-50-50--left h2 {
    color: var(--color-white);
    margin-left: 0;
}

.led-technik-text p {
    margin-top: 30px;
    color: var(--color-white);
}
.led-technik-flex-50-50--right {
    position: absolute;
    top: 0;
    left: 50%; /* Start from the center */
    right: 0; /* Stretch to the right end of the screen */
    
    height: 480px; /* Match the height of the left side */
    z-index: 0; /* Ensure the background image stays behind the content */
}

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

.strom-sparen-container {
    max-width: 1240px;
    padding-inline: 120px;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 80px;
}
.strom-sparen-container h3 {
    padding-bottom: 30px;
}
.strom-sparen-container p {
    text-align: left;
}
.sparen-punkte-flex {
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.punkt {
    width: 20%;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}
.punkt img {
    width: 25px;
    padding-bottom: 15px;
}


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

.energiemanagement-container {
    max-width: 1240px;
    padding: 80px 120px;
}
.energiemanagement-container-flex {
    display: flex;
    margin-top: 40px;
    gap: calc(20px + 5%);
}
.energiemanagement-content {
    width: 47%
}

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

@media(max-width: 1024px) {
   
    .intro--energieeffizienz {
        margin-top: 70px;
    }
    /*  --------------  */

    .photvoltaikanlangen-flex-50-50 {
        padding: 0px 20px;
    }
    /*  --------------  */
    .stromspeicher-flex-50-50 {
        padding: 0px 20px;
    }
    /*  --------------  */
    .waermepumpe-flex-50-50 {
        padding: 0px 20px;
    }
    /*  --------------  */
    .elektrofahrzeuge-container {
        padding: 20px 0px;
    }
    .elektrofahrzeuge-title {
        padding-inline: 20px;
    }
    /*  --------------  */
    .led-technik-flex-50-50 {
        padding: 0px 20px;
    }
    /*  --------------  */
    .strom-sparen-container {
        padding-inline: 20px;
    }
    /*  --------------  */
    .energiemanagement-container {
        padding: 80px 20px;
    }
}
@media(max-width: 850px) {

    .intro--energieeffizienz {
        margin-top: 63px;
    }
    .photvoltaikanlangen-flex-50-50--right {
        padding: 0px 0 0 30px;
    }
    .stromspeicher-flex-50-50--left {
        padding: 0px 20px 0 0;
    }
    .waermepumpe-flex-50-50--left {
        padding: 0px 30px 0 0;
    }
}
@media(max-width: 768px) {
    /*  --------------  */
    .photvoltaikanlangen-flex-50-50 {
        display: none;
    }
    .photvoltaikanlangen-responsive {
        display: block;
    }
    .photvoltaikanlangen-text-responsive {
        margin-top: 30px; 
    }
    .container-photvoltaikanlangen-content-responsive {
        padding: 50px 20px 30px;
    }
    /*  --------------  */
    /*  --------------  */

    .strom-sparen-container {
        max-width: 1240px;
        padding-inline: 20px;
        text-align: left;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .stromspeicher-flex-50-50 {
        display: none;
    }
    .stromspeicher-responsive {
        display: block;
    }
    .stromspeicher-responsive img {
        width: 100%;
    }
    .stromspeicher-content-responsive {
        padding: 50px 20px 30px;
    }
    .stromspeicher-text-responsive {
        margin-top: 30px;
    }
    .stromspeicher-content-responsive img {
        margin: 0;
    }
    /*  --------------  */
    .container-waermepumpen {
        display: none; 
    }
    .container-waermepumpen-responsive {
        display: block;
        margin: 0;
    }
    .waermepumpe-content-responsive {
        color: var(--color-white);
        background-color: var(--color-accent1);
        padding: 80px 20px 50px;
    }
    .waermepumpe-text-responsive {
        margin-top: 30px;
    }
    .waermepumpe-content-responsive h5,
    .waermepumpe-content-responsive h2, 
    .waermepumpe-content-responsive p {
        color: var(--color-white);
    }
    .container-waermepumpen-responsive img {
        width: 100%;
    }
    /*  --------------  */
    
    
    .elektrofahrzeuge-container {
        padding-top: 80px;
        padding-inline: 0px;
        padding-bottom: 30px;
    }
    
    .elektrofahrzeuge-title {
        text-align: left;
    }
    .privat-gewerbe-flex {
        display: block;
        margin-top: 20px;
    }
    .privat-left {
        width: 100%;
    }
    .privat-left h4,
    .privat-left p {
        padding-inline: 20px;
    }
    .gewerbe-right {
        width: 100%;
        margin-top: 20px;
    }
    .gewerbe-right h4,
    .gewerbe-right p {
        padding-inline: 20px;
    }
    .container-led-technik {
        margin-bottom: 30px;
    }
    
}
@media(max-width: 650px) {
    .intro--energieeffizienz {
        margin-top: 55px;
    } 
    /*  --------------  */
    .punkt {
        width: 50%;
        display: flex;
        flex-direction: column;
    }
    /*  --------------  */
    .energiemanagement-content {
        width: 100%
    }
    .energiemanagement-container-flex {
        display: block;
    }
    .led-technik-flex-50-50--left {
        width: 50%;
        padding: 0px 40px 0 0;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Vertically center the content */
        height: 100%;
    }
}


@media(max-width: 550px) {
    .container-led-technik {
        display: none;
    }
    .container-led-technik-responsive {
        display: block;
    }
  
    .led-technik-title-responsive {
        margin-top: -450px;
        position: relative;
        z-index: 10;
    }
    .container-led-technik-responsive img {
        position: relative; /* Make it stackable */
        z-index: 1; /* Push it behind */
    }
    .led-technik-title-responsive h5,
    .led-technik-title-responsive h2 {
        color: var(--color-white);
        padding-inline: 20px;
    }
    .led-technik-text-responsive p {
        color: var(--color-white);
        padding-inline: 20px;
        margin-top: 30px;
    }
    
    .strom-sparen-container {
        padding-inline: 20px;
        text-align: left;
        margin-top: 50%;
    }
}