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

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

}

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


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

.konnektivität-container {
    max-width: 1240px;
    text-align: left;
    padding-inline: 120px;
    margin-top: 120px;
    margin-bottom: 0px;
}
.konnektivitat-flex {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.konnektivität-text-responsive {
    display: none;
}
.konnektivität-text-1,
.konnektivität-text-2 {
    width: 46%;
    margin-left: 0;
    padding-block: 30px;
}
.konnektivität-list {
    display: flex;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.konnektivität-list-responsive {
    display: none;
}
.konnektivität-list-1,
.konnektivität-list-2 {
    width: 50%;
    margin-left: 0;
    padding-block: 30px;
}

.konnektivität-list-1 ul,
.konnektivität-list-2 ul {
    list-style-type: none; /* Remove the default bullet */
    padding-left: 0px; /* Adjust space for the image */
}

.konnektivität-list-1 ul li,
.konnektivität-list-2 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: 30px; /* Space between the image and the text */
}


/*  --------------  */
.container-glasfasertechnologie-responsive {
    display: none;
}

.container-glasfasertechnologie {
    background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/Netzwerkinfrastruktur_2.webp');
    background-size: cover;
    background-position: 20% 65%;
    background-repeat: no-repeat;
    height: 500px;
    margin-top: 120px;
    margin-bottom: 0px;
    display: flex; 
}
.glasfasertechnologie-container {
    max-width: 1240px;
    padding-inline: 120px;
}
.glasfasertechnologie-content {
    width: 50%;
    padding: 0px 60px 0 0;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content */
    height: 100%;   
}
.glasfasertechnologie-content h5,
.glasfasertechnologie-content h2,
.glasfasertechnologie-content p {
    color: var(--color-white);
    text-shadow: #1176a2 1px 0 10px;
    margin-left: 0;
}
.glasfasertechnologie-text {
    padding-top: 30px;
}


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



.high-speed-flex {
    max-width: 1240px;
    padding-inline: 120px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    margin-bottom: 110px;
}
.high-speed-content {
    width: 50%;
    margin-left: 0;  
}

.high-speed-content h3 {
    text-align: left;
    margin-left: 0;
    padding-bottom: 20px;
    width: 60%;
}
.high-speed-content p {
    text-align: left;
}
.high-speed-list {
    margin-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 43%;
    background-color: var(--color-accent1);
}


.high-speed-list ul {
    list-style-type: none; /* Remove the default bullet */
    padding: 50px 20px;
}

.high-speed-list ul li {
    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 */
    color: var(--color-white);
    text-align: left;
    padding-bottom: 15px;
}
/*  --------------  */

.satellitensysteme-responsive {
    display: none;
}
.satellitensysteme-flex-50-50 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1240px;
    height: 480px;
    padding: 0px 120px;
    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 */
}
.satellitensysteme-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%;
    
}
.satellitensysteme-flex-50-50--right h5,
.satellitensysteme-flex-50-50--right h2,
.satellitensysteme-flex-50-50--right p {
    margin-left: 0;
}
.satellitensysteme-text {
    padding-top: 30px;
}
.satellitensysteme-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/D_Netzwerkinfrastruktur_Satellitensysteme.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 */
}

/*  --------------  */
.vernetzungstechnik-responsive {
    display: none;
}
.vernetzungstechnik-flex-50-50 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1240px;
    height: 480px;
    padding: 0px 120px;
    margin-bottom: 120px;
    margin-inline:  auto;
    gap: 0px;
    position: relative; /* So that the absolute right container can reference it */
    z-index: 1; /* Ensure content is above the background */
    
}
.vernetzungstechnik-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%;
    
}
.vernetzungstechnik-flex-50-50--left h5,
.vernetzungstechnik-flex-50-50--left h2,
.vernetzungstechnik-flex-50-50--left p {
    margin-left: 0;
}

.vernetzungstechnik-text {
    margin-top: 30px;
}
.vernetzungstechnik-text p {
    padding-bottom: 30px;
}
.vernetzungstechnik-flex-50-50--left a {
    margin-left: 0;
    font-family: "inter-bold";
}
.vernetzungstechnik-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/vernetzungstechnik.jpeg');
    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 */
}


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

.partner-container {
    max-width: 1240px;
    padding-inline: 120px;
    text-align: center;
    margin-top: 120px;
    margin-bottom: 120px;
}
.partner-container h3 {
    padding-bottom: 30px;
}

.partner-list {
    padding-top: 40px;
}
.partner-list ul {
    list-style-type: none; /* Remove the default bullet */
}

.partner-list ul li {
    background-image: url('https://awstorageus1.blob.core.windows.net/meurer-public/images/Check_mark_green.svg');
    background-repeat: no-repeat;
    background-position: 0; /* Adjust the position of the image */
    background-size: 20px 20px; /* Control the width and height of the image */
    padding-inline: 30px; /* Space between the image and the text */
    color: var(--color-text);
    font-weight: 700;
    text-align: left;
    line-height: 2rem;
    display: inline;
}



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

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

.loslegen-container {
    padding-block: 130px;
    background-color: var(--light-grey-background);
    text-align: center;
    margin-top: 100px;
    margin-bottom: 0;
    padding-inline: 120px;
}
.loslegen-container .button-wrapper,
.loslegen-container .telephone-wrapper {
    margin-top: 40px; /* Maintain spacing between the elements */
}
.loslegen-container a.button {
    display: inline-block; /* Keep the button as inline-block */
}

