/* WEBFONTS ####################################### */

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Light.eot');
    src: url('fonts/Gotham-Lightd41d.eot?#iefix') format('embedded-opentype'),
        url('fonts/Gotham-Light.woff2') format('woff2'),
        url('fonts/Gotham-Light.woff') format('woff'),
        url('fonts/Gotham-Light.ttf') format('truetype'),
        url('fonts/Gotham-Light.svg#Gotham-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Gotham Bold';
    src: url('fonts/Gotham-Bold.eot');
    src: url('fonts/Gotham-Boldd41d.eot?#iefix') format('embedded-opentype'),
        url('fonts/Gotham-Bold.woff2') format('woff2'),
        url('fonts/Gotham-Bold.woff') format('woff'),
        url('fonts/Gotham-Bold.ttf') format('truetype'),
        url('fonts/Gotham-Bold.svg#Gotham-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* END WEBFONTS ################################### */

/* VARIABLEN ####################################### */

:root {

/* TYPO */

--mengentext: 'Gotham';
--boldText:   'Gotham Bold';
--bigHeadlines: clamp(1.125rem, 0.6838rem + 2.3529vw, 3.625rem);
--introBoxtext: clamp(1.375rem, 0.9295rem + 0.9281vw, 1.625rem);
--introBoxtextm992: 22px;
--footerHeadline:   clamp(1.75rem, 1.5294rem + 1.1765vw, 3rem);
--footerSmalltxt:   clamp(1rem, 1rem + 0vw, 1rem);
--footerBigtxt:   clamp(1.375rem, 1.2647rem + 0.5882vw, 2rem);
--normalText: clamp(0.75rem, 0.6176rem + 0.7059vw, 1.5rem);

/* COLORS */

--transparent: rgba(0,0,0,0);
--weiss: #fff;
--rot: #E63C4A;
--dunkel: #383A35;

}

/* END VARIABLEN ################################### */

/* BODY ####################################### */

body {
    font-family: var(--mengentext);
    color: var(--weiss);
    font-size: var(--normalText);
}

strong, b, h1 {
    font-family: var(--boldText);
}

h1 {
    font-size: var(--bigHeadlines);
}

h2 {
    font-family: var(--mengentext);
    font-size: var(--bigHeadlines);
    letter-spacing: 4px;
    margin-bottom: 30px;
}

/* END BODY ################################### */

/* HEADER ####################################### */

#sp-header-mks {
    position: absolute;
    background-color: var(--transparent);
    width: 100%;
    z-index: 900;
}

#sppb-addon-1720685570401 > div > div > div > a > img {
    height: 133px;
    width: auto;
}

.mks__callMe img {
    height: 85px;
    width: auto;
}

/* END HEADER ################################### */

/* INTRO ####################################### */

#mks__introBox .sppb-addon-content {
    font-family: var(--boldText);
    font-size: var(--introBoxtext);
    text-align: center;
    scale: 1;
    filter: grayscale(1);
    transition: .3s;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#mks__introBox .sppb-addon-content:hover {
    scale:1.02;
    filter: grayscale(0);
    transition: .3s;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

#mks__introBox .sppb-addon-content h3 {
    font-size: var(--introBoxtext);
}

.sppb-addon-image-layout-caption {
    background: rgba(0,0,0,1);
}

/* END INTRO ################################### */

/* FOOTER ####################################### */

footer h2.sppb-addon-title {
    font-size: var(--footerHeadline);
}

footer .sppb-addon-single-image-container img {
    max-height: 100px;
    width: auto;
}



        .contact-info {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: left;
        }

        .contact-info img {
            margin-right: 20px;
            max-width: 60px;
        }

        .contact-info p {
            letter-spacing: 3px;
            margin: 0;
            font-size: var(--footerSmalltxt);
        }

        .contact-info a {
            font-family: var(--boldText);
            font-size: var(--footerBigtxt);
            color: var(--weiss)!important;
        }

        .contact-info a:hover {
            font-family: var(--boldText);
            font-size: var(--footerBigtxt);
            color: var(--rot)!important;
        }

        .contact-info p span {
            display: block;
            font-size: 1em; /* Größe des "WIR SIND ERREICHBAR:" Texts */
            text-transform: uppercase; /* Text in Großbuchstaben */
        }

        @media (max-width: 768px) {
            .contact-info {
                justify-content: center; /* Text linksbündig bei kleineren Bildschirmen */
            }

            .contact-info img {
                margin-right: 10px;
                width: 50px;
            }

         .contact-info p {
            margin: 0;
            font-size: 10px;
        }

        }
/* END FOOTER ################################### */

/* FOOTER 2 ####################################### */

section#sp-footer-2 {
    background-color: var(--dunkel);
    padding: 20px 0 50px 0 ;
}

 .footer {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .footer li {
            margin: 0 10px;
        }

        .footer li:not(:last-child)::after {
            content: "|";
            margin-left: 10px;
        }

        .footer li a {
            color: var(--weiss)!important;
        }

        .footer li a:hover {
            color: var(--rot)!important;
        }

        @media (max-width: 768px) {


            .footer {
                flex-direction: column;
            }

            .footer li {
                margin: 10px 0;
            }

            .footer li:not(:last-child)::after,
            .footer li::after {
                content: "";
                margin-left: 0;
            }
        }

/* END FOOTER 2 ################################### */

/* GLOBAL ####################################### */

/* END GLOBAL ################################### */

/* GLOBAL ####################################### */

/* END GLOBAL ################################### */

/* MEDIA QUERIES ####################################### */

/* HEADER */


@media (max-width: 768px) {

.mks__logoArea img {
    max-height: 55px;
    width: auto;
}

.mks__callMe img {
    max-height: 35px;
    width: auto;
}

}

@media (min-width: 769px) and (max-width: 991px) {

.mks__logoArea img {
    max-height: 90px;
    width: auto;
}

.mks__callMe img {
    max-height: 60px;
    width: auto;
}


}

@media (min-width: 992px) and (max-width: 1199px) { 

#mks__introBox .sppb-addon-content h3 {
    font-size: var(--introBoxtextm992);
}


}

/* END MEDIA QUERIES ################################### */