.loslegen-container .telephone-wrapper a {
    display: block; /* Keep the telephone link as a block element */
    text-decoration: none; /* Remove underline from the telephone link */
    color: var(--telephone-text-color); /* Set text color */
}

.loslegen-container .telephone-wrapper a img {
    vertical-align: middle; /* Align the image vertically with the text */
}

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

@media(max-width: 1024px) {
    .intro--kommunikationstechnik {
        margin-top: 70px;
    }
    /*  --------------  */
    .konnektivität-container {
        text-align: left;
        margin-block: 80px;
        padding-inline: 20px;
    }
    /*  --------------  */
    .container-glasfasertechnologie {
        height: 450px;

    }
    /*  --------------  */
    .glasfasertechnologie-container {
        max-width: 1240px;
        padding-inline: 20px;
        padding-block: 10px
    }
    .glasfasertechnologie-content {
        width: 55%;   
    }
    /*  --------------  */
    .high-speed-flex {
        padding-inline: 20px;
        margin-block: 80px;
    }

    /*  --------------  */
    .satellitensysteme-flex-50-50 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        max-width: 1240px;
        height: 480px;
        padding: 0px 20px;
        margin: auto;
        gap: 0px;
        position: relative; /* So that the absolute right container can reference it */
        z-index: 1; /* Ensure content is above the background */
    }
    /*  --------------  */
    .vernetzungstechnik-flex-50-50 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        max-width: 1240px;
        height: 400px;
        padding: 0px 20px;
        margin:  auto;
        gap: 0px;
        position: relative; /* So that the absolute right container can reference it */
        z-index: 1; /* Ensure content is above the background */

    }
    .partner-container {
        max-width: 1240px;
        padding-inline: 20px;
        text-align: center;
        margin-top: 150px;
        margin-bottom: 100px;
    }

    .loslegen-container {
        padding-block: 130px;
        background-color: var(--light-grey-background);
        text-align: center;
        margin-top: 100px;
        margin-bottom: 0;
        padding-inline: 20px;
    }
}

@media(max-width: 850px) {
    .intro--kommunikationstechnik {
        margin-top: 63px;
    }

    .konnektivität-container {
        margin-block: 50px;
    }
    .konnektivität-text-responsive {
        display: block;
        padding-block: 30px;
    }
    .konnektivität-text-1,
    .konnektivität-text-2 {
        display: none;
    }
    .konnektivität-list {
        display: none;
    }
    .konnektivität-list-responsive {
        display: block;
        margin-left: 0;
    }
    .konnektivität-list-responsive ul {
        list-style-type: none; /* Remove the default bullet */
        padding-left: 0px; /* Adjust space for the image */
    }

    .konnektivität-list-responsive 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: 30px; /* Space between the image and the text */
        padding-block: 5px;
    }

    .glasfasertechnologie-content {
        width: 70%; 
    }

}

@media(max-width: 768px) {
    .container-glasfasertechnologie {
        background-position: 50% 50%;
    }
    .glasfasertechnologie-content {
        width: 48%;   
    }

    .high-speed-flex {
        flex-direction: column;
        margin-block: 50px;
    }
    .high-speed-content {
        width: 100%; 
    }
    .high-speed-list {
        margin-top: 30px;
        width: 100%;
    }

    .satellitensysteme-flex-50-50 {
        display: none;
    }
    .satellitensysteme-responsive {
        display: block;
    }
    .satellitensysteme-responsive-text {
        padding: 20px 20px 30px 20px;
    }
    .satellitensysteme-text-responsive {
        padding-top: 30px;
    }
    .vernetzungstechnik-flex-50-50 {
        display: none;
    }
    .vernetzungstechnik-responsive {
        display: block;
    }
    .vernetzungstechnik-responsive-title {
        padding: 70px 20px 30px 20px;
    }
    .vernetzungstechnik-text-responsive {
        margin-top: 30px;
    }
    .vernetzungstechnik-text-responsive p {
        padding-bottom: 30px;
    }
    .vernetzungstechnik-responsive-text a {
        font-weight: 700;
    }
    .partner-container {
        text-align: left;
        margin-block: 70px;
    }
}

@media(max-width: 650px) {
    .intro--kommunikationstechnik {
        margin-top: 55px;
    }
    .container-glasfasertechnologie {
        display: none;
    }
    .container-glasfasertechnologie-responsive {
        display: block;
    }
    .glasfasertechnologie-content-responsive {
        background-image: url("https://awstorageus1.blob.core.windows.net/meurer-public/images/M_Netzwerk.webp");
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        height: 750px;
    }

    .glasfasertechnologie-content-responsive {
        padding: 40px 20px;
        background-color: rgb(17, 34, 47);
    }

    .glasfasertechnologie-text-responsive {
        margin-top: 30px;
    }
    
    .glasfasertechnologie-content-responsive h5,
    .glasfasertechnologie-content-responsive h2,
    .glasfasertechnologie-content-responsive p {
        color: var(--color-white);
    }
}

@media(max-width: 550px) {
    .glasfasertechnologie-content-responsive {
        height: 650px;
    }
}
@media(max-width: 450px) {
    .glasfasertechnologie-content-responsive {
        height: 550px;
    }
}